Programming is an iterative process. Trying to write your whole program in one fell swoop often leads to something unusable. Instead, you write something simple, test it out and make changes until it works. And then you move on to a more complex version of it.
The second iteration to this code is now that we've figured out to get one set of coordinates, let's get multiple coordinates as the user moves around. I do that in the code below.
I've replaced the function getCurrentPosition() with watchPosition(), a geolocation function that will give a user's location every time they move. The watchPosition() function returns an id, which you can use if you want to stop watching a user's position. In this code, I add a "Start Tracking" and "Stop Tracking” button. In the initial state, you can only press the "Start Tracking" button since I've disabled the "Stop Tracking” button. And once you press the start button, the start button becomes disabled and the stop button is enabled. This is done so that any given point in time the user can not press anything they're not supposed to press. The coordinates are stored in a list. They are printed out as a list in the area where it says "You are nowhere!". Below is what the web page looks like when you first load it.
Real-time tracking for my app could be implemented with HTTP with something called long polling. That is, the browser can send a request to the server asking, "Do you have new data for me?" The server holds the request open until it has new data. When it has new data, the server sends it to the browser. The browser is said to have pulled the data from the server. After the browser gets the new data, it immediately sends out another request to the server, "Do you have new data for me?" And this interaction repeats.
With WebSockets, the browser doesn't have to keep asking the server if there's new data. When the server gets any new data, the server can push that new data to the browser. In other words, when a server gets new data, it can just say to the browser, "I have new data. Here it is." This is a more elegant and efficient way of implementing real-time.
https://channels.readthedocs.io/en/latest/tutorial/part_1.html
https://channels.readthedocs.io/en/latest/tutorial/part_2.html
The tutorial creates a basic chat server. After having done this tutorial, I needed to incorporate what I'd learned about WebSockets to my existng maps code.
Below is what the web page for my maps code looks like. My web page has two areas.
The first area is where the coordinates are gotten from the browser and displayed to the browser. This was originally in the second version of our maps code. The second area, which is new, is the text area. When coordinates are gotten from the browser, the coordinates (which is basically in the form of text) is sent to the server. When the server gets those coordinates, it then pushes it to everyone that is subscribed to a group. Because we are in this group, the coordinates comes back to our browser and it then shows up on the screen.
Contrast this the first area. In the first area, the coordinates are not sent anywhere and are just updated in our screen by using JavaScript. The reason why I coded both of these areas on the same page was make sure that the coordinates in the second area matched the coordinates in the first area. That is, I wanted to make sure that WebSockets was working correctly.
Participating in the ChiPy Mentorship program has been really great. I’ve learned so many things from deployment to tooling and software design. It's shown me areas in which I want to further develop such as Bash scripting and database design. I've learned to take an idea and bring it to life. What's really been helpful is when I've been murky on a concept, my mentor has been able to draw a diagram and explain it to me.
Words in a novel are not just a bunch of texts. There are stories and plot lines and arcs. Code isn't just a bunch of texts. It's data flying back and forth between browsers and servers, and it allows you to ask questions that can sometimes be answered. Will I find my missing pet? Where do I look next?
Thanks to my mentor Austin for making learning to code fun. His enthusiasm and love of coding really made it a fantastic experience. And thanks to the ChiPy Mentorship team Zax and Ray for all of their help and wonderful support. Thanks to software engineer Robert Heaton for his savvy advice and guidance. And finally thanks to the ChiPy community who gave advice in my survey and to Richard, for giving me advice on how to improve on my blog writing. It's been really great to find a community where I can learn programming with.