Building an Ionic 4 Firebase Location Tracker with Capacitor & Google Maps

[Music] hey everyone what's up welcome to and I would say epic new tutorial because today we want to build a location trick we've done something similar in the past but today we want to use capacitor we want to integrate firebase and then again we will use Google Maps and a gear allocation and all of this combined is really great tutorial I really enjoyed preparing I hope you enjoy it so let's do this I've already created a blank new project as always but as we are using capacitor more on this in a second we can start the project actually using the ionic CLI and the - - capacitor at the end you could also simply start a blank new ionic app and then afterwards get started and run where do we go NPM install safe capacitor core and CLI and px kepis in it and then you're also fine but with this we all got everything under the hood already what you need to do as well what I actually forgot is to install firebase in angular fire as I said we're gonna use firebase for our geolocation data and then just like with Cordova you have to add the platform's but before you can do this you have to actually run ionic built first in order to have a built folder so once firebase is installed is it actually doing anything sometimes I just feel like it's doing nothing but any arm that gives us the chance to talk a second about capacitor and I will just restart this it looks up to me so capacitor is basically ionics approach or the very own approach actually to build something or improve Cordova version so cutover only works on the device iOS Android got this layer and for the browser most of the stuff is not really working so what capacitor ionic is trying a different approach one of the most common things is that it has a unified API that you can use from the from your electron I from your progressive web and also from your native iOS and Android app at the same time so that's one thing that's very very cool about capacitor and actually when this video goes live I'm pretty sure capacitor is available in the first stable version so at the time recording this it is actually still in beta but it is announced to be released pretty soon so I'm very hopeful that the things we do in here are not changing that much anymore otherwise if it's not working leave a comment or check out capacitor on the great Internet so once we've built it we can add a platform I will just add the iOS platform actually I think I should have also a vlog episode on Cordova where's capacitors so check out my other vlog videos coming out Thursdays if you haven't watched them before okay let's just get a few things up front done as well which are installing capacitor ok done creating a firebase application I hope you already know how to do this go to the console create a new app and then also go to the authentication and I will just delete these for you it should look pretty empty go to the sign-in method and make sure the anonymous login is enabled we will not build an authentication in this example that is left for you the reader know the watcher viewer whatever it is called then also heat over to database and you're gonna have to click start cloud fire store or whatever don't use the real-time database it's the old one go with the cloud fire store and then you're good next up is Google Maps we're gonna in need an API key so simply search for Google Maps get API key you will come to this page you can click get started get an API key and there you go and you can also use this API key immediately simply copy over this snippet go to your index.html and then before the head closes paste in whatever you got actually we don't need this part so we only need key your API key I will look up mine as well all right once the API key is ready hit over to firebase go to okay let me look the project settings I think and then you should be able to add a new application so I already got edit the web application you have to click add app then select web give it a name and this will then give you the block there we go with the firebase credentials that you are used to so copy over this information go to your environments environment and start a new block which we will call firebase and paste in not like this but like this all the information for your firebase application okay so now we get the API key we get the firebase connection we installed the angular packages the angular fire packages we have created connection to iOS so capacitor and iOS seems to work so far if you got any problems with the pots this is or actually you can only build on make of course for iOS if you encounter any problems you have to maybe run but version and see what it's like I think capacitor only works with one point six and upwards and I had to update this to one point seven so make sure that is working for you as well because that's a very essential part okay so then we're gonna have to increase our speed a bit because we're already seven minutes in so let's jump to the app module at the import for everything from angular fire that we need which is the base module the firestorm module and the fire of module and all of this of course goes to our imports this one also with initialize app and then the credentials for firebase which are stored in environment firebase and the other two simply go right after this so then we can also close this again you can see this on the tutorial link below this video as always and then we can continue with the home page so let's close this and for the home page maybe let's start with capacitor so in order to use capacitor you don't need any other ionic native packages Cordova packages a few things are already bundled as you can see right here so these are already included after we installed or initialize our ion ik application with capacitor and we can then use them by extracting the plugin that we want from the plugins of capacitor core and we can do it just like this also we gotta have or we want to use a google map and actually I haven't seen anything regarding the types I'm not sure I think there are typing's for google but we can also do it like this which will give us the chance to use the google keyword in our page which is actually doing something and working the types group isn't recognizing its otherwise we would encounter errors perhaps I will comment this out remembering that you said you want to see learn more on the go so let's get started with the actual implementation we need an anonymous lock-in because we want to skip real lock-in then we want a connection to firebase so we can see if there's any location already start and then we also want to fill our map with the locations and also start the tracking if anything changes regarding our position so let's do this the first of all AF auth is needed which we will use for our inin login login interesting concept but know so we're gonna call this immediately I had this with a button but actually doesn't really make any sense so we can simply use our angularfire of our sign in anonymously and then we should get back some user credentials so let's lock this out to see what we get and then we're gonna have to load the firebase data and then eventually we also have to update the map later on maybe we could also no we just we just leave this for now SDA none locking is immediately called we can also run ionic serve and we can test the whole thing of course in the browser as I said capacitor works on the browser as well as on the device one thing maybe here if you plan to deploy to your device you're gonna have to check out the notes here because capacitor use a bit different build system basically with Cordova your native projects are always completely reap rebuild at runtime and then everything was created automatically with capacitor actually you have to or you are we should to should to have to whatever you should check in enter your source control the native projects for iOS and Android that's a bit different approach from them and you're gonna have to do things that you normally did with your config.xml forked over now directly in the native projects so setting these keys for our location and for android same thing directly in the native project okay so here's the app and there we go our user is anonymously locked in already we can see it of course normally make a simple login before doing anything with it now we can actually make use of our firebase integration and therefore we have to add a new observable first of all so this will hold the real data that we get and also if you work with angularfire before you know that they're working locations collection with collections and documents so there's actually a type called angularfire store collection which is basically a reference to the data collection inside your firebase database if you go to database we of course don't have a collection but we will soon have so in our case we want to store the data under the anonymous user ID tracts and then all the locations that the user is tracking just a simple structure that we can use so therefore we gonna call the angularfire package private angular fire storage angular no not storage of course angular fire store in module but just angular fire store so there we go and then we can use the user from our login so let's have reference of the user as well so if the user is now we're gonna use this third user equals user and then we can use the user UID and to the collection track we gonna order it by the timestamp so hold on we're gonna add some data very soon and then actually another block maybe I'll just bring this in later and give us a little second to digest everything but what we need of course is as well I on view all what Pig will enter and in here call something to load our map let me bring this in load map there we go so load map as you can see will create new coordinates using whatever my current location then specify some map options on how to or how much to zoom where Center the map and then actually set some map so in order to use the map we will use the view child can add all missing imports great we will have a view child map we will have some markers that's for later but for now you see that we get problems here with the Google keywords if we now uncomment this line you see everything's working again so that's exactly what we're looking for so now in order to actually see a map let's change a bit of our view and let's hide the map unless we have user let's call this Steph tactic tracking and of course as always the color primary so now we should actually see a bit of change in our app because we an automatically perform the anonymous login which will then establish a connection to firebase we are not loading data but we should be able to see our map which we don't you because we need some more CSS I forgot so simply go ahead with this for now of course just make it look or match your needs and then we should see a map not a lot of zoom but we could zoom in zoom out and we got the map we got the user credentials which is already a great progress all right um actually I think we can close this so now we need to start the tracking basically and to start the tracking I will add a little few items to our homepage so let's also use a DIF ng if user because otherwise these things don't make sense so just to display the user ID and then two buttons to start the tracking and stop the tracking we had this in the old tutorial as well know start tracking is of course a function so start tracking and stop tracking and then what we need as well in here is a variable checking if we're currently trekking so let's set these two faults in the beginning and then this is fine so far so now we got start tracking and stop trekking so in order to start and stop our trekking let me bring them in one by one so the video is not getting too long so regarding start trekking we will use finally our geolocation plug-in from capacitor actually the usage is pretty much like when you use the ionic native package you simply call watch position and then you will at some point get back a new position so let's look this one out actually there's a minor issue but no problem and if we got a new position we should of course somehow at this new location and the way to at this location is pretty much just making a call on our firebase collection so simply call it on the collection with the according values of the latitude longitude and perhaps a timestamp and then if you wish to you can also work a bit more with the Google map so this would be the code to Center the map okay so now on start tracking we start trekking and in order to stop the trekking we're gonna have to keep a reference to this and actually if you check it out this will return a string so let's say watch is also equal to now in the beginning and then if we hit stop tracking we're gonna use the very own idea we got here maybe let's format this a bit to call again the geolocation plug-in and now clear watch so these are the only two places where we interact with capacitor to get the geolocation we don't need anything else the permissions are automatically checked once you call this maybe I can also already bring in a bit of code to delete a location as you can see or as you perhaps already have seen in the previous angular tutorial this is just a delete on the right document so just make sure you're getting the right ID and the problem here is I will just also do a few more console locks here and there just to showcase why we're actually doing some of the things that we do so right now we should be able to lock in we somewhere I have the user ID this third user okay yep that is not the real user but it is in user so we have to use it like this and then we can also move this one line down okay sorry about that the object was nested in there I forgot about that so now automatic locking we get the UID and we hit start tracking I was already asked upfront if I allowed this and then we see a new position comes in with some coordinates timestamp whatever and if we go back to the database and hit refresh we should see a new collection called locations and then we should have my very own user you idea which is user [Music] something like Y j jz yes exactly my ID in the locations then we got the trek and here we got a few documents actually already for the problem is for some reason my position is changing all the time and of course we're not yet displaying anything on the map which we need to do but also sometimes the position is triggered twice in the browser I'm not exactly sure why this is but on a device I think it works better so stop tracking works as well and now we already get a little list of locations that we want to show on our map and now things get not tricky I wouldn't say tricky just a bit more interesting here we should try to load the firebase data and in order to display them we can actually just use the async pipe we already got the collection which isn't observable so we should be able to make use of this in our view so let's craft an ion list below the buttons and I'll also use an ion item sliding so we got a little slide to delete button to delete one position in here and besides that it is just using the values that we've start like minute ago and the locations which is an observable nope nope there we go locations observable and actually we're not making the right call yet I think we need to set all locations so this locations and now normally you would use something like this dot locations collection oops whatever snapshot changes or well your changes it's basically up to you so then we would have an observable and let's see how this looks like because now we will encounter a little problem so there we go we get all the values let's use value changes in here should work as well where are my values okay there we got the values and it might now swipe one and delete it we see that we got all the nice values but we actually don't have this unique ID and that's always a problem with firebase so we always need this little snippet here which is basically calling the pipe on the snapshot changes with MEP from come on from rxjs observable can I import this let me just bring this in real quick there we go and this will now give us access to the payload and also the ID and construct a new object which holds both the ID and the payload then if you swipe it finally also gives us the ID that we need in order to delete the object so now we can comment this in because the position finally also holds the ID so what is working so far we can track our location we can push them to firebase and now we just need to display them on our map so let's again subscribe to the locations so whenever we get a new locations array locations then let's lock out new locations so this means it was updated on firebase basically because we pushed or removed something and then we want to call a new function that we call update map with some locations so here we can just say this update map with the locations we got so in our update map we now need to take care of two things so this can be called at any time so we have two one remove all previous markers and then also unset all the new markers so as you can see we already got the six locations actually where's my where's my list where's my list gun mm where's my list I don't really don't know I just had it like a second ago and we also get this so I'm a bit confused there's the list again if I remove something we also get the call back from there another call like the subscribe blog and see all the items so the last missing part now was to update the map and therefore I said we first of all need to set all markets that we might have already have to null or set the map on the markers to not and then we can go over location of locations and then for each and every location in our array we can create a new position using the same structure like we had where do we already use this I think to map or Center the map right here so again new position Google Maps with the coordinates of the data that we got and then we can create a new marker using new Google Maps dot marker and in here we now need the position which is of course the value we just created then if you want to a little animation so you can specify this from Google Maps the most usual is Google Maps animation drop of course where's the problem here and now finally you will see the connection to this because when you create a marker you also specify the map on which the marker should be displayed which is our very own map and of course in you if we set the map to null the marker is gone and of course also this dot markers push the new marker so we can keep a reference to this marker in our array and later easily remove them all right let's see what is going on in our application cannot read property marker in 89 yeah makes I have a typo and then we should perhaps remove a few of those useless entries in here but we already see the pin dropping to where I live and now because we want to easily test things out we can go to Chrome more tools sensors and then fake our location to be for example in Berlin actually let's use no overwrite again now let's use start tracking so we should see my first location yes my own and then let's move to Berlin and we see the pin in Berlin then let's move to London and another pin right there and now let's also use I don't know San Francisco and there we go and of course all the other pins are still valid as well now the only problem with this is that most of the time there's a duplicate entry called as I said I'm not exactly sure why it happens maybe you have a solution so let us know below but otherwise we are now able to track our location we can then store all the data right here to our database account as I said create a little login up front to make this more secure and then we're using capacitor in our browser to get the location and also on a device and finally Google Maps to display a map with additional markers so that's it for this epic tutorial I really hope you enjoyed it I think this was a good example of using multiple different things together if you got any questions about capacitor or anything else that you would like to see as always leave a link note below hit subscribe hit like for the video make sure to share it whatever you want to do I hope you enjoyed it have a great day and I'll see you inside the next video [Music] you

Channel: Simon Grimm

Views: 23,136

Keywords: ionic, ionic framework, cordova, angular, javascript, html, css, hybrid app, cross platform, ios, android, typescript, web development, capacitor, ionic 4, ionic 4 tutorial, ionic 4 course, ionic 4 app, ionic 4 for beginners, learn ionic 4, ionic 4 angular, ionic4, angular 7, angular 7 tutorial, learn ionic, ionic for beginners, ionic tutorial, ionic angular, ionic guide, ionic course, ionic 4 capacitor, ionic capacitor, ionic 4 firebase, ionic 4 google maps, ionic location

Id: Sq0NbvQihrk

Length: 27min 49sec (1669 seconds)

Published: Tue May 28 2019