Bonjour ! Daniel de Latenode à l’appareil. Si vous avez un site web aujourd’hui, vous utilisez probablement un framework frontend comme React. Dans ce cas, de nombreux services de surveillance risquent de ne pas fonctionner correctement avec votre site web.
Mais il existe une solution ! Nous pouvons exploiter la puissance d’un navigateur headless dans Latenode pour créer vous-même un tel service en seulement 5 minutes. De plus, nous ajouterons des notifications via un bot Telegram à l’aide de nœuds no-code, afin de rester informés en temps réel !
Dans cet article, nous vous fournirons des instructions détaillées, étape par étape, pour créer un workflow d’automatisation de surveillance de site web sur latenode.com. Ce processus implique d’utiliser un navigateur headless pour vérifier les performances du site web et vous envoyer un message de rapport via un bot Telegram, ainsi que de créer un bot Telegram avec BotFather.
De plus, un modèle prêt à l’emploi de ce workflow vous attend à la fin de cet article, ce qui vous permettra d’utiliser ce workflow en seulement une minute.
Automatisez la surveillance de votre site web sur Latenode – la meilleure plateforme d’automatisation pour vous
Quel est le plan ?
Pour créer un workflow de surveillance web qui envoie des messages sur Telegram, vous devez :
- Créer un bot Telegram
- Créer un workflow Latenode
Et c’est encore plus simple qu’il n’y paraît ! Laissez-moi vous montrer.
Créer un bot Telegram
Une relation respectueuse avec BotFather est essentielle dans ce processus. Mais ne vous inquiétez pas, rien ne devrait vous poser problème.
Après avoir commencé une conversation avec BotFather, suivez ces étapes :
- Saisissez /newbot. Vous serez ensuite invité à donner un nom à votre bot et à générer un nom d’utilisateur. C’est une offre que vous ne pouvez pas refuser…
Parfait ! Vous avez maintenant un bot Telegram et une clé API ! - Saisissez /help, puis /setjoingroups pour autoriser l’ajout de votre bot aux discussions de groupe.
Maintenant, ajoutez votre bot à une discussion de groupe ou créez-en une nouvelle avec lui. C’est là que le bot enverra les rapports. Vous aurez besoin de l’ID de cette discussion plus tard dans ce workflow. Pour obtenir l’ID de la discussion, vous devez l’ouvrir dans Telegram Web.
Vous êtes prêt à passer au workflow de Latenode. Allons-y, cela ne prendra pas longtemps !
Créer un workflow sur latenode.com
Connectez-vous à latenode.com et créez un nouveau workflow. Voici le workflow dont vous avez besoin :
Ce workflow déclenche un navigateur headless à intervalles définis pour vérifier la présence d’un texte spécifique sur la page d’autorisation de Latenode et, selon sa présence, envoyer des messages positifs ou négatifs dans Telegram.
Détail du workflow :
- Déclencheurs : Vous voyez ici un déclencheur Schedule, qui vous permet d’activer une vérification des performances à n’importe quel intervalle, ainsi qu’un déclencheur Webhook, qui vous fournit un lien personnalisable permettant de déclencher l’activation à tout moment.
- Navigateur headless : Toute la magie se produit ici. Dans ce cas précis, le navigateur headless accède à cette page et recherche le texte « créez votre compte ». Si cette chaîne existe, le résultat est true ; sinon, false.
- Nœuds Telegram : Des nœuds no-code qui envoient le message selon les résultats d’exécution du nœud Navigateur headless.
Les connexions entre le navigateur headless et Telegram disposent de filtres. Le nœud Telegram supérieur est exécuté si le résultat du nœud HB est true. Le nœud inférieur est activé si le résultat est false.
La mission est claire, place à l’action !
1. Déclencheurs
Créez un nouveau workflow, puis cliquez sur « Add node », accédez à Tools et, dans la section des déclencheurs, vous verrez Schedule. Définissez la période d’activation, sélectionnez le fuseau horaire et enregistrez les modifications.
Ensuite, cliquez à nouveau sur « Add node » et choisissez le déclencheur Webhook. Vous n’avez pas besoin de le configurer, mais vous pouvez personnaliser son lien si vous le souhaitez. Enregistrez les modifications.
2. Navigateur headless
Cliquez sur « Add node », accédez à Code et sélectionnez 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 };
Copiez simplement ce code dans le champ de saisie, et c’est tout.
Remarque : il ne s’agit que d’un exemple simple. Vous pouvez créer n’importe quelle logique ici ; le navigateur headless de Latenode vous offre un très large éventail de possibilités grâce à la bibliothèque Puppeteer.
Si vous souhaitez vérifier le fonctionnement de votre code sans activer l’ensemble du workflow, utilisez le bouton « run node once ». Cela enregistrera automatiquement les modifications et exécutera uniquement ce nœud. Les données de ce nœud pourront alors être utilisées dans le nœud suivant. Justement, parlons-en…
3. Nœuds Telegram et filtres
Vous devez maintenant ajouter des nœuds Telegram pour que le bot vous informe des performances du site web.
Cliquez sur « Add node » et recherchez Telegram Bot API. Vous recherchez ici « send a text message or reply ». Ajoutez 2 nœuds de ce type et connectez-les au nœud HB.
Avant de configurer ces nœuds, cliquez sur la connexion et sélectionnez « setup filter ». Dans cette fenêtre, donnez un nom au filtre dans le champ « label ». Dans Condition, choisissez le result du nœud HB dans le widget Helper, puis = dans COMPARE et true dans KEYWORDS. Enregistrez les modifications.
Le nœud connecté sera exécuté si l’exécution du navigateur headless est réussie.
Créez ensuite le filtre négatif. Faites exactement la même chose, mais choisissez false dans KEYWORDS.
Passons maintenant aux nœuds eux-mêmes.
Pour les configurer :
- Saisissez le jeton d’accès de votre bot fourni par BotFather dans « connection »
- Saisissez l’ID de la discussion de groupe avec votre bot (vous pouvez le consulter dans Telegram Web)
- Rédigez le texte du message du bot.
- Sélectionnez le mode d’analyse. Il modifie l’apparence du message
C’est tout ! Il est maintenant temps d’enregistrer le workflow et de le déployer ! Le workflow sera alors automatiquement actif.
Et comme je l’ai promis plus tôt, vous pouvez obtenir ce workflow Latenode sous forme de modèle prêt à l’emploi ici.
Conclusion
Félicitations, vous venez de devenir l’architecte estimé de votre propre workflow de surveillance de site web ! À partir de maintenant, vous avez le pouvoir de personnaliser et d’adapter ce workflow à vos besoins spécifiques. La seule limite à la polyvalence de votre approche est votre imagination.
N’oubliez pas que vous n’êtes pas seul dans votre parcours d’automatisation low-code. Si vous rencontrez des difficultés pour recréer ce workflow ou si vous recherchez simplement des personnes partageant votre passion, rejoignez-nous sur notre canal Discord. Vous y trouverez mon soutien, celui des développeurs de Latenode et celui d’une communauté grandissante de passionnés du low-code. Nous avons hâte de vous accueillir parmi nous !
Automatisez la surveillance de votre site web sur Latenode – la meilleure plateforme d’automatisation pour vous
