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
450
Maestroで楽がしたい!
ototrip
0
230
TypeScript と Amplify を使った概念検証術
ototrip
0
430
Other Decks in Technology
See All in Technology
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
Function Body Macros で、SwiftUI の View に Accessibility Identifier を自動付与する/Function Body Macros: Autogenerate accessibility identifiers for SwiftUI Views
miichan
2
180
AI開発ツールCreateがAnythingになったよ
tendasato
0
130
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
140
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
Android Audio: Beyond Winning On It
atsushieno
0
850
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
410
Django's GeneratedField by example - DjangoCon US 2025
pauloxnet
0
150
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
人工衛星のファームウェアをRustで書く理由
koba789
15
8k
Modern Linux
oracle4engineer
PRO
0
100
開発者を支える Internal Developer Portal のイマとコレカラ / To-day and To-morrow of Internal Developer Portals: Supporting Developers
aoto
PRO
1
460
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
Scaling GitHub
holman
463
140k
A Modern Web Designer's Workflow
chriscoyier
696
190k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Writing Fast Ruby
sferik
628
62k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
112
20k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Facilitating Awesome Meetings
lara
55
6.5k
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 もしよかったら、 個人の方もお願いします
ありがとうございました!