Идея
Разработка системы GPS-мониторинга, которая улучшает удобство работы пользователей и упрощает отслеживание и управление транспортными активами:
Создание интуитивно понятной и логически структурированной архитектуры с новым функционалом, без необходимости перестраивать всю существующую систему клиента с нуля.
Разработка нового фронтенда, аналогичного системе Wialon, для сохранения пользовательского опыта, а также его интеграция с бэкэндом, построенным на системе Traccar (Траккар).
Бизнес-задачи
Клиент был убежден, что будущее приложение может значительно выиграть от более интуитивно понятного и логически структурированного интерфейса. Поэтому он обратился к нам с просьбой разработать новую версию своего приложения. Одним из основных пожеланий было использовать в качестве примера фронтенда существующую систему Wialon (платформа для GPS/ГЛОНАСС-мониторинга и управления автопарком) и интегрировать фронтенд с бэкендом Traccar (бесплатная система GPS-слежения с открытым исходным кодом). Клиент отдал предпочтение серверу Traccar из-за его функциональности и популярности (более 140 компаний по всему миру уже используют Traccar).
Обширный опыт работы в логистике и наблюдения клиента стали важной отправной точкой для дальнейшего анализа этих систем и помогли нам сформулировать видение будущих улучшений в соответствии с его требованиями. В ходе совместного обсуждения мы выяснили следующее:
- Обе системы существуют уже давно. Они становились лучше за счет добавления новых функций, но некоторые из них интегрировались поверх существующей архитектуры и логики, что утяжеляло систему и делало пользовательский опыт менее комфортным. Например, функция отчетности была разбросана по всему приложению, тогда как эффективнее было бы собрать все задачи по отчетности в одном месте.
- Дизайн системы должен развиваться, чтобы соответствовать современным стандартам UI/UX. Однако очень важно сохранить схожую функциональность элементов управления и привычный для прежних клиентов пользовательский интерфейс.
После тщательного анализа рынка и сбора требований заказчика мы предложили решение: создать новый фронтенд (улучшенный вариант — Wialon) и адаптировать его к бэкенду Traccar. Такой подход позволяет нам интегрировать лучшие практики и создать логически улучшенную архитектуру, не перестраивая существующие системы с нуля.
Решение
Чтобы полностью понять цели нашего клиента и достичь ожидаемого результата, мы работали в тесном сотрудничестве и постоянно поддерживали обратную связь. Тщательный анализ возможностей реализации фронтенда и кастомизации бэкенда Traccar помогли нашей команде получить полную картину о том, с чем мы будем работать.
Кастомизация Traccar
Чтобы понять, как мы можем успешно реализовать все запланированные на фронтенде изменения и адаптировать их к бэкенду, наши разработчики и бизнес-аналитики исследовали существующий бэкенд Traccar. Например, нам нужно было сопоставить доступные поля из Traccar с полями Wialon. В некоторых случаях мы создавали отсутствующие поля в виде дополнительных настраиваемых полей.
Работа с бэкендом Traccar дала нам ценный опыт. Были ситуации, когда мы обращались к команде Traccar для внесения некоторых изменений в бэкенд:
- Добавление атрибута «Административный» для настраиваемых полей, чтобы создатель мог помечать поля соответствующей ролью (администратор, менеджер, пользователь), и пользователи могли управлять нужными им полями из бэкенда;
- У Traccar был API для загрузки изображений движущихся объектов. Мы запросили API для хранения изображений водителей и геозон;
- Добавление функции возврата водителя по запросу вместе с назначенным устройством;
- Добавление возможности получения истории назначений водителей;
- API для получения списка поддерживаемых типов устройств;
- Реализация возможности получения уровня топлива в атрибутах позиции вместо расхода топлива по периодам;
- Реализация группировки таблиц в шаблонах отчетов;
- Добавление атрибута «Тип» в Сообщениях.
Перед нами стояли сложные и многогранные задачи, а требования заказчика к новой системе GPS мониторинга автотранспорта были высокими. Мы создали интуитивно понятный и логически структурированный интерфейс, аналогичный Wialon, и интегрировали его с мощным бэкэндом Traccar, не перестраивая существующую систему с нуля.
Изменения UI
Необходимо было создать приложение для слежения за коммерческими грузовиками и анализа информации, собранной с устройств передачи данных о состоянии, скорости и расположении агрегатов автомобиля, уровне технических жидкостей и т. д.
Одна из ключевых проблем, с которой мы столкнулись, заключалась в том, что приложение Wialon очень богато по функционалу, но имеет устаревший дизайн и нелогичный интерфейс. Предполагалось, что функционал будущего приложения будет постоянно обновляться и расширяться. В качестве основных технологий рассматривались React JS и Webix. Webix мог быть полезен благодаря быстрой реализации дополнительного функционала, так как имеет широкий набор готовых комплексных UI-виджетов, однако это потребовало бы разработки фронтенда с нуля. А поскольку фронтенд Traccar уже построен на React JS, выбор был очевиден.
Чтобы улучшить пользовательский интерфейс, сделать его интуитивно понятным и внести больше ясности в роли пользователей и доступные функции, мы реализовали в приложении два модуля.
Это та часть приложения, которая доступна для всех пользователей. После входа в приложение все права доступа приходят от сервера к фронтенду. В зависимости от этих прав и роли пользователя во время сеанса отображается только контент и функции, доступные для конкретного пользователя.
Система для пользователей с ограниченным доступом теперь включает в себя 3 вкладки:
Отслеживание.
Пользователь может отслеживать и управлять Объектами или быть включенным в Группы для выполнения задач, поставленных перед группой пользователей. Здесь также можно строить быстрые отчеты по каждому соответствующему Объекту или Группе, а система автоматически перенаправляет пользователей на вкладку «Отчеты».
Геозоны.
Пользователи могут проверять соответствующие геозоны или те, которые были включены в определенные Группы.
Отчеты.
Мы полностью переработали эту функцию, чтобы сделать процесс отчетности более логичным и интуитивно понятным. Теперь пользователи могут использовать статические или пользовательские шаблоны отчетов для получения информации о маршрутах, проверки сообщений, а также для создания или отображения других отчетов для любого объекта/группы за любой период. Некоторые функции отчетности были доступны только для администраторов, но мы решили перенести их и на сторону пользователя, чтобы водители и другие сотрудники могли создавать более информативные и качественные отчеты, включающие в себя все необходимые данные.
Встроенный нами в приложение модуль для Администраторов и Суперадминистраторов теперь включает в себя более логически структурированный функционал. Наш заказчик хотел создать в своем приложении административный модуль, который был бы виден пользователям с определенными правами без необходимости запускать отдельное приложение. Кроме того, после переноса всех функций отчетности в модуль Мониторинга, мы получили больше пространства для улучшения других функций. В результате в разделе «Администрирование» появились следующие вкладки:
- Учетные записи. Учетная запись объединяет в себе пользователя, данные о его правах доступа и ресурсы (данные о геозонах, уведомлениях и т. д.);
- Пользователи. Пользователь – это лицо, которое авторизуется в системе и имеет доступ к ее объектам в соответствии с предоставленными правами;
- Водители. Водители также рассматриваются системой как объекты, однако они имеют специфические особенности, отличающиеся от других объектов. Водители не пользуются приложением и не имеют учетных записей, но могут пользоваться некоторыми преимуществами компании (например, использовать предоставленные компанией карты для оплаты топлива). Все данные об объектах, к которым они привязаны, и их действиях отслеживаются системой;
- Объекты. Это все объекты с установленными датчиками, которые отслеживаются системой (транспорт, движущаяся и неподвижная техника, люди, животные и т.д.);
- Уведомления. Вкладка помогает настраивать (создавать, отслеживать, включать и отключать) уведомления для конкретных пользователей, групп или объектов. Они помогают регистрировать и контролировать различные события, включая перемещение объектов, показания датчиков, назначение водителей и т.д.;
- Задания. Это вкладка со всеми активными, неактивными, новыми, завершенными и запланированными задачами, которая позволяет администратору иметь больший контроль над операциями.
Некоторые сложные компоненты паттернов React были реализованы во фронтенде для использования во всем приложении. В модуле «Администрирование» мы добавили древовидные таблицы для группировки объектов и водителей. Все таблицы данных и древовидные таблицы были дополнены следующим функционалом шаблона:
- Многоуровневая сортировка;
- Всплывающее окно с настраиваемыми фронтенд-фильтрами для всех колонок и логикой настройки определенного типа фильтра в зависимости от типа значения в колонке;
- Настройка видимости колонок;
- Чекбоксы с определенной логикой взаимодействия для функции массового редактирования (bulk);
- Логика сортировки строк.
В Traccar предусмотрен функционал для преобразования необработанных данных, полученных от датчиков. Но нам нужно было предоставить пользователям конвертер с привычным пользовательским интерфейсом для создания правил преобразования. Мы также разработали панель синтаксического анализа, позволяющую пользователям просматривать данные строк в формате HTML или в виде таблицы данных и анализировать их по столбцам соответствующей таблицы данных отчета.
На начальном этапе проекта все компоненты и их функции были предварительно спроектированы в целостном стиле и добавлены в Storybook для использования в приложении. Каждый новый компонент был реализован таким же образом.
Изменения UX
Чтобы улучшить взаимодействие с пользователем и уменьшить количество проблем, мы добавили динамические таблицы в функцию отчетов. Для их управления мы создали всплывающее окно Data table wizard. С его помощью пользователи с правами менеджера теперь могут создавать, сохранять и обновлять таблицы данных. Пользователь может просто выбирать данные из различных источников, группировать и сортировать их, а также указывать, будет ли доступна диаграмма для выбранной таблицы данных.
Мы расположили модули в более логичной и интуитивно понятной иерархии. Сообщения и маршруты располагались отдельно в меню. Проанализировав дизайн системы, мы отнесли эти шаблоны в «стандартные отчеты», которые нельзя редактировать. Это помогло пользователям работать с привычными отчетами или копировать их для создания новых шаблонов.
Заполненные Отчеты теперь отображаются на странице Динамические отчеты, которая имеет три блока, взаимодействующих друг с другом (Карта, Диаграмма и область действия таблиц данных, отображаемых на динамических горизонтальных вкладках). Действия пользователя произведенные на одном из блоков отражаются на других.
Другие изменения
С точки зрения пользовательского интерфейса новое приложение сохранило определенное сходство с функционалом Wialon, но стало значительно более функциональным, удобным и современным. Чтобы обеспечить единообразие функционала и снизить трудозатраты, мы добавили возможность создавать шаблоны для конвертирования форматов, которые можно сохранять и настраивать как видимые для других пользователей.
В новой архитектуре приложения также был реализован мультиязычный подход, поэтому все текстовые блоки на фронтенде были не статическими, а взяты из файла с английской версией. Это позволит клиенту добавлять в систему файлы с любыми другими языками, если возникнет такая необходимость.
Результат
Заказчик отметил, что обновленное приложение вывело его логистику на новый уровень, предоставив возможность онлайн-мониторинга транспорта за любой отчетный период.
Удобство и эффективность.
Обновленное приложение оказалось очень удобным и эффективным для отслеживания коммерческих грузовиков и анализа информации.
Оптимизация и настройка.
Конечный результат показал, что систему можно оптимизировать и настроить в соответствии с потребностями клиента, обеспечивая более логичный пользовательский опыт.
Четкая визуализация данных.
Данные теперь четко визуализированы, что позволяет пользователям лучше понимать свои задачи.
Сокращение времени и усилий.
Новая система помогает сократить время и усилия, которые раньше тратились на навигацию по старым, сложным функциям.