Create an Application Backend in Clicks with the Amplify Admin UI

Rate this content
Bookmark

There's a lot that goes into building a modern application: the frontend for users, data persistence, user authentication and authorization, business logic, cloud deployment, and much more. The AWS Amplify Admin UI allows users to create and deploy an offline-ready application backend in clicks and then extend it with code, lowering the complexity of fullstack development for frontend and mobile developers. We'll build a fullstack application backed multiple AWS services including Cognito, Appsync, and S3 in minutes.

Ali Spittel
Ali Spittel
29 min
10 Jun, 2021

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Today's talk introduces the AWS Amplify Admin UI and low code development, which aims to simplify backend web development. The AWS Amplify Admin UI is a powerful tool backed by AWS services, allowing users to create a database schema visually and test locally. The Amplify CLI and Datastore enable developers to link the backend to their code easily. Low code development in Amplify makes coding more accessible and fun. Amplify offers benefits such as direct use of AWS services, extensibility, and excellent GraphQL service. Other interesting topics include server-side rendering support, environmental management, and support for Node.js and Python in AWS Amplify.

Available in Español

1. Introduction to AWS Amplify Admin UI and Low Code

Short description:

Today's talk is about the AWS Amplify Admin UI, which allows for backend web development with ease. AWS Amplify is a set of tools targeted at front-end and mobile developers. It combines frameworks and serverless to make web development easier. Another exciting development is low code, which aims to generate code and reduce the need for repetitive tasks. This revolution in web development will make developers' lives easier and more efficient.

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 Alyse Fiddle, 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 so.

So, our goals for today's talk is to build a fun application, and 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 step 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 front-end and mobile developers. So I know AWS traditionally has keynote towards mostly back-end stuff, but this is going to make it so that developers like me or you who focus mostly on the front-end could focus on it. And 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 back-end first instead of starting in the command-line.

So, full-stack web development is evolving. So at the beginning of my career, the 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 back-ends 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 feel 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, 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.

2. Creating a Database Schema and Testing Locally

Short description:

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 be developers. The AWS Amplify Admin UI is not a flimsy toy, but a powerful tool backed by AWS services. To follow along, go to sandbox.amplifyapp.com. Our first step is to create a database schema using a visual interface. You can add fields, make them required, and create relationships between your data. Finally, you can test locally and choose the type of application you want to create.

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 can 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 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.

3. Installing Amplify CLI and Exploring Datastore

Short description:

If you're a mobile developer, you can use Android or iOS, or other frameworks like Svelte, Vue, or vanilla JavaScript. Install the Amplify CLI and pull down the sandbox ID to link to the test application. The Amplify directory contains configuration files, models, and a GraphQL schema. You can update the schema locally or in the user interface. Amplify Datastore allows you to leverage shared data offline and automatically syncs across users. It uses IndexedDB by default and is backed by AppSync and DynamoDB.

But if you were a 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 type script 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 of 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 IndexedDB, 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 IndexedDB 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.

4. Linking Backend to Code

Short description:

You don't need to be an expert at any of these technologies. The next part is to link your back end into your code. It's called copy and paste driven development because you can see the code snippets generated by Datastore or the Admin UI. It's cool that many front end developers are getting into the cloud.

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.

One thing about this, Alie, this is surprising or this is, yeah, what you were expecting? There you go. 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.

5. Excitement about Low Code

Short description:

I'm excited about low code because it's a progression in my career, making it easier for developers to code and be builders. Code generation is a huge part of Amplify, allowing people to write real code using a visual interface. This makes development more accessible and fun.

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 develop their own code. 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 as my full-time job, I was a boot camp 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 the low code.

6. Amplify SSR Launch

Short description:

Amplify recently launched server side rendering support, allowing you to host server side rendering apps. Behind the scenes, a serverless Lambda at edge function is created to run the server side. This enables the use of user interface components like authentication and data components on the server side, resulting in super performant web apps. Users get to interact with HTML while developers enjoy the benefits of JavaScript and React.

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 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 a 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 those things. So I'm excited about that.

7. Benefits of Amplify over Firebase

Short description:

