Создай свою первую
Telegram Mini App
Даже если ты никогда не писал код. Ты придумываешь продукт, отвечаешь на несколько понятных вопросов и проверяешь результат. ИИ-разработчик берёт на себя техническую работу.
Ты не будешь изучать Mini Apps. Ты сделаешь свою.
Цель этого урока — не сделать из тебя программиста и не объяснить внутреннюю кухню Telegram. Цель — довести тебя от идеи до приложения, которое открывается на телефоне и решает одну реальную задачу пользователя.
В обычном техническом обучении человека часто заставляют сначала выучить десятки новых слов, а уже потом обещают результат. Здесь наоборот. Ты начинаешь с человеческой задачи: кому помогаем, что человек должен сделать и какой результат получить. Всё, что относится к технической реализации, уходит в готовую основу проекта и инструкции для AI coding agent.
1. Что такое Mini App простыми словами
В Telegram есть два похожих, но очень разных способа дать человеку цифровой продукт.
Похож на переписку. Человек пишет, получает сообщения, нажимает кнопки под сообщениями и двигается по диалогу.
Удобно: для быстрых ответов, уведомлений, команд и разговорных помощников.
Похожа на обычное приложение. Внутри можно сделать экран, меню, карточки, формы, калькулятор, обучение или личный кабинет.
Удобно: когда человеку проще увидеть интерфейс и сделать действие, чем вести длинную переписку.
Например, бот может спросить: «Какой тариф тебе нужен?» — и показать три кнопки. Mini App может открыть красивую страницу, где человек видит все тарифы, сравнивает их и сразу выбирает подходящий. Оба варианта нормальные. Вопрос только в том, какой путь удобнее для конкретной задачи.
2. Зачем Mini App вообще нужна
Технология сама по себе никому не нужна. Нужен более короткий путь от интереса человека к полезному действию.
Представь: клиент уже общается с тобой в Telegram. Вместо «перейди на сайт → зарегистрируйся → найди нужный раздел → заполни форму» ты даёшь одну кнопку. Человек открывает Mini App, сразу понимает, куда попал, и делает нужное действие.
Быстрый вход
Пользователь уже находится в Telegram. Не нужно заставлять его осваивать новый сервис.
Понятное действие
Экран показывает, куда нажать, что выбрать и что произойдёт дальше.
Ближе к результату
Запись, заявка, расчёт или урок происходят в привычной среде.
Mini App особенно полезна там, где в переписке начинается хаос: много вариантов, много данных, человек должен что-то сравнивать, заполнять, смотреть историю или регулярно возвращаться к результату.
3. Что можно создать
Для первого проекта не нужен «суперсервис». Выбери одну понятную задачу и доведи её до работающего результата.
🤖 ИИ-помощник
Человек описывает ситуацию → получает совет, текст, разбор или персональную рекомендацию.
🎓 Обучение
Уроки, задания, материалы и прогресс ученика в одном интерфейсе.
📅 Запись
Выбрать услугу → день → время → подтвердить заявку.
🛍 Каталог
Показать товары, услуги, тарифы или подборки с удобным выбором.
🧮 Калькулятор
Посчитать цену, экономию, окупаемость, компенсацию или подходящий тариф.
👤 Личный кабинет
История, статусы, баллы, результаты и персональная информация.
Хорошая первая идея обычно звучит очень просто. Например: «Продавец вводит несколько цифр и получает предварительный расчёт», «Клиент выбирает услугу и оставляет заявку», «Ученик открывает урок и отмечает выполнение». Если идею трудно объяснить одним предложением — скорее всего, первая версия уже слишком большая.
Показать промпт
один тип пользователя → одна понятная проблема → одно главное действие → один полезный результат.
4. Как мы будем делать Mini App
Ты работаешь как владелец продукта: объясняешь смысл, выбираешь варианты и принимаешь результат. ИИ-разработчик занимается техникой.
Обычными словами, без технических терминов.
Чтобы понять пользователя, главное действие и желаемое ощущение от приложения.
В ней уже лежат технические правила, которые тебе не нужно изучать.
Создаёт проект, исправляет ошибки и доводит первую версию до рабочего состояния.
И проверяешь его как обычный пользователь.
Самый важный момент — после твоих ответов ИИ не должен возвращать тебе техническое домашнее задание. Он должен взять задачу в работу. Если ему действительно нужен человек — например, вход в аккаунт или подтверждение в Telegram — он просит одно короткое действие и после этого продолжает сам.
5. Ты vs ИИ: кто за что отвечает
Одна из главных причин хаоса в вайбкодинге — человек и ИИ начинают делать работу друг друга. Разделим роли заранее.
Ты решаешь
- какую проблему решаем;
- для кого делаем;
- какой результат должен получить человек;
- какой вариант нравится больше;
- что выглядит неудобно или непонятно;
- принимаешь ли ты результат.
ИИ делает
- разбирается в готовой основе проекта;
- пишет и изменяет код;
- настраивает необходимые части;
- ищет и исправляет ошибки;
- проверяет работу;
- публикует приложение;
- проверяет реальный запуск.
При этом ты не пассивный зритель. Ты владелец результата. ИИ может написать технически правильный проект, но только ты можешь сказать: «человеку понятно», «это решает задачу», «такой стиль подходит» или «вот это лишнее».
6. Полный путь урока
Чтобы не было ощущения «я нажал что-то, а дальше неизвестность», вот весь маршрут заранее.
В маршруте нет этапа «стань разработчиком». В каждом месте, где нужна техника, работает ИИ. Ты включаешься там, где требуется человеческое решение, доступ или визуальная оценка.
7. Главный промпт: запускаем создание
Теперь начинается реальная практика. Скопируй промпт целиком в своего AI coding agent. Он должен сначала задать вопросы, а затем самостоятельно развернуть работу.
Показать / скрыть промпт
8. Пять вопросов перед стартом
Тебе не нужны технические ответы. Нужна понятная идея. Вот как отвечать.
Что должно делать?
Пример: «Помогать селлеру предварительно оценить потерянные товары и понять, что проверить дальше».
Для кого?
Пример: «Для продавцов Wildberries, которые не хотят разбираться в сложных таблицах».
Главное действие?
Пример: «Ввести несколько данных → получить понятный предварительный результат».
Как выглядит?
Пример: «Спокойно, дорого, крупные элементы, минимум текста, удобно с телефона».
Какой бот?
Если бот есть — называешь его. Если нет — честно пишешь: «У меня пока нет».
Это нормальный ответ
Скажи: «Предложи 3 простых варианта и помоги выбрать».
Не пытайся угадывать «как правильно». Эти вопросы нужны не для экзамена. Они помогают ИИ не строить абстрактное приложение «для всех и обо всём». Чем проще твои ответы, тем легче быстро собрать первую рабочую версию.
9. Что должно произойти после пятого ответа
Ты закончил продуктовые ответы — теперь работа должна перейти к исполнителю.
Ты читаешь и понимаешь: «Да, он правильно понял, что мы строим».
Не пытается сразу добавить оплату, кабинет, CRM, аналитику и ещё десять функций.
Не выдаёт тебе домашнее задание из команд.
Если что-то не работает — сначала диагностирует и исправляет.
Доступ, подтверждение, выбор дизайна или пользовательская проверка.
Он двигается к подтверждаемому результату и сам закрывает технические хвосты, если у него есть доступ и инструменты.
10. Пока ИИ работает: что нормально, а что нет
Твоя задача — не вмешиваться в техническую работу просто потому, что ты видишь её на экране.
✅ Нормально
- «Выбери вариант A или B».
- «Какой стиль ближе: строгий или яркий?»
- «Открой Telegram и нажми эту кнопку».
- «Подтверди действие в сервисе».
- «Посмотри глазами: понятно ли, что делать?»
❌ Ненормально
- «Открой терминал и выполни 28 команд».
- «Настрой инфраструктуру самостоятельно».
- «Исправь этот файл».
- «Разберись с технической ошибкой».
- «Создай нужную конфигурацию руками».
Показать промпт
11. Если нужен BotFather, вход или секрет
Иногда есть действия, которые ИИ физически не должен или не может сделать за тебя. Это нормально. Главное — чтобы такие точки были короткими и безопасными.
🤖 BotFather
Если нужен новый бот, ИИ проводит тебя по этому шагу по одному действию, а не выдаёт огромную инструкцию заранее.
🔐 Вход в аккаунт
Логин, пароль и подтверждение вводишь только на странице соответствующего сервиса, а не в чат ИИ.
🔑 Секрет / токен
Не отправляй значение в переписку. ИИ должен предложить безопасный механизм ввода, после чего проверить, что всё действительно работает.
Тут важно различать «действие владельца» и «техническую работу». Нажать подтверждение входа — действие владельца. Разобраться, куда после этого положить настройку и как её использовать — работа ИИ.
12. Checkpoint 1 — Mini App открывается
Первый важный рубеж: не «код существует», а приложение реально можно открыть внутри Telegram.
- Ты нажимаешь кнопку или ссылку в Telegram.
- Mini App действительно открывается, а не ведёт на ошибку.
- Экран нормально выглядит на телефоне.
- Нет горизонтального скролла и сломанной верстки.
- Текст читается без увеличения.
- Понятно, куда смотреть и что нажимать дальше.
Если приложение открывается только в обычном браузере, а внутри Telegram нет — checkpoint ещё не пройден. Нам нужен именно тот пользовательский опыт, ради которого мы делаем Mini App.
13. Checkpoint 2 — главное действие работает
Открывающийся экран — ещё не продукт. Теперь нужен полный пользовательский сценарий.
Если твоя Mini App — калькулятор: человек вводит данные → нажимает кнопку → получает расчёт. Если это запись: выбирает услугу → время → подтверждает. Если ИИ-помощник: вводит запрос → получает полезный ответ.
Показать промпт
14. Первая версия должна быть маленькой — но законченной
Новички часто пытаются компенсировать неуверенность количеством функций. Это почти всегда замедляет результат.
Оплата + кабинет + ИИ + CRM + рефералка + аналитика + 12 экранов + админка, при этом основной сценарий периодически ломается.
Один пользователь проходит один путь от открытия до результата. Всё выглядит понятно, работает на телефоне и не требует твоих пояснений.
Вторая и третья версия никуда не исчезнут. Наоборот: когда у тебя есть маленькое работающее основание, добавлять функции безопаснее. Ты всегда можешь проверить: улучшение действительно улучшило продукт или сломало то, что уже работало.
15. Сделай приложение приятным глазами пользователя
Тебе не нужно изучать UI/UX. Достаточно научиться смотреть на продукт как обычный человек.
👀 За 5 секунд понятно?
Человек понимает, где он и что можно сделать?
👆 Удобно пальцем?
Кнопки достаточно крупные, ничего важного не спрятано?
🧭 Следующий шаг очевиден?
После действия понятно, что произошло и куда двигаться?
⏳ Есть ожидание?
Если действие занимает время, человек видит, что приложение работает?
😬 Ошибка понятна?
Не белый экран, а нормальное сообщение и следующий шаг.
✨ Выглядит как продукт?
А не как техническая страница, которую страшно отправить клиенту.
Показать промпт
16. Добавь только одну «вау»-функцию
Когда базовый путь работает, можно добавить одну вещь, которая заметно повышает ценность или ощущение продукта.
ИИ внутри
Персональная рекомендация, разбор или генерация.
Прогресс
Баллы, уровни, завершённые шаги, серия дней.
Персонализация
Имя, история, любимые настройки, свои результаты.
Одна «вау»-функция полезнее пяти полуготовых. После её добавления обязательно перепроверь основной путь — улучшение не должно ломать то, ради чего человек вообще приходит в приложение.
Показать промпт
17. Definition of Done — когда урок действительно закончен
Финальная приёмка происходит глазами пользователя, а не глазами разработчика.
- Mini App открывается прямо внутри Telegram.
- На телефоне интерфейс читаемый и ничего не разваливается.
- За несколько секунд понятно, для чего приложение.
- Понятно, какое действие главное.
- Главное действие проходит от начала до конца.
- Пользователь получает ожидаемый результат.
- При ошибке приложение не превращается в непонятный белый экран.
- AI coding agent сам проверил основной сценарий и исправил найденные проблемы.
- Рабочая версия сохранена.
- Есть понятный способ открыть приложение снова.
- Другой человек смог воспользоваться приложением без твоей лекции.
18. Если что-то пошло не так
Тебе не нужен справочник из ста ошибок. Нужны несколько понятных ситуаций и правильная реакция.
Приложение не открывается
Скажи ИИ: «Проверь реальный запуск в Telegram, найди причину, исправь и перепроверь. Моё действие проси только если оно неизбежно».
Открывается, но действие не работает
Попроси пройти именно пользовательский сценарий, а не проверять только первый экран.
Выглядит страшно
Не переписывай всё. Сделай UX-проход из раздела 15 и попроси сохранить функциональность.
ИИ бесконечно что-то чинит
Попроси сначала зафиксировать фактическое состояние, одну конкретную проблему и доказательство после исправления.
Сильный подход — не угадывать и не нервно менять всё подряд. Сначала понять, какой пользовательский результат не получен. Затем поручить ИИ найти причину. Потом повторить тот же тест. Ты всегда возвращаешься к наблюдаемому результату.
19. Что ты теперь реально умеешь
После этого Practical твой главный навык — не «знание Telegram». Ты научился превращать идею в проверяемый продукт через ИИ.
💡 Формулировать
Ты умеешь описать продукт через пользователя, проблему, действие и результат.
🤝 Делегировать
Ты умеешь не забирать у ИИ техническую работу обратно на себя.
✅ Принимать
Ты проверяешь не красивые слова «готово», а реальный пользовательский путь.
Ты не прочитал про Mini Apps.
Ты сделал свою.
У тебя есть идея, рабочий интерфейс внутри Telegram, одно реальное действие, проверенный результат и понятный путь улучшения. Именно ради этого нужен Hardcoding PRO: не чтобы знать больше терминов, а чтобы быстрее превращать идеи в работающие продукты.