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

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

1,015 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 おわり

×