# Line Bot+Express+Heroku
###### tags: `畢業專題`

## ▉ Line Developers
### 創建line帳號
先到LINE Develpers創建帳號，取得帳號的QRCode。（這裡跳過步驟）

## ▉ 專案環境建置
### 建立專案資料夾
創建一個專案資料夾，這裡用「pah-ni-lam-gu_LINE-Bot」作為資料夾命名。

mkdir pah-ni-lam-gu_LINE-Bot


### 建立package.json
在「pah-ni-lam-gu_LINE-Bot」資料夾底下建立package.json。

npm init -y


### 安裝套件 express、linebot
在「pah-ni-lam-gu_LINE-Bot」資料夾底下安裝。

npm install express linebot dotenv


到package.json中確認有安裝express、linebot成功


### 建立app.js
在「pah-ni-lam-gu_LINE-Bot」資料夾底下建立一個js檔案，內容為line bot會做出甚麼反應，所有line bot邏輯會放在這個程式檔案中。

app.js程式碼

const express = require('express')
const app = express()
const linebot = require('linebot');
// 判別開發環境
if (process.env.NODE_ENV !== 'production') {      // 如果不是 production 模式
  require('dotenv').config()                      // 使用 dotenv 讀取 .env 檔案
}
const bot = linebot({
  channelId: process.env.CHANNEL_ID,
  channelSecret: process.env.CHANNEL_SECRET,
  channelAccessToken: process.env.CHANNEL_ACCESS_TOKEN
});
const linebotParser = bot.parser();
bot.on('message', function (event) {
  console.log(event);
event.reply(event.message.text).then(function (data) {
    // success
  }).catch(function (error) {
    // error
  });
});
app.post('/', linebotParser);
app.listen(process.env.PORT || 3000, () => {
  console.log('Express server start')
});

## ▉ 佈署至Heroku
### 創建Heroku帳號&下載Heroku CLI
Heroku CLI [下載點](https://devcenter.heroku.com/articles/heroku-cli)

### 準備佈署Heroku
[LINE chatbot 聊天機器人怎麼做？帶你詳細步驟上手](https://medium.com/alpha-camp-%E5%8F%B0%E7%81%A3/%E5%81%9A%E4%B8%80%E5%80%8B-line-chatbot-628c7c3707c7)這裡面說在專案資料夾底下執行heroku的一些指令，但我這邊沒有成功QQ要在使用者那層執行才可以（不知道原因）

反正就先在專案資料夾新增名稱為 Procfile 的檔案，裡面打上

web: node app.js


再來執行heroku login

heroku login

執行後會出現如下圖，接著就按下除了q之外的任何按鍵(q是離開)。


按下會跳出heroku的網頁，點擊login


點擊login，頁面改變為下


接著就可以為到命令提示字元的介面，出現下畫面，代表login成功


接著不要關掉！執行底下程式碼

heroku create <app name>

`<app name>`部分可以自己命名，如果空著不寫也可以，Heroku會幫你命名。我這裡是自己命名為「pah-ni-lam-gu」


### 推上Heroku
佈署好之後，因為Heroku 平台是使用 Git 進行部署，所以接著要利用git將專案推上Heroku。

在local資料夾新增 git remote 對應到 Heroku repository，所以現在要對專案資料夾開啟終端機，並執行指令。

git init


heroku git:remote -a <app name> 

`<app name>`即Heroku 應用程式名稱，也就是看前面你自己寫的app name或者讓Heroku幫你命名的名稱。我前面是用「pah-ni-lam-gu」，所以要執行的程式碼如下

heroku git:remote -a pah-ni-lam-gu


最後依照一般 push 到 GitHub 的指令就可以佈署到 Heroku 了

git add .
git commit -m"first commit"
git push heroku master

### 更改 package.json 設定
先來做些更改，在 scripts 中增加二個屬性 dev 及 start。開發時可以 npm run dev 來啟動 server ，佈署時至 heroku 後，heroku 會以 npm run start 來啟動 server。

"scripts": {
    "dev": "nodemon app.js",
    "start": "node app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },


## ▉ 最後一些步驟
### 設定 heroku 的環境變數
server 啟動後，需要以下三個參數，server 才能與 LINE 對接。使用 heroku config:set 指令，設定 CHANNEL_ID、CHANNEL_SECRET、CHANNEL_ACCESS_TOKEN 三個參數

heroku config:set CHANNEL_ID= 打上你的CHANNEL ID
heroku config:set CHANNEL_SECRET= 打上你的CHANNEL SECRET
heroku config:set CHANNEL_ACCESS_TOKEN= 打上你的CHANNEL ACCESS TOKEN

上方CHANNEL ID、CHANNEL SECRET、CHANNEL ACCESS TOKEN都可以從Line developers中，我們前面設置好的帳號找到。(反紅處)

CHANNEL ID

CHANNEL SECRET

CHANNEL ACCESS TOKEN
要先按下issue才會產生CHANNEL ACCESS TOKEN

全部設置好

這時候，打開 app 網頁

heroku open

會出現以下畫面

注意他的網址

https://pah-ni-lam-gu.herokuapp.com/

回到 LINE developer ，將 webhook URL 填入，填入的內容即上方打開的網頁的網址


成功了！

接著就要來思考怎麼改寫程式碼QQ

## ▉ 參考資料
* [LINE chatbot 聊天機器人怎麼做？帶你詳細步驟上手](https://medium.com/alpha-camp-%E5%8F%B0%E7%81%A3/%E5%81%9A%E4%B8%80%E5%80%8B-line-chatbot-628c7c3707c7)
* [linebot 套件](https://www.npmjs.com/package/linebot)
* [第 29 章 - 網站部署(使用 Heroku)](https://ithelp.ithome.com.tw/articles/10189021)
* [[Heroku] 佈署網站或 App 到 Heroku](https://wshs0713.github.io/posts/351f69fe/)