Automatische Website-Überwachung mit Headless Browser & Telegram Bot innerhalb von Latenode

Hallo! Hier ist Daniel von Latenode. Wenn du heute eine Website hast, benutzt du wahrscheinlich ein Frontend-Framework wie React. In diesem Fall könnten viele Monitoring-Dienste nicht richtig mit deiner Website funktionieren. 

Aber es gibt eine Lösung! Wir können die Leistungsfähigkeit eines Headless Browsers in Latenode nutzen, um einen solchen Dienst in nur 5 Minuten selbst zu erstellen. Außerdem fügen wir Telegram-Bot-Benachrichtigungen mithilfe von No-Code-Knoten hinzu und stellen so sicher, dass wir immer mit Echtzeit-Benachrichtigungen auf dem Laufenden sind!

In diesem Artikel geben wir dir eine detaillierte Schritt-für-Schritt-Anleitung, wie du einen automatisierten Workflow für die Website-Überwachung auf latenode.com erstellst. Dieser Prozess beinhaltet die Verwendung eines Headless Browsers, um die Leistung der Website zu überprüfen und dir eine Berichtsnachricht über einen Telegram Bot zu senden. Außerdem zeigen wir dir, wie du einen Telegram Bot mit BotFather erstellst.

Außerdem wartet am Ende dieses Artikels eine fertige Vorlage für diesen Workflow auf dich, mit der du dieses Szenario in nur einer Minute anwenden kannst.

Was ist der Plan?

Um ein Web-Monitoring-Szenario zu erstellen, das Nachrichten in Telegram sendet, musst du Folgendes tun:

• Einen Telegram Bot erstellen
• Erstelle ein Latenode Szenario

Und es ist sogar einfacher, als es aussieht! Ich zeige es dir.

Einen Telegram-Bot erstellen

Deine respektvolle Beziehung zu BotFather ist dabei ein wichtiger Faktor. Aber mach dir keine Sorgen, es gibt nichts, was dir Probleme bereiten könnte. 

Nachdem du eine Unterhaltung mit BotFather begonnen hast, befolge diese Schritte:

1. Gib /newbot
   ein. Danach wirst du aufgefordert, deinem Bot einen Namen zu geben und einen Benutzernamen zu erstellen. Das ist eines dieser Angebote, die du nicht ablehnen kannst...
   Toll! Jetzt hast du einen Telegram-Bot und einen API-Schlüssel für ihn!
2. Gib /help und /setjoingroups
   ein, um die Möglichkeit zu aktivieren, deinen Bot zu Gruppenchats einzuladen.

Jetzt fügst du deinen Bot zu einem Gruppenchat hinzu oder erstellst einen neuen mit ihm. Von dort aus wird der Bot Berichte senden. Du brauchst die ID dieses Chats später in diesem Arbeitsablauf. Um die Chat-ID zu erhalten, musst du ihn mit Telegram Web öffnen.

Du bist bereit, zu Latenode's Szenario zu wechseln, lass es uns tun, es wird nicht lange dauern!

Erstellen eines Szenarios auf latenode.com

Logge dich auf latenode.com ein und erstelle ein neues Szenario. Hier ist ein Szenario, das du brauchst:

Bei diesem Szenario wird ein Headless-Browser einmal für einen bestimmten Zeitraum dazu veranlasst, die Autorisierungsseite von Latenodeauf einen bestimmten Text zu überprüfen und je nach Vorhandensein positive oder negative Nachrichten in Telegram zu senden.

Aufschlüsselung der Szenarien:

1. Auslöser: Hier siehst du einen Zeitplan-Auslöser, mit dem du eine Leistungsprüfung zu einem beliebigen Zeitpunkt aktivieren kannst, und einen Webhook-Auslöser, der dir einen anpassbaren Link bietet, über den du die Aktivierung jederzeit auslösen kannst.
2. Kopfloser Browser: Hier findet die ganze Magie statt. In diesem speziellen Fall geht HB zu diese Seite und sucht nach dem Text "create your account". Wenn diese Zeichenfolge existiert, ist das Ergebnis wahr, wenn nicht - falsch.
3. Telegramm-Knoten: No-Code-Knoten, die die Nachricht abhängig von den Ausführungsergebnissen des Headless Browser-Knotens senden.

