Как создать первое Mini App в Telegram: пошаговое руководство

Telegram против WeChat: битва суперприложений

Уже много лет WeChat уверенно лидирует среди суперприложений. Запущенный в 2011 году, он стал неотъемлемой частью повседневной жизни в Китае: в одной платформе органично объединились мессенджер, соцсети, платежи и онлайн-покупки. Telegram появился позже — в 2013 году, — но быстро набрал популярность и теперь претендует на место среди ведущих суперприложений в мире. Сегодня разработчики могут создавать инновационные сервисы и запускать мини-приложения прямо в Telegram. Подробная документация по Mini Apps поможет каждому, кто хочет создать Telegram-бота или приложение на базе знакомых веб-технологий, быстрее освоить разработку.

Чем отличаются Telegram и WeChat:

WeChat давно доминирует на китайском рынке как приложение «всё в одном», но Telegram всерьёз бросает ему вызов на мировой арене. Благодаря акценту на конфиденциальности, передовым возможностям и инструментам для разработчиков Telegram занимает особую нишу. А с появлением Telegram Mini Apps (TMA) разработчики могут создавать веб-приложения, которые легко встраиваются в платформу. Это помогает Telegram быстро сокращать отставание и привлекать пользователей по всему миру.

Разберёмся, как создать Mini App в Telegram и присоединиться к растущему сообществу разработчиков, которые используют возможности платформы.

Что такое Telegram Mini Apps и почему они так популярны?

Telegram Mini Apps (TMA) — это веб-приложения, работающие внутри Telegram. По сути, это обычные сайты на HTML, CSS и JavaScript, но с доступом к уникальным возможностям Telegram через SDK. Приложения запускаются прямо в Telegram, обеспечивая удобную работу, интеграцию данных и встроенные платежи. Чтобы использовать Telegram для Mini Apps, разработчики обычно создают бота через BotFather, задают ему имя пользователя и настраивают связь с приложением. После этого Mini Apps можно отправлять пользователям напрямую или делиться ими в группах Telegram — это мощное дополнение к экосистеме. Разработчикам, которые хотят использовать возможности платформы, важно понимать, как устроены Telegram Mini Apps.

За что разработчики любят TMA:

Успешные Telegram Mini Apps: примеры

Посмотрим на несколько реальных примеров и разберёмся, что можно создать:

• Wallet — пример кошелька, доступного через Telegram. Возможности зависят от конкретного сервиса и региона.
• Hamster Kombat — тап-кликер, который привлёк огромную аудиторию.
• DurgerKing — демонстрационное Mini App от Telegram, с помощью которого можно протестировать оформление заказа еды и оплату.

Как начать работу с Telegram Mini Apps

Что понадобится:

• Редактор кода (подойдут VS Code или WebStorm).
• Базовые знания HTML, CSS и JavaScript.
• На телефоне и компьютере установлен Telegram.
• Желание попробовать что-то новое.

Шаг 1: создайте вспомогательного бота

Начните с создания бота в Telegram. Он станет точкой входа в ваше приложение. Вот как это сделать:

1. Найдите в Telegram @BotFather.
2. Отправьте команду /newbot.
3. Придумайте имя для бота.
4. Надёжно сохраните токен, который выдаст BotFather, на сервере — он понадобится для Bot API. Не добавляйте его в код браузера или публичный репозиторий.

Ниже приведён код на Node.js для вашего сервера. Установите node-telegram-bot-api, задайте токен через переменную окружения на сервере и замените https://your-domain.com/app на свой опубликованный HTTPS-адрес, прежде чем запускать код. Кнопка web_app в сообщении предназначена для личного чата с ботом:

javascript
const TelegramBot = require('node-telegram-bot-api');
const bot = new TelegramBot(token, { polling: true });

bot.onText(/\/start/, (msg) => {
const chatId = msg.chat.id;
bot.sendMessage(chatId, 'Welcome! Click the button below to open the app.', {
reply_markup: {
inline_keyboard: [[
{
text: 'Open App',
web_app: { url: 'https://your-domain.com/app' }
}
]]
}
});
});

Шаг 2: настройте окружение

Создайте базовую структуру проекта для Telegram Mini App и настройте тестовое окружение:

Структура каталогов проекта (содержимое index.html — в шаге 3):

text
my-tma/
├── index.html
├── styles/
│ └── main.css
├── scripts/
│ └── app.js
└── assets/
└── images/

Шаг 3: создайте приложение

Сохраните этот HTML-код в файл index.html. Он подключает Telegram WebApp bridge и скрипт scripts/app.js. Это пример интерфейса, а не реализация аутентификации: прежде чем доверять данным о пользователе, проверяйте Telegram initData на сервере.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First TMA</title>
<link rel="stylesheet" href="styles/main.css">
<script src="https://telegram.org/js/telegram-web-app.js"></script>
</head>
<body>
<div id="app">
<h1>Привет, Telegram!</h1>
</div>
<script src="scripts/app.js"></script>
</body>
</html>

Стилизация приложения

Сохраните приведённый ниже код JavaScript в файл scripts/app.js: функция setupTheme задаёт цвета темы Telegram, а styles/main.css — отдельная таблица стилей, которую можно настроить. Проверьте работу приложения в Telegram на Android и iOS. Важно: sendData работает только в Mini Apps, запущенных кнопкой web_app в клавиатуре под сообщением, но не через inline-кнопку из шага 1. Чтобы сохранять данные при запуске через inline-кнопку, настройте endpoint на бэкенде и проверяйте initData. Этот пример не сохраняет данные и не обрабатывает входящие сообщения web_app_data:

javascript
const app = {
data: { count: 0 },

init() {
this.setupTheme();
this.setupCounter();
this.setupMainButton();
},

setupTheme() {
const theme = window.Telegram.WebApp.themeParams;
document.body.style.backgroundColor = theme.bg_color;
document.body.style.color = theme.text_color;
},

setupCounter() {
const counter = document.createElement('div');
counter.innerHTML = `
<h2>Счётчик: <span id="count">0</span></h2>
<button id="increment">+1</button>
<button id="decrement">-1</button>
`;
document.querySelector('#app').appendChild(counter);

document.querySelector('#increment').onclick = () => this.updateCount(1);
document.querySelector('#decrement').onclick = () => this.updateCount(-1);
},

setupMainButton() {
const MainButton = window.Telegram.WebApp.MainButton;
MainButton.setText('Сохранить');
MainButton.onClick(() => this.saveData());
MainButton.show();
},

updateCount(delta) {
this.data.count += delta;
document.querySelector('#count').textContent = this.data.count;
},

saveData() {
window.Telegram.WebApp.sendData(JSON.stringify(this.data));
}
};

window.Telegram.WebApp.ready();
app.init();

Добавляем новые возможности

Когда основа готова, можно расширить возможности Mini App с помощью продвинутых функций:

• При необходимости добавьте функции Web3 на базе TON. Но для покупки цифровых товаров и услуг внутри Telegram нужно использовать Telegram Stars, а не TON.
• Подключите оплату цифровых товаров и услуг через Telegram Stars и настройте подтверждение платежей и возврат средств.
• Сохраняйте данные пользователей на сервере после проверки initData и всех переданных значений.
• Добавьте анимацию и продвинутую логику.
• Настройте уведомления от бота, предварительно получив необходимое разрешение пользователя: Mini App не может отправлять сообщения кому угодно.
• Добавьте кнопку меню для навигации.

Что дальше?

1. Разверните приложение на сервере с HTTPS.
2. Подключите приложение к Telegram через @BotFather.
3. Отладьте приложение и протестируйте его в реальных условиях.
4. Запустите Mini App в Telegram и соберите первые отзывы.
5. Выложите код на GitHub, чтобы получить отзывы сообщества. Не включайте в репозиторий токены бота, секреты и личные данные.
6. Собирайте отзывы пользователей и улучшайте приложение.

Следуя этим шагам, вы сможете создать успешный Mini App для Telegram и в полной мере использовать возможности быстро растущей экосистемы платформы.