Kako poslati prilagođene poruke na Slack iz vaše aplikacije

Slack je popularna aplikacija za razmjenu poruka koju koriste mnogi timovi. Ona dolazi s puno usluga i API za programere da ga integriraju sa svojim aplikacijama. U današnjem postu vidjet ćemo kako upotrijebiti neku od svojih usluga pod nazivom Incoming Webhooks, kako bismo poslali podatke na popuštanje vanjske aplikacije.

Ovako možemo lako slati poruke Slack-u iz bilo koje aplikacije koju već imamo; možemo slati izvješća, ažuriranja, vijesti, obavijesti i još mnogo toga. Za ovaj post, u primjeru sam koristio JavaScript. Za početak, prijavite se na račun svog tima Slack.

1. Postavite integraciju

Prvo morate postaviti integraciju dolazne web-kuke. Ići yourteam.slack.com/apps/build/custom-integration i kliknite na Dolazne web-kuke, zatim odaberite kanal ili korisnika na koji želite poslati svoje poruke (ovaj se odabir može naknadno zamijeniti u kodu).

Kada završite, vidjet ćete stranicu s konfiguracijom dolazne webhook integracije.

Pomaknite se dolje i pojavit će se URL webhooka u formatu https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Spremite taj URL negdje, trebat ćemo ga kasnije. Možete i dalje mijenjati ikonu i naziv integracije na ovoj stranici, ali to ćemo učiniti u kodu.

2. Napravite poruku

Pretpostavimo da ste već izradili web-aplikaciju koja traži prodaju Valentinova na popularnim web-lokacijama, kao i kodove ponude za upotrebu tijekom prodaje, a iz nekog razloga želite podijeliti ovaj rezultat s članovima Slackova tima.

Sada samo trebamo koristiti URL webhooka stvoren u prethodnom koraku i objaviti zahtjev iz aplikacije iz JSON podataka, koji će sastaviti poruku ponude ponude.

Prvo sastavimo JSON niz koji će se pretvoriti u Slack poruku. Parametar koji nosi JSON podatke naziva se teret, stoga bi JSON niz trebao izgledati ovako:

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

icon_url je URL slike koji će se prikazati kao slika profila, također možete koristiti icon_emoji umjesto prikazivanja emotikona kao slike profila, na primjer "icon_emoji": ": dar:". "kanal" navodi kanal ili korisničko ime koji će vidjeti vašu poruku. Za korisničko ime koristite sintaksu "@Korisničko ime", za kanal "#Channelname".

Sada za stvarnu poruku; možete dodati ili "tekst" i napišite svoju poruku kao svoju vrijednost i učinite s njom, ili upotrijebite svojstvo koje se zove „Vezanje” da biste dodali bogato oblikovan tekst, što ćemo i sada raditi.

„Vezanje” vlasništvo korisna nosivost ide ovako:

"attachments": ["fallback": "Attachement nije podržan.", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "pretext": "odabran je popis sjajnih ponuda za vas "," 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 ":" Samo kliknite na nazive web-mjesta i počnite kupovati. "," thumb_url ":" http://example.com/thumbnail.jpg "]

„Rezervna” je alternativni tekst koji će se prikazati kada se Slack poruka pogleda u aplikaciji koja ne podržava privitak poruke (kao u mobilnim obavijestima).

"boja" je boja lijeve obrube poruke.

"izgovor" je tekst koji se prikazuje prije glavnog sadržaja.

"Author_link" je URL hipervezan u ime autora (ako je naveden).

"Mrkdwn_in" je niz naziva svojstava čije se vrijednosti prikazuju formatirane u poruci - na temelju sintakse smanjenja kao što je (*) za podebljano i (_) za kurziv. Tri moguće vrijednosti za "Mrkdwn_in" su "tekst", "predgovor" i "polja"

"Thumb_url" URL minijature.

Evo kako će poruka izgledati do sada.

Sada dodamo polja u polje privitaka, koji će prikazati web-lokacije i kodove ponuda u dva stupca.

"fields": ["title": "Sites", "value": "__ \ N__ "," short ": true, " title ":" Šifra ponude "," vrijednost ":" UI90O22 n- "," short ": true], 

Koristiti \ n da biste dodali prijelom retka i sintaksu da biste dodali hiperveze.

Podcrtavanje se koristi za oblikovanje teksta kurzivom.

kratak je postavljeno na pravi ako se vrijednosti prikazuju jedna uz drugu (kao da je kratka). Zajedno, JSONString će izgledati ovako (držite niz u jednom retku u stvarnom radnom kodu)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["povratna sprega": "Ovaj prilog nije podržan. "," title ":" PONUDA VALENTINA DANA "," boja ":" # 9C1A22 "," pretext ":" Današnji popis izvrsnih ponuda odabranih za vas "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Web-lokacije", "vrijednost": "__ \ N__ "," short ": true, " title ":" Šifra ponude "," vrijednost ":" UI90O22 n- "," short ": true]," mrkdwn_in ": [" text "," fields "]," text ":" Samo kliknite nazive stranica i počnite kupovati. Dobijte * dodatno smanjenje pomoću koda ponude *, ako je dostupno. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Pošaljite zahtjev

Sada kako bi postavili zahtjev za objavu u JavaScriptu, koristite funkciju ispod:

funkcija postMessageToSlack () var xmlhttp = novi XMLHttpRequest (), webhook_url = url-vi-spremljen-od-prije, myJSONStr = json-string-od-gore; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Dodajte ovu funkciju kliku na gumb ili učitavanje stranice vidjeti kako radi.

Konačni izlaz će izgledati ovako: