Разработка сложной бизнес-логики на фронтенде на примере SCADA-системы
INGIGO CLOUD — разработка сложной бизнес-логики на фронтенде на примере SCADA-системы
ГлавнаяБлогКак мы работаемINGIGO CLOUD — разработка сложной бизнес-логики на фронтенде на примере SCADA-системы
Как мы работаем10 августа 2022

INGIGO CLOUD — разработка сложной бизнес-логики на фронтенде на примере SCADA-системы

Фотография автора
Геворг ДанелянFrontend-техлид

О проекте

Ingigo.Cloud — это онлайн-сервис SCADA для мониторинга и управления технологическим процессом, который может использоваться для создания IoT платформ и взаимодействия M2M устройств. 

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

Краткие сведения

Команда Work Solutions занималась разработкой фронтенд-части приложения. Бэкенд предоставлялся со стороны команды заказчика. 

Количество часов в проекте: 1535 часов.

Цели проекта

Первая цель — Предоставить возможность создания и редактирования мнемосхемы с индивидуальной структурой.

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

Третья цель — В режиме реального времени получать уведомления о возникающих проблемах.

Структура

Сервис состоит из следующих разделов:

Личный кабинет пользователя

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

Изображение статьи

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

Алармы

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

Изображение статьи

Самые критичные из них дополнительно выводятся в виде пуш-уведомлений:

Изображение статьи

Логи

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

Изображение статьи

Теги

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

Страница визуализации

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

Вложенность

Внутри одного объекта автоматизации может быть несколько систем, которые необходимо отслеживать. Поэтому для всех объектов можно создавать подразделы, и для них добавлять отдельные страницы визуализации:

Изображение статьи

Редактор для мобильной версии

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

Изображение статьи

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

Изображение статьи

Разработка страницы визуализации

Страница визуализации — это сердце системы. На этой странице происходит как настройка мнемосхемы, так и диспетчеризация.

Основной функционал построен на библиотеке React Flow. С ее помощью осуществляется:

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

У страницы визуализации есть 2 режима: режим редактирования и режим рантайма.

Режим редактирования

В данном режиме пользователь может изменять настройки элементов и создавать схемы объекта автоматизации. 

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

Изображение статьи

Каждая кнопка, селектор, текст или картинка — это контрол. Их можно разделить на 3 группы:

  1. Простые. Они не подключаются к устройствам и служат в качестве вспомогательных элементов при построении схем. Например, это может быть простой текст для подписи/подсказки или фоновая картинка.
  2. Контролы вывода. Они только отображают информацию, которую присылает сервер. Например, текущую температуру или давление.
  3. Контролы ввода позволяют ввести новое значение для подключенного тега, то есть задать команду для устройства. К примеру, это может быть переключатель Вкл/Выкл, кнопка, выпадающий список или поле для ввода.

Чтобы из контролов можно было составить мнемосхему, для них добавлены следующие возможности:

  • Выравнивание
Изображение статьи
  • Копирование
Изображение статьи
  • Группировка (группы также можно копировать)
Изображение статьи
  • Масштабирование. Размеры контролов можно изменять как с панели, так и при помощи мыши
Изображение статьи
  • Настройки свойств для конкретного контрола. Можно задавать шрифт, размер текста, заголовок, единицу измерения, значение для записи и т.д. У каждого типа контрола свой список свойств.
Изображение статьи

Режим рантайма

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

Изображение статьи

Так как все контролы имеют свой тип, то при взаимодействии с реальным устройством тип данных может не совпадать. Например, мы передаем с фронтенда число, а устройство может принимать только булевое значение (true или false). Поэтому при передаче данных фронтенд-приложение конвертирует все значения в тот тип, который может принимать физическое устройство.

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

Изображение статьи

Ограничения

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

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

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

Выводы

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

105

Другие статьи

Ко всем статьям
Фоновое изображение: четверть круга закрыват часть круга

Интересные статьи и кейсы
от Work Solutions

Нажимая кнопку «Подписаться», я даю согласие на обработку персональных данных

Спасибо за подписку!

Фоновое изображение: верхний полукруг