Expo と Amplifyを使って Webとアプリを同時開発

Transcript

1. Expo と Amplifyを使って Webとアプリを同時開発 @coa00

2. 自己紹介 coa00 (あおきこうへい） • フロントエンド/UIUX が専門で、デザインと かもやります。 • 2020年から O:という会社で

   CTOやってま す。 Twitter: coa00 https://qiita.com/coa00

3. 自己紹介 coa00 (あおきこうへい） • メディアアートが大好きで Arduino, GLSLとかやっていまし た。 Twitter: coa00

   https://qiita.com/coa00

4. UX Design

5. これまでAmplifyでつくってきたプロダクト

6. ニュースサイト https://www.kazi-online.com/

7. ワードプレスのようなCMS

8. Expo & Amplify

9. アプリケーション構成

10. Expo React NativeとWebのビルドをサポート ビルドは Expo サーバで実施、Expoランタイ ムに直接配信される 更新は Expoデータのアップデートだけで 完

    了（OTA）ストアの再提出なども不要

11. １コードでマルチプラットフォーム対応

12. プッシュ通知 • Amplify は lambda の作成が可能。スケ ジュール動作もできる。 • expo-server-sdk を中でよぶことで、push通

    知を送信する。 • 大量の通知には Amazon Pinpoint を使う

13. 自動公開 ＆Deploy • amplify build で expo の publish を追加するだけ、

    Webとアプリの自動公開 が可能(OTA)

14. TIPS Webとネイティブの動作わけ • WebをすべてRNでつくってしまうと体験 的におとってしまうところがでてしまう。 • ファイル拡張子をつかってコンポーネント をだしわけすることができる。 • Props

    を同一にすると意識することなく 使える。

15. Amplifyの開発の流れ

16. Amplify の開発の流れ 1. Amplify Mock でローカルで開発 a. （API, Storage, Lambda

    )全部確認できる 2. Pull Request を作成 a. Preview 環境に Deploy 3. Preview 環境でテスト 4. マージで開発環境にリリース

17. Amplify TIPS

18. Filter と Limit の動き • filter ◦ filter は 取得したリストに対して行われる。

    ◦ デフォルト100件がはいってるため、取得した 100 件にたいしてフィルタリングする。 ◦ そのため全件取得を対象とする場合は、まず nextTokenをみて全件取得してからフィルタ リングする必要がある • limit ◦ limit は標準で100 ◦ 1000 件までふやすことができるが、取得自体に DynamoDBの制限があり増やしすぎると 別のエラーが発生

19. 検索っぽいことするには？ • key ◦ キーを設定すると、絞り込み、ソートが実現できる ◦ filter を使うとlimitの制限にひっかかるが、 key をはるとひっかからない。

    ◦ 動作を高速にするだけかと思っていたが、実際に運用はじめるとほぼ必須。 • searchable ◦ key をはらなくてもどのフィールドのソートができる。 ◦ 全文検索というより、 key をはることなく検索できて便利 ◦ 環境ごとに micro インスタンスができてお金がかかる ◦ mock で動かない

20. Amplify @Searchable • Searchable を使うと Mock がうごかない(現在未対応） • 環境を増やすと micro

    インスタンスが立ち上がる。 • Preview機能組み合わせると費用がかなりかかる。

21. Amplify Mock • Searchable は非対応 • Node のバージョンが12 (LTS)では ない

    • 別のバージョンを使っている場合は、 Mock をたちあげるときにバージョン 指定が必要（ExpoはNode Ver14か ら）

22. subscribe • subscribe を使うとリアルタイム に追加、削除が通知される。 チャットのようなアプリをつくるこ とができる。 • 標準生成されれるsubscribe を

    そのまま使うと key や フィルタ リングの値が反映されず、追加 したら全部届く。

23. Amplify 開発チームの運営

24. O: のメンバー 全員AmplifyやAWSの知識がない状態からスタート • フロントエンジニア 2名 （20代） • インターン 1名

25. Amplify をオンボーディング 参画前にReact から Amplify までの勉強してもらってから参加

26. Amplify トラブルシューティング トラブルがおきた結果を issue に登録。同じことにはまらないようにissue にまとめていく

27. Amplify トラブルシューティング

28. さらに簡単に リスト取得して Subscribe する処理を書くのは なかなかしんどい。 なるべくライブラリ化して対応

29. ごせいちょうありがとうございました