Build an Online Store Using AWS, React, and Stripe

[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 appsync api as our graphql api and then we will create s3 buckets to store our book images and so on now before i start i want to tell that i'm not going to cover each and every line of the react code what i will be covering is how to connect to aws 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 check out 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 order creation etc 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 ado 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 this 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 each other and then let's start configuring our application cloning the github repository of course i'll put all the code in the tab repository so you guys can look at the front-end code and then we will initialize an 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 sign up all 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 graphql 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 synced 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'll 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 okay now this is our online bookstore it's called wisdomly and it has multiple menu point home books cart and checkout 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 unfeatured ones and then i have the cart so at the moment okay there's a one thing let me take it out so it's an empty cart right here and then we have the checkout page so checkout page is not loaded unless you sign into the application and we have a hidden link as well 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 login as an admin and start adding new books to our store so this is basically that mean section let me sign in okay so i can like choose a new book let's say this one again i can type the title and the description let's add 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 anyways it will be submitted let me sign out and go to home or 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'll add 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 let's see this one to make habits okay added and another one maybe okay 100 startup okay 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 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 424242 28 and the csv one one one and one two one two okay something like that and i'll take a console so you can see the console message i click submit payment there you go all day is 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's look at the architecture diagram now it is not a very complex architecture that we have we'll be using most of the serverless services now starting from the front end of our bookstore we'll be coding it in react library and the final application we will be hosting it on s3 bucket which has static hosting enabled then we also have another s3 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 amplify library installed now we use amplify library to connect with our backend so as our backend we have an graphql api which is powered by appsync 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 vtl 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 backend without we having to write any of those codes and then we have the amazon cognito as our main authentication provider but in this application we will also be using multi-oauth functionality which we will use both amazon cognito as well as identity and access management or iam to allow guest users to connect to our backend 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 get triggered to make the payment will charge the customer and before charging the customer it will acquire user details from cognito 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 dynamodb table so this is the serverless 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 github repository 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 budget clone to that directory cd into that and open it in visual studio code 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 an amplifier project in aws and connect our project now we need to install amplify cli 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 an 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 usd2 and amplify username let me type amplify manage 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'll add the access key here and i'll add the secret access key of the camera okay hit enter then you can provide a profile name i type youtube profile so that setup a new user now i will type amplify init to initialize an amplifier project on aws enter a project name my bookstore sound good i'll let the environment name as prod let's develop for production directly and then visual studio code javascript react source distribution is on built 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 cognito type amplify add auth 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 our 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 contain images audio etc let's provide a friendly name for this category book images bucket name i'll accept the default because this has to be unique who has access to it both oauth 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 s3 bucket successfully with our application next let's add two lambda functions to process a book code now when a user add the required books to the cart and then press checkout 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 we'll use pipeline resolvers in appsync more on that later type amplify at 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 schedules no lambda 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 amplify add function again lambda function friendly name let's say create order create order will accept as the same name for the lambda function runtime node.js hello world no no no no again now as we're 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 backend so in that backend right now we have three folders one for oauth the oath 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 graphql api so that our front end the react application can communicate with appsync amplify add api hit enter select graphql mybookstore is fine for the api name the default authorization type i will choose cognito user pool however we will be using multi-auth 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 or don't select that rather select i want to make some additional changes hit enter then the next question asks do you 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 you can type anything hit enter how long is it going to be valid the apik 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.graphql i'll copy the whole thing and come back here delete this and paste it now this is the schema for our graphql api that choose aws appsync now we have multiple types as you can see we have book type book code type again an order type and also the mutation types and these rest are input types so let's look at the first type the book code 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 the 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'm using the oauth directive of amplify and i have multiple rules configured the first rule states allow the group admins so allow all the users in this group to create update delete and do all these things because admins should be able to do any of that so that's why when i log in with an admin user i could add and book but if i'm not part of the admin group even though i signed 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 guest users 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 or the guest users can only read the books then i'm using another directive called 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 and also and also it will create the vtl template so velocity templates that will handle create read delete and all this crud operation and i pass an attribute or a parameter called subscription null so 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 so that's why i set subscriptions to now 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 username who made that order and the date of uh order the total load so 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 folder just like books and create all the crud operation for that and then we have oauth and i have two rules one of the rules is allow the users in the group admin to do anything so they can view they can delete read update orders from the users so 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 he 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 cognito usable there's an email field so i'm using that email field as the identity field for order now when we have email as the identity field we can easily allow our backend functions to create an order for a particular users because as you know before we create an order we have to do a 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 dynamodb sd case that's where this email fields come handy next we have a at key attribute so this is we define a secondary index and the index name is by user and we use the user field here i'm planning to add the username 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 username starts with let's say manoj next we have the mutation called type now this is the default mutation and when amplify converts these types to the full-blown scheme right anyway it's going to create the mutations for older 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 name so that's why i'm creating the mutation separately for that so i call it process order and it will take the input as the process order input now it is this one now when a user clicks checkout we will get the full array of his cart 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 whether it is 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 called is the 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 i'll go to video resources and then i should see the process payment js 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 so 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 these fields are extracted from that and out of that there's this total then i'll use stripe sdk to charge the user the amount the total amount in usd currency then the token of stripe that is being passed down to this one and then as description let's say order the date and the email now there's a one small thing guys we have to get the user's email using cognito admin api so that's what this function does so if i go to this function user email so this is that function we will call the admin get user function with the parameters the user pool id and the username because the username 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 we have to call this admin get user with these params of course and then i'll 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 code is all about i will get event.previous dots results so that will give me all the results that i passed down from the previous function and then i'm going to 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 select what this create book order 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 in domain relationship we have this third table that handles it so the book coder it will have two main attributes the book id and the old 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 order 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 and 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 coders so this is the third table that we are referencing right so it will have multiple book coders and there is the connection in the same time order has multiple books so that is of again book code middle function and when we 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 by order this secondary index to do the other way around that means to get all the orders for a book we use by book secondary index right here both indexes are defined in the book code 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 graphql schema and create that full blown schema for us okay it is done now the next step would be to push all these resources onto aws so it will 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 under the source index.js as you can see it use aws sdk as one of the dependencies but this is provided at the lambda runtime so it's fine but we need to fill in 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 own category s3 bucket with our storage category appsync api with our api category and the dynamodb together with devsync 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 an user pull id then i'll update this again yes so all these are yet to create my two function st bucket both the user pool and the app sync api 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 queries mutation subscription yes i want them and how deeply it is nested let's use four 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 code let me close all these windows now in source folder i should find a file called aws export.js let me copy this user pool id there 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.com and then sign up for 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'll view 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'm going to remove this account so payment process dependencies are now complete let's go to create order function dependencies source even index.js and there i have to install guid or uuid so right click open in terminal then let me type npmi uuid now since this function create orders in the dynamodb table directly we have to pass the order table and the book code table so that will create the link between 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 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 book order 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 code table copy paste it save 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 functions everything else is not changed 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 ssm or parameter store and then refer this parameter store variable here or else you can use the secret manager as well so with that we have successfully configured all our resources on cloud okay 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 our front-end in the package.json we have bunch of dependencies to be installed let me run npm i or npm 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 scottish 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 minutes 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 paste confirm great now we are in the add new book section so let's add a book click choose file let's add this one paste 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 i don't see anything now so let's go to our project go to our admin page so on the pages we have admin so this is the admin component so on top we are requiring react and also use date 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 graphql 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'm doing that because this graphql 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 graphql 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 let me add it quickly let's try submitting again and i'm getting an error in creating to-do's so let's observe this error so i get an error called unauthorized now as you remember the creation of books is only allowed for admin so we sign up a user but he's 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 this is our 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 or the string that we give in our schema file admin user groups to create books i don't have to select a role but precedence are set as 0. so the lesser the precedence more priority is given so this is basically if i'm part of multiple groups which group should be prioritized so then i'll create the group go into that then i'll add the user i'll click the admin user again don't get confused my group name is also admin the username is also admin but this username could be anything so now let's go back and clear the screen and try submitting before that i have to sign out then only it will take effect login again okay 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 add another book because i haven't implemented this clearing up feature which i will do in upcoming day so let me add another file or book rather submit it and be 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'm 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 unauthorized error and if i further look into this there's something unauthorized in the book coders 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 there 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 these orders attribute or the fields are coming from a connection with the older type or the table but they are not authorized to be with that's why it is saying unauthorized this field is unauthorized 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 mutation outside this automatically updating folder so that's why i put it in a separate fold in the first place so now let's look at it and as you can see it is loaded very nice but there's another problem you know my images are not loading so let's go back to our 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's another folder called images then we have these three images in order for an unauthenticated user to weave 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 request 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 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 is 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's 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 wisdomly app and then do another refresh we'll 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 now we already seen some of these 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 fetchbooks 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 amplify authenticator and that comes from amplify ui react library which got installed when we did npm install and from there there's a component 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 here also we are wrapping the return value or the return jsx using the amplify authenticator thereby we get the login screen 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 amplify.graphql then we use this helper function graphql operation and 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 localhost i'll select 10nx 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 63.85 dollars then i'll click checkout so i have to login in order to check out 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 checkout 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 pressing the public key as a attribute and then i have this checkout form which is under component so in this component i'm 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 it says couldn't find the module stripe i think we haven't installed one of those dependencies let's install that real quick amplify backend open it in terminal 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 so this time i have a different error so if you can see the hover text 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 cognito to get admin user so let's do that so let's provide the permission amplify console backend environment functions the process payment i will click view in lambda 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 code and in the permission tab this is the role that is attached so i'll click on to this then it will open that role in identity and access management and i'm going to add an inline policy for that click inline policy choose the service cognito and cognito user pool because we are getting a user from the cognito 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 arn of the user pool so let's take that i will go to the user pool which i have open into another step i will go to general settings then here i will get the arn copy that go back to that file click add arn 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 total and this create total lambda function so it is connecting to 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 backend environment again functions select the second function here we win 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 i'll search for dynamo db so this time i'll add the full access to dynamodb 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 another 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 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 we can go to our stripe and see if there's a payment so in my cart there should be a payment for 63.85 i'll go to stripe dashboard and payments tab and here we go 63.85 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 then it will create the links to the books of that order let's go to amplify and i'll 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 so in the order table we 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.85 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 quotas there should be two book coders because we had two orders let 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 old id 04 and the other one different word id 0 6 but same old id 04 well with this we can run some nice queries so i'll go to appsync 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 aws export.js then we can find the client id here copy paste it here then the admin user login clear everything i'll go back to my video resources and example graphql 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 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 the field attribute this is 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 android user and that's strange so let's go to our dynamodb 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 but apparently 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 well in the handler function we are trying to access the username from arguments.input and this is the error the username is not inside the arguments.input instead it is in the 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 i'll take out the username part so it will destructure properly format it 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 180 107.85 submit payment order is successful let's go to the stripe dashboard to the payments again and there we go 180 197.85 and this time we get the user and row 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 android order well now we got everything working except we haven't host this application so let's use amplify itself to host it let's look at the query that admin 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 cicd 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 s3n cloud front to host this application as a one environment so we'll use the second one in fact we'll not use cloud front as well just s3 bucket so i'll go to my bookstore add a new category amplify ad hosting i'll choose the second option cloudfront ns3 so i'll use the dev environment that is only s3 hosting bugger 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 an 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 open up the website for me and you can see it is all here and it is not on my local machine but on s3 so i can add can check out of course i have to log in 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: freeCodeCamp.org

Views: 98,130

Rating: 4.9167466 out of 5

Keywords:

Id: JgwI22y_eFA

Length: 56min 26sec (3386 seconds)

Published: Mon Jul 27 2020