Вебсайт мониторинг c помощью Headless Browser и Telegram Bot

Привет! Это Даник из Нодуля. Если у вас есть сайт, вы, вероятно, используете какой-то фронтенд-фреймворк, например, React. И в этом случае многие сервисы мониторинга могут работать с вашим сайтом не совсем корректно.

Но решение есть! Мы можем использовать функционал Headless Browser на Нодуле, чтобы создать персональный сервис мониторинга сайта всего лишь за 5 минут. Более того, мы добавим возможность получать уведомления через Telegram бот, Что позволит всегда оставаться в курсе событий!

Кроме того, в конце этой статьи вас ждет готовый шаблон этого сценария, который позволит вам использовать описанный функционал уже через несколько минут!

План действий:

Чтобы создать сценарий веб-мониторинга, который отправляет сообщения в Telegram, вам нужно:

• ‍Создать Telegram бот
• Создать сценарий на Нодуле

И это проще, чем кажется! Позвольте я покажу вам.

Создание Telegram бота

Правильная настройка BotFather - ключевой момент в этом процессе. Но не волнуйтесь, здесь нет ничего, что могло бы вызвать у вас проблемы.

После начала чата с BotFather, следуйте этим шагам:

1. Введите /newbot

После этого вам будет предложено дать вашему боту имя и сгенерировать имя пользователя.

Отлично! Теперь у вас есть Telegram бот и API ключ для него!

2. Введите /help и /setjoingroups

Это нужно, чтобы получить возможность приглашения вашего бота в групповые чаты.

Теперь добавьте вашего бота в существующий чат или создайте новый. Это будет место, куда бот будет отправлять отчеты. Кроме всего, вам понадобится ID этого чата. Чтобы получить ID чата, вам нужно открыть его через Telegram Web и скопировать данные из адресной строки как показано на примере.

Теперь мы готовы перейти к созданию сценария на Нодуле, это не замет много времени.

Создание сценария на Nodul.ru

Войдите на Nodul.ru и создайте новый сценарий. Соберите структуру как показано на изображении ниже.

Этот сценарий запускает Headless Browser с заданным интервалом, чтобы проверить страницу авторизации Нодуля на наличие определенного текста, и в зависимости от его наличия, отправлять положительные или отрицательные сообщения в Telegram.

Элементы сценария:

1. Триггеры: Здесь вы видите триггер расписания, который позволяет вам активировать проверку работоспособности сайта заданное время, и триггер webhook, который предоставляет вам ссылку для ручного запуска сценария.
2. Headless Browser: Вся магия происходит здесь. В данном случае HB переходит на эту страницу и ищет текст «создайте ваш аккаунт». Если эта строка существует, результат true, если нет - false.
3. Узлы Telegram: Отправляют сообщение в зависимости от результатов выполнения узла Headless Browser.

Связи Headless Browser - Telegram имеют фильтры. Верхний узел Telegram выполняется, если результат узла HB true. Нижний активируется, если результат false.

Все понятно? Приступим к настройке!

1. Триггеры

Создайте новый сценарий, затем нажмите «Добавить узел», перейдите в Инструменты, и в разделе триггера вы увидите Расписание. Установите период активации, выберите часовой пояс и сохраните изменения.

После этого снова нажмите «добавить узел» и выберите триггер Webhook, вам не обязательно его настраивать, но вы можете кастомизировать его ссылку, если захотите. Сохраните изменения.

2. Headless Browser

Нажмите «добавить узел», перейдите в раздел кода и выберите Headless Browser. Вот код, который я использую:

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

Просто скопируйте этот код в поле ввода, и всё готово.

Примечание: Это всего лишь простой пример. Здесь вы можете построить любую логику, ведь Headless Browser от Latenode предоставляет вам огромное разнообразие возможностей с библиотекой Puppeteer.‍

Если вы хотите проверить, как работает ваш код, не активируя весь сценарий, используйте кнопку «запустить узел один раз». Это автоматически сохранит изменения и запустит только этот узел. Это также делает данные из этого узла полезными для следующего узла.

3. Узлы Telegram и фильтры

Теперь вам нужно добавить узлы Telegram, чтобы бот уведомил вас о работоспособности веб-сайта.

Нажмите «добавить узел», найдите API бота Telegram. Здесь вам нужно выбрать «Send a Text Message or Reply». Добавьте два таких узла и соедините их с узлом HB.

Перед настройкой этих узлов, нажмите на соединение и выберите «настроить фильтр». В этом окне вы должны назвать фильтр в поле «метка». В условии выберите результат из узла HB в виджете помощника, затем = в COMPARE и true в KEYWORDS. Сохраните изменения.

Соединенный узел будет выполнен, если выполнение Headless Browser удачно.

Затем создайте аналогичный узел. Сделайте все то же самое, но выберите false в KEYWORDS.

Теперь про настройку:

Чтобы настроить их:

1. Поместите токен доступа вашего бота от BotFather в «соединение»
2. Укажите идентификатор чата группы с вашим ботом (его можно увидеть с помощью Telegram Web)
3. Напишите текст сообщения бота.
4. Выберите стиль форматирования. Это изменяет внешний вид сообщения

Вот и все! Теперь пришло время сохранить сценарий и развернуть его! Это автоматически активирует сценарий.

И, как я обещал ранее, вы можете скопировать готовый сценарий здесь.

Заключение

Поздравляем, вы только что стали уважаемым разработчиком собственного сценария для мониторинга статуса веб-сайта! С этого момента вы свободны, для того чтобы настраивать и адаптировать этот сценарий под ваши уникальные потребности. Единственным ограничением насколько разнообразным может быть ваш подход, является ваше собственное воображение.

И помните, вы не одиноки в своем путешествии по лоу-код автоматизации. Если вы когда-нибудь столкнетесь с трудностями при создании сценария или если вы просто ищете единомышленников, чтобы поделиться вашим опытом, присоединяйтесь к нашему Telegram сообществу. До встречи!