NodeJs＋Heroku（＋ngrok） 搭建line機器人（上）
紀錄「Appx-Linebot」搭建過程及搭建時遇到的問題
這篇文主要會分享如何在 line developer 建立一個新的機器人，以 Node.js 撰寫 api server，再將專案（nodejs）推到免費的雲端 server — Heroku。
ngrok 是一個輔助工具，能讓你將運行在 localhost 上的 service，網址從localhost://blablabla 變成 www.blablabla，對 line bot的開發非常方便。
架構
在開始之前，先釐清line bot是怎麼一回事。
在第一次接觸時，一直以為所謂的「line 機器人」就是很單純的寫好一隻符合Line官方規範的「機器人」，腦中大概的架構如下：
但其實真正的結構是這樣：
根據官方文件，Line其實是提供給我們Line platform上的一個channel讓我們跟自己寫好的API server 作溝通，換句話說，line提供的服務就是作為用戶跟server間中介層，因此我們需要自行建立server（ 這裡以heroku為例 ），並提供webhook 功能給line。
架構理解了，那就開始吧！
流程
- line developer 官網的 messaging api 初始與設定
- 寫 API server（Node.js），
基本套件引入和一些測試用程式碼（通常是重複使用者說的話） - heroku 帳號創建，專案部署，取得 webhook url
- 將步驟三取得的 webhook url 填入步驟一設定中還未填的webhook欄位
- 掃 QR code 加機器人為好友，傳送訊息給機器人 → BANG 成功！
- 繼續更新 API server 裡的程式碼，為我們專屬的機器人新增功能
- 在 heroku 部署(push)新的程式碼
- 步驟六步驟七重複執行
由於這篇文章是寫完後才作分享，所以步驟二不會作示範，而是直接以完整版的程式碼分區解釋，有興趣的讀者可以去網路上搜尋很多其他教學示範中的這個部分，再回來><
step 1. Line Messaging API:
I. 建立line 開發者帳號、provider
II. 創建一個新的 messaging API Channel
III. 取得 ACCESS_TOKEN & SECRET 和一些設定
這裡提到的資訊位置會因為網站的更新而異動，如果跟圖片上不同找一找一定有
在創建完成之後我們會看到前面所填寫的資訊和一些line給的原生設定，其中，我們需要兩個最重要的資訊：
1. basic setting 裡的 channel secret
2. Messaging API 裡的 channel access token
3. Messaging API 裡的 official feature 都先關掉（allow bot to join group, auto-reply message, greeting message），這項操作會將我們導入另一個頁面，但就是關掉就好。
4. enable webhook 功能，但我們還沒取得，所以這邊先留空
到這裡為止，我們已經成功1/3，接下來終於輪到heroku。
step 3. Heroku:
Heroku 是一個平台即服務(PaaS)，可自行在Heroku平台開發和佈署各種網站，好處是減少維護管理系統底層的成本，也透過簡單的介面來調整需要的硬體設備等級及資源，選擇適合自己的等級做升級。類似的服務例如:Aws, Azure …，而 Heroku十分適合line bot這種低網路流量的服務，免費版的功能就足以應付初學者的簡易需求。 — https://www.wpgdadatong.com/cn/blog/detail?BID=B0236
I. 註冊，新增專案
註冊完後，在 dashboard 新增專案
II. 將步驟二寫好的 API server 程式碼部署上 heroku
heroku支援多種部署方式，筆者只用過 heroku-cli & github同步。
個人認為github同步十分方便，只要正常的 git push 到 github 上去後就會自動部署到heroku，還支援diff功能。
但這次為了方便demo就先選擇 heroku cli，步驟如圖上教學所示，幾本上跟git 指令很像但是要加上heroku
使用 heroku cli 部署的 log 可以在網頁跟終端機上看到，但程式裡運行的console就只能在網頁版裡看到
III. 點進專案，在setting頁取得 domain，新增config variable
取得domain，回到 line channel 在 webhook url 欄位中填入(Messaging API tab裡)，加入機器人好友就能看到你的程式正常運作。
config var 這項其實是optional，但填入後heroku會幫我們存成環境變數，讓我們的 code 安全性提高
恭喜大功告成！ 接下來就是程式的部分了
3. API server
Line 有提供需多語言的sdk，而我們用的語言是Node.js，並用express為框架
最主要需要的套件只有 express 和 @line/bot-sdk
npm init linebot-nodejs
cd linebot-nodejs
npm i express
npm i @line/bot-sdk將步驟一存下來的 access token 和 secret ，傳進新呼叫的 Client，若我們已經有在heroku中設定config var則可以直接使用環境變數。
( line bot API 中最主要的功能都在 Client 裡面，可以在上面提到的官網中找到，或是點選 這裡）
我們每對 line 機器人傳送一次訊息，都是一次 message event，下圖中我們可以看到 req.body里長什麼樣子，大部分的功能最需要的只有 replyToken, source, 和 message。
通常我們傳送的訊息只會是一次 message event，對 req.body.event[0] 作動作即可，但我們為了以防萬一 (event 不只有message一種) 在這裡使用 map ，並宣告一個 handleEvent 函式讓每一個event都能被照顧到。
我們可以看到 event 有各式各樣，但我們在這裡先專注於訊息 event 。
而訊息也有很多種，貼圖、文字、位置訊息⋯⋯等，我們在50行先只專注於使用者的「文字」訊息，再宣告一個 textHandler 來針對不同的文字訊息做處理。
本文中跳過的步驟二（測試程式碼），通常就是以52~55行的方式呈現，這會讓我們的機器人學我們講話
回傳文字的方式是以這樣的格式：
client.replyMessage( replyToken, {
type: 'text',
text: '你想傳給使用者的文字'
});
附上完整程式碼
到這邊為止，line bot 的基本功能就大致上完成了，把寫好的程式整包推上heroku就能跟你的機器人對話了。
相信你一定會覺得，這樣機器人只能傳文字訊息好爛，又或是，難道每次想要測試自己寫的對不對都得先推上heroku等他部署完才能看有沒有寫錯嗎？
想要解決這些問題的話，我們下集再見！
