Building LINE Chatbot Using Dialogflow

Transcript

1. Building LINE Chatbot Using Dialogflow Warit Wanwithu (Tan) Developer Relations, LINE Jirawat Karanwittayakarn (Tee) Tech Evangelist, LINE Maneewan Boontamtarn (Bee) Community Manager, LINE
2. • LINE API Ecosystem • LAB: Create first LINE Chatbot • LAB: Building LINE Chatbot using Dialogflow • LAB: Chatbot prototypes using LINE Bot Designer • LAB: Introduction to LIFF Agenda
3. Why LINE API?
4. Apps Available 4.6M 30 Average no. of apps on a phone 7-9 Average no. of daily-used apps Sources: Statista & TNS 2018 APPS OVERFLOW
5. Developer Source: Nielsen HIGHEST TIME SPENT ON APP IN THAILAND average time spent on smartphone average time spent on LINE platform mins/day mins/day 216 63 LINE IN THAILAND Source: Nielsen 44M LINE users
6. LINE API ECOSYSTEM LINE LINE Messaging API LINE Notify Your Website Your Chat BOT /Service LINE Login Rich Menu Quick Reply LIFF LINE Pay LINE Beacon LINE Things
7. LINE Login LINE Login lets people easily create an account for your app or website using their LINE accounts. You can integrate LINE Login into your iOS, Android, or web app.
8. LINE Notify Get notifications from LINE Notify's official account after connecting with your preferred web services. You can receive notifications from multiple services in groups or 1-on-1 chats.
9. LINE Beacon LINE Beacon is a new service that lets you receive coupons, information about sales and special messages on LINE via the official accounts of stores outfitted with Beacons (Bluetooth transmitters).
10. LINE Things An IoT platform from LINE
11. LINE Pay Grow your business with LINE Pay. A simple and secure way to pay. LINE Pay provides secure and trustworthy service through its compliance with PCI DSS
12. LIFF WebView that allows seamless integration between CHAT and WEB
13. Developer LINE MESSAGING API
14. • Be able to send messages to 1-on-1 chat or group chats • Push and reply messages • The perfect message type for every occasion The Messaging API lets you develop Chatbot between your service and LINE users. What is LINE Messaging API?
16. 60K Active Bots
24. Developer BUILDING A BOT
25. When a user sends your bot a message, a webhook is triggered and the LINE Platform sends a request to your webhook URL. How it works LINE APP LINE Bot Platform 1.request 4.response Your Bot 2.webhook 3.API call
26. Webhook Event Object Message event Text, Image, Video, Audio, File, Location, Sticker Follow event Bot is added or unblocked Unfollow event Bot is blocked Join event Bot joins a group or room Leave event Bot leave a group or room Member join event User joins a group or room Member leave event User leaves a group or room Postback event User performs a postback action Beacon event User enters or leaves the range Account link event User has linked his/her LINE account with a provider's service account Device link event LINE Things device has been linked with LINE by a user operation Device unlink event LINE Things device has been unlinked from LINE by a user operation
27. Developer Reply with a message to users who interacts with your bot. Requires a reply token in the request Send reply messages LINE PLATFORM 1.message /event 4.message 2.webhook 3.Reply Your Bot
28. Developer Send messages directly to users whenever you want. Send push messages Your Bot 2.message 1.Push LINE PLATFORM
29. Message Type Text Sticker Image Video Audio Location
30. Advanced Messages Types Buttons Confirm Carousel Image Carousel
31. Imagemaps
32. Flex Message Menu Flight News Ticket Payment
33. When a user receives a message that contains quick reply buttons from a bot, those buttons appear at the bottom of the chat screen. Quick Reply
34. Rich Menu Rich menu API lets you display different rich menus to different users. You can create, link, and manage your rich menus programmatically.
35. LINE Bot Designer lets you prototype LINE bots faster and easier without any programming knowledge. LINE Bot Designer
36. Get LINE user profile information of users who interact with your bot in one-on-one and group chats. Get User Profile
37. Send messages in group chats and get information about the members of the group. Join Group Chats
38. Developer LAB: BUILDING A BOT
39. Developer https://manager.line.biz
40. Developer BMI Default Fallback Intent Default Welcome Intent BMI - custom BMI - custom - no BMI - custom - yes
41. Developer
42. 1. Download Bot Designer: https://developers.line.biz/en/services/bot-designer/ 2. Image: https://lin.ee/duuVtyR 3. Rich Menu Maker: https://lineforbusiness.com/richmenumaker/ Before we start
43. LINE Bot Designer Download Here:
44. Create Rich Menu with Rich Menu Maker https://lineforbusiness.com/richmenumaker/
45. Developer LINE Front-end Framework (LIFF)
46. LINE Frontend-End Framework LIFF WebView that allows seamless integration between CHAT and WEB
47. ENHANCE CHATBOT
49. COMPACT TALL FULL MULTI VIEW SIZES
50. LET’S LIFF!
51. Steps to create LIFF 1. Prepare HTML, JS and CSS 2. Import LIFF SDK 3. Using LIFF API 4. Deploy 5. Register LIFF App
52. https://github.com/line/line-liff-starter
53. Prerequisite Install node.js $ node --version $ npm install -g firebase-tools $ firebase --version
54. Firebase Hosting https://console.firebase.google.com
55. 4. Deploy $ cd Desktop $ mkdir liff-demo (Create new folder in Desktop) $ cd liff-demo $ firebase login $ firebase init copy index.html, liff-starter.js, style.css to ‘public’ folder $ firebase deploy
56. https://bit.ly/2ARgfbI
57. 5. Register LIFF App https://developers.line.biz/console/
58. Dialogflow
59. Developer WHAT’S NEXT?
60. FREE! Online course https://www.skooldio.com
61. fb.com/groups/linedevth Medium.com/linedevth @linedevth Follow us youtube.com/c/LINEDevelopersThailand fb.com/linedevth