Amplify offers the main benefit of using AWS services directly without any additional layer of abstraction. You can customize DynamoDB, Lambda functions, and S3 directly from the AWS console. This leads to great extensibility and you don't have to move off Amplify as your project grows. The GraphQL service is also excellent for interacting with data.

Yeah, sounds very exciting. The next question is from Iechi. Great talk and well explained. It looked quite similar to Firebase. Why 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 heals with you. You don't never have to move off of the 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.

QnA

Branching, TOTP, and Functions

Short description:

There is great environmental management built into branching and source control in AWS Amplify Admin UI. You can have multiple branches with different environments and merge them. There are articles in the documentation for more information. The front end hosting component allows for redeployment on GitHub push. Regarding TOTP setup, you can write your own custom authentication code within a lambda function. Functions in general work the same as AWS lambda functions, and you can add them at multiple stages. They can be triggered by events like hitting a URL or database changes. A full REST API can be built within a lambda function using Amplify.

The next question is from Johanna Watt. 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 get 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.

Using Node.js and Python in AWS Amplify

Short description:

Node.js and Python are supported in AWS Amplify. You can use Amplify update auth to add a Cognito trigger to your authentication flow. Offline sync with IndexedDB and DynamoDB is facilitated by AWS AppSync, which acts as the middle layer for syncing data. IndexedDB provides browser storage, while AppSync handles the GraphQL layer. Thank you, Ali, for the insightful talk and answers. Join Ali in his speaker zone on the special chat.

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. And the next question, I think the last question as well, how is offline sync done with Indexed.db 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 the 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, 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 learned a lot from you. And so go ahead and join Ali in his speaker zone on his special chat. The link to join is in the timeline.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Levelling up Monorepos with npm Workspaces
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Levelling up Monorepos with npm Workspaces
Top Content
Learn more about how to leverage the default features of npm workspaces to help you manage your monorepo project while also checking out some of the new npm cli features.
Automating All the Code & Testing Things with GitHub Actions
React Advanced Conference 2021React Advanced Conference 2021
19 min
Automating All the Code & Testing Things with GitHub Actions
Top Content
Code tasks like linting and testing are critical pieces of a developer’s workflow that help keep us sane like preventing syntax or style issues and hardening our core business logic. We’ll talk about how we can use GitHub Actions to automate these tasks and help keep our projects running smoothly.
Fine-tuning DevOps for People over Perfection
DevOps.js Conf 2022DevOps.js Conf 2022
33 min
Fine-tuning DevOps for People over Perfection
Top Content
Demand for DevOps has increased in recent years as more organizations adopt cloud native technologies. Complexity has also increased and a "zero to hero" mentality leaves many people chasing perfection and FOMO. This session focusses instead on why maybe we shouldn't adopt a technology practice and how sometimes teams can achieve the same results prioritizing people over ops automation & controls. Let's look at amounts of and fine-tuning everything as code, pull requests, DevSecOps, Monitoring and more to prioritize developer well-being over optimization perfection. It can be a valid decision to deploy less and sleep better. And finally we'll examine how manual practice and discipline can be the key to superb products and experiences.
Why is CI so Damn Slow?
DevOps.js Conf 2022DevOps.js Conf 2022
27 min
Why is CI so Damn Slow?
We've all asked ourselves this while waiting an eternity for our CI job to finish. Slow CI not only wrecks developer productivity breaking our focus, it costs money in cloud computing fees, and wastes enormous amounts of electricity. Let’s take a dive into why this is the case and how we can solve it with better, faster tools.
The Zen of Yarn
DevOps.js Conf 2022DevOps.js Conf 2022
31 min
The Zen of Yarn
In the past years Yarn took a spot as one of the most common tools used to develop JavaScript projects, in no small part thanks to an opinionated set of guiding principles. But what are they? How do they apply to Yarn in practice? And just as important: how do they benefit you and your projects?
In this talk we won't dive into benchmarks or feature sets: instead, you'll learn how we approach Yarn’s development, how we explore new paths, how we keep our codebase healthy, and generally why we think Yarn will remain firmly set in our ecosystem for the years to come.
Atomic Deployment for JS Hipsters
DevOps.js Conf 2024DevOps.js Conf 2024
25 min
Atomic Deployment for JS Hipsters
Deploying an app is all but an easy process. You will encounter a lot of glitches and pain points to solve to have it working properly. The worst is: that now that you can deploy your app in production, how can't you also deploy all branches in the project to get access to live previews? And be able to do a fast-revert on-demand?Fortunately, the classic DevOps toolkit has all you need to achieve it without compromising your mental health. By expertly mixing Git, Unix tools, and API calls, and orchestrating all of them with JavaScript, you'll master the secret of safe atomic deployments.No more need to rely on commercial services: become the perfect tool master and netlifize your app right at home!

