В данной статье мы разберёмся, как создать 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.
Создавайте Telegram Mini Apps, не тратя лишнее время на сложную инфраструктуру. Пользуйтесь простыми и легко масштабируемыми подходами! https://www.qmedia.by/razrabotka_sajtov.html