[{"data":1,"prerenderedAt":27},["ShallowReactive",2],{"project:mcbuy":3},{"html":4,"toc":5},"\u003Cp>У MCBUY уже работал интернет-магазин, созданный командой. Новому приложению для iOS и Android нужны были те же каталог, заказы, оплата и доставка. Команда использовала торговую основу сайта и общий мобильный интерфейс на Vue и Apache Cordova.\u003C\u002Fp>\n\u003Cp>Покажу на пути от каталога к заказу, как приложение взаимодействует с магазином, что удалось использовать от сайта и какие задачи остались отдельными для каждой платформы.\u003C\u002Fp>\n\u003Ch2 id=\"section-1\">Торговая основа уже была на сайте\u003C\u002Fh2>\n\u003Cp>Приложение должно было сделать выбор одежды удобным и дать магазину канал маркетинговых сообщений при разумном бюджете. У сайта и приложения общие торговые задачи: показать сведения о товаре, обработать корзину, рассчитать заказ с учётом доставки и скидок. Общая основа — backend сайта на «1С-Битрикс» и база данных (БД). Backend обменивается с 1С данными о товарах и заказах в обе стороны; к нему же подключены интеграции с оплатой и доставкой.\u003C\u002Fp>\n\u003Cp>Мобильный интерфейс написан на Vue. Он показывает экраны и реагирует на действия покупателя — это frontend, клиентская часть. Backend — серверная часть — обрабатывает данные магазина и заказы. С ним работают два клиента: веб-интерфейс магазина и приложение на Vue для iOS и Android. Мобильный клиент обменивается с backend запросами и ответами через API — интерфейс взаимодействия программ.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fmedia\u002Fcases\u002Fmcbuy\u002Farchitecture-v2.svg\" alt=\"Backend сайта и БД связаны с веб-интерфейсом и приложением, обмениваются товарами и заказами с 1С в обе стороны и интегрированы с оплатой и доставкой\" loading=\"lazy\" decoding=\"async\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cem>В центре — backend сайта и БД. Два клиента используют эту основу; обмен с 1С двусторонний, оплата и доставка подключены к backend.\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2 id=\"section-2\">Один интерфейс для двух платформ\u003C\u002Fh2>\n\u003Cp>Чтобы этот интерфейс работал на iOS и Android, использовали Apache Cordova. Она запускает HTML, CSS и JavaScript внутри WebView — встроенного браузерного компонента мобильного приложения. У каждой платформы своя оболочка, а веб-код остаётся общим.\u003C\u002Fp>\n\u003Cp>В MCBUY каталог, карточка товара, корзина и навигация разрабатываются в одной кодовой базе Vue. Исправление общего компонента можно включить в обе сборки. Это сокращает дублирование работы над интерфейсом и помогает поддерживать одинаковые сценарии покупки.\u003C\u002Fp>\n\u003Cp>Связь с возможностями устройства обеспечивают плагины Cordova. Например, в клиенте предусмотрен переход к связанному экрану после нажатия на push-уведомление: сообщение магазина может привести покупателя к конкретному содержимому приложения.\u003C\u002Fp>\n\u003Cp>При этом сборки, разрешения, плагины и проверка на устройствах требуют отдельной работы для iOS и Android. Общий код объединяет разработку интерфейса; платформенные задачи остаются частью проекта.\u003C\u002Fp>\n\u003Ch2 id=\"section-3\">От каталога к товару: переход и ожидание данных\u003C\u002Fh2>\n\u003Cp>Покупатель открывает товар из каталога. В обычном переходе между веб-страницами браузер загружает новый документ. Клиент MCBUY работает как SPA — Single Page Application: после запуска JavaScript управляет переходами и обновляет нужные части интерфейса.\u003C\u002Fp>\n\u003Cp>За выбор экрана отвечает Vue Router. Он выбирает компонент карточки товара, клиент получает данные через API, а Vue показывает их. Общая навигация остаётся частью приложения; серверу не требуется заново отправлять целую HTML-страницу для этого перехода.\u003C\u002Fp>\n\u003Cp>Пока данные загружаются, покупатель видит прелоадер — вращающийся круг на полупрозрачном фоне. CSS-анимация связана с состоянием запроса: ожидание сменяется содержимым, а при ошибке предусмотрено сообщение. Так у действия есть видимый отклик. Индикатор показывает ожидание ответа; сам по себе он не ускоряет API и не подгружает следующие экраны заранее.\u003C\u002Fp>\n\u003Cp>В текущем клиенте категории используются повторно, товары загружаются порциями, а при возврате по истории предусмотрено восстановление сохранённой позиции прокрутки. Эти механизмы помогают продолжать выбор после просмотра вещи. Для получения новых данных приложение обращается к серверу.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"\u002Fmedia\u002Fcases\u002Fmcbuy\u002Fhero-v1.webp\" alt=\"Каталог MCBUY, карточка товара и таблица размеров\" loading=\"lazy\" decoding=\"async\" \u002F>\u003C\u002Fp>\n\u003Cp>\u003Cem>Браузерная версия приложения на 15 сентября 2026 года. На экране показана типовая таблица размеров; обмеры конкретного изделия — отдельная функция.\u003C\u002Fem>\u003C\u002Fp>\n\u003Ch2 id=\"section-4\">От действия покупателя к расчёту заказа\u003C\u002Fh2>\n\u003Cp>При оформлении заказа одного обновления экрана уже недостаточно. Если покупатель меняет доставку или применяет промокод, приложению нужен результат серверного расчёта. Vue передаёт выбор через API и отображает ответ.\u003C\u002Fp>\n\u003Cp>Здесь появляется второй роутер. \u003Cstrong>Vue Router выбирает экран на устройстве, а роутер «Битрикс» направляет запрос к серверному обработчику.\u003C\u002Fstrong> Это две разные задачи в одном действии покупателя.\u003C\u002Fp>\n\u003Cp>На сервере используются штатные механизмы Bitrix Framework:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>\u003Ccode>RoutingConfigurator\u003C\u002Fcode>\u003C\u002Fstrong> из \u003Ccode>Bitrix\\Main\\Routing\u003C\u002Fcode> связывает HTTP-метод и шаблон адреса с обработчиком. В API проекта есть маршруты чтения и изменения данных.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>Controller\u003C\u002Fcode>\u003C\u002Fstrong> из \u003Ccode>Bitrix\\Main\\Engine\u003C\u002Fcode> служит основой контроллеров. Их действия вызывают торговую логику и возвращают результат клиенту.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>JSON\u003C\u002Fstrong> — формат, в котором клиент получает данные, статус и ошибки для дальнейшего отображения.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Путь запроса: \u003Cstrong>действие в Vue → запрос API → маршрут → действие контроллера → торговая логика → JSON → обновление экрана\u003C\u002Fstrong>.\u003C\u002Fp>\n\u003Cp>Так разработчик может отдельно работать с представлением заказа и с его серверной обработкой. Пока формат обмена сохраняется, изменение интерфейса не обязательно требует изменения API. Если меняется сам формат, работу клиента и сервера нужно согласовать. Проверки доступа и входных данных также относятся к серверной части.\u003C\u002Fp>\n\u003Ch2 id=\"section-5\">Что можно обновлять вместе, а что отдельно\u003C\u002Fh2>\n\u003Cp>Общая основа полезна и для небольших функций. В текущей реализации MCBUY подготовкой обмеров изделия пользуются веб-карточка и мобильная часть. Каждая отображает сведения в своём интерфейсе, а подготовка данных остаётся общей. Доступность блока зависит от заполненных сведений о товаре.\u003C\u002Fp>\n\u003Cp>Для наполнения главной приложения действует другой принцип: она получает содержание с сервера и собирается из поддерживаемых блоков — баннеров, коллекций, текста и товаров. Обновить наполнение существующего блока и разработать новое поведение — разные задачи. Это позволяет отделить работу с контентом от разработки.\u003C\u002Fp>\n\u003Cp>Получаются два уровня переиспользования: общий клиент для iOS и Android и общие серверные возможности для сайта и приложения. На каждом уровне остаётся своя работа: интерфейс, платформенная оболочка, торговая логика или содержание магазина.\u003C\u002Fp>\n\u003Ch2 id=\"section-6\">Как это влияет на нагрузку\u003C\u002Fh2>\n\u003Cp>В описанном переходе от каталога к товару сервер отдаёт данные, а Vue собирает интерфейс на устройстве. Повторное использование категорий позволяет пропустить повторный запрос; порционная загрузка ограничивает объём данных за один раз. Это конкретные механизмы, за счёт которых можно сократить лишнюю работу.\u003C\u002Fp>\n\u003Cp>Но расчёт скидок и оформление заказа по-прежнему выполняются на сервере. Много небольших API-запросов тоже создают нагрузку, а порции товаров не обязательно уменьшают общий объём данных при просмотре всего каталога.\u003C\u002Fp>\n\u003Cp>Есть и цена начальной загрузки: приложению нужно загрузить JavaScript и запустить клиент. Поэтому первый показ и последующие переходы оценивают отдельно. Эффект такой архитектуры оценивают по времени запуска приложения, числу и длительности запросов, а также нагрузке на сервер.\u003C\u002Fp>\n\u003Ch2 id=\"section-7\">Что получил MCBUY\u003C\u002Fh2>\n\u003Cp>Новое приложение выпущено в мае 2025 года взамен прежнего и доступно в App Store и Google Play. Приложение использует общий код клиентской части для двух платформ и связано с действующей торговой системой магазина. Покупатель переходит между экранами без полной перезагрузки и видит индикатор, пока загружаются данные. При возврате из карточки товара назад в каталог восстанавливается прежняя позиция прокрутки: можно продолжить просмотр с того же участка списка.\u003C\u002Fp>\n\u003Cp>В отзывах App Store за июнь–июль 2025 года пользователи отмечали удобство поиска, избранного, корзины и оформления заказа.\u003C\u002Fp>\n\u003Cp>Для похожего проекта я бы начал с разбора того, что уже умеет сайт: какие данные, расчёты и интеграции можно использовать в приложении. Следом определил бы мобильные сценарии и работу, которую придётся выполнить отдельно для каждой платформы. В MCBUY именно эти границы показывают объём разработки: общая основа помогает повторно использовать готовые возможности магазина, а интерфейс, сборки и проверка устройств остаются самостоятельными задачами.\u003C\u002Fp>\n",[6,9,12,15,18,21,24],{"id":7,"title":8},"section-1","Торговая основа уже была на сайте",{"id":10,"title":11},"section-2","Один интерфейс для двух платформ",{"id":13,"title":14},"section-3","От каталога к товару: переход и ожидание данных",{"id":16,"title":17},"section-4","От действия покупателя к расчёту заказа",{"id":19,"title":20},"section-5","Что можно обновлять вместе, а что отдельно",{"id":22,"title":23},"section-6","Как это влияет на нагрузку",{"id":25,"title":26},"section-7","Что получил MCBUY",1790082845803]