выпускная работа бакалавра методика разработки веб-приложений с rest а

91 Pages·2017·3.08 MB·Russian

Министерство образования и науки Российской Федерации
федеральное государственное автономное образовательное учреждение
высшего образования
«Санкт-Петербургский политехнический университет Петра Великого»

Институт компьютерных наук и технологий
Кафедра «Компьютерные интеллектуальные технологии»
Проект допущен к защите
Директор ИКНТ, проф., д.т.н.
_________ Заборовский В.С.
«____» ____________ 2017 г.
ВЫПУСКНАЯ РАБОТА БАКАЛАВРА
МЕТОДИКА РАЗРАБОТКИ ВЕБ-ПРИЛОЖЕНИЙ С REST
АРХИТЕКТУРОЙ НА ПРИМЕРЕ ПОРТАЛА
ДИСТАНЦИОННОГО ОБУЧЕНИЯ
направление: 02.03.03 «Математическое обеспечение и администрирование
информационных систем»
(профиль «Информационные системы и базы данных»)
Выполнил:
Ковшов Андрей Михайлович
Подпись______________
Руководитель:
доцент, к.т.н., Черносвитов Александр
Вячеславович
Подпись______________

Санкт-Петербург 2017
СОДЕРЖАНИЕ

ВВЕДЕНИЕ .................................................................................................................. 4
1 АНАЛИЗ СУЩЕСТВУЮЩИХ ПОДХОДОВ К РАЗРАБОТКЕ ВЕБ ПОРТАЛОВ ..... 6
1.1. Архитектурные шаблоны проектирования ................................................ .6
1.1.1 Mode l-View-Control .............................................................................. 7
1.1.2 Model-View-Presenter .......................................................................... 13
1.1.3 Model-View-ViewModel ....................................................................... 15
1.2 Сервис-ориентированные архитектуры веб-приложений ........................ 18
1.2.1 Веб-служба SOAP… ............................................................................ 19
1.2.2 Веб-служба в стиле REST .................................................................. 22
2 ВЫБОР ТЕХНОЛОГИЙ ДЛЯ РАЗРАБОТКИ ПОРТАЛА ДО .......................... 25
2.1 Одностраничное приложение SPA .............................................................. 25
2.2 Технология для работы с базой данных Code-First ................................... 27
2.3 Платформа Web API ASP.NET ................................................................... 29
2.4 Фреймворк для создания веб-интерфейсов Bootstrap ............................... 31
2.5 JavaScript-фреймворк AngularJS .................................................................. 34
3 ОСОБЕННОСТИ ПРОГРАММНОЙ РЕАЛИЗАЦИИ ИСПОЛЬЗУЕМЫХ
АЛГОРИТМОВ ......................................................................................................... 38
3.1 Разработка базы данных с использованием EntityFramework ................ 39
3.1.1 Построение ER-модели базы данных портала ДО ........................... 39
3.1.2 Определение классов модели ............................................................. 41
3.1.3 Миграции модели данных в Code-First .............................................. 45
3.2 Разработка основной программно-аппаратной части портала ДО .......... 47
3.2.1 Структура каталогов серверной части портала ................................ 47
3.2.2 Работа с данными при помощи DbContext API ................................ 50
3.2.3 Создание веб-службы с использованием Web API .......................... 52
3.2.4 Реализация методов контроллера ....................................................... 53
3.3 Разработка пользовательского интерфейса ................................................ 55
3.3.1 Структура каталогов пользовательской части портала ................... 55
3.3.2 Организация навигации между различными частями портала с
помощью UI-Router ................................................................................................... 60
3.3.3 Сервис AngularJS для генерации AJAX-запросов ............................ 62
3.3.4 Валидации форм в AngularJS .............................................................. 63
4 АНАЛИЗ РЕЗУЛЬТАТОВ ..................................................................................... 66
ЗАКЛЮЧЕНИЕ ........................................................................................................ 71
СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ ................................................. 72
ПРИЛОЖЕНИЕ ........................................................................................................ 74
ВВЕДЕНИЕ

В современном мире информационные технологии развиваются на-
столько динамично, что уже невозможно представить своей жизни без гаджетов
– смартфонов, планшетов, ноутбуков и других мобильных устройств. Причём,
смартфоны давно уже перестали служить исключительно средством коммуни-
кации – чаще они представляют собой электронного помощника, способного
решать различные задачи.
В то же время прогрессивный человек вынужден регулярно расширять
свою базу знаний. Порталы дистанционного обучения помогают пользователю
получить новые знания удобным способом: в подходящее время, которое для
себя выбирает сам пользователь; и при помощи смартфона - устройства, кото-
рое сейчас есть в наличии у большинства членов современного общества. По-
этому разрабатывается множество различных веб-приложений для дистанцион-
ного обучения, и тема эта не теряет своей актуальности.
В данной работе рассматривается методика разработки веб-приложений
с REST архитектурой на примере портала дистанционного обучения.
Объектом исследования в данной дипломной работе является веб-
приложения. Предмет исследования – веб-приложение с REST архитектурой.
Автор выделяет основную цель данной дипломной работы: описать ме-
тодику разработки веб-приложения. Для этого необходимо выполнить постав-
ленные задачи:
- рассмотреть существующие технологии;
- провести их анализ и сравнение;
- проанализировать существующие подходы к разработке веб-порталов;
- выбрать технологию для разработки портала ДО;
- рассмотреть особенности программной реализации используемых ал-
горитмов;
- проанализировать и описать результаты.
4
Описание методики разработки веб-приложения позволит свести к ми-
нимуму время затраченное на разработку.
Для создания данной дипломной работы автор планирует проанализиро-
вать имеющуюся по данной тематике литературу, сравнить технологии, подхо-
ды и инструменты, также изучить и обобщить отечественную и зарубежную
практику. В частности провести:
- анализ существующих подходов к разработке CRUD-приложений;
- анализ технологий реализации веб-служб;
- анализ и выбор современных технологий разработки приложений с
REST-архитектурой;
- разработку методики создания одностраничного web-приложения с ис-
пользованием выбранных технологий;
- реализовать алгоритмы создания, чтения, обновления и удаления объ-
ектов на примере портала дистанционного обучения;
- произвести анализ и тестирование разработанной системы
Практическая значимость работы заключается в том, что в ней описана
технология, которая может быть использована на практике молодыми или
опытными программистами.

5
1 АНАЛИЗ СУЩЕСТВУЮЩИХ ПОДХОДОВ К РАЗРАБОТКЕ
ВЕБ-ПОРТАЛОВ

1.1 Архитектурные шаблоны проектирования

Для создания веб-порталов существует немало подходов и решений, хо-
рошо зарекомендовавших себя у разработчиков. Наибольшую популярность
имеют архитектурные шаблоны проектирования - архитектурная конструкция,
представляющая собой решение проблемы проектирования в рамках некоторо-
го часто возникающего контекста. Также для полного представления о проек-
тировании современных веб-приложений необходимо рассмотреть часто ис-
пользуемые программные системы со стандартизированными интерфейсами -
веб-службы.
Обычно шаблон не является законченным образцом, который может
быть прямо преобразован в код. Это лишь пример решения задачи, который
можно использовать в различных ситуациях.
«Низкоуровневые» шаблоны, учитывающие специфику конкретного
языка программирования, называются идиомами. Это хорошие решения проек-
тирования, характерные для конкретного языка или программной платформы, и
потому не универсальные.
На наивысшем уровне существуют архитектурные шаблоны, они охва-
тывают архитектуру всей программной системы.
Плюсы использования шаблонов:
- шаблон дает название проблеме и определяет способы решения многих
проблем за счет готового набора абстракций;
- многообразие вариантов решения;
- коммуникация с другими разработчиками;
- ускорение изучения чужого кода;
6
- правильное использование шаблонов помогает разработчикам опреде-
лить нужный вектор развития и уйти от многих проблем, которые могут воз-
никнуть в процессе разработки.
У применения шаблонов есть и минусы. Хотя изменение кода под из-
вестный шаблон и может упростить его понимание, но с применением шабло-
нов могут быть связаны две сложности:
- слепое следование некоторому выбранному шаблону может привести к
усложнению программы;
- у разработчика может возникнуть желание попробовать некоторый
шаблон в деле без особых оснований.
Примерами архитектурных шаблонов, являются:
- Model-View-Controller (MVC)
- Model-View-Presenter (MVP)
- Model-View-View Model (MVVM)
- Presentation-Abstraction-Control (PAC)
- View-Interactor-Presenter-Entity-Routing (VIPER)
Рассмотрим некоторые из них.

1.1.1 Model-View-Controller

Концепция MVC (Model-View-Controller: модель-вид-контроллер) часто
упоминается в веб-программировании в последние годы.
MVC — это не шаблон проекта, это конструкционный шаблон, который
описывает способ построения структуры приложения, сферы ответственности и
взаимодействие каждой из частей в данной структуре.
Впервые концепция MVC была описана в 1979 году, но для другого ок-
ружения, ведь тогда не существовало концепции веб-приложения. Шаблон, ко-
торый используется сегодня, является адаптацией оригинального шаблона к
веб-разработке.
7
Популярность данной структуры в веб-приложениях сложилась благо-
даря её включению в две среды разработки, которые стали очень популярными:
Struts и Ruby on Rails. Эти две среды разработки наметили пути развития для
сотен рабочих сред, созданных позже.
Идея, которая лежит в основе конструкционного шаблона MVC, очень
проста: нужно чётко разделять ответственность за различное функционирова-
ние в приложениях:
- Model - обработка данных и логика приложения
- View - представление данных пользователю в любом поддерживаемом
формате
- Controller - обработка запросов пользователя и вызов соответствующих
ресурсов
Приложение разделяется на три основных компонента, каждый из кото-
рых отвечает за различные задачи.
Контроллер (Controller) управляет запросами пользователя (получаемые
в виде запросов HTTP GET или POST, когда пользователь нажимает на элемен-
ты интерфейса для выполнения различных действий). Его основная функция —
вызывать и координировать действие необходимых ресурсов и объектов, нуж-
ных для выполнения действий, задаваемых пользователем. Обычно контроллер
вызывает соответствующую модель для задачи и выбирает подходящий вид.
Модель (Model) - это данные и правила, которые используются для ра-
боты с данными, которые представляют концепцию управления приложением.
В любом приложении вся структура моделируется как данные, которые обраба-
тываются определённым образом.
Модель даёт контроллеру представление данных, которые запросил
пользователь (сообщение, страницу книги, фотоальбом, и т. п.). Модель данных
будет одинаковой, вне зависимости от того, как мы хотим представлять их
пользователю. Поэтому мы выбираем любой доступный вид для отображения
данных.
8
Модель содержит наиболее важную часть логики приложения, которая
решает задачу, с которой имеет дело пользователь (форум, магазин, банк, и то-
му подобное). Контроллер содержит в основном организационную логику для
самого приложения.
Вид (View) обеспечивает различные способы представления данных, ко-
торые получены из модели. Он может быть шаблоном, который заполняется
данными. Может быть несколько различных видов, и контроллер выбирает, ка-
кой подходит наилучшим образом для текущей ситуации.
Веб-приложение обычно состоит из набора контроллеров, моделей и ви-
дов. Контроллер может быть устроен как основной, который получает все за-
просы и вызывает другие контроллеры для выполнения действий в зависимости
от ситуации.
Структурная схема шаблона MVC представлена на рисунке 1.1
MODEL
MODEL
updates manipu-tes
VIEW CONTROLLER
MODEL MODEL

S
U
EES
USER

Рисунок 1.1— Структурная схема архитектурного шаблона MVC

Самое очевидное преимущество от использования концепции MVC - это
чёткое разделение логики представления (интерфейса пользователя) и логики
приложения.
Поддержка различных типов пользователей, которые используют раз-
личные типы устройств, является общей проблемой. Предоставляемый интер-
фейс должен различаться, если запрос приходит с персонального компьютера
9
или с мобильного телефона. Модель возвращает одинаковые данные, единст-
венное различие заключается в том, что контроллер выбирает различные виды
для вывода данных[6].
Помимо изолирования видов от логики приложения, концепция MVC
существенно уменьшает сложность больших приложений. Код получается го-
раздо более структурированным, и, тем самым, облегчается поддержка, тести-
рование и повторное использование решений.
Недостатком MVC является тот факт, что начинающие программисты
(особенно в веб-программировании, где аббревиатура «MVC» стала популярна)
очень часто трактуют архитектурную модель MVC как пассивную модель
MVC: модель выступает исключительно совокупностью функций для доступа к
данным, а контроллер содержит бизнес-логику. В результате, код моделей по
факту является средством получения данных из СУБД, а контроллер – типич-
ным модулем, наполненным бизнес-логикой. В результате такого понимания,
MVC-разработчики стали писать код, который был охарактеризован как
"ТТУК" - "Толстые, тупые, уродливые контроллеры" (Fat Stupid Ugly
Controllers).
Среднестатистический ТТУК получал данные из БД (используя уровень
абстракции базы данных, делая вид, что это модель) или манипулировал, про-
верял, записывал, а также передавал данные в Вид[14].
Но в объектно-ориентированном программировании используется ак-
тивная модель MVC, где модель — это не только совокупность кода доступа к
данным и СУБД, но и вся бизнес-логика; также, модели могут инкапсулировать
в себе другие модели. Контроллеры же, — как элементы информационной сис-
темы, — ответственны лишь за:
- приём запроса от пользователя;
- анализ запроса;
- выбор следующего действия системы, соответственно результатам
анализа (например, передача запроса другим элементам системы);
10