Surveillance automatique des sites web avec Headless Browser & Telegram Bot inside of Latenode

Salut, c'est Daniel de Latenode... Si tu as un site web aujourd'hui, tu utilises probablement une sorte de framework frontend comme React. Dans ce cas, de nombreux services de surveillance ne pourraient pas fonctionner correctement avec ton site web. 

Mais il y a une solution ! Nous pouvons exploiter la puissance d'un navigateur sans tête dans Latenode pour créer un tel service par toi-même en seulement 5 minutes. De plus, nous ajouterons les notifications du bot Telegram à l'aide de nœuds no-code, ce qui nous permettra d'être toujours informés grâce à des notifications en temps réel !

Dans cet article, nous allons fournir une instruction détaillée étape par étape sur la façon de créer un flux de travail d'automatisation de la surveillance d'un site Web sur latenode.com. Ce processus implique l'utilisation d'un Headless Browser pour vérifier les performances du site web et t'envoyer un message de rapport via un Telegram Bot, ainsi que la création d'un Telegram Bot avec BotFather.

De plus, un modèle prêt à l'emploi de ce flux de travail t'attend à la fin de cet article, ce qui te permettra d'utiliser ce scénario en une minute.

Quel est le plan ?

Pour réaliser un scénario de surveillance web qui envoie des messages dans Telegram, tu dois :

• Créer un robot Telegram
• Crée un scénario Latenode

Et c'est encore plus facile qu'il n'y paraît ! Laisse-moi te montrer.

Créer un bot Telegram

Ta relation respectueuse avec BotFather est un élément clé dans ce processus. Mais ne t'inquiète pas, il n'y a rien qui puisse te causer des ennuis. 

Après avoir entamé une conversation avec BotFather, suis les étapes suivantes :

1. Entre /newbot
   Après cela, on te demandera de donner un nom à ton bot et de générer un nom d'utilisateur. C'est l'une de ces offres que tu ne peux pas refuser...
   Génial ! Tu as maintenant un bot Telegram et une clé API pour celui-ci !
2. Saisis /help, et /setjoingroups
   Pour activer la possibilité d'inviter ton robot à des chats de groupe.

Maintenant, ajoute ton bot à un chat de groupe ou crée-en un nouveau avec lui. Ce sera l'endroit où le bot enverra des rapports. Tu auras besoin de l'identifiant de ce chat plus tard dans ce flux de travail. Pour obtenir l'identifiant du chat, tu dois l'ouvrir à l'aide de Telegram Web.

Tu es prêt à passer au scénario de Latenode, allons-y, ce ne sera pas long !

Créer un scénario sur latenode.com

Connecte-toi à latenode.com et crée un nouveau scénario. Voici un scénario dont tu as besoin :

Ce scénario déclenche une fois un navigateur sans tête pendant une période déterminée pour vérifier la page d'autorisation de Latenode's à la recherche d'un texte spécifique et, en fonction de sa présence, envoyer des messages positifs ou négatifs sur Telegram.

Répartition des scénarios :

1. Déclencheurs : tu vois ici un déclencheur Schedule, qui te permet d'activer un contrôle de performance à n'importe quelle période, et un déclencheur Webhook, qui te fournit un lien personnalisable pour déclencher l'activation à tout moment en l'utilisant.
2. Navigateur sans tête : C'est ici que se produit toute la magie. Dans ce cas particulier, HB va à cette et recherche le texte "create your account". Si cette chaîne existe, le résultat est vrai, sinon - faux.
3. Nœuds Telegram : Les nœuds sans code qui envoient le message en fonction des résultats de l'exécution du nœud Headless Browser.

Headless Browser - Les connexions Telegram ont des filtres. Le nœud Telegram supérieur est exécuté si le résultat du nœud HB est vrai. Celui du bas est activé si le résultat est faux.

La mission est claire, il faut agir !

1. Déclencheurs

Crée un nouveau scénario, puis clique sur "Add node", va dans Tools, et dans la section trigger, tu verras Schedule. Définis la période d'activation, sélectionne le fuseau horaire et enregistre les modifications.
Après cela, "add node" une fois de plus et va pour webhook Trigger, tu n'as pas besoin de le configurer, mais tu peux personnaliser son lien si tu le souhaites. Enregistre les modifications.

2. Navigateur sans tête

Clique sur "ajouter un nœud", va dans le code et sélectionne Headless Browser. Voici le code que j'utilise :

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

Copie simplement ce code dans le champ de saisie et c'est tout.

Note:Ceci n'est qu'un simple exemple. Tu peux construire n'importe quelle logique ici, Latenode's Headless browser te donne une énorme variété de possibilités avec une bibliothèque Puppeteer.‍

Si tu veux vérifier le fonctionnement de ton code sans activer tout le scénario, utilise un bouton "exécuter le nœud une fois". Cela enregistrera automatiquement les modifications et n'exécutera que ce nœud. Cela permet également aux données de ce nœud d'être utiles dans le nœud suivant. En parlant d'eux...

3. Nœuds et filtres Telegram

Tu dois maintenant ajouter des nœuds Telegram pour que le bot te remarque sur les performances du site web.

Clique sur "ajouter un nœud", trouve l'API de telegram bot. Ici, tu cherches "envoyer un message texte ou une réponse". Ajoute 2 nœuds de ce type et connecte-les au nœud HB.

Avant de configurer ces nœuds, clique sur la connexion et sélectionne "setup filter". Dans cette fenêtre, tu donnes un nom au filtre dans le champ "label". Dans condition, choisis le résultat du nœud HB dans le widget Helper, puis = dans COMPARE et true dans KEYWORDS. Sauvegarde les modifications. 

Le nœud connecté sera exécuté si l'exécution du navigateur sans tête est réussie.

Fais ensuite le négatif. Fais la même chose, mais choisis faux dans MOTS-CLÉS.

Maintenant, les nœuds eux-mêmes.

Pour les mettre en place :

1. Mets le jeton d'accès de ton bot provenant de BotFather dans "connection"
2. Mets l'ID du chat d'un groupe de chat avec ton bot (tu peux le voir en utilisant Telegram Web).
3. Rédige le texte du message d'un robot.
4. Sélectionne le mode d'analyse. Il modifie l'apparence du message

Voilà, c'est fait ! Il est maintenant temps d'enregistrer le scénario et de le déployer ! Cela rendra le scénario automatiquement actif.
Et comme je l'ai promis plus tôt, tu peux obtenir ce scénario Latenode en tant que modèle prêt à l'emploi ici.‍

Conclusion‍

Félicitations, tu viens de devenir l'architecte estimé de ton propre flux de travail de surveillance de site Web ! À partir de maintenant, le pouvoir de personnaliser et d'adapter ce scénario à tes besoins uniques est entre tes mains. La seule limite à la polyvalence de ton approche est ta propre imagination.

N'oublie pas que tu n'es pas seul dans cette aventure de l'automatisation à code bas. Si tu as du mal à recréer ce scénario ou si tu cherches simplement des personnes qui partagent ta passion, rejoins-nous sur notre canal DiscordTu y trouveras mon soutien, celui des développeurs de Latenode et celui d'une communauté grandissante de passionnés du low-code. Nous sommes impatients de te compter parmi nous !