На чем пишутся Telegram Mini Apps. И почему это важно понимать до старта разработки

8 Апр Время чтения 9 мин 263

Привет! Я Никита, сооснователь digital-агентства Vibes.

Мы занимаемся разработкой Mini Apps с момента их появления в Telegram в 2022 году. За это время мы создали более 60 приложений — для банков, сообществ, образовательных платформ и инфраструктурных проектов. Пишем обо всем этом в Telegram-канале, где нас читают уже больше 65 000 человек.

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

Почему я решил об этом рассказать

Сейчас почти каждый второй заказчик приходит с вопросом: «Мы слышали, что Mini App можно собрать за пару дней. Это правда?»

Правда — но не вся. Можно собрать, если:

Понимаешь, как работает Telegram WebApp API
Знаешь, на чем это пишется
Есть разработчик, дизайнер и бэкендер, которые не будут фейспалмить от архитектуры друг друга

На практике же происходит иначе: заказчик дает ТЗ, команда собирает MVP на коленке, в продакшен выходит костыль, который невозможно поддерживать или масштабировать. Через месяц все переделывается с нуля.

Эта статья — чтобы этого не случилось.

Что такое Telegram Mini App и где они живут

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

Важно понимать: Telegram не хостит сам Mini App. Telegram только предоставляет «контейнер» — окно, в котором запускается веб-приложение. Все остальное — на стороне разработчика: интерфейс, сервер, логика, безопасность, обработка данных.

Кстати, недавно мы с командой собрали большой гайд по Telegram Mini Apps: как работают, преимущества перед сайтами и мобильными приложениями, а главное — пошаговое руководство по созданию.

Пишите нам слово «ГАЙД» и забирайте самый подробный путеводитель по TMAs от команды Vibes.

На чем пишутся Telegram Mini Apps

Мини-приложения в Telegram — это по сути обычные web-приложения, написанные с использованием HTML, CSS и JavaScript. Но есть нюансы.

Клиентская часть:

Используются любые современные фронтенд-фреймворки:

React — чаще всего, из-за гибкости и распространенности.
Vue — если проект изначально построен на нем.
Vanilla JS — для суперлегких MVP.

Telegram предоставляет свой WebApp SDK, который позволяет:

Получать информацию о пользователе
Отправлять данные в Telegram-чат
Управлять темной/светлой темой
Взаимодействовать с кнопками, модальными окнами, списками

SDK подключается через Telegram API прямо в браузере и работает как мост между Telegram и вашим веб-интерфейсом.

Серверная часть:

Бэкенд может быть на чем угодно:

Node.js
Python (Django / Flask)
Go
PHP
Ruby

Главное — соблюдение Telegram API и продуманная архитектура, которая не завалится при росте нагрузки.

Хостинг:

Варианты:

Vercel / Netlify — для фронта
Render / Railway / Heroku — для бэкенда
Dedicated VPS / Облако (Yandex.Cloud / AWS / VK Cloud) — если нужны кастомные настройки

Мы, например, почти всегда деплоим фронт на Vercel, а бэкенд на Yandex Cloud или Render.

Почему важно понимать технологию до старта

Мини-апп — это не просто «бот с кнопками». Это полноценный продукт, и от того, как он спроектирован, зависит все:

Насколько быстро он откроется у пользователя
Будет ли он адаптирован под Telegram API
Как масштабируется бэкенд
Насколько безопасно обрабатываются данные

Если взять неподходящий стек, результат может быть красивым, но бесполезным. Например, на Flutter сделать Mini App можно, но запускать его в Telegram нельзя — он не откроется в webview.

Что будет, если делать без понимания

Вот с какими проблемами приходили к нам клиенты после запуска MVP у других команд:

Приложение не работает на iOS, потому что не учли поведение Telegram WebView
Нет аутентификации пользователя, потому что не внедрили авторизацию через Telegram
Сервер не выдерживает нагрузку, потому что все на одном сервере, без очередей и кэширования
Интерфейс не адаптирован под Telegram UI, все выглядит инородно и вызывает отторжение

А дальше — заново: дизайн, фронт, бэк, интеграция. Плюс потерянные недели и бюджет.