Monitoramento automático de sites com Headless Browser e Telegram Bot dentro do Latenode

Olá! Aqui é Daniel da Latenode. Se você tem um site hoje, provavelmente está usando algum tipo de framework frontend como React. Nesse caso, muitos serviços de monitoramento não funcionariam corretamente com seu site. 

Mas há uma solução! Podemos aproveitar o poder de um Headless Browser no Latenode para criar um serviço desses por você mesmo em apenas 5 minutos. Além disso, adicionaremos notificações de bot do Telegram usando nós sem código, garantindo que estejamos sempre informados com notificações em tempo real!

Neste artigo, forneceremos um instruções detalhadas passo a passo sobre como criar um fluxo de trabalho de automação de monitoramento de site em latenode.com. Esse processo envolve o uso de um navegador sem interface para verificar o desempenho do site e enviar uma mensagem de relatório por meio de um bot do Telegram, além de como criar um bot do Telegram com o BotFather.

Além disso, há uma modelo pronto para uso deste fluxo de trabalho esperando por você no final deste artigo, o que permitirá que você use este cenário em apenas um minuto.

Qual é o plano?

Para criar um cenário de monitoramento web que envie mensagens no Telegram, você precisa:

• Crie um bot do Telegram
• Crie um cenário Latenode

E é ainda mais fácil do que parece! Deixe-me mostrar a você.

Criando um bot do Telegram

Seu relacionamento respeitoso com BotPai é uma coisa fundamental neste processo. Mas não se preocupe, não há nada que possa lhe causar problemas. 

Depois de iniciar uma conversa com o BotFather, siga estes passos:

1. Entrar / newbot
   Depois disso, você será solicitado a dar um nome ao seu bot e gerar um nome de usuário. Esta é uma daquelas ofertas que você não pode recusar…
   Ótimo! Agora você tem um Bot do Telegram e uma chave de API por isso!
2. Entrar  /ajuda, e  /definirgruposdejunção
   Para habilitar a capacidade de convidar seu bot para bate-papos em grupo.

Agora, adicione seu bot a um bate-papo em grupo ou crie um novo com ele. Esse será um lugar para onde o bot enviará relatórios. Você precisará do ID desse chat mais tarde neste fluxo de trabalho. Para obter o ID do chat, você precisa abri-lo usando o Telegram Web.

Você está pronto para mudar para o cenário do Latenode, vamos lá, não vai demorar muito!

Criando um cenário em latenode.com

Entre em latenode.com e crie um novo cenário. Aqui está um cenário que você precisa:

Este cenário aciona um navegador sem interface uma vez por um período de tempo definido para verificar a página de autorização do Latenode para um texto específico, e dependendo da sua presença, enviar mensagens positivas ou negativas no Telegram.

Análise do cenário:

1. Gatilhos: Aqui você vê um gatilho de programação, que permite ativar uma verificação de desempenho a qualquer momento, e um gatilho de Webhook, que fornece um link personalizável para acionar a ativação a qualquer momento.
2. Navegador sem cabeça: Toda a mágica está acontecendo aqui. Neste caso em particular, HB vai para esse página e buscas por “crie sua conta” texto. Se esta string existir, o resultado é true, se não, false.
3. Nós do Telegram: Nós sem código que enviam a mensagem dependendo dos resultados da execução do nó do Headless Browser.

Navegador sem cabeça - As conexões do Telegram têm filtros. O nó superior do Telegram é executado se o resultado do nó HB for verdadeiro. O inferior é ativado se o resultado for falso.

A missão é clara: ação!

1. Gatilhos

Crie um novo cenário, clique em “Adicionar nó”, vá em Ferramentas e na seção de gatilho você verá Agendar. Defina o período de ativação, selecione o fuso horário e salve as alterações.
Depois disso, “adicione o nó” mais uma vez e vá para o gatilho do webhook, você não precisa configurá-lo, mas pode personalizar seu link se quiser. Salve as alterações.

2. Navegador sem cabeça

Clique em “adicionar nó”, vá em código e selecione Headless Browser. Aqui está o código que estou usando:

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

Basta copiar este código no campo de entrada e pronto.

Nota: Este é apenas um exemplo simples. Você pode construir qualquer lógica aqui, o navegador Headless do Latenode está lhe dando uma enorme variedade de possibilidades com uma biblioteca Puppeteer.‍

Se você quiser verificar como seu código funciona sem ativar o cenário inteiro, use um botão “executar nó uma vez”. Isso salvará automaticamente as alterações e executará somente este nó. Isso também faz com que os dados deste nó sejam úteis no próximo nó. Falando sobre eles…

3. Nós e filtros do Telegram

Agora você precisa adicionar nós do Telegram para fazer com que o bot perceba o desempenho do site.

Clique em “adicionar nó”, encontre a API do bot do Telegram. Aqui você está procurando por “envie uma mensagem de texto ou responda”. Adicione 2 desses nós e conecte-os ao nó HB.

Antes de configurar esses nós, clique na conexão e selecione “filtro de configuração”. Nesta janela, você nomeia o filtro no campo “label”. Em condition, escolha o resultar do nó HB no widget Helper, então = em COMPARE e verdadeiro em PALAVRAS-CHAVE. Salve as alterações. 

O nó conectado será executado se a execução do Headless Browser for bem sucedido.

Então faça o negativo. Faça tudo igual, mas escolha falso em PALAVRAS-CHAVE.

Agora os nós em si.

Para configurá-los:

1. Coloque o token de acesso do seu bot de BotFather em “conexão”
2. Coloque o ID do chat de um chat em grupo com seu bot (você pode ver usando o Telegram Web)
3. Escreva o texto para a mensagem de um bot.
4. Selecione o modo de análise. Altera a aparência da mensagem

Pronto! Agora é hora de salvar o cenário e implantá-lo! Isso tornará o cenário automaticamente ativo.
E como prometi anteriormente, você pode obter este cenário Latenode como um modelo pronto aqui.‍

Conclusão‍

Parabéns, você acaba de se tornar o arquiteto conceituado do seu próprio fluxo de trabalho de monitoramento de site! A partir de agora, o poder de personalizar e adaptar este cenário às suas necessidades únicas está em suas mãos. O único limite para o quão versátil sua abordagem pode ser é sua própria imaginação.

Lembre-se, você não está sozinho nessa jornada de automação de baixo código. Se você alguma vez se encontrar lutando para recriar esse cenário ou se estiver simplesmente procurando por pessoas com ideias semelhantes para compartilhar sua paixão, junte-se a nós em nosso Canal Discord, Lá, você pode encontrar suporte de mim, dos desenvolvedores do Latenode e de uma comunidade crescente de entusiastas de low-code. Estamos ansiosos para ter você conosco!