Telegram Mini App (Web App): полное руководство по созданию своего приложения

Содержание
  1. Что такое Telegram Mini Apps и зачем их создавать
  2. Статистика платформы в 2026 году
  3. Что нового в 2025–2026: Mini Apps 2.0
  4. Fullscreen и landscape-режим
  5. DeviceStorage и SecureStorage
  6. Датчики устройства
  7. Биометрия: Touch ID и Face ID
  8. Геолокация
  9. Медиа-возможности
  10. Эмодзи-статусы
  11. Истории (Stories)
  12. Монетизация Mini Apps: Telegram Stars
  13. Как работают Stars
  14. Платные подписки с автосписанием
  15. TON интеграция
  16. Реклама за Stars
  17. Схема монетизации
  18. Как создать Mini App с нуля
  19. Шаг 1: Создаём бота через @BotFather
  20. Шаг 2: Фронтенд — подключение и основные методы
  21. Шаг 3: Бэкенд на Python — валидация, обработка данных и платежи
  22. Шаг 4: Деплой и тестирование
  23. Шаг 5: Публикация в Telegram Apps Center
  24. Лучшие примеры Mini Apps в 2026
  25. Ответы на эти вопросы могут быть для вас полезными
  26. Что такое Telegram Mini App?
  27. Чем Mini App отличается от Telegram-бота?
  28. Нужно ли платить за создание Mini App?
  29. Как добавить Mini App в Telegram Apps Center?
  30. Можно ли зарабатывать на Mini Apps?
  31. Что такое Telegram Stars и как их использовать?
  32. Как сделать Mini App полноэкранным?

Что такое Telegram Mini Apps и зачем их создавать

Telegram Mini App — это полноценное HTML5-приложение, работающее прямо внутри мессенджера без установки. В 2026 году платформа вышла на новый уровень: полноэкранный режим, доступ к датчикам устройства, встроенные платежи через Stars и аудитория свыше 950 миллионов пользователей. В этом руководстве разберём всё — от первой строки кода до публикации в Telegram Apps Center

Telegram Mini Apps — это веб-приложения на HTML5, CSS и JavaScript, которые запускаются внутри Telegram через встроенный браузер. Пользователь нажимает кнопку в чате или переходит по ссылке — и видит полноценный интерфейс: магазин, игру, сервис бронирования, финансовое приложение. Всё это без скачивания из App Store или Google Play.

До 2023 года технология называлась Telegram Web Apps. Затем команда Telegram провела ребрендинг, и теперь официальное название — Mini Apps. Суть не изменилась: это по-прежнему веб-страницы, которые получают данные о пользователе через JavaScript-библиотеку telegram-web-app.js и взаимодействуют с Telegram API. Но возможности выросли кратно

Для всех, кто не хочет разбираться в коде — собрал список конструкторов Telegram Mini App

Статистика платформы в 2026 году

По данным каталога FindMini.app, к марту 2026 года в экосистеме зарегистрировано более 5 800 мини-приложений. Это в четыре раза больше, чем было в начале 2024 года.

Основные категории по месячной активной аудитории (MAU):

КатегорияMAU (млн)Доля
Крипто / DeFi5732%
Игры5229%
Утилиты и инструменты2816%
E-commerce2212%
Финансы и платежи1911%

Криптовалютные и DeFi-приложения лидируют благодаря интеграции с блокчейном TON. Игры занимают второе место — и именно в игровом сегменте fullscreen-режим и доступ к датчикам устройства дали самый заметный эффект.

Telegram Mini App — это не «бот с кнопками». Это полноценная платформа для запуска бизнеса внутри мессенджера, где уже есть аудитория, платежи и каналы дистрибуции

Что нового в 2025–2026: Mini Apps 2.0

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

Fullscreen и landscape-режим

Метод requestFullscreen() убирает верхнюю панель Telegram и разворачивает приложение на весь экран. Это критически важно для игр, видеоплееров и презентаций. Обратный вызов — exitFullscreen().

// Переход в полноэкранный режим
Telegram.WebApp.requestFullscreen();

// Выход из полноэкранного режима
Telegram.WebApp.exitFullscreen();

// Проверка текущего состояния
if (Telegram.WebApp.isFullscreen) {
  console.log('Приложение в полноэкранном режиме');
}

В полноэкранном режиме приложение может работать как в портретной, так и в ландшафтной ориентации. Это открыло дорогу для мобильных игр уровня, который раньше был доступен только нативным приложениям.

