banner 728x90

Build a notes app with React Native, AWS AppSync and AWS Amplify

banner 728x90

During the recent AWS re: Invent conference in Las Vegas we launched AWS AppSync, a fully managed GraphQL service with real-time and offline capabilities and AWS Amplify, a JavaScript library that simplifies connecting to AWS resources with specific framework support for React and React Native. Together they provide you with the basis for building cloud-connected native mobile applications using JavaScript and React Native.

In this blog, I will show you a series of tutorials in which you use an existing React Native application to create cloud-based resources with AWS Mobile Hub and then integrate those resources into the mobile app.

Before you begin

Before you begin, you must set up your development computer to develop React Native applications. You need:

  • macOS (for iOS development):
    • Xcode.
    • An iOS simulator.
    • The command line utility & # 39; s of Xcode.
  • Android Studio (development of Windows and macOS – for Android):
    • A suitable SDK and emulator.
  • Node.js.
  • A JavaScript editor such as Visual Studio Code or Nuclide.
  • An AWS account with rights to create resources.
  • The React Native command-line interface (CLI)
    • Install with npm install -g react-native-cli .

If in doubt, consult the React Native installation instructions on their website.

Download the repository

We have created a notes app in React Native as a start-up project. You can clone or download the repository.

  1. Go to the GitHub repository.
  2. Click on Clone or download .
  3. Click Download ZIP .
  4. Extract the ZIP file.
  5. Open a terminal in the new directory.
  6. Run yarn installation .
  7. If you want to build and run the app, turn yarn run ios or yarn run android .

For Android it is a good idea to start the Android Emulator before you start the application. You may see failures to start the emulator if you do not. You can start the emulator from Android Studio. If you have fully set up your environment, you can also use the emulator command (located in $ ANDROID_HOME / tools ).

Adding analytics to the app

Analytics is an important part of every application: measuring usage, determining determination of functions and being an important driver for user engagement activities. Do the following to add analyzes.

  1. Log in to the AWS Mobile Hub console.
  2. Create a new Mobile Hub project in the US East (N. Virginia) region.
  3. Give the project a name and then click Next .
  4. Choose React Native and then click Add .
  5. Follow the on-screen instructions to install the AWS Mobile CLI and connect your Mobile Hub project to your app.
  6. Add the AWS Amplify library to your project:
      yarn adds aws-amplify-react-native
    react-native link amazon-cognito-identity-js  
  7. Add the following code snippet to App.js (directly under the import statements):
      import Amplify from & # 39; aws-amplify-react-native & # 39 ;;
    import awsconfig from & # 39; ./ src / aws-exports & # 39 ;;
    
    Amplify.configure (awsconfig);  
  8. Start the application.
  9. Switch to the AWS Mobile console for your project, click on Analytics (in the upper right corner of the page).
  10. Click on Analytics in the menu on the left.

It may take a few minutes for Analytics to appear for the first time. If you have diagnostics available (for example, by running the debugger version of the app in a suitable editor), you'll see the console output that shows the events that are being submitted.

Add authentication to the app

In this section we add authentication to the app. Users must log in to the app when the app is started. They also get the opportunity to create a new account and reset their password if they forget.

Start by adding authentication to your Mobile Hub project.

  1. Log in to the AWS Mobile Hub console.
  2. Select your Mobile Hub project.
  3. Scroll down until you see Add more Backend Features .
  4. Add the User Registration function:
    • Select E-mail address and password .
    • Click Create user group .
  5. After the user pool is created, click on Resources (in the top right corner of the page) and then on the [Amazon90 Cognito] user pool to open the Amazon Cognito console.
  6. Click on Analytics in the menu on the left.
  7. Click on Add Analytics and Campaigns .
  8. Fill out the form:
    • Amazon Cognito app client: Select the non-web version for your app.
    • Amazon Pinpoint project: select your project.
    • Share user profile data with Amazon Pinpoint: make sure it is checked.
    • IAM role: Type myproject-Cognito-Pinpoint-Integration and then click Create Role .
    • Click on Save changes .
  9. Switch back to the terminal window and take awsmobile pull to get the latest configuration file.
  10. Edit the App.js file:
    • Edit the import for aws-amplify-react-native to look like this:
        import Amplify,  from & # 39; aws-amplify-react-native & # 39 ;;  
    • Adjust the last line of the file to use withAuthenticator ():
        export default withAuthenticator (App);  
  11. Start the app.

The app asks you to sign in or log in. Go through the registration process. Note: you will receive a confirmation code as an e-mail or text message. Then log in with your new references.

AWS Configuring AppSync

AWS AppSync allows you to expose data within Amazon DynamoDB, Amazon ElasticSearch Service or other data sources so that they are accessible with GraphQL. You must sign up for the AWS AppSync example and wait to be accepted before proceeding.

  1. Open the AWS AppSync console.
  2. Click Create API .
    • Type a suitable name (such as NotesApp).
    • Select Custom schedule .
    • Click on Create .
  3. Click Schedule in the menu on the left.
  4. Copy the following GraphQL schema and paste it in the appropriate text window:
      type Note 
    
    type Query 
    
    type Mutation 
    
    scheme 
     
  5. Click on Save .
  6. Click Create Resources .
  7. To select a type, choose Comment from the drop-down list.
  8. Scroll to the bottom of the page and then click Create .
  9. Wait for the "create table" operation of DynamoDB to finish.

At this point you can click on Queries in the navigation on the left to try some edits. Replace the content of the query editor with the following:

  query ListAllNotes 

query GetNote ($ noteId: ID!) 

mutation SaveNote ($ noteId: ID !, $ title: String !, $ content: String!) 

mutation DeleteNote ($ noteId: ID!) 
 

