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
Amplify + React Nativeで挑む! 新規事業アプリの開発
Search
oto trip
March 18, 2023
Technology
0
430
Amplify + React Nativeで挑む! 新規事業アプリの開発
oto trip
March 18, 2023
Tweet
Share
More Decks by oto trip
See All by oto trip
AWS Amplify Gen2 GA ! 裏側をちょっと覗いて、Gen2と仲良くなろう.pdf
ototrip
1
330
さっそくチェック! Amplify Gen2のデプロイ体験
ototrip
1
460
Maestroで楽がしたい!
ototrip
0
230
TypeScript と Amplify を使った概念検証術
ototrip
0
430
Other Decks in Technology
See All in Technology
Azure Well-Architected Framework入門
tomokusaba
0
260
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.3k
実装で解き明かす並行処理の歴史
zozotech
PRO
1
310
Function calling機能をPLaMo2に実装するには / PFN LLMセミナー
pfn
PRO
0
880
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
0
220
FastAPIの魔法をgRPC/Connect RPCへ
monotaro
PRO
1
700
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
5.4k
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
130
"複雑なデータ処理 × 静的サイト" を両立させる、楽をするRails運用 / A low-effort Rails workflow that combines “Complex Data Processing × Static Sites”
hogelog
3
1.8k
リーダーになったら未来を語れるようになろう/Speak the Future
sanogemaru
0
270
How to achieve interoperable digital identity across Asian countries
fujie
0
110
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
20k
Featured
See All Featured
Optimizing for Happiness
mojombo
379
70k
Docker and Python
trallard
46
3.6k
Facilitating Awesome Meetings
lara
56
6.6k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing for Performance
lara
610
69k
Automating Front-end Workflow
addyosmani
1371
200k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Speed Design
sergeychernyshev
32
1.1k
Transcript
1 Amplify + React Nativeで挑む! 新規事業アプリの開発 2023.03.17 Amplify Boost Up
#02 Copyright © MEC Co., Ltd. All Rights reserved.
2 Copyright © MEC Co., Ltd. All Rights reserved. 自己紹介
足立 優司 (@adt0705 ) 所属 メック株式会社 オトとりっぷの技術責任者 よく使う AWS, React / React Native 技術, 言語 Python, TypeScript Amplify歴 3年ぐらい
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策(
LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策(
LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
5 Copyright © MEC Co., Ltd. All Rights reserved. 留守番インターフェースアプリ
♫ ♩ ♪ ♬ ♩
6 Copyright © MEC Co., Ltd. All Rights reserved. システム概略図
input output input output AWS interface interface
7 Copyright © MEC Co., Ltd. All Rights reserved. アーキテクチャ
input output input output
8 Copyright © MEC Co., Ltd. All Rights reserved. 使用しているAmplify
Library • 認証(Cognito) • GraphQL API(AppSync) • データベース(DynamoDB) • ストレージ(S3) フロントからアクセスする場所に使用 お気に入りは、Amplify API
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策(
LSI問題 ) LSI:Local Secondary Index Amplifyを用いた新規事業アプリ 今後の展望
10 Copyright © MEC Co., Ltd. All Rights reserved. 背景:画像情報を保存するためのDB作成
Get Image Info Put Image Info 画像情報に関するDynamoDB Tableを作成するケース
11 Copyright © MEC Co., Ltd. All Rights reserved. 背景:画像情報を保存するためのDB作成
Get Image Info Put Image Info schema.graphqlの中身は、こんな感じ フロントエンドにも型が生成されて安全に開発!
12 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない
Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 Get Image Info List Image Info By Tag
13 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない
Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 Get Image Info List Image Info By Tag
14 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない
Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 → が、この変更はできない!(LSI追加扱いになるため) Get Image Info List Image Info By Hashtag
15 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved.
• クエリパラメータにFilterを渡す • 「@searchable」で検索可能にする • そもそもDynamoDBをGSI オーバーロードで設計しておく • フィルタリングするLambdaを作成する
16 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved.
• クエリパラメータにFilterを渡す → nextToken処理をフロントエンドで処理するの大変 • 「@searchable」で検索可能にする → 冗長 • そもそもDynamoDBをGSI オーバーロードで設計しておく → フロントエンドへの型が。。。 • フィルタリングするLambdaを作成する → やりがち でもFilterに頼ってる & Amplifyぽくない
17 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved.
• クエリパラメータにFilterを渡す → next処理をフロントエンドで処理するの大変 • 「@searchable」で検索可能にする → 冗長 • そもそもDynamoDBをGSI オーバーロードで設計しておく → フロントエンドへの型が。。。 • フィルタリングするLambdaを作成する → やりがち でもFilterに頼ってる & Amplifyぽくない • もう一つDBつくればいいんじゃない?
18 Copyright © MEC Co., Ltd. All Rights reserved. 結論:別Tableを作成
FavoritePicture Tableを追加して、 DynamoDB Stream - Lambdaで変更内容を監視、別Tableに記載 (別の解決方法思案中。。。) Put Image Info Get Image Info List Image Info By Tag
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策(
LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
20 Copyright © MEC Co., Ltd. All Rights reserved. 展望:今後やりたいこと
• DynamoDB Table乱立対策 • スパイク対策 • レイテンシ対策 • 分散システムのデプロイ方法 これらを解決していきたい with Amplify
21 オトとりっぷに協力してくれる人を 募集しています! OTO TRIP Ambassador Copyright © MEC Co.,
Ltd. All Rights reserved. ご興味ある方は、お声がけお願いします!! オトとりっぷ公式Twitter もしよかったら、 個人の方もお願いします
ありがとうございました!