Файл: Критерии выбора средств разработки WEB-приложений.pdf

модуля core есть собственный контроллер CoreCtrl, который отвечает за отслеживание авторизации пользователя. Если пользователь не авторизован, то его перенаправляют на страницу, где нужно ввести логин и

пароль. Чтобы понять авторизован ли пользователь, контроллер использует специальный сервис AuthSrv. О нём подробней будет рассказано ниже.

Для обеспечения маршрутизации в приложении используется модуль ngRoute. Чтобы подключить функциональность маршрутов, он был импортирован к модулю Core. С помощью метода config мы определяем маршруты приложения. Для конфигурации маршрутов используется объект $routeProvider.

Метод $routeProvider.when принимает два параметра: название маршрута и объект маршрута. Объект маршрута задает представление и обрабатывающий его контроллер с помощью параметров templateUrl и controller. Поэтому для представлений нам не надо определять контроллер с помощью директивы [18].

В листинге 2.2 представлен частичный код файла маршрутизации.

Листинг 2.2

(function() {

angular

.module('app.layout')

.config(['$routeProvider', routesConfig]);

/* @ngInject */

function routesConfig($routeProvider) { $routeProvider.

when('/', {

templateUrl: 'app/layout/main.html',

controller: '',

controllerAs: 'vm'

}).

when('/auth', {

templateUrl: 'app/layout/auth.html',

controller: 'AuthCtrl',

controllerAs: 'authCtrl'

}).

when('/tasks', {

templateUrl: 'app/layout/tasks.html',

controller: 'TasksCtrl',

controllerAs: 'tasksCtrl'

}).

otherwise({

redirectTo: '/'

});

}

})();

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

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

Перечислены самые основные запросы. Все они реализуются функцией serviceAction, которая является своеобразным конструктором. Ей на вход подаются следующие параметры: свойство объекта apiInterface, содержащее в себе структуру параметров для запроса, функцию, которая записывает полученные параметры в массив для дальнейшего использования, функция, отвечающая за окончательную сборку результата и callbackFunction для вызова в конце пользовательской функции (Листинг 2.3).

Листинг 2.3

function authUser(userPhone, userPass, callbackFunction) { serviceAction(

apiInterface.authUser,

function (pNames) {

//Сбор параметров

var params = {}; params

[pNames.userPhone] = userPhone; params[pNames.userPass] = userPass;

return params;

}, function (resultRequestObj) {

//Окончательная сборка результата

var resultObj = {

sessionID: resultRequestObj.sessionId,

success: resultRequestObj.success

};

return resultObj;

callbackFunction

);

}

Внутри функции actionService происходит окончательное формирование параметров и отправка их POST-запросом технологией AJAX, используя специальный сервис AngularJS – $http. Ответ запроса уже распарсенный возвращается в вызываемую функцию.

Auth – это модуль, отвечающий за авторизацию и регистрацию пользователей. В себе он содержит сервис authSrv, в котором хранятся все данные по пользователю. Также в нём реализованы функции отправки данных на сервер и запись в Cookie, чтобы пользователям не пришлось авторизовываться каждый раз, как заходят в приложение. В модуле есть два компонента: компонент авторизации и компонент регистрации. Они содержат свои представления и контроллеры, задающие начальные параметры для представлений и использующие функции из сервиса authSrv.

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

Tasks – модуль, отвечающий за всё, что относится к задачам. Он содержит 3 компонента:

список задач;
фильтр задач;
детальное представление задачи.
помощью компонента «Список задач» выводится список доступных заданий пользователю на основной странице оценки рекламных конструкций.
помощью компонента «Фильтр задач» есть возможность отсортировать список выводимых задач в компоненте «Список задач». Выбор значения на странице с фильтрами происходит с помощью библиотеки

AngularJS Multi-Select, которая позволяет создавать элементы вида select. Она имеют возможность поиска по элементам, выбора нескольких элементов списка и дополнительных кнопок вида «Выбрать все», «Очистить поле». На странице с фильтрами пользователи могут выбрать город, тип задания, тип конструкции и т.д.

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

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

Map – модуль, отвечающий за работу с картой. В себе он содержит один компонент с представлением, контроллером и директивой. В директиве прописан функционал работы с картой. Для её создания использовалась технология Google Maps Api. Она позволяет создать карту и, имея координаты любой точки, поставить маркеры с информацией о рекламной конструкции.

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

Bootstrap опирается на проект LESS, который является усовершенствованием языка CSS. Кроме того, Bootstrap включает базовые элементы CSS, такие как шрифты, формы, кнопки, таблицы, сетки, элементы навигации, предупреждения и многое другое. Основным назначением Bootstrap является оказание помощи Web-разработчикам в ускорении создания своих проектов. Сегодня Bootstrap — это самый популярный проект в хранилище программ GitHub. [19]

2.4. Серверная часть web-приложения для оценки эффективности рекламных конструкций

Серверная часть приложения сделана с использованием программного стека MEAN.

Стек технологий MEAN (MongoDB, Express, AngularJS, Node.js) – это современный соперник популярного стека LAMP для создания профессиональных веб-сайтов с помощью ПО с открытым исходным кодом. MEAN знаменует собой важный сдвиг в области архитектуры и образа мышления в сфере программирования – от реляционных баз данных к NoSQL и от схемы «модель-представление-контроллер» на стороне сервера к клиентским одностраничным приложениям [20] На рисунке 2.5 показан пример работы стека технологий MEAN в web-приложении.

Рисунок 2.5 - Схема работы стека технологий MEAN в связке

ExpressJS, или просто Express, каркас web-приложений для Node.js, реализованный как свободное и открытое программное обеспечение под лицензией MIT. Он спроектирован для создания веб-приложений и API. Является стандартным каркасом для Node.js. Автор фреймворка, TJ Holowaychuk, описывает его как созданный на основе написанного на языке Ruby каркаса Sinatra, подразумевая, что он минималистичен и включает большое число подключаемых плагинов [21].

Node.js – это автономная среда исполнения JavaScript. Практически это тот же механизм JavaScript (называемый V8), который работает в Google Chrome, за исключением того, что Node.js позволяет запускать JavaScript из командной строки, а не из браузера.

MongoDB – это документо-ориентированная СУБД. Данные в MongoDB хранятся в документах, которые объединяются в коллекции. Каждый документ представляет собой JSON-подобную структуру. Проведя аналогию с реляционными СУБД, можно сказать, что коллекциям соответствуют таблицы, а документам – строки в таблицах. Максимальный размер документа в MongoDB 2.x составляет 16 Мб. В отличие от РСУБД MongoDB не требует какого-либо описания схемы базы данных – она может постепенно меняться по мере развития приложения, что есть удобно.

AngularJS занимает в этом стеке технологий логику на клиенте.

Подробнее об это фреймворке было рассказано в начале этой главы.

Выводы по второй главе. Было реализовано web-приложение для оценки эффективности рекламных конструкций, которое позволяет проходить тесты на любом устройстве, имеющее web-браузер и подключение к интернету. В приложении реализован функционал нахождения рекламных конструкций по карте и просмотр уже пройденных тестов. Для работы с web-приложением пользователям сначала надо авторизоваться. Приложение было сделано с применением стека технологий MEAN. Клиентская часть была реализована на фреймворке AngularJS, а серверная на node.js с использованием фреймворка ExpressJS.

ГЛАВА 3. ТЕСТИРОВАНИЕ СОЗДАННОГО WEB-ПРИЛОЖЕНИЯ

3.1 Авторизация пользователя и главное меню

Тестирование приложения начинается с регистрации нового пользователя.

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

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

При нажатии на кнопку вызова меню открывается выпадающее слева меню, состоящее из вкладок: «Оценки рекламных конструкций» и «Результатов оценки рекламных конструкций».

Web-приложение корекктно отображается как в мобильной версии, так и на планшете. На рисунке 3.1. показан вид с планшета, а на рисунке 3.2. изображена версия с телефона.

Рисунок 3.1 - Окно главного меню на планшете

Рисунок 3.2 - Окно авторизации и окно главного меню

3.2 Оценка рекламных конструкций

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

Для отображения заданий по оценке РК на карте, нужно нажать на кнопку «отобразить карту» и пользователь увидит карту, на которой отображены метки.

Рисунок 3.3 - Окно оценки РК и окно отображения на карте

После отбора заданий согласно критериям поиска, пользователь видит карточки заданий по оценке РК, показанные на рисунке 3.4.

Рисунок 3.4 - Окно фильтра и окно просмотра задания

Тест содержит четыре типа вопросов:

Вопрос с фото.

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

Вопрос с таймером.

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