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

#serverlessjp

Transcript

1. AppSync 使ってみた サーバレスライブコマースの構築 これまた流⽤して、別のやつを ごしらえして、 ⽇ です( ) SOURCE: CENTERS FOR DISEASE CONTROL AND PREVENTION Severless
   Meetup
   #10
   2020.
   11.
   04
   (Wed)
2. HTB北 テレビ HTB北 テレビ HTB北 テレビ 三浦⼀樹 三浦⼀樹 三浦⼀樹
3. AppSync
4. AppSync ちゃんと分かってないけど 薦められたので使ってみた
5. 10⽉頭にこんなイベントを開催しました 動画を⾒ながらお買い物イベント
6. 本番の画⾯ header
   にプレイヤー 下に shopify
   buybutton API
   で ハッシュタグ付き ツイート持ってくる
7. スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件： 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、 ほんとにそれを使うかはわからない
8. スケジュール不明のタイミングで 限定の商品を動画の下に出したい 追加要件： 時間限定商品の販売 動画が途切れちゃうので リロードさせるのはNG 商品は予め用意するけど、 ほんとにそれを使うかはわからない AppSync
   の
   Subscription
   でいける!?
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)
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 ?