この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
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などが簡単に追加できる様子がでもされていました。アプリの開発速度を上げる手段としての利用が一層楽にできるようになった印象を受けました。