Sådan sendes tilpassede meddelelser til slap fra dit program

Slack er en populær messaging app, der bruges af mange hold. Det leveres med mange tjenester og en API for udviklere til at integrere det med deres applikationer. I dagens post kan vi se, hvordan man bruger en af ​​sine tjenester, kaldet Incoming Webhooks, for at sende data til slap fra en ekstern applikation.

På den måde kan vi Du kan nemt sende meddelelser til Slack fra enhver applikation, vi allerede har; vi kan sende rapporter, opdateringer, nyheder, anmeldelser og mere. For dette indlæg har jeg brugt JavaScript i eksemplet. For at begynde skal du logge ind på dit holds Slack-konto.

1. Opret integrationen

Du skal først oprette en indgående webhook-integration. Gå til yourteam.slack.com/apps/build/custom-integration og klik på Indkommende Webhooks, vælg derefter en kanal eller bruger, du vil sende dine meddelelser til (dette valg kan tilsidesættes senere i kode).

Når du er færdig, kan du se din indkommende webhook-integrations konfigurationsside.

Rul ned, og der vil være en webhook-URL i formatet https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Gem den webadresse et sted, vi skal bruge det senere. Du kan yderligere ændre ikonet og navnet på integrationen på denne side selv, men det gør vi i kode.

2. Opret beskeden

Lad os forestille os, at du allerede har oprettet en webapp, der søger Valentinsdagssalg på populære websteder samt tilbudskoderne til brug under salget, og af en eller anden grund vil du dele dette resultat med dine Slack-team medlemmer.

Alt, hvad vi skal gøre nu, er at bruge webhook-URL'en, der blev oprettet i det foregående trin, og sende en anmodning til den fra din ansøgning med JSON-data, som vil samle salgsbudskabet.

Lad os først sammensætte JSON-strengen, der bliver ændret til Slack-meddelelsen. Parameteren, der bærer JSON-dataene, kaldes nyttelast, derfor skal JSON-strengen se sådan ud:

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

icon_url er webadressen til billedet, der vises som profilbillede, du kan også bruge icon_emoji for at vise en emoji som profilbillede i stedet for for eksempel "icon_emoji": ": gave:". "kanal" angiver kanalen eller brugernavnet, hvem der vil se din besked. For brugernavn bruger du syntaksen "@ Brugernavn", for kanal "#Channelname".

Nu for den egentlige besked; Du kan enten tilføje "tekst" ejendom og skriv din besked som dens værdi og gøres med den, eller brug den beskrevne ejendom "vedhæftet fil" at tilføje rigtig formateret tekst, hvilket er hvad vi gør nu.

Det "vedhæftet fil" ejendom af nyttelast går som dette:

"vedhæftede filer": ["fallback": "Vedhæftet fil understøttes ikke.", "title": "VALENTINENS DAG TILBUD", "farve": "# 9C1A22", "påskud": "Dagens liste over fantastiske tilbud plukket for dig "," forfatternavn ":" 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 blot på webstedets navne og begynd at købe. Få * ekstra reduktion med tilbudskoden * "," thumb_url ":" http://example.com/thumbnail.jpg "]

"Falde tilbage" vises den alternative tekst, når slapmeddelelsen ses i et program, der ikke understøtter meddelelsesvedhæftning (som i mobilmeddelelser).

"farve" er meddelelsens venstre grænsefarve.

"Påskud" er den tekst, der vises før hovedindholdet.

"Author_link" er webadressen hyperlinket i forfatterens navn (hvis den er angivet).

"Mrkdwn_in" er en række egenskabsnavne, hvis værdier vises formateret i meddelelsen - baseret på markdown-syntaks som (*) for fed og (_) til kursiv. De tre mulige værdier for "Mrkdwn_in" er "tekst", "påskud" og "felter"

"Thumb_url" er miniaturebilledets URL.

Sådan ser meddelelsen ud så langt.

Lad os nu tilføje felterne til vedhæftningsfeltet, som viser webstederne og tilbudskoderne i to kolonner.

"felter": ["title": "Sites", "value": "__ \ N__ "," short ": true, " title ":" Tilbudskode "," værdi ":" UI90O22 \ n- "," short ": true], 

Brug \ n for at tilføje linjeskift og syntaksen at tilføje hyperlinks.

Underscore bruges til at formatere tekst i kursiv.

kort er indstillet til rigtigt hvis værdierne skal vises side om side (som om det er kort). Sammenføjet vil JSONString se sådan ud (hold tråden i en enkelt linje i den egentlige arbejdskode)

var myJSONStr = 'payload = "brugernavn": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "vedhæftede filer": ["fallback": "Denne attachement understøttes ikke. "," titel ":" VALENTINENS DAG TILBUD "," farve ":" # 9C1A22 "," påskud ":" Dagens liste over fantastiske tilbud plukket til dig "," forfatternavn ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," felter ": [" title " : "Sites", "value": "__ \ N__ "," short ": true, " title ":" Tilbudskode "," værdi ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text " "]," tekst ":" Klik blot på webstedets navne og begynd at købe. Få * ekstra reduktion med tilbudskoden *, hvis den leveres. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Indsend anmodningen

For at gøre postanmodningen i JavaScript skal du bruge funktionen nedenfor:

funktion postMessageToSlack () var xmlhttp = ny XMLHttpRequest (), webhook_url = url-du-gemt-fra-før, myJSONStr = json-streng-ovenfra; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Tilføj denne funktion til en knap eller klik på siden at se det fungere.

Det endelige output vil se sådan ud: