Для разработчиков, желающих войти в экосистему Telegram, мини-приложения Telegram (Mini Apps), несомненно, являются отличной отправной точкой. Они не только позволяют охватить огромную аудиторию, но и глубоко интегрируются с такими функциями, как платежи и боты. Однако многие сначала сталкиваются с трудностями: какую технологию выбрать? Как настроить среду разработки? Как заставить локальный проект по-настоящему запуститься в Telegram?
В этой статье, на примере реального приложения для заказа еды (аналогично Durer King), мы проведем вас через весь процесс разработки от 0 до 1. Независимо от того, являетесь ли вы фронтенд-разработчиком или менеджером продукта, желающим попробовать экосистему Telegram, эта статья поможет вам быстро начать работу.
Telegram — это не просто мессенджер, его открытая экосистема предоставляет разработчикам огромное пространство для творчества:
В качестве примера в этой статье мы создадим полноценную систему доставки еды, включающую Web App + Telegram Bot + платежную функцию. Для фронтенда будет использоваться React.js, для бэкенда — Node.js, а также будет интегрирована официальная платежная система Telegram.
Прежде чем мы начнем, необходимо определить технологический стек:
Стоит отметить, что мини-приложения Telegram принудительно используют протокол HTTPS, что означает необходимость настройки SSL-сертификата и при локальной разработке. Далее мы подробно расскажем, как решить эту проблему.
Все мини-приложения Telegram запускаются через бота. Сначала создадим бота с помощью BotFather:
@BotFather в Telegram и откройте чат./newbot.Этот токен работает как ключ, связывающий ваше приложение с серверами Telegram.
Далее мы быстро создадим проект с помощью официального Telegram Mini App SDK:
# Создание проекта React + TypeScript
npx create-react-app my-telegram-app --template typescript
cd my-telegram-app
# Установка Telegram SDK
npm install @twa-dev/sdk
SDK предоставляет богатый набор API для таких задач, как получение информации о пользователе, вызов платежных интерфейсов, отправка сообщений и т. д. После установки откройте проект в VS Code и запустите его:
npm start
В этот момент вы увидите, что проект запущен по адресу http://localhost:3000, но этого недостаточно — Telegram требует, чтобы все мини-приложения были доступны через HTTPS.
Многие разработчики останавливаются на этом этапе: как использовать HTTPS при локальной разработке? Есть два решения:
Измените скрипт запуска в package.json:
"scripts": {
"start": "HTTPS=true react-scripts start"
}
Таким образом, проект автоматически запустится с самоподписанным сертификатом по адресу https://localhost:3000.
Если вам требуется удаленное тестирование (например, на мобильном телефоне), вы можете использовать ngrok для отображения локального сервиса в общедоступной сети:
ngrok http 3000
ngrok сгенерирует общедоступный HTTPS-адрес, скопируйте его, и его можно будет использовать в Telegram.
Теперь нам нужно сообщить Telegram, где находится точка входа мини-приложения этого бота. Вернитесь в BotFather:
/mybots, выберите созданного вами бота.Bot Settings → Menu Button.https://your-ngrok-url.io).После этого, открыв вашего бота, нажмите на кнопку меню внизу, и мини-приложение откроется внутри Telegram!
Очистите стандартный код React, оставив основную структуру:
import { useEffect } from 'react';
import './App.css';
function App() {
useEffect(() => {
// Инициализация Telegram SDK
const tg = (window as any).Telegram.WebApp;
tg.ready();
console.log('Telegram WebApp загружен');
}, []);
return (
<div className="App">
<h1>Привет, Telegram!</h1>
</div>
);
}
export default App;
После сохранения и обновления в Telegram вы должны увидеть страницу "Привет, Telegram!", а в консоли — сообщение об успешной инициализации SDK.
Для обеспечения единообразного отображения на разных устройствах рекомендуется использовать Normalize.css и настроить глобальные стили:
/* App.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: var(--tg-theme-bg-color);
color: var(--tg-theme-text-color);
}
Telegram предоставляет набор переменных темы, которые позволяют вашему приложению автоматически адаптироваться к темному/светлому режиму пользователя.
После выполнения этих шагов у вас будет готовый каркас работающего мини-приложения Telegram. Далее вы можете:
Если вам нужен антидетект-браузер для управления несколькими аккаунтами, автоматизированного тестирования и других сценариев, рассмотрите использование MasLogin. Он поможет вам смоделировать различные среды на этапе разработки и тестирования, избегая рисков, связанных с аккаунтами.
Если вы используете бесплатную версию ngrok, адрес будет меняться после каждого перезапуска. Рекомендуется:
Основные API включают:
window.Telegram.WebApp.ready() — Инициализация.window.Telegram.WebApp.MainButton — Управление главной кнопкой.window.Telegram.WebApp.initData — Получение информации о пользователе.window.Telegram.WebApp.close() — Закрытие мини-приложения.Подробную документацию см. в Telegram WebApp API.
Telegram предоставляет песочницу для тестирования. Вы можете использовать тестовые платежные реквизиты для отладки. Подробности см. в официальной документации по платежам.
Благодаря этой статье вы освоили основные этапы разработки мини-приложений Telegram. Помните: сначала запустите минимально жизнеспособную версию, затем постепенно оптимизируйте ее. Начните создавать свои приложения в экосистеме Telegram прямо сейчас!
Обзор
_00000.png)
