Создать Telegram Mini App с помощью нейросетей можно: ИИ хорошо справляется с макетами экранов, логикой каталога и формы, текстами интерфейса. Вручную остаются настройка бота в Telegram, хостинг, проверка данных пользователя на сервере, оплата и проверка на настоящем телефоне. Так было и в моем проекте «Таро и Тени»: я начинала с макетов экранов, инструменты под каждый этап подбирала сама, а дальше приложение собиралось и много раз проверялось в самом Telegram.
Ниже разберу, что конкретно ускоряет нейросеть, где без человека не обойтись и как проходит работа от идеи до первой версии.
Что такое Mini App и чем оно отличается от бота
Обычный бот общается сообщениями и кнопками в чате. Mini App — это веб-приложение, которое открывается внутри Telegram поверх чата: со своими экранами, поиском, фильтрами, формами. Технически это веб-страница, но Telegram передает ей данные о пользователе, цвета текущей темы и дает доступ к своим элементам интерфейса.
Когда хватит бота, а когда нужно мини-приложение? Если пользователь задает вопрос и получает ответ, записывается на одно время или выбирает из трех вариантов, обычного бота достаточно. Если нужно листать каталог, искать, сравнивать, складывать в избранное и заполнять форму из нескольких полей, сообщения в чате становятся неудобными. Тогда и появляется смысл в мини-приложении: человек остается в Telegram, но получает привычный интерфейс сайта.
Открыть мини-приложение можно по-разному. По документации Telegram, бот может показывать его через кнопку меню, у бота можно настроить главное мини-приложение, которое запускается из профиля бота или по прямой ссылке вида t.me/имя_бота?startapp. Все это настраивается через @BotFather.
Путь пользователя обычно выглядит так:
- Бот: человек находит его в поиске, по ссылке или QR-коду.
- Кнопка: открывает мини-приложение.
- Мини-приложение: каталог, карточки, форма.
- Сервер: принимает данные и проверяет, что они пришли от Telegram.
- Заявка: попадает к владельцу бизнеса.
Нейросеть помогает на третьем шаге больше всего. Остальные звенья требуют ручной настройки.
Что нейросеть делает при создании Mini App
Интерфейс и экраны
Макеты экранов — то, с чего удобно начинать с ИИ. В «Таро и Тени» я начала именно с макетов: каталог карт, карточка, избранное, тарифы, форма. На этом этапе можно быстро перебрать варианты, пока не закреплена логика и ничего не жалко выбросить.
Сильная сторона нейросети здесь — скорость черновиков. Слабая — она проектирует для абстрактного экрана. Мини-приложение живет внутри Telegram на телефоне: сверху шапка Telegram, снизу системные элементы, ширина экрана небольшая. Это нужно прямо указывать в задании, иначе макет будет красивым на компьютере и тесным в телефоне.
Еще одна деталь, которую стоит сразу заложить в задание, — темы оформления. Telegram бывает светлым и темным, и мини-приложение получает от него текущую схему и цвета. Если макет рассчитан только на светлый фон, в темной теме часть текста может потеряться. Нейросеть учтет это, если попросить, но сама вспомнит не всегда.
Поэтому рамки я фиксирую еще до макетов: что это мини-приложение внутри Telegram, на какой ширине экрана и с какими отступами от системных элементов оно живет, как выглядит в светлой и темной теме, какие в нем экраны и что человек видит, когда поиск ничего не нашел или загрузка не удалась. Если рамки не заданы, красивый макет потом приходится переделывать.
Логика каталога и формы
Каталог с поиском, фильтрами и избранным — понятная задача для нейросети. В первой версии «Таро и Тени» это каталог из 78 карт: 22 Старших и 56 Младших арканов, поиск по русским и английским названиям, фильтры, избранное, которое хранится на устройстве. Еще шесть тем видеоразборов, тарифы, интерфейс формы заявки и вход с сайта по QR-коду.
Чтобы нейросеть собрала такую логику без ошибок, данные лучше подготовить заранее: список всех элементов каталога с полями, правила фильтров, что считается совпадением при поиске. Если поиск должен работать на двух языках, это тоже нужно сказать явно.
Так же заранее стоит решить, где хранятся данные пользователя. Избранное в «Таро и Тени» хранится на устройстве: это просто и не требует сервера, но если человек откроет приложение на другом телефоне, избранного там не будет. Для первой версии такое решение нормально. Для личного кабинета с историей заказов уже нужен сервер, и это меняет объем работы.
Технически приложение собрано на React, TypeScript и Vite и работает как PWA. Для мини-приложения это не обязательный набор, но связка удобна: страницы собираются быстро и легко проверяются.
Тексты и графика
Тексты кнопок, подсказки, сообщения об ошибках и пустых состояниях нейросеть пишет быстро. Проверять их все равно нужно: на узком экране длинная подпись ломает кнопку, а сообщение «что-то пошло не так» ничего не объясняет человеку.
С графикой нейросеть тоже помогает, но тут есть подвох, который в «Таро и Тени» стоил отдельной работы: вес. Первый экран весил 2,4 МБ, после оптимизации — около 0,9 МБ. Иконки поначалу весили 227–380 КБ каждая, после — 13–17 КБ. Для мини-приложения, которое открывают с мобильного интернета, это заметная разница.
Поэтому требования к весу картинок и порядку загрузки я задаю заранее, а не исправляю в конце. Без них интерфейс получается красивым, но долго открывается в метро.
Что остается ручной работой
Бот и настройки в Telegram
Мини-приложение не существует отдельно от бота. Нужно создать бота, настроить кнопку меню или главное мини-приложение, указать адрес приложения, проверить, как оно открывается из чата, из профиля бота и по прямой ссылке. Все это делается через @BotFather, и нейросеть здесь может только подсказать порядок действий.
Сюда же относится все, что человек видит до открытия приложения: имя бота, описание, приветственное сообщение, подпись на кнопке. Тексты для них нейросеть предложит, но выбрать и вписать их придется самостоятельно. От этих мелочей зависит, поймет ли человек, зачем нажимать на кнопку.
- Хостинг и адрес.Мини-приложение — это веб-страница, которую нужно где-то разместить. Хостинг, домен, адрес, который указывается в настройках бота, — все это ручная работа. И отсюда же неожиданные ошибки. В «Таро и Тени» появлялась ошибка «Страница не найдена»: Telegram добавлял к адресу свои служебные данные, и приложение не узнавало страницу. Исправила обработкой маршрутов. Нейросеть такую ошибку не предскажет, пока не увидит ее в работе.
- Проверка данных пользователя на сервере.Telegram передает мини-приложению данные о пользователе. Документация прямо предупреждает: данные из поля initDataUnsafe нельзя считать надежными, а initData нужно проверять на сервере бота до того, как их использовать. Иначе любой может подставить чужой идентификатор.
Простыми словами: мини-приложение открывается в Telegram и получает от него «пропуск» с данными пользователя. Сам по себе этот пропуск ничего не гарантирует, пока сервер не проверит подпись Telegram. Если в приложении есть личный кабинет, заказы или что-то, что нельзя показывать чужим, без серверной проверки запускаться нельзя.
Эту проверку нейросеть может написать, но решение, где она выполняется и что происходит при неудачной проверке, принимает человек. И проверять, что все работает, тоже человеку.
Оплата
В первой версии «Таро и Тени» оплаты нет: тарифы показаны, а форма заявки подготовлена к отправке через бота в следующих версиях. Если оплата нужна, разбираться придется с правилами Telegram. По документации, физические товары и услуги оплачиваются через сторонних платежных провайдеров, а цифровые товары и услуги внутри Telegram — в Telegram Stars. Выбор схемы и подключение провайдера — ручная работа.
Для первой версии часто разумно обойтись без оплаты, как в «Таро и Тени»: показать тарифы и собрать заявки. Так проще проверить, нужен ли продукт людям, прежде чем разбираться с платежами, возвратами и чеками.
Как проходит работа: от идеи до первой версии
Работа над мини-приложением начинается не с кода, а с ответа на вопрос, что человек должен сделать внутри Telegram и что получить в конце: выбрать товар, записаться, найти нужную карточку. От этого зависят данные, которые нужно собрать заранее, экраны, логика и то, что точно не войдет в первую версию. Дальше идут макеты на ширину телефона, сборка, настройка бота, хостинг и адрес. ИИ ускоряет почти каждый из этих этапов, но связать их в работающее приложение и принять результат — задача человека, который понимает, как устроены и интерфейс, и Telegram, и серверная часть.
Больше всего выясняется на проверке в самом Telegram на телефоне. В «Таро и Тени» после такой проверки понадобилось более 20 правок интерфейса, проверялась ширина экрана 320–430 px. Автоматические проверки следят за данными и механизмами приложения: каталогом, поиском, фильтрами, избранным — всем, что легко сломать при следующей правке. И отдельное решение — что отложить. В «Таро и Тени» ИИ-расклады — план развития, а не функция первой версии.
Кто что делает: ИИ и человек
| Этап | Что делает ИИ | Что делает человек |
|---|---|---|
| Идея и сценарий | Предлагает варианты экранов | Решает, что нужно пользователю |
| Макеты | Быстро собирает черновики | Проверяет на ширине телефона |
| Логика каталога и формы | Пишет код по данным | Готовит данные и правила |
| Тексты интерфейса | Пишет подписи и подсказки | Проверяет длину и смысл |
| Бот и настройки | Подсказывает порядок | Настраивает в @BotFather |
| Хостинг и адрес | Подсказывает варианты | Размещает и проверяет адрес |
| Данные пользователя | Пишет проверку initData | Решает, где и как проверять |
| Оплата | Помогает с кодом | Выбирает схему и провайдера |
Что проверить до запуска
Список короткий, но каждый пункт в моем проекте хотя бы раз давал ошибку:
- Приложение открывается всеми способами: из кнопки меню, из профиля бота, по прямой ссылке, по QR-коду с сайта.
- Нет ошибки «Страница не найдена» при открытии с параметрами от Telegram.
- Интерфейс помещается на узких экранах, ничего не обрезается и не уезжает под системные элементы.
- Светлая и темная тема Telegram: текст читается в обеих.Telegram передает приложению цвета темы, и их стоит использовать.
- Первый экран загружается быстро на мобильном интернете: проверьте вес страницы и картинок.
- Данные пользователя проверяются на сервере, а не берутся из initDataUnsafe.
- Форма заявки сообщает, что произошло после отправки, и не теряет введенное при ошибке.
После запуска работа не заканчивается. Каждая правка в коде означает новую проверку в Telegram на телефоне, потому что то, что выглядит нормально в браузере на компьютере, внутри Telegram может вести себя иначе. Автоматические проверки ловят поломки в данных и логике, но внешний вид все равно смотрит человек.
Если планируете свое мини-приложение, посмотрите, как устроена разработка Telegram Mini App, а если задача выходит за рамки каталога и формы, это уже нестандартная разработка. Обсудить идею можно через квиз на mara-craft.com: я посмотрю, что пойдет в первую версию, а что лучше отложить.