Laravel: Vehicle tracking application using Google Maps Api and Pusher

the final product as you can see uh we have successfully built a tracking system for i don't know cars or vehicles or uh person or anything there are many many use cases to this so to take a look at it to look at the end product once more we have this these two different interfaces and uh these are connected uh via this google maps api we have used google maps we have used this marker to set the position for for a for a vehicle or a person or a car or anything or a bicycle um i don't know and once we once this uh this marker moves for example a person moves uh so we are able to see it on our screens and and live so that's how all these i believe all these big vehicle companies uh track their uh track their track their fleet movement or uh whatever they want to track uh based on based on google maps and um just to see it once more in action so once we load this up we are on uh we are on a position uh we have uh mentioned uh in our application uh so at the start we are at this latitude and longitude position um and once we move we send this information to some api let's say and that api updates this on our google google maps screen so if if there are like thousand people watching uh where this car is moving we can create a thousand instances of this uh and they can see it from anywhere in the world that okay this car is now at the street and this part of the part of the word and um on this part we we are just we have created this route called move to simulate the movement uh obviously this we are entering this information manually here but obviously with this information once the application is up and running can come from anywhere in the world from any mobile device in the world and if if if you want me to build a mobile app to showcase this information then i would be happy to do that as well um so let's uh let's see this in action so once i uh uncomment this part and i refresh the page we should see something uh moving from this market this position to somewhere else and you can see this bar up moves uh this part of the marker moves and it says card move and once we uncomment uncomment this last one we should be in a different position just to simulate cool so now we are at this roundabout uh so this is the final product if you want to let me do build a proper interface to it and uh mobile app to it uh i would be happy to do so please let me know and in case you're stuck at something please uh feel free to write me and i will try to get back to you as soon as possible and i hope uh this um tutorial helped you um and in some way so yeah take care goodbye ladies and gentlemen um today we are going to uh see uh actually i'm going to walk through how i am going to create a tracking management track tracking system uh this tracking can be used for personal tracking or vehicle tracking or any other use case um for this i'm going to use a laravel framework and google maps api and one more thing i'm going to use laravel websockets with pusher prerequisites for for this uh for this video uh tutorial is not um something that uh you need to know laravel or google maps or something like that basically i have not worked um for a very long time with google maps but i can read documentation and go through it so prerequisite says you should know how to read the documentation and you have a little bit of programming experience in your life otherwise this project is going to be about how how we can do things um in all all the frameworks there are or everything there is on the internet just uh for me laravel is uh something i have used in the past so it would be easier for me to do it in laravel but yeah obviously as i said this can be done in many other frameworks and all other frameworks or anything like that so uh if you're new to laravel just go with the flow because i also google everything i want to do it's not that i know everything and probably most of the people do the same so let's get started with it i'm not going to show you exactly how you can use some of the tools we are going to use and use which are not directly related for example i'm going to use composer to install laravel on my machine uh but yeah there are tons of uh youtube videos showing you how you can install laravel on your on your machine whether it's mac it's windows uh linux or anything else um uh there is this great website which we are going to follow steps from and as you can see there is this installation section and there are a lot of things your first laravel project gets started with windows mac os or linux i'm going to choose this install by composer uh i already have composer installed on my machine and this is how we are going to get to it so i'm going to copy composer command which it says uh then in my laravel projects folder i'm just going to paste it uh this example app i'm going to change it to let's say tracker and now a composer is downloading laravel and as you can see uh here and it's doing its magic pretty simple straightforward uh one more thing is that i'm going to use visual studio code for as a code editor for my project i'd like to use it and you're free to use whatever you want to the best way to follow this tutorial is to go along with it what i'm doing you should do as well if that is interesting for you obviously so as i said applications is publishing complete and everything is done we should be able to go into that folder now and we should be able to open it in visual studio code okay so our application is installed and ready to be used um so we're going to spin up the spin of the server so let's see what how you can spin up the server for example so there's this command php rds and serve and it says this is the address where your level is now hosted let's go to that address and fair enough our website is now hosted here and next thing we are going to do we are going to have another um for example a page where we are going to work with laravel uh so for example if i go to enter into the routes and this web.php this is uh the main route which are which is showing us the welcome page at the moment so this is the welcome page and we're just going to copy this part paste it down here and say let's say app and we're not going to return our view here we're just going to so dd means dump and die so we are going to just dump your route is working so if you are able to see this message on the screen then that means we have a route configured and let's do that your route is working so oh so far so good uh next thing with what i would like to do is i would like to um bring the google map on on this page here um and show it uh but before that i will obviously create a view um so to create in order to create a view i will go into the resources folder views folder as you see you can see here that there is welcome.played which is this one uh it's been called uh on the main one i am going to create a new one i will call it let's say app dot blade dot php and um just so i can i'll copy most of the part from the welcome file and remove the things i don't need for example i don't really need this diff so i will remove that i will keep these styles and i will keep the font i will rename the page title from laravel to app and now on the web i will return like here return app dot okay we don't need to do the top part here and now we should be able to see at nothing but uh the title at the top should not be slash app but it should say what it should say it should say app like this cool so this means our our page is working uh the next thing what we are going to do is we are going to bring the google maps here in order to use google maps uh you at least there is a free tier they give you a 300 credit which is a lot and will they will not charge you anything unless you specifically tell them uh that you want to use google maps for after your free tier expires and i think free tier is like a lot and for for this tutorial it should never expire for you so i'm going to do google maps javascript api and okay let's go to the overview of google maps javascript api and this is the most simple example um like the hello world example the easiest are learning about a simple example as they say so what we are going to do is we are going to copy this javascript path from here copy we are going to go to our play the way you can bring javascript in is so we can print this part and um then we should go into the css tab and copy about these styles we should paste these styles here just like that just like that and i should remove this extra comment from here then we should go to this html part and we need to copy this id calls to map why we are copying this id equals to map because here you can see document.getelement id map so it will try to load the map and using this id value which is uh here so if if we change something from for the id for example instead of id we say map map2 or something then we should change it here as well but uh first map is good um let's indent this script yeah okay this looks good um one more thing is we are going to need this script and this is how the google map will appear on our page this is the main api we're going to use so uh yeah looks good so far let's open up the console um this is the console we load the page we we can see something is wrong here the and we can see the error message api error invalid map inverted keymap error so if you see here closely you will see your api key we need to put the api key we are going to use so this is very important and for that we are going to go back to the google maps documentation and here we are going to see using api keys part and this creating api keys part is uh the important one uh go to the we should basically follow step by step what they're trying to teach us so we go to the google cloud platform i'm already signed up with google cloud platform that's why um i do not have to sign up again for if you're doing it for the first time you will have to sign it sign up for them next we're going to create a project because we need a project to use to get the api keys i will just name it delete me or let's say tracker and then i'm going to create the project it will take some time to create the project i believe okay that's created now we can go to this maps javascript api google maps for your website and let's enable that now if i go to this credentials on the left panel i can probably create credentials if you can see it at the top i create credentials api key and it says using this keep api key by passing it in the parameter key i will copy this part and i'll just close it if you close it you can find it here for example so next thing what i'm going to do is i'm going to paste it here and now i'm going to load the page again and hopefully this time we will see the map cool now we see the map next thing what we want to do is for example if now we see the map but we need to see a person on the map as well so person or vehicle i would say so to mark a vehicle on the map we will need a marker so next let's see how we can add a marker to the google map so there's this tutorials add a marker to your map uh let's go there and come down come down so something like this red marker now if we see um this part of the code um we are going to use it at the location of uluru i don't know which what place is this but yeah obviously we're going to just copy this into map function um we already have an admin function but we are going to replace this one with the one which has a marker to it for example if everything works correctly now we should be able to see this red marker thing on our google maps page now cool so now we see this marker uh but as you can see uh we are quite zoomed out of this map and we don't know um how of our vr or where exactly we are so let's say um this zoom uh is the one doing that let's zoom it a bit let's see if 18 works for us and we can see a bit better where we are okay so we are somewhere in the national park for example now um so um in theory we now have a map we have this red vehicle a red person and this person now we want to see if we can move this person around and able to see it move on the map as well so for that what i'm going to do is um i'm going to create a button which is going to let's say we have a button which is going to say update position let's say we have this button which um says okay update the position and then we have a function in javascript which is called update position and we're going to create that function beneath this function minute map so update position and we are just going to give alert a position of the function called just to see if this works so you see we now have this update position uh button if we click it we should be able to see an alert message and sure we do position updated function called cool so um now what we are going to do is uh let's let's google how how to set the position of a marker on a map google maps api set marker position and we go here [Music] i can find it here so let's see how to change the position okay so there is this function set position and it takes it latitude or longitude values okay so let's say we copy this part here we say latitude and longitude and let's say we may make this minus 24 to change the position of it and then we have this map thing outside and as it says here map sorry markers marker.position so let's declare this marker outside the marker and now we can say marker dot set position and we pass it latitude longitude so this value now when we click the update position the marker should be positioned somewhere else on the screen and not not on the same place uh where it was before we might not be able to see the marker because it moves away from from the focus point but let's worry about one thing at a time so update position and after that we should see a difference so cool after creating update position the micro has moved we don't know where but let's zoom out of the map and see where the market has went probably somewhere far so here quite quite far um now what we need to do is when we update the position of the marker the marker changes its position but now we need to focus on that marker so it's like simulating when a person has moved away from its previous position or a vehicle has moved away from its previous position we changed we changed the central focus of our map to that position so that's what we are going to do here and to do that i think we already have it the center property and we are going to use that so i believe if i remember correctly it was map set center and then lat long so where the marker has changed its new position and this is its new position set the marker to that new position and then set the map to focus on that new position so now we should see a marker move as well uh map move as well where the marker moves so just remember that this we are in this national park right now and when we update the position okay this did not work and let's see why okay it says cannot read properties of undefined set center okay i think uh we should remove this constant from this map because then it changes the scope um so probably now you should be able to see it and i click update position and sure my map is also now moving to a new position with market move so in theory we have built something uh where a position of a vehicle or a person is changing and we are also moving the map focusing on that position where the vehicle is now so we have covered the part where the moving is moving is done but um not in an efficient way i would say uh this is not very efficient uh way that we click the update position button and then we move the marker so now what we are going to do is we are going to use laravel websockets to track this information because now at the moment it's really really oneplus one one-way thing so we are updating it manually now we want to do it automatically and in the next part we are going to use something called laravel websockets and let's see here on the documentation page if we go and see broadcasting yeah i think it's called broadcasting yes so we're going to use this broadcasting thing uh what broadcasting would do is um we will see what it does it's very interesting way to update the user interface without user refreshing the base page every three seconds or some second or some seconds it does that automatically so it says all of your applications even broadcasting configuration store is stored here in the configuration file and let's go and see that actually so config slash broadcasting and yeah that's right all the broadcasting information is stored here uh we are going to use pusher here pusher is the thing which is the way we can update the user interface without refreshing the page every two seconds so let's say uh the car is moved uh to a new position and now we need to refresh the page to see where it has moved now uh but it's the other way around it will automatically listen for an event which will update something in the in the front end later on uh you will know better when we go and do this [Music] so in order to use it we need to install pusher and this is the way we can do it so i'm just going to go to the terminal actually terminal here and then i'm going to paste this uh your requirements gonna resolve something for sure problem okay um it says do it with this key so we're going to do it with this key and now it's going to install pusher um one more thing we can do in parallel is to go to the pusher and then i will need to sign in but if you're new to it you will need to sign up for it okay cool so now we are going to create a an app and i will call this striker app and then i will just create up without filling much information from there next thing we need is we need the app keys so app idf key app secret app cluster we are going to use these keys inside our env file so let's this one dot dnv file we're going to fill in this information from here so sorry from here so app id is this app key is this app secret is this and then cluster is you cool i think now we have really configured it uh next thing is how we are going to use this one yeah we need to change broadcast driver as well in the ed.nb files so broadcast driver here it says log we now need to move it to pusher change it to pusher actually and i think we are done with all those things now we need a client-side installation of pusher channels so for that we need npm also npm is front-end package manager so if you've never heard of it it is used to install all the front-end libraries for your project and you can see how you can install npm on your machine there are tons of tutorials out there so um with this command we're going to just use we're going to just install npm and i will run npm install once more because i've uh not installed all the other packages that were already uh there with a game default level so this part will do that for me and once that is done we i'll show you what what that means once that is done so um these uh different parts um are separated but once they come together uh it will start making more sense why we install different things to work with it so just be patient with me on this and let's do let's do this together okay meanwhile it's doing that once what we can do is we can go into this resources js and boot structures file so resources js and bootstrap.js file and you see this part is commented out it's the same part of this one we just need to uncomment this part and require pressure yes for sure and that key looks good and once you have uncommented and just did a cool configuration according to your needs you may compile your applications using npm render so we're going to do just that let's see if the installation is completed okay it's completed now we're going to run npm run dev so let's say it's compiled successfully js slash app.js because js slash app.js requires the bootstrap so we don't need to specifically uh include bootstrap because it's already included with this required okay now what we would like to do is in our app blade we would like to import this file so if i remember correctly it was something like asset then just app.js this is how we import js files also one more thing is to one more thing to remember is that once when you change the app.js file um you will need to recompile it uh so it it knows what changed in the file afterwards so um there is a better way to do it um if you go to this package.json file you will see uh we run this dev command which print that but there is also watch command watch command uh automatically watches all your all your files you mentioned uh for it to watch and then refreshes or recompiles every time you change something so i'm going to run this npm run watch and it will keep track of any changes let's let's build it for the first time okay um if the import was correct we should see an alert message sorry console message so js is included which means it works okay cool what we need to do now is we need to go here and we let me i'm just seeing how we can track that uh track something um next thing we are going to do is we are going to create an event went as uh event is just like something happened what you should know about it so it's telling the application something has happened which we want we should know about so for example the vehicle has moved to a new place you should know about it so that or an order has been shipped you should know about it so um to create an event we uh what we can do is we can um php artisan there is already a command make event we should say this event is car moved let's see okay so it says even created just successfully uh this should be created inside this app events and then car moved yeah it has one thing we should do is implements should broadcast it means that the event should be broadcasted and it should be broadcasted to something i don't know um a return new channel i would not uh do private channel because for that for private channel we also need to create authentication and stuff so just to not do that we should read any channel and this channel name should come from pusher where we created the channel name and i think it's called tracker app so i would name this the same tracker app and the way it works is you should say you should pass in the values to it for latitude and longitude public float dollar longitude and then here it should let's say latitude and longitude and this dot let's do it equals two dollars this that longitude equals to longitude and now the broadcasting information will include this new latitude and longitude values and to see if this in action we should move to web.php and we should copy this route and we should say make a new route say move and with this move route we should broadcast the event and let me see how we can broadcast the event i forgot okay let's see i think it was broadcast and it should have a channel name which is tracker app actually no let me see how we can broadcast broadcast event level actually i've done something else in the past let me take a look at there um [Music] so cdc [Music] or else and web.php so what we what i did there was new broadcast okay simple so forget that we will just use this event function and then we will see a new car moved event and then we'll pass the latitude and longitude let's take the values from the uplight so now this time we'll see actually and the other one was rare okay so and now once one more thing is we need to listen so let me go to that listen good job sorry so at the end we just need this one we are going to paste it for down here so our channel name is trackrap tracker app and we are listening to the even twitches called moved and we're just going to console.log all the information so let's see how this goes it says map is not a function okay i don't know what went around there but let's do this part again uh i'm going to paste this here and i'm going to indent it and it's the channel is called tracker app so tracker app and then we have this listen where i'm going to say car moved and then console.log and event good now let's do this again okay cool we do not see in here uh so hopefully when we just now uh broadcast the event we should see a console.log message down there and um we'll just make it a smaller window and hopefully at the end this all will make sense to you why we did all these uh things and i think the private's gonna move okay cool so when we broadcast the event the ee pusher channel received that event and it saw okay which interfaces are listening to this channel specifically and to this event and then it broadcasted that event to those user interfaces so if more than one interfaces were listening to this channel then those two will get this these values here so now we cut these values what we need to do is use them so before that we were so once we get these values we want to update the market position but now we have the exact lat and even that longitude position we want to update it too and with that we have to update this function to receive this latitude and longitude values i would uh just do new attitude i would just name it to a new light student longitude just to avoid confusions and now we should make this new latitude and new longitude so now when we update the position the marker will change its position based on what the actual position of for example a car is or something like that so let's uh do this and simulate this bar again so now once we move it we see the move and now uh if we go here and update these values to i don't know something far far away let's see let's see if those are even real coordinates i'm not sure uh but yeah you see we are moving when we're updating this position so so just to reiterate and see everything in uh in the context of the app the just to summarize all this information uh what we did is we created a tracking management system i would say a tracking management system for a vehicle or a person or anything else in the world there are many many use cases for this uh we built it using the laravel app the and also the google maps api and the pusher api so what we did is uh we created a google map uh interface uh we brought we brought the google map interface in our project uh we placed the mark on a marker on it and then we tried to move the marker around and see if the marker was updating once the marker was updating uh what we did was we included the pusher api and we updated these positions uh without even refreshing the page manually and trying to move the marker around so

Channel: Tech Simplified

Views: 21,562

Keywords: laravel 8, google maps api, vehicle tracking app

Id: eeC9N_uRvjY

Length: 39min 36sec (2376 seconds)

Published: Sun Nov 07 2021