По заказу компании Гелан мы разработали веб-версию их программы Эскар — системы накопления, хранения, мониторинга и предоставления информации о радиационных параметрах помещений и оборудования АЭС.
Данный проект во многом для нас особенный и уникальный, как с точки зрения используемых для реализации технологий, так и конечных пользователей проекта.
В 2013 года компания Гелан при активном участии отдела радиационной безопасности НВАЭС разработала и внедрила систему Эскар на Нововоронежский АЭС. Система представляет собой централизованно расположенную на сервере базу данных и десктопные клиенты под Windows, с помощью которых можно вносить и просматривать данные и отчеты.
В этом году перед компанией Гелан встала новая задача, за решением которой после продолжительных поисков исполнителей и пары неудач они и обратились к нам.
Разработанная десктопная система Эскар, как уже упоминалось, позволяет как вносить данные, так и просматривать. Для работы с ней необходима установка клиента на каждый компьютер, где ее будут использовать. Соответственно при каждом обновлении, проводить его нужно тоже на каждой машине тем или иным способом. Конечно, вся система работает в полностью закрытой сети, а для установки и обновлений есть специальные люди и регламентированные процессы
Внесением данных в систему на станции занимается всего несколько сотрудников. Всем остальным желательно иметь доступ только к просмотру информации системы.
Поэтому решено было сделать аналог системы Эскар, но уже на базе веб-приложения ограниченного по возможностям только просмотром информации.
Веб-приложение доступно всем сотрудникам станции через браузер, для его обновления достаточно будет организовать обновления только на одном сервере, а не всех компьютерах сотрудников. И работать веб-приложение может с той же централизованной базой данных, что и десктопная программа.
В части функционала задача состояла из следующих крупных блоков:
Особенность задачи в том, что изображения объектов хранятся в формате svg. Все объекты, которые отображаются поверх (зоны, точки, знаки радиации), соответственно должны правильно ложиться на эти изображения и правильно вести себя при масштабировании и перемещении по области.
Ознакомившись с задачей, мы взяли время на то, чтобы понять реальность ее выполнения и какие для этого нужны будут технологии. Проще говоря, мы решили сделать простую демку, которая бы демонстрировала реальность выполнения задачи в рамках веб-приложения.
Результат демки вышел простой, но показательный, и после краткого «офигенно!» от представителя Гелан, Игоря, мы составили смету на проект, согласовали и приступили к реализации.
Ведение проекта организовали в basecamp, куда сразу завели все задачи по изначальному ТЗ, сопроводив уточнениями по итогам первых обсуждений. Также сразу была организована совместная конференция в skype, где присутствовали все задействованные сотрудники с нашей стороны и разработчики десктопной версии программы Эскар.
Раз в неделю мы встречались лично, в основном в офисе Гелан, иногда у нас. Обсуждали прогресс, смотрели результаты, уточняли планы по следующим шагам и принимали решения о всплывших проблемах. Этот режим удалось сохранить до получения окончательного результата. В течение недели несрочные вопросы обсуждались в basecamp, оперативные и важные в skype.
Разработкой системы в основном занимались Миша, который как раз присоединился к нашей команде, и я (Роман). Он взял на себя всю фронтенд часть приложения, отрисовку и взаимодействие объектов. Я подготовил основу backend API, который обращался в базу и отдавал на фронтенд подготовленные данные. Позже, когда мы уже поняли, что точно укладываемся в сроки, доработку API Миша тоже взял на себя.
Конечно, был у нас и закрытый демо-стенд на поддомене для регулярного показа прогресса работ, по которому мы сверялись при оперативных обсуждениях.
Когда система была готова, до интеграции на станцию прошло некоторое время. Задержка была связана с человеческим фактором (отпуска ответственных лиц) и затем с организацией процесса установки из-за ограничений доступа в сеть АЭС.
После установки и проверки на реальных данных обнаружились неучтенные детали и мелкие баги, которые были оперативно исправлены. В данный момент веб-приложение Эскар, разработанное нашими усилиями, работает на атомной электростанции, и этот факт не может не вызывать восторгов.
Веб-версия Эскара стала нашим первым клиентским приложением, построенным по принципу single-page application.
В бэкенде проекта мы оставили только простой и легковесный API, построенный на базе микрофреймворка Silex. Основная же часть работы досталась фронтенду.
Фронтенд был построен с помощью backbone.js с использованием require.js для подключения сущностей, вьюшек, отписанных в рамках backbone, и дополнительных библиотек, среди которых есть следующие:
Отрисовку активных зон принял на себя фреймворк svg.js. Маркеры и знаки радиации сделаны через позиционирование png-изображений, замеры — правильно расположенные div'ы.
svg.js не очень хорошо справляется с большим количеством объектов на страничке. И хотя в нашем случае их было не так уж и много, Миша решил, что если можно обойтись где-то без векторной графики, то будет обходиться без нее. В первую очередь из-за соображений быстродействия.
Очень хочется отметить крутой эффект соединения нескольких контрольных точек в один связанный объект при приближении во время зума или просто нахождении рядом.
Не обошлось и без математики, например, для просчета правильного поведения изображения при зуме.
Следующая важная особенность — база данных. Система Эскар от Гелан использует Oracle в соответствии с требованиями АЭС. Соответственно наш бэкенд должен работать с ней же. На своих дев-машинах расширение для PHP oci8 пришлось местами собирать с бубнами. Возможно, мы еще вернемся к этому и оформим описания процесса установки на маках и линуксах в отдельный пост. После победы над oci8 остальные заботы по работе с базой уже отлично решала библиотека Doctrine DBAL.
На этом история с технологическими изысками не заканчивается.
Важным для нас нюансом стало то, что корпоративная политика не позволяет поставить на станции Linux-сервер, поэтому мы освоили установку всего стэка на Windows Server, подготовив полную инструкцию и оттестировав процесс на виртуальных машинах.
Windows, конечно, подразумевал использование IE в качестве браузера. Была речь даже о 6-ой версии, но после экспериментов на этапе демки, мы поняли, что там ничего работать не будет. В итоге проект совместим с IE выше 9-ой версии и другими нормальными браузерами.
Несколько сюрпризов подкинули браузеры своей работой с svg-изображениями. Основных проблем было две:
Первая решилась добавлением некоторых хаков, гордиться которыми мы не будем, но свою задачу они выполнили.
Со второй бороться пришлось радикальнее. Изображения объектов на станции готовят в Inkscape. Оказалось, что некоторые из них — это просто выгруженные в svg формат png-изображения, к которым применены очень странные трансформации. Такие изображения правильно отображаются в просмотрщиках и самом Inkscape, но браузеры их отображют в сплющенном варианте. Проблему решила конвертация изображений автоматизированным скриптом через консольный инструмент Inkscape.
Как вы уже поняли, результат был достигнут, приложение установлено на станции и используется. О качестве результата, думаю, можно судить по фразе от Игоря из Гелан: «Все круто! Прямо как у нас в десктопной версии, один в один!».
В общей сложности активная разработка заняла приблизительно 2 месяца. Затем были лишь эпизодические доработки и фиксы при подготовке к установке на станцию и после нее.
У самих ребят из Гелан есть далекоидущие планы на свою систему. Надеюсь, что они еще привлекут нас на разработку новых версий с еще большим количеством технологических вызовов.
Проведите конкурс среди участников CMS Magazine
Узнайте цены и сроки уже завтра. Это бесплатно и займет ≈5 минут.