Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

VueとAWSAppSyncで始めるチャットアプリ開発

495 views

Published on

v-kansai#4 の登壇資料です

Published in: Internet
  • Be the first to comment

  • Be the first to like this

VueとAWSAppSyncで始めるチャットアプリ開発

  1. 1. VueとAWSAppSyncで 始めるチャットアプリ開発 株式会社KYOSO 泉 亮輔 2019/03/20 v-kansai Vue.js/Nuxt.js meetup #4
  2. 2. 2 • 泉 亮輔 (Ryosuke Izumi / is_ryo) • 株式会社KYOSO • IoTやってます(IoT.kyoto) • IoT,AWS チョットワカル • Vue.js / AWS / Serverless / GraphQL
  3. 3. 3 •AWSに関係する話が多いです •GraphQLとはなんぞ?についてはあまり深く 触れません •内容についての異論は認める 注意事項
  4. 4. 4 いきなりですが…
  5. 5. 5 RESTAPI してますか?
  6. 6. 6 GraphQL してますか?
  7. 7. 7 今日の目的
  8. 8. 8 GraphQLの嬉しみポイントを お伝えしたい
  9. 9. 9 Vue + GraphQLで なんか作りたい
  10. 10. 10 GraphQLってチャットアプリと かに使われてるんやなー
  11. 11. 11 ということで作ることにした
  12. 12. 12 どうやって実装するの?
  13. 13. 13 AWS AppSync と AWS Amplify を使う AWS AppSyncAmplify
  14. 14. 14 完成品はこちら
  15. 15. 15 https://chat.isryo.work/auth ※PC推奨 ※後日環境丸ごとぶっ殺します。
  16. 16. 16 ※画像は開発中の画面です
  17. 17. 17 アーキテクチャ Amplify AWS AppSync Amazon DynamoDB Amazon Cognito
  18. 18. 18 てか GraphQL ってなんぞ?
  19. 19. 19 • Facebookが開発しているWebAPIのた めの規格 • データを取得/更新などの処理を実 行する「クエリ言語」とAPI自体の仕 様を定義する「スキーマ言語」で構 成される • RESTAPIの代わりになる?
  20. 20. 20 で、なにが嬉しいの?
  21. 21. 21 •エンドポイントがひとつ •必要なアトリビュートだけ取得できる •Subscribeができる(≒通知を受け取れる) 嬉しみ
  22. 22. 22 エンドポイントがひとつ
  23. 23. 23 https://hoge.com/get https://hoge.com/post Amazon API Gateway
  24. 24. 24 https://hoge.com/get https://hoge.com/post path単位で処理を分ける
  25. 25. 25 https://hoge.com/ AWS AppSync
  26. 26. 26 https://hoge.com/ Bodyの内容で処理を分ける
  27. 27. 27 mutation create { createMessage ( input: { user_id: "Tanaka", create_time: "2019-03-20T12:00:00Z", body: "テスト投稿です" } ) { user_id create_time body } }
  28. 28. 28 必要なアトリビュート だけ取得できる
  29. 29. 29 query list { listMessages ( limit: 100 ) { user_id create_time body } } [ { user_id: "tanaka", create_time: "2019-03-20T12:00:00Z", body: "テストです" }, ...... ]
  30. 30. 30 query list { listMessages ( limit: 100 ) { user_id } } キーが user_id だけの Object 配列が返ってくる [ { user_id: "tanaka" }, { user_id: "sato" }, { user_id: "sato" }, ]
  31. 31. 31 Subscribeできる
  32. 32. 32 ① 特定のMutationを Subscriptionするで AWS AppSync
  33. 33. 33 AWS AppSync ② 特定のMutation処 理を実行するで
  34. 34. 34 ③ 特定のMutationが 実行されたで!! AWS AppSync
  35. 35. 35 •エンドポイントがひとつ •必要なアトリビュートだけ取得できる •Subscribeができる(≒通知を受け取れる) 嬉しみ
  36. 36. 36 嬉しみの裏には悲しみがある
  37. 37. 37 •スキーマ?クエリ?なにそれ美味しいのってな る •その上にResolverってなに?!ってなる •新しい言語を覚えるのと変わらんな… •要するに教育コスト高め(に感じた) 悲しみ
  38. 38. 38 •GraphQL使えばWebAPI周りがスッキリするか もよ •Subscribe素敵っ!!! •ただ教育・運用コスト上がる まとめ
  39. 39. 39 おわり

×