Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Expo と Amplifyを使って Webとアプリを同時開発
cohe aoki
April 03, 2021
0
1.3k
Expo と Amplifyを使って Webとアプリを同時開発
cohe aoki
April 03, 2021
Tweet
Share
More Decks by cohe aoki
See All by cohe aoki
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
110
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
440
Expo & Amplifyを使ってWebとアプリを同時開発した話
coa00
2
670
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
Debugging Ruby Performance
tmm1
67
11k
Agile that works and the tools we love
rasmusluckow
320
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
10
1.3k
Gamification - CAS2011
davidbonilla
75
4.1k
Designing on Purpose - Digital PM Summit 2013
jponch
108
5.9k
How to name files
jennybc
47
73k
Docker and Python
trallard
30
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
263
38k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
50k
Support Driven Design
roundedbygravity
88
8.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Transcript
Expo と Amplifyを使って Webとアプリを同時開発 @coa00
自己紹介 coa00 (あおきこうへい) • フロントエンド/UIUX が専門で、デザインと かもやります。 • 2020年から O:という会社で
CTOやってま す。 Twitter: coa00 https://qiita.com/coa00
自己紹介 coa00 (あおきこうへい) • メディアアートが大好きで Arduino, GLSLとかやっていまし た。 Twitter: coa00
https://qiita.com/coa00
UX Design
これまでAmplifyでつくってきたプロダクト
ニュースサイト https://www.kazi-online.com/
ワードプレスのようなCMS
Expo & Amplify
アプリケーション構成
Expo React NativeとWebのビルドをサポート ビルドは Expo サーバで実施、Expoランタイ ムに直接配信される 更新は Expoデータのアップデートだけで 完
了(OTA)ストアの再提出なども不要
1コードでマルチプラットフォーム対応
プッシュ通知 • Amplify は lambda の作成が可能。スケ ジュール動作もできる。 • expo-server-sdk を中でよぶことで、push通
知を送信する。 • 大量の通知には Amazon Pinpoint を使う
自動公開 &Deploy • amplify build で expo の publish を追加するだけ、
Webとアプリの自動公開 が可能(OTA)
TIPS Webとネイティブの動作わけ • WebをすべてRNでつくってしまうと体験 的におとってしまうところがでてしまう。 • ファイル拡張子をつかってコンポーネント をだしわけすることができる。 • Props
を同一にすると意識することなく 使える。
Amplifyの開発の流れ
Amplify の開発の流れ 1. Amplify Mock でローカルで開発 a. (API, Storage, Lambda
)全部確認できる 2. Pull Request を作成 a. Preview 環境に Deploy 3. Preview 環境でテスト 4. マージで開発環境にリリース
Amplify TIPS
Filter と Limit の動き • filter ◦ filter は 取得したリストに対して行われる。
◦ デフォルト100件がはいってるため、取得した 100 件にたいしてフィルタリングする。 ◦ そのため全件取得を対象とする場合は、まず nextTokenをみて全件取得してからフィルタ リングする必要がある • limit ◦ limit は標準で100 ◦ 1000 件までふやすことができるが、取得自体に DynamoDBの制限があり増やしすぎると 別のエラーが発生
検索っぽいことするには? • key ◦ キーを設定すると、絞り込み、ソートが実現できる ◦ filter を使うとlimitの制限にひっかかるが、 key をはるとひっかからない。
◦ 動作を高速にするだけかと思っていたが、実際に運用はじめるとほぼ必須。 • searchable ◦ key をはらなくてもどのフィールドのソートができる。 ◦ 全文検索というより、 key をはることなく検索できて便利 ◦ 環境ごとに micro インスタンスができてお金がかかる ◦ mock で動かない
Amplify @Searchable • Searchable を使うと Mock がうごかない(現在未対応) • 環境を増やすと micro
インスタンスが立ち上がる。 • Preview機能組み合わせると費用がかなりかかる。
Amplify Mock • Searchable は非対応 • Node のバージョンが12 (LTS)では ない
• 別のバージョンを使っている場合は、 Mock をたちあげるときにバージョン 指定が必要(ExpoはNode Ver14か ら)
subscribe • subscribe を使うとリアルタイム に追加、削除が通知される。 チャットのようなアプリをつくるこ とができる。 • 標準生成されれるsubscribe を
そのまま使うと key や フィルタ リングの値が反映されず、追加 したら全部届く。
Amplify 開発チームの運営
O: のメンバー 全員AmplifyやAWSの知識がない状態からスタート • フロントエンジニア 2名 (20代) • インターン 1名
Amplify をオンボーディング 参画前にReact から Amplify までの勉強してもらってから参加
Amplify トラブルシューティング トラブルがおきた結果を issue に登録。同じことにはまらないようにissue にまとめていく
Amplify トラブルシューティング
さらに簡単に リスト取得して Subscribe する処理を書くのは なかなかしんどい。 なるべくライブラリ化して対応
ごせいちょうありがとうございました