Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

oto trip
March 18, 2023

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

oto trip

March 18, 2023
Tweet

More Decks by oto trip

Other Decks in Technology

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