Разработка интерактивного web приложения «Викторина»
Код работы:
K011796
Тема:
Разработка интерактивного web приложения «Викторина»
Содержание
СОДЕРЖАНИЕ
Глава 1.Введение в разработку web-приложений 2
1.1Введение 2
1.2 Предмет исследования 3
1.3Объект исследования 4
1.4Цель 5
1.5 Постановка задачи 5
1.6Заключение 6
Глава2. Теоретические основы разработкиweb-приложения 7
2.1Введение 7
2.2Жизненый цикл разработки web-приложения 8
2.3 Технологии для разработки архитектуры приложения 15
2.4Инструменты и технологии для Front-end разработки 18
2.5Инструменты и технологии для Back-end разработки 37
2.6Заключение 51
Глава3.Разработка интерактивного web-приложение “Викторина” 52
3.1Введение 52
3.2 Проектирование 52
3.3Разработка дизайна 60
3.4 Разработка программного кода 60
3.4.1 Front-endчасть(Index.html) 60
3.4.2 Back-endчасть(Server.js) 65
3.4.3 Базаданных 73
3.5 Отладка 76
3.6 Заключение 79
Заключение 80
Список литературы 81
ПриложениеA 83
Приложение B 87
Глава1. Введение в разработку web-приложений
1.1 Введение
Интернет в современном мире играет важную роль. Усовершенствование и широкое распространение интернета,web-приложения могут соперничать наравне с декстопными приложениями.
Недостатки, при использовании которые были раньше как: недоступность интернета, высокая стоимость интернет трафика и низкая скорость передачи, в развитых странах становятся не актуально. Главные преимущества интернета: не нужно устанавливать программу на компьютер, настройки и обновления могут происходить в реальном времени,отсутствие требование к ресурсам компьютера и к аппаратной платформе, возможность подключения к данным в любой точке мира, которые хранятся на серверах.
Веб-приложение — клиент-серверное приложение, в котором клиентом выступает браузер, а сервером — веб-сервер. Логика веб-приложения распределена между сервером и клиентом, хранение данных осуществляется, преимущественно, на сервере, обмен информацией происходит по сети. Одним из преимуществ такого подхода является тот факт, что клиенты не зависят от конкретной операционной системы пользователя, поэтому веб-приложения являются кроссплатформенными сервисами. Веб-приложения стали широко популярными в конце 1990-х — начале 2000-х годов.
Однако последнее время наблюдается тенденция стирания границ между клиентской и серверной частью. Сначала технологии и языки для клиентской и серверной частей были различно, код, обрабатываемый на стороне клиента, не был практически никак связан с сервером и наоборот. Так как приложения требовали все большей интерактивности, появились и активно развиваются технологии, позволяющие клиентской и серверной частям приложения обмениваться данными. С развитием технологий и языков программирования стали возможными так называемые SPA приложения, когда приложение работает только на одной странице. Появились так называемые изоморфные приложения, которые могут выполняться как на сервере, так и на клиенте. Требования, предъявляемые к приложениям, зависят от многих факторов, от качества интернет соединения, от потребностей пользователей, от устройств, с которых преимущественно осуществляется доступ к приложению, от технологий, которые используют браузеры.
Сегодня веб-приложения и технологии, позволяющие их создавать развиваются огромными темпами, если примерно 10 лет назад, все связанное с веб-разработкой можно было перечислить с легкостью, то сегодня различные библиотеки, фреймворки, сборщики и т.д. даже перечислить вряд ли удастся, и вряд ли сегодня найдется специалист, который хотя бы поверхностно сможет работать на со всеми этими инструментами.
Тем не менее, большое количество различных технологий появляется, как результат стремления упростить разработку приложений. Наиболее удачные решения, получают большую популярность и очень быстро и динамично развиваются.
1.2Предмет исследования
Предметом исследования является web-приложение. В отличие от desktop-приложений (обычных программ, устанавливаемых на компьютер), веб-приложения (программы-сервисы, Software as a Service, SaaS) более удобны как для пользователя, так и для обслуживающей организации, так как они обладают преимуществами:
Возможность работы многих пользователей. Каждый пользователь может иметь свой личный кабинет на сайте, при этом права пользователей могут различаться, а сами пользователи могут быть распределены по организациям (корпоративным учетным записям).
Автоматическое обновление. Веб-приложение всегда имеет одинаковую версию и одинаковый вид для всех пользователей - это удобно как для технической поддержки, так и для самих пользователей, которые всегда пользуются наиболее актуальной версией.
Доступ с любого устройства. Пользователь может пользоваться веб-сайтом с любого компьютера, ноутбука, планшета или даже сотового телефона, из любой точки мира.
Защита от потери данных. Данные пользователей хранятся в "облаке", целостность которого поддерживается хостинг-провайдерами, таким образом, данные защищены от случайной утери при повреждении жесткого диска компьютера.
Основные свойства web-приложения:масштабируемость,интеграция с другими системами, удобное развертывание и обслуживание система, интеграция с другими системами.
Эти свойства позволяют использовать web-приложения и веб-системы максимально эффективно. Благодаря масштабируемости можно без внесений кардинальных изменений расширять web-системы, с ростом пользователей, добавлять в нее новые функции. Благодаря развертыванию процесс перехода на работу тем или иным web-приложением занимает минимум времени.
1.3Объект исследования
Объектом исследованиям является игровые web-приложения. Сегодня многие не хотят устанавливать какие-нибудь простые игровые приложения на компьютер. Пользователь хочет сразу запустить браузер и начать играть. Также пользователь лишний раз не хочет заполнять свой жесткий диск лишними данными. Сегодня существуют много онлайн сервисов, где можно сразу начать играть.
Возьмем для примера статистику посещения приложения agar.io
Как видим на рис.1, посещаемость за месяц довольно высока. Поэтому разработка игровогоweb-приложения актуально в наши дни.
Рис.1 Статистика посещаемости agar.io
1.4Цель
Разработка интерактивного web-приложения с многопользовательским режимом «Викторина».
1.5 Постановка задачи
Задачей данной работы является разработка интерактивного web приложения «Викторина» - это приложение позволяет пользователям играть и вместе угадывать на вопросы на разные темы.
Основными задачами являются: возможность добавления вопросов, автоматическая обработка ответов, вывод,многопользовательский режим и сохранение результатов викторины. Ценность системы определяется тем, что создаваемая под конкретные задачи система максимально точно и эффективно решать обозначенный круг
Определить методологию разработки веб-проекта
Выбрать языки программирования и технологии проектирования
Изучить дополнительные библиотеки для разработки
Спроектировать и разработать веб-приложение «Викторина»
Обосновать необходимость разработки
1.7 Заключение
В данной главе было рассмотрено, что представляет собойweb-приложение,насколько их часто используют в современном мире. Также были разобраны объект исследования и предмет исследования. Была также сформулирована цель и поставлены задачи для данной выпускной квалификационной работы.
Глава2.Теоретические основы разработка интерактивного web-приложения
2.1 Введение
На данный момент есть большое множество разных методов для создания сайтов, которые отличаются друг от друга в зависимости от умений разработчика, от типа и назначения сайта. Помимо этого, методы можно классифицировать по другим критериям: по программному обеспечению, которое использует разработчик, по технологическим признакам, по архитектуре сервера. Важно отметить, что все вышеназванные особенности, прежде всего, относятся к разработчику.
Учитывая, что у методов есть существенные технологические различия, наиболее сильно с точки зрения подхода к разработке следует выделить 4 основных метода:
Разработка с нуля
Метод отличается тем, что он занимает больше времени в отличие от других и является наиболее трудным. Помимо этого, для него необходимо наличие знаний по крайней мере об одном языке веб-программирования (РНР, CSS, HTML), а также необходимо иметь опыт работы с базами данных, например, MySQL. Также создавать сайты можно и вручную, используя наиболее популярные программы, например, PhpStorm, Dreamweaver, WebStorm, WebSite X5, FrontPage.
При использовании этого метода затрачивается большее время на разработку, но при наличии определенных знаний у этого метода минимальный порог вхождения, то есть для начала разработки не требуется каких-то дополнительных специфических знаний, кроме того конечный продукт максимально приближен к решению именно тех задач, которые ставились разработчиком, дополнительные возможности системы могут быть только дополнительно разработаны. Метод имеет свои преимущества и недостатки, но для данной работы он является самым оптимальным.
Использование конструктора
Наиболее легкий метод разработки, так как для того, чтобы его использовать, разработчику не обязательно обладать профессиональными навыками веб-программирования. Но и результат можно получить достаточно скромный, который не будет отличаться качеством и оригинальностью. В настоящее время есть много различных инструментов для разработки, с использованием макетов и шаблонов. В качестве наиболее известных конструкторов можно назвать: Ucoz, Umi, Wix, Nethouse и другие.
Чаще всего, уже на начальном этапе использования конструктора разработчику становится очевидным, что он затратит намного больше времени на изучение этого конструктора, так как именно у этого метода есть некоторые серьезные недостатки. Во-первых, возможности и функции конструкторов такого типа сильно ограничены, которые не позволяют достичь более серьезных результатов, а во-вторых, наличие сложного кода, который не нужен для основного проекта, но необходим для функционирования конструктора.
Использование конструктора в текущей задачи недопустимо, так как разработка ведется внутри корпоративной сети и не должна быть видна за ее пределами.
Использование системы управления сайтом
Наиболее быстрый и популярный метод. В настоящее время очень часто разработчиками используются следующие системы – «движки»: Joomla, WordPress, Drupal, Django и другие. Они отличаются тем, что лучше всего подходят для создания блогов и сайтов. Что касается форумов, то для них больше подходят PunBB, phpbb, ExBB, SMF.
Помимо этого, используя «движки» (CMS) разработчик получает доступ к большому количеству разнообразных схем построения и шаблонов, что также позволяет упростить работу, на которую затрачивается намного меньше времени и сил.
Использование фреймворков
Веб-фреймворки – это группы готовых различных моделей и веб-компонентов, которые делают веб-программирование более простым и организованным. Использование веб-фреймворков, в значительной степени облегчит разработчику задачу, и упростить работу по созданию веб-приложений. Применение веб-фреймворков в создании приложений похоже на конструктор, используя метод можно значительно расширить функционал разрабатываемых приложений, а некоторые веб-фреймворки позволяют обеспечить функции безопасности.
Отличительной чертой веб-фреймворков является то, что все они используют паттерн проектирования – MVC (model-view-controller). Паттерн проектирования – это шаблон, который решает определенную проблему проектирования. Шаблон MVC считается общей составляющей программирования веб-приложений и делит его на три части. Первая часть отвечает за бизнес-процессы, то есть составляется модель. Вторая – управляет потоками данных – контроллер. А при помощи третьей части генерируется HTML-страница, то есть формируется ее внешний вид. Почти все веб-фреймворки принудительно используют шаблон MVC и организуют код таким образом, что изменения в контроллере, модели и виде не влияют на другие элементы. Впервые паттерн MVC появился в языке SmallTalk.
Фреймворк позволяет не изобретать велосипеды, иметь удобный доступ к базе, и гибкость. Есть различные типы фреймворков:
CSS-Фреймворки: Blueprint, 960 GridSystem, Bootstrap, YAML, Fluid
Baseline Grid System;
PHP-Фреймворки: CakePHP, CodeIgniter, Symfony, Zend Framework;
Java-Фреймворки: Spring Framework, JBoss Seam, Apache Wicket,
Apache Click, Apache Tapestry, Apache Struts;
Python-Фреймворки: Django, PyQT, Tornado, Flask, Bottle.
2.2 Жизненный цикл разработки Web-приложения
Жизненный цикл web-приложения состоит из стадий
Исследование предметной области и анализ
Систематизация и построение спецификаций
Разработка дизайна
Написание контента, текста для сайта
Кодирование, непосредственная разработка системы
Тестирование
Реклама и продвижение
Обслуживание, обновление, внесение изменений
Исследование предметной области и анализ
Как только клиент начнет обсуждать требования, разработчики осуществляют их предварительный анализ. Ставятся следующие вопросы: как web-сайт станет частью системы, какweb-приложение на основе web-технологий планируется внедрить в систему, присоединиться к существующей системе и как web-приложение сможет помочь данной ситуации. Подобные вопросы задаются на стадии формирования требований к будущей системе.
Одна из главных задач, к которой должны прийти заказчик с разработчиком — это целевая аудитория, для которой будет предназначаться разработанная система.
До разработки получаем: интервью с потенциальными клиентами системы; дискуссии и обсуждения; онлайн чаты; записанные телефонные беседы; модели сайта, примеры.
После разработки получаем: план работ; оценка стоимости; требования к команде разработчиков; требования к программному обеспечению и железу; поддерживающие документы; санкционированные разрешения, e.t.c.
Систематизация и построение спецификаций
Систематизация и построение спецификаций требуется для точного определения вида программного продукта, который будет получен на последних стадиях жизненного цикла разработки web-приложения. От описания и от подробной спецификации будет зависеть то, будет ли уже реализованная система удовлетворять всем требованиям заказчика.
Крупные проекты требуют глубоких исследований для удовлетворения технических и бизнес требований.
До разработки получаем: заключения от команды аналитиков
После разработки получаем: утвержденные требования и спецификации.
Разработка дизайна
После утверждения всех планов ведутся работы по созданию дизайна будущей системы, в Интернете дизайн программной системы является очень важной составляющей всего программного продукта.
На начальных этапах разработки дизайна строится прототип системы, на котором отображаются все модули будущей системы, их места расположения и пожелания по оформлению. Разрабатываются удобные интерфейсы системы, и после утверждения общей концепции дизайна эстафета передается дизайнерам.
Дизайнер, на основе высказанных предложений и пожеланий к системе, а так же прототипов и разработанных интерфейсов системы создает графическое отображение страниц сайта.
При разработке получаем: документации, спецификации, пожелания.
После разработки получаем: дизайн сайта, шаблон сайта, изображения и прототипы.
Написание контента, текста для сайта
В отличии от программного обеспечения, наличие текста («контента») на страницах сайта является обязательным, и тому существует множество причин, вытекающих и из поисковой оптимизации, и из дружественности интерфейса. Полноценному сайту недостаточно наличие 3-х полей ввода и 2-х кнопочек для реализации всей системы.
Профессиональные разработчики контента для сайта (копирайтеры, рейтеры) — люди, которые разрабатывают контент для страниц сайта с учетом всех специфик разрабатываемого сайта (тематика, аудитория, дизайн).
До разработкиполучаем: дизайн сайта, пожелания.
После разработкиполучаем: сайт с форматированным готовым, уникальным и полезным контентом.
Кодирование процессов, разработка сайта
Разработчики должны понимать получившийся дизайн и навигацию. Если система представляет динамичные данные, то разработчики должны использовать стандартизированные шаблоны для представления данных.
На данной стадии разрабатывается весь программный код, реализуется логика работы приложения, реализуется весь описанный в спецификации функционал по стандартам, так же описанным в спецификациях.
До разработкиполучаем: сайт с формами и требованиями в спецификациях, сверстанный дизайн.
После разработки получаем: спроектированную базу данных и сам web-сайт, документацию к разработанному продукту и наличие обязательных комментариев в коде.
Тестирование
Тестирование — процесс выявления ошибок и их описания, смысл данной стадии полностью совпадает с тестирование любого программного обеспечения.
Применяются как стандартные подходы к тестированию модульному, интеграционному, так и стресс тестирование и нагрузочное тестирование для выявления жизнеспособности системы при высоких нагрузках (большом числе посещений системы).
До разработкиполучаем: функционально готовый web-сайт и спецификации.
После разработки получаем: отчеты о выявленных ошибках.
Реклама и продвижение
Эта стадия применима только к web-приложение. Поскольку веб-приложения — это системы, которые предоставляют свой функционал без предварительной установки на персональный компьютере и для доступа к web-сайту и его использованию чаще всего достаточно знания его адреса, то для того, чтобы узнать его адрес и вообще получить адрес требуемого нами web-сайта пользователи чаще всего обращаются к поисковым системам.
Для продвижения сайта в поисковых системах в него вносятся специальные конструкции, которые облегчают поисковым системам идентификацию страниц сайта и выдачу их в результатах поиска. Применяемые технологии: метатеги, SEO оптимизация, продвижение по поисковикам, контекстная реклама.
Продвижение сайта в поисковиках, SEO оптимизация так же имеет жизненный цикл и является отдельным процессом от разработки веб-приложения, поскольку фактически прямым образом не имеет прямого влияния на функциональность и содержание сайта, а предоставляет лишь дополнительные сервисы по доступу к информации сайта через поисковые системы.
До разработки получаем: работающий интернет-сайт.
После разработки получаем: сайт, быстро доступный через поисковые системы и другие каналы привлечения прямой аудитории.
Обслуживание, обновление, внесение изменений
Веб-сайт, как живой организм. Он всегда должен соответствовать настоящему времени и к нему в этом плане гораздо больше требований чем к обычному программному обеспечению, Первоочередной задачей веб-приложения является предоставление актуальных на данный момент сервисов и услуг, информации. Поэтому эти виды данных требуют постоянного обновления и поддержания актуальности.
До разработки получаем: готовый сайт, контент, API, перечень функций и классов.
После разработки получаем: обновленные сервисы, информацию, подключение новых услуг и т.п.
2.3Технологии для разработки архитектуры приложения
Для создания архитектуры web-приложения обычно используется паттернMVC(Model-View-controller). Паттерн представляет собой схему разделения данных приложения, делит на три отдельных компонента:модель, вид, контролер.
Модель - это данные и правила, которые используются для работы с данными, которые представляют концепцию управления приложением. В любом приложении вся структура моделируется как данные, которые обрабатываются определённым образом. Что такое пользователь для приложения — сообщение или книга? Только данные, которые должны быть обработаны в соответствии с правилами (дата не может указывать в будущее, e-mail должен быть в определённом формате, имя не может быть длиннее Х символов, и так далее).
Модель даёт контроллеру представление данных, которые запросил пользователь (сообщение, страницу книги, фотоальбом, и тому подобное). Модель данных будет одинаковой, вне зависимости от того, как хотим представлять их пользователю. Поэтому выбираем любой доступный вид для отображения данных.
Модель содержит наиболее важную часть логики нашего приложения, логики, которая решает задачу, с которой имеем дело (форум, магазин, банк, и тому подобное). Контроллер содержит в основном организационную логику для самого приложения (очень похоже на ведение домашнего хозяйства).
Контроллер управляет запросами пользователя (получаемые в виде запросов HTTP GET или POST, когда пользователь нажимает на элементы интерфейса для выполнения различных действий). Его основная функция — вызывать и координировать действие необходимых ресурсов и объектов, нужных для выполнения действий, задаваемых пользователем. Обычно контроллер вызывает соответствующую модель для задачи и выбирает подходящий вид.
Вид обеспечивает различные способы представления данных, которые получены из модели. Он может быть шаблоном, который заполняется данными. Может быть несколько различных видов, и контроллер выбирает, какой подходит наилучшим образом для текущей ситуации.
Веб-приложение обычно состоит из набора контроллеров, моделей и видов. Контроллер может быть устроен как основной, который получает все запросы и вызывает другие контроллеры для выполнения действий в зависимости от ситуации.
Самое очевидное преимущество, которое получаем от использования концепции MVC — это чёткое разделение логики представления (интерфейса пользователя) и логики приложения.
Поддержка различных типов пользователей, которые используют различные типы устройств, является общей проблемой наших дней. Предоставляемый интерфейс должен различаться, если запрос приходит с персонального компьютера или с мобильного телефона. Модель возвращает одинаковые данные, единственное различие заключается в том, что контроллер выбирает различные виды для вывода данных.
Помимо изолирования видов от логики приложения, концепция MVC существенно уменьшает сложность больших приложений. Код получается гораздо более структурированным, и, тем самым, облегчается поддержка, тестирование и повторное использование решений.
Рис.2 Схема работы паттерна MVC
2.3Инструменты и технологиидля Front-endразработки
Front-endтермин в программной инженерии обозначающий разработку интерфейса для пользователя, с которым он будет взаимодействовать (Клиентская часть)
HTML – язык гипертекстовой разметки
HTML (в переводе с английского HyperText Markup Language – «язык гипертекстовой разметки») – является стандартным языком разметки документов в сети интернет. Почти все веб-страницы содержат разметку на языке HTML (или XHTML). Язык HTML браузеры интерпретируют и отображают в виде документа в привычной форме для человека.
В сети интернет для передачи браузеру от сервера HTML-страниц, используется протокол HTTP или HTTPS, с использованием сжатия или в виде простого текста.
С самого начала язык HTML создавался в качестве средства форматирования и структурирования документов, не используя привязку к средствам отображения. В совершенстве, HTML текст должен был воспроизводиться вне зависимости от технического оснащения (цветность и размер экрана, тип устройства, программы), на любом оборудовании и не иметь искажений. Но на данный момент язык HTML далеко отошел от его изначального предназначения. В качестве примера можно привести тег
, с его помощью создавались в документах таблицы, однако сейчас тег используют еще и для разметки всей страницы, и размещения на ней элементов. В течение времени, платформонезависимость языка HTML была вытеснена потребностями в графическом и мультимедийном оформлении.
Создателем языка HTML является Тим Бернес-Ли, который также является основоположником всемирной сети WWW. Т. Бернес-Ли и сейчас участвует в разработке новых стандартов в рамках консорциума W3C.
Язык HTML появился вначале 1990-х гг., которая считается его первой версией, и изначально использовался для научных целей, и с того момента стал набирать популярность.
До 90-х годов лишь узкий круг лиц проявлял интерес к интернету, но после появления первых браузеров, интерпретирующих незамысловатый HTML код в читабельный и удобный вид (веб-документ или веб-страницу), всемирная сеть начала проступать в массы. Такое изменение можно рассматривать как переход от текстовых операционных систем к графическим.
Очень интересен темп развития языка разметки HTML. По прошествии нескольких лет после создания первой версии языка, был создан консорциум W3C (World Wide Web Consortium) по инициативе создателя HTML Тима Бернерса-Ли. Данный консорциум был признан законодателем стандартов и должен был не допустить разногласий между разработчиками, которые могли бы привести к печальным последствиям.
На текущий момент развивается и активно используется новая версия языка гипертекстовой разметки HTML5. Главной задачей разработки новой версии является расширение поддержки мультимедиа функций и улучшения их работы, при этом сохраняя доступность и читаемость кода, как для людей, так и для веб-парсеров.
Очень долгий промежуток времени использовалась предыдущая версия языка (HTML 4.01, XHTML 1.0 и XHTML 1.1) и его стандарты. В реальности все веб-документы были составлены из смеси различных стандартов и особенностей спецификаций веб-браузеров и различных массовых твиков и приемов. Но с приходом HTML5 все изменилось, язык гипертекстовой разметки новой версии сочетал в себе единые стандарты разметки, объединяя нормы XHTML и HTML. HTML5 служит новой платформой для единого API сложных веб-приложений, а также рационализирует, расширяет и улучшает разметку веб-страниц.
В новой версии языка появилось огромное количество новых элементов и синтаксических особенностей. Например, появилась возможность использовать математические формулы и различные SVG элементы, также стали доступны новые элементы
