How to Built an Online Store in One Day (AppSync, Amplify & React)

[Music] hello everyone in this episode I will tell you how I built an online bookstore using AWS stripe and react from AWS I use AWS amplify library to connect resources at AWS end so we are going to create an app sync API as our graph QL API and then we will create a story buckets to store our book images and so on now before I start I want to tell that I am NOT going to cover each and every line of the react code what I will be covering is how to connect to a degree ways from react I will also be covering different relationships like many to many relationship between books and orders and also different authorization mechanisms for example the admin users can create books but unauthenticated like the guest users can only view the books if they want to checkout they have to login but still again they are not able to create books that's only for the admins and finally I will tell you how I did the checkout part as well including the payment processing or the creation etcetera you will also learn how I use pipeline resolvers to deal with different custom logics and then create resources or create records in dynamodb table from within lambda functions well I'm really excited about this project so without further due let's look at the learnings and the agenda that we are going to cover in this video and hey if you are interested about this content make sure you subscribe to my channel for more videos just like these so let's start with the product demo so I'll go through all the pages and the main functionalities and then let's look at the architecture diagram and it will contain what resources are we using and how they connect to each other and then let's start configuring our application cloning the github repository of course I will put all the code in the table repository so you guys can look at the front-end code and then we will initialize and amplify project into the react application then we are going to add multiple amplify categories starting from the authentication which will handle all the login signup of that part and then the storage category where I will create an s3 bucket to store images and we will also use function category to create two lambda functions for pipeline resolvers to handle the checkout functionality then we will also be adding the API category and we'll specifically add a graph QL API so our front-end can communicate with the DynamoDB tables and so on and then I'll explain the process of processing orders and once all these resources are sync with the cloud then we'll look at how we can communicate with them or interact with them from within our front-end react application then we will see how we can verify a order that is placed by the customer from the stripe dashboard as well as from appsync console and finally we will be deploying our application to s3 as an static website now let's have a look at the final product demo ok now this is our online bookstore it's called wisdom lee and it has multiple menu point home books cart and check-out so in the home page we can either view all books or see the featured collection right here so if I open up one of these books let's say the details section it will show the title description the author and the price and also I can add it to the cart and if I go to the book section then it will show all the books that I have including featured and non featured ones and then I have the cart so at the moment ok there's a one thing let me take it out so it's a empty cart right here and then we have the checkout page so checkout page is not loaded unless you sign and sign into the application and we have a hidden link yourself so that is for admin so you can go to slash admin and then you will be directed to another sign-in page so here we can log in as an admin and start adding new books to our store so this is basically that means section let me sign in ok so I can like choose a new book let's say this one again I can type the title and the description it's a new description and the author Napoleon Hill and the price it says 35 then we can select whether this is a featured book or not let's say no and we can submit it well I haven't cleared the input but enemies it will be submitted let me sign out and go to home of the books and then do a refresh then I should see the new book right here now let's add something to our cart so I'll come here and then I let this book and I can increase the number of books I want to add you can see the total get updated accordingly let me add another one I'd say this one to make Cabot's added and another one maybe okay hundred dollar startup ok so now I can check out so if I click checkout then I have to login so let me log in with the user so if you haven't sign up you can click sign I create account and sign up and then I will sign in then I get to the checkout page I can put the address and then the card number so right now we have linked the stripe test account so the default card number is 4 2 4 2 4 2 28 and the CSV 1 1 1 and 1 2 something like that and I'll take a con source so you can see the console message I click Submit payment there you go or they successful so now I can go to the stripe account and see if I get a payment and here we go we just got a payment now let us look at the architecture diagram now it is not a very complex architecture that we have will be using most of the server services now starting from the front end of our bookstore we'll be coding it in react library and the final application we'll be hosting it on s3 bucket which has static hosting enabled then we also have another history bucket to store all the public images now these images can be accessed by anybody authenticated or guest users now in the react front end we have the amplifi library installed now we use amplify library to connect with our back game so as our back-end we have an graph QL API which is powered by app sync and that is going to handle crud operations for books such as admin create books user read books etc now all this crud operation will be handled by VTA templates or velocity templates and the best part is we never have to write any of these templates because that is automatically being provided by amplify when we are configuring this API and not only the VTL template it will also provide all the queries mutations and all these front-end resources to connect with our back-end without we having to write any of those codes and then we have the Amazon cognitive as our main author authentication provider but in this application we will also be using multi oath functionality which we will use both Amazon kognito as well as Identity and Access Management oh I am to allow guest users to connect to our back-end and read the books and then we have the pipeline resolver that is built to process the payments or the checkout process so as soon as a user checks out then the first lambda function gets triggered to make the payment or charge the customer and before charge the customer it will acquire user details from kognito and then only it will charge the customer with more user details and after the charging is successful then the next lambda function takes over and create the order in dynamo DB table so this is the service architecture that we'll be using to create our bookstore all right so now to start let's first clone our repository so I'll head over to the Jetta proposer I'll put the link below and then click code and get the clone URL I'll make a new directory my bookstore and then do a JIT clone to that directory CD into that and open it in we show Studio chord so in the folder structure source folder contain all the source code and then we have a video resources section and it has different code snippets and other resources which I will use during this video next let's initialize and amplify project in AWS and connect our project now we need to install amplify see a live so make sure you install this exact version to avoid any conflicts due to library updates NPM I - G at AWS amplify CLI at 4.24 so this will install amplify CLI globally now before initializing and amplify project we have to configure amplify CLI with your AWS account so let's type amplify configure then you need to sign into your AWS account and after that you can hit enter then you have to pick which region you want to spin up all the resources I will choose US east to and amplify username means i amplify minaj click Next permission administrator access is by default selected review and create user hit enter again you have to add the access key and secret access key I let the access key here and I'll add the secret access key of the camera ok hit enter then you can provide a profile name type youtube profile so that set up a new user now I will type amplify in it to initialize an amp project on AWS enter a project name my bookstore sound good I let the environment name as prod let's develop for production directly and then we shall studio code JavaScript react source distribution is unbuilt accept all the defaults now pick the YouTube profile as my AWS profile with that we have successfully connected our application to an amplifier project next let's add authentication with AWS kognito type amplify add earth and accept the default configuration the defaults are good for application select username for sign-in now I am done with that it will configure a user pool for application so that our users can log into it now as the next configuration let's create an s3 bucket to store images for our books type amplify add storage select content images audio etc let's provide a friendly name for this category book images bucket name al accept the default because this has to be unique who has access to it both earth and guest users as you have already seen in the demo even a user who has not logged in should be able to weave the books so let's pick the option both authenticated users and guest users hit enter now for authenticated user he should be able to create read and delete now if you remember the admin user who logged in he can create books but the other users who logged in cannot create book we will accomplish that by adding this admin user to an admin group hit enter then what kind of access a guest user has only the read access is necessary because he should be able to view the books hit enter no lambda triggers with that we have configured the history bucket successfully with our application next let's add two lambda functions to process a book code now when I use add the required books to the cart and then pressed check out we have to do two things number one we will charge the user using stripe and number two we will create the order and then we will link the order with the books that he requested to handle these two activities will use pipeline resolvers in appsync more on that later type amplifi add function select lambda function a friendly name for this category let's call it this our first function that will charge the user so we'll call it process payment hit enter I'll accept the same name for the lambda function and then I'll choose node.js as the runtime for this function hit enter I'll use the hello world template no and I don't want any recurring shadows no lamda layers for now I will update the lambda function little later so I'll hit now again then let's add our next lambda function amplifi add function again lambda function friendly name let's say create order create order will accept us the same name for them the function run time no chase hello world no no no no again now as we adding this resources you can see there's a folder automatically created called amplify and under that you will see there's a folder called back-end so in that back-end right now we have three folders one for earth the earth category we configured the storage category we configured and the functions now here are the two folders for two functions that we created create order and process payment okay as the next step let's create a graph QL API so that our front-end the reactor application can communicate with app sync amplify add API hit enter select graph QL my bookstore is fine for the API name the default authorization type I will choose cognate or user pool however we will be using multi oath so that we can use Cognito user pool to authenticate our logged-in users and then API keys to authenticate our guest users so let's first select Cognito user pool and the next questions don't click no I am done I don't see like that rather select I want to make some additional changes hit enter then the next question asked we want to configure additional types type yes hit enter then select API key with your space bar and hit enter then description for the API key guest user access to books can type anything hit enter how long is it going to be valid the API key I'll put the maximum 365 days no conflict detection I don't have actually I have but let's copy-paste later let's choose single object as the example do I want to edit it this time let's edit it right away I will go to my video resources and then I should see the schema door off key well I'll copy the whole thing and come back here delete this and paste it now this is the schema for our graph QL API that use AWS EPS Inc now we have multiple types as you can see we have a book type book code type again an outer type and also the mutation types and these rest are input types so let's look at the first type the book order now our whole application is revolve around books right so for a book let's add an ID field and it has a title description image URL the author whether or not it is featured so that's a flag boolean flag and then the price I'll get to the connection in a bit so but these are the main attributes for a book and here I am using the earth directive of amplify and I have multiple rules configured the first rule states all of the group ID means so allow all the users in this group to create update delete and do all these things the aside means should be able to any of the earth so that's why when I login with an admin user I could add an book but if I'm not part of the admin group even though I sign in I cannot do that now this is handled through Cognito user pool authentication then we have two other rules one of that is private and operation is the read so this means all authenticated users can read the post so both authenticated users and guests user should be able to read the post so that's what I added two rules allow private as well as allow public so public as in the guest users who are not authenticated and we allow them to read so that they can see all the books so people in the admin group can do whatever but the others who authenticated oh the guest users can only read the books then I am using another directive collect model so this directive is going to create a DynamoDB table for this type so for this book type it's going to create a table a notes and also it will create the VTL templates or velocity templates that will handle create read delete and all this crud operation and i pass an attribute or a parameter called subscription null this means it is not going to create any subscriptions but it will create the mutations and the query so the mutations we can create update and with queries we can query the books so we don't need real-time updates sir I said subscriptions you know now let's look at our next main type that is the order for an order it has an ID field and then it has the user the user name who made that order and the date of the order the total load that is a float and then we have a connection we'll get to that in a bit so then I'll use three directives here number one the model again it is going to create a DynamoDB table for order just like books and create all the crud operation for that and then we have oath and I have two rules one of the rules is allow the abuses in the group admin to do anything so they can view they can delete read update orders from the users they there's no restriction for admin users then there's another rule it says allow the owner that means if there's a user who logged into the application it could be an admin or it could be a normal user he can see the orders that he created but he cannot see the orders that is created by other users now both of these rules are handled by Cognito user pool and when a user logged into the application using cognate or you suppose as an email field so I am using that email field as the identity field for order now when we have email as the identity field we can easily allow our back-end functions to create an order for a particular users because as you know before we create an order we have to do set of things we have to charge him and we have to see whether it is successful or not and then only we will create the order for him so to handle all that complexities we use those two lambda functions and towards the end we will create the order for the user by using dynamo DB SDKs that's where these email fields come handy next we have a a key attribute so this is we define a secondary index and the index name is by user and we use the use of field here I'm planning to add the user name so the admins can query users by their username not only just by using the table primary keys which obviously the ID so we have more flexibility to query with this secondary index and they can in fact type queries find all the orders of the user whose user name starts with let's say Manoj next we have the mutation called type now this is the default mutation and when amplifi converts these types to the full-blown scheme it-- anyway is going to create the mutations for order books and all that but now we have a custom need that is we have to create a new mutation for processing orders and it is not directly linked with a dynamodb table also but we have to run two functions so it's a custom need so that's what I am creating the mutation separately for that so I call it process order and it will take the input as the process or the input now it is this one now when a user clicks check out we will get the full array of Fiske art items and then the total and the token from stripe and the address so we get this as the input and then we will output at the end the order status with AD succeed or failed now as this data comes in it will execute two functions sequentially and we call it a pipeline resolver so in our pipeline the first function that get cold is a process payment the function we created earlier and then we have the other function so this will make sure the stripe payment is successful if and only if call this create order so let's add code for these two lambda functions go to video resources and then I should see the process spam and J's let me copy this whole thing close this and in the back end I will go to the functions process payment and then source folder index you have a simple handler function let me delete that and paste that code the process payment function is very simple if I go to the handler function it will do two things it will first get the total price for the order from the input that is passed to this and then it will charge the customer so from the event we can get the arguments and this fails are extracted from that and out of that there's this total then I'll use tripe SDK to charge the user the amount the total amount in USD currency then the token of stripe that is been passed down to this one and then as description let's say order the date and the email now this is one small thing guys we have to get the users email using kognito admin API so that's what this function does so if I go to this function you say email so this is that function we will call the admin get use a function with the parameters the user pool ID and the user name because the user name is passed down to us as the claim but we don't get the email as the claim so in order to get the full user context you have to call this admin get user with these parents of course and then I will return the email and this email is here then I'll add that as the description here I can add the username as well let me in fact do that username with email so that's about process payment function let's go to our video resources and go to create order function and then copy the whole thing so on the function let's expand the create order source index.js delete this and paste so the process order does few things now the earlier function and this get called sequentially so we can pass down some information from the previous function to this so I will get the order details from the process payment lambda so that's what this core is all about I will get event dot previous tour through sauce so that will give me all the results that I passed down from the previous function and then I'm going to make create an order so we will create an order using AWS dynamodb sdk so that's what this function does so it will pass down the payload and create an order and then we will link the books that he purchased to this order so that was this create book or the function does now there's a many to many relationship between orders and books so that's why we have this type exist you know the book order so this is the third table that handles this many-to-many relationship you know when we are defining them into any relationship we have this third table that handles it so the book order it will have two main attributes the book ID and the world ID so when we are creating an order from the create order function we will first create the order and then get the order ID and then we'll create another record in the book order table so that will have the old ID of that order then we'll create links for each and every book in that order so old ID book ID so if we purchase three books then the same old ID will be there for three records but the book IDs will be different now with this connection we can achieve two things so one of the things is a user can see his previous orders so we can provide a feature which I haven't added it anyway in this demo a user can view his previous orders because a user can have many orders right in the same time from the admin panel you can look up all the orders of all the users or all the orders of a certain user so that is also possible now in order to set up these relationships we use the connection directive now the book it has multiple orders so it will have multiple book orders so this is the third table that we are referencing right so it will have multiple book orders and there is the connection in the same time order has multiple books so that is of again book code middle function and when you are resolving it we are querying these attributes by using the secondary indexes now in order to get all the books for an order we use the buy order this secondary index to do the other way round that means to get all the Oh for a book we use by book secondary index right here both indexes are defined in the book order type I hope this is clear so let's move on so I'll pull up the terminal again it's waiting for my command so let me hit enter then that will start executing this graph giver scheme and create that full-blown schema for us gate is done now the next step would be to push all these resources on to AWS so if you create and provision these resources but before that we have some dependencies in the lambda functions which we need to fill up and I'll go to amplify backend functions let's first go to process payment on to the source index.js as you can see it used AWS SDK as one of the dependencies but this is provided at the lambda runtime so it's fine but we need to fill aim the user pool ID and the stripe private key I don't have this one yet so let's do an amplify push anyways now the amplify push is going to create these resources in AWS a user pool with our earth category is true bucket with our storage category AB sink API with our API category and the dynamodb together with the ab sync as the resolvers and the two lambda functions again as part of our API pipeline resolvers I'll do amplify push so after this I will get in use Apple ID then I'll update this again yes so all these are yet to create my two function is to bucket both the user pool and the epson claria now I want to generate the code so I can easily use my API from front-end I don't have to write any code say yes I want it in JavaScript in these folders Curie's mutations in subscription yes I want them and how deeply business to it let's use for because in future we may add more nested queries all right so now it is successful and it took me about three minutes to complete this whole process now let's understand the two functions that process a book order let me close all these we now in sauce folder I should find a file called a double US exports ace let me copy this user pool ID they are and go to amplify function process payment and replace this placeholder with that then I need a stripe private key for that you need to create a stripe account go to stripe calm and then sign up for an account and in the dashboard you will see get your test API keys so from our react front-end we will use the public key to generate a stripe token then that token will be passed down to our lambda function then we will use a secret key to make a charge for the user so first I will copy the public key and then let's first update the front-end for that you go to source and pages check out and there's another place folder for the public key save it then I will be you the secret key copy that go to the lambda function and here I will paste it by the way you should use your own private and public key because I am going to remove this account so the payment process dependencies are now complete let's go to create order function dependencies source given index.js and there i have to install GUI ID or uu IDs all right click open in terminal and let me type NPM I UUID now since this function create orders in the DynamoDB table directly we have to pass the order table and the book order table so that will create the link within boot book and the order so how to find that so take another new terminal and then type amplify console so that will open your amplify project in AWS automatically choose the correct region this is it I click on to that then here go to back in environment and then I'll click the prod environment I created then I see the categories I have added can go to API and under that I get all the data sources the table names so I need the book table name and the Khoda table name so I'll click view here that that will open up the DynamoDB table so this is the order table so let me copy this order table name replace the placeholder then I need the book called a table so this is the book order table copy paste it say okay with that I'm going to run another amplify push so this time it will update only these two functions as you see update is only for these two function everything else is not change so it will be much quick now hey one other additional thing when you are storing these strings you know this because this private key is very sensitive you can use SS mo parameter store and then refer these parameters Stowe variable here or else you can use the secret manager as well so with that we have successfully configured all our resources on cloud now that we have spent much time on configuring the application let's run the app with the current configuration clear the screen let's run npm install to install the dependencies for front-end in the package.json we have a bunch of dependencies to be installed let me run NPM IO in came install that will install all the dependencies okay now let's start our application by running NPM run start here we go it opens up our application but we don't have any books no featured books no books got this empty everything so why don't we create some books from the admin section go to admin slash admin and let's create an admin user so let's create a normal user first and we'll make him an admin I'll use 10 mates email to get a temporary email box put that email address here fake phone number create account let me see if I get an email right away and this is the verification ID copy that best confirm right now we are in the add new book section so let's add a book click Choose file let's add this one there's some description author let's make it a feature book now before I submit let's take a console and inspect it Network and I'll hit submit so I don't see anything now so let's go to our project go to our admin page so under pages we have admin so this is the admin component so on top we are requiring react and also you state for keeping some states and then we import some amplified dependencies so one of those dependencies is this create book mutation when we do amplify push it's going to create all the mutations queries and subscription in JavaScript for us and those files are in this graph QL folder you see we have mutation we have queries but in my file I am referencing a mutation file in API folder which is here so at the moment it has nothing queries it is empty why I am doing that because this graph QL folder is always being replaced as and when I do an update so I want to keep it constant and have more control over it so that's why I am referencing a different directory but now let's go to mutation in the graph QL folder copy that and go to this API folder mutation save it similarly queries copy this and queries paste it now my previous data is anyway not here so lets me add it quickly let's try submitting again and I'm getting an error in creating too loose so let's observe this error so I get an error called unnoticed now as you remember the creation of books is only allowed for admin so we sign up a user but he is not an admin so let's create him an admin so I'll take another terminal let's go to amplify console click on authentication then I can view my users in the user pool click this user pool button pick the region so click on my user pool here then I get number of users one so I'll go to users so these are admin user so now I go to groups and then create a new group I call this group admin so it has to match exactly the word other string that we gave in our schema file had been user groups to create books I don't have to select a role but precedence are set as 0 so the lesser the president's more priority is given so this is basically if I'm part of multiple groups which group should be prioritized to so then I'll create the group going to that then I'll add the user I'll click the admin user game don't get confused my group name is also admin the user name is also admin but this user name could be anything so now let's go back and clear the screen and try submitting or before that I have to sign out then only it will take effect login again ok now I go to the bottom and click Submit so this time it should be successful and I don't get any error the create book is now successful so I'll refresh and had not the book because I haven't implemented this clearing of pressure which I will do in upcoming day so let me add another file or book rather submitted they successful so we have two books so I think that should be enough so let's go to home I have to do a refresh but even though I don't see any books returned to me right now I am NOT authenticated user because I signed out but why is it not showing so let's inspect the query that triggers in the home page so it is basically list book query and I am getting an error so I get unnoticed error and if I further look into this there's something unnoticed in the book orders connection so let's look at that query so I will go to home page under pages go to home and I'm using the context API here so I have a context for book so the book context so so that is they are inside the context folder so right here and this is the book context in the book context we are fetching books and once we fetch the book we set this featured books in a separate array and all the books in a separate array so our components that use this context can refer either of it but however in order to get the books it is using this list books query so if I go to queries so that is list books now this all looks fine except for one thing that is this orders now an unauthenticated user can only look at the books read the books this order's attribute or the fields are coming from our connection with the order type or the table but they are not authorized to be with that's why it is saying unnoticed this field is unnoticed but everything else is authorized for him so what I will do is I will remove this and save it and this is one of the advantage that we can reap when we have these queries and nutation outside this automatically updating folder so that's why I put it in a separate folder in the first place so now let's look at it and as you can see it is loaded very nice but this is another problem you know my images are not loading so let's go back to amplify console and this time let's go to file storage and here in the file storage so I will view my bucket in s3 and when we upload book images so it has uploaded into a folder called public and inside that there is another folder called images then we have these three images in order for an unauthenticated user to view the books we have to add the public permission for this folder with amplify storage there are three levels of folders public folder private and protected public is for everybody to see but still again we have to add some permission to this since we are using the API key authentication to regress these resources so what I will do here is I will go to permissions and go to bucket policy and I'll go to the documentation links right beneath it and then there's a link to policy examples and this page if I scroll a little bit down I'll get grant read-only permission to anonymous users so I'll copy this policy come back to my console s3 and paste it in here instead of the example bucket I will replace it with the exact bucket name list this paste it out and I don't want the public access to the entire fold only to the public folder and inside that there is a images folder so you get this message bucket has public access but it only has public access to this folder so I will go back to my wisdom Lee app and then do another refresh will see if the images are now loading so as predicted now the images loads next let's look at how we have actually connected our front-end to our back-end and we already seen some of this API calls to the backend but let's look at in page wise so I'll close all these files and I will go to the pages folder now here in the home folder we display featured products so we use the context book context here in the context which is the book context and we are passing this featured book list to our context thereby from within our components we can require it the featured books is nothing but we get all the books using fetch books and then we set the featured books to featured by filtering them by the featured flag the boolean value so it's that simple in the books page we use books instead of featured so we'll get the whole list of books now both of these pages are public even the cart page is also public but when you look at the checkout page it is not public you have to log in so that's where we use this amplifi Authenticator and that comes from amplify you I react library which got installed when we did npm install and from there as a compound amplify Authenticator we just have to wrap it around our component then you will get that nice little login screen so in the same time if I go to the admin he also we are wrapping the return value or the return JSX using the amplifier Authenticator thereby we get the login screen then that's all to it I think the rest is quite explanatory when we want to make an API call we get the API component from AWS amplify and then we'll use amplified or graph key we'll then we use this help function graph QL operation we get the corresponding mutation from our API mutation and then we'll pass down the input parameters that's it I mean it's very easy to make an API call using amplify because everything is generated for you especially these mutations and queries next let's create an order and see if it is properly processed so in my local host I'll select 10 next rule and add that to the card let's increase it three times I need three of these books and then I'll go to startup again one of these the order total is sixty three point eight five dollars then I'll click checkout so I have to log in in order to checkout and I only have the admin user so let's create another user so I get a new email address and paste that in create account let's check there you go and the verification code paste confirm now in the check out component we have a place to enter the shipping address and then the stripe component by the way let me quickly show you how I linked it if I go to pages and check out and you see I'm using stripe elements from stripe react library for this element I am processing the public key as a attribute and then I have this check out form which is under component so in this component I am using the other elements the card element you stripe and those things so it will properly show the card element or the place to enter the card details which is this one so let's try to add address and then the card by default it is four two four two four two this can be anything and I'll click Submit payment in the order I get an error says couldn't find the module stripe think we haven't installed one of those dependencies let's to install that real quick amplify back and open it in terminal and PM my stripe let's save it as well I'll do another amplify push it's updated so let's try again clear everything and then create another payment again there's an error this time I have a different error so if you can see the power takes it says this lambda function is not authorized to perform Cognito admin get user well that is right because we haven't provided any permission to this function to call cognitive to get admin user so let's do that so let's provide the permission amplify console back in environment functions the process payment I will click vu in so I can see the role that is currently attached to this and then I can add that additional permission to it and here's the cord and in the permission tab this is the role that is attached so I'll click on to this that it will open that role in Identity and Access Management and I'm going to add an inline policy for that trick inline policy choose the service cognitive and Cognito you support because we are getting a user from the cognate or user poll and read I will select the permission admin get user because that's what we are doing and which user pool so let's click on to this and then I have to add the AR end of the user pool so let's take that I will go to the usable which I have open into another's tab I will go to general settings then here I will get the AR and copy that go back to that file click Add AR n paste it then click add review policy create and that is been attached in the same time we have another lambda function that is create order and this created a lambda function so it is connecting two DynamoDB and we have not provided any permission to interact with dynamodb as well so let's add that permission as well so I'll go to amplify console again and go back to my bookstore back in environment again functions select the second function here we've in lambda so this is the lambda code permission tab this is the role that is currently attached to it so do you see we don't have any permission for DynamoDB this time instead of an inline policy I will attach and managed policy as search for DynamoDB so this time I'll add the full access to dynamo DB of course you can add the granular access only for those two table I'll leave it to you but here let the full access and I think that should do it so let's come back and let's try to run this again let's see if we get the order successful message hopefully submit payment I get in on the error well I'll click that once again then it says the order is successful you know it takes just a little bit to propagate that permission so that is understandable so now my order is successful very nice so how do we verify whether my order is successful we can do it in two ways number one you can go to our stripe and see if there's a payment so in my card there should be a payment for sixty three point eight five I'll go to stripe dashboard and payments tab and here we go 63 point eight five so we receive the payment that means our first lambda function charging the user is properly done in the second lambda function it will do two things first it will create the order they need to create the links to the books of that order let's go to amplify and go to API again then I'll select view the API the app sync API so we can run some queries and see exactly those tables updated let's go to data sources and then directly look at the table first though in the water table you should have an order record so I'll open it in a new tab and here we have the record so the order is there and 63.8 five the total and the customer email is added so that's because we set up the identity field as the email cancel that and then we'll go to book orders there should be two book orders because we had two orders me quickly show you one and two so these two books so there are two records for the same old ID and different two book IDs 79 is the order ID zero four and the other one different order ID 0-6 but same order ID zero four well with this we can run some nice queries so I'll go to apps in console again then go to queries how to log in with a user so this time I will log in with the admin user how to provide the client ID so and go to source a double US exports chase then we can find the client ID here copy a state here then the admin user okay play everything I'll go back to my video resources and example graph key well I'll use this query to list all orders so it's going to list all orders and in each and every order it will go into the books of that order and it will print out the list of books so let me run that there you go so we get the order and the books that is included in that order so in the same time we can filter it by the customer so let's look at this query so it's the same query but with a field attribute you see the same one but we are adding the filter let's say this time it's not Manoj Fernando see this is Andrew and hit enter well I don't see the end reduce and that's strange so let's go to our dynamo DB table for order and we'll see if there's a user column and I don't see it and let's go to our stripe dashboard and we'll see if there's a user mention no you know it is undefined something to do with the username let's try to debug it go to amplify folder create order index.js and we should get the username here represent Li it is not passed let's go to the previous function where the username is passed down to this one so that is process payment source index.js we're in the handler function we are trying to access the username from arguments 13 pune and this is Thera the username is not inside the argument story input instead it is seen that claims so this is where it is let me take out the username here because you don't get the username and add Const username and paste this one take out the username part so it will be structure properly formatted now it should do it so I take console and then do an amplify push again okay it's updated so let's check that again so I will increase the order let's say I d1 and 7.85 submit payment already successful let's go to the stripe dashboard to the payments again and there we go 181 and seven point eight five and this time we get the user Andrew so that means if I go to the query that I previously ran and I run it again then I should get the order now these are the books for Andrews order well now we got everything working except we haven't lost this application so let's use amplify itself to host it let's look at the query that I had been can write to get all the orders of a user now host this application with amplify there are multiple ways one we can link a proper see ICD pipeline you know with different environment test QA and production environment and then you can use custom domains for these each environment as well or else we can simply use an s3 and CloudFront to host this application as a one environment so we'll use the second one in fact will not use cloud front as well just history bar so I'll go to my book store add a new category amplify add hosting I'll choose the second option cloud front and s3 so I'll use the dev environment so that is only s3 hosting bucket name I'll accept the default index.html as our main page and then I'll do amplify publish so I think this is all it it should give out and URL to an s3 bucket which is configured to be host and static website then we can view application on cloud okay now it is published successfully so it has opened up the website for me and you can see it is all here I just not on my local machine but one s3 so I can add you can check out of course I have to login and it's all here so this is what I want to cover in this video and hey if you are interested about this content make sure you subscribe to my channel for more videos just like these

Channel: Enlear Academy

Views: 18,814

Keywords: #AppSync, AWS, AWS Amplify, AWS Full Project, Amazon Web Services, AppSync, Cloud Store Front, Code, Developer Guide, Development, E-Commerce Web Site, Enlear, Example, Examples, Guide, Hands On, HandsOn, Manoj, Manoj Fernando, Modern, React, Step by Step, Storefront, Stripe, aws lambda, graphql, tutorial

Id: cWDJoK8zw58

Length: 56min 25sec (3385 seconds)

Published: Mon Jul 13 2020