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

Olá! Sou Daniel, do site Latenode. Se você tem um site hoje, provavelmente está usando algum tipo de estrutura de front-end como o React. Nesse caso, muitos serviços de monitoramento podem não funcionar corretamente com seu site. 

Mas há uma solução! Podemos aproveitar o poder de um navegador sem cabeça em Latenode para criar esse serviço para você em apenas 5 minutos. Além disso, adicionaremos notificações de bots do Telegram usando nós sem código, garantindo que você esteja sempre informado com notificações em tempo real!

Neste artigo, forneceremos 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 cabeça para verificar o desempenho do site e enviar a você 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á um modelo pronto para uso desse fluxo de trabalho esperando por você no final deste artigo, o que permitirá que você use esse cenário em apenas um minuto.

Qual é o plano?

Para criar um cenário de monitoramento da Web que envia mensagens no Telegram, você precisa:

• Criar 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

O relacionamento respeitoso que você tem com o BotFather é fundamental nesse processo. Mas não se preocupe, não há nada que possa causar problemas a você. 

Depois que você iniciar uma conversa com o BotFather, siga estas etapas:

1. Digite /newbot
   Depois disso, você será solicitado a dar um nome ao seu bot e a gerar um nome de usuário. Essa é uma daquelas ofertas que você não pode recusar...
   Ótimo! Agora você tem um bot do Telegram e uma chave de API para ele!
2. Digite /help e /setjoingroups
   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á o local para o qual 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 de Latenode. Vamos fazer isso, não vai demorar muito!

Criando um cenário em latenode.com

Faça login em latenode.com e crie um novo cenário. Aqui está um cenário de que você precisa:

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

Detalhamento do cenário:

1. Gatilhos: aqui você vê um gatilho Schedule, que permite ativar uma verificação de desempenho em qualquer período de tempo, e um gatilho Webhook, que fornece um link personalizável para acionar a ativação a qualquer momento usando-o.
2. Navegador sem cabeça: Toda a mágica está acontecendo aqui. Nesse caso específico, o HB vai para esta página e procura o texto "create your account" (crie sua conta). Se essa cadeia de caracteres existir, o resultado será verdadeiro, caso contrário, será falso.
3. Nós de telegrama: Nós sem código que enviam a mensagem dependendo dos resultados da execução do nó do navegador sem cabeça.

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 será ativado se o resultado for falso.

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

1. Acionadores

Crie um novo cenário, clique em "Add node" (Adicionar nó), vá para Tools (Ferramentas) e, na seção de acionamento, você verá Schedule (Programação). Defina o período de ativação, selecione o fuso horário e salve as alterações.
Depois disso, "add node" (adicionar nó) mais uma vez e vá para webhook Trigger, você não precisa configurá-lo, mas pode personalizar o link se quiser. Salve as alterações.

2. Navegador sem cabeça

Clique em "add node" (adicionar nó), vá para code (código) e selecione Headless Browser (navegador sem cabeça). 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 esse código no campo de entrada e pronto.

Observação: Este é apenas um exemplo simples. Você pode criar qualquer lógica aqui. O navegador sem cabeça do Latenodeoferece uma enorme variedade de possibilidades com uma biblioteca Puppeteer.

Se você quiser verificar como seu código funciona sem ativar todo o cenário, use um botão "run node once" (executar nó uma vez). Isso salvará automaticamente as alterações e executará somente esse nó. Isso também faz com que os dados desse 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 que o bot perceba você no desempenho do site.

Clique em "adicionar nó" e localize a API do bot do telegrama. Aqui você está procurando por "send a text message or reply" (enviar uma mensagem de texto ou responder). Adicione dois desses nós e conecte-os ao nó HB.

Antes de configurar esses nós, clique na conexão e selecione "setup filter"(configurar filtro). Nessa janela, você deve nomear o filtro no campo "label" (rótulo). Na condição, escolha o resultado do nó HB no widget Helper, depois = em COMPARE e true em KEYWORDS. Salve as alterações. 

O nó conectado será executado se a execução do navegador sem cabeça for bem-sucedida.

Em seguida, faça o negativo. Faça tudo da mesma forma, mas escolha false em KEYWORDS.

Agora, os nós em si.

Para configurá-los:

1. Coloque o token de acesso de seu bot do BotFather em "connection"
2. Coloque o ID do chat de um chat em grupo com seu bot (você pode vê-lo usando o Telegram Web)
3. Escreva o texto da mensagem de um bot.
4. Selecione o modo de análise. Isso altera a aparência da mensagem

É isso aí! Agora é hora de você salvar o cenário e implantá-lo! Isso fará com que o cenário seja ativado automaticamente.
E, como prometi anteriormente, você pode obter esse cenário Latenode como um modelo pronto aqui.‍

Conclusão‍

Parabéns, você acabou de se tornar o estimado arquiteto do seu próprio fluxo de trabalho de monitoramento de sites! A partir de agora, o poder de personalizar e adaptar esse cenário às suas necessidades exclusivas está em suas mãos. O único limite para a versatilidade da sua abordagem é a sua própria imaginação.

Lembre-se de que você não está sozinho nessa jornada de automação com pouco código. Se você tiver dificuldades para recriar esse cenário ou se estiver simplesmente procurando pessoas com a mesma opinião para compartilhar sua paixão, junte-se a nós em nosso Canal do DiscordLá, você pode encontrar apoio meu, dos desenvolvedores do Latenode e de uma comunidade crescente de entusiastas de pouco código. Estamos ansiosos para ter você conosco!