Bienvenue dans cet article où nous allons explorer le processus de création d’une application Bolt. Après avoir terminé cette leçon, vous serez en mesure d’accomplir les tâches suivantes :
- Permettre à votre application Bolt d’accéder à Slack.
- Expliquer les fonctions d’écoute.
- Ajouter des écouteurs d’événements à votre application.
- Ajouter de l’interactivité à votre application.
Fusionner le modèle d’application Bolt for JavaScript dans Glitch
Maintenant que votre application est configurée et installée, vous pouvez créer une nouvelle application Bolt en utilisant les données d’authentification de votre application.
Pour faciliter le développement, nous allons utiliser Glitch, un outil qui simplifie la création et l’hébergement d’applications. Un compte Glitch gratuit est parfait pour le travail de développement, mais si votre application est inactive, votre serveur s’arrêtera. Vous devrez donc laisser Glitch ouvert dans votre navigateur pendant que vous développez et testez votre application.
Lorsque votre application est prête pour la production, vous devrez soit l’héberger ailleurs, soit mettre à niveau votre compte Glitch. Vous pouvez trouver une liste complète des fournisseurs d’hébergement recommandés sur le site de l’API.
- Ouvrez votre environnement Glitch.
- Cliquez sur ce lien pour fusionner (ou dupliquer) le projet de démarrage Bolt.
- Une fois la fusion terminée, le projet apparaîtra dans votre liste de projets. Dans notre exemple, le projet s’appelle “actually-triangular-pigeon”.
- Cliquez sur votre projet pour le charger.
- Cliquez ensuite sur app.js.
Dans le fichier app.js, vous verrez que le package @slack/bolt est importé et instancié. En dessous, le serveur d’application est configuré et exécuté pour qu’il puisse recevoir les événements entrants de Slack.
Nous ajouterons plus de code ici plus tard. Tout d’abord, ajoutez les informations d’authentification de votre application Slack. N’oubliez pas de laisser Glitch ouvert pendant ce processus.
Revenez à la page de votre application sur le site de l’API Slack.
Ajout des informations d’authentification de l’application
Obtenez votre clé secrète de signature et votre jeton d’accès OAuth pour les utilisateurs du bot.
- Accédez à la page de configuration de votre application Slack sur le site de l’API Slack.
- Dans la barre latérale, cliquez sur Informations de base.
- Faites défiler jusqu’à la section “Informations d’authentification de l’application”.
- Copiez votre clé secrète de signature et enregistrez-la dans votre éditeur de texte pour l’étape suivante.
- Dans la barre latérale, cliquez sur OAuth & Permissions.
- Cliquez sur Copier pour copier votre jeton d’accès OAuth pour les utilisateurs du bot et enregistrez-le pour l’étape suivante.
Une fois que vous avez enregistré votre clé secrète et votre jeton, revenez à Glitch.
- Naviguez dans votre projet Glitch jusqu’au fichier .env dans la barre latérale gauche.
- Ajoutez votre jeton d’accès OAuth pour les utilisateurs du bot dans le champ “Variable Value” juste à côté de SLACK_BOT_TOKEN.
- Ajoutez votre clé secrète de signature dans le champ “Variable Value” juste à côté de SLACK_SIGNING_SECRET. L’application utilise la clé secrète de signature pour vérifier si les demandes entrantes proviennent de Slack. Bolt effectue automatiquement la vérification lorsque la clé secrète de signature est passée au constructeur de l’application.
Si vous cliquez sur Logs dans le navigateur de fichiers Glitch, vous devriez voir un message indiquant que votre application Bolt est en cours d’exécution !
Découverte des fonctions d’écoute
Les applications Slack reçoivent et répondent généralement à une ou plusieurs demandes de Slack. Pour chaque type de demande entrante de Slack, il existe une fonction d’écoute associée qui gère et répond à la demande.
Voici un sous-ensemble des fonctions d’écoute que les applications Bolt peuvent utiliser.
La liste complète se trouve dans la documentation de Bolt. Maintenant, nous allons configurer votre application pour surveiller et répondre aux événements, interactions et activités !
Souscription aux événements
Pour surveiller les événements de l’API d’événements, votre application doit activer les abonnements aux événements.
Accédez maintenant à la page de votre application Slack sur le site de l’API Slack, si vous n’y êtes pas déjà.
Dans la barre latérale, cliquez sur Abonnements aux événements.
Les abonnements aux événements devraient être activés automatiquement, mais vous pouvez les activer si nécessaire.
Un champ d’URL de demande s’affiche. Les requêtes HTTP pour les événements abonnés par votre application seront envoyées à cette URL de demande. Si vous créez votre application à partir du modèle, votre URL de demande est actuellement https://project-name.glitch.me/slack/events.
Remplacez project-name par le nom de votre propre projet Glitch.
Cliquez d’abord sur Paramètres puis sur Go to project page. L’URL derrière “Live site” contient le nom de votre projet. C’est tout ce qui se trouve entre https:// et .glitch.me.
Revenez à la page “Abonnements aux événements” du site de l’API Slack et entrez l’URL de la demande. Il devrait ressembler à ceci : https://actually-triangular-pigeon.glitch.me/slack/events.
Bolt for JavaScript surveille par défaut toutes les demandes entrantes via /slack/events, c’est pourquoi il est ajouté à la fin de l’URL de la demande.
Cliquez sur Enregistrer les modifications pour sauvegarder votre travail. Ensuite, cliquez sur Souscrire aux événements du bot pour ouvrir la section. Vous verrez un événement nommé message.channels. Cet événement surveille les messages postés dans les channels ouverts où votre application est présente. Maintenant que l’URL de la demande est activée, votre application commencera à recevoir ces événements.
Ajout d’un écouteur d’événements
Les abonnements aux événements utilisent la fonction d’écoute event(), pour laquelle vous trouverez des exemples dans la documentation Bolt. Pour l’instant, nous utiliserons la fonction d’écoute message() pour surveiller et répondre aux messages.
- Revenez à votre projet Glitch.
- Ajoutez le code suivant à votre fichier app.js sous le commentaire // Space for your code.
Glitch enregistre automatiquement votre travail.
Le retour de say() est maintenant un objet contenant un tableau de blocs. Les blocs sont des composants d’un message Slack et peuvent contenir du texte, des images ou des sélections de dates. Dans ce cas, il s’agit d’un bloc de type “section” avec un objet “accessory” de type “button”.
Étant donné que le kit de blocs ne peut pas remplir ou rechercher automatiquement les notifications, vous devez utiliser le champ text pour rendre vos messages plus accessibles. Vous pouvez en savoir plus sur le champ text dans la page de référence chat.postMessage.
Dans l’objet “accessory” de type “button”, il y a un action_id. Il s’agit d’un identifiant unique que vous pouvez transmettre à votre fonction d’écoute pour qu’elle surveille uniquement les événements interactifs associés à cet élément de bloc.
Redémarrez votre application et envoyez un autre message contenant “hello”. Votre application devrait maintenant répondre avec un message contenant un élément de bouton. Cependant, si vous cliquez sur le bouton, rien ne se passe pour le moment !
Ajout d’un écouteur d’actions pour répondre à une interaction de bouton
Maintenant, nous allons ajouter un écouteur d’actions pour répondre avec un message de suivi lorsqu’un bouton est cliqué.
- Revenez à votre projet Glitch.
- Ajoutez l’écouteur d’actions suivant à votre fichier app.js.
Remarquez que ack() est appelé à l’intérieur de la fonction d’écoute. ack() confirme que votre application a reçu l’événement de Slack.
Après avoir redémarré votre application, vous pouvez cliquer à nouveau sur le bouton et votre application répondra avec un nouveau message.
Qu’est-ce qui vient ensuite ?
Vous avez maintenant créé votre première application Bolt for JavaScript qui utilise les concepts fondamentaux de Bolt pour surveiller et répondre à différents événements entrants de Slack !
Avec ces bases, vous pouvez maintenant explorer d’autres fonctionnalités de Bolt et de la plateforme. Vous pourriez par exemple :
- Parcourir le dossier “examples” dans votre projet Glitch. Il y a quelques fichiers avec différents exemples de code que vous pouvez copier et coller dans votre projet.
- Lire la documentation sur Bolt for JavaScript pour en savoir plus sur les fonctionnalités plus avancées et consulter des extraits de code illustrant les possibilités.
- Améliorer le design de votre application avec le Block Kit Builder.
- Explorer d’autres surfaces auxquelles votre application a accès, comme l’onglet “Home” et les fenêtres modales.
C’est à vous de jouer !
