Introduction to LINE Messaging API

Transcript

1. Introduction to LINE Messaging API By Annop (Champ) Kobkij Date 20.10.2018
2. LINE Messaging API
3. https://developers.line.me
4. Products
5. Products
6. More… •LINE SDK •LINE Front-end Framework (LIFF) •LINE Notify •LINE Social Plugins
7. How it works
8. How it works
9. Concepts/Objects •Webhook event objects •Message •Actions •Profile •Group/Room •Rich menu •Beacons
10. Concepts/Objects •Webhook event objects •Message •Actions •Profile •Group/Room •Rich menu •Beacons { "object": "json" }
11. Concepts/Objects •Webhook event objects •Message •Actions •Profile •Group/Room •Rich menu •Beacons
12. Webhook event objects { "events": [ { "type": "message", "replyToken": "cad4343bc1af4f4a8a9f6647a29ebcd4", "source": { "userId": "U874a7249827501733bbeb8e5a6bd0b72", "type": "user" }, "timestamp": 1539767444763, "message": { "type": "text", "id": "8729978318099", "text": "สวัสดี Barcamp Songkhla" } } ] }
13. Webhook event objects { "events": [ { "type": "message", "replyToken": "cad4343bc1af4f4a8a9f6647a29ebcd4", "source": { "userId": "U874a7249827501733bbeb8e5a6bd0b72", "type": "user" }, "timestamp": 1539767444763, "message": { "type": "text", "id": "8729978318099", "text": "สวัสดี Barcamp Songkhla" } } ] }
14. Webhook event objects { "events": [ { "type": "message", "replyToken": "cad4343bc1af4f4a8a9f6647a29ebcd4", "source": { "userId": "U874a7249827501733bbeb8e5a6bd0b72", "type": "user" }, "timestamp": 1539767444763, "message": { "type": "text", "id": "8729978318099", "text": "สวัสดี Barcamp Songkhla" } } ] }
15. Webhook event objects { "events": [ { "type": "message", "replyToken": "cad4343bc1af4f4a8a9f6647a29ebcd4", "source": { "userId": "U874a7249827501733bbeb8e5a6bd0b72", "type": "user" }, "timestamp": 1539767444763, "message": { "type": "text", "id": "8729978318099", "text": "สวัสดี Barcamp Songkhla" } } ] }
16. Webhook event objects { "events": [ { "type": "message", "replyToken": "cad4343bc1af4f4a8a9f6647a29ebcd4", "source": { "userId": "U874a7249827501733bbeb8e5a6bd0b72", "type": "user" }, "timestamp": 1539767444763, "message": { "type": "text", "id": "8729978318099", "text": "สวัสดี Barcamp Songkhla" } } ] }
17. Message event - Text { "type": "text", "text": "BarcampSK" }
18. Message event - Image { "type": "image", "originalContentUrl":"HTTPS", "previewImageUrl": "HTTPS" }
19. Message event - Buttons Template { "type": "template", "altText": "this is a buttons template", "template": { "type": "buttons", "actions": [ { "type": "message", "label": "Hello", "text": "hello" }, { "type": "message", "label": "World", "text": "World" } ], "thumbnailImageUrl": "HTTPS", "title": "Barcamp Songkhla", "text": "#barcampsk" } }
20. Message event - Buttons Template { "type": "template", "altText": "this is a buttons template", "template": { "type": "buttons", "actions": [ { "type": "message", "label": "Hello", "text": "hello" }, { "type": "message", "label": "World", "text": "World" } ], "thumbnailImageUrl": "HTTPS", "title": "Barcamp Songkhla", "text": "#barcampsk" } }
21. Message event - Buttons Template { "type": "template", "altText": "this is a buttons template", "template": { "type": "buttons", "actions": [ { "type": "message", "label": "Hello", "text": "hello" }, { "type": "message", "label": "World", "text": "World" } ], "thumbnailImageUrl": "HTTPS", "title": "Barcamp Songkhla", "text": "#barcampsk" } }
22. Message event - Buttons Template { "type": "template", "altText": "this is a buttons template", "template": { "type": "buttons", "actions": [ { "type": "postback", "label": "Hello", "text": "Hello", "data": “hello-data" }, { "type": "message", "label": "World", "text": "World" } ], "thumbnailImageUrl": "HTTPS", "title": "Barcamp Songkhla", "text": "#barcampsk" } }
23. Getting Started
24. Getting Started •Create channel •Get access token •Register Webhook our app server •Testing with ngrok
25. Getting Started •Create channel •Get access token •Register Webhook our app server •Testing with ngrok
26. Create
27. Getting Started •Create channel •Get access token •Register Webhook our app server •Testing with ngrok
30. Getting Started •Create channel •Get access token •Register Webhook our app server •Testing with ngrok
31. App server app.post('/webhook', (req, res) => { res.sendStatus(200); })
32. Getting Started •Create channel •Get access token •Register Webhook our app server •Testing with ngrok
33. ngrok http 3000
34. ngrok by @inconshreveable Session Status online Account anop72 (Plan: Free) Version 2.2.8 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://cbb3ff8b.ngrok.io -> localhost:3000 Forwarding https://cbb3ff8b.ngrok.io -> localhost:3000 ngrok http 3000
35. ngrok by @inconshreveable Session Status online Account anop72 (Plan: Free) Version 2.2.8 Region United States (us) Web Interface http://127.0.0.1:4040 Forwarding http://cbb3ff8b.ngrok.io -> localhost:3000 Forwarding https://cbb3ff8b.ngrok.io -> localhost:3000 ngrok http 3000
37. How it works
38. curl -X POST \ https://api.line.me/v2/bot/message/push \ -H 'Content-type: application/json' \ -H 'Authorization: Bearer ACCESS_TOKEN' \ -d '{ "to" : "U874a7249827501733bbeb8e5a6bd0b72", "messages": [ { "type": "text", "text": "Hello from curl" } ] }'
39. curl -X POST \ https://api.line.me/v2/bot/message/push \ -H 'Content-type: application/json' \ -H 'Authorization: Bearer ACCESS_TOKEN' \ -d '{ "to" : "U874a7249827501733bbeb8e5a6bd0b72", "messages": [ { "type": "text", "text": "Hello from curl" } ] }'
40. BarcampSK BOT @yws5178n
41. LINE Bot Designer
42. LINE Bot Designer
45. Resources •https://developers.line.me/en •https://scaleup.line.me •https://www.line-community.me/contributors •https://www.facebook.com/groups/LINEDEVTH/
46. @anop72 •https://github.com/anop72/barcampsk •https://github.com/anop72/line-bot-sdk-node •https://medium.com/@anop72