Comment créer un bot Meetup Slack avec Standard Library et Node.js

Dans ce guide, vous apprendrez à configurer une application Slack qui affichera des informations provenant de l’API de Meetup, qui sert à stocker les données stockées de Meetup vers d’autres logiciels d’application.

Meetup est un site Web populaire où des personnes partageant les mêmes intérêts forment des groupes pour organiser des événements dans leurs villes respectives.

Une fois que nous avons envoyé une demande à l’API de Meetup, nous recevons une réponse de Meetup. Nous allons extraire des données spécifiques de la charge JSON et les afficher dans Slack. Nous allons concevoir la pièce jointe de notre application Slack de manière à ce qu’elle affiche le nom de l’événement, sa description, la date et l’heure, son emplacement, etc.

Comment ça marche:

Lorsque vous soumettez / nextmeetup 94709 & javascript (ou n’importe quel code postal et sujet d’intérêt) dans la boîte de message de Slack, un Webhook est déclenché. Le Webhook, créé et hébergé sur Standard Library, adressera d’abord une requête à l’API de Meetup, qui renverra une charge JSON contenant les résultats de la requête.

Le Webhook créera ensuite des messages Slack pour chaque événement et les postera sur un canal spécifié.

Pas besoin d'être submergé! Prenons les choses une étape à la fois.

Ce dont vous aurez besoin:

1x compte mou

1x compte Meetup

1x compte de bibliothèque standard

Étape 1: Configurez votre application Slack

Assurez-vous d'être connecté à Slack et visitez votre tableau de bord Slack Apps à l'adresse https://api.slack.com/apps. Vous verrez un écran qui ressemble à ce qui suit.

Cliquez sur Créer une nouvelle application. Un modal vous sera présenté pour entrer votre nom d’application et l’espace de travail de développement pour lequel vous souhaitez l’ajouter.

À partir de là, cliquez sur Créer une application, vous vous retrouverez sur une page Informations de base.

Faites défiler jusqu'à Afficher les informations. C’est là que vous pouvez donner à votre application Slack un nom, une description et une image si vous le souhaitez.

Laissez la page Informations de base ouverte dans votre navigateur. Nous allons l'utiliser dans une seconde pour récupérer les informations d'identification de votre application Slack afin de connecter cette application à la logique de back-end hébergée sur Standard Library - le code exécutant votre application.

Étape 2: Créer un compte de bibliothèque standard gratuit

Nous hébergerons le code de notre application Slack dans la bibliothèque standard, c'est-à-dire le code qui demandera et recevra des informations spécifiques de l'API Meetups. Alors rendez-vous sur Code on Standard Library et revendiquez votre compte gratuit.

Étape 3: Copier et modifier le modèle de code d'application Slack sur la bibliothèque standard

Une fois que vous êtes connecté ou inscrit, vous arrivez sur «Source de l'API en vedette». Il s'agit de modèles de code d'application disponibles dans Standard Library pour permettre à quiconque de copier et de modifier facilement des applications. Vous allez sélectionner le modèle de code d’application Slack et le modifier pour créer votre API qui alimentera votre application Slack.

Entrez un nom unique pour votre projet API et cliquez sur OK.

Brève explication du modèle de code source Slack App:

Arrêtons-nous un instant pour comprendre ce que nous regardons. La barre latérale gauche est un échafaudage de projet d'API que Standard Library a configuré pour vous permettre de créer des applications Slack.

Le modèle de code pour Slack Apps comporte quatre répertoires. Nous ne travaillerons que dans le répertoire functions qui est équipé de trois autres dossiers.

actions /, commandes / et événements / ainsi qu’un seul fichier __main __. js. Les instructions relatives aux actions Slack, aux commandes de barre oblique et aux événements de votre application se trouvent dans ces dossiers.

Lorsque vous déployez votre API, Standard Library génère automatiquement des points de terminaison HTTPS (URL) pour chaque répertoire. Les URL résultantes nous permettront de configurer des webhooks qui écoutent et répondent aux actions, aux commandes slash et aux événements de Slack.

Les cinq dossiers (y compris le dossier des fonctions sont configurés avec un fichier __main __. Js (point de terminaison principal du répertoire). Ces noeuds finaux __main __. Js distribuent les fonctions appropriées lorsqu'ils reçoivent un message de Slack. Pour ce tutoriel, le fichier __main __. Js sera envoi du noeud final des commandes lorsque nous appelons notre API via notre bot Slack Maintenant, revenons à la configuration de notre bot!

Étape 4: Ajoutez une commande à votre API de bibliothèque standard

Créer une commande supplémentaire

commandes: le répertoire de commandes est le point de terminaison de toutes les commandes slack slash. Créez une commande supplémentaire en plaçant votre curseur sur le répertoire des commandes et en cliquant avec le bouton droit de la souris. Sélectionnez Nouveau fichier et nommez votre fichier de commande slash nextmeetup.js, puis cliquez sur OK.

Nommez votre commande

À ce stade, vous remarquerez une fonction JavaScript «hello world» à l'intérieur (__main __. Js), qui est générée automatiquement.

Remplacez le contenu de nextmeetup.js par ce qui suit:

Une brève explication du code:

Lorsque vous soumettez / nextmeetup via votre application Slack, vous envoyez une demande GET à l’API de Meetup.

Chaque demande adressée à l'API Meetups doit être authentifiée à l'aide d'une clé API. Nous transmettons donc notre clé Meetup du fichier env.json à notre demande. Nous envoyons également notre demande GET avec les deux paramètres, zip et topic.

L'API Meetup retourne un tableau d'objets d'événement Meetup, que nous pouvons afficher à partir des journaux Code on Standard Library en enregistrant notre réponse: console.log (response.data). L'onglet Journaux se trouve sous la section de débogage.

Le fichier response.data est un tableau d'événements correspondant à votre requête. Nous souhaitons créer deux pièces jointes pour chaque événement (un pour l'emplacement et l'autre pour les détails). Nous avons une fonction appelée formatAttachement que nous pouvons appeler sur chacun des événements. Les résultats sont placés dans un tableau appelé pièces jointes qui est envoyé à Slack.

Une fois que vous avez copié et collé le code dans votre fichier nextmeetup.js, enregistrez les modifications et accédez au fichier env.json dans le menu de gauche.

Étape 5: Remplissez votre fichier env.json avec les informations d'identification et les clés de l'application.

Dans env.json, vous remarquerez des variables d’environnement pour votre API. Vous pouvez définir différentes valeurs pour les environnements locaux, de développement et de publication (de production). Ce fichier contiendra toutes vos clés d'accès uniques à votre compte de bibliothèque standard, à votre compte Meetup et aux informations d'identification de l'application Slack.

Nous ne ferons que modifier les variables d’environnement "dev" - assurez-vous de modifier le bon jeu! Notez que les valeurs "dev" s'appliquent à votre environnement de développement et que les valeurs "release" ne doivent être renseignées que lorsque vous êtes prêt à publier votre application. Les variables "locales" peuvent être laissées vides lors du déploiement à partir de Code on Standard Library. rempli lorsque vous utilisez les outils de ligne de commande.

Commençons par renseigner la variable «STDLIB_TOKEN». Placez votre curseur entre les guillemets (voir écran), faites un clic droit et sélectionnez Insérer un jeton de bibliothèque… ou utilisez le raccourci + K.

Sélectionnez votre jeton de bibliothèque

Sélectionnez Library Token pour renseigner l'environnement "dev".

Retournez maintenant à la page Informations de base de votre application Slack et faites défiler jusqu’à Références de l’application:

Copiez votre identifiant client, votre secret client et votre jeton de vérification. Collez-les dans leurs champs respectifs dans la section «dev» du fichier env.json.

Ajoutez le nom que vous avez donné à votre application Slack pour theSLACK_APP_NAME.

Ex: SLACK_APP_NAME: Meetup-bot

La valeur «SLACK_REDIRECT» sera un point de terminaison https généré par la bibliothèque standard une fois que vous aurez déployé votre API. Même si nous ne sommes pas encore déployés, allez-y et remplissez-le maintenant en utilisant cette structure. https: // .api.stdlib.com / @ dev / auth / - avec votre nom d'utilisateur de bibliothèque standard et votre nom d'API. Une fois le code déployé, vous pouvez revenir pour confirmer que vous avez correctement saisi cette valeur.

Mon SLACK_REDIRECT ressemble à ceci: https://Janethl.api.stdlib.com/slack-meetup-bot@dev/auth/ - veillez à ajouter le chemin d'authentification avec une barre oblique à la fin.

Les capacités et les autorisations de votre application Slack seront déjà configurées avec les étendues suivantes:

“SLACK_OAUTH_SCOPE”: bot, commandes, conversation: écriture: bot, conversation: écriture: utilisateur, fichiers: écriture: utilisateur, canaux: historique

La dernière variable à ajouter est votre clé d'API Meetup. Meetup nécessite que chaque demande soit authentifiée avec une clé API.

Étape 6: récupérez votre clé d'API Meetup

Connectez-vous ou créez un compte sur Meetup.com. Rendez-vous sur https://secure.meetup.com/meetup_api/key/ pour récupérer votre clé API unique. Cliquez sur le verrou pour afficher votre clé API et copiez-la.

Retournez à votre fichier env.json sur Code on Standard Library. Ajoutez votre clé Meetup en tant que "clé", exactement comme je l’ai fait dans l’image:

Assurez-vous d’enregistrer les modifications avec «⌘ + s» (ou cliquez sur Enregistrer en bas à droite).

Dans le menu de la barre latérale, écrivez le fichier __main __. Js situé sous le répertoire des événements. Déployez le code de votre application Slack dans la bibliothèque standard en cliquant sur «Exécuter».

  • Peu de temps après le déploiement de votre code, Standard Library génère une URL de point de terminaison de l'API HTTPS où réside votre code. Cette adresse comprend votre .api.stdlib.com suivi du nom que vous avez donné à votre API @ l'environnement: https://janethl.api.stdlib.com/slack-meetup-bot@dev/

Nous avons maintenant l’URL qui nous permettra d’envoyer et de recevoir des messages de notre application Slack à l’API de Meetup. Nous devons maintenant définir notre URL en tant que Webhook dans Slack. Revenons au tableau de bord de l'application Slack.

Étape 7: Créer une nouvelle commande de barre oblique et définir un Webhook

Nous devons maintenant configurer notre application Slack pour répondre à une commande slash (/). Pour cela, nous devons configurer une page Webhook sur Slacks API.

Qu'est-ce qu'un Webhook?

Peut-être pouvons-nous comprendre ce qu'est un crochet Web en le comparant à une API. Les API sont basées sur des requêtes - ce qui signifie qu'elles fonctionnent lorsqu'une requête est émise par une application tierce. Un webhook est basé sur des événements - le code sera exécuté lorsqu'un événement spécifique le déclenche.

Pour définir un Webhook, un fournisseur de services doit autoriser ses consommateurs à enregistrer une URL où le fournisseur peut envoyer des informations lorsqu'un événement se produit. Dans cet exemple, Slack nous permet d’enregistrer notre adresse URL et, une fois qu’elle est enregistrée, une commande slash peut déclencher notre Webhook, qui exécutera le code dans notre URL.

Maintenant que nous comprenons cela, voyons la page API de Slack pour configurer notre Webhook. Rechercher et sélectionner les commandes de barre oblique dans le menu de la barre latérale.

Après avoir cliqué sur Créer une nouvelle commande, il vous sera demandé de saisir les détails de votre commande. Pour cet exemple, utilisez:

Commande: / nextmeetup

RequestURL: https: // .api.stdlib.com / @ dev / orders /: bg

Short Description: récupère les événements Meetup

Indice d'utilisation: [ & ]

Appuyez sur "Enregistrer" une fois terminé.

Étape 8: Activer OAuth et les autorisations

Retournez à votre application Slack, dans le menu de la barre latérale, cliquez sur OAuth et autorisations.

Une fois là-bas, vous voudrez entrer une URL de redirection comme suit: https: // .api.stdlib.com / @ dev / auth /

cliquez sur "Ajouter" et "Enregistrer les URL".

Cette URL de redirection doit correspondre à l'URL définie dans le fichier env.json dans Code on Standard Library.

Étape 9: Ajouter un bot à votre application Slack

Revenez à la page de votre application Slack et cliquez sur Bot Users dans la barre latérale gauche. Cliquez sur Ajouter un utilisateur Bot. Conservez les paramètres par défaut.

Ajouter un utilisateur de bot

La dernière étape consiste à autoriser l'application. Dans votre navigateur, tapez: https: // .api.stdlib.com / @ dev /

Cliquez sur le bouton Ajouter à Slack. Vous serez dirigé vers un autre écran d'autorisation.

Cliquez sur Autoriser. Vous devriez voir un message de réussite!

Étape 10: Testez votre application Meetup Slack

Vous êtes tous fait. Essaye le! Votre application Slack est maintenant disponible pour une utilisation dans l'espace de travail Slack pour lequel vous l'avez autorisée. Votre application Slack devrait répondre à un / nextmeetup <94709> & comme indiqué dans la capture d'écran ci-dessus.

C'est ça et merci!

J'espère que vous avez trouvé ce tutoriel utile. J'aimerais que vous commentiez ici, écrivez-moi à Janeth [at] stdlib [dot] com, ou suivez la bibliothèque standard sur Twitter, @StdLibHQ.

Janeth Ledezma est une avocate des développeurs pour Standard Library et Cal grad - allez-y! Quand elle n’apprend pas l’arabe, ni ne s’entraîne, vous la trouverez en train d’explorer NorCal sur son CBR500R. Suivez son parcours avec Standard Library via Twitter @mss_ledezma.