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
420
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
310
さっそくチェック! Amplify Gen2のデプロイ体験
ototrip
1
450
Maestroで楽がしたい!
ototrip
0
220
TypeScript と Amplify を使った概念検証術
ototrip
0
430
Other Decks in Technology
See All in Technology
地図と生成AI
nakasho
0
700
QuickBooks®️ Customer®️ USA Contact Numbers: Complete 2025 Support Guide
qbsupportinfo
0
110
AIを使っていい感じにE2Eテストを書けるようになるまで / Trying to Write Good E2E Tests with AI
katawara
3
1.6k
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
140
手動からの解放!!Strands Agents で実現する総合テスト自動化
ideaws
2
300
Microsoft Fabric ガバナンス設計の一歩目を考える
ryomaru0825
1
260
Power Automate のパフォーマンス改善レシピ / Power Automate Performance Improvement Recipes
karamem0
0
160
TypeScript 上達の道
ysknsid25
9
1.1k
Turn Your Community into a Fundraising Catalyst for Black Philanthropy Month
auctria
PRO
0
140
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
220
OTel 公式ドキュメント翻訳 PJ から始めるコミュニティ活動/Community activities starting with the OTel official document translation project
msksgm
0
240
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
220
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Designing Experiences People Love
moore
142
24k
Statistics for Hackers
jakevdp
799
220k
GitHub's CSS Performance
jonrohan
1031
460k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
990
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
How to train your dragon (web standard)
notwaldorf
96
6.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 もしよかったら、 個人の方もお願いします
ありがとうございました!