Building Offline-first Cross-platform Apps with Expo and Amplify DataStore

Nader Dabit: [0:00] To get started, we'll initialize a new expo project by running expo init. For the expo project, we'll choose a blank template. Next we'll change into the new directory and install AWS amplify core and AWS amplify datastore using either yarn or npm.

[0:25] Amplify datastore for React Native has a dependency on netinfo so we'll use expo to install React Native community/netinfo. Next, we'll initialize the Amplify app by running npx amplify-app. Next we'll open the project in our text editor to edit our graphQL schema.

[0:49] To edit the graphQL schema, go to amplify/backend/api/schema.graphql. The app that we'll be creating is a messaging app so we'll create a message type giving it an ID, a title, and a color.

[1:08] Amplify will introspect your GraphQL schema to generate the models needed to interact with the datastore API. To create these models, run, npm run amplify-modelgen. We should now see a new src/models directly in our project containing our models.

[1:26] Next, we'll initialize the Amplify backend in the Cloud by running amplify init. Here, we'll give the environment a name, choose our default text editor and choose our AWS profile.

[1:44] After the project been deployed, we should now see a new amplify folder as well as an aws-exports.js file located in the grid of our project. To deploy the API, we can now run amplify push. When asked if we'd like to generate GraphQL code locally, we can choose no because we'll be using the Datastore API.

[2:06] After the API has been deployed, open up the project in your text editor. Here, we'll open app.js and delete everything that's there for now. We'll first import Amplify from amplify/core, the config from the aws-exports file created by the CLI and then we'll call, amplify.configure passing in the config.

[2:28] Next, we'll import React as well as the useState and useEffect hooks from React. From React native, we'll be importing the Text, View, TextInput and Button components. From amplify/datastore, we'll import the Datastore API and then import the Message model from the source/models directly.

[2:46] We'll next create some initial state to hold the message info including the message title and the message color. Next, we'll create the app component. Next, we'll create two pieces of state using the useState hook, some formState to hold the form state and a messages array to hold the messages coming back from the Datastore API.

[3:12] Next, we'll create an onChange text handler to update the form input as the user types. Next, we'll create fetchMessages and createMessage functions. FetchMessages will query the Datastore API by calling datastore.query passing in the Message model.

[3:31] We'll then call updateMessages passing in the messages array to update the messages state. createMessage will first check to make sure that the formState title is not empty.

[3:41] If it isn't, we'll then call Datastore.save passing in a new instance of the Message passing in the formState. Finally, we'll call updateFormState passing in the initialState to clear the form. Next, we'll create a useEffect hook.

[4:01] When the component loads, we'll first call fetchMessages. We'll then create a new subscription using Datastore.observe passing in the Message model. When a new message arrives, we'll then again call fetchMessages.

[4:30] In the UI, we'll create a title, two text inputs attaching the onChangeText handler, a placeholder, the value and some styling. In the UI, we'll display the color currently set by the input. Finally, we'll create a button with a title of "Create Message" that will invoke the createMessage function when pressed.

[4:57] We'll then map over the messages setting the background color to the message color and the title to the message title. Finally, we'll create styles for container, input, heading, message background, the message and the message title. We'll then set the default export as the app component.

[5:31] To test everything out, we can run, expo start. I'll first run this on the iOS simulator. To test out the real-time functionality, I'll also open the app in a Web browser.

[6:12] When we create a new message on the Web, we see that it comes through in real time in the iOS app. To test out the offline functionality, we can open the network tab and set our network to be offline. When we create a new message, we see that the message updates only in the Web UI.

[6:55] Next, we can go back into the network tab, set our connection to be online, and see that the request does indeed go through, and the messages sent to our iOS app. To view our project in the Amplify dashboard at any time, we can open our CLI and run, amplify console.

[7:21] Here, we'll see a link to our API including the AppSync API in the data mode DB database.