Как да изпращате персонализирани съобщения за отслабване от вашето приложение

Slack е популярно приложение за съобщения, използвано от много отбори. Той идва с много услуги и API за разработчиците, които да го интегрират с техните приложения. В днешния си пост ще видим как да използваме една от услугите, наречени Incoming Webhooks, за да изпращаме данни, за да се забавяме от външно приложение.

Така можем лесно да изпращате съобщения до Slack от всяко приложение, което вече имаме; можем да изпращаме отчети, актуализации, новини, известия и др. За този пост използвам JavaScript в примера. За да започнете, влезте в профила си в Slack.

1. Настройте Интеграцията

Първо трябва да настроите входяща интеграция на уебшока. Отиди на yourteam.slack.com/apps/build/custom-integration и кликнете върху Входящи куки, след това изберете канал или потребител, в който искате да публикувате съобщенията си (този избор може да бъде отменен по-късно в кода).

След като свършите, ще видите страницата с конфигурацията на входящата интеграция на webhook.

Превъртете надолу и ще има URL адрес на Webhook във формата https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Запазете този URL някъде, ще ни трябва по-късно. Можете допълнително да промените иконата и името на интеграцията в тази страница, но ще направим това с код.

2. Създайте съобщението

Нека си представим, че вече сте създали уеб приложение, което търси продажбите на Деня на Свети Валентин в популярни сайтове, както и кодовете на оферти за употреба по време на продажбата и по някаква причина искате да споделите този резултат с членовете на екипа на Slack.

Всичко, което трябва да направим сега, е да използваме URL адреса на уебшока, създаден в предишната стъпка, и да публикуваме заявка към нея от приложението ви с JSON данни, което ще измисли съобщението за офертата за продажба.

Нека първо съберем JSON низ, който ще се превърне в съобщението Slack. Параметърът с JSON данните се нарича полезен товар, следователно JSON низът трябва да изглежда така:

var myJSONStr = 'payload = "потребителско име": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url е URL адресът на изображението, който ще се покаже като снимка на профила, който можете да използвате icon_emoji например, за да се покаже емотикони като снимка на профила "icon_emoji": ": подарък:". "Канал" посочва канала или потребителското име, които ще виждат съобщението ви. За потребителското име използвайте синтаксиса "@ Потребителскоиме", за канал "# Канал".

Сега за самото съобщение; можете или да добавите "текст" и напишете вашето съобщение като негова стойност и да го направите с него, или да използвате собствеността, наречена "прикачен файл" да добавим богато форматиран текст, което ще правим сега.

Най- "прикачен файл" собственост на полезен товар отива по следния начин:

"attachments": ["fallback": "Прикаченият файл не се поддържа.", "title": "ПРЕДЛОЖЕНИЕ ЗА ДЕН НА ВАЛЕНТИНА", "color": "# 9C1A22", "pretext": "Избран е днешния списък от страхотни оферти за вас "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" text "," fields "]," text ":" Просто кликнете върху имената на сайтовете и започнете да купувате. Получете * допълнително намаление с кода на офертата *, ако е предоставено. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"Резервен вариант" е алтернативният текст, който да се показва, когато съобщението Slack се преглежда в приложение, което не поддържа прикачен файл за съобщения (като в мобилните известия).

"Цвят" е цвета на лявата граница на съобщението.

"Претекст" е текстът, който се показва преди основното съдържание.

"Author_link" е URL адресът с хипервръзка в името на автора (ако е предоставен).

"Mrkdwn_in" е масив от имена на свойства, чиито стойности са показани форматирани в съобщението - въз основа на синтаксис за намаление като (*) за bold и (_) за курсив. Трите възможни стойности за "Mrkdwn_in" са "текст", "претекст" и "полета"

"Thumb_url" е URL адресът на миниизображението.

Ето как ще изглежда досега съобщението.

Сега нека добавим полетата към масива от прикачени файлове, който ще покаже сайтовете и кодовете на офертите в две колони.

"fields": ["title": "Сайтове", "стойност": "__ \ N__ "," short ": true, " title ":" Код на офертата "," стойност ":" UI90O22 n- "," short ": true], 

употреба \ Н за добавяне на ред и синтаксис да добавите хипервръзки.

Подчертаването се използва за форматиране на текст в курсив.

къс е настроено на вярно ако стойностите трябва да се показват една до друга (като ако е кратка). Съвместно, JSONString ще изглежда така (запазете низа в един ред в действителния работен код)

var myJSONStr = 'payload = "потребителско име": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Този прикачен файл не се поддържа. "," заглавие ":" ПРЕДЛОЖЕНИЕ ЗА ДЕН НА ВАЛЕНТИНА "," цвят ":" # 9C1A22 "," претекст ":" Сегашният списък с страхотни оферти, избрани за вас "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : „Сайтове“, „стойност“: „__ \ N__ "," short ": true, " title ":" Код на офертата "," стойност ":" UI90O22 "," short ": true]," mrkdwn_in ": [" text "," fields "]," текст ":" Просто кликнете върху имената на сайтовете и започнете да купувате. Получете * допълнително намаление с кода на офертата *, ако е предоставен. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Публикувайте заявката

Сега, за да направите заявката за публикуване в JavaScript, използвайте функцията по-долу:

функция postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-saved-from-before, myJSONStr = json-string-от-горе; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Добавете тази функция към натискане на бутон или зареждане на страницата за да видим как работи.

Крайният изход ще изглежда по следния начин: