Building a Mobile App using AWS Amplify and React Native - Crash Course

[Music] hello guys in this episode you will learn how to build a simple e-commerce application using aws amplify and react native before that guys in this tutorial i'm assuming that you have a prior experience in react native so i will not cover the react native code in depth we will discuss how to build react native applications that use aw semplify as their back end with aw simplify it will be a lot easier to get your react native projects up and running if you are interested in this content make sure to subscribe to our youtube channel for more videos just like this if you have any questions feel free to ask in the comment section below first let me show you a quick demo on what we will build in this tutorial ok this is our application now i'm in the home screen we can add new products by providing some details we can be all those products in our home screen we got this list of products the users can create the account and then they can sign into our application when we sign back in we are working our home screen okay next we will look into the adobe's architecture diagram for this mobile app of course we will build our application using direct native aws amplifier will create configure and manage all these aws services that we are going to use so you saw the demo in each product we have an image we will use an sd bucket to store those images amazon cognito will handle authentication for this app we have a graphql api provided by aw sap sync this api will handle crowd operations for products the sap sync api will use btl tempest or velocity templates to connect with our dynamodb database which will in the end store all our product data and also guys aws amplifier will provide all the mutations and queries we need with this graphql api now this is not a very complex architecture diagram amplifier makes it much easier to work with these different services you will see as we go on with this tutorial ok guys let's start building this app and guys you will find a link to this blog post in the video description as well to save some time throughout this tutorial i will refer code snippers in this blog post now before starting guys these are the prerequisites that you will have to install you will need node.js no later npm version 5 or later you will need to install the amplifi cli since we are developing a react native application you will need to download and set up your android studio environment and if you are on a mac you need to set up xcode we will use the google react nature cli to build this application okay let's start things out by installing and configuring the amplifier cli now installing and configuring amplify cli is not a big deal we see it all the time when we are developing on aws and aws amplifier docs got this cool guide on how to download and install the amplifier cli i will briefly explain the steps to you now you need to install this amplifier cli using npm using this command right here next you need to run amplify configure in your terminal then you will be asked to sign into uiws console there you need to create a new iem user it won't take more than three step now back in your terminal you need to specify the region and the username for the time user only when you create a new iem user interbs will provide you a secret access key and access key id for the time user you need to enter those in your terminal to configure your amplifier cli and you can set up a profile name hopefully this should be the last problem you see let's set up our react native application now first install the react native cli using npm we need to install that globally okay next we need to create a new react nature app so in your project directory type in react native init and the project name you like i'm going to name this amplify shop and press enter okay now you can open this react nature app using your ide i will use this intellij ide we got this project structure and this app.js file let's run this application so open the terminal in your project directory we need to terminal windows in one window run react native start and on the other you can run react native run android so i will use this android emulator to view our app and it is still executing nice we got our react native app running on our emulator now this is one day of running your app since i'm using this ide i can run my app easily by adding this react native configuration close this out here and let's close our application and click this add configuration button and in your templates go to react native and click this add icon here we don't need to edit anything here just we need to specify the name and click apply now if we run our app using this debugger menu we got this debugger console last fill yeah it loads on our emulator okay now we have created a new react nature app now let's initialize an amplifier back in for this app open the terminal in your project directory type in amplify init and press enter provide the name for your project amplifyshop and select the ide intellij ide you can accept the default from now on do you want to use an awsome file select yes and select the profile you that you have created earlier okay we can skip this installation process now guys when you initialize an amplifier back in mainly it does three things it will create this aws export.js file in this directory this file will store all the relevant information to identify the aws resources or services that we will allocate in the future it creates this directory called amplify amplifier will store all the templates and configuration details in this directory so that's the beauty of amplify we don't have to worry about any of these json configurations in our project and also this directory will hold our graphql schema as well finally it creates an amplifier project in the aws cloud we can weave that project in database console using this amplify console command so if you type in amplify console here and press enter and select amplify console we can see our amplifier project now we have only created the project so it's just saying created here and we will work with most of the services here now the amplifier back-end framework provides mainly three services we get amplifier libraries we can use these methods from amplifier libraries in order to talk to the back-end resources as an example if we want to use an sd bucket in our app we got storage class from aws and device library we can amplify cli we can use amplify cli to configure all their services we get amplify ui components amplifier provides ui libraries for react react native angular ionic and view we will work with all three of these services now we need to install ambivale libraries and amplifier react native ui components you will find it all bundled up in here so let's copy this and install them using npm now if you are developing in ies you need to install the port dependencies as well okay now it has been installed to use aw services like sg cognito we need to configure amplify in a higher order component so let's do that configuring amplify in our pub.js file or index.js file will do video so let's copy this into our index.js file we can close this out here we can paste it here in here we are importing details about the services from our aws export.js file in here we are sent something like this if anywhere in our project we are trying to save an image store it in this sd bucket s3 is an only one service since we are using cognito authentication and apps api it will do a similar kind of job now that took some time however it is important to understand these things we have created a new react native app we initialize an amplifier back in for that tab now let's add services one by one the first services that we are going to use is cognitive authentication open the terminal in your project directory and type in amplify at dot press enter select default configuration username no i'm done okay now if we type amplify status and press enter this will showcase the changes you have done in your local amplifier project you can see that we have created a new oauth service now to deploy those changes into the aws cloud we can use this amplify push command just like git push this will sync our project with the cloud empty project select yes we can skip this process for now okay now if we go on to amplify console and refresh we can see these new logs just like git comments if we go to authentication here and select this weave incognito button it will open your apps copy to usable at the moment we don't have any uses okay let's use authentication ui components provided by amplify now we have added the libraries using npm now we only have to enter these two lines of code and employer will take care of the rest so in our js file down here at this import we are importing this with authenticator component and when we export our js file we can export it with this width authenticator wrapper this width authenticator automatically detects the authentication state of our application and updates the ui accordingly if we run our app now okay yeah the login screen shows up let's create a new account sign up we need to enter a username password a valid email and we need to add a contact number as well click sign up and we need to add this confirmation code refresh it here and there it is let's copy and paste it in this confirm text box confirm and if we enter the username password and if we sign in we are back inside our app screen just incredible we added the entire authentication for for application with just two lines of code before adding any other services let's add navigation to our app in our blog post if we go up here we got this to screen this home screen which will show all the products and this other screen to add new products let's create two new files to define these screens let's create a new directory called src let's save our files in this screens folder a new javascript file add product screen and another javascript file called home screen and copy this code slipper from the blog post down here copy it and paste it in these two files this is home screen in our add product screen paste it here we need to change its component name into our product screen down here as well and we need to change this into add product now there are multiple ways to add navigation into our react native apps in this tutorial i will use this stack navigator library first we should install this react navigation npm package so open the project terminal and install it using npm and we need to install these third-party dependencies as well copy all of this here and paste it in our terminal while it is installing if you search react navigation and click on this link you should see this guide on how to add react navigation into our react native apps i am using this react stack navigation library now all the dependencies have been installed now if you are using an older version than react native point six you need to run react native link and if you are developing in ios you need to install this for dependencies as well to finish installing the navigation library we need to add this import in our app.js file or index.js file copy it here and let's paste it in our index.js file i will use another two styling libraries as well so react native elements and react native vector icons library let's install those using npm npm installed react native elements and npm install react native vector icons now to use this one tasa michaels we need to add this line of code in our build load gradle file moving to android app build.gradle file paste this right at the bottom save it here and let's close it now in our abdojs file we can define our app navigation replace the current code with this code don't worry i will explain the code clear it all here and paste it we will need this button component later and down here we still have this without indicator wrapper if we were to explain the code we are first creating a stack navigator and we are using this navigation container wrapper as well and we have this stack navigator we can define an initial route name for that and we can define each screen using this component we got home and we got that product so each screen has a name component and options as the component we are passing what we should render in that page and we can use this options property to add custom header now that's what i'm exactly doing here we can define a header title styles and through this right component we can define a button to navigate between these pages in here as well we are trying to navigate into our add product screen using this navigation to navigate and we need to pass the screen name and down here we are using icons as well okay now we can do a test run if we rerun our application and if we sign into our app now we should provide a username and a password yeah we are back in our home screen and when you click this add icon we are in our add product screen and we can use this back button to navigate back to our home screen now in app.js file we are defining our product screen after our home screen since we are using this stack navigation this add product screen will render on top of this home screen now users need to sign up from our app as well now let's add a logout button right here i started using header left property and i have created a logout button in my blog post copy it here [Music] and if we were to clear this on press function just for now yeah we can see our lookout button now on press of this button we need to end users logged in session for that we need this oauth library so let's import it up here import auth from aws amplify on press we should call this or dot sign out method so this logged out users automatically get redirected to amplify sign in page and old class has this sign in sign up methods as well we can use these methods to define a custom authentication flow we won't do that in this tutorial and if we were to test our logout function if we click this logout button we got redirected to login screen if we log back in by entering our username and password and click sign in we are back in our home screen okay now that we added authentication for our app let's add that product saving functionality in our add product screen to save data we need a database as always we don't talk directly to our database we will talk through an appsync rough fuel api okay start by provisioning an app sync api for our project so open the terminal in your project directory and type in amplify add api select draft ql api name you can choose the default and choose the default authorization type into a merchant cognitive pool do you want to configure advanced settings select yes and configure additional oauth types again yes and select api key and press enter enter description something like guest and you can accept the defaults from here a single object with many fields do you want to edit this camera now i will show you how to get there close the terminal so in our project go to this amplify directory in there we have this back-end folder so in our amplify directory we have this back-end folder and move into this api folder as well and we got this schema.draftkill file open it now this is where we can edit our schema so i have a schema in my blog post let's replace it here and we will use this single object model in this tutorial this product model and we don't need any subscriptions that's why subscription are set to null next we have these authors two of them and we have these attributes now with these old rules we state that all the users other than the record owner can access that record but they can only read the record only the record owner is able to do all the operations and down here we are defining our fees for our product model we got id name description price user id username and image now since we store our image in sg bucket this image field will hold sort of a link we are mainly using these three data types string id and float this exclamation mark says that this id and name fields are required save this schema here now we only updated our local back-end now we need to deploy those changes into the cloud so let's do an amplify push amplify push and press enter and are sure you want to continue select yes do you want to generate code yes and select javascript and accept the defaults from here okay we deployed our local changes now in order to view our sync api you can type in amplify api console and select graphql and a new window should be opened yeah it does and [Music] now this is our appsync console you could play around with some graphql operations here i will do so later in this tutorial and since we are using cognito usable as an authorization for a back-end we need to login as a new user in here as well select the client id and you need to enter the username and password okay now i have logged in as a user back in our project let's close this up here in our add product screen we need to add a form to submit product details so we will use this g-com form native npm package now this is a really cool npm package we can use this to quickly spin up a form first let's install it using npm in your project terminal npm install t confirm native now i have prepared this form using tcom from native let's add that into our add product screen replace what we have here and appear this should be important in this returning statement you can see that i am not returning any text form fields here instead we have this form component with tcom we can define our model and the form will be automatically generated so in our schema so in our schema user only needs to enter this name description and price we must pick up use id and username in the background now if we go through this at product screen line by line first we are defining our model here next then we have this true state variable one to retrieve user's input and the other to set initial values into our form not only a model we can pass additional options into our form component so our description text field is a multi-line text field we can achieve a multi-line text input by passing this multi-line property now down here when we tap on the save button this handle submit function will get called now if we leave our form let's rerun our app now we can go to at product screen we got this nice form here now in this handle subweed function we should save users input in our database first let's import this oauth and api libraries along with this graphql operation function import both api and graphql operation function all these imports will be modeled up in this aws amplifier library and guys i forgot to share earlier when we push our graphql schema into aws cloud the graphql queries and mutations will be generated automatically if we move on to this graphql folder and into this mutations javascript file we got the required mutations that we need with our product model create product mutations delete product mutations and update product mutation in our queries javascript file similarly we have all the queries that we need with our product model we have gate product and this products now back in our add product screen we need this create product mutation let's import it import it in the brackets and that's about it for the imports let's update this handle submit function first we need to fetch users input from that form state variables we can do that by calling this form dot git value function so we are passing this state variable as a reference to our form component now since we also need use id and username we need to fetch details about the user who is currently logged into our app we can do that by calling this oauth dot current authenticated user function and we can fetch this user id and username from there we got all the values we need now we can call that create product mutations down here await api.graphql we need to pass in the graphql operation function then we can pass in the create product mutation and as a second argument we need to pass the inputs inputs should be an object with key value pairs what do we need to pass in here first we should pass the name we can fetch the name by calling this value.name and next we need to pass in the price we can get that by calling value.price and description should be valued or description now as user id we need to pass in an unique value to identify our user every user has an unique attribute called sub which is given by cognitive user pool we can get that by calling this user dot attributes dot sub now as the user name we can pass user dot username now since we are calling an another resource there are all sort of things that could go wrong so let's include this in a try catch block for this tutorial i'm only console login the error message hopefully we don't get any errors and let's move this api call into our try book just to see if this worked we can print the response as well we save that in a variable and down here we can print it okay let's recheck just to make sure we are passing all the inputs and at the end we are console login the response oh in here this should be graphql operations i think we are importing a wrong function yeah this should be graphql operations or needs to be capital and down here as well fingers crossed let's return our app to see how it goes if you go to this add product screen let's add a name a price and a description and if we tap on save in our console we can see the response we got all these values image is still set to null because we didn't add that yet and we can use appsync console to check again so back in our appsync console if we run this graphql query please produce query we should be able to list all the products so query list products and list products items name id and use id if we execute this query yeah we fetched our saved product now in this form user should be able to upload an image as well now let's add that image uploading option first go to our blog post and install this react native image speaker library and open the terminal and install it using npm when installing if you are developing in ios install the port dependencies and if you are running on older react into cli use this react nature link command as well okay now it has been installed and one more important thing here guys if you want to use this diagnotic image picker library we need to update the minimum sdk version of our app we can do that by going into this android folder and this build.gradle file and we need to update the minimum sdk version into at least 21. save this file and close it now let's add the third and final resource that we are going to use in this tutorial let's add an sd bucket into our app in our project terminal type in amplify storage this will assign a new s3 bucket into our app select contain images and accept the defaults select all users only and we need to do all the operations as well and do you want to add a lambda trigger select no okay now you know what we must do next we need to deploy these changes into a ws cloud type in amplify push and press enter are you sure you want to continue select yes and we can skip the installation process here as well now we have successfully created an sd bucket to store our images first we need to go into our aws amplify console again select amplify console here as well there we can see the list of resources that we have provisioned for our amplifier app we get authentication api and file storage now click file storage and click this weave in sd now it will open our sd bucket console in the new tab at the moment we don't have any objects let's upload some images and come back here now back into our blog post we need an image uploader component in our app now i did build a fancy image uploaded component let's use that in our project in our src directory let's create a new folder to store our custom components and let's name these components and let's create a new javascript file image uploader and our component paste it here now instantly after selecting an image the user will have a preview of the selected image and we are triggering this handle choose photo function here as well and down here we got some basic styling now back in our add product screen now we want to use that image uploader component in our phone let's add that before the button here and we need to pass this state variable and function into our image uploader component so in here copy this state variable and function and we need to update these imports as well and we will use this storage library as well and we are calling this huddle choose photo function when the user wants to select an image we are saving that image in a state variable in this higher choose photo function you may find something strange here when the user wants to select an image we are setting initial values for our phone now if we don't do that here let me just remove this state variable down here we don't pass any initial values now if we were to test this out let's add a name price and description we don't need and if we select an image when we come back here the initial values are gone that's why before entering our image library we have to set initial values there as well now let's undo those operations now we need to upload that selected image into our sd bucket let's check for an all value first if we have an image since we only get the uri from this image speaker library we need to fetch that image first now in order to upload that image we need to convert that image into this blob format we'll do that wait photoresponse.blog now we can upload that image using this storage.port function in here we need to pass the file name photo to file name and the image in this blue format and finally we pass the content type this should be an image now this will save our image in this debugger now somehow we need to save a link to that image in our database now in amplify we don't save the complete link to our image to access our image file all we need is this image file name so we can save that in our product model photo dot file name and if the user don't want to upload an image we can keep it null so that's about it we are putting our image into a c bucket we are saving that image file name in our database and we are printing the response at the end ok we can test this out now we can add the name i will use headphone price into 40 color into black can we can select an image and the initial values are still there if you tap on the save button now here we can see the response we uploaded the image and we saved the data in our database now install the console login the response here if we can navigate back to our home screen automatically we can do that by calling this navigation.navigate function and pass in our route name and we want to go to home screen and let's comment this out okay one more thing to do here in our home screen we need to retrieve the data and we need to show a product list here okay let's do that for that i have prepared two more additional components this product card component and this product is component let's create two new javascript files to hold these components we get product card and product list now this is our product card component in here we are receiving all these values product name product price owner and image as probes and we are using storage library to get that image and to load a preview and we are calling this get image function when we render our product cart here when we pass the file name to our storage.kit function it will return the url for that file now let's move on to this product list component and we can paste it down here in this product is component we are rendering this fat list now this is the best way to render a list of components in a react native application and we can pass in this refresh control property for each item we are entering this product card component so we will get this product list from our home screen so we are entering a flat list with our product card components we can use this product this component in our home screen now now in our home screen we are fetching all our products let's replace the current code with what we have here in there i am using this list products query retrieve all the products in our database and we are importing our own product list component and we are passing this fetch products function into our use effect and this is an async function we are calling this list products query as well we don't need to pass any inputs and if we have any products we are saving this state variables and we are calling this fetch products function inside this only refresh function as well and we are passing this retrieved product details and this only refresh function into our product list component now let's complete setting up our home screen as well let's run our app if we reload and if we go to our home screen we can see the product card we don't see anything here because we haven't uploaded an image for the product but up here we can see our image price and product title along with the product owner let's try adding another product this time a t-shirt twenty dollars we can add the description color into black and we can select a new image and if we tap on the save button we got navigated back to our home screen now we can refresh this list by pulling down yeah down here we got our t-shirt now if we look out and try to sign up as any views we should be able to see that product list this logo and let's try to sign up as a new user a new username and a password now quick tip guys in here since we use the username as our primary id for our user you can use the same email for different users because it is not the primary attribute for our authentication but if you don't want that in your app you may need to remove the current user pool and you may need to add a new one with your preferred authentication flow now let's set the contact number and if we click sign up we need to add the confirmation code reload and add this confirmation code and if you sign in with the new username and password we can still see the product list now if we go back to our cognito user pool if we refresh yeah we can see our two new users now if we go back to our sd bucket console if we refresh we can see the two new image files now that's about it for this tutorial if we recap on what we have done in this tutorial we used cognitive authentication to our app we added navigation and sign out options we created an app sync api and we saved and retrieved our data using that api and we created an sd bucket to upload an image and we retrieve that image from the asphalt and yeah thanks for watching guys i hope you find this video helpful at this point what you have is a really good starter mobile app that uses aws amplifier as is back in it's not definitely perfect i believe this will be a really good foundation project to start using aws amplifier services if you like this content we post content like this regularly so you can subscribe to our youtube channel to receive future updates and yeah thank you for tuning in

Channel: Enlear Academy

Views: 9,977

Keywords: aws, serverless, amazon web services, amplify and react native, react native project, aws amplify, Crash Course, Examples, Tutorial, Guide, HandsOn, Hands On, React Native, Mobile App, Amplify, React, Step by Step, AWS, Enlear, aws tutorial, aws cloud, aws training, Cognito, AppSync, react native for beginners, learn react native, reactnative, react native tutorial, Building a Mobile App using AWS Amplify and React Native, AWS Amplify and React Native

Id: NqYQ0Muwf3c

Length: 57min 46sec (3466 seconds)

Published: Fri Jan 22 2021