Как собрать Telegram Mini App без программиста в 2026: калькулятор цен нейросетью

Telegram Mini App - это обычная веб-страница, которая открывается прямо внутри Telegram, без перехода в браузер. По сути это ваш мини-сайт, встроенный в мессенджер: калькулятор, каталог или форма записи. Собрать такой без программиста реально: страницу пишет нейросеть по описанию, вы выкладываете готовый HTML-файл на бесплатный хостинг и регистрируете ссылку в @BotFather командой /newapp.

В этом гайде соберём сквозной пример - калькулятор стоимости услуг. Попросим Claude или ChatGPT написать одностраничный HTML-калькулятор, выложим его на бесплатный хостинг и подключим к боту через BotFather. Дам готовый промпт для генерации, реальный пошаговый флоу с командами и честно скажу, где у этого способа границы.

Коротко: словарик

• Telegram Mini App - веб-страница (сайт), которая открывается внутри Telegram по кнопке. Технически это ваш HTML на хостинге плюс ссылка, зарегистрированная в BotFather.
• Бот - аккаунт в Telegram, который отвечает на сообщения и команды. Именно к боту прикрепляется Mini App.
• @BotFather - официальный бот Telegram для создания и настройки ботов и приложений. Через него идут все команды вроде /newbot и /newapp.
• Хостинг статики - бесплатный сервис, который держит вашу HTML-страницу в интернете и даёт на неё ссылку с HTTPS.
• HTTPS - защищённый адрес с замочком. Для рабочего Mini App обязателен, бесплатные хостинги дают его сами.

Если сама идея «нейросеть делает за тебя рабочую вещь» вам ещё в новинку, сначала загляните в гайд про Claude Code для нетехнарей - там разобрано, как ИИ реально собирает файлы и страницы, а не просто советует.

Что такое Telegram Mini App простыми словами

Разберём на трёх сущностях, которые легко путают: бот, сайт и Mini App.

Бот - это собеседник. Вы пишете ему сообщение или жмёте кнопку, он отвечает текстом. Общение идёт лентой сообщений, как в переписке. Бот хорош для сценариев «вопрос - ответ»: записать на приём по шагам, прислать прайс, ответить на частый вопрос.

Сайт - это отдельная страница в браузере. Вы переходите по ссылке, открывается Chrome или Safari, там ваша страница. Человек уходит из Telegram в браузер.

Mini App - это тот же сайт, но открытый прямо внутри Telegram, без выхода в браузер. Человек жмёт кнопку в боте или в меню - и поверх чата разворачивается полноценный экран: поля, ползунки, кнопки, картинки. Закрыл - вернулся в переписку.

Простая метафора: бот - это продавец, который отвечает на сообщения. Mini App - это витрина, которую продавец показывает, не выпуская клиента из магазина.

Для калькулятора цен Mini App удобнее бота. В боте человеку пришлось бы отвечать на вопросы по одному: «сколько комнат?», «какой метраж?», «нужен ли демонтаж?». В Mini App он видит весь экран сразу, двигает ползунки и мгновенно получает сумму. Меньше шагов, меньше отказов.

По ресёрчу на июль 2026, Mini App технически - это обычное веб-приложение (HTML-страница), которое Telegram открывает во встроенном окне и связывает с вашим ботом. Никакой особой «телеграмной» технологии для простого калькулятора не нужно: подойдёт обычная HTML-страница.

Что мы соберём: калькулятор стоимости услуг

Возьмём предметный пример - калькулятор стоимости ремонта. Логика простая: человек выбирает тип помещения, вводит площадь, отмечает дополнительные работы, и калькулятор показывает примерную сумму.

Такой же принцип работает для любой услуги, где цена складывается из параметров: клининг (метраж плюс опции), фотосъёмка (часы плюс обработка), доставка (вес плюс расстояние), репетиторство (количество занятий плюс формат). Меняете только параметры и формулу - каркас остаётся тот же.

Весь путь - четыре шага:

1. Нейросеть пишет одностраничный HTML-калькулятор по вашему промпту.
2. Вы выкладываете этот файл на бесплатный хостинг и получаете ссылку с HTTPS.
3. Регистрируете ссылку как Mini App через @BotFather командой /newapp.
4. Прикрепляете приложение к боту, чтобы люди открывали его кнопкой.

Ни на одном шаге не нужно писать код руками. Дальше по порядку.

Шаг 1. Готовый промпт: нейросеть пишет калькулятор

Открываете Claude или ChatGPT и даёте промпт ниже. Он написан так, чтобы на выходе получился один самодостаточный HTML-файл, который сразу работает.

Ты фронтенд-разработчик. Напиши мне ОДИН самодостаточный HTML-файл -
калькулятор стоимости ремонта квартиры. Требования:

1. Весь код (HTML, CSS, JavaScript) в одном файле, без внешних библиотек
   и без подключения файлов - чтобы работало открытием в браузере.
2. Поля ввода:
   - Тип помещения: выпадающий список (квартира, офис, дом).
   - Площадь в м2: числовое поле.
   - Тип ремонта: переключатель (косметический 4000 ₽/м2,
     капитальный 8000 ₽/м2, дизайнерский 14000 ₽/м2).
   - Чекбоксы допработ: демонтаж (+800 ₽/м2), электрика (+1200 ₽/м2),
     сантехника (+1500 ₽/м2).
3. Итоговая сумма считается и обновляется сразу при любом изменении полей,
   без кнопки "рассчитать". Показывай сумму крупно.
4. Внизу кнопка "Оставить заявку".
5. Дизайн: чистый, современный, крупные кнопки под палец, адаптив под телефон.
   Подключи скрипт Telegram Web App: https://telegram.org/js/telegram-web-app.js
   и используй цвета темы Telegram, чтобы приложение выглядело родным внутри мессенджера.
6. Все цены вынеси в начало JavaScript в понятные переменные,
   чтобы я мог легко их поменять.

Выдай только код файла, целиком, готовый к сохранению как index.html.

Цены в промпте условные - поставьте свои. Нейросеть вернёт код целиком. Скопируйте его, вставьте в обычный «Блокнот» (или TextEdit на Mac в режиме простого текста) и сохраните файлом с именем index.html.

Проверьте локально: откройте этот файл двойным кликом, он запустится в браузере. Подвигайте поля, убедитесь, что сумма считается правильно. Если что-то не так - вернитесь в чат и напишите нейросети конкретно: «сумма не пересчитывается при смене площади, поправь» или «сделай кнопки крупнее». Это диалог, правьте до нужного результата.

Шаг 2. Выкладываем страницу на бесплатный хостинг

Готовый index.html нужно разместить в интернете, чтобы у него появилась ссылка с HTTPS. Для Mini App это обязательное условие: рабочее приложение Telegram примет только по защищённому адресу с замочком.

Хорошая новость - все популярные бесплатные хостинги статики выдают HTTPS автоматически. Вот варианты, проверенные веб-поиском на июль 2026:

Хостинг	Как выложить	HTTPS	Нюанс
Netlify Drop	Перетащить папку с файлом в окно браузера	Да, сразу	Самый быстрый старт, без регистрации кода
GitHub Pages	Загрузить файл в репозиторий, включить Pages	Да	Нужен аккаунт GitHub
Cloudflare Pages	Загрузить проект, безлимитный трафик	Да	Чуть больше шагов при первой настройке
Vercel	Загрузить проект, деплой по кнопке	Да	Удобно, но интерфейс на английском

Для первого раза проще всего Netlify Drop: заходите на страницу перетаскивания, кидаете туда папку с вашим index.html, и через несколько секунд получаете готовую ссылку вида https://ваше-имя.netlify.app. Скопируйте её, она понадобится на следующем шаге.

Подробный разбор всех четырёх способов с картинками - в отдельном гайде как выложить сайт в интернет бесплатно. Если планируете часто обновлять калькулятор, там же выберете хостинг под себя.

Проверьте ссылку: откройте её на телефоне. Калькулятор должен открыться и работать так же, как локально. Если открывается - переходим к регистрации в Telegram.

Шаг 3. Создаём бота через @BotFather

Mini App всегда прикрепляется к боту, поэтому сначала нужен бот. Создаётся он за минуту.

1. В поиске Telegram наберите @BotFather и откройте официальный бот (у него синяя галочка).
2. Отправьте команду /newbot.
3. BotFather спросит имя бота (как он будет называться в списке чатов) - введите любое, например «Калькулятор ремонта».
4. Затем спросит username - он должен заканчиваться на bot, например remont_calc_bot. Если занят, придумайте другой.
5. В ответ BotFather пришлёт токен - длинную строку вида 123456:ABC-DEF.... Это ключ доступа к боту. Скопируйте и сохраните его в надёжном месте, никому не показывайте.

Всё, бот создан. Для калькулятора-витрины токен по факту не понадобится, но сам бот нужен как «дом» для приложения. Если хотите, чтобы бот ещё и отвечал на сообщения или собирал заявки кодом, это отдельная история - её разбираем в гайде как создать бота в Телеграме самому бесплатно.

Шаг 4. Регистрируем Mini App командой /newapp

Теперь привяжем нашу страницу к боту как Mini App. По официальной документации Telegram Mini Apps (проверено веб-поиском на июль 2026), флоу такой:

1. Вернитесь в чат с @BotFather.
2. Отправьте команду /newapp.
3. BotFather попросит выбрать бота - отправьте username вашего бота (тот, что оканчивается на bot).
4. Дальше он по очереди спросит:
   • Title - название приложения, которое увидят люди (например, «Калькулятор ремонта»).
   • Description - короткое описание, что делает приложение.
   • Photo - картинку-обложку размером 640×360 пикселей. Можно быстро сгенерировать нейросетью или сделать простую в Canva.
   • Demo GIF - демо-гифку. Необязательно, можно пропустить командой /empty, если BotFather её предложит.
   • Web App URL - вот сюда вставляете вашу HTTPS-ссылку с хостинга из шага 2.
   • Short name - короткое имя приложения латиницей для адреса (например, calc).
