Разработка экскурсионно-развлекательной web-платформы KazanStreetGames (стр. 5 )

Значениями модели можно манипулировать в контроллере (controller), он является связующим звеном между представлением и моделью, так как через него происходит связывание данных (data-binding). В шаблоне должно быть указано название контроллера, через который будет производиться связывание, и название модуля, к которому относится этот контроллер. Для этого AngularJs использует собственные директивы ng-controller и ng-app соответственно.

Одним из примеров использования AngularJS в web-приложении KazanStreetGames является страница, на которой отображается форма добавления нового квеста. Она привязана к модулю newQuest в качестве шаблона, для данного модуля написан контроллер newQuestController. В контроллере определены следующие основные методы:

метод для проверки вводимого названия квеста на уникальность, он использует AJAX post запрос на сервер для того, чтобы сравнить введённое пользователем (автором квеста) название с хранящимися в базе данных. метод обрабатывающий нажатие левой кнопкой мыши на карту для определения координат места старта квеста. методы для проверки полноты заполнения формы, подчиняющиеся следующим правилам:
если флаг ограничения максимального количества игроков в положении On (включено), то необходимо чтобы поле, отвечающее за максимальное количество, должно быть обязательно заполнено. если подтверждение автором квеста обязательно для участия, то должна быть заполнена дата окончания подтверждения, после которой нельзя подавать заявки. если время проведения квеста ограничено, обязательно должны быть указаны даты начала и окончания проведения.

Контроллер получает введенную пользователем информацию за счёт того, что поле ввода (input) отмечено директивой ng-model, что делает его значение доступным в области видимости данного контроллера.

Фреймворк AngularJs имеет множество встроенных функций и директив позволяющих проводить валидацию данных. Например, для ограничения максимальной и минимальной длины названия квеста мной были использованы директивы ng-minlength и ng-maxlength. Сообщение об ошибке валидации отображается сразу же после выхода за пределы ограничений. Для этого в элемент сообщения добавляется директива ng-show с указанием название формы, модели и типа ошибки:

ng-show="form. title.$error. minlength && !form. title.$pristine"

В указанном выше примере сообщение отображается, если элемент формы title начали заполнять, но его длина меньше минимальной, как только длина привысит это значение, сообщение пропадёт.

Кнопки для отправки данных на сервер помечены директивой ng-disabled, которая позволяет заблокировать элемент пока не выполнится определённое условие. Для формы добавления квеста необходимые условия доступности кнопки отправки определяются благодаря указанным выше функциям контроллера для валидации заполнения полей и с помощью внутреннего свойства формы form.$invalid. Данное свойство заполняется AngularJS автоматически, если не выполняется какое-то из условий валидации, такое как проверка типа вводимых данных, обязательное заполнение поля, максимальная и минимальная длина текста и другие параметры.

       На рисунке 16 скриншот страницы добавления квеста, когда кнопка отправки данных на сервер заблокирована из-за ошибки валидации формы (подтверждение участия в квесте автором обязательно, но дата окончания регистрации не указана):

Рисунок 16

       На рисунке 17 скриншот страницы добавления квеста при валидном заполнении формы:

Рисунок 17

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

Основной директивой данного модуля является директива ya-map. Без указания дополнительных параметров эта директива открывает карту в месте расположения пользователя [18]. Это свойство применяется в приложении KazanStreetGames на страницах добавления нового квеста и нового уровня, так как авторам игры необходимо задать место старта всего квеста или конкретного уровня.

При отображении места старта квеста или уровня на странице прохождения или на странице с общей информацией используется свойство ya-center с указанием широты и долготы.

Для обработки щелчка левой кнопки мыши по карте необходимо переопределить свойство ya-event-click, где указать название метода из контроллера, который будет выполняться при щелчке. Для интерактивного определения координат места старта был написан метод mapClick. В этом методе происходит обращение к методу открытия балуна - элемента карты с отметкой и текстом. Туда передаются координаты нажатия и определяется шаблон теста который будет отображён.  Код модуля newQuest представлен в приложении B.

На рисунке 18 скриншон формы добавления квеста с указанием места старта:

Рисунок 18

Фреймворк AngularJS позволяет не только использовать готовые директивы, но и добавлять свои. Для приложения KazanStreetGames были написаны директивы has-role-admin и has-role-author для страницы администрирования. В зависимости от роли пользователя, указанного в строке, отображается можно ли ему дать права администратора \ автора или снять их. Кроме описания новых директив в контроллере userSortController добавлен фильтр для отображения булевых переменных в вид, приемлемый пользователю.

На рисунке 19 скриншот страницы администрирования с применением фильтрации и сортировки данных средствами AngularJS:

Рисунок 19

Дизайн пользовательского интерфейса создавался при помощи добавления собственных CSS стилей и CSS-фреймворка  Materialize. Данный фреймворк использует колоночное разделение страницы и даёт возможность указать какое количество колонок будет занимать элемент при различном разрешении экрана. Создатели фреймворка разделили экраны на 4 типа, они представлены в таблице 3. [19]

тип устройства	ширина экрана	обозначение в Materialize
мобильные	менее 600px	.s
планшеты	от 600 до 992px	.m
компьютеры	от 992 до 1200px	.l
широкоформатные компьютеры	более 1200px	.xl

Таблица 3

На рисунках 20, 21 и 22 представлены скриншоты главной страницы KazanStreetGames для разного разрешения экрана (компьютерное на рисунке 20, планшетное на рисунке 21 и телефонное на рисунке 22):

Рисунок 20

 

Рисунок 21                                                                Рисунок 22

ЗАКЛЮЧЕНИЕ.

В ходе выполнения выпускной квалификационной работы были достигнуты следующие результаты:

были изучены особенности предметной области - проведения квестов в реальности; проведён анализ web-приложений для проведения квестов в реальности в России;

был сформирован список требований к web-платформе для проведения квестов-экскурсий в Казани; был проведён анализ современных технологий для реализации web-платформы; была создана архитектура базы данных web-платформы; была создана архитектура серверной части web-платформы; была проработана клиентская часть web-платформы;

       Главной целью дипломной работы была разработка экскурсионно-развлекательной web-платформы KazanStreetGames, данная web-платформа была разработана в соответствии с заявленными требованиями и будет введена в эксплуатацию для проведения квестов-экскурсий летом 2017 года.

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

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ.

Казань бьет рекорды посещаемости / Новости туризма / Travel. ru [Электронный ресурс] // Travel. ru туризм и путешествия Режим доступа: URL: http://www. travel. ru/news/2016/02/10/252511.html, свободный (21.01.17) Казань посетили 2 млн туристов за 8 месяцев 2016 года / Все репортажи / inkazan. ru [Электронный ресурс] // inkazan. ru Режим доступа: URL: http://inkazan. ru/2016/10/03/kazan-posetili-2-mln-turistov-za-8-mesyatsev-2016-goda/, свободный (21.01.17) Программа «Развитие туризма в г. Казани на 2016 – 2018 годы»  / n. ru [Электронный ресурс] // Казань Официальный портал органов местного самоуправления города Режим доступа: URL: n. ru/old/upload/documents/34344.docx , свободный (21.01.17) Федеральный квест проект “Фобия” [Электронный ресурс] // quest-fobia. ru Режим доступа: URL: http://quest-fobia. ru/ , свободный (22.01.17) Погружение квесты в реальности [Электронный ресурс] // pogruzhenye. ru Режим доступа: URL: http://www. pogruzhenye. ru/, свободный (22.01.17) Street adventure Играй вживую! [Электронный ресурс] // streetadventure. ru Режим доступа: URL: http://streetadventure. ru/, свободный (22.01.17) Ходилки Бродилки самое время гулять! [Электронный ресурс] // hodilkibrodilki. ru Режим доступа: URL: http://hodilkibrodilki. ru/, свободный (22.01.17) Encounter [Электронный ресурс] // en. cx Режим доступа: URL: http://en. cx/, свободный (22.01.17) Серверные языки программирования / Тематические статьи / web-creator. ru [Электронный ресурс] // web-creator. ru  Режим доступа: URL: https://web-creator. ru/articles/server_side_languages, свободный (23.05.17) Топ-10 языков программирования в 2017 году по версии GitHub: JavaScript не на первых местах / Статьи для программистов / Рубрики / tproger [Электронный ресурс] // tproger. ru Режим доступа: URL: https://tproger. ru/articles/github-top-10-languages-2017/, свободный (23.05.17) TIOBE Index for May 2017 / TIOBE  [Электронный ресурс] // www. Режим доступа: URL: https://www. /tiobe-index//, свободный (23.05.17) Spring Framework [Электронный ресурс] // ru. wikipedia. org URL: https://ru. wikipedia. org/wiki/Spring_Framework, свободный (19.02.17) Google Web Toolkit [Электронный ресурс] ru. wikipedia. org Режим доступа: URL: https://ru. wikipedia. org/wiki/Google_Web_Toolkit, свободный (19.02.17) Apache Struts [Электронный ресурс] ru. wikipedia. org Режим доступа: URL: https://ru. wikipedia. org/wiki/Apache_Struts, свободный (19.02.17) Java / HotFrameworks [Электронный ресурс] Режим доступа: URL: https:///languages/java, свободный (23.05.17) Супер-героический фреймворк для веб-приложений! /  angular-doc. [Электронный ресурс] ANGULARJS by Google Режим доступа: URL: http://angular-doc. /, свободный (24.05.17) step_02 / Tutorial / Angular  [Электронный ресурс] ANGULAR RUS Режим доступа: URL: http://angular. ru/tutorial/step_02, свободный (28.05.17) angular-yandex-map / Туловский Алексей / [Электронный ресурс] github Режим доступа: URL: https:///tulov/angular-yandex-map, свободный  (28.05.17) Grid / materializecss  [Электронный ресурс] Materialize Режим доступа: URL: http:///grid. html, свободный  (28.05.17)

ПРИЛОЖЕНИЕ А.

Полная схема базы данных web-платформы: