Video details

Create A Vue.js 3 Full Stack Application With Amplify, GraphQL, Auth and More! #teamseas

VueJS
11.07.2021
English

In this video I create a full stack app for #teamseas including AWS amplify, Appsync, Lambda, Cognito for Authentication and Authorization and more.
👉Check out my last video on State Management with Pinia https://youtu.be/Ok6vO98RV_Q
👉 Sign up and get free Vue cheat sheets and updates! https://www.vuecourse.tech
Need some mentoring, help with a project, get a career in tech, level up your skills? Check it out 👉https://mentorcruise.com/mentor/erikhanchett/
Need to Learn Vue or Nuxt? Check out my courses below!
http://bit.ly/2LalQka - Learn Nuxt.js Course! http://bit.ly/3aiYe8s - Quick Starter On Vue 3 https://bit.ly/2OETt0M - Full 6 week course on vue!
🗂️ 🗂️ 🗂️
Make Sure To Check These Courses From Wes Bos ! 💻
Begginer JavaScript - https://BeginnerJavaScript.com/friend/HANCHETT React For Beginners - https://ReactForBeginners.com/friend/HANCHETT Advanced React - https://AdvancedReact.com/friend/HANCHETT

0:00 Introduction 0:53 Setup of Vite, Vue 3, Tailwind CSS 05:29 Setup AWS Amplify CLI+ YouTube API 07:16 Amplify Init / Amplify configure 08:38 Install of Packages 09:59 Amplify Add Authentication With Config 10:31 Amplify Add AppSync GraphQL End Point 11:38 Setup @Auth Rules for Schema 15:35 Create AWS Lambda
19:03 Setting up TypeScript for Lambda 25:30 Testing Lambda With Mock and Console 28:07 Setting Up Authentication with @aws-amplify/[email protected] 35:34 Setting up Lambda Auth API to Cognito 39:54 Setup Lambda with AppSync GraphQL
46:20 Setting Lambda with YouTube API 51:29 Setting Lambda main index file 55:28 Testing out API and Lambda with Amplify Mocks 1:01:49 Testing in AWS Console 01:04:57 Setting up Frontend to connect to AppSync
Links https://github.com/ErikCH/TeamSeas-Amplify-Tutorial https://ui.docs.amplify.aws/ui/getting-started/installation?platform=vue

Transcript

