Hur skickar du skräddarsydda meddelanden till din applikation

Slack är en populär meddelandeprogram som används av många lag. Det levereras med många tjänster och ett API för utvecklare att integrera det med sina applikationer. I dagens inlägg ser vi hur man använder en av sina tjänster som heter Incoming Webhooks, för att skicka data för att släcka från en extern applikation.

På så sätt kan vi enkelt skicka meddelanden till Slack från alla applikationer vi redan har; Vi kan skicka rapporter, uppdateringar, nyheter, meddelanden och mer. För det här inlägget har jag använt JavaScript i exemplet. För att börja, logga in på ditt lag Slack-konto.

1. Ställ in integrationen

Du måste först upprätta en inkommande webhook-integration. Gå till yourteam.slack.com/apps/build/custom-integration och klicka på Inkommande webbhakar, välj sedan en kanal eller användare som du vill skicka dina meddelanden till (det här valet kan överskridas senare i koden).

När du är klar ser du din inkommande webbhook-integrations konfigurationssida.

Bläddra ner och det kommer att finnas en Webhook URL i formatet https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Spara den webbadressen någonstans, vi behöver det senare. Du kan vidare ändra ikonen och namnet på integrationen på den här sidan, men vi gör det i kod.

2. Skapa meddelandet

Låt oss föreställa er att du redan har skapat en webapp som söker ut alla hjärtans dagssäljare på populära webbplatser samt erbjudandekoderna för användning under försäljningen, och av någon anledning vill du dela detta resultat med dina Slack-lagmedlemmar.

Allt vi behöver göra nu är att använda webhook-webbadressen som skapades i föregående steg och skicka en begäran till den från din ansökan med JSON-data, vilket kommer att sammanfatta försäljningsbudskapet.

Låt oss först sätta ihop JSON-strängen som ska ändras till Slack-meddelandet. Parametern som bär JSON-data kallas nyttolast, så JSON-strängen ska se ut så här:

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

icon_url är webbadressen till bilden som kommer att visas som profilbild, du kan också använda icon_emoji för att visa en emoji som profilbilden istället, till exempel "icon_emoji": ": gåva:". "kanalisera" specificerar kanalen eller användarnamnet som kommer att se ditt meddelande. Använd användarnamnet för användarnamnet "@Användarnamn", för kanal "#kanal namn".

Nu för det faktiska meddelandet; du kan antingen lägga till "text" egendom och skriv ditt meddelande som sitt värde och gör det med det, eller använd den egendom som heter "bilaga" att lägga till rik formaterad text, vilket är vad vi ska göra nu.

De "bilaga" egendom av nyttolast går så här:

"attachments": ["fallback": "Fästet stöds inte.", "title": "VALENTINENS DAG OFFER", "color": "# 9C1A22", "påskott": "Dagens lista med fantastiska erbjudanden plockade för dig "," författarnamn ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uppladdningar / författare / preethi.jpg "," mrkdwn_in ": [" text "," fält "]," text ":" Klicka bara på sidnamnen och börja köpa. Få * extra rabatt med erbjudandekoden *, om den tillhandahålls. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"Retirera" är den alternativa texten som ska visas när Slack-meddelandet visas i en applikation som inte stöder meddelandebevakning (som i mobilmeddelanden).

"Färg" är meddelandets vänstra kantfärg.

"ursäkt" är texten som visas före huvudinnehållet.

"Author_link" är webbadressen hyperlänkad i författarens namn (om den tillhandahålls).

"Mrkdwn_in" är en rad fastighetsnamn vars värden visas formaterade i meddelandet - baserat på markdown-syntax som (*) för fet och (_) för kursiv. De tre möjliga värdena för "Mrkdwn_in" är "text", "påskott" och "fält"

"Thumb_url" är miniatyrbildens webbadress.

Så här ser meddelandet ut så långt.

Låt oss nu lägga till fälten i bilagan, som kommer att visa sidorna och erbjuda koderna i två kolumner.

"fält": ["title": "Sites", "value": "__ \ N__ "," kort ": true, " title ":" Erbjudande kod "," värde ":" UI90O22 \ n- "," kort ": true], 

Använda sig av \ n för att lägga till radbrytning och syntaxen att lägga till hyperlänkar.

Underscore används för att formatera text i kursiv.

kort är satt till Sann om värdena ska visas sida vid sida (som om det är kort). Sammansatt kommer JSONString att se ut så här (behåll strängen i en enda rad i verklig arbetskod)

var myJSONStr = 'payload = "användarnamn": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Den här bilagan stöds inte. "," title ":" VALENTINE'S DAY OFFER "," color ":" # 9C1A22 "," påskott ":" Dagens lista med fantastiska erbjudanden som valts för dig "," författarnamn ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Sites", "value": "__ \ N__ "," short ": true, " title ":" Offentlig kod "," värde ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text " "]," text ":" Klicka bara på sidnamnen och börja köpa. Få * extra reduktion med erbjudandekoden *, om den tillhandahålls. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Lägg in förfrågan

För att göra inläggsförfrågan i JavaScript, använd funktionen nedan:

funktion postMessageToSlack () var xmlhttp = ny XMLHttpRequest (), webhook_url = url-du-sparad-från-före, myJSONStr = json-sträng-ovan; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Lägg till den här funktionen med en knapp eller klicka på sidan för att se det fungera.

Slutprodukten kommer att se ut så här: