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

Hallo! Hier ist Daniel von Latenode. Wenn Sie heute eine Website haben, verwenden Sie wahrscheinlich eine Art Frontend-Framework wie React. In diesem Fall könnten viele Überwachungsdienste mit Ihrer Website nicht richtig funktionieren. 

Aber es gibt eine Lösung! Wir können die Leistung eines Headless-Browsers in Latenode nutzen, um einen solchen Dienst in nur 5 Minuten selbst zu erstellen. Darüber hinaus werden wir Telegram-Bot-Benachrichtigungen mithilfe von No-Code-Knoten hinzufügen, um sicherzustellen, dass wir immer mit Echtzeitbenachrichtigungen informiert sind!

In diesem Artikel stellen wir eine Detaillierte Schritt-für-Schritt-Anleitung zum Erstellen eines Automatisierungsworkflows für die Websiteüberwachung auf latenode.com. Bei diesem Vorgang wird die Leistung der Website mithilfe eines Headless-Browsers überprüft und Ihnen über einen Telegram-Bot eine Berichtsnachricht gesendet. Außerdem erfahren Sie, wie Sie mit BotFather einen Telegram-Bot erstellen.

Darüber hinaus gibt es eine einsatzbereite Vorlage Am Ende des Artikels erwartet Sie eine Einführung in diesen Workflow, mit der Sie dieses Szenario in nur einer Minute nutzen können.

Wie ist der Plan?

Um ein Webüberwachungsszenario zu erstellen, das Nachrichten in Telegram sendet, müssen Sie:

• Erstellen Sie einen Telegramm-Bot
• Erstellen eines Latenode-Szenarios

Und es ist noch einfacher, als es aussieht! Lassen Sie es mich Ihnen zeigen.

Erstellen eines Telegrammbots

Ihre respektvolle Beziehung zu BotVater ist ein Schlüsselelement in diesem Prozess. Aber keine Sorge, es gibt nichts, was Ihnen Probleme bereiten könnte. 

Nachdem Sie eine Konversation mit BotFather begonnen haben, folgen Sie diesen Schritten:

1. Enter / newbot
   Anschließend werden Sie aufgefordert, Ihrem Bot einen Namen zu geben und einen Benutzernamen zu generieren. Dies ist eines dieser Angebote, die Sie nicht ablehnen können …
   Großartig! Jetzt haben Sie eine Telegrammbot und ein API-Schlüssel dafür!
2. Enter  /helfen, und  /Gruppenbeitreten festlegen
   Um die Möglichkeit zu aktivieren, Ihren Bot zu Gruppenchats einzuladen.

Jetzt, füge deinen Bot zu einem Gruppenchat hinzu oder erstelle damit einen neuen. Dies wird der Ort sein, an den der Bot Berichte sendet. Sie benötigen die ID dieses Chats später in diesem Workflow. Um die Chat-ID zu erhalten, müssen Sie sie über Telegram Web öffnen.

Sie sind bereit, zum Latenode-Szenario zu wechseln. Lassen Sie es uns tun, es dauert nicht lange!

Erstellen eines Szenarios auf latenode.com

Melden Sie sich bei latenode.com an und erstellen Sie ein neues Szenario. Hier ist ein Szenario, das Sie benötigen:

Dieses Szenario löst einmalig für einen festgelegten Zeitraum einen Headless-Browser aus, um die Autorisierungsseite von Latenode auf einen bestimmten Text zu überprüfen. und je nach Vorhandensein positive oder negative Nachrichten im Telegramm senden.

Aufschlüsselung des Szenarios:

1. Löst aus: Hier sehen Sie einen Zeitplan-Trigger, mit dem Sie zu einem beliebigen Zeitpunkt eine Leistungsprüfung aktivieren können, und einen Webhook-Trigger, der Ihnen einen anpassbaren Link bereitstellt, mit dem Sie die Aktivierung jederzeit auslösen können.
2. Headless-Browser: Die ganze Magie geschieht hier. In diesem speziellen Fall geht HB zu fehlen uns die Worte. Seite und sucht nach „Erstelle deinen Account”-Text. Wenn diese Zeichenfolge vorhanden ist, ist das Ergebnis wahr, wenn nicht, falsch.
3. Telegrammknoten: 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.

Die Mission ist klar: Action!

1. Löst aus

