Building a Serverless To Do App with Vue and AWS

[Music] hello hello making sure the microphone works it does what's up infinity dev how you doing mr papa uh how is everybody tonight um yeah uh thanks for joining me my name is brian morrison i'm a software developer based out of chicago illinois and uh tonight i've i actually i guess i work primarily with um vue and aws is kind of like my big thing um but tonight um i guess we're going to be doing exactly that so what i'll be doing is actually building a serverless to-do app entirely in aws view is a front-end framework built with javascript aws is my preferred cloud platform got two certifications in it um don't use during the day but use it at night because i like working with it so that's uh what we're basically gonna be doing today um we're going to start by generating a small to-do or a small view app and adding some code in it to make it kind of like what the final result's going to be so we can add to-do's delete to do's show them listed out uh in there and then we're going to slowly start building out all the infrastructure manually and up in aws to save our our tasks up in aws using the different services they offer we're going completely serverless so we're not going to be managing any linux or windows servers at all it's all going to be native up in the cloud and um yeah yeah let's uh let's hop into and get started actually i have something i got to do here real quick but luckily i have everything already set up to fire away i gotta send out those notifications you know like when i'm going live and everyone everyone needs to know when i'm going live i've gotta gotta toss it out into different channels my keyboard's kind of flaking out tonight so i might have to grab a cord on that too i don't know okay all right all right all right all right all right come on what's going on here was that now all right cool so what is up charles um okay so what i have so far is just a an open folder there's nothing inside the folder i got vs code up here uh right so we can start working on this get this little guy out of the way too so we don't see that all night um yeah so i'm going to start i'm going to get kick in and get started by just creating our app so i'm going to open a terminal inside of the uh inside of vs code here and let's go ahead and uh create the view app view create uh to-do app we'll just call it um if you did join me last week well i guess first off this is gonna take a little while uh before it goes we'll just choose the defaults here um if you were following along last week we built something like a to-do app or it was going to be a to do app we put that up in aws using a combination of s3 cloudfront and as well we also used github actions to get everything up there this was actually supposed to be a part two to that but i decided to like completely start from scratch because um i realized like when we were doing this last week and we were talking about it was some good stuff i explained a lot of good concepts and that all those videos might go out i'm not sure i might just scrap that material and and do a part two of this next week that kind of covers some of that same stuff along with uh adding authentication and we're also going to add um image uploads that's the another part that's going to be coming next week um but anyway so all right we can see our app is completely um is done being uh created so you can see i have a folder up here that says to do app is the name of my app as well as a bunch of stuff inside of here right um so inside of source i guess i can kind of explain a little bit before we jump into it what the different pieces of view are so like i said before vue is a front-end framework written in javascript um it's primarily javascript but really the the reason why i like this over react and angular is angular type script i'm not a huge fan of typescript um i should be considering i work with c sharp during the day and i like typed languages but i feel like i just don't like typescript i can't i can't get behind it as much as i try it so um i like that this uses native javascript so that's like kind of my big win over angular but react i'm not a fan of the syntax i don't like how everything is just kind of like cobbled together inside of jsx files i like view because everything is nicely compartmentalized in here you have your html template above so like these div tags this is what's going to define the html that's being shown on the screen i get rid of these notifications you have the script section which this is where your javascript is going to go inside of here and this is what kind of controls a lot of the logic part of the app and then you have your style section down here where you can quickly add your css right in the same file and you can choose between different types of css so there's like sas there's scss there's less there's a lot of different plugins that are available for view so you can choose your your style of writing css however you want but one of the other cool things about this is you can also add a scoped in front of this which we're not really going to get too far into this but basically inside of each one of your view files if you if you flag it with that scoped uh flag there um what it'll do is any css inside of this file won't affect any other part of your application which is really nice if you're like just trying to add some classes inside of your your thing and you don't want to get super specific with them it can it can really make building this thing a lot easier to understand at least in my opinion um okay so let's fire this guy up and just take a look at it i'll show you what the default view app looks like so we're going to do npm we're actually going to cd into our folder to do and we're going to issue the npm run serve command which is going to fire up a server on our computer and display our code allow us to pull it up in the browser okay see we're running on localhost 8080. so if i go into firefox here see i still have some stuff up from last week and i go to localhost 8080 this is welcome to your vue.js app so we have our app our initial part of our app built now let's get into writing some of the code for this okay so i'm gonna go i lost my spot oh my goodness i completely didn't even add the code in here that i wanted to hold on one second i gotta find my notes i hope i actually saved what i was supposed to be doing here because this would make this a little more a little harder if i got to kind of try and come up with stuff on the fly not that i can't do it i've done i've handled worse while being on stream it's just i sunk a lot of time and effort into making sure this thing wouldn't be an issue so just bear with me one sec this should only take a moment uh here we go okay so i guess i'll be referencing this guy here so all right so what we're gonna do is we're actually going to get rid of um these two pieces here uh we'll delete that so we just have an open div and a closed div and the id of app um by default view will kind of build everything off of a div tag with an id of apps so this has to stay in here unless you want to go and start modifying some of the underworkings of view ins inside of the main.js file which we're not going to today um but where the first thing we're going to do is we're going to add a a line in here so or an input so we can type a task name we're gonna add a button so we can actually save uh that task into into uh our i guess well now it's gonna be the the data property of our javascript but in the future it's gonna be like when we're done with this entire project by the end of the night it's going to be saved up in aws using the various services we're going to build there so i'm actually going to just put an h1 tag here we're going to call this view to do app and then let's add a div and we're going to add a class here so we can break this stuff up a little bit and let's see here let's name this class so i got add task wrapper i'm typing in the wrong form you'll see a little bit more what this is going to look like once we're done so we'll say add task wrapper open that and now we're going to add we're going to add a button we're going to input and we're going to add a button so let's input we're going to be a type of text and it's going to be we're going to use v model here v model is specific to view this is basically tells view um inside of the script i wanna bind this specific input to a field inside of script that we can access and we don't have to write any additional javascript for that to happen which is pretty cool um so we're gonna name this new task input because that's what we're going to name inside the data and then i'm also going to add a an event here so we're going to put an at sign there which is the shorthand for whenever an event happens keydown.enter so whenever anybody presses enter inside of this field we're going to say add task and a lot of this is going to become a little more clear once we actually get into the scripting portion of this a new task is going to be like i said it's going to be just a data property it's a string variable we're going to us bind this to and then add task is going to be a method that we're going to use to add a task into the list okay so let's add our button so we'll say button and at click same thing the event is click we're also going to say add tasks so this will give us two ways to add a task it's either gonna be you can click the button or you can just hit enter and then let's just say add task like so all right so let's uh save this and see how we're looking inside of our browser oh yeah it's i got eslint running i gotta i gotta get rid of these hello world extra hello world pieces since we're not using them here um but that doesn't really affect the functionality of our app so this is all we have so far uh just a simple input and a simple button uh now let's add another div tag here and we're going to name this div class equals task so that's going to be how we style this just to make it look a little bit nicer we're going to use the v4 directive which is how you would loop over elements inside of uh the html template we have here so we're going to say for each task in tasks tasks is actually going to be inside of our one of our data properties as well this is going to be an array that's going to hold a list of our tasks and then we also need to define a unique identifier for this which vue just uses to kind of track internally and keep performance all working properly i don't have a very specific explanation on exactly how the key works but it is required so we're gonna say our key is gonna be task.id so our task is gonna be uh two it's gonna be an object with two fields one's gonna be an id which is just gonna be a randomly generated uh number and then the we're also gonna use name for the actual name of the task all right so let's close off that div tag and then inside here is where we're going to add what this guy is going to look like so if i add a span here and close that nope not sand i will say span close that and then inside of this first span uh double curly bracket is how you would access uh specific data properties of uh task in this case because this is this is inside of a loop so uh task.name is the field we're going to be pulling off and then we're also going to add a button to the right of this uh we actually did i have a span no class let's see i got another span here and we're going to set a class of delete is going to be a delete button and then we'll add a button inside here so button at click equals and then we're going to name this method remove task and then we're actually going to pass in the task.id so this is going to pass in the unique identifier of the the task into our function so we can reference it and pull it off of the array and then we're just going to put an x inside of there because um i don't have any kind of icon library set up here to make this thing look pretty but the next kind of gives you an idea what's supposed to be so let's say this again we're not going to notice anything different on on here because we haven't added any tasks so now we need to start adding some of the javascript here that's going to let us add these tasks so i'm going to create what's called the data function here this is where you can define different data elements or i guess data fields that you want to bind to inside of the template so we need to return an object so we're going to return open a curly bracket and then we're going to have two things inside here we're going to say new task input and we'll set that to an empty string and then we're going to say tasks and set that to an array and what that more or less corresponds to is new task input is going to um these two are going to be bound together so whenever i type anything inside of our input field inside of here it's automatically going to update um this guy here so we can reference it within our methods okay so and then we need to add some methods in here so to do that uh inside of our our default export we're going to add a methods uh key here and open up a new object and here's where we can define all of our uh javascript methods and how we want to uh execute on the code depending on what we want to do so we have two uh we're gonna say uh let's see add task is the first one we're just gonna create uh stubs of these two uh functions here and then remove task is gonna be the other one and then these also correspond to add task is going to correspond to add task here and add task here and then remove task is going to correspond to this guy here and i realize we need to pass in the task id so we got to set up a parameter for that a task id okay so and then all we really are going to do is like when someone adds a task onto here we're going to create that create the object inside of here and then push it up to the tasks array that we have defined here and then because we have our loop defined in the template between lines 8 and 10 this is going to render it out onto the screen so let's see what do we got to do here then so add tasks we'll say let new task equals we're going to open a curly bracket we're going to set an id where i set this to zero for now uh we're actually going to add a quick function in here that's going to give us a random number and then we'll say name is going to be equal to this which is important in view anytime you reference any kind of these any of these data properties from within the methods you have to reference them with this in front of it so we'll say this dot new task input task input is that and then we'll also say this.tasks same reason dot push and then we're going to pass in our new task here like that so let's save this and let's test out adding one task into our our list here uh we've got task id is defined but never used actually we're gonna come i guess we're gonna have to comment that out so eslint stops complaining about us uh heck sam thanks for joining tonight i appreciate it if i said your name wrong please feel free to correct me um okay so here's our review to do that let's go ahead and try and add a task let's say test task click enter and now you can see underneath here we have test task was added um i can throw some other stuff in here too and you can see we're adding more tasks in here you know it doesn't really matter um but this is working okay and i don't know if i have the view let me see if i have the view uh dev tools installed on this machine it doesn't look like i do okay we'll we'll demonstrate that in another stream so i don't want to take the time and do that right now okay so we have our ad task mostly working but we need to randomize this id because vue doesn't like it if you have multiple elements usually it throws some console.log errors yeah see here it says duplicate keys found that's because we're just setting that to zero so let's head back into our code and let's add some let's just add some code in here to create a random number for us okay so let's say let task id equals math.floor and then we'll open bracket math.random times i'm reading this off my notes because i don't know i don't remember this off the top of my head but this basically just creates a random number uh so you want nine and three four five six seven eight nine and then we'll add one three four five six seven eight nine like that so this will give us a random number between basically this 100 million and 999 million so on and so forth and then we can assign this in our task id okay so let's save that let's head back into our app let's just add a couple tasks in here make sure it's still working open this guy up uh these are probably from earlier let's test this again one more time just to make sure that we're not getting that same error uh which we're not so that means that that's been done okay hey courtney how you doing tonight appreciate you hopping on okay so again whenever we are whenever we execute this method of add task it's going to create the object here and then push it up into this array which is going to be rendered out using uh lines eight through nine this v4 loop that we've defined here um the last thing we're probably going to want to do whenever we add a task is to kind of clear that out so let's just reset our new task input field so this dot new task input equals just an empty string so that's going to be reset there okay so that one's done now let's go ahead and update remove task and all this is really going to do is it's going to when we pass in the task id we're going to filter that task out from the table and then update it so this way and it's that's pretty much it all we're going to do is really filter it out from the array but once view recognizes that that data has changed it's going to refresh the page automatically for us and then it'll it'll basically display whatever's in that array then so let's uncomment this now that we aren't going to run into any issues with this and all we really need to do we'll say this.tasks again because anytime you reference anything with inside of these data properties here you have to use this i will say this.tasks equals this.task because we're going to be referencing the cell same thing and we're going to filter and i'll pass in t t is going to be my shorthand parameter for tasks t equal to t dot id not equal task id so what this is doing is this is going to filter out any tasks or it's going to filter down our list of tasks to any tasks that do not match the id that was passed in here and that again is going to be bound into uh the button that comes to the right of that specific task so we can remove it from the array and now that that's done actually let me save this here oh let's test that functionality out so we'll add some tasks in here okay i realized i just did exactly the same combination let's pick a different one right so now if i click on this guy and actually i think we can see what the the method looks like on the click uh data button no it doesn't actually show it there okay i probably should have installed the view tools before this but that's fine so now if i click this you can see it it gets removed from the list right so now we're back to nothing inside of our array and as soon as i click it i didn't have to write any code to re-render the page it just kind of does it which is really cool and then last thing i'm going to do is i'm going to add some style in here i'm not going to type all this out because it's just css and i have all my classes should be set up properly so let's paste all this stuff in here i'm gonna get rid of that scoped uh tag that we talked about earlier but all this is really gonna do is it's gonna kind of spruce it up and make a little bit make it look a little bit nicer so i'll save that and now you can see if i type in a task here hit add task it just kind of like keeps everything a little a little nicer cleaner looking kind of a thing okay so now that that's done this is kind of this is really what the final app is going to look like when we're finished with it at least tonight um but now comes the fun part which is wiring all this stuff up in aws so yeah again we're going to start by creating a dynamodb table dynamodb is aws's kind of serverless database storage engine used for it's a nosql thing it's used for storing documents um so yeah let's go ahead and hop into that let me open aws here and let's go ahead and drop down services and i'm going to search for dynamo uh yeah it's gonna want me to sign it again uh one second here whoops bear with me for one second just while i get my axis keys i guess i use multi-factor authentication on pretty much everything and while it's probably not a concern that i'm bringing up authy um it uh i'd rather not have to worry about it so that's why i turned this stuff off all right so let's copy that guy in there paste that and we're good to go okey dokey so we are at the home page for dynamodb this is the view you're going to see if you don't have any tables set up already which this is a completely fresh uh tenant i guess i this is the tenant that i use in aws that i use when i'm creating content so usually i'll go through a build stuff and i just delete it right away when i'm finished doing what i'm supposed to be doing uh so let's create a table uh i can get rid of that now okay all right so let's um let's go ahead and name this table view to do it and let's create the primary key of id because that's what we're actually going to reference the same id that we're using here with that random number here we're going to set that to a number just going to be the data type everything else here can pretty much stay the same we don't need a sort key we don't need to change any of the default settings so once we add that in let's just go ahead and hit create and i'm going to grab some coffee all right so that table is being created we need to give it a second it shouldn't take terribly a terribly long time okay there we go um this is really all we need to do here uh as you can see items is where we're gonna focus a lot of our stuff into because we can actually search we can actually look at the raw data inside of the database um which is pretty nice this is why i like this there's a lot of other functionality of dynamo that we're not even going to touch into we're really just using it to store data and as like a database kind of a thing because that's what it's for so now the next thing we need to do is we're going to head over to aws lambda and we're going to create some lambda functions lambda is aws's serverless compute platform um it is for writing small bits and functions of code that do cert do very very specific things um so what we're going to do is we're going to create a couple of functions that enable us to save list and remove data from dynamodb and then that's at the end of all this is going to be hooked up to api gateway which is going to allow us to access these different lambda functions through a through an api endpoint which is ultimately what our view app is going to use um okay so let's create a function we're gonna author from scratch we're gonna name our function add to do function i usually i usually append function at the end of everything i don't know why it's just kind of a habit i've gotten into when when building things in lambda uh sometimes i'll shorthand for fn but you know that's that's not a that's neither here nor there uh so now the other thing we have to change inside here we're going to use node.js um we have to change the execution role uh so instead of creating one role with basic lambda permissions which doesn't really grant us a whole lot we're going to create a new role from aws policy templates but we're not going to to actually add a policy to it and the reason we're doing this and i'll explain how the role plays in a little bit is we're going to create one role that's shared across all of our lambda functions so i'm going to name this view to do app role like that we'll leave policy templates empty and we're going to click create function oh yes i forgot again you remember how i said earlier that i use these tenants to i use this tenant to create stuff and play with it and delete it while i was testing ahead of the stream i already had view to do app role so i'm going to delete that let's head back into lambda and just repeat all that stuff we just did so under function name we're going to say view i'm sorry no add to do function and then under change default execution role we're going to say create a role view to do app role and then go ahead and create function now again i'm not going to explain what this really how this really works now we're going to have to go back into im which stands for identity and access management we're going to have to configure the role so i'll get a little more into details there so here we have our function that's been created up in aws uh if you scroll down a little bit while you're in this you can just keep scrolling there's a lot of different uh options and things that you have available for you using here uh the one the only thing inside of this view we're really going to focus on there's actually two things but for now is um the function code section which is actually a browser-based uh interface or ide integrated development environment um it's a browser-based ide called cloud9 which lets you write code directly inside your browser you can write code inside of like something like ps code zip it up and upload it up in aws and it'll extract everything and make you know make it all work but for our example we're just going to write all the code uh right in line here you can see under index.js is always the default file that lambda functions are going to look to when they're created at first and there is a handler function that's being exported from this file and that's what lambda is going to use to determine what it needs to execute now you can add other files link them in here do whatever you want but this is very important because this is what's going to handle uh the event that comes in lambda is is it's an event event-based execution platform i guess you can say so it doesn't these codes run when something happens and something that happens in our case is going to be that http call from our view app that says hey i want to run this function to create a to-do app and i'm going to pass in this data and that data is going to come in from the event there so i'm actually going to get rid of all this stuff because we're not going to use any of it so let's get rid of that and let's create a new line here and before i even get into writing into the body of this function uh we're going to add a couple lines here and i'm going to import the aws sdk const aws equals require aws sdk if i can spell sdk spell require right my headphones turned off hold on that was weird my headphones randomly turned off i hope that's not a sign that they're going because i really like these headphones uh okay so the one interesting thing about lambda or i guess aws as a whole when you're work when you're developing for them is if you're ever trying to write code against aws and you want to do it locally you have to install uh the aws sdk into your local packages like you would any other npm um can't spell this yeah i can't trust this can't spell charles says you can't spell sdk no i can't i don't know how sdk is spelled i also don't know how aws is spelled depending on the day um so back to this normally you'd have to install this as a local function or a local package but when you're up in aws the or working with lambda lambda executes functions inside of um i'm gonna call it containers or i don't really know that it's docker running underneath in fact i'm almost i'm almost sure it's not docker it's kind of their own homegrown container execution um function i don't know um but anyway however you want to think of it it's running inside of a container and that container is already pre-loaded with all the uh aws sdks depending on the language you're using so in our case javascript it already has the javascript sdk installed so we actually don't need to install it inside of our our function or our app that we're building uh okay so now i need to create a client connection up into dynamodb so we're going to say const client equals new aws.dynamodb dot is a document client document client like that so and this is the object that we're going to use to basically access dynamodb so now inside of here we need to create a response that we're going to send back to the caller so we'll say let response and we're just going to set this to an empty object and we're going to set this more throughout this function response equals empty object okay and now i'm gonna add a little snippet of code here uh just to kind of help us along so this is basically parsing out the the http body whenever you are using the test tools inside of lambda which we're going to see uh you can write raw json and send it to it however whenever api gateway is making calls on a lambda the the actual body of it comes in as a raw string that you have to parse out so all this code here is really doing is kind of checking for both cases if it's if it's json it just kind of leaves it if the type of body is a string it'll convert it to json so we can work with it a little bit easier now we're going to create some parameters and these parameters are going to be what's sent into our call into dynamodb to create our to do so the table name is the first thing we need and that is view to do app and then we also need to send in the item which is the basically the object that we're working with and we're just going to pass in the body because that's going to be structured the way that we need it to be if you're working in a production environment i would highly advise you to do some kind of like checking of the data that's coming through so this way you know it's what it's supposed to be however for the case of this um of tonight's you know sample that we're building then this this is sufficient enough well now that we're actually now we're actually gonna try and save the data so open a try catch block and we're inside of the try we're gonna await a client.put which is the call you would use to send data into dynamodb we're gonna pass in our params there and now um by default this this put uh operation is defined as a um like an old school javascript callback function and i i'm not partial to doing that i like using the async await method so i'm going to append on.promise which basically tells the aws sdk that in i want to return a promise uh from this operation and i don't want to pass on a callback function and why are you complaining uh missing catch okay we're going to put that next so that's fine um and then as long as everything worked fine we can kind of assume that the uh the data was saved properly uh we're gonna set our response to an another again an object and we're gonna set the status code which is our http status code the 201 and i just set 201 because i know 201 maps to created that's kind of what 201 means now we'll catch this uh error and then if the if there is an error same thing we're gonna uh change the response object plus set that to equals and we're gonna create a status code of 500 because that means something went wrong and then i'm also going to add in a body here and we're going to say we're just going to pass in the error which is going to send back our error to the caller uh why are you complaining uh response is not defined oh yeah again spelling and then once all that is done the last thing you have to do is return the response response there we go and this is basically our lambda function that's going to be able to take the data and insert it into dynamodb so just to recap we're creating an empty response i've got some shim code here which is going to check to see if the data that's being passed through is a string or a json object and convert it to json if it's a string we have some parameters we're going to pass into the call that we use to save the data these are passed in here and depending on whether that succeeds or fails we're going to return different types of response back to the caller and this is this guy's done so let's bring this in here uh this so cloud9 does save automatically or you can control s to save it now you can see how it just turned green real quick that basically means it was saving uh and then when you're done anytime you're done using the built-in editor you have to click this deploy button which is going to take your code and it's so you can actually do this and save it it won't change anything the way your your code operates but you have to click deploy in order for it to take whatever code you just wrote and push it out okay so now uh before we can actually test this we're going to get into that whole roll thing we were talking about earlier even though aws is a collection of all these services kind of under under one umbrella every single thing nothing inside of aws can talk to each other unless you tell it it can talk to talk to something else so we created our dynamodb table and we created our function we didn't actually tell the function it's allowed or we didn't tell dynamodb that it's allowed the function is allowed to talk to it so if i try to use this now it's going to fail we have to create a role so and then again i guess the other thing i'll talk about is if you're working with iws from a developer standpoint and you're doing something from the outside world you would create a like a service account inside of users and then use the public and private keys in order to gain access to different services and then those would have the policies attached to them one of the cool things about aws services if they're interacting with each other which in case lambda and dynamodb are you can pass them in a role which means you don't have to really worry about security keys or anything as long as you say like my lambda function is going to assume the role of you to do april and if i go in here and i add a policy saying you can talk to dynamodb specifically this dynamodb table um it'll work without having to worry about any kind of access keys or passwords or anything like that at that that's how everything internally works so we're going to create an inline policy i'm going to choose a service of dynamodb and i'm going to choose actions i'm just going to let it have all actions again as a disclaimer this is probably not the best security practice you would want to go through granularly and select each one of these different operations you know you're going to perform and only give your role access to what it needs to have access to um but again beyond the scope of this demonstration so now that we've set we want all actions basically all these different uh messages we're seeing here is aws saying we need a little more information on what you're trying to do so i'm going to go ahead and click add arn arn inside of aws is known as an amazon resource name and everything inside of aws has an arn it's kind of a unique identifier not only of a specific service but some kind of specific configuration inside of that service so like our dynamodb table actually has an arn all of its own um so okay now let's set this guy up and this thing comes with a an arm builder that we can use which we're going to uh so under region i'm going to select any because i don't care about that table name is going to be view to do at because that's the table we created and backup i don't care we'll leave that to anything and now this is just a process of going through each one of these things and setting all these up like so so we'll pick that guy global table name we'll pass that in there and click add index same thing all region pass or table name in the index name can be anything uh streams i'm breezing through these without explaining what they all do because it's not necessary for this demonstration and there's a good chunk of them i am not totally aware of how they work or what they do so that incentivizes me to come up with some new content for another stream let's go ahead and click add okay so now that all of our error messages are gone everything like this is set up as it should be request conditions we don't need to worry about any of that stuff so we'll go ahead and click review policy we need to give our policy a name so we'll do view to do app policy and i like to add an underscore at the beginning of this so i know this is a custom policy that i created not that i would expect aws to create a policy called view to do app policy but it's it's just a naming convention that i've grown to grow to like um okay so this is it our policy is now created or our policy is now defined now it's created and it's attached underneath our view to do app role you can see now we have the view to do app policy we just created and now i can head back into lambda and i can test my function so let's open to do function uh there are no test events that have already been pre-selected or pre-predefined so we're going to configure one we're not going to use a template but we are going to inside here pass in body because that's the object we expect the event to have if it's coming from api gateway and we'll pass in an id of one two three four just as a test and then a name of a test task and provided let's format that make sure that's good and we're gonna say test add task we have to give our task a name without spaces apparently test add task okay let's go ahead and create this now you can see next to our test button we have test add task and if we click test what it's going to do is it's going to send the content of that event into our lambda function to process and this is a way like if you're if you're modifying the stuff in line you want to test it before you you know before you actually like go and start building everything else click test and it'll tell you right up here whether it succeeds or fails in our case we got to succeed if i scroll down here you can see the response from this function was a status code of 201 that means our task was created and now i can actually see this if i go back into dynamodb open up our table and head over to items here's the data that we just sent it we have an id of one two three four and we have the name of test task so now we know that function's working properly okay i feel like i said a lot in a short amount of time and i spoke very quickly so uh now we're going to head back into lambda let's finish creating our last couple of functions here i'm going to create a function called list to do's functions scroll down and now the only difference here is under uh the change default execution rule we're going to use an existing role and then we're going to select our view to do app role so we don't have to go and modify that or do anything else to it it's been created it's been defined we can just reuse it let's create the function and i'm just going to paste in my demo code here instead of going through the process of explaining what everything does it's a lot of it's the same thing you can see we have a response we have some params we're not actually taking anything from the body so i don't have my shim code in here i'm using client.scan instead of client.put and then i'm inside of the response i'm also tacking on a body and then i'm going to um convert my data items that are retrieved back from dynamodb into a string because that's how uh lambda kind of expects you to return it if you're using api gateway so now if i save this uh actually let's control s to save and deploy it uh we can configure i'm gonna say empty event because that doesn't matter delete all that stuff uh let's create it's gonna let me create it no it needs something so we'll just i guess pass in an empty object right that guy click test and if i scroll this down here you can now see in the body of the response i have my it's an open it's an array with an object inside of it is our task that we just created through our previous test uh with the idea one two three and test tasks now this function's already set up and done ready to go uh let's create our last function uh let's say uh delete task function this is the last thing we want to set up here same thing select the role we defined earlier create the function and got a whole lot more of the same code here so let's scroll down here select all and paste in the delete to do function um again the only difference we're really doing here is instead of using we're passing in a key with the id of body we're taking basically the the body that comes in from api gateway um it's going to have a um a key inside of there of or i'm sorry it's going to have an id with the id the task we're trying to delete and then we're going to pass that in with the params into client.delete and then provided everything works we will delete it uh we're not going to test this one because i don't have that setup and ready to go so let's save that and deploy it and i guess we'll uh we'll real world test this i guess you can say by using api gateway okay so now if i go back to functions you can see i have all three of our functions defined um so now we have to set up api gateway what is that api gateway is amazon's or aws's way of allowing you to to do certain things inside of aws through an api endpoint um it's it's like if you want to create a public api that's the service you want to use and you can wire it up to do a lot of different things the main thing that i really use it for is just lambda functions uh it to you to be used as an http api for crud operations uh create read update delete is what that stands for um but i know there's more capabilities that even i haven't explored yet so to go to api gateway we'll drop down services go to search for api gateway and we'll go there and this is the new interface for api gateway i i actually didn't i've never seen this up until working on it a couple days ago when i was creating this content um but api gateway is uh yeah this is what we're gonna build now hey danny what's up man glad to have you on stream uh okay so we want to create an http api so let's click build on this guy and now uh we want to add some integrations to it and again we're going to integrate our lambda functions in with uh api gateway so click add integration we're going to select lambda we're in the u.s east one region everything i'm doing tonight is in usd1 so we can leave that just as is and you can see if i click on here where the lambda functions it actually shows me my lambda functions that i have available for me to use so i'm going to click on add to do function we're going to do this for every single one of our lambda functions we just created delete to do function and last one is list to do functions and we're going to create an api name here we'll say view to do app api and click next so now it'll display our integrations that we've already set up and now we can configure the different routes that we want our api to take now i'm actually so you can do a couple things so if you can you can pass in any so this way it doesn't matter what um what data you pass in as long as you would use like uh whatever the ap and our url for our api is slash add to do function would map to the add to do function delete delete task i use the wrong name for my function but that's fine um yeah but what i'm instead going to do is i'm going to change all these to to-do's because it's normal for apis to have a pluralized version of a resource in this case a resource being our to do as the path and then i'm going to use the http methods to define what i want to do for each one of these so for add to do function we're going to use post for delete task function we're going to use delete and then for list we're going to use get okay that's all done let's click next uh stages stages are kind of cool like if you were using um if you wanted to define different stages of your api like dev test qa production um you know this is where you would do that now again since we're just doing this as a simple example we're going to leave this as default and we're going to make sure that auto deploy is turned on so any change that we make to our api gateway configuration will automatically be published we don't have to worry about deploying like we do with lambda let's leave that as is click next and this is just a quick review page we'll click create on the bottom i'm gonna grab some coffee real quick again all right so our api is now created and you can see the next screen we get uh we get an api url that we can use to uh invoke our different functions so i'll copy this out and we're actually going to head over to postman now postman's a tool i use to test apis it's a tool that a lot of people use to test apis it's a great tool let's create a new request here and we're just going to paste in the url that we have here and remember when we defined the routes in here we set to do's for everything so we're going to set that forward slash to do's and we'll click send and you can see in the response let's switch this around i like side by side view a little better there we go you can see inside of the response body i have my data and when we wire this the next phase after we're done testing all this and making sure it works we have a little bit more configuration is we're going to wire up all of our fetch requests inside of the view app to show this thing you know fully uh integrated into everything that we just set up in aws uh so that data looks to be working properly let's go ahead and try and add it to do i'm gonna paste that in again actually that's i'm gonna have to paste this in a couple times so we'll just copy with the to-do's because i'm lazy we'll change our um our action to post let's expand this out a little bit so i can see all these tabs here under body we're going to set that to raw we're going to change this to json and let's pop open a new object here uh we're gonna set the id so we can't use one two three four since we use that already in our test so let's do five six seven eight because why not and we'll set the name of the task to test from postman and let's go ahead and click send and you can see up in the right hand corner here i got a 201 created which means our task was created inside of the database if i go back and issue my git request to list them all out here's our new task that we created oh right up here and then obviously if it's there then that means it must be inside of dynamo so we'll head to dynamo open our items and here's our one that we just created and then let's find let's delete that test task okay so let's create a new uh call here change this to delete and under body we're going to do the same thing with changes to raw change that to json and this pass in an id of one two three four go ahead and click send and you can see i got a 200 okay which means it should be deleted if i issue my get request again one two three four is gone so our api is all working now there's actually one more step we need to do inside of api gateways configuration before we can do this and that's to set up cores uh for those who aren't aware cores is this um it's a security feature inside of browsers where before it actually issues a request it'll check with the api and say hey am i allowed to do what i'm going to try and do before i do it and we basically have to tell api gateway that whatever our app is going to try i mean again in a perfect world if you were doing something for production you'd want to set up specific origin points for core so like if you knew that your app is only going to be calling your api from the domain name that you've specified you'd want to set that here however we're just going to go ahead and change this to star for all these guys because um for this demonstration we really don't care where our requests are coming from because by the time this is over i'm going to delete all this so we'll add all this guy and all this stuff in here we can see we have stars underneath everything here and we'll go ahead and click save danny i saw your message i don't i apologize that streamlabs deleted it um uh sorry i don't know i i haven't fully set up the streamlab spot but yeah i appreciate the compliment and all the fire you threw my way um all right so now that that is done um okay so now we can actually integrate this into our to-do app so let's go into uh let's go back into our code and we're actually going to add uh an extra call here so underneath data i'm gonna set created and created is what's called a life cycle hook and view basically view has some default um view has some default functions and and methods that it executes every time certain events happen uh the created one in specific is going to execute any time that an a uh any time that a um a component is created basically whenever view whenever you pull up your view app it's going to pull in all the different components you have to find it's going to create them or render them on the screen so anytime this component is rendered it's going to call the created function so that means inside here actually we got to convert this to an async that means inside here is where we would issue our request to pull all of our uh to do's in so i'm actually going to grab in uh our url here and we're going to say let response equals await fetch and then we'll pass in our url here which is going to call in our to do's and then we're going to say let json equals i guess we could do let's tasks equal list.tasks tasks is equal to await res.json so the the body that comes in is going to look something like this so we know we're getting an array back and we're going to get our tasks inside of each of one of those so this is going whenever this basic this app loads then it's going to pull in the data from 8 from aws and then display it and render it on the screen for us to work with so save that see danny says it's all good we need to get you more people on these streams let me know we could stream oh yeah for sure man let's do it you come up with the topic you pitch it to me we'll do it for sure i hear you work a lot with angular so you could probably teach me a thing or two about angular i i'd totally be down for that um okay so actually you know what before we even move on any further if i open my terminal it's not plenty of responses assigned in value res is not defined where rats bad thing is okay so actually eslint is complaining to me uh wants me to change that to const and uh i did actually res is something i commonly use for a response and i that was done more or less not a habit so i'll save that and then we'll head back into our view app and we can see here's our test from postman actually so this was this is the task that's still defined here uh now we have one of the three functions already uh set up so now we need to modify these other two functions the add task and remove task to basically um when we remove it we're still going to do the same thing we're removing it from our local data but we're also going to tell ap the api to say hey remove this from the database so it doesn't uh get pulled in again uh so it's i'm sorry this we're now we're in add task uh let's see here so instead of we're gonna do task.push we're also going to do uh awaits uh fetch uh and then we'll pass in same thing our url here just knock my mouse all over the place that's nice and then we're also gonna pass in an object here which is where we would define some of the ex i guess extended parameters we'd want um so we're gonna set the method to nothing yeah post and then we're gonna change the headers we're gonna add some headers and we're gonna say content type is application for json this is common if you're sending json data to an api so it knows what to expect out of it and under body we're just going to pass in new tasks like so okay so now let's save that and let's try this out why did i do that right it should oh we actually need to stringify it that's right json.stringify remember how i said api gateway expects things to come into strings this is one of those this is one of those gotchas that will throw you off if you're working with the stuff for the first time as you can see i've been i've been working with lambda for a couple years now and i still i still forget to do it um i actually have a lot of wrappers around my lambda functions which is why i don't work with this stuff all that often directly so i'll go ahead and save that and let's test this out let's see away oh yeah last thing we need to do when we created these functions earlier we need uh we did not uh set these to async functions so we've got to throw the async keyword in front of there and let's test this uh test from view and let's go ahead and click enter to add a task and now we have test from view inside of our list which means i would expect it made it up into aws so as always we're going to go to dynamodb we're going to check it manually [Music] and we have test from view right there and you can see this is our random id that we've generated so every time a task is created it'll generate a random id like that so we don't have to worry about any kind of conflicts you really would probably want to use some kind of library to generate those ids but this works for our demonstration here tonight uh let's see pepcak says collaborations thinking of doing a view panel yeah i'd totally be doing i've watched some eric's i'm not sure i've never heard of gwen faraday but i've uh i've i've seen some of eric's content he does some pretty good stuff um yeah i'm totally down man let's do it all right so we have our ad last thing we need to do is we need to set up our remove task uh so we're going to do a weight fetch same thing we'll pass in actually i'm going to copy all of this and bring this down here uh we don't we're still going to need headers actually because what we're going to do is we're going to pass in the id and we're going to say task id this is going to be the json object that we're passing up into our api to tell it to delete it we need to stringify it just like we did before and we also need to change our method to delete and let's save that now let's head back into our to do app and oh same thing we need to async this function okay our view apps refresh we pull that data let's go ahead and delete our test from postman click that button all righty all right all right that seemed to go away and let's go ahead and refresh our data here and you can see our test from postman is completely done so that is that's the stream in a nutshell we did it all all right let's see what we got here um okay says how much space will this allow is there a limit to the tasks um there's no limit to the tasks per se if you have a lot of tasks your performance your application is going to slow down quite a bit so you want to you need to account for that and it's where you would try and implement something like pagination into your api we're saying like hey i'm going to request you know only 100 tasks at a time and i want to skip these tasks so that would be the approach i'd probably do there as far as data size actually that is a good question i want to say the maximum record size in dynamodb is something like 256k that is a damn good question 400k is the maximum item size inside of dynamodb um and the reason for that um if i remember back when i was studying all this material is dynamodb is automatically globally distributed distributed i think i remember um so whenever you send something up to dynamodb and it writes it for the first time it will it'll create it in different locations throughout aws so this way if if service a has an issue over here for dynamodb service b will pick up the slack if you're storing anything that's more than 400k what you'd really want to do is like kind of render your object and store it inside of s3 and then store the reference to that object inside of dynamodb that obviously comes with some performance implications as well because um you know every time you're calling basically you call dynamodb to get an index of all your records and you have to call individually to s3 to pull that stuff down um so yeah i mean there definitely are performance considerations but for small applications it's once you get and hey look everything i did tonight was very manual very clickety click all the way around and stepped the stuff you know setting everything up um this is not something i was planning on talking about but there is a feature of aws called cloudformation which i use whenever i'm building applications with a library called the serverless framework and what cloudformation does is it lets you basically define all of your infrastructure inside of it's either you could either use yaml or you can use json and when you tell aws saying hey i want to build a stack with this cloud formation definition it'll go and crawl out and just create all the resources you've defined which is pretty cool but the other neat thing that it does is if you ever want to update your stack by adding services or changing the configuration of certain things you just change your your cloud formation template you redeploy it and aws is smart enough to notice and detect the changes and then it'll only change the things that you've requested it to so realistically as much as i love working with aws i don't work too intimately with the ui a lot of the stuff that i build is all is all defined as code so if you've ever heard the term infrastructure's code which pepkec i'm sure you have since you've been in the industry for a while that's kind of what that means is i would take my my template upload it here and let cloudformation kind of handle all the heavy lifting of creating all my different services and stuff uh okay so again uh that is it that's all i have for tonight so i appreciate everyone who joined me tonight um this is pretty cool i you know what this is one of my largest streams so i'm pretty happy right now and i i was very satisfied with the way that every all the material came out when i finished writing it so that leads into next week so i mean knock on wood provided nothing major comes up we're gonna part two this one instead so uh there's a couple things we're going to do we're going to add authentication using aws cognito in fact i can um i'm not on there anyway we're going to add authentication using aws cognito we're also going to add image uploading so that's going to be like pepcak you were asking uh if you want to store a objects alongside ins you know within your app you would store them in s3 so we're going to do i think is we're going to take i'm going to create some lambda functions that are going to allow us to upload images into s3 and then reference them inside of our tasks here so that's going to be pretty cool and then the last thing we're going to do is kind of recap what we did last week where we deploy this thing out to s3 and um uh cloudfront and just distribute it so this way anyone can pretty much get and access it which might be kind of dangerous because that means and i might even just post this in the chat be like hey guys go crazy let's start putting some stuff on stream demonstrate see how this stuff works um so yeah um that is all that's all i got for the night so i appreciate everyone who joined me i'm actually thinking uh in my discord server which if you're welcome to join fullstack.chat we're a small growing group of developers and normal people who just chat about dev primarily but also other stuff we've got a lot of pet pictures a lot of memes and music a lot of cool stuff going on there uh we're a pretty pretty fun uh crew we all but the biggest thing the main reason i started is just for for developers to be in a nice friendly environment where they can get help with whatever it doesn't matter that about the experience you got um but what i think the reason why i go into that is because if you need help with or have questions that's the easiest way to get in contact one thing i also think i'm going to join jump into the voice channel in there so if you're interested in joining me on that just kind of chat with me instead of just listening to me i would i'd love that so uh again i'm done you'll have a good evening bye-bye

Channel: Brian Morrison

Views: 525

Rating: 5 out of 5

Keywords:

Id: wIcvlDeg7AQ

Length: 61min 25sec (3685 seconds)

Published: Thu Dec 10 2020