AWS AmplifyとAWS AppSyncとIoT Enterprise Buttonで作った リアルタイム投票システム / Real-time voting system using AWS AppSync, AWS Amplify and AWS IoT Enterprise Button

2018/07/17 Meguro.dev LT大会での発表資料
https://meguro-dev.connpass.com/event/91743/

Transcript

1. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  
   .FHVSPEFW
   NFHVSP@EFW "NQMJGZה"QQ4ZODה*P5
   #VUUPOד⡲׏׋ ٔ،ٕة؎ي䫎牰ءأذي
2. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  㝩歊 剼䒽אַ׌ ֹ֮מ׹ • أة٦ز،حفأُ٦ءّٝ鿇 ءص،أُ٦ءّٝ،٦ؗذؙز • TUBSUVQ
   GJOUFDI
   GJOUFDITFDVSJUZ
   CMPDLDIBJO
   TFSWFSMFTT
   NPCJMF
   EFWFMPQNFOU
   ✳⯢ך显
3. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  4UBSUVQ
   "SDIJUFDUVSF
   PG
   UIF
   ZFBS
    דך䫎牰ءأذي׾⡲׏׋鑧
4. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE 
5. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. 4UBSUVQ
   "SDIJUFDUVSF
   PG
   UIF
   ZFBS
   
     !  #       CTO100 Architecture of the year AWS      "  " #    7  ! ! !
6. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. ؔ٦ر؍ؒٝأ 颣 • 굲㣓⠓㜥ך㾜爙ـ٦أחג♧菙勻㜥罏ח״׷نةٝ䫎牰 ָ遤׻׸גְתׅ
7. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  䔲傈ך圫㶨כ׈מֿ׍׵ךش؎أٖه٦ز׾ https://codezine.jp/article/detail/10880
8. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE  ؔ٦ر؍ؒٝأ颣䫎牰ءأذيرٌ
9. h
   
   "NB[PO
   8FC
   4FSWJDFT
   *OD
   PS
   JUT
   "GGJMJBUFT
   "MM
   SJHIUT
   SFTFSWFE 
    
    
10. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  䫎牰ءأذيך酅⩎
11. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  䫎牰ءأذيך圓䧭 -BNCEB
    GVODUJPO Finalist.1 Button Finalist.2 Button Finalist.n Button ... "84 "QQ4ZOD %ZOBNP %# "84 "NQMJGZ 4
    4UBUJD 8FCTJUF
    )PTUJOH Invoke subscribe Query Static contents chart.js
     PutItem mutation push
12. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  "QQ4ZODך4DIFNB饔㶵ָNVUBUJPO鿇ⴓ type Mutation { updateVoteCount(input: UpdateVoteInput!): VoteCount } input UpdateVoteInput { Finalist: String! } type AllVotes { votes: [VoteCount!] } input CreateVoteHistoryInput { Finalist: String! } type Query { getVoteCount(Finalist: String!): VoteCount getAllVotes: AllVotes } type Subscription { newVote: VoteCount @aws_subscribe(mutations:["updateVoteCount"]) } type VoteCount { Finalist: String! Votes: Int }
13. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  -BNCEBַ׵ךNVUBUJPO const gql = require('graphql-tag'); // Set up mutation const newVote = gql(` mutation NewVote { updateVoteCount(input: {Finalist: "${Finalist}"}){ Finalist, Votes } } `); // Set up Apollo client const client = new AWSAppSyncClient({ url: url, region: region, auth: { type: type, credentials: AWS.config.credentials, }, disableOffline: true }); try { const newVoteResult = await client.mutate({ variables: { type: "variables", }, mutation: newVote, }); callback(null, { newVoteResult: newVoteResult, }); } catch (err) { callback(err); }
14. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  "NQMJGZַ׵ךTVCTDSJQUJPO // src/Queries/SubscribeToNewVote.js import gql from 'graphql-tag'; export default gql` subscription newVote { newVote { __typename Finalist Votes } }`; // src/Components/AllVotes.js import SubscribeToNewVote from '../Queries/SubscribeToNewVote'; componentDidMount() { this.props.allVotesQuery.subscribeToMore({ document: SubscribeToNewVote, updateQuery: (prev, { subscriptionData }) => { let newVote = subscriptionData.data.newVote; this.updateChart( newVote.Finalist, newVote.Votes ); } }); } (...snip...)
15. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  *P5نةٝחאְג • ぐ *P5
    &OUFSQSJTF
    نةٝחכչ1MBDFNFOUպ׾ⶴ׶䔲ג׷ • 1MBDFNFOUךنةٝ׾䬃ׇל
    \GJOBMJTFU
    GJOBMJTU^
    1MBDFNFOUךنةٝ׾䬃ׇל
    \GJOBMJTFU
    GJOBMJTU^
    1MBDFNFOUךنةٝ׾䬃ׇל
    \GJOBMJTFU
    GJOBMJTU^
    • ֿ׸׵ָ -BNCEB
    ؿ؋ؙٝءّٝךFWFOUػًٓ٦ةח 床׏גֻ׷ • ̔ ؿ؋ؙٝءّٝⰻדNVUBUJPOךػًٓ٦ةח • 鿪䏝8J'Jאַ׭זְה鷏⥋㣟侁ׅ׷㉏겗 • 䚈鼓ⴽך8J'J׾欽䠐׃׋׶˘
16. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  عو׶וֿ׹הַ䠬䟝הַ
17. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  عو׶וֿ׹כ暴חזַ׏׋ ֽו侒ִג鎉ִל (SBQI2-
    ךأؗ٦و㹀纏ה 3FBDUⰻדך"QQ4ZOD"QPMMPךسًُؗٝز 然钠ח㼰׃儗꟦׾⢪׏׋կ 䩛鯪ח馄أ؛٦ٓـٕ4
    
    $'
    
    "NQMJGZ
    "QQ4ZOD
    %ZOBNP%#
    -BNCEBז،فٔ؛٦ ءّٝאֻ׸׋
18. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE  !BLJUTVLBEB
    תד䠬䟝׾ֶ㺔ׇֻ׌ְׁ
19. h
    
    "NB[PO
    8FC
    4FSWJDFT
    *OD
    PS
    JUT
    "GGJMJBUFT
    "MM
    SJHIUT
    SFTFSWFE