從零開始在 Windows 使用 Node.js 打造專屬於你的 Slack Bot 聊天機器人
大家好，我是卡米哥，LINE 官方認證的 API 專家，LINE API Expert。目前在維護知名 Node.js 聊天機器人框架 Bottender。
今天要來教大家怎麼在 Windows 使用 Node.js 來打造專屬於你的 Slack Bot 聊天機器人，本文將包含以下章節：
- 安裝 Node.js
- 安裝 Visual Studio Code
- 註冊 Slack App
- 建立及設定 Bottender 專案
- 設定 Slack App
- 測試結果
每個章節中都包含所有詳盡的步驟截圖以及對應的說明，確保大家都能從零開始順利製作出屬於自己的 Slack Bot。
安裝 Node.js
Node.js 是我們開發 Slack Bot 聊天機器人時所需要使用的執行環境，他能執行 JavaScript 程式語言，這是我們打算要使用的程式語言。
首先開啟網頁：https://nodejs.org/zh-tw/
下載完成後你會獲得 node-v12.16.1-x64.msi，點開他之後進入安裝精靈：
裝好後會看到一個命令提示字元視窗，或稱為 Ternimal，以下簡稱為小黑框：
安裝 Visual Studio Code
Visual Studio Code 簡稱為 VSCode，是非常強大的程式碼編輯器，他可以用來修改所有的文字檔，我們將會使用這款程式碼編輯器。
首先開啟網頁： https://code.visualstudio.com/
你有可能下載到跟我不同版本，但這無關緊要，任何版本都是可以使用的。下載完成後點開 VSCodeUserSetup-x64–1.42.1.exe 進入安裝精靈：
- Create a desktop icon
裝好後你會在桌面上看到 VSCode 的圖示。 - Add Open with Code action to Windows Explorer file context menu
你可以對檔案按右鍵選擇 Open with Code 後用 VSCode 開啟檔案。 - Add Open with Code action to Windows Explorer directory context menu
你可以對資料夾按右鍵選擇 Open with Code 後用 VSCode 開啟檔案。 - Register Code as an editor for supported file types
把 VSCode 能開啟的檔案都註冊為可用 VSCode 開啟，這會造成的影響是對檔案點擊兩下後，如果你沒裝過其他可開啟這個檔案的軟體，那麼就用 VSCode 開啟。 - Add To PATH(requires shell restart)
將 VSCode 加入到 PATH，這讓你在小黑框輸入某些 VSCode 相關的指令時，可以正常執行。
簡單介紹一下 VSCode 的介面，上方是編輯器，下方則是內建了一個小黑框，讓你不用切換視窗，超方便。
註冊 Slack App
開啟網頁：https://api.slack.com/apps
App Name 填入 Bottender test。而 Development Slack Workspace 的部分，建議你開一個實驗用的 workspace。
填好後點擊 Create App。
我們需要在 Slack 後台取得程式需要的值， Signing Secret 以及 Bot User OAuth Access Token，我會帶著你一步步取得這些值。
取得 Signing Secret
首先看向左側分頁選單，我們目前在 Basic Settings 分頁，而中間本文的部分則是一個個以白色區隔的章節，我們目前在 Building Apps for Slack 章節。
往下捲動網頁會看到 App Credentials 章節，在這個章節中可以看到我們想要的 Signing Secret：
取得 Bot User OAuth Access Token
在取得 Bot User OAuth Access Token 之前，我們得指定 Slack App 的權限，並且讓 Workspace 授權給 Slack App。
先到 OAuth & Permissions 分頁：
可以注意到此時 Install App to Workspace 按鈕是呈現灰色的外觀，表示目前還不能安裝 Slack App 到 Workspace。
往下捲動到 Scopes 章節：
這裡分為兩個部分，Bot Token Scopes 以及 User Token Scopes，用來設定這個 Slack App 能代表 Bot 做哪些事，和代表用戶做哪些事，我們只會用到 Bot Token Scopes 的部分。
點擊 Bot Token Scopes 下的 Add an OAuth Scope 新增一個 chat:write 權限，讓我們能以 Bot 身分發話。
填好之後再往上捲動到最上面的地方：
會發現 Install App to Workspace 變成綠色的，點擊 Install App to Workspace：
點擊 Allow 後就授權完成。
複製 Bot User OAuth Access Token 到一旁備用。
建立及設定 Bottender 專案
回到你的 VSCode 上，我們現在要準備寫程式囉。
如果你的下方的小黑框跟我一樣消失了，這裡教大家一個快捷鍵，按 Ctrl+J 可以開啟和關閉下方區塊，現在把小黑框叫出來吧：
我們要輸入的指令是：npx create-bottender-app bottender-test
這個指令可以幫助我們快速建立各種不同平台的聊天機器人專案，首先我們要選擇我們想要作的聊天機器人：
使用上下鍵來移動，空白鍵來選擇
經過一段時間的等待後專案建立完成。
因為 npx create-bottender-app 幫我們建立了一層資料夾，所以我們現在要切換進去，使用指令：code bottender-test
這個指令是使用 VSCode 開啟指定資料夾的意思。
在 Bottender 專案中，使用 .env 來管理環境變數，我們要在這裡設定我們的 SLACK_ACCESS_TOKEN 和 SLACK_SIGNING_SECRET 的值。
只保留 Slack 的設定值，其他的都可以刪掉了。
SLACK_ACCESS_TOKEN 的值是 Slack App 後台上的 Bot User OAuth Access Token，而 SLACK_SIGNING_SECRET 則是 Slack App 後台上的 Signing Secret。
設定好之後就回到小黑框上輸入指令：npm run dev
這個指令可以讓你的電腦建立一個網頁伺服器，並且建立一個臨時通道讓外部可以連線進來。
我們將獲得的 Slack webhook url 複製下來備用。
設定 Slack App
回到 Slack App 後台的 Event Subscriptions 分頁：
點擊 Enable Events 的右側開關，會從 Off 變成 On。
這裡的 Request URL 要填入的是我們剛剛取得的 Slack webhook url。
接著要設定我們的 Slack Bot 在什麼情況下要收到 webhook，也就是 Slack Bot 要訂閱在 Slack 上發生的哪些事件。
我們希望能做到當有人在 Slack 上說話時，就做出回應，所以我們要關注的事件是「有人在 Slack 上說話」。
在 Slack 上有一對一私聊（im）、多人私聊（mpim）、私密頻道（groups）以及公開頻道（channels），需要個別設定。
設定好了之後點擊畫面右下角的 Save Changes。
當我們改變 Slack App 所需要的權限時，需要重新獲得 Workspace 的授權，所以點擊上方的 reinstall your app 重新授權。
點擊 Allow 就完成所有的設定。恭喜你成為 Slack App 開發者。
測試結果
到你測試的 Workspace 上找到你的 Slack Bot 跟他說說話吧！
私聊測試 OK！換到 channel 上測試看看：
你會發現 Slack Bot 在 channel 就不回應了，這是因為 Slack Bot 還沒有被邀請加入 channel，點擊 Add an app 或者在 channel 裡用 @ 標記 Slack Bot 就可以邀請 Slack Bot 加入頻道。
讓我們嘗試修改一下程式碼，回到 VSCode ，從左側資料夾目錄選到 src/index.js，這個檔案就是我們的主程式。
在這裡寫著傳送訊息：Welcome to Bottender
context.sendText 代表的是傳送訊息給用戶，而括號當中的內容代表傳送的內容。由於這隻程式完全不考慮用戶說了什麼內容，所以根本沒有互動。如果要作一個最簡單的互動，那就是直接模仿用戶說話，所以我們將程式碼修改如下：
把回應內容從 ‘Welcome to Bottender’ 改成 context.event.text
context.event.text 在 Bottender 當中表示用戶說的內容。修改完成後按下 Ctrl+S 儲存檔案，然後再回去跟你的 Slack Bot 講話，你就會發現馬上就有反應了！
從零開始在 Windows 使用 Node.js 打造專屬於你的 Slack Bot 聊天機器人到這邊結束，如果意猶未盡的話，可以從 Bottender 官網的這篇文章接著看下去： https://bottender.js.org/docs/zh-TW/channel-slack-handling-events
想看卡米哥寫什麼其他內容請留言。
如果這篇文章有幫助到你，請拍個手或留個言讓我知道，謝謝。
