AWS Amplify - Admin UI

About 2 years ago I looked for a tool that would allow front end developers to start building backend API's with minimal effort, on the Cloud. At the time I was able to use the AWS Amplify toolset to do exactly that on many of my own side projects. This week the AWS Amplify team announced the release of their Admin UI. I took this opportunity to not only explore their new offering, but to also checkout what has changed since I was last using their product.

The Admin UI is essentially an environment in which you can immediately setup data models and relationships that form a GraphQL API with automatically generated mutations and queries. This happens after you define your models, i.e what fields each model has, and how they relate to each other. Additional features such authentication and storage are also available.

Interestingly the data model and schema creation is accessible without an AWS account, and therefore allows you to get up and running quickly. I think it offers a low barrier to try out the product, and certainly prompts you to dig a bit deeper to see what else is on offer. In this quick example I will start with a blank schema. Here I create 3 model's. One is called Merchant.

For the Merchant model we define a one-to-many relationship with another model called Store.

And we then define a one-to-one relationship between a Store and another model called Owner.

As a further example on this, when I create the one-to-many relationship between the Merchant and Store model, a merchantID field is created on the Store, and a relationship name is also defined for me. Many-to-many relationships are also possible, something that was missing previously.

If you get stuck, there is a guide that makes this clearer.

Once you finish your data modelling you will be given some basic commands to get started on building a starter app with your new API. You can choose from the following platforms:

• Web (React, Vue, Angular)
• iOS (Swift)
• Android (Java, Kotlin)

You'll then be guided to do the following:

Define what type of app you are building

npx create-react-app react-amplified
cd react-amplified

Create a new app (optional)

curl -sL https://aws-amplify.github.io/amplify-cli/install | bash && $SHELL

Install Amplify CLI and your data models

amplify pull --sandboxId eab8a0cd-dab3-4de8-98fd-e8fd4b6b908c

Install the Amplify libraries

npm install aws-amplify typescript

Test out the CRUD API's using Amplify DataStore

import Amplify from 'aws-amplify'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)

Next up is the deployment phase which requires an AWS account. This is where all the grunt work is done and all your infrastructure is setup using CloudFormation. Once that is done you will then be taken to your app's console where you can start inviting users to the Admin UI with either Full access or Manage only access.

The Admin UI itself is where all the fun starts.

A quick glance will tell you that most of what can be 'managed' or 'setup' by Amplify can be handled from here. All of which are easy to find, prettier, and simpler abstractions of underlying AWS services. Of note to me was the Content section where you can view and edit data. For the example I have been running with above, you can create a new Merchant.

As you can see, Amplify will show you named input fields and give you the option to add data for related models, in this case we can also add a Store to Merchant as defined in the one-to-many relationship previously. So essentially although this is still in Beta phase, it looks like the beginnings of a Content Management System is in the works.

Going back to the original app console you can see that Amplify now has support for domain management, and ci/cd pipelines, and much more.

A gripe amongst a lot of developers against AWS is the UI and the enormity of the services they offer and being able find and figure out what you need. Amplify encapsulates everything that most developers would need to make a start on building a full stack web or mobile application on the Cloud.

It's not for everyone, and I personally don't mind diving into the underlying services that Amplify abstracts away. But it's definitely something that drastically improves developer velocity, and getting your product shipped and out the door!

Get started with the new Admin UI below:

https://sandbox.amplifyapp.com/getting-started