Социальная подкаст-платформа

Размещено на http://www.allbest.ru/

7



• Оглавление
• подкаст интерфейс пользовательский платформа
• Введение
• 1. Аналитический обзор
• 1.1 Задачи, решаемые системой
• 1.2 Обзор аналогов
• 1.3 Категории пользователей
• 1.4 Бизнес-правила
• 2. Проектирование
• 2.1 Use-case диаграмма
• 2.2 Выбор архитектуры приложения
• 2.3 Выбор средств разработки
• 2.4 Проектирование базы данных
• 2.5 Проектирование пользовательского интерфейса
• 3. Реализация
• 3.1 Реализация серверной части
• 3.2 Реализация клиентской части
• 4. Тестирование
• 4.1 Модульное тестирование
• 4.2 Нагрузочное тестирование
• 4.3 Оценка удобства работы с пользовательским интерфейсом
• 5. Внедрение
• Заключение
• Список использованных источников
• Приложение


Введение

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

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



1. Аналитический обзор

1.1 Задачи, решаемые системой

Система является сайтом, который предоставляет своим пользователям как подкаст-функционал, так и возможность социального взаимодействия, коммуникации с другими пользователями.

К подкаст-функциям относятся:

- Удобный поиск;

- Система рейтингов;

- Система подписок.

К социальным же функциям относятся:

- Комментирование выпусков;

- Микроблог подкаста.

Разберем каждую из вышестоящих функций подробнее.

Удобный поиск. Пользователи, приходящие на сайт, должны иметь возможность быстро и точно найти интересующий их подкаст. Это может быть как уже знакомая им передача, так и передача, находящаяся в интересующем пользователя жанре. Для первого случая необходим поиск по наименованию, который найдет все подкасты, включающие в свое название искомый набор символов. Для второго случая может быть полезен поиск по жанрам, который сгруппирует подкасты по тематике обсуждаемых в них вопросов. Таким образом пользователь сможет найти то, что ему наиболее интересно.

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

Система подписок. Для того чтобы пользователи не пропускали новые выпуски интересующих их подкастов пригодится система, которая будет собирать такие выпуски в одном месте. Это позволит пользователю тратить гораздо меньше времени при поиске свежих передач.

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

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

1.2 Обзор аналогов

Перед проектированием системы были рассмотрены самые популярные сервисы по рассматриваемой тематике:

ITunes - онлайн-магазин компании Apple, распространяющий цифровой аудио, видео и игровой медиаконтент. [1] Среди разнообразия предлагаемого контента присутствует и раздел с подкастами с поиском, категориями и рейтингами. Из социальных функций присутствует только возможность оставить отзыв о самом подкасте. Комментирование отдельных выпусков не предусмотрено.

Vk.com - популярная социальная сеть, недавно получившая расширенные возможности относительно подкастов. Появилась возможность маркировать загружаемые в группу или публичную страницу аудиофайлы как подкасты. Таким образом все участники могут получать уведомления о новых выпусках. Тем не менее отдельного поиска по подкастам или их жанровой классификации нет. Из-за специфики сервиса социальное взаимодействие выполнено на высоком уровне, присутствуют и полнофункциональные комментарии, и возможность интеракции со слушателями.

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

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

Podster.fm - подкаст-платформа с наиболее широкими возможностями относительно подкастов. Здесь есть все необходимые функции для удобного поиска и прослушивания передач, такие как поиск по жанрам, рейтинги и подписки. Тем не менее социальные функции представлены только одноуровневыми текстовыми комментариями к выпускам.

На таблице 1.1 можно увидеть сравнение вышеописанных сервисов по всем наиболее важным критериям.

Таблица 1.1

Сравнение аналогов разрабатываемой платформы

Название аналога	Удобный поиск	Система рейтингов	Система подписок	Комментирование	Взаимодействие со слушателями
ITunes	+	+	+	+/-	-
Vk.com	+/-	-	+	+	+
Youtube	-	-	+	+	+
Podster.fm	+	+	+	+/-	-

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

1.3 Категории пользователей

Для разрабатываемой социальной подкаст-платформы возможны пользователи трех типов:

- Слушатели;

- Ведущие;

- Соведущие.

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

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

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

1.4 Бизнес-правила

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

1. Любой пользователь может зайти на страницу любого подкаста, послушать его выпуски или просмотреть его микроблог.

2. Любой пользователь может зайти на страницу статистики сайта.

3. Статистика сайта содержит в себе следующую информацию:

- Количество новых пользователей за месяц;

- Количество новых пользователей за текущий день;

- Количество загруженных выпусков за месяц;

- Количество загруженных выпусков за текущий день;

- Количество созданных подкастов за месяц;

- Количество созданных подкастов за текущий день.

4. Любой пользователь может зарегистрироваться на сайте, введя на странице регистрации необходимые данные.

5. Зарегистрированный пользователь может влиять на рейтинг подкастов.

6. Зарегистрированный пользователь может подписаться на любой подкаст, на который еще не подписан.

7. Зарегистрированный пользователь может отписаться от любого подкаста, на который подписан.

8. Зарегистрированный пользователь может зайти на страницу своих подписок.

9. Зарегистрированный пользователь может зайти на страницу своего профиля.

10. Зарегистрированный пользователь может изменить имя, данное при регистрации.

11. Зарегистрированный пользователь может создать свой подкаст, введя на странице создания подкаста необходимые данные.

12. Зарегистрированный пользователь, имеющий один или несколько подкастов, может посмотреть список созданных им подкастов.

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

14. Зарегистрированный пользователь, имеющий один или несколько подкастов, может удалить любой из этих подкастов.

15. Зарегистрированный пользователь, имеющий один или несколько подкастов, может изменить список соведущих любого из этих подкастов.

16. Зарегистрированный пользователь, являющийся соведущим одного или нескольких подкастов, может посмотреть список подкастов, в которых он принимает участие.

17. Каждый подкаст имеет свою страницу с информацией о подкасте, списком эпизодов и микроблогом подкаста.

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

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



2. Проектирование

2.1 Use-case диаграмма

На рисунке 2.1 представлена use-case диаграмма. В ней показаны три типа пользователей: слушатель, ведущий и соведущий.

Рисунок 2.1 Use-case диаграмма

Исходя из диаграммы, слушатель имеет доступ к таким функциям как:

- Просмотр статистики сайта;

- Создание подкаста;

- Просмотр страницы любого подкаста;

- Подписка на любой подкаст;

- Изменение рейтинга любого подкаста;

Ведущий - создатель подкаста, имеет доступ ко всем функциям слушателя, а также к таким функциям как:

- Добавление выпуска;

- Удаление подкаста;

- Изменение списка соведущих подкаста;

- Добавление/удаление сообщений в микроблог подкаста.

Соведущий имеет доступ ко всем функциям слушателя, а также к таким функциям как:

- Добавление выпуска;

- Добавление/удаление сообщений в микроблог подкаста.

Без авторизации на сайте разрешены такие функции как:

- Просмотр статистики сайта;

- Просмотр страницы любого подкаста.

2.2 Выбор архитектуры приложения

В качестве основы для приложения была выбрана классическая трёхуровневая архитектура, которая предполагает разделение приложения на три слоя: логику представления, бизнес-логику и логику доступа к данным. Схема такой архитектуры изображена на рисунке 2.2.

Рисунок 2.2 Схема трехуровневой архитектуры приложения

Рассмотрим каждый из этих слоев подробнее:

Логику представления содержит клиент - приложение, с которым непосредственно взаимодействует пользователь. Оно лишь предлагает интерфейс для взаимодействия с приложением и не содержит бизнес-логику. Тем не менее клиент может брать на себя незначительный функционал по обработке информации, например, проверку введенных данных или её обработку для более удобного вывода на экран.

Бизнес-логика находится на втором слое и отделена от первого. Здесь сосредоточена вся основная функциональная логика приложения. Этот слой взаимодействует как с клиентом, так и с третьим слоем - слоем доступа к данным.

Логика доступа к данным выделена в третий слой. Здесь по запросу бизнес-логики происходит формирование SQL-запросов и обращение к СУБД, после чего извлеченные данные передаются на второй слой.

По сравнению с другими трехуровневая архитектура имеет следующие достоинства:

- Масштабируемость. В приложениях, которые сильно нагружены, можно распределить нагрузку между несколькими серверами приложений;

- Конфигурируемость. Отделение уровней друг от друга позволяет быстро и простыми средствами перенастроить систему при возникновении сбоев или при плановом обслуживании на одном из уровней;

- Высокая безопасность. Клиент не обращается напрямую к данным, все запросы проходят через сервер приложений, благодаря чему появляется возможность проверить корректность этих запросов;

- Высокая надёжность. В момент отказа оборудования или при пиковых нагрузках можно добавить еще один сервер, который будет обрабатывать запросы клиента;

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

- Низкие требования к производительности и техническим характеристикам клиента, отсюда вытекает большая доступность конечному пользователю.

Тем не менее трехуровневая архитектура не лишена и своих недостатков, среди которых можно выделить:

- Более высокая сложность при создании приложений;

- Сложнее в разворачивании и администрировании;

- Высокие требования к производительности серверов приложений и сервера базы данных, а, значит, и высокая стоимость серверного оборудования;

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

2.3 Выбор средств разработки

Для реализации серверной части был выбран язык программирования Java. На сегодняшний момент язык Java является одним из самых распространенных и популярных языков программирования.

В серверной части были выбраны следующие технологии:

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

- Spring Boot - компонент Spring, помогающий легко создавать и запускать полноценные web-приложения, благодаря встроенным контейнерам, таким как, например, Tomcat или Jetty. [2] Именно за счет этого компонента возможна простая установка на любой сервер.

