Hallo! Hier ist Daniel von Latenode. Wenn Sie heute eine Website haben, nutzen Sie wahrscheinlich ein Frontend-Framework wie React. In diesem Fall funktionieren viele Monitoring-Dienste möglicherweise nicht korrekt mit Ihrer Website.
Aber es gibt eine Lösung! Mit der Leistungsfähigkeit eines Headless Browsers in Latenode können Sie in nur 5 Minuten selbst einen solchen Dienst erstellen. Darüber hinaus fügen wir Telegram-Bot-Benachrichtigungen mithilfe von No-Code-Nodes hinzu, damit wir jederzeit mit Echtzeitbenachrichtigungen informiert sind!
In diesem Artikel geben wir Ihnen eine detaillierte Schritt-für-Schritt-Anleitung zum Erstellen eines Automatisierungs-Workflows zur Website-Überwachung auf latenode.com. Dabei verwenden Sie einen Headless Browser, um die Leistung der Website zu prüfen, und erhalten einen Bericht per Telegram Bot. Außerdem erfahren Sie, wie Sie mit BotFather einen Telegram Bot erstellen.
Darüber hinaus wartet am Ende dieses Artikels eine einsatzbereite Vorlage dieses Workflows auf Sie, mit der Sie diesen Workflow in nur einer Minute nutzen können.
Automatisieren Sie Ihre Website-Überwachung auf Latenode – der besten Automatisierungsplattform für Sie
Was ist der Plan?
Um einen Website-Monitoring-Workflow zu erstellen, der Nachrichten in Telegram sendet, müssen Sie:
- Einen Telegram Bot erstellen
- Einen Latenode-Workflow erstellen
Und es ist sogar einfacher, als es aussieht! Ich zeige Ihnen, wie es geht.
Einen Telegram Bot erstellen
Eine gute Beziehung zu BotFather ist in diesem Prozess entscheidend. Aber keine Sorge, es gibt nichts, was Ihnen Schwierigkeiten bereiten könnte.
Nachdem Sie eine Unterhaltung mit BotFather gestartet haben, folgen Sie diesen Schritten:
- Geben Sie /newbot ein. Anschließend werden Sie aufgefordert, Ihrem Bot einen Namen zu geben und einen Benutzernamen zu erstellen. Dieses Angebot können Sie nicht ablehnen…
Großartig! Jetzt haben Sie einen Telegram Bot und einen API-Schlüssel dafür! - Geben Sie /help und /setjoingroups ein, um die Möglichkeit zu aktivieren, Ihren Bot zu Gruppenchats hinzuzufügen.
Jetzt fügen Sie Ihren Bot zu einem Gruppenchat hinzu oder erstellen Sie einen neuen Gruppenchat mit ihm. Dort wird der Bot Berichte senden. Sie benötigen die ID dieses Chats später im Workflow. Um die Chat-ID zu erhalten, müssen Sie ihn über Telegram Web öffnen.
Sie sind bereit, zu Latenodes Workflow zu wechseln. Los geht's, es dauert nicht lange!
Einen Workflow auf latenode.com erstellen
Melden Sie sich bei latenode.com an und erstellen Sie einen neuen Workflow. Hier ist der Workflow, den Sie benötigen:
Dieser Workflow löst einmal innerhalb eines festgelegten Zeitraums einen Headless Browser aus, um Latenodes Autorisierungsseite auf einen bestimmten Text zu prüfen und abhängig von dessen Vorhandensein positive oder negative Nachrichten in Telegram zu senden.
Workflow-Aufschlüsselung:
- Trigger: Hier sehen Sie einen Schedule-Trigger, mit dem Sie eine Leistungsprüfung in jedem gewünschten Intervall aktivieren können, sowie einen Webhook-Trigger, der Ihnen einen anpassbaren Link bereitstellt, um die Aktivierung jederzeit darüber auszulösen.
- Headless Browser: Hier passiert die ganze Magie. In diesem Fall ruft der HB diese Seite auf und sucht nach dem Text „Konto erstellen“. Wenn diese Zeichenfolge vorhanden ist, lautet das Ergebnis „true“, andernfalls „false“.
- Telegram-Nodes: No-Code-Nodes, die abhängig von den Ausführungsergebnissen des Headless-Browser-Nodes eine Nachricht senden.
Headless-Browser-Telegram-Verbindungen verfügen über Filter. Der obere Telegram-Node wird ausgeführt, wenn das Ergebnis des HB-Nodes „true“ ist. Der untere wird aktiviert, wenn das Ergebnis „false“ ist.
Die Aufgabe ist klar – los geht's!
1. Trigger
Erstellen Sie einen neuen Workflow, klicken Sie dann auf „Add node“, gehen Sie zu Tools und wählen Sie im Trigger-Bereich Schedule aus. Legen Sie das Aktivierungsintervall fest, wählen Sie die Zeitzone und speichern Sie die Änderungen.
Klicken Sie anschließend erneut auf „Add node“ und wählen Sie den Webhook Trigger, den Sie nicht konfigurieren müssen. Sie können dessen Link jedoch bei Bedarf anpassen. Speichern Sie die Änderungen.
2. Headless Browser
Klicken Sie auf „Add node“, gehen Sie zu Code und wählen Sie Headless Browser aus**. Hier ist der Code, den ich verwende:**
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 };
Kopieren Sie diesen Code einfach in das Eingabefeld – das war's.
Hinweis: Dies ist nur ein einfaches Beispiel. Sie können hier jede beliebige Logik erstellen. Latenodes Headless Browser bietet Ihnen mit der Puppeteer-Bibliothek eine große Vielfalt an Möglichkeiten.
Wenn Sie prüfen möchten, wie Ihr Code funktioniert, ohne den gesamten Workflow zu aktivieren, verwenden Sie die Schaltfläche „Run node once“. Dadurch werden die Änderungen automatisch gespeichert und nur dieser Node ausgeführt. So werden die Daten dieses Nodes auch im nächsten Node nutzbar. Apropos nächste Nodes …
3. Telegram-Nodes und Filter
Jetzt müssen Sie Telegram-Nodes hinzufügen, damit der Bot Sie über die Website-Performance informiert.
Klicken Sie auf „Add node“ und suchen Sie nach Telegram Bot API. Hier benötigen Sie „Send a text message or reply“. Fügen Sie zwei solche Nodes hinzu und verbinden Sie sie mit dem HB-Node.
Bevor Sie diese Nodes einrichten, klicken Sie auf die Verbindung und wählen Sie „Setup filter“. In diesem Fenster benennen Sie den Filter im Feld „Label“. Wählen Sie unter „Condition“ im Helper-Widget das Result des HB-Nodes, dann = unter COMPARE und true unter KEYWORDS aus. Speichern Sie die Änderungen.
Der verbundene Node wird ausgeführt, wenn die Ausführung des Headless Browsers erfolgreich ist.
Erstellen Sie dann den negativen Filter. Gehen Sie genauso vor, wählen Sie unter KEYWORDS jedoch false aus.
Jetzt zu den Nodes selbst.
So richten Sie sie ein:
- Fügen Sie den Zugriffstoken Ihres Bots von BotFather unter „Connection“ ein.
- Fügen Sie die Chat-ID eines Gruppenchats mit Ihrem Bot ein (Sie können sie über Telegram Web sehen).
- Schreiben Sie den Text für die Nachricht Ihres Bots.
- Wählen Sie den Parsing-Modus. Er verändert das Erscheinungsbild der Nachricht.
Das war's! Jetzt ist es Zeit, den Workflow zu speichern und bereitzustellen! Dadurch wird der Workflow automatisch aktiv.
Und wie ich zuvor versprochen habe, erhalten Sie diesen Latenode-Workflow als fertige Vorlage hier.
Fazit
Herzlichen Glückwunsch, Sie sind gerade zum geschätzten Architekten Ihres eigenen Website-Monitoring-Workflows geworden! Ab sofort liegt die Möglichkeit, diesen Workflow an Ihre individuellen Anforderungen anzupassen und zu erweitern, in Ihren Händen. Die einzige Grenze für die Vielseitigkeit Ihres Ansatzes ist Ihre eigene Vorstellungskraft.
Denken Sie daran: Auf Ihrem Weg in die Low-Code-Automatisierung sind Sie nicht allein. Falls Sie Schwierigkeiten haben, diesen Workflow nachzubauen, oder einfach Gleichgesinnte suchen, die Ihre Leidenschaft teilen, treten Sie unserem Discord Channel bei. Dort finden Sie Unterstützung von mir, den Latenode-Entwicklern und einer wachsenden Community von Low-Code-Enthusiasten. Wir freuen uns darauf, Sie bei uns willkommen zu heißen!
Automatisieren Sie Ihre Website-Überwachung auf Latenode – der besten Automatisierungsplattform für Sie
