Automatické monitorování webových stránek pomocí Headless Browser & Telegram Bot uvnitř Latenode

Ahoj! Tady Daniel z Latenode. Pokud dnes máte webové stránky, pravděpodobně používáte nějaký frontendový framework, například React. V takovém případě by mnoho monitorovacích služeb nemohlo s vaším webem správně fungovat. 

Ale existuje řešení! Můžeme využít sílu prohlížeče Headless Browser na adrese Latenode a vytvořit si takovou službu sami během pouhých 5 minut. Navíc přidáme oznámení bota Telegramu pomocí uzlů bez kódu, čímž zajistíme, že budeme vždy informováni pomocí oznámení v reálném čase!

V tomto článku vám poskytneme podrobný návod krok za krokem, jak vytvořit pracovní postup automatizace monitorování webových stránek na adrese latenode.com. Tento proces zahrnuje použití prohlížeče Headless Browser ke kontrole výkonu webových stránek a odeslání zprávy s hlášením prostřednictvím bota Telegram a také návod, jak vytvořit bota Telegram s nástrojem BotFather.

Na konci tohoto článku na vás navíc čeká připravená šablona tohoto pracovního postupu , která vám umožní použít tento scénář během chvilky.

Jaký je plán?

Chcete-li vytvořit scénář webového monitorování, který odesílá zprávy v aplikaci Telegram, musíte:

• Vytvoření bota Telegramu
• Vytvoření scénáře Latenode

A je to ještě jednodušší, než to vypadá! Ukážu vám to.

Vytvoření bota Telegramu

Klíčovou roli v tomto procesu hraje váš respektující vztah s BotFatherem. Ale nebojte se, není nic, co by vám mohlo způsobit potíže. 

Po zahájení konverzace s BotFatherem postupujte podle následujících kroků:

1. Zadejte /newbot
   Poté budete vyzváni k zadání jména bota a vygenerování uživatelského jména. To je jedna z těch nabídek, které se nedají odmítnout...
   Skvělé! Nyní máte bota Telegramu a klíč API pro něj!
2. Zadejte /help a /setjoingroups
   Chcete-li povolit možnost pozvat bota do skupinových chatů.

Nyní přidejte svého bota do skupinového chatu nebo s ním vytvořte nový chat. To bude místo, kam bude bot posílat zprávy. ID tohoto chatu budete potřebovat později v tomto pracovním postupu. Chcete-li získat ID chatu, musíte jej otevřít pomocí služby Telegram Web.

Jste připraveni přejít na scénář Latenode's, pojďme na to, nebude to trvat dlouho!

Vytvoření scénáře na adrese latenode.com

Přihlaste se na latenode.com a vytvořte nový scénář. Zde je scénář, který potřebujete:

Tento scénář spustí bezhlavý prohlížeč, který jednou za nastavenou dobu zkontroluje autorizační stránku Latenodena přítomnost konkrétního textu a v závislosti na jeho přítomnosti odešle pozitivní nebo negativní zprávu do služby Telegram.

Rozdělení scénářů:

1. Spouštěče: Zde vidíte spouštěč Plán, který umožňuje aktivovat kontrolu výkonu v libovolném časovém období, a spouštěč Webhook, který vám poskytuje přizpůsobitelný odkaz pro spuštění aktivace kdykoli pomocí něj.
2. Bezhlavý prohlížeč: Všechna kouzla se odehrávají zde. V tomto konkrétním případě přechází HB na na tuto stránku stránku a vyhledá text "Vytvořte si účet". Pokud tento řetězec existuje, výsledkem je true, pokud ne - false.
3. Uzly Telegramu: Uzly bez kódu, které odesílají zprávu v závislosti na výsledcích provedení uzlu Headless Browser.

Bezhlavý prohlížeč - připojení Telegramu mají filtry. Horní uzel Telegramu se provede, pokud je výsledek uzlu HB pravdivý. Spodní se aktivuje, pokud je výsledek nepravdivý.

Úkol je jasný, akce!

1. Spouštěče

Vytvořte nový scénář, klikněte na tlačítko "Přidat uzel", přejděte do sekce Nástroje a v části spouštěč uvidíte položku Plán. Nastavte období aktivace, vyberte časové pásmo a uložte změny.
Poté znovu "přidejte uzel" a přejděte na webhook Spouštěč, nemusíte jej nastavovat, ale můžete upravit jeho odkaz, pokud chcete. Uložte změny.

2. Bezhlavý prohlížeč

Klikněte na tlačítko "přidat uzel", přejděte do kódu a vyberte možnost Headless Browser. Zde je kód, který používám:

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

Stačí zkopírovat tento kód do vstupního pole a je to.

Poznámka:Jedná se pouze o jednoduchý příklad. Můžete zde vytvořit jakoukoli logiku, prohlížeč Latenode's Headless vám dává obrovské možnosti s knihovnou Puppeteer.‍

Pokud chcete zkontrolovat, jak váš kód funguje, aniž byste museli aktivovat celý scénář, použijte tlačítko "spustit uzel jednou". To automaticky uloží změny a spustí pouze tento uzel. Díky tomu budou data z tohoto uzlu použitelná i v dalším uzlu. Když už o nich mluvíme...

3. Uzly a filtry Telegramu

Nyní musíte přidat uzly Telegramu, aby si vás bot všiml na výkonu webových stránek.

Klikněte na tlačítko "add node" a najděte rozhraní API telegramového bota. Zde hledáte "send a text message or reply" (poslat textovou zprávu nebo odpovědět). Přidejte 2 takové uzly a připojte je k uzlu HB.

Před nastavením těchto uzlů klikněte na připojení a vyberte možnost "nastavit filtr". V tomto okně filtr pojmenujete v poli "label". V podmínce vyberte výsledek z uzlu HB ve widgetu Helper, dále = v poli COMPARE a true v poli KEYWORDS. Změny uložte. 

Připojený uzel se spustí, pokud je spuštění Headless Browseru úspěšné.

Pak vytvořte záporný. Udělejte totéž, ale v položce KEYWORDS zvolte false.

Nyní samotné uzly.

Jejich nastavení:

1. Vložte přístupový token svého bota z BotFather do pole "connection".
2. vložte ID chatu skupiny s vaším botem (můžete jej zobrazit pomocí služby Telegram Web).
3. Napište text zprávy bota.
4. Zvolte režim rozboru. Změní vzhled zprávy

A je to! Nyní je čas scénář uložit a nasadit! Tím se scénář automaticky aktivuje.
A jak jsem slíbil dříve, tento scénář Latenode můžete získat jako hotovou šablonu. zde.‍

Závěr‍

Gratulujeme, právě jste se stali váženým architektem vlastního pracovního postupu monitorování webových stránek! Od této chvíle máte v rukou možnost přizpůsobit a upravit tento scénář svým jedinečným potřebám. Jediným omezením toho, jak všestranný může být váš přístup, je vaše vlastní představivost.

Nezapomeňte, že na této cestě nízkokódové automatizace nejste sami. Pokud někdy zjistíte, že se potýkáte se znovuvytvořením tohoto scénáře, nebo pokud prostě hledáte podobně smýšlející jedince, kteří by sdíleli vaši vášeň, připojte se k nám na našem Discord kanálu, Tam najdete podporu ode mě, vývojářů z Latenode a rostoucí komunity nízkokódových nadšenců. Těšíme se, že budete mezi námi!