Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Expo と Amplifyを使って Webとアプリを同時開発
Search
cohe aoki
April 03, 2021
0
1.4k
Expo と Amplifyを使って Webとアプリを同時開発
cohe aoki
April 03, 2021
Tweet
Share
More Decks by cohe aoki
See All by cohe aoki
Amplify Boostup #2 Multi project using monorepo
coa00
0
40
LLMを使ったチームのプロダクト開発の生産性を向上させる取り組み
coa00
0
29
Amplify Boostup #2 monorepo 運用による複数プロジェクト開発
coa00
0
570
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
310
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
610
Expo & Amplifyを使ってWebとアプリを同時開発した話
coa00
2
900
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
95
17k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
28
4.4k
Visualization
eitanlees
146
15k
How STYLIGHT went responsive
nonsquared
96
5.2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
GitHub's CSS Performance
jonrohan
1031
460k
RailsConf 2023
tenderlove
29
940
Raft: Consensus for Rubyists
vanstee
137
6.7k
Six Lessons from altMBA
skipperchong
27
3.5k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Docker and Python
trallard
42
3.1k
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 する処理を書くのは なかなかしんどい。 なるべくライブラリ化して対応
ごせいちょうありがとうございました