Cómo crear un bot de Slack con Zapier y JavaScript para obtener temas populares de Reddit

Reddit es un buen lugar para estar al tanto de las noticias sobre desarrollo web y, si eres como yo, probablemente sigues subreddits como r/node o r/javascript. Hace poco encontré una excelente manera de crear una integración de Reddit con Zapier usando solo mis conocimientos de JavaScript, para compartir las publicaciones populares de Reddit en el canal de mi equipo.

En este artículo aprenderás:

• Cómo crear una integración de bot de Slack.

• Cómo crear flujos de trabajo con activadores y acciones en Zapier para publicar mensajes en un canal de Slack.

• Cómo usar una clave de API de Reddit para acceder a publicaciones con tokens de acceso y actualización nativos de Reddit.

• Cómo acceder a publicaciones de Reddit mediante el endpoint JSON anónimo.

• Cómo escribir código JavaScript (compatible con Node.js versión 10, que ya llegó al fin de su vida útil) para obtener información de Reddit con el cliente HTTP node-fetch.

¿Qué puedes hacer con un bot de Slack?

Este tutorial te enseña a escribir un bot de Slack en JavaScript, pero el amplio ecosistema de API de Zapier te permite conectar muchas otras fuentes de información a la API de bots de Slack. Aunque este tutorial se centra en JavaScript, también puedes escribir una aplicación de bot de Slack con Node.js y los webhooks HTTP de Zapier, si alojas tus aplicaciones de Node.js en la nube.

Crear una integración de Reddit con Zapier para procesar nuevos temas populares

¿Qué es Zapier?

Zapier es una plataforma de automatización que te permite integrarte con muchas otras plataformas para conectarlas y crear un flujo de trabajo. Se usa principalmente para API e integraciones nativas cuando están disponibles en el marketplace de Zapier, pero destaca aún más porque proporciona datos de entrada y salida sin procesar desde los puntos de integración y te permite personalizar el proceso del flujo de trabajo con código.

Para facilitar la integración del bot de Slack, usaremos Zapier, que ya tiene una integración nativa con Slack. Esto significa que no necesitamos alojar nuestro bot en un servidor dedicado ni crear otra integración de bot de Slack por separado.

Como ya tenemos la integración del bot de Slack con Zapier, los siguientes pasos serán:

1. Definir un horario para que se ejecute la integración. Puede ser un horario recurrente en el que se active la tarea de Zapier y comience a procesar.

2. Definir una tarea de código JavaScript personalizada en Zapier para obtener los temas populares que nos interesan desde el endpoint JSON de Reddit.

3. Dar el formato que queramos a los temas populares y enviarlos a un canal de Slack mediante la integración nativa de Slack que Zapier incluye.

En la interfaz de usuario del flujo de trabajo de Zapier, el proceso completo se ve así:

El activador: cada semana en Schedule by Zapier

Empezamos por configurar el horario recurrente para el flujo de trabajo de Zapier. En concreto, elegí ejecutarlo todos los lunes a las 8 a. m. UTC:

¿Cómo automatizar los mensajes de Slack?

En este tutorial de bot de Slack, elegimos un horario oportuno activado por Zapier. Sin embargo, la plataforma de API de Zapier tiene muchos otros activadores que pueden impulsar las automatizaciones de Slack. Algunos ejemplos son las menciones en Twitter, las actualizaciones de Google Sheets, los cambios en eventos de Google Calendar, las actualizaciones de fuentes RSS y otros que puedes conectar a la automatización de bots de Slack en JavaScript. ¡Incluso puedes automatizar las notificaciones de seguridad de Snyk para que tu equipo haga seguimiento de las vulnerabilidades!

Acción: ejecutar JavaScript en Code by Zapier

Ahora que definimos el activador basado en la hora que iniciará el flujo de trabajo, podemos comenzar a crear acciones para realizar algunas tareas. La integración de Zapier nos permite conectar los datos procesados por estas tareas y pasarlos a la siguiente acción de la cadena.

Elige el tipo de acción Run JavaScript in Code by Zapier. En la configuración de Event, selecciona Run JavaScript. La configuración inicial debería verse así:

Luego, expande la configuración Setup up action, donde agregaremos el código JavaScript pertinente que obtiene información del endpoint de la API de Reddit para nuestros temas populares.

Cómo usar una clave de API de Reddit

Hay varias maneras de obtener noticias de Reddit. Veremos dos formas de recibir actualizaciones sobre hilos interesantes de Reddit:

1. Usar una clave de API de Reddit, que requiere registrarse con una cuenta de usuario de Reddit.

2. Usar un endpoint de API de Reddit disponible públicamente.

Si solo necesitas acceso de lectura a subreddits y publicaciones populares, usa el flujo de trabajo más sencillo, que no requiere el flujo de trabajo de la API OAuth de Reddit, y pasa a la segunda parte de este capítulo sobre el acceso a la API de Reddit.

Registrarse para obtener una clave de API de Reddit

Primero, ve a las preferencias de aplicaciones de la API de Reddit y haz clic en el botón Create an app en la parte inferior de la pantalla. Luego, ingresa la información correspondiente al caso de uso de tu API. Deberás establecer el tipo de aplicación como webapp y proporcionar un URI de redirección para procesar los tokens de acceso.

Luego recibirás tu ClientID y ClientSecret, con los que podrás realizar llamadas a la API. Si no sabes cómo consultar la API de Reddit ni completar el flujo de trabajo OAuth de Reddit, revisa otros tutoriales para empezar, como este sobre cómo extraer datos de Reddit.

Es importante que leas las condiciones de acceso a la API de Reddit para familiarizarte con las reglas y condiciones que debes cumplir.

Ejemplo de API de Reddit en JavaScript

Nos centraremos en obtener hilos interesantes de Reddit con JavaScript. Para ello, necesitaremos las credenciales ClientID y ClientSecret mencionadas anteriormente, además del valor refresh_token, que existe si elegiste crear un token de acceso OAuth permanente de Reddit.

A continuación, encontrarás un buen ejemplo de una clave de API de Reddit que consulta publicaciones de subreddits con código JavaScript nativo. Reemplaza el texto ABCD a continuación por las credenciales de Reddit mencionadas anteriormente para que el fragmento de código funcione correctamente:

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};

Este fragmento de código JavaScript para la API de Reddit usa el refresh_token para consultar la API de Reddit y solicitar un access_token. Una vez que obtenemos el token de acceso a la API de Reddit, podemos crear una nueva solicitud HTTP para obtener publicaciones populares de Reddit enviadas al subreddit r/node. Por último, recorremos todos los datos de las publicaciones y creamos una cadena de mensaje que se pasará a la siguiente acción.

Dos observaciones importantes sobre el fragmento de código anterior:

1. Ten en cuenta que la forma correcta y actualizada de consultar los datos de Reddit es usar el parámetro de consulta t, que se utiliza en params2. Sin embargo, algunos tutoriales y guías desactualizados todavía mencionan el uso de time.

2. Otro dato interesante es que, como Zapier nos limita a una versión antigua de node-fetch, que se ejecuta en una versión de Node.js que ya llegó al fin de su vida útil (Node.js v10), puedes usar directamente el objeto URL para realizar solicitudes 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);

Para otras operaciones de la API, puedes consultar la página completa y actualizada de la documentación de la API de Reddit, que incluye todos los endpoints disponibles para cuentas de Reddit, historial, moderación de subreddits y otras funciones.

Consultar información de Reddit con el endpoint JSON público

Antes de continuar con la otra acción de JavaScript en Zapier, veamos rápidamente cómo consultar una API de Reddit sin autenticarse con OAuth ni usar ningún otro tipo de clave de API.

Reddit ofrece la información de los hilos de los subreddits en formato JSON a través del siguiente endpoint, que es público y no requiere autenticación:

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

Incluso puedes solicitar las publicaciones Top de este subreddit y especificar un período agregando los siguientes parámetros de consulta:

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

La respuesta JSON de Reddit será similar a la siguiente:

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}

Dar formato a la respuesta de JavaScript de la acción de Zapier

Independientemente de cómo hayas obtenido y dado formato a los datos JSON de Reddit, tendremos que prepararlos para que pueda usarlos la siguiente integración del bot de Slack. Puedes hacerlo en la acción de JavaScript anterior de Zapier o ejecutarlo como una acción independiente de Zapier para poder reutilizarla si cambia el método de formato de Reddit.

El fragmento de código es bastante sencillo y muestra cómo aceptar datos de entrada en una acción de JavaScript de Zapier mediante la variable inputData y también proporcionarlos como salida:

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

La representación en forma de arreglo no es estrictamente necesaria, pero le permite a Zapier saber que debe repetir varias veces las acciones posteriores, con cada carga útil (o valor de objeto) del arreglo.

La siguiente captura de pantalla sirve como referencia:

Enviar mensaje al canal en Slack

Por fin llegamos al último paso para crear la automatización de Reddit con un bot de Slack: publicar en un canal de Slack el mensaje que procesamos en los pasos anteriores.

Para hacerlo, asegúrate de haber autenticado Zapier como una aplicación de integración general en Slack y de haberle dado permiso para ver tus canales de Slack y realizar otras acciones, como publicar mensajes.

Agrega una nueva acción de Zapier y selecciona Slack en la opción Application. En el campo Event, selecciona Send Channel Message. Luego, ve a la opción Choose Account y, de preferencia, ingresa tu cuenta de Slack para que los mensajes provengan de tu perfil de usuario. Si no, puedes usar la cuenta de integración de Slack como usuario general.

En este punto, debería verse así:

Luego, ve a Set up action e ingresa la siguiente información:

• El canal donde se publicará el mensaje (indicado como la opción Channel en la interfaz de usuario)

• La opción Message Text, que debería tener el campo Message de la acción anterior de Zapier completado de antemano

La configuración debería verse similar a la siguiente:

Por último, puedes iniciar manualmente una prueba de ejecución de este flujo de trabajo de Zapier, que debería verse así:

Después de revisar y probar el flujo de trabajo de Zapier, haz clic en el botón Publish Zap para activar el flujo de trabajo y comenzar la automatización según el horario recurrente que configuramos como activador.

¿Cómo conectar la API de Slack con otras API?

Con Zapier puedes crear API para bots de Slack que hagan mucho más que enviar mensajes a un canal. Aquí tienes algunas ideas para bots de Slack en JavaScript que puedes crear con Zapier: enviar un mensaje de Slack cuando se actualice una fila de Google Sheets, enviar los próximos eventos de Google Calendar a un canal de Slack, compartir nuevas menciones de Twitter en Slack o incluso actualizar tu estado de Slack durante eventos de Google Calendar o según otras actividades que puedas conectar con las API de Zapier.

¡Creaste una integración de Reddit con Zapier!

Hoy aprendimos a crear un bot de Slack que envía automáticamente a un canal un mensaje con las principales noticias populares de Reddit mediante un endpoint JSON de acceso público o una clave de API OAuth de Reddit.

Para terminar, si estás creando una integración de bot de Slack que funciona con código JavaScript, asegúrate de seguir las prácticas de seguridad de JavaScript pertinentes y comprender los riesgos asociados para no poner en peligro tu empresa con problemas de seguridad.