Come inviare messaggi personalizzati a Slack dalla tua applicazione

Slack è un'app di messaggistica molto utilizzata da molti team. Viene fornito con molti servizi e un'API per gli sviluppatori per integrarlo con le loro applicazioni. Nel post di oggi vedremo come utilizzare uno dei suoi servizi chiamati Incoming Webhooks, per inviare i dati a un intervallo da un'applicazione esterna.

In questo modo possiamo inviare facilmente messaggi a Slack da qualsiasi applicazione che già abbiamo; possiamo inviare segnalazioni, aggiornamenti, notizie, notifiche e altro. Per questo post, ho usato JavaScript nell'esempio. Per iniziare, accedi all'account Slack della tua squadra.

1. Configura l'integrazione

Dovrai prima configurare un'integrazione di webhook in arrivo. Vai a yourteam.slack.com/apps/build/custom-integration e fare clic su Webhook in arrivo, quindi seleziona un canale o utente a cui vuoi inviare i tuoi messaggi (questa selezione può essere sovrascritta in un secondo momento nel codice).

Al termine, visualizzerai la pagina di configurazione dell'integrazione webhook in entrata.

Scorri verso il basso e ci sarà un URL Webhook nel formato https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Salva quell'URL da qualche parte, ne avremo bisogno in seguito. Puoi modificare ulteriormente l'icona e il nome dell'integrazione in questa stessa pagina, ma lo faremo nel codice.

2. Crea il messaggio

Immaginiamo che tu abbia già creato un'app Web che cerca le vendite di San Valentino in siti popolari così come i codici di offerta da utilizzare durante la vendita e, per qualche motivo, vuoi condividere questo risultato con i membri del tuo Slack team.

Tutto quello che dobbiamo fare ora è utilizzare l'URL del webhook creato nel passaggio precedente e inviare una richiesta ad esso dalla tua applicazione con i dati JSON, che elaborerà il messaggio di offerta di vendita.

Mettiamo insieme la stringa JSON che verrà trasformata nel messaggio Slack. Il parametro che trasporta i dati JSON è chiamato payload, quindi la stringa JSON dovrebbe apparire così:

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

icon_url è l'URL dell'immagine che verrà visualizzata come immagine del profilo, è anche possibile utilizzare icon_emoji per esempio, per mostrare un'emoji come immagine del profilo "icon_emoji": ": regalo:". "canale" specifica il canale o il nome utente che vedrà il tuo messaggio. Per username usa la sintassi "@nome utente", per canale "#nome del canale".

Ora per il messaggio reale; puoi aggiungere il "testo" proprietà e scrivi il tuo messaggio come valore e fallo con esso, oppure usa la proprietà chiamata "Attaccamento" per aggiungere un testo formattato, cosa che faremo ora.

Il "Attaccamento" proprietà di carico utile va così:

"allegati": ["fallback": "L'allegato non è supportato.", "titolo": "OFFERTA DEL GIORNO DI SAN VALENTINO", "colore": "# 9C1A22", "pretesto": "L'elenco di oggi delle fantastiche offerte selezionate for you "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" testo "," campi "]," testo ":" Basta fare clic sui nomi dei siti e iniziare a comprare Ottieni * riduzione extra con il codice offerta *, se fornito. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"ricaderci" è il testo alternativo da mostrare quando viene visualizzato il messaggio Slack in un'applicazione che non supporta l'allegato (come nelle notifiche mobili).

"colore" è il colore del bordo sinistro del messaggio.

"pretesto" è il testo che viene mostrato prima del contenuto principale.

"Author_link" è l'URL hyperlinked nel nome dell'autore (se fornito).

"Mrkdwn_in" è un array di nomi di proprietà i cui valori sono mostrati formattati nel messaggio - basati sulla sintassi del markdown come (*) per grassetto e (_) per corsivo. I tre valori possibili per "Mrkdwn_in" sono "testo", "pretesto" e "campi"

"Thumb_url" è l'URL dell'immagine in miniatura.

Ecco come apparirà il messaggio fino ad ora.

Ora aggiungiamo i campi all'array degli allegati, che mostrerà i siti e i codici di offerta in due colonne.

"campi": ["titolo": "Siti", "valore": "__ \ N__ "," short ": true, " title ":" Codice offerta "," valore ":" UI90O22 \ n- "," breve ": true], 

Uso \ n aggiungere interruzione di riga e sintassi aggiungere collegamenti ipertestuali.

Underscore è usato per formattare il testo in corsivo.

corto è impostato per vero se i valori devono essere visualizzati fianco a fianco (come se fosse breve). Messo insieme, il JSONString sarà simile a questo (mantenere la stringa in una sola riga nel codice di lavoro effettivo)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Questo allegato non è supportato. "," title ":" OFFERTA DEL GIORNO DI SAN VALENTINO "," colore ":" # 9C1A22 "," pretesto ":" Elenco di oggi di offerte fantastiche selezionate per te "," nome_autore ":" Preethi "," link_autore ":" https " : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Siti", "valore": "__ \ N__ "," short ": true, " title ":" Codice offerta "," valore ":" UI90O22 \ n- "," breve ": vero]," mrkdwn_in ": [" testo "," campi "]," testo ":" Fai semplicemente clic sui nomi dei siti e inizia a comprare. Ottieni * una riduzione extra con il codice offerta *, se fornito. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Invia la richiesta

Ora per fare la richiesta di post in JavaScript, usa la funzione qui sotto:

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

Aggiungi questa funzione a un clic del pulsante o al caricamento della pagina vederlo funzionare.

L'output finale sarà simile a questo: