AWS Nordics Office Hours - Add location data to applications with Amazon Location Service

hi everyone and welcome to aws nordic's office hours with medieval i am a developer advocate here at aws based in the nordics so this is the weekly show where you how reviewers are able to join to learn something new about a topic and have your questions answered by me and by my guests every week i have uh one or multiple guests on the show and this week is no different this week we have well the the previous host of the show isn't that right marcia it is it is i i started this show i don't know how long ago like a year or a year oh yeah wow so welcome to the show mauricio thank you gunner for having me so yeah i'm marcia vishal i work in uh gunnar's team i'm also a developer advocate but since i was hosting this show i moved now to be a latam developer advocate that's my region i still live in finland so still very nordic so if people don't know what's your tie to latin america then well i'm from uruguay so i'm native speaker spanish i'm originally from latin so for me it's super fun to work with those communities in my own language i've been creating a lot of content in spanish and it's kind of i can be crazy and people don't look at me like oh here look at him oh here i'm normal [Laughter] so well i guess we'll see you throughout this hour but if you haven't watched the show before uh you'll be able to ask any questions you might have in the chat just post your questions there and we'll try to answer them throughout the show and don't worry if we don't get your questions straight away we'll try to answer them when it's appropriate throughout the show and as i mentioned every week there is a specific topic for the show and this week we're gonna talk about adding location data to applications and specifically with amazon location service so i want to start from the beginning what what is location data and how do you see that that is used in applications today well uh location data it can be anything from putting a map in an application from using the information that your i don't know mobile device have like gps coordinates to do something with it like show you moving in in a map or notifying some service about it it can be using all these geographical data that that we are so used to use nowadays in our mobile and web applications for us uh having applications that alert us when something happened like a package is arriving and we get a notification well there is many ways that we can do that one way is to use a location data to trigger those events like the package arrive to some facility and then we can send an event and then proof the packages we get a notification in our email oh the package just arrived uh the same i don't know if you get food delivery you see that there is this uh little dot where the driver is so and it's thrown in a map and that's location data you that app from the driver is sending uh all the time every 30 seconds or something like that where i am and your app is reading that data is all event driven uh basically the message is arriving you're reading it you're displaying it in a map or then you're getting a push notification the driver is downstairs and how this no it's downstairs well you have your address in place and the driver's location and it knows that it's downstairs so we are super used nowadays to have this uh location aware applications yeah i think that's true and i think we see it more and more in more types of applications as well that we're using location data to as you mentioned know where we are or where someone else is to help you and it it is convenient to have that data easily accessible it is and and there is many problems when you are a developer i'm a developer for all my life and i have built many applications with location data and one of the challenges is to find a reliable trust provider for that data because well it's not only displaying the map but it's also sharing your exact location in some cases so it can be very sensible data and and that's kind of one of the things when when you're starting to pick like what kind of provider i should go through well not pick any random place on the internet that is offering you maps is a good place to go just be aware of the security implications because today you might be showing them up tomorrow you might be doing more complex things and in the future you might be sharing your customer location and that will go through the provider so for me that's one of the most important things when you're building location aware applications that you are aware what that data is going for yeah and don't worry if you're watching this and thinking that it's just going to be me and marcia talking for an hour don't worry it's going to be like it usually is we're going to walk you through a demo martial is going to show you exactly how you can use this in your applications as well so let's move on then to amazon location service that was launched uh quite recently yeah it was announced in green band so basically since uh last year uh december was one of the latest announcements in room bed on the last day i think in the last keynote uh so since then you can use it and it was free for use because it was a preview and in june it was announced like to be generally available and that means that you can use it in production and now it has a price attached to it uh so it's like another aws service so the difference when you use uh location services than any other aws service that aws is using a map provider because as i mentioned we need to get the maps and the location information from somewhere and it can be a trusted provider or it can be a more shady provider so we have peak for now we have two providers of maps and it's s3 and here and the cool thing of using these providers is that uh everything goes through the same api so you could go and start using uh here directly from the hero provider that is a map provider and get a lot of the the features uh but then if you want to change your provider you will need to change the interface and then you will need to do all the connections today in all your services that that's another cool feature by using this service uh and when i mention features for example one of my favorite features is the integration with event bridge i know you're a fan gunner have you talk about event reaching this in this uh place we we haven't actually had any session specifically on eventbridge yet let's just say yeah yeah so event which is an event but that's where uh most of aws services will put messages in and then you can read them from different places so this is great because you can hook your mobile application uh or your web application that is location aware and send messages to the bus that you can pick up later so you can send push notifications you can send emails you can see your lambda functions you can do all sorts of things that make your application super interactive so that's something um i really really enjoy and somebody is asking if this is about getting the location from the device gps uh so the location it's depending on the on the api that you're using so you will need a sdk from different devices so you will get the the location for example in your mobile from the device gps that is connected to android or ios sdk and that will connect to the native os system so it will not be the ip location that's a totally different thing so for example in web uh unless you get the location from the if your computer has a gps sensor if not you will need to fake it somehow uh but that's something to have in mind that uh that is location based on gps yeah and i think the next question is along the same line uh talking about the iep can we get the user's location from the ip address using the the thing is amazon location doesn't get the location it's use the sdks that the operating system provides so whatever in general is the gps location so that's something you pass to amazon location and then you can draw that in a map or you can do a search or you can do a reverse search basically based on gps coordinates you get an address or you can do all kind of event messaging with it so we are not uh going into your device and getting your location that's something you need to do whatever operating system or application you're using so that's something the flatter thing i don't have a clue i got that question there today i should google it but but i should uh you should check the the documentation if it's available the sdk for flutter uh i know amplify we are going to use amplify today for the demo but also we are going to use the aws sdk for the demo so you need to have many pieces in place in order to make this work so i don't know if the whole thing is ready for flutter so you should check on the on the website of the location services right cool to see a lot of comments in the chat keep them coming keep your questions coming as well so let's talk a bit more about features and what are some of the features with the amazon location service well there is uh multiple features nowadays with the location services the first one is uh to show a map so that's kind of the most uh basic uh feature that we want in our applications nowadays wait a second that i lost your face in my browser and it's very weird to talk to no one so the first feature is the display map so for that we are getting the providers map that will be doing the the drawing of the map because it's not as simple to draw map as you would think we are so used to having maps because most of our operating systems in our mobile applications are using google maps apple maps but that is very expensive to build a very accurate map with all the roads with all the information so we are getting those maps from here and esri the second one is the places that is called in the in the documentation but basically is the search of addresses and search of gps coordinates so either you pass an address and you get gps coordinates back or then you pass a gps coordinate and you get an address back so this is cool if you want to search for uh the airport you can type i don't know what is the airport in stockholm orlando and then you will get the gps coordinate for arlanda that then you can draw in the map but this also might return you a list of results so for example if you type for your closest for mcdonald's you will get i don't know how many mcdonald's there in the world so you need to be aware that sometimes the results can be one or it can be a long list and that's something your application that needs to manage and when you do the reverse search that is basically you pass an address and you get gps coordinates in that address you need to be very specific because it can match multiple gps coordinates as well so the third feature is routing so basically you can find the route between point a and point b and you can do many steps in a way so this is very handy if you're building like a delivery system or you want to find like the road between a place and another just to go there so one of the curious things of routing uh when i was uh writing about this service is that they added a feature that you can decide which mean of transport you're going if you're walking you're by car or if you're going by track and if you're going by track you can specify the size and the weight of your truck because it's quite common that trucks get stuck in bridges and that's kind of funny because it's like oh my god but it makes sense because well trucks are huge and sometimes bridges are not high enough so this has a feature to give you routes that are kind of um appropriate for trucks and then we have a couple more features that are very interesting that is the tracking and the chi offensive so let's start with geo fencing basically a geofence is an area that you draw in a map like the limit an area it can be i don't know a shopping center an airport you can have multiple geofences in a geofence collection so you can have i don't know all the shopping centers in your city or all the airports in the world whatever uh and this is a feature that you can connect it with and whenever a device comes in or out of the geofence you can enable this messaging part that i love a lot that basically will be sending a message to eventbridge and then you can capture that message so you can know when things are going on in in your application so this is uh very important features and we are i'm going to show you a little bit into them as well if we get time yeah that's geofencing is a very cool uh feature to to use um yeah it's something that i also think that we see more and more applications used today as well in different ways knowing when for instance you're reaching a specific area rather than a specific address yeah and this is pretty cool for example you can do many things one thing is for marketing so if you have customers that download the app and for example you want to send and push notification when they are in your store you don't need to track their location all the time you just basically have the mobile app send a check to that api are they inside the geofence are they inside their geofence either and when they get a guest then this trigger the whole event system and you get a push notification in that client application like hey you're in our store this store welcome you have a 10 discounts welcome we are so happy to have you here and the user was like oh the device is tracking me well not really very cool and you mentioned uh a last one or perhaps you you mentioned parts of it as well tracking yeah tracking and geofencing are very intertwined because tracking is basically uh you can send the exact coordinates uh for example if you want to track the device specific position you can do that for example if you have a truck a company delivery company your tracks are your own so you can track where they are in the map so you they can send a specific information and that's good but then uh you can also know where your customers are with the geofencing as well if they're inside or they're outside and that's something it's a more soft tracking that is great for people because you don't want to know where all the people are that's very sensitive but if they're in inside your supermarket or inside your airport or inside your office or inside whatever then it's a more bigger area and that can allow for more interesting uh functionalities without really needing to disclose a lot of personal information right all right so we're 15 16 minutes into the stream and we still haven't shown any code any example yeah so this is uncommon for the nordic's office hours to be honest but it's just more often yeah this is because well the comments weren't uncommon sorry about that but that we still haven't shown any code that's uncommon so let's do that but i guess it's because we're you are so engaged into the topic i think that's just great so time to show something in modesty to show an example of how we can use amazon location service yes uh so i will show you a little bit on how i build this application uh i will start it kind of from scratch but if we don't get to finish today don't worry uh we'll send a link where all the code is all the videos are so you can go and and check them yourself later but i think it's kind of interesting to see the uh thing i will show the code here we are so the first thing is um this is a service page so here you can see all the things i explained you and the next thing i will do is i will go to my visual studio code uh i created a basic uh react application so i can start but i have not done much than that so the first thing i will do is to uh initialize amplify so then we can see this in action so for doing this demo uh we will be building a kind of delivery system where we will have uh branches uh for example for our delivery how you call it like if we were ups or dhl that we have these little branches where our packages will arrive and then we will notify customers when a package arrives to those places they can go and pick it up and then we'll have a nice web page where customers can find the different branches and they can find a route from whatever address they input into uh that branch so they know how to get there so for that we are going to use amplify because amplify supports very nicely the location services they have added is still not a production so that's what i'm not showing it the the category for geo so that's something uh you might want to look at uh when it becomes i'm installing some dependencies because i didn't do my homework uninstall everything before just keep talking but i will keep talking uh so there is this application category that is called amplify geo that will do a lot of things for you but that's not production ready so i like to show what you can really do in your applications uh very simple and you will see the code is is very easy this is done with react uh so you can uh do it with react you can do it with angular vue and whatever other web frameworks are available you can do it with ios you can do it with android i still don't know if you can do it with flatter so i own that person and answer to that question or he can google for it uh because flutter has been announced in amplify some few months ago so i don't know if it has full support for everything so uh check that out uh so then we are going to be using also a library that is quite nice that is the amazon location helper and that's also available for web i don't know if there's a similar one for mobile development i'm not a mobile developer sorry and that library will help us to do the calls to the service because the aws sdk that we are also going to use uh is a little bit rough on the edges with the location services it asks you for a lot of questions then when you add this helper it makes your connection way easier so that's something we need then another thing we need i know i'm saying that we need a million things but it's a very complex application when you think about what you're doing with uh with so little code so that's what i'm getting all the helps from all these libraries too to build this thing uh and the last bit that you need is a map drawer so you need a library that knows how to draw maps in your web applications and for that i'm going to do a map libre that is an open source project that allows you to draw maps in web applications and because i'm very lazy i'm using another layer that is the react map gl that will help me to build even easier maps so those are all kind of the libraries you need uh i know there are many but when you start combining them they become very very simple because they do all the work for you so i don't like to code unnecessary code but that's that's why we have dependencies we we don't want to write any unnecessary code we just stitch things together yeah and i think it's nice at least to show you the beginning of a kind of an app that you can really do and more than just a basic hello world of me drawing them up in the thing so that's what i i like to add all these dependencies so we can really uh build something together so uh the next thing i'm going to do is to use this krakow and krakow if you don't know it is a helper for building uh kind of react create react apps it helps you to modify it uh and i'm just changing one dependency there that comes out of the box of the location uh service that is to use the macbox gl and i want to use an open source component that is map delivery so that's the only thing that that krakow is doing and all this code is available in github i will put you the link you will find all the steps that i'm doing as well so you don't need to follow step by step now but if you want to do it at home i will be able to to show you everything so another cool thing that amplify provides in the picture is the availability of using uh authentication so now you can put all these location uh resources behind and um i don't know a sign up page so i will add authentication in amplify so then we can basically get that uh signing page and then we just push everything to the cloud and i have been not doing live things for so long that i i need to to get i'm so used to recording and editing and like i don't have to worry about time and hi everyone in the chat we see you and we see your questions and we'll get a question now then ask because i want to answer the questions the code is available in github so let's let's just take some i think you you explained that early on let's just take that as well for for newcomers is this a google maps alternative from aws well it's different uh but yes you can use it as an alternative but it provides different things google maps are their own provider of maps so they own the maps themselves and they all own the features that they provide on top of the maps with this the provider is s3 here and maybe in the future more or maybe in the future you can bring your own that's something that is not available uh but then you have all the aws features so it's kind of an alternative so different but and it's not aimed at the end user so end users won't open up amazon location services to find an address no no no no no this is something to build applications so use it for your own development of your next delivery food service or making your trucks not to get stuck under bridges but it's for developers this is super developer focus and what about offline support and martial uh offline support uh i don't think it's available yet so i think that's something that maybe it's in the pipeline i don't know uh but it always happens with aws products the more people ask for things the more uh you get things so amplify has support for a lot of things uh offline but maybe this is something coming with the new geo i don't know but i will be super exciting to see the the offline support so no all right and then i will post a link in the chat uh for all of you to find the github repo and all the info i'm sharing so if i forget then there it is here we go um so how to calculate if a vehicle is out of the established route with amazon location service well there is no way to have a that comparison with location service so you will get the route and then you will get where your vehicle is then your application is the one that needs to do the magic so that's something location service doesn't uh provide maybe it's a feature coming i don't know um but with the different features that we talked about before you have the building blocks to build that yourself exactly so that's something you you can do uh pretty straightforward if you well pretty straightforward as forward as is to compare roots but but you will be able to do that and also you can do that server base because the device can send the location to the back end and you can calculate the route on the back end and you can do that processing on your back end with no problem i will be showing today a lot of front-end stuff but a lot of things can be done in the back end as well with lambdas and all these are i can see half of my screen because there is some stringer thing in the way so i don't know what i'm typing so sorry for that uh yeah can you press the hide on that i don't know there it is hi oh yeah i didn't modify the packages i'm terrible at live coding why it doesn't find the croco start that's what i like to do recordings you know i imagine you are a super expert now by having guests all fighting with them live coding oh yeah no that's that's common but i think it's good for people to see as well that it's it is live and things happen and we don't always nail everything on the first try as well no and and i'm talking so i'm not really paying attention i'm just trying to do things and try to entertain you all so yeah i might have not installed that dependency let's see i should have installed everything in the beginning before joining this thing but no worries life sometimes is you don't you don't think things ahead you know let's bring the the thing and this is uh basically the starter app so it doesn't do anything we just need to create an amplify user and after here then i have all the setup done and we can um start adding them up 30 minutes in yay marcia very good is there some other questions but we wait for this to load and for me to uh kind of create an account and validate it and all that well there's more questions around roots how can it optimize delivery routes well it's used the optimization that that i mentioned that you can do if it's working if it's a car it's a truck the weight of the car truck you can also peek if there is um kind of stops in the middle you can decide at what time you're going so if you don't put anything it will just decide a time that now if you put a kind of a time then it will optimize it more why this is not loading uh so those are the basic uh type of optimizations you can do i mean i'm guessing optimizing of delivery routes means to to have multiple delivery addresses and fine yeah you can you can add i think until 20 stops in the middle so a start an end and then all the points in the middle so that's something you you can add uh with no with no problem so let's create an account [Music] sorry words if you just joined us this is the aws nordic's office hours my name is and i'm joined by mauricio today marcia is fighting today uh with as always i think that's kind of mistake we're looking at how to add location data to your applications using amazon location service so now we are starting we are able to go to the location service side and create our first map so let's do that so you find these in the aws uh management console you can create all these with confirmation but i like to show it it's more visible so you can type location and it will take you there so that's good and then there you will have all the features uh that i mentioned in the side they are all displayed and we i think we are going to use them all if we have time if we don't then you can check the videos i i share with you on the links and all the demos so let's create a map and you can see kind of here with uh some information on how to use it so maybe here you can find the information for flutter that may be the right place and then to create the map basically just go here and put a name uh something very original like my map and then here you can define what kind of map you want to display so you have all the ones that s3 and here provide i always like this one because it's very bright but there is also this type of image like satellite image and then there is this kind of 3d maps uh so that's something uh that is good then it has a free tier so you should check the pricing plan and how the free tier works it has quite a lot of free tier for playing around but if you are using these uh for real i will really recommend you to check the pricing plan because it's not as straightforward as one imaging so go and check it and then you need to check this box because this is sending the some information to a third party uh that is the map provider so you need to acknowledge that you know so that's it that's how you create a map in um in this thing the next thing you need to do is to give permissions to your amplify application to access the map i don't know if you're aware but in aws everything that is born is born without any permission so we need to do an amplify of console i i do it that way around it needs to be amplified i think it was right that way yeah okay identity pool and then this will open exactly the identity pool of uh amplify that amplified created for this if you know identity pool is the one that is giving the temporary credentials to your uh users of your application so cognito user pools is where i created my account and the identity pool is the one that has the credentials for those users so here what we need to do and this is one of the hardest part is to remember that name uh because we need to locate it in the i am rolls to give permission so i will leave it open as a secondary tab because i will need to come back to it it's called amplifier nordics location base uh and we want to give it to the author role so this is the role that has the permissions uh to do things in our aws account and in this case to show them up because we want to show them up uh so let's go here and i don't know if it's super small but i will find this and then uh it was nordics amplifying nordics out here overall so this is a role and here we need to create a new inline policy so the airline policies are uh in that repo that i share you you can copy paste them so you know uh you should make a mistake and i will be copy pasting them as well it's json and you can also build it yourself but um it's easier for hobby base and we will add many of these through the demo we will have a good map i want to able to do search want to do able to add the geofences so everything that you add in your application needs to have permissions then the region in my case is ireland so i need to type uh you uh west you i never know the names of the regions uh yeah um [Music] when i'm not putting the pressure of people watching me this is um and then your account id that you can get from here and the name of the map that you just created that is my map and this will give permissions to your application to see the map if you don't do this nothing will work then put a name and it doesn't matter the name because it it's just for displaying here so now basically we can uh go and do the code and i can show you the code that i'm using to draw them up and you'll see that it's very very simple so i'll copy paste my my code everything in my repos are built in the same way you will find the readme file with all the instructions and then you will find a folder that's called base with all the things that are in copy paste in all the different steps so you can do the demo yourself in your own user groups and use it with no problem so uh upgrades let's make this a little bit big so you can see something and basically this application doesn't have much than a map uh so if we refresh it let me refresh it so you know what you're seeing um it will basically have a header and a map and this map is showing montevideo because why not that's my city so how we do that well this is the header where the the title is then we have these libraries that i told you that helped me to draw the react map gl and the map library that one is the drawing library of the maps and the other one is the helper library to use that map libra this is uh configured with amplify so everything from amplify is here and then we have the amazon location services that will help us to do the authentication of the request to the maps so i will show you that in a second so this is a react app and i'm getting when the application loads the credentials from amplify and then i'm also uh getting this create request transformer from that um helper and that is the uh that was something that if you don't use the location helper you will need to build yourself that is a piece of 20 uh lines that basically it's just copy-pasting so that's why it's super handy to use this uh this library and what this does is do the authentication whenever uh how how these maps drawers works is that whenever you are requesting uh i think they are drawn by sprites or something like that maps uh you need to have a sign kind of call to be able to draw that and that um that function is basically signing that call to be able to retrieve that piece of map from the location service and draw it in your map so it's using your credentials as you can see and uh it's doing some magic and then you basically grab that request transformer that you just generated and you put it inside your map and this is the map component that basically doesn't have anything you shall set the viewport that that means where you want your map to load to in this case on the video this is the request transformer that is uh doing the authenticate that calls to location service sprite by sprite or however maps are drawn but it's not like you get a file you get pieces of maps in in in kind of ways uh then you have the map name and that's kind of it to drum up so it's a very very simple thing after you have all the right libraries in place to to draw them up and you can move around you can zoom in you can do whatever you want in this map so that's kind of the first step there's a question about how accurate the maps are the maps are good esri and here are real uh like providers of gps for example all those gps devices that you have in cars are coming from this type of map provider so these are like super professional maps that you can be very accurate and and you can read you know each of the maps when you create a map a lot of information if you know about maps uh on all the specifications of each of the map types so the satellite theory machine has some specific information when the refresh date matches and what you can expect and the same on each of the other maps so that's something these map providers are are huge are very professional and i'm pretty sure a lot of the devices if you have a car and you're using like gps uh thingy they're using these providers and the same with like a lot of public transport they have this gps attached and they are using these providers so very common to see the here watermark on on most exactly right so another question which perhaps isn't amazon location service directly it's rather building something on the side if you want to send a voice notification to a driver about a change in a route what aws service should i use or rather would you choose marzia for reading something out loud i think police service that you need to send some text to and it would rate it down loud but you will need to figure out maybe in the lambda function that the road change and then you will need to send a text to some poly api that it can read that aloud so yes that's very doable right so what's next then marcel next we have our map good now we have our map and the next thing we want to do is uh to find the different branches of these imaginary delivery uh thing so uh i will be using as branches different shopping centers that are there in montevideo because why not uh and i will be integrating this with graphql because i told you i want to build something a little bit more fun than just a hello world so it's kind of what i'm going to do if i can find them here so let's do terminal so i will add a small uh graphql endpoint with an api and basically the definition of what a branch is so that's kind of what we are going to do i will sign it with the user pool and i will just paste my schema in here so i don't want to speak the schema now um i there so i can see my whole thing so again in the base file you will find the schema so here it is and i will paste it now in the in the place that amplified just created for that so if you go to amplify back-end to the api there is the schema and you just paste it there and i will just deploy this and then i can explain you a little bit what just happened so so this is deploying and basically this will be creating a branch in it will create a dynamo table it will create a upsync api that will have the dynamo table place where i can put all my branches and my branches basically just have a name a longitude and a latitude ah and then an id and that's very very simple but that's a very common use case with logic uh with location data that you have your own location data and you want to integrate it in your applications so i want to show you how you can draw that location data and you can then use that location data in different parts of your application this is a part is really not location service specific like the service itself because this is up sync but i think it's good to see how the whole ecosystem integrates super easy to each other and how if you have a gps coordinate somewhere else you can draw them in your map and then you can create geofences and then you can notify users like how the whole things comes together so so that's what i'm i'm i'm showing you the whole thing yeah and that's typically how how you'll probably be using amazon location service it's just one of the building blocks application exactly so that's that's what i like to make this demo a little bit more interesting that just show you uh this is a map and then here you have a box type your name search for it will appear in the map and that's a totally valid demo but i've been playing with this for too long so if you start if we have this conversation in march then i will give you that theme by now i have i have played a lot with this and i'm very excited about this service um so the next thing we are going to do when this finish uh loading is i will go to upsync and i will add these branches i will add them manually from the appsync console because i don't want to create an interface to add branches this is out of that demo and in general in my case we have five branches and that's enough but you could create an interface to add those those branches but i will just do it from the upsync endpoint directly is there any question before i jump in there no new questions right now i believe but please add your questions marcia is here to answer them i'm happy to answer questions if i know the answer i will answer if i don't know the answer i will tell you to google yeah [Laughter] so here is my api the one that just was created i go to queries and then i need to log in i hope this is the end point login this one the problem is i will never know because i always use the same name and password for my test turn points so we'll never know so let's run this one and see if there is something [Music] let's go for it we will know soon uh and what i will be running it's available on the uh here in the base again so if you need it you can find it ah where it is it is this it should be here here i think is that one no it's not well okay i i will check that is available in that base if it's not because this is a very boring mutation full of gps coordinates but i don't think any human normal human needs to remember this because each of the mutations looks like create a branch with this name with this latitude with all these decimal point so you don't want to do that so i will just run the five they run very fast and i'm pretty sure there is a way to run them all together but i have not figured out that yet but that's how you get all the five branches in your api and the next thing i'm going to do is just uh modify my code and you will see that uh something happened we'll what happened oh i copied half of it i have this font so zoom in that i cannot see so what just happened here let me show you because we want to see code and i don't want to type code so the first thing that happened is i created a component called branchlist so this is basically creating a list of all the branches in this case they're just showing um showing the branches and then i'm just displaying that component in the application so for now i'm not doing anything with those uh those components those things so now i will i want to show them in the screen and for that there is where the location part comes into place so uh i will need to have a data a coordinate data and that's kind of uh so i will create a new folder called data and there i will put a huge json inside and that json i created it from a website called geoio and you can use it as well yep json io sorry uh no i don't want to do that and here you can draw your own geofences and spaces in maps and this returns a format that is the format that is a standard that you can download and then you can use it as geofences or things to draw in the map as you will see in a second so that's uh what i'm getting here in data there is a massive json here so basically this json has uh little drawings of these five different branches in a geographical area because it's not a point it's a small area so that's what it is and i will use exactly the same file when i upload my geofences so that's something uh that is kind of nice you defined everything once and you can use it in your application to draw or in your location service to get the geofence um so now i want to draw this in the in the map and for drawing that i'm using that map libre uh feature that has the capability to draw things in map so now you can see that there is these blue uh dots in the map so these are the different [Music] stores branches and and you can see that everything is clickable so this is not a location based feature of the service itself but it's how you can use location data in your applications to uh make them better so you have a map and now you can draw on the map and now you can configure it with graphql with whatever you have in the server if you add a store tomorrow it will appear automatically so this is a pretty pretty neat and the code for this is is very very simple because everything is done by these libraries for you so here we have the list of these uh jsons uh elements that i just imported and then i'm using that uh i'm creating a data layer that is called in this uh map library oh sorry that is blue and it has a little edge and it's filled with some color and that i'm just basically passing it to my map here you know i shall say hey this is the shopping centers list and the type is at geos json that is what i just downloaded and the data is this uh json file that i downloaded from the geosensor and paint it with this information and with that you can draw and you can add points you can add lines you can and in the similar way we will draw our roads and we will draw everything so let's add routing because we only have 10 minutes and then you will see a little bit more of these things in action so for routing what we need uh is to add a router that is the one that is calculating the routes and also a search index because uh we will ask people to input their address and not their gps coordinates because this is a web application we don't have the gps coordinates of people so we don't want to put people in that situation so we will ask them from an address so then we need to convert that into a gps coordinate so let's create a place index and that's basically the search mechanisms that there is in maps that you can basically translate a gps into an address and an address into a gps you can do search and you can do all kind of things for that you create a place index you put a name into it and i will call it my search index and then you pick a data provider because that kind of search and reverse search are made by these data providers so i just picked the default one let me just ask a question in the meantime the question is if it's important to know how these libraries work internally to use them effectively in the apps well i think like everything live if you are doing this and putting it in your customer's hand i will recommend you to run inspections in the libraries there are open source libraries that are very widely used but your you might have regulations in your company that for video to use these libraries i would recommend you always whenever you're using any libraries in the internet it's not that you need to know exactly how to work but you need to understand what you are putting inside your applications from a security perspective and also like maybe your application becomes very slow or you're like so i think it's always a good practice to know what you're using uh you don't need to build it yourself but but have uh be aware of what you're using so that's something i would recommend everybody um you don't need to know how they're working you know uh you can use them but you're putting this inside your your applications you're using these uh to manage sensitive data from your customers so it's always good to do the research uh and in the same way we created the search we create a route calculator and you can see here that there is not really a lot of configuration you need to do it's just picking the provider and that's it because the components are so specific themselves that uh you don't need to do much so the next thing we want to do is to add another inline policy so i will edit this and i will add one for search and one for routing because our application doesn't support that so that's something you want to make sure that you have the permissions in place if not then things will not work [Music] copy paste is my friend so it was my search next did i put that name uh and then we have the other one that is oh this calculate would so it's my world calculator my world later you can do all these with cloud formation if you are brave enough and if you have infrastructure as code i will totally recommend you to do this uh by infrastructure as code because it's easier to duplicate and to have in multiple environments you know building this by hand is fun for the demo uh but it is not the right way to do it uh i'm just showing you this way because it's more visible if i will be deploying a cloud formation thing it will be very boring i'm posting the link to repo once again good go for it so now i have the free three things and then i need to install two more dependencies sorry guys but these dependencies are quite cool the first one is one to make a react uh form and the other one is this called proof that allow us to do some playing with the routing and allow us to uh whatever location service returns when you do routing is a standard format for returning routing but it's very hard to draw so in order to make it easier for me to draw it uh and to the application to understanding i'm using this library called tooth that is the the one that will help me with that so you will see you will see that uh that i'm doing and then when i'm building the routing i'm creating uh one more component that is the route component that is the one from two and that's basic thing and then i'm doing a routing helpers to put a lot of functionality that kind of adds a lot of noise in my app js ah and then i'm modifying the app.js with the routing but the app.js will have very small amount of routing because i'm using this helper at this component uh so that's kind of uh what you will see in in the in the changes and then after that we will have the whole application working the only thing missing will be the events part but that's something i let you for you to discover because um it's the most fun part for for me and gives you a lot of play of what you can do and what you and how you can [Music] play with this service because this is when the the whole back end and and front and start uh integrating together so i will show you what it looks and then we jump into the code if my copy paste will work it will be amazing but i don't know why my life is so hard [Laughter] so let's go to what you will see and then i will show you the code step by step so here is what you will see now it's loaded now it's loaded now it's loaded good so you will see the component uh here from search uh here for searching i recommend you to put a very clean address i have not gone into the whole validation of address and how you do the reverse search so put a very clean address with the city so it's easier for this to work you can improve these by fine tuning and reading documentation but this is whatever then i created a drop down so you can pick the branch where you want to go to and then you can find your way and this should draw something in the screen by the way don't explode in my face or maybe yes why live demos for you oh yeah i could do it recorded but it's so much feeling start my day bye uh oh yeah i don't have i don't have permissions how is that possible did i misspell something that's there or you will get if you don't have permission so i got a 400 free when trying to do a reverse search because it seems that i didn't give the right permissions to the right thing so get map route calculator oh here you can see i copy the same same thing so that's why permissions are very important you can see it in action why how many times i have it no i copy paste something twice search place for index my search index let me this is how you will check it that you have the right permissions i will go and verify that the name is right my search index here it is live coding that's right but well let's try again no rush we've got a minute yeah well it works we live if you copy paste the right things in the right place it works and and you can draw well that's it i'm sweating i always get very nervous in live coding that's what i do youtube videos you know [Laughter] okay let's try again and put an a valid address you will find also the valid address in the repo so you can put one because i'm pretty sure all of you don't know okay i have something wrong in my roles and i'm not smart enough to read it while coding but what you will see is that it draws in the screen so you can um you can go and check it in my youtube channel yeah i posted the links to to your blog post with a lot of more resources so do check those out we are running out of time but thanks a lot marcia for joining us a very cool demo uh if it works as always demos like the most but this is all working in the videos because i i have the magic power of editing so there you can see the whole thing the code is all available for you to try it so there is no black magic um yeah sometimes thank you very much marcia thank you everyone for watching and see you again next week bye bye ciao you

Channel: Gunnar Grosch

Views: 22

Keywords:

Id: 04RlwpsWOCA

Length: 60min 30sec (3630 seconds)

Published: Mon Sep 06 2021