Как отправлять индивидуальные сообщения в Slack из вашего приложения

Slack - популярное приложение для обмена сообщениями, используемое многими командами. Он поставляется с большим количеством сервисов и API для разработчиков, чтобы интегрировать его со своими приложениями. В сегодняшнем посте мы увидим, как использовать один из сервисов Incoming Webhooks для отправки данных из внешнего приложения..

Таким образом, мы можем легко отправлять сообщения в Slack из любого приложения, которое у нас уже есть; мы можем отправлять отчеты, обновления, новости, уведомления и многое другое. Для этого поста я использовал JavaScript в примере. Для начала войдите в Slack аккаунт вашей команды.

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

Сначала вам нужно настроить входящую интеграцию с webhook. Идти к yourteam.slack.com/apps/build/custom-integration и нажмите на Входящие Webhooks, затем выберите канал или пользователя, которому вы хотите публиковать свои сообщения (этот выбор может быть переопределен позже в коде).

После этого вы увидите страницу конфигурации вашей входящей интеграции webhook.

Прокрутите вниз и там будет URL-адрес Webhook в формате https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Сохраните этот URL где-нибудь, он понадобится нам позже. Вы можете дополнительно изменить значок и имя интеграции на этой странице, но мы сделаем это в коде.

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

Давайте представим, что вы уже создали веб-приложение, которое отслеживает продажи на День Святого Валентина на популярных сайтах, а также коды предложений для использования во время продажи, и по какой-то причине вы хотите поделиться этим результатом с членами вашей команды Slack..

Все, что нам нужно сделать сейчас, - это использовать URL-адрес webhook, созданный на предыдущем шаге, и опубликовать в нем запрос из вашего приложения с данными JSON, который будет составлять сообщение о предложении продажи..

Давайте сначала соберем строку JSON, которая будет превращена в сообщение Slack. Параметр, содержащий данные JSON, называется полезной нагрузкой, поэтому строка JSON должна выглядеть следующим образом:

var myJSONStr = 'payload = "username": "SOT BOT", "icon_url": "example.com/img/icon.jpg", "channel": "#general"' 

icon_url URL-адрес изображения, которое будет отображаться как изображение профиля, вы также можете использовать icon_emoji вместо этого для отображения смайлика в качестве картинки профиля, например "icon_emoji": ": gift:". «Канал» указывает канал или имя пользователя, который будет видеть ваше сообщение. Для имени пользователя используйте синтаксис "@Username", для канала "#Название канала".

Теперь для фактического сообщения; Вы можете добавить "текст" свойство и напишите ваше сообщение как его значение и покончите с этим, или используйте свойство под названием «Привязанность» добавить богато отформатированный текст, что мы будем делать сейчас.

«Привязанность» собственностью полезная нагрузка выглядит так:

"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" представляет собой массив имен свойств, значения которых отображаются в формате, отформатированном в сообщении - на основе синтаксиса уценки, например (*) для жирного шрифта и (_) для курсива. Три возможных значения для "Mrkdwn_in" «текст», «предлог» и «поля»

"Thumb_url" URL-адрес миниатюрного изображения.

Вот как будет выглядеть сообщение.

Теперь давайте добавим поля в массив вложений, которые будут отображать сайты и предлагать коды в двух столбцах..

"fields": ["title": "Sites", "value": "__ \ П-_ "," short ": true, " title ":" Код предложения "," value ":" UI90O22 \ n- "," short ": true], 

использование \ п добавить разрыв строки и синтаксис добавить гиперссылки.

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

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

var myJSONStr = 'payload = "username": "SOT BOT", "icon_url": "example.com/img/icon.jpg", "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 "," fields ": [" title " : "Сайты", "Значение": "__ \ П-_ "," short ": true, " title ":" Код предложения "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," fields "]," текст ":" Просто нажмите на названия сайтов и начните покупать. Получите * дополнительное сокращение с помощью кода предложения *, если он указан. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Разместите запрос

Теперь, чтобы сделать запрос на публикацию в JavaScript, используйте функцию ниже:

function postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-save-from-before, myJSONStr = json-string-from-вышеуказанный; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Добавьте эту функцию к нажатию кнопки или загрузке страницы чтобы увидеть, как это работает.

Окончательный результат будет выглядеть примерно так: