Save 37% off PRO during our Black Friday Sale! »

AppSync 使ってみた! サーバレスライブコマースの構築

74cec195bfb6cb5165256d88cb7fcf0f?s=47 Kazuki Miura
November 04, 2020

AppSync 使ってみた! サーバレスライブコマースの構築

#serverlessjp

74cec195bfb6cb5165256d88cb7fcf0f?s=128

Kazuki Miura

November 04, 2020
Tweet

Transcript

  1. AppSync 使ってみた サーバレスライブコマースの構築 これまた流⽤して、別のやつを ごしらえして、 ⽇ です( ) SOURCE: CENTERS

    FOR DISEASE CONTROL AND PREVENTION SeverlessMeetup#10 2020.11.04(Wed)
  2. HTB北 テレビ HTB北 テレビ HTB北 テレビ 三浦⼀樹 三浦⼀樹 三浦⼀樹

  3. AppSync

  4. AppSync ちゃんと分かってないけど 薦められたので使ってみた

  5. 10⽉頭にこんなイベントを開催しました 動画を⾒ながらお買い物イベント

  6. 本番の画⾯ headerにプレイヤー 下に shopifybuybutton APIで ハッシュタグ付き ツイート持ってくる

  7. スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件: 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、 ほんとにそれを使うかはわからない

  8. スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件: 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、 ほんとにそれを使うかはわからない AppSyncのSubscriptionでいける!?

  9. None
  10. None
  11. None
  12. あんまり詳しくない⼈が説明する

  13. ・query ・mutation ・subscription

  14. ・query ・mutation ・subscription 検索 変更 すぐ更新

  15. mutationはコンソールから直接操作 mutationの結果がsubscriptionでフロントへ queryはフロントからDynamoを

  16. timeSaleFlg 0 or 1

  17. query { id : 'aircaravan' } type Query { singlePost(id:

    ID!): Post } { "data": { "singlePost": { "id": "aircaravan", "timeSaleFlg": 1 } } } { "id": "aircaravan", "timeSaleFlg": 1 } AppSync Amplify DynamoDB
  18. mutation console AppSync Lambda DynamoDB コンソールで操作

  19. mutation {   timeSaleFlg: 1 } type Mutation { putPost(id:

    ID, timeSaleFlg: Int!): Post } { id: "aircaravan", timeSaleFlg: event.arguments.timeSaleFlg } Item: { id: "aircaravan", timeSaleFlg: event.arguments.timeSaleFlg } { "data": { "singlePost": { "id": "aircaravan", "timeSaleFlg": 1 } } } console AppSync Lambda DynamoDB query用にDynamoDBに保存
  20. console AppSync Amplify subscription {   timeSaleFlg: 1 } type

    Subscription { onPutPost: Post @aws_subscribe(mutations: ["putPost"]) } WebSocket type Mutation { putPost(id: ID, timeSaleFlg: Int!): Post } { "data": { "onPutPost": { "id": "aircaravan", "timeSaleFlg": 1 } } }
  21. subscription timeSaleFlg = 0 timeSaleFlg = 1

  22. subscription AppSync AppSync Amplify {   timeSaleFlg: 0 } {

      timeSaleFlg: 1 } shopify GraphQL 商品の入れ替えもGraphQL <v-if="timeSaleFlg"> 非表示 表示
  23. shopifyのコレクションにして IDをshopifyのコンソールから GraphQLで⼊れ替え スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件: 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、

    ほんとにそれを使うかはわからない 現地でコンソールからmutation subscriptionでリロードなし!
  24. スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件: 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、 ほんとにそれを使うかはわからない 現地でコンソールからmutation subscriptionでリロードなし!

    shopifyのコレクションにして IDをshopifyのコンソールから GraphQLで⼊れ替え COMPLETE!!$4くらい
  25. not yet... H O W D O Y O U

    L I K E W E D N E S D A Y ?
  26. 2020.10.28(WED) 2020.10.28(WED)

  27. 2020.11.04(WED) 2020.11.04(WED)

  28. None
  29. TO BE CONTINUED... H O W D O Y O

    U L I K E W E D N E S D A Y ?