DeviceStorage и SecureStorage

DeviceStorage — локальное хранилище данных на устройстве пользователя. Работает как localStorage, но с гарантией сохранности между сессиями Mini App.

SecureStorage — защищённое хранилище, использующее iOS Keychain на iPhone и Android Keystore на Android-устройствах. Хранит до 10 элементов. Предназначено для токенов, ключей и другой чувствительной информации.

// DeviceStorage: сохранение и чтение
Telegram.WebApp.DeviceStorage.setItem('user_prefs', JSON.stringify(prefs));
Telegram.WebApp.DeviceStorage.getItem('user_prefs', (err, value) => {
  if (value) {
    const prefs = JSON.parse(value);
  }
});

// SecureStorage: безопасное хранение токенов
Telegram.WebApp.SecureStorage.setItem('auth_token', token, (err, success) => {
  if (success) console.log('Токен сохранён в защищённом хранилище');
});

Telegram.WebApp.SecureStorage.getItem('auth_token', (err, value) => {
  if (value) authenticateUser(value);
});

Датчики устройства

Mini Apps получили доступ к аппаратным датчикам:

  • Акселерометр — измеряет ускорение по осям X, Y, Z. Используется в играх для управления наклоном.
  • Гироскоп — отслеживает угловую скорость вращения устройства.
  • DeviceOrientation — комбинирует данные акселерометра, гироскопа и магнитометра для определения ориентации устройства в пространстве.
// Запуск акселерометра с частотой обновления 60 мс
Telegram.WebApp.Accelerometer.start({ refresh_rate: 60 }, (started) => {
  if (started) {
    console.log('Акселерометр запущен');
  }
});

// Чтение данных акселерометра
Telegram.WebApp.onEvent('accelerometerChanged', () => {
  const { x, y, z } = Telegram.WebApp.Accelerometer;
  updateGamePhysics(x, y, z);
});

// Гироскоп
Telegram.WebApp.Gyroscope.start({ refresh_rate: 60 });
Telegram.WebApp.onEvent('gyroscopeChanged', () => {
  const { x, y, z } = Telegram.WebApp.Gyroscope;
  rotateObject(x, y, z);
});

// Ориентация устройства
Telegram.WebApp.DeviceOrientation.start({ refresh_rate: 100, need_absolute: true });
Telegram.WebApp.onEvent('deviceOrientationChanged', () => {
  const { alpha, beta, gamma, absolute } = Telegram.WebApp.DeviceOrientation;
  updateCameraAngle(alpha, beta, gamma);
});

Биометрия: Touch ID и Face ID

Mini Apps могут запрашивать биометрическую аутентификацию через Touch ID или Face ID. Это полезно для финансовых приложений, подтверждения платежей и доступа к чувствительным данным.

// Инициализация биометрии
Telegram.WebApp.BiometricManager.init(() => {
  if (Telegram.WebApp.BiometricManager.isInited) {
    const type = Telegram.WebApp.BiometricManager.biometricType;
    console.log('Доступна биометрия:', type); // "finger" или "face"
  }
});

// Аутентификация
Telegram.WebApp.BiometricManager.authenticate(
  { reason: 'Подтвердите личность для совершения платежа' },
  (success, token) => {
    if (success) processPayment(token);
  }
);

Геолокация

Метод requestLocationAccess() запрашивает у пользователя разрешение на доступ к местоположению. После получения разрешения Mini App может использовать данные GPS для доставки, навигации и геотаргетинга.

Telegram.WebApp.LocationManager.init(() => {
  if (Telegram.WebApp.LocationManager.isInited) {
    Telegram.WebApp.LocationManager.getLocation((location) => {
      if (location) {
        console.log('Широта:', location.latitude);
        console.log('Долгота:', location.longitude);
        findNearbyStores(location.latitude, location.longitude);
      }
    });
  }
});

Медиа-возможности

  • shareMessage() — позволяет пользователю поделиться подготовленным сообщением в любой чат Telegram.
  • downloadFile() — инициирует скачивание файла на устройство пользователя.
  • photo_url в WebAppUser — доступ к URL аватара пользователя для персонализации интерфейса.
// Поделиться сообщением
Telegram.WebApp.shareMessage(preparedMessageId, (success) => {
  if (success) showNotification('Сообщение отправлено!');
});

