lattepanda 拿鐵熊貓

【LattePanda】使用LattePanda打造Line機器人

Posted on by 鄭 建彥
25
12 月

本文章將來介紹一下如何在LattePanda上面部署一個LINE智慧對話機器人，並拿它來控制LattePanda上的Arduino IO。

作者/攝影   袁佑緣
時間   3小時
成本  時間就是成本
難度

 ★★★☆☆
材料表
  • LattePanda拿鐵熊貓
  • 手機

STEP1. LINE開發者帳號與取用LINE Message API

首先, 我們需要先在 LINE 的開發者官方網站 (https://developers.line.me/en/) 註冊一個LINE開發者帳號。

請點選右邊的 Start using Message API， 接下來系統將會提示使用者完成三個設定步驟以完成新增一個通道。

首先，你必須先選取一個提供者，也就是告訴系統是誰提供這個APP的服務。

接下來，請填上關於取用Messaging API 的必要資訊。

最後一步，確認玩設定都沒錯後，按下confirm，你將會看到一個新增的通道出現在一開始的console頁面。

STEP2. 安裝Node.js與下載 line-bot-sdk-nodejs library

在我們繼續完成 LINE Bot細部設定之前，我們必須先安裝一下LINE Bot的軟體開發環境。 我們開發LINE Bot所使用的程式語言是 node.js，所以請點選以下網址(https://nodejs.org/en/download/) 將Windows版本的node.js下載下來並安裝在LattePanda上面。

安裝完後，我們還需要用到LINE Bot SDK ，請到以下的github 網址(https://github.com/line/line-bot-sdk-nodejs) 下載並解壓縮官方的node.js 版 LINE Bot SDK。

如果有讀者想要查這個LINE Bot SDK的詳細使用資訊的話，可以點選此網址 (https://line.github.io/line-bot-sdk-nodejs/) 到官方的gitbook上看進一步的API使用說明，以及如何去用javascript來撰寫機器人的對話功能。

最後請打開命令提示字元（按下快捷鍵 <Win+R> 並輸入”cmd”叫出command prompt）， 並輸入以下的命令將工作目錄移動到方才解壓縮的LINE Bot SDK資料夾下的echo-bot範例（line-bot-sdk-nodejs/examples/echo-bot）。

[pastacode lang=”c” manual=”cd%20THE_ECHO-BOT_EXAPMLE_FOLDER(ex%3A%20C%3A%5CUsers%5Clattepanda%5Cline-bot-sdk-nodejs%5Cexamples%5Cecho-bot)” message=”” highlight=”” provider=”manual”/]

接下來請輸入以下的指令來安裝需要用到的node.js套件，在這個範例中，我們會需要安裝兩個額外的套件，一個是用來開啟伺服器的express套件，另外一個則是LINE Bot的SDK函式庫。

[pastacode lang=”c” manual=”npm%20install” message=”” highlight=”” provider=”manual”/]

 

STEP3. 用ngrok來將本地伺服器開放到網路上

在前面的步驟中，我們雖然可以開啟一個本地的伺服器，但是為了要能夠取用網路上的 LINE Messaging API，我們必須使用一些工具來將LattePanda上的服務開放到雲端上。

 

請點選此網址(https://ngrok.com/download)來下載ngrok，這套軟體可以讓使用者在本地伺服器與網際網路建立一個加密的網路通道。

下載完成後，請將壓縮檔解壓縮，並點選ngrok.exe，呼叫出一個命令提示字元。

請在上面輸入以下的指令在localhost的port 3000開啟一個http的通道。

[pastacode lang=”c” manual=”ngrok%20http%203000″ message=”” highlight=”” provider=”manual”/]

成功開啟後，將會看到如以下的畫面。你將會得到兩個開放的網址，一個是走HTTP，另外一個則是走有加密的HTTPS，請記住這個連結，待會我們將要把這個連接填到LINE Bot上的回呼位址上。

STEP4. 設定Channel Secret/Webhook/Token

請點選剛剛在 STEP2 新增的APP，我們將要完成LINE Bot上最後三個主要的溝通憑證。

第一個是設定頻道的金鑰，請按下issue並複製這段的金鑰到echo-bot的範例資料夾中的index.js檔中。

接下來，同樣地也請點選issue並把channel的access token貼到index.js的config中。

[pastacode lang=”c” manual=”%2F%2F%20create%20LINE%20SDK%20config%20from%20env%20variables%0Aconst%20config%20%3D%20%7B%0A%20%20channelSecret%3A%20’PASTE_YOUR_CHANNEL_SECRET’%2C%0A%20%20channelAccessToken%3A%20’PASTE_YOUR_ACCESS_TOKEN’%2C%0A%7D%3B%0A” message=”index.js” highlight=”” provider=”manual”/]

最後，我們的APP需要設定一個webhook網址，請填上你在STEP3 中開啟的ngrok所得到的網址，並在最後面加上 “/callback” 。例如： “20c21167.ngrok.io/callback”.

STEP5. LineBot 測試

請用智慧型手機打開LINE APP並掃描這個機器人的QR code來加好友。

接下來回到LattePanda上輸入以下的指令執行echo-bot程式並確認ngrok通道已經正確開啟了且webhook的網址也有設定在LINE Bot console 頁面了。

[pastacode lang=”c” manual=”node%20.” message=”” highlight=”” provider=”manual”/]

請在上面手機上用LINE打上一些文字看看LINE Bot會有什麼反應吧！

 

STEP6. 使用 serial來與Arduino做溝通

請下載以下的Arduino程式碼到 LattePanda上的 Arduino Leonardo核心。

這個程式中，我們時做了一個簡單的serial控制的LED開關，如果使用者在序列埠監控視窗中輸入一個大寫的T，LED燈就會被打開，如果輸入大寫的F，LED燈則會被關閉。

[pastacode lang=”c” manual=”void%20setup()%0A%7B%0A%20%20%20%20Serial.begin(9600)%3B%0A%20%20%20%20pinMode(LED_BUILTIN%2C%20OUTPUT)%3B%0A%20%20%20%20%0A%7D%0A%0Avoid%20loop()%0A%7B%0A%20%20%20%20if(Serial.available())%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20char%20cmd%20%3D%20Serial.read()%3B%0A%20%20%20%20%20%20%20%20if(cmd%20%3D%3D%20’T’)%0A%20%20%20%20%20%20%20%20%20%20%20%20digitalWrite(LED_BUILTIN%2C%20HIGH)%3B%0A%20%20%20%20%20%20%20%20else%20if(cmd%20%3D%3D%20’F’)%0A%20%20%20%20%20%20%20%20%20%20%20%20digitalWrite(LED_BUILTIN%2C%20LOW)%3B%0A%20%20%20%20%20%20%20%20else%0A%20%20%20%20%20%20%20%20%20%20%20%20Serial.println(%22Enter%20T%2FF%20to%20turn%20ON%2FOFF%20LED%22)%3B%0A%20%20%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

STEP7. 在LattePanda上使用LineBot 來控制LED

我們想在LattePanda上使用node.js取用serial來控制LED燈，所以我們必須再新增一個新的node.js函式庫。請在範例echo-bot中的資料夾中打開 package.json ，並如以下的範例加上 serialport 這個套件來讓node.js可以使用Serial來與Arduino做溝通。

package.json

[pastacode lang=”c” manual=”%7B%0A%20%20%22name%22%3A%20%22echo-bot%22%2C%0A%20%20%22version%22%3A%20%220.0.0%22%2C%0A%20%20%22description%22%3A%20%22An%20example%20LINE%20bot%20just%20to%20echo%20messages%22%2C%0A%20%20%22main%22%3A%20%22index.js%22%2C%0A%20%20%22scripts%22%3A%20%7B%0A%20%20%20%20%22start%22%3A%20%22node%20.%22%0A%20%20%7D%2C%0A%20%20%22dependencies%22%3A%20%7B%0A%20%20%20%20%22%40line%2Fbot-sdk%22%3A%20%22%5E5.0.0%22%2C%0A%20%20%20%20%22express%22%3A%20%22%5E4.15.2%22%2C%0A%20%20%20%20%22serialport%22%3A%20%22%5E6.0.4%22%0A%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

改完之後別忘了輸入以下的指令來更新node.js的套件。

[pastacode lang=”c” manual=”npm%20install” message=”” highlight=”” provider=”manual”/]

現在我們要在原本的 echo-bot 中的index.js 程式中加入Serial的溝通功能。

首先，請如以下的範例加入serialport的設定，並注意設定好指定的COM Port，也就是在LattePanda上的Arduino Leonardo連接到的COM Port，例如：COM2。

 

index.js

[pastacode lang=”c” manual=”‘use%20strict’%3B%0A%0Aconst%20line%20%3D%20require(‘%40line%2Fbot-sdk’)%3B%0Aconst%20express%20%3D%20require(‘express’)%3B%0Aconst%20SerialPort%20%3D%20require(‘serialport’)%3B%0Aconst%20serialPort%20%3D%20new%20SerialPort(‘COM2’%2C%20%7B%0A%20%20%20%20baudRate%3A%209600%0A%7D)%3B%0A” message=”” highlight=”” provider=”manual”/]

最後請修改echo-bot預設的handler函式中的功能，加入以下的程式碼好讓node.js根據不同的情形透過Serial送出大寫的T跟F到Arduino 。

 

 

index.js

[pastacode lang=”c” manual=”%2F%2F%20event%20handler%0Afunction%20handleEvent(event)%20%7B%0A%20%20if%20(event.type%20!%3D%3D%20’message’%20%7C%7C%20event.message.type%20!%3D%3D%20’text’)%20%7B%0A%20%20%20%20%2F%2F%20ignore%20non-text-message%20event%0A%20%20%20%20return%20Promise.resolve(null)%3B%0A%20%20%7D%0A%0A%20%20if(event.message.text%20%3D%3D%20’ON’)%20%7B%0A%20%20%20%20%20%20serialPort.write(‘T’)%3B%0A%20%20%20%20%20%20const%20echo%20%3D%20%7Btype%3A%20’text’%2C%20text%3A%20’Turn%20ON%20LED’%7D%3B%0A%20%20%20%20%20%20return%20client.replyMessage(event.replyToken%2C%20echo)%3B%0A%20%20%7D%20else%20if(event.message.text%20%3D%3D%20’OFF’)%7B%0A%20%20%20%20%20%20serialPort.write(‘F’)%3B%0A%20%20%20%20%20%20const%20echo%20%3D%20%7Btype%3A%20’text’%2C%20text%3A%20’Turn%20OFF%20LED’%7D%3B%0A%20%20%20%20%20%20return%20client.replyMessage(event.replyToken%2C%20echo)%3B%0A%20%20%7D%20else%20%7B%0A%20%20%20%20%20%20%2F%2F%20create%20a%20echoing%20text%20message%0A%20%20%20%20%20%20const%20echo%20%3D%20%7Btype%3A%20’text’%2C%20text%3A%20event.message.text%7D%3B%0A%20%20%20%20%20%20return%20client.replyMessage(event.replyToken%2C%20echo)%3B%0A%20%20%7D%0A%7D%0A” message=”” highlight=”” provider=”manual”/]

現在請重新執行index.js並確認ngrok有正確打開（STEP3），接下來就可以在手機上測試看看是否在LINE上輸入ON/OFF，LINE Bot就會去自動開關LattePanda上的LED燈囉！

以下是本文章的範例LINE Bot範例影片。

 

相關文章：

Post Views: 615

Related Posts

鄭 建彥

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *