В настоящее время существует множество методологий, позволяющих регулировать процесс производства программного обеспечения.
Однако какой бы из них ни использовался, расписание проекта всегда должно содержать пункт по обучению конечного пользователя работе с текущей версией программного продукта.
При этом время, затраченное на обучение, должно быть соизмеримо со скоростью разработки и обновления программного обеспечения.
Процесс изучения
Современные компании-разработчики пытаются взять под контроль как теоретическое, так и практическое обучение пользователей.Это предполагает присутствие преподавателя (предметника) в процессе обучения.
Ему необходимо контролировать обучение в режиме реального времени, чтобы пользователь получал теоретические знания о работе с функционалом программы, а также закреплял их на практике.
Одной из компаний, которая не только занимается разработкой программного обеспечения, но и помогает пользователям их решений освоить управление, является НПО «Криста».
Для этого на базе компании создан специальный учебный центр.
Автоматизация обучения
С распространением компьютерных технологий стало возможным внедрить автоматическое управление процессом обучения.То есть контроль за практическими занятиями пользователя возлагается на программу.
Это интерактивное руководство, знакомящее пользователя с функционалом приложения, аналогичное GPS-навигатору.
Программа указывает на элементы пользовательского интерфейса, объясняя, что делает каждый значок или кнопка или где найти меню.
Эти руководства называются интерактивными экскурсиями по функционалу программы.
Специалист пишет программу обучающего тура только один раз, которая впоследствии воспроизводится на компьютерах конечных пользователей.
Обучение считается завершенным, если пользователь проходит тур от начала до конца.
Постановка задачи
Самое главное — создавать интерактивные туры для веб-приложений.Именно в этой области обновления программных продуктов происходят гораздо быстрее и чаще, чем при разработке десктопных приложений.
Поэтому после перехода на современные веб-технологии НПО «Криста» решило внедрить интерактивные туры в процесс обучения пользователей.
Отсюда возникла потребность в инструменте для создания интерактивных туров по функционалу веб-приложения.
При выборе инструмента, прежде всего, необходимо было учитывать, что его потенциальными пользователями являются не программисты, а специалисты в данной области.
Поэтому разработка туров должна основываться на манипулировании графическими объектами, а не на языке программирования.
Существующие решения, соответствующие этому критерию, ориентированы на создание туров по обычным сайтам и не подходят предприятиям, занимающимся автоматизацией сложных бизнес-процессов.
Также существующие решения не позволяют получить программный код созданного тура.
Поэтому нет возможности управлять его хранилищем.
Для НПО «Криста» это критично, поскольку информационная безопасность является важным требованием к программным продуктам компании.
Поэтому было принято решение разработать собственный инструмент для создания интерактивных туров по функционалу веб-приложений.
Входными данными для разрабатываемой системы является загружаемое в браузер веб-приложение с функционалом, для которого создается тур.
Выходные данные — это туры, сохраненные в реляционной базе данных под управлением PostgreSQL. Для получения входных данных разрабатываемая программа должна работать в браузере.
Следовательно, необходимо создавать веб-приложения, что предполагает использование технологии клиент-сервер.
Структура системы
Инструменты создания туров представлены пользователю через графический интерфейс клиентской программы.Он состоит из вспомогательной и центральной подсистем.
Центральная подсистема обеспечивает функционал создания кода тура, а вспомогательная подсистема обеспечивает воспроизведение тура, а также определение элементов интерфейса для вставки их в сценарий тура.
Созданные туры необходимо сохранять в базе данных с помощью подсистемы хранения.
Взаимодействие клиента и сервера происходит посредством передачи HTTP-сообщений с данными туров в формате JSON. Доступ к базе данных осуществляется на языке SQL. Основным языком программирования, используемым при разработке клиентского приложения, является TypeScript. Клиентская архитектура определяется использованием библиотек React и Redux. Серверное приложение разработано как проект Maven на Java. 
Технологические решения
Основной частью при создании туров является редактор кода туров.Он был основан на библиотеке Blockly. Разрабатывается и поддерживается компанией Google с 2012 года.
Blockly распространяется бесплатно вместе с исходным кодом и включает в себя графический редактор, а также генераторы кода для подготовки выполнения программы в среде веб-приложений.
Программы в этом редакторе создаются на визуальном языке программирования Blockly путем соединения соответствующих блоков.
Можно определить новые блоки, указав их форму и программный код, который они генерируют ( подробнее ).
Благодаря этому редактор можно расширить за счет добавления блоков, реализующих логику создания тура.
Поскольку клиентское приложение предоставляет инструменты для веб-разработки, было решено добавить его в инструменты разработчика DevTools браузера Chrome в качестве расширения (подробнее: один раз , два ).
В этом случае часть клиента, реализующая вспомогательную подсистему, встраивается в проверяемую страницу веб-приложения, для которого создается тур (путем пример ).
Связь между частями обеспечивается схема .
Следовательно, программа работает в двух окнах: в окне веб-приложения и в окне DevTools. Соответствующий пользовательский интерфейс показан ниже.
В окне DevTools пользователь управляет созданием тура.
На проверяемой странице он выбирает элементы интерфейса, которые необходимо выделить, а также тестирует созданный тур.
Алгоритм работы системы
Весь пользовательский интерфейс состоит из реагирующих компонентов.Взаимодействуя с ними, пользователь передает некоторые входные данные, в ходе обработки которых клиент может запросить у сервера дополнительные услуги.
В результате обработки обновляется внутреннее состояние клиентского приложения, в соответствии с которым меняется пользовательский интерфейс.
В зависимости от услуги, запрошенной у сервера, клиент передает параметры запроса.
На их основе осуществляется обращение к базе данных, после чего в клиентское приложение отправляется сообщение с соответствующей информацией.
Самое первое взаимодействие между клиентом и сервером (6–7) происходит всякий раз, когда пользователь открывает вкладку плагина (4).
При этом в веб-приложение, для которого создается тур (5), добавляется часть клиентской программы.
Результат разработки
При создании нового тура откроется встроенный редактор Blockly, стандартные разделы которого расположены в левой части.К ним добавлен раздел «Тур».
Он содержит специальные графические объекты, которые позволяют, например, добавить подсказку к элементу на проверяемой странице, затемнить элемент, дождаться события и другие возможности.
С помощью таких блоков описывается сценарий тура, на основе которого генерируется соответствующий JavaScript-код. 
При запуске воспроизведения код JavaScript тура загружается и выполняется в окне веб-приложения, для которого был создан тур.
При этом на странице появляется панель навигации для управления воспроизведением тура, а также элементов, описанных в скрипте.
В представленном примере на первом шаге будет нарисован пульсирующий указатель на элемент интерфейса, нажатие на который приведет к воспроизведению следующего шага тура.
Несмотря на то, что разрабатываемое приложение ориентировано на программные продукты компании НПО «Криста», его можно использовать для создания туров для любого веб-приложения.
Разработанное приложение стало основой для создания системы обучения и может быть использовано специалистами профильной области при подготовке к обучению.
Реализация программного продукта ожидается после его интеграции с демонстрационным модулем, позволяющим демонстрировать созданные туры конечному пользователю.
Теги: #веб-разработка #автоматизация #расширение #Расширения для браузера #плагин #обучение пользователей #Blockly #промышленная разработка #интерактивный тур #веб-приложение
-
Интервью О Прошлом И Будущем Библиотек C++
19 Oct, 24 -
Саундтрек №31
19 Oct, 24 -
«Сайты От Спонсоров»
19 Oct, 24 -
Где И Как Брать Фильмы?
19 Oct, 24