// Скачивание файла
Telegram.WebApp.downloadFile(
  { url: 'https://example.com/report.pdf', file_name: 'report.pdf' },
  (accepted) => {
    if (accepted) showNotification('Загрузка начата');
  }
);

// Фото пользователя
const user = Telegram.WebApp.initDataUnsafe.user;
if (user.photo_url) {
  document.getElementById('avatar').src = user.photo_url;
}

Эмодзи-статусы

Mini App может запросить разрешение на установку пользовательского эмодзи-статуса. Это открывает интересные механики для геймификации и маркетинга.

// Запрос доступа к эмодзи-статусу
Telegram.WebApp.requestEmojiStatusAccess((granted) => {
  if (granted) {
    // Установка кастомного эмодзи-статуса на 1 час
    Telegram.WebApp.setEmojiStatus(customEmojiId, {
      duration: 3600
    }, (success) => {
      if (success) console.log('Статус установлен!');
    });
  }
});

Истории (Stories)

Mini Apps могут публиковать контент в истории пользователя — с фото, видео и ссылками. Мощный инструмент для виральности и привлечения новых пользователей.

Telegram.WebApp.shareToStory('https://example.com/image.jpg', {
  text: 'Посмотрите моё достижение в игре!',
  widget_link: {
    url: 'https://t.me/mybot/game',
    name: 'Играть'
  }
});

Подробнее о работе с кнопками и клавиатурами в ботах читайте в статье «Использование новых методов Telegram Bot API для создания кастомных клавиатур и кнопок»

Монетизация Mini Apps: Telegram Stars

Telegram Stars — это внутренняя валюта Telegram, специально созданная для монетизации цифровых товаров и услуг в Mini Apps. Запущенная в 2024 году, к 2026-му Stars стала основным платёжным инструментом экосистемы.

Как работают Stars

Пользователь покупает Stars через Apple Pay или Google Pay одним касанием — без редиректов, без ввода данных карты. Процесс покупки занимает буквально секунду. Это устраняет главный барьер конверсии — сложный чекаут.

Разработчик получает 70% от каждой транзакции. Оставшиеся 30% забирает Telegram (включая комиссию Apple/Google). Для сравнения: при прямых покупках в App Store разработчик получает те же 70%, но с гораздо более сложной интеграцией.

Платные подписки с автосписанием

Stars поддерживают рекуррентные платежи. Вы можете создать подписку с автоматическим списанием Stars — ежедневную, еженедельную или ежемесячную. Пользователь подтверждает подписку один раз, а дальше Stars списываются автоматически.

# Создание подписки через Telegram Bot API
import requests

def create_subscription_link(bot_token, title, description, stars_amount):
    url = f"https://api.telegram.org/bot{bot_token}/createInvoiceLink"
    payload = {
        "title": title,
        "description": description,
        "payload": "subscription_premium_monthly",
        "currency": "XTR",  # XTR — код валюты Telegram Stars
        "prices": [{"label": title, "amount": stars_amount}],
        "subscription_period": 2592000  # 30 дней в секундах
    }
    response = requests.post(url, json=payload)
    return response.json()["result"]

TON интеграция

Блокчейн TON (The Open Network) интегрирован в Telegram нативно. Более 100 миллионов пользователей уже имеют TON-кошелёк внутри мессенджера. Mini Apps могут принимать оплату в TON, взаимодействовать со смарт-контрактами и выпускать NFT — всё внутри Telegram.

Реклама за Stars

Telegram позволяет разработчикам Mini Apps размещать рекламу и получать доход в Stars. Рекламные блоки интегрируются прямо в интерфейс Mini App. Пользователь смотрит рекламу — разработчик получает Stars. Простая и прозрачная модель.

Схема монетизации

СпособОписаниеДоля разработчика
Продажа цифровых товаровСтикеры, премиум-функции, игровые предметы70%
ПодпискиАвтосписание Stars ежемесячно70%
Реклама за StarsПоказ рекламных блоковЗависит от CPM
TON-платежиПриём криптовалюты напрямую~100% (только газ сети)

Как создать Mini App с нуля

Переходим к практике. Ниже — пошаговая инструкция по созданию Telegram Mini App от регистрации бота до публикации в каталоге.

Шаг 1: Создаём бота через @BotFather

