Исследование и применение современных web-технологий для реализации программного комплекса «Умная парковка»

---

Министерство образования и науки Российской Федерации 
Федеральное государственное автономное образовательное учреждение
высшего образования 
"Уральский федеральный университет имени первого президента России Б.Н. Ельцина" 
Институт радиоэлектроники и информационных технологий - РТФ 
Департамент информационных технологий и автоматики 
УДК 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; программная архитектура, 
структура системы, которая отделяет бизнес-логику от 
остальной 
части 
программы, 
логически