Привет! Меня зовут Халитов Кирилл, я аспирант МГУДТ (Московский государственный университет дизайна и технологий (МГУДТ)).
В моей диссертации возникла задача упростить процесс создания интерфейса локального и веб-приложения, и результат получился по теме.
Введение
В настоящее время любая современная система мониторинга включает в себя прикладное программное обеспечение для визуализации данных.Как правило, для запуска этого программного обеспечения требуется наличие рекомендуемой операционной системы (ОС), в большинстве случаев ОС Microsoft. Однако в настоящее время наблюдается тенденция к использованию кроссплатформенных инструментов разработки программного обеспечения.
В результате становится возможным запуск готового программного продукта на разных операционных системах, в том числе на мобильных операционных системах.
Кроме того, из-за быстрого распространения Интернета разработка веб-приложений или веб-сервисов стала популярной областью разработки программного обеспечения.
Веб-приложение — это полезное дополнение к клиентскому приложению (приложению).
Обычно веб-приложение позволяет удаленно пользоваться системой мониторинга.
Это означает, что пользователь не привязан к местонахождению оборудования системы мониторинга и может использовать его из любой точки мира, где есть рекомендованное подключение к Интернету.
Важно отметить, что разработка веб-приложений сильно отличается от разработки клиентских приложений, и это, в свою очередь, создает некоторые проблемы.
В частности, это проблема создания универсального графического интерфейса пользователя (GUI).
Чтобы клиентское приложение и веб-приложение были реализованы в едином графическом стиле, необходимо приложить немало усилий как разработчику интерфейса клиентского приложения, так и разработчику интерфейса веб-приложения.
В конечном счете, объем усилий, которые придется приложить тому или иному разработчику, будет зависеть от того, интерфейс какого приложения будет задавать общий стиль.
Современные методы построения интерфейсов
Давайте рассмотрим наиболее популярные в настоящее время методы построения интерфейсов клиентских приложений на языке C++, наиболее используемом при разработке программного обеспечения, для ОС Microsoft Windows (MS Windows) и Linux. Основным инструментом разработки программного обеспечения для MS Windows является MS Visual Studio [1].Эта интегрированная среда разработки (IDE) позволяет разрабатывать программное обеспечение на разных языках программирования, но основными языками, конечно же, являются C++ и C#.
Существует два основных инструмента для разработки интерфейса приложения — Windows Forms (WinForms) и Windows Presentation Foundation (WPF).
Большинство существующих приложений для MS Windows разрабатываются с использованием WinForms, однако с появлением более современных версий ОС (MS Windows 7, 8) система WPF становится все более популярной.
Кроме того, последние версии MS Visual Studio позволяют использовать язык разметки HTML5 для создания интерфейсов, схожих по стилю с собственными веб-приложениями.
Однако стоит отметить, что коммерческая лицензия MS Visual Studio платная, как и лицензия MS Windows, что, несомненно, является недостатком для малобюджетных проектов.
Если говорить о малобюджетных проектах, то наиболее подходящий вариант — ОС Linux. Помимо того, что большинство дистрибутивов этой ОС абсолютно бесплатны, в том числе для коммерческого использования, существует еще ряд бесплатных инструментов для разработки качественного программного обеспечения для ОС Linux. Наиболее распространенным инструментом разработки программного обеспечения на C++ является кроссплатформенный набор инструментов Qt [2].
Важно подчеркнуть, что Qt позволяет разрабатывать приложения не только для Linux, но и для MS Windows, Mac OS X, Android и других UNIX-подобных операционных систем.
Разработчики Qt предлагают как бесплатную лицензию для коммерческого использования, так и платную лицензию с дополнительными функциями.
Но исходя из современной практики разработки программного обеспечения с использованием этого инструментария, бесплатной лицензии более чем достаточно.
Если провести аналогию с MS Visual Studio, то в Qt имеется IDE Qt Creator. Здесь альтернативой WinForms являются так называемые виджеты (Qt Widgets), а альтернативой WPF — Qt Quick. Qt Creator также имеет возможность создавать интерфейсы на основе HTML5. Но самым интересным модулем набора инструментов является встроенный веб-движок WebKit, который лежит в основе всех современных веб-браузеров.
Подобный модуль также имеется в MS Visual Studio, но он имеет ряд ограничений и тем более нас больше интересуют малобюджетные инструменты, позволяющие снизить затраты при создании программного продукта.
Веб-движок — это ядро браузера, он отвечает за корректное отображение веб-страниц.
Модуль Qt WebKit позволяет создавать интерфейс клиентского приложения, используя методы разработки интерфейса веб-приложения.
Создание интерфейса веб-приложения основано на устоявшемся стеке технологий.
В его состав входят язык разметки HTML (HTML 4, 5), каскадные таблицы стилей (CSS 2, 3) и язык сценариев JavaScript с богатым набором дополнительных библиотек (фреймворков).
Особо следует отметить тот факт, что скорость появления новых полезных фреймворков для языка JavaScript быстро растет, и это делает разработку многофункциональных приложений более быстрой и удобной.
Сейчас решение проблемы создания универсального GUI лежит на поверхности, но это только на первый взгляд.
Традиционный способ: Qt WebKit + Qt-костыли
Рассмотрим традиционный способ создания универсального графического интерфейса с помощью модуля Qt WebKit на примере модуля визуализации данных для системы акустического мониторинга, разработанного в рамках кандидатской диссертации [3].Под системой акустического мониторинга подразумевается система, включающая в себя аппаратное и программное обеспечение.
Аппаратная часть системы состоит из сенсорной сети акустических датчиков, данные от которых обрабатываются на микроконтроллере и передаются через тот или иной интерфейс (UART, IEEE 802.X и т.п.
) на персональный компьютер (ПК).
Программная часть состоит из набора прикладных программ, которые запускаются как на локальном ПК (клиентское ПО), так и на удаленном сервере (серверное ПО).
Традиционный метод предполагает использование межпроцессного 
Рис.
1. Традиционный метод реализации универсального графического интерфейса.
взаимодействие с использованием встроенного механизма Qt. Это означает взаимодействие основной логики клиентского приложения, представленной на рис.
1 как Обработчик данных , И графический интерфейс -элемент. Одним из недостатков этого подхода является то, что код реализации графического интерфейса на JavaScript будет иметь специфические функции, которые будут актуальны только для клиентского приложения Qt. Для серверного приложения, отвечающего за графический интерфейс, вам понадобится другой код, специфичный для реализации сервера.
Например, если вы используете PHP-скрипт для реализации основной логики серверного приложения, вам потребуется реализовать межпроцессное взаимодействие с использованием какой-либо другой технологии (AJAX или WebSocket).
Это приводит к еще одному недостатку, а именно к использованию дополнительного языка программирования для реализации основной логики серверного приложения и разработке нового алгоритма межпроцессного взаимодействия.
Более интересный подход: Qt WebKit + WebSocket.
Для решения этих проблем предлагается новый метод, основанный на использовании упомянутой выше технологии WebSocket. Суть метода заключается в унификации метода межпроцессного взаимодействия основной логики приложения и графического интерфейса как на стороне клиента, так и на стороне сервера.В этом случае становится возможным использовать код JavaScript для реализации универсального для обеих сторон графического интерфейса.
Рис.
2. Новый метод реализации универсального графического интерфейса.
На рис.
2. Видно, что теперь для межпроцессного взаимодействия, как клиентской, так и серверной части, используется технология WebSocket. То есть теперь у нас есть один универсальный код JavaScript для разных приложений.
В этом случае необходимым условием является серверное приложение, основная логика которого реализована с помощью Qt, на не совсем знакомом веб-разработчикам языке C++.
С одной стороны, такой подход к реализации серверного приложения усложняет задачу узкоспециализированному веб-разработчику.
Но с другой стороны, у нас есть универсальные части кода, которые позволяют нам сэкономить время на дублировании одних и тех же алгоритмов на разных языках.
Также важно подчеркнуть, что для использования технологии WebSocket необходима дополнительная библиотека, которая находится в свободном доступе в Интернете или включена по умолчанию в более поздние версии Qt. 
Рис.
3. Локальные (справа) и серверные (слева) приложения, работающие на ОС Ubuntu 14.04. На рис.
3 показан пример реализации нового метода создания универсального графического интерфейса для ОС Ubuntu 14.04. Как видно на рисунке, в итоге мы получили универсальный интерфейс как для локального приложения, работающего как исполняемый файл ОС, так и для серверного приложения, работающего в современном веб-браузере.
Поскольку при разработке программного обеспечения используются кроссплатформенные инструменты, это позволяет говорить о простой переносимости программного продукта на другие операционные системы в будущем.
Библиография
1. Документация Qt [Ээлектронный ресурс].Режим доступа: qt-project.org/doc 2. Библиотека Visual Studio [Ээлектронный ресурс].
Режим доступа: msdn.microsoft.com/en-us/library/vstudio 3. Молодые ученые - развитие текстильно-промышленного кластера (ПОИСК - 2014): сборник материалов межвузовской научно-технической конференции аспирантов и студентов с международным участием.
Часть 2. – Иваново: Иванов.
Государственный политехнический университет, 2014. – С.
25 [Ээлектронный ресурс].
Режим доступа: ti.ivgpu.com/poisk/file/part_2.pdf P.S. Единственное, что бросается в глаза на картинке, это разные шрифты, но, честно говоря, мне тогда было до них не до них.
П.
П.
С.
Можно ли запатентовать этот метод, чтобы у защиты было чем козырнуть, кроме свидетельства о регистрации программного обеспечения? Теги: #GUI #WebKit #Qt #JavaScript #Разработка веб-сайтов #Анализ и проектирование систем
-
Манифест Младшего Премьер-Министра
19 Oct, 24 -
Ibm Выпускает Кота Из Мешка
19 Oct, 24 -
Карма – Это Приглашение На Вечеринку
19 Oct, 24 -
Мойwordpress Жив!
19 Oct, 24
