ZeroDark: управление персоналом и задачами для судоверфи

ZeroDark — веб-приложение для управления персоналом и задачами на судоверфи Ophardt Maritim. Система позволяет менеджерам контролировать команды и производственные процессы изготовления моторных лодок. В приложении три основных роли: менеджер, сотрудник и системный администратор.

Разработку завершили, полностью протестировали и выпустили приложение за 3 месяца.

Заказчик

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

Технические решения

Канбан-доска

Разработали канбан-доску по образцу Trello, специально адаптированную под это приложение. Реализована с применением нескольких технологий. Функция drag’n’drop обеспечивает плавное перемещение задач между колонками. Через WebSocket участники доски видят изменения в режиме реального времени.

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

Адаптивные изображения

Поддержка современных форматов изображений, в том числе WebP. Изображения загружаются в разных размерах в зависимости от разрешения экрана. При высоком разрешении — меньший файл, при низком — файл большего размера. Это сокращает трафик за счёт подбора качества изображения под конкретное разрешение экрана.

Кроппер

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

Поэтапная загрузка

Использовали поэтапную загрузку, методы React и конфигурацию webpack для загрузки только необходимых ресурсов на странице. Это экономит трафик и подгружает только нужные данные.

Наша задача

Команда Ophardt обратилась к нам с идеей приложения. Исходная задача — заменить бумажную систему управления работами веб-CRM. CRM должна была размещаться на внутренних серверах Ophardt, быть доступной всем сотрудникам и производственным менеджерам.

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

Все внутренние процессы и их взаимосвязи отображены в единой системе — управление построено интуитивно, по принципам Kanban.

Экраны

• Мои задачи

Менеджеры видят все свои задачи. Оставшееся время обозначено цветом:

Зелёный — прошло 0–33% времени, задача только началась. Оранжевый, 33–66% — время ещё есть. Красный, 66–100% — дедлайн близко.

У менеджера и сотрудника может быть несколько общих задач и одна специальная (STC). Клик по задаче открывает модальное окно с информацией о ней. Менеджер может менять статус задачи и оставлять комментарии.

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

• Сотрудники

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

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

• Доски

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

Задачи сгруппированы по статусу: черновики, в работе, на проверке и завершённые.

• Команды

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

Реальное тестирование, а не только демо

Каждый релиз проходил через структурированное QA по письменному ТЗ, включая тестирование по регионам — со сменой локали устройства на каждую, где работает приложение. Именно так наша команда ловила проблемы вроде путаницы в формате даты и вёрстки, специфичной для локали, ещё до того, как их видели рабочие на производстве. Подробнее о процессе QA мобильного приложения — в отдельной статье.

Результат

Команда Симплео построила адаптивную CRM-систему для отслеживания задач сотрудников и статуса их выполнения. Бумажный документооборот ушёл в прошлое. Все внутренние процессы судоверфи теперь живут в одной системе.

Инженерия в цифрах

• Три кодовые базы: API на NestJS, веб-клиент на React и мобильное приложение на React Native.
• API: NestJS 7 и TypeORM на MySQL, документация Swagger, фоновые задачи через планировщик NestJS, Socket.IO 4 для живых обновлений доски и пуши через OneSignal.
• Веб-клиент: React 16, TypeScript 4.2 и Redux. Канбан-доску собрали на react-dnd, кроппер фото на react-easy-crop, английский и немецкий поддерживает i18next.
• Мобильное приложение: React Native 0.64, Redux Toolkit с redux-saga, клиент Socket.IO и пуши через OneSignal.
• Масштаб: больше 1 000 коммитов в трёх репозиториях (465 в API, 564 в вебе, 54 в мобильном приложении) с ноября 2020 по июль 2021. Только на мобильное приложение ушло около 229 часов инженерной работы.

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