[{"data":1,"prerenderedAt":303},["ShallowReactive",2],{"blog-ru-telegram-mini-app-chto-eto":3},{"id":4,"title":5,"body":6,"date":287,"description":288,"extension":289,"meta":290,"navigation":107,"path":291,"readTime":292,"seo":293,"slug":294,"stem":295,"tags":296,"__hash__":302},"blogRu\u002Fru\u002Fblog\u002Ftelegram-mini-app-chto-eto.md","Telegram Mini App — что это, как работает и когда нужно клиенту",{"type":7,"value":8,"toc":280},"minimark",[9,13,16,21,24,27,30,67,144,151,178,182,189,195,201,205,208,222,225,229,240,243,263,266,270,273,276],[10,11,12],"p",{},"Клиент звонит и говорит: «Хочу приложение в Telegram». Раньше я сразу уточнял — бот или мобилка? Теперь есть третий вариант, и он часто оказывается лучшим.",[10,14,15],{},"Telegram Mini App — это полноценное веб-приложение, которое открывается прямо внутри мессенджера. Пользователь нажимает кнопку в боте, и вместо цепочки сообщений появляется привычный интерфейс с кнопками, формами, картинками — всё как на нормальном сайте.",[17,18,20],"h2",{"id":19},"чем-отличается-от-обычного-бота","Чем отличается от обычного бота",[10,22,23],{},"Обычный бот — это диалог. Команды, кнопки, текст. Работает отлично для линейных задач: уведомления, FAQ, простые формы. Но как только появляется что-то сложнее — корзина в магазине, расписание с фильтрами, дашборд с графиками — бот начинает тормозить UX.",[10,25,26],{},"Mini App — это HTML + CSS + JavaScript в отдельном окне поверх чата. Пользователь не покидает Telegram, но работает с полноценным интерфейсом. Telegram передаёт приложению данные о пользователе, тот может отправить данные обратно в бота.",[10,28,29],{},"Вот что умеет Mini App из коробки:",[31,32,33,42,45,51,61,64],"ul",{},[34,35,36,37,41],"li",{},"Полноэкранный режим (",[38,39,40],"code",{},"tg.expand()",")",[34,43,44],{},"Данные пользователя без авторизации: имя, ID, username",[34,46,47,48,41],{},"Отправка данных в бота (",[38,49,50],{},"tg.sendData()",[34,52,53,54,57,58,41],{},"Нативные подтверждения (",[38,55,56],{},"tg.showAlert()",", ",[38,59,60],{},"tg.showConfirm()",[34,62,63],{},"Кнопка «Назад» в шапке Telegram",[34,65,66],{},"Адаптация под тему пользователя (тёмная\u002Fсветлая)",[68,69,74],"pre",{"className":70,"code":71,"language":72,"meta":73,"style":73},"language-javascript shiki shiki-themes github-light github-dark","\u002F\u002F Инициализация\nconst tg = window.Telegram.WebApp\ntg.ready()\ntg.expand()\n\n\u002F\u002F Получить данные пользователя\nconst user = tg.initDataUnsafe.user\nconsole.log(user.first_name) \u002F\u002F \"Алексей\"\n\n\u002F\u002F Отправить данные боту\ntg.sendData(JSON.stringify({ action: 'order', product_id: 42 }))\n","javascript","",[38,75,76,84,90,96,102,109,115,121,127,132,138],{"__ignoreMap":73},[77,78,81],"span",{"class":79,"line":80},"line",1,[77,82,83],{},"\u002F\u002F Инициализация\n",[77,85,87],{"class":79,"line":86},2,[77,88,89],{},"const tg = window.Telegram.WebApp\n",[77,91,93],{"class":79,"line":92},3,[77,94,95],{},"tg.ready()\n",[77,97,99],{"class":79,"line":98},4,[77,100,101],{},"tg.expand()\n",[77,103,105],{"class":79,"line":104},5,[77,106,108],{"emptyLinePlaceholder":107},true,"\n",[77,110,112],{"class":79,"line":111},6,[77,113,114],{},"\u002F\u002F Получить данные пользователя\n",[77,116,118],{"class":79,"line":117},7,[77,119,120],{},"const user = tg.initDataUnsafe.user\n",[77,122,124],{"class":79,"line":123},8,[77,125,126],{},"console.log(user.first_name) \u002F\u002F \"Алексей\"\n",[77,128,130],{"class":79,"line":129},9,[77,131,108],{"emptyLinePlaceholder":107},[77,133,135],{"class":79,"line":134},10,[77,136,137],{},"\u002F\u002F Отправить данные боту\n",[77,139,141],{"class":79,"line":140},11,[77,142,143],{},"tg.sendData(JSON.stringify({ action: 'order', product_id: 42 }))\n",[10,145,146,147,150],{},"На стороне бота aiogram получает это через хендлер ",[38,148,149],{},"web_app_data",":",[68,152,156],{"className":153,"code":154,"language":155,"meta":73,"style":73},"language-python shiki shiki-themes github-light github-dark","@router.message(F.web_app_data)\nasync def webapp_data(message: Message):\n    data = json.loads(message.web_app_data.data)\n    await message.answer(f\"Получили заказ на товар {data['product_id']}\")\n","python",[38,157,158,163,168,173],{"__ignoreMap":73},[77,159,160],{"class":79,"line":80},[77,161,162],{},"@router.message(F.web_app_data)\n",[77,164,165],{"class":79,"line":86},[77,166,167],{},"async def webapp_data(message: Message):\n",[77,169,170],{"class":79,"line":92},[77,171,172],{},"    data = json.loads(message.web_app_data.data)\n",[77,174,175],{"class":79,"line":98},[77,176,177],{},"    await message.answer(f\"Получили заказ на товар {data['product_id']}\")\n",[17,179,181],{"id":180},"реальные-проекты-которые-я-делал","Реальные проекты, которые я делал",[10,183,184,188],{},[185,186,187],"strong",{},"Фитнес-трекер для клубов."," Клиент хотел, чтобы посетители видели своё расписание и записывались на тренировки прямо в Telegram. С обычным ботом это 4-5 шагов диалога. В Mini App — один экран с расписанием и кнопкой «Записаться». Конверсия выросла.",[10,190,191,194],{},[185,192,193],{},"Магазин с корзиной."," Пока в боте корзина — это неловкие «вы добавили товар, введите \u002Fcart чтобы посмотреть», в Mini App это полноценный ecommerce с фото, количеством, суммой.",[10,196,197,200],{},[185,198,199],{},"Форма заказа для сложных услуг."," Когда нужно выбрать несколько параметров, загрузить фото, написать комментарий — в боте это ад, в Mini App — нормальная форма.",[17,202,204],{"id":203},"когда-mini-app-не-нужен","Когда Mini App НЕ нужен",[10,206,207],{},"Я не советую Mini App когда:",[31,209,210,213,216,219],{},[34,211,212],{},"Задача — простые уведомления или рассылки",[34,214,215],{},"Аудитория немолодая и не в теме (некоторые не поймут что нажимать)",[34,217,218],{},"Нет бюджета и нет времени — Mini App сложнее в разработке",[34,220,221],{},"Нужны push-уведомления без действия пользователя (бот справляется лучше)",[10,223,224],{},"Простое правило: если интерфейс поместится в 3-4 шага в боте — делайте бота. Если нет — Mini App.",[17,226,228],{"id":227},"стек-и-сколько-стоит","Стек и сколько стоит",[10,230,231,232,235,236,239],{},"Я делаю Mini App на ",[185,233,234],{},"Vue.js + Vite"," — быстро разворачивается, всё знакомое. Можно и React, и vanilla JS. Бэкенд — FastAPI или тот же aiogram через ",[38,237,238],{},"sendData",".",[10,241,242],{},"Цены из жизни:",[31,244,245,251,257],{},[34,246,247,248],{},"Простой Mini App (форма + 2-3 экрана): ",[185,249,250],{},"$200–350",[34,252,253,254],{},"Средний (магазин, расписание, личный кабинет): ",[185,255,256],{},"$400–700",[34,258,259,260],{},"Сложный (дашборд, аналитика, интеграции): ",[185,261,262],{},"$800+",[10,264,265],{},"Всегда беру за хостинг Mini App отдельно — это обычный фронтенд, нужен свой домен и деплой.",[17,267,269],{"id":268},"итого","Итого",[10,271,272],{},"Mini App — не замена боту, а дополнение. Там где бот начинает ломаться в многоэкранных диалогах, Mini App спасает. Пользователи разбираются быстро — Telegram уже приучил их к этому.",[10,274,275],{},"Если есть вопросы по реализации — пишите, разберёмся.",[277,278,279],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":73,"searchDepth":86,"depth":86,"links":281},[282,283,284,285,286],{"id":19,"depth":86,"text":20},{"id":180,"depth":86,"text":181},{"id":203,"depth":86,"text":204},{"id":227,"depth":86,"text":228},{"id":268,"depth":86,"text":269},"2025-05-20","Объясняю чем Mini App отличается от обычного бота, когда стоит делать и сколько это стоит. С примерами из реальных проектов.","md",{},"\u002Fru\u002Fblog\u002Ftelegram-mini-app-chto-eto","7 мин",{"title":5,"description":288},"telegram-mini-app-chto-eto","ru\u002Fblog\u002Ftelegram-mini-app-chto-eto",[297,298,299,300,301],"Telegram","Mini App","Vue.js","WebApp","Разработка","ozzN4trl_dm3JNHzU3De3PakkVX_uYz7yKHrqsx5MWI",1783086766303]