Как мы собрали Mini App «Колёса РФ»: от каталога к гаражу и личному кабинету

Приложение началось с вопроса о доверии

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

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

Модель может помочь разобрать запрос или сформулировать ответ. Она не подставляет товарные факты. Если надёжного источника для параметра нет, интерфейс объясняет ограничение и ведёт к специалисту. Иначе «умный подбор» быстро становится очень уверенной догадкой.

Карта экранов стала живой Mini App

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

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

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

Личный кабинет сделали без отдельной регистрации

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

Эти функции связали с уже подтверждённым входом в Telegram (Telegram-сессией): избранное для шин и дисков, сравнение, текущий подбор с количествами и история обращений. При первом входе выбор, который человек успел сделать на телефоне, один раз соединяется с его сохранёнными данными. Дальше главной становится сохранённая запись в аккаунте. Отдельный логин и пароль не понадобились.

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

История обращения должна продолжать разговор

Мы переименовали историю так, чтобы слово «подбор» оставалось товарным сценарием, а не названием для всего подряд. В истории появляются подборы, сервисные, фото- и другие типизированные запросы. У каждого есть понятный статус: «Ожидает контакта», «Передаём менеджеру», «Передано менеджеру».

Это небольшая разница в словах, но важная для человека. Если после отправки он видит абстрактное «в работе», снова приходится вспоминать, что именно ушло, кому и в каком составе. Карточка обращения держит обезличенные позиции, время и ход передачи. Менеджер получает типизированный запрос, а не случайный набор полей из браузера.

История не делает менеджера лишним. Она снимает повторный рассказ. В сложном выборе специалист видит уже собранный контекст, а человек понимает, что его действие не исчезло в чёрном ящике.

Автомобиль стал контекстом, а не полем формы

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

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

Это и есть полезная граница для интерфейса. Пользователю не предлагают угадать размер свободным текстом, но и не обещают то, что не подтверждено проверенным источником.

Гараж перестал быть заглушкой

Сначала «Гараж» был пунктом карты экранов. Затем он стал разделом, где можно добавить автомобиль, назначить основной, удалить его с подтверждением и запустить подбор шин или дисков прямо с карточки. Пустой экран объясняет пользу сохранённой машины, а непустой показывает, что у каждой есть свои размеры и свои действия.

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

На своём проекте эту разницу лучше увидеть раньше макетов. Разложите сценарий на три карточки: основная машина, выбрана сейчас и после перехода. Затем проведите выбранную сейчас машину через шины, диски и комплект. Если на каком-то шаге она превращается обратно в основную, вы нашли будущий сбой контекста.

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

Основная и активная машина оказались разными вещами

Во время работы обнаружился очень человеческий дефект. Пользователь выбирал Mercedes, переходил дальше и снова видел BMW. Каталог здесь был ни при чём: выбранная машина жила только в интерфейсе текущей страницы, а следующая страница брала основную из гаража.

Мы разделили основную машину в профиле и машину, которую человек выбрал сейчас. Текущий выбор сверяется со списком машин в гараже, но не меняет настройку профиля. Поэтому он сохраняется при переходах «Главная → Шины → Диски → Комплект». После обычного подбора машину можно отдельно сохранить, но приложение не заменяет ею основную без спроса.

На экране допустимых размеров это особенно видно в варианте 2+2. Передняя и задняя ось имеют разные параметры, и приложение не должно терять их только потому, что пользователь открыл соседний раздел.

Комплект колёс получил собственные правила

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

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

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

Пары 2+2 не стали обычным товаром с числом четыре

Путь «собрать по параметрам» полезен, когда человек знает, чего ищет. Он добавляет обычные товары по четыре штуки, но не объявляет их подходящими для конкретной машины. Разболтовку, центральное отверстие, вылет диска (PCD, DIA, ET) и итоговую установку в таком случае подтверждает менеджер.

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

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

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

Самой трудной оказалась не новая страница, а целостность пути

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

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

Учли и особенности Telegram: кнопку «Назад», свободное место у краёв экрана, момент подключения к Telegram и различия между телефоном, компьютером и обычным браузером. Четвёртым пунктом нижнего меню стал «Гараж», а сравнение осталось в «Ещё». В финале проверили, что выход из конструктора сохраняет выбранную машину, а комплект из гаража не смешивается с обычными товарами.

До макетов разложите путь на три колонки

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

Если вместо факта в схеме появляется обещание, его стоит уточнить до первого экрана. Если человеку негде увидеть статус или следующий ход, путь завершится повторным вопросом в чат. А если в спорном месте не назван ответственный, у интерфейса появится соблазн уверенно угадать.

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

Мы строили не каталог с кнопкой Telegram, а память о выборе

Mini App «Колёса РФ» начиналась со списка товаров. Затем в ней появились история, сохранённые автомобили, активный контекст и комплекты. Каждый шаг добавляли только после того, как находили его источник данных, действие человека и границу обещания.

Для другого бизнеса набор разделов может быть совсем иным. Но критерий сохраняется: интерфейс становится полезным, когда помнит, зачем человек пришёл, что уже выбрал и какой следующий ход для него честен. Там, где ответ требует специалиста, Mini App должна передать контекст, а не сыграть в замену менеджера.