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  © 2018, Amazon Web Services, Inc.

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

    or its affiliates. All rights reserved. ؔ٦ر؍ؒٝأ 颣 • 굲㣓⠓㜥ך㾜爙ـ٦أחג♧菙勻㜥罏ח״׷نةٝ䫎牰 ָ遤׻׸גְתׅ
  3. 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
  4. 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 }
  5. 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); }
  6. 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...)
  7. h "NB[PO8FC4FSWJDFT *ODPSJUT"GGJMJBUFT"MMSJHIUTSFTFSWFE  *P5نةٝחאְג • ぐ *P5&OUFSQSJTFنةٝחכչ1MBDFNFOUպ׾ⶴ׶䔲ג׷ • 1MBDFNFOUךنةٝ׾䬃ׇל\GJOBMJTFUGJOBMJTU^

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