Create an Application Backend in Clicks with the Amplify Admin UI

♪♪♪ Hey, today I'm going to be talking about the AWS Amplify admin UI, which allows you to do backend web development in clicks. So I'm Allie Spittel. I am a senior developer advocate who leads and manages the AWS Amplify developer advocacy team. And I get to work on this admin UI as a part of my job, which I find really, really exciting. I feel really lucky to be able to do stuff. So our goals for today's talk is to build a fun application, talk about some underlying AWS services that go into this admin UI, and then also learn a little bit about Amplify. So first we're going to go ahead and create some data. We're going to model a backend schema. Then we're going to test it out locally. So you can do this stuff without having an AWS account or anything like that. And then we're going to deploy it to the cloud so that anybody could use our application. And then we're going to manage our data using the admin UI. So AWS Amplify is a set of AWS tools that is targeted specifically towards frontend and mobile developers. So I know AWS traditionally has a keynote towards mostly backend stuff, but this is going to make it so that developers like me or you who focus mostly on the frontend could focus on it. And so we started out with the AWS Amplify command line application. So we started out with the AWS Amplify command line interface, which allows you to provision these cloud resources using your command line. More recently, we've also rolled out this admin UI, which is a little bit more friendly to somebody who wants to work in the browser or who wants to use a visual tool to create their backend first instead of starting in the command line. So full stack web development is evolving. So at the beginning of my career, web was going through this transition where we started using more and more frameworks like Ruby on Rails and Django in order to quickly create backends for our application. And before that, it went through this transition where it was no longer static and people started using PHP and cold fusion to plug variables into their HTML templates and make things a little bit more dynamic using database data. And then even more recently, there has been this serverless revolution, which has made it so that you no longer need to manage as much as your infrastructure as you used to have to. And AWS Amplify combines a lot of the developments from frameworks and serverless and brings the best of them together to make web development a little bit easier. And I have a lot of fun working with these types of things because it makes it so that I can build faster. And a new revolution within web development that I'm really excited about is low code. And I think it's a lot of new for developers and can be a little bit of a scary term because it's like, is their job going to go away? Is it going to look radically different? I don't think so. I think we've always been developing tools to make our lives easier as developers, and I see this as the next set of that. I think that we do code generation using these frameworks already. Like if you run npx create next app, it creates a bunch of files for you. Or if you create a new Rails app, it does the same. And it starts to generate your basic template for your app so that you don't need to write the boring stuff over and over again. I think code generation goes a step further than that, where you can provision resources and create schemas based off of this code generation and make it so that you get to work on the fun business logic instead of the boilerplate that goes into app, after app, after app. And it's kind of a solved problem. Like it's fun to work on new things. It's less fun to work on things that have been solved a bunch of times. So that's where I get really excited about low code, where maybe we can have code that writes other code, and we have to do less of that ourselves as developers. So when I think of low code, I think of the tools that are going to allow us to develop in a more efficient way, that we're going to meet developers where they're at, where code is truly being generated. There's not a black box or anything like that. And we make developers' lives easier. So I'm really excited about that. The idea that we can write one line of code instead of hundreds of lines of code, or use a command line to generate some code, or even a user interface. So the less code, the better in a lot of ways as well, because code is really expensive. It leads to maintenance and bugs. And I talk to a lot of startup founders, and the most expensive thing early on is software engineers. And so I think that code is obviously very, very powerful and incredibly important. And I know I've faced my career around it. But having solutions that make it so that you have to write less custom code will make it so that more people can create startups and more people can be developers as well, and maybe evolve who can be a developer. So empowering those developers with less code, and then also thinking about the developers first still within that. And again, this admin UI that I'm going to show you is not this flimsy toy that's not extensible or anything like that. It has the power of AWS behind it. It's got the same services provision that you would use without this tool. And so definitely not a toy. It scales as you do. So if you want to follow along with me, I'm going to go to sandbox.amplifyapp.com. And I did everything with pre-recorded videos so that the demo gremlins don't come out and get me. But if you want to follow along, again, sandbox.amplifyapp.com. And you can access this afterwards in order to start your app. So our first step is going to be to create a database schema. And we're going to use a visual interface to do that. So here I went to sandbox.amplifyapp.com and then clicked Get Started. And then I'm going to select data. You could also start with authentication or storage, but I think data makes a lot of sense. And then start with a blank schema. I'm first going to create a course and then add a title and a description. And both of these will be strings. I'll also create a video. So we're going to create a video course platform of sorts here where there's courses that have videos that belong to them. So the video will also have a title, a description, and then an order. And this time it will be an integer. You can see all the different fields that popped up, like date, time, and all of that. And you can also make fields required by clicking on them and then clicking is required. You can also make fields into array fields as well as if you want to store multiple things. Then you can add relationships between your data. So one course to many videos. So a course will have many videos within it, but you can also make many-to-many relationships or one-to-one relationships. Then you can click Test Locally in your app and you get to pick between different types of applications. So I'm a JavaScript developer. I like React, so I'm going to create a React app. But if you were a web developer, or not web, mobile developer, you could use Android or iOS instead. You could also use Svelte or Vue or just vanilla JavaScript if that's what you're working with as well. So then you're going to install the Amplify CLI and then pull down the sandbox ID. So this is going to link to this test application. And I don't have an AWS account for this step. You don't need to have it or anything like that. This is all just local. It's going to generate code for you. So there's going to be this Amplify directory, and within there, there will be some other files as well. You can see this AWS exports.js. This is eventually going to have all the configuration information in it, but not yet has not been generated at this point. You can also see the models that were generated. These are in the index TypeScript files. So it's nice for developer experience where you can import the model and it will enforce the types on that model. There's also a GraphQL schema that is generated as well, and you can update that locally or within the user interface. It follows a Git-like schema where you amplify push in order to push changes to the cloud, amplify pull to pull down changes that you made in the cloud that you want to have in your local application. So again, everything at this point is just local. No chance of racking up cloud charges or anything like this. It's just on your local computer. So this is using a couple different things. So first, Datastore. So Amplify Datastore is a really cool tool which allows you to leverage shared data that's also available offline. So it's going to automatically sync across users for you if you have a database set up, but you can also just use it to store local data if you want to have offline-only data. It's going to, by default, for WebStore in indexed DB, which is in your browser. The API for that can be a little bit clunky working with it, and so Datastore has this nice wrapper on it where you can automatically sync data between indexed DB and your eventual database without having to do any additional logic yourself. That's backed by AppSync, which is a GraphQL engine on AWS, and so if you like using GraphQL, that's another piece of this as well. Then the data layer is DynamoDB, which is a serverless key-value pair document database, which is a lot of words, but it's really, really powerful and very scalable as well. You don't need to know about any of these. You don't need to be an expert at any of these technologies that are all being used behind the scenes. I just wanted to mention them because it's not magic. This is what it's being backed by. So the next part is to actually link your back-end into your code. So let's go ahead and do that. So I call this copy and paste-driven development because you can go in and see these code snippets that are generated by Datastore or by the admin UI, and it will show you how to, for example, create a new course. So we'll create a form to add a course. We'll have a button here and then this add course, or this add course function here. We'll import the course model and we'll also import Datastore, and then we'll copy and paste this course snippet of code. And so in order to create a new course, you'd have to have a title and a description, and then you could have videos belonging to it, but we'll save that for now. We'll just have it so that the course has a title and description. And my favorite hack for demos is to use window.prompt instead of creating a full React form, so we'll just use this window.prompt and we'll create a React course. Then you can go ahead and import useEffect from React. And then we will add this useEffect hook so that we'll pull all of our data in on page load. Got to always remember that empty array so you don't get memory leaks or an infinite loop. Definitely have crashed my browser with that a bunch of times. So we'll do the function within a function here with useEffect. And again, if you don't know React, you can use Vue or Svelte or vanilla JavaScript instead. I just am most comfortable with React. It's like what I use as default. So I'm going to then query Datastore for all of my courses. The API looks like this, datastore.query for that course. And then you can see that now there are two models in there, my React course and then another React course. So this is what the Datastore API looks like. And that's all that I needed to do in order to access this offline data. And once I deploy it, it'll be automatically synced to the cloud. So the next step that we're going to do is exactly that. We're going to deploy it to AWS. And so we go back to this test locally in your app page and we'll click deploy to AWS. At any point, you can also go back to the model tab and tweak your model if you want to. And then you just need to rerun Amplify pull in order to get those changes in your app. So if you're using a new model, you can just go back to the model tab and you can just go back to the model and you can just go back to the model and you can just go back to the model and you can just go back to the model and you can just go back to the model and you can just go back to the model and you can just go back to the model and you can just go back to the model. And then you can just go back to the model and you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And then you can just go back to the model. And you're going to get this admin UI. You can go to the data tab to go back to your data model. You can update it here. And again, you can run amplify pull to get any changes that you make on here locally in your app. And if you change the GraphQL schema locally in your app, you can run amplify push to deploy those to the admin UI. You can also use this interface for adding courses and videos as well. So if you don't want to write forms in your own application, which I often don't, you can use this instead. And it has a markdown editor as well if you want to use that. I know that as a software engineer, I oftentimes had to write one site that was for end users, and then one app that was for the admin users. So maybe the client themselves or something along those lines. And so this subs in for that. So you can just use the admin UI instead of having to create that second admin account. You can give anybody access to that. And so you can see that I pulled down my production version of the admin UI here. Sorry, the production version of my back end. I reran amplify pull and got it locally in my application. You can also give both technical and non-technical users access to this admin UI. So you could give a technical user full access or a non-technical user just access to the data itself. So if you don't want them to change the schema, you can just give them read-only access. The next step is to manage your app, and you can add, auth, and manage your data in this step. So if you go to enable authentication within the admin UI, then you're going to be able to add authentication for your app. So there's different options here. You can add in social authentication, phone number, Facebook, Amazon, all those. You can also enable multi-factor authentication. And then you can also pick additional information that you want to get from your users. So if you want to get profile picture or something like that, you can store that on the user as well. Then you can save and deploy, and that will deploy the changes, rerun amplify pull in order to get those changes locally. And you can see that authentication was now deployed. Now I'm going to install the AWS Amplify UI React components. So this is going to allow me to enable this in my app. So with authenticator from AWS Amplify UI React. And then it's a higher order component, so I'm going to wrap my app component in it. And now I have to log in in order to get to my app. So I'll create a new account. I will hide it, though, so that you all don't get my email and my phone number, but once you do, you can see that there are user accounts within. Here you can create temporary passwords so that you can create users via an admin process as well. So again, if you wanted to have some sort of administrator doing this instead of doing it through the application, you can do that as well. You can also create user groups. So if you wanted to have an admin group or something like that, you could do so. You can also add authorization rules, which is one of my favorite pieces, because as a developer, it can be kind of a nightmare to implement this yourself. So you can make it so that anybody could read that data, but only the owner of that data can update and delete it, for example. So that's a really nice feature as well. So behind the scenes, this is using Amazon Cognito, which allows you to add user signup, sign in, and access control to your web app. And you can add a two-factor or social auth as well. Then the last thing that you can do is extend all this with the Amplify CLI. So there are other resources that you can use, like Search Engine, which is a really great resource for you to use to do custom business logic. There are other resources that you can use, like Storage or Predictions. Storage allows you to host static files. So if you wanted to have images in your application or something like that, you can use Storage for that. You can also use AWS Lambda functions to do custom business logic. You could use Predictions in order to add AI ML-type things to your app. So you can do that in that category, so Amplify add Storage, and then you add the code to your application. So this is forwards and backwards compatible with the Amplify CLI that you may be used to if you've used Amplify before. So if you want to learn more, you can go to docs.amplify.aws. And if you want to ask me any questions, I'm aspittle pretty much everywhere on social media. Discord.gg slash Amplify. Also, we're hiring. So if you're interested in working with us, amazon.jobs, you can search for Amplify. Would love to see any applications come in. Thank you so much for attending. This was really fun. So from the developer, what is your knowledge of the cloud? And the winner is, ta-da-da-da, enough to be dangerous with 66% and no knowledge with 32% and 2% are experts. What do you think about this, Ale? Is this surprising or this is, yeah, what you were expecting? There you go. I mean, I feel like that's a lot. That's more than I expected. But it's really cool that so many front-end developers are getting into the cloud. Yeah, it's exciting. We hope more front-end developers go into the cloud because it can be super interesting. Yeah, for sure. So we have. Why are you excited about low code? I'm excited about low code because I think it's just this progression in my career of us moving to these frameworks that have better and better developer experience and allow developers to do more and more, whether that means the opinionated frameworks like Ruby on Rails or Serverless or any of these things. And as somebody who used to teach code, it's my full-time job as a developer and as somebody who used to teach code as my full-time job, I was a bootcamp instructor for three years. It's hard to learn how to code. It takes a huge on-ramp, and there's so many different things for you to learn. And so if we make that easier and easier and make it so that there's more of a visual component of that, so more people can be builders, that's what excites me, this idea that we can expand what it means to be a developer, and we still need to meet developers where they're at. And there's this idea of code generation where you have code that writes other code, and that's a huge part of what Amplify does. And so if we can use a visual interface that allows people to behind the scenes write real code, I think that that's really cool and a really big progression in the world of development. Yeah, and it also makes things more accessible for people, and it's more fun in a bit like low code. And another question we have for you is, can you talk a little bit about the Amplify SSR launch? Yeah, so last week, two weeks ago, time is so hard to measure. We launched a server-side rendering support for Amplify. So now you can both host server-side rendering apps, and behind the scenes a Lambda at Edge function is created that runs the server side and acts as your server, though it's serverless. So I find that kind of funny, like you have the serverless server. Anyways, well, behind the scenes serverless has servers. You just don't have to worry about them. But we also have a bunch of the user interface components that can also work on the server side, so authentication and some of our data components as well, which allows you to build these super performant web apps using something like or using Next.js. And it makes it so that the end user gets to use, gets to essentially use HTML, but you get the great developer experience of JavaScript and React and all of those things. So I'm excited about that. Yeah, sounds very exciting. The next question is from Lietchi. Great talk and well explained. It looked quite similar to Firebase. What is the main benefit of using Amplify over Firebase? Yeah, I would say that behind the scenes, everything is AWS. And so you have a DynamoDB database that is provisioned in the AWS console. And so if you want to do something custom with DynamoDB, you can go straight to that and customize it from there. The same thing with Lambda functions, the same thing with S3 and all these things. They are the full AWS services under the hood. There's no additional layer of abstraction or anything like that. You can go directly within the AWS console and use these resources, which leads to a great extensibility story that it's healed with you. You don't never have to move off of Amplify if your project gets big enough. So I think that's one of the huge benefits. I would also say that our GraphQL service is really great as well. It allows you to interact with your data using that format. And so I'm excited about that as well. Yeah, nice. So people should try Amplify. And the next question is from Joanna White. How does it work with branching and source control? Yeah, so there's great environmental management built into it. So you can have multiple branches and have different environments within those branches. So if you want to have like a production environment and a test environment and a development environment, you can have those different environments and then you can merge them. So you have different resources provisioned within those. And you can still use your Git branches. You can work with multiple developers. All of that is built in. There are bunches of articles about this within the documentation if you're interested in learning more. Also, there's the front-end hosting component, which I didn't talk about too much in this talk. But with that, there is the ability to redeploy every time you push to GitHub. So that's a really nice feature as well. And you can have multiple branch deployments as well. Thank you. Another question is, is there a component when setting up TOTP that generates the QR code image? That's a great question. That sounds like something that's a little bit more mobile-specific, which is a little bit outside of what I do as a mostly JavaScript person. That being said, there is the ability to get in there and write your own custom authentication code within a Lambda function. And so I'm sure you could implement something like that within there. Thank you. I think we don't have any more questions. Oh, no. I have one more question. Can you please talk about more functions in general? Which step is the process of using the application would a user be able to add functions? Would all of these be performant? Yeah, so they would just work the same as a normal AWS Lambda function. So the performance would convert over from that. You can add them at multiple stages. So it's event-driven. So you can make it so that the function triggers whenever somebody hits a URL, for example. It would use API gateway in order to be able to do that. You can also have Lambda triggers based on a different event. So, for example, a user is created or an item is created in the database, and you can configure all of that as well. You can also build a full REST API within a Lambda function within Amplify if you want. So what you can do is amplify add function in the command line, and then you can write your custom code within there. You can use a couple of different languages, so Node.js, Python. There are a couple others supported as well. Those are the two that I've used, though, Node.js and Python. So that is how you would use those. You could also do Amplify update auth, for example, in order to add a Cognito trigger to your authentication flow. Okay. The next question, I think the last question as well, how is offline sync done with IndexedDB and DynamoDB using Service Workers? That's a great question. So I'm not sure exactly how that's working, but the middle layer is AWS AppSync. So it's a GraphQL engine that is doing the syncing between the two. So IndexedDB, again, is in-browser storage, and it allows you to store more than something like local storage, and then a layer back from that is AppSync. AppSync is the GraphQL layer. It is going to automatically sync the data online and offline, and then behind the scenes from that is the DynamoDB layer. So hopefully that helps a little bit. Well, thank you, Ali, so much for this great talk and for these great answers. I hope a lot of people learn a lot from you. So go ahead and join Ali in his speaker room on his special chat. The link to join is in the timeline. Thank you, Ali.