Разработка мини-приложений для мессенджеров

Создать мини-приложение стоит тогда, когда клиенту нужно больше, чем кнопки в чат-боте: листать каталог товаров, выбирать время записи, оплачивать заказ. Мини-приложение (веб-приложение, которое открывается внутри мессенджера) мы делаем для Telegram, MAX и ВКонтакте. Пользователь нажимает кнопку в боте или переходит по ссылке, и интерфейс запускается в том же окне, где он переписывается с друзьями. Это приложение без установки из магазина и без отдельной регистрации: мессенджер передает ему данные профиля, поэтому вход проходит без пароля.

Mini Apps: как это устроено

Mini Apps - общее название для веб-приложений, которые работают внутри мессенджера. Технически это веб-страница на HTML, CSS и JavaScript. Код лежит на сервере, мессенджер открывает страницу во встроенном браузере по защищенному протоколу https и дает ей доступ к своему API: данным пользователя, цветовой теме, системным кнопкам и платежам.

У каждой платформы свои правила запуска:

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

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

Что делают в мини-приложении

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

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

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

Магазин мини-приложений

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

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

Mini Apps AI: мини-приложения с искусственным интеллектом

Запрос про mini apps AI обычно означает одно из двух: мини-приложение, внутри которого работает ИИ, или попытку собрать приложение нейросетью без программиста.

Первый вариант мы делаем. Консультант подбирает товар по описанию своими словами, помощник собирает заявку из свободного текста, сервис распознает фото чека или документа. Языковую модель подключаем по API на стороне сервера, поэтому ключи доступа не попадают в код, который видит пользователь. Ответы модель строит по вашей базе данных: каталогу, прайсу, правилам записи. Так ассистент отвечает по фактам компании, а не по общим знаниям из интернета.

Со вторым вариантом сложнее. Нейросеть быстро соберет экран с кнопками, но настройка оплаты, проверка подписи данных от мессенджера, хранение заказов и защита от поддельных запросов остаются работой разработчика. Прототип из генератора годится, чтобы показать идею команде или инвестору. Для работы с живыми клиентами его обычно переписывают.

Mini App id и ссылки на приложение

Mini App id - идентификатор, по которому платформа находит приложение. Во ВКонтакте у каждого мини-приложения есть числовой ID, из него строится адрес вида vk.com/app и номер приложения. В Telegram мини-приложение привязано к боту: прямая ссылка состоит из имени бота и короткого имени приложения, которое задают при настройке в BotFather (служебном боте Telegram для управления ботами).

Эти ссылки нужны для рекламы, QR-кода на кассе, кнопки на сайте и рассылок. В ссылку можно добавить параметр запуска, например код акции или номер филиала, и приложение сразу откроет нужную страницу. По тем же параметрам мы считаем, какой канал привел клиента.

Регистрацию приложения, настройку домена и ссылок берем на себя. От вас нужно дать доступ к боту или сообществу, права на приложение остаются у вашей компании.

Мини-приложение, чат-бот или мобильное приложение

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

По сравнению с мобильным приложением мини-приложение быстрее запустить, и его не нужно публиковать в App Store и Google Play. Клиент ничего не скачивает: переходит по ссылке и сразу видит нужный экран. Есть и ограничения. Вы зависите от правил площадки и возможностей ее API. Если нужен офлайн-режим, работа в фоне или глубокий доступ к датчикам телефона, честнее сразу делать нативное приложение.

Разработка мини-приложений

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

Интерфейс пишем на JavaScript или TypeScript с React, серверную часть на Node.js или Python. Сервер хранит базу заказов и клиентов, проверяет подпись данных от мессенджера и общается с платежными сервисами. После тестирования на реальных телефонах публикуем приложение, настраиваем бота и домен, а затем берем проект на поддержку.

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