LineMessageAPI EchoBot Line 聊天機器人

使用Heroku佈版Line Message API以及多種類型訊息教學

Emily Su 2021/10/21 12:00:00

2 3625

使用作業系統：MacOS
使用語言：Node.js
使用開發工具：文字編譯工具(Sublime Text)、終端機(佈版跟查看log)

主題一、〈申請Heroku與下載Echo-bot範例程式〉

一、還沒有LineBot帳號的人請先在Line Developer網站註冊一支官方帳號並且下載echo bot的範例程式碼。
https://developers.line.biz/zh-hant/ (申請Line Bot帳號)

https://github.com/line/line-bot-sdk-nodejs (echo bot sample)

網路上有很多申請帳號步驟跟下載line-bot-sdk-nodejs教學，此篇文章不再贅述。

常見的LineBot程式碼佈版方式就是在免費的雲端平台Heroku部署，以下大概介紹一下：
申請Heroku帳號

創建App

命名App

在Config Vars區塊點擊Reveal Config Vars綁定你的LineBot帳號Channel Secret跟Channel Access Token，Key可以自訂，唯一要注意的是Key名稱必須與line-bot-sdk-nodejs的index.js環境變數名稱相同

設定完成，Heroku會給你一組Heroku App網址，這個可以貼在Line Messaging API的Webhook URL欄位

底下的「Use webhook」開關記得打開

二、安裝node
LineBot支援許多語言，此篇文章將以Node.js為示範。
下載Node.js 。

一、下載echo-bot的sample

可以進入 LINE SDK 點擊右上角綠色按鈕選擇”Download ZIP”下載整包壓縮檔到本地端，或是複製URL，另外開Terminal 輸入指令下載專案包

$ git clone https://github.com/line/line-bot-sdk-nodejs

二、下載好專案包，我們就可以開始編輯資料包裡面位在example資料夾裡的index.js檔，編寫我們希望機器人回覆的訊息類型囉！

主題二、〈多種類訊息回覆〉

本文將介紹如果讓機器人回覆純文字、貼圖、圖片、音檔、地點位置、Confirm Template、Button template、影片等類型的訊息。

ㄧ、純文字

client.replyMessage(event.replyToken, [
          {
             type:'text',
             text: '早安！\n'
                   +'我想要喜歡你。我想要真正的學會愛你。我們來試看看，並且一起發覺其中的樂趣吧。'
                   +'我正在學習真正的喜歡你，學習真正的愛你。'
          }
]);

二、貼圖

LIneBot可使用的貼圖回應有限，能使用的貼圖可參考這份文件

client.replyMessage(event.replyToken, [
              {
                  type: 'sticker',
                  packageId: '6632',
                  stickerId: '11825396'
              }
]);

三、圖片

client.replyMessage(event.replyToken, [
          {
            type: 'image',
            originalContentUrl: 'https://upload.cc/i1/2021/09/28/4WBpJm.jpeg',
            previewImageUrl: 'https://upload.cc/i1/2021/09/28/4WBpJm.jpeg'
          }
]);

四、音檔

duration代表的是音檔的秒數，範例的音檔全長27秒，duration就是27000。

client.replyMessage(event.replyToken, [
         {
            type: 'audio',
            originalContentUrl: 'https://www.sample-videos.com/audio/mp3/crowd-cheering.mp3',
            duration: '27000'
          }
]);

五、地點位置

client.replyMessage(event.replyToken, [
          {
            type: 'location',
            title: '昕力資訊',
            address: "台北市內湖區瑞光路435號4樓",
            latitude: 25.0813,
            longitude: 121.5721096
          }
]);

這邊要注意的是，latitude跟longtitude是經緯度，在GoogleMap輸入地點或地址即可在網址列找到

六、Button Template

LABEL是按鈕文字，TYPE則是按下按鈕會觸發什麼事件。例如URI就是導到別的網站，MESSAGE則是傳送文字訊息。

client.replyMessage(event.replyToken, [
          {
             type: 'template',
              altText: 'Buttons alt text',
              template: {
                  type: 'buttons',
                  thumbnailImageUrl: 'https://upload.cc/i1/2021/09/28/QSkfPR.jpeg',
                  title: '今天的你過得怎麼樣呢？',
                  text: '我在這裡聽你說',
                  actions: [
                      { label: '覺得內心疲倦的時候請往這裡', type: 'uri', uri: 'https://www.facebook.com/psycartlogy/' },
                      { label: '「我好像又搞砸了」', type: 'message',  text: '我好像又搞砸了' },
                      { label: '「我好忙碌」', type: 'message', text: '我好忙碌' }
                  ],
              },
            }
]);

七、Confirm Template

這裡要注意的是，Confirm Template只有兩個按鈕！單純的Yes or No

client.replyMessage(event.replyToken, [
           {
            type: "template",
            altText: "This is a conform template.",
            template: {
                type: "confirm",
                text: "親愛的你，此時此刻正在孤單的回顧今天一整天嗎？",
                actions: [
                    {
                      "type": "message",
                      "label": "「對，沒錯」",
                      "text": "對，沒錯"
                    },
                    {
                      "type": "message",
                      "label": "「不會呀」",
                      "text": "不會呀"
                    }
                ]
            }
          }         
       ]);

八、影片

client.replyMessage(event.replyToken, [
         {
            type: 'video',
            originalContentUrl: 'https://dl.dropbox.com/s/f1khpthk3b2oj19/%E8%80%81%E7%9A%AE%E7%AC%91%E8%81%B2.mp4',
              previewImageUrl: 'https://www.sample-videos.com/img/Sample-jpg-image-50kb.jpg'
          }
])

Tips：

關於音檔與影片檔的上傳，筆者用過了多個免費的影音上傳空間，都無法讓機器人成功讀取檔案，目前發現只有在DropBox存放的影音檔可以在Line裡面被讀取，除此之外，能在Line播放的音檔只支援m4a格式。

溫馨提醒：記得把複製好的檔案連結網址的www改成dl，才有辦法成功讀取喔！
ex: https://www.dropbox.com/s/n1ypmsglx8n97os/chihuahua%20song.m4a (X)

https://dl.dropbox.com/s/n1ypmsglx8n97os/chihuahua%20song.m4a (O)

主題三、使用Heroku佈版

編輯好index.js後記得存檔，接下來打開terminal輸入以下指令完成佈版。這裡需要注意的地方是記得cd到lineBot檔案包的所在位置，例如你的檔案包在C槽就請cd到C槽，如果在不對的位置執行指令，終端機可是會直接回應你「fatal: not a git repository (or any of the parent directories): .git」的喔！

$ heroku login  //登入
$ heroku git:remote -a [你的App名稱]  

$ git add .
$ git commit -m '[commit備註]'
$ git push heroku master

$ heroku logs --tail --app [你的App名稱] //查看log

結語：網路上還有使用ngrok在本地端執行LineBot的教學，筆者ngrok跟Heroku都使用過的感想是：Heroku是直接完成把程式碼佈版到雲端的動作，ngrok一旦內網可使用的時間過期，聊天機器人就不會按照程式碼的指示回應，就好像當機一樣，所以當然是申請Ｈeroku作為雲端平台最方便啦～
還可以向你的親朋好友分享你的機器人，祝大家開發機器人愉快 ◉‿◉