Мобильное приложение на IMSHOP для магазина чемоданов

«Пан Чемодан» — интернет-магазин мужских и женских сумок и чемоданов. На сайте около 20 000 товаров. Компания на рынке уже 20 лет. Сейчас в России открыто 62 бутика.

Предыстория

Клиент захотел сделать мобильное приложение.

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

В качестве платформы для быстрого запуска клиент выбрал IMSHOP.

Идея запустить собственное мобильное приложение зародилась более 5 лет назад. Хотелось не упускать растущий тренд и начать как можно скорее осваивать нишу. Проверить пересечение аудиторий web и mobile. Снять сливки с дополнительного канала. Также я искал любые возможности оптимизации расходов. Например, за счет перевода части коммуникаций на пуши и уменьшения количества рассылок через классические sms. Блокирующим моментом оставался высокий порог входа: дорогая разработка, содержание отдельной команды и очень непростой импорт товаров из устаревшей версии 1С. В какой‑то момент я случайно обратил внимание, что у нескольких приложений, которыми пользуюсь я сам, один и тот же разработчик — IMSHOP. Начал узнавать. Оказалось, что будущие коллеги предлагают заманчивый вариант, готовую оболочку на базе вебхуков. Должна работать из коробки.

Задача

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

Результат

MVP-версия была готова примерно за месяц. Через несколько секунд после ее релиза в AppStore пошли первые установки. В течение часа появился первый отзыв.

Полная интеграция заняла 3 месяца. Для сравнения, чтобы создать мобильное приложение с нуля, может потребоваться полгода—год и больше. Зависит от многих факторов, например, функциональности приложения.

Что сделали

Разработали веб-сервис API

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

Например, мобильное приложение отправляет на сайт запрос, сколько товаров в наличии на складе. Сайт обрабатывает запрос и возвращает ответ, который выводится пользователю, — вся эта система работает через API-сервис.

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

Разработали выгрузку товарного фида

Товарный фид — это файл, который содержит информацию о всех категориях и продуктах, доступных в приложении, — параметры, штрих-коды, ссылки на изображения и т. д.

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

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

Разработали фид доступных товаров

Фид доступных товаров содержит информацию о всех складах и продуктах — какие товары, на каких складах, в каком количестве.

Этот фид нужен, чтобы показывать определенные товары в определенном регионе.

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

Сейчас региональность реализована именно через фид доступности товаров.

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

Поэтому наша задача на будущее — доработать логику доставки.

Разработали вебхуки

Вебхук — это механизм, который отправляет запрос из приложения на сайт, когда в системе что‑то изменилось.

Например, пользователь оформил заказ/удалил товар из корзины/нажал на карточку товара — приложение отправляет на сайт запрос, и с сайта приходит ответ.

То есть с помощью вебхуков приложение забирает с сайта нужную информацию.

Вот список необходимых вебхуков, которые мы разработали.

• Вебхук оформления заказа Собирает данные о заказе — состав корзины, выбранный способ доставки и оплаты, примененный промокод и т. д. Передает запрос с этой информацией на сайт. В ответ должен получить отбивку, что заказ удачно зарегистрирован.
• Вебхук остатков Запрашивает у сайта информацию, какие склады есть в регионе и сколько товаров у них в наличии. Так пользователь, который просматривает карточку товара/проверяет корзину/оформляет заказ, видит, есть ли товар в наличии.
• Вебхук пересчета корзины На сайте работает система пересчета корзины с учетом акций, предложений, бонусов и т. д. Вебхук пересчета корзины позволяет подключить к этой системе мобильное приложение. Он отправляет данные о заказе на сайт. В ответ получает информацию о примененных акциях и итоговой стоимости заказа.
• Вебхук оплат Отправляет на сайт выбранный город, способ доставки, состав корзины, примененный промокод и идентификатор пользователя. В ответ получает список доступных способов оплаты.
• Вебхук доставок Тот же принцип, что и у вебхука оплат. В ответ на запрос приложения сайт присылает доступные способы доставки.
• Вебхук авторизации Нужен, чтобы пользователь мог авторизоваться в приложении по номеру телефона. Это работает по такой схеме. Пользователь вводит номер телефона → приложение отправляет сайту запрос на одноразовый пароль → сайт отправляет пользователю SMS с этим паролем → пользователь вводит пароль в приложении → приложение отправляет тот же пароль на сайт → сайт подтверждает введенный одноразовый пароль. Если пользователь по этому номеру уже регистрировался на сайте, сайт отправит приложению данные пользователя.
• Вебхук эквайринга Нужен, чтобы настроить в приложении оплату картой без дополнительных интеграций. Работает следующим образом. Пользователь оформляет заказ и нажимает кнопку «Перейти к оплате» → приложение отправляет на сайт запрос, чтобы создать платеж → сайт присылает ссылку на платеж → пользователь видит экран оплаты, где нужно ввести карту → пользователь заполняет данные и нажимает «Оплатить» → приложение отправляет сайту информацию об оплате. Если все корректно, сайт отвечает, что платеж прошел успешно. Тогда приложение помечает заказ как оплаченный.
• Вебхук истории заказов Запрашивает историю заказов авторизованных пользователей. Сюда также входят покупки в точках продаж. То есть заказы в мобильном приложении синхронизируются с общей историей заказов пользователя.
• Вебхук расположения точек продаж Запрашивает данные о точках продаж — координаты, адрес, время работы магазина и т. д.

Сделали справочник статусов заказов

Изначально статусы заказов знает только сайт — у мобильного приложения нет этих данных.

Справочник нужен, чтобы синхронизировать статусы заказов между сайтом и приложением.

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

Работы по поддержке приложения

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

Основная загвоздка — отсутствие нужного функционала прямо здесь и сейчас. Ярчайший пример: на момент запуска функционал приложения не предполагал деления витрины и вообще каких-либо разделов на мужское и женское. К моему удивлению, мы оказались первыми, кто это запросил. А для нас это был основополагающий элемент. Интеграцией занялась команда Intensa. Они разобрались в документации, связали и проконтролировали все обмены: карточки товаров, способы доставки, выгрузку заказов и т. д. Понравилось, что коллеги готовы учиться чему‑то новому вместе с нами. Особенно подкупает их желание сделать хорошо и классно, а не просто отработать ТЗ. Моменты негатива связаны исключительно с ситуациями, когда мы натыкались на очередное ограничение, и приходилось либо изобретать костыли, либо ждать доработок основного движка.

Что сделали:

1. Добавили разделение брендов по полу.

Теперь в категории «Бренды» есть 3 подкатегории — «Женщинам», «Мужчинам» и «Детям». Внутри каждой подкатегории свой набор брендов.

2. Отсортировали размеры в карточке товара.

Например, раньше размер перчаток отображался в рандомном порядке: 7, 8, 6.

Теперь все по порядку.

3. Настроили только онлайн-оплату для определенных товаров.

То есть некоторые позиции нельзя оплатить при получении — только онлайн.

4. Сделали скидку авторизованным пользователям.

Теперь у них есть скидка на товары определенных брендов. У неавторизованных пользователей такой скидки нет.