Managing events with DataStore

In this section, you are going to use Amplify DataStore and Amplify Admin UI to create a new experience for your app users. You will be able to easily create new models that represent your data and edit them directly from the Admin UI.

DataStore

Amplify DataStore provides a programming model for leveraging shared and distributed data without writing additional code for offline and online scenarios, which makes working with distributed, cross-user data just as simple as working with local-only data.

datastore

Admin UI

Open a new browser tab and head to the Amplify Console. From there, click New app, create app backend, call your app graphql-real-time-race and click confirm deployment. This kicks of the configuration of a new Admin UI.

Admin UI is ready

Once the set up is complete, click on Open admin UI; then click on Create data model on the next page.

If your having problems launching the AdminUI, please make sure popup blockers are disabled.

Create a new data model called Event, and configure it with the following fields.

Field name Type Properties
id ID (this cannot be changed) is required
title String is required
date AWSDateTime is required
description String is required
heart Int
thumbsup Int
happy Int

Once you have finished it should something like the below screen shot

event data model

Click Save and deploy to deploy your changes. Admin UI deploys the resources in your account needed to create and manage events. Once the deployment is done, click on Content in the right side menu. From there you can create an event - go ahead and create a test event.

admin ui content

Connecting your client

Now that we have some data, let’s connect the client. click Local setup instructions in the top right menu of the Admin UI console and make note of the appId

local setup instructions

In your Cloud9 terminal, from the graphql-real-time-race/ directory, run

amplify pull

If asked to select you authentication method, select AWS access keys and provide the keys you set up in the prerequisites.

? Select the authentication method you want to use: AWS access keys
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
? region:  us-east-2
? Which app are you working on? xxxxxxxxxxxxx
Backend environment 'staging' found. Initializing...
? Choose your default editor: Vim (via Terminal, Mac OS only)
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start

You will also be asked - ‘do you plan on modifying this backend?’ - select Yes

Amplify Pull pulls in all your project configuration from the cloud along with a file called src/aws-exports.js. Your code will use this file to configure the Amplify libraries that will connect with your cloud resources.

Next, configure and run the codegen:

amplify codegen configure

Provide the following inputs (make sure to select typescript as the code generation language):

? Choose the code generation language target typescript
? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.ts
? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
? Enter the file name for the generated code src/API.ts
? Do you want to generate code for your newly created GraphQL API Yes
✔ Generated GraphQL operations successfully and saved at src/graphql
✔ Code generated successfully and saved in file src/API.ts

The codegen builds models that represent your data (e.g.: events), and that make it easy to interact with the DataStore library.

In the file src/App.tsx, add the following code at the end of the imports

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

Update src/pages/Events.tsx with the following code:

[ 🌟 ] src/pages/Events.tsx

In your preview browser, open up the menu and go to Events. You should see the event you had created in the Admin UI. Changes that you make to this event in the Admin UI are immediately reflected in your app. DataStore uses GraphQL subscriptions to receive real time notification of changes!

Auto-generate data in Admin UI

In the Admin UI, in the Content pane, click Actions, then Auto-generate data.

auto generate data

Set a few constraints and generate 20 rows of data. Keep an eye on your Events page . As you generate data in Admin UI, it is automatically reflected in your application.

events

At this point, our app can show real-time data. However there is no way to show customer specific data. Let’s modify that next by adding authorization.