¡Hola! Soy Daniel de Latenode. Si hoy tiene un sitio web, probablemente esté utilizando algún tipo de framework de frontend como React. En ese caso, muchos servicios de monitorización podrían no funcionar correctamente con su sitio web.
¡Pero hay una solución! Podemos aprovechar la potencia de un navegador headless en Latenode para crear usted mismo un servicio de este tipo en solo 5 minutos. Además, añadiremos notificaciones de bot de Telegram mediante nodos sin código, para asegurarnos de estar siempre informados con notificaciones en tiempo real.
En este artículo, proporcionaremos una guía detallada paso a paso sobre cómo crear un flujo de automatización para monitorizar sitios web en latenode.com. Este proceso implica utilizar un navegador headless para comprobar el rendimiento del sitio web y enviarle un mensaje de informe a través de un bot de Telegram, además de explicar cómo crear un bot de Telegram con BotFather.
Además, al final de este artículo le espera una plantilla lista para usar de este flujo, que le permitirá utilizarlo en solo un minuto.
Automatice la monitorización de su sitio web en Latenode, la mejor plataforma de automatización para usted
¿Cuál es el plan?
Para crear un flujo de monitorización web que envíe mensajes en Telegram, debe:
- Crear un bot de Telegram
- Crear un flujo de Latenode
¡Y es incluso más fácil de lo que parece! Permítame mostrarle cómo.
Crear un bot de Telegram
Una relación respetuosa con BotFather es fundamental en este proceso. Pero no se preocupe, no hay nada que pueda causarle problemas.
Después de iniciar una conversación con BotFather, siga estos pasos:
- Introduzca /newbot. Después, se le pedirá que asigne un nombre a su bot y genere un nombre de usuario. Es una de esas ofertas que no puede rechazar…
¡Genial! Ahora tiene un bot de Telegram y una clave API para él. - Introduzca /help y /setjoingroups para habilitar la posibilidad de invitar a su bot a chats grupales.
Ahora, añada su bot a un chat grupal o cree uno nuevo con él. Ese será el lugar donde el bot enviará los informes. Más adelante necesitará el ID de este chat en el flujo. Para obtener el ID del chat, debe abrirlo con Telegram Web.
Está listo para pasar al flujo de Latenode. ¡Hagámoslo, no tardará mucho!
Crear un flujo en latenode.com
Inicie sesión en latenode.com y cree un nuevo flujo. Este es el flujo que necesita:
Este flujo activa un navegador headless una vez durante un período determinado para comprobar si hay un texto específico en la página de autorización de Latenode y, dependiendo de si está presente, envía mensajes positivos o negativos en Telegram.
Desglose del flujo:
- Activadores: Aquí puede ver un activador de programación, que le permite activar una comprobación de rendimiento en cualquier intervalo de tiempo, y un activador de webhook, que le proporciona un enlace personalizable para activar el flujo en cualquier momento.
- Navegador headless: Aquí es donde ocurre toda la magia. En este caso concreto, el navegador headless va a esta página y busca el texto “crear su cuenta”. Si esta cadena existe, el resultado es verdadero; de lo contrario, falso.
- Nodos de Telegram: Nodos sin código que envían el mensaje según los resultados de ejecución del nodo de navegador headless.
Las conexiones entre el navegador headless y Telegram tienen filtros. El nodo superior de Telegram se ejecuta si el resultado del nodo de navegador headless es verdadero. El nodo inferior se activa si el resultado es falso.
La misión está clara. ¡A la acción!
1. Activadores
Cree un nuevo flujo, haga clic en “Add node”, vaya a Tools y, en la sección de activadores, verá Schedule. Configure el período de activación, seleccione la zona horaria y guarde los cambios.
Después, seleccione “Add node” una vez más y elija el activador Webhook. No tiene que configurarlo, pero puede personalizar su enlace si lo desea. Guarde los cambios.
2. Navegador headless
Haga clic en “Add node”, vaya a Code y seleccione Headless Browser**. Este es el código que utilizo:**
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 };
Simplemente copie este código en el campo de entrada y listo.
Nota: Este es solo un ejemplo sencillo. Puede crear cualquier lógica aquí; el navegador headless de Latenode le ofrece una enorme variedad de posibilidades con la biblioteca Puppeteer.
Si quiere comprobar cómo funciona su código sin activar todo el flujo, utilice el botón “run node once”. Esto guardará automáticamente los cambios y ejecutará solo este nodo. También hará que los datos de este nodo estén disponibles para el siguiente nodo. Hablando de ellos…
3. Nodos y filtros de Telegram
Ahora debe añadir nodos de Telegram para que el bot le avise sobre el rendimiento del sitio web.
Haga clic en “Add node” y busque Telegram Bot API. Aquí debe buscar “send a text message or reply”. Añada 2 nodos de este tipo y conéctelos al nodo de navegador headless.
Antes de configurar estos nodos, haga clic en la conexión y seleccione “setup filter”. En esta ventana, asigne un nombre al filtro en el campo “label”. En Condition, elija el result del nodo de navegador headless en el widget Helper; después, seleccione = en COMPARE y true en KEYWORDS. Guarde los cambios.
El nodo conectado se ejecutará si la ejecución del navegador headless es correcta.
Después, cree el filtro negativo. Haga lo mismo, pero elija false en KEYWORDS.
Ahora, configure los propios nodos.
Para configurarlos:
- Introduzca el token de acceso de su bot de BotFather en “connection”.
- Introduzca el ID del chat grupal con su bot (puede verlo usando Telegram Web).
- Escriba el texto del mensaje del bot.
- Seleccione el modo de análisis. Cambia el aspecto del mensaje.
¡Eso es todo! Ahora es momento de guardar el flujo e implementarlo. Esto hará que el flujo se active automáticamente.
Y, como prometí antes, puede obtener este flujo de Latenode como una plantilla lista para usar aquí.
Conclusión
¡Enhorabuena, acaba de convertirse en el prestigioso arquitecto de su propio flujo de monitorización de sitios web! A partir de ahora, el poder de personalizar y adaptar este flujo a sus necesidades únicas está en sus manos. El único límite para la versatilidad de su enfoque es su propia imaginación.
Recuerde que no está solo en este camino de automatización low-code. Si en algún momento tiene dificultades para recrear este flujo o simplemente busca personas afines con quienes compartir su pasión, únase a nuestro canal de Discord. Allí podrá encontrar apoyo de mi parte, de los desarrolladores de Latenode y de una comunidad creciente de entusiastas del low-code. ¡Esperamos contar con usted!
Automatice la monitorización de su sitio web en Latenode, la mejor plataforma de automatización para usted