Headless Browser - Telegram-Verbindungen haben Filter. Der obere Telegrammknoten wird ausgeführt, wenn das Ergebnis des HB-Knotens wahr ist. Der untere wird aktiviert, wenn das Ergebnis falsch ist.

Der Auftrag ist klar: Action!

1. Auslöser

Erstelle ein neues Szenario, klicke dann auf "Knoten hinzufügen", gehe zu "Werkzeuge" und im Bereich "Auslöser" findest du "Zeitplan". Lege den Aktivierungszeitraum fest, wähle die Zeitzone aus und speichere die Änderungen.
Danach fügst du erneut einen Knoten hinzu und wählst den Webhook-Trigger aus, den du nicht einrichten musst, dessen Link du aber anpassen kannst. Speichere die Änderungen.

2. Kopfloser Browser

Klicke auf "Knoten hinzufügen", gehe zu Code und wähle Headless Browser. 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 };

Kopiere einfach diesen Code in das Eingabefeld und das war's.

Hinweis: Dies ist nur ein einfaches Beispiel. Du kannst hier jede beliebige Logik aufbauen, Latenode's Headless Browser gibt dir mit einer Puppeteer-Bibliothek eine riesige Vielfalt an Möglichkeiten.‍

Wenn du überprüfen willst, wie dein Code funktioniert, ohne das ganze Szenario zu aktivieren, kannst du die Schaltfläche "Knoten einmal ausführen" verwenden. Damit werden die Änderungen automatisch gespeichert und nur dieser Knoten ausgeführt. Dadurch können die Daten aus diesem Knoten auch im nächsten Knoten verwendet werden. Wenn wir schon dabei sind...

3. Telegrammknoten & Filter

Jetzt musst du Telegram-Knoten hinzufügen, damit der Bot dich auf der Website wahrnimmt.

Klicke auf "Knoten hinzufügen" und suche die Telegram Bot API. Hier suchst du nach "eine Textnachricht oder Antwort senden". Füge 2 solcher Knotenpunkte hinzu und verbinde sie mit dem HB-Knotenpunkt.

Bevor du diese Knotenpunkte einrichtest, klickst du auf die Verbindung und wählst "Filter einrichten". In diesem Fenster benennst du den Filter im Feld "Bezeichnung". Als Bedingung wählst du das Ergebnis aus dem HB-Knoten im Helfer-Widget, dann = in COMPARE und true in KEYWORDS. Speichere die Änderungen. 

Der verbundene Knoten wird ausgeführt, wenn die Ausführung des Headless Browsers erfolgreich ist.

Mache dann die negative Version. Mach das Gleiche, aber wähle bei KEYWORDS false .

Nun zu den Knotenpunkten selbst.

Um sie einzurichten:

1. Setze das Zugangs-Token deines Bots von BotFather in "Verbindung" ein.
2. Setze die Chat-ID eines Gruppenchats mit deinem Bot ein (du kannst sie mit Telegram Web sehen)
3. Schreibe den Text für die Nachricht eines Bots.
4. Wähle den Parsing-Modus. Er ändert das Erscheinungsbild der Nachricht

Das war's! Jetzt ist es an der Zeit, das Szenario zu speichern und es einzusetzen! Dadurch wird das Szenario automatisch aktiv.
Und wie ich bereits versprochen habe, kannst du dieses Latenode Szenario als fertige Vorlage bekommen hier.‍

Fazit‍

Herzlichen Glückwunsch, du bist gerade zum geschätzten Architekten deines eigenen Website-Monitoring-Workflows geworden! Von nun an liegt es in deiner Hand, dieses Szenario an deine individuellen Bedürfnisse anzupassen und zu gestalten. Die einzige Grenze für die Vielseitigkeit deines Ansatzes ist deine eigene Vorstellungskraft.

Denke daran, dass du auf dieser Reise der Low-Code-Automatisierung nicht allein bist. Wenn du jemals damit zu kämpfen hast, dieses Szenario nachzubauen, oder wenn du einfach nach Gleichgesinnten suchst, die deine Leidenschaft teilen, dann schließe dich uns in unserem Discord-KanalDort findest du Unterstützung von mir, den Latenode Entwicklern und einer wachsenden Gemeinschaft von Low-Code-Enthusiasten. Wir freuen uns darauf, dich bei uns zu haben!