Workshops on related topic

Deploying React Native Apps in the Cloud
React Summit 2023React Summit 2023
88 min
Deploying React Native Apps in the Cloud
WorkshopFree
Cecelia Martinez
Cecelia Martinez
Deploying React Native apps manually on a local machine can be complex. The differences between Android and iOS require developers to use specific tools and processes for each platform, including hardware requirements for iOS. Manual deployments also make it difficult to manage signing credentials, environment configurations, track releases, and to collaborate as a team.
Appflow is the cloud mobile DevOps platform built by Ionic. Using a service like Appflow to build React Native apps not only provides access to powerful computing resources, it can simplify the deployment process by providing a centralized environment for managing and distributing your app to multiple platforms. This can save time and resources, enable collaboration, as well as improve the overall reliability and scalability of an app.
In this workshop, you’ll deploy a React Native application for delivery to Android and iOS test devices using Appflow. You’ll also learn the steps for publishing to Google Play and Apple App Stores. No previous experience with deploying native applications is required, and you’ll come away with a deeper understanding of the mobile deployment process and best practices for how to use a cloud mobile DevOps platform to ship quickly at scale.
MERN Stack Application Deployment in Kubernetes
DevOps.js Conf 2022DevOps.js Conf 2022
152 min
MERN Stack Application Deployment in Kubernetes
Workshop
Joel Lord
Joel Lord
Deploying and managing JavaScript applications in Kubernetes can get tricky. Especially when a database also has to be part of the deployment. MongoDB Atlas has made developers' lives much easier, however, how do you take a SaaS product and integrate it with your existing Kubernetes cluster? This is where the MongoDB Atlas Operator comes into play. In this workshop, the attendees will learn about how to create a MERN (MongoDB, Express, React, Node.js) application locally, and how to deploy everything into a Kubernetes cluster with the Atlas Operator.
Azure Static Web Apps (SWA) with Azure DevOps
DevOps.js Conf 2022DevOps.js Conf 2022
13 min
Azure Static Web Apps (SWA) with Azure DevOps
WorkshopFree
Juarez Barbosa Junior
Juarez Barbosa Junior
Azure Static Web Apps were launched earlier in 2021, and out of the box, they could integrate your existing repository and deploy your Static Web App from Azure DevOps. This workshop demonstrates how to publish an Azure Static Web App with Azure DevOps.
Building Serverless Applications on AWS with TypeScript
Node Congress 2021Node Congress 2021
245 min
Building Serverless Applications on AWS with TypeScript
Workshop
Slobodan Stojanović
Slobodan Stojanović
This workshop teaches you the basics of serverless application development with TypeScript. We'll start with a simple Lambda function, set up the project and the infrastructure-as-a-code (AWS CDK), and learn how to organize, test, and debug a more complex serverless application.
Table of contents:        - How to set up a serverless project with TypeScript and CDK        - How to write a testable Lambda function with hexagonal architecture        - How to connect a function to a DynamoDB table        - How to create a serverless API        - How to debug and test a serverless function        - How to organize and grow a serverless application


Materials referred to in the workshop:
https://excalidraw.com/#room=57b84e0df9bdb7ea5675,HYgVepLIpfxrK4EQNclQ9w
DynamoDB blog Alex DeBrie: https://www.dynamodbguide.com/
Excellent book for the DynamoDB: https://www.dynamodbbook.com/
https://slobodan.me/workshops/nodecongress/prerequisites.html