Разработали веб-приложение для редактирования векторных мнемосхем, которое в составе большого программного комплекса помогает управлять производственными процессами на энергетических и промышленных предприятиях.
Редактор мнемосхем для управления промышленными предприятиями
Оставляете заявку → Наш тимлид связывается с вами → Совместно находим решение
О заказчике и проекте
Заказчик: разработчик программных продуктов для автоматизации энергетических и промышленных предприятий — химических и нефтехимических заводов, электрогенерирующих компаний, ТЭЦ и АЭС.
Проект: программный комплекс для мониторинга работы оборудования и автоматизированных информационных систем, учёта качества энергоресурсов, регистрации аварийных событий, помощи в принятии решений на основе данных с полевых датчиков.
Проблема
Важная функциональность программного комплекса — отображение данных с приборов на диспетчерском пульте или компьютере оператора в формате мнемосхем.
Обычно мнемосхемы создаются в специализированном графическом редакторе. Чтобы сделать мнемосхему интерактивной, нужно интегрировать её элементы с поступающими от приборов данными. Это требует постоянного участия разработчиков, что усложняет отладку, увеличивает сроки внедрения и стоимость. Для промышленных предприятий требуется разработать и подключить тысячи мнемосхем.
Заказчик решил разработать инструмент, интегрируемый в программный комплекс, позволяющий наладчикам АСУ предприятий самостоятельно, без участия разработчиков, создавать интерактивные мнемосхемы. Это должен быть редактор векторной графики работающий в браузере. С помощью графических примитивов (простейших геометрических объектов) и библиотеки компонентов, наладчики должны самостоятельно создавать мнемосхемы и настраивать их поведение в зависимости от поступающих с оборудования данных.
Штатные программисты заказчика разрабатывали другие модули комплекса. Заказчику потребовалось быстро расширить команду проекта узкоспециализированными кадрами.
Почему мы
Заказчик отправил запросы нескольким компаниям специализирующимся на фронтенд-разработке. Мы предложили обсудить проект на уровне технических лидеров и исполнителей. Провели несколько таких обсуждений. Через 4–5 месяцев заказчик вернулся с намерением подписать договор — исходя из проведённых технических консультаций тимлиды рекомендовали руководству заключить контракт с нами.
Процесс
В связи со сложностью и высокой степенью неопределенности проекта согласовали работу по схеме Time and materials (T@M — оплата затраченного времени).
Первоначально заказчик ставил задачу разработать редактор с нуля. Мы предложили исследовать рынок готовых движков и редакторов для работы с векторными примитивами. Было предположение, что так сможем сократить сроки и бюджет проекта. Решили начать с этапа аналитики.
1. Этап аналитики
Задача: погрузиться в сложный программный комплекс, исследовать предметную специфичную область, предложить решения.
Редактор является модулем крупной автоматизированной системы управления промышленными предприятиями — нужно учитывать архитектуру всей системы и возможности для интеграций.
Стартовали с исследования Open Source движков для создания векторной графики, которые позволяют работать с простыми геометрическими объектами (графическими примитивами). Подходящим кажется только одно решение — библиотека mxGraph: открытый исходный код, 12 лет на рынке, лежит в основе популярного сервиса Draw.io, интегрируемого с GoogleDocs. Согласовали с клиентом предварительный выбор. После консультаций с юристами клиент утвердил библиотеку для детального исследования.
Провели технический аудит исходного кода mxGraph. Резюме:
Утвердили у заказчика создание редактора на основе mxGraph. Использование готового решения накладывает технические ограничения, но даёт возможность оперативно сосредоточиться на важной для бизнеса функциональности, а также уменьшить срок и бюджет проекта.
2. Разработка MVP
Создание минимально жизнеспособного продукта (minimum viable product, MVP) заняло полгода. Работали в условиях сильной интеграции с командой разработчиков заказчика. Ежедневно обсуждали технические решения. Каждая неделя завершалась демонстрацией результатов работы, обсуждением проблем и планированием.
Жёсткие требования предъявлялись к производительности редактора. Браузер оператора должен работать без перезагрузки месяцами. При большом количестве элементов мнемосхемы (несколько тысяч) обнаружились проблемы в работе mxGraph. Требовалось уделить внимание утечкам памяти и скорости отображения элементов. Чтобы снизить нагрузку на CPU (центральный процессор) и устранить другие проблемы мы внесли корректировки непосредственно в движок mxGraph.
Ближе к окончанию работ у заказчика появилась необходимость оперативно внедрить редактор в систему управления электроснабжением действующего завода. Мы помогли это сделать. Демонстрационная мнемосхема состояла из 20 000 векторных элементов меняющих состояние в реальном времени.
Результат
Сократили бюджет проекта в два раза, а срок на 3–6 месяцев за счёт проведения этапа аналитики и предложения использовать готовую библиотеку. Хотя заказчик пришёл с задачей разработать редактор с нуля.
Разработали редактор векторной графики на базе библиотеки mxGraph. Расширили его недостающей функциональностью, которая позволила наладчикам АСУ организовать библиотеку компонентов и повторно использовать элементы графической нотации и целые мнемосхемы. Разработали интерфейс, с помощью которого устанавливаются правила отображения графических элементов в зависимости от получаемых данных. Внесли изменения в mxGraph, чтобы обеспечить требуемую производительность.
Разработали модуль мониторинга мнемосхем. Оператор на производстве может в режиме реального времени, через браузер, следить за показаниями приборов и принимать решения.
Интегрировали готовый редактор в автоматизированную систему управления заводом.
Ретроспектива
Главные факторы успешной реализации подобного проекта: готовность погружаться в нестандартную предметную область и бизнес процессы, высокий уровень проектного менеджмента, способность выстраивать эффективные коммуникации, сильные тимлиды и разработчики с обеих сторон.