Jak wysłać niestandardowe wiadomości do Slack z aplikacji

Slack to popularna aplikacja do przesyłania wiadomości używana przez wiele zespołów. Zawiera wiele usług i interfejs API dla programistów, aby zintegrować go z ich aplikacjami. W dzisiejszym poście zobaczymy, jak korzystać z jednej z jego usług o nazwie Przychodzące Webhooks, aby wysyłać dane do luźnej aplikacji zewnętrznej.

W ten sposób możemy łatwo wysyłać wiadomości do Slack z dowolnej aplikacji, którą już mamy; możemy wysyłać raporty, aktualizacje, wiadomości, powiadomienia i inne. W tym poście użyłem JavaScript w tym przykładzie. Aby rozpocząć, zaloguj się na konto Slack swojej drużyny.

1. Skonfiguruj integrację

Najpierw musisz skonfigurować integrację przychodzącego webhooka. Iść do yourteam.slack.com/apps/build/custom-integration i kliknij Przychodzące Webhooks, następnie wybierz kanał lub użytkownika, do którego chcesz opublikować swoje wiadomości (ten wybór może zostać zastąpiony później w kodzie).

Po zakończeniu zobaczysz stronę konfiguracji integracji przychodzącego webhooka.

Przewiń w dół i pojawi się URL Webhook w formacie https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Zapisz gdzieś ten adres URL, będziemy go potrzebować później. Możesz dalej zmienić ikonę i nazwę integracji na tej stronie, ale zrobimy to w kodzie.

2. Utwórz wiadomość

Wyobraźmy sobie, że utworzyłeś już aplikację internetową, która wyszukuje sprzedaż w Walentynki w popularnych witrynach, a także kody ofertowe do wykorzystania podczas sprzedaży. Z jakiegoś powodu chcesz podzielić się tym wynikiem z członkami zespołu Slack.

Wszystko, co musimy teraz zrobić, to użyć adresu URL webhook utworzonego w poprzednim kroku i wysłać do niego żądanie z aplikacji za pomocą danych JSON, które spreparują wiadomość o ofercie sprzedaży.

Najpierw zbierzmy ciąg JSON, który zostanie przekształcony w wiadomość Slack. Parametr przenoszący dane JSON nazywany jest ładunkiem, dlatego łańcuch JSON powinien wyglądać tak:

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

icon_url to adres URL do obrazu, który pojawi się jako zdjęcie profilowe, możesz również użyć icon_emoji aby zamiast tego wyświetlić emoji jako zdjęcie profilowe „icon_emoji”: „: prezent:”. "kanał" określa kanał lub nazwę użytkownika, który zobaczy twoją wiadomość. Dla nazwy użytkownika użyj składni "@Nazwa Użytkownika", dla kanału "#Nazwa kanału".

Teraz rzeczywista wiadomość; możesz albo dodać "tekst" własność i napisz wiadomość jako jej wartość i skończ z nią lub użyj właściwości o nazwie "przywiązanie" aby dodać bogato sformatowany tekst, co będziemy robić teraz.

The "przywiązanie" własność ładunek w ten sposób:

„załączniki”: [„powrót”: „Załącznik nie jest obsługiwany.”, „tytuł”: „OFERTA DNIA WALENTYNKI”, „kolor”: „# 9C1A22”, „pretekst”: „Dzisiejsza lista wspaniałych ofert została wybrana dla ciebie „, autor_nazwa”: „Preethi”, „autor_link”: „https://www.hongkiat.com/blog/author/preethi/”, „author_icon”: „https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" text "," fields "]," text ":" Po prostu kliknij nazwy witryn i zacznij kupować. Uzyskaj * dodatkową redukcję z kodem oferty *, jeśli jest dostępny. „,„ thumb_url ”:„ http://example.com/thumbnail.jpg ”]

„upadek” to alternatywny tekst, który ma być wyświetlany, gdy wiadomość Slack jest wyświetlana w aplikacji, która nie obsługuje załączników wiadomości (jak w przypadku powiadomień mobilnych).

"kolor" to lewy kolor obramowania wiadomości.

"pretekst" to tekst wyświetlany przed główną treścią.

„author_link” to adres URL hiperłącza w nazwie autora (jeśli jest podany).

„mrkdwn_in” jest tablicą nazw właściwości, których wartości są pokazane w komunikacie - w oparciu o składnię przeceny, taką jak (*) dla pogrubienia i (_) dla kursywy. Trzy możliwe wartości dla „mrkdwn_in” to „tekst”, „pretekst” i „pola”

„thumb_url” to adres URL obrazu miniatury.

Oto jak wiadomość będzie wyglądać do tej pory.

Dodajmy teraz pola do tablicy załączników, która wyświetli witryny i kody ofert w dwóch kolumnach.

„pola”: [„tytuł”: „Witryny”, „wartość”: „____ "," short ": true, " title ":" Code Offer "," value ":" UI90O22 n- "," short ": true], 

Posługiwać się n aby dodać przerwanie linii i składnię aby dodać hiperłącza.

Podkreślenie służy do formatowania tekstu kursywą.

krótki jest ustawione na prawdziwe jeśli wartości mają być wyświetlane obok siebie (np. jeśli jest krótki). Połączone, JSONString będzie wyglądać następująco (zachowaj ciąg w pojedynczym wierszu w rzeczywistym kodzie roboczym)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "załączniki": ["fallback": "Ten załącznik nie jest obsługiwany. „,„ tytuł ”:„ OFERTA DNIA WALENTYNKI ”,„ kolor ”:„ # 9C1A22 ”,„ pretekst ”:„ Dzisiejsza lista wspaniałych ofert wybranych dla Ciebie ”,„ nazwa_autora ”:„ Preethi ”,„ author_link ”:„ https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : „Witryny”, „Wartość”: „____ "," short ": true, " title ":" Code Offer "," value ":" UI90O22 n- "," short ": true]," mrkdwn_in ": [" text "," fields „],„ tekst ”:„ Wystarczy kliknąć nazwy witryn i zacząć kupować. Uzyskaj * dodatkową redukcję z kodem oferty *, jeśli jest podany. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Opublikuj wniosek

Teraz, aby wysłać zapytanie w języku JavaScript, użyj poniższej funkcji:

funkcja postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-saved-from-before, myJSONStr = json-string-from-above; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader („Content-Type”, „application / x-www-form-urlencoded”); xmlhttp.send (myJSONStr);  

Dodaj tę funkcję do kliknięcia przycisku lub ładowania strony żeby to działało.

Końcowy wynik będzie wyglądał mniej więcej tak: