Comment créer un bot Slack avec Zapier et JavaScript pour récupérer les sujets tendance sur Reddit

Reddit est un bon endroit pour suivre l’actualité du développement web et, si vous êtes comme moi, vous suivez probablement des subreddits comme r/node ou r/javascript. J’ai récemment découvert une excellente façon de créer une intégration Reddit avec Zapier en utilisant uniquement mes connaissances en JavaScript : je peux ainsi partager les publications Reddit tendance dans le canal de mon équipe.

Dans cet article, vous apprendrez :

• Comment créer une intégration de bot Slack.

• Comment créer des workflows de déclencheurs et d’actions dans Zapier pour publier des messages dans un canal Slack.

• Comment utiliser une clé API Reddit pour accéder aux publications avec les jetons d’accès et de renouvellement natifs de Reddit.

• Comment accéder aux publications Reddit à l’aide du point de terminaison JSON anonyme.

• Écrire du code JavaScript (compatible avec Node.js version 10, dont le support a pris fin) pour récupérer des informations sur Reddit à l’aide du client HTTP node-fetch.

Que pouvez-vous faire avec un bot Slack ?

Ce tutoriel vous apprend à écrire un bot Slack en JavaScript, mais l’écosystème d’API riche en fonctionnalités de Zapier vous permet de connecter de nombreuses autres sources d’information à l’API du bot Slack. Bien que ce tutoriel soit consacré à JavaScript, vous pouvez également créer une application Slack bot avec Node.js et les webhooks HTTP de Zapier, à condition d’héberger vos applications Node.js dans le cloud.

Créer une intégration Reddit avec Zapier pour traiter les nouveaux sujets tendance

Qu’est-ce que Zapier ?

Zapier est une plateforme d’automatisation qui vous permet d’intégrer de nombreuses autres plateformes afin de les connecter et de créer un workflow. Elle sert principalement pour les API et les intégrations natives disponibles sur la marketplace Zapier, mais elle se distingue aussi par la possibilité d’accéder aux données brutes en entrée et en sortie des points d’intégration, et de personnaliser le workflow à l’aide de code.

Pour faciliter l’intégration du bot Slack, nous allons utiliser Zapier, qui propose déjà sa propre intégration native avec Slack. Nous n’avons donc pas besoin d’héberger notre bot sur un serveur dédié ni de créer une intégration de bot Slack distincte.

Maintenant que l’intégration du bot Slack avec Zapier est en place, voici les étapes suivantes :

1. Définir un calendrier d’exécution de l’intégration. Il peut s’agir d’un calendrier récurrent qui déclenche la tâche Zapier et lance le traitement.

2. Définir une tâche de code JavaScript personnalisée dans Zapier pour récupérer les sujets tendance qui nous intéressent depuis le point de terminaison JSON de Reddit.

3. Mettre en forme les sujets tendance selon nos préférences et les envoyer dans un canal Slack au moyen de l’intégration native Slack intégrée à Zapier.

Dans l’interface du workflow Zapier, le processus complet se présente ainsi :

Le déclencheur : toutes les semaines avec Schedule by Zapier

Commençons par configurer le calendrier récurrent du workflow Zapier. J’ai choisi de l’exécuter tous les lundis à 8 h UTC :

Comment automatiser les messages Slack ?

Dans ce tutoriel sur les bots Slack, nous avons choisi un calendrier précis déclenché par Zapier. Cependant, la plateforme API de Zapier propose de nombreux autres déclencheurs pour automatiser Slack. Par exemple : les mentions sur Twitter, les mises à jour de Google Sheets, les modifications d’événements Google Calendar, les mises à jour de flux RSS, et d’autres encore, que vous pouvez intégrer à votre automatisation Slack en JavaScript. Vous pouvez même automatiser les notifications de sécurité Snyk pour suivre les vulnérabilités de votre équipe !

Action : exécuter du JavaScript avec Code by Zapier

Maintenant que nous avons défini le déclencheur temporel du workflow, nous pouvons créer des actions pour effectuer certaines tâches. L’intégration Zapier nous permet de relier les données traitées par ces tâches et de les transmettre à l’action suivante de la chaîne.

Choisissez le type d’action Run JavaScript in Code by Zapier. Dans la configuration Event, choisissez Run JavaScript. La configuration initiale devrait ressembler à ceci :

Développez ensuite la configuration Setup up action, où nous ajouterons le code JavaScript nécessaire pour récupérer les informations sur les sujets tendance depuis le point de terminaison de l’API Reddit.

Comment utiliser une clé API Reddit

Il existe plusieurs façons de récupérer l’actualité de Reddit. Nous allons présenter deux méthodes pour recevoir des mises à jour sur les fils Reddit qui vous intéressent :

1. Utiliser une clé API Reddit, ce qui nécessite de créer un compte utilisateur Reddit.

2. Utiliser un point de terminaison de l’API Reddit accessible au public.

Si vous avez uniquement besoin d’un accès en lecture aux subreddits et aux publications tendance, utilisez le workflow le plus simple, sans passer par l’API OAuth de Reddit, et rendez-vous à la deuxième partie de ce chapitre sur l’accès à l’API Reddit.

S’inscrire pour obtenir une clé API Reddit

Commencez par accéder aux préférences des applications de l’API Reddit, puis cliquez sur le bouton Create an app en bas de l’écran. Saisissez ensuite les informations correspondant à votre cas d’utilisation de l’API. Vous devez définir le type d’application sur webapp et fournir un URI de redirection pour traiter les jetons d’accès.

Vous recevrez alors votre ClientID et votre ClientSecret, qui vous permettront d’effectuer des appels d’API. Si vous ne savez pas comment interroger l’API Reddit ni suivre le workflow OAuth de Reddit, consultez d’autres tutoriels de prise en main, comme celui sur le scraping de Reddit.

Il est important de lire les conditions d’accès à l’API Reddit afin de connaître les règles et les conditions que vous devez respecter.

Exemple d’utilisation de l’API Reddit avec JavaScript

Nous allons nous concentrer sur la récupération des fils Reddit intéressants avec JavaScript. Pour cela, nous aurons besoin des identifiants ClientID et ClientSecret mentionnés plus haut, ainsi que de la valeur refresh_token, disponible si vous avez choisi de créer un jeton d’accès OAuth Reddit permanent.

Voici un bon exemple d’utilisation d’une clé API Reddit pour interroger les publications d’un subreddit avec du code JavaScript natif. Remplacez le texte ABCD ci-dessous par les identifiants Reddit mentionnés plus haut pour que l’extrait de code fonctionne correctement :

1js
2  // start -- get access token
3   const clientId = ‘ABCD’;
4   const clientSecret = ABCD’;
5
6   const dataSecrets = `${clientId}:${clientSecret}`;
7   const text = Buffer.from(dataSecrets).toString("base64");
8
9   var url = new URL('https://www.reddit.com/api/v1/access_token');
10   var params = {grant_type: 'refresh_token', refresh_token: ‘ABCD'};
11
12   url.search = new URLSearchParams(params).toString();
13
14    const settings = {
15        method: 'POST',
16        headers: {
17            'User-Agent': 'query-api 1.0',
18            'Accept': 'application/json',
19            'Authorization': `Basic ${text}`,
20        },
21        credentials: 'omit'
22    };
23
24    const res = await fetch(url.href, settings);
25    const body = await res.json();
26    const accessToken = body.access_token;
27
28    // -----------------------------------------------------
29    // make reddit api request
30    const params2 = {'limit': 3, 't': 'week'};
31    const url2 = new URL('https://oauth.reddit.com/r/node/top');
32    url2.search = new URLSearchParams(params2).toString();
33
34    const settings2 = {
35        method: 'GET',
36        headers: {
37            'User-Agent': 'query-api 1.0',
38            'Accept': 'application/json',
39            'Authorization': `Bearer ${accessToken}`,
40        },
41        credentials: 'omit'
42    };
43
44    const res2 = await fetch(url2.href, settings2);
45    const body2 = await res2.json();
46
47    let data = [];
48    let message = `Top Node.js posts this week:\n\n`;
49
50    const topPosts = body2.data.children;
51    topPosts.forEach((post) => {
52        data.push({
53          link: post.data.url,
54          redditLink: post.data.permalink,
55          text: post.data.title,
56          score: post.data.score,
57          replies: post.data.num_comments
58        });
59
60        const text = post.data.title;
61        const redditLink = post.data.permalink;
62
63        message = message + `<https://reddit.com${redditLink}|${text}> \n`;
64    });
65
66    return {id: 1, message: message};

Cet extrait de code JavaScript pour l’API Reddit utilise refresh_token pour interroger l’API Reddit et demander un access_token. Une fois le jeton d’accès à l’API Reddit obtenu, nous pouvons créer une nouvelle requête HTTP pour récupérer les publications tendance envoyées au subreddit r/node. Enfin, nous parcourons toutes les données des publications et créons une chaîne de message qui sera transmise à l’action suivante.

Deux points importants à retenir de l’extrait de code précédent :

1. Vous remarquerez que la méthode correcte et à jour pour interroger les données Reddit consiste à utiliser le paramètre de requête t, dans params2. Pourtant, certains tutoriels et guides obsolètes mentionnent encore l’utilisation de time.

2. Autre point intéressant : Zapier nous limitant à une ancienne version de node-fetch, exécutée sur une version de Node.js en fin de vie (Node.js v10), vous pouvez utiliser directement l’objet URL pour effectuer des requêtes HTTP :

   js const url2 = new URL('https://oauth.reddit.com/r/node/top'); const res2 = await fetch(url2, settings2);

1js
2    const url2 = new URL('https://oauth.reddit.com/r/node/top');
3    const res2 = await fetch(url2, settings2);

Pour les autres opérations d’API, consultez la page complète et à jour de la documentation de l’API Reddit, qui répertorie tous les points de terminaison disponibles pour les comptes Reddit, l’historique, la modération des subreddits et d’autres fonctionnalités.

Interroger les informations Reddit avec le point de terminaison JSON public

Avant de passer à l’action JavaScript Zapier suivante, voyons rapidement comment interroger l’API Reddit sans authentification OAuth ni autre type de clé API.

Reddit met à disposition les informations sur les fils de subreddit au format JSON via le point de terminaison suivant, qui est public et ne nécessite aucune authentification :

1sh
2https://www.reddit.com/r/node/top.json

Vous pouvez aussi demander les publications Top de ce subreddit et préciser une période en ajoutant les paramètres de requête suivants :

1sh
2https://www.reddit.com/r/node/top.json?limit=1&t=month

La réponse JSON de Reddit ressemblera à ceci :

1json
2{
3  "kind": "Listing",
4  "data": {
5    "after": "t3_vuyxes",
6    "dist": 1,
7    "modhash": "6v201d03619751a685b19dcf05febbf88ed6d115afa5d16b78",
8    "geo_filter": "",
9    "children": [
10      {
11        "kind": "t3",
12        "data": {
13          "approved_at_utc": null,
14          "subreddit": "node",
15          "selftext": "",
16          "author_fullname": "t2_7eb9a4k5",
17          "saved": false,
18          "mod_reason_title": null,
19          "gilded": 0,
20          "clicked": false,
21          "title": "Deno in 2022",
22          "link_flair_richtext": [],
23          "subreddit_name_prefixed": "r/node",
24          "hidden": false,
25          "pwls": 6,
26          "link_flair_css_class": null,
27          "downs": 0,
28          "top_awarded_type": null,
29          "hide_score": false,
30          "name": "t3_vuyxes",
31          "quarantine": false,
32          "link_flair_text_color": "dark",
33          "upvote_ratio": 0.92,
34          "author_flair_background_color": null,
35          "subreddit_type": "public",
36          "ups": 745,
37          "total_awards_received": 0,
38          "media_embed": {},
39          "author_flair_template_id": null,
40          "is_original_content": false,
41          "user_reports": [],
42          "secure_media": null,
43          "is_reddit_media_domain": true,
44          "is_meta": false,
45          "category": null,
46          "secure_media_embed": {},
47          "link_flair_text": null,
48          "can_mod_post": false,
49          "score": 745,
50          "approved_by": null,
51          "is_created_from_ads_ui": false,
52          "author_premium": false,
53          "thumbnail": "",
54          "edited": false,
55          "author_flair_css_class": null,
56          "author_flair_richtext": [],
57          "gildings": {},
58          "content_categories": null,
59          "is_self": false,
60          "mod_note": null,
61          "created": 1657363081,
62          "link_flair_type": "text",
63          "wls": 6,
64          "removed_by_category": null,
65          "banned_by": null,
66          "author_flair_type": "text",
67          "domain": "i.redd.it",
68          "allow_live_comments": true,
69          "selftext_html": null,
70          "likes": null,
71          "suggested_sort": null,
72          "banned_at_utc": null,
73          "url_overridden_by_dest": "https://i.redd.it/hjv8r84ttia91.jpg",
74          "view_count": null,
75          "archived": false,
76          "no_follow": false,
77          "is_crosspostable": true,
78          "pinned": false,
79          "over_18": false,
80          "all_awardings": [],
81          "awarders": [],
82          "media_only": false,
83          "can_gild": true,
84          "spoiler": false,
85          "locked": false,
86          "author_flair_text": null,
87          "treatment_tags": [],
88          "visited": false,
89          "removed_by": null,
90          "num_reports": null,
91          "distinguished": null,
92          "subreddit_id": "t5_2reca",
93          "author_is_blocked": false,
94          "mod_reason_by": null,
95          "removal_reason": null,
96          "link_flair_background_color": "",
97          "id": "vuyxes",
98          "is_robot_indexable": true,
99          "report_reasons": null,
100          "author": "m_ax__",
101          "discussion_type": null,
102          "num_comments": 184,
103          "send_replies": true,
104          "whitelist_status": "all_ads",
105          "contest_mode": false,
106          "mod_reports": [],
107          "author_patreon_flair": false,
108          "author_flair_text_color": null,
109          "permalink": "/r/node/comments/vuyxes/deno_in_2022/",
110          "parent_whitelist_status": "all_ads",
111          "stickied": false,
112          "url": "https://i.redd.it/hjv8r84ttia91.jpg",
113          "subreddit_subscribers": 215851,
114          "created_utc": 1657363081,
115          "num_crossposts": 0,
116          "media": null,
117          "is_video": false
118        }
119      }
120    ],
121    "before": null
122  }
123}

Mettre en forme la réponse JavaScript de l’action Zapier

Quelle que soit la méthode utilisée pour obtenir et mettre en forme les données JSON de Reddit, nous devons les préparer pour l’intégration du bot Slack suivante. Vous pouvez le faire entièrement dans l’action JavaScript Zapier précédente ou créer une action Zapier dédiée, afin de pouvoir la réutiliser si la méthode de mise en forme des données Reddit change.

Cet extrait de code est assez simple : il montre comment accepter une entrée dans une action JavaScript Zapier à l’aide de la variable inputData et la fournir également en sortie :

1js
2const slackMessage = inputData.message
3output = [{id: 123, message: slackMessage}];

La représentation sous forme de tableau n’est pas strictement nécessaire, mais elle permet à Zapier de savoir qu’il doit répéter plusieurs fois les actions suivantes, en utilisant chaque charge utile (ou valeur d’objet) du tableau.

Voici une capture d’écran à titre de référence :

Envoyer un message dans un canal Slack

Nous voici à la dernière étape de la création de l’automatisation Reddit avec un bot Slack : publier dans un canal Slack le message traité lors des étapes précédentes.

Pour ce faire, assurez-vous d’avoir authentifié Zapier en tant qu’application d’intégration générale dans Slack et de lui avoir accordé l’accès à la liste de vos canaux Slack ainsi que les autres autorisations nécessaires, comme la publication de messages.

Ajoutez une nouvelle action Zapier et choisissez Slack comme Application. Dans le champ Event, choisissez Send Channel Message. Ensuite, sélectionnez Choose Account et, idéalement, connectez votre compte Slack pour que les messages soient envoyés depuis votre profil. Vous pouvez aussi utiliser le compte d’intégration Slack comme utilisateur générique.

À ce stade, l’écran devrait ressembler à ceci :

Passez ensuite à Set up action et saisissez les informations suivantes :

• Le canal où publier le message (indiqué par l’option Channel dans l’interface)

• L’option Message Text, qui devrait être préremplie avec le champ Message de l’action Zapier précédente

La configuration devrait ressembler à ceci :

Enfin, vous pouvez lancer un test manuel de ce workflow Zapier. Le résultat devrait ressembler à ceci :

Après avoir vérifié et testé le workflow Zapier, cliquez sur le bouton Publish Zap pour activer le workflow et lancer l’automatisation selon le calendrier récurrent défini comme déclencheur.

Comment connecter l’API Slack à d’autres API ?

Avec Zapier, vous pouvez créer des API de bot Slack qui vont au-delà de l’envoi de messages dans un canal. Voici quelques idées de projets JavaScript pour un bot Slack avec Zapier : envoyer un message Slack lorsqu’une ligne Google Sheets est mise à jour, publier dans un canal Slack les événements Google Calendar à venir, partager les nouvelles mentions Twitter dans Slack, ou simplement mettre à jour votre statut Slack pendant vos événements Google Calendar ou selon d’autres activités que vous pouvez connecter aux API Zapier.

Vous avez créé une intégration Reddit avec Zapier !

Aujourd’hui, nous avons appris à créer un bot Slack qui publie automatiquement dans un canal les actualités Reddit les plus tendance, à partir d’un point de terminaison JSON accessible au public ou d’une clé API OAuth Reddit.

Pour conclure, si vous créez une intégration de bot Slack reposant sur du code JavaScript, veillez à suivre les bonnes pratiques de sécurité JavaScript et à comprendre les risques associés, afin de ne pas exposer votre entreprise à des problèmes de sécurité.