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
320
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
110
さっそくチェック! Amplify Gen2のデプロイ体験
ototrip
1
300
Maestroで楽がしたい!
ototrip
0
140
TypeScript と Amplify を使った概念検証術
ototrip
0
370
Other Decks in Technology
See All in Technology
[NIKKEI Tech Talk]Bias for Action!! 実践から学ぶための仕組とコミュニティ / Community for Practice and Learning
kanamasa
0
260
プレイドにおけるDatadog APMの活用方法
plaidtech
PRO
2
120
DevIO2024_レガシー運用からの脱却 -クラウド活用の実践事例とベストプラクティス-
jun2882
0
210
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
Amazon FSx for NetApp ONTAPのパフォーマンスチューニング要素をまとめてみた #cm_odyssey #devio2024
non97
0
220
CEL(Common Expression Language)で書いた条件にマッチしたIAM Policyを見つける / iam-policy-finder
fujiwara3
0
710
dxd2024-生成AIに振り回された3か月間の成功と失敗/dxd2024-link-and-motivation
lmi
2
260
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
サーバーレスAPI(API Gateway+Lambda)とNext.jsで 個人ブログを作ろう!
shuntaka
PRO
0
560
スレットハンティングについて知っておきたいこと
hacket
0
130
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
How to name files
jennybc
67
96k
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
Build The Right Thing And Hit Your Dates
maggiecrowley
28
2.2k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Designing for Performance
lara
604
67k
Clear Off the Table
cherdarchuk
89
320k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
We Have a Design System, Now What?
morganepeng
46
7k
Speed Design
sergeychernyshev
9
270
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 もしよかったら、 個人の方もお願いします
ありがとうございました!