Hey, developers. Today, we're gonna create an app to help Team Seize. If you don't know, Team Seas is trying to help clean up the oceans with Mr. Beast and Mark Roberts. So I have created an application that takes the latest and greatest videos using the YouTube API and displays it to you in this card system. So we're going to use a whole bunch of different technologies to do this. On the front end. We're going to use View three. We're going to use App Sync, which is a managed GraphQL instance. We're going to use Cognito user pools, which will handle our authentication and authorization. We're going to create groups in it. We're also creating a Lambda function, which is going to have access to these different services. We're going to use Cron jobs, we're going to mock it all up. So I'm going to show you all these different APIs and we're going to walk through it step by step. If you can make sure you click over here and donate to Team C's, they're a great cause, but let's just go and jump into it. All right. So let's see if we can create this website you can see here are listed from the YouTube API. The team sees list of videos, and I created a card for each. The top of the card has the title. Then you have the name of the channel, the release date, the description, and then you also have a channel info. So if you click here, this will actually open to the YouTube page where you can play the video or you can click here. And this will open up the channel information page. That's pretty much it. This is just a Flex box and Flex display. It's wrapping down, so it's responsive. Pretty simple there. I'll show you the code in 1 second and we'll kind of walk through it one by one. So what I did is I created a new app and I'll walk you through the steps. But I went ahead and off camera added a few things just to speed up this video a little bit. First, I'm using Vet, but you can certainly do this with React or Angular. If you guys really want me to do this in React, leave a comment below and I can probably go ahead and do that. I have not installed. I used Mpmenitvit at latest, and then I made a couple of changes I created in the app View file. This one right here. I have this card that I created. It's called the Card, and that's this card right here. So each one of these is a component and then I have some values and passing to it. I'm also using the new script set up syntax inside View and it has laying equals TS. So I'm using TypeScript. I'm also using the latest greatest version of Tailwind, so I'm not going to go through how do you install that? But I'll show you really quickly. If you go to the Tailwind guides to install for View Three or VT, it's pretty self explanatory. You just need to straightforward. I don't know if it's super simple, but you just need to install it. Install the dependencies you have to create this config file and then you create the CSS file and then you just import it into your main file and that's it. And then after that it will work. I also installed a couple of other packages just to start us off with the AWS Amplify package, because we're going to use Amplifying our back end. We're using a Lambda function to act as almost a utility or script to automatically connect to our Google API to grab the videos we want. We're also using this AWS Amplify UI view. This is a project that I personally worked on not completely ready yet, but I just wanted to show a quick preview of it. This allows us to really quickly create an Authenticator so we can use Amazon Cognito and log in and create accounts. And so here is the card that I did and I have these URLs here and these URLs here are what's going to kind of compose the card. And really if you look at it and you start it up, this is what it looks like right now. This is all we have. It's not grabbing any data from our apps and back end. It's just kind of this ugly card, and you can see here. I'm just passing in nothing to this. And if you're not familiar with Review three, this is kind of the new script set up syntax. You can use this thing called definedprops and also using TypeScript, by the way. And define Props allows you to define which props you want. Also, there's one you can do with defaults. But since I didn't want to add any defaults, I just used it to find props. And then I'm using this two reps. And just to realize anytime you're using to find props, you don't want to destructure the props right here on this line. You want to destructure it with two reps, otherwise they will lose its reactivity. And then this is just a real simple date function to grab the month date and year and then I have a function too. So you can pass in a URL and open up in a new window the code itself. I'm not going to get too much into this. It's just mostly tailwind, and in fact, I kind of borrowed some from this Tailwind Components website, which I'll leave a link in the description to give credit where credit is due. And I took some inspiration there. I changed some things around and you can see here. I have a click handler that says the whole card is on click and then just some tailwind CSS to do the transition with the easing in and out and the transform of it. So that's how we want to begin. Let's go ahead and set up Amplify to show you how would that would work. So first I want to say if you don't know already that eight of us has a free tier. So this Amazon Web Services has many, many different services, and you can get them for free, like hundreds of products for free. And the free tier for twelve months. And you get lots of lots of time to do many things. So I would highly recommend if you haven't created an account, created a free account, try out the free tier for a year, essentially, and try it out and see if it works for you. Also, I'm using the API Google Services, so I'm using a YouTube API. I'm not going to show you exactly how to set that up, but basically what you do is you sign up for Google, so use your Gmail account or whatever you need. Then click on the credentials button and there should be like an Add credentials button. And then you can get your YouTube API key and it's free for up to a certain amount of requests a day. I believe it's 10,000 requests, and depending on what you're doing, it could be like 100 or one request. So keep that in mind that it's free for up to a point. And then also make sure your sport team sees. Obviously, I'll put a link in the description for this as well. Let's see if we can get amplified set up. So first thing you need to do if you haven't already is you need to install the Amplify CLI. So if you Google it, you can just go to this docs Amplify dot com CLI and you can install it through Install Amplifyci so you can do MPM install Tacga at Awscli. This tool will make it easier to follow this whole tutorial. Otherwise, when you run AWS Amplify, it won't work. After you do that, you just do and I'm in the folder. By the way, my folder, the root folder of the Vet app I just created. What I can do to start is I'll do Amplify and knit, and what this will do is it'll essentially create. And by the way, if you have an older version of Amplify, it's really good idea to install the latest. I always do that before I start anything. So I'm going to do that right now because I just noticed it says I have an older version, so this will just take a moment. Okay. So we have the actual Amplify CLI installed, so I should be able to init it. So I'll type in Amplify init and this will start that process. It should ask me a few questions. Okay, so I'm going to call it Team C's View AWS, and it auto detected everything for me. So I'm just going to say yes here and it should automatically create everything for me, and it's asking me how I want to connect. I'll just do it as profile. By the way, if this is the first time you're running this, you might have some more questions that might actually ask you to configure it first, which will require you to log into your AWS account. Since I've already logged in. This works. All right. So I went ahead and implemented or the Amplify initialize the app, so real quickly I want to use the Authenticator. So remember I said I installed in the package JSON this Amplify UI view. I did have to make a couple of modifications as well to get this working, which I'll show you in a second. One is I went into the main index HTML file and added this window global window VAR exports. And if you're curious to how I did this, it's all in our getting Started guide, which I'll include. Like I said, this hasn't been released yet, but we are looking for people to test it out and it's for view, angular and react. And right now you have to add a couple of things in to get it working. For Vet, you have to add in to the script tag and also inside the Vet config. So if I go to the Vet config, I also had to add this runtime Config browser, and I also made one more change in the TS Config file I added in Skip livecheckeville is true, and this just helps when you build it so it doesn't try to check your libraries. They have to be a simplified library. Since I got that out of the way. Let's go back. Take a look at our console here. Now, since we have this initialized and by the way, you can tell that's initialized there's going to be a new folder called Amplify listed. This means that you have the Amplifyapp initialized into your app. Here the Amplify service, and now you can get access to all the AWS services they Amplify sports. Now I can add stuff. First one I'm going to do is Amplify adopt and this is going to add in authentication so I can talk to a Cognito back end and that'll do my authentication and authorization. So I'm going to do default configuration. I'm going to choose email and then for right now I'm going to say no, I'm done. And this will go ahead and create the cloud formation scripts and everything I need to do to be able to talk to a back end. And it's asking me if I want to push it or publish it. But I want to add another add a few other things. I'm going to add an API and this is going to be my GraphQL API that I have in the background. It's going to ask me if I want GraphQL rest. I'm going to choose GraphQL. Yes, I guess I'll call it teamcs. Now. It's asking what the default authorization. Since we have Cognito, I'm going to use Amazon Cognito user pool, and for now I'm going to be done. Do you have an annotated GraphQL schema? No. It's going to ask me if I want a single or one to many relationship. I'm going to do a single and it's going to create some mutations and some scripts so I can more easily interact with the API. Cool. Do you want to add the skimmer now so I can take a look at it and I'm in Vs code. It actually opened into a new window. Didn't really need that. But if I go back over here and I just look for the schema GraphQL, here it is. So it created this. It's basically just a to do model pretty ugly. This is not exactly what we want. Let's edit this. And so what I'm going to do instead of calling it to do, I'm going to call it video and it's going to have an app model, but you can actually add authentication to this. So what I want is on this website here, so you don't have to be logged in to see it. But if you are logged in, you can make changes to it. And I don't have a log in here, but we could have and I'll show you how that works. So you can add in these little annotations. So this at here so I can put at off. And if you're totally confused about this, you can actually look up if you just Google for amplify. It's called using the App Sync service, which is a managed GraphQL service and look at off. Then there's a lot of different docs about configuration, authorization models and things like that and how to use them. And inside this off here, I can add some rules. And inside this rules, I can allow or disallow things. So it's really easy as I can allow. And what I'm going to do is I'm going to allow groups, but only if the groups have admin this admin role, which I'll add in a second. And I also want to allow the public. That means anyone, but they only can read. Cool. So these two rules will allow us to if you're an authorized user and you're in the admin group, then you can create update, delete or read. But if you just want to read, you can actually be public as well. That gives it kind of the best of both worlds. And now I can add in a couple of different properties. So I'm going to copy and paste this from another screen. But essentially here is what I have. I have a video ID thumbnail default date time. So by the way, this little squiggly line is because I'm using it's C spell. So I'll just add video ID the thumbnail to my AdWords to workspace settings. Let's see here. Quick fix thumbnail. I misspelled this, but it doesn't matter. I'm just going to leave it here and I'm just going to add it. Cool. So here is my new auth it's all my different Auth rules, and we probably want to add in a few other things. Let's see if we can just push this up for right now. So to do that, I can do Amplify status, and this is going to tell me the changes I've made and that I can push them up to the cloud. They're both create. Great. So I'm going to go ahead and push this and see if we can get this working. It says I have an error because I didn't pay attention. So I'm going to try it again. Oh, this is another thing. It says Ostirected with an API key provider found, but the project has no API key authentication provider configured. That's because we haven't added it. We said we're only using the user pools through Cognito. So let's see if we can do this. We're going to Amplify update, and then we're going to update our API. We're going to update the GraphQL one. We're going to update off settings. See, the default one is going to be Amazon Cognito user pool, but we want to configure additional types, which is API key, and we're just going to hit enter there and we're going to say it expires 365 days. So it's just kind of a demo, and it should automatically add the CloudFormation scripts and everything through here. That way people can access it both ways. Okay. So let's just go ahead and push it and look through this a little bit of warning, but that should be fine. All right. So I went ahead and created the GraphQL endpoint, even gives us the key and our endpoint right here. The next thing we need to do is create our Lambda. So we'll do Amplifyad function. And what this will do is it will allow us to create a service function that we're going to use to query the YouTube API, which will then send through Cognito authentication system to our AppSync GraphQL system, and it will be able to do the insert inside there. So we'll go ahead and get that working. So we're going to do a Lambda function. We'll just leave the I'll call it Team C's function, and we'll do NodeJS, and we're going to use this Hello World as a simple gateway, and it's asking us, do you want to configure advanced settings? We're going to say yes here. Do you want to access the other resources? We'll say yes. So we want to make sure we can access both API and Auth, and we'll just do create for the API and for the off, we'll do query and mutation, and then it'll say, by the way, here's a bunch of handy environmental variables that we'll be able to use, which is great because we might use that later on. And it's cool. Do you want to invoke the function and recurring schedules? The idea is this Lambda function, maybe every day or every 6 hours. It would contact the YouTube API to grab a list of videos that have the hashtagteamcs. So that way we can generate this. These are all videos hashtag teamcs. And so yeah, let's try that. So we'll do. Yes. Here we'll do daily. We'll say yeah, daily at 240 P-M-I don't care. That's fine. Do you want to enable lander layers? No. Do you want to configure environmental layers? No. This is kind of interesting. Do you want to configure secret values? So, yes, we have plenty of secret values that we'll need to enter in that we'll need so we can access our API and everything that we need. So I'm going to say yes here. Now it's asking to enter a secret name. Let me go ahead and add in a few. First. I'm going to do the Google access key. So I'm going to copy and paste this from a different screen. And cool is it also hides the input. So I'm going to copy and paste this from a different screen, too. And I'm going to go ahead and just add in all our secret values in here off camera. And then I'll be back. Okay. Cool. So I went ahead and added in all my secret keys. I'll explain what those are later. We can basically use Amazon's secret Manager to be able to get all the values. And it's really handy. So do you want to edit the local Lambda now? Sure. Yes. And well, it'll go ahead and open a new window again, which once again, I already have a window open. So we don't really need to do that. But we can tell this is where it is. It's in back end functions. Csfunctionsource, index JS. Cool. So now we have a new function, a Lambda function. I can bring it up here. So index JS here it is. It even tells you some of the secrets that I added in this Google Ice key, clanity, password, username, user pool, ID, and some of the environmental variables even tells you how to get a hold of them. So at this point, I want to do a little bit more configuration, because this land right here is if you look at it in this folder, it has basically the Amplify CLI created all this for us. It created this Amplify folder, created a back end folder, and then it also created this functions folder, and it created our Lambda function, and we created it as JavaScript. But honestly, I'd rather use TypeScript. So I'm going to convert this over to TypeScript really quickly, and it'll just take a couple of different steps. So the first thing we need to do is we need to install the right TypeScript, utilities, and libraries to get it working. And then we're going to have it as a TS file instead of a JS file. So let's go ahead and install what we need first. Okay. I need to go ahead and change it to Amplify back end and then function teamcsource. So this is where it is. Now. There's a whole bunch of different ways you can do this. And I'm just going to do a very simple I'm just set up TypeScript in the source folder. I know some other people, like create their own folder structure and then have it have TypeScript generated inside the source folder. But we'll do a little differently. So I'm going to install some libraries here. First, I'm going to install Ads Lambda types. We're going to add some types that we want and some types for node, and we need type script. So this is the dash D stands for developer dependencies. So let's go and install this first. Cool. And now let's go ahead and install some other dependencies to get this working. So we need AWS app sync and the SDK for AWS. We're going to use this Isomorphic fetch and we're going to use UUID. We're going to use GraphQL and GraphQL tag. And yeah, I think for now that's going to be it. And of course, I need to put I afterwards super. So I went ahead and installed what we needed and now we should be able to we just need to do one more thing in this team sees function. I'm going to create a new file called Tsconfig JSON and this is going to hold our configuration for TypeScript, and I'm going to copy and paste this because what essentially I'm doing right here is on the target for common JS and it's going to be module resolution node, and it's going to be strict. True. But I'm going to allow any right here. No implicit any. So you can have any anywhere. I'm going to use TypeScript on this, but I'm not going to fully use TypeScript everywhere and use types for everything. But I kind of like having TypeScript just in case I messed up thing up. So now I have Tsconfig and now another thing I want to do is I'm going to take a look at the source folder. I'm going to rename the JS file to TS. I'm going to have to do a few changes here to get it to work. So instead of having export handler, we're going to use at least a few types here. The most important one is it's not going to be export handler anymore. I'm going to export Const handler, and that's going to equal an async function. And now I should be able to put a certain type of proxy handler. This is saying is that I want this type to be it and I have to import it in this API gateway proxy handler from and I think it's from the AWS Lambda. Cool. So I'm not getting any errors. Good. And by the way, you can just delete all this, but I'll leave it there for now and then you can uncomment this if you want cores. But really, this is just going to be a function that runs to do some things for us like a Cron tab every few hours. Now to get this to work with Amplify, you go to the root package JSON file, and you'll need to add in a new script that essentially says anytime you try to create or build, go ahead and run this on the script. So we're going to create something right here and we're going to call it Amplify, and it has to be amplify has to be the beginning of it with the colon and then the name of our function that we want this to run during. So if you look at our Amplify back end function, it's called Team C's function. So team sees function, and now we can put in right here what we wanted to do. So this is actually directly from the documentation. But what this is saying and I have to delete this part. Team sees function. What this is saying is anytime you build for Amplify, go to the Amplifybackend function teamc's function folder. Run TSC, which is our TypeScript compiler using Tsconfig and then change to that folder. So we did this right. It should generate our file. And the way we can test it is we can use the mock functionality in the CLI. So if I clear this now, I know I have this source. If I go back to my Amplify, I have this index JS. If this works, it should create an index JS file. So I'm going to amplify mock function, and it's going to ask me in a second what it wants me to do. Take a moment. Okay. It's asking me if I want to use this event JSON to test it. It just basically sends an empty like basically an empty object over. So I'm going to say yes, starting your execution. Cool. So it looked like it worked. It created this JS file, which you can see here is just the same file, but it's now using basically using this exports handler and using Es modules, and it should be working. And we can also test it too. We can push it up to see if it works on the server. So I'll do amplify pushy, and then we'll look at the Amplify console and see if we can test it out and see if our Lambda is working. Okay. Let's take a look to see if our Lambda that we just created is showing up. So I'm going to run this Amplify console, and this will open up a new window into our console, which we can then look at everything we've done so far. I'm going to choose Amplify console, and you can see from here you can see here's our categories added Authentication API function tells us some of the resources that we've already done. So I'm going to click on functions. This is our Lambda, and we can even click View in Lambda, and this will show what we did so far. So first I can click test here. I can click test. Cool. So things are I can even open the logs or just take a look at the default here shows that it was working. We can even look at our configuration a little bit. Here are the keys that we went ahead and added the Google access key is going to be the key that we use to access Google. Now I have a few others added your client ID, password, username and user pool ID. So this is when I was doing the configuration. It asked me if I want some secrets and asked me what the names were and what the values were. So this client ID is if you look in your AWS exports file, it's the same one that you have in there for your client ID. There. The password, username and password is an account that I'm going to create. I haven't created yet, but I already created the username is going to be an email address. Password is going to be a password. I'm going to create. The user pool idea is also from the AWS exports file. If you don't know what I'm talking about, if you search for AWS exports, this is a file that's automatically created by. It's a file that's automatically created by Amplify. When you added authentication and it has all your kind of secrets. Now it's secrets. And that's why I'm not going to show you. But inside there has a user pool ID and it has a couple of different IDs. The user pool ID. You hear the other ID you put under client ID before we set up the Lambda. I just want to really quickly show you how the Authenticator works and create a user that we're going to be able to use insider Lambda. So to do that, I need to open up our appview file and so really quickly I'm going to import in Authenticator from the AWS Amplifyui view. Remember, this is the at next. This is kind of our very new Authenticator. It's still being worked on and as of this recording, but it should be out very soon. And we should also be able to import AWS. We will import Amplify from AWS Amplify, and we also want to add in some styling for Authenticator. So we're going to import in Amplifyui viewstyles CSS, and then we also need to configure amplify. Remember I told you to create that AWS exports file, but now we can tell it to use that file. So would you amplify configure and I guess I have to import it in exports from now. This is interesting. The file that it normally comes with is JS, but I went ahead and renamed it to TS. That way I can import it in. So just go Awsexports. There it is. And then you just pass that into Configure, and now we should be able to use the Authenticator. So I'm going to get rid of this card for right now because I don't want it on here and to use the Authenticator. I'm just going to add an Authenticator the component, and I want to do a little configuration on here. And there's something called login mechanisms, and this is all inside the documentation for the Authenticator, and I'm going to have it have you in array and the first one is going to be an email, and this basically tells it that it should have an email. It also exposes some slots so I can do this. And I can expose sign out. And so anything between the opening and closing brackets of the Authenticator will only show if you're logged in. But H three Hello from logged in, and then I'll put in a button here which won't really look. That great because I'm using tailwind and I'm not stealing anything, but I can put in signing me out, and then I'll have a click handler here that just goes to sign out. So this is a new Authenticator. And essentially since we already created the back end, it should work. I have my app still running in 4000. I'll refresh it here. Okay, cool. Here it is. We just had to stop and restart the server and now let's create accounts. So you have two tabs sign in and create account and you can configure this a lot. This is what it looks like out of the box. So I'm going to create a new account, and I'm just going to put in some random passwords, an old email and click Create account, and it's going to ask me for my past a confirmed sign up because I did it by email. So I'll look in my other table, my other browser here. I'll put it in and I'll call confirm. Cool. It says Hello from logged in. I can sign me out now if I go to the Amplify console, which I still have open by the way, and I go to the overview, the categories added right here. I have authentication and API functions if I click on authentication, and now if we click on View Incognito, it should have the Cognito that we just created. This is where we set up our users to log in and out and all the configurations for it. So if we go to users and Group Cool, it has my new user here. Now if I go to Groups, I can create group. I'm going to create a new one called Admins. And by the way, the user that we just created here has the same username and password we used in our secrets for username and password. So those should match. And then I can actually go in here and I can add users. So now I can add this user to it. There we go. So now we have one user in the admins group, and now this user should be able to do some things like create and update and do some mutations in our app sync. Also to get this working correctly. I noticed we had to do one other quick setting clients. There's information here. If you click show details, there's this enable username password author admins for authentication. Go ahead and check Mark that save and then do it for the same the other one as well. So I'm going to save both of these. And that is pretty much all the configuration we need to do inside Cognito. So let's get back to doing the Lambda. All right. Actually, if you noticed the earlier video, I made a slight error you would have seen I created this admins group. I actually need to create admin, because if we look at our schema file, you could see that I used this group's admin. So without an S, I just need to make sure I add this admin group and then add my user clicking the Add user button to that group. Then that should work. There's a few other things to do before we create our function, and I'll show you I started a little bit off camera, but I'll show you exactly what I did here. First, we'll need to go to the package JSON that's in our Functions folder inside our functions here. The first thing I did is I actually added this types node. Otherwise, if you're using process, you might get some TypeScript errors in your Vs code editor. I also went ahead and you see this graph QL when he installed originally, it gave me 16, but I went and put it in 15 because there's a slight issue between GraphQL tag and GraphQL that was giving me a weird error anytime I was doing some operations through the AWS app sync, so just make sure I used 15. You may not have this problem, but if you do, you may want to change this to 15. And like you said, go ahead and add in this ad types node here. So after you do that and make sure that if you're following along or coding along that you have all these dependencies installed. If you've been jumping around, you may not. First thing I did is in my folder. Remember, the AWS amplify creates this Amplify folder, but I have this back end folder, and then I have this function folder. And then inside this function folder, I have source, and I went ahead and created three new folders. I created an API folder, a GraphQL folder, and a YouTube folder, and so I wanted to separate out my logic between these three. So the API folder does everything for contacting the API, so the Lambda will actually contact Cognito. It'll log in and get authenticated, and it will use those credentials to be able to talk to our app sync, and we'll see that working here in a second. So I think what I'll do is we'll start with the API. First, you need to import Stars AWS from AWS SDK. It actually recommends in the documentation that you do this import star. So that's the way I did it. And then I needed to add a new Cognito SP. So this is the Cognito identity service provider. This is through the AWS SDK, and we're going to be using this to connect to our authenticated Cognito user. So I'm going to first create this grab secrets. And so what this is doing is this is essentially if you remember, it gave us on the first page, which I'll show you this code in a second. But it gave us the let's see, I think it's this one right at the top. This Const parameters await new. This was actually generated as soon as we added the secrets manager, and it told us how to use it. So essentially, that's what I'm going to do. I'm going to use the same sort of code that it gave us there. So what I'm going to do is I'm going to grab the username, the password, the client ID, the user pull ID, and the Google access key. This is all from our secrets manager. And then what this does is it maps the key to process basically an environmental variable, and then we're going to have to decrypt it through. And so that's this whole function here now, for some reason, TypeScript was giving me an error. So I had to put the Tsignor. So what this will do is essentially it'll just return back basically an array of secrets, and there will be a name in this array that matches this process environmental variable. So to grab data, I created another kind of helper function called Findsecret that takes in a key name parameters. And all this does is you pass in the key name, and then it does the dirty work of actually going through this array, this parameters array that's being returned, and it tries to look for the dot name. It's a capital n, and it matches that up to the key. So if you do process Env and then the key name, if that equals the name, then you have basically have the right secret. And that should return the secret there and values the secret. So the next one we're going to do is initiate author. And what this is going to do first is going to grab all the secrets, and then we're going to return an object. And this is going to be used with our initiate Cognito. Or basically, when we connect to Cognito, we need all these things. And so we're going to grab the client ID, the user pull ID. And we also need the username and the password all this is using is using our two helper functions to use the secret manager to grab the data and then populate it into this object. Now, the Git credentials is where it's kind of the most complicated. What we have here is we're first initiating the off params. So that way we have the data that we need, which I'll show you guys in a second and then initiate this right here. I guess I could close this to make it a little bigger returning. I created my own promise around this, and that's where you use this Cognito SP. So admin initiate off. And once I basically pass in all those parameters and then I can get back the tokens for this user, and I can see if it gives me an error. Then I can reject the promise. If it's null, I reject it. However, if it's not null and there's no errors, then I resolve the promise with the data. And like I said, this is just JWT tokens that you're going to use later, and that's it for the API for grabbing credentials. And we'll need to be using this with our AWS app sync. So that way we can be authorized user to do mutations. Okay, so let's take a look at GraphQL and how we're going to set this up. So the purpose of this is to use our managed AppSync GraphQL instance to be able to create videos to list videos. So that's primarily what we want to do and also be able to create a client. So first we're going to be using the AWS apps and client that we installed earlier in the package. Json. We're going to use this Git credentials that I showed you earlier through the API. So that way we can actually be authenticated. And then we're going to use this GraphQL tag, which is kind of the way we're going to talk to our GraphQL database using the GraphQL language. So first thing I want to do is using GQL. I'm going to create this list of videos and this create video mutation. You're probably wondering, how did I do this? Well, you can kind of do this yourself. I can show you guys a little bit later. You can log in to the AWS console, go into the app sync, and you can create your own queries. You can copy and paste them in here. But one nice thing about adding amplify and adding apps in the it actually creates for you. And you can look here in the right hand side inside the source folder. It created this GraphQL, and it created the mutations and everything for us already. So what I did is I just went to the mutations. I copy and pasted the create video. And then I went to queries and copy and pasted the list video, and I just put them inside here. You can be more fancy and have one place that both the function and the front end pull from. But for now, just for the sake of just being easy, I just went ahead and just copy and paste it manually. Obviously, if something changes, you need to change it in two places, which would be a little bit more of a pain. But just for now, this is good for this demo. And now let's go and create the app sync client. So this is going to be how it talks to the app sync client to grab the credential to be able to actually talk to the endpoint. So we're going to create a new expiration date, and this one is probably the most complicated piece of code I had to write. I'm using the process API team sees View AWS process, which is the environmental variable that's automatically created when you add in this app sync. And then we're going to create a new AWS app sync client, and it can take a few things. It requires an object here. We're in disable offline. True. We're going to pass in the URL, that's the GraphQL URL, the region, and then for off, we want to make sure that we use Amazoncognita user pools, and then we're going to pass it as JWT tokens, and that's what was generated from our API. So we're going to check to see if it's null, and then how old it is based on today's date. And then if we need to, we can actually just run the Git credentials again to get new ones. We also give ourselves like a ten minute leeway, and then we basically check it this way we create this new expires in from our credentials and that's it. So this will create our client for us. Now all this code right here. Let's see here. You don't really necessarily have to have all this code here. I just thought it was just a little bit nicer to have, and you certainly don't have to have it all. You could just return the credentials ID token specifically that you need that you get from the Auth. So let's take a look at the list data. So once we are able to have a client, we can then pass it into this list data. And once again, I didn't add too many types in here. Obviously, this will be the type of this AWS apps and client. That's what I would expect. And you have to always do this. Hydrated. I'm not really sure I haven't looked in the documentation, but I guess it just makes it so you can connect to the database and then you find it surrounded by a trycutch block. And then we're doing a query on it and you pass in basically the data from that query. And this is where the graph query language comes into place and that this is a part of JQL. And so we're going to essentially do a query for list videos, and that's pretty much it we just pass in the list videos. This whole query here. We don't really need to pass anything else in. We're not adding any filters, and it should just do the query for us. Create videos is a little bit different. So first we're going to assume that they passed in the input, which is going to be the video data that we want. And this would be like the YouTube data that has the ID, the video ID, publish that channel ID title description, thumbnail, default, medium high title. And then we're going to basically use the client that we just created to do the mutation. And so once again, we return the transaction complete data. We're going to do this mutate. And you can see here this client has query if you're doing queries and then mutate, if you're doing mutations, that's a way to do, like updates. And then you just pass it to JQL. But we also need to pass in the input all the data. So we set those variables and then we just pass in the input that we expect. So it's description, thumbnail everything here. And then we'll just put new date is the date and time it was inserted. And that's it. So that's essentially it. And like I said, if you're trying to follow along, maybe take a look at the documentation. But this is essentially what we're doing as a utility function to create and update. You can see right here this mutation here is the input. And so it expects all this stuff to be sent in with it. Okay. So let's take a look at how I did the YouTube, and this is essentially grabbing stuff dumped from the YouTube API and showing all our team sees data. So in this file right here I'm going to have a couple of things I need to grab. First, I'm going to need to grab the find secret and grab secrets. I need the Auth API. I'm going to use this UUID. This is going to be used to grab a unique ID that I'll show you guys in a second a uuid. And by the way, I did use the stack overflow. I sometimes paste inside my applications comments of places where I found things that way. If I need it in the future, it's there. And here is the YouTube URL. Now you're probably thinking like, how did you know how to do this? There's a really great documentation I'm not going to show you. But if you just Google YouTube API, it'll explain how to create YouTube, how to basically connect to Google's API to grab YouTube information. There's ways of doing it through OAuth, but you can actually just do it through a key as well. And that's the way I'm doing it. So that's why we have this part equals Snippet Q equals team C's. That's a hashtag and Max results. I think I'm putting, like, 22 in right now just to test it out. And then a key. We could adjust that to like, 20 or 30 if you want. So the first thing you do is grab the YouTube URL and you can notice this actually doesn't have the key value. It just says key equal. So obviously we need to add that in. That's not too bad. So what we need to do is first we're going to grab our secrets from that parameters. Remember we had that secrets file. We're going to find the Google access key secret using the find secret, and then we're just going to create a new string. So we just take the YouTube parcel and just slap the Google key at the end of it. Easy peasy or very straightforward. I know it's not super easy, but it is straightforward. Now I'm going to create a new function called Grab YT, and this is going to do the bulk of the work here, and it's going to use this URL and grab data. I'm going to grab the YouTube URL. It's going to return the tool data. I'm going to do this. Try catch block, and essentially what I do first, I'm going to grab the fetch, and by the way, I'm using this Isomorphic fetch because I'm using common JS. I'm passing the fetch function directly into the Grab YT data. You probably didn't have to do that, but I thought it was just easy for this. And I was also getting some weird errors if I didn't pass it in saying that it didn't recognize the version of fetch I was using. So I just did it this way. And this essentially is how you use fetch. Once you grab back the promise you have to then grab the JSON data. Not doing a very good job of using types, but at least helped me while I was writing this of not making some common mistakes. If I see an error, I'm just going to report the error out. And I made this while loop here. And this while loop is if I want to see you basically can only grab 50 items at a time from the YouTube this API right here. So if I do over 50, I want to have a way for it to keep looping through and grabbing more data. And I'm also finding the YouTube API. It's not great to grab data like the sorting doesn't work, right. But it just gives you the most relevant data. So the ones that are most relevant to you when it does its search. So what I want to do there's actually a token that it returns back that you can use as a placeholder to get the next page. So what I do is I grabbed the data from the URL and I essentially use this page token if there is a page token and I looped through it and I added to this total data. And so what this is doing before we get to format videos, it's just looping through this incrementing the times through, and every time it can go through, it just goes to the next page token. If it's there. So that way we can grab all the data that we need and if it only goes through once, that's fine too. So let's take a look at the next functions as format videos. So after we get all the data, so we're grabbing all the data, it did the loop. We grabbed it all. I kind of want to map it into the specific format. That way, it's much easier to use in my file that I'll show you next to actually pass it into the appsinksgraphql mutation. So I want to make sure basically, I want to make sure I have it in this format. I have this ID, this video ID publish that channel ID, title description, thumbnail, default thumbnail, medium high and title. I actually don't need this URL. So essentially, this is just a nice format function that will return in the exact way I want it because this is a big, giant object that gets returned every time you grab the data, and I only want these items from it. Okay. So now, since we have all our helper functions done to grab the API, the GraphQL, and YouTube. Now we can focus on the main page here, which will allow us to do everything we need to do. So this is kind of the entry point of our app. This is when you set up I set up TypeScript in here so I should be able to import everything in and works. And this is kind of how it works, how it looks before we change anything. We're just sending the test. Hello, but we wanted to do a few things. So let's take a look. So first I want to grab this Isomorphic fetch. That's what I installed through the package JSON my API gateway handler. That's just a type for this handler that you can set to give us the right type, right return value for the handler. That is, we're going to grab our get credentials from our API. We are going to get a bunch of stuff from our graphical. We want to be able to list the data. We want to be able to get the apps and clients, and we want to be able to create videos. And then we also want to be able to grab our formatted list of videos from our YouTube API. The first thing you do, we need to create a client because remember, we have to pass that client to all these, like helper functions we created. So we create the client, and then we want to actually get the video. So this format videos will get us the list of videos and also format them in the perfect way. Also, we're kind of not putting this in a try catch block. If we wanted to, we could do that that way. If any of these APIs failed, we would get some sort of error and I can return it back in the body. For now. We'll just leave it. As is we're also going to do a query. So we want to see what sort of data is already inside the GraphQL database. Then I always do console logs. I just want to make sure that, hey, I actually got data back, and then this is where the logic will come together. So I'm just doing a loop because we know there's videos is formatted in an array of objects. We're going to look through it. First, we're going to take this query and we're going to see if the video was already in the query because we don't want to insert a video that's already there. So we're going to check the video ID if it already matches any of the videos that we already have that we got from the YouTube API. So basically, if it exists, then we just skip this double bang right here just takes this string. And if it's null, then it will skip this. If it's true, then it will run. This exists. And so we don't want to accidentally create duplicate videos. So then if that's fine, we then send and I only called it T. But basically you call it create video wherever you want, and it sends the video to the create videos, which is in our GraphQL, which will automatically create the mutation. And then we can then console log it out to see if everything works fine and that's it. That's essentially everything we're doing here in this Lambda function. It's a lot. It's a little bit complicated if I had to do it again. One thing I would do is instead of using the Cognito API with the identity pools you can actually use, I am sort of authentication instead to your GraphQL. That might have made things a little bit easier, but I think this works fine. So now we should be able to go ahead and test this. All right. So let's see if we can test our function. Now, since we're using a function and we have our GraphQL back end, we can actually mock both of them. So to do that in the console, we just do type, mock amplify mock, and then API. And what this will do is it will spin up a mock API with kind of a GraphQL Explorer that we can test out. So this will just take a moment. Cool. So I created this mock endpoint right here. So if I click on it, it'll go ahead and just open inside my window here. Here it is. And it's just like a GraphQL Explorer that you've seen in the past. So let's say I want to do a query. I guess we can type in a query here, and I'll do list videos and items. Now I can do the ID video ID. And if I play there, you can see I have nothing in there, by the way, just for this, I'm going to use API key, because if you remember, I set it up so you can list items for free. Basically, you can list items. The API key. You don't need to be authenticated. And so if I hit play again, you can see I don't have anything. But if I want to test out everything, I can actually create a new window here or I'll look at my other one and I'll just type in amplify mock function, and then I need to put a time out because it does take longer than 10 seconds sometimes. So this will make sure that it doesn't time out. And if I hit enter here it'll ask me a question about what event I want to use to run against the mock function, and then it'll run. And if it works correctly, it'll hit this API. And this actually is a mocked API. It's using a fake DynamoDB database that's on the local host on the computer. So we're not actually touching the endpoint on the actual AWS server. So I've had yes, here. It's just going to. And by the way, this is just the event JSON file that just sends over some dummy data. So it's ensuring the latest function changes are built. Remember, we had in our package JSON on the root this amplified teamcase function. So it's essentially creating all the TypeScript files going to create all those JS files. It's going to convert the TypeScript to JavaScript, and if everything works correctly, it should try to run it. And one thing when you notice one thing to realize when you're running mock functions, some functions will work correctly and you can access the servers. Some won't work correctly. So I would not rely on the mock functionality for everything. I would occasionally push it up to the actual AWS system and then test it through there. You can see it looks like it finished on me. It grabbed a bunch of data, gave my results of Hello, and now if I try to do this again, cool. Now I see I got two videos that it actually pulled. So if I want to grab the titles of those videos, I know this is kind of small, but you can see right here. I cleaned the world serious beach. Awesome. So we definitely know it's working. Now if you want to test out the mutation, remember, let's see here if we looked at our schema JSON. Well, actually, it's in our schema GraphQL. This one we said you can only do the mutation part, like actually creating and deleting. If you're in the admin group and you have to be authenticated with the Cognito user pool, it does have a way you can kind of mock out the Cognito user pool and add additional fields. I have not been able to get this working just using the mock data here because it really is just kind of faking the information there. So I have not been able to test this or to get it working. So really, if I wanted to delete the data in here and keep testing and tracking, if you're following along inside the server, there is a function file, an actual mock data DynamoDB. This fake us fake one. You can use SQL Lite and actually open this file up and delete the data that way. So that's the way I recommend it just for this test right here. If you're listening and watching right now and you figure out a way to get this working because I try to change this to groups and then try this group and try it and get working. Let me know in the comments. That'd be awesome. So in the meantime, though, if we go back to our app here, I'm going to stop this GraphQL operation. By the way, I'd highly recommend it when you're testing to start the API first and then start up the Lambda because I've had problems where first it wasn't finding the server. So it just sat there for five minutes until it timed out. So make sure that you start it. And there's also configurations you can do to tell it not to use this and actually go directly to your AWS system. When you're testing your Lambda functions, there's like a env file. I won't get into that, but it is possible. It's in the documentation. All right. So since I think I have everything working, I'm going to run Amplify status and this will just tell me the changes I made and if I need to update them or push them and I haven't you can see right here the function I created. I still need to push it. So that should be pretty easy. It also gives me my fake data here. So I'm going to amplify push. I'm going to put Tacwise because otherwise it asks me, are you sure? I'm sure. So this will go ahead and push it and we'll just give it a moment. Okay. So it updated the cloud so we should be able to now test in the cloud. Remember, you need to type in Amplify console and it'll ask you if you want Admin UI or if you want the normal console. I always chose the normal console. Adminui is something different. Maybe if you guys are really interested and leave a comment below and I'll show all the cool stuff you can do with Admin UI. Choose Amplify console. It'll open up for you. And remember right here you have the categories. You can just kind of jump around and just go and take a look at each one. So let's say I want to do well, we just pushed up everything. Let's look at the functions. Click functions. Now you can do view and Lambda. And now this view in Lambda here will show the Lambda function and we can look at the configuration here's all our values. Well, here is the values, the endpoints, everything that we did here. And remember here. These are the ones that are in the secret manager. These values are basically to the process ENT and then the secret manager gives you the real values of all these. We also have asynchronous invocation remember how we did it. So now it runs every 6 hours and every tries twice. If we go to test, we can actually test to see if it works. But first, remember how I showed you how the mock API work? Well, you can look inside AppSync and click on that link there, and AppSync will have a very similar interface if you go to Queries. So here it is. I can even log in. This actually works well. So I can log in with user pools. In this case, I'm just going to pick this one. Well, in fact, maybe instead of logging in with user pool, I'll log in with API key and I already added in this query here at the bottom of it play. Okay, so there's already two items in here. So maybe as soon as I uploaded the Lambda, it may have already ran. Let's take a look here or it could have been when I was playing around with it earlier. I already sent two up, but let's test this up. Let's test this and see if it works. This is the Lambda I'm invocating it to actually run. So it said it worked and I can click on logs here, and this will open the logs for it through Cloud Watch, which I can. Then, by the way, if you're creating Landis, you'll be doing this all the time looking at the logs doing console logs, you can say cool. Here's the query. I see the data, I see all the information, so it looks like it worked. And if I come back over here to my app sync and hit play here. Okay. So it added two more. So now I have four in here and you can see they're all unique. They're not being duplicated. I can do title. Cool, and I can see all the different titles. So I have four videos in my player here. And hypothetically what this would do. Since I have the configuration to run every 6 hours, it would grab more videos. It would check to see if there's any duplicates and keep adding to this list. So every 6 hours I have more and more to list. I think at this point what we should do, since we know the Lambda is working, we're not getting any errors at this point. It's probably let's go back to the front end to see if we can retrieve the information and display it to the user. And yeah, let's see if that works. All right. So we left off our appview file with just this Authenticator, and then we had this dummy card. So I'll show you how we can access the API so we can start listening data and connect to our app sync from the front end. So first I want to make sure I have a few new operations and a few new imports in. I have this amplified we had before, but now I'm adding an API. This is how I'm going to access GraphQL and have this GraphQL operation, and I want to use a rest from view. So I'm a reactive variable. I'm going to use this list video. So remember that GraphQL already automatically created this GraphQL, and I went ahead and renamed Queriesto Queries TS so it can be imported in. By the way, if you ever have a problem with that, I think you can go into your TS config and make it so you can import in JSON JavaScript files. But for now I just went in and changed it. And what I'm going to do is I'm going to create a new function called my list videos, and then I'm going to run it. And then I'm going to store everything in those videos. Basically this reactive videos variable. And first I want to do is, well, the last couple of things we're going to do is set this video file. But here's the GraphQL. So I'm going to wait it it's going to use API GraphQL. I'm going to pass in a query called List videos. I'm going to do the Auth mode API key because as we've talked about before, we can list videos through the API key, we can't do any mutations or changes to it. And I'm going to send a variable through and just put limited to 20. And now I'm going to work on the template. I'm using this flex wrap here. So with tailwind CSS, I'm going to do a V four. I'm going to take this video. Remember, see right here. Once again, I didn't use many types here, but I'm grabbing this big nested video items. That should be a list of the items. I'm going to iterate them over and I'm going to create my card. I'm going to pass in the title description, thumbnail, date, time, channel title, video ID and channel ID. Cool. So if we did this correctly, it should work. So I'm going to open up the website again. I went ahead and closed it and it will load it all up. So it should be accessing the GraphQL API. Cool. There it is. So I have all the different cards. I only have four in the database you saw. And here they all are. And by the way, if I ever needed to, if I didn't want to try to create a mutation through here, I can go directly to the DynamoDB database and just delete the records as a quick way of testing. So that's it. There's a lot more things I think you could do with this. I know I commented out this login system, but wouldn't it be cool if logged in? You could have users log in and then add in their own videos that they wanted. Or maybe you could add in a button to click here, and it just randomly opens up one of these videos. And then, of course, you can check to make sure the links work here. So there's a lot of really cool things. Now, this was quite complicated, but I think this is a neat way of doing this, because now we've learned a little bit about the managed GraphQL system through Apps sync, we're able to connect to their APIs. We're able to create a Lambda function and use Cognito, and if you ever need to, you can just also kind of explore the AWS services and see how it all works too throughout it. So let me know if that's helpful. Let me know if you learned anything. Leave a comment below. Also, if you guys are interested in getting taught some of these things, I also occasionally help mentor people, but the links all in the description below. Thanks thanks.