Разработка веб-версии системы ESCAR

Позволяет хранить, мониторить и предоставлять информацию о радиационных параметрах помещений и оборудования АЭС.

Сроки и цены

Демо 2 недели Готовое решение 2 месяца

Технологии

Бэкенд Silex Фронтенд backbone.js, svg, jquery, require.js

Команда

CEO Рома Лапин Разработчики Михаил Голодяев

По заказу компании Гелан мы разработали веб-версию их программы Эскар — системы накопления, хранения, мониторинга и предоставления информации о радиационных параметрах помещений и оборудования АЭС.

Для полноты картины надо рассказать немного истории. В 2013 года компания Гелан при активном участии отдела радиационной безопасности НВАЭС разработала и внедрила систему Эскар на Нововоронежский АЭС. Система представляет собой централизованно расположенную на сервере базу данных и десктопные клиенты под Windows, с помощью которых можно вносить и просматривать данные и отчеты.

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

Задача

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

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

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

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

В части функционала задача состояла из следующих крупных блоков:

  • работа с иерархическим деревом объектов станции
  • работа с svg-изображениями объектов (масштабирование, перетаскивание)
  • работа с активными зонами на изображениях объектов, эти зоны обеспечивают связь между объектами
  • работа с точками контроля, замерами на этих точках, фильтрами по типам замеров
  • работа со знаками радиации

Особенность задачи в том, что изображения объектов хранятся в формате svg. Все объекты, которые отображаются поверх (зоны, точки, знаки радиации), соответственно должны правильно ложиться на эти изображения и правильно вести себя при масштабировании и перемещении по области.

Организация работы и процесс

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

Результат демки вышел простой, но показательный, и после краткого «офигенно!» от представителя Гелан, Игоря, мы составили смету на проект, согласовали и приступили к реализации.

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

Раз в неделю мы встречались лично, в основном в офисе Гелан, иногда у нас. Обсуждали прогресс, смотрели результаты, уточняли планы по следующим шагам и принимали решения о всплывших проблемах. Этот режим удалось сохранить до получения окончательного результата. В течение недели несрочные вопросы обсуждались в basecamp, оперативные и важные в skype.

Разработкой системы в основном занимались Миша, который как раз присоединился к нашей команде, и я. Он взял на себя всю фронтенд часть приложения, отрисовку и взаимодействие объектов. Я подготовил основу backend API, который обращался в базу и отдавал на фронтенд подготовленные данные. Позже, когда мы уже поняли, что точно укладываемся в сроки, доработку API Миша тоже взял на себя.

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

Когда система была готова до интеграции на станцию прошло некоторое время. Задержка была связана с человеческим фактором (отпуска ответственных лиц) и затем с организацией процесса установки из-за ограничений доступа в сеть АЭС.

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

Технологии и реализация

Веб-версия Эскара стала нашим первым клиентским приложением, построенным по принципу single-page application.

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

Фронтенд был построен с помощью backbone.js с использованием require.js для подключения сущностей, вьюшек, отписанных в рамках backbone, и дополнительных библиотек, среди которых есть следующие:

  • jquery и jquery-ui
  • svg.js
  • плагин mousewheel

Отрисовку активных зон принял на себя фреймворк svg.js. Маркеров и знаки радиации сделаны через позиционирование png-изображений, замеры — правильно расположенные div'ы.

svg.js не очень хорошо справляется с большим количеством объектов на страничке. И хотя в нашем случае их было не так уж и много, Миша решил, что если можно обойтись где-то без векторной графики, то будет обходиться без нее. В первую очередь из-за соображений быстродействия.

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

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

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

Следующая важная особенность — база данных. Система Эскар от Гелан использует Oracle в соответствии с требованиями АЭС. Соответственно наш бэкенд должен работать с ней же. На своих дев-машинах расширение для PHP oci8 пришлось местами собирать с бубнами. Возможно, мы еще вернемся к этому и оформим описания процесса установки на маках и линуксах в отдельный пост. После победы над oci8 остальные заботы по работе с базой уже отлично решала библиотека Doctrine DBAL.

На этом история с технологическими изысками не заканчивается.

Важным для нас нюансом стало то, что корпоративная политика не позволяет поставить на станции Linux-сервер, поэтому мы освоили установку всего стэка на Windows Server, подготовив полную инструкцию и оттестировав процесс на виртуальных машинах.

Windows, конечно, подразумевал использование IE в качестве браузера. Была речь даже о 6-ой версии, но после экспериментов на этапе демки, мы поняли, что там ничего работать не будет. В итоге проект совместим с IE выше 9-ой версии и другими нормальными браузерами.

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

  • не всегда корректное определение разрмеров svg при динамической загрузке изображения
  • неправильное отображение svg в браузере

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

Со второй бороться пришлось радикальнее. Изображения объектов на станции готовят в Inkscape. Оказалось, что некоторые из них — это просто выгруженные в svg формат png-изображения, к которым применены очень странные трансформации. Такие изображения правильно отображаются в просмотрщиках и самом Inkscape, но браузеры их отображют в сплющенном варианте. Проблему решила конвертация изображений автоматизированным скриптом через консольный инструмент Inkscape.

Результат и планы

Как вы уже поняли, результат был достигнут, приложение установлено на станции и используется. О качестве результата, думаю, можно судить по фразе от Игоря из Гелан: «Все круто! Прямо как у нас в десктопной версии, один в один!».

В общей сложности активная разработка заняла приблизительно 2 месяца. Затем были лишь эпизодические доработки и фиксы при подготовке к установке на станцию и после нее.

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

Evercode Lab

Close