In this tutorial, I’ll make a mobile app to post quotes to a DynamoDB document and see updates in real-time on all devices. I’ll use React Native with AWS Amplify as the backend, using Auth, and GraphQL API. See my previous tutorials to learn more about these!

Let us create

First, get started with React Native. Globally install the Expo CLI and run expo init “project name”.

npm install -g expo-cli

expo init quoted

cd quoted

When inside the project directory, install the Amplify CLI and initiate it in your project. This requires you to have at least a Free Tier AWS account. With this, you’ll configure Amplify for your project, but don’t worry. It’s all done through the Amplify CLI.

npm install -g @aws-amplify/cli

amplify configure

This will initiate a set of prompts.

Choose the region closest to you, and hit enter.

Give the IAM user a name and hit enter. You’ll be automatically taken to the AWS browser console, and log in with your user.

Then hit ‘enter’ in the CLI to proceed after logging in.

That takes you to the IAM service, to create a user with admin privileges. Choose all the defaults.

When done, copy the Access Key, go to the CLI, paste it, hit enter, go back, copy the Secret Key, go to the CLI, paste it, hit enter and done!

This is the only time you’ll have to spend in the AWS browser console, unless you want to!

Create a /src folder in the application directory and initiate Amplify. This takes you through another 5 prompts, which are easily filled out. The folder you use as Source Directory Path is the directory where the aws-exports.js file will appear, which is used to Amplify.configure() your client. More on that later.

mkdir src

amplify init

amplify init process

The actions you can perform with the Amplify CLI

The commands ‘amplify push’ and ‘amplify publish’ will generate aws-exports.js. If you use GraphQL API (we will later) it will ask you to update generated code to communicate with the API. If you use ‘publish’ you need hosting enabled, which automatically publishes the app to your S3 bucket with web hosting.

Adding Auth and GraphQL API

amplify add auth

> use default config

> that's it

amplify add api

> Pick GraphQL

> Pick API name (default is your project name)

> Pick Cognito as Auth mechanism

> Pick No for having your own schema

> Pick Yes for automatic schema creation

> Pick Yes to edit the schema now

Adding both Auth (AWS Cognito) and API (AWS AppSync GraphQL Server)

Locate the schema with your editor, modify it and save. When you’re happy with your schema/data model then run amplify push and hit yes to all options. This autogenerates a directory ‘quotes/src/graphql’ with 3 files; subscriptions.js, mutations.js and queries.js. They contain code to CRUD to your GraphQL server.

This is a modified schema.graphql which automatically saves the author to the DB and lets only the author Read/Write. Ignore the author if you want all users to see Quotes

Down to the client

While building the Amplify template in AWS (amplify push), open another console window, cd into your project directory and run ‘expo start’. This starts an expo server for developing/testing your React Native application. Also, download the Expo mobile application. I use Android:

A QR code will show up in your console, and a browser window with your running expo server will launch.

Download the Expo app for Android/IOS and scan the QR code to see live updates on your phone. You might have to be on the same network for this to work.

If your Amplify backend has completed uploading the template, download the 2 NPM packages required to connect your client to Amplify

npm install --save aws-amplify aws-amplify-react-native

The final client code

Now, to finish up our application, we need to add the React Native code. I suggest creating a new file Root.js in your /src folder. Reference Root.js from App.js and wrap it with Amplify withAuthenticator(). Connect the generated aws-exports.js file with Amplify.configure(). This file is for setting up all configuration before using Amplify in Root.js.

Root.js

We’ll do most of our work in this file. The reason for this is that we use App.js to link to Cognito, and we want the user to be authenticated before actually calling the API. I’ll explain what you’re seeing in both of these files.

The imports

{ withAuthenticator } is used as a HOC on our export to wrap the whole application with a premade authorization interface.

is used as a HOC on our export to wrap the whole application with a premade authorization interface. Amplify, { API, graphqlOperation } is used to invoke our API with the functions imported from our generated /graphql directory.

is used to invoke our API with the functions imported from our generated /graphql directory. * as queries, mutations, subscriptions are the generated code by Amplify that we use to invoke GraphQL functions.

are the generated code by Amplify that we use to invoke GraphQL functions. { awsmobile } is the file generated by Amplify with our API endpoint, Cognito keys etc. Don’t store this file in a repository.

is the file generated by Amplify with our API endpoint, Cognito keys etc. Don’t store this file in a repository. Amplify.configure(awsmobile) is the process of actually hooking up our keys, endpoints etc. to our client.

is the process of actually hooking up our keys, endpoints etc. to our client. And the react-native imports are components used by React Native to compile to Android Java and IOS Swift.

The CRUD’ing

In the Root.js file, I’ve created some simple functions for adding and deleting quotes, as well as using the powerful GraphQL Subscriptions to get real-time data flow to our GUI. Simply, every time ‘createQuote’ successfully returns data, it is listened to in the Subscription where we can add it to our state array. We set up all our subscriptions in the componentDidMount() to be called once, as well as calling the queries.listQuotes.

The complete client code for functionality

What now?