Каждое Mini App привязано к боту. Откройте Telegram, найдите @BotFather и выполните команды:

  1. /newbot — создайте нового бота, задайте имя и username.
  2. Сохраните полученный токен (формат: 123456789:ABCdefGHIjklMNOpqrsTUVwxyz).
  3. /newapp — создайте Mini App, привязанное к боту.
  4. Укажите URL вашего веб-приложения (должен быть HTTPS).
  5. При желании загрузите иконку и добавьте описание.

После создания бот получит кнопку «Menu» или ссылку вида https://t.me/yourbot/appname, по которой будет открываться ваше Mini App.

Шаг 2: Фронтенд — подключение и основные методы

Создайте HTML-файл и подключите библиотеку Telegram:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>My Mini App</title>
    <script src="https://telegram.org/js/telegram-web-app.js"></script>
    <style>
        :root {
            /* Используем цвета темы Telegram */
            --bg-color: var(--tg-theme-bg-color, #ffffff);
            --text-color: var(--tg-theme-text-color, #000000);
            --hint-color: var(--tg-theme-hint-color, #999999);
            --link-color: var(--tg-theme-link-color, #2481cc);
            --button-color: var(--tg-theme-button-color, #2481cc);
            --button-text: var(--tg-theme-button-text-color, #ffffff);
        }

        body {
            margin: 0;
            padding: 16px;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
        }

        .card {
            background: var(--tg-theme-secondary-bg-color, #f0f0f0);
            border-radius: 12px;
            padding: 16px;
            margin-bottom: 12px;
        }

        .btn-primary {
            width: 100%;
            padding: 14px;
            border: none;
            border-radius: 10px;
            background-color: var(--button-color);
            color: var(--button-text);
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 20px;
        }

        .user-info img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div class="user-info" id="userInfo"></div>
    <div class="card" id="mainContent">
        <h2>Добро пожаловать!</h2>
        <p id="statusText">Загрузка...</p>
    </div>
    <button class="btn-primary" id="actionBtn" onclick="handleAction()">
        Выполнить действие
    </button>

    <script>
        // Инициализация Mini App
        const tg = window.Telegram.WebApp;

        // Сообщаем Telegram, что приложение готово
        tg.ready();

        // Разворачиваем на весь экран
        tg.expand();

        // Получаем данные пользователя
        const user = tg.initDataUnsafe.user;

        // Отображаем информацию о пользователе
        if (user) {
            const userInfoEl = document.getElementById('userInfo');
            let html = '';
            if (user.photo_url) {
                html += `<img src="${user.photo_url}" alt="avatar">`;
            }
            html += `<div>
                <strong>${user.first_name} ${user.last_name || ''}</strong>
                <br><span style="color: var(--hint-color)">ID: ${user.id}</span>
            </div>`;
            userInfoEl.innerHTML = html;
        }

        // Адаптация к теме Telegram
        document.getElementById('statusText').textContent =
            `Тема: ${tg.colorScheme}, Платформа: ${tg.platform}`;

        // Настройка кнопки MainButton
        tg.MainButton.setText('Отправить данные');
        tg.MainButton.show();
        tg.MainButton.onClick(() => {
            tg.sendData(JSON.stringify({
                action: 'submit',
                timestamp: Date.now(),
                user_id: user?.id
            }));
        });

        // Обработка BackButton
        tg.BackButton.show();
        tg.BackButton.onClick(() => {
            tg.showConfirm('Вы уверены, что хотите выйти?', (confirmed) => {
                if (confirmed) tg.close();
            });
        });

        // Основное действие
        function handleAction() {
            // Полноэкранный режим
            if (!tg.isFullscreen) {
                tg.requestFullscreen();
            }

            // Всплывающее окно
            tg.showPopup({
                title: 'Выберите действие',
                message: 'Что вы хотите сделать?',
                buttons: [
                    { id: 'buy', type: 'default', text: 'Купить' },
                    { id: 'share', type: 'default', text: 'Поделиться' },
                    { id: 'cancel', type: 'cancel' }
                ]
            }, (buttonId) => {
                if (buttonId === 'buy') {
                    openPayment();
                } else if (buttonId === 'share') {
                    tg.switchInlineQuery('Посмотрите это приложение!', ['users', 'groups']);
                }
            });
        }

        // Оплата через Stars
        function openPayment() {
            tg.openInvoice('https://t.me/$invoice_link', (status) => {
                if (status === 'paid') {
                    tg.showAlert('Оплата прошла успешно! Спасибо!');
                    tg.HapticFeedback.notificationOccurred('success');
                } else if (status === 'failed') {
                    tg.showAlert('Ошибка оплаты. Попробуйте ещё раз.');
                    tg.HapticFeedback.notificationOccurred('error');
                }
            });
        }

        // Скачивание файла
        function downloadReport() {
            tg.downloadFile({
                url: 'https://example.com/report.pdf',
                file_name: 'report.pdf'
            }, (accepted) => {
                if (accepted) {
                    tg.showAlert('Загрузка началась');
                }
            });
        }
    </script>
</body>
</html>

Обратите внимание на использование themeParams — CSS-переменных вида --tg-theme-bg-color. Они автоматически подстраивают интерфейс вашего приложения под тему Telegram пользователя (светлую или тёмную). Это обязательный элемент для качественного Mini App.

Подробнее об интеграции Mini Apps с ботами читайте в руководстве «Интеграция Mini Apps в боты Telegram: пошаговое руководство для начинающих»

Шаг 3: Бэкенд на Python — валидация, обработка данных и платежи

Критически важная часть — валидация initData. Telegram передаёт данные о пользователе в Mini App, но вы обязаны проверить их подлинность на сервере через HMAC-SHA256. Без этого злоумышленник может подделать данные.

"""
Бэкенд для Telegram Mini App на Python
Требования: pip install flask python-telegram-bot requests
"""

import hashlib
import hmac
import json
import time
from urllib.parse import parse_qs, unquote
from flask import Flask, request, jsonify, abort
import requests

app = Flask(__name__)

BOT_TOKEN = "YOUR_BOT_TOKEN"
API_URL = f"https://api.telegram.org/bot{BOT_TOKEN}"


# ============================================================
# 1. Валидация initData через HMAC-SHA256
# ============================================================

def validate_init_data(init_data: str, bot_token: str) -> dict | None:
    """
    Проверяет подлинность данных, переданных из Telegram Mini App.
    Возвращает словарь с данными пользователя или None, если проверка не пройдена.
    """
    # Парсим строку init_data
    parsed = parse_qs(init_data)

    # Извлекаем hash
    received_hash = parsed.get("hash", [None])[0]
    if not received_hash:
        return None

    # Формируем строку для проверки (все параметры кроме hash, отсортированные по алфавиту)
    data_check_pairs = []
    for key, values in parsed.items():
        if key == "hash":
            continue
        data_check_pairs.append(f"{key}={unquote(values[0])}")

    data_check_pairs.sort()
    data_check_string = "\n".join(data_check_pairs)

    # Вычисляем HMAC-SHA256
    secret_key = hmac.new(
        key=b"WebAppData",
        msg=bot_token.encode("utf-8"),
        digestmod=hashlib.sha256
    ).digest()

    calculated_hash = hmac.new(
        key=secret_key,
        msg=data_check_string.encode("utf-8"),
        digestmod=hashlib.sha256
    ).hexdigest()

    # Сравниваем хеши
    if not hmac.compare_digest(calculated_hash, received_hash):
        return None

    # Проверяем срок действия (данные действительны 1 час)
    auth_date = int(parsed.get("auth_date", [0])[0])
    if time.time() - auth_date > 3600:
        return None

    # Парсим данные пользователя
    user_data = parsed.get("user", [None])[0]
    if user_data:
        return json.loads(unquote(user_data))

    return None


# ============================================================
# 2. Эндпоинт для приёма данных из Mini App (sendData)
# ============================================================

@app.route("/api/webapp-data", methods=["POST"])
def handle_webapp_data():
    """Обрабатывает данные, отправленные через tg.sendData()."""
    init_data = request.headers.get("X-Telegram-Init-Data", "")

    user = validate_init_data(init_data, BOT_TOKEN)
    if not user:
        abort(401, "Invalid init data")

    # Получаем данные из тела запроса
    data = request.get_json()

    # Обрабатываем действие
    action = data.get("action")

    if action == "submit":
        # Сохраняем в базу, отправляем уведомление и т.д.
        send_message(
            user["id"],
            f"Данные получены! Время: {data.get('timestamp')}"
        )
        return jsonify({"status": "ok", "message": "Данные обработаны"})

    return jsonify({"status": "error", "message": "Неизвестное действие"}), 400


# ============================================================
# 3. Платежи через Telegram Stars
# ============================================================

@app.route("/api/create-invoice", methods=["POST"])
def create_invoice():
    """Создаёт ссылку на счёт для оплаты через Stars."""
    init_data = request.headers.get("X-Telegram-Init-Data", "")
    user = validate_init_data(init_data, BOT_TOKEN)
    if not user:
        abort(401, "Invalid init data")

    data = request.get_json()
    product_id = data.get("product_id")

    # Каталог товаров
    products = {
        "premium_week": {
            "title": "Премиум на 7 дней",
            "description": "Доступ ко всем функциям на неделю",
            "amount": 50  # 50 Stars
        },
        "premium_month": {
            "title": "Премиум на 30 дней",
            "description": "Доступ ко всем функциям на месяц",
            "amount": 150  # 150 Stars
        },
        "coins_pack": {
            "title": "Набор монет (1000 шт.)",
            "description": "Игровая валюта для покупок внутри приложения",
            "amount": 25  # 25 Stars
        }
    }

    product = products.get(product_id)
    if not product:
        return jsonify({"error": "Товар не найден"}), 404

    # Создаём ссылку на счёт через Telegram Bot API
    invoice_link = create_invoice_link(
        title=product["title"],
        description=product["description"],
        payload=f"{product_id}_{user['id']}_{int(time.time())}",
        amount=product["amount"]
    )

    return jsonify({"invoice_link": invoice_link})


def create_invoice_link(title: str, description: str, payload: str, amount: int) -> str:
    """Создаёт ссылку на счёт для оплаты Stars."""
    response = requests.post(f"{API_URL}/createInvoiceLink", json={
        "title": title,
        "description": description,
        "payload": payload,
        "currency": "XTR",  # XTR — код для Telegram Stars
        "prices": [{"label": title, "amount": amount}]
    })
    result = response.json()
    if result.get("ok"):
        return result["result"]
    raise Exception(f"Ошибка создания счёта: {result}")


def create_subscription_link(title: str, description: str,
                              payload: str, amount: int,
                              period_seconds: int = 2592000) -> str:
    """Создаёт ссылку на подписку с автосписанием Stars."""
    response = requests.post(f"{API_URL}/createInvoiceLink", json={
        "title": title,
        "description": description,
        "payload": payload,
        "currency": "XTR",
        "prices": [{"label": title, "amount": amount}],
        "subscription_period": period_seconds
    })
    result = response.json()
    if result.get("ok"):
        return result["result"]
    raise Exception(f"Ошибка создания подписки: {result}")


# ============================================================
# 4. Обработка успешной оплаты (webhook от Telegram)
# ============================================================

@app.route("/webhook", methods=["POST"])
def telegram_webhook():
    """Обрабатывает входящие обновления от Telegram."""
    update = request.get_json()

    # Обработка предварительного запроса оплаты
    if "pre_checkout_query" in update:
        pre_checkout = update["pre_checkout_query"]
        # Подтверждаем оплату (можно добавить проверки)
        requests.post(f"{API_URL}/answerPreCheckoutQuery", json={
            "pre_checkout_query_id": pre_checkout["id"],
            "ok": True
        })
        return jsonify({"status": "ok"})

    # Обработка успешной оплаты
    message = update.get("message", {})
    if "successful_payment" in message:
        payment = message["successful_payment"]
        user_id = message["from"]["id"]
        payload = payment["invoice_payload"]
        total_amount = payment["total_amount"]
        currency = payment["currency"]

        # Начисляем товар пользователю
        process_successful_payment(user_id, payload, total_amount)

        send_message(
            user_id,
            f"Оплата прошла успешно!\n"
            f"Сумма: {total_amount} Stars\n"
            f"Спасибо за покупку!"
        )
        return jsonify({"status": "ok"})

    # Обработка данных из sendData
    if "web_app_data" in message.get("web_app_data", {}):
        web_app_data = message["web_app_data"]["data"]
        user_id = message["from"]["id"]
        process_webapp_data(user_id, json.loads(web_app_data))
        return jsonify({"status": "ok"})

    return jsonify({"status": "ok"})


def process_successful_payment(user_id: int, payload: str, amount: int):
    """Обрабатывает успешную оплату: начисляет товар или активирует подписку."""
    parts = payload.split("_")
    product_type = "_".join(parts[:-2])  # Убираем user_id и timestamp

    if product_type == "premium_week":
        activate_premium(user_id, days=7)
    elif product_type == "premium_month":
        activate_premium(user_id, days=30)
    elif product_type == "coins_pack":
        add_coins(user_id, amount=1000)


def activate_premium(user_id: int, days: int):
    """Активирует премиум-подписку для пользователя."""
    # Здесь логика работы с базой данных
    print(f"Премиум активирован для {user_id} на {days} дней")


def add_coins(user_id: int, amount: int):
    """Начисляет игровую валюту пользователю."""
    print(f"Начислено {amount} монет пользователю {user_id}")


def process_webapp_data(user_id: int, data: dict):
    """Обрабатывает данные, отправленные из Mini App через sendData."""
    print(f"Данные от {user_id}: {data}")


def send_message(chat_id: int, text: str):
    """Отправляет сообщение пользователю."""
    requests.post(f"{API_URL}/sendMessage", json={
        "chat_id": chat_id,
        "text": text,
        "parse_mode": "HTML"
    })


if __name__ == "__main__":
    app.run(host="0.0.0.0", port=5000, debug=True)

Ещё больше деталей о создании Mini App на Python вы найдёте в материале «Пошаговое руководство: как создать Telegram Mini App на Python

Шаг 4: Деплой и тестирование

HTTPS обязателен. Telegram не откроет Mini App по HTTP-ссылке. Варианты деплоя:

  1. Vercel / Netlify — для статических фронтендов. Бесплатно, HTTPS из коробки.
  2. Railway / Render — для Python-бэкенда. Бесплатный тариф подходит для тестирования.
  3. VPS + Nginx + Let’s Encrypt — для продакшена. Полный контроль, SSL-сертификат через certbot.

Тестирование:

Используйте @WebAppTestBot от Telegram — он позволяет открыть любой URL как Mini App без создания собственного бота. Для разработки также удобен test-окружение Telegram (test.telegram.org), где можно тестировать платежи Stars без реальных списаний.

Чек-лист перед публикацией:

  • Telegram.WebApp.ready() вызывается при загрузке
  • Приложение адаптируется под тему (светлая/тёмная)
  • initData валидируется на сервере
  • Работает на iOS, Android и Telegram Desktop
  • Fullscreen-режим корректно обрабатывает safe area
  • Платежи Stars работают (тестовая среда)
  • Кнопка «Назад» корректно закрывает приложение

Шаг 5: Публикация в Telegram Apps Center

Telegram Apps Center — официальный каталог мини-приложений. Публикация увеличивает органический охват в разы. Порядок действий:

  1. Перейдите на apps.telegram.org или откройте раздел Apps Center в Telegram.
  2. Нажмите «Submit App» и авторизуйтесь.
  3. Укажите бота, к которому привязано Mini App.
  4. Заполните карточку:
  • Название — до 30 символов, чёткое и запоминающееся.
  • Описание — что делает приложение и для кого. До 512 символов.
  • Категория — выберите наиболее подходящую (Games, DeFi, Utilities и т.д.).
  • Скриншоты — минимум 3, разрешение 1280×720 или выше.
  • Иконка — 512×512 px, PNG.
  1. Отправьте на модерацию. Рассмотрение занимает от 1 до 7 рабочих дней.
  2. После одобрения ваше Mini App появится в каталоге и станет доступно для поиска.

Совет: приложения с качественными скриншотами и понятным описанием проходят модерацию быстрее. Укажите, какие API Mini Apps вы используете (fullscreen, payments, sensors) — это ускорит проверку.

Лучшие примеры Mini Apps в 2026

Вот пять приложений, которые наглядно демонстрируют возможности платформы:

ПриложениеКатегорияОсобенностиMAU
BlumDeFiФарминг токенов, задания, интеграция с TON12 млн+
TON WalletФинансыУправление криптоактивами, обмен, стейкинг — всё внутри Telegram8 млн+
FragmentМаркетплейсПокупка и продажа Telegram-юзернеймов, анонимных номеров и Stars3 млн+
Games BotИгрыКазуальные игры с fullscreen, гироскопом и таблицами рекордов5 млн+
TG ShopE-commerceВитрина товаров, корзина, оплата Stars, интеграция с CRM1,5 млн+

Blum — один из самых успешных кейсов монетизации через TON. Пользователи выполняют задания, фармят токены и торгуют ими — всё внутри Mini App, без перехода на внешние биржи.

Games Bot демонстрирует, как fullscreen и гироскоп превращают Mini App в полноценную мобильную игру. Пользователь наклоняет телефон, чтобы управлять персонажем — опыт, неотличимый от нативного приложения.

TG Shop — образец e-commerce внутри Telegram. Каталог товаров с фотографиями, корзина, оплата в Stars одним касанием. Продавцу не нужен отдельный сайт или приложение — достаточно бота с Mini App.

Ответы на эти вопросы могут быть для вас полезными

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

Telegram Mini App — это веб-приложение на HTML5, которое работает прямо внутри мессенджера Telegram. Оно открывается в встроенном браузере и может использовать функции Telegram: данные пользователя, платежи, уведомления, датчики устройства. До 2023 года технология называлась Web Apps, сейчас официальное название — Mini Apps. По состоянию на 2026 год в экосистеме работает более 5 800 мини-приложений с общей аудиторией в сотни миллионов пользователей.

Чем Mini App отличается от Telegram-бота?

Бот — это серверная программа, которая обменивается текстовыми сообщениями с пользователем через Telegram Bot API. У бота нет графического интерфейса — только текст, кнопки и инлайн-клавиатуры. Mini App — это полноценный визуальный интерфейс (HTML, CSS, JavaScript), который открывается поверх чата. Mini App может содержать формы, анимации, 3D-графику, карты, видеоплеер — всё, что возможно в вебе. При этом Mini App всегда привязано к боту и использует его токен для взаимодействия с Telegram API.

Нужно ли платить за создание Mini App?

Нет. Создание бота и Mini App в Telegram полностью бесплатно. Вам не нужно платить за регистрацию, публикацию или использование API. Расходы могут возникнуть только на хостинг вашего веб-приложения, но для прототипов и небольших проектов существуют бесплатные варианты: Vercel, Netlify, Railway (бесплатные тарифы). Публикация в Telegram Apps Center тоже бесплатна.

Как добавить Mini App в Telegram Apps Center?

Перейдите на apps.telegram.org, авторизуйтесь через Telegram и нажмите «Submit App». Выберите бота, к которому привязано Mini App. Заполните карточку: название, описание, категория, скриншоты (минимум 3), иконка 512×512 px. Отправьте на модерацию. Рассмотрение занимает от 1 до 7 рабочих дней. После одобрения приложение появится в каталоге и будет доступно через поиск.

Можно ли зарабатывать на Mini Apps?

Да, и существует несколько способов. Первый — продажа цифровых товаров и услуг через Telegram Stars (вы получаете 70% от каждой транзакции). Второй — подписки с автоматическим списанием Stars. Третий — приём платежей в криптовалюте TON напрямую через блокчейн (комиссия только за газ сети). Четвёртый — показ рекламы внутри Mini App с оплатой в Stars. Пятый — классическая монетизация через внешние платёжные системы для физических товаров.

Что такое Telegram Stars и как их использовать?

Telegram Stars — внутренняя валюта Telegram для покупки цифровых товаров и услуг в Mini Apps и ботах. Пользователь покупает Stars через Apple Pay или Google Pay одним касанием. Разработчик получает 70% от суммы транзакции. Для интеграции Stars в Mini App нужно создать счёт (invoice) через метод createInvoiceLink с параметром currency: "XTR", а затем открыть его через Telegram.WebApp.openInvoice(). Stars поддерживают разовые платежи и подписки с автосписанием.

Как сделать Mini App полноэкранным?

Вызовите метод Telegram.WebApp.requestFullscreen(). Это уберёт верхнюю панель Telegram и развернёт приложение на весь экран. Для выхода из полноэкранного режима используйте Telegram.WebApp.exitFullscreen(). Проверить текущее состояние можно через свойство Telegram.WebApp.isFullscreen. Полноэкранный режим особенно полезен для игр, видеоплееров и приложений, которым нужна ландшафтная ориентация. Учитывайте safe area устройства (вырез камеры, скруглённые углы) при разработке полноэкранного интерфейса.


Telegram Mini Apps в 2026 году — это не эксперимент, а зрелая платформа с аудиторией, платежами и инструментами для разработки. Если вам нужно быстро запустить продукт и получить доступ к сотням миллионов пользователей без App Store и Google Play — Mini Apps остаются одним из лучших решений на рынке

Оцените статью
5 1 голос
Рейтинг статьи
Подписаться
Уведомить о
guest

0 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x