Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
1 Amplify + React Nativeで挑む! 新規事業アプリの開発 2023.03.17 Amplify Boost Up #02 Copyright © MEC Co., Ltd. All Rights reserved.
Slide 2
Slide 2 text
2 Copyright © MEC Co., Ltd. All Rights reserved. 自己紹介 足立 優司 (@adt0705 ) 所属 メック株式会社 オトとりっぷの技術責任者 よく使う AWS, React / React Native 技術, 言語 Python, TypeScript Amplify歴 3年ぐらい
Slide 3
Slide 3 text
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策( LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
Slide 4
Slide 4 text
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策( LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
Slide 5
Slide 5 text
5 Copyright © MEC Co., Ltd. All Rights reserved. 留守番インターフェースアプリ ♫ ♩ ♪ ♬ ♩
Slide 6
Slide 6 text
6 Copyright © MEC Co., Ltd. All Rights reserved. システム概略図 input output input output AWS interface interface
Slide 7
Slide 7 text
7 Copyright © MEC Co., Ltd. All Rights reserved. アーキテクチャ input output input output
Slide 8
Slide 8 text
8 Copyright © MEC Co., Ltd. All Rights reserved. 使用しているAmplify Library • 認証(Cognito) • GraphQL API(AppSync) • データベース(DynamoDB) • ストレージ(S3) フロントからアクセスする場所に使用 お気に入りは、Amplify API
Slide 9
Slide 9 text
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策( LSI問題 ) LSI:Local Secondary Index Amplifyを用いた新規事業アプリ 今後の展望
Slide 10
Slide 10 text
10 Copyright © MEC Co., Ltd. All Rights reserved. 背景:画像情報を保存するためのDB作成 Get Image Info Put Image Info 画像情報に関するDynamoDB Tableを作成するケース
Slide 11
Slide 11 text
11 Copyright © MEC Co., Ltd. All Rights reserved. 背景:画像情報を保存するためのDB作成 Get Image Info Put Image Info schema.graphqlの中身は、こんな感じ フロントエンドにも型が生成されて安全に開発!
Slide 12
Slide 12 text
12 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 Get Image Info List Image Info By Tag
Slide 13
Slide 13 text
13 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 Get Image Info List Image Info By Tag
Slide 14
Slide 14 text
14 Copyright © MEC Co., Ltd. All Rights reserved. 問題:LSI追加できない Put Image Info あとから要件を変更 PM「特定タグ(例: Favorite)で一覧取得したい」 と、いうことでスキーマを変更 → が、この変更はできない!(LSI追加扱いになるため) Get Image Info List Image Info By Hashtag
Slide 15
Slide 15 text
15 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved. • クエリパラメータにFilterを渡す • 「@searchable」で検索可能にする • そもそもDynamoDBをGSI オーバーロードで設計しておく • フィルタリングするLambdaを作成する
Slide 16
Slide 16 text
16 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved. • クエリパラメータにFilterを渡す → nextToken処理をフロントエンドで処理するの大変 • 「@searchable」で検索可能にする → 冗長 • そもそもDynamoDBをGSI オーバーロードで設計しておく → フロントエンドへの型が。。。 • フィルタリングするLambdaを作成する → やりがち でもFilterに頼ってる & Amplifyぽくない
Slide 17
Slide 17 text
17 考えられる解決策 Copyright © MEC Co., Ltd. All Rights reserved. • クエリパラメータにFilterを渡す → next処理をフロントエンドで処理するの大変 • 「@searchable」で検索可能にする → 冗長 • そもそもDynamoDBをGSI オーバーロードで設計しておく → フロントエンドへの型が。。。 • フィルタリングするLambdaを作成する → やりがち でもFilterに頼ってる & Amplifyぽくない • もう一つDBつくればいいんじゃない?
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
アジェンダ Copyright © MEC Co., Ltd. All Rights reserved. 直面した課題と解決策( LSI問題 ) Amplifyを用いた新規事業アプリ 今後の展望
Slide 20
Slide 20 text
20 Copyright © MEC Co., Ltd. All Rights reserved. 展望:今後やりたいこと • DynamoDB Table乱立対策 • スパイク対策 • レイテンシ対策 • 分散システムのデプロイ方法 これらを解決していきたい with Amplify
Slide 21
Slide 21 text
21 オトとりっぷに協力してくれる人を 募集しています! OTO TRIP Ambassador Copyright © MEC Co., Ltd. All Rights reserved. ご興味ある方は、お声がけお願いします!! オトとりっぷ公式Twitter もしよかったら、 個人の方もお願いします
Slide 22
Slide 22 text
ありがとうございました!