Разработка Telegram Mini App обычно начинается с фразы «хотим как у конкурента», а по факту сводится к трём слоям: веб-странице, которая открывается внутри Telegram, боту, который её запускает и присылает уведомления, и интеграциям с оплатой, доставкой или CRM поверх этого. Я собирал такие приложения и под каталог товаров с оформлением заказа, и под запись на услуги, и под программу лояльности с начислением баллов, поэтому в статье раскладываю разработку по этапам, стеку и срокам, на которые реально стоит рассчитывать.
Что такое Telegram Mini App и когда она нужна бизнесу
Mini App - это обычная веб-страница на HTML, CSS и JavaScript, которая открывается не в браузере, а прямо внутри Telegram: по кнопке в меню бота, по инлайн-кнопке под сообщением или по прямой ссылке вида t.me/имя_бота/имя_приложения. Telegram передаёт странице объект window.Telegram.WebApp с данными о пользователе, темой оформления (светлая или тёмная), размерами видимой области и набором готовых элементов интерфейса: кнопка снизу экрана, кнопка «назад», вибрационный отклик на действия.
От обычного бота с кнопками и текстовыми сообщениями Mini App отличается тем, что внутри неё можно построить полноценный интерфейс: каталог с фильтрами и корзиной, календарь записи, личный кабинет с историей заказов. От обычного сайта - тем, что пользователю не нужно ничего скачивать и регистрироваться, Telegram уже знает, кто он, и передаёт эти данные странице через подписанный набор параметров.
По моей практике мини-приложение имеет смысл, когда у бизнеса уже есть аудитория в Telegram-канале или боте и нужно превратить переписку в понятный интерфейс: витрину, форму записи, личный кабинет. Если аудитории в Telegram ещё нет, обычно быстрее и дешевле сделать интернет-магазин или лендинг, а мини-приложение подключить как ещё один канал продаж позже.
Из каких этапов состоит разработка мини-приложения для Telegram
Технически проект разбивается на шаги, которые почти не меняются от задачи к задаче:
- Регистрация приложения в BotFather: создаётся бот, если его ещё нет, для него включается Mini App и указывается адрес фронтенда, обязательно по HTTPS - без SSL или с самоподписанным сертификатом Telegram страницу не откроет.
- Прототип экранов с учётом ограничений Telegram: отступы под системные элементы, работа в светлой и тёмной теме, кнопка «назад» вместо привычной шапки сайта.
- Frontend-разработка интерфейса и подключение Telegram Web App JS API: получение темы, данных пользователя, управление кнопками.
- Backend: обработка запросов от приложения, проверка подписи initData, хранение заказов или записей, отправка уведомлений через бота.
- Интеграции: оплата, доставка, CRM - в зависимости от задачи.
- Тестирование внутри самого Telegram на iOS, Android и десктопе: рендер и жесты в разных клиентах отличаются, это всегда отдельный круг правок.
- Публикация и настройка меню бота, чтобы приложение открывалось по кнопке или команде.
Проверку initData часто недооценивают. Telegram подписывает данные о пользователе HMAC-подписью на основе токена бота, и backend обязан пересчитать эту подпись и сверить её перед тем, как доверять пришедшему id пользователя. Без этой проверки в запросе к серверу можно подставить чужой id.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Технологический стек: фронтенд, бэкенд и бот-обвязка
Фронтенд мини-приложения - это React, Vue или обычный JavaScript поверх HTML, в зависимости от сложности экранов. Для формы записи в несколько полей хватает чистого JS, для каталога с корзиной и фильтрами обычно беру React.
Backend зависит от того, что приложение реально делает. Если это витрина с формой заказа и уведомлением в чат, обработчик я пишу на PHP на том же хостинге, где уже крутится основной сайт - отдельный сервер не нужен, PHP умеет пересчитать HMAC-подпись initData и работать с MySQL для хранения заказов и записей не хуже любого другого языка. Для блокировки слота записи на время оплаты хватает обычной транзакции с уникальным индексом в MySQL.
Другое дело, если бот вокруг Mini App должен вести диалог, помнить состояние (какой шаг сценария сейчас у пользователя), присылать отложенные напоминания или разбирать очередь фоновых задач. Здесь я беру aiogram на Python, потому что для сценариев с состояниями и асинхронной обработкой сообщений это предсказуемый инструмент. Для aiogram-бота нужен отдельный сервер: там держат долгоживущий процесс, который принимает вебхуки или опрашивает Telegram, и его придётся администрировать - следить за перезапуском, обновлять сертификат, оплачивать сервер ежемесячно. Для простого приёма формы или разовой отправки уведомления такой сервер не нужен, PHP-обработчика на обычном хостинге достаточно.
Если по задаче нужно не писать интеграцию кодом, а быстро собрать цепочку «заявка из mini app - карточка в CRM - уведомление менеджеру», беру n8n: сценарий с вебхуком и парой узлов собирается за день вместо недели разработки.
Оплата, доставка и CRM: какие интеграции нужны мини-приложению
Оплата подключается через Bot API: приложение или бот отправляет пользователю счёт стандартным методом, а деньги проводит платёжный провайдер, чей токен добавлен в BotFather. У меня в проектах провайдером чаще всего выступает Т‑Банк - токен вставляется в настройки бота тем же способом, что и в обычном интернет-магазине на WooCommerce или Tilda.
Доставка обычно считается по API транспортной компании: беру данные о тарифах и сроках из API СДЭК, как делаю это для сайтов на других платформах, и показываю пользователю готовую стоимость прямо на экране оформления заказа.
Передачу заявок в CRM собираю двумя способами. Если сценарий простой - новая заявка становится карточкой в amoCRM или Bitrix24, - ставлю между mini app и CRM n8n и обхожусь без кода. Если логика сложнее (сверка остатков, расчёт скидки, обновление статуса заказа в нескольких системах), пишу прямую интеграцию на PHP или Laravel. Отдельно скажу: контакты клиентов из формы или личного кабинета храню на серверах в РФ, а не в иностранных облачных таблицах.
Если кроме самого интерфейса нужен ещё и полноценный диалоговый бот - с напоминаниями, FAQ или оплатой вне интерфейса mini app, эту часть я оформляю как разработку Telegram-бота отдельным этапом: логика и тестирование у бота и у фронтенда mini app разные, и объединить их в один спринт обычно не получается.
Сколько по времени занимает разработка Telegram Mini App
Сроки я обычно считаю по этапам, а не по проекту целиком, потому что интеграции - самая непредсказуемая часть.
| Этап | Срок по моей практике |
|---|---|
| Прототип экранов и согласование интерфейса | 3-5 дней |
| Frontend на 5-8 экранов | 1,5-2 недели |
| Backend, проверка initData, интеграции | 1-3 недели в зависимости от числа интеграций |
| Тестирование в клиентах Telegram и правки | 3-5 дней |
Итого простое mini app без оплаты - каталог, форма записи, справочная информация - у меня обычно занимает 3-4 недели от старта до публикации. Приложение с оплатой, личным кабинетом и интеграцией CRM растягивается до 6-10 недель: добавляются согласования с платёжным провайдером и тестирование сценариев оплаты на реальных картах.
Сколько стоит разработка Telegram Mini App: расчёт по задачам
Готовой цены «за Mini App» не существует, я считаю по тому, что реально входит в задачу, и ориентируюсь на те же категории, что и для любого веб-проекта:
| Что нужно | Ближайшая категория | Цена |
|---|---|---|
| Каталог или форма без оплаты и личного кабинета | уровень лендинга на Next.js | от 80 000 ₽ |
| Витрина с оформлением заказа и оплатой | интернет-магазин под ключ | от 80 000 ₽ |
| Личный кабинет, сложная бизнес-логика, SaaS-сценарий | веб-сервис / SPA | от 300 000 ₽, срок от 8 недель |
| Отдельный бот для запуска приложения и уведомлений | Telegram-бот | от 30 000 ₽ |
| Чат с ответами по базе знаний внутри приложения | AI-интеграция | от 50 000 ₽ |
| Передача заявок в CRM без написания кода | автоматизация в n8n | от 25 000 ₽ |
Бот и фронтенд mini app в смете обычно идут отдельными строками, даже если их делает один разработчик: это разные модули с разным циклом тестирования, и объединять их в одну цифру смысла нет. Если пока не понятно, что из перечисленного нужно именно вам, дешевле сначала взять консультацию (от 3 000 ₽) и получить смету под конкретный сценарий, чем закладывать бюджет с запасом на всё сразу.
Условия и возможности Telegram меняются, поэтому перед запуском я уточняю их у самого сервиса.
Частые вопросы
Можно ли сделать Telegram Mini App без бэкенда?
Технически да, если приложению не нужно хранить данные между сеансами и достаточно статичной информации, например справочника или визитки. Но как только появляется форма, заказ или личный кабинет, без backend не обойтись: именно он проверяет подпись initData и защищает от подмены пользователя, а хранить заказы или записи в самом фронтенде небезопасно и неудобно.
Чем Mini App отличается от обычного Telegram-бота?
Бот работает через сообщения и кнопки: пользователь нажимает, бот отвечает текстом или следующей клавиатурой. Mini App - это веб-интерфейс поверх той же переписки: внутри неё можно построить каталог с фильтрами, календарь или личный кабинет, чего в чистом боте сделать неудобно. На практике часто нужны оба инструмента: бот запускает приложение и присылает уведомления, а сам интерфейс живёт в mini app.
Нужен ли отдельный сервер для Telegram Mini App?
Зависит от задачи. Для фронтенда и простого PHP-обработчика формы хватает обычного хостинга с HTTPS, на котором уже крутится сайт. Отдельный сервер понадобится, если рядом с приложением работает бот со сложными сценариями на aiogram или фоновые задачи - такой процесс должен работать постоянно, а не по запросу, и его придётся администрировать и оплачивать отдельно от хостинга сайта.
Можно ли встроить оплату прямо в мини-приложение?
Да, оплата вызывается тем же методом Bot API, что и в обычном боте - приложение может открыть форму оплаты, не выходя за пределы Telegram. Для этого в BotFather подключается токен платёжного провайдера, у меня это чаще всего Т‑Банк, а сумма и состав заказа передаются в запросе на выставление счёта.