Веб-интерфейс для продукта SAP

веб-клиент для работы с субподрядчиками в государственной организации

О проекте

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

Для крупной государственной организации Москвы создан защищённый веб-интерфейс (SPA), интегрированный с SAP через REST-сервисы на платформе NetWeaver Gateway. Решение позволило внешним субподрядчикам в едином окне работать с договорами, сметами, актами и заявками на материалы, строго соответствуя корпоративным нормам безопасности. Использование JWT-токенов, HTTPS и корпоративной электронной подписи обеспечило надёжную аутентификацию и юридическую значимость операций. Ролевая модель ограничила доступ к документам только авторизованными контрагентами, повысив прозрачность и контроль. В результате оптимизированы процессы взаимодействия, снижены риски утечки данных и ускорен документооборот без нарушения стабильности ядра ERP-системы.

ЗАДАЧА

Крупная государственная организация Москвы столкнулась с необходимостью модернизации процессов взаимодействия с субподрядчиками. Основная ERP-система заказчика работала на базе SAP, и все критичные бизнес-операции были сосредоточены в ней. Требовалось создать защищённый веб-клиент, который позволил бы внешним контрагентам в едином окне просматривать договоры, формировать заявки на материалы, обмениваться сметами и актами, а также получать отчётность. Решение должно было интегрироваться с существующими SAP-сервисами по REST API и строго соответствовать корпоративным нормам информационной безопасности. Наша компания выступила в роли субподрядчика по разработке фронтенд-части и интеграционного слоя, работая в тесной связке с ABAP‑командой основного подрядчика, который отвечал за доработки на стороне SAP.

Проект регулировался соглашением о неразглашении (NDA), поэтому подробности о специфике деятельности организации и чувствительные технические детали могут быть раскрыты только в общих чертах. Тем не менее, полученный опыт стал для нас первым полноценным погружением в экосистему SAP и позволил на практике отработать подходы к интеграции с продуктами этого вендора.

РЕШЕНИЕ

Совместно с контрактером была спроектирована архитектура, в которой тонкий веб-клиент (SPA) взаимодействует с SAP-ландшафтом через промежуточные REST-сервисы, развёрнутые на технологической платформе SAP NetWeaver Gateway. Такой подход позволил отделить пользовательский интерфейс от внутренней логики ERP и обеспечить гибкое масштабирование без риска нарушения стабильности ядра системы. Специалисты на ABAP оперативно дорабатывали OData-эндпоинты под наши потребности, предоставляя документированный API и тестовые окружения.

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

Решение включило следующие функциональные блоки:

  • Личный кабинет субподрядчика с дашбордом актуальных задач и уведомлений.
  • Реестр контрагентов и карточки организаций с историей взаимоотношений.
  • Просмотр и фильтрация договоров с возможностью скачивания печатных форм.
  • Формирование и отслеживание потребностей в материалах, привязка строительных/ремонтных позиций к сметам.
  • Создание, согласование и передача сметной документации с версионированием.
  • Оборот актов выполненных работ: от подготовки до подписания ЭП и архивации.
  • Гибкая система отчётности — как стандартные сводки, так и ролевые отчёты для кураторов со стороны организации‑заказчика.
  • Журналирование всех операций и уведомления об изменении статусов документов.

РЕАЛИЗАЦИЯ

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

Фронтенд разрабатывался на стеке React 18 с TypeScript, что дало строгую типизацию и снизило вероятность ошибок на этапе интеграции. Для управления состоянием использовался Redux Toolkit, а в качестве библиотеки UI‑компонентов — Material UI, что обеспечило соответствие госстандартам оформления интерфейсов и адаптивность для различных устройств. Сборка осуществлялась посредством Webpack с настроенными политиками Content Security Policy для предотвращения XSS-атак. Взаимодействие с API — через Axios с перехватчиками для централизованной обработки ошибок и повторных запросов.

Интеграция с SAP NetWeaver Gateway базировалась на потреблении OData-сервисов, возвращающих структуры JSON. Это потребовало тесного взаимодействия с ABAP-командой: мы формировали требования к расширению эндпоинтов (например, добавление вложенных сущностей для минимизации количества запросов), а коллеги оперативно дорабатывали бэкенд и предоставляли песочницы для тестирования. Отдельного внимания заслужила реализация механизма подписания документов — были интегрированы криптопровайдеры, совместимые с сертифицированными СКЗИ, что позволило выполнять требования 63-ФЗ об электронной подписи.

Сложности и преодоление: одним из вызовов стала необходимость отображения больших списков (тысячи позиций) с сохранением отзывчивости интерфейса — внедрили виртуализацию таблиц и фоновую подгрузку данных. Жёсткие требования SLA (доступность 99,5%) потребовали тонкой настройки ретрай-логики и деградирующего кэширования. Кроме того, пришлось учесть особенности валидации вводимых данных на соответствие справочникам SAP, чтобы избежать рассинхрона на стороне бэкенда. Все этапы сопровождались автоматизированным тестированием: юнит-тесты (Jest), интеграционные тесты (Cypress) и нагрузочное тестирование (k6).

После серии приёмо-сдаточных испытаний и пилотной эксплуатации с привлечением фокус-группы субподрядчиков решение было переведено в продуктивную среду. Благодаря тесной кооперации с контрактером и высокой экспертизе их ABAP-специалистов мы не столкнулись с блокирующими проблемами в зоне SAP-интеграции.

РЕЗУЛЬТАТ

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

Для нашей компании этот проект стал важной вехой: мы не только расширили компетенции в области промышленной интеграции с SAP, но и выработали собственные шаблоны для быстрого подключения веб-интерфейсов к SAP NetWeaver Gateway. Полученный опыт впоследствии был успешно переиспользован в других проектах для организаций с SAP-ландшафтами. Сторона заказчика высоко оценила надёжность и удобство решения, а также оперативную реакцию на обратную связь в процессе опытной эксплуатации. Несмотря на строгие рамки NDA, можно с уверенностью сказать, что цифровое взаимодействие с субподрядчиками вышло на качественно новый уровень, заложив фундамент для дальнейшей автоматизации смежных процессов.

• Спроектирован и внедрён тонкий веб-клиент (SPA) с ролевой моделью, изолирующей данные субподрядчиков. • Обеспечена бесшовная интеграция с SAP через REST API и OData-эндпоинты, доработанные ABAP-командой. • Реализована защита на основе JWT, HTTPS и корпоративной электронной подписи для юридически значимых действий.