5. После этого приложение готово. BotFather пришлёт прямую ссылку вида https://t.me/ваш_бот/calc.

Эта ссылка - и есть ваш Mini App. Откройте её - калькулятор развернётся прямо внутри Telegram.

Шаг 5. Кнопка запуска: делаем приложение удобным

Прямая ссылка работает, но людям удобнее открывать приложение кнопкой в самом боте. Для этого есть команда меню.

1. В @BotFather отправьте /setmenubutton.
2. Выберите вашего бота.
3. Укажите ссылку на ваше приложение (ту же HTTPS-ссылку с хостинга).
4. Задайте текст кнопки - например, «Рассчитать стоимость».

Теперь у бота в углу поля ввода появится кнопка меню. Человек открывает бота, жмёт её - и сразу попадает в калькулятор. Это самый короткий путь для пользователя.

Как приходят заявки из калькулятора

Калькулятор считает сумму, но заявку по-настоящему собрать сложнее. Тут честно про варианты.

Самый простой способ без кода. Кнопка «Оставить заявку» в калькуляторе ведёт в личку бота или сразу вам в Telegram по ссылке https://t.me/ваш_username?text=... с подставленным текстом заявки. Человек жмёт, у него открывается чат с уже заполненным сообщением (тип ремонта, площадь, сумма), он отправляет - вы получаете. Быстро и без сервера.

Способ чуть сложнее. Внутри Mini App есть механизм отправки данных обратно боту (метод sendData). Но чтобы бот их принял и переслал вам, нужен уже работающий бот с кодом, который слушает эти данные. Это уже не «одна HTML-страница», а полноценный бот - как собрать его нейросетью, разбираем в гайде про бота без программирования.

Для старта берите первый способ. Он покрывает 90% задач: человек посчитал, нажал, заявка упала вам в личку с готовым текстом. Попросите нейросеть добавить такую кнопку в калькулятор отдельным промптом: «сделай кнопку “Оставить заявку” ссылкой на https://t.me/мой_username с подставленным текстом заявки, где перечислены выбранные параметры и итоговая сумма».

Честно про ограничения этого способа

Чтобы не было завышенных ожиданий, скажу прямо, где границы.

• Это витрина, а не система. Простой Mini App-калькулятор считает и показывает. Он не хранит историю заявок, не ведёт базу клиентов, не принимает оплату. Для этого нужен настоящий бэкенд, а это уже работа для разработчика.
• Заявки без кода приходят «в лоб». Способ с ссылкой в личку работает, но не даёт аналитики и автоматизации. Считать конверсию и вести воронку придётся руками.
• HTTPS обязателен. На тестовом окружении Telegram пускает HTTP, но для реальных людей нужна защищённая ссылка. Бесплатные хостинги её дают, так что проблема решается сама, но помните про это условие.
• Модерация и правила Telegram. Приложение должно соответствовать правилам платформы. Для честного калькулятора услуг проблем нет, но если задумаете что-то на грани - изучите правила заранее.
• Нейросеть ошибается. Сгенерированный калькулятор надо проверить руками: правильно ли считает, работает ли на телефоне. Не выкладывайте, не протестировав на разных значениях.

Если задача сложнее калькулятора - с базой клиентов, оплатой, личным кабинетом - честнее сразу заложить разработчика. Nano-приложение на одной HTML-странице хорошо ровно до того момента, пока вам не нужна серверная логика.

Чек-лист: что у тебя теперь есть

• Понимание, чем Mini App отличается от бота и от сайта: это мини-сайт внутри Telegram.
• Готовый промпт, по которому нейросеть пишет калькулятор одним HTML-файлом.
• Знание, где бесплатно выложить страницу и получить HTTPS-ссылку.
• Реальный флоу @BotFather: /newbot для бота, /newapp для приложения, /setmenubutton для кнопки.
• Рабочий способ собирать заявки из калькулятора без кода - ссылкой в личку.
• Честная картина ограничений: где витрина на HTML заканчивается и начинается работа для разработчика.

Дальше логичный шаг - научить самого бота что-то делать: отвечать на сообщения, принимать заявки, слать уведомления. Как собрать такого бота нейросетью без программирования, разбираем в гайде как создать бота в Телеграме самому бесплатно. А если хотите глубже понять, как ИИ вообще собирает рабочие штуки по текстовому описанию, начните с Claude Code для нетехнарей. Сам калькулятор для встройки не только в Telegram, но и на сайт, разбираем в гайде калькулятор для сайта нейросетью.

Источники проверки флоу и хостингов: официальная документация Telegram Mini Apps (docs.telegram-mini-apps.com), обзоры бесплатных хостингов статики по состоянию на июль 2026.