###### tags: `Slack`

# Slackbot webhook

## 前言
最近在玩slack, 簡單紀錄webhook的使用

## 故事
由於team 上用slack 進行溝通, 而我身為 android 工程師, 自然就有一些東西想要進行自動部署, 比如 發布APP時, 我想發訊息到slack 上某個channel:
> Hi, 我發布新版本 `v1.1.0`, 而新內容包含: `xxx`, 可以透過firebase deistributed/github 上拿到最新的更新喔~!!!

簡單來說大概是這樣:

while `Build_APP_Success`:
  - git push remote
  - distributed to firebase
  - send slack message to channel

由於本篇著重在 slack 的部分, 因此只著墨於第三點`send slack message to channel`, 之後有機會再把整個APP詳細的部署過程寫出來吧～

## slackbot webhook

### 介紹
簡單來說就是一個讓你可以透過 `call web url` 的方式, 進行 訊息傳遞的方法~

有了這樣的方法, 我們可以在程式裡面安插一些code, 在必要的時候呼叫該url, 自動傳遞訊息, 取消讓你手動複製貼上的動作~

### 使用方法
接下來的訊息節選自： [官網webhook hellow world](https://api.slack.com/tutorials/slack-apps-hello-world)
其實他講的很詳細拉, 按照他的不走就行,
這邊只是幫各位提出重點訊息而已~詳細內容還是請各位點進去看唷 :smile:

1. Create Webhook APP
[進入APP 頁面, 點選Create New APP](https://api.slack.com/apps)
已經建完的APP就會顯示在該頁面的清單裡喔~
為你的APP 取名, 並選擇workspace, 按下Create APP
這邊我就取名為`just_for_test`
之後會跳轉到以下頁面, 按下 `Incoming Webhooks`
進去的時候, 開關應該是`Off`, 把開關打開變成`On`, **允許該APP使用webhook 功能**
打開之後下面會多出一個欄位, 讓你可以設置workspace, 也就是**APP可以發布訊息的對象**
點選`Add New webhook to Workspace`
之後會進入權限頁面, 可以選擇你要發布的channel
這邊我選擇我自己創建好的 `# test`, 按下`Allow`
之後會自動跳轉回 Incoming Webhooks 的頁面
你會發現多了一項你剛剛增加的, 還有範例樣式也有了變化
這裡我們直接copy 他的範例, 按下example 的`copy`
開啟你的cmd
貼上 + enter, 就可以看到成果摟～!

2. 訊息樣式
slack message, 提供很多的文字樣式, 還可以貼圖片, 但是組出來的json 挺複雜的. 幸好官方有出一個[Block Kit Builder](https://app.slack.com/workspace-signin?redir=%2Fgantry%2Fblock-kit-builder#%7B%22blocks%22:%5B%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22Hey%20there%20%F0%9F%91%8B%20I'm%20TaskBot.%20I'm%20here%20to%20help%20you%20create%20and%20manage%20tasks%20in%20Slack.%5CnThere%20are%20two%20ways%20to%20quickly%20create%20tasks:%22%7D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*1%EF%B8%8F%E2%83%A3%20Use%20the%20%60/task%60%20command*.%20Type%20%60/task%60%20followed%20by%20a%20short%20description%20of%20your%20tasks%20and%20I'll%20ask%20for%20a%20due%20date%20(if%20applicable).%20Try%20it%20out%20by%20using%20the%20%60/task%60%20command%20in%20this%20channel.%22%7D%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22*2%EF%B8%8F%E2%83%A3%20Use%20the%20_Create%20a%20Task_%20action.*%20If%20you%20want%20to%20create%20a%20task%20from%20a%20message,%20select%20%60Create%20a%20Task%60%20in%20a%20message's%20context%20menu.%20Try%20it%20out%20by%20selecting%20the%20_Create%20a%20Task_%20action%20for%20this%20message%20(shown%20below).%22%7D%7D,%7B%22type%22:%22image%22,%22title%22:%7B%22type%22:%22plain_text%22,%22text%22:%22image1%22,%22emoji%22:true%7D,%22image_url%22:%22https://api.slack.com/img/blocks/bkb_template_images/onboardingComplex.jpg%22,%22alt_text%22:%22image1%22%7D,%7B%22type%22:%22section%22,%22text%22:%7B%22type%22:%22mrkdwn%22,%22text%22:%22%E2%9E%95%20To%20start%20tracking%20your%20team's%20tasks,%20*add%20me%20to%20a%20channel*%20and%20I'll%20introduce%20myself.%20I'm%20usually%20added%20to%20a%20team%20or%20project%20channel.%20Type%20%60/invite%20@TaskBot%60%20from%20the%20channel%20or%20pick%20a%20channel%20on%20the%20right.%22%7D,%22accessory%22:%7B%22type%22:%22conversations_select%22,%22placeholder%22:%7B%22type%22:%22plain_text%22,%22text%22:%22Select%20a%20channel...%22,%22emoji%22:true%7D%7D%7D,%7B%22type%22:%22divider%22%7D,%7B%22type%22:%22context%22,%22elements%22:%5B%7B%22type%22:%22mrkdwn%22,%22text%22:%22%F0%9F%91%80%20View%20all%20tasks%20with%20%60/task%20list%60%5Cn%E2%9D%93Get%20help%20at%20any%20time%20with%20%60/task%20help%60%20or%20type%20*help*%20in%20a%20DM%20with%20me%22%7D%5D%7D%5D%7D)
用它來簡單組成你要的內容喔～～～～
:::info
因為json有點長, 貼在`cmd`上不容易看懂, 這邊就改用`Postman` 來示範~
:::
:::success
測試的json 內容貼在最下方的 `備註` -> `測試block msg`
:::

按下`Send` 送出, 就成功了喔～

### 備註
#### 測試block msg

{
	"blocks": [
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "Hey there 👋 I'm TaskBot. I'm here to help you create and manage tasks in Slack.\nThere are two ways to quickly create tasks:"
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "*1️⃣ Use the `/task` command*. Type `/task` followed by a short description of your tasks and I'll ask for a due date (if applicable). Try it out by using the `/task` command in this channel."
			}
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "*2️⃣ Use the _Create a Task_ action.* If you want to create a task from a message, select `Create a Task` in a message's context menu. Try it out by selecting the _Create a Task_ action for this message (shown below)."
			}
		},
		{
			"type": "image",
			"title": {
				"type": "plain_text",
				"text": "image1",
				"emoji": true
			},
			"image_url": "https://api.slack.com/img/blocks/bkb_template_images/onboardingComplex.jpg",
			"alt_text": "image1"
		},
		{
			"type": "section",
			"text": {
				"type": "mrkdwn",
				"text": "➕ To start tracking your team's tasks, *add me to a channel* and I'll introduce myself. I'm usually added to a team or project channel. Type `/invite @TaskBot` from the channel or pick a channel on the right."
			},
			"accessory": {
				"type": "conversations_select",
				"placeholder": {
					"type": "plain_text",
					"text": "Select a channel...",
					"emoji": true
				}
			}
		},
		{
			"type": "divider"
		},
		{
			"type": "context",
			"elements": [
				{
					"type": "mrkdwn",
					"text": "👀 View all tasks with `/task list`\n❓Get help at any time with `/task help` or type *help* in a DM with me"
				}
			]
		}
	]
}