Cómo enviar mensajes personalizados a Slack desde su aplicación

Slack es una aplicación de mensajería popular utilizada por muchos equipos. Viene con una gran cantidad de servicios y una API para que los desarrolladores la integren con sus aplicaciones. En la publicación de hoy, veremos cómo usar uno de sus servicios llamados Inhorte Webhooks, para enviar datos a una aplicación externa..

De esta manera podemos Envía fácilmente mensajes a Slack desde cualquier aplicación que ya tengamos; Podemos enviar informes, actualizaciones, noticias, notificaciones y más. Para esta publicación, he usado JavaScript en el ejemplo. Para comenzar, inicia sesión en la cuenta de Slack de tu equipo..

1. Configurar la integración.

Primero tendrás que configurar una integración de webhook entrante. Ir yourteam.slack.com/apps/build/custom-integration y haga clic en Webhooks entrantes, luego seleccione el canal o usuario al que desea publicar sus mensajes (esta selección se puede anular más adelante en el código).

Una vez hecho esto, verás la página de configuración de la integración de webhook entrante.

Desplácese hacia abajo y habrá una URL de Webhook en el formato https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Guarda esa URL en algún lugar, la necesitaremos más tarde. Puede cambiar aún más el icono y el nombre de la integración en esta página, pero lo haremos en el código.

2. Crea el mensaje

Imaginemos que ya ha creado una aplicación web que busca las ventas del Día de San Valentín en sitios populares, así como los códigos de oferta para usar durante la venta y, por algún motivo, desea compartir este resultado con los miembros de su equipo Slack.

Todo lo que tenemos que hacer ahora es usar la URL de webhook creada en el paso anterior y enviar una solicitud desde su aplicación con datos JSON, que confeccionarán el mensaje de oferta de venta..

Primero armemos la cadena JSON que se convertirá en el mensaje Slack. El parámetro que lleva los datos JSON se llama carga útil, por lo tanto, la cadena JSON debería tener este aspecto:

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

icon_url es la URL de la imagen que se mostrará como la imagen de perfil, también puede usar icon_emoji para mostrar un emoji como la imagen de perfil en su lugar, por ejemplo "icon_emoji": ": regalo:". "canal" Especifica el canal o nombre de usuario que verá tu mensaje. Para nombre de usuario use la sintaxis "@nombre de usuario", para canal "#Nombre del Canal".

Ahora para el mensaje real; usted puede agregar el "texto" y escriba su mensaje como su valor y termine con él, o use la propiedad llamada "adjunto archivo" para agregar texto con formato rico, que es lo que haremos ahora.

los "adjunto archivo" propiedad de carga útil va así:

"attachments": ["fallback": "The attachement no es compatible.", "title": "VALENTINE'S DAY OFFER", "color": "# 9C1A22", "pretexto": "La lista de ofertas asombrosas de hoy se ha seleccionado para usted "," 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 ":" Simplemente haga clic en los nombres del sitio y comience a comprar. Obtenga * reducción adicional con el código de oferta *, si se proporciona. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"retroceder" es el texto alternativo que se muestra cuando el mensaje Slack se ve en una aplicación que no admite archivos adjuntos (como en las notificaciones móviles).

"color" Es el color del borde izquierdo del mensaje..

"pretexto" Es el texto que se muestra antes del contenido principal..

"enlace_ autor" es la URL con hipervínculo en el nombre del autor (si se proporciona).

"mrkdwn_in" es una matriz de nombres de propiedades cuyos valores se muestran formateados en el mensaje, según la sintaxis de reducción de marca como (*) para negrita y (_) para cursiva. Los tres valores posibles para "mrkdwn_in" son "texto", "pretexto" y "campos"

"thumb_url" es la URL de la imagen en miniatura.

Así es como se verá el mensaje hasta ahora.

Ahora agreguemos los campos a la matriz de archivos adjuntos, que mostrarán los sitios y los códigos de oferta en dos columnas.

"fields": ["title": "Sites", "value": "__\norte__ "," short ": true, " title ":" Código de oferta "," value ":" UI90O22 \ n- "," short ": true], 

Utilizar \norte Para agregar saltos de línea y la sintaxis para agregar hipervínculos.

El guión bajo se usa para dar formato al texto en cursiva.

corto se establece en cierto si los valores deben mostrarse uno al lado del otro (como si fuera corto). En conjunto, el JSONString se verá así (mantenga la cadena en una sola línea en el código de trabajo real)

var myJSONStr = 'payload = "username": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Este adjunto no es compatible. "," título ":" OFERTA DEL DÍA DE SAN VALENTÍN "," color ":" # 9C1A22 "," pretexto ":" La lista de hoy de las increíbles ofertas seleccionadas para ti "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Sitios", "valor": "__\norte__ "," short ": true, " title ":" Código de oferta "," value ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" text "," fields "]," texto ":" Simplemente haga clic en los nombres del sitio y comience a comprar. Obtenga * reducción adicional con el código de oferta *, si se proporciona. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Publicar la solicitud

Ahora para realizar la solicitud de publicación en JavaScript, use la siguiente función:

función postMessageToSlack () var xmlhttp = nuevo 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);  

Añadir esta función a un clic de botón o carga de página para verlo funcionar.

La salida final se verá así: