Конструктор обложек для папок СУД Directum

Задача

Ежегодно в ПАО «Сургутнефтегаз» создается большое количество общих папок, для многих из которых требуется обложка. Обложка – это удобный интерфейс для пользователей по работе с компонентами СУД Directum.

Процесс разработки обложек в ПАО «Сургутнефтегаз», в упрощенном виде, состоит из следующих этапов:

1. Заказчик ставит задачу по созданию/доработке обложки с описанием требований к будущей обложке и ее функционалу.
2. Проектировщик формализует требования заказчика, составляет схему обложки и пишет Техническое задание (ТЗ).
3. Программист, в соответствии с требованиями ТЗ, разрабатывает обложку, кодируя её на четырех языках. На двух языках программирования: JavaScript, ISBL. И на двух языках гипертекстовой разметки: HTML, CSS.

Количество разработок и доработок обложек в СУД Directum ПАО «Сургутнефтегаз» достигает 35 и более штук в год. Для автоматизации данного процесса был разработан конструктор обложек.

Описание и возможности решения

Работа в конструкторе происходит следующим образом. Разработчик обложки в конструкторе визуально выстраивает из предопределенных блоков структуру будущей обложки. Производит настройку параметров обложки и каждого блока. Далее разработчик нажимает на кнопку «Сгенерировать код обложки», после чего конструктор автоматически генерирует HTML, CSS, JavaScript и ISBL код обложки.

Рисунок 1. Конструктор обложек для СУД Directum

Рисунок 2. Конструктор HTML-форм

Более подробно процесс описан в инструкции к конструктору обложек, а также в демонстрационном видеоролике.

В большинстве случаев, не потребуется знаний языков HTML, CSS, JavaScript. Код будет сгенерирован автоматически.
Таким образом, обложку в конструкторе может разработать специалист, не владеющий соответствующими языками программирования и гипертекстовой разметки. Например, проектировщик сможет создать или изменить обложку, не привлекая к данной работе программистов.

Прикреплен файл: Инструкция.docx

Результаты применения решения

Значительно сокращается время на описание требований к обложке заказчиком и составление Технического задания проектировщиком. Отпадает необходимость в прорисовке схем в графическом редакторе для формулировки задачи. Достаточно создать прототип в конструкторе.

В результате автоматизации процесса разработки обложек при помощи конструктора время на их создание/доработку сокращается в 6-10 раз. Если учитывать время программистов, проектировщиков и заказчиков, то экономия составляет до 300 и более человека-часов в год.

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

Рисунок 3. Готовая обложка в конструкторе

Рисунок 4. Сгенерированный HTML код обложки

Рисунок 5. Сгенерированные шаблоны ISBL, JS кода обложки

Рисунок 6. Готовая обложка в СУД Directum

Использованные технологии и технические особенности

Конструктор был написан на языке JavaScript с использованием фреймворка React и JavaScript-библиотеки Redux. Так как в процессе создания обложки в конструкторе добавляются/перемещаются/удаляются блоки (составные элементы обложки), соответственно происходит постоянное динамическое изменение DOM-дерева (Document Object Model) html-документа. Для более удобной работы с DOM-деревом необходимо использование хранилища состояний приложения. Для этого хорошо подошла библиотека Redux. По сути, конструктор обложек – это SPA (Single Page Application) приложение, но без серверной части. Поэтому, наиболее оптимальным решением для разработки конструктора было использование связки React-Redux.

Преимуществом данного подхода является то, что для начала работы в конструкторе не требуется никакой установки ПО. Конструктор доступен для запуска из обложки папки «Конструктор обложек» в СУД Directum. Также имеется портативная версия конструктора. Достаточно скачать папку с конструктором на свой ПК и запустить файл index.html. Конструктор будет работать в любом современном браузере. Занимает он всего 3,5 мегабайта памяти на жестком диске. Подключение к интернету для его работы не требуется.

Перспективы развития решения

На текущий момент первая версия конструктора обложек разработана и используется по прямому назначению в компании ПАО «Сургутнефтегаз».

В будущем планируется создание второй версии конструктора, в которой будет возможность сохранять уже собранные ранее в конструкторе обложки, а также возможность автоматической сборки и добавления собранной в конструкторе обложки в папку СУД Directum путем нажатия одной кнопки.

Команда

Проектирование, разработка, внедрение:
Смирнов Андрей Евгеньевич