These are the GraphQL commands that our application will execute. Replace the contents of the Query Variables section with the following:

  
 

You can execute each command by using the button at the top of the Queries editor. You can then select the query or transaction that you want to perform. For example, use SaveNote and then ListAllNotes to view the note you just saved. Do not forget to change the noteId between consecutive SaveNote runs because the noteId must be unique.

Link AWS AppSync with your app

The next step is to link the data source that you just created to the app you're working on.

  1. Go to the AWS AppSync console.
  2. Choose your API.
  3. At the bottom of the page choose React Native and download the file AppSync.js .
  4. Place the file AppSync.js in your directory ./ src .
  5. Add the required libraries to your project:
      add yarn respond-apollo graphql-tag aws-sdk aws-appsync aws-appsync-respond  
  6. Edit the file ./android/app/src/main/AndroidManifest.xml. Add the following rights (in the same place as the other rights):
        
  7. Create the GraphQL documents. Create a new file ./ src / graphql.js with the following contents:
      import gql from & # 39; graphql-tag & # 39 ;;
    import  from & # 39; react-apollo & # 39 ;;
    
    export const ListAllNotes = gql`query ListAllNotes  & # 39 ;;
    
    export const GetNote = gql`query GetNote ($ noteId: ID!)  & # 39 ;;
    
    export const SaveNote = gql`mutation SaveNote ($ noteId: ID !, $ title: String !, $ content: String!)  & # 39 ;;
    
    export const DeleteNote = gql`mutation DeleteNote ($ noteId: ID!)  & # 39 ;;
    
    export const-operations = {
    ListAllNotes: graphql (ListAllNotes, ),
    
    GetNote: graphql (GetNote, ),
    
    DeleteNote: graphql (DeleteNote, {
    options: ,
    props: props => ({
    deleteNote: (comment) => 
    })
    }),
    
    SaveNote: graphql (SaveNote, {
    options: ,
    props: props => ({
    saveNote: (comment) => 
    })
    })
    };  

    Note that the GraphQL documents are identical to those used within the AWS AppSync console for manual execution of the queries and mutations. This block binds the GraphQL query & # 39; s and mutations to use function plugs on the React components.

  8. Update App.js to establish the AppSync connection. Adjust the input as follows:
      // import  from & # 39; react-redux & # 39 ;;
    // import  from & # 39; redux-persist / es / integration / react & # 39 ;;
    // import  from & # 39; ./ src / redux / store & # 39 ;;
    
    import AWSAppSyncClient from & # 39; aws-appsync & # 39 ;;
    import  from & # 39; aws-appsync-react & # 39 ;;
    import  from & # 39; react-apollo & # 39 ;;
    import appsyncConfig from & # 39; ./ src / config / AppSync & # 39 ;;
    
    const appsyncClient = new AWSAppSyncClient ();
     

    The imported imports are used by React Redux to supply a local store. We no longer need them because we use a GraphQL-based store. If you integrate into your own app and still need access to the Redux store next to the GraphQL store, view the React Apollo documentation on how to do this.

  9. Replace the return value of the App component with the following:
      return (
    
    
    
    
    
    );  
  10. Update the screens to remove Redux connectivity in ./ src / screens / NoteListScreen.js and ./ src / screens / NoteDetailsScreen.js :
  11. Add the following code block to the bottom of the file ./ src / screens / NoteListScreen.js just before the export standard rule:
      const NoteListScreen = draw up (
    GraphQL.operations.ListAllNotes,
    GraphQL.operations.DeleteNote
    ) (NoteList);  
  12. Add in the same way the following code block at the bottom of the ./ src / screens / NoteDetailsScreen.js file:
      const NoteDetailsScreen = compose (
    GraphQL.operations.GetNote,
    GraphQL.operations.SaveNote
    ) (NoteDetails);  
  13. Start the application. Use the app to add and delete some comments.
  14. Go to the DynamoDB console and check the table on your connection. You should see a representation of the current set of tones.

Extra credit: offline access

You can access online access to offline access by changing the fetchPolicy within the edit block of ./ src / graphql.js from & # 39; network-only & # 39; (ie it always asks for the backend server) to one of the other possible options:

  • & # 39; cache-first & # 39; always returns data from the cache when the data is available. Data is retrieved from the network only if a result stored in the cache is not available.
  • & # 39; cache-and-network & # 39; always searches for the network for data, regardless of whether the complete data is in your cache. It returns the cache if it is available. This option is for quickly returning data, but keeping the data in the cache in accordance with the server (note that this can result in some UI "flipping data" problems).
  • & # 39; network only & # 39; ignores the cache.
  • & # 39; cache-only & # 39; ignores the network.

The most reasonable option is & # 39; cache-and-network & # 39; for this use. Refer to the AWS AppSync documentation for more information on using AWS AppSync in offline mode.

Finish

I hope you enjoyed this explanation about adding AWS Amplify and AWS AppSync to your application. In combination, the AWS AppSync service and the AWS Amplify library can offer cloud benefits for your application with minimal code. We will spend more time on these topics in the future, so keep an eye on us!

banner 728x90
author
Author: 
    Script & Style Show: Episode 1: Marc Grabanski
    Script & Style Show: Episode 1: Marc Grabanski
    During this second episode of the Script
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync region expansion and new functions for API keys
    AWS AppSync, a managed GraphQL service with
    What is the best time to involve your mobile app users?
    What is the best time to involve your mobile app users?
    When talking to customers about mobile analysis,
    How to make a Twitter bot with Node.js
    How to make a Twitter bot with Node.js
    Twitter bots have been in the news

    Leave a reply "Build a notes app with React Native, AWS AppSync and AWS Amplify"

    Must read×

    Top