В данной статье мы разберёмся, как создать Telegram Mini App, представляющее собой одностраничное приложение (SPA) с калькулятором юнит-экономики.

Рассмотрим архитектуру репозитория, особенности настройки деплоя на GitHub Pages и сборки с Webpack. В нашем проекте будет два режима расчетов (по факту и прогноз), реализованных через отдельные React-компоненты. С помощью Webpack управляем сборкой. Размещать код будем в репозитории GitHub для прозрачности и удобства контроля версий. А итоговый продукт интегрируем в Telegram.

Но давайте по порядку…

Что такое Telegram Mini App?

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

Особенности архитектуры проекта

1. Структура репозитория

Эта структура чётко делит код на независимые компоненты для каждого режима расчёта и упрощает управление ресурсами, обеспечивая лёгкую поддержку и развитие проекта.

2. Логика работы компонентов

FactCalculator.jsx и PrognosisCalculator.jsx позволяют переключать режимы приложения, обеспечивая расчёты для каждого из них.

Results.jsx — автономный компонент, который обрабатывает результаты и отображает их в интерфейсе.

Сборка с помощью Webpack

Webpack используется для организации модульного кода и превращения его в оптимизированное для продакшена SPA-приложение.

Конфигурация Webpack включает:

Entry point — главный файл для сборки;
Loaders — для работы с JavaScript и CSS;
Plugins — для обработки HTML и CSS;
DevServer — сервер локальной разработки.

Деплой на GitHub Pages

Чтобы разместить приложение на GitHub Pages, используем GitHub Actions для автоматизации деплоя.

Подготавливаем репозиторий
Создаём репозиторий на GitHub и загружаем в него исходные файлы проекта.
Настраиваем GitHub Actions
Создаём файл .github/workflows/deploy.yml в корне репозитория с конфигурацией для автоматического деплоя
Запускаем Actions
После каждого коммита и пуша GitHub Actions соберёт проект и автоматически задеплоит его на GitHub Pages.

После этого приложение станет доступно по URL. На этом этапе вы уже сможете открыть его и поделиться ссылкой.

Наше приложение, например, доступно по ссылке:

https://qmedia-dev.github.io/telegram-unit-calc/

Интеграция в Telegram

Чтобы подключить мини-приложение к Telegram:

Зарегистрируйте бота через @BotFather и получите токен API.

Укажите URL мини-приложения (ссылку на ваш GitHub Pages) в настройках бота.

Заключение

Создание мини-приложения для Telegram с может быть простым и эффективным, когда весь процесс автоматизирован: от сборки до деплоя. Webpack оптимизирует фронтенд-код, а GitHub Pages обеспечивает лёгкий хостинг. А для интеграции приложения в Telegram достаточно просто указать URL развернутого проекта в Telegram Bot API.