學了單純發送訊息後,接著我們來學可互動訊息
上一篇的「Slack 通知功能 純靜態」,我們學會了怎麼用 Incoming-Webhook 讓 App 自動發送訊息。
Incoming-Webhook 是既有的 App,很快就可以上手自動發送訊息。不過有個缺點就是,發送的訊息無法互動,如果訊息中有個按鈕,我們無法得知使用者收到訊息後,是不是有按按鈕?或是多個按鈕時按了哪一個?
這一篇,我們來學怎麼發送可以互動的訊息。
1 建立一個 App
跟安裝原有的 Incoming-Webhook 這個 App 不同,想要有可互動的訊息,我們得自己建立一個 App。
首先,登入 Slack 後,我們開啟這個頁面:https://api.slack.com/apps
這個頁面會顯示的是我們自己建立的 App,目前是沒有的,畫面如下:
按下「Create an App」,會出現一個燈箱,要填寫 App 的名稱跟這個 App 屬於哪個 Workplace 所有:
填完也選完後,就可以按下「Create App」,讓它執行一下就建立好 Apps 了。
2 開啟 App 功能
App 建立完成,會自動進到這個新建 App 的設定:
可以看到有 6 個功能是可以加進我們建的 App 中,這篇我們要學的互動式功能,要加的功能是最上面的 2 個:Incoming Webhooks、Interactive Components。前者是讓我們可以藉由 POST 來讓 App 發送訊息,後者是讓訊息可以互動。
Incoming Webhooks
我們先按下「Incoming Webhooks」,會看到以下:
右上角的「Off」按成「On」後就…還沒完成功能開啟,會看見頁面變長,然後底部會顯示「No webhooks have been added yet.」的訊息,告知 Webhooks 的功能還沒有被安裝,點擊訊息下方的「Add New Webhook to Workspace」按鈕,會要我們選擇加到哪個channel上:
選完後按下「Allow」就…真的開啟了 Webhook 功能 XD,會回到剛剛 Incoming Webhooks 的頁面,底部會秀出 Webhook URL 的訊息,按一下「copy」,把這段 URL 複製然後存下來,我們發送訊息時會用到:
Interactive Components
初製完 URL 後,左側選單有一個 Interactive Components,點下去:
進到 Interactive Components 的設定,一樣把 Off 按成 On 後,會看見要輸入一個 Request URL:
這個 Request URL,就要填上我們自己的了,當使用者在 Slack 上按了按鈕或選單,App 就會發一個 POST 到這個 Request URL 上,就像我們在寫 Telegram Bot、LINE Bot,都要填的那個 Webhook URL 一樣。
要有一個自己的 Request URL,可以參考以下兩篇,這邊就不再重寫:
用 Google Apps Script:GAP 設定成 Telegram Bot 的 Webhook
用 Google Cloud Platform:用 GCP + Node.js 接收 / 推播訊息 Webhook
這邊求快,就直接用 Google Apps Script 的,填上 Request URL 後,按下「Save Changes」就完成了。
第二步,我們開啟了 Incoming Webhooks、Interacitve Components 這兩個功能,接下來就是實測發送一個有選單訊息,看當使用者選擇後,我們會收到什麼結果。
3 發送訊息、接收訊息的程式碼
發送一個帶有 select 的訊息,直接用 生成器 來產生。
接收訊息的部份,因為上一步 Request URL 已經填上了,因此就聽一個 POST 就行。
這邊是用 Google Apps Script,所以收跟發的 POST 就用 UrlFetchApp。
當使用者選擇後,App 會 POST 訊息內容到 Request URL,Google Apps Script 會把這段訊息存到 Firebase 上,關於 Google Apps Script 接 Firebase 的部份,之前有獨立寫成一篇:
Google Apps Script 基本使用:跨網域 AJAX、接 Firebase
範例程式碼:
執行 sendMessage()
後,Slack 就會收到訊息:
選擇了貓派後(可以這樣拉票的嗎XD),就會觸發 Google Apps Script 的 doPost()
。
因為實際收到的訊息內容會像是這樣:
"payload=%7B%22type%22%3A%22block_actions%22%2C%22team%22%3A%7B%22id%22%3A%22T……"
一長串的 code,所以要再經過整理跟 decode,再把 JSON 傳到 Firebase 上,才會有這3行:
var string = e.postData.contents.split('payload=')[1]; var decodeString = decodeURIComponent(string); base.pushData('slack', JSON.parse(decodeString));
最後在 Firebase 上收到的訊息如下圖:
看了一下 說明文件,收到的值這邊介紹一下:
actions
:使用者選擇的選項資料channel
:訊息是從哪個channel來的message
:原本的訊息內容trigger_id
:可以拿來發送modal的idresponse_url
:可以直接拿來回覆剛剛的訊息
裡面重要的部份有 2 個:actions、response_url
actions 是使用者選了哪個項目。
response_url 是可以拿來回覆的 URL,在自動發送訊息時,把 Webhook URL 換用 Reponse URL,就可以直接改變該訊息,變成互動式,假設我們收到使用者的選項後,想要直接回覆一個感謝的訊息,就可以多加一個回覆,POST 的 URL 就是 response_url。
4 實際範例
這邊寫一個範例,發送完選擇狗派或貓派的訊息,使用者選擇完選項,會自動再修改訊息為感謝詞。
以下是使用的狀況:
以上就是一個互動式訊息的簡單範例。
實際上應用時,可以針對回應的訊息再做修改,比方選了貓後,回覆的訊息就再丟一個按鈕或選項,讓使用者有第二次的互動。
Slack API 的文件有非常多頁,還有很多互動式的元件可以使用,比方選日期、填表單,就請自行在文件海中發掘啦~
參考資源
Slack API document:
Handling user interaction in your Slack apps
Reference: Interactive components payloads