BUILD AN APP THAT TRACK DEVICES IN REAL-TIME (with AWS Amplify and Amazon Location Services)

hello world and welcome to another episode of uber do you need to track devices packages trucks people customers something do you want to track them in real time and not to worry about scale how many devices you have or customers are using your service if that's the case maybe you want to continue watching this video creating software that is able to track devices let's call devices anything you want to track in real time can be costly it costs a lot of time to build that type of software it's hard to scale security and privacy is a very important concern because those devices can be very sensitive for your customers they can be their mobile phone or there can be their car or something that shows where they are located so you really need to care about privacy what if i told you that there is a service that can help you with the tracking of these devices that can track devices in real time without really worrying about scale and with the aws concern about security and privacy in mind so you know your customer data is safe this service is called the amazon location service and i talked about it in a couple of videos back when i show you how to create an application that can display a map and you can search on it so that was a very simple web application that we were using amplify and we were basically just showing them up in this video i want to start from there from a very simple application that shows a map and add one more layer to it the ability to display the tracking information of your customers devices or whatever you're tracking so first let's go to the console and see how you can add trackers into your application and then let's go and see how we can do the website for displaying this real-time application and how everything works so let's go to the console so we are starting our journey in the location services where we stopped in this video i recommend you to go and check it out because there i share what is the location services and i also talk on how to create the map and all those those things so now we want to go and create a new tracker so a tracker is a resource that you can connect devices to and that tracker can receive location information so you can have one tracker and as many devices as you need so when we create a new tracker the only thing you need to define is the name for the tracker and that's kind of it then you will be able to query for the position of the history of the different devices that are in the tracker and you can see what all the information of each of the devices that i have shared with the tracker and later on we will be seeing how the tracker can be connected to a geo fencing to alert you on something but that's for next video so we created the tracker we just put a name and then we need to go and edit our i am policy so in the previous video i was using an authenticated role to access these uh applications so to show them up and just do the search in this one i will be doing exactly the same but instead of using an authenticated guest i will be doing it on a authenticated guest because tracking cannot be accessed without being logged in so that's something you need to have in mind if you want to display the history of a device from this tracker sdk you will need to have a user that is logged in with amplify so edit the policy of the authenticated role and you can find the policy of the authenticated role the same way that you find the policy of the unauthenticated role in that video i will show you the policies that you need to add here so they're free uh in the previous episode i just give you a star and i told you you can do anything on the geo um category now i want to be um more conscious on security and i will give you free policies the first one is the one to access the map that is this one and you can just basically get it and put your account number and your uh map name the second one is to be able to access the index the search index and the third one is to be able to access the tracker so these are the free policies that you need in your authenticated application in order to do this so now what we want to do in our website we need to be logged in and then i want to add a button that says track so whenever i click that button it starts showing me the real time information of our device we could do it basically when it's load but it's just too much so i just added this button so it enables it in that moment so in order to do that we can go to the code and we can add a couple of things into our application the code as always is available in github so you can check the description box of this video where the code is the first thing we need to do is to define the constants on the top of the application.js again we are working on one application.js file i don't want to use components it's too much work but if you're doing this for production maybe you need to have um different components and different uh modules for all these things but for now we have all the constants on the top where you can change them to the one that are um from your application and you can see that there is the tracker name and the device id the tracker name is the one that we just created the device id this could even be a text box in your website where you can put the tracking number or something like that or the name of the device here i just giving one device id arbitrarily from the website this is just for demo purpose in your case you might have a lot of devices so you might want to make this editable so then the next thing we are going to see is the tracker component that is just a button because we are just displaying a button but we could have also the box text input as well if we need there and then in our application component you can see there that we have a new array called dev pos markers and that will be an array with all the position of the device basically when we start getting it from the sdk then you will see a method called use interval and that's every 30 seconds to get the device position so this uh i will show it to you in a second is a class that will call uh some method that we are passing in this callback this get device position but it could be anything every uh set amount of time so this does a polling to the vacant every x amount of seconds you could do this in multiple ways you can put this api behind the web socket or put it with graphql or do something else but in this case because i want to not build any server code i just wanted to use my client i'm pulling every 30 seconds and because the device is sending information as minimum every 30 seconds it doesn't make sense to have it faster so this is just for the demo purpose and then we have this method called get device position that is getting called every 30 seconds the first thing is we empty this array with the markers with the historical information that we are keeping so we start always from an empty array and then i will be calling the client get device position history with these parameters the device id that we specify on the top of the gs or you got from your user and then the tracker name that is the tracker that we just created and then you need to give a start time and an end time then time is now the start time you can define it it can be one year ago one day ago whatever and then we call the client and we get a list of positions and with those positions then we can populate our markers that we are going to display in the screen we need the index to know in which position we need the latitude and we need the longitude and i also like to set the viewport to the last point so every 30 seconds the screen moves a little bit so if the you kind of move with the the point then we have the trackers marker and this is a little component that will be drawing the little points in the map so we pass the index we pass the longitude we pass the latitude and it knows where to draw it in the map and we are using this pin component that is drawing a little pin in a red with some text that is the index basically in our screen and then i'm calling these tracker markers inside the map the react map gl and basically that's the whole thing it can have as many markers as we have as we can and we just get them from there so this is a very simple piece of code so now i want to show you these two helper modules that i'm using that is the pin the js basically it's an sbc drawing with some text that i'm passing and some kind of size and that's kind of it and then the set interval that is this function that helps me to call a function every certain period of time uh you can get this on the internet there is million examples on how to do it now if we go back to our website i press track and nothing will happen because our device is not sending data because this is a demo so how i make my device to send data that's what we are going to work on now and this you can do from your client application you can do from your iot you can do it as an example like i'm doing you can do it from wherever you feel that you need to do it basically i will be using the aws cli to send tracking information to the location service so then the location service can get this tracker information and display it in my maps so for that i'm going to use this new service that was announced in rimband the aws cloud shell so i don't need to install anything in my computer i can use um the location service cli directly from the aws shell so that's neat so you don't need to worry about what is the version of aws cli you have in your computer if you use the cloud channel you're always getting the latest version for doing this i created my own script so every 30 second is sending the location updated for one particular device and this is very arbitrary i started with a fixed location um basically a longitude and a latitude and then i'm every 30 seconds i'm increasing both dimensions on one and that's it and i'm sending that location so it's very very arbitrary but you could do the same from i don't know a client application that is sending the coordinates that it gets from the gps or an iot that is sending the coordinates that is getting from again the gps of the device the script is available also in the code so you can go and check it out you need to pass the tracker name and you also need to pass the device id and then when you call it it goes forever and every 30 seconds it sends a message to the location service api using the cli and then it waits and then it again so the code is is very very simple so now if we leave this code running for a while we can uh press the track button in the website and we can see what is going on so then if we put this running with the tracker name the device name and we leave it running there we can go back to the website press the track in button and we can see how the website updates itself with the real-time information from the tracker i'm speeding up this visualization because well getting to point 11 takes quite a long time every 30 seconds and i want you to get the idea on how this looks this will be looking exactly the same for you so if you leave it running it will just get over cairo and keep on going up and at some point it will fail because look latitude and longitude are not infinite so don't leave it running for more than an hour because it it might break but the idea here is to show you a working demo and you will not send location information like i'm sending if this in production you will send it from a real device with real longitude and latitude so this will not happen to you when you implement this in production but i wanted to show you something that is working end-to-end that's it for today i hope you enjoyed the video in this video we learn about tracking we learn what the trackers are we displayed real-time information in the website we learned how to use the aws sdk to get that information we also learned how to use the aws cli to send tracking data from our clients to the location service and then from the location service to our client using the aws sdk and everything without any servers involved in the next video we are going to see how to get notifications on how to do something when for example a customers get inside your store or a package is arriving to destination we are going to learn how to know all those things and how to send messages so i see you in the next episode of [Music] [Applause] you

Channel: FooBar Serverless

Views: 4,501

Keywords: foobar, serverless web application, aws amplify, aws amplify react, aws amplify example, getting started with amplify, amplify react tutorial, amazon location service, amazon maps, amplify amazon location service, amazon location service skd, google maps tutorial, maps application, google maps application, react map app, google map search application, react map tutorial, BUILD AN APP THAT TRACK DEVICES IN REAL-TIME, location tracking, real time location tracking

Id: dTzrjuz7qAA

Length: 15min 4sec (904 seconds)

Published: Thu Mar 18 2021