BUILD A MAP WITH SEARCH APP (with AWS Amplify and Amazon Location Services)

hello world and welcome to another episode of fuva in today's episode we are going to make a map application using amplify and the new location service from aws if you want to know more about serverless cloud computing or software engineer practices in general subscribe to my channel in the red button below i post videos every week so let's get started during ribbon 2020 at the end on werner's keynote one of the most i would say random services was announced i was really not expecting this one that was the amazon location service amazon location service is a service that lets you handle a lot of localization things of an application like maps search indexes um geofencing you can add trackers and know if those different trackers have get in and out of the fences so basically this is a set of of services that are provided by aws so you can use in your applications to add map functionality because until now if you wanted to add map functionality you either needed to do it yourself code it yourself or bring some third-party api into your application maybe you will need to get another authentication mechanism or things like that that will add a lot of complexity in this way everything will work with existing authentication methods and everything will be behind the impermissions that we are very familiar location service provides maps and different tools that are not provided by aws they are provided by other map providers like s3 and here and i imagine the future new providers will come so you are not it's not like aws launches a map platform no no no they are just getting the maps from there but uh it's kind of making it easier for you to consume those maps with uh known sdks and apis like we are going to see in this video i want to show you how this location services is integrated with uh authentication like cognito we'll see it later you will see how it's integrated with amplify we will see uh we will not see it in this video but you can go and check it out how cloudwatch uh works and cloudtrail as well for all the accesses to the api also location service provides a connection with eventbridge when you're using the trackers and the geofencing there is a event-driven system going on there so if you want to know more i recommend you to check that out if you want me to make a video and there is a lot of interest about that i can show you a tutorial on geofencing and tracking in this particular video we will be talking about these other two features our maps and search so in this demo i want to show you how you can create like a google maps application a very ugly one because you know i'm not a front-end developer but we will have a map we will put uh display the map in what we want and then we will have a little search bar that we can search for places in the world and the map will update according to that and all that using amplify and the location service so let's go to the code and see how this is done in order to do this demo you need to have an aws account you need to have amplify install and have access to the location service so the first thing we are going to do is to create an empty react project because we want to have an application to work with i will use create react app as always i always end up doing that and i will name my project amazon location service maps put the name you like and that will download the whole internet in your computer and i will speed up until we are done so now we just get in and open this in a visual studio code and we are ready to start working with amplify so the first thing i want to do is uh in the terminal inside this directory is to install a couple of the dependencies that we are needing the aws sdk and aws amplify so i'm installing those dependencies because we are going to call them later when we are working with our application so again after all the internet downloads into my computer i will see you because this takes forever so now we're done and now we can run amplify in it if you don't have a clue what is this amplify and what is amplifying it i'll leave you in the description box a playlist where you can go and learn about amplify and what it means to amplify need and all that stuff but for now you can follow the steps it's not a big deal but this is just initializing all the resources that you will need in the cloud for using uh for this cloud native application that we are building amplifying it will prompt us with some defaults we will go through all the defaults i just use the name for my project i put maps and i didn't left the default because it's too long but the rest i will go through the defaults because that's just asking about our type of project the language the framework and blah blah blah then i will uh tell what is my aws profile you have to have a natalie's profile to use this or you can try the admin ui that i talk in another video but to follow this demo like i'm doing have an aws profile configured and this will take a little while while it's initialized the project in the cloud basically it creates a couple of buckets a couple of roles and everything that it needs to get you started so after this is done the next thing we are going to do is to add authentication and we are not adding authentication to our projects in the sense that people will need to use a username and password we just want to have this cognitopool in there so basically we can then attach a policy to this role that cognito will generate for us for all the guests so they can basically see the maps so it's just a security protocol and i will walk you through it so now we will add the authentication so i will say amplify add off and it asks what kind of configuration i will go through the default the username password i don't care because we are not going to use that and the next thing we are going to do is amplify push to push all these changes that we just created in locally like defining the authentication is not in the cloud yet into the cloud so amplify push will push everything into the cloud this takes a while so i will speed this up until it's done so now that this is completed we want to do one thing that is give the unauthenticated users or the guests of our applications permissions to get access to all these location services so what we are going to do we are going to use this command amplify console auth and that will take us directly to the console part of our application so we don't need to search and that's pretty neat because finding the right user pool or identity pool if you have many can be very painful so i will click identity pool because that's what we want to open and that will take us directly if you're logged in in your aws management console that will take us directly to the right identity pool identity pools are basically um the part of cognito that are giving that is given a temporary aws credentials to the users so basically when um there is a user pulls an identity pulls user pools are like directory of users and then uh identity pools are like the permissions of the users if you want to know more about cognito and go a little bit in depth i'll leave you a link in the description where we talk about uh all these things with sebastian and it was really nice video so i will not go into the details now but basically identity pools will give permissions to authenticated users as well to guests so we are going to edit the identity pools and we will allow to have guests in this application because for now there is no guess so meaning that now all our um guests will get a role when they are unauthenticated and then we can start giving policies meaning permissions to this role to access different aws resources so remember the name of your unauthenticated role because we will need it in a second because now we are going to i am i am is the service that is in charge of managing all the access and authentication in aws in there we are going to go into the roles the roles are um you will have many so first use the search and search for the name that you just remember from the authenticated so i will use amplify maps and then i will look for the announce role and then to this role we will attach a policy a policy is a document that has a lot of permissions so i will attach an inline policy that i will use the json and i will just paste this document into this json you can see here there is a lot of stars stars in policy are bad but i'll give you the stars because this is an exercise if you want to use this in production you will need to give specific access to specific resources so how you will do this you will go and give the exact actions like get maps or list maps or whatever and then to the exact resources that are the maps and the inch search indexes that we are going to create for demo purposes i'm using the star but again this is not the right way to do it um so be careful on uh if you're putting this out in the world you're giving permission basically for everybody that is not authenticated to access all your things inside the amazon location service this is dangerous disclaimer disclaimer disclaimer let's go back now we have this dangerous policy in place so disclaimer again we review it we create it we put a name and then that's already attached to our role so whenever we have an authenticated guest they will have permissions to do whatever in our location service that's very handy and very dangerous so now let's go again to the amazon console and open the location service and this is the new service from aws and here you can create maps and search indexes and your financing and tracking so let's open the sidebar and go to maps but we'll create a new map with another name and i will put the name fubar i don't know maps and then we can choose what kind of map we want and this is just the style and who is the provider is this s3 or is it here uh is it light gray is it like i don't know typical map or it's dark you pick the one you like they're more or less all the same and here i shall speak one and then voila we are ready so that's our map now we can go to the code and start coding i will be doing everything in the app.js because you know i'm not a front-end developer and i'm lazy so i will start this application in the browser so we can see the results right away when everything is done and then we can start working on the updates so we have in source app gs and there we have our application the first thing we need to do is to import like a million links i will import react and use state and use effects so i can use them for my application then i will import two things the react map gl and the mapbox gl these are libraries that will help me to draw my map in the screen one thing is that these libraries with the newest version they don't work with the location map service so you need to use older versions yeah so i will go to my package.json and i will do add these libraries with the right versions the right versions that work with the location service and then i will run npm install so i make sure the right versions get into my project this is very important because if you just run npm install with the names of these things they will bring the latest version and you will see that this doesn't work but you can draw these maps with many other libraries so i just use this one because i just use this one but there are many others so you can go and explore how to draw your maps if you are using ios or android then there is also things there that you can draw maps with so this is just the library that i found the next thing i'm going to import is all the amplify things that we need now so we have the amplify we have some kind of signer we have the aws exports that is where all our parameters secret parameters from our application is stored uh then we have the amplify configure to configure our installation from amplify and then we have a constant with the name of our map and we need to put it in that constant because we will use it later on so now we are ready to add our first function that is the transform request function this is a function that the map will use to sign all the urls correctly with the right credentials that amplify provides so this is something i found in the documentation of the location service i will put it in the description box so just copy paste it and it's kind of what it is so it works pretty well but basically it graphs that url and it sign it with the credentials so then aws can do something and everything is good and now i'm going to replace the whole function up with my new app function so with my new component this component has a couple of uh parameters the first one is the credentials these are the credentials that are coming from amplify so i'm using the auth library from amplify to get the credentials of the user that is just registered well that is signed on in this case is this guest user that has this role with permissions to access the uh geo and then we have this viewport the viewport is an interesting one it's just the longitude latitude and zoom that we are going to provide to our map in this case is somewhere in the middle of the united states you put the logitech and latitude that you like you zoom as much as you like and then we have the uh kind of website itself the first thing that we'll do is load the credentials after the credentials are loaded then we will draw them up because we need the credentials in order to draw them up and then we are calling that react map gl component with the viewport and then the transform request that is signing um this url with the right credentials the map with name and then if we want to change the viewport because we want to put a different place in the map and we don't want to rewrite the whole page then this is the method that we need to pass this is very simple and now we should save and reload our page and we will see that the map is kind of loaded in vancouver i thought it was in the states but no it's canada so yeah that's kind of what we got we don't have a search bar here but now we have a map so if we change the logic dude and latitude then we'll see that we will end up in different places that's good i don't know where we are going to end up with those longitudinal latitude middle of nowhere good so no idea what is that if that's the states or canada or whatever let's go back to the location services and create a search index for places so we are going to place indexes and we create a new place index and we put a name again foobar place index and we have two types the ones from s3 and the ones from here they both have different features but for us they're the same but if you need something in particular i recommend you to go and learn what are the different features that these ones allow you then it asks you if you want to store the results and we'll say no and we will save and then we need the name of the index in a moment and we have the a rnn there if you need to fix your uh unauthenticated role policy that's the one so let's go and add a couple more things in our import the first one is the location and this is using the aws sdk that we imported at the beginning this is the location client that will help us to do the search and then we will add a new component here that is the search component and this is basically the little search box that i just created a small component i could put it in a different page but again you know i'm lazy so this search component will have a couple of attributes in this first one is the place and then it has a couple of methods to try to collect all the inputs whenever somebody types something and whenever somebody clicks and then we have the input box and the button so whenever somebody types something then we'll send that to handle change and whenever somebody click we will search for a particular place and the search methods coming in the props so it's in the parents component that in our case is the app so we will add that in a second but before adding that we need to create the client attribute in our application the client attribute is a client for the location service so we need to create that and you will see that the create client basically requires the credentials from out amplify that we are getting and then it will create a new client in the right region with the right credentials and then we can use that client to search and all kind of things using the sdk so now with that then we can basically uh add the search method in our application component and this search play so we give the place like helsinki and then it use the index name in this case footworkplace we need to replace it with under text and pass that to the client that we just created in the method search place index for text and it returns some data here we are getting an array of results and i'm just fetching the first one so imagine you put i don't know springfield there are many springfield in united states so basically you're going to reload your map in the first result if you want to show all the results you will need to create a view and display this and allow the user to click like google maps does but this is a poor map google maps and then with that we are going to get the longitude and latitude for each of the results and we are setting the viewport of our map with those and that's kind of it oh well we need to add the search in the in the web page so let's add that component in our application and now we're done so let's refresh this and see how it looks now refresh and you see in the bar there is helsinki that is the default and then the search and helsinki appears then i can do um on the video that is my hometown and i search and when the video appears then i can do barcelona that is one of my favorite cities in the world and bloop it appears then i can search things that are more specific like the airport of uh paris church the goal and i don't know why i remember that airport this one but yeah that appears so you can see that it's searching if you search things that are like springfield you will get a random one i don't know how uh it decides which one is the first result but yeah be careful of that so yeah we're done don't forget if you're using this in production to change your authorized unauthorized role to be very uh like to give the permissions exactly to who you need and where you need so that's the video for today i hope you like it if you did give a big thumbs up let me know what kind of other services you like me to cover the code is in the description box as always and yeah i hope you enjoyed this demo this was very fun thing to build because there was nothing out there of this thing yet so i was having a lot of fun i see you in the next episode of uh [Music] so you

Channel: FooBar Serverless

Views: 5,225

Keywords: foobar, serverless aws, serverless tutorial, serverless web application, aws amplify, aws amplify react, aws amplify example, getting started with amplify, amplify react tutorial, amazon location service, amazon maps, aws maps, amplify amazon location service, amazon location service skd, google maps tutorial, maps application, google maps application, react map app, react google map search, google map search application, map search tutorial, react map tutorial, aws cloud

Id: -QcEMHqndzw

Length: 22min 14sec (1334 seconds)

Published: Thu Feb 04 2021