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
35
LLMを使ったチームのプロダクト開発の生産性を向上させる取り組み
coa00
0
22
Amplify Boostup #2 monorepo 運用による複数プロジェクト開発
coa00
0
540
サーバレス技術を活用したエンジョイ スピード開発
coa00
1
300
【Amplify Japan UG x Startup】Amplify チームによる プロダクト開発
coa00
0
580
Expo & Amplifyを使ってWebとアプリを同時開発した話
coa00
2
860
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
662
120k
Ruby is Unlike a Banana
tanoku
96
10k
In The Pink: A Labor of Love
frogandcode
139
22k
The Cost Of JavaScript in 2023
addyosmani
39
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
27
7.4k
Building a Modern Day E-commerce SEO Strategy
aleyda
35
6.8k
Building Your Own Lightsaber
phodgson
101
5.9k
The Brand Is Dead. Long Live the Brand.
mthomps
53
37k
A Modern Web Designer's Workflow
chriscoyier
690
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
157
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
22
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
165
48k
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 する処理を書くのは なかなかしんどい。 なるべくライブラリ化して対応
ごせいちょうありがとうございました