Line Chatbot Development

1. Line Bot Dev - Ryan@iii.org.tw Line Chatbot Messaging API Ryan Chung III Digital Education Institute 1
2. Line Bot Dev - Ryan@iii.org.tw Lab Hello Echo Bot 會照著說的Line Bot 2
3. Line Bot Dev - Ryan@iii.org.tw Create a channel • 登入至console • 選擇Provider或建立Provider • 設定Icon、名稱、Plan、類別、子類別、聯絡 email • Plan –Developer Trial：不能升級、可推播、限50友 –Free：不能推播、人數不限、之後可付費升級 https://developers.line.biz/console/register/messaging-api/provider/ 3
4. Line Bot Dev - Ryan@iii.org.tw 設定 Bot • 產生Channel Access Token –Console -> Channel -> Channel settings –Mesaging settings -> Issue Channel access token • 設定Webhook URL –目前還無法設定，要等後面Bot建立完成 4
5. Line Bot Dev - Ryan@iii.org.tw 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 5
6. Line Bot Dev - Ryan@iii.org.tw 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 6
7. Line Bot Dev - Ryan@iii.org.tw 建立專案資料夾 • 新增一個資料夾作為專案資料夾 HelloLineBot • 用VS Code 開啟此專案資料夾 • 新增一個檔案：index.js 7
8. Line Bot Dev - Ryan@iii.org.tw 建立index.js 輸入程式碼 8
9. Line Bot Dev - Ryan@iii.org.tw 繼續於 index.js 輸入程式碼 9
10. Line Bot Dev - Ryan@iii.org.tw 繼續於index.js 輸入程式碼 https://github.com/ryan403/LineEchoBot 10
11. Line Bot Dev - Ryan@iii.org.tw 設定該專案用到的Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json 11
12. Line Bot Dev - Ryan@iii.org.tw 專案初始化 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 輸入npm init • 按下多次enter，使用預設值建立package.json 安裝需要的套件 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 – 在終端機輸入sudo npm install npm-install-all -g • 針對特定檔案中的需求來安裝套件 – 在終端機輸入npm-install-all index.js 12
13. Line Bot Dev - Ryan@iii.org.tw 安裝Line SDK • npm-install-all 沒裝到 Line SDK npm install @line/bot-sdk 13
14. Line Bot Dev - Ryan@iii.org.tw 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 14
15. Line Bot Dev - Ryan@iii.org.tw 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 15
16. Line Bot Dev - Ryan@iii.org.tw 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 1234 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 16
17. Line Bot Dev - Ryan@iii.org.tw 設定Line的Webhook • Line Channel Settings • Use webhooks -> Enabled • Webhook URL -> Edit 網址後面加上/callback，記得刪掉https:// 17
18. Line Bot Dev - Ryan@iii.org.tw 關閉自動回覆與歡迎語 • 掃描QR code加入好友進行測試 18
19. Line Bot Dev - Ryan@iii.org.tw 測試看看是否有回應！ 19
20. Line Bot Dev - Ryan@iii.org.tw Lab Tell Image Bot 看得懂照片的Line Bot 20
21. Line Bot Dev - Ryan@iii.org.tw 預期成果 21
22. Line Bot Dev - Ryan@iii.org.tw Tell Image Bot • Line Messaging API + Microsoft 認知服務 + 部署上線 認知服務 Computer Vision Service • 圖片識別 Line Messaging API Node.JS SDK Line API 22
23. Line Bot Dev - Ryan@iii.org.tw 整合前準備 • 前一個例子 Echo Bot • 微軟認知服務 – 電腦視覺 API Key • Line註冊好一個頻道, 取得相關Key 23
24. Line Bot Dev - Ryan@iii.org.tw index.js 24
25. Line Bot Dev - Ryan@iii.org.tw index.js 25
26. Line Bot Dev - Ryan@iii.org.tw index.js 26
27. Line Bot Dev - Ryan@iii.org.tw index.js 27
28. Line Bot Dev - Ryan@iii.org.tw index.js 28
29. Line Bot Dev - Ryan@iii.org.tw index.js 29
30. Line Bot Dev - Ryan@iii.org.tw index.js https://github.com/ryan403/TellImageBot 30
31. Line Bot Dev - Ryan@iii.org.tw 延伸Lab • 將Line Bot 與 各種AI Service結合 –判斷是不是肯德基(Custom Vision Service) –算算看有幾個人(Face API) • Line Notify 實作 –發生xx事，用Line通知 • IFTTT使用 –看看別人的結合案例 31
32. Line Bot Dev - Ryan@iii.org.tw 數人頭預期成果 32