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

ありがとうございました!