Opinion
2 How to build a real-time dashboard using AWS Amplify, AppSync and Lambda [Part 2]
Published on 13 Nov, 2020 by Gishan
If you're reading this, you should have already completed Part 1 which can be viewed here. It 's now time for part 2 which involves provisioning backend resources using Amplify ...
Part 2 - how to provision backend resources (i.e. Cognito Auth and AppSync API) using Amplify next
Step 1: Create backend resources
Now that we have Amplify configured and initialised, we want to use it to provision backend resources in the AWS Cloud. In this blog, we are using AWS Cognito and AppSync. The former is for authorising the API endpoints, and the latter is for developing and hosting a GraphQL API.
Add Cognito Auth
Open a new terminal window and go inside the React project folder. Then run the following command:
amplify add auth
Select Default configuration and then select Email. Finally, select No I am done since we don’t intend to do any additional configurations for now.
Add IAM Auth
As we will learn in the next part, lambda will be used to develop the aircraft engine condition monitoring data simulator. Therefore, we need to add IAM as the secondary authentication type to our AppSync API to allow lambda functions to push data to the API.
Run the below command to add IAM authentication type to the API.
Important: The command is amplify update api not amplify update auth.
amplify update api
Select GraphQL and then select Update auth settings. For the default authorisation type, select Amazon Cognito User Pool. When asked to configure additional authentication types, select y. Then select IAM and press Enter.
Add AppSync API
Amplify allows creating GraphQL and REST APIs for AppSync. We are going to use GraphQL because it is cool [1 (https://graphql.org/learn/)] .
Run the following command to add an API to the Amplify project:
amplify add api
Select GraphQL for the API type. Then type in realtimedashboardapi for the API name. Select Amazon Cognito User Pool as the default authorisation type for the API. Then select No I'am done and press Enter.
Select N for the annotated GraphQL schema. Then select Y for the guided schema creation and select One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”). Finally, select n when you are asked to edit the schema now.
Step 2: Provision backend resources
The Cognito Auth, IAM Auth and AppSync API are still stored locally. We need to provision these resources in the AWS Cloud.
Run the below command to compare your local Amplify status with the cloud Amplify status.
amplify status
Basically, Amplify is telling you that you have Auth resources and an API resource that is pending to the pushed to AWS Cloud. Run the below command to push these resources to the cloud.
amplify push
Select Y when asked to generate code for the created GraphQL API. Choose Typescript as the language target. Leave the file name pattern as the default. Then select n. Leave the file name for the generated code as the default as well.
Wait for a few minutes until Amplify does its magic! Well, its not really magic its doing - its doing AWS CloudFormation [2].
Now let’s head on to the AWS Console to check whether the resources are provisioned successfully.
If you go to the AppSync console, you will see a new API called realtimedashboardapi-dev. This is the GraphQL API we have created.
Click on the API and then click on Settings. You will now see the default and secondary authorisation types as well.
Step 3: Update the AppSync API
While you are at the AWS AppSync Console, click on the newly created API. Go to the Data Sources section. This shows all the GraphQL tables in our backend.
But wait! Why is it showing a Blog, Comment and a Post table? Aircraft engines don’t do blogging! Well, that is why we need to update the AppSync API to match our problem.
Go to the React project and open the schema.graphql file at amplify/backend/api/realtimedashboardapi/.
Important: Make sure you are opening the schema.graphql under the amplify/backend/ folder and not the one under the amplify/#current-cloud-backend/ folder.
Now replace the content in the file with below and save. See [2] and [3] for more information about Amplify GraphQL directives and AppSync scalar types.
type Subscription {
onConditionMonitoringDataRecord(
unitNumber: Int!
): ConditionMonitoringDataRecord
@aws_subscribe(mutations: ["createConditionMonitoringDataRecord"])
}
type Engine
@model(subscriptions: null)
@auth(rules: [{ allow: owner, operations: [create, delete, update] }]) {
id: ID!
unitNumber: Int!
}
type ConditionMonitoringDataRecord
@model(subscriptions: null)
@searchable
@aws_cognito_user_pools
@aws_iam
@auth(rules: [
{ allow: owner, operations: [create, delete, update] },
{ allow: private, provider: iam, operations: [create, read]}
])
@key(
name: "listConditionMonitoringDataRecordsByUnitNumber"
fields: ["unitNumber"]
queryField: "listConditionMonitoringDataRecordsByUnitNumber"
) {
id: ID!
unitNumber: Int!
dateTime: AWSDateTime!
data: AWSJSON!
}Then go to the terminal and run amplify push. Select Y when asked to update code for the updated GraphQL schema.
Important: This update will take longer than usual. This is because the @searchable GraphQL directive requires provisioning an AWS ElasticSearch domain [3 (https://docs.amplify.aws/cli/graphql-transformer/searchable)] . Please be patient and don’t kill the process as Amplify does not like it - the CloudFormation stack can stuck in an update-delete loop not allowing you to update the backend.
Now go back to the AppSync console and select the Data Sources.
Voilà! You will see the Engine and Condition Monitoring Data Record tables appearing under our AppSync API as shown in the above figure. In addition, the aforementioned ElasticSearch domain is also shown here.
Conclusion
In this part, we used Amplify to provision backend resources required for building a real-time dashboard using AWS Amplify, AppSync and Lambda.
In the next part, we are going to build an aircraft condition monitoring data simulator using AWS Lambda that allows streaming data from CSV files to the AppSync API - Building a Condition Monitoring Data Simulator using AWS Lambda and Streaming Data to the AWS AppSync API.
