Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

СОДЕРЖАНИЕ

ВВЕДЕНИЕ

1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Анализ проектирования веб-интерфейсов

1.2 Анализ поиска аналогов

1.3 Постановка задач

2. ВЫБОР ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ДЛЯ РАЗРАБОТКИ

3. ПРОЕКТИРОВАНИЕ СИСТЕМЫ

3.1 Разработка обобщенного алгоритма управления роботом

3.2 Разработка структуры веб-интерфейса

3.3 Разработка блок-схем подпрограмм

3.4 Разработка пользовательского интерфейса

3.5 Разработка программного обеспечения

4. ТЕСТИРОВАНИЕ

4.1 Функциональное тестирование пользовательского интерфейса

4.2 Результаты тестирования инсталляции веб-приложения

5. АНАЛИЗ ПОЛУЧЕННЫХ РЕЗУЛЬТАТОВ

6. УКАЗАНИЯ ОБ ЭКСПЛУАТАЦИИ ПРОГРАММНОГО ПРОДУКТА

ЗАКЛЮЧЕНИЕ

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

ПРИЛОЖЕНИЕ 1

ПРИЛОЖЕНИЕ 2



ВВЕДЕНИЕ

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

Начало веб-технологий было положено в 1989 году Тимом Бернерсом-Ли, предложившим концепцию распределенной информационной системы с целью объединения знаний человека, которую он назвал "Всемирной паутиной". В последствии был разработан первый браузер и со временем рынок Интернет-проектов стал развиваться с огромной скоростью. И в наше время на данном рынке появляется все больше веб-приложений и все больше разработчиков и пользователей. пользовательский интерфейс приложение

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

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



1. АНАЛИЗ ПРЕДМЕТНОЙ ОБЛАСТИ

1.1 Анализ проектирования веб-интерфейсов

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

1.2 Анализ поиска аналогов

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

Bubot -- ненагруженный фреймворк, реализованный на Python 3 для программирования роботов и домашней автоматизации.

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

Каждый Bubot имеет встроенный веб-сервер. Веб-сервер Tornado, позволяет контролировать состояние, управлять роботом, на ходу менять параметры (калибровать) робота, а также закладывать возможность обмена данными между роботами.

Bubot не является системой реального времени, однако возможна интеграция с кодом реального времени.

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

Cambot -- совокупность системы управления роботом с возможностью создания снимков на базе WebIOPI.

Задачи для робота:

· Управление по Wi-Fi

· Движение вперед-назад, повороты вправо-влево

· Съемка видео в процессе движения и передача его на управляющий компьютер

· Съемка фото с большим разрешением по команде с управляющего компьютера и передача этого снимка в web- интерфейс.

Данный проект ограничен управлением движением роботом, а также созданием снимков. Отсутствует адаптивный интерфейс

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



1.3 Постановка задач

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

После анализа аналогичных проектов и сделанных выводов были сформированы основные требования к проекту выпускной квалификационной работы:

1. Функциональные требования

1.1. Вывод графического интерфейса приложения на экран

1.1.1 Вывод графиков температуры и влажности

1.1.2 Вывод изображения с камеры

1.1.3 Вывод информации о расстоянии до ближайшего объекта

1.2. Просмотр информации с персонального компьютера

1.2.1. Просмотр показателей температуры на графике

1.2.2. Просмотр показателей атмосферного давления на графике

1.3. Просмотр информации со смартфона

1.3.1. Просмотр показателей температуры в адаптивном режиме

1.3.2. Просмотр показателей ы в адаптивном режиме

2. Требования к надежности

2.1. Корректная работа на устройствах с поддержкой веб-технологий

2.2. Работа на протяжении всего сеанса пользователя

3. Условия эксплуатации

3.1. Требования к браузерам

3.2. Требования к параметрам отображения на различных устройствах

3.3. Требования к информационной и программной совместимости

4. Требования технической поддержки

4.1. Консультация пользователей

4.2. Техническая поддержка продукта



2. ВЫБОР ПРОГРАММНОГО ОБЕСПЕЧЕНИЯ ДЛЯ РАЗРАБОТКИ

Для реализации данного продукта следует выбрать используемые технологии.

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

HTML5 представляет из себя язык гипертекстовой верстки (англ. HyperText Markup Language), предназначенный для структурирования и представления содержимого сети интернет. Данная версия является пятой по счету и на сегодняшний день она продолжает активно развиваться, во многом, благодаря сообществу. Цель разработки HTML5 -- улучшение удобства и читаемости кода для человека, сохранение обратной совместимости, а также создание должного уровня поддержки мультимедиа-технологий.

Длительное время для верстки сайтов использовались такие стандарты, как HTML 4.01, XHTML 1.0 и XHTML 1.1. Однако в результате, многие веб-страницы были сверстаны с использованием большого количество различных сторонних технологий, таких как технологии, встроенные в веб-браузеры. Именно поэтому было принято решение о создании единого языка разметки, который бы мог сочетать в себе все наработки из HTML и XHTML, а также позволял расширить и улучшить верстку веб-сайтов благодаря единому API (данный фактор очень важен при разработке сложных веб-приложений). Именно поэтому для верстки интерфейса системы управления робототехническим комплексом была выбрана именно эта версия языка гипертекстовой верстки.

Довольно сложно представить себе сайт без использования каскадной таблицы стилей, известной также как CSS (англ. Cascading Style Sheets) -- формальный язык описания внешнего вида сайта, написанного с использованием языка гипертекстовой разметки. CSS необходим для изменения шрифтов, цветов, позиционирования отдельных блоков и других вещей, связанных со внешним видом веб-сайтов. Главной целью, которую поставили разработчики при создании каскадных таблиц стилей, было разделение описания логической части веб-сайта, производимое с помощью HTML, от описания внешнего вида данного сайта. Данное решение является отличным способом улучшения понимания кода веб-сайта разработчиками, увеличения возможностей управления его представлением, а также позволяет упрощает саму структуру написанной веб-страницы.

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

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

На данный момент в лидирующем списке находятся такие препроцессоры как, Sass и Less. Главными отличиями данных препроцессоров является их синтаксис и язык, с помощью которого происходит компиляция кода: Sass использует Ruby, в то время как Less - Java Script. В итоге выбор был сделан в сторону Sass, поскольку его синтаксис показался более удобным [5].

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

1. Flask - фреймворк необходимый для создания веб-приложений с помощью языка программирования Python. Выбор данного фреймворка связан с тем, что он позволяет произвести связку веб-интерфейса приложения непосредственно с робототехническим комплексом, а также содержит в себе только самое необходимое, что уменьшает общую нагрузку на приложение [2].

2. Bootstrap 4 - фреймворк, использованный изначально в качестве внутренней библиотеки Twitter, основанный на HTML и CSS шаблонах. Он содержит в себе стили для основных элементов, применяемых в верстке: веб-формы, кнопки, метки, блоки навигации и прочие компоненты веб-интерфейса. Использование данного фреймворка в разы ускоряет процесс создания веб-страниц. Стандартный набор стилей, входящих в данный фреймворк очень гибок и легко поддается изменению. Главной особенностью данной версии является поддержка технологии, пришедшей вместе с HTML5 - Flexbox. Данная технология позволяет также ускорить процесс верстки и упрощает создание адаптивности для веб-приложения[1].

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

Первая среда разработки WebStorm. Данная среда разработки разработана компанией JetBrains и является платной. Основным достоинством является довольно удобный в использовании редактор JavaSсript, HTML и CSS, также поддерживающий такие языки как, TypeScript, Less, Sass и Stylus и фреймворки, например, Angular, React и Meteor.

WebStorm позволяет сделать разработку проектов более удобной и простой, благодаря подсветке и автодополнению кода, его анализе по ходу редактирования, быстрой навигации и рефакторингу. Он имеет мощные инструменты отладки и интеграции с системами управления версиями (Git, GitHub, Subversion, Perforce, Mercurial, CVS), понимает структуру проекта и код, отслеживает ошибки с помощью систем ESLint, JSHint, JSLint, TSLint, Stylelint и предлагает их решение. Встроенные в IDE инструменты для тестирования и работы с проектом помогают в разработке и делают ее удобнее и продуктивнее.

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

Вторым редактором кода является Atom. Atom - это бесплатный текстовый редактор с открытым исходным кодом и поддержкой плагинов, написанных на Node.js, и встраиваемых под управлением Git Control. Его создателями являются программисты веб-сервиса Github, которые решили помочь своей целевой аудитории и создать нечто, что разработчики могут использовать каждый день.

Главная особенность Atom -- богатые возможности по настройке. Редактор можно настроить на свой вкус. Изначально в него встроены файл-менеджер, продвинутые функции поиска и замены, разнообразные курсоры, опции сворачивания кода, ясный интерфейс, возможность импорта правил и тем из TextMate.

Десктопное приложение Atom имеет полный доступ к файловой системе, естественные для операционной системы меню и панель команд. При этом оно идеально приспособлено для веб-программирования: можно добавлять собственные функции для редактирования CSS, HTML и JavaScript. Нужно отметить также интеграцию с Node.js, включая запуск веб-сервера прямо из редактора. Архитектура программы проста и понятна каждому: можно заменить любой пакет своим собственным и закачать его в центральный репозиторий, чтобы им воспользовался любой желающий.

Однако, данный редактор также очень нагружен большим функционалом, что делает его довольно тяжелым.

И последним редактором в списке, но не по функционалу является Sublime Text 3. По мнению многих, Sublime Text -- это лучший из лучших, самый быстрый редактор кода. Низкий встроенный функционал с лихвой компенсируется огромным количеством плагинов. Но в отличие от того же Vim, он имеет низкий порог вхождения и человеческий интерфейс. Sublime Text также можно рассматривать в качестве легковесной IDE.

У Sublime Text очень приятная полоса прокрутки с превью кода, и, конечно же, возможность редактировать текст при помощи нескольких курсоров. Еще из фишек есть подсветка и автокомплит практически чего угодно, неплохой поиск по проекту, что позволяет найти нужную строку или файл всего по нескольким буквам, автоматический перенос слов по заданной ширине строки, проверка грамматики, поддержка разных кодировок и переносов строк, настраиваемая ширина отступов -- в общем-то, все, чтобы вам было комфортно и удобно работать. Еще к плюсам можно отнести гибкую настройку шрифтов и цветовых схем.

К минусам редактора можно отнести проблемы с обратной совместимостью и отсутствие встроенной консоли.

Более подробная информация о редакторах кода показана в таблице 1.

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



Таблица 2.1 - Текстовые редакторы

Критерии	WebStorm	Atom	Sublime Text 3
Стоимость	30 дней бесплатного периода По окончанию - 129$ в год	Бесплатно	Есть возможность использования. Однако для поддержки разработчиков возможна покупка лицензии за 80$ (убирает периодически всплывающее окно с предложением купить программу)
Загрузка системы	Высокая	Высокая	Низкая
Наличие плагинов	Есть	Есть	Есть
Порог вхождения	Средний	Средний	Низкий



3. ПРОЕКТИРОВАНИЕ СИСТЕМЫ

3.1 Разработка обобщенного алгоритма управления роботом

Перед созданием системы управления робототехническим комплексом необходимо описать обобщенный алгоритм управления данным комплексом. На рисунке в приложении 1 показан обобщенный алгоритм управления роботом.

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

· Пользователь

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

· Веб-браузер

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

· База данных

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

· Непосредственно сам робототехнический комплекс

В нашем случае здесь подразумевается система управления исполнительными механизмами. Данная система необходима для связи аппаратной части робота и программного обеспечения. Благодаря этой системе осуществляется связь между элементами робототехнического комплекса и его программной частью, представляющей из себя совокупность скриптов, в которых описаны подключения. Система получает запросы пользователя, направленные через веб-интерфейс и дает команду на запуск определенной части робота, а также отправляет актуальную информацию о состоянии робота в базу данных. Это позволяет изолировать различные элементы робота друг от друга, в том числе, избежать ошибок и конфликтных ситуаций при работе комплекса[3].

3.2 Разработка структуры веб-интерфейса

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

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

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

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

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

· Шапка

Верхняя часть сайта, в которой находится название данного проекта (Orwell).

· Навигационное меню

В данный раздел входят три основных пункта меню:

A. Показатели

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

B. Расстояние

В данном пункте отображается актуальная информация о расстоянии до ближайшего объекта.

C. Обратная связь

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

· Основная часть

Данный блок занимает большую часть экрана, поскольку содержит в себе основную информацию каждой вкладки (графики, формы ввода и вывода информации и так далее).

На рисунке 3.2 изображен макет сайта для устройств с разрешением выше 800 пикселей.



Рисунок 3.2 -- Макет интерфейса для больших экранов

На рисунке 3.3 изображен макет сайта для устройств с шириной экрана больше 600 пикселей.

Рисунок 3.3 -- Макет интерфейса для средних экранов

На рисунке 3.4 изображен интерфейс для устройств с шириной экрана ниже 600 пикселей.

Рисунок 3.4 -- Макет интерфейса для маленьких экранов

3.3 Разработка блок-схем подпрограмм

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

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



Рисунок 3.5 -- Блок-схема алгоритма формы обратной связи

На рисунке 3.6 показан алгоритм обновления информации с датчиков робототехнического комплекса на графиках веб-приложения. Данный скрипт позволяет обновлять информацию об окружающей среде в режиме реального времени [2].



Рисунок 3.6 -- Блок-схема алгоритма обновления информации с датчиков

На рисунке 3.7 показан алгоритм обновления информации о расстоянии до ближайшего к роботу объекта. Данный скрипт позволяет обновлять информацию о расстоянии ближайшего к роботу объекта с помощью запроса в веб-приложении. Однако, если расстояние до ближайшего объекта превышает нормы датчика - выводится сообщение об ошибке.

Рисунок 3.7 -- Блок-схема алгоритма обновления информации о ближайшем объекте

Более подробное описание данных скриптов будет приведено в работе «Разработка системы управления робототехническим комплексом».



3.4 Разработка пользовательского интерфейса

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

Интерфейс должен быть адаптивным и открываться на любом мобильном устройстве (помимо версии для персональных компьютеров). Помимо этого, интерфейс должен совпадать с макетом, составленным на ранней стадии разработки системы управления робототехническим комплексом.

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

На рисунке 3.8 изображен интерфейс для устройств с шириной экрана больше 800 пикселей. Данный интерфейс предназначен для больших экранов, что позволяет использовать большее количество пространства на веб-сайте для отображения главной части сайта, а также большого меню.

Рисунок 3.8. -- Интерфейс для больших экранов.

На рисунке 3.9 изображен интерфейс для устройств с шириной экрана больше 600 пикселей. Данный интерфейс предназначен для устройств со средним экраном, к ним можно отнести планшеты, нетбуки и некоторые смартфоны. Поскольку ширина экрана у таких устройств уже более ограничена (по сравнению с версией для персональных компьютеров), следует это учитывать и вместо полных названий каждого пункта используются интуитивно-понятные иконки. Данное решение поможет сэкономить место на экране, а также не запутает пользователя.

Рисунок 3.9. -- Интерфейс для средних экранов.

На рисунке 3.10 изображен интерфейс для устройств с шириной экрана ниже 600 пикселей. Данный интерфейс предназначен для устройств с маленьким экраном. Под это определения попадают смартфоны небольших размеров, все еще занимающие свою долю на рынке. Было решено спрятать все навигационное меню за так называемым «бургер-меню» (три параллельных полосы в правой части экрана). Это решение позволяет сэкономить большое количество места на экране пользователя, а также сохранить удобство пользования сайтом.



Рисунок 3.10 -- Интерфейс для маленьких экранов.

3.5 Разработка программного обеспечения

Основная часть веб-приложения состоит из HTML и CSS файлов. Каркас типовой страницы задан в HTML файле и одинаков для всех. Код данной страницы будет представлен в приложении 2.

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

· Bootstrap 4

· JQuery 2.2.0

· style.css

· main.js

· mdb.css

· font-awesome.min.css

· ionicons.min.css

Bootstrap 4 и файлы style.css, mdb.css необходимы для оформления веб-страниц данного проекта. JQuery 2.2.0 и main.js необходимы для работоспособности скриптов. А такие файлы стилей как font-awesome.min.css и ionicons.min.css - для отображения иконок на страницах сайта.

Для удобного оформления отдельных блоков используются классы, описываемые в дальнейшем в каскадных таблицах стилей. В таблице 3.1 приведено описание основных классов.

Таблица 3.1 - Классы HTML документа

Класс	Описание
header	Данный класс отвечает за оформление шапки сайта
logo	Данный класс отвечает за оформление логотипа сайта
fa fa-tachometer fa-truck fa-bar-chart	Классы, отвечающие за отображение иконок в меню
nav-trigger	Класс, необходимый для запуска «гамбургер-меню» при разрешении экрана меньше 600 пикселей.
side-nav	Данный класс отвечает за оформление бокового меню сайта
main-content	Данный класс отвечает за отображение основной части сайта
title	Данный класс отвечает за оформление заголовков
main	Данный класс отвечает за позиционирование виджетов
widget	Данный класс отвечает за отображение основных виджетов сайта (графикик)
chart	Класс используемый для реализации графиков на сайте

Помимо этого, в данном проекте присутствует форма обратной связи, реализованная с помощью расширения Flask-WTF. Данное расширение обрабатывает и проверяет данные формы. На рисунке 3.11 изображен принцип работы данного скрипта.



Рисунок 3.11 -- Принцип работы формы обратной связи.

Описание работы алгоритма:

1. Пользователь отправляет GET-запрос на веб-странице, содержащей форму обратной связи.

2. Пользователь заполняет эту форму.

3. Пользователь нажимает кнопку «Отправить», тем самым передавая данные на сервер через запрос POST.

4. Сервер проверяет информацию.

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

6. Если все поля проходят проверку, сообщение направляется по назначению.

На странице контактной формы указаны такие пункты как:

· Имя

· Email

· Тема

· Сообщение

На рисунке 3.12 приведен скриншот формы обратной связи.

Рисунок 3.12 -- Интерфейс формы обратной связи.

На рисунке 3.13 приведен пример сообщения, появляющегося при неправильном заполнении полей ввода.

Код данного алгоритма также будет предоставлен в приложении 2.

Рисунок 3.13 -- Интерфейс формы обратной связи при ошибке заполнения поля ввода.



Однако, помимо формы обратной связи в проекте реализован вывод информации с датчиков при помощи графиков, обновляющихся в реальном времени.

Для составления графиков была использована библиотека CanvasJS. CanvasJS редставляет из себя отзывчивую библиотеку HTML5 диаграмм с прекрасной оптимизацией, простой API и совместимостью с современными браузерами.

Для отображения определенного графика создается скрипт (пример кода смотрите в приложении 2) с классом chartContainer. В данном скрипте указываются основные параметры будущего графика, такие как:

· Тип графика

· Тема оформления графика

· Наличие анимации

· Основная информация по отображаемым данным

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

Рисунок 3.14 -- Интерфейс формы обратной связи при ошибке заполнения поля ввода.

4. ТЕСТИРОВАНИЕ

Тестирование проекта состоит из нескольких этапов. Методика тестирования включает в себя такие этапы как:

· Функциональное тестирование

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

· Тестирование инсталляции

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

4.1 Функциональное тестирование пользовательского интерфейса

Каждая функция была протестирована согласно функциональным требованиям проекта.

Подробные результаты тестирования отображены в таблице 4.1.

4.2 Результаты тестирования инсталляции веб-приложения

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

· iPhone SE

· iPad Mini

· Xiaomi Redmi 5 Plus

· Xiaomi Redmi 4X

· ASUS Nexus 7 2013

На каждом из перечисленных устройств веб-интерфейс отображался корректно. Сайт адаптировался под разные размеры экранов и предоставлял одинаковый функционал. Выполнение ранее перечисленных функций не вызвало никаких проблем.

Таблица 4.1 - Результаты функционального тестирования

Вывод графического интерфейса приложения на экран	Интерфейс отображается, как предусматривалось изначально
Изменение температуры окружающей среды	При изменении температуры окружающей среды на странице с показателями корректно отображается график
Изменение атмосферного давления окружающей среды	При изменении атмосферного давления окружающей среды на странице с показателями корректно отображается график
Обновление информации о расстоянии до ближайшего объекта	После нажатия на кнопку «Обновить информацию» обновляется информация о расстоянии до ближайшего объекта
Просмотр информации со смартфона	Интерфейс отображается так, как предусмотрено изначально
Просмотр информации с планшета	Интерфейс отображается так, как предусмотрено изначально
Отправка данных через контактную форму	Сообщения успешно отправляются и доходят до электронной почты, указанной в коде



5. АНАЛИЗ ПОЛУЧЕННЫХ РЕЗУЛЬТАТОВ

В результате разработки был получена рабочая система управления робототехническим комплексом.

В соответствии с целью были выполнены следующие задачи:

1. Мониторинг показателей окружающей среды (например, температура и атмосферное давление)

2. Отображение информации о расстоянии до ближайшего объекта

3. Отображение и управление робототехническим комплексом с помощью любого устройства с доступом к сети интернет

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

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

Поскольку проект будет распространяться через площадку GitHub и абсолютно бесплатно - ожидается поддержка со стороны сторонних разработчиков, заинтересованных в сфере развития робототехники.



6. УКАЗАНИЯ ОБ ЭКСПЛУАТАЦИИ ПРОГРАММНОГО ПРОДУКТА

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

Данная разработка является абсолютно бесплатной и не требует никаких вложений со стороны пользователей. Распространение исходного кода будет производится через площадку GitHub.

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

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

Вторым этапом будет подключение датчиков и их настройка. Пользователь должен корректно подключить все датчики и настроить их работу через специализированные скрипты.

На третьем этапе, пользователь должен запустить приложение. Сразу же после запуска веб-приложения будет производиться мониторинг окружающей среды. Благодаря данной системы пользователь сможет отслеживать актуальную информацию с подключенных датчиков.

В дальнейшем, на странице приложения на GitHub благодаря вкладу сообщества будет реализованы подробные инструкции по настройке оборудования и установке программного обеспечения. На текущий момент ведется сбор полезной информации из различных источников (таких как - видеоролики на YouTube, статьи на англоязычных сайтах и так далее), производится его систематизация, редактирование и перевод на русский язык, поскольку данный проект направлен в первую очередь на упрощение процесса разработки русскоязычных пользователей.

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



ЗАКЛЮЧЕНИЕ

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

В соответствии с целью поставлены следующие задачи:

1. Мониторинг показателей окружающей среды (например, температура и атмосферное давление)

2. Отображение информации о расстоянии до ближайшего объекта

3. Отображение и управление робототехническим комплексом с помощью любого устройства с доступом к сети интернет

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

Причины для этого были следующие:

· Данная разработка требует меньших материальных затрат, чем аналоги.

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

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

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

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

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

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

Был реализован интуитивно-понятный веб-интерфейс. Проект будет свободно распространяться на GitHub для получения обратной связи от пользователей и дальнейшего развития проекта.



СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1. Михеев В.А. Разработка системы управления робототехническим комплексом на Django / Михеев В.А., Корягин К.П. // Молодые исследователи - регионам. Материалы международной научной конференции. Вологда, ВоГУ- 2017. Том 1. C. 109-111.

2. Документация Flask (русский перевод) 0.10.1. [Электронный ресурс]: - Режим доступа: https://flask-russian-docs.readthedocs.io/ru/latest/index.html

3. Михеев В.А. Разработка системы управления робототехническим комплексом на микрофреймворке Flask / Михеев В.А., Корягин К.П. //IX Ежегодная научная сессия аспирантов и молодых ученых. Материалы межрегиональной научной конференции. Вологда, ВоГУ- 2017. Том 1. C. 57-59.

4. Михеев В.А. Разработка системы управления робототехническим комплексом Orwell / Михеев В.А., Корягин К.П. // Развитие науки и техники: механизм выбора и реализации приоритетов. Материалы международной научно-практической конференции. Вологда, ВоГУ- 2017. Том 1. C. 97-101.

5. An Introduction to CSS Pre-Processors: SASS, LESS and Stylus. [Электронный ресурс]: - Режим доступа: https://htmlmag.com/article/an-introduction-to-css-preprocessors-sass-less-stylus



ПРИЛОЖЕНИЕ 1

UML-диаграмма (Обобщенный алгоритм управления робототехническим комплексом)



ПРИЛОЖЕНИЕ 2

Код программ

Основная HTML-структура:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Responsive vertical menu navigation</title>

<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

<script src="main.js"></script>

<link href="css/mdb.css" rel="stylesheet">

<!-- Custom styles for this template -->

<link href="css/style.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<script src="https://code.highcharts.com/highcharts.js"></script>

<script src="https://code.highcharts.com/modules/data.js"></script>

<script src="main.js"></script>

<script>

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {

animationEnabled: true,

theme: "light2",

title:{

text: "Температура"

},

axisY:{

includeZero: false

},

data: [{

type: "line",

dataPoints: [

{ y: 18 },

{ y: 22},

{ y: 25, indexLabel: "максимальная",markerColor: "red", markerType: "triangle" },

{ y: 17 },

{ y: 5 },

{ y: 13 },

{ y: 14 },

{ y: 3 },

{ y: -1 , indexLabel: "минимальная",markerColor: "DarkSlateGrey", markerType: "cross" },

{ y: 21 },

{ y: 10 },

{ y: 6 }

]

}]

});

chart.render();

chart = {};

//Zooming and Panning

var chart2 = new CanvasJS.Chart("chartContainer2", {

animationEnabled: true,

zoomEnabled: true,

title:{

text: "Атмосферное давление"

},

axisY :{

includeZero:false

},

data: [{

type: "line",

dataPoints: [

{ x: new Date(2018, 05, 10), y: 750 },

{ x: new Date(2018, 05, 11), y: 733 },

{ x: new Date(2018, 05, 12), y: 760, indexLabel: "максимальная",markerColor: "red", markerType: "triangle" },

{ x: new Date(2018, 05, 13), y: 738 },

{ x: new Date(2018, 05, 14), y: 736 },

{ x: new Date(2018, 05, 15), y: 730 , indexLabel: "минимальная",markerColor: "DarkSlateGrey", markerType: "cross" },

{ x: new Date(2018, 05, 16), y: 750 }

]

}]

});

chart2.render();

chart2 = {};

// Column Chart

var chart3 = new CanvasJS.Chart("chartContainer3", {

animationEnabled: true,

theme: "light2", // "light1", "light2", "dark1", "dark2"

title:{

text: "Электропитание"

},

axisY: {

title: "Уровень потребления"

},

data: [{

type: "column",

showInLegend: true,

legendMarkerColor: "grey",

legendText: "Потребление питания",

dataPoints: [

{ y: 3, label: "Датчик давления" },

{ y: 1, label: "Датчик температуры" },

{ y: 2, label: "Датчик расстояния" },

]

}]

});

chart3.render();

chart3 = {};

}

var limit = 300;

var y = 0;

var data = [];

var dataSeries = { type: "line" };

var dataPoints = [];

for (var i = 0; i < limit; i += 1) {

y += (Math.random() * 10 - 5);

dataPoints.push({

x: i - limit / 2,

y: y

});

}

dataSeries.dataPoints = dataPoints;

data.push(dataSeries);

</script>

</head>

<body>

<div class="header">

<div class="logo">

<i class="fa fa-tachometer"></i>

<span>Orwell</span>

</div>

<a href="#" class="nav-trigger"><span></span></a>

</div>

<div class="side-nav">

<div class="logo">

<i class="fa fa-tachometer"></i>

<span>Orwell</span>

</div>

<nav>

<ul>

<li class="active">

<a href="index.html">

<span><i class="fa fa-bar-chart"></i></span>

<span>Показатели</span>

</a>

</li>

<li>

<a href="distance.html">

<span><i class="fa fa-truck"></i></span>

<span>Расстояние</span>

</a>

</li>

<li>

<a href="contact.html">

<span><i class="fa fa-envelope"></i></span>

<span>Обратная связь</span>

</a>

</li>

</ul>

</nav>

</div>

<div class="main-content">

<div class="title">

Показатели с датчиков

</div>

<div class="main">

<div class="widget">

<div class="title">График температуры</div>

<div class="chart">

<div id="chartContainer" style="height: 370px; width: 100%;"></div>

</div>

</div>

<div class="widget">

<div class="title">График давления</div>

<div class="chart">

<div id="chartContainer2" style="height: 370px; width: 100%;"></div>

</div>

</div>

<div class="widget">

<div class="title">Потребление питания</div>

<div class="chart">

<div id="chartContainer3" style="height: 370px; width: 100%;"></div>

</div>

</div>

</div>

</div>

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

</body>

</html>

Каскадная таблица стилей:

* {

box-sizing: border-box;

}

span:hover {

color: blue;

}

body {

margin: 0;

paddin: 0;

font-family: 'Source Sans Pro', sans-serif;

background-color: #d5dae5;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.header {

position: absolute;

width: 100%;

z-index: 3;

height: 44px;

background-color: #fff;

border-bottom: 3px solid #4f5b66;

}

/* logo in header(mobile version) and side-nav (tablet & desktop) */

.logo {

height: 44px;

padding: 10px;

font-weight: 700;

}

.header .logo {

color: #233245;

}

.side-nav .logo {

background-color: #3f4851;

color: #fff;

}

.header .logo {

float: left;

}

.header .logo {

height: 44px;

z-index: 1;

padding: 10px;

font-weight: 700;

color: #233245;

}

.logo i {

font-size: 22px;

}

.logo span {

margin-left: 5px;

text-transform: uppercase;

}

.nav-trigger {

position: relative;

float: right;

width: 20px;

height: 44px;

right: 30px;

display: block;

}

.nav-trigger span, .nav-trigger span:before, span:after {

width: 20px;

height: 2px;

background-color: #4f5b66;

position: absolute;

}

.nav-trigger span {

top: 50%;

}

.nav-trigger span:before, .nav-trigger span:after {

content: '';

}

.nav-trigger span:before {

top: -6px;

}

.nav-trigger span:after {

top: 6px;

}

/* side navigation styles */

.side-nav {

position: absolute;

width: 100%;

height: 120%;

background-color: #4f5b66;

z-index: 1;

display: none;

}

.side-nav.visible {

display: block;

}

.side-nav ul {

margin: 0;

padding: 0;

}

.side-nav ul li {

padding: 16px 16px;

border-bottom: 1px solid #3c506a;

position: relative;

}

.side-nav ul li.active:before {

content: '';

position: absolute;

width: 4px;

height: 100%;

top: 0;

left: 0;

background-color: #fff;

}

.side-nav ul li a {

color: #fff;

display: block;

text-decoration: none;

}

.side-nav ul li i {

color: #0497df;

min-width: 20px;

text-align: center;

}

.side-nav ul li span:nth-child(2) {

margin-left: 10px;

font-size: 14px;

font-weight: 600;

}

/* main content styles */

.main-content {

padding: 40px;

margin-top: 0;

padding: 0;

padding-top: 44px;

height: 100%;

}

.main-content .title {

background-color: #eef1f7;

border-bottom: 1px solid #b8bec9;

padding: 10px 20px;

font-weight: 700;

color: #333;

font-size: 18px;

}

/* set element styles to fit tablet and higher(desktop) */

@media screen and (min-width: 600px) {

.header {

background-color: #4f5b66;

z-index: 1;

}

.header .logo {

display: none;

}

.nav-trigger {

display: none;

}

.nav-trigger span, .nav-trigger span:before, span:after {

background-color: #fff;

}

.side-nav {

display: block;

width: 70px;

z-index: 2;

}

.side-nav ul li span:nth-child(2) {

display: none;

}

.side-nav .logo i {

padding-left: 12px;

}

.side-nav .logo span {

display: none;

}

.side-nav ul li i {

font-size: 26px;

}

.side-nav ul li a {

text-align: center;

}

.main-content {

margin-left: 70px;

}

}

/* set element styles for desktop */

@media screen and (min-width: 800px) {

.side-nav {

width: 200px;

}

.side-nav ul li span:nth-child(2) {

display: inline-block;

}

.side-nav ul li i {

font-size: 16px;

}

.side-nav ul li a {

text-align: left;

}

.side-nav .logo i {

padding-left: 0;

}

.side-nav .logo span {

display: inline-block;

}

.main-content {

margin-left: 200px;

}

}

/* main box container */

.main {

display: flex;

flex-flow: row wrap;

}

.widget {

flex-basis: 300px;

flex-grow: 10;

height: 300px;

margin: 15px;

border-radius: 6px;

background-color: #ffffff;

position: relative;

}

.widget .title {

background-color: #eef1f7;

border-bottom: 1px solid #dfe4ec;

padding: 10px;

border-top-left-radius: 6px;

border-top-right-radius: 6px;

color: #617085;

font-weight: 600;

}

.container-fluid {

width: 100%;

padding-right: 15px;

padding-left: 15px;

margin-right: auto;

margin-left: auto;

}

.form-control {

display: block;

width: 100%;

padding: .375rem .75rem;

font-size: 1rem;

line-height: 1.5;

color: #495057;

background-color: #fff;

background-clip: padding-box;

border: 1px solid #ced4da;

border-radius: .25rem;

transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

Скрипты Python:

Определение расстояния до ближайшего объекта:

import time

import botbook_gpio as gpio

def measureDistance():

trigPin = 22 # указываем номер контакта Raspberry Pi, к которому подключен Trig контакт датчика HC-SR04

echoPin = 27 # указываем номер контакта Raspberry Pi, к которому подключен Echo контакт датчика HC-SR04

v=(331.5+0.6*20) # скорость звука при температуре 20 градусов Цельсия(вы можете указать свое значение вместо 20) в м/с

gpio.mode(trigPin, "out") # устанавливаем контакт как выход

gpio.mode(echoPin, "in") # устанавливаем контакт как вход

gpio.interruptMode(echoPin, "both") # режим прерывания, чтобы функция pulseInHigh вычислила длительность перехода сигнала с 0 до 1 и от 1 до 0

gpio.write(trigPin, gpio.LOW) # устанавливаем низкий уровень сигнала

time.sleep(0.5) # задержка в пол секунда

gpio.write(trigPin, gpio.HIGH) # устанавливаем высокий уровень сигнала

time.sleep(1/1000000.0) # задержка в 1 мкс

gpio.write(trigPin, gpio.LOW) # устанавливаем низкий уровень сигнала

t = gpio.pulseInHigh(echoPin) # вычисляем длительность сигнала

d = t*v*50

return d

d = measureDistance()

print "Distance: %.2f cm" % d

Определение температуры воздуха:

Размещено на Allbest.ru

...