AWS Amplify Admin UI - Hands On Tutorial

hello everyone welcome now this episode is about a new announcement from aws amplify team now in 1st of december 2020 at reinvent they have launched this new feature admin ui for aws amplifier now with admin ui you can allow your team members who do not have direct access to your aws account to manage content and configure resources for your amplify applications now admin ui is a new interface guys so there you have a section to manage the content and also set up and configure backend resources for your application so you can invite users who do not have aws account access either to manage the content and the uses of your amplify applications or you can provide the full access they can both manage content as well as set up and configure backend resources so in this episode i will create a new application called bookstore and show you how we can use admin ui to invite a new team member who do not have access to aws and allow him to manage and set up backend resources so let's get started all right guys so let's go to aws amplifier so i will search for aws amplifier and go into that and here i can just get started then i can either choose whether i need to develop the back end no i just have to host my web application well i have to develop my application first so i will just click get started here let's give it a name i will say my app base bookstore not sure if the hyphens are allowed let's say yes hyphens are loud so it will take some time to create the admin ui for you after that you can manage the entire application from the endpin ui so let me fast forward amplifier has created the application so now i get to choose whether i need to deploy the front end or the backend so i'll go to backend and then i can just click open admin ui now this is a separate application outside aws if i click here i can sign out from this application and in the same time i can add more users to this application so how can i add another user who does not have an aws account access but still again i want them to manage my application so in that case i can go back to aws amplify console now here i need to be inside aws first because i'm the one who invite those users then in the left sidebar i can see admin ui management click on that now here's the place i'm inviting other users so i can click invite users here i need to add the email address now this email address does not have to be linked with an aws account it can be anything because these users probably do not have aws account access so let me get a 10 minutes email copy this and go back to my aws amplify console i invite this user now i can decide whether i should give them the full access permission or just to manage the application users and the content now for this guy let's say i need to give the full access now he could be let's say a temporal team member or he could be intern or anyone really but i want him to work full time on my project so then i will send the invitation so here i have got an new email so i'll click on that so now i got the password that's great so let me open another browser safari so i'll click and copy the link to the amplify admin ui and paste it here and hit enter and by the way guys right now this admin ui url is little ugly but as soon as you set up a custom domain for your application then you can access your domain with that custom url let me show you in the documentation if you can see let's say you have this https example.com as your custom domain if so then you can add slash amplify slash admin ui as a suffix and then hit enter then this admin ui will show up so i'm in my safari so let me go to my 10 minutes email and get the username and also the password sign in i would enter a new password here you go the invited user is now logged in now he can see the application really he can manage the content users as well as he can set up all the backend resources because we have given the full access so i'll leave this user logged in in safari and i'll go to chrome where i have logged in as the user who created this application now let's look at this interface now this admin ui allows us to create the backend resources and manage the content so you can see under the setup section we can set up the data that means we can set up all the data modeling in our application authentication and authorization lambda function if you are using in the application the storage this could be s3 dynamodb or any other aw storage that we use we can configure through this and here the apis if you are using graphql api with appsync we can use that rest api here analytics prediction and interactions now these are all categories supported by aws amplify earlier we could configure all these things in aws cli still we can but now they started migrating the management of these categories into the admin ui one by one so at the moment we can manage our data modeling that means we can define our entities and define relationships and authorizations and also we can create user pool the authentication aspects of it that can also be managed through aws admin ui but functions storage graphql apis so these things think we still need to use aws cli at least to provision them first but i believe the amplified team will add all the support for all the categories in the future now still admin ui is in beta so let's go ahead and try this out so our application is bookstore so let's start creating some data models for bookstore application so this is the place we will start defining the entities for application so i will go to data section and i will click add add a model so the first model in our application is a book because this is a bookstore application so first we need to store the data about a particular book now you can see from the ui we can easily add fields associated with the book and i will first add the field of a book that is the title and that is a required field then description that is a string again and price price is type of float add another one author so that is also a string and i'll add another field is featured whether this book is a featured book or not now this is the boolean type field so i select boolean and i think this is enough for the fields for the book model so let's create another model so now this is the online bookstore so the users will create orders or the book coders so let's create another model and we'll call it folders or order rather and we get this default id field and i will add another field for the order and let's call this date and that is of type aws date which is this one and let's add the total and that is again the float type and i'll add another field user or username rather the username of the user who is placing this order okay great so we have two entities so the two models defined for bookstore application now we can define some relationship between these two for example a book can be part of multiple loader and one order can have multiple books so that's a one-to-many relationship in both sides so that's a many-to-many relationship so i'll go to book or i go to order whichever the case in this case i will go to book and i will click add a relationship and here i have to select the related model i will select order and then i have to pick the relationship one book to another order or one book too many orders and in our case it is many big book to many orders then i can define the relationship name i will call it orders and save it and here we go so it has added these order's relationship and that's a middle-to-mean relationship and if you scroll up the order has also got a relationship set up and the relationship names is book so order has books and the book has orders and next we need to add some authorization logics to our books and also to our older models so why do we need that for example the admin user can create books into our bookstore and the signed in users should be able to weave the books and when it comes to orders the signed in users can create an order so in order to set up the authorization rules we are going to use aws cognito user pool currently the authorization mode is set as api key but we cannot create granular authorization rules with api key instead we need to use aws cognito user pool authorization but right now it is disabled because we do not have a user pool created for our application so i will select authentication here so this is the place we can create a user pool so our users can log into our application through the user pool first i need to configure the login i can either facebook google amazon login or i can just have a normal login screen so i will just click add login mechanism then i can enable or disable the mfa or multi-factor authentication it is disabled at the moment and when the user is signing up we can define what attributes that he should fill for example when he is signing up i need his name then i can use that as a username in our application now all these settings can be configured when creating a user pool and amplify admin ui gives us a nice ui so we can create it from admin ui itself save and deploy so i'm going to deploy the authentication configuration which will create a user pool for our application and i click confirm so you can see now it is been deployed and if i click on this i can see the resources that the cloud formation is provisioning in our aws account i will fast forward until our user pool is deployed all right so the deployment is successful now i will go back to my data section where i have defined these two models and let's click books and i will select the authorization mode drop down now i can see the user pool is enabled so let me click here and change the authorization mode to user pool i will type change and confirm okay so it is now changed to user pool so now what i can do is i can set up authorization rules so let's set up authorization rules for the book i'll select this one and from the right side i will first allow admins to do all the operation for books like creating deleting updating and everything so let's create a separate group now i will click group here and this is going to create an new group in user pool and i'll clear create a group and i can see it here now users in the admin group can read books but now i need to allow them not just reading but also creating books updating books and also deleting books perfect but what about normal users now for all the signed in users so i can just select any signed in users they should be able to really read the books or they should be able to view our book catalog and i have another requirements that means i don't want users to log into my online store and see the books even anyone who just visit my online store they should be able to view the book but for that i need to set up multiple authorization modes for our books entity but at the time of this recording the amplify admin ui do not support multiple authorization modes you can do that anyways from the amplify cli but you can't do it from the ui yet so let's leave it as it is i will just allow my admin users i don't know why this is unticked so i will select them again so all the users in my admin group they can do everything but the sign-in users can only read so these are the authorization rules for the book and i will select orders as well and for orders i only want my signed in users to create orders and also view their orders so that's the only role i am assigning there so this look great so i will go ahead and deploy my application schema to aws so now admin ui will use aws cloudformation to create an appsync api and also it will create appsync schema based on the entities or the data models that we have defined so let's wait until it is deployed i will fast forward all right so my data model is now deployed so aws has now created an app sync api and also it has created schema so i can query data and also run mutations now how can we connect this back in with our front-end application now as the first step let's set up all this configuration locally so here you can see the local setup instructions now we have created this amplify application we can pull all the configuration that we configured so far using this command amplify pull command with the app id as a flag i will copy this one and i will go to desktop and create a new folder let's call it bookstore cd into bookstore and open it in visual studio code so right now there's no front end code added so let's use create react app to spin up a react application i will type in px create react app and we'll call the application bookstore okay so the react app is created let me cd into bookstore now i need to connect to my vacuum resources like my appsync api from front-end for that i need to pull the configuration that i've already set up from admin ui now in order to do that we can use this command which will pull all those configuration but before that i need to install amplify now there's this another link for amplify installation instructions you can use curl and then install amplify globally so i can just copy here and paste it in and hit enter or else you can also use npm you can just use npm i dash g aws dash amplify cli and hit enter so i've already installed it now let's pull the configuration i'll copy this url and paste it hit enter now it should authenticate me first with amplify admin ui because remember this could be done by another user who do not have access to aws so there's a federation going on so he needs to first login to the amplify admin ui then i can interact with aws so he need to first login to the amplify admin ui and get authenticated so i'll just say yes so i am being authenticated so i am now successfully logged in to amplify admin ui now i can return to amplify cli so when i am returning to that you can see it has already found the bookstore application now i can set up so first i have to choose my editor that is vs code javascript and react i'll just use the defaults now these are the defaults for react app just accept everything then it is asking whether am i planning to modify this plug-in say yes so now it has fetched all the configuration from my backend app now you can see there's a new folder called amplify has been created in that you have another separate folder called backend in that we can see the api that we have defined with the appsync schema and also the user pool that we have created with aws cognito so let's go to api and in that we can see the graphql schema so let's open that up and here i can see the entities that i have already configured in the admin ui the book entity with the attributes that we have defined and also the order entity and we can see the relationship that we defined the order has many books and the book has many orders now it has automatically created the third type called book code which is used to set up the many-to-many relationship between old and books now here are my authorization rules that i defined so i am allowing the group admin all the operations create read update and delete and also i am allowing the logged in uses only the reading operation now let's imagine our team member who do not have access to aws want to do some change to the book entity i will go to safari because in safar if you can remember we logged in as the other user who do not have access to aws let me refresh it now even though he does not have access to aws he can use this admin ui let's say he can go to data and he can modify the schema so let's go to this book entity and let's add a new field now he needs to add a new attribute for the image url of the book so he will add this attribute and he will set it as the aws url data type and then he will save and deploy it deploy so it is been now deployed all right so uh now the new change is now deployed to aws and it has updated the appsync schema and the upsync api but now those changes are not visible yet in our local development configuration so how can we pull those latest configuration that is updated by the other user we can just take the integrated terminal and we can do amplify pull now have a look at this at the moment we don't have that image url field but if i do amplify pull so the pull is successful and you can see the new attribute image url is synced so what about the other way around guys so if i do some local changes will they be reflected in amplify admin of course yes so let's try that out let's add a s3 bucket to store our images so if i go to storage section so it is asking me to use amplify add storage cli command so i will copy that and from my local machine i will just paste that command amplified storage and hit enter so let's use content because we are creating history bucket and i will accept the default for the bucket name and it can only be accessed by auth users because our application is not currently work for guest users since we have not configured that multi-auth functionality so i will just select both users and authenticated users can create read and delete images or files hit enter all right so next i will do amplify push to push my local changes to aws continue all right so the resources are now updated in the cloud so if i log into the amplify ui of the user who do not have access to aws then i'll do a refresh here so that user can go to storage and when he go there he will see the resource that was provisioned and pushed by the user who has access to aws so here he can see the resource name and the last modified time and maybe in the future amplify team will add more information about the resource even for the user who do not have access to aws so what else this user can do now currently this user can go to the content section and he can add data to our tables like the order table and the book table now if i click book table you can see there's an interface and also there's a button to create a book so he can just create a book and he can fill up all these attributes he can link the book to a order and so on and also he can add an image url and then he can save the book there you go so this user do not have access to aws but through the admin ui he can create books or he can like manage the orders as well and in the same time he can go to user management section and manage the users in our bookstore application now these users are the users of our bookstore application so he can create a user and here you go and also he can go to a particular user and either delete his account or suspend his account he can mark the email of the use as verified and give it a name because if you can remember you asking for a name and this user has not entered the name and he can also go ahead and add this user to the admin group and he can do all of these things without logging into aws so this is what i want to show you in this video and amplify admin ui really is the management of your mobile application or web application by allowing your team members who do not have aws accounts to manage your application content users in the application as well as with full access they can create back-end resources and configure them as well thanks for watching i'll see you in another video

Channel: Enlear Academy

Views: 4,545

Keywords: admin, admin ui, admin ui amplify, amazon web services, amplify, amplify admin ui, amplify admin ui example, amplify admin ui tutorial, aws, aws amplify authentication, aws cloud, aws lambda, aws reinvent, aws reinvent 2020, aws reinvent 2020 announcements, aws sqs tutorial, configuration, configure, dashboard, demo, examples, hands on, lambda, manoj fernando, reinvent 2020 announcements, the first look at amplify admin ui, what is amplify admin ui

Id: kVzQiCni1jI

Length: 24min 12sec (1452 seconds)

Published: Sat Dec 05 2020