Modul de trimitere a mesajelor personalizate la Slack de la aplicația dvs.

Slack este o aplicație populară de mesagerie folosită de mai multe echipe. Acesta vine cu o mulțime de servicii și un API pentru dezvoltatori pentru a-l integra cu aplicațiile lor. În postarea de astăzi vom vedea cum să utilizați unul dintre serviciile sale numite Webhooks de intrare, pentru a trimite date de la o aplicație externă.

În acest fel putem trimiteți cu ușurință mesajele Slack din orice aplicație pe care o avem deja; putem trimite rapoarte, actualizări, știri, notificări și multe altele. Pentru acest post, am folosit JavaScript în exemplu. Pentru a începe, conectați-vă la contul Slack al echipei dvs..

1. Configurați integrarea

Mai întâi va trebui să configurați o integrare a webhook-ului. Mergi la yourteam.slack.com/apps/build/custom-integration și faceți clic pe Webhooks de intrare, apoi selectați un canal sau un utilizator în care doriți să postați mesajele dvs. (această selecție poate fi înlocuită mai târziu în cod).

După ce ați terminat, veți vedea pagina de configurare a integrării webhook.

Derulați în jos și va fi o adresă Webhook în format https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Salvați adresa URL undeva, vom avea nevoie mai târziu. Puteți modifica în continuare pictograma și numele integrării în această pagină, însă vom face acest lucru în cod.

2. Creați mesajul

Să ne imaginăm că ați creat deja o aplicație web care urmărește vânzările de Ziua Îndrăgostiților pe site-uri populare, precum și codurile de ofertă utilizate în timpul vânzării și, din anumite motive, doriți să distribuiți acest rezultat membrilor echipei Slack.

Tot ceea ce trebuie să facem acum este să folosim URL-ul web creat în pasul anterior și să îi trimitem o cerere din aplicația dvs. cu date JSON, care va concepe mesajul ofertei de vânzare.

Să punem întâi șirul JSON care va fi transformat în mesajul Slack. Parametrul care transporta datele JSON se numește sarcină utilă, prin urmare, șirul JSON ar trebui să arate astfel:

var myJSONStr = 'payload = "nume utilizator": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "canal" 

icon_url este adresa URL a imaginii care se va afișa ca imagine de profil, de asemenea, puteți utiliza icon_emoji pentru a afișa, de exemplu, un emoji ca imagine de profil "icon_emoji": ": cadou:". "canal" specifică canalul sau numele de utilizator care vă va vedea mesajul. Pentru numele de utilizator, utilizați sintaxa "@nume de utilizator", pentru canal "#numele canalului".

Acum pentru mesajul real; puteți adăuga "text" proprietate și scrie mesajul ca valoare și să fie făcut cu ea, sau de a folosi proprietatea numit "atașament" pentru a adăuga text bogat formatat, ceea ce vom face acum.

"atașament" proprietatea încărcătură utilă merge astfel:

"atașamente": ["fallback": "Anexa nu este acceptată", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "pretext" pentru dvs. "," autor_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," autor_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" text "," câmpuri "]," text ":" "," thumb_url ":" http://example.com/thumbnail.jpg "]

"da înapoi" este textul alternativ care se afișează atunci când mesajul Slack este vizionat într-o aplicație care nu acceptă atașarea mesajului (ca în notificările mobile).

"culoare" este culoarea din stânga a mesajului.

"pretext" este textul afișat înainte de conținutul principal.

"Author_link" este hyperlinkul URL-ului în numele autorului (dacă este furnizat).

"Mrkdwn_in" este o serie de nume de proprietăți ale căror valori sunt afișate formatate în mesaj - pe baza sintaxei de marcare ca (*) pentru caractere aldine și (_) pentru caractere cursive. Cele trei valori posibile pentru "Mrkdwn_in" sunt "text", "pretext" și "câmpuri"

"Thumb_url" este URL-ul imaginii miniaturii.

Iată cum va arăta mesajul până acum.

Acum, să adăugăm câmpurile în matricea de atașări, care va afișa site-urile și va oferi coduri în două coloane.

"câmpuri": ["titlu": "site-uri", "valoare": "_ \ N__ "," scurt ": true, " title ":" Cod de Ofertă "," valoare ":" UI90O22 \ n- "," scurt ": true], 

Utilizare \ n pentru a adăuga ruperea liniei și sintaxa pentru a adăuga hiperlegături.

Underscore este folosit pentru a formata textul în caractere cursive.

mic de statura este setat sa Adevărat dacă valorile trebuie să fie afișate una lângă cealaltă (ca în cazul în care acestea sunt scurte). Puneți împreună, JSONString va arăta astfel (păstrați șirul într-o singură linie în codul de lucru real)

var myJSONStr = 'payload = "nume utilizator": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": Acest atașament nu este acceptat. "," title ":" OFERTA DE ZI VALENTINE "," color ":" # 9C1A22 "," pretext ":" Lista de astăzi cu oferte minunate alese pentru tine "," author_name ":" Preethi " : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," câmpuri ": [" titlu " : "Site-uri", "valoare": "__ \ N__ "," scurtă ": true," "nume": "Cod de Ofertă", "valoare" "]," text ":" Faceți clic pe numele site-ului și începeți să cumpărați. Obțineți * o reducere suplimentară cu codul de ofertă *, dacă este furnizat. "," Thumb_url ":" http://example.com/thumbnail.jpg "]; 

3. Postați cererea

Acum, pentru a face cererea de postare în JavaScript, utilizați funcția de mai jos:

funcția postMessageToSlack () var xmlhttp = nou XMLHttpRequest (), webhook_url = url-ați-salvat-de-înainte, myJSONStr = json-string-from-above; xmlhttp.open ("POST", webhook_url, false); xmlhttp.setRequestHeader ("Content-Type", "aplicație / x-www-form-urlencoded"); xmlhttp.send (myJSONStr);  

Adăugați această funcție la un clic pe butonul sau încărcarea unei pagini pentru a vedea că funcționează.

Rezultatul final va arata cam asa: