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

Transcript

1. 1
   Amplify + React Nativeで挑む！
   新規事業アプリの開発
   2023.03.17 Amplify Boost Up #02
   Copyright © MEC Co., Ltd. All Rights reserved.
   

   View Slide

2. 2
   Copyright © MEC Co., Ltd. All Rights reserved.
   自己紹介
   足立 優司 (@adt0705 )
   所属 メック株式会社
   オトとりっぷの技術責任者
   よく使う AWS, React / React Native
   技術, 言語 Python, TypeScript
   Amplify歴 3年ぐらい
   

   View Slide

3. アジェンダ
   Copyright © MEC Co., Ltd. All Rights reserved.
   直面した課題と解決策（ LSI問題 ）
   Amplifyを用いた新規事業アプリ
   今後の展望
   

   View Slide

4. アジェンダ
   Copyright © MEC Co., Ltd. All Rights reserved.
   直面した課題と解決策（ LSI問題 ）
   Amplifyを用いた新規事業アプリ
   今後の展望
   

   View Slide

5. 5
   Copyright © MEC Co., Ltd. All Rights reserved.
   留守番インターフェースアプリ
   ♫
   ♩
   ♪
   ♬
   ♩
   

   View Slide

6. 6
   Copyright © MEC Co., Ltd. All Rights reserved.
   システム概略図
   input
   output
   input
   output
   AWS
   interface interface
   

   View Slide

7. 7
   Copyright © MEC Co., Ltd. All Rights reserved.
   アーキテクチャ
   input
   output
   input
   output
   

   View Slide

8. 8
   Copyright © MEC Co., Ltd. All Rights reserved.
   使用しているAmplify Library
   • 認証（Cognito）
   • GraphQL API（AppSync）
   • データベース（DynamoDB）
   • ストレージ（S3）
   フロントからアクセスする場所に使用
   お気に入りは、Amplify API
   

   View Slide

9. アジェンダ
   Copyright © MEC Co., Ltd. All Rights reserved.
   直面した課題と解決策（ LSI問題 ）
   LSI：Local Secondary Index
   Amplifyを用いた新規事業アプリ
   今後の展望
   

   View Slide

10. 10
    Copyright © MEC Co., Ltd. All Rights reserved.
    背景：画像情報を保存するためのDB作成
    Get Image Info Put Image Info
    画像情報に関するDynamoDB Tableを作成するケース
    

    View Slide

11. 11
    Copyright © MEC Co., Ltd. All Rights reserved.
    背景：画像情報を保存するためのDB作成
    Get Image Info Put Image Info
    schema.graphqlの中身は、こんな感じ
    フロントエンドにも型が生成されて安全に開発！
    

    View Slide

12. 12
    Copyright © MEC Co., Ltd. All Rights reserved.
    問題：LSI追加できない
    Put Image Info
    あとから要件を変更 PM「特定タグ（例: Favorite）で一覧取得したい」
    と、いうことでスキーマを変更
    Get Image Info
    List Image Info
    By Tag
    

    View Slide

13. 13
    Copyright © MEC Co., Ltd. All Rights reserved.
    問題：LSI追加できない
    Put Image Info
    あとから要件を変更 PM「特定タグ（例: Favorite）で一覧取得したい」
    と、いうことでスキーマを変更
    Get Image Info
    List Image Info
    By Tag
    

    View Slide

14. 14
    Copyright © MEC Co., Ltd. All Rights reserved.
    問題：LSI追加できない
    Put Image Info
    あとから要件を変更 PM「特定タグ（例: Favorite）で一覧取得したい」
    と、いうことでスキーマを変更
    → が、この変更はできない！（LSI追加扱いになるため）
    Get Image Info
    List Image Info
    By Hashtag
    

    View Slide

15. 15
    考えられる解決策
    Copyright © MEC Co., Ltd. All Rights reserved.
    • クエリパラメータにFilterを渡す
    • 「@searchable」で検索可能にする
    • そもそもDynamoDBをGSI オーバーロードで設計しておく
    • フィルタリングするLambdaを作成する
    

    View Slide

16. 16
    考えられる解決策
    Copyright © MEC Co., Ltd. All Rights reserved.
    • クエリパラメータにFilterを渡す
    → nextToken処理をフロントエンドで処理するの大変
    • 「@searchable」で検索可能にする
    → 冗長
    • そもそもDynamoDBをGSI オーバーロードで設計しておく
    → フロントエンドへの型が。。。
    • フィルタリングするLambdaを作成する
    → やりがち
    でもFilterに頼ってる & Amplifyぽくない
    

    View Slide

17. 17
    考えられる解決策
    Copyright © MEC Co., Ltd. All Rights reserved.
    • クエリパラメータにFilterを渡す
    → next処理をフロントエンドで処理するの大変
    • 「@searchable」で検索可能にする
    → 冗長
    • そもそもDynamoDBをGSI オーバーロードで設計しておく
    → フロントエンドへの型が。。。
    • フィルタリングするLambdaを作成する
    → やりがち
    でもFilterに頼ってる & Amplifyぽくない
    • もう一つDBつくればいいんじゃない？
    

    View Slide

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
    

    View Slide

19. アジェンダ
    Copyright © MEC Co., Ltd. All Rights reserved.
    直面した課題と解決策（ LSI問題 ）
    Amplifyを用いた新規事業アプリ
    今後の展望
    

    View Slide

20. 20
    Copyright © MEC Co., Ltd. All Rights reserved.
    展望：今後やりたいこと
    • DynamoDB Table乱立対策
    • スパイク対策
    • レイテンシ対策
    • 分散システムのデプロイ方法
    これらを解決していきたい
    with Amplify
    

    View Slide

21. 21
    オトとりっぷに協力してくれる人を
    募集しています！
    OTO TRIP Ambassador
    Copyright © MEC Co., Ltd. All Rights reserved.
    ご興味ある方は、お声がけお願いします！！
    オトとりっぷ公式Twitter
    もしよかったら、
    個人の方もお願いします
    

    View Slide

22. ありがとうございました！
    

    View Slide