Telegram давно уже не просто мессенджер для переписки — это целая платформа, где можно строить ботов, запускать мини-игры, и вот теперь — пилить свои Web Apps прямо внутри чатов. Это не просто ссылки на сайты, а настоящие веб-приложения, которые интегрируются с Telegram на уровне UI и API. Если ты когда-то хотел запускать свои сервисы прямо в чате — добро пожаловать в клуб!

Возможности Telegram Web App

• Встраивание кастомных интерфейсов (React, Vue, Angular, ванильный JS — что душе угодно).
• Доступ к Telegram API: можно получать user_id, имя, аватарку, а также отправлять данные обратно в чат.
• Работа на любых устройствах, где есть Telegram (мобила, десктоп, web-версия).
• Безопасность: Telegram сам заботится о токенах и авторизации.
• Возможность оплаты прямо в Web App через Telegram Payments.

Что требуется (требования, ос, железо)

• Любая ОС: Linux, macOS, Windows — не важно, всё крутится на Node.js и браузере.
• Node.js: Желательно LTS-версия (16+), чтобы не ловить баги с пакетами.
• Telegram-бот: Без него никуда. Создаём через BotFather.
• Хостинг для фронта: Можно локально для теста, но для продакшена нужен публичный HTTPS (Cloudflare Pages, GitHub Pages, Render, Vercel и т.д.).
• Базовые знания JS/HTML/CSS: Ну, ты же не просто так сюда пришёл 🙂

Установка — пошаговая инструкция

1. Создаём бота:
   В Telegram ищем BotFather, пишем /newbot, даём имя, получаем токен. Сохраняем!
2. Пилим фронт:

   npx create-react-app tg-webapp-demo
   cd tg-webapp-demo
   npm start
   

   Или любой другой фреймворк, можно даже простую HTML-страницу.

3. Встраиваем Telegram Web Apps SDK:
   Добавь в public/index.html перед закрывающим </body>:

   <script src="https://telegram.org/js/telegram-web-app.js"></script>
   

   Теперь в JS доступен глобальный объект window.Telegram.WebApp.

4. Подключаем Web App к боту:
   В боте должна быть кнопка, которая вызывает Web App. Пример на Node.js (telegraf):

   const { Telegraf, Markup } = require('telegraf');
   const bot = new Telegraf('YOUR_BOT_TOKEN');
   
   bot.command('start', (ctx) => {
     ctx.reply('Жми кнопку!', Markup.keyboard([
       [Markup.button.webApp('Открыть WebApp', 'https://твой_домен/app')]
     ]).resize());
   });
   
   bot.launch();
   

   Не забудь заменить https://твой_домен/app на свой адрес!

5. Публикуем фронт:

   npm run build
   

   Заливаем содержимое build/ на любой HTTPS-хостинг.
   Для локального теста можно использовать ngrok:

   npx serve -s build
   npx ngrok http 5000
   

   ngrok даст тебе публичный HTTPS-URL.

6. Проверяем:
   Открываем бота в Telegram, жмём кнопку — если всё ок, откроется твой Web App с Telegram Web Apps API.

Использование, полный список команд и вариантов

Вот что ты можешь делать через window.Telegram.WebApp:

• Telegram.WebApp.initData — строка с данными пользователя (JWT-подобная, для верификации на сервере).
• Telegram.WebApp.initDataUnsafe — объект с parsed данными (user, chat, query_id и т.д.).
• Telegram.WebApp.sendData(data) — отправить строку обратно боту (например, выбранный товар).
• Telegram.WebApp.close() — закрыть Web App.
• Telegram.WebApp.expand() — развернуть Web App на весь экран.
• Telegram.WebApp.MainButton — объект для управления главной кнопкой (цвет, текст, обработчик onClick).
• Telegram.WebApp.HapticFeedback — тактильная отдача (на мобиле).

Полный список методов и описания смотри в официальной документации Telegram Web Apps.

Ошибки, как делать не надо

• Не забывай про HTTPS! Telegram Web Apps не работает на HTTP, только на HTTPS.
• Не хардкодь токены! Не передавай токен бота или секреты в фронт.
• Не доверяй initData без верификации на сервере! Проверяй подпись через свой бэкенд — иначе можно подделать юзера.
• Не рассчитывай на работу в старых клиентах Telegram. Web Apps поддерживаются только в актуальных версиях.
• Не пихай тяжелый фронт с кучей статики. Telegram открывает Web App внутри WebView, юзеры не любят ждать.

Пример реального использования в окружении

Я недавно делал Web App для внутреннего учета оборудования в офисе. Кнопка в боте открывает форму, где можно отсканировать QR-код с компа, добавить комментарий, и отправить результат обратно в чат. Всё работает прямо на мобиле, не надо ставить отдельные приложения. Данные летят через sendData() — бот ловит их и пишет в Google Sheets через API.

Заключение

Telegram Web Apps — это реально крутая тема для быстрой интеграции твоих сервисов прямо в Telegram. Можно делать магазины, таск-трекеры, системы учета, мини-игры — почти всё что угодно. Главное — не забывай про безопасность и валидацию данных. Если хочешь почитать подробнее, вот официальная документация Telegram Web Apps и подборка примеров на GitHub.

Если остались вопросы — ищи меня на Хабре, Reddit или в чате DevOps-ов. Удачи, и пусть твои Web Apps будут быстрыми и удобными!