Slack通知功能 可互動

Slack通知功能 可互動

學了單純發送訊息後,接著我們來學可互動訊息

上一篇的「slack通知功能 純靜態」,我們學會了怎麼用incoming-webhook讓App自動發送訊息。

incoming-webhook是既有的App,很快就可以上手自動發送訊息。不過有個缺點就是,發送的訊息無法互動,如果訊息中有個按鈕,我們無法得知使用者收到訊息後,是不是有按按鈕?或是多個按鈕時按了哪一個?

這一篇,我們來學怎麼發送可以互動的訊息。


1 建立一個App

跟安裝原有的incoming-webhook這個App不同,想要有可互動的訊息,我們得自己建立一個App。

首先,登入Slack後以,我們開啟這個頁面:https://api.slack.com/apps

這個頁面會顯示的是我們自己建立的App,目前是沒有的,畫面如下:

Your Apps頁面
Your Apps頁面

按下「Create an App」,會出現一個燈箱,要填寫App的名稱跟這個App屬於哪個workplace所有:

填寫App名稱
填寫App名稱

填完也選完後,就可以按下「Create App」,讓它執行一下就建立好Apps了。


2 開啟App功能

App建立完成,會自動進到這個新建App的設定:

新建App的設定頁
新建App的設定頁

可以看到有6個功能是可以加進我們建的App中,這篇我們要學的互動式功能,要加的功能是最上面的2個:Incoming Webhooks、Interactive Components。前者是讓我們可以藉由post來讓App發送訊息,後者是讓訊息可以互動。

Incoming Webhooks

我們先按下「Incoming Webhooks」,會看到以下:

開啟Incoming Webhooks功能
開啟Incoming Webhooks功能

右上角的「Off」按成「On」後就…還沒完成功能開啟,會看見頁面變長,然後底部會顯示「No webhooks have been added yet.」的訊息,告知webhooks的功能還沒有被安裝,點擊訊息下方的「Add New Webhook to Workspace」按鈕,會要我們選擇加到哪個channel上:

選擇要把webhook加到哪個channel上
選擇要把webhook加到哪個channel上

選完後按下「Allow」就…真的開啟了webhook功能XD,會回到剛剛Incoming Webhooks的頁面,底部會秀出Webhook URL的訊息,按一下「copy」,把這段url複製然後存下來,我們發送訊息時會用到:

按下copy複製incoming webhook url
按下copy複製incoming webhook url

Interactive Components

初製完url後,左側選單有一個Interactive Components,點下去:

點下選單的Interactive Components
點下選單的Interactive Components

進到Interactive Components的設定,一樣把Off按成On後,會看見要輸入一個request URL:

要輸入request URL
要輸入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」就完成了。

填上request URL,按下Save Changes
填上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的id
  • response_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


Summary
Slack通知功能 可互動
Article Name
Slack通知功能 可互動
Description
本篇大綱:學了單純發送訊息後,接著我們來學可互動訊息。1 建立一個App。2 開啟App功能。Incoming Webhooks。Interactive Components。3 發送訊息、接收訊息的程式碼。4 實際範例。參考資源。想要有可互動的訊息,我們得自己建立一個App。
Augustus
Let's Write
Let's Write
Publisher Logo
訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言