Hoe aangepaste berichten naar Slack van uw toepassing te verzenden

Slack is een populaire berichten-app die door veel teams wordt gebruikt. Het wordt geleverd met veel services en een API waarmee ontwikkelaars deze kunnen integreren met hun applicaties. In de post van vandaag zullen we zien hoe we een van de services genaamd Incoming Webhooks kunnen gebruiken om gegevens naar een slack van een externe applicatie te sturen.

Op deze manier kunnen we verzend eenvoudig berichten naar Slack vanuit elke applicatie die we al hebben; we kunnen rapporten, updates, nieuws, meldingen en meer sturen. Voor dit bericht heb ik JavaScript in het voorbeeld gebruikt. Log om te beginnen in op het Slack-account van uw team.

1. Stel de integratie in

U moet eerst een inkomende webhookintegratie instellen. Ga naar yourteam.slack.com/apps/build/custom-integration en klik op Inkomende Webhooks, selecteer vervolgens een kanaal of gebruiker waarnaar je je berichten wilt posten (deze selectie kan later in code worden overschreven).

Als u klaar bent, ziet u de configuratiepagina van uw inkomende webhookintegratie.

Blader naar beneden en er zal een Webhook-URL in de indeling staan https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Sla die URL ergens op, we hebben hem later nodig. U kunt het pictogram en de naam van de integratie op deze pagina zelf verder wijzigen, maar dat doen we in de code.

2. Maak het bericht

Stel dat u al een web-app heeft gemaakt die Valentijnsdagverkoop op populaire sites zoekt, evenals de aanbiedingscodes voor gebruik tijdens de verkoop en om een ​​of andere reden dit resultaat wilt delen met uw Slack-teamleden.

Het enige dat we nu hoeven te doen, is de webhook-URL te gebruiken die in de vorige stap is gemaakt en een verzoek hiernaar te verzenden vanuit uw toepassing met JSON-gegevens, die het verkoopaanbiedingbericht verzinnen.

Laten we eerst de JSON-reeks samenstellen die in het bericht Slack wordt omgezet. De parameter die de JSON-gegevens draagt, wordt payload genoemd, vandaar dat de JSON-tekenreeks er als volgt uit moet zien:

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

icon_url is de URL naar de afbeelding die wordt weergegeven als de profielfoto, die u ook kunt gebruiken icon_emoji om in plaats daarvan een emoji als profielfoto weer te geven "icon_emoji": ": cadeau:". "kanaal" geeft het kanaal of de gebruikersnaam aan die je bericht te zien krijgt. Gebruik voor de gebruikersnaam de syntaxis "@Username", voor kanaal "#kanaal naam".

Nu voor het eigenlijke bericht; je kunt het toevoegen "tekst" eigenschap en schrijf uw bericht als waarde en doe het daarmee of gebruik de eigenschap genaamd "Attachment" om rijkelijk opgemaakte tekst toe te voegen, wat we nu gaan doen.

De "Attachment" eigendom van payload gaat zoals dit:

"bijlagen": ["fallback": "De bijlage wordt niet ondersteund.", "titel": "VALENTIJNSDAG AANBIEDING", "kleur": "# 9C1A22", "voorwendsel": "De lijst met geweldige aanbiedingen van vandaag gekozen for you "," 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 ":" Klik gewoon op de sitenamen en begin met kopen. Ontvang * extra korting met de aanbiedingscode *, indien aanwezig. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"terugvallen" is de alternatieve tekst die moet worden weergegeven wanneer het Slack-bericht wordt weergegeven in een toepassing die geen berichtbijlage ondersteunt (zoals in mobiele meldingen).

"kleur" is de linker grenskleur van het bericht.

"voorwendsel" is de tekst die vóór de hoofdinhoud wordt weergegeven.

"Author_link" is de URL hypergelinkt in auteursnaam (indien aanwezig).

"Mrkdwn_in" is een array van eigenschapnamen waarvan de waarden in het bericht worden weergegeven - op basis van markdown-syntaxis, zoals (*) voor vet en (_) voor cursief. De drie mogelijke waarden voor "Mrkdwn_in" zijn "tekst", "voorwendsel" en "velden"

"Thumb_url" is de URL van de miniatuurafbeelding.

Zo ziet het bericht er tot nu toe uit.

Laten we nu de velden toevoegen aan de bijlage-array, die de sites weergeeft en codes aanbiedt in twee kolommen.

"velden": ["titel": "Sites", "waarde": "__ \ N__ "," short ": true, " title ":" Offer-code "," value ":" UI90O22 \ n- "," short ": true], 

Gebruik \ n om regeleinde en de syntaxis toe te voegen om hyperlinks toe te voegen.

Underscore wordt gebruikt om tekst cursief op te maken.

kort ingesteld op waar als de waarden naast elkaar moeten worden weergegeven (bijvoorbeeld als het kort is). Bij elkaar opgeteld ziet de JSONString er als volgt uit (bewaar de reeks in een enkele regel in werkende code)

var myJSONStr = 'payload = "gebruikersnaam": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "bijlagen": ["fallback": "Deze bijlage wordt niet ondersteund. "," titel ":" VALENTIJNSDAG AANBIEDING "," kleur ":" # 9C1A22 "," voorwendsel ":" De lijst met geweldige aanbiedingen van vandaag voor u geselecteerd "," auteur_naam ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Sites", "waarde": "__ \ N__ "," short ": true, " title ":" Offer-code "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," velden "]," text ":" Klik gewoon op de sitenamen en begin met kopen. Ontvang * extra korting met de aanbiedingscode *, indien aanwezig. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Plaats het verzoek

Gebruik de onderstaande functie om het postverzoek in JavaScript uit te voeren:

function postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url-u-saved-from-before, myJSONStr = json-string-from-above; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Inhoudstype', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Voeg deze functie toe aan een knopklik of laad de pagina op om het te zien werken.

De uiteindelijke uitvoer ziet er ongeveer zo uit: