ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ АВТОНОМНОЕ

ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО

ОБРАЗОВАНИЯ «НАЦИОНАЛЬНЫЙ ИССЛЕДОВАТЕЛЬСКИЙ
УНИВЕРСИТЕТ «ВЫСШАЯ ШКОЛА ЭКОРНОМИКИ»

Московский институт электроники и математики им. А.Н.Тихонова

Немашкало Александр, группа БИВ197

Отчет по курсовой работе по теме «Отчет по курсовой работе по теме

«Разработка многофункционального сайта для столовой МИЭМ ВШЭ»

Курсовая работа по дисциплине «Алгоритмизация и программирование»

по направлению 09.03.01 Информатика и вычислительная техника
студента образовательной программы бакалавриата
«Информатика и вычислительная техника»

Студент Руководитель
/ А. В. Немашкало / ассист. Ю. А. Константинов
подпись И.О. Фамилия подпись должность, звание, И.О. Фамилия

Москва, 2020
 Содержание работы:

1. Задание..............................................................................................................3

1.1 Тема работы:...................................................................................................3

1.2 Требования к работе:.....................................................................................3

1.2.1 Требования к функциональным характеристикам...............................3
1.2.2. Требования к надежности:.....................................................................3
1.2.3 Требования к составу технических средств..........................................4
1.2.4 Требования к программной части:.........................................................4
1.2.5 Требования к входным данным.............................................................4
1.2.6 Требование к выходным данным...........................................................4

2. Аннотация.........................................................................................................6

3. Введение............................................................................................................7

4. Общий алгоритм программы...........................................................................9

6. Обзор аналогичных программ, используемых в разных проектах............10

7. Описание выбора используемых программ для решения поставленных

задач........................................................................................................................12

8. Описание программы.....................................................................................13

9. Тесты................................................................................................................21

10. Используемая литература и «источники вдохновения»..........................22

1. Задание

1.1 Тема работы:

Разработка многофункционального сайта для столовой МИЭМ ВШЭ.

1.2 Требования к работе:

1.2.1 Требования к функциональным характеристикам

Сайт должен быть реализован на примере интернет-магазина с

авторизацией, возможностью делать заказы и оставлять комментарии и
отзывы. Товары должны распределяться по каталогам, сортироваться по
рейтингу/цене и храниться вместе с комментариями, отзывами, заказами и
данными о пользователях и другими записями в базе данных. Каждый
комментарий после отправки должен показываться сразу без перезагрузки
страницы всем пользователям, находящимся на странице с комментариями.
Также на сайте должно присутствовать потоковое видео с камеры, которая
будет отображать очередь в прямом эфире. Сайт должен быть
кроссплатформенным и иметь административную часть, в которой можно
будет управлять сайтом (добавлять, удалять, редактировать, просматривать
содержимое: товары, категории, пользователей, комментарии и отзывы и. т.
д.).

1.2.2. Требования к надежности:

Для большей безопасности авторизация должна быть разработана на

основе JSON Web Token и Refresh Token. Регистрация проходить с
подтверждением Email по домену «@edu.hse.ru». Время сохранности данных
- до удаления базы данных. Данный сайт должен работать быстро и
стабильно, сразу же откликаться на запросы клиента.
 1.2.3 Требования к составу технических средств

Для посещения сайта требуется любое устройство с выходом в

интернет и доступом к браузеру, поддерживающему современный
JavaScripts.
Для разработки сайта потребуется виртуальная машина на удаленном
компьютере с минимальным количеством RAM 2 ГБ, достаточным
количеством дискового пространства 1-2 ГБ.

1.2.4 Требования к программной части:

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

операционной системой Ubuntu 18.04.4.
Для разработки API сайта - современный компилятор C# и .Net, а для
разработки клиентской части сайта - текстовый редактор

1.2.5 Требования к входным данным

На клиентской стороне сайта все входные данные проходят проверку.

Таким образом пользователь может вводить любые данные. В случае при
неправильно введенных данных пользователь обязательно получит ошибку
или пояснение.
1.2.6 Требование к выходным данным

При каждом запросе со стороны сервера, должен быть виден результат

запроса в модальном окне (успех, пояснение, ошибка, предупреждение или
какой-нибудь другой результат, который будет понятен пользователю).
 1.3 Этапы и сроки

График выполнения различных этапов подготовки МКР на образовательной

программе «Информатика и вычислительная техника» в 2019/2020 уч. г.
Дата в
№
Этап работы над МКР Срок выполнения 2019/2020
п/п
учебном году
1 Подготовка задания на МКР декабрь 14-31.12.2019

2 Согласование первого варианта МКР март 9-15.03.2020

Доработка МКР, подготовка итогового

варианта МКР (включая согласование
3 май 01-15.05.2020
итогового варианта и аннотации с
руководителем)
срок установлен в
Загрузка МКР в систему «Антиплагиат» (в
4 приказе об 15.05.2020
специальном модуле LMS)
утверждении тем МКР

Представление руководителем отзыва на

5 май 15.05.2020
МКР

Представление итогового варианта МКР (с

аннотацией, отзывом руководителя,
6 май 15.05.2020
справкой из системы «Антиплагиат») в
Департамент

7 Защита МКР* согласно графику 15-20.05.2020

 2. Аннотация
Объектом разработки курсовой работы является многофункциональный
сайт на примере интернет-магазина.
Цель курсовой работы – разработка многофункционального сайта по
технологии WEB API. Выбор данной цели подразумевает использование
технологии WEB API на примере ASP .NET Core Web API, который
предоставляет удобный интерфейс для разработки API сайта.
 3. Введение
В настоящее время Интернет становится все более развитой средой для
осуществления коммуникаций с потребителями. В тоже время значительным
является и то, что Интернет становится удобной и достаточно дешевой
«торговой площадкой». Все большее количество фирм и организаций
старается представить свою продукцию в on-line среде. При этом такое
представление не ограничивается только лишь созданием промо-сайтов и
размещением рекламных баннеров и статей в электронных журналах и на
информационных порталах. С развитием Интернет-среды развивается и само
предложение. Теперь люди могут не только получать интересующую их
информацию, но и совершать покупки.
Темой курсовой работы была выбрана «Разработка
многофункционально сайта для столовой МИЭМ ВШЭ», поскольку она
является актуальной на данный момент. Как правило, очереди в столовой
большие из-за того, что люди, чаще всего, приходя в столовую и занимая
очередь, даже не знают, чего они хотят. Данный сайт даст возможность
студентам просматривать меню столовой в удобном формате и делать заказы,
добавляя блюда в корзину, что поспособствует увеличению проходимости в
столовой за счет того, что студенты уже заранее будут знать, что им
заказывать. Наличие потокового видео даст студентам возможность
отслеживать очередь в прямом эфире, что, в свою очередь, поможет
правильно распределить время между парами.

Для достижения данных поставленных целей необходимо продумать и

выполнить следующие задачи:
1. Создание удобной WEB - системы, которая предоставит
пользователю полную информацию об интересующей продукции.
2. Создание удобной системы, которая дает возможность
пользователям заказать любую продукцию. Необходимо создать систему
регистрации пользователей с жесткими требованиями к внесению
контактной информации, по которой к нему можно будет обращаться.
3. Требуется создание административного модуля управления сайтом,
который позволит администратору получить неограниченный доступ к базе
данных и предоставит возможность удалять, редактировать и добавлять
записи.
4. Создание рабочего интерфейса, который должен быть ориентирован
на самого неопытного пользователя, и быть очень простым и удобным в
использовании.
5. Отработать логику предоставления рекомендованных товаров на
основе всех ранее сделанных заказов и рейтинга товаров.

Основная цель выбора курсовой работы под названием: «Разработка

многофункционального сайта для столовой МИЭМ ВШЭ» заключается не
только в актуальности данной темы, но и в желании изучить большинство
возможностей современного языка программирования – с# и его фреймворка
ASP .NET Core Web API, и научиться самостоятельно проектировать
большие приложения.
 4. Общий алгоритм программы
