Главная/Портфолио/PepsiCo: как модернизировать систему складского учёта для 70+ филиалов. Технический кейс

PepsiCo: как модернизировать систему складского учёта для 70+ филиалов. Технический кейс

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

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

Материал будет полезен техническим специалистам, CTO крупных компаний и всем, кому интересно глубокое погружение в мир IT.

Типовое решениевеб-приложение для складского учёта оборудования
Технологический стекJava, SpringBoot, JavaScript, TypeScript, React, MobX, Oracle
Работыпроектирование архитектуры программного обеспечения, разработка, тестирование, DevOps
обложка обложка

О клиенте

К нам обратился крупнейший производитель продуктов питания и напитков, который имеет подразделения в более чем 200 странах мира. Годовой объём продаж каждого бренда, которым владеет ретейлер, приносит более 1 миллиарда долларов.

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

Оборудование, установленное в торговых сетях клиента в каждом регионе страны, насчитывает сотни тысяч единиц. Например, в розничных магазинах установлено более 200 тысяч одних только холодильных витрин для прохладительных напитков. Также значительный объём оборудования хранится на складах компании.

Цели и задачи проекта

Целью проекта стала разработка приложения для управления и учёта оборудования. Приложение, которое нужно было разработать, входит в категорию систем MEMS (Management Equipment Systems) и предназначено для обеспечения комплексного подхода к управлению оборудованием.

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

Таким образом, наши основные задачи включали:

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

Бизнес-задачи, которые хотел решить клиент за счёт разработки новой системы MEMS:

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

Помимо создания веб-приложения, холдинг заказал разработку курса по Java/JS для аналитиков компании. Глубокое погружение в продуктовую среду с выверенными процессами, выполнение практических заданий и онлайн-воркшопы позволили усилить технические знания инхаус-специалистов. После прохождения персонального обучения команда клиента сможет упростить и удешевить процессы разработки внутри компании.

Наши решения

Синхронизировались с клиентом по процессам и сформировали проектную команду

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

Работа над проектом велась совместно, по SCRUM-модели, с глубоким включением технических специалистов клиента в процессы и с чётким соблюдением графика.

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

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

Основной состав команды: 

  • тимлид отдела разработки;
  • архитектор решений;
  • UI/UX-дизайнер;
  • 2 аналитика;
  • 3 fullstack-разработчика;
  • 2 frontend-разработчика;
  • 3 backend-разработчика;
  • тестировщик;
  • DevOps-инженер.

Сроки проекта: 11,5 месяцев.

 

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

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

В целом архитектура построена по модели «клиент-сервер» и обладает такими присущими ей особенностями, как:

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

Архитектура монолитного приложения разбита на три уровня (слоя):

  • слой доступа данных: отвечает за работу с базами данных;
  • слой представления (UI/UX): отвечает за клиентскую часть, а именно за то, что отобразится на клиентской стороне;
  • бизнес-слой: инкапсулирует всю бизнес-логику приложения, а также является связующим звеном между слоями данных и представления.

Скорость и простоту разработки микросервисов получили за счет программной платформы Docker и виртуального кластера Kubernetes.

  • Для интеграции с приложением iSales, которым пользуется клиент, использовали микросервис, а также технологию API для взаимодействия с внешними сервисами. По итогам проекта импортировали в онлайн-сервис около двух миллионов транзакций.
  • Построение отчётов также представлено отдельным микросервисом. При этом мы синхронизировали базы данных для создания аналитики, обеспечили целостность ‌данных и предотвратили их потерю в случае возникновения сбоев.

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

После того как архитектура была разработана, перешли к реализации проекта.

Далее рассмотрим процессы подробнее.

архитектура системы учёта оборудования архитектура системы учёта оборудования

Разработали UI/UX-дизайн

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

Оперативно нашли UI-фреймворк, который идеально подошёл под задачи клиента и обеспечил для нас лёгкость миграции, кастомизировали его под потребности пользователей системы и на его основе реализовали новый удобный интерфейс всего за неделю (разработка с нуля могла бы занять месяц и более, но мы помогли клиенту сэкономить время и деньги на данном этапе, при этом не потерять в качестве и удобстве).

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

ui ui

А так выглядит справочник оборудования (старый и новый вариант):

UI UI

На этапе кастомизации мы добавили изменения в макете экрана и правила применения фильтра, изменили структуры таблиц, подход к области видимости склада, и многое другое.

Решением для разработки дизайна стала библиотека на основе Material UI.

Разработали frontend

Фронтенд MEMS был разработан на базе технологии Next.js, это JavaScript-фреймворк для создания веб-приложений на основе React. Нам он нравится: на десятках проектах убедились, что он помогает обеспечить баланс между разнообразием функций и оптимальной производительностью. В старой системе скорость реакции на вводимые пользователем данные была медленной, а переходы внутри системы осуществлялись с задержкой. Теперь же отклик на команды от пользователя моментальный, и это несомненный прогресс.

Типовая архитектура фронтенда разбита на несколько слоёв (App, Pages, Sections/Components, Uikit), что позволило нам логически разделить функциональность и улучшить разбиение приложения на модули. Верхние слои предоставляют данные для нижних. Например, самый первый слой App предоставляет всем компонентам приложения информацию по текущему авторизованному пользователю, локализацию, глобальные стили.

Для организации компонентов приложения используется архитектура, схожая с подходом Atomic Design. Суть заключается в том, что компоненты группируются не по бизнес-логике, а по их сложности и в привязке к функциям. Модульная методология в UI-дизайне позволила спроектировать дизайн-систему, простую в поддержке, масштабировании и развитии.

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

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

В результате мы создали динамичный инструмент для работы с бэкендом. На проекте было множество сущностей — документы, отчёты, операции, справочники по оборудованию, клиентам, складам. При работе с базовой информацией использовали технологию CRUD – строили его вокруг каждой сущности для оптимизации процесса управления операциями. С этим механизмом также легко масштабироваться и добавлять в проект новые сущности – для выполнения минимальной задачи можно обойтись без copy paste и boilerplate code, достаточно описать пару типов и файлов. Решение, конечно, было не самое гибкое, но для фронтенд слоя системы MEMS такая технология оказалась максимально подходящей.

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

Ещё одной задачей стало создание легко масштабируемого решения для обработки документов. В системе консолидировано много разных типов документов, и без единого решения дорого добавлять новые. С помощью роутинга Next.js и кастомных хуков React мы описали общую логику, разделённую по функционалу. Модули отвечали за отображение таблиц, фильтров, форм. Каждый раз, когда нужно добавить новый тип документа, требуется просто пройтись по набору этих модулей, и декларативно описать, как должен выглядеть и работать пользовательский интерфейс.

Разработали backend

Задачей стало создание многопользовательского бизнес-приложения со множеством функций уровня Enterprise. Для решения мы использовали Spring, он предоставляет большой базовый функционал из коробки (кэш, сообщения, слой Rest API и пр.), имеет встроенный контейнер для регистрации зависимостей и обеспечивает интеграцию с библиотеками. Кроме того, мы выбрали его как инструмент для обеспечения безопасности доступа в зависимости от привилегий пользователя.

Основной базой данных стал Oracle BD. Его преимущество в расширенных функциях автоматического партицирования больших таблиц – в аналогичных продуктах такой фичи нет. Вручную это делать сложно и долго.

Бэкенд (серверная часть) содержит бизнес-логику и состоит из модулей (Common, Data, нескольких доменных модулей, модулей инфраструктуры), а также из трёх сервисов:

  • Rest – Rest API: отвечает за обработку запросов с фронтенд;
  • SyncIsales: запускает фоновые задания импорта/экспорта для интеграции с iSales;
  • Reports: инструмент для построения отчётов.

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

Бэкенд работает с сущностями справочников. В приложение были добавлены:

  • справочник оборудования (основной справочник, содержит атрибутивные данные оборудования, которые хранятся в других справочниках);
  • справочник клиентов;
  • справочник складов.

Ниже продемонстрировали, как сейчас выглядит справочник складов.

Ui Ui

По многим процессам в качестве ядра мы использовали библиотеку Quartz, эта технология позволяет создавать сложные графики для выполнения любых работ и синхронизировать запуск задачи между планировщиками. Например, Quartz позволяет ставить задачи в очередь или выполнять их по расписанию, и делать это асинхронно. Таким образом мы решили имеющиеся в старой системе сложности с долгими операциями, например, массовыми загрузками операций из Excel-файлов или документами по проводкам, которые содержат много строк, которые переносятся из одного места в другое. За счет этого механизма сервер поддерживает связь с пользователем  и не «выкидывает» его из сессии, несмотря на ожидание обработки запроса.

На базе Quartz Scheduler мы создали сервис отчетов для пользователей:

  • о первичном складировании оборудования;
  • по движению оборудования;
  • о наличии оборудования;
  • о списании оборудования.

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

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

Обеспечили качество продукта

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

QA QA

Результаты проекта  

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

Подытоживая, вот основные работы, которые мы провели в рамках проекта для достижения этих целей:

  • Разработали пользовательскую часть и серверную часть.
  • Обновили интерфейс, сделав его понятным для пользователя.
  • Интегрировали решения с уже существующей системой клиента.
  • Выбрали монолитную архитектуру как наиболее подходящую для веб-приложения. Включили микросервисы (iSales, Отчёты) для последующего масштабирования.
  • Подобрали технологии, которые наилучшим образом подходят для веб-приложения, и в сочетании дают высочайшую производительность продукта и быстрый отклик. Например, мы взяли в работу не самые гибкие, но максимально подходящие в нашем случае решения для организации фронтенд слоя.
  • Использовали фреймворки, что позволило быстро развернуть приложение.
  • Обеспечили безопасность, надёжность и отказоустойчивость приложения.
  • Протестировали все приложение в целом и каждый модуль в отдельности, используя набор из 14+ видов тестов.
  • Разработали решение таким образом, чтобы на его поддержку уходило минимум времени. В целом, это наш единый верхнеуровневый подход ко всем проектам, что не часто встречается на рынке и отличает нас от других ИТ-компаний.
  • Передали проект на поддержку и дальнейшее масштабирование команде разработки клиента, предварительно проведя обучение технических специалистов.

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

Команда NLABTEAM выражает благодарность команде PepsiCo и каждому специалисту, который принял участие в разработке системы!