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
https://letswrite.tw/wp-content/uploads/2020/08/logo_512.jpg

隨選筆記文

Google Maps

Google Maps API 學習筆記 – 5:抓目前位置、計算到各點距離

Analytics Google

GA 報表:電子商務 內部宣傳 報表

Analytics Google

用 GA Spreadsheet Add-on 製作網站訪客人數功能

Bot Slack

Slack 通知功能 可互動

API

Imgur API:upload, load 上傳、讀取 心得筆記

Vue

拿 Trello 當資料庫 建一個店家清單 – 下篇:建立清單頁面

Vue

用 VuePress 製作說明文件頁面 – 1:安裝

Vue

用 VuePress 製作說明文件頁面 – 5:改樣式、加元件

PWA

PWA學習筆記-6:實際使用整體流程範例

Front-End

mailto: 點擊連結 開啟寄送 email

以下是留言,但關於留言的部份必需先讓你們知道:

本站的文章都是 Augustus 因為覺得有趣,才會實作並整理成筆記文而後進行發表。

如果留言是希望把 Demo 改成「你想要」的樣子,或是把功能改成「符合你需求」的樣子,

Sorry~ 除非那修改是 Augustus 也有興趣的,不然不會幫你們寫程式去面對工作或是交作業。

未來這類的留言不會再主動回覆。😎

另外,公開信箱是為了讓金流驗證用,

因為之前遇過幾次回信協助解決問題後,對方卻一聲謝謝也沒有,就這樣拿去幫工作交差。

因此決定不再回覆信件,有疑問就利用留言功能囉。

訂閱
通知
guest
0 Comments
Inline Feedbacks
看所有留言