Erstellen Sie ein neues Szenario, klicken Sie dann auf „Knoten hinzufügen“, gehen Sie zu Tools und im Abschnitt „Trigger“ sehen Sie „Zeitplan“. Legen Sie den Aktivierungszeitraum fest, wählen Sie die Zeitzone aus und speichern Sie die Änderungen.
Danach „Knoten hinzufügen“ noch einmal und dann zum Webhook-Trigger gehen, Sie müssen es nicht einrichten, aber Sie können den Link bei Bedarf anpassen. Speichern Sie die Änderungen.

2. Headless-Browser

Klicken Sie auf „Knoten hinzufügen“, Gehen Sie zum Code und wählen Sie 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 };

Kopieren Sie diesen Code einfach in das Eingabefeld und fertig.

Hinweis: Dies ist nur ein einfaches Beispiel. Sie können hier jede beliebige Logik aufbauen. Der Headless-Browser von Latenode bietet Ihnen mit einer Puppeteer-Bibliothek eine große Vielfalt an Möglichkeiten.Es gibt einen Teil der ...

Wenn Sie überprüfen möchten, wie Ihr Code funktioniert, ohne das gesamte Szenario zu aktivieren, verwenden Sie die Schaltfläche „Knoten einmal ausführen“. Dadurch werden die Änderungen automatisch gespeichert und nur dieser Knoten ausgeführt. Dadurch sind auch die Daten dieses Knotens im nächsten Knoten nützlich. Apropos …

3. Telegrammknoten und Filter

Jetzt müssen Sie Telegram-Knoten hinzufügen um den Bot bei der Website-Leistung auf Sie aufmerksam zu machen.

Klicken Sie auf „Knoten hinzufügen“ und suchen Sie die Telegramm-Bot-API. Hier suchen Sie nach „eine Textnachricht senden oder antworten„. Fügen Sie 2 solcher Knoten hinzu und verbinden Sie sie mit dem HB-Knoten.

Bevor Sie diese Knoten einrichten, klicken Sie auf die Verbindung und wählen Sie „Filter einrichten“. In diesem Fenster benennen Sie den Filter im Feld „Label“. Wählen Sie unter Bedingung die Folge vom HB-Knoten im Helper-Widget, dann = in COMPARE und was immer dies auch sein sollte. in SCHLÜSSELWÖRTER. Speichern Sie die Änderungen. 

Der verbundene Knoten wird ausgeführt, wenn der Headless Browser ausgeführt wird erfolgreich.

Dann machen Sie die negative Eins. Machen Sie alles das Gleiche, aber wählen Sie falsch in SCHLÜSSELWÖRTERN.

Nun zu den Knoten selbst.

So richten Sie sie ein:

1. Geben Sie den Zugriffstoken Ihres Bots ein von BotFather in „Verbindung“
2. Geben Sie die Chat-ID eines Gruppenchats mit Ihrem Bot ein (Sie können es über Telegram Web sehen)
3. Schreiben Sie den Text für die Nachricht eines Bots.
4. Auswählen des Analysemodus. Ändert das Erscheinungsbild der Nachricht

Das war's! Jetzt ist es an der Zeit, das Szenario zu speichern und bereitzustellen! Dadurch wird das Szenario automatisch aktiviert.
Und wie ich bereits versprochen habe, können Sie dieses Latenode-Szenario als fertige Vorlage erhalten HIER.Es gibt einen Teil der ...

SchlussfolgerungEs gibt einen Teil der ...

Herzlichen Glückwunsch, Sie sind gerade zum angesehenen Architekten Ihres eigenen Website-Überwachungs-Workflows geworden! Ab sofort liegt es in Ihren Händen, dieses Szenario an Ihre individuellen Bedürfnisse anzupassen. Die einzige Grenze für die Vielseitigkeit Ihres Ansatzes ist Ihre eigene Vorstellungskraft.

Denken Sie daran, dass Sie auf dieser Reise der Low-Code-Automatisierung nicht allein sind. Wenn Sie jemals Schwierigkeiten haben, dieses Szenario nachzubilden, oder wenn Sie einfach nach Gleichgesinnten suchen, die Ihre Leidenschaft teilen, besuchen Sie uns auf unserer Discord-KanalDort findest du Unterstützung von mir, den Latenode-Entwicklern und einer wachsenden Community von Low-Code-Enthusiasten. Wir freuen uns auf dich!