Tweet
Tweet

Slide 1

Slide 1 text

Line Bot Dev - [email protected] Line Chatbot Messaging API Ryan Chung III Digital Education Institute 1

Slide 2

Slide 2 text

Line Bot Dev - [email protected] Lab Hello Echo Bot 會照著說的Line Bot 2

Slide 3

Slide 3 text

Line Bot Dev - [email protected] Create a channel • 登入至console • 選擇Provider或建立Provider • 設定Icon、名稱、Plan、類別、子類別、聯絡 email • Plan –Developer Trial：不能升級、可推播、限50友 –Free：不能推播、人數不限、之後可付費升級 https://developers.line.biz/console/register/messaging-api/provider/ 3

Slide 4

Slide 4 text

Line Bot Dev - [email protected] 設定 Bot • 產生Channel Access Token –Console -> Channel -> Channel settings –Mesaging settings -> Issue Channel access token • 設定Webhook URL –目前還無法設定，要等後面Bot建立完成 4

Slide 5

Slide 5 text

Line Bot Dev - [email protected] 安裝Node.js • 選擇穩定版 (Recommend For Most Users) – Windows Installer：下載msi檔 – macOS Installer：下載pkg檔 • 如何確認安裝? – 打開終端機，輸入：node -v https://nodejs.org/en/ 5

Slide 6

Slide 6 text

Line Bot Dev - [email protected] 安裝Ngrok • 建議放置位置 – Windows：主要使用者資料夾 – Mac：應用程式 • 設定為在哪裡都可以執行 – Windows：進階系統設定 -> 環境變數 -> 系統變數 -> Path -> 編輯 -> 新增 – Mac：ln -s /Applications/ngrok ngrok https://ngrok.com/download 6

Slide 7

Slide 7 text

Line Bot Dev - [email protected] 建立專案資料夾 • 新增一個資料夾作為專案資料夾 HelloLineBot • 用VS Code 開啟此專案資料夾 • 新增一個檔案：index.js 7

Slide 8

Slide 8 text

Line Bot Dev - [email protected] 建立index.js 輸入程式碼 8

Slide 9

Slide 9 text

Line Bot Dev - [email protected] 繼續於 index.js 輸入程式碼 9

Slide 10

Slide 10 text

Line Bot Dev - [email protected] 繼續於index.js 輸入程式碼 https://github.com/ryan403/LineEchoBot 10

Slide 11

Slide 11 text

Line Bot Dev - [email protected] 設定該專案用到的Key • 新增config資料夾 • 在config資料夾中新增檔案：default.json 11

Slide 12

Slide 12 text

Line Bot Dev - [email protected] 專案初始化 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 輸入npm init • 按下多次enter，使用預設值建立package.json 安裝需要的套件 • 在VS Code中，按下 Ctrl + ~ 開啟終端機 • 安裝能夠一次安裝需求模組的套件 – 在終端機輸入sudo npm install npm-install-all -g • 針對特定檔案中的需求來安裝套件 – 在終端機輸入npm-install-all index.js 12

Slide 13

Slide 13 text

Line Bot Dev - [email protected] 安裝Line SDK • npm-install-all 沒裝到 Line SDK npm install @line/bot-sdk 13

Slide 14

Slide 14 text

Line Bot Dev - [email protected] 增加Debug與Start Scripts • 在 package.json 新增 • debug：在地測試、start：伺服器上線 14

Slide 15

Slide 15 text

Line Bot Dev - [email protected] 執行並開啟除錯模式 • 點擊VS Code中左邊選單中的第四個(偵錯) • 上方Play按鈕右邊下拉新增組態... • 選擇「{ } Node.js 透過NPM 啟動」 • 按下Play按鈕 • 下方偵錯主控台確認伺服器是否已啟動 15

Slide 16

Slide 16 text

Line Bot Dev - [email protected] 運用Ngrok讓開發機變成伺服器 • 在終端機執行 ngrok http 1234 • 複製產生的公開網址 (Forwarding https://.....) Copy this one 16

Slide 17

Slide 17 text

Line Bot Dev - [email protected] 設定Line的Webhook • Line Channel Settings • Use webhooks -> Enabled • Webhook URL -> Edit 網址後面加上/callback，記得刪掉https:// 17

Slide 18

Slide 18 text

Line Bot Dev - [email protected] 關閉自動回覆與歡迎語 • 掃描QR code加入好友進行測試 18

Slide 19

Slide 19 text

Line Bot Dev - [email protected] 測試看看是否有回應！ 19

Slide 20

Slide 20 text

Line Bot Dev - [email protected] Lab Tell Image Bot 看得懂照片的Line Bot 20

Slide 21

Slide 21 text

Line Bot Dev - [email protected] 預期成果 21

Slide 22

Slide 22 text

Line Bot Dev - [email protected] Tell Image Bot • Line Messaging API + Microsoft 認知服務 + 部署上線 認知服務 Computer Vision Service • 圖片識別 Line Messaging API Node.JS SDK Line API 22

Slide 23

Slide 23 text

Line Bot Dev - [email protected] 整合前準備 • 前一個例子 Echo Bot • 微軟認知服務 – 電腦視覺 API Key • Line註冊好一個頻道, 取得相關Key 23

Slide 24

Slide 24 text

Line Bot Dev - [email protected] index.js 24

Slide 25

Slide 25 text

Line Bot Dev - [email protected] index.js 25

Slide 26

Slide 26 text

Line Bot Dev - [email protected] index.js 26

Slide 27

Slide 27 text

Line Bot Dev - [email protected] index.js 27

Slide 28

Slide 28 text

Line Bot Dev - [email protected] index.js 28

Slide 29

Slide 29 text

Line Bot Dev - [email protected] index.js 29

Slide 30

Slide 30 text

Line Bot Dev - [email protected] index.js https://github.com/ryan403/TellImageBot 30

Slide 31

Slide 31 text

Line Bot Dev - [email protected] 延伸Lab • 將Line Bot 與 各種AI Service結合 –判斷是不是肯德基(Custom Vision Service) –算算看有幾個人(Face API) • Line Notify 實作 –發生xx事，用Line通知 • IFTTT使用 –看看別人的結合案例 31

Slide 32

Slide 32 text

Line Bot Dev - [email protected] 數人頭預期成果 32