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

Самыми популярными языками программирования для написания серверной части являются PHP, Java, Ruby, Python и С# [9].

Существует несколько основных систем оценки популярности языка, наиболее используемые TIOBE и PYPL (PopularitY of Programming Languages) [10]. Индекс TIOBE считает упоминания о том или ином языке программирования на различных web-страницах, тогда как индекс PYPL подсчитывает количество запросов в поисковые системы для поиска учебных пособий по языку программирования.

Рейтинг языков программирования за 2017 год по версии GitHub (основанный на индексе PYPL) и TIOBE [11] представлен в Таблице 2:

GitHub	TIOBE
Java	Java
Python	C
PHP	C++
C#	Python
JavaScript	C#
C	Visual
C++	JavaScript
Objective-C	Assembly language
R	PHP

Таблица 2

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

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

Основными известными web-фреймворками для Java являются:

Spring Framework [12] - фреймворк, имеющий открытый исходный код, используется с 2002 года, последняя версия 4.3.4, готовится к выходу Spring 5. В его основе используется шаблон проектирования “Инверсия управления” (Inversion of Control, IoC). GWT (Google web Toolkit) [13] - особенностью GWT является преобразование Java кода в JavaScript, текущая версия 2.8.0, разрабатывается с 2006 года. Apache Struts [14] - в основе фреймворка лежит шаблон MVC, последняя версия 2.5

Несколько лет подряд наиболее популярным фреймворком остаётся Spring [15]. Проект HotFrameworks предоставляет рейтинг фреймворков для различных языков программирования с ноября 2014 года, в котором Spring занимает первое место среди java-фреймворков и входит в десятку лучших среди всех web-фреймворков. Статистика собирается при помощи Github, Stack Overflow и других ресурсов.

Рейтинг популярности восьмёрки лучших фреймворков на различных языках программирования представлен на рисунке 5 на нём Spring обозначен фиолетовым цветом, а рейтинг популярности java-фреймворков отображается на рисунке 6, фреймворк Spring на нём отмечен светло-голубой линией.

Рисунок 5

Рисунок 6

Spring был выбран мной в качестве основного каркаса для web-платформы KazanStreetGames. Учитывая сформированные ранее требования к приложению, необходимо использовать следующие компоненты Spring:

Spring MVC - используется для чёткого разделения между слоями модели, представления и контроллеров, что позволяет добиться хорошей поддерживаемости и лёгкой расширяемости программного продукта, также использование Spring MVC позволяет сократить написание повторяющегося кода. Spring Security - используется для реализации авторизации и аутентификации пользователей и для управления доступом к ресурсам web-приложения. Spring Data JPA - используется для упрощения взаимодействия серверной части web-приложения с базой данных.

       В качестве системы управления базами данных (СУБД) я выбрала MySQL. Этот продукт имеет открытый исходный код, является удобным в использовании, надёжным и бесплатным для программ с также открытым исходным кодом, что немало важно, так как приложение KazanStreetGames должно быть доступно для широкого круга пользователей, имеющих разный социальный статус, а значит затраты на содержание серверов должны быть минимальными.

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

       Для представления данных в web-приложении KazanStreetGames используется технология JSP (JavaServer Pages). Данная технология позволяет встраивать динамические компоненты в статическое содержимое web-страницы.

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

Для решения этих задач мной был выбран язык JavaScript. Существует большое количество фреймворков на JavaScript, позволяющих добавлять интерактивность и динамичность для сайтов исходя из поставленных перед разработчиком требований. Использование фреймворков ускоряет процесс разработки, уменьшает количество однотипного кода и улучшает качество готового продукта.

В web-приложении KazanStreetGames был использован  JavaScript фреймворк - AngularJS [16]. Данный фреймворк обладает богатым набором функций, в который входят:

автоматическое обновление вида при изменении данных в модели добавление собственных контроллеров для управления DOM-элементам богатая библиотека готовых директив и методов для валидации форм готовое решение для подключения к yandex map API и другим известным API

Основным сценарием использования KazanStreetGames является выбор и прохождение квестов по городу, что означает, что большинство пользователей будут заходить на сайт с телефона или планшета, а значит очень важно сделать экскурсионно-развлекательную web-платформу адаптивной для различных размеров экранов устройств. Для достижения этой цели мной был подключен CSS-фреймворк Materialize. Он позволяет оформить приложение в стиле материального дизайна, которому придерживаются сейчас разработчики наиболее популярных и успешных проектов, таких как Google или Microsoft.

Web-приложение KazanStreetGames является достаточно большим проектом, который должен проходить этапы компиляции, запуска unit-тестов, упаковки в формат, необходимый для сервера приложений, загрузки на сервер. Также необходима работа по разрешению конфликтов в версиях сторонних библиотек и возможность быстрого добавления новых зависимостей. Все эти задачи были автоматизированы при использовании сборщика проектов Maven.

При разработки была использована система контроля версий Git и многофункциональная среда разработки Intellij Idea от компании JetBrains.

Архитектура web-приложения.

Высокоуровневая архитектура.

В основе web-приложения KazanStreetGames лежит фреймворк Spring MVC, построенный на шаблоне проектирования MVC - Model View Controller.

Серверная часть приложения состоит из следующих элементов:

model - модуль для представления данных, содержащий классы-сущности, являющиеся отображением таблиц из базы данных. DAO - модуль взаимодействия с базой данных, содержащий методы, которые будут использоваться в приложении для создания CRUD запросов (Create - создание новых строк в таблицах, Read - чтение информации из таблиц, Update - редактирование данных в строках таблиц, Delete - удаление строк из таблиц) service - модуль для описания основной логики приложения и  валидации(проверки) данных exception - модуль для описания возможных внутренних ошибок controller - модуль обработки пользовательских web-запросов view - модуль отображения данных

       Взаимодействие вышеперечисленных модулей представлено на диаграмме на рисунке 7:

Рисунок 7

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

Структура базы данных.

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

Пользователи системы имеют определённый список ролей, от которых зависит их уровень доступа ресурсам и функциональным возможностям приложения. У каждого зарегистрированного пользователя есть возможность иметь от одной до трёх ролей. Исходя из данного требования для хранения данных о пользователях были созданы 2 таблицы: users и users_roles, они представлены на рисунке 8.

Рисунок 8

Таблица users хранит общую информацию о пользователе, такую как логин, пароль, e-mail, а также внутреннюю информацию, например, заблокирован пользователь на данный момент или нет, активирован ли аккаунт и так далее. Первичным ключом для данной таблицы является поле id.

Таблица users_roles хранит только два значения: идентификатор пользователя (id) и название роли. Поле с идентификатором пользователя ссылается на таблицу users при помощи внешнего ключа, при удалении или изменении данных о пользователе, удаление или изменение в таблице users_roles произойдёт автоматически.

Помимо пользователей основной сущностью системы является квест. Каждый квест состоит из неограниченного количества уровней, а уровень может содержать любое количество подсказок и ответов-ключей. Таким образом в базе данных фигурируют следующие основные таблицы: quests (квест), level (уровень), prompting (подсказка), keys (ключ, ответ). Связь между ними происходит по внешним ключам: у таблицы level есть ссылка на таблицу quests, у prompting и keys на таблицу level. Схема взаимодействия отражена на рисунке 9.