подпись, дата подпись, подпись,...
TRANSCRIPT
Министерство образования и науки Российской Федерации
Федеральное государственное автономное образовательное учреждение
высшего образования
"Уральский федеральный университет имени первого президента России Б.Н. Ельцина"
Институт радиоэлектроники и информационных технологий - РТФ
Департамент информационных технологий и автоматики
УДК 004.42, 004.514 ДОПУСТИТЬ К ЗАЩИТЕ
РОП 09.04.01
_______________ К.А. Аксенов
"____"________________ 2017г.
ИССЛЕДОВАНИЕ И ПРИМЕНЕНИЕ СОВРЕМЕННЫХ WEB-ТЕХНОЛОГИЙ ДЛЯ
РЕАЛИЗАЦИИ ПРОГРАММНОГО КОМПЛЕКСА «УМНАЯ ПАРКОВКА»
Магистерская диссертация
Руководитель
доцент, канд. пед. наук,
Н.В. Папуловская
Нормоконтролер
доцент, канд. техн. наук,
подпись, дата
И.О. Ситников
Выполнил
Студент гр. РИМ-251201
подпись, дата
А.А. Рапопорт
подпись, дата
Екатеринбург
2017
2
РЕФЕРАТ
Тема выпускной квалификационной работы: Исследование и
применение современных WEB-технологий для реализации программного
комплекса «Умная парковка»
В состав ВКР входят: пояснительная записка 74 с., 24 рисунков, 4
таблицы, 41 источник, 11 приложений.
WEB-ТЕХНОЛОГИЯ, УМНАЯ ПАРКОВКА, ВЕБ-ПРИЛОЖЕНИЕ,
ОДНОСТРАНИЧНОЕ ПРИЛОЖЕНИЕ, ПОТОК ДАННЫХ.
В работе актуализируется проблема эффективности использования
современных WEB-технологий при реализации WEB-интерфейса
пользователя, а также проблема поиска и бронирования парковочных мест на
крупных парковочных пространствах. Предлагаемый вариант решения
позволяет успешно интегрировать стек современных WEB-технологий и
применить его в разработке программного комплекса для простого
бронирования и поиска свободного места на парковке. Разработанное WEB-
приложение показывает состояние мест на парковке в реальном времени,
схему проезда к месту и позволяет бронировать одно из парковочных мест.
Работы по тестированию проводилась на макете автомобильной парковки с
использованием радиоуправляемых моделей. Результат внедрения на
тестовом макете показал ускорение процесса парковки автомобиля, а также
практическую значимость полученных результатов исследования WEB-
технологий.
WEB TECHNOLOGY, SMART PARKING, WEB APPLICATION,
SINGLE-PAGE APPLICATION, DATA STREAM
The thesis updates the problem of the effectiveness of using modern WEB-
technologies in the implementation of the WEB user interface, as well as the
problem of finding and reserving parking spots in large parking spaces. The
offered solution allows to integrate the stack of modern WEB-technologies and
3
apply it in the development of a software package for simple reservation and
search of free parking spots. The developed WEB-application shows the status of
parking places in real time, the scheme of route to the place and allows a user to
book one of the parking places. Testing was carried out on a minimized parking
model. The result of the implementation on the test mock-up showed the
acceleration of the parking process, as well as the practical significance of the
results of the research concerning WEB-technologies.
Целью исследования является выявление оптимального способа
создания информационной системы «умной парковки», содержащей
пользовательский интерфейс WEB-приложения, обновляющийся в реальном
времени.
Проведен анализ проблем современной WEB-разработки и анализ
способов их решения, анализ рынка существующих автоматизированных
систем, управляющих парковочным пространством, выявлены их
достоинства и недостатки. Предложено исследовать современные WEB-
технологии и на их основе разработать систему, упрощающую процесс
взаимодействия автолюбителей с парковочными комплексами.
Для разработки использованы JetBrains WebStorm 2017.1.2, Robomongo
(графический интерфейс для MongoDB), различные JavaScript-библиотеки.
Реализация интерфейса пользователя выполнена с помощью технологий
React и D3.
В рамках выпускной квалификационной работы разработан
программный комплекс, включающий в себя WEB-интерфейс пользователя,
WEB-сервер и базу данных для информационно-управляющей системы
«Умная парковка».
Основные идеи и результаты исследования были представлены на 3
научных международных конференциях, проходивших в Екатеринбурге:
«Информационные технологии, телекоммуникации и системы управления»
(2015 г.), «Компьютерный анализ изображений: Интеллектуальные решения
4
для промышленных сетей» (ICCAI’16) (2016 г.), Форум молодых ученых
«ИТ: глобальные вызовы и новые решения» (2016 г.)
Результаты работы отражены в публикациях:
Папуловская Н.В. Рапопорт А.А. НОВЫЕ ВОЗМОЖНОСТИ
СОВРЕМЕННОГО ВЕБ-ПРОГРАММИРОВАНИЯ / Н. В. Папуловская, А. А.
Рапопорт // 2я Международная конференция студентов, аспирантов и
молодых ученых "Информационные технологии, телекоммуникации и
системы управления": сборник докладов. — Екатеринбург: [УрФУ], 2016. —
С. 342-345.
Папуловская Н.В., Рапопорт А.А. СИСТЕМА ВИДЕОРЕГИСТРАЦИИ
АВТОТРАНСПОРТА ДЛЯ ОБЕСПЕЧЕНИЯ КОМФОРТНОЙ ПАРКОВКИ/
Н. В. Папуловская, А. А. Рапопорт// сборник научных трудов по материалам I
Международной конференции «Компьютерный анализ изображений:
Интеллектуальные решения в промышленных сетях (CAI-2016)». Уральский
федеральный университет имени первого Президента России Б.Н. Ельцина;
Под общей редакцией А. Г.Тягунова. 2016. С. 186-188.
Папуловская Н.В., Рапопорт А.А. РАЗРАБОТКА СИСТЕМЫ
ИНФОРМАЦИОННОГО СЕРВИСА ДЛЯ ПАРКОВКИ
АВТОТРАНСПОРТА/ Н. В. Папуловская, А. А. Рапопорт // материалы
форума молодых ученых «ИТ: глобальные вызовы и новые решения» (2016
г.): сборник докладов. — Екатеринбург: [УрФУ], 2016.
5
СОДЕРЖАНИЕ РЕФЕРАТ ....................................................................................................... 2
НОРМАТИВНЫЕ ССЫЛКИ ....................................................................... 7
ОПРЕДЕЛЕНИЯ, ОБОЗНАЧЕНИЯ И СОКРАЩЕНИЯ ........................... 8
ВВЕДЕНИЕ .................................................................................................... 9
1 Постановка задачи ................................................................................... 12
2 Исследование современных WEB-технологий ..................................... 13
2.1 Описание стека технологий WEB-приложения ............................. 13
2.1.1 JavaScript-библиотеки ............................................................... 13
2.1.2 CSS-библиотеки ......................................................................... 17
2.2 Интеграция стека технологий .......................................................... 20
2.3 Тестирование интеграции технологий ............................................ 22
2.4 Способы масштабирования WEB-приложения ............................. 25
2.4.1 Описание проблем производительности WEB-клиента ........ 25
2.4.2 Сравнение способов обновления данных в WEB-приложении
..................................................................................................... 25
2.4.3 Решения проблемы очереди сообщений при большом потоке
данных на WEB-клиент ............................................................ 28
3 Разработка программного комплекса «Умная парковка» .................... 31
3.1 Обзор аналогов .................................................................................. 31
3.2 Описание системы ............................................................................ 32
3.2.1 Состав системы .......................................................................... 35
3.2.2 Поток данных в системе ............................................................ 36
3.2.3 Пользовательские сценарии ...................................................... 37
3.4.2 Разработка WEB-сервера .......................................................... 40
6
3.4.3 Создание базы данных .............................................................. 41
ЗАКЛЮЧЕНИЕ ........................................................................................... 51
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ ................................. 53
ПРИЛОЖЕНИЕ А ....................................................................................... 58
ПРИЛОЖЕНИЕ Б ........................................................................................ 59
ПРИЛОЖЕНИЕ В ....................................................................................... 60
ПРИЛОЖЕНИЕ Г ........................................................................................ 61
ПРИЛОЖЕНИЕ Д ....................................................................................... 63
ПРИЛОЖЕНИЕ Е ....................................................................................... 65
ПРИЛОЖЕНИЕ Ж ...................................................................................... 67
ПРИЛОЖЕНИЕ И ....................................................................................... 69
ПРИЛОЖЕНИЕ К ....................................................................................... 71
ПРИЛОЖЕНИЕ Л ....................................................................................... 72
ПРИЛОЖЕНИЕ М ...................................................................................... 73
7
НОРМАТИВНЫЕ ССЫЛКИ
СТП УГТУ-УПИ 1-96 Стандарт предприятия. Общие требования и
правила оформления дипломных и курсовых
проектов (работ).
ГОСТ 7.0.5-2008 Система стандартов по информации,
библиотечному и издательскому делу.
Библиографическая ссылка.
ГОСТ 7.1-2003 Библиографическая запись. Библиографическое
описание.
ГОСТ 7.9-95 Система стандартов по информации,
библиотечному и издательскому делу. Реферат и
аннотация.
ГОСТ 7.32-2001 Система стандартов по информации,
библиотечному и издательскому делу. Отчет о
научно-исследовательской работе. Структура и
правила оформления.
ГОСТ 34.602-89 Комплекс стандартов на автоматизированные
системы. Техническое задание на создание
автоматизированной системы.
ГОСТ Р 50577-93 Знаки государственные регистрационные
транспортных средств. Типы и основные размеры.
Технические требования.
8
ОПРЕДЕЛЕНИЯ, ОБОЗНАЧЕНИЯ И СОКРАЩЕНИЯ
В настоящей пояснительной записке применяют следующие термины с
соответствующими определениями, а также обозначения и сокращения:
ПК Персональный компьютер
MVC Model, View, Controller; программная архитектура,
структура системы, которая отделяет бизнес-логику от
остальной части программы, логически разделяя
приложение на 3 части: Модель, Представление и
Контроллер, соответственно сокращению
JS JavaScript
DOM Document Object Model, объектная модель документа
CSS Cascading Style Sheets, каскадные таблицы стилей
Роутинг Функционал, который сопоставляет набранный
пользователем URL-адрес с действием программной
логики WEB-интерфейса
API Application Programming Interface, программный интерфейс
приложения
JSON JavaScript Object Notation, текстовый формат данных,
используемый для представления объектов в JavaScript
БД База данных
СУБД Система управления базами данных
9
ВВЕДЕНИЕ
Актуальность темы исследования. Жители крупных мегаполисов
постоянно сталкиваются с проблемой парковки автотранспорта. Даже при
наличии многоуровневой площадки для парковки бывает затруднительно
найти свободное место, так как водитель не в состоянии получить
необходимую информацию за рулем автомобиля.
Современное поколение автовладельцев имеет достаточный уровень
оснащения электронными устройствами, позволяющими ориентироваться в
пространстве, однако парковки по-прежнему являются слепой зоной.
Использование мобильных устройств является предпочтительным вариантом
информационного обеспечения пользователей, однако не все автовладельцы
являются активными пользователями смартфонов. Для таких клиентов
необходимо предоставлять информацию в другом доступном виде.
Следующее поколение водителей будет более готово к умным технологиям,
которые необходимо реализовать. Разработки в направлении полностью
автоматического управления автотранспортом также испытывают
потребность в информационном обеспечении парковки.
Все эти факторы говорят о том, что использование небольших
наглядных WEB-приложений в совокупности с технологиями распознавания
изображения является перспективным направлением в создании различных
компонентов в составе «умного» города.
Анализ актуальности обусловили выбор темы исследования:
«Исследование и применение современных WEB-технологий для реализации
программного комплекса «Умная парковка»».
Гипотеза исследования: Применение современных технологий WEB-
программирования и разработанных подходов их интеграции в системе
«умной парковки» существенно ускорит процесс разработки WEB-
приложения «умной парковки», повысит удобство использования услуг
парковок, позволит сократить расходы на вычислительные ресурсы.
10
Целью исследования является нахождение оптимального способа
создания информационной системы «умной парковки», содержащей
устройства для определения местоположения машин на парковке, подсказки
для клиентов парковки и пользовательский интерфейс WEB-приложения.
Для достижения поставленной цели необходимо решить следующие
задачи:
анализ существующих решений в области информационных систем
организации «умных парковок»
составление схемы информационной системы и обоснование ее
эффективной применимости
выбор оптимальных средств разработки с учетом существующих
критериев
разработка, тестирование WEB-приложения для резервирования мест и
мониторинга парковки
оценить пути дальнейшей оптимизации потребляемых ресурсов и пути
дальнейшего масштабирования системы
Объектом исследования является класс информационных систем для
автоматизации работы парковочных комплексов.
Предметом исследования является веб-приложение для
резервирования мест и мониторинга состояния мест парковки, а также для
отображения схемы проезда к выбранному месту.
Методы исследования включают в себя:
анализ, сравнение, систематизация и обобщение данных о
существующих и разработанных способов автоматизации работы
парковочных комплексов;
апробация современных WEB-технологий при построении веб-
приложения;
тестирование работы интерфейса на ПК;
11
анализ технологий и подходов, позволяющих масштабировать и
оптимизировать WEB-приложение;
Теоретической основой исследования стали:
зарубежные исследования и решения по организации автоматизации
работы парковочных комплексов;
современные концепции и технологии разработки веб-приложений;
документация к различным используемым в современном WEB-
программировании фреймворков и библиотек.
Научная новизна и теоретическая значимость исследования.
Работа открывает направление исследований в области развития
современных информационных и WEB-технологий, применения
информационных и WEB-технологий для улучшения качества жизни и
комфорта как жителей России в целом, так и водителей в частности.
Выявлены, обоснованы и описаны преимущества информационных
технологий как инструмента развития парковочных систем. Показано, что с
помощью этого инструмента становится возможным повысить
эффективность и удобство как крытых, так и открытых парковок, не
потратив на это большое количество ресурсов.
Исследование показывает, что использование информационной
системы «умной парковки» в традиционную систему парковок, включая
охраняемые и неохраняемые парковки, не нарушает ее целостности,
раскрывая при этом ее потенциал в решении проблем с очередями,
переполненностью и безопасностью; а также в повышении
удовлетворенности пользователей парковок – водителей.
Практическая значимость исследования. Проведен анализ
традиционной системы парковок в городе Екатеринбург, а также нескольких
похожих аналогов «умных парковок», создана схема предложенной
парковки, создан рабочий макет парковки и прототип с рабочей программной
и аппаратной частью.
12
1 Постановка задачи
На основе исследований современных WEB-технологий, разработать
программный комплекс «Умная парковка», состоящий из трех частей:
1. Клиентская часть WEB-приложения для резервирования
парковочных мест.
2. Тестовый WEB-сервер для реализации работы WEB-приложения.
3. Тестовая база данных для реализации работы WEB-приложения.
WEB-приложение должно представлять собой информационный
сервис, позволяющий пользователю удаленно забронировать место на
парковке, используя удобный пользовательский графический WEB-
интерфейс, наглядно показывающий текущий статус парковочных мест.
Система должна обеспечивать:
Выбор метода бронирования (автоматический или ручной);
Визуализацию текущего статуса парковочных мест;
Автоматическое бронирование ближайшего парковочного места и
запись соответствующей информации в базу данных;
Бронирование парковочного места пользователем вручную, то есть
посредством клика на желаемое место парковки, статус которого
выделен как «свободный»;
Блокирование дальнейшего бронирования пользователем парковочных
мест.
База данных должна содержать коллекцию парковочных мест с
идентификаторами парковочных мест и их текущими статусами (занято или
свободно).
13
2 Исследование современных WEB-технологий
2.1 Описание стека технологий WEB-приложения
Стек технологий, использованный при разработке WEB-приложения,
включает в себя фреймворки и библиотеки, потребовавшиеся для
эффективной, быстрой разработки и позволяющие с минимальным объемом
данных и ограниченными системными требованиями интегрировать WEB-
приложение с остальными сервисами «Умной парковки» для отображения
данных в WEB-интерфейсе в реальном времени.
2.1.1 JavaScript-библиотеки
Рассмотрим основные JavaScript-библиотеки и фреймворки,
использующиеся в современном WEB-программировании. В работе [1]
приведено сравнение их производительности (в соответствии с рисунком 1) в
браузере Google Chrome 48. В данном случае тестируется создание 1000
строк сразу после загрузки страницы (“create 1000 rows”), обновление 1000
строк в таблице после 5 итераций «разогрева» JavaScript-движка (“update
1000 rows (hot)”), частичное обновление строк в таблице после 5 итераций
«разогрева» JavaScript-движка (добавление точки в конец каждой 10-ой
строки, “partial update”), выбор строки после 5 итераций «разогрева»
JavaScript-движка (визуальное выделение строки, “select row”), удаление
строки после 5 итераций «разогрева» JavaScript-движка (“remove row”). Как
видно из гистограммы на рис. 1, лучше всего показывает себя библиотека
VueJS, кроме обновления строк в таблице. WEB-интерфейс «Умной
парковки» предполагает визуальное обновление данных в реальном времени,
а создание визуальной «подложки» для отображения парковочных мест
создаётся только один раз, поэтому необходимо выбрать библиотеку, которая
является производительной при обновлениях данных и хорошо сочетается с
реализацией клиентского роутинга. Такой библиотекой является ReactJS.
14
Рисунок 1 – Гистограмма производительности JS-фреймворков (мс)
React – разработанный компаниями Facebook и Instagram JavaScript-
фреймворк с открытым исходным кодом для создания пользовательских
интерфейсов. Большинство пользователей React считают его Представлением
в идеологии MVC. React был разработан, чтобы решить большую проблему:
написание больших приложений с данными, которые меняются с течением
времени.
React – это библиотека на языке JavaScript для создания
пользовательских интерфейсов. React позволяет описывать элементы, т.е.
является декларативным. С помощью данной технологии можно
безболезненно создавать интерактивные пользовательские интерфейсы.
Разработчик может спроектировать простые представления для каждого
состояния будушего WEB-приложения, и React сможет эффективно и
производительно обновить и перерисовать только те компоненты, которые
были затронуты изменением данных. Декларативные представления делают
код более предсказуемым при выполнении и более удобным при отладке.
Разработчик также может создавать инкапсулированные компоненты,
которые управляют своим собственным состоянием, а затем соединять их для
дальнейшего использования и создания сложных составных
пользовательских интерфейсов. Так как логика компонентов написана на
JavaScript, а не на языке-шаблонизаторе, программист может легко
15
передавать достаточно большой набор данных со сложной структурой по
всему приложению, сохраняя состояние вне DOM [2].
Благодаря использованию данного фреймворка появляется
возможность загрузить клиенту (например, в WEB-браузер) сразу все
возможные «Представления». То есть для каждого действия пользователя в
WEB-клиенте найдется подходящее графическое WEB-представление, а с
сервера потребуется загрузить лишь то, что изменилось в данных (например,
какие-нибудь числовые данные в мониторинге, или любая другая
информация в удобном виде, например, JSON). Благодаря такому подходу,
при начальной загрузке страницы на WEB-клиент загружается сравнительно
большой файл (около 200-300 КБ для больших WEB-сервисов), однако при
дальнейших запросах в текущей сессии пользователю загружается от 1 Б до ~
2-3 КБ (в зависимости от размера измененных данных), при этом на экране
перерисовывается только измененная часть, что экономит время загрузки
необходимого представления и Интернет-ресурсы пользователя. В результате
наблюдается высокая скорость работы WEB-сервиса, улучшается
отзывчивость интерфейса, ускоряется переход между страницами благодаря
клиентскому роутингу, а шаблонизация интерфейса значительно упрощает
доработку клиентской части WEB-приложения.
React построен на концепции компонентов. Он отличается от таких
фреймворков, как Angular или Ember, которые используют двухстороннюю
привязку данных для обновления HTML страницы. На взгляд многих
фронтенд-разработчиков [3], React проще для изучения, чем Angular или
Ember – он намного меньше и хорошо работает с jQuery и другими
фреймворками. Он, к тому же, чрезвычайно быстр, так как использует
виртуальный DOM и обновляет только измененные части страницы
(обращение к DOM до сих пор является самой медленной частью
современных WEB-приложений, поэтому данная библиотека и получает
преимущество в производительности, оптимизируя его).
16
Клиентский роутинг в этом случае можно реализовать с помощью
библиотеки react-router [4]. Данная библиотека позволяет связывать
клиентские роуты с React-компонентами, таким образом, все возможные
состояния WEB-интерфейса будут содержаться в JavaScript-файле проекта,
где объявлены роуты (в точке входа приложения, в соответствие с рисунком
2).
Рисунок 2 – Код JS-файла точки входа приложения, содержащего клиентский роутинг
Для отрисовки схем или сложных рисунков в WEB-интерфейсе также
может потребоваться библиотека D3. D3.js (или просто D3) – это JavaScript-
библиотека для обработки и визуализации данных. Она предоставляет
удобные утилиты для обработки и загрузки массивов данных и создания
DOM-элементов. Название d3 расшифровывается как data driven document.
Это JavaScript библиотека, ориентированная на работу с данными и их
визуальное представление для WEB-приложений, включая загрузку данных,
визуализацию в режиме реального времени и множество других
возможностей [5, 6].
Так как большинство браузеров, используемых сегодня, не
поддерживают современные стандарты EcmaScript [7], в браузерах
необходимо использовать старый стандарт EcmaScript 5, который
поддерживается всеми современными браузерами, включая Internet
17
Explorer 11 [8], что позволяет значительно расширить возможность
использования разрабатываемого WEB-интерфейса. Однако, отказываясь от
новейших стандартов языка программирования, разработчик также
отказывается от возможностей использовать новый синтаксический сахар и
некоторые оптимизационные решения новых стандартов. Для этого
необходимо транслировать JavaScript более свежего стандарта [7] в JavaScript
стандарта EcmaScript 5, с этой задачей справляется Babel (JavaScript-
компилятор, на сайте [9] располагается его документация).
В итоге получается достаточно много зависимостей, которые требуется
импортировать в большинстве файлов, также, при разработке приложения,
код разрастается и появляется множество файлов. Для сборки JavaScript-
файлов и файлов стилей в один JavaScript-файл и файл стилей
соответственно, понадобится система сборки кода и пакетов в WEB-
фронтенде, webpack, документация которого расположена на сайте [10].
2.1.2 CSS-библиотеки
CSS является примитивным и неполным языком программирования. В
нём очень сложно создать функцию, переиспользовать определение или
использовать наследование. Для больших проектов или сложных систем,
поддержка кода на CSS становится большой проблемой. Однако, WEB-
технологии быстро развиваются, новые спецификации вводятся как в HTML,
так и в CSS. WEB-браузеры применяют эти спецификации, но оставляют
свои специальные вендор-префиксы. В некоторых случаях (в таких как,
например, фоновый градиент), программирование с использованием
специальных вендор-префиксов становится тяжелой ношей. Приходится
добавлять всевозможные префиксы разных версий браузеров, чтобы достичь
одинакового результата.
Чтобы код на CSS получался лучше, программисты чаще всего
используют различные подходы, например, разделение определений стилей в
18
небольшие файлы и их импортирование в один большой главный файл.
Такой подход помогал разделять стили по компонентам, но не решал
проблему с повторениями кода и не облегчал его поддержку. Другим
подходом являлись попытки внедрения объектно-ориентированного
программирования в CSS. В этом случае, к элементу применялись два или
более определений классов. Каждый класс добавлял один тип стиля к этому
элементу. Создание множества классов увеличивало возможность
наследования кода, но уменьшало возможность эффективной поддержки
кода.
Препроцессоры, в свою очередь, помогают достичь написания
масштабируемого и легко поддерживаемого кода в CSS. Используя
препроцессор, программист может легким образом увеличить свою
продуктивность и уменьшить объём кода в своём проекте.
Таким образом, в первую очередь, для комфортного программирования
стилей для WEB-клиента, разработчику необходим CSS-препроцессор. CSS-
препроцессоры расширяют использование CSS переменными, операторами,
интерполяциями, функциями, «примесями» (mixins) и остальными
полезными средствами. Наиболее известными CSS-препроцессорами
являются SASS [11], LESS [12] и Stylus [13].
Как и любой язык программирования, препроцессоры имеют
различные синтаксисы, однако, они довольно похожи друг на друга. Все
препроцессоры поддерживают «классическое» программирование на CSS и
их синтаксисы в целом схожи с CSS.
Рассмотрим, чем отличаются синтаксисы CSS-препроцессоров на
примере примесей (в соответствии с рисунком 3). Примеси – это набор
условий, который компилируется в соответствии с некоторыми параметрами
или статическими правилами. С помощью них можно создавать что-то
наподобие функций и переиспользовать правила стилей в других местах в
коде. Как видно из рисунка 3, наиболее привычным синтаксисом, похожим
19
на CSS, является синтаксис SASS и LESS, однако в SASS более конкретное,
подробное описание использования примесей (@mixin, @include), чем в
LESS (символ “.”, что дублирует селектор класса, который тоже начинается с
символа “.”), поэтому при разработке будет использоваться CSS-
препроцессор SASS [14].
Рисунок 3 – Описание примесей в разных препроцессорах и аналог в CSS
Далее, разработчику необходимо каким-то образом эффективнее
писать кросс-браузерный CSS-код. Для этого нужна утилита, которая
автоматически добавляет префиксы к правилам стилей. Например, компания
Google рекомендует autoprefixer [15, 16] для postCSS-обработки. Данная
библиотека позволяет писать стили без специальных вендор-префиксов (в
соответствии с рисунком 4 и рисунком 5), таким образом, решается проблема
с написанием кросс-браузерных стилей.
20
Рисунок 4 – Описание CSS-правила без вендор-префиксов
Рисунок 5 – Описание CSS-правил с вендор-префиксами, после работы autoprefixer
2.2 Интеграция стека технологий
Для того, чтобы эффективно интегрировать большое количество
зависимостей в проект, необходим пакетный менеджер. Без пакетного
менеджера зависимости необходимо скачивать с интернет-источников
вручную, либо загружать зависимости в систему контроля версий кода, что в
десятки раз увеличит размер разрабатываемого проекта и негативно повлияет
как на скорость скачивания и установки проекта, так и на ресурсы сервера
системы контроля версий. Самым известным пакетным менеджером для
JavaScript-библиотек является npm, который в свою очередь также является
самым большим в мире программным реестром [17]. С помощью npm нет
необходимости добавлять файлы зависимостей в проект, а достаточно
добавить в корень проекта файл с наименованием «package.json»
(Приложение А), который содержит соответствие названий JavaScript-
21
библиотек и их версий, при этом, версии можно «заморозить». Таким
образом, в проекте всегда будут нужные версии пакетов, а загружать их
можно перед запуском или сборкой проекта простой командой в консоли
“npm install” (находясь при этом в корне проекта).
Зависимости проекта, в свою очередь, могут также содержать свои
зависимости, которые будут загружены при выполнении команды “npm
install”. Следовательно, кодовая база проекта будет содержать значительное
количество кода, большая часть из которого не сжата, а некоторые части кода
могут не использоваться в проекте и занимать лишнее место, что ведет к
загрузке лишних данных в браузере при загрузке страницы и помещении
этих данных в оперативную память, что может замедлить работу WEB-
интерфейса. Чтобы избежать данных проблем, необходимо отсеивать
неиспользуемый код и сжимать его при сборке, однако наиболее эффективно
делать это автоматически. Автоматически это можно сделать, если
подходящим образом сконфигурировать сборку в webpack [10], а именно,
добавив в конфигурационный файл webpack UglifyJsPlugin [18], который
производит минификацию и обфускацию JavaScript-кода. Также, необходимо
добавить DedupePlugin [19], который ищет одинаковые файлы в проекте и
исключает их из итоговой сборки. Неиспользуемые файлы и библиотеки
webpack не включает в результат сборки по умолчанию.
Для того, чтобы автоматически использовать такие технологии, как
CSS-препроцессоры, postCSS-обработка (autoprefixer), современные
стандарты EcmaScript [7], необходимо также добавить в конфигурационный
файл системы сборки webpack так называемые «загрузчики» (loaders). [20]
Например, описанные в файле “package.json” (Приложение А) зависимости
babel-loader, sass-loader, postcss-loader и autoprefixer позволяют разработчику
писать код на JavaScript современных стандартов, использовать синтаксис
CSS-препроцессора SASS и не писать специальные вендор-префиксы, т.к.
22
трансляция языков и добавление префиксов произойдёт автоматически при
сборке.
2.3 Тестирование интеграции технологий
Набор зависимостей, описанных в Приложении А, после загрузки в
проект занимает 78,7 МБ на жёстком диске ПК (в соответствии с рисунком
6). Размер всего остального кода в проекте составляет 804 КБ на жёстком
диске ПК (в соответствии с рисунком 7).
Рисунок 6 – Свойства папки “node_modules”, в которой содержатся все зависимости
проекта
23
Рисунок 7 – Свойства всех файлов проекта, кроме папки “node_modules”
Без применения описанных выше плагинов, собранный в webpack
проект занимает 5,05 МБ на жёстком диске ПК (в соответствии с рисунком
8), а с применением плагинов – 968 КБ (в соответствии с рисунком 9),
следовательно, в этом случае размер собранного проекта уменьшился почти в
5 раз, что говорит о несомненной пользе упомянутых выше плагинов для
сборки production-версии разработанного проекта.
24
Рисунок 8 – Свойства папки “release”, в которой содержатся файлы проекта, собранного
без плагинов для оптимизации
Рисунок 9 – Свойства папки “release”, в которой содержатся файлы проекта, собранного с
плагинами для оптимизации
25
2.4 Способы масштабирования WEB-приложения
2.4.1 Описание проблем производительности WEB-клиента
В настоящий момент в сфере разработки WEB-приложений существует
множество проблем, связанных с недостаточной производительностью.
Данные в больших WEB-приложениях на стороне сервера (или базы данных)
могут занимать более 900 ГБ (например, данные об учащихся в
международном масштабе) [21]. Поэтому, одной из проблем в разработке
WEB-фронтенда больших WEB-приложений является низкая скорость
обработки большого потока данных, присылаемого с сервера на WEB-клиент
(чаще всего, WEB-браузер). Организацию обновления визуальных данных в
WEB-клиенте можно выполнить разными способами: обновлять (и
перерисовывать) данные исключительно после непосредственного запроса
пользователя, использовать поллинг (WEB-клиент выполняет запросы на
сервер с определенным интервалом) или использовать отличный от HTTP
протокол для обмена сообщениями между браузером и WEB-сервером в
режиме реального времени (например, WebSocket).
2.4.2 Сравнение способов обновления данных в WEB-приложении
В первую очередь, как было сказано выше, организацию обновления
визуальных данных в WEB-клиенте можно выполнить с помощью обычных
HTTP-запросов по требованию пользователя. Например, в поисковом сервисе
компании Google [22] используется именно такой метод: нажимая на кнопку
поиска, пользователь отправляет HTTP-запрос на сервер, после чего получает
ответ и обновляет информацию на странице. Пример простого HTTP-запроса
на языке JavaScript приведен в Приложении Б.
Во-вторых, организацию обновления визуальных данных в WEB-
клиенте можно выполнить с помощью HTTP-поллинга. В этом случае
используется тот же простой HTTP-запрос данных, как и в первом случае,
26
однако он повторяется с некоторым интервалом времени, таким образом,
WEB-клиент имеет возможность показывать информацию в реальном
времени (пример на языке JavaScript приведен в Приложении В). Данный
метод прост в реализации и может использоваться при разработке простого
WEB-интерфейса сетевого устройства для мониторинга небольшого
количества данных, например, мониторинг одной таблицы параметров
сетевого устройства в реальном времени.
Наконец, обновление визуальных данных можно реализовать с
помощью WebSocket. В этом случае WEB-клиент открывает соединение с
сервером [23] и подписывается на необходимые топики («темы») данных,
после чего сервер отправляет данные по подписке в тот момент, когда
посчитает нужным, например, когда данные изменились в базе данных
(пример на языке JavaScript приведен в Приложении Г). Примером WEB-
приложения может стать любое WEB-приложение с обновлением данных в
реальном времени, так как WebSocket является самым эффективным с точки
зрения производительности и нагрузки на сервер транспортом [24].
Яндекс.Почта, доступная по адресу [25], использует WebSocket для загрузки
сообщений с сервера в реальном времени (в соответствии с рисунком 10).
Рисунок 10 – WebSocket-подключение на странице Яндекс.Почты
27
Таблица 1 – Сравнение способов организации обновления данных в WEB-
клиенте
Из сравнения в таблице 1 видно, что для обработки больших данных
выгоднее всего использовать WebSocket, т.к. размер потока сообщений
Критерий сравнения
Обновление
только после
запроса
Поллинг WebSocket
Возможность создания
приложения с
обновлением данных в
реальном времени
- + +
Большое количество
готовых реализаций
(следовательно, простота
разработки)
+ + -
Малое количество
запросов с WEB-клиента
на сервер
+/- (зависит от
частоты прямых
запросов
пользователей)
- (запросы
посылаются с
определенным
интервалом,
например, 2 раза в
секунду)
+ (запрос только
один: для
установки
соединения с
сервером)
Необходимость
реализации методов
оптимизации большого
потока данных на стороне
WEB-клиента
- (большой поток
данных может
возникнуть
только из-за
большого
количества
прямых запросов
пользователей,
его нужно
обрабатывать на
сервере,
вследствие чего
замедление
работы
интерфейса у
других
пользователей не
возникнет)
+ (Поллинг
используется для
реализации
приложения с
обновлением
данных в реальном
времени, поэтому
данные нужно
обновлять
достаточно часто.
Однако, если на
сервере данных
очень много (вся
база может весить
около 1 ТБ), то
поллинг, даже с
реализацией
кластеризации
данных [26] может
стать совершенно
неприменимым
решением.)
+ (Сервер сам
посылает данные
на WEB-клиент,
поэтому, если
сервер
наблюдает в базе
данных частые
изменения – все
изменения
попадут в WEB-
клиент в виде
большого потока
сообщений.) [23]
28
между WEB-клиентом и сервером получается наименьшим и наиболее
обоснованным (т.к. метод обновления только после запроса пользователя не
подходит для создания приложения с данными, обновляющимися в реальном
времени, а поллинг не подходит для постоянной загрузки данных, когда
данных становится очень много; к тому же, при использовании поллинга
WEB-клиент производит запросы на сервер всегда, даже тогда, когда данные
в базе данных не изменились). Явным недостатком при использовании
WebSocket становится множество различных так называемых «обёрток» над
протоколом, без единой стандартизации. В таком случае необходимо выбрать
такой протокол, который будет поддерживаться и на стороне WEB-клиента,
и на стороне сервера. Несмотря на крайне ограниченное количество готовых
решений для реализации передачи данных по данному протоколу,
существует реализация протокола с открытым стандартом WAMP [27], с
помощью которой можно относительно просто реализовать передачу и прием
данных через WebSocket. Исходный код данной реализации расположен на
сайте [28].
2.4.3 Решения проблемы очереди сообщений при большом потоке
данных на WEB-клиент
Чтобы решить проблему большого потока сообщений с сервера на
WEB-клиент, например, в случае мониторинга большой сети, необходимо
каким-то образом свести обработку каждого пришедшего сообщения к
минимальному количеству операций, таким образом, уменьшив общее время
обработки сообщений за определенный промежуток времени, что позволяет
быстрее освобождать ресурсы для выполнения других задач (например,
таких тяжелых, как построение DOM) в однопоточном WEB-клиенте.
Буферизация данных позволяет эффективно решить данную проблему. Такая
буферизация работает наподобие буферизации в процессоре (описанной в
работе [29]), а именно при использовании буферизации WEB-клиент не
29
обрабатывает пришедшие с сервера сообщения сразу, а складывает их в
буфер, причем не в массив, а сливает все данные в одно сообщение, чтобы
его можно было удобно в дальнейшем применить к имеющимся данным, и
всего один раз за заданный промежуток времени.
Представим, что разрабатываемое WEB-приложение может содержать
как малое количество данных в базе данных, так и очень большое количество
данных. Например, приложение мониторинга сети в реальном времени. Если
сетевых узлов мало (допустим, их количество может быть от 1 до 50), то
буферизация сыграет небольшую роль, т.к. современные компьютеры имеют
достаточные вычислительные ресурсы, чтобы успевать обработать
телеметрию такого количества устройств (разумеется, если каждое
сообщение не влечёт за собой, например, пересчет и перестроение графа
топологической сети). Следовательно, нужно каким-то образом
минимизировать влияние буферизации на визуальное отображение WEB-
интерфейса пользователя, когда сетевых узлов, а точнее, сообщений с
сервера мало (приходят реже, чем заданный ранее интервал буферизации), и
постепенно увеличивать влияние буферизации на скорость обновления
данных в интерфейсе для того, чтобы вычислительные операции не забивали
стек процесса и не вызывали визуальное затормаживание интерфейса, если
сообщение начинают приходить чаще. Для этого предлагается обновлять
таймер применения данных минимум до того момента, когда ни одно
сообщение не придёт за заданный ранее интервал, а максимум до того
момента, когда значение суммы временных интервалов (учитывая
обновления таймеров) достигнет какой-нибудь критической отметки для
форсированного обновления. Например, если задать минимальный интервал
обновления равным 200 мс, то в том случае, если в течение 200 мс придёт
только одно сообщение, то данные из этого сообщения применятся к данным
в уже существующем WEB-хранилище сразу после данного интервала,
иначе, таймер обновится и будет ожидать сообщение, если сообщение вновь
30
успеет прийти с сервера – таймер обновится и так далее. Так будет
происходить до тех пор, пока сумма такого времени не достигнет
критической отметки, равной, например, 1 секунде, и в этом случае данные,
слепленные из всех пришедших за 1 секунду сообщений применятся к уже
существующим данным в хранилище. Таким образом, при большом потоке
данных обновление данных в WEB-интерфейсе будет происходить не чаще,
чем 1 раз в секунду, а при малом потоке данных может происходить от 1 раза
в 200 мс до 1 раза в 1 секунду.
Рассмотрим реализацию данного алгоритма на языке JavaScript
стандарта EcmaScript 2015 [30], представленную в Приложении Г. В данной
реализации класс UpdateHandler отвечает за накопление и применение
накопленных данных к хранилищу данных. В данной реализации класс
обрабатывает сообщение о событиях, произошедших в большой сети,
поэтому, потребовалась буферизация, чтобы свести задержки операций к
минимуму. Внешние обработчики сообщений WebSocket используют метод
bufferedUpdate, передавая в него сообщения с обновлениями данных о
событиях, произошедших в сети. Учитывая, что константа, определенная в
Приложении А как Constants.DEFAULT_UPDATE_TIMEOUT равна 200 мс,
получаем реализацию буферизации, описанной выше.
Современные технологии WEB-программирования позволяют
реализовать WEB-приложения, удовлетворяющие как отсутствию
чрезмерных вычислений и оптимизационных операций при малом потоке
данных, так и отсутствию видимых задержек вычислений при большом
потоке данных. Различные задачи разработок требуют использования разных
технологий, методов и подходов к обработке информации и оптимизации
данного процесса, однако в объёмных WEB-приложениях остаётся выгодным
использование протокола WebSocket для организации обновления данных в
WEB-клиенте и буферизации для оптимизации этого обновления.
31
3 Разработка программного комплекса «Умная парковка»
3.1 Обзор аналогов
Многие системы мониторинга парковочного пространства имеют
сравнительно низкую интеллектуальную составляющую и точность
показаний. Некоторые решения основаны на информации от паркоматах
(парковочных автоматах), которые рассчитывают на достоверность
информации о наличии свободного места при отсутствии оплаты [31].
Однако, такое решение не обеспечивает достоверность информации, так как
располагает только косвенными данными. К тому же автопарковка около
торгового центра обычно является бесплатной.
Другие решения предполагают установку большого количества
датчиков, которые не защищены от условий окружающей среды и
вандализма [32].
Крупные торговые центры прилагают усилия по обеспечению
комфорта и безопасности парковок. Так, например, в Германии на парковке
организовано наблюдение за всеми парковочными местами благодаря
широкоугольным IP-камерам, которые ведут видеозапись целой группы
парковочных мест по всей площади. Это позволяет увидеть кто, когда и
какое парковочное место занимает либо покидает. При постоянной смене
клиентов в течение дня рекомендуется вести непрерывную запись
изображений с камер. Ночью или при небольшом движении на парковке
предпочтительна эпизодическая запись по датчику движения, а также
включение живого изображения на центральной станции [33]. Однако
установленные системы видеонаблюдения используются только для целей
безопасности, так как функционируют на платной парковке с заранее
выделенными местами.
Интересное решение, представленное компанией StreetLine [34]
ориентировано на использование видеоанализа, беспроводных технологий и
32
систем геопозиционирования. Как следует из названия компании, оно
рассчитано на открытые парковки городских улиц.
Удачная система управления парковкой реализована компанией Park
Assist [35], однако она не использует возможности сетевых технологий для
мобильных устройств. Также эта система является закрытой для расширения
возможностей и имеет сравнительно дорогую стоимость. Существует
необходимость в создании системы управления парковой, которая может
быть использована как на открытых, так и на закрытых парковках при
минимальных затратах.
3.2 Описание системы
Предлагаемое решение является комплексной системой, которая
включает в себя устройства сканирования парковочных мест, которые могут
быть применены как для задач безопасности, так и для автоматизированной
обработки информации. Интеллектуальная система обработки изображений
позволяет анализировать данные о наличии свободных мест и выдавать
информацию на различные устройства и информационные сервисы. Такими
устройствами могут быть как телефоны и планшеты, так и электронные
указатели, размещенные по территории парковки. Сервис, предназначенный
для планшетов, может быть использован в составе информационного киоска.
Для водителей, не обладающих мобильными устройствами,
подключенными к «умной парковке», можно использовать средства
отображения информации в виде светодиодного табло. Это позволяет
расширить круг потребителей информации за счет доступности средств
отображения информации. Такие технические средства являются
наглядными и доступными по цене. На парковке должны быть установлены
электронные табло и указатели в количестве, необходимом для ориентации в
пространстве паркинга и однозначного понимания расположения свободных
мест.
33
Умная парковка является компактной геоинформационной системой.
При наличии возможности подключения мобильного устройства к сети
передачи данных (GSM, Wi-Fi), пользователю может быть предоставлена
расширенная информация о наличии парковочных мест. Такой сервис
значительно упрощает процесс передвижения автомобиля, снижает время на
ориентирование в пространстве и повышает качество предоставляемых
услуг.
Основным источником информации о свободном парковочном месте
является информация с видеокамер. Камеры расположены на парковке таким
образом, чтобы все парковочные места попали в поле обзора.
Существуют различные методы распознавания образов, которые
позволяют с высокой долей вероятности идентифицировать наличие
свободного пространства в заданном секторе. Каждое парковочное место
отмечено специальным знаком-маркером (в соответствии с рисунком 11).
Если автомобиль занимает парковочное место, то он полностью закрывает
специальный знак и можно считать это место занятым.
Рисунок 11 – Пример табло и парковочных мест в разрабатываемой системе
34
Усовершенствованная система видеонаблюдения на въезде в парковку
обеспечивает регистрацию транспортного средства, распознавая номер
автомобиля. Система позволит отследить передвижение любого
транспортного средства, так как наблюдаемое пространство полностью
перекрывается системой видеокамер, а каждая камера ориентирована в
пространстве (в соответствии с рисунком 12). Автомобиль, занимающий
парковочное место может быть идентифицирован по номеру автомобиля.
Подробная информация о перемещениях транспортных средств представляет
ценность для служб безопасности.
Рисунок 12 – Покрытие видеокамер на парковке
С помощью анализа изображения с камер можно более точно
определить, правильно ли припаркован автомобиль, не является ли он
помехой для движения транспорта и пешеходов. Автоматическая обработка
данных о нарушителях парковки позволит мгновенно определить факт
нарушения и оповестить оператора. Зарезервированное пространство, не
предназначенное для парковки, также является объектом наблюдения.
Пользователи мобильных устройств имеют возможность получить
изображение своего автомобиля и его расположение на парковке по номеру.
Для больших парковок это является очень полезной функцией, так как
достаточно легко забыть расположение парковочного места.
35
Для поиска своего автомобиля предусмотрен сервис для мобильных
устройств и информационных киосков. Привязанный к мобильному
устройству автомобиль позволит вызвать владельца в случае возникновения
нештатных ситуаций.
Некоторое количество парковочных мест оснащено функционалом
«помощник парковки» для комфортной парковки водителей, которые
затрудняются с определением габаритов. Это функция реализуется за счет
стационарного расположения систем «парктроник». Она также является
датчиком свободного места.
3.2.1 Состав системы
Система умной парковки состоит из двух подсистем:
1. Аппаратная и материальная часть
1 IP-камера Cisco для распознавания номеров
1 широкоугольная видеокамера для распознавания символов на
парковочных местах
Ультразвуковые датчики для идентификации занятых мест
Уникальные графические символы для идентификации занятых
мест видеокамерой
Макет поверхности парковки
3 машинки для презентации
Контроллер для сбора и обработки данных
2. Программная часть
WEB-сервер (WEB-API для веб-интерфейса пользователя),
WEB-интерфейс для пользователей
Общая база данных
Программа видеоанализа свободных мест
Программа видеоанализа и распознавания автомобильных номеров
36
В качестве системы контроля версий была выбрана система Git [36],
которая является распространенной среди WEB-разработчиков, а также
имеет удобный графический интерфейс и функциональную командную
консоль. В качестве сервера для системы контроля версий выбран Bitbucket
[37], так как данный сервер позволяет бесплатно хранить приватные
репозитории кода, а также удобно объединять репозитории в проекты и
создавать команды разработчиков в WEB-интерфейсе (в соответствии с
рисунком 13).
Рисунок 13 – Список репозиториев проекта "Умной парковки"
3.2.2 Поток данных в системе
Схема работы системы умной парковки представляет из себя
абстрактное представление о потоке данных в системе (в соответствии с
рисунком 14). Информация с видеокамер сохраняется на видеосервере и
доступна для непосредственного наблюдения, а также последующей
обработки. В зависимости от места установки камеры и наличии изменений
в изображении система определяет присутствие автомобиля и при его
наличии распознает номер. Камеры, наблюдающие за парковочными
местами, фиксируют состояние занятости парковочных мест. Если место
свободно, то информация поступает в базу данных.
База данных хранит информацию о состоянии парковочных мест и
номерах автомобилей в каждый момент времени. Полученная информация
может быть использована для предоставления информации разным
37
пользователям в различных форматах, а также мониторинга и сбора
статистики
Рисунок 14 – Абстрактная схема работы умной парковки
3.2.3 Пользовательские сценарии
Разрабатываемая система предполагает три возможных
пользовательских сценария: автоматическая парковка, ручная парковка с
авто-назначенным парковочным местом и ручная парковка с местом,
зарезервированным пользователем. Во-первых, пользователь решает, хочет
38
ли он заранее зарезервировать парковочное место. Если да, то пользователю
необходимо зарегистрировать индивидуальный регистрационный номер
своего транспортного средства в веб-приложении (например, в мобильном
телефоне) и зарезервировать парковочное место в интерфейсе, либо
позволить системе зарезервировать место автоматически. Веб-приложение
показывает свободные и занятые места, выделенные зелеными или красными
кругами соответственно (в соответствии с рисунком 15), и не позволяет
пользователю зарезервировать уже занятое или забронированное место.
Рисунок 15 – Визуализация занятых и не занятых мест в веб-приложении
Когда машина подъезжает к въезду на парковку, камера распознает
индивидуальный регистрационный номер, и система записывает фотографию
и регистрационный номер в базу данных, ассоциируя номер с именем
пользователя. Если такое соответствие нашлось, веб-приложение показывает
пользователю схематичную навигацию к парковочному месту, выбранному в
39
приложении. Информация о занятости мест обновляется в реальном времени,
поэтому не стоит волноваться даже о том, что место могут занять, пока
водитель движется к нему – система произведет перерасчет пути к
следующему ближайшему парковочному месту в случае, если место по
какой-то причине займут. Приложение имеет Wi-Fi соединение с сервером,
который отслеживает местоположение машины и рассчитывает путь до
парковочного места с помощью анализа изображений, полученных с
видеокамер. Видеокамеры, наблюдающие за парковочными местами,
постоянно отслеживают их статус. Например, если камера не может
распознать специальную метку на парковочном месте (допустим, в виде “X”),
то считается, что место занято. В данном случае для дополнительной
проверки могут использоваться ультразвуковые датчики, которые позволят
проверить, действительно ли место занято, и на нем не припарковать ещё
одно транспортное средство, или же метка просто покрыта снегом, грязью
или пылью и перестала распознаваться. Данные с датчиков и камер также
записываются в базу данных для того, чтобы веб-приложение смогло
отобразить пользователю информацию о занятых местах, а также
поддерживать актуальное состояние данных.
Если соответствие регистрационного номера и имени пользователя не
было найдено, система автоматически находит ближайшее свободное место и
назначает его данному транспортному средству, выводя регистрационный
номер вместе с указанием направления на табло. В данном случае веб-
приложение не используется.
Алгоритм работы системы изображен на UML-диаграмме
последовательности (Приложение Е), абстрагированная от особенностей
реализации архитектура работы веб-приложения для парковки изображена на
UML-диаграмме активности (Приложение Ж). Схема компонентов и их
взаимодействия изображена на UML-диаграмме компонентов (Приложение
И).
40
3.4 Разработка программного обеспечения
3.4.2 Разработка WEB-сервера
Для разработки WEB-сервера была выбрана технология NodeJS [38],
т.к. она позволяет ускорить процесс реализации вследствие того, что
используется один и тот же язык программирования, что и в WEB-
интерфейсе (JavaScript). Структура WEB-сервера не является сложной (в
соответствии с рисунком 16), так как сервер представляет из себя набор
обработчиков HTTP-запросов и обращений в базу данных. Сервер
предоставляет пользовательскому интерфейсу API (Приложение К) для
безопасного изменения или сохранения данных в базе данных.
Рисунок 16 – Структура исходного кода WEB-сервера в системе контроля версий
41
Сервер предоставляет не только API, но и сами статические файлы
собранного проекта WEB-интерфейса пользователя, расположенные в папке
«release».
3.4.3 Создание базы данных
Для создания базы данных выбрана СУБД MongoDB [39], так как
данная СУБД имеет драйвер для WEB-сервера, написанного с
использованием технологии NodeJS, а также по причине того, что данные в
MongoDB хранятся в формате JSON [40], что соответствует формату данных,
использующимся в JavaScript. Проанализировав принципы работы
разрабатываемой системы, были установлены следующие основные
сущности для проектирования БД:
1. Пользователи. Данная коллекция документов хранит информацию о
зарегистрированных в системе пользователях. Структура коллекции
представлена в таблице 2.
Таблица 2 – Коллекция «users»
Название поля Тип данных
_ID ObjectId
name String
password String
licensePlate String
2. Парковочные места. Данная коллекция документов хранит
информацию о парковочных местах, а именно, о состоянии мест
(занято, свободно или забронировано), информацию о том, кто занял
место, в какое время место было забронировано. Структура коллекции
представлена в таблице 3.
42
Таблица 3 – Коллекция «parking»
Название поля Тип данных
_ID ObjectId
id Number
name String
reserved Boolean
occupiedByVideo Boolean
occupiedBySensors Boolean
userName String
time Date
3.4.4 Разработка WEB-интерфейса
WEB-приложение использует клиент-серверную архитектуру. В
частности, сервер выступает в качестве посредника между клиентом и базой
данных, обеспечивая безопасную запись, чтение, редактирование и удаление
документов в коллекциях базы данных mongoDB.
Архитектура клиентской части WEB-приложения состоит из:
Корня приложения, обеспечивающего клиентский роутинг (SPA –
Single Page Application) и позволяющий менять визуальное
представление браузера без полной перезагрузки страницы. (в
соответствии с рисунком 2)
Компонентов и стилей, реализующих визуализацию данных в
клиентском браузере (в соответствии с рисунком 17, Приложение Л)
43
Рисунок 17 – Структура директорий React-компонентов
Reflux-идеологии потока данных в клиентской части WEB-приложения
[41]. Из действий (Actions) данные попадают в хранилище (Store) (в
соответствии с рисунком 18, Приложение М), оттуда данные попадают
в представление (View) посредством прослушивания событий
изменения хранилища. Представлениями в данном случае являются
React-компоненты.
44
Рисунок 18 – Структура директорий Reflux-сущностей
Сценарий выполнения
Пользователь заходит в WEB-приложение посредством WEB-браузера
и видит стартовый экран (в соответствии с рисунком 19).
Рисунок 19 – Начальный экран WEB-приложения
45
Пользователь нажимает на кнопку «Занять», если хочет автоматически
зарезервировать ближайшее свободное место, или нажимает на кнопку
«Или забронировать вручную», чтобы зарезервировать любое
свободное место на парковке вручную.
После нажатия пользователем на кнопку «Занять», система
автоматически занимает ближайшее свободное место для пользователя,
окрашивает статус соответствующего места парковки в красный (что
означает, что место занято) и накрывает парковку полупрозрачным
темно-серым фоном, не дающим пользователю забронировать еще одно
место вручную (в соответствии с рисунком 20).
Рисунок 20 – Автоматически занятое место на парковке
46
После нажатия пользователем на кнопку «Или забронировать
вручную», система показывает парковку со статусами парковочных
мест (в соответствии с рисунком 21). Пользователь нажимает на любое
свободное место, статус этого места парковки окрашивается в красный
(что означает, что место занято), а парковка накрывается
полупрозрачным темно-серым фоном, не дающим пользователю
забронировать еще одно место вручную (в соответствии с рисунком
20).
Рисунок 21 – Визуализация пустой парковки с возможностью забронировать место
После бронирования места, в базе данных изменится соответствующий
документ, и всем другим пользователям будет виден результат
бронирования данного пользователя.
47
Итак, выше был представлен пример реализации приложения на основе
библиотеки React. «Строки» с парковочными местами (парковочные ряды) в
таком случае будут формироваться с помощью функции, в зависимости от
данных, пришедших с сервера (в соответствии с рисунком 22). В данном
случае можно довольно просто динамически формировать количество мест в
каждом ряду, а также расположение самих мест в парковочной зоне. Однако,
задача усложняется, когда становится необходимо нарисовать маршрут до
места, хотя бы схематично. В этом случае проще всего использовать
инструменты для отрисовки SVG, например, библиотеку D3.js.
Рисунок 22 – Функция для получения React-компонентов первого ряда парковочных мест
С помощью D3 также можно задать функции, которые будут
рассчитывать координаты для отрисовки различных объектов в парковочной
зоне (в данном случае парковочная зона является пространством для
отрисовки SVG). Например, функция для получения данных для отрисовки
кругов (отображающих статусы) в первом парковочном ряду выглядит
довольно небольшой (в соответствии с рисунком 23).
48
Рисунок 23 – Функция для получения данных для отрисовки SVG-кругов
Однако, данная функция возвращает лишь окружности. Необходимо
еще несколько функций: для отрисовки маршрута (ломаной линии или
стрелки), для отрисовки разделительных линий и линий, обозначающих
места парковки. Таким образом, можно сделать вывод, что React удобнее для
решения подобных проблем, т.к. в данной библиотеке есть возможность
переиспользовать компоненты и «вкладывать» один в другой. Однако, задача
включает в себя динамическую отрисовку ломаной линии, которую
практически невозможно отрисовать с помощью одного только React, т.е. с
помощью его виртуального DOM. В ходе работы были выявлены критерии
для сравнения технологий. По предложенным критериям выполнено
сравнение технологий React, D3, а также результата их интеграции (React +
D3). Результаты сравнения представлены в таблице 4.
49
Таблица 4 – Сравнение технологий React и D3 для реализации WEB-
интерфейса комплекса «Умная парковка»
Критерий React React + D3 D3
Удобство в чтении + +/- -
Производительност
ь отрисовки
+/- + +
Возможность
рисовать сложные
динамические
объекты
- + +
Возможность
масштабирования
проекта
+/- + +/-
Возможность
организовать
простой клиентский
роутинг и SPA
+ + -
Возможность
удобного
переиспользования
компонентов
+ + -
Производительная
отрисовка при
обновлении данных
+/- + +
В результате сравнительного анализа стало очевидно, что максимально
эффективным, и в то же время относительно простым решением является
совместное использование библиотек React и D3 с использованием SVG и,
несмотря на то, что это требует довольно большой порог вхождения
разработчика, данное решение позволяет эффективно создать необходимый
интерфейс, сделать его производительным и масштабируемым при
появлении новых требований заказчика.
После интеграции описанных выше технологий, появляется
возможность показать пользователю схематичный путь до забронированного
места (в соответствии с рисунком 24).
50
Рисунок 24 – Схема проезда к забронированному месту на парковке
Для удобного тестирования бронирование автоматически снимается
спустя 15 секунд на сервере. В реальной жизни можно увеличить это время,
например, до 30 минут. «Статус» мест на парковке отображается в реальном
времени, т.к. в WEB-приложении реализован polling, который каждую
секунду опрашивает сервер и получает с него данные о парковочных местах.
Таким образом, можно не только без обновления страницы узнать о снятии
своего бронирования, но и узнать о недавно занятых или забронированных
местах на парковке.
51
ЗАКЛЮЧЕНИЕ
В результате выполнения выпускной квалификационной работы была
достигнута поставленная цель и выполнены поставленные задачи, а именно:
проведено исследование современных WEB-технологии и библиотек,
разработан программный комплекс «Умная парковка».
В результате исследования были выявлены основные проблемы при
разработке WEB-интерфейса, проведен анализ и сравнение современных
WEB-технологий, позволяющие решить данные проблемы, а также
алгоритмы для масштабирования клиентской части WEB-приложения.
Программный комплекс включает в себе:
1. Базу данных, содержащую всю необходимую информацию для
WEB-приложения в составе программного комплекса «Умная
парковка».
2. WEB-сервер, предоставляющий WEB-клиенту API для манипуляции
данными, хранящимися в базе данных, который можно
масштабировать, переписав сервер, используя многопоточные
технологии и разделив нагрузку, используя облачные технологии.
3. Пользовательский интерфейс, позволяющий посетителю парковки в
реальном времени получать информацию о состоянии мест на
парковке; бронировать себе любое из мест, выбирая место вручную
или автоматически. Интерфейс может быть масштабирован для
отображения множества парковочных пространств одновременно,
например, в кластере. Более того, данное масштабирование, с
учетом использования результатов исследования современных
WEB-технологий и алгоритмов их эффективного применения
визуально не потеряет производительность, в том числе при
большом потоке данных с сервера на WEB-клиент.
52
Основные идеи и результаты исследования были представлены на 3
научных международных конференциях, проходивших в Екатеринбурге:
«Информационные технологии, телекоммуникации и системы управления»
(2015 г.), «Компьютерный анализ изображений: Интеллектуальные решения
для промышленных сетей» (ICCAI’16) (2016 г.), Форум молодых ученых
«ИТ: глобальные вызовы и новые решения» (2016 г.)
Результаты работы отражены в публикациях:
Папуловская Н.В. Рапопорт А.А. НОВЫЕ ВОЗМОЖНОСТИ
СОВРЕМЕННОГО ВЕБ-ПРОГРАММИРОВАНИЯ / Н. В. Папуловская, А. А.
Рапопорт // 2я Международная конференция студентов, аспирантов и
молодых ученых "Информационные технологии, телекоммуникации и
системы управления": сборник докладов. — Екатеринбург: [УрФУ], 2016. —
С. 342-345.
Папуловская Н.В., Рапопорт А.А. СИСТЕМА ВИДЕОРЕГИСТРАЦИИ
АВТОТРАНСПОРТА ДЛЯ ОБЕСПЕЧЕНИЯ КОМФОРТНОЙ ПАРКОВКИ/
Н. В. Папуловская, А. А. Рапопорт// сборник научных трудов по материалам I
Международной конференции «Компьютерный анализ изображений:
Интеллектуальные решения в промышленных сетях (CAI-2016)». Уральский
федеральный университет имени первого Президента России Б.Н. Ельцина;
Под общей редакцией А. Г.Тягунова. 2016. С. 186-188.
Папуловская Н.В., Рапопорт А.А. РАЗРАБОТКА СИСТЕМЫ
ИНФОРМАЦИОННОГО СЕРВИСА ДЛЯ ПАРКОВКИ
АВТОТРАНСПОРТА/ Н. В. Папуловская, А. А. Рапопорт // материалы
форума молодых ученых «ИТ: глобальные вызовы и новые решения» (2016
г.): сборник докладов. — Екатеринбург: [УрФУ], 2016.
53
СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ
1. JS web frameworks benchmark. [Электронный ресурс]. – Режим доступа:
http://www.stefankrause.net/wp/?p=191 (дата обращения: 31.03.17).
2. A Javascript library for building user interfaces – React. [Электронный
ресурс]. – Режим доступа: https://facebook.github.io/react/ (дата
обращения: 31.03.17).
3. 5 практических примеров для изучения фреймворка React.
[Электронный ресурс]. – Режим доступа: https://habrahabr.ru/post/229629/
(дата обращения: 31.03.17).
4. Github - ReactTraining/react-router: Declarative routing for React.
[Электронный ресурс]. – Режим доступа:
https://github.com/ReactTraining/react-router/ (дата обращения: 31.03.17).
5. Введение в D3 [Электронный ресурс]. – Режим доступа
https://habrahabr.ru/company/datalaboratory/blog/217905/ (дата обращения:
31.03.17).
6. Введение в d3.js [Электронный ресурс]. – Режим доступа
http://frontender.info/vvedenie-v-djs/ (дата обращения: 31.03.17).
7. ECMAScript Next compatibility table. [Электронный ресурс]. – Режим
доступа: http://kangax.github.io/compat-table/esnext/ (дата обращения:
31.03.17).
8. ECMAScript 5 compatibility table. [Электронный ресурс]. – Режим
доступа: http://kangax.github.io/compat-table/es5/ (дата обращения:
31.03.17).
9. Babel · The compiler for writing next generation JavaScript. [Электронный
ресурс]. — Режим доступа: https://babeljs.io/ (дата обращения: 31.03.17).
10. webpack module bundler. [Электронный ресурс]. – Режим доступа:
https://webpack.github.io/ (дата обращения: 31.03.17).
11. Sass: Syntactically Awesome Style Sheets. [Электронный ресурс]. – Режим
доступа: http://sass-lang.com/ (дата обращения: 31.03.17).
54
12. Getting started | Less.js. [Электронный ресурс]. – Режим доступа:
http://lesscss.org/ (дата обращения: 31.03.17).
13. Expressive, dynamic, robust CSS – expressive, robust, feature-rich CSS
preprocessor. [Электронный ресурс]. – Режим доступа: http://stylus-
lang.com/ (дата обращения: 31.03.17).
14. An Introduction to CSS Pre-Processors: SASS, LESS and Stylus.
[Электронный ресурс]. – Режим доступа: https://htmlmag.com/article/an-
introduction-to-css-preprocessors-sass-less-stylus (дата обращения:
31.03.17).
15. GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by
Can I Use. [Электронный ресурс]. – Режим доступа:
https://github.com/postcss/autoprefixer (дата обращения: 31.03.17).
16. Set Up Your Build Tools | Web | Google Developers. [Электронный
ресурс]. – Режим доступа:
https://developers.google.com/web/tools/setup/setup-
buildtools#dont_trip_up_with_vendor_prefixes (дата обращения: 31.03.17).
17. npm [Электронный ресурс]. – Режим доступа: https://www.npmjs.com/
(дата обращения: 31.03.17).
18. GitHub - webpack-contrib/uglifyjs-webpack-plugin: UglifyJS plugin for
webpack. [Электронный ресурс]. – Режим доступа:
https://github.com/webpack-contrib/uglifyjs-webpack-plugin (дата
обращения: 31.03.17).
19. list of plugins. [Электронный ресурс]. – Режим доступа:
https://webpack.github.io/docs/list-of-plugins.html#dedupeplugin (дата
обращения: 31.03.17).
20. using loaders [Электронный ресурс]. – Режим доступа:
https://webpack.github.io/docs/using-loaders.html (дата обращения:
31.03.17).
55
21. Пример использования AWS: Kaplan. [Электронный ресурс]. – Режим
доступа: https://aws.amazon.com/ru/solutions/case-studies/kaplan/ (дата
обращения: 04.05.17)
22. Google Search. [Электронный ресурс]. – Режим доступа:
https://www.google.com (дата обращения: 04.05.17)
23. Что такое Long-Polling, WebSockets, SSE и Comet. [Электронный
ресурс]. – Режим доступа: https://myrusakov.ru/long-polling-websockets-
sse-and-comet.html (дата обращения: 04.05.17)
24. Постоянное соединение между браузером и сервером. [Электронный
ресурс]. – Режим доступа: https://www.insight-
it.ru/interactive/2012/postoyannoe-soedinenie-mezhdu-brauzerom-i-
serverom/ (дата обращения: 04.05.17)
25. Яндекс.Почта. [Электронный ресурс]. – Режим доступа:
https://mail.yandex.ru/ (дата обращения: 04.05.17)
26. А. Котов, Н. Красильников «Кластеризация данных». [Электронный
ресурс]. – Режим доступа: http://yury.name/internet/02ia-seminar-note.pdf
(дата обращения: 04.05.17)
27. WAMP - The Web Application Messaging Protocol. [Электронный ресурс].
– Режим доступа: http://wamp-proto.org/ (дата обращения: 04.05.17)
28. GitHub - WAMP in JavaScript for Browsers and NodeJS. [Электронный
ресурс]. – Режим доступа: https://github.com/crossbario/autobahn-js (дата
обращения: 04.05.17)
29. Hans Muller, Michael J. Flynn “Processor Architecture and Data Buffering”,
IEEE Transactions on computers, vol. 41, no.10, October 1992
30. ECMAScript 2015 Language Specification – ECMA-262 6th Edition.
[Электронный ресурс]. – Режим доступа: http://www.ecma-
international.org/ecma-262/6.0/ (дата обращения: 04.05.17)
56
31. What is FastPark? [Электронный ресурс]. – Режим доступа:
http://www.fastprk.com/our-solution/what-is-fastprk.html (дата обращения:
15.06.16).
32. FastPark. How does it work? [Электронный ресурс]. – Режим доступа:
http://www.fastprk.com/our-solution/how-does-it-work.html (дата
обращения: 15.06.16).
33. GEUTEBRÜCK Gmbh - Parking Lots / underground parking [Электронный
ресурс]. – Режим доступа: http://www.geutebrueck.com/en_EN/parking-
lots-underground-parking-29632.html (дата обращения: 15.06.16).
34. Cisco and Streetline Innovate for Smart Parking: Introducing Camera Based
Detection and an Integrated Streetline IOT Gateway with Cisco WiFi
[Электронный ресурс]. – Режим доступа:
http://www.streetline.com/blog/cisco-streetline-innovate-smart-parking-
introducing-camera-based-detection-integrated-streetline-iot-gateway-cisco-
wifi/ (дата обращения: 15.06.16).
35. Parking Guidance Systems from Park Assist [Электронный ресурс]. –
Режим доступа: http://www.parkassist.com/ (дата обращения: 15.06.16).
36. Git [Электронный ресурс]. – Режим доступа: https://git-scm.com/ (дата
обращения: 15.06.16).
37. Bitbucket [Электронный ресурс]. – Режим доступа: https://bitbucket.org/
(дата обращения: 15.05.17).
38. Node.js [Электронный ресурс]. – Режим доступа: https://nodejs.org/en/
(дата обращения: 15.05.17).
39. MongoDB for GIANT Ideas | MongoDB [Электронный ресурс]. – Режим
доступа: https://www.mongodb.com/ (дата обращения: 15.05.17).
40. Introduction to MongoDB – MongoDB Manual 3.4. [Электронный ресурс].
– Режим доступа: https://docs.mongodb.com/manual/introduction/ (дата
обращения: 15.05.17).
57
41. GitHub - reflux/refluxjs: A simple library for uni-directional dataflow
application architecture with React extensions inspired by Flux.
[Электронный ресурс]. – Режим доступа: https://github.com/reflux/refluxjs
(дата обращения: 15.05.17).
58
ПРИЛОЖЕНИЕ А
Содержание файла с зависимостями «package.json»
{
"name": "sp-web",
"version": "0.0.1",
"description": "Web application for reserving a parking space and
navigating to it",
"main": "/src/index.js",
"devDependencies": {},
"scripts": {
"build": "gulp --harmony build:release",
"start": "gulp --harmony webpack-dev-server",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Artem Rapoport",
"license": "ISC",
"repository": {
"type": "git",
"url": "git+https://[email protected]/ar-rapoport/sp-web.git"
},
"homepage": "https://bitbucket.org/ar-rapoport/sp-web#readme",
"dependencies": {
"autoprefixer": "6.3.6",
"axios": "0.12.0",
"babel": "6.5.2",
"babel-core": "6.10.4",
"babel-loader": "6.2.4",
"babel-plugin-transform-runtime": "6.4.3",
"babel-polyfill": "6.9.1",
"babel-preset-es2015": "6.9.0",
"babel-preset-react": "6.5.0",
"babel-preset-stage-0": "6.5.0",
"babel-register": "6.9.0",
"css-loader": "0.23.1",
"d3": "4.5.0",
"es6-promise": "3.0.2",
"extract-text-webpack-plugin": "1.0.1",
"gulp": "3.9.0",
"gulp-html-replace": "1.5.4",
"gulp-rimraf": "0.2.0",
"gulp-util": "3.0.7",
"json-loader": "0.5.4",
"jsx-loader": "0.13.2",
"loader-utils": "0.2.15",
"node-sass": "4.3.0",
"normalize.css": "3.0.3",
"postcss-loader": "0.9.1",
"react": "15.3.2",
"react-dom": "15.3.0",
"react-hot-loader": "1.3.0",
"react-router": "2.8.1",
"sass-loader": "4.1.1",
"style-loader": "0.13.1",
"webpack": "1.13.1",
"webpack-dev-server": "1.14.1"
}
}
59
ПРИЛОЖЕНИЕ Б
Пример кода функции HTTP-запроса на языке JavaScript
import axios from 'axios'; //библиотека для HTTP-запросов
import ClientStore from './ClientStore'; //хранилище WEB-клиента
/**
* Функция получения данных с сервера
* @function getInfoFromServer
* @return {void}
* */
function getInfoFromServer() {
axios.get('/api/info')
//Получили "положительный" ответ с сервера с данными внутри.
.then((response) => {
//Перезаписываем данные в хранилище WEB-клиента.
ClientStore.rewriteContent(response.data);
})
//Получили "отрицательный" ответ с сервера (ошибку).
.catch((response) => {
//Сообщаем пользователю об ошибке.
console.error('Error while receiving response = ', response.data);
});
}
60
ПРИЛОЖЕНИЕ В
Пример кода функции HTTP-поллинга на языке JavaScript
import axios from 'axios'; //библиотека для HTTP-запросов
import ClientStore from './ClientStore'; //хранилище WEB-клиента
let refreshId = null; //id таймера интервала поллинга
/**
* @function setInfoPolling
* @return {void}
* */
function setInfoPolling() {
refreshId = setInterval(
() => {
axios.get('/api/info')
//Получили "положительный" ответ с сервера с данными внутри.
.then((response) => {
//Перезаписываем данные в хранилище WEB-клиента.
ClientStore.rewriteContent(response.data);
})
//Получили "отрицательный" ответ с сервера (ошибку).
.catch((response) => {
//Сообщаем пользователю об ошибке.
console.error('Error while receiving response = ', response.data);
});
}, 1000
);
}
/**
* @function stopInfoPolling
* @return {void}
* */
function stopInfoPolling() {
if (refreshId) {
clearInterval(refreshId);
}
}
61
ПРИЛОЖЕНИЕ Г
Пример кода класса SessionHandler, который описывает обработку данных с
помощью WebSocket, на языке JavaScript
const DATA_URL = 'data';
const GET_SNAPSHOT_RPC = 'getSnapshot';
/**
* Специальный обработчик для абстракции от методов session AutobahnJS (WAMP)
* @class SessionHandler
* */
class SessionHandler {
/**
* Приватное поле для хранения объекта сессии
* @private
* */
_session = null;
/**
* @constructor
* @param {?Session} [session = null] - Сессия подключения клиента к серверу. По умолчанию
равна null
* */
constructor(session = null) {
this.setSession(session);
}
/**
* Метод для сохранения сессии в экземпляре SessionHandler-а
* @method setSession
* @param {?Session} [session = null] - Сессия подключения клиента к серверу. По умолчанию
равна null
* @return {void}
* */
setSession = (session = null) => {
this._session = session;
};
/**
* Функция-колбэк для выполнения действий с пришедшими по подписке сообщениями
* @see http://autobahn.ws/js/reference.html#subscribe документация Autobahn Subscribe
*
* @callback subscriptionCallbackFn
* @param {Array} args - массив с payload-ом события (сообщения)
* @param {Object} kwargs - объект с payload-ом события (сообщения)
* @param {Object} details - объект, который предоставляет метаданные события (сообщения)
* @return {void}
*/
/**
62
* Метод для подписки на сообщения об изменении данных
* @method subscribeToata
* @param {subscriptionCallbackFn} callbackFunction - действие, которое нужно выполнить при
получении сообщения
* @return {Promise}
* */
subscribeToata = (callbackFunction) => {
if (!this._session) {
console.error('Tried to subscribe to device data but no session was specified in
SessionHandler');
return null;
}
return this._session.subscribe(DATA_URL, callbackFunction);
};
/**
* Метод для получения snapshot-а (для холодного старта)
* @method getSnapshot
* @return {Promise}
* */
getSnapshot = () => {
if (!this._session) {
console.error('Tried get snapshot but no session was specified in SessionHandler');
return null;
}
return this._session.call(GET_SNAPSHOT_RPC);
};
}
63
ПРИЛОЖЕНИЕ Д
Пример кода класса UpdateHandler, который описывает обработку данных
при их обновлении с помощью буферизации, на языке JavaScript
import * as Constants from '../Constants'; //импортируем константы проекта
import * as eventsActions from 'actions/eventsActions'; //импортируем действия хранилища данных
class UpdateHandler {
/**
* id таймера с минимальным интервалом обновления
* */
_interval = null;
/**
* id таймера с максимальным интервалом обновления, при котором происходит форсированное
обновление
* */
_maxInterval = null;
/**
* @type {Boolean}
* Флаг форсированного обновления
* */
_forceApply = false;
/**
* Экземпляр класса главного хранилища данных
* */
_store = null;
/**
* @type {String}
* Режим обновления (может быть обновлением или накоплением)
* */
_mode = null;
/**
* @type {Object}
* Объект с накопленными обновлениями вида {events: Map}
* */
_accumulatedUpdates;
constructor(store) {
this._accumulatedUpdates = {events: new Map()}; /* инициализируем начальное значения
накопленных обновлений */
this._store = store; //записываем экземпляр класса главного хранилища данных в поле
класса
clearInterval(this._interval); //останавливаем обновления
this._startBatchedWaitingTime(); /* запускаем "внешний" таймер с интервалом
форсированного обновления */
}
/**
* @private
* @method _applyAccumulatedUpdatesIfNeeded
* Метод для применения данных, накопившихся во время интервала обновления.
* Если ни одно сообщение с данными не пришло с сервера, применять данные не нужно.
* */
_applyAccumulatedUpdatesIfNeeded = () => {
if (this._accumulatedUpdates.events.size > 0) {
clearTimeout(this._maxInterval); /* останавливаем "внешний" таймер с интервалом
форсированного обновления */
clearInterval(this._interval); //останавливаем "внутренний" таймер
this._startBatchedWaitingTime(); //запускаем "внешний" таймер с форсированным
обновлением
this.applyAccumulatedUpdates(); //применяем накопленные обновления данных к хранилищу
}
};
_startBatchedWaitingTime = () => {
this._forceApply = false; //выставляем флаг форсированного обновления в false
/* Через время, равное 1 с выставляет флаг форсированного обновления в true */
this._maxInterval = setTimeout(this._clearBatchedWaitingTime,
64
Constants.DEFAULT_UPDATE_TIMEOUT * 5);
};
_clearBatchedWaitingTime = () => {
this._forceApply = true;
};
bufferedUpdate(updates) {
clearInterval(this._interval); //останавливаем "внутренний" таймер
this._accumulateUpdates(updates); //добавляем обновления (накапливаем)
if (this._forceApply === true) { //если флаг форсированного обновления выставлен в true
this._applyAccumulatedUpdatesIfNeeded(); //обновляем данные
return; //выходим из данного метода
} //иначе
this._interval = setInterval(() => { /* создаем "внутренний" таймер, после которого
вызовется обновление данных */
this._applyAccumulatedUpdatesIfNeeded();
}, Constants.DEFAULT_UPDATE_TIMEOUT);
}
_accumulateUpdates(updates) {
if (!updates) { return; } //если обновлений нет, ничего делать не надо
updates.forEach(update => { /* иначе, для каждого обновления добавляем данные в собранные
в соотв. поле данные */
this._accumulatedUpdates.events =
UpdateHandler.appendEventMessage(this._accumulatedUpdates.events, update);
});
}
static appendEventMessage(initialValue, newMessage) {
/* Здесь, в зависимости от структуры сообщения, в буфер добавляются новые данные о
событиях сети */
return initialValue.set(newMessage.id, newMessage.val);
}
applyAccumulatedUpdates() {
const {events} = this._accumulatedUpdates;
this._store.dispatch(eventsActions.updateEvents(events)); //применяем данные к хранилищу
this._accumulatedUpdates.events = new Map(); /* инициализируем начальное значения
накопленных обновлений */
}
}
65
ПРИЛОЖЕНИЕ Е
UML-диаграмма последовательности системы «Умная парковка»
Рисунок Е.1 – UML-диаграмма последовательности
Опишем элементы, которые можно видеть на схеме
последовательности «Умной парковки» (в соответствии с рисунком Е.1).
Клиент запускает приложение. В приложении он узнает где свободное
место. Приложение постоянно обновляет свой список свободных мест.
66
Приложение показывает клиенту маршрут до ближайшего места.
Приложение синхронизируется с Bluetooth-метками и получает координаты,
затем обновляет маршрут, так происходит пока клиент не доехал до места.
Сервер постоянно опрашивает датчики и обновляет состояние мест.
67
ПРИЛОЖЕНИЕ Ж
UML-диаграмма активности системы «Умная парковка»
В системе тесно взаимосвязанными являются элементы для
графического представления информации пользователю, а именно:
клиентская часть веб-приложения парковки и система табло и индикаторов
на физической парковке. Поэтому в диаграмме показана активность именно
этих элементов (в соответствии с рисунком Ж.1). Активность со стороны веб-
сервера, видеокамер, видеосервера, базы данных опущена.
68
Рисунок Ж.1 – UML-диаграмма активности
69
ПРИЛОЖЕНИЕ И
UML-диаграмма компонентов системы «Умная парковка»
Схема состоит из двух основных компонентов:
Клиент
Умная парковка
Умная парковка состоит из:
Приложение
WEB-сервер
Табло
База данных
Bluetooth-метки
Сервер датчиков
Датчики
Интерфейсы, используемые в схеме (в соответствии с рисунком И.1):
SpotReservation – интерфейс умной парковки для резервирования места
и навигации к этому месту
GetSpotsAndPosition – интерфейс получения информации о месте
парковки и позиции клиента
GetCurrentData – интерфейс получения текущей информации из БД
SQLDriver – интерфейс взаимодействия с данными в БД
WriteData – интерфейс, содержащий методы записи информации в БД
UpdateClientPosition – интерфейс, содержащий методы обновления
позиции клиента
GetClientCoords – интерфейс, содержащий методы получения
координат клиента
UpdateSpotStatus – интерфейс, содержащий методы обновления статуса
парковочного места
70
GetSpotStatus – интерфейс, содержащий методы получения статуса
парковочного места
Рисунок И.1 – UML-диаграмма компонентов
71
ПРИЛОЖЕНИЕ К
WEB-API программного комплекса «Умная парковка»
/** * Created by arapoport on 14.09.15. */ var express = require('express'); var route_session = require('./server_modules/route-session'); var route_registration = require('./server_modules/route-registration'); var app = express(); var mongo = require('./server_modules/mongo'); var bodyParser = require('body-parser'); var cookieParser = require('cookie-parser'); var route_parking = require('./server_modules/route-parking'); var path = require('path'); // Initialize connection once mongo.connect().then(function () { app.listen(app.get('port'), function () { console.log('Express started on http://localhost:' + app.get('port') + '; press Ctrl-C to terminate.'); }); }) .catch(function (error) { console.error('error in connecting to MongoDB'); throw error; }); var port = process.env.PORT || 8080; app.set('port', port); app.use(bodyParser.json()); // for parsing application/json app.use(cookieParser("Look at my horse! My horse is amazing!")); app.use('/api/session', route_session); app.use('/api/registration', route_registration); app.use('/api/parking', route_parking); // Serve static assets app.use('/release', express.static(__dirname + '/release')); // Always return the main index.html, so react-router render the route in the client app.get('*', function (req, res) { res.sendFile(path.resolve(__dirname, '.', 'release', 'index.html')); }); // 404 catch-all handler (middleware) app.use(function (req, res, next) { res.status(404); }); // 500 error handler (middleware) app.use(function (err, req, res, next) { console.error(err.stack); res.status(500); });
72
ПРИЛОЖЕНИЕ Л
Программный код React-компонента ParkingSpot.react.js
import React from 'react';
import * as styles from './ParkingSpot.scss';
class ParkingSpot extends React.PureComponent {
static displayName = 'ParkingSpot';
constructor(props) {
super(props);
}
static propTypes = {
occupied: React.PropTypes.bool,
text: React.PropTypes.string,
noBorder: React.PropTypes.bool,
leftBorder: React.PropTypes.bool,
onSpotClick: React.PropTypes.func,
reserved: React.PropTypes.bool
};
render() {
const {occupied, text, noBorder, leftBorder, onSpotClick, reserved} =
this.props;
let currentClassName = styles.circleGreen;
if (occupied) {
currentClassName = styles.circleRed;
} else if (reserved) {
currentClassName = styles.circleGrey;
}
return (
<div
className={styles.container}
style={noBorder ? {border: 'none'} : {borderLeft: leftBorder
? '4px solid white' : 'none'}}
onClick={onSpotClick}
>
<div className={styles.innerContainer}>
<div className={styles.caption}>{text}</div>
<div
className={currentClassName}
style={occupied !== null ? null : {width: '0px',
height: '0px'}}
/>
</div>
</div>
);
}
}
export default ParkingSpot;
73
ПРИЛОЖЕНИЕ М
Программный код хранилища ParkingSpotsStore.js
import EventEmitter from 'events';
var CURRENT_USER_RESERVED_SPOT = 'CURRENT_USER_RESERVED_SPOT';
var CONTENT_CHANGE = 'CONTENT_CHANGE';
var RESERVED_SPOT_CHANGE = 'RESERVED_SPOT_CHANGE';
var ParkingSpotsStore = Object.assign({}, EventEmitter.prototype, {
content: null,
reservedSpotId: null,
wasSpotReserved: false,
emitCurrentUserSpotReserve: function () {
this.emit(CURRENT_USER_RESERVED_SPOT);
},
emitContentChange: function () {
this.emit(CONTENT_CHANGE);
},
isLoaded: function () {
return !!this.content;
},
/**
* @param {function} callback
*/
addCurrentUserSpotReserveListener: function (callback) {
this.on(CURRENT_USER_RESERVED_SPOT, callback);
},
/**
* @param {function} callback
*/
addContentChangeListener: function (callback) {
this.on(CONTENT_CHANGE, callback);
},
/**
* @param {function} callback
*/
addReserveListener: function (callback) {
this.on(RESERVED_SPOT_CHANGE, callback);
},
reserveParkingSpot: function (id) {
if (id !== null) {
if (!this.content || this.content.length <= 0) {
return;
}
this.reservedSpotId = +id;
this.emitReserve();
// this.emitContentChange();
}
},
emitReserve: function() {
this.emit(RESERVED_SPOT_CHANGE);
},
74
rewriteContent: function (data) {
if (data) {
let newReservedSpotId = null;
let didThisUserReserve = false;
for (let index = 0; index < data.length; ++index) {
if (data[index].currentUserReservation === true) {
newReservedSpotId = index;
didThisUserReserve = true;
break;
}
}
this.toggleSpotReservationBlocking(didThisUserReserve);
this.content = data;
if (newReservedSpotId !== this.reservedSpotId) {
this.reservedSpotId = newReservedSpotId;
this.emitReserve();
}
this.emitContentChange();
}
},
toggleSpotReservationBlocking: function (wasSpotReserved) {
if (wasSpotReserved !== this.wasSpotReserved) {
this.wasSpotReserved = wasSpotReserved;
this.emitCurrentUserSpotReserve();
}
},
/**
* @param {function} callback
*/
removeCurrentUserSpotReserveListener: function (callback) {
this.removeListener(CURRENT_USER_RESERVED_SPOT, callback);
},
/**
* @param {function} callback
*/
removeContentChangeListener: function (callback) {
this.removeListener(CONTENT_CHANGE, callback);
},
/**
* @param {function} callback
*/
removeReserveListener: function (callback) {
this.removeListener(RESERVED_SPOT_CHANGE, callback);
}
});
export default ParkingSpotsStore;