- Spring Security - компонент, предоставляющий механизмы построения систем аутентификации и авторизации, а также другие возможности обеспечения безопасности для приложений, созданных с помощью Spring. [3]

- Maven - инструмент для сборки Java проекта: компиляции, создания jar- или war-файла, создания дистрибутива программы, генерации документации и многого другого. Основная идея заключается в описании зависимостей и структуры проекта в файлах на языке POM.

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

- Spring MVC - компонент, обеспечивающий реализацию используемого в разработке паттерна Model-View-Controller;

- Hibernate - библиотека, которая предназначена для отображения объектов объектно-ориентированного языка в структуры реляционных баз данных.

Для реализации клиентской части был выбран React - JavaScript-фреймворк с открытым исходным кодом для разработки пользовательских интерфейсов. React значительно облегчает создание интерфейсов благодаря так называемому компонентному подходу. В React нет контроллеров, моделей, шаблонов и так далее - все есть компонент. Компонент - это строительная единица, из которой собирается весь интерфейс. [5]

Также при построении пользовательского интерфейса будет полезен Bootstrap 3 - свободный набор инструментов для создания сайтов и веб-приложений, включающий в себя HTML- и CSS-шаблоны оформления для всевозможных компонентов веб-интерфейса. [6]

Для контроля разработки был выбран Bitbucket - веб-сервис для хостинга проектов, основанный на системе контроля версий Git.



2.4 Проектирование базы данных

База данных состоит из 8 таблиц. Схема базы представлена на рисунке 2.3.

Рисунок 2.3 Схема базы данных приложения

Рассмотрим подробнее все таблицы базы данных:

Podcasts - таблица для хранения информации о подкастах.

Описание полей:

- id - уникальный идентификатор;

- authorId - id пользователя, который создал подкаст;

- name - название подкаста;

- description - описание подкаста;

- itunesLink - ссылка на ITunes подкаста;

- vkLink - ссылка на VK подкаста;

- twitterLink - ссылка на Twitter подкаста;

- facebookLink - ссылка на Facebook подкаста;

- episodeCount - счетчик эпизодов подкаста;

- subscribersCount - счетчик подписчиков подкаста;

- rating - счетчик рейтинга подкаста;

- genreId - id жанра, которому принадлежит подкаст;

- creationDate - дата создания подкаста.

Genres - таблица для хранения информации о жанрах подкастов.

Описание полей:

- id - уникальный идентификатор;

- name - название жанра.

Episodes - таблица для хранения информации о выпусках подкастов.

Описание полей:

- id - уникальный идентификатор выпуска;

- podcastId - id подкаста, которому принадлежит выпуск;

- description - описание выпуска;

- link - ссылка на аудиофайл выпуска;

- name - название выпуска;

- creationDate - дата создания выпуска.

Users - для хранения информации о пользователях.

Описание полей:

- id - уникальный идентификатор пользователя;

- username - логин пользователя для прохождения аутентификации при входе на сайт;

- password - пароль пользователя для прохождения аутентификации при входе на сайт;

- name - имя пользователя;

- email - электронный адрес пользователя;

- creationDate - дата регистрации пользователя.

Coauthors - таблица для хранения информации о соавторах.

Описание полей:

- id - уникальный идентификатор;

- podcastId - id подкаста, которому принадлежит соведущий;

- userId - идентифигатор пользователя.

Tweets - таблица для хранения сообщений в микроблогах.

Описание полей:

- id - уникальный идентификатор;

- podcastId - id подкаста, которому принадлежит сообщение;

- authorId - идентифигатор пользователя;

- authorUsername - логин автора сообщения;

- text - содержание сообщения;

- creationDate - дата создания сообщения.

Ratings - таблица для хранения записей об изменении рейтинга подкастов.

Описание полей:

- id - уникальный идентификатор;

- podcastId - id подкаста, которому изменили рейтинг;

- userId - идентифигатор пользователя, который изменил рейтинг;

- decision - решение пользователя. Может быть положительным или отрицательным.

Subscribes - таблица для хранения записей о подписках на подкасты.

Описание полей:

- id - уникальный идентификатор;

- podcastId - id подкаста, на который осуществлена подписка;

- userId - идентифигатор пользователя, который подписался на подкаст.

Связи, установленные в схеме:

Связь «один ко многим» установлена между таблицами:

- users и podcasts;

- users и coauthors;

- users sи subscribes;

- users и tweets;

- users и ratings;

- genres и podcasts;

- podcasts и episodes;

- podcasts и coauthors;

- podcasts и tweets;

- podcasts и ratings;

- podcasts и subscribes.

2.5 Проектирование пользовательского интерфейса

Пользовательский интерфейс - это набор программных и аппаратных средств, обеспечивающих взаимодействие пользователя с программой. Основу такого взаимодействия составляют диалоги. Каждый диалог состоит из отдельных процессов ввода/вывода, которые физически обеспечивают связь пользователя и программой. [7]

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

Основными страницами сайта будут главная страница и страница подкаста.

На рисунке 2.4 представлен макет главной страницы сайта, состоящий из блока поиска, находящегося слева и списка подкастов, находящегося по центру. От взаимодействий с блоком поиска должно меняться наполнение списка подкастов.



Рисунок 2.4 Макет главной страницы

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



Рисунок 2.5 Макет страницы подкаста

На обоих макетах присутствует шапка сайта - поле, содержащее меню сайта, а также кнопку авторизации.

При помощи вышеописанных страниц и будет осуществляться основное взаимодействие с пользователем.

3. Реализация

3.1 Реализация серверной части

3.1.1 Структура серверной части

Серверная часть приложения была написана на языке Java. Весомое значение имел фреймворк Spring, который позволил упростить и ускорить разработку. Во многом за счет него была настроена взаимосвязь с базой данных, а также обеспечена безопасность приложения.

Всю серверную часть можно условно разделить на три уровня: уровень сервисов, уровень доступа к данным и уровень сущностей. Рассмотрим каждый из них подробнее.

Уровень сущностей включает в себя описание всех объектов, с которыми взаимодействует сервер, например, пользователь, подкаст, выпуск и так далее. Полный список сущностей можно увидеть на рисунке 3.1.

Рисунок 3.1 Список сущностей

Каждая сущность состоит из определенных свойств, которые ей присущи. Пример можно увидеть на рисунке 3.2, где описаны свойства объекта выпуска подкаста.

Рисунок 3.2 Описание сущности выпуска подкаста

Уровень доступа к данным обеспечивает связь между сервисами и базой данных, в нем описываются те действия, которые можно совершить над объектом. На рисунке 3.3 показан пример класса доступа к данным выпусков подкастов, где можно увидеть такие действия, как нахождение списка выпусков конкретного подкаста или удаление всех выпусков подкаста.

Рисунок 3.3 Класс доступа к данным выпуска подкаста

Последний слой - слой сервисов. Именно к данному слою обращается клиентская часть в процессе работы приложения. Классы этого слоя обрабатывают все необходимые запросы от клиента, взаимодействуя с классами слоя доступа к данным. Общение сервера с клиентом строится через адреса запросов. В большинстве случаев запрос включает в себя некоторые параметры или целые объекты с необходимыми данными. Например, на рисунке 3.4 можно увидеть запрос на изменение рейтинга подкаста, вместе с которым подается объект, содержащий информацию о голосовавшем пользователе, изменяемом подкасте и решении пользователя.

Рисунок 3.4 Запрос на изменение рейтинга подкаста

Блок-схему алгоритма, который содержится в данной функции можно увидеть на рисунке 3.5.



Рисунок 3.5 Блок-схема алгоритма изменения рейтинга подкаста

Другим примером может послужить запрос на подписку пользователя на подкаст. В данном случае запрос содержит не объект, а два числовых параметра - идентификаторы пользователя, и подкаста. Данный запрос представлен на рисунке 3.7, а его блок-схему можно увидеть на рисунке 3.6.



Рисунок 3.6 Блок-схема алгоритма подписки на подкаст



Рисунок 3.7 Запрос подписки на подкаст

3.1.2 Безопасность приложения

Важной частью приложения является его безопасность. Основной инструмент, использующийся для обеспечения безопасности пользователей в данном приложении - Spring Security. Он предоставляет множество методов защиты, один из них - защита от CSRF-атак.

CSRF (Cross-Site Request Forgery, также XSRF) - атака, которая приводит к тому, что хакер может выполнить на неподготовленном сайте массу различных действий от имени других, зарегистрированных посетителей.

Эффективным и общепринятым на сегодня способом защиты от CSRF-атаки является токен. Под токеном имеется в виду случайный набор байт, который сервер передает клиенту при входе на сайт, а клиент отправляет его серверу при каком-либо запросе. Защита сводится к проверке токена, который сгенерировал сервер, и токена, который прислал пользователь.

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

1. Уникальный токен для каждой операции;

2. Действует единожды;

3. Имеет размер, устойчивый к подбору;

4. Сгенерирован криптографически стойким генератором псевдослучайных чисел;

5. Имеет ограниченное время жизни.

Именно при помощи токена настроено разграничение прав пользователей. В файле «SecurityConfig» указаны все действия, которые может совершить рядовой пользователь, такие как просмотр подкастов, регистрация, просмотр статистики сайта и так далее. Для определенных действий уже понадобится авторизация и, соответственно, токен, описанный выше. Примером таких действий могут послужить удаление подкаста или добавление нового выпуска.

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

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

3.2 Реализация клиентской части

3.2.1 Структура и инструменты клиентской части

Клиентская часть представляет из себя веб-интерфейс, написанный на языке JavaScript. Основной технологией, при помощи которой была осуществлена разработка, стал популярный фреймворк React. Суть этого фреймворка заключается в разбитии интерфейса на отдельные элементы - компоненты. Компоненты могут как описывать отдельный объект интерфейса, так и включать в себя другие компоненты. Таким образом, итоговая страница представляет из себя набор вложенных друг в друга компонентов. При этом хорошей практикой является разбитие интерфейса на как можно меньшие компоненты. Это позволяет повторно использовать их в нескольких местах без необходимости копирования уже написанного кода.

Не последнюю роль при разработке клиентской части сыграл менеджер пакетов npm, входящий в состав Node.js. Добавление новых модулей происходило путем внесения их названий и желаемых версий в файл «package.json», после чего специальной командой «npm install» выбранные модули подключались в проект. Благодаря npm были подключены такие модули как React, описанный выше, набор готовых HTML- и CSS-шаблонов Bootstrap, а также модуль для добавления функции комментирования Disqus. Рассмотрим и эти модули подробнее.

Модуль Bootstrap позволил уменьшить время разработки за счет внедрения в проект уже готовых базовых элементов интерфейса, таких как кнопки, поля ввода, панели, маркеры и так далее. А с помощью модуля Disqus была добавлена возможность комментирования выпусков. Этот инструмент имеет широкие возможности, такие как цитирование других комментариев, гибкое форматирование текста, добавление изображений, в том числе и gif-анимаций, вставка ссылок и тому подобное.

3.2.2 Особенности взаимодействия с серверной частью

Для взаимодействия клиента с сервером использовался текстовый формат обмена данными JSON, основанный на языке JavaScript. Благодаря нему данные как отправлялись на сервер, так и принимались от него. Данный формат приобрел свою популярность по причине того, что он легко воспринимается как человеком, так и компьютером.

JSON-текст представляет собой одну из двух структур:

1. Набор пар «ключ: значение». Ключом может быть только строка, значением - любая форма;

2. Упорядоченный набор значений. Во многих языках это реализовано как массив, вектор, список или последовательность.

В качестве значений в JSON могут быть использованы:

- Запись - неупорядоченное множество пар «ключ: значение», заключённое в фигурные скобки «{ }». Ключ описывается строкой, между ним и значением стоит двоеточие. Пары отделяются друг от друга запятыми;

- Массив - упорядоченное множество значений. Массив заключается в квадратные скобки «[ ]», значения разделяются запятыми;

- Число;

- Литералы true, false и null;

- Строка - упорядоченное множество из нуля или более символов юникода, заключённое в двойные кавычки. [8]

В качестве примера JSON-текста можно привести ответ сервера на запрос списка подкастов, изображенный на рисунке 3.5.

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

Так как загрузка данных идет постранично и постепенно подгружается, в ответе сервера помимо основной части можно заметить такие вспомогательные данные как текущая страница, размер страницы, флаги начальной и последней страницы и так далее. Эти данные необходимы для корректного поведения приложения при просмотре информации.



Рисунок 3.5 Пример ответа сервера

После получения необходимых данных с сервера они извлекаются и обрабатываются. Например, на рисунке 3.6 можно увидеть как список подкастов выводится на экран благодаря функции map, которая проходит по массиву с данными и поочередно, при помощи компонента «PodcastLine», отрисовывает каждый элемент массива. В данном случае именно компонент «PodcastLine» содержит HTML-разметку для показа элемента в окне браузера.



Рисунок 3.6 Отрисовка данных с сервера

3.2.3 Пользовательский интерфейс проекта

Пользовательский интерфейс приложения состоит из следующих страниц и форм:

- Главная страница сайта;

- Страница подкаста;

- Страница профиля пользователя;

- Страница статистики;

- Страница подписок.

- Форма регистрации;

- Форма входа;

- Форма создания подкаста;

- Форма добавления выпуска;

- Форма редактирования соведущих подкаста.

Главная страница показана на рисунке 3.7. Страница состоит из блока поиска, размещенного слева, и списка подкастов, размещенного посередине. На данной странице можно найти подкаст по имени, жанру, или отсортировать подкасты по рейтингу.



Рисунок 3.7 Главная страница сайта

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

Рисунок 3.8 Страница подкаста с выпусками



Рисунок 3.9 Страница подкаста с микроблогом

Важной частью приложения является возможность обсуждения выпусков. Поэтому под каждым выпуском можно открыть секцию комментирования, изображенную на рисунке 3.10.

Рисунок 3.10 Блок комментирования выпуска подкаста

Формы входа на сайт и регистрации изображены на рисунках 3.11 и 3.12 соответственно.

Рисунок 3.11 Форма входа

Рисунок 3.12 Форма регистрации

На странице профиля располагается окно профиля, которое предоставляет доступ к информации о пользователе. В том числе о списке созданных им подкастов и подкастов, в которых он является соавтором. На этой странице можно создать новый подкаст или загрузить выпуск в уже созданный. Окно профиля изображено на рисунке 3.13. Формы создания подкаста и выпуска изображены на рисунках 3.14 и 3.15 соответственно.

Рисунок 3.13 Окно профиля



Рисунок 3.14 Форма создания подкаста

Рисунок 3.15 Форма добавления выпуска

После создания нового подкаста становится доступной функция добавления соавторов. На рисунке 3.16 продемонстрирована форма редактирования соведущих подкаста.

Рисунок 3.16 Форма редактирования соведущих подкаста

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

Рисунок 3.17 Страница подписок

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

На каждой странице присутствует шапка сайта. Она содержит ссылки на главную страницу, страницу подписок, профиль пользователя и страницу статистики сайта. В правом углу шапки находится кнопка входа или выхода, в зависимости от того авторизован пользователь на сайте или нет. Последним элементом шапки является поиск, расположенный по центру. С его помощью с любой страницы сайта можно осуществить поиск подкастов по названию.



4. Тестирование

4.1 Модульное тестирование

Модульное тестирование или юнит-тестирование - это тестирование отдельных модулей программного обеспечения в искусственно созданных для этого условиях.

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

- Модульное тестирование мотивирует программистов писать код максимально оптимизированным, дает возможность не бояться проводить рефакторинг, так как с помощью юнит-тестирования можно легко проверить работоспособность рассматриваемого компонента;

- Необходимость отделения реализации от интерфейса, ввиду особенностей модульного тестирования, что позволяет минимизировать зависимости в системе;

- Документация юнит-тестов может служить примером «живого документа» для каждого класса, тестируемого данным способом;

- Модульное тестирование помогает лучше понять роль каждого класса на фоне всей программной системы. [9]

Для модульного тестирования серверной части был выбран инструмент JUnit - это одна из самых популярных библиотек для тестирования программ, написанных на языке Java.

При помощи Junit были написаны тесты на все важные функции каждого отдельного сервиса системы. Результат тестирования можно увидеть на рисунке 4.1. Как можно увидеть, все тесты были пройдены успешно.



Рисунок 4.1 Результаты модульного тестирования

4.2 Нагрузочное тестирование

Нагрузочное тестирование проводится с целью оценить важные показатели системы при её сильной нагрузке и последующего сравнения этих показателей с изначальными требованиями. В нашем случае сильной нагрузкой можно считать большое количество одновременно обращающихся к сайту пользователей.

Для проведения нагрузочного тестирования был выбран инструмент JMeter - одно из самых популярных решений в этой области.

При проведении тестирования были выставлены следующие настройки:

- Количество пользователей: 25;

- Период проведения тестирования: 5 секунд;

- Количество повторений: 3.

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

Основным сценарием тестирования стала следующая последовательность действий:

1. Переход на главную страницу сайта;

2. Сортировка подкастов по рейтингу;

3. Переход на страницу подкаста.

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

Результат тестирования можно наблюдать на рисунке 4.2, где изображен график времени ответа сервера, а также на рисунке 4.3, где приведена подробная статистика в виде таблицы. Средним показателем времени ответа сервера при вышеописанных настройках стали 179 миллисекунд, что можно считать хорошим показателем, учитывая большое количество пользователей и загрузку нескольких экземпляров стороннего плеера.

Рисунок 4.2 Результаты нагрузочного тестирования в виде графика



Рисунок 4.3 Результаты нагрузочного тестирования в виде таблицы

4.3 Оценка удобства работы с пользовательским интерфейсом

Разработанное приложение должно иметь удобный и понятный интерфейс, полностью соответствующий современным нормам, благодаря чему в нем сможет сориентироваться даже неопытный пользователь. Именно этому поспособствовали следующие особенности:

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

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

- Поиск из любого места сайта. Благодаря строке поиска, располагающейся в шапке сайта, не нужно переходить на главную страницу при необходимости найти какой-либо подкаст, это можно сделать с любой страницы;

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

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



5. Внедрение

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

Развертывание программного обеспечения может включать в себя:

- Компиляцию кода, если это требуются;

- Выгрузку кода, или пакетов, в которых он содержится;

- Выгрузку зависимостей проекта, в том случае, если он опирается на сторонние библиотеки;

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

На сегодняшний день развертывание программного обеспечения принято производить максимально автоматизированным способом - то есть писать некоторые сценарии или использовать готовые инструменты, которые автоматизируют:

- Перенос кода проекта на сервер;

- Адаптацию проекта, например, установку базы данных или настройку проксирования;

- Непосредственно запуск на сервере. [10]

Созданный в ходе данной работы программный продукт может быть развернут на любом современном сервере, который поддерживает Java 8.

Перечислим общие действия для ручного развертывания разработанного приложения на сервере:

- Через файлы конфигураций проекта и сервера настраивается работа с базой данных. При этом предполагается, что необходимая база данных уже находится на сервере;

- С помощью инструмента для сборки, а именно Maven, проект собирается в JAR-пакет. Для этого используется консольная команда «mvn clean install»;

- Полученный в результате сборки пакет с приложением передается на удаленный сервер и запускается стандартной консольной командой «java -jar discasst.jar».

В итоге мы получаем полностью работоспособное приложение, доступ к которому можно получить через сеть интернет.



Заключение

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

Разработка платформы состояла из двух частей. Первой из них была разработка серверной части, в которой содержится бизнес-логика приложения и работа с базой данных. Вторым этапом стала разработка клиентской части, представляющей из себя веб-страницу.

Тестирование программного продукта состояло из нескольких этапов: модульного и нагрузочного тестирования. Также было оценено удобство использования пользовательского интерфейса приложения.

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



Список использованных источников

1. iTunes Store: [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/ITunes_Store.

2. Spring Boot: [Электронный ресурс]. URL: http://spring-projects.ru/projects/spring-boot.

3. Spring Security: [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Spring_Security.

4. Шпаргалки Java программиста 10: Lombok: [Электронный ресурс]. URL: https://projectlombok.org.

5. React, или как перестать беспокоиться и начать жить: [Электронный ресурс]. URL: https://getinstance.info/articles/react/react-basics/.

6. Bootstrap (фреймворк): [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/Bootstrap_(фреймворк).

7. Интерфейс пользователя: [Электронный ресурс]. URL: https://ru.bmstu.wiki/Интерфейс_пользователя.

8. JSON: [Электронный ресурс]. URL: https://ru.wikipedia.org/wiki/JSON.

9. Модульное тестирование: [Электронный ресурс]. URL: https://qalight.com.ua/baza-znaniy/modulnoe-testirovanie/.

10. Деплой -- что это в программировании (deploy): [Электронный ресурс]. URL: http://fkn.ktu10.com/?q=node/9501.



Приложение

Исходный код проекта

Исходный код серверной части проекта:

Файл: Discasst\src\main\resources\config\application.properties

server.port=3005

spring.data.rest.base-path=/service

logging.level.org.springframework.security=ERROR

Файл: Discasst\src\main\java\discasst\Application.java

package discasst;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

/**

* Точка входа в приложение.

*/

@SpringBootApplication

public class Application {

public static void main(String[] args) {

SpringApplication.run(Application.class, args);

}

}

Файл: Discasst\src\main\java\discasst\config\SecurityConfig.java

package discasst.config;

import discasst.service.UserService;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.context.annotation.Bean;

import org.springframework.context.annotation.Configuration;

import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;

import org.springframework.security.config.annotation.web.builders.HttpSecurity;

import org.springframework.security.config.annotation.web.builders.WebSecurity;

import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;

import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import org.springframework.security.crypto.password.PasswordEncoder;

import org.springframework.security.web.csrf.CookieCsrfTokenRepository;

import org.springframework.security.web.util.matcher.AntPathRequestMatcher;

import static org.springframework.http.HttpMethod.POST;

@Configuration

@EnableWebSecurity

public class SecurityConfig extends WebSecurityConfigurerAdapter {

@Autowired

private UserService userService;

@Bean

public PasswordEncoder passwordEncoder(){

return new BCryptPasswordEncoder();

}

@Autowired

public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

auth.userDetailsService(userService).passwordEncoder(passwordEncoder());

}

@Override

public void configure(WebSecurity webSecurity) throws Exception {

webSecurity.ignoring().antMatchers(POST, "/getCoauthorsByIdList", "/getPodcastsInPage");

}

@Override

protected void configure(HttpSecurity http) throws Exception {

http

.authorizeRequests()

.antMatchers("/podcast/**",

"/getCoauthors",

"/getPodcastById",

"/getEpisodesByPodcastIdInPage",

"/getEpisodesInFeedByUserIdInPage",

"/getPodcastsByUserIdInCoauthors",

"/user/**",

"/getAllGenres",

"/",

"/css/**",

"/generated/**",

"/images/**",

"/favicon.ico",

"/error",

"/register",

"/addUser",

"/getAllPodcasts",

"/getAllEpisodesByPodcastId",

"/getEpisodesCountToday",

"/getEpisodesCountThisMounth",

"/getPodcastsCountThisMounth",

"/getPodcastsCountToday",

"/getPodcastsByUserId/**",

"/getUsersCountThisMounth",

"/getUsersCountToday",

"/statistics",

"/getUserInfo",

"/getAllTwitsByPodcastId"

).permitAll()

.anyRequest().authenticated()

.and()

.formLogin()

.loginPage("/signin")

.usernameParameter("username")

.passwordParameter("password")

.loginProcessingUrl("/perform_login")

.defaultSuccessUrl("/", true)

.failureUrl("/signin?error")

.permitAll()

.and()

.logout().logoutRequestMatcher(new AntPathRequestMatcher("/logout")).permitAll()

.and().csrf()

.csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());

}

}

Файл: Discasst\src\main\java\discasst\da\CoauthorsRepository.java

package discasst.da;

import discasst.entity.CoauthorsEntity;

import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.CrudRepository;

import org.springframework.data.repository.query.Param;

import java.util.List;

public interface CoauthorsRepository extends CrudRepository<CoauthorsEntity, Long> {

List<CoauthorsEntity> findAllByPodcastId(long id);

@Query("SELECT a.podcastId FROM CoauthorsEntity a WHERE a.userId like:userId")

long[] findAllByUserId(@Param("userId") long userId);

void deleteAllByPodcastId(long id);

}

Файл: Discasst\src\main\java\discasst\da\EpisodeRepository.java

package discasst.da;

import discasst.entity.Episode;

import org.springframework.data.domain.Page;

import org.springframework.data.domain.Pageable;

import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.CrudRepository;

import org.springframework.data.repository.query.Param;

import java.util.List;

public interface EpisodeRepository extends CrudRepository<Episode, Long> {

Page<Episode> findAllByPodcastIdOrderByIdDesc(long id, Pageable pageable);

Page<Episode> findAllByPodcastIdInOrderByIdDesc(long[] podcastIds, Pageable pageable);

List<Episode> findAllByDate(String date);

void deleteAllByPodcastId(long id);

@Query("select a from Episode a where a.date like:monthAndYear")

List<Episode> findAllInThisMonth(

@Param("monthAndYear") String monthAndYear);

}

Файл: Discasst\src\main\java\discasst\da\ExposeEntityIdRest.java

package discasst.da;

import discasst.entity.*;

import org.springframework.data.rest.core.config.RepositoryRestConfiguration;

import org.springframework.data.rest.webmvc.config.RepositoryRestConfigurerAdapter;

import org.springframework.stereotype.Component;

@Component

public class ExposeEntityIdRest extends RepositoryRestConfigurerAdapter {

/**

* Сохраняет айдишники в объектах

*/

@Override

public void configureRepositoryRestConfiguration(RepositoryRestConfiguration config) {

config.exposeIdsFor(User.class);

config.exposeIdsFor(Podcast.class);

config.exposeIdsFor(Genre.class);

config.exposeIdsFor(Episode.class);

config.exposeIdsFor(CoauthorsEntity.class);

config.exposeIdsFor(RatingEntity.class);

config.exposeIdsFor(Tweet.class);

}

}

Файл: Discasst\src\main\java\discasst\da\GenreRepository.java

package discasst.da;

import discasst.entity.Genre;

import org.springframework.data.repository.CrudRepository;

import java.util.List;

public interface GenreRepository extends CrudRepository<Genre, Long> {

List<Genre> findAll();

}

Файл: Discasst\src\main\java\discasst\da\PodcastRepository.java

package discasst.da;

import discasst.entity.Podcast;

import org.springframework.data.domain.Page;

import org.springframework.data.domain.Pageable;

import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.PagingAndSortingRepository;

import org.springframework.data.repository.query.Param;

import java.util.List;

public interface PodcastRepository extends PagingAndSortingRepository<Podcast, Long> {

Podcast findById(long id);

List<Podcast> findAll();

Page<Podcast> findByNameContainsIgnoreCaseAndGenreIdNotInOrderByRatingDesc(String name, long[] genres, Pageable pageable);

Page<Podcast> findByNameContainsIgnoreCaseAndGenreIdNotInOrderByIdDesc(String name, long[] genres, Pageable pageable);

List<Podcast> findAllByAuthorId(long id);

List<Podcast> findAllByIdIn(long[] ids);

List<Podcast> findAllByCreationDate(String date);

@Query("select a from Podcast a where a.creationDate like:monthAndYear")

List<Podcast> findAllInThisMonth(@Param("monthAndYear") String monthAndYear);

}

Файл: Discasst\src\main\java\discasst\da\RatingRepository.java

package discasst.da;

import discasst.entity.RatingEntity;

import org.springframework.data.repository.CrudRepository;

public interface RatingRepository extends CrudRepository<RatingEntity, Long> {

RatingEntity findByPodcastIdAndUserId(long podcastId, long userId);

void deleteAllByPodcastId(long id);

}

Файл: Discasst\src\main\java\discasst\da\SubscribeRepository.java

package discasst.da;

import discasst.entity.SubscribeEntity;

import org.springframework.data.jpa.repository.Query;

import org.springframework.data.repository.CrudRepository;

import org.springframework.data.repository.query.Param;

public interface SubscribeRepository extends CrudRepository<SubscribeEntity, Long> {

SubscribeEntity findByPodcastIdAndUserId(long podcastId, long userId);

void deleteAllByPodcastId(long id);

@Query("SELECT a.podcastId FROM SubscribeEntity a WHERE a.userId like:userId AND a.isSubscribed LIKE true")

long[] findAllByUserId(@Param("userId") long userId);

}

Файл: Discasst\src\main\java\discasst\da\TweetRepository.java

...