Как создать Telegram Mini App с помощью ИИ — на примере бота записи с оплатой

Что такое Telegram Mini App и почему бот записи — удачный первый продукт

Разберёмся с терминами. Telegram Mini App (Web App) — это не отдельная «мобильная разработка», а веб-страница, которую Telegram показывает в своём окне. Тот же код открывается и в обычном браузере, просто клиент заходит через бота. Именно так устроен, например, EasyBot: внутри — обычное веб-приложение, снаружи — привычный чат Telegram.

Бот записи к эксперту — хороший первый продукт, потому что он закрывает живую боль. У коуча, репетитора, психолога, маркетолога или финансиста запись обычно идёт хаосом в личке: «когда вам удобно?», «скиньте на карту». Продукт, который вы соберёте, продаётся реальному эксперту из ваших же чатов.

Путь клиента простой: открыл бота эксперта → увидел услуги с ценами → выбрал свободный слот → ввёл имя и контакт → оплатил → получил подтверждение и напоминание в тот же чат. Всё это — тема сквозного проекта курса AI Product Engineer, где такой бот собирается по неделям.

Шаг 1. Каркас: пять кликабельных экранов

Сборку начинают не с базы данных и не с оплаты, а с каркаса — скелета из экранов, по которому можно кликать, но данные ещё не хранятся. Это дёшево править и сразу видно, где путь клиента кривой.

Пять экранов бота записи:

• Визитка эксперта — первый экран с кнопкой «Записаться»
• Услуги — список с ценами (консультация 60 мин — 5000 ₽, разбор — 3000 ₽)
• Календарь слотов — несколько фиксированных времён (вт 15:00, 16:00, 17:00…)
• Форма записи — имя, телефон, выбранные услуга и время
• Подтверждение — «вы записались»

Ключевой приём при работе с агентом — просить по одному экрану за раз, открывать в браузере, кликать и делать коммит (сохранение). Не «сделай весь бот» одной строкой, а «добавь экран услуг, кнопка ведёт на календарь». Так вы держите контроль и в любой момент можете откатиться на шаг назад. На этом этапе услуги и слоты просто вписаны в код руками — база появится дальше.

Шаг 2. Бэкенд и база: запись начинает жить

Каркас красивый, но нажимаешь «Записаться», обновляешь страницу — и брони нет: данные держались в памяти браузера, а она живёт до перезагрузки. Чтобы запись сохранялась, нужна база — файл, который переживает и перезагрузку, и перезапуск сервера.

В качестве базы удобно взять SQLite: это один файл рядом с проектом, ставить и настраивать нечего. Таблицы раскладываются как полки в шкафу: experts (эксперты), services (услуги), slots (слоты), bookings (записи), payments (платежи). Сразу закладывается колонка expert_id — «чей это», чтобы позже подключить несколько экспертов и не переписывать базу.

Здесь же появляется главное правило: фронт спрашивает — бэк решает. Кнопки на экране — это витрина, её видит и может подделать кто угодно. Правду о данных, деньги и доступы держит только сервер. Если «слот занят» проверяет фронт, запись в обход пройдёт; если сервер — нет. Стек в этой связке — TypeScript + Node.js на сервере, SQLite как база; весь код пишет агент.

Шаг 3. Оборачиваем сайт в Telegram Web App

Когда MVP работает, приложение оборачивают в Telegram — и это не переписывание, а обёртка. Web App показывает тот же самый сайт, просто в окне мессенджера.

По шагам это выглядит так:

• создать бота через BotFather командой /newbot и получить токен;
• токен положить в переменную окружения, а не в код — это секретный ключ доступа от вашего имени;
• настроить бота так, чтобы по кнопке он открывал ваш сайт как Web App;
• подключить одну автоматизацию через MCP: при новой записи эксперту приходит уведомление, а клиенту — подтверждение и напоминание.

Важное техническое условие: Telegram пускает Web App только по https. Поэтому обёртка идёт после деплоя — своего домена с SSL-сертификатом. Про то, почему ручной труд в разработке уходит, а понимание остаётся, есть отдельный разбор — «ИИ отменяет лопату».

Шаг 4. Деплой: из «у меня на ноуте» в интернет по ссылке

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

• VPS — арендованный компьютер в дата-центре, работает круглосуточно;
• домен — человеческое имя-адрес вместо цифрового IP;
• DNS — «телефонная книга», которая переводит домен в адрес сервера;
• SSH — защищённая дверь на сервер;
• SSL/https — шифрование и тот самый замок в браузере.

Принцип тот же, что с кодом: команды на сервере выполняет агент, вы читаете и проверяете результат в браузере — заучивать Linux не нужно. Порядок нарушать нельзя: сначала DNS указывает на сервер, сайт открывается по http, и только потом ставится https. Половина затыков деплоя — попытка повесить замок раньше, чем долетел DNS (это занимает от нескольких минут до часа — нормально).

Шаг 5. Приём оплаты — по границе Шариата

Оплату в боте записи делают на двух уровнях, в зависимости от вашей ситуации, и без кредитных механик и процентных рассрочек:

• Полноценный — платёжная ссылка или касса для тех, у кого есть ИП или самозанятость. Здесь важен идемпотентный вебхук: платёжка после моргнувшего интернета может прислать уведомление дважды — правильный код засчитает оплату один раз.
• Простой — номер карты или QR на странице оплаты, либо кнопка «Написать менеджеру», который даёт реквизиты. Юрлицо для этого не нужно.

Юрлицо (ИП) не обязательно — студент выбирает вариант под себя. Оплата — прямой перевод или платёжная ссылка, без процентов.

Где такой продукт ломается

Нейросеть по синтаксису пишет на уровне опытного разработчика — искать там нечего. Но есть класс ошибок, которые она не закрывает по умолчанию: не потому что «глупая», а потому что вы не попросили. Ваша ценность — не ловить эти баги руками, а знать про эти места и попросить агента проверить себя.

• Гонка слотов. Два клиента почти одновременно видят свободный вторник 15:00 и оба жмут «Записаться». Сервер для обоих проверяет «свободен?» — и записывает обоих. Одно время, две брони.
• Дубль оплаты. Интернет моргнул, платёжка на всякий случай прислала уведомление об оплате дважды — наивный код спишет деньги повторно. Лечится идемпотентностью: у каждого платежа уникальный ключ, повтор с тем же ключом игнорируется.
• Утечка данных. Ответ сервера на «покажи слоты» может заодно вернуть чужие имена и телефоны, а адрес вида /booking/57 — открыться у любого, кто подставит чужой номер.
• Секреты в коде. Токен бота или ключ платёжки агент может вписать прямо в код, а код уходит в git и на GitHub. Секреты живут в отдельном файле окружения.

Рефлекс простой: продакшн ломается не в коде, а в логике — в гонках, дублях, доступах и секретах. Готовые промпты-чеклисты («проверь себя на гонки / на дубли оплаты / на утечки секретов») находят слабые места сами — надо только знать, о чём попросить.

Что реально по силам новичку

Честно про границы. MVP держат намеренно простым: слоты фиксированные (без разной длительности и часовых поясов на старте), ссылка на созвон — ручное поле, где эксперт вписывает свою постоянную комнату. Умные штуки вроде интеграции с Zoom и таймзон — в бонусы, чтобы не перегружать новичка. При этом ядро — база, гонки, оплата, обёртка в бота — остаётся полностью.

Курс, из которого взят этот путь, не обещает трудоустройство или зарплату — и говорит об этом прямо. Он даёт другое: умение довести небольшой продукт до работающего состояния через нейросеть и продать его. Ключевой навык — сидеть с агентом и разбираться, а не писать код построчно руками.