title
2.2 Geolocation Web API - Working with Data and APIs in JavaScript

description
💻https://github.com/CodingTrain/Intro-to-Data-APIs-JS Before diving into communication between client and server (GET and POST requests), let's look at the Geolocation Web API with navigator.geolocation. This data will be sent to the server and stored in a database in upcoming videos. 🔗 Web API Navigator: https://developer.mozilla.org/en-US/docs/Web/API/Navigator 🎥 NEXT LESSON: https://youtu.be/Kw5tC5nQMRY 🎥 PREVIOUS LESSON: https://youtu.be/wxbQP1LMZsw 🎥 FULL COURSE: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6YxDKpFzf_2D84p0cyk4T7X 🚂 Website: http://thecodingtrain.com/ 💖 Patreon: https://patreon.com/codingtrain 🛒 Store: https://www.designbyhumans.com/shop/codingtrain/ 📚 Books: https://www.amazon.com/shop/thecodingtrain 🎥 Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH 🎥 Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA 🔗 p5.js: https://p5js.org 🔗 Processing: https://processing.org Welcome to Working with Data and APIs in Javascript! This course is for aspiring developers who want to learn how to work with data in web applications. How do you retrieve, collect, and store data? We are now in Module #2! In our previous module, we focused on client-side JavaScript. We now will learn the basics of server-side programming with Node. 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '2.2 Geolocation Web API - Working with Data and APIs in JavaScript', 'heatmap': [{'end': 401.485, 'start': 374.523, 'weight': 0.721}, {'end': 441.093, 'start': 402.106, 'weight': 0.708}, {'end': 777.279, 'start': 734.616, 'weight': 0.862}, {'end': 821.582, 'start': 792.932, 'weight': 0.856}], 'summary': 'Explores client-side vs server-side programming, emphasizing the need for server-side execution for sensitive operations and discussing potential security risks. it also highlights geolocation and camera access in secure contexts, emphasizing the importance of https and covers geolocation security measures and client-server data communication.', 'chapters': [{'end': 323.972, 'segs': [{'end': 102.291, 'src': 'embed', 'start': 20.413, 'weight': 0, 'content': [{'end': 29.915, 'text': 'If you watched the first video, all I did really was make two files index.js, the JavaScript node code to run on the server, and index.html,', 'start': 20.413, 'duration': 9.502}, {'end': 33.356, 'text': 'the web page that the server is hosting up to run on the client.', 'start': 29.915, 'duration': 3.441}, {'end': 40.017, 'text': "And this is one of the most confusing things when you're first learning to program and thinking about client side versus server side,", 'start': 33.616, 'duration': 6.401}, {'end': 41.837, 'text': 'and when do I want to do one and what goes on where?', 'start': 40.017, 'duration': 1.82}, {'end': 46.038, 'text': "So let's take a minute to dissect that a little bit here.", 'start': 42.118, 'duration': 3.92}, {'end': 48.479, 'text': 'We have the file, index.', 'start': 46.518, 'duration': 1.961}, {'end': 54.046, 'text': 'This is the server.', 'start': 51.864, 'duration': 2.182}, {'end': 59.689, 'text': 'The only functionality on the server right now is as follows.', 'start': 55.847, 'duration': 3.842}, {'end': 63.231, 'text': 'Host static files.', 'start': 60.109, 'duration': 3.122}, {'end': 66.453, 'text': 'The goal here is to build additional functionality.', 'start': 64.172, 'duration': 2.281}, {'end': 71.937, 'text': 'What other kinds of things does the server need to do? Save information to a database, for example.', 'start': 66.593, 'duration': 5.344}, {'end': 76.22, 'text': 'Retrieve information from the database and pass it to the client also.', 'start': 72.817, 'duration': 3.403}, {'end': 79.543, 'text': 'But for right now, all it does is host static files.', 'start': 77.062, 'duration': 2.481}, {'end': 85.445, 'text': 'And the static file it happens to host is index.html, living on the server.', 'start': 79.883, 'duration': 5.562}, {'end': 93.908, 'text': 'What happens, the client connects to the server and says, I would like to request to view your website, your web application.', 'start': 85.845, 'duration': 8.063}, {'end': 102.291, 'text': 'And so with that request, index.html gets sent to the client.', 'start': 94.328, 'duration': 7.963}], 'summary': 'The server hosts index.html as a static file, with future goals to save and retrieve data from a database.', 'duration': 81.878, 'max_score': 20.413, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww20413.jpg'}, {'end': 161.704, 'src': 'embed', 'start': 132.441, 'weight': 1, 'content': [{'end': 134.923, 'text': 'We have JavaScript in index.html.', 'start': 132.441, 'duration': 2.482}, {'end': 139.207, 'text': "This JavaScript that's running on the server is never seen by the client.", 'start': 135.404, 'duration': 3.803}, {'end': 141.809, 'text': 'It has no ability to access this code.', 'start': 139.547, 'duration': 2.262}, {'end': 143.65, 'text': 'It can make a request.', 'start': 142.209, 'duration': 1.441}, {'end': 145.051, 'text': "This is a program that's running.", 'start': 143.75, 'duration': 1.301}, {'end': 145.992, 'text': 'The code is hidden.', 'start': 145.091, 'duration': 0.901}, {'end': 153.318, 'text': 'This is an important distinction, because at some point when we start connecting to APIs, we might need to do some authentication.', 'start': 146.312, 'duration': 7.006}, {'end': 156.64, 'text': "So that's another thing that we want to do here on the server.", 'start': 153.678, 'duration': 2.962}, {'end': 161.704, 'text': 'We said earlier, save to database.', 'start': 157.481, 'duration': 4.223}], 'summary': 'Javascript code on server is hidden, can make requests, and handle authentication and database saving.', 'duration': 29.263, 'max_score': 132.441, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww132441.jpg'}, {'end': 280.626, 'src': 'embed', 'start': 247.694, 'weight': 5, 'content': [{'end': 248.974, 'text': "So they're both in one place.", 'start': 247.694, 'duration': 1.28}, {'end': 255.856, 'text': "Towards the end of this video series, I'm going to show you how to take the server and deploy it to the cloud, so to speak,", 'start': 249.634, 'duration': 6.222}, {'end': 260.036, 'text': "or a server that's somewhere else that many clients could ultimately connect to.", 'start': 255.856, 'duration': 4.18}, {'end': 262.237, 'text': "So I'm just repeating a lot of the same stuff over and over again.", 'start': 260.096, 'duration': 2.141}, {'end': 268.038, 'text': "But so all we're going to do in this first step is figure out how to geolocate where the client is,", 'start': 262.577, 'duration': 5.461}, {'end': 275.081, 'text': "show the client their latitude and longitude on their browser page, And then we'll be ready for the next step,", 'start': 268.038, 'duration': 7.043}, {'end': 280.626, 'text': "which I'll do in the subsequent video to send that information to the server and have the server save it to a database.", 'start': 275.081, 'duration': 5.545}], 'summary': 'Demonstrating geolocation for client and server deployment to the cloud.', 'duration': 32.932, 'max_score': 247.694, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww247694.jpg'}], 'start': 0.578, 'title': 'Client-side vs server-side programming', 'summary': 'Explores the differences between client-side and server-side programming, focusing on hosting static files on the server and adding functionality like database operations. it also discusses the importance of server-side execution for handling sensitive operations and the potential security risks of client-side javascript execution.', 'chapters': [{'end': 102.291, 'start': 0.578, 'title': 'Data selfie app: client-side vs server-side programming', 'summary': 'Explains the difference between client-side and server-side programming, focusing on hosting static files on the server, and the goal to add functionality such as saving and retrieving information from a database.', 'duration': 101.713, 'highlights': ['The server currently hosts static files only, such as index.html, and the client requests to view the web application, resulting in index.html being sent to the client. This explains the current functionality of the server and the process of the client requesting and receiving the web page.', 'The goal is to add functionality to the server, such as saving information to a database and retrieving information from the database to pass to the client. This highlights the intended future functionality of the server, emphasizing the purpose of saving and retrieving information from a database.', 'The chapter introduces the confusion surrounding client-side versus server-side programming and the need to understand when to use each. This is an important point as it addresses the confusion often faced when learning about client-side and server-side programming.']}, {'end': 196.754, 'start': 103.561, 'title': 'Client-side javascript vs server-side javascript', 'summary': 'Explains the difference between client-side and server-side javascript, emphasizing the importance of server-side execution for handling sensitive operations like authentication and database operations, while also highlighting the potential security risks of executing javascript on the client side.', 'duration': 93.193, 'highlights': ["Server-side JavaScript is crucial for handling sensitive operations such as authentication and database operations, while client-side JavaScript runs on the user's browser and is visible to the user, posing potential security risks.", 'Server-side JavaScript executes code that is hidden from the client, ensuring that sensitive operations and authentication processes are not exposed to users, providing a layer of security.', 'Client-side JavaScript, on the other hand, is visible to users, allowing potential access to sensitive information like API keys, making server-side execution essential for secure authentication processes and protection of sensitive data.']}, {'end': 323.972, 'start': 197.015, 'title': 'Adding geolocation functionality to client', 'summary': 'Discusses adding geolocation functionality to the client using javascript, emphasizing the capability to geolocate clients, the use of the web api navigator for accessing user information, and the future deployment of the server to a cloud environment for multiple client connections.', 'duration': 126.957, 'highlights': ['The chapter emphasizes the capability to geolocate clients and its distinction from the server, which can be deployed to a cloud environment for multiple client connections.', 'It discusses the use of the Web API navigator for accessing user information such as language settings and battery status in JavaScript for client-side browsers.', 'The focus is on adding geolocation functionality to the client using JavaScript, preparing to send the geolocated information to the server in the subsequent video.']}], 'duration': 323.394, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww578.jpg', 'highlights': ['The server currently hosts static files only, such as index.html, and the client requests to view the web application, resulting in index.html being sent to the client.', "Server-side JavaScript is crucial for handling sensitive operations such as authentication and database operations, while client-side JavaScript runs on the user's browser and is visible to the user, posing potential security risks.", 'The chapter introduces the confusion surrounding client-side versus server-side programming and the need to understand when to use each.', 'The goal is to add functionality to the server, such as saving information to a database and retrieving information from the database to pass to the client.', 'Server-side JavaScript executes code that is hidden from the client, ensuring that sensitive operations and authentication processes are not exposed to users, providing a layer of security.', 'The chapter emphasizes the capability to geolocate clients and its distinction from the server, which can be deployed to a cloud environment for multiple client connections.']}, {'end': 560.268, 'segs': [{'end': 374.263, 'src': 'embed', 'start': 324.452, 'weight': 0, 'content': [{'end': 328.493, 'text': 'This feature is available only in secure context HTTPS.', 'start': 324.452, 'duration': 4.041}, {'end': 332.857, 'text': 'So this is quite true of several things.', 'start': 330.054, 'duration': 2.803}, {'end': 340.465, 'text': "For example, if your website is not hosted in a secure context, you may not be able to get access to a user's webcam.", 'start': 332.917, 'duration': 7.548}, {'end': 343.087, 'text': "That's another feature that we're going to add here.", 'start': 340.585, 'duration': 2.502}, {'end': 345.49, 'text': 'So this is something to really be conscientious about.', 'start': 343.107, 'duration': 2.383}, {'end': 350.976, 'text': 'For us right now, developing locally on this laptop, the permissions are much more loose.', 'start': 345.75, 'duration': 5.226}, {'end': 355.662, 'text': "We're allowed to access geolocation, allowed to access the camera and localhost,", 'start': 351.897, 'duration': 3.765}, {'end': 361.17, 'text': "because we haven't actually deployed anything to a real web server where there's users besides ourselves just playing around with it.", 'start': 355.662, 'duration': 5.508}, {'end': 365.056, 'text': "But this is definitely something you're going to want to watch out for when you get to that deployment stage.", 'start': 361.37, 'duration': 3.686}, {'end': 372.281, 'text': 'The other thing to really be aware of is not every browser that anybody might be using on any operating system, with any version,', 'start': 365.376, 'duration': 6.905}, {'end': 374.263, 'text': 'is going to have support for geolocation.', 'start': 372.281, 'duration': 1.982}], 'summary': "Https required for accessing user's webcam and geolocation. deployment stage critical.", 'duration': 49.811, 'max_score': 324.452, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww324452.jpg'}, {'end': 401.485, 'src': 'heatmap', 'start': 374.523, 'weight': 0.721, 'content': [{'end': 379.988, 'text': "So the first thing you would always want to do in your code is test to see if geolocation is even a thing that's available.", 'start': 374.523, 'duration': 5.465}, {'end': 384.851, 'text': 'Luckily for us, the code for how to do that is right here on the documentation page.', 'start': 380.348, 'duration': 4.503}, {'end': 387.874, 'text': "So I would consider retyping it, but it'll be easy to just copy paste.", 'start': 384.911, 'duration': 2.963}, {'end': 388.674, 'text': "So I'm going to take that.", 'start': 387.894, 'duration': 0.78}, {'end': 392.577, 'text': "I'm going to go back to our index.html file.", 'start': 388.995, 'duration': 3.582}, {'end': 394.199, 'text': "I'm going to add.", 'start': 392.938, 'duration': 1.261}, {'end': 401.485, 'text': 'to the body a script tag so that I can put this code in here.', 'start': 395.575, 'duration': 5.91}], 'summary': 'Test for geolocation availability in code, using documentation code for simplicity.', 'duration': 26.962, 'max_score': 374.523, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww374523.jpg'}, {'end': 452.421, 'src': 'heatmap', 'start': 402.106, 'weight': 3, 'content': [{'end': 407.796, 'text': "And I'm going to say console.log geolocation available.", 'start': 402.106, 'duration': 5.69}, {'end': 414.225, 'text': 'And then console.log geolocation not available.', 'start': 410.12, 'duration': 4.105}, {'end': 419.532, 'text': 'So at a minimum here, when I load the page, I should see one or the other of those messages.', 'start': 414.486, 'duration': 5.046}, {'end': 421.955, 'text': 'And geolocation is available.', 'start': 420.113, 'duration': 1.842}, {'end': 427.963, 'text': 'Fantastic So if geolocation is available, then I can choose to take the next step and geolocate.', 'start': 422.056, 'duration': 5.907}, {'end': 432.367, 'text': 'The way that I do that is through by calling the getCurrentPosition function.', 'start': 428.624, 'duration': 3.743}, {'end': 441.093, 'text': 'And the getCurrentPosition function requires me to pass in a callback function that is executed when the position is ready to be retrieved.', 'start': 432.447, 'duration': 8.646}, {'end': 448.298, 'text': "That's a bit of a mouthful, but we can copy paste the code that's here on the documentation page and then unpack that a little bit.", 'start': 441.153, 'duration': 7.145}, {'end': 449.379, 'text': "So let's go to our code.", 'start': 448.318, 'duration': 1.061}, {'end': 452.421, 'text': "If it's available, I want to put this here.", 'start': 449.879, 'duration': 2.542}], 'summary': 'The code checks for geolocation availability and calls getcurrentposition function for geolocating.', 'duration': 50.315, 'max_score': 402.106, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww402106.jpg'}, {'end': 518.078, 'src': 'embed', 'start': 474.572, 'weight': 4, 'content': [{'end': 476.153, 'text': "I don't need this do something here.", 'start': 474.572, 'duration': 1.581}, {'end': 481.198, 'text': "This is a nice little, it's implying like the documentation is implying and now you do something with that.", 'start': 476.173, 'duration': 5.025}, {'end': 485.922, 'text': 'All I want to do to see that this works is actually console log this out.', 'start': 481.558, 'duration': 4.364}, {'end': 495.551, 'text': "So I'm going to say console log position coordinates latitude and console log position coordinates longitude.", 'start': 486.262, 'duration': 9.289}, {'end': 496.931, 'text': 'Get the current position.', 'start': 495.851, 'duration': 1.08}, {'end': 501.433, 'text': "When it's ready, call this callback, pass in position, and console log it.", 'start': 497.252, 'duration': 4.181}, {'end': 507.795, 'text': 'I am trying to do this series about building these projects using updated ES6 syntax.', 'start': 501.913, 'duration': 5.882}, {'end': 509.656, 'text': "There's a variety of different versions of JavaScript.", 'start': 507.855, 'duration': 1.801}, {'end': 511.796, 'text': 'ES6 is actually from quite a while ago.', 'start': 510.016, 'duration': 1.78}, {'end': 514.437, 'text': 'I have a bunch of videos about different versions of JavaScript.', 'start': 511.816, 'duration': 2.621}, {'end': 518.078, 'text': 'But what I mean here specifically is I want to use the arrow syntax.', 'start': 514.616, 'duration': 3.462}], 'summary': 'Building projects using es6 syntax, emphasizing arrow syntax.', 'duration': 43.506, 'max_score': 474.572, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww474572.jpg'}], 'start': 324.452, 'title': 'Geolocation and camera access in secure contexts and using getcurrentposition function in javascript', 'summary': "Highlights the importance of secure context https for accessing user's webcam, emphasizing the difference in permissions between local development and deployment, and discusses using the getcurrentposition function in javascript to retrieve the current position's latitude and longitude asynchronously, demonstrating the use of es6 syntax for callbacks.", 'chapters': [{'end': 427.963, 'start': 324.452, 'title': 'Geolocation and camera access in secure contexts', 'summary': "Highlights the importance of secure context https for accessing user's webcam and the need to test for geolocation availability before implementing it, emphasizing the difference in permissions between local development and deployment.", 'duration': 103.511, 'highlights': ["The importance of secure context HTTPS for accessing user's webcam and being conscientious about it.", 'The need to test for geolocation availability before implementing it, as not every browser may support it.', 'The difference in permissions between local development and deployment, where local development allows more loose permissions for accessing geolocation and camera.']}, {'end': 560.268, 'start': 428.624, 'title': 'Using getcurrentposition function in javascript', 'summary': "Discusses using the getcurrentposition function in javascript to retrieve the current position's latitude and longitude asynchronously, demonstrating the use of es6 syntax for callbacks.", 'duration': 131.644, 'highlights': ['Demonstrating the use of getCurrentPosition function in JavaScript to retrieve latitude and longitude asynchronously The speaker explains the process of calling the getCurrentPosition function in JavaScript to asynchronously retrieve the latitude and longitude coordinates of the current position.', 'Utilizing ES6 syntax for callback functions The speaker demonstrates the use of ES6 arrow syntax for defining callback functions, simplifying the code for handling the retrieved position coordinates.', 'Console logging the position coordinates for verification The speaker emphasizes the use of console.log to verify the retrieved position coordinates, providing a simplified approach for examining the full object.']}], 'duration': 235.816, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww324452.jpg', 'highlights': ["The importance of secure context HTTPS for accessing user's webcam and being conscientious about it.", 'The need to test for geolocation availability before implementing it, as not every browser may support it.', 'The difference in permissions between local development and deployment, where local development allows more loose permissions for accessing geolocation and camera.', 'Demonstrating the use of getCurrentPosition function in JavaScript to retrieve latitude and longitude asynchronously.', 'Utilizing ES6 syntax for callback functions.', 'Console logging the position coordinates for verification.']}, {'end': 893.824, 'segs': [{'end': 637.822, 'src': 'embed', 'start': 597.138, 'weight': 0, 'content': [{'end': 604.781, 'text': 'or maybe the user by downloading the app and through system settings, has already opted in to that app using location, but just on a website itself.', 'start': 597.138, 'duration': 7.643}, {'end': 605.641, 'text': "the user's got to say allow.", 'start': 604.781, 'duration': 0.86}, {'end': 606.562, 'text': "So I'm going to say allow.", 'start': 605.661, 'duration': 0.901}, {'end': 614.324, 'text': 'And then, ah, boy, that took a while.', 'start': 608.882, 'duration': 5.442}, {'end': 615.705, 'text': 'Took a while.', 'start': 614.965, 'duration': 0.74}, {'end': 620.272, 'text': 'So you can see that for it to figure out, for it to do the geolocation, it takes a while.', 'start': 616.806, 'duration': 3.466}, {'end': 623.036, 'text': 'Now how is it doing the geolocation? This is this laptop.', 'start': 620.292, 'duration': 2.744}, {'end': 624.138, 'text': "It doesn't have a GPS in it.", 'start': 623.056, 'duration': 1.082}, {'end': 626.081, 'text': "Let's look and see what's in here, first of all.", 'start': 624.458, 'duration': 1.623}, {'end': 627.082, 'text': 'So we have coordinates.', 'start': 626.261, 'duration': 0.821}, {'end': 628.264, 'text': 'We have timestamp.', 'start': 627.383, 'duration': 0.881}, {'end': 633.479, 'text': 'Coordinates have accuracy, altitude, if that were possible, heading, latitude, longitude, speed.', 'start': 629.877, 'duration': 3.602}, {'end': 637.822, 'text': "So there's a lot of extra information here that you might get if you were doing this on mobile.", 'start': 633.64, 'duration': 4.182}], 'summary': "User's geolocation request took a while, laptop lacks gps, offers detailed coordinates and extra information for mobile.", 'duration': 40.684, 'max_score': 597.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww597138.jpg'}, {'end': 728.094, 'src': 'embed', 'start': 706.385, 'weight': 3, 'content': [{'end': 715.47, 'text': "This is the heart of this particular module of this series, which is how to communicate data that's extracted in the client,", 'start': 706.385, 'duration': 9.085}, {'end': 717.371, 'text': 'send it to the server and save to the database.', 'start': 715.47, 'duration': 1.901}, {'end': 718.531, 'text': "So in many ways, we're done.", 'start': 717.771, 'duration': 0.76}, {'end': 723.073, 'text': "But let's at least add that latitude and longitude to the web page itself so we can see it in the DOM.", 'start': 718.571, 'duration': 4.502}, {'end': 724.593, 'text': "Let's add a couple DOM elements.", 'start': 723.273, 'duration': 1.32}, {'end': 728.094, 'text': "For example, I'll just say latitude.", 'start': 725.473, 'duration': 2.621}], 'summary': 'This module focuses on communicating client-extracted data to the server and database, with an added emphasis on displaying latitude and longitude in the web page dom.', 'duration': 21.709, 'max_score': 706.385, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww706385.jpg'}, {'end': 777.279, 'src': 'heatmap', 'start': 734.616, 'weight': 0.862, 'content': [{'end': 744.459, 'text': "And then I'll add a break and say the same exact thing, but longitude.", 'start': 734.616, 'duration': 9.843}, {'end': 747.948, 'text': 'Let me also add the degree symbol,', 'start': 745.646, 'duration': 2.302}, {'end': 756.617, 'text': 'which I can do by just saying ampersand D-E-G semicolon and the same exact thing down here ampersand D-E-G semicolon.', 'start': 747.948, 'duration': 8.669}, {'end': 761.973, 'text': 'So now if I refresh the page here, There we go.', 'start': 756.977, 'duration': 4.996}, {'end': 763.874, 'text': 'Latitude and longitude are blank.', 'start': 762.133, 'duration': 1.741}, {'end': 765.835, 'text': "It's got the position there.", 'start': 764.614, 'duration': 1.221}, {'end': 768.176, 'text': "Let's pull out the latitude.", 'start': 766.275, 'duration': 1.901}, {'end': 777.279, 'text': 'Position.coordinates.latitude And then I can say document.getElementById.', 'start': 769.336, 'duration': 7.943}], 'summary': 'Adding latitude and longitude coordinates to a webpage using html entities.', 'duration': 42.663, 'max_score': 734.616, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww734616.jpg'}, {'end': 821.582, 'src': 'heatmap', 'start': 792.932, 'weight': 0.856, 'content': [{'end': 797.934, 'text': "I'm having a serious case of deja vu here because we did a lot of this kind of idea in the previous video.", 'start': 792.932, 'duration': 5.002}, {'end': 800.815, 'text': 'And then I can put that here.', 'start': 798.974, 'duration': 1.841}, {'end': 804.236, 'text': 'And now we are ready to go.', 'start': 801.855, 'duration': 2.381}, {'end': 805.856, 'text': 'Now I can refresh the page.', 'start': 804.636, 'duration': 1.22}, {'end': 807.257, 'text': 'And there we go.', 'start': 806.637, 'duration': 0.62}, {'end': 811.478, 'text': 'We see the latitude and longitude right there in the browser itself.', 'start': 807.317, 'duration': 4.161}, {'end': 812.439, 'text': 'There you have it.', 'start': 811.839, 'duration': 0.6}, {'end': 813.519, 'text': "Now we're done with step two.", 'start': 812.579, 'duration': 0.94}, {'end': 821.582, 'text': 'We have data that we have acquired from the Navigator Geolocation API on the client.', 'start': 813.919, 'duration': 7.663}], 'summary': 'Client acquires latitude and longitude data from navigator geolocation api.', 'duration': 28.65, 'max_score': 792.932, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww792932.jpg'}, {'end': 891.503, 'src': 'embed', 'start': 856.049, 'weight': 5, 'content': [{'end': 862.37, 'text': 'But it so happens that the fetch function can also be used to send data by making it, instead of a get, a post.', 'start': 856.049, 'duration': 6.321}, {'end': 863.731, 'text': 'I can fetch a post.', 'start': 862.49, 'duration': 1.241}, {'end': 864.771, 'text': 'I can post a fetch.', 'start': 863.771, 'duration': 1}, {'end': 868.953, 'text': 'Who knows what the lingo means, but I can send data from the client to the server.', 'start': 865.091, 'duration': 3.862}, {'end': 869.973, 'text': "That'll be the next step.", 'start': 869.253, 'duration': 0.72}, {'end': 873.635, 'text': "And then after that, we'll save data to the database that gets sent, and more and more and more.", 'start': 869.993, 'duration': 3.642}, {'end': 878.897, 'text': 'Before you move on to the next video, I might suggest just playing around with the client code.', 'start': 874.335, 'duration': 4.562}, {'end': 880.958, 'text': 'Add the map with leaflet.', 'start': 879.537, 'duration': 1.421}, {'end': 883.319, 'text': 'Think about maybe a more elegant interaction.', 'start': 881.398, 'duration': 1.921}, {'end': 887.901, 'text': 'Maybe there should be a button the user presses to retrieve the current latitude and longitude.', 'start': 883.359, 'duration': 4.542}, {'end': 889.182, 'text': 'Try it on a mobile device.', 'start': 888.201, 'duration': 0.981}, {'end': 890.262, 'text': "There's a bunch of things you could try.", 'start': 889.202, 'duration': 1.06}, {'end': 891.503, 'text': 'Let me know how that goes in the comments.', 'start': 890.342, 'duration': 1.161}], 'summary': 'The fetch function can be used to send data as a post, allowing for client-server communication and potential enhancements to the client code, such as adding a map with leaflet and enabling user interaction.', 'duration': 35.454, 'max_score': 856.049, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww856049.jpg'}], 'start': 560.528, 'title': 'Geolocation security and client-server data communication', 'summary': 'Covers geolocation security measures, user consent, and the difference in information between devices, as well as client-server data communication, including adding latitude and longitude data to a web page, fetching data using post requests, and emphasizing the importance of client-server communication.', 'chapters': [{'end': 691.138, 'start': 560.528, 'title': 'Geolocation security and process', 'summary': 'Discusses the security measures and user consent required for geolocating a user on a website, the process of geolocation, and the difference in information obtained between a laptop and a mobile device.', 'duration': 130.61, 'highlights': ['The user must explicitly allow geolocation on a website, which may take some time, and the data is obtained from the IP address when using a laptop and GPS when using a mobile device. Explicit user consent, time taken for permission, data source (IP address or GPS)', 'Geolocation on a website requires the user to opt-in, whereas geolocation within an app may already be permitted through app purchase or system settings. Difference in user consent process between website and app', 'Geolocation on a laptop does not have access to GPS data, but provides information such as coordinates, timestamp, accuracy, altitude, heading, latitude, longitude, and speed. Data obtained from laptop geolocation']}, {'end': 893.824, 'start': 691.818, 'title': 'Client-server data communication', 'summary': 'Covers adding latitude and longitude data to a web page using client-side code, fetching data from the client to the server using post requests, and suggests exploring additional client-side interactions before moving on. it emphasizes the importance of communication between the client and server for data storage.', 'duration': 202.006, 'highlights': ['The chapter emphasizes the importance of communication between the client and server for data storage. Emphasizes the significance of client-server communication for data storage.', 'The process involves adding latitude and longitude data to a web page using client-side code. Involves adding latitude and longitude data to a web page using client-side code.', 'It covers fetching data from the client to the server using post requests. Covers fetching data from the client to the server using post requests.', 'Suggests exploring additional client-side interactions before moving on, such as adding a map with leaflet and considering more elegant interactions. Suggests exploring additional client-side interactions before moving on, such as adding a map with leaflet and considering more elegant interactions.']}], 'duration': 333.296, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/3ls013DBcww/pics/3ls013DBcww560528.jpg', 'highlights': ['Geolocation on a website requires explicit user consent and may take some time to obtain permission, with data obtained from the IP address for laptops and GPS for mobile devices.', 'Geolocation within an app may already be permitted through app purchase or system settings, differing from the opt-in process for websites.', 'Laptop geolocation provides information such as coordinates, timestamp, accuracy, altitude, heading, latitude, longitude, and speed, despite not having access to GPS data.', 'The chapter emphasizes the importance of client-server communication for data storage.', 'Involves adding latitude and longitude data to a web page using client-side code.', 'Covers fetching data from the client to the server using post requests.', 'Suggests exploring additional client-side interactions before moving on, such as adding a map with leaflet and considering more elegant interactions.']}], 'highlights': ["Server-side JavaScript is crucial for handling sensitive operations such as authentication and database operations, while client-side JavaScript runs on the user's browser and is visible to the user, posing potential security risks.", 'The chapter emphasizes the capability to geolocate clients and its distinction from the server, which can be deployed to a cloud environment for multiple client connections.', "The importance of secure context HTTPS for accessing user's webcam and being conscientious about it.", 'The need to test for geolocation availability before implementing it, as not every browser may support it.', 'Geolocation on a website requires explicit user consent and may take some time to obtain permission, with data obtained from the IP address for laptops and GPS for mobile devices.', 'The chapter emphasizes the importance of client-server communication for data storage.']}