В этом материале мы не будем создавать бота с нуля по шагам. Вместо этого мы подробно разберем уже готовое профессиональное решение — посмотрим, как оно работает в Telegram, заглянем в сценарии на платформе и поймем, за счет чего реализованы все функции.
Это отличная возможность подсмотреть чужую работу и научиться новым приемам! Мы будем смотреть на бота параллельно — сначала тестируем в Telegram, потом сразу заглядываем в сценарий и разбираем, как это сделано технически.
Бот называется «Веб-органайзер». Его главная задача — освободить память в телефоне. Вы можете очистить вкладки браузеров, забыть об очистке истории, создавать подборки сайтов и приложений. Особенно полезен разработчикам для тестирования мобильных версий сайтов прямо в Telegram.
Советуем перейти и посмотреть на него вживую — даже если не планируете пользоваться, просто изучить архитектуру очень полезно и интересно!
Что умеет этот бот
Давайте сначала разберемся с функционалом со стороны пользователя, а потом уже полезем в техническую часть.
Благодаря этому боту можно освободить место в телефоне. Как? Очень просто! Вместо того чтобы держать открытыми десятки вкладок в браузере (а они жрут память!), вы сохраняете все важные ссылки в боте.
Можно очистить вкладки браузеров и вообще забыть про постоянную чистку истории. Можно создавать свои подборки с сайтами, сервисами, веб-приложениями — организовать всё по категориям.
Ещё бот очень выручает разработчиков! Нужно протестировать сайт или веб-приложение в Telegram? Просто открываете его в боте и смотрите, как выглядит мобильная версия, всё ли работает корректно.
Заглядываем в сценарий: как всё устроено
Теперь давайте зайдем на платформу Watbot.ru и посмотрим, как этот бот собран изнутри.
Модульная структура — не один огромный сценарий!
Первое, что сразу бросается в глаза — бот НЕ собран в одном гигантском сценарии, где всё смешано в кучу. Здесь всё разбито на множество отдельных сценариев!
Смотрите, тут есть целые папки для удобства:
- Папка «Приложения» — всё, что связано с приложениями
- Папка «Ссылки» — работа с личными ссылками
- Папка «Подборки» — категории и карточки
- Папка «Настройки» — пароли, авторизация, сброс данных
Это профессиональный подход! Когда нужно что-то поправить, вы просто открываете нужный сценарий, а не ищете блоки среди сотен других. Можно переходить между сценариями и не теряться.
Стартовая логика: умная система переходов
После стартового блока у нас сразу идет блок с условием, который проверяет переменную «старт».
Зачем это нужно? Объясняем на примере!
Функция «Поделиться» — Deep Linking
Смотрите, как это работает в Telegram. Заходим во вкладку «Подборки». Например, выбираем категорию «Магазины».
Здесь есть разные карточки магазинов. У каждой есть кнопка «Поделиться». Нажимаем на неё.
Отправляем это в избранное, чтобы показать. Если отправить эту ссылку другу, он перейдет по ней — и бот сразу откроет именно эту карточку магазина!
Не нужно объяснять: «Зайди в бота, потом в подборки, потом в магазины, потом найди Магнит...» Просто кликнул по ссылке — и сразу там, где нужно.
Переходим по этой ссылке. Запускаем бота через ссылку. Сразу открылись подборки магазинов, на которые скопировали ссылку!
Как это работает технически
Возвращаемся на платформу. Этот блок с условием после старта — он как раз проверяет: передан ли параметр
start в ссылке или нет?
Если НЕТ — значит, пользователь просто запустил бота обычным способом. Тогда далее идет сценарий: Блок «Операция над переменной»
Если ДА — значит, человек перешел по общей ссылке. Тогда запускается другой сценарий:
- Блок «Интерпретатор JavaScript» — там написан код, который обрабатывает параметры из ссылки
- HTTP-запросы загружают нужные данные
- Блоки с условиями определяют, что именно показать
- Пользователь сразу попадает на нужную карточку
Это называется Deep Linking — глубокие ссылки. Очень крутая штука для вирусного распространения бота.
Раздел «Мои приложения»
Теперь подробно посмотрим на один из главных разделов.
Как это выглядит в Telegram
Нажимаем на кнопку «Мои приложения». Здесь можно добавлять или удалять ссылки на приложения.
Смотрите, здесь уже есть Instagram. Можно добавить что-то ещё. Попробуем добавить Telegram для примера.
Нажимаем на плюс. Сначала вводим название. Пишем: Telegram.
Следующим сообщением нужно добавить ссылку на приложение, на сайт. Вставляем любую ссылку для примера.
Приложение успешно добавлено. Раньше была только одна ссылка, теперь их две.
Можно открыть списком — в таком текстовом формате всё отображается. Очень удобно, если нужно скопировать несколько ссылок сразу.
Можно удалить. Нажимаем на минус. Можно удалить все приложения разом или выбрать что-то конкретное.
Удаляем то, что только что добавили. Выбираем Telegram. Появилось подтверждение: «Точно хотите удалить?»
Это сделано специально, чтобы случайно ничего не удалить! Только после подтверждения приложение исчезает.
Смотрим сценарий на платформе
Переходим на платформу и открываем сценарий «Мои приложения».
Тут в основном идут блоки «Интерпретатор JavaScript». Это значит, что большая часть логики написана на коде JavaScript.
Также есть блоки «HTTP запрос» с методом POST. И после всех этих блоков идет финальная «Цепочка сообщений» — она выводит меню с кнопками и приложениями.
Добавление приложения: как это работает
Когда нажимаем «Добавить приложение» (плюс), запускается отдельный сценарий добавления.
После того как вводим название — тут ограничение в 20 символов — идет следующая цепочка сообщений.
Здесь уже вводим ссылку на сайт. Обратите внимание! Тут установлена валидация URL.
Что это значит? Если отправить сообщение не в формате ссылки (например, просто написать «мой сайт»), то бот дальше не пустит! Он не добавит это как ссылку.
Ответ записываем в пользовательскую переменную. Обязательно! Иначе данные не сохранятся.
Дальше идет блок «Добавление записи в список».
Списки — где хранятся данные
Здесь есть разные списки. В данном случае это список «Личные приложения». Также есть отдельные списки под разные категории:
- Список «Приложения»
- Список «Подборки»
- Список «Категории»
- И так далее
Идет соотношение переменных и полей, которые записываются в список. После этого приходит сообщение: «Приложение успешно добавлено!»
Если нажимаем «Ок», то переходим обратно к сценарию с приложениями.
Раздел «Мои ссылки»
Переходим в главный сценарий и смотрим, как работают ссылки. Архитектура практически идентичная. Только данные сохраняются в другой список — в список «Ссылки», а не «Приложения».
Зачем разделять? Для логики! Приложения — это обычно сервисы типа Instagram, рабочие инструменты. А ссылки — это конкретные страницы, статьи, документы.
Можно тоже добавлять, можно удалять. Всё очень удобно организовано.
Система паролей — защита данных
Блок с условием: есть пароль или нет
В сценарии есть блок с условием: есть пароль или нет?
Если нет — идем дальше обычным путем.
Если да — переходим в отдельный сценарий «Авторизация».
Установка пароля
Заходим во вкладку «Настройки» в боте в Telegram. Здесь есть кнопка «Управление паролем».
Можно:
- Устанавливать пароль
- Менять его
- Отключать
- Настраивать время авторизации — как часто бот будет запрашивать пароль
Устанавливаем пароль. Пишем любое слово. Например, «привет».
Сразу приходит вопрос: «Как часто запрашивать пароль?»
Можно поставить 0 — если хотим, чтобы пароль запрашивался при каждом входе в личные разделы.
Можно написать 300 секунд — это значит раз в 5 минут.
Всё указывается в секундах. Для примера ставим ноль.
Пароль успешно добавлен. Теперь установлен пароль «привет».
Как это работает в сценарии
Возвращаемся на платформу. Когда есть пароль, переходим в сценарий «Авторизация».
Здесь первый блок — «Операция над переменной». Потом еще одна операция. Благодаря этим блокам идет проверка пароля.
Дальше блок: «Пожалуйста, введите пароль».
Если нажимаем «Отменить», то переходим в главный сценарий без доступа.
Если вводим пароль — есть условия: верный пароль или неверный? Совпадает он с установленным ранее или нет?
Если нет — проверяется через HTTP-запрос (он сверяет пароли). Приходит сообщение: «Пароль неверный, попробуйте ещё раз».
Если пароль совпадает — приходит сообщение с галочкой: «Всё отлично!» И пускает дальше.
Мини-приложения — сайты внутри Telegram
Первым делом оно открывается в мини-формате. Это называется мини-приложение.
Бот спрашивает: «Развернуть окно на весь экран?»
Нажимаем «Нет».
Сайт открылся прямо внутри Telegram в небольшом окошке! Можно даже перемещать его в разные стороны экрана.
Если нажать «Да», этот сайт откроется в полноразмерном режиме — на весь экран.
Защита от случайного закрытия
Здесь есть защита. Если нажать на крестик, появляется предупреждение:
«Внесенные изменения могут быть потеряны. Всё равно закрыть?»
Можно выбрать:
- «Всё равно закрыть» — подтверждение
- «Отмена» — остаться в приложении
Это очень удобно. Особенно если что-то заполняли на сайте — случайно не потеряете данные.
Зачем это разработчикам
Тут бот особенно полезен для разработчиков.
Сделали сайт и хотите посмотреть, как он выглядит на мобильных в Telegram? Просто добавляете ссылку в бота и открываете. Сразу видно:
- Правильно ли отображаются элементы
- Работают ли кнопки
- Как выглядит адаптивная версия
Очень удобно для тестирования!
Игры в подборках
Покажем ещё игры! Листаем подборки. Раздел «Игры».
Открываем, например, «Моя ферма». Сначала открывается мини-приложение.
«Развернуть во весь экран?» Не разворачиваем.
Можно начинать игру прямо здесь. Можно собирать урожай, нажимать на элементы — всё работает.
Закрываем. Снова идет проверка: «Точно закрыть?» Да, закрываем.
Списки — где всё хранится
Посмотрим на списки, где хранятся все данные.
Тут список с «Личными приложениями» — куда всё сохраняется.
Есть списки с «Ссылками», «Подборками», «Категориями».
Каждый список — это как таблица с полями. Туда записываются данные пользователей.
Глобальные переменные
И ещё что важно! Посмотрим на глобальные переменные.
Здесь сразу всё сохранено, чтобы потом не использовать длинные значения каждый раз. Просто называем их тут как хотим, а в сценарии уже используем короткие имена.
Это очень удобно! Например, есть API-ключи, ID списков, константы — всё в одном месте.
Настройки — сброс данных
Посмотрим ещё вкладку «Настройки». Там, кроме паролей, есть «Сброс личных данных».
Как работает сброс
Нажимаем на эту кнопку. Сначала бот спрашивает: «Точно хотите удалить все свои данные?»
Если нет — возвращаемся обратно в настройки.
Если да — дальше происходит удаление.
Сценарий сброса данных
Посмотрим на сценарий. Здесь первая «Цепочка сообщений» и первый вопрос: точно ли хотим удалить?
Если нет — обратно переходим в настройки.
Если да — идет блок «Удаление записи из списка». Из каких списков удаляются данные:
- Список «Личные приложения»
- Список «Ссылки»
Если всё успешно, дальше идет удаление переменных. Удаляются переменная пароля, переменная авторизации — всё стирается.
Дальше сообщение: «Операция выполнена успешно». И обратно переходим в настройки.
Что делает этот бот таким удобным
Подведем итог. Почему этот бот реально полезен?
Всё в одном месте — не нужно держать кучу вкладок открытыми. Все важные ссылки собраны в Telegram, мессенджере, которым пользуемся постоянно.
Подборки — можно смотреть готовые списки или создавать свои. Очень удобно организовывать пространство.
Можно даже играть! Прямо в боте есть игры — если нужно отдохнуть пару минут.
Скидочные карты — например, ту же карту Магнита или Пятёрочки можно сюда добавить. Зашли в магазин — открыли бота — вот карта!
Защита паролем — если храните важные ссылки, можно поставить пароль. Никто посторонний не получит доступ.
Всё организовано — не нужно искать закладки в браузере или листать сохраненки. Просто зайти в одно место и забрать все данные. Очень удобно!
Что можно подсмотреть для своих ботов
Если вы разработчик, вот какие приемы стоит запомнить:
Модульная структура — не делайте один огромный сценарий! Разбивайте на отдельные части, создавайте папки. Потом будет намного проще поддерживать.
Deep Linking — функция «Поделиться» с прямыми ссылками. Делает бота вирусным!
Мини-приложения — можно открывать сайты прямо внутри Telegram. Отлично для демонстрации проектов.
Защита от случайных действий — подтверждения перед удалением, предупреждения перед закрытием. Пользователи это оценят!
Система авторизации — если нужна защита данных, можно реализовать через блоки с условиями и переменные.
Использование списков — для хранения данных каждого пользователя отдельно. С фильтрацией по User ID.
Глобальные переменные — для удобства и безопасности. Все длинные значения в одном месте.
Всё это можно применить в своих проектах!
Заключение
Надеемся, вам было полезно и интересно посмотреть на этот бот. Обязательно перейдите, протестируйте, посмотрите, как всё работает! Даже если не планируете им пользоваться — просто изучить архитектуру очень полезно. Можно многому научиться, глядя на чужие работы.
До встречи в следующих материалах! 🚀
Полезные ссылки
Ссылка на бота:
Бесплатная регистрация на платформе Watbot для создания чат-ботов:
Видео-обзор ОСВОБОДИ ПАМЯТЬ: ЧАТ-БОТ ДЛЯ ХРАНЕНИЯ И УПРАВЛЕНИЯ ФАЙЛАМИ:
