
Продолжая тему с Telegram Mini Apps (первый пост — вводный, второй — плюсы и минусы), посмотрим реальный пример создания такого приложения с картинками и пояснениями.
Оглавление:
Создание приложения в BotFather
Пример бизнеса
Абсолютно любой бизнес — например, точка по продаже кофе. Концепция Дринкит/Даблби, то есть можно заказать и оплатить кофе/еду в приложении и забрать по пути готовый заказ. Плюс, если вы делаете самостоятельно доставку (не через агрегатор), будет возможность принимать заказы на доставку.
Цель
Без единой строки кода создать для кофейной точки полноценное приложение, где реализованы сценарии:
- Меню напитков и еды.
- Прием заказов (на доставку и самовывоз)
- Получение предоплаты
- Управление заказами (изменение статуса)
- Аналитика по заказам
Создание приложения в BotFather
Сначала нам нужно получить API Key из BotFather. Ищем BotFather через поиск в Телеграме и жмем кнопку «Open»:

У BotFather появилось собственное приложение, на скрине ниже жмем «Create a New Bot»:

Открывается экран, где нужно ввести данные:
- Bot Name.
- Описание (необязательно, всегда можно потом добавить).
- Ссылка на приложение: обычно это тот же самый Bot Name, но с припиской «_bot» (приписка — необходимое условие).
- Можно добавить лого для приложения (или в любой момент позже).

Вот так можно минимально заполнить данные приложения:

Создание проекта в Mini Apps Builder
Теперь идем на сайт Mini Apps Builder, создаем аккаунт в один клик с помощью Google-почты (или через логин/пароль). Открывается страница с выбором типа шаблона:

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

Заполняем данные проекта:
- Название. Проще всего сделать его аналогичным названию в BotFather, особенно если будет больше одного проекта.
- Валюта. Выбираете валюту, в которой будете принимать платежи. Можно выбрать только одну валюту.
- Статус. Оставляете «активный».
- Токен бота. Это тот ключ, который скопировали из BotFather после создания приложения.
- Тип. Публичный или приватный. Выбираете «публичный», т. к. в этом примере мы создаем приложение для бизнеса, которым пользуются клиенты.
Загружаем товары
У нас уже создано приложение, теперь нужно загрузить описание и фото товаров. Товар — это общее название позиций, которые вы продаете. В нашем примере это список продуктов.

Чтобы создать товар, нужно заполнить его описание:
- Название
- Цена
- Принадлежность к какой-либо категории
- Минимум 1 картинка
- Описание
После создания всех товаров, которые вы продаете, нужно настроить сценарии получения и оплаты товара.
Настройка «точки»
Под «точкой» подразумевается физическое местоположение вашего заведения. Т. к. нам нужен адрес в сценарии самовывоза, когда клиент сам забирает заказ.
В разделе «Доставка и оплата» настраивается каждая точка:
- Можно задать ей уникальное название. Это для вашего удобства, клиенты его не видят.
- Адрес точки. Это увидит клиент в вашем приложении, когда будет выбирать, откуда забирать заказ.
- Формат получения заказа: самовывоз или доставка.
- Время работы точки: приложение покажет, что вы открыты, скоро закрываетесь или закрыты.

Способы оплаты
Также для каждой точки и каждого типа получения заказа настраивается способ приема оплаты:
- Полная предоплата картой
- Оплата при получении картой
- Оплата при получении наличными
При этом у вас могут быть разные способы приема платежей в зависимости от способа получения товара. Остается последний шаг — подключить сервис для онлайн-оплаты.

В нашем тестовом приложении мы используем TipTop Pay, но полный список доступных сервисов на текущий момент выглядит так:
- ЮKassa (РФ)
- CloudPayments (РФ)
- Freedom Pay (весь мир)
- TipTop Pay (весь мир)
- Stripe (весь мир)
В выпадающем списке из платежных систем выбираете «TipTop Pay» и вставляете ключ (из админки TipTop Pay) в формате publicId:apisecret. Также указываете, как можно оплачивать заказы при доставке и самовывозе: наличными или картой.
Результат
Все готово! Можно посмотреть, что получилось: Food Store Test KZ. Для теста онлайн-оплаты вы можете использовать тестовую карту: 4242 4242 4242 4242. Введите любые валидные на текущий момент месяц/год, 3 любых цифры для CVV. На экране после оплаты выберите «Успех», тогда транзакция будет засчитана как успешная.


Итог
В этой статье мы показали пример создания приложения с помощью Mini Apps Builder для сегмента бизнеса, связанного с едой или доставкой еды. Это не весь доступный функционал сервиса, плюс у вас могут возникнуть какие-то вопросы по оформлению приложения. Мы постарались показать, что с Telegram Mini Apps вы можете без единой строчки кода создать приложение, очень похожее на нативное для Android/iOS! У нас рука набита, мы собираем такие приложения за полчаса. По началу у вас это может занять побольше времени, но, кажется, очевидно, что это на порядок быстрее разработки сайта или мобильного приложения. А соответственно, и дешевле.
Если у вас есть какие-то вопросы или запросы на доработку сервиса/идеи, пишите их в телеграм-группе или на почту support@miniappsbuilder.com.