AWS Mobile Hub による react-native アプリ開発（構築〜認証）


AWS mobile-hub が ```react-native``` に対応したとのことなので、[マニュアル(Developer Guide)][1] を元にサンプルアプリを作成・実行して見ます。

# はじめに

当初PetStoreのようなサンプルのアプリがダウンロードできるのかと思いましたが、react-native のサンプルはまだないようです。

マニュアルもまだ不十分な気がします。本手順よりも、もう少しスマートなやり方があるのかもしれません。

## 前提

node がインストールされていること
react-native がインストールされていること

# 準備

react-native プロジェクトの作成
前述のように雛形プロジェクトが落ちてくるわけではなかったので、最初に``` react-native init```で初期プロジェクトを作成しました。

```
react-native init awsmobile
cd awsmobile
```

# セットアップ

## awsmobile-cli をインストール/設定します。

```
npm install -g awsmobile-cli
```

実行結果

```
└─┬ awsmobile-cli@1.0.6 
  ├─┬ aws-amplify@0.1.30
  │ └─┬ axios@0.17.1
  │   └── follow-redirects@1.3.0 
  └── aws-sdk@2.177.0 
```

## アクセスキーの設定

AWSのシークレットキーを設定します。

```
awsmobile configure
```

## ```awsmobile init```　コマンドによる Mobile Hub プロジェクトの作成

```
$ awsmobile init

Please tell us about your project:
? Where is your project's source directory:  /
? Where is your project's distribution directory that stores build artifacts:  build
? What is your project's build command:  npm run-script build
? What is your project's start command for local test run:  npm run-script start

? What awsmobile project name would you like to use:  awsmobile

Successfully created AWS Mobile Hub project: awsmobile

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud

Success! your project is now initialized with awsmobilejs

   awsmobilejs/.awsmobile
     is the workspace of awsmobile-cli, please do not modify its contents

   awsmobilejs/#current-backend-info
     contains information of the backend awsmobile project from the last
     synchronization with the cloud

   awsmobilejs/backend
     is where you develop the codebase of the backend awsmobile project

   awsmobile console
     opens the web console of the backend awsmobile project

   awsmobile run
     pushes the latest development of the backend awsmobile project to the cloud,
     and runs the frontend application locally

   awsmobile publish
     pushes the latest development of the backend awsmobile project to the cloud,
     and publishes the frontend application to aws S3 for hosting

Happy coding with awsmobile!
```

aws console で確認すると、指定した名前```awsmobile```でプロジェクトが作成されます。

- 今回はマニュアル通り cli にて作成しましたが、aws console 上で作成して ``` awsmobile init``` することもできるようです。

# バックエンドとの接続設定

react-native プロジェクトを AWS Mobile Hub に接続するよう設定します。

AWS Amplify for React Nativer ライブラリをインストール

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

[公式のGet Started][2] にあるように App.js に下記のコードを追加

 - YOUR-PATH-TO/ は適当に置き換える必要がありました。

```
import Amplify from 'aws-amplify-react-native';
import aws_exports from './aws-exports';

Amplify.configure(aws_exports);
```


修正した App.js のコード

```

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import Amplify from 'aws-amplify-react-native';

import aws_exports from './aws-exports';

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

Amplify.configure(aws_exports);
```

実行してみます。公式には```npm run ios``` とありますが、下記で動作させました。

```
react-native run-ios
```

実行結果

![スクリーンショット 2018-01-08 11.26.56.png](https://qiita-image-store.s3.amazonaws.com/0/141148/4a859f11-e95f-404b-686b-27bb7bdf6ace.png)

画面が表示されました。
まだ、react-nativeのサンプル画面と特に変わりはありません。

# 認証連携

画面に認証機能を追加してみます。 AWS Cognito　と連携させたアプリにします。

コマンドで実行することも可能なようですが、今回はAWS Console から設定しました。

コンソール上で、 User Sing-in をクリックして設定します。

![スクリーンショット 2018-01-08 11.37.10.png](https://qiita-image-store.s3.amazonaws.com/0/141148/d253e6a2-6762-eb24-a301-f7956901bd2e.png)

```Eamil and Password```を設定し、Sing-in必須としました。


## awsmobile pull コマンドを用いて、設定情報を取り込み

```
$ awsmobile pull

retrieving the latest backend awsmobile project information
awsmobile project's details logged at: awsmobilejs/#current-backend-info/backend-details.json
awsmobile project's access information logged at: awsmobilejs/#current-backend-info/aws-exports.js
awsmobile project's access information copied to: aws-exports.js
awsmobile project's specifications logged at: awsmobilejs/#current-backend-info/mobile-hub-project.yml
contents in #current-backend-info/ is synchronized with the latest in the aws cloud
? sync corresponding contents in backend/ with #current-backend-info/ Yes

```

## amazon-cognito-identity-js モジュールのリンク設定

```
react-native link amazon-cognito-identity-js
```

## App.js ソースに認証モジュールを組み込み

import 文の追加

```
import { withAuthenticator } from 'aws-amplify-react-native';
```

最終行に export を設定

```
export default withAuthenticator(App);
```

App の定義で export default を外す。

```
class App extends Component<{}> {
```


実行結果

```
react-native run-ios
```
![スクリーンショット 2018-01-08 11.41.20.png](https://qiita-image-store.s3.amazonaws.com/0/141148/8f4a3361-d28a-2caa-d70d-a6bf7afbf205.png)


Sing In ページが表示されました。

sing up を行い、送信メールのパスコードを入力します。

![スクリーンショット 2018-01-08 11.53.08.png](https://qiita-image-store.s3.amazonaws.com/0/141148/ecf62091-42aa-3595-abfb-00b9fda63aa6.png)

![スクリーンショット 2018-01-08 11.44.45.png](https://qiita-image-store.s3.amazonaws.com/0/141148/5a48a7ec-911a-fc81-31d1-89938506f721.png)


無事ログインできるようになりました。

![スクリーンショット 2018-01-08 11.54.18.png](https://qiita-image-store.s3.amazonaws.com/0/141148/154f1285-9259-28ad-8560-7afc97f7664a.png)

次は Cloud Logic を追加して見たいと思います。

# 参考

AWS公式ドキュメント

https://docs.aws.amazon.com/aws-mobile/latest/developerguide/aws-mobile-react-native.html?shortFooter=true

https://github.com/aws/aws-amplify

https://api.wp-kyoto.net/try-aws-amplify-for-react-project/


[1]:https://docs.aws.amazon.com/aws-mobile/latest/developerguide/aws-mobile-react-native.html?shortFooter=true


[2]:https://github.com/aws/aws-amplify


[3]:https://api.wp-kyoto.net/try-aws-amplify-for-react-project/