AWS AppSync Demo

[Music] all right welcome to another episode of cali coders today i was wanting to talk to you about this technology i learned called app sync from aws it's got a number of features but the one that i found really useful was the ability to subscribe to changes that are happening in the cloud so your application on the front end can be more event-driven and react accordingly rather than to have to go query and pull for certain data sources periodically all right so first let's take a look at the original implementation of the dashboard now what you see here is a simulator for an iphone app that i built called pubg matches and on the right is a dashboard web app that i built just for me that i could monitor the usage of that app and the way it works is whenever the app requests new match data it makes an api call and ends up recording a record in a dynamo database table and then the dashboard then reads that data periodically and we'll be able to see that here in the network console um there's one right there and in 10 seconds it'll make another call and the the problem with that is is that uh and there's another call and then if i request more data we won't see that data show up here on the dashboard for up to 10 seconds and so you can see how that's inefficient and also not timely and how something like appsync can really come into play here because it allows you to subscribe to changes on the dat on the back end and you can do that those subscriptions in a customizable fashion so you can only be notified about certain kinds of data the solution i came up with was to incorporate appsync an appsync sits between the lambda function and the database in this case and the dashboard then creates a subscription via a websocket to appsync so that it can be notified of any changes so now whenever the app sends a post request and triggers that lambda function to then trigger appsync to write to the database appsync then sends a notification message to the dashboard saying hey there's been a change you might want to go get new data and then the dashboard goes and hits the api just like it always has all right so in order to incorporate appsync first we need to go to our aws console and find the appsync page of course you'll need an account for this and then we'll go create one using the wizard click start we'll call it pubg matches app sync demo and then we'll come down here to the fields uh we need an id field that's what appsync uses to synchronize the data between the client and the cloud uh in addition to that we'll say date and we want that to be an int this is going to be epoch time in seconds which is the number of seconds since january 1st 1970 and then the other field will be name and it will be a string and both of those fields will be required and then here it shows you the table that it's going to create on the back end and the defaults there are a-okay all right and then we'll call this pubg matches uh app sync demo create and now it's building the appsync instant instance itself as well as the dynamo database on the backend all right it looks like it's completed we'll get into some of these things like schema and settings here in a moment but for now let's go into the code and wire up our code to use appsync instead of writing to the database directly well if you remember from the architectural diagram there is a lambda that sits between the api and the dynamo database this is the code for that lambda and remember it's responsible for either getting records out of the database or writing records to the database so the entry point to this lambda function is this handler method and the first thing we do in this handler method is build a body status code and a header because remember we have to build this response object so that we can pass the response back to the api the api can pass the response back to the calling entity so they can know uh how things went next we'll need to pull out the method and the path out of the event object that was passed in to this lambda function this will let us know whether we need to be getting records or posting a record and then we switch on that route based off whether it was a git or a post the get code is here which we will come back to later but for now we're wanting to write a record to the database so the first thing we do is we pull the json body out of the post event and then from there we extract the name out of that json object and then we create an instance of the date at this current moment which is a time in seconds since 1970 to epoch time and then there used to be code here for writing data to a dynamo database but we're not going to do that anymore because we want appsync to do that for us so that's what we're going to fill in here is the absync code and then lastly we populate the body so we can pass it back to the calling entity all right so the first thing we need to do to get a reference to our appsync object in the cloud is get a reference to this appsync library then we need to create a client from that appsync library and then the this needs to be a new and then the constructor for this takes a couple fields here um it takes a url which is the url to our instance of the appsync that we just created uh we'll fill this in in a moment uh the aws region which in our case is us east one and then the authentication object which is it needs a type which we're using api key and then a api key value which we will get from the console too let's do that right now all right come back here from our appsync area in the console we go to settings and then this is the url to our appsync instance copy that paste it here and then we need the api key to authenticate ourselves which we do here all right now we have our client that is ready to access our appsync instance in the cloud so now down here in the post we're going to get rid of this comment and we're going to ask appsync to write that record for us and in the appsync world that is called a mutation we are updating something we're mutating data so we say client dot mutate and this takes two arguments uh mutation and we'll need to pass a mutation object and then variables for that mutation object all right so now the mutation object is uh the details of like hey what do you want me to mutate and in our case we're going to use a graphql object to tell appsync exactly what it needs to be mutating so let's do that in another file we'll end up doing something like this const mutation object equals i'm just going to write null for now um but this this is where we'll build up our mutation object and we'll we'll do that by referencing this file we're about to create here so we'll create a graphql folder and then uh patience all right and then so the first thing we need to do to create a graphql object is say const gql equals graphql tag and then we need to export something we'll call it create pubg matches demo object equals uh gql and then now we're going to need the graphql syntax and i'm going to get that offline here we have a mutation keyword and then we have a name of our mutation and then some input arguments and then this is kind of like a function that then calls this here create pubg matches absync demo now kind of make a mental note of that as we go to our aws console we go to our schema and this is our mutation schema and you can see here this is the schema for our create mutation and that matches with what we have here uh i'm not going to get too much into the graphql syntax but if you kind of just follow this pattern you should be good to go all right so now remember we're exporting this uh object that we just built here so we're going to go back to our index.js and we are going to um well first we have to get a reference to our mutations js file now we have our mutations come down here and there is a reference to our mutation object that we just our graphql object that we're using as a mutation object next is the variables now if you again go back to our our thing here this is the what we called our input argument that is our variable name and now what is the type so again let's go back to our our schema here so you'll see here there's this pubg matches appsync demo input that is the data type that the mutation expects and that data type is defined right here as you can see it's just a json object that takes an integer date and a name string so we'll just build one of those we'll call it um uh variable i guess and we'll say eight and we already have the date up here so we'll say date and then a name field which again we have the name up there as well i'm gonna switch these up just to keep consistent with up above and there's our argument that we can pass to our mutation that's not how you do it there all right that should do it at this point our lambda is calling mutate on our appsync client and from there appsync takes over and it writes this object to the dynamic database that is corresponding with the appsync instance in the cloud uh however there's a few things that got me and i'm just gonna fill them in right now and i'm gonna explain those at the end of the video need an await right there need to say disable offline through and then we need all right those are the three gotchas took me a lot of time to figure those things out all right now i think we're about ready to uh test this bad boy all right to test this out we will upload it to the cloud and give it a go i will put the command i used to update the lambda i will put that command in the description uh basically it just zips up the node.js application and then puts it in the s3 bucket and then tells the lam to lambda to go reference that s3 bucket for its source code and update it with that so we'll wait for this to finish all right now that that's finished we'll go up to our lambda or our aws console we'll go back to the lambda go to the code or test i should say there is a test method already built for us we can see the task is not defined you done messed up a ron all right let's try it out we've got our app on the left and we've navigated over here to dynamodb in our aws console we've got our demo table which currently has no records in it and so now we're going to request data and then see if we got our record in the database and sure enough there it is looks like our post is working the next thing we'll have to do is work on the client-side dashboard subscribing to these changes and then updating itself accordingly once it gets one of those notifications all right now we'll take a look at the code for the dashboard web app that we have this is a react application and one of the first things you'll see here is in this component did mount which is a react lifecycle method that fires whenever the page is rendered and ready to go basically and the first thing it does is it makes a fetch api call to get the records of all the refreshes that have occurred and then it jasonifies those results and pass those passes those results to a get metrics routine that's down below that basically takes all that data and puts it in the right spot on the page and then after that you see it sets up an interval every 10 000 milliseconds every 10 seconds to do that exact same api call and that whole routine again and this is where that inefficiency happens so now that we're going to be subscribing we no longer need to be pulling this api every 10 seconds so we'll get rid of that and then we'll come up here and just like before we're going to need a reference to our appsync instance in the cloud so we'll need a client and we build that client by getting reference to the appsync library so i'll write that code real quick you've seen this all before all right now that we have our client we can use that client to subscribe to any create events that occur on our appsync instance in the cloud and we can set that up here in the constructor so we'll say client.subscribe and that method takes an object with a query field and then we'll say we'll give it a on create subscription object or query whatever object um which we have to build still and just like the mutate before took a graphql object with that contained graphql syntax for mutating this case we're going to be creating graphql object for subscribing so we'll come up here and we'll create a graphql folder um not in the components we want it in source okay so graphql and then we'll say subscriptions and then in here we'll say import graphql from ql tag and then uh export fonts and we called it create equals graphql all right and this is where we get into the graphql syntax i'll paste this from offline paste that here and this is similar to the mutate syntax we have a keyword subscription and then the name of our subscription and then inside this subscription we invoke this uh oncreate method that is referenced from our schema up in the um in the app sync console you can reference that schema and see that there we've got that and now we will need to import that we'll say import import from okay now we are subscribing to any create events that occur on our appsync instance in the cloud so now the next thing we want to do is uh tell the code what to do once we receive a notification that one of these events has occurred so the first thing we'll do here is we'll create a variable here called um uh create observable we have observed that a creation has occurred and then say create observable dot subscribe we call subscribe again i know it's kind of weird and then we say next then we give it a method that has input as an input argument and the first thing we'll do is we'll just log that triggered from subscription and then the next thing to do is we want to make another api call just like we did here in the uh component did mount method uh yeah all right that's it we should be good to go we'll give it a test and at this point we should only be making api calls to get new data when new data has been written out in the cloud all right let's give it a test we'll invoke the request for new matches on the left and boom on the right we see him right away and if we look at the console here we see trigger we saw the original updating which was on the initial load and then triggered from subscription which then updated again and we can sit here all day long and you won't see another one unless somebody comes in here and creates yet another request all right so as promised i told you i'd go over these three things that really got me good while i was building this migration into using appsync and they're all centered around the fact that our lambda function is what is doing a lot of the interfacing with appsync because appsync was generally designed to be interfaced from the client side browser and one of the things that a browser has is an a fetch api behind the scenes appsync uses this fetch api and it doesn't have that natively when it's ran from a lambda function so that's why this require cross fetch polyfill import is needed otherwise you'll get some cryptic message that you have to google the error message that's how i figured it out uh the next thing is another feature that appsync has which is really cool which is in the browser let's say that a user loses their internet connection and they create a record or two or three and then they don't have any any connection to appsync because they're offline but then once that their internet connection comes back online appsync will just synchronize up and those three records will get update uploaded to appsync and recorded in the cloud but when it's ran from a lambda function you can't do that because um it's it's not a browser it's not online or offline it's just random stops random stops whenever it's needed so for that you need to say disable offline is true and then the third one this one was really interesting was uh in this post right here when we call client.mutate i didn't originally have this await on here so to understand what's happening here you have to know uh how lambdas work uh lambdas when they're invoked they get ran on the cloud and then when they're done they die so what was happening was we were calling client.mutate it was happening asynchronously the lambda would just continue on and write run this code and the the callback was never running but what was interesting was if i ran the code three four five six times really really quickly back to back i would actually start to see some of these records in the dynamo database but then it finally dawned on me that uh i needed to wait for this asynchronous call to complete before moving on and then things uh happened as they should uh but anyway you know that's that's what being a developer is all about uh figuring out all those tough gotchas like that so that's why it really helps to have a deep understanding of everything you're working with all right thought it might be time for a cold one hope you enjoyed the appsync video as much as i enjoyed making it it's pretty rad tool um it's an age-old problem of having your front end be you know updated in real time without having to go fetch for new data so anyway like i said hope you enjoyed it until next time [Music] foreign

Channel: Callicore Software

Views: 1,040

Keywords:

Id: HeIcX3FmSsI

Length: 26min 24sec (1584 seconds)

Published: Thu May 27 2021