From baf6de8bff961769940e746f361ecbc8fbf72e0b Mon Sep 17 00:00:00 2001 From: rogeraabbccdd Date: Fri, 12 Apr 2024 20:07:25 +0800 Subject: [PATCH] =?UTF-8?q?LINE=20=E6=A9=9F=E5=99=A8=E4=BA=BA:=20=E6=9B=B4?= =?UTF-8?q?=E6=96=B0=E8=AA=B2=E7=A8=8B=E5=85=A7=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/node/line.md | 74 +++++++++++++++++------------------------------ 1 file changed, 27 insertions(+), 47 deletions(-) diff --git a/docs/node/line.md b/docs/node/line.md index d0c611ee..060c3706 100644 --- a/docs/node/line.md +++ b/docs/node/line.md @@ -1,4 +1,4 @@ -# Ch.21 開放資料 LINE 機器人 +# LINE 機器人 使用 Node.js 製作一個查詢開放資料的 LINE 機器人 @@ -6,41 +6,13 @@ ## 前置作業 -### LINE - 到 [LINE Developers](https://developers.line.me/) 註冊開發帳號 - 建立 Provider，CHANNEL 選擇 `Messaging API` - 填寫機器人帳號資訊 - 關閉自動回覆訊息 -### ngrok -由於 LINE 只接收 HTTPS 資料 -所以我們需要使用 [ngrok](https://ngrok.com/) 幫我們做中介 -- 使用 `npm install -g ngrok` 下載 -- 使用 `ngrok http -region jp 3000` 使用日本節點並監聽 3000 port -- 編輯 LINE 機器人的 webhook 網址 - -## 製作機器人 -### 安裝套件 -- 安裝 Node.js 套件 - ```js - // 存檔時自動重新啟動，安裝為開發環境套件 - npm install -D nodemon - // 讀取環境設定檔 - npm install dotenv - // line 機器人套件 - npm install linebot - // 使用 axios - npm install axios - ``` -- 安裝 VSCode 套件 [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) 並新增下面的設定，驗證程式碼並保持風格一致 - ```json - "editor.codeActionsOnSave": { - "source.fixAll.eslint": true - }, - ``` - -### nodemon -使用 [nodemon](https://www.npmjs.com/package/nodemon) 套件能在檔案存檔時自動重啟 Node.js +## nodemon +[nodemon](https://www.npmjs.com/package/nodemon) 套件能在檔案存檔時自動重啟 只需要在 `package.json` 將啟動的 node 改成 nodemon 就好 ```json "scripts": { @@ -48,27 +20,27 @@ "dev": "nodemon index.js", // 正式環境用指令，雲端服務不需要自動重新啟動 "start": "node index.js" -}, +} ``` -### dotenv +## dotenv 使用 [dotenv](https://www.npmjs.com/package/dotenv) 套件能讓 Node.js 讀取環境設定檔 `.env` 將 LINE 機器人的 ID 等資訊寫入環境設定檔，避免上傳 Github 時洩漏資訊 - 建立 `.env` 檔並輸入環境設定 - ``` - CHANNEL_ID="" - CHANNEL_SECRET="" - CHANNEL_ACCESS_TOKEN="" - ``` + ```ini + CHANNEL_ID="" + CHANNEL_SECRET="" + CHANNEL_ACCESS_TOKEN="" + ``` - 在 Node.js 內引用套件 - ```js - import 'dotenv/config' - ``` + ```js + import 'dotenv/config' + ``` - 以 `process.env.變數名稱` 使用環境變數 -### linebot -使用 [linebot](https://www.npmjs.com/package/linebot) 套件能製作 LINE 機器人 +## linebot +[linebot](https://www.npmjs.com/package/linebot) 能以比官方工具簡單的語法製作 LINE 機器人 詳細的訊息事件可以參考 [LINE 文件](https://developers.line.biz/en/reference/messaging-api/#message-event) ```js // 引用套件 @@ -93,16 +65,24 @@ bot.on('message', event => { bot.listen('/', process.env.PORT || 3000); ``` -### fs -如果你是用 flex 訊息，卻不知道哪裡錯 -用 `fs` 套件將 flex 訊息印成檔案 debug -這個套件是內建的，不需要另外安裝 +## fs +`fs` 為 Node.js 預設套件，不需要安裝，能讀寫檔案 +使用這個套件將複雜的訊息印成檔案，方便除錯 ```js import fs from 'fs' fs.writeFileSync('./flex.json', JSON.stringify(flex, null, 2)) ``` +## ESLint +[ESLint](https://eslint.org/) 程式碼分析工具，能發現並修復程式碼中的問題，還能強制規範程式碼風格 +安裝套件後再安裝 [VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)，可以存檔時自動格式化程式碼 +```json +"editor.codeActionsOnSave": { + "source.fixAll.eslint": true +}, +``` + ## 部署 - 註冊 [Render](https://render.com/) 帳號，建立新的 Web Service - 建立時打開 `Advanced`，或建立後在 `Environment` 的 `Environment Variable` 輸入機器人 TOKEN 等環境變數，不須輸入 PORT