Full Stack Photobook App | Vue, GraphQL, AWS Amplify

[Music] hey developers my name is eric i'm an author and educator and i run the program with eric youtube channel my youtube channel is really focused on javascript html css and especially vue.js so if you guys are interested in any of those topics make sure you click on that link in the description below first i want to thank traversing media and brad for giving me this opportunity to talk to you guys today so let's just jump into it what we're going to build today is a full stack personal photo album so you can think of it as almost like a shutterfly clone or snapfish clone where you're going to be able to log in and you're going to be able to upload your photos you're going to be able to create accounts it's going to have built-in authentication so it has a lot of neat things built into it for this technology stack we're going to use actually amazon web services and using the aws amplified library so we're going to use uh authentication we're going to look at graphql with aws appsync we're going to use storage with s3 we're going to use lambdas and then we're going to look at how you can deploy your application so without further ado let's just go ahead and get into it if you guys are following along i would suggest there's gonna be a link in the description description below to the actual github repository which you can go and download to your local machine and so you can follow along and also i'll give you some information how you can sign up for amazon's web services for absolutely free for a year so check that out as well so let's go ahead and just get started [Music] all right let's take a quick look at the app that we're going to be creating today so you'll get an idea of of everything that we're going to be doing so here is our login and you can see here i'm just using some really basic styles i'm actually using a library called tailwind css that we'll be looking at and after we log in here we'll be redirected to a create or choose an album page and this allows us to create these albums these are just little cards i created down here um or we can create a new one and then each album we can upload photos to so just for the heck of it i'll create a new album called test yt for test for youtube i'll click create album and it'll go ahead and create it you can see it automatically updates down here we have a new card now if we click on this album here we don't have anything in here right now so we can certainly add a file so i'm going to click select a file and that will bring up a dialog box here that allow us to upload any image file that we like and i'll show you one here this is called house.jpg and after i click on it it'll go ahead and upload so now it is in here and nice thing about this too is if i can actually go out and go come back in it does have some latitude and longitude data and this the reason there was a little bit of a lag there is because we're using an aws lambda function that gets triggered anytime a photog a picture is basically uploaded from an s3 bucket and then it grabs the latitude and longitude out of the picture itself and then displays it so uh it's it's perfect because now we can see a whole bunch of information about this photo and now i can upload more photos and by the way it also converted this image to a thumbnail so it's a little bit smaller it'll be great for mobile users and it can just pop up really quickly so this is everything through this app obviously if we refresh it we actually are authenticated so we are still logged in and we can log out and then every single person that creates an account will have their own unique account so if i go and click log out here i can click sign up and then i can go ahead and just create a new account here for my username password and email so that's that's essentially the app right there and then once you log in you can have your own personal photo book and also use a lot of the aws services out there so if you're not familiar with aws it's the amazon web services and i would highly recommend go to aws.amazon.com and slash free so they have a completely free tier which is really nice because you can get up to like 750 hours of ec2 like five giga bytes of data in your s3 bucket like all this information all this different services for free and it's like 12 months so it's really neat deal you can check it out if you're starting a brand new aws account you can sign up for this and you know play around with these services and learn a little bit of how to create a full stack app on the aws ecosystem i believe google has something similar too and so does microsoft azure yeah so check that out after you actually click the create a free account it'll ask you some information and once you create your account you'll be logged into this management console and this is where you can look at all the different services that amazon offers and let me just tell you they offer a lot of services there is a ton of things that they offer from compute storage databases migration media a ton of things but we're just going to look at a handful for this app that we're creating today okay so here is vs code i don't have any projects open right now and so what we're going to do is we're going to create a new view project and that's going to be our friend that was going to talk to all these aws aws services and then we're going to use a library called aws amplifi to kind of tie it all in so make sure at any time feel free to pause the video if you get confused to look over the code again there will also be a link to the code in the description below and also to my youtube channel once again if you guys are interested in learning more about vue.js and those things and aws and also uh each these i'm going to go through a few different sections so feel free to jump around so the first section will be just how to set everything up so we're going to make a few assumptions before we begin first that you have either that you have node.js version 10 or greater installed if not go to nodejs.org and download it for your computer we're also going to assume you have npm version 5 or greater which will include be included with your node install and that you have get version 2.14 or greater as well i'm going to use view cli to create and get started and the way to install view cli is you do npm install tac g at view slash cli all right so i already have view installed but if i do view tact version you can see i have 4.5.3 as of this recording so another thing we need to make sure is we have aws amplify the cli tool installed as well so i'm just going to do npm install tac g at awsi amplify cli and this will go ahead and install the amplify cli as well so we can use it throughout our project and by the way if you're using yarn just go and replace npm with yarn and you can do the same thing so once you have amplify installed you can just hit amplify or type amplify and make sure that you know it's actually running and working if it is you'll get a list of commands so you know you are set there okay so let's go ahead and begin and we'll create our view project so we'll do view create photo book yt and it's going to ask us a few questions now as of this recording view 3 isn't out yet but everything we're going to do today will work in view 3 as well so we're going to choose view 2 but certainly if you want to use view 3 you can so i'm going to choose manually select my features i'm going to use the router and view x and css preprocessors i'll leave everything else the same by the way you just hit spacebar and that will select whatever you want and now i'm going to choose 2.x it's going to ask you do you want a history mode i'm just going to hit enter for yes we'll use dart sas we're not going to use any prettier plugins or anything in this we'll just leave it the defaults dedicate config files and no we're not going to save it and so it'll just take a moment here and it will keep create the scaffolding and our brand new view app okay great everything is set up so i'm just going to go to my photobook.youtube and let's go and open it up in our vs code and see what it looks like so i'm just going to open this up in this photo book yt and this should just go ahead and open it and you can see it here in the left hand corner closing our release notes is the folder structure of a view app out of the box so i'm going to open up my terminal again and i'm going to make sure it works i'm do npm run serve and this will go ahead and run the server for us and we'll see if it works here so i'm going to do localhost 8080 i can type it right 8080. and cool so here is our app out of the box not much to look at so we're going to do a few updates to it so let's go ahead and add a few libraries we need for this project so i have the terminal open here i'm going to view add tailwind and this will add tailwind css to our project and vue basically has a built-in plug-in system so at any time you can do view add and a name of a tab of a plug-in and it'll install it there's also something called view ui which gives you a graphical user interface to do the same thing and it gives you a few other things but for now we're just going to use this view add tailwind it's going to ask us a question what do you want to generate i'm going to do a minimal installation that'll just give me a tailwind config.js file and cool so now i need to install a few other things i'll do an npm install uuid and what this is going to be used for is later on we're going to have to create unique basically unique grids or guides in our app and uuid will allow us to do that it's basically a random string of numbers and digits that are highly unlikely to repeat so cool so now we have both of those installed and let's take a look one more time if we go here we can look at our package.json file and we can take a look now we can see here we have our uuid we have ux view router and yeah looks good to me so the next thing i want to do is since i just made a few updates i like to always go ahead and do a quick developer reload window so you just type in command shift p and developer reload and it reloads everything for us because i do have a chrome extension for tailwind that'll make our lives a little bit easier it's called the intelligent tailwind css and it just gives you auto complete for tailwind so tailwind is a library that i just installed that helps us with doing css it adds a bunch of utility classes that makes our life a little bit easier okay so let's go and set up aws inside our app so to do that we remember before we installed the aws amplify cli so we can do amplify configure and what this will do is it will basically scan for plugins it's going to try to set up aws amplifying our cli and it'll connect to our console and set up everything we need so it went ahead and made it it actually opened up a new browser window and it opened up the management console now it's asking to go and sign in since we're already signed in i'm going to hit enter here it's going to ask what region i'm going to use i'm going to use i don't know i'll use us east 2 and then it's going to ask me for a name i'm just going to hit enter and leave the default username it has there and now it's going to bring me to a page that will basically create a new user in my aws amplify so i'm gonna i'm basically in my console here so i'm gonna click next here it's gonna actually select all the permissions for me that i need i'm not gonna have to worry about any keys and i'm just gonna click create user here and now i have these two things this access key and secret access key so it says complete the user creation using the aws console press enter to continue now it's going to ask me for that access key which i will go ahead and and grab and paste and that's going to ask me for the secret access key which i'm going to click show here i'm going to copy it and then paste it and it says would uh this would update create the aws profile in local machine profile name i'll just call it default and cool so everything's successfully signed up and configured and now our aws amplify should be able to do everything it needs to create users and everything like that and i can go ahead and close this window here okay so after i've done that i can go ahead and run amplify init and this will init the amplify service inside our project here so enter name of the project i'm just going to call it i don't know amplify photo book yt and the name for the myra now you can this is the name of the environment i'm just going to leave it dev but if you're doing it for production you can do product prod and then you can also create multiple environments but i'm just going to keep it simple and leave it dev it's going to ask me what ide i'm using i'm going to choose visual studio code which is the one i'm using and then i'm using javascript and view it's asking me source directory source dist and this would be npm run build which is the way to build it and start command i can just hit enter here this is right and so this is going to ahead go ahead and just create some default cloud formation stuff for us do you want to use this profile yes we use our default one we just created but we could have created multiple profiles and now it's going to initialize the project in the cloud and basically what this does is it uses something called cloud formation scripts that it auto generates which then gets run against the amazon web services which creates the infrastructure we need to do everything we want to using the cli tool so this still just take a moment all right cool so it says by the way you can try amplify add api to create a backend api and apply publish to deploy everything we're not going to do that right this second you can see now in our public folder structure we have everything here but we also have new a new amplify folder and this amplify folder is where all our configuration all our new functions all our a lot of things where we're going to do is are going to show up inside here so here's some back-end stuff and some configuration files so we're going to keep an eye out on that folder because as we go through this there'll be new files created in there that we can look at cool so we're not quite done we do need to add a few other things so since we are using vue there is a aws amplified library we should be installing and also an at aws amplify slash ui view library which adds some really nice view components that we can add inside our project we'll be probably taking a look out of them but we'll also be rolling our own so we'll just go ahead and click hit enter here and those will install for us all right cool so everything went ahead and installed which is perfect and now we just need to do a little bit of configuration inside our view app we have this main js file and this is where you can see we're setting up the router the store and the tailwind and this is the file that basically bootstraps the view every time the app loads so we can update this to add a few more files so we're going to import in amplify from aws amplify which is the library that we have installed we're going to import this at aws amplify slash ui dash actually should be slash ui view and then finally we're going to import in this aws exports file from dot slash aws exports and then we're gonna do amplify.configure exports and then this should set up everything we need for a for aws and by the way this aws exports that's this file that was created here and this essentially uh sets up it's the configuration file for amplify so as we add new regions and buckets and things like that it'll be all included automatically inside this file and so we just need to make sure that we tell amplify where that file is and and how to configure it now if you're by the way if you're getting completely fused right now why i've added all these this is actually in the official documentation so if you look at the amplify docs i could just google it real quickly there's this great website at docs.amplify.aws where you can get a ton of information they actually even have a whole section on getting started so if you click on this amplify libraries and then click getting started you can see you can choose the drop down here and choose view it even tells you exactly what you need to do to get started including a lot of things i just talked about so make sure you check that out as well if you're completely confused right now since we have all those installed let's see if we can go ahead and get started here and let's make sure everything runs so i'm going to npm run serve and i just want to do a quick change right here i'm going to put it in different ports because sometimes i have problems with that i'm putting 8082 and now if i npm run serve it should run it on port 8082 and i just want to make sure there's no other problem since we've installed everything okay so the server is running i'm going to bring this up on 8082 and yep looks like it's still working it looks a little funny because we added the aws amplify and the tailwind css but yep everything's lurking working as we expect it so let's go ahead and move on to our next section [Music] okay so we have our app set up but we obviously haven't done anything yet so let's go to the next section and that is authentication so i'm going to stop the server so i want to show you guys something if we do amplify status here we can get an idea at any time of what amplified libraries we have ran or installed so far and if you can see right here it just says dev and it shows our category resource name operation and provider plugins but we don't have any information as of yet so we haven't done anything or installed anything so let's let's change that let's do amplify add auth and so the way the authentication works in aws is they use something called cognito so if you look right here this is cognito and you can just open up your management console and take a look there and cognito is a identity provider and it also does something called federation and it offers user pools and identity pools and identity protection and it does authorization and everything you need to new everything you need to use in your app to make sure what's make sure make sure someone is authorized to use different parts of your app that's what aws cognito does so we're going to do that and nice thing is we don't need to know all those things uh using the aws amplify it's going to create a lot of these things for us it's going to use some same defaults so we don't have to be an aws expert to set it up so it's going to ask us a few questions so we're going to we're going to use the default configuration here for security and we're going to ask you how do you want to sign in we can use either username or email typically we always have even if you sign in with your username you do need to provide an email with cognito with the default authentication because it uses that because it has a two factor basically it uses another uh uses a security token after you create your account to verify your email so you definitely need to also include email but we'll just choose username for the actual login and then it's asking if do you want anything else and no i am done there so now we have added ah so we have almost added off we have basically just set it up now as it says right here you have to type in amplify publish which will provision everything in the cloud or amp amplify push that that's what i'm saying um and then if you don't worry about amplify publish that's only used if you're hosting in the back end so now if i do amplify status here i'm going to make this a little bigger so it's maybe a little easier to see if i do amplify status here now i should see the provisioned auth that i just created and let's see if we do cool so you can see here here's amplify photo book white t and it has a create and it hasn't been set up yet so i'm going to do amplify push amplify push and this is going to actually push it up into the cloud and into aws for us and it might ask us a question here yep are you sure you want to continue we'll do yes of course we are sure and it's going to now update the resource in the cloud and then we'll just uh take a few minutes here okay so it went ahead and provisioned all the everything in the cloud for our authentication so we should still we should be able to use it now now if i'll go and bring this down so it might be a little easier to see and i'll go ahead and start my server again now if i click in here we should see a few things that might look look a little different if we click on the aws exports file now you can see we have all these cognito regions and identity pools and everything set up for us which is nice because this is what basically the app needs to to run and to get the authentication working so we have a couple of different approaches here to add authentication to this app now of course right now it's pretty ugly looking and we don't have anything set up so uh one way is one way to add authentication into our app is if remember i told you guys about this amplified documents well there is a number of ui libraries for react actually it's under ui components and there's ones for vue angular ionic react react native which essentially add in uh pre-created templates that allow you to do authentication so in views instance and by the way if you wanted to you can look at react it's very similar we can click on authentication here and go to authenticator and you can see here you can just inside your template right here you just copy and paste and you add this something called i'll make this a little bigger amplify authenticator this is a built-in amplify component that would allow us to do everything we need to do so i want to show you guys that real quickly but first let's do a little cleanup of this app since it's just kind of straight out of the box and doesn't really need any of these things right now and we have this whole hello world component which i will just delete and so in this home i'm just going to do a hello world to make sure i see something and if we come here cool so we have our hello world after we refresh it here it looks looks just about the way it is and then if i wanted to i can even get rid of these router links because i don't really care about them okay so i just have a hello world nothing too crazy there so but let's take a look if i wanted to add in authentication right off the bat without kind of changing anything i could just go in here and copy and paste this big blob of stuff so let's do that don't worry i'll be going this this tutorial will have some copy and pasting but i will be talking about what we're doing here so if i come back here look at this oh don't worry about look i have this sign into your account now i am getting some errors because i added this vf off state which i'm just going to delete for now because we're not going to use it and i'll make sure i get rid of the quotes there and i don't know delete delete there we go so now we refresh it here and now we have like a built in oh and we got to delete this username here so we haven't uh figured that out we haven't added any of those things here okay so but cool this is like a built-in aws amplify sign in signup has a create account a sign in and you have a sign out button so you can basically start off right here now it doesn't look very good it's a little ugly however though if you really wanted to you can you can overwrite a lot of these themes and styles if you look at the documentation here you can even change like which which buttons it shows in some of these screens you can change yeah you can customize the sign in and you can add different uh form fields and slots it's pretty cool that you can kind of start off quickly on this and this one this we're we're going to create our own custom sign in our login page so we're not going to use this but it's good to know that this exists and we'll be coming back to this because we'll be using some parts of it in the future and i just accidentally did the home button so i'll put back the hello world cool so now we're back to the hello world so to start off with for authentication you may have noticed when i created this app the first time i actually created the store so vux is the state management system for vue.js it's essentially the way you're going to be able to share information between multiple components in view just like redux in react view x is kind of the equivalent in vue.js and they're both based on the flux pattern out there of creating state management systems you see here has states mutations actions and modules and getters which isn't normally default installed i don't know why but you can actually add getters as well and then we have modules so we're going to break this up i'm going to create a new folder here and we're going to call it auth and we're going to create a new uh and basically a new file here and it's going to be called auth.js and this file is where we're going to put in all our authentication for our aws amplify so we need at a minimum a way for people to log in to log out and and yeah to keep the state of the application itself so let's go ahead and and do that inside this file so i'm going to create i'm going to put all those getters mutations and actions into one file here and i'm going to call it auth and also uh just just so i have it i'm going to create this i'm going to import off here and we're going to call it aws amplify so first of all we're going to use modules so modules are a way that we can break up our vuex store into multiple pieces so whenever using vuex especially if you're in a production app or something a little bit more complicated than a hello world it's usually a good idea to break your modules into different basically different pieces now namespace means that this namespace which we're going to be calling auth will need to be included whenever you access any of these of this stuff in the in the store for auth and then i'm going to create a state and the state is an object of course and we're going to set it to null and then we're going to have mutations we're going to have actions and we're going to have getters so let's go ahead and fill a few common mutations out first the one and the one and only we're going to have is really this one and it's the state it's basically setting the user so what this is saying right here is that we're going to if you basically if you commit this mutation which is set user it's going to take whatever is passed inside the payload and set it to the state dot user so that's the way you do that now actions are like mutations but actions uh handle asynchronous things so if it's anything like a call out to an api or you're waiting for something and you're using a promise then you want to use an action in that this case now the way i'm going to form this this auth module is where like i said we're going to put our login and log out as actions inside this form inside this module here there is other ways to do it i don't want to confuse confuse you guys i know some people put these into their own files sometimes they call them services or utils but i think this makes a lot of sense because we want to be able to keep it all in one place and then also manipulate the state of the application when things happen so we're going to use async log out and the first the first parameter in inside here is an object and one of the things out of that is commit so we're going to destructure it out of there of commit and then we're going to run um basically commit set user remember we always commit mutations and we're going to set it to null and then we're going to return it this auth dot sign out and once again if you're trying to remember figure out like how did i come up with authentic sign out how did i know it once again in this official documentation if you go into the i believe the library section and then look at authentication and then getting started and sign up send out right here you can see here auth.signup it just tells you all the different ones you need to use to do it so that's the way i'm doing it here so that's the only thing we want to add actually we want to add a couple more things we have a log out so we need a basically a few others we want a sign up or log in but also um we want to log let's let's do the login next that might be easiest to understand since we just did this one so we're gonna do async login we're gonna commit we're gonna dispatch and then we're going to assume that someone's going to pass over everything we need for a login and so the second parameter is always the payload that gets passed in so we're going to assume that they pass in the username and the password into this async function and then we can use uh there's a few ways we can do this i like using try catches some people don't but that's my preference so i'm going to do a try catch here and this catch is just going to console log the error and then in this this auth here i'm going to await auth dot sign in and this is going to be passed in a username and password cool and then once we know that that passes obviously if the await if this sign in fails it'll it'll the catch will catch it as it says there but if it doesn't fail it'll go to the next line and this is where um i want to run this await auth dot current user info info and what this is is this a weight right here for this auth sign-in does send us like a object full of basically information about a user but it doesn't include everything i quite want doesn't include the id so what i do is i just grab it from this auth.current user because i know it has information i need and i assign it to user info and now i can do something like this i can commit set user into our user info state and then i like to do this too is i like to turn return promises so that way whatever component is listening to this that it can still get you can still run it as uh venable and then it can also know when then it succeeds but i also like to do logic here so that's why i don't like to return this whole weight here at the top success obviously maybe i can put something else in there and i just need lowercase return and then this catch uh i like to return the promise.reject okay so we have two down so now we have oops this got i'm going to call this login so we have two down we have a logout and a login which is good so now the next thing we want to do is add in a sign up and a confirm sign up so if you remember what i told you guys earlier that every time you sign up you also have to confirm your email so we need to have we need to basically do that as well so let's let's add in the confirm first because why not so first make sure i'm at the end this one comma so i'm going to call it async confirm sign up and this one i'm not going to be doing any commits or actions on so i put this underscore there and we're going to have a username and a code and once again i'm doing my try catch block catch the error and i'll console log the error but in this track i'm going to do a weight do auth.confirm sign up and this one is going to take a username actually i should put this lowercase there we go uh let's let me delete this there we go and there is username and code so i believe those the two that we need and then if that succeeds we're going to do a promise.resolve and if it rejects we're going to do a return promise don't reject you see a pattern here happening looks similar cool so that's that will confirm our sign up and now we're just going to finally do the sign up which will look similar so i'm going to come down here and it'll do async sign sign up and that'll have a username password and email and we're gonna do another try catch block catch error here and in this try we'll do await auth dot sign up and we need to pass it an object because i'm just going to have the username user name password and this time the we need to send in an attributes object here with the email we definitely have to have that email there and that all works we're going to return promise dot resolve and if it fails we're going to console log the error and do a return a promise reject all right so we have now our sign up confirm sign up our login and log out and the last thing we need to do is see if we can uh actually we'll do one more i kind of like doing this too we're going to create an auth action uh let's see here i'll do right at the bottom of this one and so i just like to have this available that soon as a user logs in that this gets ran or actually as soon as the basic app loads is something that i like to do here and so this is going to be a const user info weight auth dot current current user info and by the way there is a aws amplify extension that'll actually help sometimes with some of these autocompletes if you're not using typescript so you can look at that too and that's why you're seeing some auto completeness there so i'm going to commit set user user info now i could anywhere i wanted to set this i could call this action but this this is fine for now and then i do have one getter here and i'm going to call it user i just want to make sure it's easy for someone to return the state return state.user in fact if we wanted to we can actually shorten this into a es6 function es6 arrow like this and we don't even need this delete i know a little simpler okay so now we have our getters our actions sign up okay now to actually use this we inside here we have to import in our auth library so we can import auth from we can do dot slash auth slash auth right here and then we're just going to call it off and now i don't need these right here because we're just using this so if i did it correctly oops i do have an error uh loading container let's see here i come back up oops i don't need this loading container accidentally loaded in there and then it says dispatch is defined but never used so where did i do that let's see here dispatch oh right here there we go so right here in this login i'm not dispatching anything right now i'm just committing okay so i don't have any errors that's good and if i go back to my photo book i still see the ugly hello world and there's nothing to be seen there okay so what i like to do next is actually create some of these components so we can try to log in and that shouldn't be too bad i what i like to do is i like to create them inside components and then i have different pages for each one so inside the home component we might just open up the login so let's create a component in here called new file we'll call it login.view and this login dot view will have everything i need to use to log in all right so we're going to use i typed in vbase and then tab and it automatically created this and this is a part of an extension called v view snippets so you can just go to the extension here and type in view snippets and you can find it so this one we're going to need a few things to get started to really get this up and running um let's add in what we we need in here in our default so i'm going to create a data object and we need a username a password and i'm just going to leave this lowercase actually password we'll need an email and we want to catch we want to show errors so we'll have an error here as well and we're going to have need some methods so we're going to create methods here and then insider methods let's use a we can actually use a vux helper to help us with this because why not so import we can do map we're going to import map actions from vuex and so now we can use map actions in here and the ways you destructure it here map actions and now we need to grab what we want to grab out of it so we're using modules so i'm going to use something called login i'm going to call it login view and we're going to grab this module called auth login and i'm going to create log out well we might need a logout view but let's let's do login first so this gives us access to the um to the auth login now once again if you're completely confused what i'm doing here this is a view x helper called map actions which allows us to talk to our viewex store without having to type in it the other way which the other way would be you have to type this dot store dot dispatch and then you have to pass in auth login and it's kind of a pain so this is kind of a shorthand way of doing it uh of doing it and i'll show you guys how to how this this works both ways now since we have a login view but we want to actually log in we're going to create another method here so we have map actions here so i'm going to call it it's going to async it's going to be called login we're going to do a try catch again once again this is kind of the pattern i like to use in this try we're going to await this dot login view that we just created and we're going to pass it the username username and pat actually to do this username this dot username and password this dot password and then once we logged in we'll have to actually go somewhere but we'll we'll think about that in a moment and then if we don't if there's an error i'm going to set this dot error to equals to error and uh yeah that that's what we'll we'll do there and i'm not gonna worry about logging in or logging out right now okay so now we have sort of the the the data here that we want and so the next thing to do is to actually create uh our forms and our labels and this is where i'm going to cheat a little bit i'm going to copy and paste a already created html template for us just for the sake of time because i don't think you guys want to see me typing all this out for the next 10 minutes 20 minutes so i'm going to copy oops let me i'm copying this from another screen here so just take a second make sure i got it all okay all right so let's take a look what i got here so i have this form and by the way these are all utility classes here this flex flex dash col item center and if you are interested look up tailwind css that's what this is and what this is saying is we're going to submit dot prevent login so every time you submit something it will run the login method that we created we're using just some flex we have a username we have an input that we styled its type text v model username and v model in view is a way you can do a two-way data binding so that way this input whenever the text changes it'll also update the input and then we have the id username because we're using a four right here or we're using a label excuse me and then here's our password which is type password and then we have a sign in button and by the way we have this class called button dash blue so we'll have to do one more thing i created i'm just going to copy and paste here i created a utility for button blue that i created a few of them and i'm just going to copy and paste them so as part of tailwind css it creates this asset folder and then this table in.css and so we can add in like specific global tailwind css specific classes inside here so this one's for button blue here's the hover effect and focus effect and by the way the new version of tailwind you can actually put all these utility classes in one the hovers and the focuses you don't have to break them up that's kind of a cool improvement they just added by the way but okay so i think i have this this login working here and so now i should be able to have it show up here so instead of in this ugly hello world here we're going to add a component so we have to import it in import we're going to call it uh login from remember you can use at syme that's like the basics basis of the source folder and then we can do such components slash login dot view and now we should be able to put it in here and by the way this is just an es6 shorthand you can just type in login.login or just log in here and now i think this will work we might have some errors but we'll fix it if it doesn't okay okay it ran all right so i'm refreshing it i got no errors and now i have a username and password now it's giving me property or method username it does not define oh i have a bug here come back up here i think i called this with i don't know why i kept it here there it is lowercase n if i refresh it all right that's good so now let's go ahead and create a few routes and we need to create a signup too and a nav we've got a few things to do so let's go to our routes if that's inside our router here and inside our index.js and inside this index.js we are going to add in our routes so we have essentially this home but we also have a an about i'm gonna leave it about there i don't care too much about that but i'm gonna create in a sign up so i just type it in like this name we're gonna call it sign up page and we're going to do component sign up which we haven't created yet but we will soon and then we'll need to create a um a couple of pages for our albums which we will also create here in the future but we want at least to have some place where they should go so i'm going to create a path and we'll do album and it's going to be dynamic that's the album id and i'll do a name here album detail page and component album detail page and meta we're going to actually have this is a way we can prevent people from going to places they shouldn't so this is this requires auth is a way we are going to do a little bit of authorization to make sure that someone can access that page before they go to and i'll show you how to do that with route guards here in one second so we're gonna do slash albums slash name equals albums page so we want to have a page that lists all the albums and then the details page which has like each individual album in component we're gonna call this albums page we haven't created this component yet we're gonna get some errors but that's fine and we're do requires auth true on this page okay so let's create all these uh these components so inside our left hand side here we have these components but we also have views and these are essentially the pages of the app so we're going to create we're going to create an albums page dot view and we can really quickly create it and do a h3 hello world and then we have a sign up page and create a new file here we're going to call it sign up page make sure i spell the right page well we'll call it component sign up sign up dot view and we'll make sure you do an h3 here sign up i think that's it so now we have so we have an albums page and a sign up yeah we have a sign up let's call this sign up page just to be consistent page so we have album details page let's create that file too albums detail page view album details page and then we'll rename this to sign up page.view okay so we have page at the end of each one of these you don't have to do that but i'm just doing it to to make sure i understand what i'm doing so albums page and then sign up okay so i have all three of these now i should be able oops to import all three of them in so we're going to import sign up page from views sign up page.view and then this is going to be albums detail page albums detail page and this is going to be the uh album albums page albums page so what do we have it album it's detail only thing i don't know albums detail oh i call this album albums albums it's an s okay so it says it's a couple thing couple bugs here this should be albums detail page all right so now i don't have any errors good so it looks like all three all these are connected up all these routes are connected so we need a navigation way so we have a way to log in right now and so if we just type in some random things in here and hit sign in um it's not working so let let's let's actually we do have an error here unknown action types auth login so let's the first thing i'd like to do is let me stop and restart the server and i'll go back here to auth auth.js and we do have a login component here and we do have a module called login here so we're getting close let's just make sure it loads and if we go to our login component oops uh yeah this dot login view which is auth slash login that should be that should be right okay so it's done reloading let's see if it works now view x unknown action type auth slash login oops actually i found a bug here this should be actually named spaced the d cool so now if i try to log in don't worry about this change password error just mentioning something in chrome okay i get user does not exist good so we at least know it's the login should be working if we had a user but now we need to have a way to create the sign up page and also some navigation stuff so we created a sign up page dot view now i could create a separate component but i'm just gonna just put all the information in here for the sign up component and so let's let's start with the export default here and i'm going to have a data object and so for this one we're going to have a username a password an email and an error we're gonna have a confirm password so remember we have to do confirm password as well we're gonna have a code and i think that's yeah that should be it for this one and it's giving me an error because i need to return it as an object there we go and i need to now go ahead and try to oops i'm getting that error there to create the sign up and confirm sign up methods so let's let's start with the sign up so once again i'm use methods here and we're going to do an async action called sign up and first i'm gonna check to see if the email is no good actually let's see here yeah i should check if the email is not there or there's no password or there's no yeah email or password then just go ahead and return and we can return an error at this point but i'm just going to return it and i'll set up a try catch block and then in this try i'm going to wait this dot store now this is the other way to do it instead of using map actions like we did in the login i'm going to use just the way you would normally do it if we didn't do it that way so we can do this.store.dispatch and this this dot store is just built into view so you don't have to do anything special to add that long as you have ux installed so this is going to be auth slash sign up so you always put in the the name space and then and then the whatever you're dispatching and remember you always dispatch actions and you commit mutations so don't get those too confused and we're gonna have a username which is going to be this dot username and then password is this dot password and then email this dot email so for signing up we definitely need all three of those now if that all works then i'm gonna have to change this confirm password to true and now and if it fails by the way we'll do this this dot error equals error so we have an error in the screen and then we need to create a new one called confirm sign up confirm sign up if i can spell right and then i'll do this if this dot there's no username or there is no code then we're going to return as well here otherwise we'll do our catch block and then inside our try we're going to await this dot store dot dispatch auth confirm sign up and then this is going to have an object here we're going to pass in the username which will be this dot username name and code which will be this.code so we're going to obviously create this in a second and then one thing this is kind of weird about aws but once you create a sign up and you confirm it you're not technically logged in but we can go ahead and just log ourselves in so i do a wait here and we'll have to dispatch this time auth login and you're probably thinking why don't we just use the map actions but just for the sake of learning we're not going to use it in this time we're going to use username this dot username and then password this dot password a little tip if we wanted to we could actually destructure this we could do const username username password and then have it equal this and then you wouldn't have to do it like this so we could just do like this i guess code would be one of them too code it's a little simpler but i don't know okay so there's username and password and oops actually opened in that and then we would push them to a different place so once they're signed up we can do this.router.push and we want to push them to albums because that's the new route we just created and okay we got one error empty block statement no empty so where do we have that error and here somewhere in line 50. right here we can do console.log error and it just says right there this is line 50. okay sweet so and then we could set the error i guess error equals error all right so now we have all the javascript but once again we need the code so i'm going to paste this from another screen once again just to save a little bit of of time okay so here's the form that we have and what i'm doing is anytime there's not the confirmed password we're going to show the normal form and the way it looks is like this it has a username we have a v model again with username it's an id we have a password we have the password here id password and we have an email that it asks for let's just type email and then we have a sign up button and now we have a whole and error text now we have a confirmed password so once you actually create your login this confirm password section will open up because i have a vf here we're asked for a code and a button to save it so obviously we don't have any fallbacks if like let's say they accidentally refresh the page or they don't put anything in to the code and then they try to sign it sign in that won't work but let's take a look here so now if i go to slash sign up and it loads cool so here's our username password email we got an ear once again i don't know why i accidentally used uppercase n here okay compile it refresh sweet no errors don't worry about this it has this highlighted red um i'll have to see it's a part of a css just to to put that in there i don't remember why i put that in there but we can we can remove that border um i think it's let's see here border red i'll just delete it i don't know why i left it in there probably we can use it in there if you wanted to do some like validation okay cool so now we have username password email but we want an easy way we probably need an easy way to switch between both uh both between the login page and the sign up page so i'm going to create a new component here called nav let's see your nav dot view and this nav view is just gonna be really simple it's gonna have a log out button and then it's also going to have um all the information we need to to log in or to log out and to switch between the sign up page and the login page so let's do that so export default i'm gonna have uh let's let's start with methods whenever methods and this methods it's gonna have a log out and in this log out we're going to await this dot store dot dispatch auth slash log out and then this dot router dot push to the log out page so basically to the the front page and by the way i'm waiting to make sure that this log out completes before i go to the to the front page and then i'm going to have a computed property here and actually i'm going to use that something we haven't used before i'm going to import in the view x of ux helper called map getters just to show you how that works you know you don't have to do it this way but i like it i'm gonna do dot dot map getters and it's an object once again i'm do auth slash user so now i have access to the user object which is going to be really handy now i'm going to copy and paste once again the actual html and i'll show you how it works okay all right so once again i'm using this course tailwind css i have this a user so it's going to have this basically at the top of the screen we have this navigation bar and it's going to have a router link to the login page to the sign up page but the sign up page will only show if you're not logged in so this at user remember in our vux store we're setting the user to be either basically uh with the user information or not so if it doesn't have any of your users user information then you're going to have a way to log in or sign up but otherwise you're going to actually have a little welcome message that says user username and then we're also going to have a link to our albums page and a logout button and we can delete this we're not using it cool so now we have a navigation bar let's let's add that navigation bar to our uh our main page so instead of having nav here we can let's see here we'll add the nav right in the same area we're going to call it nav and of course i got to add it so we're going to add a script tag see i think i have a snippet for this for a script tag here it is and now i can do a components and then this is where i define my components i also have to import in nav from and remember we always at sign components components slash nav dot view and now we can add in nav here so if that works you should see now and i've got cool cool now we have a login page and a sign up page and one thing we want to make sure is when we log in it goes to the right page so let's look at our login view after you log in it doesn't really do anything so we can do this dot router dot push to albums so let's see if it works so i'm first time to create a new account i'm going to call it eric 111. how about we do eric yeah 111 and put a password in here [Music] and an email address and i'll make sure i can check this email so i'll do eric program with eric.com and i'll click sign up cool and uh make sure i don't i need to save in here enter your code so i'm going to take a look on another screen my email and see if i can grab the codes i should have emailed me it did so i'm copying the code for my email all right i'm going to click confirm code and it should log me in if all goes well cool so now i'm in the albums page i'm logged in oh and i had unknown action auth login so i think i might have had a typo there i did so it actually the dispatch it still pushed me to albums but it didn't necessarily log me in so there was a little bit of an issue there so let's log ourselves out yeah so you see here these didn't update correctly because the user didn't get set because it didn't really sign up correctly so i'm going to go back to here to 8082 and i'm going to try my login 111 sign in cool so this time it worked and you could see here it makes a little bigger now we have our welcome with this name on the top left hand corner so let's let's create another one to see if it works all the way through i'll do eric222 [Music] make sure i put in a password and i'll do eric let's do we can do another email address i have let's see here we'll do eric handchat blog plus one at saraty oops at gmail.com cool let's see if i can okay so i have another verification code let's see if it logs in correctly this time confirm cool so now it logged me in and everything looks good i'm now on my albums page now if i click albums there's nothing there of course if i click log out i'm logged out now there's one more thing we can do you may have noticed so if i log in here like let's say i just go to slash albums and i'm not logged in it actually log goes to the albums page even though technically i shouldn't be able to go to this page because i'm not logged in so to fix that we can do something kind of neat you can add a little quick route guard into the index router right here so here's the the router the router index and now we need to is add in a route card and to do that let's see here we need a router before each and by the way this is all in the documentation for a view if you ever need to find it so do router and you can also look at the application in the description so you can kind of follow along so we do a two a from and a next and this is a callback here so this essentially what this this before each every time you you go into a route you can do something and you can make sure that uh you know you're authenticated or you can reroute to somewhere else so i can do a const requires auth and you can do two dot matched dot sum and then we do this record record dot meta dot requires auth and so we'll be we'll be using that in a second and we'll do a const is authenticated and then we'll await the auth.current user info and we'll need to import oh it's already imported in at the top so that's good and now we'll do if requires auth and is authenticated then you can go to the next so this is like a middleware so you can go ahead and go to the next place otherwise we can go to the next here so this is go to back to the root otherwise you can continue on and so we have a bug here so we need to oops actually this should be a error function there we go and so this this requires auth it's basically looking at this meta information and if the meta information requires auth equals true on this route and that's what this two match sum does then it'll be true and then if you this off that current current use current user info is from aws and if both are true um if one's not true then it'll just go back to the login but if they're both if requires off is true and you're um not authenticated then you can go to next so that that's essentially how that works so this so if this is true so it is authenticated and they don't require off then it goes to the next so let's take a look that works so now if i type in right here slash albums and hit enter now redirects back to this page here because no one's authenticated so if i go here and sign in it takes a second i didn't add any loading spinners now i'm in the albums page cool and if i refresh it you can see here it's the albums page cool i'm still in the albums page now you can see right there for a second this is wrong why is this login and signup not right well that's because we didn't actually set it anywhere that's why i created this new this in our store our routes i created this action called off action so we can actually dispatch this probably soon as the app loads to make sure things are okay and and so that's a probably a good idea so i'm going to do this i'm going to go to the app.view and i have the script file here just with the nav components but i'm going to create one called methods and i'm going to use map actions this time i don't know i've been kind of going back and forth between the two so you guys can kind of get an idea of it but i'm going to use map actions from vuex so i'm going to do map actions and this time this is the other way of doing it before you can do it this way and i can do auth actually basically what the auth action like this and then i can put in auth slash off action there's another way of doing this which i haven't shown you yet but you can do you can do auth and then you put in a array of the ones you want and now this will have an auth action will be available and now on the mounted hook so this is part of the lifecycle hooks of ujs this gets ran as soon as the component is created i can run this dot auth action and it's going to go ahead and run that view x store so let's see if that works so if i refresh it cool so now as soon as the app loaded it it uh it ran this action which is the auth action which then set it set the values inside the vuex store to show up correctly and if you look at the view i have this view chrome extension and you click on view x you can kind of take a look at what it did so if i refresh it you see here is this auth.set user you can see right here it set the user to auth and now we have the attributes we have this id and username and now it's working and if you're logged out it set the user object if you click on this it's null now and if i refresh it it's gonna run that off action again it's gonna come back as null and still null yeah it's still null here there's no errors cool all right and let me also do one last thing that's kind of bothering me this red border that i accidentally added all right so this is the this is it for the actual authentication part of the video so next we'll look at how we can add graphql [Music] okay so now we have a working authentication we can log in and log out but it's not very useful because we don't have our album set up so first thing we need to do is let's go back to our terminal and let's get the let's go and control see this and let's go ahead and install the storage for aws amplify and the way we're going to do this is we're going to hold all the pictures in an s3 bucket so we just need to do amplify add storage and it's going to ask us a few questions here so first we're going to choose images audio video and then it's going to ask us a friendly name for it so i'm going to call it amplify photos storage and i'm just going to hit enter i'm just going to leave the default bucket name and we're going to auth users only when we want to make sure no one publicly or guest users can use it they have to be authenticated and we want to give them options to be able to create read and delete and to ask us for a lambda trigger we're going to put no here but later on we're going to add in a lambda trigger but we're going to do no for now cool so now we have if we do amplify status you can see here it'll just take a second that we actually have a new storage ready to be created so before we move on but let's let's go ahead and add in our api and we want to actually use the app sync this this is the aws appsync if you're not familiar with that if you go back to our management console let me just refresh it here make sure we're still logged in so if you go here to our aws management console you can see we have aws appsync and if you click on it you this is this is the way you can create apis you can create rest apis you can also create graphql apis it's all done through here there's a bunch of documentation on aws appsync you can see right here you can build data driven apps uh build data driven apps at global scale so it's effortless you can have it you use a graphql schema it can connect your dynamodb and essentially to your storage so it's it's a really cool service and it's worth checking out so if you're used to like firestore you might see some similarities but let's take a look at the graphql version this so we do amplify add api and then from here it's going to ask us a few questions so we want to use graphql and for the provider name we're going to call it amplify photos api and it's going to ask us do choose the default authorization type for this api and we're going to use the amazon cognito user pool that's part of the what we've already created and it's going to ask if we want to do a few more things and we're going to do yes i want to make some additional changes configure additional auth types yes and i'm going to choose one here for ap uh iam and this will allow us to essentially later on in the future we'll be able to talk to our lambda we'll be able to talk to it and it's just a little bit more configuration that we need so i'm going to make sure that's check marked there can uh configure conflict conflict detection no we're not gonna worry about that do you have an annotated graphql schema we're gonna put no there and it's gonna ask us what does describes your project so single object with fields object one to many objects fine so i'm gonna do single object fields with to do with id name and description and we'll just give it a second and it'll go ahead and create it and you want to edit the schema now i'll just do no i'll just tend to enter there cool so now we have this in place but what we want to do is is we want to actually create our graphql schema so if i clear this and come take a look here i'll just need to go to amplify photos api here i'll show you guys if we need to make a change so now in our source folder we have this uh if we go up here to amplify we have our back end and then our api and we have our resolver stacks but we have this schema.graphql like basically app api amplify photos and so here is the schema that was created just out of the blue here so this schema really is a way to configure our graphql database and you can see here there's something at model so there's different annotations that you can add in and when you have an app model basically it tells the api that to that you can store the data in dynamodb it generates the dynode dynamodb database as the data source it also it adds if you use at a model it also kind of adds in a few of the other things you need to be able to update or delete things like that so it's it's a really it's really nice for us to kind of get started with this is all documented in the graphql documentation through aws and so i actually have a schema that i've already created that i want to copy and paste in here and then i'll go through it with you line by line so just to once again to save us a little bit of time rather than you can see me type for the next 10 minutes and delete the model one so we're going to call this uh type album so this is we're defining a type here called album and it has its it's going to use model uh which again i said that's going to connect it to the dynamodb and this at auth this basically tells it that we're going to be using authentication and it's uh basically its annotated objects are protected by a set of authorization rules generates snippets of appsync resolvers to enable authorization it's basically primarily how we're going to allow the lambdas to talk to it and to have only certain users be able to to use the api so in this case you have to actually be like an authenticated cognito user to use it and the owner of this of the album and then here's the graphql schema i believe the the um bangs or exclamation points are telling it that these are required so you need an id an owner owner id name and then we have a created at update at and then we do this photo and then this at connection is a way to it basically adds relationships between multiple objects uh annotated by model so it kind of creates everything you need to do between the different relationships so we're gonna have a relationship with album photos and then you can also set like the sort field where which is at the created at and then we have our type photo here which once again it's a model we're gonna allow the the owner but it's also you can see here as provider iam because we're going to have connections between the photo graphql and our s3 bucket and and it has to have some a little bit authorization to do that so you can read and update and then you can see here we have id created at we have a full size bucket it's an s3 object because we're going to be storing essentially the location of where everything is inside this graphql schema it's going gonna have thumbnails gps height and width we have an s3 object once again it's going to be able it's a type s3 object and it has this authorization through iam and cognito user pools and then we did add a gps here which we'll be using in the future but so we can use that but we don't have it right now okay so i'm going to save it and essentially what you need to do now is see if we can set up uh be able to set up everything so we can actually go in and test things out but first i want to show you kind of a neat feature of this since we now have this schema in place we can actually mock it out and test it locally so the way i do this is i'm going to create two terminals here first i'm going to just start the server again npm run serve and then while it's starting up i'm going to hit plus here and open up another vs code terminal and i'm gonna make sure my amplify status is working so i'm gonna see if it works here cool so here's the two things we added the storage and api we haven't pushed it yet to aws but they're showing up and i want to make sure i'm still working here so i have my login let's see if we can log in real quickly we're gonna sign in and if it all works it should okay cool we're logged in and now i'm gonna go to my second terminal here i'm gonna run amplify i believe it's amplify mock api i think that's the command that we need here yep mock api and now what this is doing is it's going to create a mock api server it's going to ask us a few questions so that way we can continue on through here so it's creating the new albums table the new photos table it's asking us the generated language type so we're going to choose javascript and we're just going to leave it the default here and you want to generate all updates we're going to say yes enter maximum depth i don't know we can leave it two but i'll just put five in case we wanted to play around with it all right now this is a thing to remember you can see right here it says the endpoint is running at this this is my local ho my basically local ip address but since i'm running my server here on localhost what i do then is i just open up localhost at 2002 and it should open so let's see here 2002. cool so here i'll close this so here is like basically the graphql playground it's running locally it's mocked out make sure that one thing i've noticed though is since i have authentication turned on i need to make sure that i have my photo book logged in and that sometimes you have to log on log in we'll see here otherwise when we try to do any graphql mutations here they may fail so since we have that in place we should be able to to create an album and you can what's cool about this is if we don't know what we did we can look at our docs we can look at queries mutations subscriptions and by the way you can also log into aws appsync and then you can also kind of play around with adding mutations and you can do it directly in your production database if you wanted but you can see i have queries mutation subscription so i didn't know what mutations i had i could be like okay i have create album update album delete album if you remember when you created that that schema we didn't add in all these we didn't create create album update album but we added the app model and it did all this for us it created all the schema for us which is really cool we can also of course change these these i'll show you guys in a second we can update any of these if we don't want the kind of generated schemas that it created so let's see if we can create just to play around a mutation so i'm going to call one called create album and if you don't know graphql at all graphql you have to create these queries i'm not going to go into the exact way they're created i'm still learning myself but it seems pretty simple you can also hit control space at any time and it gives you like what you can do and then i have to put in an input and inputs an object owner and make sure you always put in double quotes not single quotes call it user1 i know owner id abc1234 and name my first album okay and then we can tell we always have to tell graphql what we want to be returned back so we say okay we want an id return back so we're essentially creating an album you can see in the left-hand side even tells you like hey these are the things with the stars that you need definitely to add in there and it should create it and it's returning an id we can also have it return like the name or create it at as well i'm gonna hit play here cool so it went ahead and created if you get if you're following along right now and you get some access denied message go back make sure you have your your view app running and it's logged in and make sure you have localhost here at the top because if you and this one's localhost 2 because if you don't have all this matching it's going to give you an access denied and it's very frustrating you won't know what's happening cool so created an id here now this is just local to here but now we can kind of play around with it so now i've created an album now i can create a photo okay so let's go ahead and create the photo now that since we've created the album so i'm going to create a new mutation it's going to call it create photo inside create photo i'm going to create a photo and that's going to have an input and that's going to be an object and so we'll need the photo album id which i'm going to copy and paste from over here we'll also need the full size and this is essentially something that would been returned from our s3 bucket it's going to us west 2 bucket my bucket and key equals photo one and then we'll have to actually have something that returns so that would be an id and perhaps an owner so let's see if this works i'm gonna just comment that out cool so now we've created a photo so now we've created an album and we created a photo for that album and this is essentially what we have to do inside the code now let's say we wanted to query all the albums so to do that we have this handy query called my query well we can call whatever we want we're going to call my query and we're going to do list albums you can see in the left hand side that sidebar changed so kind of gives us hints on what we need to do to create our queries id and name we play that cool you can see here's the album we created which is really nice and we can also um if we wanted to we can grab the photos out of this so there is photos here we can put like a limit on it we only have one in there but if we wanted to we can limit it and then we can decide what we want to return from it so in these photos i don't know i just want to return items and then inside items we can return the name album full size thumbnail gps i guess we called the last one we didn't really give it a name or anything but we gave it a full size we can create i don't know the id let's see what it looks like oh for this full size we actually have to tell it what what we want to grab out of it so maybe region there we go so now we've got usos 2 so we saw that album we just created so you can see this is really powerful the nice thing about graphql is you can with these queries you can get exactly what you want you don't have to grab a full rest api and have a bunch of things you don't need you can just grab exactly what you need and it's really intuitive and pretty easy to do so that's that's this part of it let's go ahead and push our data back let's go back here um so we can go and stop our our mock api control c and we're gonna do amplify push and this will go ahead and push the s3 storage and our graphql schema to the cloud so this will just take a moment okay great it went ahead and created which is awesome now we even have a graphql endpoint uh we'll we we're not going to use this directly right now because it does require authentication but it's cool it's in there and also it added this into our aws exports file now by the way if you were following along and it asks you a couple of questions after you hit amplify push if you want to are you sure you want to continue make sure you type y there do you want to update code for your updated graphql api you can put no there and then do you want to update your schema scripts you put yes there and then that will make sure that that the code is pushed into your aws amplify and also that if you go in here you now you have look inside your vs code you now have a graphql folder and inside the graphql folder you'll have your new create album all your mutations that you need are updated update album delete album you'll see that all here if you're looking at this folder and you see a bunch of to do stuff you probably didn't do this correctly when you pushed it so make an update change update the amplify api amplify photos schema graphql change the schema go and push again and make sure you generate those files say yes to if you want the files to be generated and that way your mutation queries and subscriptions are all correct now we're going to look at mutations and queries today you can what's the nice thing about graphql is you can have real-time updates happening so you can have subscriptions on anytime an album updates or anytime of the owner you know something updates in your app or photos created or deleted or anything you want we're not going to look at subscriptions but it's a pretty cool uh tool so you can be you can find things that happen out in real time you can see things update in real time that is we're going to do a different way of updating our libraries and albums so now since we have all these queries kind of in place for us we're going to now kind of go into the phase of setting up our vue.js app with our new graphql schema that we created so the purpose of this is we want to be able to list in this album's detail page we have our different pages here let's take a look at them they're in our views folder we want an albums page we want all the pages listed and we want to have a way to create albums we don't have any way to delete albums we can add that later if we wanted and then when you click on in any individual album we want it to go to the albums detail page which will then list the photos in that album so that is our goal so we're going to take the same approach we did with the authentication i'm going to make this a little bigger and we're going to inside the store i'm going to create another module to do this and so this will just take a moment we're going to create one called i think i'm going to call it albums not to be confused with the other stuff but i'm going to create a new file actually let's create a new folder first we'll call it albums and then inside that albums i'm going to create a call a file called album dot albums dot i can spell right dot js and here is where we're going to create our albums now there's gonna be a lot of code here but i'm gonna try to walk through it one by one so first we're gonna do const and we'll call it album info and certainly call whatever you want but i think that's what i want i'm going to do namespace equals true here otherwise technically we don't need a namespace every single module namespacing means you have to put in the like the name of the module first and then the slash and then the either the mutation and or the action or getter afterwards but just for i think it's pretty good styling and it's pretty good idea to always leave name spacing true on it makes a little bit more i guess you could say it's a little more complicated you need to know how to interact with namespace modules but i always leave it on so i'm going to put in a state here i'm going to put in error null albums null um and i think that's what we're we're gonna do now we need to add a few things we're gonna add mutations and actions and getters so once again these are the four things you want now you could also i want to remind people that i've seen a lot of people actually put these in separate files you can do that i'm not gonna do that here i'm gonna do a video if you're interested on my channel that's on program with eric just search on google or look in the description below where i'm gonna show you guys how to do vx modules and we'll look at different ways of doing it including putting these in its own separate files okay so we're going to do we we need to have a way to set the album so this is this is where you know each album has a list of pictures in it so we want to have a way to set uh the array of albums essentially so we're gonna do state.albums equals payload so that's the only mutation we wanna have now everything else is gonna be actions and remember we have actions because action is the only thing that can handle some things that are asynchronous so we want an async create album and inside create album we're gonna have a dispatch because we want to actually set it to that set albums when it's done and well we'll actually do a few things here let we'll do create album and we'll for now we're just going to set this to blank we'll uh i'll show you how that's going to work in a second so we're going to create a new album we're going to do try and a catch okay in our try we're going to use the api graphql endpoint so we're gonna have to import that in so we're gonna import api from aws amplify and we're actually going to need a couple of more we're going to use this something called graphql operation which allows us to do graphql operations so when we add that in there graphql operation and then we're also going to use storage well we'll look at storage in a second but let's just look at those two api graphq operation and now we need a way to actually create albums and i'm going to import that into so i'm going to import we're going to call it create album as create album mutation from at graphql mutations and you're probably thinking well how do you know that it's called great create album mutation well we do because we do because if we look in the graphql we can look at mutations let's see here create album mutation we gotta look at different mutations here i think there's one called create album mutation so let's look at crate album mutation so i think what's happening here is oh so what i'm doing is it's called create album but i'm i'm using i gotta confuse for a second so i'm using an alias so it's called create album mutation so i know what i'm doing so here's the create album right here if i look for create album uh you're right here it's a mutation and here's the inputs and the conditions of it and you can take a look at the whole query here cool so now we think we have everything we need to start off with with this create album so i'm going to in this try i'm going to weight api dot graphql and then this is where i put in my operation you can see here graphql options graph view option so i'm going to graphql operation i'm going to pass in the create album mutation that i just created that alias and i'm going to put an input in of new album so whatever the payload is it's going to be passed in here and created cool and then afterwards i'm if there's an error and actually i left errors here but i'm just for now i'm not going to use it because i don't i'm not going to worry about errors right now i'm just going to console.log i can do console.air i guess create album error okay so now we have our first mutation which is create album and now we could probably need ones to get the album data so let's add that one so that's gonna be async get album and we're going to do an album id and we're going to return this one await api graphql and use that graphql operation again and this time i need something i need a way to get the album query so let's add a couple more of these i'm going to import in git album as get album query from at graphql queries and by the way uh i was going to say at the beginning of this video but i've gotten a lot of inspiration of this there is a aws conference every year every year called aws reinvent and so part of what i'm showing you today is a workshop i've i changed it around they used to use they used react and a few other things so this is very heavily inspired by an actual workshop that aws put on at their aws re invent in 2019 that i was at so just give a shout out there um i'll include a link in the description to the workshop that had some information about this cool so now we have queries here and also i want to add in well let's add in a list albums too because we're gonna have to need that and i'll add that in so we're gonna do list albums as list albums query from at oops uh okay at graphql queries okay so i want to make sure i have both those in there now so for this graphql operation for the git album where now we're going to use the git album query we just created get album query and then we can pass in the input which we need the id and then the album id so this will just get that one album uh and then uh we'll probably need to uh list list the query let's see here should we do list albums i don't know yeah let's do get albums data as well so we'll do async get albums data we're going to do a commit and then const albums data we're gonna wait we're gonna do api dot graphql graphql operation and we're gonna do the list album query and it doesn't need to take any inputs in for that and now we can commit set albums to the albums data dot list albums dot items so this is essentially going to set get the albums and then it's going to set it into the set albums right here into this actual vuex store so i think that's all i'm going to do right this second let's see if we can at least create an album and list an album uh we probably need one more we're gonna add a little getters in here so we're gonna do albums state and i guess we could do it this way and we're going to return state.albums we don't even need this return statement or this semicolon okay so now we have our getters and then we have ways to get albums get album get an individual album we can get all the albums data we can also create an album and then we're setting the album and now we need to go into we have this albums we can go into our index here and import it in so we're gonna import album info from dot slash albums albums and then we'll do album info and that'll be our namespace that we use throughout the app so let's start this up well let's check to see if it's still running okay dependency was not found store albums albums.js let's see here maybe i don't need oops actually i found there i misspelt mutations there mutations i'm gonna save it cool so now it's working again no errors it looks like if i go back to my make this a little smaller go back to my app refresh it it's loading without any errors cool so let's see in this albums page if i can get it to actually create an album so to do that we're going to go into our albums uh our albums component here in our page let me take a look albums page and we're essentially going to add some uh some information inside here so let's let's start by creating some this information that we need here so i want any time you go into this uh into this component i want it to just grab any albums if there's any in there so we can list them so i'm going to do this dot store dot dispatch i'm going to dispatch album info slash get albums data which i believe is what i called see here if i look in the albums get albums data yep that looks right good deal so now i have get albums data here so it'll just automatically do that soon as this component is mounted and then in the data object i'm going to do it this way i want to have an album name so we're going to show the album name and then if there's any errors we'll have an error as well so in the methods we're going to have a a button that opens the album details so we want to actually go to the album details and to do that we're going to call it open album detail and that'll be called album we'll be passing an album to that and this will do this dot router dot push and we'll go to album and remember we have a special route where we can pass in the id and we'll pass in the album.id cool and now we needed one to create an album we'll create an album and we'll put this dot error equals nothing here and then if not this dot album name uh meaning that they didn't actually enter a name for the album because we want them to enter a name in first we'll give an error that says please enter an album name and we'll return otherwise we want to go ahead and just try to create this album so we're going to const new album and inside there we need a name this dot album name we're going to have an owner which is this dot user.username that's going to be out of the authentication that we have and the owner id which will be this dot user.id then finally we'll dispatch it we'll dispatch the store album info remember we call it create album and we'll pass in the new album const that we just created okay easy peasy so far and then we need some computed properties here so this is our methods so we'll have computed here and we're going to use a new we haven't done this yet but we're going to use a view x helper called map getters so i'm going to import in map getters from ux and then these map getters restructure it getters and this will return a user and we're going to grab basically the the module from user and the albums which is from album info albums okay so now we have all this in place we have our create album we have open album details map getters and now we just need the html so i'm going to copy and paste this html in here from a different file that way just once again to save a little bit of time okay so first we do create or choose an album as our is our title and then we have an input right here which is where we're going to type in the name of the album name it's a type text an input and we're going to have this bound remember v model two-way data binds the album name we're gonna have a button here when you click create album that it actually just uh puts this into it actually just triggers this create album method we could have surrounded this by a form input if we wanted to but i just decided this would be easier and now we have a list of albums and that's going to take this albums but remember we have this getter down here that actually runs this gets this getter which gets this albums and it's going to just do a v4 on it and it's going to have a click handler that you're going to pass each individual album to the album detail to go to the detail page and then it has an album name in each card so cool so here it is so we have creator choose an album and we have no albums yet so let's create our first album to see if this works we're gonna do um which is called wildlife wildlife pictures great album i'm waiting for it to do something and right now i do not see any errors so i'm going gonna make sure everything's saved refresh it one more time let's try it one more time i think i have a bug somewhere oh there it is wildlife pictures just took a second let's try another one so soon as we our albums page as soon as we create album it's uh creating it and then it dispatches this to new albums which should update the albums here so let's do um album two okay so i see i found my issue here so i'm creating the album here but i'm not actually updating the get albums data so it updates the store so i can do this easily here i'm going to change this to dispatch because we dispatch actions so once it's done creating the album we want to dispatch the get albums data so you're gonna do get albums data so let's see if that works okay we have album two let's create album three cool so now this is automatically updating and list of albums are all showing up here which is nice now if we click on any of these albums album two it's going to our albums page it passed in the id at the top so yeah cool so it's all working correctly and we click back on albums albums here all right so the next thing we need to do is to actually get this to create photos so we need to kind of figure out how we're going to do this album's detail page and create a photo so that way we can actually list photos in that page itself so let's go back and add something to our auth so we have our auth here and our albums let's actually add something to our albums and we want to add a way to create photos in this album here and so let's let's go ahead and do that so this creative album this create photo is going to be a little bit big but i think this is nice we could this create photo it's really up to us if we want to add it into the ux store or if we want to add it in directly to the component itself but i think it makes sense to add into the ux store so i'm going to just go to the bottom here and we're going to call it async create photo and we need some data so we're gonna have some data as a payload passed into it so first we actually need to grab some stuff out of the aws config file so let's let's go ahead and add that in here so we're going to let's import a couple of other things we're going to need a uuid from the uuid library we installed at the very beginning of this video because we'll need that we'll need storage because now we're going to be actually accessing storage and we're going to import the aws config file from the at aws exports and we're going to have to create a new mutation so we'll import an mp mutation we'll call it create photo as create photo mutation as our alias from at slash graphql slash mutations i'll make sure i type that right and i think that's everything we're going to need to do what we need to do for this create photo so let's go back down oh it says we have an error once again i misspelled mutation make sure i have that and uuid from uidv4 was not found i may have not let me check my uu id and my package.json oops so i did install uuid here i think there's actually a version 4 of this so i'm going to delete that i'm going to do an npm install uuidv4 so let's just take a moment this uid4 is just a little bit of a newer version okay so i went ahead and installed that uuid v4 and then i went ahead and changed the import so it imports it incorrectly so let's go and see if we can get create photo and we have some errors here but hopefully we'll get rid of them as we fix this create photo so in this create photo we need to grab some stuff at aws i'm just going to copy and paste this for my other page so i don't miss type it so this is just grabbing that out of that that file and now we need to we're gonna essentially a file is being sent over in that data so we're gonna grab some information out of it out of data and then we're gonna grab the extension which is file.name.substring file.name.last index of dot plus one and then we're going to use that photo id to that uuid to create a basically a photo id and we're going to create a key and we're going to it's gonna be on images essentially this is where it's going to be held photo id dot and this is gonna be the extension that we just created and now we need to create uh input data for this so this input data is everything we're going to be feeding into our graphql query so we need photo id we need photo album id which will be the id here we need the content type which will be the mime type and full size and once again you can look at the graphql query that we created to understand what these inputs are region region bucket bucket and we can kind of simplify this we could simplify this i'm just going to leave it like this well i can do like this this will be the same thing okay so now we have oops now we have input data so now we need to try to create the file in the s3 bucket so let's do a try and a catch so i'm just going to label this s3 bucket storage ad file to it so here we're going to do await storage dot put we need to put the key the file and then here is a object level we're going to put it protected because we know that you have to be authorized to see it and it's going to be mime type and then we're sending some metadata with it which will be the album id id and then photo id cool and if that succeeds then we want to await the api graphql mutation remember use that graphql operation again and this time we're going to use the crate photo mutation which we're then passing in the input that input data that we created and so if that returns now we can return a promise.resolve success otherwise we'll console.log crate this will be create photo error we'll send the error so we can figure out what happened and then we'll return a promise dot reject error so we can pass in the air sweet so that that's it for creating our photo so we're doing two things here where first we're grabbing the aws config data we're basically constructing the photo and extension and then we're creating an input data we're pushing that should be a put put we're going to put the storage data into the s3 bucket this will that's what this will do and then if that all works then we're going to create the mutation inside the graphql operation which will then which will resolve with the success here and this will create basically the photo inside the bucket so that way later on the graphql list album or list photos can list the photos for us sweet alright so we have get albums create albums set albums so we don't have a way right now to list albums oh we do we do we have git albums data but we don't have a way to list the photos but we will i'll show you how guys how to do that here soon so let's see if since now we have this this way of creating the photo let's see if we can get this uh the albums details page working right so let me just give me one second here so we're going to go into album detail detail page and from here we need to do a few things so let's start with the mounted hook well maybe we'll do methods first so in methods here we're going to do an async for get photos so you want to we want a way to grab all the photos that i just mentioned earlier so that way you can list them on this page and then we also obviously need a way to create photos but we'll get that in a second so const will create an album here album and await this dot store dispatch dis batch album info slash get album and then we'll pass in this dot id which we haven't created yet but we will in a second and then this dot photos here i'll actually probably what i should do is create this data object real quickly so this makes more sense so i'll create this data object and this data object will have inside it photos which is an array of photos has album name which will be the album name and yeah i think that's that and then we're going to be passed in props we're going to be passed in id is one of the props into this uh album detail actually now that i think about it we're going to be using it's being passed in not through props but it's going to be passed in through the query params so it should be through route.params.id so i'm going to create a computed property here this will make sense in a second and we'll call it id and this will return this dot route dot params.id so that should be what that is should be a comma there okay so that that makes more sense now we have um we have the the route params id comes in now this dot photos is uh desktop photos will now equal album dot data dot get album dot photos dot items so you really have to if you don't know you might want to go through this a few times run these queries see what it returns back but essentially you have to kind of go this deep in to grab the actual list of photos from the the query that comes back so and we know this album name will be album dot data dot get album dot name okay i think that works oh we got an error duplicate key of id oops i don't need this props right here okay so no errors good and now that we have this get photos the only thing i want to do is i want to do an async anytime the um this runs i'm going to do a mounted hook life cycle hook for mounted i'm just going to run this stop photos this dot get photos i should say get photos cool so this will be ran anytime it'll just go and dispatch the get album and it'll grab the photos and it'll grab the album name so we'll see that and the last thing we want to do in this is actually list the photos and to do that we need to create a new uh we'll actually create photos is what i want to do next and i'm going to call this on file change it's going to be passed in the file so we're going to have a form with an input and an input with type file in a second and at first i want to just if the file doesn't have a target or doesn't have a file.target.files array so we're only caring about the first file they select we'll just return now we're just gonna have a try catch block there and this is we're going to actually try to create a photo so we dispatch the album info create photo and now we're going to pass in an object with the file which will be the file that target dot files the first one is the one we care about and this will be this that id from that computer property and then if that all works well we want to do this dot get photo so it just updates and lists the photos for us and we'll do console there's an error we'll just console log the error error create photo there cool so i think we have everything in our data here to actually um to actually be able to create our photos get our photos and do all that now we just need to add an html one thing i want to add in here real quickly is we're going to use before if you remember at the beginning of this tutorial i said we weren't going to use any of the built-in view ui components but we are going to use one here called amplify s3 image and you'll see here it's just a little bit easier to work with than trying to get the storage input i'll show you it's actually i won't show you in this one but it's a whole lot of boilerplate to grab to use the storage and grab the photos and then and then set them so we'll just use it this way so i'll show you what i did here i'm just copying pasting code so we have album we're going to show the album name now we have a form that has a multi it's a multi-type part form data and it has a here's some svgs this is a little box that'll open up a little picture and you click on it so you can select a file and then on change this is this this event this at sign is a view for for you for view events um when the change change event happens on file change will get triggered and it's only accept images this can be hidden in here and then we have a list of photos which we're gonna v if only if the photos exist and then we're gonna use the v4 to go through every single photo and then we have this amplify s3 image and so this if we go to the official documentation and we look at libraries and we change it to actually ui components and then change this to view and then do storage there is an s3 there's an s3 image picker but there's also the s3 image and in this s3 image you can pass in button text content types but essentially you can pass in the level which is protected which means it's going to be authenticated and then the image key which is the right now i put in photo thumbnail but actually this thumbnail it doesn't exist yet i'm going to add this in here now but in my next section i'll show you guys how we can add a lambda to to display it and it'll actually convert images into thumbnails and it'll also grab gps data but in the meantime we can just change this to photo dot thumbnail key actually you think it's photos full size key that's the full size photo and then i have a little width a width on there and then this whole gps data right now i'm just going to comment this out delete these we're going to do this in the next section too so i'm going to save it oh i got an error okay so it says there's an error down here with my amplify s3 image it doesn't like this for some reason so let me see if i can fix this oops i actually got an error here so i accidentally delete this end of this div let me save it see here if okay cool everything's working again so let's see if what it looks like so i'm gonna refresh it it's looking at one of the albums i created cool so now i have this album album three list photos here's all my albums again okay so let's go ahead and create a photo so let's click on album two i'm gonna select a file and choose the first one oh by the way it says uuid v4 is created use v4 instead we're not gonna worry about that cool all right so looks like the picture loaded so if i go back to albums go back to album two cool so now i have uh my picture book here i can see i can select as many as i want i can select a different album book album book three let's say and i can you know post a different picture here and there it is so it uploaded that picture it doesn't look too good but that's it awesome so now we have a very basic photo book here uh so the next thing we need to do is to let's see if we can make it grab the the data out of the photo book the gps data and display that for the user so we'll look at that next [Music] okay so we've made it quite far all this time we have added a fully functional album but we want to see if we can add in an s basically a lambda function that runs anytime an s3 bucket is updated and you can do all sorts of things you can have it text message you you could have it update something in the database you could like we're doing you could do a ton of different things so this is a very simple operation we're going to do here right now and that's to just add in a trigger so to do that we're going to stop our server here and we're going to clear it and let's add a few things here so we need to do amplify add function and this is how we add a lambda function and land a function basically is a function that will run any uh that that just runs anytime it gets an input coming into it so it kind of lays idle and then it it warms up and then it does whatever function it needs to and then it turns itself off so let's see here it's going to ask you lambda function serverless or lambda layer so i'm going to do a serverless function it's going to ask us for a name i'm going to call it amplify photo processor and then choose the function template well provide the aws lumbda function name i'm going to leave it the same and we're going to use it node.js we're going to use the hello world as the type here and then do you want to access other resources in this project the yes and it's going to ask to select the category i want the api and i'm going to hit enter there and i'm going to give it the option to read and do you want us do you want to invoke the function recurring schedule no do you want to configure lambda layers for this function i'm going to do no do you want to edit the local lambda function now no cool so i went ahead and added this function and it went ahead and nicely opened it up in vs code for us i appreciate it and if you don't know where it is it's in the back amplify backend function amplify photoprocessor source index.js file so i'm actually go to that directory real quickly right now i'm going to change directory to the amplify backend function amplify photo processor source so in this folder here you can see here's the index file the vent json file and i want to install a few things so so we're going to install axios so we're going to do a little axios so like an http library ediubs4 is a library for aws to do things the xf reader so we'll install those so just take a second cool and then we're going to install i'm going to copy and paste this from a different page here and this will be a this will essentially allow us to to do a reading of the gps data so we have to install this sharp library so it's npm install dash dash arch equals x64 platform linux sharp so this will just take a second all right so now we have this uh everything we want inside this folder here we have this package.json has our all our different libraries we need our dependencies and now we can essentially add in our function here now i'm going to copy and paste this and once again i got this from the aws amplify workshop at s3 s3 excuse me aws workshop at aws re invent last year so i'll give credit to those guys coming up with this but we'll walk through it um to see what it is doing since this tutorial is getting quite long i don't want to waste you guys time so what this is saying is we're requiring all these libraries here we're also requiring sharp and then this api sync url we're going to actually have to grab it this actually might be wrong but after we create the lambda function this is the sync url that we'll need and i don't think i have it listed anywhere here so we're going to have to grab it after it's already created so that could be wrong and then i essentially there's this function here that gets created um anytime the app loads it starts the here it is so right here this export handler this gets triggered soon as the function starts this is the main handler for the lambda so it's going to grab some the bucket name from the event that comes through as the parameter because basically anytime the s3 bucket is done uploading it'll trigger this lambda and then it's going to grab the key and then it's going to load the image and it's going to create the thumbnail and grid grab the metadata and it's going to update the photo record which right here is this mutation it does this update photo mutation and then you have this aws4 where you can actually pass in through graphql like the whole mutation and if there's no errors it won't display an error so essentially what this does is it as soon as the the upload's done it'll go ahead and and talk to the aws amp amplify graphql endpoint and it'll create it'll load the data for the essentially for the gps data and everything else using this update photo mutation so that's what this does i'm not going to go into detail in every single one of these but you know take a look at the this file it'll be in the included inside the actual projects in the description you can see here it's doing all sorts of things creating this thumbnail using sharp i'm going to save this and now i'm going to do a quick update to the storage too because it it needs to be updated so before we do anything i'm doing amplify storage i think it's storage update update and we're going to put in here i think we need to do images audio images audio video and we're going to select auth users only and we're going to hit enter here and now here do you want to add a lambda trigger to your s3 bucket yes and we're going to choose an existing front function from the project and we're going to do the amplify photo processor the one we just created cool so now it should trigger the lambda as soon as the upload occurs which is perfect we actually need to do a couple of more things for this to work right we actually every time you create a function it creates the cloud formation scripts so if we look in this function parameter let's see here there's an application so here is the source folder for the function apply photo processor and then there's this amplify photo processor cloud formation template and so this gets run every time we do that amplify push and so i just need to make a quick change here so i need to look at the runtime node.js yeah just node.js 12x and it has a timeout i'm just going to add in a memory size memory size of 1536 that way it can kind of otherwise it may not have enough memory for all these pictures and then in the action for appsync i think it's yeah so here's the app sync we have this create um and this start and then appsync graphql so i'm just get rid of this create and start creation so it's just gonna have appsync um graphql i think that should work all right so now i have all those in and let me go ahead and make one more change so now we can look at our queries in the this graphql queries we're going to look at the this one right here and now we need to change the query so it the basically the get album let's see here get yeah this one right here so it works a little differently and it grabs the gps data inside of it so we don't have it actually doing that here so i'm going to change this get album i'm going to copy and paste this from another screen again because i think that'll be a little easier i don't want to mess up this mutation there we go see the biggest difference is now we have this gps full size and it's in the right format for us and now we can go back in if we remember we actually have this uh insider album details page remember i had this huge this this comment right here i commented out so now i can uncomment it out and i have this image key this full full size key well now we can we actually have a thumbnail too so we can grab that one out so let me make sure i have that details right so it should look more like this image key here so i'm going to there we go since having this photo key here we're now this one and this just says use the thumbnail if it exists otherwise use the full size key all right i think we've got everything in place now and let's go ahead and let's take a look the amplify status and amplify push and we'll say yes here and let's just take a moment okay so it went ahead and updated everything in the cloud so let's take a look at our aws services so i'm back into the aws console again and now i should be able to go to s3 and see if i oops actually i want to go do my i can see my s3 buckets but i want to go to my actual lambda functions so i'm typing lambda there and now it should open up all right so here's my photo book i think this is it here amplify photo processor dev now make sure i'm in the right region yeah east too you see i have an s3 trigger here that's triggering this amplify proto processor and by the way so i need this endpoint this is the graphql endpoint that i need so let me make an update to this lambda remember i can always go the amplify folder back end and function source index that's that's the actual folder it's in and now this endpoint here i can i can delete to here and copy paste so that's the right and the graphql endpoint that i was looking for so let me just do a quick update to it i'm going to amplify push and this will just take a second okay so went ahead and finished so here is the moment of truth i'm going to start the server again actually i'll need to make sure i go back a few directories then back to the root folder okay i'm gonna npm run serve it's gonna run my app again i'm going to give it a second to start and so what we're going to try to do is see if things work correctly so this is the moment of truth this is the last part of this tutorial appreciate you guys hanging on all this time if you have leave a comment below let me know if you have and say i made it i appreciate it okay so i'm gonna refresh this to the end of this tutorial to this list albums okay okay so i'm gonna just log out make sure there's no issues 101 signing in cool so i'm going to album two have my picture in there now let's we're gonna have to kind of go back in and out of here so i'm going to go select photo this house definitely has gps data in it don't worry about the deprecation warning now i don't have any i didn't add in any a timer but i could have added in a little spinner here while it's uploading but it doesn't so you don't see any gps data now but let's go out let's go back in cool so now it has gps data and this is actually a thumbnail and not the full picture which is really cool so we have created that we have latitude and longitude so we've done it cool so we did it we have gone through the complete the complete tutorial where now we have our working photo album we can even grab latitude longitude out of it we have all these pictures i mean i think the next steps in this would be to add in like hosting with amplify console you can also add machine learning you can do all a whole bunch of really crazy things but i'm going to go ahead and end the tutorial here and once again i want to thank traversing media and brad for letting me be on his channel today i hope you guys learned something and also make sure you check out my channel and the link in the description too thanks

Channel: Traversy Media

Views: 50,490

Rating: 4.9352679 out of 5

Keywords: vue, vue.js, aws amplify, graphql, full stack vue, program with erik

Id: w0p7ywfHesw

Length: 150min 44sec (9044 seconds)

Published: Thu Sep 24 2020