從零開始在 Windows 使用 Node.js 打造專屬於你的 Slack Bot 聊天機器人

使用 Bottender 開發

大家好,我是卡米哥,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.js 安裝檔

下載完成後你會獲得 node-v12.16.1-x64.msi,點開他之後進入安裝精靈:

Next
同意條款後按 Next
選擇安裝資料夾,沒事不要亂改,直接按 Next
選擇安裝功能,這裡也不要改,直接按 Next
是否自動安裝所需的工具,打勾後按 Next
準備好要安裝了嗎?按 Install
裝好惹,按 Finish

裝好後會看到一個命令提示字元視窗,或稱為 Ternimal,以下簡稱為小黑框

按任意鍵開始自動安裝 Node.js 所需要的工具,不想裝的話可以直接關閉
安裝完成的畫面,按下 Enter 鍵離開,他建議我們重開機後再繼續進行操作。

安裝 Visual Studio Code

Visual Studio Code 簡稱為 VSCode,是非常強大的程式碼編輯器,他可以用來修改所有的文字檔,我們將會使用這款程式碼編輯器。

首先開啟網頁: https://code.visualstudio.com/

點擊 Download for Windows 按鈕

你有可能下載到跟我不同版本,但這無關緊要,任何版本都是可以使用的。下載完成後點開 VSCodeUserSetup-x64–1.42.1.exe 進入安裝精靈:

同意條款後按 Next
以下說明各選項所代表的意義,沒想法的人可以直接按 Next
  • 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 相關的指令時,可以正常執行。
確認安裝內容,按下 Install 安裝
打勾代表關閉視窗後開啟 VSCode,這裡按下 Finish
進入了 VSCode 的主畫面,先擺著備用

簡單介紹一下 VSCode 的介面,上方是編輯器,下方則是內建了一個小黑框,讓你不用切換視窗,超方便。

註冊 Slack App

開啟網頁:https://api.slack.com/apps

點擊 Create New App
填寫 App Name 和 Workspace

App Name 填入 Bottender test。而 Development Slack Workspace 的部分,建議你開一個實驗用的 workspace。

填好後點擊 Create App

這是一開始進入的樣子

我們需要在 Slack 後台取得程式需要的值, Signing Secret 以及 Bot User OAuth Access Token,我會帶著你一步步取得這些值

首先看向左側分頁選單,我們目前在 Basic Settings 分頁,而中間本文的部分則是一個個以白色區隔的章節,我們目前在 Building Apps for Slack 章節。

往下捲動網頁會看到 App Credentials 章節,在這個章節中可以看到我們想要的 Signing Secret

點擊 Show 後複製 Signing Secret 到一旁備用

在取得 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

這是 Workspace 授權給 Slack App 的畫面

點擊 Allow 後就授權完成。

授權完成後的畫面

複製 Bot User OAuth Access Token 到一旁備用。

建立及設定 Bottender 專案

回到你的 VSCode 上,我們現在要準備寫程式囉。

注意看左側工具列上的第一個圖示,這裡是展開資料夾的地方
展開後會看見一個藍色按鈕,代表目前尚未開啟任何資料夾,點擊 Open Folder
選擇一個要用來存放專案的資料夾,我這裡選擇的是 文件/test 資料夾
藍色按鈕消失了,顯示了一個空資料夾

如果你的下方的小黑框跟我一樣消失了,這裡教大家一個快捷鍵,按 Ctrl+J 可以開啟和關閉下方區塊,現在把小黑框叫出來吧:

將輸入游標停留在小黑框上準備輸入指令

我們要輸入的指令是:npx create-bottender-app bottender-test

輸入指令後按下 Enter

這個指令可以幫助我們快速建立各種不同平台的聊天機器人專案,首先我們要選擇我們想要作的聊天機器人:

使用上下鍵來移動,空白鍵來選擇

選擇後按下 enter
我們使用 memory 來暫存用戶資料

經過一段時間的等待後專案建立完成。

因為 npx create-bottender-app 幫我們建立了一層資料夾,所以我們現在要切換進去,使用指令:code bottender-test

輸入指令後按 Enter

這個指令是使用 VSCode 開啟指定資料夾的意思。

開啟了另一個 VSCode 視窗,上一個可以關掉了
左側資料夾目錄選到 .env 檔案來修改

Bottender 專案中,使用 .env 來管理環境變數,我們要在這裡設定我們的 SLACK_ACCESS_TOKENSLACK_SIGNING_SECRET 的值。

只保留 Slack 的設定值,其他的都可以刪掉了。

SLACK_ACCESS_TOKEN 的值是 Slack App 後台上的 Bot User OAuth Access Token,而 SLACK_SIGNING_SECRET 則是 Slack App 後台上的 Signing Secret。

設定好之後就回到小黑框上輸入指令:npm run dev

輸入指令後按下 Enter

這個指令可以讓你的電腦建立一個網頁伺服器,並且建立一個臨時通道讓外部可以連線進來。

跑起來之後就會看到暫時的 Slack webhook url 網址

我們將獲得的 Slack webhook url 複製下來備用。

設定 Slack App

回到 Slack App 後台的 Event Subscriptions 分頁:

點擊 Enable Events 的右側開關,會從 Off 變成 On。

這裡的 Request URL 要填入的是我們剛剛取得的 Slack webhook url

填入後,看見 Verified 代表成功

接著要設定我們的 Slack Bot 在什麼情況下要收到 webhook,也就是 Slack Bot 要訂閱在 Slack 上發生的哪些事件。

展開 Subscribe to bot events

我們希望能做到當有人在 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 加入頻道。

標記 Slack Bot 後發話,就會觸發邀請 Slack Bot 加入的介面

讓我們嘗試修改一下程式碼,回到 VSCode ,從左側資料夾目錄選到 src/index.js,這個檔案就是我們的主程式。

在這裡寫著傳送訊息:Welcome to Bottender

context.sendText 代表的是傳送訊息給用戶,而括號當中的內容代表傳送的內容。由於這隻程式完全不考慮用戶說了什麼內容,所以根本沒有互動。如果要作一個最簡單的互動,那就是直接模仿用戶說話,所以我們將程式碼修改如下:

把回應內容從 ‘Welcome to Bottender’ 改成 context.event.text

context.event.textBottender 當中表示用戶說的內容。修改完成後按下 Ctrl+S 儲存檔案,然後再回去跟你的 Slack Bot 講話,你就會發現馬上就有反應了!

趁機利用聊天機器人自肥

從零開始在 Windows 使用 Node.js 打造專屬於你的 Slack Bot 聊天機器人到這邊結束,如果意猶未盡的話,可以從 Bottender 官網的這篇文章接著看下去: https://bottender.js.org/docs/zh-TW/channel-slack-handling-events

想看卡米哥寫什麼其他內容請留言。

如果這篇文章有幫助到你,請拍個手或留個言讓我知道,謝謝。

在追求真理的道路上

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store