Fullstack Development with AWS AppSync and Amplify

hello and welcome back off you focus otters today we're going to be taking one of my most popular videos which is where i took api gateway lambda and downward db to create a pet api now we're going to take that same concept except today we're going to be modernizing it to take advantage of appsync absync by the way is aws managed graphql service super super cool has a lot of functionality in power and really it's just gonna make our lives so much easier and validate a lot of the concepts that we had to go through in the last video so let's go ahead and take a peek at what all that means by diving into a project today we're gonna be showing how someone can add pets create them delete them list all of them out inside of a react application we have a lot to get to so let's go and get started okay so a lot of you know that i love learning by doing so let's go ahead and kick things off by setting up a react application and uh version 5 just came out so i'm going to throw in an at latest tag right here and we're going to call this uh focus otter and then we'll just call it pets focus other pets this is going to be the name of our react project this is going to go ahead and scaffold our application out i'm not going to bore you with the installation process i'll catch you back here once this is all done okay it looks like it just got done installing 30 seconds wasn't too long so i'm going to clear this out and then i'm going to open up vs code i'm going to bump this up maybe to right there let me know in the comments if that is too small but first things first let's initialize amplify inside of our project so i'm going to slide this over just like this and let's see what we have here i'm going to kick things off by running amplify in it and again this is just sort of getting amplified scaffolded within my application and if you don't have amplify installed keep in mind all you have to do is run mpmi dash g and then it's going to be at aws amplify slash cli that'll get the cli installed for you we already have that so let's keep moving here project focus other pets is just fine and it recognizes that i'm in a create react app application you can see it knows my editor framework source directory build etc so let's go ahead and confirm this initialization i'm going to say yes which sets up cloud formation in the background to deploy my application and get all that good stuff going for me now there's two ways to do this i can set up a aws profile or i can just put in access keys i of course have a profile because i've done this a couple times if you don't have one if you just run amplify configure then that'll help you create one right away for you focus auto dev is what we're working in today that's where all this is going to be deployed to and again it's just taking all that information and deploying it to my correct aws account no need to bore you with washing the deployment so let's go ahead and return when we have the next step available okay so we got that taken care of and now we are off to the races we're ready to add in our backend services so we're in a react application but we're not ready to work on the front end yet we could but i'm going to add in some authentication first and foremost and this is already different from the rest api that we created last time so amplify add auth is going to set up authentication authentication is going to be using aws cognito or amazon kineto under the hood but we actually don't need to worry about all of that this is going to take care of all the default configuration things like how long should a password be or how strong should it be if there's special characters that need to be involved things like that as far as how we want our users to be able to sign in i think having a username is fine and we don't need to do any advanced settings so we can dive into those in a later video so i'm going to say no i'm done here and guess what we just set up authentication within our application so once auth has been configured i'm going to go ahead and clear the screen now what does it mean that auth has been configured i mean locally all the ingredients are set in place for us to have authentication inside of our app we haven't pushed this up to aws just yet but you can see if i run amplify status that we'll get a table showing exactly what we have configured in our app so there's mine we have our authentication there's the name of it and then it's in a create phase so from here let's take things uh to maybe like a verification stage we could say npm start and this is going to put our application up on localhost 3000 so that way we can see what it looks like all right so if you've had create react app installed before you ran through it this is looking pretty familiar to you at this point but again we've just added authentication so where is it so as i mentioned we added the backend portion of it but we haven't told our front end anything about it so let's fix that real quick over in my terminal i'm going to go ahead and install a couple dependencies the first one is going to be aws amplify and the second one is going to be at aws amplify ui hyphen react the first one gives us the ability to call services that we're creating so for example if i want to call an api i'm going to be using this package and again i'm going to be referencing that last video where we created a lot of the rest api services so if you checked out that video then you already know what this package does this one right here is going to be all of the pre-built ui components that amplify has created for you which is really nice when you don't want to create your own sign in sign out verify email etc components we have a lot of those uh set up for you and the cool thing is that today we're not going to be focusing on the styling but instead i will do that in the next video so that way we can take a deep dive into what those components are so this is going to go ahead and install while that's kicking off i'm going to head over to our app.js file and as you can see we have nothing crazy going on here this is just your default starter package and in terms of going to the true default our index.js file is going to have our entry point into our application i'm going to delete this boilerplate code and i'm actually going to get rid of this sidebar for the moment because we're going to be spending a lot of time in here for right now now when it comes to getting all set up there's a couple things you want to do first and foremost we're going to go ahead and bring in that config file and the config file just got created for us as this aws exports file right now it just has sort of our region in place or rather my region in place yours might be different so as we push this up to aws it's going to have all of our resources and secrets etc inside of there which is why it's in our git ignore as you can see right here so you don't want those secrets up on github or living anywhere else but it's perfectly fine to have it in here now i'm going to bring that config file in and i'm going to say import it from i believe it's dot slash aws exports and then i'm also going to bring in amplify from that aws package that we brought in and i need to tie the two together so i'm going to say amplify i should probably spell it right and then i'll call a dot configure on this and then all i have to do is pass in my config now this is enough to tie in our front end with our back end but i also want to use those pre-built components and to take advantage of that i'm going to say i'm going to bring in what's known as a provider specifically an amplified provider coming from amplify ui react now this amplified provider simply wraps my application i'm going to keep this strict mode inside of here so then i can go ahead and take that and i think right there looks good and that just simply takes all of my aws resources and provides them to me now the ones that i care about in particular are going to be the user uh the ability to sign out and then of course any additional themes that we'll look into not trying to spoil it but in the next video so what's a simple way to verify what we're doing here the provider doesn't do much on its own so i want to go ahead and make use of it by saying hey app let's go ahead and just make it so that the whole thing needs to be verified so the entire application so right when this loads up i want our users to sign in right away so i'm going to bring in ui react again but in this case we have a with authenticator component that we can use now i'm going to go ahead and wrap my entire application inside of this now one more thing i always forget this is that i need to import the styles that come along with all of our ui components simple enough i'm just going to bring in a quick little style sheet which is at aws amplify react slash styles css if i give that a quick save and head over to my application you can see now i have a sign in and a create component and in fact if i click on forgot your password i have that as well so all this is ready to go but you see my console it's pretty much just kind of blowing up and the reason as we have here is that we just haven't pushed up our auth resources to aws we can fix that pretty quickly by opening up our terminal clearing this out and running amplify push now i'm going to put in the dash y flag and the reason why is because we already ran amplify status which said hey yeah you have auth it's in a create stage and amplify push is going to actually run amplify status first so to bypass that i'm going to put in dash y which means that's okay accept it and move on with pushing my resources up to the cloud all right looks like it just finished as you can see here it took a little bit longer just because we're pushing actual resources up to aws so i'm going to clear this out and here comes the fun part because now we're going to add in our api you're going to see just how much easier it is from adding a rest api so amplify api is still the command that we're going to be using except instead of choosing rest this time we're going to be choosing graphql so there's your two options there graphql and then from here now we get to sort of set it up exactly how we want first thing to access is what is the name of our api focus other pets works for me how are you going to be authorizing now we have authentication fully set up so we don't have to use an api key which is best used for demoing and non-production apps i'm going to say i'm going to hit enter and then choose amazon cognito user pool which again that's our auth provider that we're using under the hood we can combine other off types if we want but we're not going to in this application and then it brings us back to the menu here conflict detection and data store we'll talk about that in a later video but in this one i'm going to go ahead and hit continue next up is asking me hey do you want to choose like a template that i can start you off with by default we're going to have to do blogs and then something like a project manager app where you'd have a bunch of access controls for a pet api i think a to-do application fits well because we're going to have pets with a name description and probably like a pet type so i'm going to select that one and then we do want to go ahead and edit the schema now so for a to do that got generated without any off type so we're going to modify that with our actual pet so i'm going to select yes visual studio code is the editor that we're using and then as you can see it brought up the to do i'm actually going to go ahead and delete this because again that's just the template and from here we're in graphql layout now if you haven't worked with graphql before don't worry from here i'm just going to set a type this type is going to be called pet and this is sort of just modeling the data it's asking hey what does the data look like in your application we're building a pet api so the model type that we have are pet it could be to do blog posts etc every pet needs to have a unique identifier i'm going to call mine id it's usually best practice to call it that and in graphql and specifically within appsync i can give it a type of id making it required which is this exclamation point the cool thing is that appsync is going to automatically generate a unique id for me i don't have to worry about creating my own every pet in addition is going to have a name it's going to be a string type which is going to be required it needs a description which i'll go ahead and make required and then from here i'm going to say it needs a pet type which is going to be a pet enum and again making it required now this pet enum is essentially you can think of it like an object here where i'm going to list out specific fields that have to exist i'm going to say it needs to be a dog i should probably give this a name a dog a cat a what other pets can we have rabbits maybe a pet turtle and this essentially just means in my code you have to explicitly call whenever you specify a pet type it has to be one of these values now it'll probably be the string dog in my application that's fine but at the end of the day it has to be one of these values now this is fine this is again just modeling my data where this gets amazing is the fact that amplify gives you directives a directive is a little piece of sugar like that that you can tack on that has enhanced functionality specifically this app model directive is going to automatically take this type and say oh this is for your api well i'm also going to hook this up to dynamodb just by specifying at model on here so i don't have to do api gateway lam.db this actually takes care of all of that and i'll show you what that does behind the scenes later on the next thing i want to do is add on another directive and directives aren't specific to absync they're a graphql thing but amplify supports them in this manner this directive is going to be called at auth from here i can specify what i want to do from an auth configuration standpoint now specifically i want to make it so that when i add in a pet and you log in you don't see my pets and vice versa when you delete a pet from your application they don't affect the pets in my application they're completely separated based off of who's logged in so this at auth is going to take in a set of rules these rules are going to be an array of objects and for the first one i'm going to say allow the owner which means allow the owner to do everything and don't allow anybody else to do anything to my specific pet again you can log in and create read update and delete your own but don't let it affect mine and just by adding this in i get all of that the strength of appsync within aws is that it just natively integrates with both dynamodb and cognito which is a huge benefit over api gateway lambda dynamodb where you have to do all that stuff manually now that's it from here i can go ahead and run amplify push and i'm going to pause here because when i run amplify push dash y yes it's going to say i have authentication set up yes it's going to say i have an api that's created that is about to be set up but it's automatically going to create those connection points that i talked about amazon cognito gets connected and hit enter there our api is going to get connected to dynamodb the coolest part about this is that we get code automatically generated for us that makes this connection happen so this is my favorite part this is called can we build out our front end before this gets done building so let's go ahead and get started here what i want to do is build a front end that takes advantage of messing with this api so i'm not going to pause the video to get the build going instead i'm going to hop over to app.js and let's see what we're working with here uh we have this app let's just go ahead and get rid of this let's do some cleanup here uh command z or option z will put everything on its own formatted line and what can i do i can get rid of all this here and just really start from a blank screen now i want the ability to first and foremost fetch my pets i need all my pet data in there but it doesn't make sense to fetch them right now now that i think about it because when the application loads i'm not going to have any so let's first create something where i can add a pet so i'm going to return a div inside of here i'll probably have something like a form and that form is going to have a couple of things we'll say input number one for the name one for the description and then probably a select for the pet type so for this name we'll give it a placeholder i think that's fine and we'll say enter a name i'm going to hit enter here and then we'll also give it a name of a pet name and then we'll sort of do the the same thing for the other ones so uh enter a description and then pet description and then for this select oh i'm going off from memory here i will say select and then i believe we got to give it some options so uh again i'm just sort of making some input fields so that way i could interact with this api that i'm creating uh first and foremost please select a pet i think that works uh let's go ahead and duplicate this a couple times and we'll say one two three and this other one is going to be dog so it looks like the build beat us so i'm going to go ahead and speed things up from here okay so nothing too fancy was added i have the select i gave it a name and then i have my options listed here each one has their own value and then i also have a name for the the pet in the description etc uh let's go ahead and pause on the html for the moment because what i want to do is hop over to here and sort of show off what just got generated for us so the cool thing is that we now have a graphql folder inside of here i can see that i have mutations which show how to create a pet update a pet and delete them and again this is just graphql if you haven't used graphql before but the coolest thing is that these are the api methods that i would call to interact with my api i don't have to actually go into any kind of back end i can just import these into my front end and take advantage of them and then we also have queries to get a pet and to list pets we have a fancy schema.json which goes into a bunch of type data we don't have to worry about that at all actually and then one of the coolest things is that we have the ability to subscribe to data so we can open up a websocket so that way anytime a pet gets created or updated or deleted we can now listen to that and take changes so if you were to add a pet i can get a live feed in my application that that just took place now this isn't magic nothing is happening behind the scenes and i'll show you once we get this all working what's going on and where that data lives but for now i'm going to go ahead and head back to our application and finish up with the front end so we have our form now when the form gets submitted let's just go ahead and have a handle submit right in here if i could spell that right and i think we just need a button here yes so when we have the button clicked it's inside of a form so it's automatically going to get triggered we'll say create pet and this is looking pretty good so over here with this handle submit let's go ahead and define this and see what happens const handle submit equals uh it's going to be a function and the very first we got to do is not let the screen reload so e dot prevent default is going to get called and then in addition i'm going to go ahead and make this an asynchronous function so i'll wrap this i put async right in front of it and the reason why i'm doing that is because all of the methods to interact with our data is going to return a promise and i don't want to do the whole then chain so we'll just make it asynchronous now let's first focus on creating that pad so i'm going to say await and then we have a handy create pet function in here and i know we do because we just took a peek at it over in our mutation file there's create pet if i head back i can import that into my application import and then we'll just sort of do the the braces here from dot slash graphql slash mutations and then createpad is what we're looking for before i get ahead of myself createpet is going to be the function that we're calling but we still need the api to interact with it so i'm going to bring in the api category see if we can get that auto imported there it is and i'm going to say dot graphql inside of here we have a query which is basically saying hey i'm going to put in a graphql function and what we want to specify is createpat function that we have automatically created for us now it's like cool what are all the variables that get sent over to be able to create this this pet that you want me to do well i could specify the variables by doing variables and then opening this up now if we take a peek at this function you'll notice that createpet itself takes in two parameters an input and a condition so for all of this data inside of here we actually want to specify that as input so i'll say input and then the id automatically gets created so i'll just say name is going to be equal to something um comma description is also going to be something for now and then we also have a is it a type or a pet type it is a pet type from right here so then i'll say pet type just like that it's going to be equal to again something we don't know where this is coming from yet because we haven't gathered it from our form now the cool thing about giving these all names is that i can just pull those values off of my event so e dot and then i'll destructure this to say target and then for the name i can say e dot oh whoops i already have the target in here target dot pet name same thing for description and then lastly we'll throw in the pet type which i believe is still called pet type uh looks like i have a red squiggly because i do need that event right here so one thing i can do is just bring that back in i'll say e just like that now they're all wondering where that target is coming from so then i can say cons i'll say target equals e there you go and if you want to simplify that further feel free all right so we have this set up now what if it fails so let's go ahead and throw this in a try catch i'm going to go ahead and take this code move it up into the try and then i'll have a catch block right down here for now we're just going to console.log it out but i think we're in a good spot to at least run the application or or check the application i think it's already running and see just where we're at if we have any mistakes and if it's even working so our code is pushed up so let's first create that account create account we'll say empty lindo next up password confirm it and the cool thing is like we give you validation if you notice that the passwords must match you get all that good stuff out of the box okay um email is there create account and yep we just got that 965 104. and then this should take me straight to my application now nothing fancy is going on here right we have the ability to create a path i'm going to head over to the network tab whoa and let's clear this out so i'm going to open this up just a little bit further so i get the trash bin thanks safari and from here let's enter in a name i'm going to say my dog remy and give him something real he is the goodest boy and then yep he is a dog but you see we have our other attributes here i should probably check the spelling on the casing but sure and then create pet and then once we enter to go ahead and create this pet i'm going to click on create pet and nothing showed up in the network tab let me check here so it looks like we get an error that we can't serialize something so something can't be serialized um now let's take a look oh i see what it is um i'm sure that you all caught me so let's let's fix this real quick i have the target.pet name that's giving me the html element i actually need to tack on a dot value to get the value from this so of course you can't be serialized because you're not a string you're you're an html element okay so let's try this again i'm going to clear this out click on create pet and nothing popped up in the console let's check the network tab and there we go we have remy he is the goodest boy so we have handle submit what happens when the application first loads well i can say i want to bring in a use effect and because i want this to be when the application first loads or first panes then i have to specify this empty array inside of here so what we'll do is we'll just define a function uh that fetches our data and then it'll call that function const and then we'll say fetch pets we'll set that equal to asynchronous function and then down here we'll go ahead and call fetchpads just like that so from here i do care about the response and i'm going to await api whoops that graphql same as before except now that query is going to take in uh we'll just call this list pets and the reason why i'm calling it that is because if i duplicate this and go to the queries file instead we actually have a function called list pets and again you can check it out just by heading to that file so now that we're inside of here let's go ahead and say okay we have the response how about we uh maybe just do a quick little sanity check and we just return the response or rather log it out and inside of here you can see that we have two objects uh both of them are saying the same thing the first time that i tried to make it and then i i tested one more time with rem being the goodest boy and as you can see we are successfully getting our data back which is awesome so we get our data and then there's data that lists pets items etc so let's keep that in mind as we are returning so i can get rid of this and then i can simply return all that data right there so the response data dot list pets and the items and then when we call fetch pets now we can say that then and then we have all the pets in our list and we could probably update it in some state that we can create just by doing that now right now we don't have anything called set pet data but let's fix that real quick so from here const and then we'll have pet data as the getter and then set pet data as a setter that's going to be set equal to use state so let's bring that in and by default it'll just be an empty array so we have our data being fetched we have a way to create it we should probably just display it on the screen real quick so let's go ahead and hop down to the bottom of our application we're not going to do anything too fancy here but after our form how about we just have a like a main tag inside of here we can have an unordered list which is just going to list out our data so we'll take our pet data we will map over it so we'll say for each pet go ahead and run this function and this is just going to return probably just a list item i would think and only thing that's going to be in here would be a probably an article tag since we're going to be grouping content together so let's go ahead and get the name the type in the description all in one go okay we got that set up nothing too crazy just an h3 tag to make it bold we have an h5 just a smaller bold and then a paragraph tag but for each list item i do want to go ahead and maybe not get too fancy here but apply just some quick styling so i'm going to paste this in you don't need to see me type all this out but remove the bullets add a border put in some margin and just make it 200 pixels let's see what that looks like once we are able to verify everything it looks like we got a quick little error what's popping up here unexpected token oh that's probably with this pet area can we do just like that to fix it so we have pet no that doesn't seem to fix it how about i just wrap it then that should work as long as i have my closing one right down here maybe okay there we go so we get our two items here we have remy times two but note that each one has a different id to it and you can verify that here with this id compared to this one so we have that set up we have the ability to list create uh what about deleting i think that's the last part that we'll do in this example before we dive into sort of what's happening behind the scenes so if we look at deleting how about we just make it really simple and just say on click so whenever you click on these we will run this function it'll be called handle pet delete which is just going to take in the pet's id now this function doesn't exist yet so what we can do is copy that bring it up top and we'll define it const there's our function equals async well too fast here we go and we already know that we're getting the uh pet id in here now it's asynchronous that again using that same pattern i'm going to say i want to call this we should probably bring it in now it's in the mutations and it's the delete pet so you can see we have easy access to all of the operations to do this so same as before api.graphql and then we have our ability to run the query this is going to be called delete pet and then the variables it just needs the id of what needs to be deleted so for that input the id is going to equal the pet id all right now it doesn't return a promise we're not really using the promise here but still it's good practice to await that and then we can do the same thing as before and wrap this in a try catch so we have this set up and i think we're in a good spot to test things out so when i click on this one now we don't have anything set up as far as state within our our actual components so i clicked on it if i refresh okay it's gone and if i click on this one and refresh that's gone too now obviously it's not ideal to have to refresh so i think we can spend two minutes to go ahead and just get the state set up in our application so i'm gonna flip back over uh we're gonna have some state called well i guess we already have pet data uh we're just not updating it so the cool thing is we can take care of this really easily i think just by saying let's see here when the application gets submitted how about we how about after this try so after we try to update the back end we can go ahead and set the pet data setpet data and then for this we have to pass in a function to it and i'll show you why uh because we want to take into consideration the current pet list so whatever pets might be in our our state at the moment and then we're just going to return an updated version of that so dot dot and then we'll have that current pet list whoa i need the pet so i can pull that off of here so we get our pet data back but it's gonna have that data attribute on it so i'm going to say curly braces data and then we can use that here so it'll be data.createpad so we have this setup so every time if we test this out every time we submit we should be able to get it like live in our application so i'm going to say uh george he was the tallest dane and again we oh i need to fix these but still we have a dog create pet and then he pops right out great uh the next option is to when it gets deleted like how do we delete that super simple all we have to do is in our delete we're giving the pest id so that works how about we we do a couple of things one let's go ahead and create a new pet list so const new pets list and this is going to equal like our current pet data except we're going to filter all the pets that are in there so we're going to take that pet and we're just basically going to say hey whatever pets id uh doesn't equal uh this pet id that i'm passing in give me everything else except for that one so there's our new pets list uh we're still going to remove it from our database and then once we're done then we can go ahead and set pet data with our new uh pets list cool i believe that should work let's double check and let's see how we're doing here so i did have uh regina the bunny so we have the rabbit we have the ability to create the pet there we go and then when i click on george awesome it's gone if i click on regina gone and there you go just like that you saw that we spent a lot of time on our front end uh not so much time on our back end and it was just a whole lot easier to get this application set up because everything just seems to be managed for us now this isn't magic that's happening and i do want to emphasize that a lot of applications will show you or build template scaffolding tools will go ahead and hide everything for you make it super easy but when it breaks you don't know what's going on so in this amplified directory we have our back end we have our api and our authentication let's hop into api and what we're looking for are the resolvers so if you click on this resolvers directory it's going to take you to the readme where you can read more up on how they're generated but if you want to look at the actual resolvers go to this build directory and check out the resolvers that are inside of here now you notice this is all ignored stuff like you don't really need to be messing with this but if you're curious let's first check out what happens when we create a pet and i think going through this flow really illuminates a lot of things uh when you create a pet it uses this templating language called vtl we'll dive into it in a later video i promise but it simply checks like hey are you part of a user pool do you have authentication already set up and it's going to look at the data types that are on your on your graphql schema so there's a whole bunch of things like jwts being checked um owner claims being set and just making sure that you're allowed to create this in the first place next up once we're past authentication then we can start adding some stuff and as i mentioned earlier when it comes to that id field it automatically got created for us but how so let me bump out of that and you can see it's just using a utility found within vtl which appsync takes advantage of that says automatically generate an id same thing with the created at we're automatically going to create that from a timestamp when you first create this you're created at and you're updated at are the same thing so we're going to add on some initial fields next up post auth we're going to take all this data which is in graphql spec and we're going to convert it to json super simple once we get done with that then we're going to head into here and this is really cool because this is all of that dynamodb integrations that we don't have to touch now it's in json so we're going to go ahead and call the put operation and we're going to call a utility method for dynamodb which is going to map those values from that object that got passed in from graphql to dynamodb and if there's any conditions that need to be applied those get taken care of if we need to check for any attributes things like that all that gets handled here now you can write your own but have fun writing this right we automatically do that part for you simply by adding on this app model directive takes care of all of that in addition it went ahead and created all of these files for us so that we don't even have to write the the functions that make that connection go a whirlwind tour of appsync and how to create a cred api based off of using appsync and dynamodb now we're even able to add an authentication which i wasn't able to cover in my rest video just because it would have been so specific so if you're interested in more content like this definitely hit that subscribe button i'm chasing down a thousand subscribers i'm posting more content frequently and regularly so definitely check in every tuesday wednesday but with that said my name is michael leondo let me know in the comments what you thought of this video and what you'd like to see in the next videos but i'll catch you next time where we're going to be beautifying this application with a bunch of the built-in react components that we provide to you with this new package that you saw today i'll catch you all next time thanks again focus others peace out you

Channel: Focus Otter

Views: 13,098

Keywords: aws, appsync, aws amplify, fullstack, serverless

Id: OK2B8cp1EyE

Length: 44min 14sec (2654 seconds)

Published: Wed Jan 19 2022