Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
5
Help us understand the problem. What is going on with this article?
@sekitaka_1214

aws-mobile-react-native-starterの紹介

More than 3 years have passed since last update.

ReactNativeでv4signをどのように実装すれば良いのか調べていたところ、aws-mobile-react-native-starterというリポジトリを見つけました。

このリポジトリはReactNativeの実装のサンプルで、AWSを利用したサーバーレスアーキテクチャでペットトラッカーというペットの情報を登録することができるアプリとサーバーサイドのサンプルになっています。
ReactNativeとAWSを利用してアプリ開発を初めてする時の参考になりそうです。

使い方

MobileHubセットアップ

このアプリをビルドして使用するには、AWSのMobileHubのセットアップが必要です。
以下の手順でMobileHubのプロジェクトを作成します。

  1. MobileHubのプロジェクトの作成ページからimportをクリックします。
    rn_starter_1.png

  2. backend/import_mobilehub/reactnative-starter.zipをインポートして、MobileHubのプロジェクトを作成します。
    rn_starter_2.png

  3. 正常にプロジェクトが作成できると次のような画面になるので、Get Startedをクリックして使用開始しましょう。
    rn_starter_3.png

  4. 作成したプロジェクトのページをスクロールして、Hosting and Streamingをクリックします。
    rn_starter_4.png

  5. スクロールして、Download aws-exports.js fileをクリックして、aws-exports.jsをダウンロードします。 このファイルにいま作成したMobile HubのプロジェクトやAWSへの接続情報などが含まれるので、この後アプリに組み込んで使用します。
    rn_starter_5.png

アプリの実行

  1. ダウンロードしたaws-exports.jsをclient/に保存します。
  2. cd client します。
  3. npm install で必要なパッケージのダウンロード
  4. npm start します。
  5. npm startが正常に待ち受け始めたら、別のターミナルからcd clientして、react-native run-iosします。

これでiOSシミュレータが起動し、アプリが起動されます。

アプリの機能

アプリの機能を紹介します。

ユーザー登録

新規にユーザー登録することができます。Cognito User Poolに登録されます。
rn.png

パスワード

8文字以上で記号と大文字小文字が必要です。次のパスワードは利用できました。
Hoge_123

電話番号

ちょっと分かりにくいですが+<国コード><携帯番号番号>を入力します。
電話番号が08012345678だとしたら、入力する値は+8108012345678とします。

2要素認証

入力した電話番号にSMSが届くので、確認コードを入力するとユーザー登録が完了します。

ログイン

ユーザー名、パスワードを入力してSIGN INをクリックすると、SMSに2要素認証のコードが届くので、それを入力することでログインできます。

a a

ペット登録

ペットを登録できます。画像のアップロードやDatePicker、SegmentedControl的なものの使用方法がわかります。画像はS3に、データはAPIGatewayを経由してDynamoDBに保存されます。

a

ペット一覧

ペットが登録されているとリストで確認することができます。
ListView的なものの使用方法がわかります。
+ボタンを見るとマテリアルデザインですね。

その他

パスワードの変更や、サインアウトすることもできます。
特に認証周りを手厚く実装しているサンプルですね。

まとめ

いかがでしたでしょうか。
ReactNativeとAWSを使ったサンプルアプリの紹介でした。このような参照実装があると便利でありがたいですね。
このアプリ使ってみてReactNativeいい感じなので、次にプライベートで作るアプリはReactNativeで作ろうかなと思います。

追伸

v4signは aws4-react-nativeというパッケージを使用しているみたいでした。

5
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
runners
スポーツで世界を良くしたいエンジニアチーム。応援navi、.finisher、run&といった製品開発をしています!

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
5
Help us understand the problem. What is going on with this article?