Monitorización automática de sitios web con Headless Browser y Telegram Bot dentro de Latenode

Hola, soy Daniel de Latenode. Si hoy tienes un sitio web, probablemente estés utilizando algún tipo de framework frontend como React. En ese caso, muchos servicios de monitorización podrían no funcionar correctamente con tu sitio web. 

Pero ¡hay una solución! Podemos aprovechar la potencia de Headless Browser en Latenode para crear tú mismo un servicio de este tipo en sólo 5 minutos. Además, añadiremos notificaciones de bots de Telegram utilizando nodos sin código, ¡asegurándonos de estar siempre informados con notificaciones en tiempo real!

En este artículo, te proporcionaremos instrucciones detalladas paso a paso sobre cómo crear un flujo de trabajo de automatización de monitorización de sitios web en latenode.com. Este proceso implica utilizar un Navegador sin Cabeza para comprobar el rendimiento del sitio web y enviarte un mensaje de informe a través de un Bot de Telegram, así como la forma de crear un Bot de Telegram con BotFather.

Es más, hay una plantilla lista para usar de este flujo de trabajo esperándote al final de este artículo, que te permitirá utilizar este escenario en sólo un minuto.

¿Cuál es el plan?

Para hacer un escenario de monitorización web que envíe mensajes en Telegram, necesitas

• Crear un bot de Telegram
• Crea un escenario Latenode

¡Y es incluso más fácil de lo que parece! Deja que te lo enseñe.

Crear un bot de Telegram

Tu relación respetuosa con BotFather es algo clave en este proceso. Pero no te preocupes, no hay nada que pueda causarte problemas. 

Después de iniciar una conversación con BotFather, sigue estos pasos:

1. Introduce /newbot
   Después, se te pedirá que des un nombre a tu bot y que generes un nombre de usuario. Esta es una de esas ofertas que no puedes rechazar...
   ¡Genial! ¡Ya tienes un bot de Telegram y una clave API para él!
2. Introduce /help, y /setjoingroups
   Para activar la posibilidad de invitar a tu bot a chats de grupo.

Ahora, añade tu bot a un chat de grupo o crea uno nuevo con él. Ese será el lugar donde el bot enviará los informes. Necesitarás el ID de este chat más adelante en este flujo de trabajo. Para obtener el ID del chat, tienes que abrirlo utilizando Telegram Web.

Estás preparado para cambiar al escenario de Latenode, ¡hagámoslo, no tardaremos mucho!

Crear un escenario en latenode.com

Entra en latenode.com y crea un nuevo escenario. Aquí tienes el escenario que necesitas:

Este escenario hace que un navegador sin cabeza compruebe una vez, durante un periodo de tiempo determinado, la página de autorización de Latenodeen busca de un texto concreto y, en función de su presencia, envíe mensajes positivos o negativos en Telegram.

Desglose del escenario:

1. Disparadores: Aquí ves un disparador Programar, que te permite activar una comprobación de rendimiento en cualquier periodo de tiempo, y un disparador Webhook, que te proporciona un enlace personalizable para activar la activación en cualquier momento mediante él.
2. Navegador sin cabeza: Aquí ocurre toda la magia. En este caso concreto, HB va a esta página página y busca el texto "crea tu cuenta". Si esta cadena existe, el resultado es verdadero, si no - falso.
3. Nodos telegrama: Nodos sin código que envían el mensaje en función de los resultados de la ejecución del nodo Headless Browser.

Headless Browser - Las conexiones Telegram tienen filtros. El nodo Telegram superior se ejecuta si el resultado del nodo HB es verdadero. El inferior se activa si el resultado es falso.

La misión está clara, ¡acción!

1. Disparadores

Crea un nuevo escenario, luego haz clic en "Añadir nodo", ve a Herramientas, y en la sección de activadores verás Programar. Establece el periodo de activación, selecciona la zona horaria y guarda los cambios.
Después, vuelve a "añadir nodo" y ve a Activador webhook, no tienes que configurarlo, pero puedes personalizar su enlace si quieres. Guarda los cambios.

2. Navegador sin cabeza

Haz clic en "añadir nodo", ve a código y selecciona Navegador sin cabeza. Éste es el código que estoy utilizando:

await page.goto('https://app.latenode.com/auth', { waitUntil: 'networkidle2' });

// The waitForSelector is used here to ensure that the React app has finished rendering.
// This is a simple approach and might need to be adjusted based on the actual app behavior.
await page.waitForSelector('[data-test-id="authEmailInput"]', { timeout: 10000 });

// Check if the specific string exists on the page
const isStringPresent = await page.evaluate(() => {
    return document.body.textContent.includes('Create your account');
});

return { "result": isStringPresent };

Sólo tienes que copiar este código en el campo de entrada y ya está.

Nota:Esto es sólo un ejemplo sencillo. Puedes construir cualquier lógica aquí, Latenode's Headless browser te da una gran variedad de posibilidades con una biblioteca Puppeteer.‍

Si quieres comprobar cómo funciona tu código sin activar todo el escenario, utiliza el botón "ejecutar nodo una vez". Eso guardará automáticamente los cambios y ejecutará sólo este nodo. Eso también hace que los datos de este nodo sean útiles en el siguiente nodo. Hablando de ellos...

3. Nodos y filtros de Telegram

Ahora tienes que añadir nodos de Telegram para que el bot te tenga en cuenta en el rendimiento del sitio web.

Haz clic en "añadir nodo", busca la API del bot de Telegram. Aquí buscas "enviar un mensaje de texto o responder". Añade 2 nodos de este tipo y conéctalos al nodo HB.

Antes de configurar estos nodos, haz clic en la conexión y selecciona "configurar filtro". En esta ventana, nombra el filtro en el campo "etiqueta". En condición, elige el resultado del nodo HB en el widget Ayudante, luego = en COMPARAR y verdadero en PALABRAS CLAVE. Guarda los cambios. 

El nodo conectado se ejecutará si la ejecución de Headless Browser tiene éxito.

Luego haz la negativa. Haz todo lo mismo, pero elige falso en PALABRAS CLAVE.

Ahora los nodos propiamente dichos.

Para ponerlos en marcha:

1. Pon el token de acceso de tu bot desde BotFather en "conexión"
2. Pon el ID de chat de un chat de grupo con tu bot (puedes verlo usando Telegram Web)
3. Escribe el texto del mensaje de un bot.
4. Selecciona el modo de análisis. Cambia el aspecto del mensaje

¡Ya está! ¡Ahora es el momento de guardar el escenario y desplegarlo! Eso hará que el escenario se active automáticamente.
Y como te prometí antes, puedes conseguir este escenario Latenode como plantilla ya preparada aquí.‍

Conclusión‍

Enhorabuena, ¡acabas de convertirte en el estimado arquitecto de tu propio flujo de trabajo de supervisión de sitios web! A partir de ahora, el poder de personalizar y adaptar este escenario a tus necesidades únicas está en tus manos. El único límite a la versatilidad de tu enfoque es tu propia imaginación.

Recuerda que no estás solo en este viaje de automatización de bajo código. Si alguna vez te encuentras luchando por recrear este escenario o si simplemente buscas personas con ideas afines que compartan tu pasión, únete a nosotros en nuestro Canal DiscordAllí encontrarás mi apoyo, el de los desarrolladores de Latenode y el de una creciente comunidad de entusiastas del bajo código. ¡Estamos deseando tenerte con nosotros!