Como enviar mensagens personalizadas para o Slack a partir do seu aplicativo

Slack é um aplicativo de mensagens popular usado por muitas equipes. Ele vem com muitos serviços e uma API para os desenvolvedores integrarem com seus aplicativos. Na postagem de hoje, veremos como usar um de seus serviços, chamado Incoming Webhooks, para enviar dados para o slack de um aplicativo externo.

Desta forma podemos facilmente enviar mensagens para o Slack de qualquer aplicativo que já tenhamos; Podemos enviar relatórios, atualizações, notícias, notificações e muito mais. Para este post, usei JavaScript no exemplo. Para começar, faça login na conta do Slack da sua equipe.

1. Configure a Integração

Primeiro você terá que configurar uma integração de webhook de entrada. Vamos para yourteam.slack.com/apps/build/custom-integration e clique em Webhooks recebidos, em seguida, selecione um canal ou usuário para o qual você deseja postar suas mensagens (essa seleção pode ser substituída posteriormente no código).

Uma vez feito, você verá a página de configuração da integração do webhook de entrada.

Role para baixo e haverá um URL do Webhook no formato https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Salvar esse URL em algum lugar, precisaremos mais tarde. Você pode alterar ainda mais o ícone e o nome da integração nesta página, mas faremos isso no código.

2. Crie a mensagem

Vamos imaginar que você já criou um aplicativo da Web que busca as vendas do Dia dos Namorados em sites populares, bem como os códigos de oferta para uso durante a venda e, por algum motivo, deseja compartilhar esse resultado com os membros da equipe do Slack..

Tudo o que temos a fazer agora é usar a URL do webhook criada na etapa anterior e postar uma solicitação a partir do seu aplicativo com dados JSON, o que criará a mensagem de oferta de venda.

Primeiro, vamos unir a string JSON que será transformada na mensagem Slack. O parâmetro que transporta os dados JSON é chamado de payload, portanto, a sequência JSON deve ter esta aparência:

var myJSONStr = 'payload = "nome de usuário": "SALE BOT", "icon_url": "example.com/img/icon.jpg", "canal": "#geral"' 

icon_url é o URL para a imagem que aparecerá como a foto do perfil, você também pode usar icon_emoji para exibir um emoji como a foto do perfil, por exemplo, "icon_emoji": ": presente:". "canal" especifica o canal ou o nome de usuário que verá sua mensagem. Para username use a sintaxe "@nome de usuário", para canal "#nome do canal".

Agora para a mensagem atual; você pode adicionar o "texto" propriedade e escrever sua mensagem como seu valor e ser feito com ele, ou usar a propriedade chamada "anexo" para adicionar texto ricamente formatado, que é o que faremos agora.

o "anexo" propriedade de carga útil vai assim:

"anexos": ["fallback": "O anexo não é suportado.", "título": "OFERTA DIA DOS NAMORADOS", "cor": "# 9C1A22", "pretexto": "Lista de ofertas incríveis lançadas hoje para você "," author_name ":" Preethi "," author_link ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" texto "," campos "]," texto ":" Basta clicar nos nomes dos sites e começar a comprar. Obtenha * redução adicional com o código da oferta *, se fornecido. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"cair pra trás" é o texto alternativo a ser exibido quando a mensagem Slack é visualizada em um aplicativo que não suporta anexos de mensagens (como em notificações móveis).

"cor" é a cor da borda esquerda da mensagem.

"pretexto" é o texto mostrado antes do conteúdo principal.

"author_link" é o URL com hiperlink no nome do autor (se fornecido).

"mrkdwn_in" é uma matriz de nomes de propriedades cujos valores são mostrados formatados na mensagem - com base na sintaxe de marcação como (*) para negrito e (_) para itálico. Os três valores possíveis para "mrkdwn_in" são "texto", "pretexto" e "campos"

"thumb_url" é o URL da imagem em miniatura.

Veja como a mensagem será vista até agora.

Agora vamos adicionar os campos à matriz de anexos, que exibirá os sites e códigos de oferta em duas colunas.

"campos": ["title": "Sites", "valor": "__ \ n__ "," short ": true, " title ":" Código de Oferta "," value ":" UI90O22 \ n- "," short ": true], 

Usar \ n para adicionar quebra de linha e a sintaxe para adicionar hiperlinks.

O sublinhado é usado para formatar texto em itálico.

baixo está configurado para verdade se os valores devem ser exibidos lado a lado (como se fosse curto). Juntos, o JSONString ficará assim (mantenha a string em uma única linha no código de trabalho real)

var myJSONStr = 'payload = "nome de usuário": "BOT DE VENDA", "icon_url": "example.com/img/icon.jpg", "attachments": ["fallback": "Este anexo não é suportado. "," title ":" OFERTA DIA DOS NAMORADOS "," cor ":" # 9C1A22 "," pretexto ":" Lista de ofertas impressionantes de hoje escolhidas para você "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," campos ": [" title " : "Sites", "valor": "__ \ n__ "," curto ": verdadeiro, " título ":" Código de oferta "," valor ":" UI90O22 \ n- "," curto ": verdadeiro]," mrkdwn_in ": [" texto "," campos "]," text ":" Basta clicar nos nomes dos sites e começar a comprar. Obtenha * redução adicional com o código da oferta *, se fornecido. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Postar o pedido

Agora, para fazer o pedido de postagem em JavaScript, use a função abaixo:

função postMessageToSlack () var xmlhttp = novo XMLHttpRequest (), webhook_url = url-você-salvo-de-antes, myJSONStr = json-string-de-acima; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'aplicativo / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Adicione esta função a um clique de botão ou a um carregamento de página para vê-lo funcionando.

O resultado final será algo como isto: