Ako posielať prispôsobené správy na Slack z aplikácie

Slack je populárna aplikácia pre zasielanie správ, ktorú používajú mnohé tímy. Dodáva sa s množstvom služieb a API pre vývojárov, ktoré ju integrujú do svojich aplikácií. V dnešnom príspevku uvidíme, ako používať niektorú z jeho služieb nazvanú Prichádzajúce Webhooky na odosielanie údajov z externej aplikácie.

Takto môžeme ľahko posielať správy na Slack z akejkoľvek aplikácie, ktorú už máme; môžeme posielať správy, aktualizácie, správy, upozornenia a ďalšie. Pre tento príspevok som v príklade použil JavaScript. Ak chcete začať, prihláste sa do účtu Slack vášho tímu.

1. Nastavte funkciu Integrácia

Najprv budete musieť nastaviť prichádzajúcu integráciu webových stránok. Ísť do yourteam.slack.com/apps/build/custom-integration a kliknite na Prichádzajúce Webhooky, potom vyberte kanál alebo používateľa, ktorému chcete posielať svoje správy (túto voľbu môžete neskôr zmeniť v kóde).

Po dokončení sa zobrazí stránka s konfiguráciou prichádzajúcej webovej integrácie.

Prejdite nadol a vo formáte bude URL Webhook https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Uložiť túto adresu niekde, budeme ju potrebovať neskôr. Môžete ďalej meniť ikonu a názov integrácie na tejto stránke, ale urobíme to v kóde.

2. Vytvorte správu

Predstavme si, že ste už vytvorili webovú aplikáciu, ktorá hľadá predaj vianočných sviatkov na populárnych stránkach, rovnako ako kódy ponúk na použitie počas predaja a z nejakého dôvodu chcete tento výsledok zdieľať s vašimi členmi tímu Slack.

Všetko, čo teraz musíme urobiť, je použiť webovú adresu URL vytvorenú v predchádzajúcom kroku a odoslať žiadosť z vašej aplikácie s údajmi JSON, ktoré pripravia správu predajnej ponuky.

Po prvé vytvoríme reťazec JSON, ktorý sa zmení na správu Slack. Parameter nesúci údaje JSON sa nazýva užitočné zaťaženie, preto reťazec JSON by mal vyzerať takto:

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

icon_url je adresa URL obrázka, ktorý sa zobrazí ako profilový obrázok, môžete tiež použiť icon_emoji zobraziť napríklad ako profilový obrázok emoji "icon_emoji": ": darček:". "Kanál" určuje kanál alebo používateľské meno, ktoré uvidia vašu správu. Užívateľské meno používa syntax "@ Používateľ", pre kanál "#Channelname".

Teraz pre aktuálnu správu; môžete buď pridať "Text" Vlastnosť a napíšte svoju správu ako svoju hodnotu a urobte s ňou, alebo použite vlastnosť, ktorá sa nazýva "Attachment" pridať bohato formátovaný text, čo budeme robiť teraz.

"Attachment" majetok užitočné zaťaženie ide takto:

"príloha": ["záložný": "Príloha nie je podporovaná.", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "pretext": "Dnešný zoznam úžasných ponúk pre vás "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," autor_icon ":" https://assets.hongkiat.com/ upload / author / preethi.jpg "," mrkdwn_in ": [" text "," polia "]," text ":" Stačí kliknúť na názvy stránok a začať kupovať. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"Záložné" je alternatívny text, ktorý sa zobrazí, keď sa správa Slack zobrazí v aplikácii, ktorá nepodporuje prílohu správy (ako v upozorneniach pre mobilné zariadenia).

"Farba" je ľavá okrajová farba správy.

"Zámienka" je text, ktorý je zobrazený pred hlavným obsahom.

"Author_link" je adresa URL hypertextovo prepojená s menom autora (ak je k dispozícii).

"Mrkdwn_in" je pole názvov vlastníctiev, ktorých hodnoty sú zobrazené naformátované v správe - na základe syntaxe označovania ako (*) pre tučné a (_) pre kurzívu. Tri možné hodnoty pre "Mrkdwn_in" sú "text", "pretext" a "pole"

"Thumb_url" je adresa URL miniatúry.

Správa bude vyzerať tak ďaleko.

Teraz pridáme polia do poľa príloh, ktoré budú zobrazovať stránky a ponúkajú kódy v dvoch stĺpcoch.

"polia": ["title": "Sites", "value": "__ \ N-_ "," krátky ": true, " title ":" Kód ponuky "," hodnota ":" UI90O22 \ n- "," short ": true], 

použitie \ n pridať prerušenie riadku a syntax pridať hypertextové odkazy.

Podčiarknutie slúži na formátovanie textu kurzívou.

krátky je nastavené na pravdivý ak sa majú hodnoty zobrazovať vedľa seba (ak je krátky). Zostavte JSONString tak, ako to bude (udržujte reťazec v jednom riadku v aktuálnom pracovnom kóde)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": Táto príloha nie je podporovaná. "," title ":" VALENTINE'S DAY OFFER "," farba ":" # 9C1A22 "," pretext ":" Dnešný zoznam úžasných ponúk vybraných pre vás "," author_name ":" Preethi "," author_link " : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," pole ": [" title " : "Stránky", "Hodnota": "__ \ N-_ "," krátky ": pravý, " názov ":" Ponuka Kód "," Hodnota ":" UI90O22 \ n- "," short ": true]," mrkdwn_in " "]," text ":" Stačí kliknúť na názvy stránok a začať kupovať. Získajte * dodatočné zníženie pomocou kódu ponuky *, ak je k dispozícii. "," Thumb_url ":" http://example.com/thumbnail.jpg "]; 

3. Zadajte požiadavku

Teraz môžete vykonať žiadosť o príspevok v jazyku JavaScript pomocou nižšie uvedenej funkcie:

funkcia postMessageToSlack () var xmlhttp = nová XMLHttpRequest (), webhook_url = url-you-saved-from-before, myJSONStr = json-string-zhora; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Pridať túto funkciu kliknutím na tlačidlo alebo načítaním stránky aby to fungovalo.

Výsledný výstup bude vyzerať takto: