Save 37% off PRO during our Black Friday Sale! »

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

74253b7e85d0a315a23d74db50abd8e4?s=47 cohe aoki
April 03, 2021
1.2k

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

74253b7e85d0a315a23d74db50abd8e4?s=128

cohe aoki

April 03, 2021
Tweet

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. 1コードでマルチプラットフォーム対応

  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. ごせいちょうありがとうございました