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

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

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/

akitsukada

July 17, 2018
Tweet

More Decks by akitsukada

Other Decks in Technology

Transcript

  1. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  .FHVSPEFW[email protected] "NQMJGZה"QQ4ZODה*P5#VUUPOד⡲׏׋ ٔ،ٕة؎ي䫎牰ءأذي

  2. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  㝩歊 剼䒽אַ׌ ֹ֮מ׹ • أة٦ز،حفأُ٦ءّٝ鿇 ءص،أُ٦ءّٝ،٦ؗذؙز

    • TUBSUVQGJOUFDIGJOUFDITFDVSJUZ CMPDLDIBJOTFSWFSMFTTNPCJMF EFWFMPQNFOU✳⯢ך显
  3. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  4UBSUVQ"SDIJUFDUVSFPGUIFZFBS דך䫎牰ءأذي׾⡲׏׋鑧

  4. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE 

  5. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  © 2018, Amazon Web Services, Inc.

    or its affiliates. All rights reserved. 4UBSUVQ"SDIJUFDUVSFPGUIFZFBS  !  #       CTO100 Architecture of the year AWS      "  " #    7  ! ! !
  6. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  © 2018, Amazon Web Services, Inc.

    or its affiliates. All rights reserved. ؔ٦ر؍ؒٝأ 颣 • 굲㣓⠓㜥ך㾜爙ـ٦أחג♧菙勻㜥罏ח״׷نةٝ䫎牰 ָ遤׻׸גְתׅ
  7. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  䔲傈ך圫㶨כ׈מֿ׍׵ךش؎أٖه٦ز׾ https://codezine.jp/article/detail/10880

  8. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  ؔ٦ر؍ؒٝأ颣䫎牰ءأذيرٌ

  9. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE      

  10. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  䫎牰ءأذيך酅⩎

  11. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  䫎牰ءأذيך圓䧭 -BNCEB GVODUJPO Finalist.1 Button Finalist.2

    Button Finalist.n Button ... "84 "QQ4ZOD %ZOBNP %# "84 "NQMJGZ 44UBUJD 8FCTJUF)PTUJOH Invoke subscribe Query Static contents chart.js PutItem mutation push
  12. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  "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[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  -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[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  "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[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  *P5نةٝחאְג • ぐ *P5&OUFSQSJTFنةٝחכչ1MBDFNFOUպ׾ⶴ׶䔲ג׷ • 1MBDFNFOUךنةٝ׾䬃ׇל\GJOBMJTFUGJOBMJTU^

     1MBDFNFOUךنةٝ׾䬃ׇל\GJOBMJTFUGJOBMJTU^  1MBDFNFOUךنةٝ׾䬃ׇל\GJOBMJTFUGJOBMJTU^ • ֿ׸׵ָ -BNCEBؿ؋ؙٝءّٝךFWFOUػًٓ٦ةח 床׏גֻ׷ • ̔ ؿ؋ؙٝءّٝⰻדNVUBUJPOךػًٓ٦ةח • 鿪䏝8J'Jאַ׭זְה鷏⥋㣟侁ׅ׷㉏겗 • 䚈鼓ⴽך8J'J׾欽䠐׃׋׶˘
  16. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  عو׶וֿ׹הַ䠬䟝הַ

  17. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  عو׶וֿ׹כ暴חזַ׏׋ ֽו侒ִג鎉ִל (SBQI2-ךأؗ٦و㹀纏ה 3FBDUⰻדך"QQ4ZOD"QPMMPךسًُؗٝز 然钠ח㼰׃儗꟦׾⢪׏׋կ 䩛鯪ח馄أ؛٦ٓـٕ4

    $' "NQMJGZ  "QQ4ZOD %ZOBNP%# -BNCEBז،فٔ؛٦ ءّٝאֻ׸׋
  18. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  !BLJUTVLBEBתד䠬䟝׾ֶ㺔ׇֻ׌ְׁ

  19. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE