Comment envoyer des messages personnalisés à Slack depuis votre application

Slack est une application de messagerie populaire utilisée par de nombreuses équipes. Il est livré avec de nombreux services et une API pour que les développeurs l'intègrent à leurs applications. Dans le post d'aujourd'hui, nous verrons comment utiliser l'un de ses services, appelé Incoming Webhooks, pour envoyer des données au jeu à partir d'une application externe..

De cette façon nous pouvons envoyer facilement des messages à Slack depuis n'importe quelle application que nous avons déjà; nous pouvons envoyer des rapports, des mises à jour, des nouvelles, des notifications et plus encore. Pour cet article, j'ai utilisé JavaScript dans l'exemple. Pour commencer, connectez-vous au compte Slack de votre équipe.

1. Configurer l'intégration

Vous devrez d'abord configurer une intégration Webhook entrante. Aller à yourteam.slack.com/apps/build/custom-integration et cliquez sur Webhooks entrants, puis sélectionnez le canal ou l'utilisateur auquel vous souhaitez envoyer vos messages (cette sélection peut être annulée ultérieurement dans le code).

Une fois cela fait, vous verrez la page de configuration de votre intégration Webhook entrante.

Faites défiler vers le bas et il y aura une URL Webhook au format https://hooks.slack.com/services/TXXXXXXXX/BXXXXXXXX/token. Enregistrez cette URL quelque part, nous en aurons besoin plus tard. Vous pouvez encore changer l'icône et le nom de l'intégration dans cette page elle-même, mais nous le ferons dans le code.

2. Créez le message

Imaginons que vous ayez déjà créé une application Web qui recherche les ventes de la Saint-Valentin sur des sites populaires, ainsi que les codes d'offre à utiliser lors de la vente. Pour une raison quelconque, vous souhaitez partager ce résultat avec les membres de votre équipe Slack..

Il ne nous reste plus qu'à utiliser l'URL webhook créée à l'étape précédente et à lui envoyer une demande à partir de votre application avec des données JSON, ce qui concoctera le message d'offre de vente..

Commençons par assembler la chaîne JSON qui sera transformée en message Slack. Le paramètre portant les données JSON est appelé charge utile. Par conséquent, la chaîne JSON doit ressembler à ceci:

var myJSONStr = 'payload = "nom d'utilisateur": "BOT DE VENTE", "icon_url": "example.com/img/icon.jpg", "channel": "#general" 

icon_url est l'URL de l'image qui apparaîtra comme image de profil, vous pouvez également utiliser icon_emoji pour afficher un emoji comme image de profil à la place, par exemple "icon_emoji": ": cadeau:". "canal" spécifie le canal ou le nom d'utilisateur qui verra votre message. Pour le nom d'utilisateur, utilisez la syntaxe "@Nom d'utilisateur", pour canal "#nom du canal".

Maintenant pour le message réel; vous pouvez soit ajouter le "texte" propriété et écrivez votre message comme valeur et finissez-en, ou utilisez la propriété appelée "attachement" d'ajouter du texte richement formaté, c'est ce que nous allons faire maintenant.

le "attachement" propriété de charge utile Va comme ça:

"pièces jointes": ["fallback": "La pièce jointe n'est pas prise en charge.", "titre": "OFFRE DE LA VALENTINE", "couleur": "# 9C1A22", "prétexte": "Liste des offres exceptionnelles sélectionnées aujourd'hui pour vous "," nom_auteur ":" Preethi "," lien_auteur ":" https://www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/ uploads / author / preethi.jpg "," mrkdwn_in ": [" text "," fields "]," text ":" Cliquez simplement sur les noms des sites et commencez à acheter. Bénéficiez d'une * réduction supplémentaire avec le code promo *, le cas échéant. "," thumb_url ":" http://example.com/thumbnail.jpg "]

"se retirer" est le texte alternatif à afficher lorsque le message Slack est affiché dans une application qui ne prend pas en charge la pièce jointe (comme dans les notifications mobiles).

"Couleur" est la couleur de bordure gauche du message.

"prétexte" est le texte affiché avant le contenu principal.

"author_link" est l'URL hyperlien dans le nom de l'auteur (si fourni).

"mrkdwn_in" est un tableau de noms de propriétés dont les valeurs sont présentées formatées dans le message - basée sur une syntaxe de démarquage telle que (*) pour gras et (_) pour italique. Les trois valeurs possibles pour "mrkdwn_in" sont "texte", "prétexte" et "champs"

"thumb_url" est l'URL de la vignette.

Voici à quoi ressemblera le message jusqu'à présent.

Ajoutons maintenant les champs au tableau de pièces jointes, ce qui affichera les sites et les codes d’offre sur deux colonnes.

"champs": ["titre": "Sites", "valeur": "__ \ n__ "," short ": true, " titre ":" Code d'offre "," valeur ":" UI90O22 \ n- "," short ": true], 

Utilisation \ n ajouter un saut de ligne et la syntaxe ajouter des hyperliens.

Le trait de soulignement est utilisé pour formater le texte en italique.

court est réglé sur vrai si les valeurs doivent être affichées côte à côte (comme si elles sont courtes). Mis ensemble, le JSONString ressemblera à ceci (conservez la chaîne dans une seule ligne dans le code de travail)

var myJSONStr = 'payload = "nom d'utilisateur": "BOTTE DE VENTE", "icon_url": "example.com/img/icon.jpg", "pièces jointes": ["fallback": "Cette pièce jointe n'est pas prise en charge. "," title ":" OFFRE DE LA VALENTINE "," color ":" # 9C1A22 "," pretext ":" Liste des offres exceptionnelles sélectionnées pour vous "," author_name ":" Preethi "," author_link ":" https : //www.hongkiat.com/blog/author/preethi/ "," author_icon ":" https://assets.hongkiat.com/uploads/author/preethi.jpg "," fields ": [" title " : "Sites", "valeur": "__ \ n__ "," short ": true, " titre ":" Code d'offre "," valeur ":" UI90O22 \ n- "," short ": true]," mrkdwn_in ": [" texte "," champs "]," text ":" Cliquez simplement sur les noms de sites et commencez à acheter. Obtenez une * réduction supplémentaire sur le code d'offre *, le cas échéant. "," Thumb_url ":" http://example.com/thumbnail.jpg "] '; 

3. Poster la demande

Maintenant, pour faire la demande de publication en JavaScript, utilisez la fonction ci-dessous:

fonction postMessageToSlack () var xmlhttp = new XMLHttpRequest (), webhook_url = url -vous-sauvé-de-avant, myJSONStr = json-string-de-dessus; xmlhttp.open ('POST', webhook_url, false); xmlhttp.setRequestHeader ('Content-Type', 'application / x-www-form-urlencoded'); xmlhttp.send (myJSONStr);  

Ajouter cette fonction à un clic de bouton ou à un chargement de page pour le voir fonctionner.

La sortie finale ressemblera à ceci: