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

"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://[e-mail]/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
(