Slide 1
Slide 1 text
AppSync
使ってみた
サーバレスライブコマースの構築
これまた流⽤して、別のやつを ごしらえして、 ⽇ です( )
SOURCE: CENTERS FOR DISEASE CONTROL AND PREVENTION
SeverlessMeetup#10
2020.11.04(Wed)
Slide 2
Slide 2 text
HTB北 テレビ
HTB北 テレビ
HTB北 テレビ
三浦⼀樹
三浦⼀樹
三浦⼀樹
Slide 3
Slide 3 text
AppSync
Slide 4
Slide 4 text
AppSync
ちゃんと分かってないけど
薦められたので使ってみた
Slide 5
Slide 5 text
10⽉頭にこんなイベントを開催しました
動画を⾒ながらお買い物イベント
Slide 6
Slide 6 text
本番の画⾯
headerにプレイヤー
下に
shopifybuybutton
APIで
ハッシュタグ付き
ツイート持ってくる
Slide 7
Slide 7 text
スケジュール不明のタイミングで
限定の商品を動画の下に出したい
追加要件：
時間限定商品の販売 動画が途切れちゃうので
リロードさせるのはNG
商品は予め用意するけど、
ほんとにそれを使うかはわからない
Slide 8
Slide 8 text
スケジュール不明のタイミングで
限定の商品を動画の下に出したい
追加要件：
時間限定商品の販売 動画が途切れちゃうので
リロードさせるのはNG
商品は予め用意するけど、
ほんとにそれを使うかはわからない
AppSyncのSubscriptionでいける!?
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
あんまり詳しくない⼈が説明する
Slide 13
Slide 13 text
・query
・mutation
・subscription
Slide 14
Slide 14 text
・query
・mutation
・subscription
検索
変更
すぐ更新
Slide 15
Slide 15 text
mutationはコンソールから直接操作
mutationの結果がsubscriptionでフロントへ
queryはフロントからDynamoを
Slide 16
Slide 16 text
timeSaleFlg
0 or 1
Slide 17
Slide 17 text
query
{
id : 'aircaravan'
}
type Query {
singlePost(id: ID!): Post
}
{
"data": {
"singlePost": {
"id": "aircaravan",
"timeSaleFlg": 1
}
}
}
{
"id": "aircaravan",
"timeSaleFlg": 1
}
AppSync
Amplify DynamoDB
Slide 18
Slide 18 text
mutation
console AppSync Lambda DynamoDB
コンソールで操作
Slide 19
Slide 19 text
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に保存
Slide 20
Slide 20 text
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
}
}
}
Slide 21
Slide 21 text
subscription
timeSaleFlg = 0 timeSaleFlg = 1
Slide 22
Slide 22 text
subscription
AppSync AppSync
Amplify
{
timeSaleFlg: 0
}
{
timeSaleFlg: 1
}
shopify GraphQL
商品の入れ替えもGraphQL
非表示 表示
Slide 23
Slide 23 text
shopifyのコレクションにして
IDをshopifyのコンソールから
GraphQLで⼊れ替え
スケジュール不明のタイミングで
限定の商品を動画の下に出したい
追加要件：
時間限定商品の販売 動画が途切れちゃうので
リロードさせるのはNG
商品は予め用意するけど、
ほんとにそれを使うかはわからない
現地でコンソールからmutation
subscriptionでリロードなし！
Slide 24
Slide 24 text
スケジュール不明のタイミングで
限定の商品を動画の下に出したい
追加要件：
時間限定商品の販売 動画が途切れちゃうので
リロードさせるのはNG
商品は予め用意するけど、
ほんとにそれを使うかはわからない
現地でコンソールからmutation
subscriptionでリロードなし！
shopifyのコレクションにして
IDをshopifyのコンソールから
GraphQLで⼊れ替え
COMPLETE!!$4くらい
Slide 25
Slide 25 text
not yet...
H O W D O Y O U L I K E W E D N E S D A Y ?
Slide 26
Slide 26 text
2020.10.28(WED)
2020.10.28(WED)
Slide 27
Slide 27 text
2020.11.04(WED)
2020.11.04(WED)
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
TO BE CONTINUED...
H O W D O Y O U L I K E W E D N E S D A Y ?