So senden Sie benutzerdefinierte Nachrichten aus Ihrer Anwendung an Slack

Slack ist eine beliebte Messaging-App, die von vielen Teams verwendet wird. Es beinhaltet eine Vielzahl von Services und eine API für Entwickler, die es in ihre Anwendungen integrieren können. In dem heutigen Beitrag werden wir sehen, wie man einen seiner Dienste namens Incoming Webhooks verwendet, um Daten von einer externen Anwendung zu senden.

Auf diese Weise können wir Senden Sie einfach Nachrichten aus jeder Anwendung, die wir bereits haben, an Slack; Wir können Berichte, Updates, Neuigkeiten, Benachrichtigungen und mehr senden. Für diesen Beitrag habe ich im Beispiel JavaScript verwendet. Melden Sie sich zunächst beim Slack-Konto Ihres Teams an.

1. Richten Sie die Integration ein

Sie müssen zunächst eine eingehende Webhook-Integration einrichten. Gehe zu yourteam.slack.com/apps/build/custom-integration und klicken Sie auf Eingehende Webhooks, Wählen Sie dann einen Kanal oder Benutzer aus, an den Sie Ihre Nachrichten senden möchten (diese Auswahl kann später im Code überschrieben werden)..

Sobald Sie fertig sind, sehen Sie die Konfigurationsseite Ihrer Webhook-Integration.

Scrollen Sie nach unten und es wird eine Webhook-URL im Format angezeigt https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Speichern Sie diese URL irgendwo, wir werden sie später brauchen. Sie können das Symbol und den Namen der Integration auf dieser Seite selbst weiter ändern. Dies tun wir jedoch im Code.

2. Erstellen Sie die Nachricht

Stellen Sie sich vor, Sie haben bereits eine Web-App erstellt, die den Umsatz des Valentinstags auf beliebten Websites sowie die Angebotscodes für den Verkauf ermittelt. Aus irgendeinem Grund möchten Sie dieses Ergebnis mit Ihren Slack-Teammitgliedern teilen.

Jetzt müssen Sie nur noch die im vorherigen Schritt erstellte Webhook-URL verwenden und eine Anforderung aus Ihrer Anwendung mit JSON-Daten an sie senden, die die Verkaufsangebotsnachricht zusammenstellt.

Lassen Sie uns zunächst den JSON-String zusammenstellen, der in die Slack-Nachricht umgewandelt wird. Der Parameter, der die JSON-Daten enthält, wird als Payload bezeichnet. Daher sollte die JSON-Zeichenfolge folgendermaßen aussehen:

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

icon_url ist die URL des Bildes, das als Profilbild angezeigt wird. Sie können es auch verwenden icon_emoji B. einen Emoji als Profilbild anzeigen "icon_emoji": ": Geschenk:". "Kanal" gibt den Kanal oder den Benutzernamen an, der Ihre Nachricht sehen soll. Verwenden Sie für den Benutzernamen die Syntax "@Nutzername", für Kanal "#Kanal Name".

Nun zur eigentlichen Nachricht; Sie können entweder das hinzufügen "Text" Eigenschaft und schreiben Sie Ihre Nachricht als Wert und erledigen Sie sie, oder verwenden Sie die aufgerufene Eigenschaft "Befestigung" Um reich formatierten Text hinzuzufügen, tun wir das jetzt.

Das "Befestigung" Eigentum von Nutzlast geht so:

"attachments": ["fallback": "Der Anhang wird nicht unterstützt.", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "Vorwand": "Die heutige Liste der großartigen Angebote wurde ausgewählt für Sie "," autor_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" Text "," Felder "]," Text ":" Klicken Sie einfach auf den Namen der Site und kaufen Sie ein. Erhalten Sie * zusätzliche Ermäßigung mit dem Angebotscode *, sofern vorhanden. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"Zurückfallen" ist der alternative Text, der angezeigt werden soll, wenn die Slack-Nachricht in einer Anwendung angezeigt wird, die keine Nachrichtenanhänge unterstützt (wie in mobilen Benachrichtigungen)..

"Farbe" ist die linke Randfarbe der Nachricht.

"Vorwand" ist der Text, der vor dem Hauptinhalt angezeigt wird.

"author_link" ist die URL, auf die im Namen des Autors verlinkt wird (sofern angegeben).

"mrkdwn_in" ist ein Array von Eigenschaftennamen, deren Werte in der Nachricht formatiert angezeigt werden - basierend auf der Markdown-Syntax wie (*) für Fettdruck und (_) für Kursivschrift. Die drei möglichen Werte für "mrkdwn_in" sind "Text", "Vorwand" und "Felder"

"thumb_url" ist die URL der Miniaturansicht.

So sieht die Nachricht bisher aus.

Fügen wir nun die Felder zum Attachment-Array hinzu, in dem die Websites und Angebotscodes in zwei Spalten angezeigt werden.

"Felder": ["Titel": "Sites", "Wert": "__ \ n__ "," short ": true, " title ":" offer code "," value ":" UI90O22 \ n- "," short ": true], 

Benutzen \ n Zeilenumbruch und die Syntax hinzufügen Hyperlinks hinzufügen.

Unterstrich wird verwendet, um Text kursiv zu formatieren.

kurz ist eingestellt auf wahr wenn die Werte nebeneinander angezeigt werden sollen (wie wenn es kurz ist). Zusammengefasst sieht der JSONString so aus (Behalten Sie den String in einer Zeile im eigentlichen Arbeitscode)

var myJSONStr = 'payload = "Benutzername": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "Anhänge": ["Fallback": "Dieser Anhang wird nicht unterstützt. "," Titel ":" VALENTINSTAG ANGEBOT "," Farbe ":" # 9C1A22 "," Vorwand ":" Heutige Liste der großartigen Angebote, die für Sie ausgewählt wurden "," Autor_Name ":" Preethi "," Autor_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," Felder ": [" title " : "Sites", "value": "__ \ n__ "," short ": true, " title ":" offer code "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," Felder "]," text ":" Klicken Sie einfach auf den Namen der Site und kaufen Sie. Erhalten Sie * zusätzliche Ermäßigung mit dem Angebotscode *, sofern angegeben. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Veröffentlichen Sie die Anfrage

Um die Post-Anfrage in JavaScript zu erstellen, verwenden Sie die folgende Funktion:

function postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-you-save-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);  

Fügen Sie diese Funktion zu einem Klick oder zum Laden einer Schaltfläche hinzu um zu sehen, wie es funktioniert.

Die endgültige Ausgabe sieht etwa so aus: