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

Сценарий выполнения 

Пользователь заходит в 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» 
{