Introducing the AWS Amplify Admin UI: Create an Application Backend in Clicks

earlier this week my team launched this admin ui for ews amplify and i wanted to do a tutorial on building an application with it so i'm going to build a blog out with posts and comments i'm at sandbox.amplifyapp.com and i'll link all these things down in the description but i'll click get started on this left hand side for creating an app back end and then i'm going to start with data and click there i'm going to start with a blank schema so i'll just select this one but if you want to start from somewhere you can select to-do list or a blog here then you can click add to add a model and i'll do post with content and title because each blog post will have text and a title associated with it i'm going to reorder those as well and then i'm going to also add a comment and for the comment i'll add text and author i'm going to add a relationship between them because i want my post to have comments and one post will have many comments i'll just name it comments with a lowercase c i can also make these fields required just by focusing on them and clicking is required so i'm going to make it so that text and authors required and title and content are required you can also make them into an array so if i wanted to do like a tag or something along those lines i could make that an array field once i do that i'm going to click test locally in your app so i've done all of this so far without an ews account and you can keep working without an aws account and test this all locally this back-end that you just built the schema out for um it's also going to give you instructions for integrating your backend into different platforms so there's web ios android and then there's react angular view it can pre-select on web react and that's where i'm going to stay just because that's what i do most but if you do mobile or a different framework feel free to select one of those and you'll get specific instructions for that framework i'll say next then it gives me instructions for creating a new react app so i'm going to go into my terminal here and i am going to create a react app and i'm going to call this amplify admin blog you can use whatever app name you want that makes sense to you okay and then i'm going to cd into that directory that was created if you're just getting started with react i have a full tutorial on that and i will link it in one of the cards on the screen just so that you can get a basis and react before doing this but again if you're more comfortable with different framework almost all of this applies other than the react specific code so the next step is to install the amplify cli i already have it installed so i'm going to skip over this step but if you have used the amplify cli before to create an amplify app it's the same so it's really nice that you can still use all of those same features and extend your app using those i'm also going to run this amplify pull command with this sandbox id and this is going to link my front end to my back end that i just created through this admin ui there are two dependencies that i need and i will go ahead and install those aws amplify will give me access to a bunch of functions and such that i can use to connect my app to amplify more easily and then typescript is required because the models that are generated are in typescript so uh that's just required for this react app i'm going to open up my text editor and also start my react server so once i'm here i'm going to go ahead and open up my index.js file and you can see that there are three lines of code to copy and paste in this will configure amplify for my project and then for now i'm just going to work with the post model and what i'm going to do is copy this create here i'm going to clear out what's already in this app file and then what i'm going to do and this is a sneaky work around that i just learned from one of my colleagues it's really smart is to use window.prompt instead of building out your own forms for demos so i'm going to go ahead and do that so what i will do is create a button here so button create post and on click i am going to create post i'm going to create a function here and i'm going to create a object to store this new post that i want to create so cost post equals content window dot prompt blog post content and i'm also going to add the title and so now it's just in that post object but what i'm going to do is you can see that there is some code that's generated for you back in the amplify window so i'm going to copy this and [Music] i am going to instead of this object here just use that post that i created right there so it's going to await datastore.save with my new post and i'm going to need to make this asynchronous awesome so now that that's done so i'm going to store that to a variable to make sure that this is working i'll open up my console here and create a post and click ok and you can see that one came back so that has been stored to my back end right now it's not deployed but under the hood this is using amplify's datastore and datastore is going to make it so that you have an offline and online api that syncs between your users so this is really helpful especially for like mobile development when you want your app to have data accessible offline again for now it's just local i haven't deployed it yet i also want to make it so that when my page loads i get a list of all of the posts that are already created so i am going to add a use effect i'm going to import use state and use react i'm going to pass an empty array to this and what i'm going to do is switch over to this query sample right here and copy and paste this code i'm going to need a inner function that is asynchronous so use effect is going to run on page load it's going to get my posts back and then i'm going to set posts with those models that came back from that epi call let's see how that works i'm going to use my reactive tools to look at this there's only one and it says my test post in my test post and that's just the one that i created here so i'm going to loop through these and display them on the page so now each one of my posts going to render on the page i added a real blog post as well just so you can see that too but just like that we have tested our back end locally we have set this up so that we can create a new post and we can pull all the posts down and this is working without an aws account without deploying us or anything like that so we're still local what i'm going to do now is go ahead and deploy this so i'm going to go back to the amplify admin also if i wanted to change anything in my model i could i would just need to change it right here in this data modeling tab and then go back to here and rerun that amplify pull command so this one right here with any of my changes so once i have an api that i like i'm going to click on deploy and i have an aws account but if you need one it'll guide you through creating a brand new one so i'm going to log into that and right here you'll see that you'll be asked for an app name i am going to call this my amplify admin blog and you get to pick uh ews region for this i'll do us east one but you can choose from all of them if you're not familiar with this concept you essentially want to pick the one that's closest to your users so you can set this up in the future so that it actually uses multiple regions but for a small app that nobody's really going to use you can just pick one for now especially in development and i'm going to go ahead and deploy this it will take a couple minutes to do this i'll also link in the description more information about those regions and a map of them so you can see which one to choose okay and it's deployed so i'm going to go ahead and click on this open admin ui right here also i want to mention that underneath the hood this is using all aws resources so datastore is using appsync and dynamodb and for authentication you're going to have access to aws cognito so all of this is really powerful and you get the same access to the the services and you get the same access to these services but with a lot built in and given to you so you don't have to set everything up from scratch yourself now that this is deployed i'm going to click view data model and you can see that my data that i created before is here so i've got my post and my comment i also have the ability to manage app content so you can actually add content to your application directly in here you don't need to necessarily build out a whole interface and if you're adding like seed data or something like that this could be a really good way to do that it also has a markdown preview tool so if you're using markdown for a blog or for content on your app you can get a preview of what it's going to look like here which is really nice you can even create and link two comments here and now this is deployed so anybody can use this version of your back end the next thing that you can do is enable authentication and again this is powered by cognito under the hood it's going to give you by default email but you can also configure a phone number or facebook or google or amazon or anything along those lines you can even enable multi-factor authentication so it could be off enforced or optional you can also add additional attributes you want from your customers and set different password policies i'll go ahead and save and deploy this it's going to take a few minutes to get that live so now that's deployed i can manage my users and groups similar to how i was able to manage my data so i can click create a user and add a password for them you can also create user groups so i will create admin and add a user which i'll just add that hello at amazon user i can go back to this data i can actually add authorization rules based off of those user groups so if i change this to cognito pools and do change i can make it so that only owners can update or delete their comments any signed in user can read comments and admins can delete or read comments you can really fine tune who can do what with your data and once you're done with that you can click save and deploy one other quick thing that i want to show is that you can give users without an aws account access to this admin ui so if you go back to this page you can click admin ui management and then invite users and then you can add users to this admin ui they do not need an aws account they don't need to create one they don't need to have one nothing like that you can give them either manage only access which will give them just access to app content so just those create edit delete all that so once everything is done deploying one thing that i need to do is i need to make this hook up to my deployed back end instead of my sandbox one so i need to rerun this amplify pull and it's going to have this pop-up and i just need to say yes it's going to ask me my default text editor which is vs code i'm building a javascript react app and i'm just going to do all the defaults i am going to modify my back end amplify has these react components that you can use they have them for other frameworks as well and i'm going to install this and this is going to allow me to have it sign in and sign up and all that without me writing it from scratch so that's pretty nice so i'm going to wrap this app with with authenticator which is a higher order component and adding this in is going to make it so that when i get to this home page i can sign into my account but if you have a developer that you want to give access to you can click full access and that will allow them to have full scope and edit the schemas and all that and just like that i have an application that has data it's deployed on aws and it has full authentication built in so this was a tutorial on how to get started with this admin ui i will link in the description my full app that i built with this it has like the comments as well and react router and the styling and all that just not part of the admin ui so i'll skip that for the sake of the tutorial but i would absolutely love to hear what you'd like to see from me in the future as far as showing this if you have specific demo ideas or questions or feedback please leave them below or feel free to reach out to me elsewhere on the internet thank you so much for watching and see you next week

Channel: Ali Spittel

Views: 6,685

Rating: 4.9396987 out of 5

Keywords:

Id: iabegXf05DE

Length: 18min 11sec (1091 seconds)

Published: Thu Dec 03 2020