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
290
Amplify + React Nativeで挑む! 新規事業アプリの開発
oto trip
March 18, 2023
Tweet
Share
More Decks by oto trip
See All by oto trip
さっそくチェック! Amplify Gen2のデプロイ体験
ototrip
1
210
Maestroで楽がしたい!
ototrip
0
95
TypeScript と Amplify を使った概念検証術
ototrip
0
330
Other Decks in Technology
See All in Technology
Hands-on / Kaname Frusawa / Cloud Compare Users Meetup 2024 at University of Tokyo on April 17
paraworld
2
470
小さな開発会社がWebサービスを作る理由
polidog
PRO
1
160
複雑な構成要素を持つUIとの向き合い方 〜新・支出グラフでの実例〜 / B43 TECH TALK
nakamuuu
0
100
Databricksを活用してDELISH KITCHENのレシピレコメンドを開発した話
furu8
0
250
最近たまに見かけるTiDBってなんだ? - Findy
pingcap0315
2
600
強みを伸ばすキャリアデザイン
yug1224
0
200
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.6k
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
疲弊しない!AWSセキュリティ統制の考え方 #devio_osakaday1
masahirokawahara
6
5.9k
プロデザ! BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
240
LLM とプロンプトエンジニアリング/チューターをビルドする / LLM and Prompt Engineering and Building Tutors
ks91
PRO
0
220
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Done Done
chrislema
178
15k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
Scaling GitHub
holman
457
140k
Building Your Own Lightsaber
phodgson
98
5.7k
How to name files
jennybc
64
92k
Testing 201, or: Great Expectations
jmmastey
27
6.3k
Being A Developer After 40
akosma
56
580k
The Art of Programming - Codeland 2020
erikaheidi
41
12k
Ruby is Unlike a Banana
tanoku
96
10k
Designing with Data
zakiwarfel
95
4.8k
Bash Introduction
62gerente
604
210k
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 もしよかったら、 個人の方もお願いします
ありがとうございました!