«Пан Чемодан» — интернет-магазин мужских и женских сумок и чемоданов. На сайте около 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) Сделали скидку авторизованным пользователям.
Теперь у них есть скидка на товары определенных брендов. У неавторизованных пользователей такой скидки нет.
Если нужно провести быструю интеграцию для запуска мобильного приложения или расширить текущий базовый функционал платформы, напишите нам.
Intensa — производственное агентство для e‑commerce.
Начать проект