[レポート] MOB324: React Native、GraphQL、およびAWSを使用したクロスプラットフォームモバイルアプリケーションの開発 #reinvent

MOB324 - Develop Cross-Platform Mobile Apps with React Native, GraphQL, & AWS

If you want to rapidly release a mobile app, leveraging cross-platform development techniques using a commonly known language is a proven strategy. In this session, we introduce React Native, a cross-platform JavaScript framework for building native iOS and Android apps. We also show you how to easily build cloud-connected data-driven apps using React Native, GraphQL, and mobile-optimized AWS services.

セッション

React Native

• facebook 製のオープンソース
• クロスプラットフォームでのモバイル開発フレームワーク
• JSX & Componentsを利用

import React from 'react'
import { Text } from 'react-native'

const MyComponent = () => {
    <Text>Hello World</Text>
}

export default MyComponent

React Native CLIで簡単にインストールすることができる

npm install -g react-native cli
react-native init MyAmplityApp
react-native run-ios

AWS Amplity

• クライアント向けのconsole, CLI そして toolchain群を提供

CLI

• AWSサービスの作成、設定、更新、削除を行える

• サポートしているサービス

  • Database
  • API
  • AWS Lambda
  • Authenticaion
  • Analytics
  • Hosting
  • Storage
  • Interactions

各種AWSサービスを以下のように追加することができる

amplity add auth
amplity push 
amplity configure auth

• サポートしているフロントエンドライブラリ
  • Vue
  • React
  • React Native
  • Angular
  • lonic
• Clientの機能
  • Authentication
  • Storage
  • VR / AR
  • API
  • PubSub
  • Push Notifications
  • Interactions

以下のコマンドでインストールすることができる

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

以下のようにコードから利用できる

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

以下はAuthの例

import Auth from 'aws-amplify'

Auth.signin('myusername', 'somepassword')

Reactをサポート

import { withAuthenticator } from 'aws-amplify-react'

export default withAuthenticator(App)

• toolchainでのGraphQLのコード生成は以下のコマンドで行える

amplify codegen add
amplify codegen generate

AWS AppSync

• GraphQLをサポート
• 様々なdatasourceへの接続
• 企業向けのセキュリティを確保 (IAM, Amazon Cognito, API Keys)

GraphQL Query

スキーマを作成し、クエリを定義すると、対応したデータを取得できる

• スキーマ

type Todo {
  id: ID!
  name: String
  description: String
  priority: Int
}

type Query {
  getTodo: [Todo]
}

• Query

query {
  getTodos {
    id
    name
    priority
  }
}

GraphQL で可能な動作は以下の通り

• Query
  • データ読み込み
• Mutation
  • データ書き込み
• Subscriptions
  • データの変更通知

Data sources

様々なデータソースに対応している

• RDS
• DynamoDB
• Elasticsearch Service

AWS AppSync が利用できる Clinet SDKは以下の通り

• AWS Amplify
• Apollo Client
• AWS AppSync JavaScript SDK
• AWS AppSync iOS SDK
• AWS AppSync Android SDK

TRAVLRL Features

• 機能要件
  • 全シティを見れる
  • ユーザー認証がある
  • プロフィールを見れる
  • オフラインでも動く

React Native Projectの作成

AppSyncと Amazon cognito での認証を追加するプロジェクトを以下のコマンドで作成

react-native init RNAmplifyProject
cd RNAmplifyProject
npm install aws-amplify aws-amplify-react aws-appsync aws-appsync-react
react-native link amazon-cognite-identity-js

Backendの作成

amplify init
amplify add api

• モデルのScheamaを作成

type city @model {
  id: ID!
  name: string!
  country: string!
  locations: [Location]
}

type Location @model {
  id: ID!
  name: string!
  description: string!
  address: string
}

• query と mutations の作成

tyoe Mutation {
  createcity(input: CreatecityInput!): city
  deletecity(input: DeletecityInput!): city
  createLocation(input: CreateLocationInput!): Location
  deleteLocation(input: DeleteLocationInput!): Location
}

type Query {
  listcities(limit: Int, nextToken: string): Modelcityconnection
  listcitiesForUser(userId: ID!): ModelcityForUserConnection
}

• 認証の追加

amplifyコマンドで追加する

amplify add auth
amplify configure api
amplify push

React Native clientをデモで動作

デモでプロジェクトの作成から、以下の機能を盛り込んだアプリの作成までを行われました。

• Amplify からプロジェクト作成
• amplify add api を GraphQL として追加
• amplify add auth で Cognito を追加
• amplify add push でpushを追加

デモでは以下の動作が実装されていました

• ユーザーのサインアップ
  • Cognito ユーザープールへ追加
• DynamoDBへCityの追加

まとめ

Amplify から必要なモジュールを取り込んだ状態のアプリが簡単に作れ、APIの追加や認証やPushなどが簡単に追加できる様子がでもされていました。アプリの開発速度を上げる手段としての利用が一層楽にできるようになった印象を受けました。