Дополнительной мерой защиты является шифрование пароля пользователя при помощи инструмента под названием «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. Внедрение
Развертывание программного обеспечения - это механизм его распространения для установки на других компьютерах, устройствах, серверах или в облаке. Другими словами, это помещение исполняемого кода продукта на сервер, где он будет работать. Данный процесс является не менее важной частью жизненного цикла программного обеспечения, чем его проектирование или тестирование.