Amplify + React Nativeで挑む! 新規事業アプリの開発

Transcript

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