Показываем изнутри: закрытый сервис Emex DWC, который 7 лет ждал обновлений
Сначала мы спроектировали систему за 5 недель, а потом разработали фронтенд и запустились через 6 месяцев после начала разработки. В кейсе показываем, как всё теперь работает.
Немного о задаче
Компания Emex DWC занимается продажей запчастей и оборудования для автомобилей. Клиенты – представители B2B-сектора на рынке Среднего Востока, Америки и Европы.
Seller Drive — это система Emex DWC для работы с поставщиками – их личный кабинет. Он выступает своеобразным мостиком между поставщиком автозапчастей и их заказчиком.
Старая версия Seller Drive существовала в компании последние 10 лет и никак не обновлялась 7 из них. Мы договорились о процессе взаимодействия команд fuse8 и Emex для разработки новой версии системы. Получилось подстроить Seller Drive под актуальные бизнес-процессы и технологическую экосистему Emex DWC.
Разработку фронтенд-части Seller Drive мы начали после проектирования системы. Этот этап длился 5 недель и стал основой для разработки.
Нашей ответственностью была фронтенд-часть, а коллеги из Emex занимались бекендом и координацией команд. Через 6 месяцев после начала совместной разработки система была готова к эксплуатации.
Как устроена работа в системе Seller Drive
Стартовая страница содержит общую информацию о возможностях системы. Это единственная индексируемая общедоступная страница Seller Drive – здесь мы настроили SEO-оптимизацию.
Взаимодействие поставщиков с системой начинается со входа или регистрации.
Seller Drive автоматически парсит данные из прайс-листов, но даёт пользователю возможность настроить парсинг, выставив нужные значения табличных колонок для извлечения данных. Например можно выбрать, с какой строки в таблице начинаются необходимые данные, чтобы система не включила в парсинг названия колонок вместо товарных данных.
После загрузки все прайс-листы отображаются на соответствующей вкладке, где организована работа с ними: обновление, отслеживание, рейтинг и количество товаров в продаже. Поставщик настраивает время доставки товаров, собранных в прайс-листе, валюту для их покупки.
Товары из загруженных в Seller Drive прайс-листов попадают на маркетплейс, где покупатели могут их заказывать. Заказы после оформления отображаются в ЛК поставщика. Там их можно обрабатывать и процессить. Чем быстрее поставщик обрабатывает заказы, тем выше становится его рейтинг, который видят покупатели.
Поставщик группирует заказы и создаёт файлы поставок, которые аккумулируются на соответствующей вкладке. По мере осуществления поставок их статус обновляется.
Интерфейс вкладки поставок, как и предыдущих, визуально напоминает таблицу и предоставляет возможности фильтрации и перехода к конкретным поставкам. Это удобство для пользователя: в случае неполадок с поставками, легко выявить, в чём именно дело.
Когда товары отгружены, поставка переходит в категорию исполняющихся (pending). Дойдя до склада, она проверяется складскими работниками. Они работают в одной из связанных с Seller Drive систем и отмечают приход товара, а также недочеты, выявленные на стадии приёмки.
Как только обнаруживается, что с товаром в поставке что-то не так, поставщик в своём ЛК узнаёт об этом и может принять меры по устранению неурядицы. Например, можно принять решение о возврате товара. Тогда информация об этой поставке перенесётся во вкладку Returns. Потом этот товар можно будет доставить заново, уже без ошибок.
Немного о процессах
Сначала мы спроектировали систему по аутсорс-модели, а после подобрали выделенную команду во главе с тимлидом, которую внедрили в процессы клиента. Наша команда полностью взяла на себя разработку фронтенда.
Разрабатывали сервис в тандеме с бекенд-командой Emex. Также над проектом работали технический директор Emex Дмитрий Шнипов и менеджер продукта Александр Крашенин. Первые несколько недель плотно взаимодействовали и с руководителем фронтенд-направления Emex. Сверяли архитектурные паттерны и закрепляли их. После в созданной архитектуре продолжили автономную разработку, проводя еженедельные демо и сессии планирования.
Требования мы получали от Emex в Notion, потом переводили их для дальнейшей работы в Azure DevOps.
Технологический стек
Стек технологий Seller Drive согласован со стеком российского подразделения Emex, чтобы поддерживать и дорабатывать системы одной командой. Вот какие технологии мы использовали для разработки фронтенд-части:
React
TypeScript
State management: Redux, Redux Sagas
Testing: Jest, React Testing Library
WebpackCSS: Styled Components
Ещё один важный момент – консистентная дизайн-система Emex. Обновлённый продукт мы подстраивали под заданные визуальные паттерны – опять же, чтобы остаться верными экосистеме, в которой продукт будет существовать.
Требования к архитектурной структуре Seller Drive были продиктованы экосистемой программных продуктов Emex. Нужно было, чтобы разработчики из внутренней команды заказчика могли быстро переключаться между ними без долгого онбординга.
Результаты
Через 6 месяцев после начала разработки новая версия Seller Drive вошла в эксплуатацию, после чего стала непрерывно совершенствоваться.
Мы продолжаем работать над Seller Drive и сейчас, дополняя функциональность системы, чтобы пользователям было ещё удобнее взаимодействовать с кабинетом поставщика.
Мы fuse8. Запускаем и модернизируем IT-системы для бизнеса. Создаем порталы, личные кабинеты, b2b-сервисы.
В блоге на VC мы делимся опытом и рассказываем, как создаём полезные решения.