Сайт работает на основе API технологии (Application Programming Interface -
«Интерфейс Программирования Приложений» рис. 1).

Рис. 1 Архитектура приложения с API

Сайт разделен на серверную (Backend) и клиентскую составляющую

(Frontend). Backend реализован на ASP.NET Core c использованием MVC
Web API. Frontend написан же на Vue.js. В качестве базы данных была
выбрана Microsoft SQL Server.

Алгоритм программы выглядит следующим образом: пользователь заходит

на страницу сайта, на Frontend’е создается определенный запрос (например
GET запрос с получением товаров из корзины пользователя), после чего он
по HTTP протоколу отправляется на сервер (Backend) на определенный URL.
На сервере с помощью ASP .NET Core Web API принимается запрос и
вызывается определенная функция, которая работает с базой данных и
реализует всю логику (в нашем примере она достает записи из базы данных)
и в конце возвращает Response обратно на Frontend (в нашем случае Response
- это список записей или пустой список), где он обрабатывается функцией,
которая решает уже его дальнейшую судьбу (в нашем случае - отображает
список записей пользователю) .
6. Обзор аналогичных программ, используемых в разных
проектах
Аналогичных программ/сайтов, которые соответствуют критериям
интернет-магазина, огромное количество. Ниже приводится описание сайта
одной из самых больших российских компаний.
1.DNS
https://www.dns-shop.ru/- официальный сайт сети магазинов цифровой и
бытовой техники. Данный сайт имеет большой функционал. Веб сайт
прекрасно реализован и для всех видов устройств (телефонов, планшетов,
ноутбуков), имеет хорошо проработанный функционал с разделением всех
товаров на категории, и поэтому можно с легкостью за короткое время найти
нужный товар. Кроме этого, данный интернет-магазин предоставляет поиск
среди всех товаров, что явно упрощает процесс нахождения желаемого
товара. Также интернет-магазин предоставляет возможность оставлять
комментарии и отзывы под каждым товаром, что дает пользователю больше
информации при выборе продукта.

Проанализировав рынок аналогичных программ, был выявлен перечень

основных критериев, предъявляемых к подобному программному
обеспечению:

· стабильность работы

· наличие необходимого функционала

· сайт должен быть кроссплатформенным

· удобный интерфейс

Разработанное программное обеспечение соответствует всем выше

перечисленным критериям.
Подробный анализ представлен в Таблице 1

Анализ соответствия программы критериям

Критерий Соответствие программы критерию

Стабильность работы
Наличие необходимого
функционала
Сайт работает стабильно, однако могут
обнаружиться ошибки из-за того, что
интернет-магазин имеет большой
объем, и возможность допуска ошибки
выше обычного.
Программа выполняет все основные
функции, необходимые для
пользования и контролирования
интернет-магазина:

· просмотр всех товаров по категориям

· добавление товара в корзину

· наличие корзины

· оформление заказа

· возможность оставлять комментарии

и отзывы

· сортировка товаров по цене/рейтингу

Сайт должен быть Сайт поддерживается на ноутбуках, PC

кроссплатформенным и на мобильных устройствах.

Удобный интерфейс Сайт разделен на отдельные страницы,

которые в свою очередь разделены на
компоненты, каждый из которых
отвечает за свой функционал.

Таблица 1
7. Описание выбора используемых программ для решения
поставленных задач
Для разработки программного обеспечения была выбрана среда
разработки «Microsoft Visual Studio 2019 Community», для написания
Backend’а и «Visual Studio Code» для Frontend’а, поскольку данные среды
программирования распространяются бесплатно официальным издателем и
она корректна в работе на оборудовании производства компании «Microsoft».
Для написания API был выбран ASP.NET Core – новейший фреймворк
С# для кроссплатформенной веб разработки. ASP.NET Core был выбран не
случайно, так как данный фреймворк поддерживает все новые технологии, в
отличии от PHP, а также предоставляет удобную работу в написании кода за
счет типизированного языка С#, в отличии от Node.js.
Для написания клиентской части сайта был выбран Vue.js – JavaScript-
фреймворк с открытым исходным кодом для создания пользовательских
интерфейсов. Данный фреймворк был выбран за-за своей высокой
производительности и легкости в обучении по сравнению с React и Angular.
Также был использован сервис GitHub, который позволяет быстро
выгружать/загружать код на удаленный и локальный компьютер и безопасно
хранить код в репозитории.
Преимущества сервиса GitHub:
- возможность быстрой загрузки кода проекта;
- возможность быстрой выгрузки кода на компьютер в среду
разработки;
- сохранность проекта для дальнейшего улучшения / использования.
 8. Описание программы
Описание серверной составляющей
Приложение состоит из 3 проектов: Shop.API, Shop.Core и
Shop.Domain. (Рис.2)

Рис.2 Структура Backend’а

В Shop.Domain определены все основные сущности в виде классов, и

их Dto, Converter и Interface (рис. 3). Разберем структуру этого приложения
на основе класса Item. На рис.4 продемонстрирован класс Item, на рис.5 его
Dto (расширенный класс, который нужен для работы с клиентом). Для того
чтобы конвертировать класс Item.cs в ItemDto.cs и обратно реализован
ItemConverter.cs (рис. 6). Для того чтобы понимать, какие операции над
сущностями данного класса должны выполняться обязательно, определяют
для данной сущности интерфейс – IItemRepository.cs (рис.7)
Рис.3 Shop.Domain Рис.4 Item.cs

Рис.5 ItemDto.cs
 Рис.6 ItemConverter.cs Рис.7 IItemRepository.cs
В Shop.Сore находится вся логика API приложения (рис. 8). В каталоге
EF находится класс, который является контекстом базы данных (рис.9) (через
этот класс благодаря Entity Framework Core мы можем обращаться к базе
данных и взаимодействовать с ней).
В каталоге Hubs находится класс, который наследуется от Hub –
базового класса библиотеки SignalR. Благодаря этому классу и этой
библиотеке можно создать “туннель” между сервером и клиентом. Этот
“туннель” позволяет отправлять на клиент Response без Request’а. В нашем
сайте это используется для того, чтобы комментарии пользователей после
отправки появлялись сразу у всех без перезагрузки (на примере обычного
чата).
 Рис.8 Shop.Core Рис.9 ShopContext.cs

В каталоге Services прописываются все дополнительные сервисы:

отправка писем на email для подтверждения почты и для сброса пароля,
создание JWT и Refresh токенов. В каталоге Interfaces находятся интерфейсы
к этим сервисам, в которых указано: какие методы должны выполнять классы
обязательно. В каталоге Models находятся классы, сущности которых не
хранятся в базе данных. Данные классы используются для работы с клиентом
по HTTP. Папка Repositories представляет собой набор классов, которые
наследуются от соответствующих интерфейсов из Shop.Domain и реализуют
все указанные функции (для примера возьмем ItemRepository.cs рис.10).
Рис.10 ItemRepository.cs
 Shop.API является главным проектом (рис.11), здесь находится главный
файл (Program.cs), запускающий приложение. Кроме этого, данный проект
содержит все настройки (каталог Configurations и Startup.cs) а также
контроллеры (каталог Controllers), которые принимают запросы с Frontend по
определенным URL и вызывают нужные функции из соответствующего
интерфейса (например ItemController.cs рис.12).

Рис.11 Shop.API Рис.12 ItemController.cs

 Кроме всего этого в данном проекте есть представления (Views) а
также модели (каталог ViewModels), нужные для отображения данных в
представлениях. Эти классы связываются и работают по технологии MVC –
Model-View-Controller (рис.13). В отличие от Web API мы не передаем
данные на клиентскую часть для отрисовки, а создаем готовую HTML
страницу сразу на Backend’е с помощью Views. На нашем сайте мы
используем такой подход, чтобы создать страницы для сброса пароля и
подтверждения email’a.

Описание клиентской составляющей

Frontend имеет архитектуру, которую предоставляет Vue.js по умолчанию
(рис.14). Весь сайт разделен на одно файловые компоненты, в каждом их
которых содержится HTML, CSS и JS код (каталог components и views).
Начальной точкой является index.html, который после запуска подключает к
себе главный компонент – App.vue, из которого можно перейти в любой
компонент. При этом после запуска index.html начинает исполняться главный
JavaScript файл – main.js, который с помощью внедрения зависимостей
подключает все основные скрипты и библиотеки.
Рис.13 Frontend

На Frontend’e существует главное хранилище всех данных и основных

функций, которое предоставляется библиотекой Vuex. Находится это
хранилище в store/index.js, здесь прописаны все функции, которые
взаимодействуют с сервером с помощью запросов, реализуемых библиотекой
axios. Все компоненты имеют прямой доступ к этому хранилищу и активно с
ним взаимодействуют. Например, пользователь нажимает на кнопку в каком-
нибудь компоненте, в этом компоненте по нажатию вызывается функция,
которая обращается к хранилищу за соответствующим запросом. Вызывается
функция в store/index.js, которая отправляет запрос на сервер, после чего
принимает ответ (Response) и, как правило, после этого обновляет данные в
своем хранилище с помощью мутаций, на которые мгновенно реагируют
компоненты тем, что они заново себя перерисовывают.
9. Тесты
При переходе на сайт пользователь попадает сначала на начальную
страницу (см. приложение рис.1), из которой он может перейти на страницу
определенной категории (см. приложение рис.2) или на подробную страницу
конкретного товара (см. приложение рис.3) через поиск. Верхняя панель,
которая имеется на всех страницах сайта, позволяет удобно переходить на
страницу аутентификации (см. приложение рис.4), регистрации (см.
приложение рис.5) и корзины пользователя (см. приложение рис.6) (на
мобильном устройстве данная панель находится снизу).
Таким образом, из любой страницы можно перейти на любую другую
страницу сайта.
Логика сайта предусматривает работу с 4 типами пользователей:
- обычный посетитель;
- пользователь, который зарегистрировался, но не подтвердил свой Email;
- Пользователь, который успешно прошел регистрацию и подтвердил свой
Email;
-администратор.
Для обычных посетителей попытка сделать какой-либо запрос
приведет к ошибке, которая будет отображаться в модальном окне (см.
приложение рис.7). Пользователям, не совершавшим регистрацию,
разрешено только просматривать содержимое сайта.
Второй тип пользователей отличается от первого только тем, что ему
разрешено добавлять товары в свою корзину. При попытке сделать какой-
либо другой запрос, будет показываться модальное окно с ошибкой (см.
приложение рис.8).
Третьему типу пользователей предоставлен весь список функционала,
кроме изменения и добавления основного контента на сайте.
Администратору разрешено изменять, редактировать, удалять,
добавлять основное содержимое сайта через административный модуль. (см.
приложение рис.9,10).
10. Используемая литература и «источники вдохновения»

1. https://docs.microsoft.com/ru-ru/aspnet/core — официальная
документация для работы с Asp .Net Core от Microsoft (дата
обращения: 29.05.2020).
2. https://docs.microsoft.com/ru-ru/sql/?view=sql-server-ver15 —
официальная документация по Microsoft SQL Server (дата обращения:
29.05.2020).
3. https://vuejs.org/ — официальное руководство по работе с Vue.js (дата
обращения: 29.05.2020).
4. https://router.vuejs.org/ — руководство для работы с официальным
маршрутизатором Vue.js (дата обращения: 29.05.2020).
5. https://getbootstrap.com/docs/4.5/getting-started/introduction/ —
официальная документация для Bootstrap 4 (дата обращения:
29.05.2020).
6. Рик Андерсон (Rick Anderson), Кирк Ларкин (Kirk Larkin) и Майк
Уоссон (Mike Wasson) Создание веб-API c помощью. ASP.NET Core