Разработка Telegram Mini Apps

Подробно

Telegram Mini App - веб-приложение, которое запускается прямо в Telegram из чата с ботом и работает как полноценный сервис: каталог, запись, оплата, личный кабинет. Мы разрабатываем такие приложения для бизнеса: проектируем экраны, пишем фронтенд и сервер, настраиваем бота и платежи, публикуем и поддерживаем. Пользователю не нужно скачивать мобильное приложение и заводить аккаунт: мессенджер Telegram передает данные профиля, а интерфейс подстраивается под светлую или темную тему. Для вас это продажи и запись там, где клиенты и так проводят время каждый день.

Создать мини-приложение в Telegram: из чего оно состоит

Любое мини-приложение Telegram собирается из трех частей.

• Чат-бот. Через него пользователь открывает приложение и получает уведомления о заказе, записи, смене статуса. Бота регистрируют в BotFather, там же задают ссылку на приложение.
• Фронтенд. Веб-интерфейс на HTML, CSS и JavaScript, чаще всего на React или Vue. Страница подключает скрипт Telegram и получает объект для работы с мессенджером: данные пользователя, тему, кнопки, всплывающие окна.
• Сервер. Хранит каталог, заказы и клиентов в базе данных, проверяет подпись данных запуска (строку от Telegram, по которой сервер убеждается, что запрос пришел от настоящего пользователя), принимает платежи и обменивается данными с CRM или 1С.

Отдельный экран входа не нужен. Telegram передает приложению имя, идентификатор и язык пользователя, а номер телефона приложение запрашивает с согласия человека одной кнопкой.

Открыть приложение можно из кнопки меню в чате с ботом, из кнопки под сообщением или по прямой ссылке. В ссылку добавляют параметр запуска, чтобы сразу показать нужный товар или акцию. Если хотите пройти путь самостоятельно, в блоге есть инструкция, как создать мини-приложение в тг с нуля. Для запуска на реальных клиентах мы добавляем то, что в учебных примерах обычно пропускают: проверку данных на сервере, обработку ошибок оплаты, логи и резервные копии базы.

Tg Mini Apps: что можно сделать внутри Telegram

Формат подходит для задач, где клиенту нужен экран внутри мессенджера, а не переписка:

• магазин с каталогом, фильтрами, корзиной и доставкой;
• запись в салон, клинику, студию или автосервис с выбором специалиста и времени;
• программа лояльности: бонусный счет, персональные предложения, история покупок;
• бронирование столиков, номеров, оборудования;
• внутренние инструменты для сотрудников: заявки, чек-листы, отчеты с выездов;
• промо-механики и игры для вовлечения аудитории канала.

Мини-приложение хорошо работает в связке с каналом компании: пост с кнопкой открывает каталог, а ссылка с параметром ведет сразу на товар из поста. Подписчик переходит от новости к покупке в два касания.

Платформа позволяет разработчику использовать инструменты, с которыми приложение ведет себя почти как нативное. Главная кнопка внизу экрана ведет к следующему шагу: оформить заказ, оплатить, записаться. Кнопка назад работает как в обычном приложении. Интерфейс берет цвета из темы пользователя, а виброотклик подтверждает нажатия. Приложение умеет открываться на весь экран, сканировать QR-код камерой и хранить небольшие настройки в облаке Telegram. Полный список возможностей Telegram сверяем с актуальной документацией на старте проекта, потому что мессенджер регулярно добавляет новые функции.

Как выглядели бы такие экраны, видно по демо-проектам Грядка, Ритмика и Терапис в блоке кейсов.

Оплата и возможности Telegram для продаж

Способ оплаты зависит от того, что вы продаете.

• Физические товары и офлайн-услуги: подключаем к боту платежного провайдера или ваш эквайринг. Клиент платит картой или через СБП (систему быстрых платежей), если ее поддерживает ваш платежный сервис, деньги приходят на расчетный счет компании.
• Цифровые товары и услуги внутри приложения: по правилам Telegram их продают за Telegram Stars (внутреннюю валюту мессенджера).

Для записи на услуги можно брать предоплату, чтобы клиенты реже пропускали визиты. После оплаты бот присылает чек и статус заказа, а менеджер видит заказ в CRM.

Использование Telegram как канала связи помогает с повторными продажами: бот напоминает о брошенной корзине, приглашает на повторную запись, сообщает о поступлении товара. Писать бот может только тем, кто сам его запустил, поэтому базу подписчиков собираем через приложение и ссылки в канале.

Miniapp Telegram или мобильное приложение

Мини-приложение выигрывает у мобильного приложения на старте. Не нужна публикация в App Store и Google Play, магазины не проверяют каждое обновление: исправление ошибки попадает к пользователям сразу после выкладки на сервер. Клиент открывает сервис по ссылке из канала или рекламы, без установки и регистрации. Один код работает на iPhone, Android и в десктопной версии мессенджера.

По деньгам разница тоже заметна. Простое MVP мобильного приложения на рынке стоит 1,5-3 млн руб. и занимает 3-4 мес., e-commerce обходится в 3-7 млн руб. Мини-приложение с похожими функциями обычно дешевле, потому что вместо двух нативных сборок разработчики делают один веб-интерфейс.

Ограничения тоже есть. Приложение живет по правилам мессенджера Telegram и не работает без него. Доступ к функциям телефона ограничен тем, что открывает платформа, а аудитория ограничена пользователями Telegram. Если бизнесу нужны офлайн-режим, работа в фоне или сложная обработка видео с камеры, лучше сразу смотреть на мобильное приложение. Другой вариант - начать с мини-приложения как MVP (минимальной версии продукта для проверки спроса) и перейти на натив позже.

Сколько стоит создать Telegram Mini App

Стоимость Telegram Mini App зависит от числа экранов, способа оплаты, интеграций с вашими системами и того, нужны ли админка для сотрудников и бот. Точную смету присылаем после брифа вместе с прототипом и планом работ, минимальная сумма заказа указана в блоке цены ниже.

Что сильнее всего влияет на цену:

• экраны и сценарии: каталог с корзиной и запись к мастеру отличаются по объему в разы;
• оплата: Telegram Stars для цифровых товаров подключается проще, чем эквайринг банка с чеками;
• интеграции: обмен заказами и остатками с 1С, CRM или складом часто занимает больше времени, чем сам интерфейс;
• админка: если сотрудники меняют товары, цены и расписание сами, нужна отдельная панель управления;
• бот: рассылки, уведомления о заказе и ответы на вопросы добавляют работы на серверной части.

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

Как мы делаем Telegram Mini Apps

Проект ведем по этапам с понятным результатом на каждом: ТЗ, прототип, дизайн, рабочая версия, публикация. Прототип и дизайн согласуем до начала программирования, чтобы не переделывать готовый код. На каждом этапе показываем результат, а не отчет о часах: кликабельный прототип, макеты, тестовую сборку в Telegram, которую вы открываете на своем телефоне.

Срок называем после брифа. Он зависит от числа экранов и интеграций, а еще от того, есть ли у вас готовый фирменный стиль и открытый API учетной системы, с которой приложение будет обмениваться заказами.

Разработка Web App Telegram на HTML, CSS и JavaScript

Web App - прежнее название Mini Apps, в документации Telegram оно встречается до сих пор. Интерфейс пишем на HTML, CSS и JavaScript или TypeScript, чаще на React. Верстку проверяем на узких экранах, в светлой и темной теме, на iOS и Android: встроенный браузер мессенджера ведет себя по-разному на разных устройствах.

Серверную часть делаем на Node.js или Python, базу данных на PostgreSQL. Сервер проверяет подпись данных запуска ключом бота, хранит заказы, отправляет уведомления через Bot API и обменивается данными с CRM, 1С, складом. Приложение размещаем на домене с https, без него Telegram не откроет страницу. Для рекламных запусков заранее настраиваем кэширование и мониторинг нагрузки. Для каталога и заказов делаем простую админ-панель, чтобы менеджер менял цены и статусы без программиста.

Telegram Mini Apps: заказать разработку

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

После брифа присылаем прототип, смету и план работ. Код, бот, домен и база данных оформляются на вашу компанию, после запуска вы получаете все доступы и документацию. На поддержке обновляем приложение под новые версии Telegram, следим за ошибками и добавляем функции по вашему плану.