如何建立LineBot圖文選單

一般的chat，像是Line或是messenger都是屬於文字介面，我之前有介紹過LineBot也可以透過程式來產生文字選單，但是最多只能產生四個選單，且選單也是文字介面，並且會隨著聊天室的聊天訊息一多而慢慢被頂到畫面外面。（請參閱：LineBot也可以做觸控選單）。

2017年10月，在Line裡也可以有圖文的選單了，而且不需要靠程式便能在Line的聊天室產生。有了這個圖文選單的選項，很多事情都能夠用LineBot很方便的控制一些東西了，例如控制電器用品開關、遠端遙控視訊監控或是控制自走車等等，都不需要另外寫手機的app，直接用大家手機都有的Line就可以搞定一切。我能夠想到的應用還有可以設計餐廳的點單系統，使用者用Line就可以在手機訂餐，選定主餐、湯品、甜點、飯後飲料等，都可以在Line上面用選單來點餐。

以下的例子，就是以LineBot圖文選單的方式控制micro:bit自走車而不需要輸入任何的文字就可以輕鬆控制，有需要的朋友可以研究一下Line的圖文選單，為您創造LineBot的無限可能。

Line的圖文選單設定步驟

一、首先必須要有LineBot的帳號才可以製作圖文選單，申請LineBot的步驟請參考我之前的文章：如何申請LineBot

二、登入｢LINE@MANAGER」，網址：https://admin-official.line.me/

三、選擇要新增圖文選單的LineBot帳號

四、點選圖文選單，建立新頁面，便可進入新增圖文選單的畫面

五、開始建立圖文選單，在建立之前，要先設計好圖文選單的圖片；如果沒時間設計，也可以在底下選擇以｢文字+圖標」的方式建立圖文選單。

六、建立好並儲存後，在Line上進入和這個LineBot的聊天室，便馬上可以看到您建立的圖文選單了，按一下，測試一下正不正常。

用Line的圖文選單控制自走車

在這裡用Line控制micro:bit自走車為例：

一、須要準備的東西：

1.二個micro:bit(一個連接電腦，發射廣播訊號，一個放在自走車上控制馬達)

2.一個micro:bit的馬達擴展板：KSB037

3.一台雙馬達的自走車

二、LineBot程式必須放在個人電腦裡(raspberry pi 也行)，用序列埠連接一個micro:bit，主要是傳送訊號給自走車的micro:bit，相關的資訊請參看我之前的文章：LineBot控制micro:bit。LineBot程式請取名叫index.js，程式內容如下：

var linebot = require('linebot');
var express = require('express');
var SerialPort = require('serialport');
var bot = linebot({
  channelId: '這裡改成自己Line的channelId',
  channelSecret: '這裡改成自己Line的channelSecret',
  channelAccessToken: '這裡改成自己Line的channelAccessToken'
});
//以下的com5請自行修改成自己的micro:bit和電腦連接時的com port名稱
//但是baudRate，115200的值，請勿修改
var mySerial = new SerialPort('com5', {baudRate: 115200});
const Delimiter = SerialPort.parsers.Delimiter;
var myId;
const parser = mySerial.pipe(new Delimiter({ delimiter: Buffer.from('\n') }));

//LineBot處理文字訊息的函式
//這一段的程式是專門處理當有人傳送文字訊息給LineBot時，我們的處理回應
bot.on('message', function(event) {
  if (event.message.type = 'text') {
    myId=event.source.userId;
    var msg = event.message.text;
    console.log(msg);
    sendToMicrobit(msg);
  }
});

function sendToMicrobit(msgFromLine){
  var myMsg='';
  if (msgFromLine=='溫度')
     myMsg='temperature\n';
  else if (msgFromLine=='前進'){
     myMsg='foreward\n';
  } else if (msgFromLine=='後退'){
     myMsg='backward\n';
  } else if (msgFromLine=='左轉'){
     myMsg='leftward\n';
  } else if (msgFromLine=='右轉'){
     myMsg='rightward\n';
  } else if (msgFromLine=='停車'){
     myMsg='stop\n';
  }
  if (myMsg!=''){
     if (msgFromLine!='溫度')
        bot.push(myId,msgFromLine+'中......');
        mySerial.write(myMsg, function(err) {
           if (err) {
              return console.log('Error on write: ', err.message);
           }
           console.log('訊息已傳送至micro:bit:'+myMsg);
        });
  }
}

parser.on('data', function (data) {
  var myString=data.toString();
  console.log('Data:',myString);
  if (myString.startsWith('temperature')){
     myString=myString.replace('temperature','溫度');
  } else if (myString.startsWith('light')){
     myString=myString.replace('light','光線');
  }  else if (myString==='A\r' || myString==='B\r'){
     myString=myString.replace('\r','')+'鍵已被按下！';
  }
  bot.push(myId,myString);
});

//LineBot處理使用者按下選單的函式
bot.on('postback', function (event) {
   var myMsg=event.postback.text;
   if (myMsg!=''){
      console.log(myMsg);
   }
});

const app = express();
const linebotParser = bot.parser();
app.post('/', linebotParser);

//因為 express 預設走 port 3000，而 heroku 上預設卻不是，要透過下列程式轉換
var server = app.listen(process.env.PORT || 8080, function() {
  var port = server.address().port;
  console.log("App now running on port", port);
});

三、和電腦連接的micro:bit，它的工作主要是將LineBot傳來的訊號送給micro:bit自走車，以及把自走車的訊號傳送給電腦裡的LineBot，在這個範例中是用廣播的方式，它的程式碼如下：

四、自走車上的micro:bit程式：