Схема сценария работы приложения и взаимодействия его компонент
Современные веб-приложения столь же сложны, как и любые другие программные приложения, и зачастую создаются несколькими людьми, объединяющими усилия для создания финального продукта. В таких условиях, чтобы повысить эффективность, естественно искать правильные способы разделения работы на участки с минимальными пересечениями между людьми и подсистемами. Внедрение компонентного подхода (в целом) — это то, как обычно решается такая задача. Любая компонентная система должна уменьшать общую сложность через предоставление изоляции, или естественных барьеров, скрывающих сложность одних систем от других. Хорошая изоляция также облегчает повторное использование и внедрение сервисных парадигм.
Изначально сложность веб-приложений в основном регулировалась со стороны сервера за счет разделения приложения на отдельные страницы, что требовало от пользователя соответствующим образом переходить в браузере с одной страницы на другую. С внедрением AJAX и связанных технологий разработчики смогли отказаться от потребности делать «переходы» между разными страницами веб-приложения. Для типичных сценариев вроде чтения почты или новостей ожидания пользователей изменились. К примеру, после логина в почту, вы можете «пользоваться почтовым приложением» с одного и того же адреса (URL) и находится на этой странице целый день (т.н. Single-PageApplications, SPA). Логика клиентских веб-приложений в таких ситуациях существенно усложняется, иногда она даже становится сложнее, чем на серверной стороне. Возможным разрешением данной сложности может являться дальнейшее разделение на компоненты и изоляция логики внутри одной страницы или документа.
|
|
|
Цель веб-компонентов в уменьшении сложности за счет изоляции связанных групп кода на HTML, CSS и JavaScript для выполнения общей функциональности в пределахконтекста одной страницы.
Так как веб-компоненты должны связать воедино HTML, CSS и JavaScript, необходимо учитывать существующие модели изоляции, присущие каждой из технологий, так как они влияют на сценарии и целостность веб-компонентов. Эти независимые модели изоляции включают:
-Изоляция стилей в CSS
-JavaScript и области видимости (замыкания)
-Изоляция глобального объекта
-Инкапсуляция
2. Описание средств разработки приложения .1 Язык программирования JavaScript
Весь JavaScript-код, который включен на страницу, имеет доступ к одному и тому же глобальному объекту. Как и другие языки программирования, JavaScript имеет области видимости, которые предоставляют некоторый уровень «приватности» для кода функции. Эти лексические области видимости используются для изоляции переменных и функций от остального глобального окружения. «Модульный шаблон» в JavaScript, популярный сегодня (использующий лексические области видимости), эволюционировал из потребности множества фреймворков на JavaScript «сосуществовать» в едином глобальном окружении без того, чтобы «наступать на пятки» друг другу (завися при этом от порядка загрузки).
|
|
|
Лексические области видимости в JavaScript – это однонаправленная изоляция границ: код внутри области может иметь доступ как ко внутреннему содержимому, так и к содержимому любой родительской области вплоть до глобальной, в то время как код снаружи области не имеет доступа к ее содержимому. Важным принципом является то, что однонаправленный способ изоляции отдает предпочтение коду внутри области, то есть защищает его. Код внутри лексической области имеет возможность защищать/прятать себя от остального окружения (или не делать этого).
Вклад, который лексические области видимости JavaScript вносят в реализацию веб-компонента, соответствует требованию иметь способ «закрытия» компонента так, что ее содержимое может быть разумно приватным.
Изоляция глобального объекта
Для некоторого кода может быть нежелательным, чтобы он имел общий доступ к глобальному окружению, как это было описано выше. К примеру, разработчик приложения может не доверять какому-то коду на JavaScript, хотя он и предоставляет существенную ценность. Характерный случай – реклама и рекламные фреймворки. Из соображений безопасности, необходимо, чтобы не доверенный код выполнялся в отдельном чистом скриптовом окружении (со своим собственным глобальным объектом). Чтобы достичь такого поведения сегодня (без включения в игру iframe элементов), разработчики могут использовать воркеры. Впрочем, недостаток этого решения в том, что воркеры не имеют доступа к элементам, то есть UI.
|
|
|
Есть ряд соображений, которые нужно учитывать при проектировании компонентов с поддержкой изоляции глобального объекта – особенно если изоляция будет подразумевать защищенные границы (подробнее ниже). На сегодня мы ожидаем, что изолированные компоненты не будут полностью доступны до тех пор, пока базовый набор спецификаций веб-компонентов не будет зафиксирован (то есть, это «отложено до следующей версии»). Однако, если мы потратим некоторое время на исследование того, как изолированные компоненты могут выглядеть, это может направить в правильное русло текущую работу. На некоторые предложения действительно стоит обратить внимание.
|
|
|
Изоляция глобального объекта – это важный нереализованный сценарий для веб-компонентов. А пока мы работаем над реализацией, можно, например, полагаться на самый успешный и распространенный на сегодня способ привнесения компонентности в веб: iframe-элемент.
3. Структура базы данных приложения
Реализация приложения
|JavaScript
Приложение разработано по концепции (MVSModel-View-Controller) что было применено в данной дипломной работе.
Контроллер (Controller)
Контроллеруправляет запросами пользователя (получаемые в виде запросов HTTP GET или POST, когда пользователь нажимает на элементы интерфейса для выполнения различных действий). Его основная функция — вызывать и координировать действие необходимых ресурсов и объектов, нужных для выполнения действий, задаваемых пользователем. Обычно контроллер вызывает соответствующую модель для задачи и выбирает подходящий вид.
В данной дипломной работе работу контроллера выполняет файл VBGameController.js в нем описаны действия и выполняется координация всеми функциями нашего web-приложения.
Для начала нужно провести инициализацию, чтобы можно было передавать пользовательские запросы далее в модель нашего приложения. После чего устанавливаем проверку событий в зависимости от режима приложения. Делается это при помощи метода setListeners которая реагирует на события которые вызывает пользователь приложения, такие как, клик мышкой, нажатие кнопки и прочее и передает данные в файл управления. Затем необходимо удалить ненужные обработчики, чтобы не допустить утечку памяти. Для этого метод удаляет на странице все что прослушивал с помощью функции setListeners. Далее необходимо добавить обработчики в конце игры на такие элементы как «репетиция», кнопку «далее» и последующее удаление этих обработчиков.(рис)
Рисунок 3.4.1 – Обработчики
Необходимо следить за состоянием вкладки и передавать эту информацию в главный файл модели для дальнейшей обработки , если пользователь нечаянно нажмет на закрытие вкладки или нажмет кнопку назад.
Для нормального функционирования необходимо решение которое будет кроссбраузерным для правильной передачи this. Для этого нужна обертка для обработчика. Рис()
Рисунок 3.4.2 – Обертка оброботчика
Модель (Model)
Модель - это данные и правила, которые используются для работы с данными, которые представляют концепцию управления приложением. В любом приложении вся структура моделируется как данные, которые обрабатываются определённым образом. Что такое пользователь для приложения — сообщение или книга? Только данные, которые должны быть обработаны в соответствии с правилами (дата не может указывать в будущее, e-mail должен быть в определённом формате, имя не может быть длиннее Х символов, и так далее).
Модель даёт контроллеру представление данных, которые запросил пользователь (сообщение, страницу книги, фотоальбом, и тому подобное). Модель данных будет одинаковой, вне зависимости от того, как мы хотим представлять их пользователю. Поэтому мы выбираем любой доступный вид для отображения данных.
Модель содержит наиболее важную часть логики нашего приложения, логики, которая решает задачу, с которой мы имеем дело (форум, магазин, банк, и тому подобное). Контроллер содержит в основном организационную логику для самого приложения (очень похоже на ведение домашнего хозяйства).
В данной дипломной работе файл модели называется VGame.js и это самый важный файл, который описывает логику игры. Можно назвать его движок игры. И как основной файл он начинается с объявления переменных. После происходит инициализация файлов контроллера и вида, после чего необходимо выяснить какая сложность необходима игроку, а затем и запустить ее. Рис()
Рисунок 3.5.1.1 – Выбор сложности игры
Для того, чтобы сменить игру требуется знать сложность на которой находится игрок в данный момент. Статус игры, идет она или закончилась. И после этого переключить игрока в режим репетиции и для этого есть модель self.changeLevel. Так же необходимо реализовать метод повторения не правильно выбранных ответов. Для этого предусмотрена модель запоминания слов, которые были отвечены неверно и добавление их в режим репетиции данного игрока. Затем реализован метод проверки ответов пользователя и заполнение прогрессбара в зависимости от поведения пользователя. Реализован данный метод конструкцией switch, она представляет собой способ сравнить выражения сразу с несколькими вариантами. Рис()
Рисунок 3.5.1.2 – Прогрессбар
Так как игрок может не знать всех слов, есть необходимость дать подсказку для этого реализован метод вызова giveMeHint, который проверяет текущее слово и показывает его пользователю. Для динамичности приложения и лучшего запоминания слов, они должны показываться каждый раз в другом порядке. И тут существует метод выбора рандомного слова из темы. Для этого используется метод Math.random() который возвращает значение с положительным знаком большим или равным нулю, но не менее еденицы, выбранный случайным образом или псевдослучайно с приблизительно равномерным распределением по выбранному диапазону.
Чтобы после окончания игры можно было извлечь неверно отвеченные слова, необходимо внести их в массив из которого позже они будут извлечены
Рисунок 3.5.1.3 – Добавление неверных ответовв массив
В данной дипломной работе для нормального функционирования и для обработки команд поступающих из контроллера с действиями пользователя над случайным закрытием вкладок и нажатием кнопки назад, необходима модель beforeQuit которая открывает окно с вопросом, действительно ли пользователь хочет закрыть окно или остаться на странице.
Вид (View)
Вид обеспечивает различные способы представления данных, которые получены из модели. Он может быть шаблоном, который заполняется данными. Может быть несколько различных видов, и контроллер выбирает, какой подходит наилучшим образом для текущей ситуации.
Веб приложение обычно состоит из набора контроллеров, моделей и видов. Контроллер может быть устроен как основной, который получает все запросы и вызывает другие контроллеры для выполнения действий в зависимости от ситуации.
За вид отвечает файл VBGameViewe.js. В этом файле находится все, что пользователь видит на экране, двигающиеся элементы, эффекты и прочее.
В первую очередь происходит инициализация данного файла для того, чтобы главная модель видела его и могла реагировать. Затем объявляются переменные, которые необходимы для управления визуальными элементами. Следом выводится окно с выбором сложности, затем первый уровень, второй и третий. Вывод таблицы с результатами в конце игры реализован в виде плоского окна с результатом.
Рисунок 3.5.2.1 – Вывод уровня сложности
В приложении выводится звук в виде произношения английских слов и за него отвечают два блока, которые выводят звук в виде файлов с расширением .ogg или .mp3 для старых версий браузера.
База данных
База данных MySQL — это самая популярная в мире база данных с открытым кодом. Благодаря своей проверенной производительности, надежности и простоте использования база данных MySQL наиболее часто используется для веб-приложений на таких ресурсах, как Facebook, Twitter, YouTube и все пять из пяти лучших веб-сайтов*. Кроме того, ее особенно часто выбирают в качестве встроенной базы данных, распространяемой тысячами поставщиков программного обеспечения и производителей оборудования.
В данном дипломном проекте используется именно база данных корпорации Oracle, ее выбор был обусловлен популярностью базы данных, а так же интеграцией её во все популярные серверы web-приложений. База данных используется для хранения английских слов, их перевода, транскрипции, и наименования темы. Рис()
Рисунок 3.6.1 – База данных
В роли субд используется phpMyAdmin так как это простой доступ и управление базой данных и поставляется вместе с openserver.
Руководство пользователя
Раздел «Учить слова»
После авторизации необходимо выбрать учить слова либо упражнения. Если был выбран пункт «Учить слова», то следует выбрать тему и приступить к изучению слов. После прохождения уровня со словами, можно выбрать один из следующих вариантов: Вернуться к темам и перейти к упражнениям. Если выбрать пункт «Вернуться к темам», то откроется меню приложения, в котором можно выбрать любую другую из невыученных тем.
Раздел «Упражнения»
Начальный уровень
В режиме дипломной работы «упражнение» в первую очередь, необходимо выбрать уровень сложности. Начальный уровень -это уровень рекомендуемый для первого прохождения. Продвинутый уровень – рекомендуемый для лучшего запоминания материала. При выборе «начального уровня» появляется статусбар, проговаривается слово на английском языке, есть 6 вариантов ответов на русском языке и две кнопки, одна - это повтор слова, и вторая это выбор подсказки. При верном ответе добавляется 3 очка, при каждом неверном ответе отнимается очко, при выборе подсказки снимается два очка. После окончания режима начального уровня и отображения статистики можно закончит урок, выбрать следующий урок или выполнить работу над ошибками.
Продвинутый уровень
Для перехода в продвинутый уровень необходимо перейти в упражнения, после чего выбрать тему для изучения и на следующей странице выбрать продвинутый уровень. После активации режима необходимо прослушать слово и вручную набрать его в окно предназначенное для ввода информации, если плохо слышно слово, то можно повторно прослушать слово, нажав на кнопку со значком звука. При необходимости можно также получить подсказку. При верном ответе в продвинутом режиме игрок получает 5 очков при неверном теряет 2 очка при выборе меню подсказка, также теряется 2 очка. Также можно для перехода к следующему слову воспользоваться клавиатурой и перейти с помощью сочетания клавиш ctrl+alt+right. После окончания урока и отображения статистики можно закончить урок, перейти к следующему уроку или выполнить работу над ошибками. Работа над ошибками или режим репетиции повторяет слова в которых вы допустили ошибку.
Дата добавления: 2018-06-27; просмотров: 640; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!