Telegram Mini App - це вебзастосунок, який відкривається всередині Telegram, коли користувач уже авторизований і вже в потрібному чаті. У цьому вся суть: без нового акаунта, без завантаження, без відновлення пароля. Я будую їх так само, як будь-який продакшен-вебпродукт - Next.js і TypeScript на фронті, Node.js на бекенді - плюс кілька правил, які існують лише всередині Telegram. Останній, який я відвантажив, - fintech Web & Mini App під NDA з віртуальними й фізичними картками на Next.js, Express і MongoDB.
Усе починається з бота. BotFather створює бота й Mini App, а користувач відкриває його з кнопки меню, з inline-кнопки або за прямим посиланням t.me з параметром startapp - так я передаю реферальний код чи веду на конкретний екран. Застосунок роздається по HTTPS зі звичайного хоста; у розробці тунель спрямовує Telegram на localhost, тож я тестую на справжньому телефоні, а не лише в браузері на десктопі.
Авторизація - місце, де я ніколи не зрізаю кути. Telegram передає застосунку initData - id користувача, ім’я, auth_date і hash. initDataUnsafe - саме те, що каже назва: годиться, щоб показати ім’я, але не для довіри. Бекенд перевіряє сирі initData через HMAC-підпис, похідний від токена бота, перевіряє, що auth_date свіжий, і лише тоді видає власну сесію. Токен бота ніколи не залишає сервер. У fintech-продукті ця одна перевірка - різниця між «увійшов через Telegram» і «будь-хто з devtools може стати ким завгодно».
Далі Mini App має відчуватись нативним, а не сайтом, вставленим у webview. Читаю themeParams і CSS-змінні Telegram, щоб світла й темна тема йшли за застосунком користувача, використовую MainButton і BackButton замість того, щоб малювати свої, додаю haptic feedback на важливих діях і враховую viewport та safe-area відступи, щоб нічого не ховалось під хедером чи індикатором home. Mobile-first тут не гасло - більшість сесій - це один великий палець на телефоні.
Бот і Mini App працюють у парі. Бот надсилає сповіщення, підтвердження й чеки; Mini App бере на себе екрани, де потрібна форма, список чи чекаут. Вебхуки приходять на Node.js-бекенд, який лишається єдиним джерелом правди для платежів і стану - клієнт питає, але ніколи не вирішує. Цифрові товари всередині Telegram оплачуються в Stars, а фізичні товари й послуги можуть іти через платіжних провайдерів, тож я узгоджую це з клієнтом на старті - це визначає весь флоу.
Що відмовляюсь робити: довіряти initDataUnsafe, втискати десктопний сайт у webview, тримати чекаут лише на фронтенді й робити Mini App без вебверсії, коли бізнесу ще потрібні SEO чи офісний дашборд. Якщо хочете запуститись у Telegram - надішліть одну дію, яку користувач має завершити в чаті. Відповім флоу бота, екранами Mini App і тим, що лишається на сервері.
Дайте наступному продукту того, хто лишається.
Готовий стартувати зараз і лишитись. Довготермінові ретейнери, не злив за два тижні. Напишіть - обговоримо проєкт, вимоги і як рухатись далі.