Розробка веб-каталогу фільмів

Майчук, Тарас Миколайович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8893

Title:	Розробка веб-каталогу фільмів
Authors:	Немченко , Вадим В'ячеславович Майчук, Тарас Миколайович
Keywords:	Каталог фільмів;фільми;фільтрування;пошук фільму;коментарі;Films;catalog films;filtrum;comments;search films
Issue Date:	4-Jun-2024
Abstract:	АНОТАЦІЇ Здобувач бакалаврського рівня: Майчук Тарас Миколайович; Назва кваліфікаційної роботи бакалавра: «Каталог перегляду фільмів»; Спеціальність: 121 Інженерія програмного забезпечення; Навчальний заклад: Черкаський державний технологічний університет; Місто, рік: Черкаси, 2024; Основною ідеєю є створення зручного каталогу фільмів який буде націлений на україномовне суспільство. Отримані результати беззаперечно задовільняють вимогам до системи. Bachelor's degree holder: Taras Mykolayovych Maichuk; Name of the bachelor's qualification work: Movie viewing catalog; Specialty: 121 Software engineering; Institution of higher education: Cherkasy State Technological University; City, year: Cherkasy, 2024; The main idea is to create a convenient catalog of films aimed at Ukrainian-speaking society. The obtained results undoubtedly satisfy the requirements for the system.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/8893
Appears in Collections:	121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)

Files in This Item:

File	Description	Size	Format
Кваліфікаційна робота бакалавра Майчук Тарас Миколайович.pdf Restricted Access		6.39 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем

ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень

на тему: Розробка веб-каталогу перегляду фільмів

Виконав: студент 4 курсу, групи ПЗС-2244
Спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)

Студент Майчук Т. М.
(прізвище та ініціали)
Керівник Немченко В. В.
(прізвище та ініціали)
Рецензент Левченко С. П.
(прізвище та ініціали)

Черкаси 2024
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення

ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
___________ Голуб С. В. .
«___» _______________ 2024 року

З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Майчук Тарас Миколайович
(прізвище, ім’я, по батькові)
1.Тему проекту (роботи) Розробка веб-каталогу фільмів
Керівник проекту (роботи) Немченко Вадим В’ячеславович
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від « 26 » лютого
2024 року №60/04
2. Строк подання студентом проекту (роботи) 3 червня 2024 р.
3. Вхідні дані до проекту (роботи) завдання до розробки, аналоги, рекомендації керівника
проекту.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Перелік умовних позначень;
Вступ;
Розділ 1. Наявні методи та засоби розв’язання поставлених завдань;
Розділ 2. Впровадження результатів досліджень у практику проєктування програмного
забезпечення інформаційних систем;
Розділ 3. Розробка та тестування програмного забезпечення;
Висновки;
Список використаних джерел;
Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Рисунок 2.2 – Діаграма прецедентів;
Рисунок 2.3 – Діаграма класів;
Рисунок 2.4 – Діаграма пакетів;
Рисунок 2.5 – Діаграма компонентів;
Рисунок 2.6 – Діаграма розгортання;
Рисунок 2.10 – Діаграма комунікації;
Рисунок 2.11 – Діаграма скінченного автомату.

6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 02 грудня 2023 р.

КАЛЕНДАРНИЙ ПЛАН
Строк
виконання
№
Назва етапів випускної роботи етапів Примітки
п/п
випускної
роботи
1 Постановка задачі 05.12.2023 виконано
2 Підготовка завдання 13.12.2023 виконано
3 Погодження завдання 16.12.2023 виконано
4 Затвердження завдання 19.02.2024 виконано
Основна стадія
1 Підбір матеріалів 27.02.2024 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.03.2024 виконано
3 Розрахунок основних параметрів роботи 10.03.2024 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2024 виконано
5 Оформлення первісної редакції роботи 25.03.2024 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з 31.04.2024 виконано
керівником
2 Оформлення пояснювальної записки роботи в 13.05.2024 виконано
кінцевій редакції
3 Попередній захист роботи 15.05.2024 виконано
4 Затвердження роботи 27.05.2024 виконано
5 Рецензування роботи 30.05.2024 виконано
6 Захист роботи 03.06.2024

Студент _____________________ Майчук Т. М.
(підпис) (прізвище та ініціали)

Керівник проекту (роботи) _____________________ Немченко В. В.
(підпис) (прізвище та ініціали)

АНОТАЦІЇ
Здобувач бакалаврського рівня: Майчук Тарас Миколайович;
Назва кваліфікаційної роботи бакалавра: «Каталог перегляду фільмів»;
Спеціальність: 121 Інженерія програмного забезпечення;
Навчальний заклад: Черкаський державний технологічний університет;
Місто, рік: Черкаси, 2024;
Основною ідеєю є створення зручного каталогу фільмів який буде націлений на
україномовне суспільство. Отримані результати беззаперечно задовільняють
вимогам до системи.
Ключові слова: Каталог фільмів, фільми, фільтрування, пошук фільму,
коментарі.

Bachelor's degree holder: Taras Mykolayovych Maichuk;
Name of the bachelor's qualification work: Movie viewing catalog;
Specialty: 121 Software engineering;
Institution of higher education: Cherkasy State Technological University;
City, year: Cherkasy, 2024;
The main idea is to create a convenient catalog of films aimed at Ukrainian-speaking
society. The obtained results undoubtedly satisfy the requirements for the system.
Keywords: Films, catalog films, filtrum, comments, search films.

Зміст
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ................................................................... 5
ВСТУП ........................................................................................................................ 6
РОЗДІЛ 1. НАЯВНІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ................................................................................... 8
1.1 Методи розв’язання ........................................................................................... 8
1.2 Дослідження аналогів ....................................................................................... 8
1.3 Постановка задач ............................................................................................. 17
РОЗДІЛ 2. ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЄКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ ............................................................................ 19
2.1 Моделювання предметної області .............................................................. 19
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області. ............................................................................................ 19
2.1.2 Елементи моделювання предметної області ........................................... 20
2.1.3 Робоча область моделювання ................................................................... 21
2.2 Формування та аналіз вимог ....................................................................... 22
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги. ................................................................................................................. 22
2.2.2 Формування вимог за допомогою діаграми прецедентів: ..................... 24
2.3 Проєктування логічної структури програмного комплексу ................. 25
2.3.1 Діаграма класів .......................................................................................... 25
2.3.2 Діаграма пакетів ........................................................................................ 30
2.4 Архітектурне проєктування ........................................................................ 31
2.4.1 Діаграми компонентів ............................................................................... 31
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ......................................................................................................... 32
2.5 Моделювання поведінки системи ............................................................... 33
2.5.1 Діаграма діяльності ................................................................................... 33

Зм. Лист № документа№ ПідписПі Дата ЧДТУ. 24 2248-009 ПЗ
РЗомз.р оЛб.ист документа
Маячук Т. М. дпис Дата
«Каталог перегляду фільмів» Літ. Лист Листів
Керівник Немченко В.В. Пояснювальна записка 3
.
ФІТІС, кафедра
Н.контр. Півень О. Б.
Затв. Голуб С. В. ПЗАС, ПЗС-2244

2.5.2 Діаграма послідовності ............................................................................. 34
2.5.3 Діаграма комунікації ................................................................................. 35
2.5.4 Діграма скінченного автомату .................................................................. 36
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ ................................................................................................... 38
3.1 Розробка програмного комплексу .............................................................. 38
3.1.1 Обґрунтування вибору засобів реалізації ............................................... 38
3.1.2 Опис структурної (функціональної) схеми ............................................. 39
3.1.3 Опис логічної схеми системи ................................................................... 41
3.1.4 Розробка бази даних .................................................................................. 42
3.1.5 Розробка інтерфейсу користувача ............................................................ 47
3.1.6 Опис розробки програмних компонентів ................................................ 49
3.2 Тестування системи....................................................................................... 57
3.2.1 Модульне тестування ................................................................................ 57
3.2.2 Інтеграційне тестування ........................................................................... 59
3.2.3 Системне тестування ................................................................................. 61
3.2.4 Приймальне тестування ............................................................................ 65
3.3 Приклади впровадженого програмного комплексу ................................ 66
ВИСНОВКИ ............................................................................................................. 79
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ............................................................ 80
ДОДАТОК А ............................................................................................................. 81
ДОДАТОК Б ............................................................................................................. 83
ДОДАТОК В ............................................................................................................. 90
ДОДАТОК Г ........................................................................................................... 101

Лист
ЧДТУ. 242248.009 ПЗ
4
Зм Лист № докум. Підпис Дата

ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
SQL – структурована мова запитів.
ІС – інформаційна система.
ПЗ – програмне забезпечення.
REST API – архітектура мережевого спілкування.
КСА – клієнт-серверна архітектура

5
ЧДТУ 242248.009 ПЗ
ВСТУП
Актуальність теми
Актуальність теми викликана необхідністю розробки програмного
забезпечення інформаційної системи що забезпечить користувача стабільною та
продуктивним ПЗ, яке дозволить переглядати фільми онлайн без потреби
відвідувати кінозали. Тому створення системи ПЗ що дозволить користувачам
легко взаємодіяти із системою перегляду фільмів буде корисною та необхідною.
Мета і завдання розробки
Розробити програмне забезпечення для реалізації інформаційної технології
модерування перегляду фільмів.
Для досягнення мети виконувались такі завдання:
1 Визначити існуючі методи і засоби для розв’язання поставленої задачі.
Аналіз результатів інформаційного пошуку. Формалізація поставлених
задач.
2 Вибрати і застосувати технології проєктування ПЗ.
3 Вибрати та застосувати констроювання ПЗ.
4 Вибрати та застосувати технологію тестування ПЗ.
5 Використати отримані результати в практику створення ІС.
Об’єкт розробки
Об’єктом розробки являється процес створення програмного забезпечення
інформаційної технології модерування кінозалу.
Предмет розробки
Процес розробки програмного забезпечення для модуля пошуку та
перегляду фільмів у інформаційній технології модерування кінозалу.
Методи проєктування та конструювання
Для проєктування було використано об’єктно орієнтований підхід до
створення ІС.
Мова програмування була обрана TypeScript, що забезпечує її використання
в обох середовищах як для серверного так і для клієнтської частини. Для
6
ЧДТУ 242248.009 ПЗ
серверного рішення було використано: Nest.js[5], REST API, Swagger,
ClassValidation, TypeORM[6] та база даних Postgre[7]. Для клієнтської частини
були використані наступні технології: React[1], MUI[2], Zustand[3], HTML, CSS.
Опис отриманих результатів
В процесі розробки вдалось добитись прийнятних результатів що
забезпечують досягнення мети. Було розроблено ІС для перегляду каталогу
фільмів.
Отже в процесі розробки було пройдені такі етапи:
1 Сформульовані вимоги до ПЗ.
2 Спроектована база даних.
3 Створено клієнтської частини для взаємодії із сервером.
4 Створено серверної частини що забезпечить бізнес правила ІС.
На основі спроектованого ПЗ було представлено діаграми. А в процесі
тестування ІС було пройдено всі етапи що демонструють виконання ПЗ
відповідно до вимог що були поставленні перед нею.
Практичне значення отриманих результатів
Було побудована програмна системи для перегляду каталогу фільмів на
різних типах дисплея та на різних браузерах. Головною необхідністю при
використання системи є пристрій із браузером та доступ до мережі інтернет.
Особистий внесок автора
В процесі розробки було застосовано об’єктно орієнтоване програмування
що дозволили зручно представляти дані в об’єктах для подальшої взаємодії з
ними. Також додаток був завантажений на сервер для публічного використання.

7
ЧДТУ 242248.009 ПЗ
РОЗДІЛ 1. НАЯВНІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ
Використано об’єктно орієнтоване програмування в процесі розробки.
Також було використано паттерн проєктування єдиної залежності (Singelton) та
мережеву архітектуру клієнт-сервер для комунікації різних частин системи.
1.1 Методи розв’язання
Для реалізації даного програмного комплексу буде обрана клієнт-серверна
архітектура (КСА). Вона дозволить безпечно зберігати та отримувати дані. На
пряму доступу до даних ніхто мати не буде. Саме завдяки цьому була обрана
дана модель. Де клієнтська частина відповідає за вивід даних для користувача, а
серверна за збереження та захист їх від несанкціонованого доступу. Також дана
архітектура дозволяє розділити на дві частини логіку для відображення даних та
їх коректне збереження в базі даних
1.2 Дослідження аналогів
1 Зручний інтерфейс користувача.
В зарубіжних аналогів я підкреслив зручний та цікавий інтерфейс
користувача, що так і манить залишитись на даній сторінці.
Ось наприклад перший із них:

Рисунок 1.1 – Головна сторінка аналогу від Plex
8
ЧДТУ 242248.009 ПЗ
Коли я зайшов вперше на сайт, то він зацікавив мене своїм інтерфейсом,
який змушує залишатися на ньому довго.
Так само й інший аналог.

Рисунок 1.2 – Головна сторінка аналогу від IMDB

Даний аналог теж є цікавим зі сторони оформлення сторінок, які є
привабливими і змушують дослідити всі доступні матеріали.
Україномовні аналоги теж мають цікавий дизайн головної сторінки,
щоправда в інших місцях в них є труднощі.

Рисунок 1.3 – Головна сторінка аналогу Eneyida
9
ЧДТУ 242248.009 ПЗ
Eneyida при вході на сайт демонструє гарний візуальний інтерфейс, що
зацікавлює з перших секунд. Нашому погляду падає те, що нам цікаве і потрібне.
Даного ефекту я теж бажаю добитись.
Інші аналоги надають більш менш схожий вигляд. Одним із них є UAKINO.

Рисунок 1.4 – Головна сторінка UAKINO

Як можна побачити, вони схожі. Обидва дають нам одразу те, що ми
хочемо бачити.
2 Фільтр фільмів та пошук потрібних.
Фільтр для пошуку потрібного нам фільму є необхідним для зручності
використання сайту. Від його реалізації буде безпосередньо залежати те, чи
відвідувачу сподобається даний сайт і чи захоче він в майбутньому ним
користуватись.
Як можна побачити, в аналогів дещо специфічний фільтр. Можна навіть
сказати, що він відсутній.

Рисунок 1.5 – Plex фільтр
10
ЧДТУ 242248.009 ПЗ
Plex дає гарне візуальне враження, але щодо пошуку за критеріями він є не
дуже добрим.
Eneyida теж не володіє надто приємним фільтром фільмів, через який
хотілося б користуватись сайтом для пошуку бажаного.

Рисунок 1.6 – Eneyida фільтр

Як можна побачити, тут теж фільтр має недоліки: малий набір категорій, за
яким можна відфільтрувати фільми і знайти той, який вам сподобається.

Рисунок 1.7 – UAKINO фільтр
11
ЧДТУ 242248.009 ПЗ
UAKINO надає нам значно кращий фільтр за попередників. За допомогою
нього вже можна буде підшукати більш менш те, що вас може зацікавити у
перегляді, але й він є не повним і не надто зручний.
Саме тому однією із головних поставлених задач було створення зручного
способу пошуку фільмів за фільтром.
3 Сторінка перегляду фільму.
Даний розділ у каталогу фільмів теж є немало значним, від якого буде
залежати те, чи захоче відвідувач в подальшому користуватись даним сайтом.
Можна сказати, що саме ця частина є обличчям сайту, що змушує користувачів
зацікавитись ним і використовувати в майбутньому.

Рисунок 1.8 – Сторінка фільму у Plex

Як можна помітити, Plex надає цікавий спосіб подання та перше враження.
Він одразу демонструє те, що нам необхідне, але не в повній мірі.
12
ЧДТУ 242248.009 ПЗ

Рисунок 1.9 – Сторінка фільму у IMDB

Як можна побачити IMDB надає більше інформації та краще її подає.
Даний вигляд просто змушує повернутись на даний сайт знову.

Рисунок 1.10 – Сторінка фільму у Eneyida

Із всіх представлених аналогів сторінка фільму в Eneyida мені сподобалась
найбільше всіх. Вона вражає що візуально, що необхідною інформацією, яка буде
13
ЧДТУ 242248.009 ПЗ
корисна для ознайомлення. Цікавим доповненням серед усіх є опис фільму, а
саме те, що може вас зацікавити для його перегляду. Також можливість
переглянути кадри з нього.

Рисунок 1.11 – Сторінка фільму у UAKINO

Як можна побачити UAKINO надає дещо схожий з Eneyida стиль подання
сторінки фільму. Він також є інформативним, але, щоправда, по візуальній
частині в деяких моментах Eneyida буде краще.
4 Рейтинг фільму та його коментування.
Однією із необхідних особливостей в каталозі фільмів я вважаю систему
рейтингу. Змога залишити коментар або рецензію про враження від фільму
допоможе іншим користувачам у вирішенні питання щодо перегляду
кінокартини.

Рисунок 1.12 – Коментарі на UAKINO
14
ЧДТУ 242248.009 ПЗ
Як можна побачити, коментарі не складно реалізувати у своєму каталозі, а
це буде дуже інформативно для користувача.
Також рейтинг фільму дасть зрозуміти, наскільки людям сподобався фільм,
без необхідності читати коментарі. Легка і зручна функція, що буде дуже корисна.

Рисунок 1.13 - Система оцінювання

5 Інші особливості що хотілося б мати в одному каталозі фільмів.
Насамперед це для користувача можливість відокремити фільми, які він
вже подивився, збирається дивитись або які йому не сподобались. Дану
особливість я підкреслив із сайту Eneyida. Вона буде дуже корисна для
користувача, щоб завжди пам’ятати, що він вже дивився.
15
ЧДТУ 242248.009 ПЗ

Рисунок 1.14 – Список фільмів користувача

Також одну із цікавих особливостей я зауважив на сайті IMDB. Вона надає
нам під час пошуку зручну можливість одразу додати до списку фільм та
отримати інформацію щодо його рейтингу.

Рисунок 1.15 – Перелік фільмів

Також можу підкреслити, що мене зацікавило на сторінці фільму
рекомендовані або ж схожі фільми. Ця маленька особливість може
16
ЧДТУ 242248.009 ПЗ
допомогти користувачу легко знайти фільм, що буде схожий на той, що він
переглядав.

Рисунок 1.16 – Рекомендації

1.3 Постановка задач
В процесі розглядів аналогів було виявлено ряд можливих рішень для
розв’язання поставлених задач. Від системи очікується висока продуктивність та
мала затримка на обробку запитів. Система орієнтована на використання для
користувача.
Для розв’язання поставлених задач потрібно розробити:
1 Клієнтську частину для користувача.
2 Серверну частину для обробки даних.
3 База даних для збереження даних.

17
ЧДТУ 242248.009 ПЗ
Висновки до першого розділу
В цьому розділі були розглянуті програмні продукти які представляють
предметну область розроблюваної ІС. Було знайдено рішення для розв’язання
поставленої задачі в процесі розробки.
Із переваг в даних систем є швидкий відклик на запит користувача.
Системи були розроблені із використання об’єктно орієнтованого підходу, що
забезпечує полегшену подальшу підтримку програмного забезпечення.
18
ЧДТУ 242248.009 ПЗ
РОЗДІЛ 2. ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЄКТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ СИСТЕМ
2.1 Моделювання предметної області
Моделювання використано з метою формування вимог для програмного
забезпечення.
В наступному підрозділі описана предметна область моделювання, сама
модель та результат моделювання.
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області.
Предметна область моделювання:
Програма забезпечення що дозволяє переглядати дані про фільми та
виконувати пошук необхідного .
Модель предметної області:
FrontEnd – Частина ІС що відповідає за взаємодію користувача із BackEnd
частиною. Головною задачею є виведення інформації в зрозумілому для
користувачеві форматі.
BackEnd – Частина що контролює доступ до функціоналу. Виконує
поставленні задачі для коректної взаємодії з DataBase.
DataBase – Місце де зберігаються дані системи.
Словник предметної області:
1 Користувач: Особа, що має обліковий запис та використовує його.
2 Фільм: Це сутність що містить в собі дані про фільм.
3 Жанри: Категорія, до якої можна віднести фільм за основною його
ідеєю, темою або стилістикою.
4 Список перегляду: Список для зручного керування контенту, який
переглянув або планує переглянути користувач.
19
ЧДТУ 242248.009 ПЗ
5 Коментарі: Висловлення особистого враження або думки глядача про
фільм, залишене на платформі каталогу.
6 Ролі: Це спосіб розподілення прав до користування системою.
7 Видавець: Студія, компанія, особа що створила чи видала даний фільм
чи серіал і т.д.
8 Рейтинг: Оцінка що отримує фільм, серіал або щось інше від
користувача. Вказує на популярність та якість.
9 Актори: Діючі особи.
2.1.2 Елементи моделювання предметної області
Для побудови всіх діаграм було використано певний набір графічних
елементів, що були використані у UML діаграмах. Даний набір значною мірою
полегшує розуміння того що ми хочемо від нашої ІС.
Таблиця 2.1
Елементи моделювання
Графічний символ Назва елемента
Дійова особа (користувач)

Варіант використання

Компонент

Вузол

Стан

Об’єкт

Клас

Лінія життя, фокус управління

20
ЧДТУ 242248.009 ПЗ
Продовження таблиці 2.1
Початковий та кінцевий стан

Відношення асоціації
Відношення залежності
Виклик
Взято з методичних вказівок до роботи бакалавра [9].
2.1.3 Робоча область моделювання
Розглянемо процес використання каталогу фільмів на рисунку 2.1.

Рисунок 2.1 – Модель предметної області каталог перегляду фільмів

Найперше, що цікавить користувача – самі фільми та зручність пошуку
необхідних йому кінокартин за певними параметрами. Тому для цього було
створено класи, що містять ці дані, і вони мають віковий рейтинг, відео-жанри та
вказаний видавець.
Віковий рейтинг дає нам зрозуміти для якого віку даний фільм є
прийнятним.
21
ЧДТУ 242248.009 ПЗ
Жанри дають нам можливість класифікувати фільми по їхнім видам
(комедія, детектив, фантастика і тд.)
Видавець дасть нам розуміння того, хто працював над цим фільмом.
Також для зручності було додано окремий клас для зберігання іншої
необхідної інформації про фільм та його серії.
Користувач дасть можливість керувати певним функціоналом: залишати
коментарі під відео, ставити рейтинг відео та додавати до списків.
Ролі дозволять контролювати права, що дають користувачеві певні
можливості у системі.
Коментарі дають змогу користувачам залишати свої враження від
переглянутого фільму.
Список перегляду користувача дасть можливість користувачам
відслідковувати фільми що вони вже переглянули чи планують переглянути.
2.2 Формування та аналіз вимог
Завдяки аналізу вимог при проектуванні можна буде зрозуміти те що ми
очікуємо від нашого ІС. Сформуючи вимоги ми зможемо забезпечити коректне
уявлення про нашу систему. Тому будуть розглянуті такі пункти як: формування
вимог до програмного забезпечення. Первинні і детальні вимоги. Вимоги
замовника і розробника. Функціональні та нефункціональні вимоги. Формування
вимог за допомогою діаграми прецедентів.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги.
Формування вимог до програмного забезпечення
Найважливішою вимогою до системи є те що вона повинна бути легкою в
удосконаленні. Так щоб в майбутньому не виникало труднощів якщо комусь
доведеться додавати інший функціонал який з часом пригодиться.
Первинні і детальні вимоги
Розглянемо первинні і детальні вимоги для нашої системи.
22
ЧДТУ 242248.009 ПЗ
Первинні вимоги:
1 Реєстрація та авторизація користувачів.
2 Перегляд списку доступних фільмів.
3 Пошук фільмів за певними властивостями
4 Можливість додавання фільмів до списку обраного.
Детальні вимоги:
1 Інформація повинна відображатись в зрозумілому для користувачеві
виду.
2 Додавання нових фільмів можлива лише адміністратором.
3 Забезпечення безпеки даних користувачів та обмеження доступу до
адміністративних функцій.
Вимоги замовник і розробника
Розглянемо вимоги замовника та розробника для нашої системи.
Вимоги замовник:
1 Розробка каталогу перегляду фільмів для користуваня.
2 Забезпечити можливість додавання та видалення фільмів.
3 Вимагає систему реєстрації та авторизації користувачів.
4 Користувачі можуть залишати рейтинг та коментарі до фільмів.
Вимоги розробника:
1 Вимагається висока швидкодія системи, особливо при великій кількості
фільмів та користувачів.
2 Важлива безпека особистих даних користувачів та надійність системи
авторизації.
3 Гнучкість системи для подальшої модернізації.
4 Зберігання файлів на хмарному сервісі.
Функціональні та нефункціональні вимоги
Розглянемо функціональні та нефункціональні вимоги для нашої системи.
Функціональні вимоги:
1 Створення облікового запису для користувача.
23
ЧДТУ 242248.009 ПЗ
2 Обмежений доступ для не авторизованих користувачів.
3 Пошук фільмів відбувається за властивостями що є визначені при
розробці.
4 Система відображає дані в зрозумілому для користувачеві виді.
Нефункціональні вимоги:
1 Система повинна забезпечувати безпеку даних користувачів та
запобігати несанкціонованому доступу до них.
2 Система повинна працювати ефективно та швидко, навіть при великій
кількості запитів користувачів.
3 Система повинна бути стабільною та надійною, запобігаючи
виникненню помилок та збоїв.
4 Система повинна бути готовою до масштабування, здатна працювати
ефективно навіть при збільшенні обсягу даних та кількості
користувачів.
5 Інтерфейс користувача повинен бути зрозумілим та зручним у
використанні, навіть для непрофесійних користувачів.
6 Система повинна бути сумісною з різними пристроями та веб-
браузерами.
2.2.2 Формування вимог за допомогою діаграми прецедентів:
На даному рисунку 2.2 зображена діаграма прецедентів. Показано що може
робити користувач та адміністратор.
Користувач може виконувати наступні дії:
1 Переглядати списки фільмів.
2 Пошук фільмів за фільтром.
3 Реєстрація в системі.
4 Додавання фільму до списку перегляду.
5 Створення коментаря про фільм.
6 Створення оцінки про фільм.
Адміністратор може виконувати такі дії:
24
ЧДТУ 242248.009 ПЗ
1 Додавати новий фільм.
2 Редагувати дані вже наявного фільму.

Рисунок 2.2 – Діаграма прецедентів каталог перегляду фільмів
2.3 Проєктування логічної структури програмного комплексу
В даному розділі буде проведено проєктування структури програмного
комплексу. А саме буде розглянуто проєктування діаграми класів та діаграми
пакетів. Ці частини проєктування є важливими в процесі розробки програмного
комплексу.
2.3.1 Діаграма класів
Розглянемо діаграму класів яка розташована на рисунку 2.3 без атрибутів, а
на рисунку 2.4 повну діаграму класів.
1 User: клас що зберігає в собі дані користувача.
2 Role: клас що зберігає в собі дані про роль.
25
ЧДТУ 242248.009 ПЗ
3 User List: клас що зберігає дані про список користувача.
4 List View: клас Що відповідає за додавання фільму до списку перегляду.
5 Series: клас що зберігає в собі дані про серії та додає нові.
6 Film Details: клас що зберігає додаткові дані про фільм.
7 Film: клас що зберігає дані про фільм.
8 Age Rating: клас що зберігає дані про віковий рейтинг.
9 Publisher: клас що зберігає інформацію про видавця.
10 Genre: клас що є типом за яким класифікують фільм та зберігає ці
класифікації.
11 Film Rate: клас що обробляє рейтинг фільму.
12 Comment Rate: клас що зберігає та обробляє рейтинг коментарів.
13 Comment: клас що зберігає коментар від користувача

Рисунок 2.3 - Діаграми класів каталогу перегляду фільмів
26
ЧДТУ 242248.009 ПЗ

Рисунок 2.4 – Повна діаграма класів каталогу перегляду фільмів

User:
Поля:
- id: number – унікальний номер;
- password: string – пароль користувача;
- email: string – електронна адреса користувача;
- role: Arrau[Role] – ролі користувача.
Role:
Поля:
- id: number – унікальний ідентифікатор;
- name: string – назва ролі.
User List:
27
ЧДТУ 242248.009 ПЗ
Поля:
- id: number – унікальний ідентифікатор;
- name: string – назва списку користувача.
List View:
Методи:
- Save(ListViewDto): void – метод що зберігає список користувача;
- GetById(number): ListViewDto – метод для отримання списку.
Film:
Поля:
- id: number – унікальний ідентифікатор;
- name: string – назва фільму;
- Genre: GenreEntity – посилання на клас з жанрами;
- AgeRating: AgeRatingEntity – посилання на клас вікового рейтингу;
- Publisher: PublisherEntity – посилання на клас видавця;
Методи:
- Save(FilmDto): void – збереження фільму;
- Get(): FilmDto – отримання масиву фільмів;
- GetById(number): FilmDto – отримання фільму за id.
Film Details:
Поля:
- id: number – унікальний ідентифікатор;
- characters: Array[string] – масив з героями;
- descriptions: string – опис фільму.
Методи:
- Save(FilmDetailsDto): void – збереження додаткової інформації про
фільм;
- GetById(number): FilmDetailsDto – отримання детальної інформації
про фільм.
Age Rating:
Поля:
28
ЧДТУ 242248.009 ПЗ
- id: number – унікальний ідентифікатор;
- name: string – назва вікового рейтингу.
Методи:
- Save(AgeRatingDto): void – збереження вікового рейтингу;
- GetById(number): AgeRatingDto – отримання вікового рейтингу за id.
Publisher:
Поля:
- id: number – унікальний ідентифікатор;
- name: string – назва видавця.
Методи:
- Save(PublisherDto): void – збереження видавця;
- GetById(number): PublisherDto – отримання видавця за номером.
Genre:
Поля:
- id: number – унікальний ідентифікатор;
- name: string – назва жанру.
Методи:
- Save(GenreDto): void – збереження жанру;
- GetById(number): GenreDto – отримання жанру за номером.
Film Rate:
Поля:
- id: number – унікальний ідентифікатор;
- idUser: number – посилання на номер користувача;
- idFilm: number – посилання на номер фільму;
- rate: number – рейтинг.
Методи:
- Save(FilmRateDto): void – збереження рейтингу фільму ;
- GetById(number): FilmRateDto – отримання рейтингу за номером
фільму.
Comment Rate:
29
ЧДТУ 242248.009 ПЗ
Поля:
- id: number – унікальний ідентифікатор;
- idUser: number – посилання на номер користувача;
- idComment: number – посилання на номер коментаря;
- rate: number – рейтинг.
Методи:
- Save(CommentRateDto): void – збереження рейтингу коментаря;
- GetById(number): CommentRateDto – отримання рейтингу за
номером коментаря.
Comment:
Поля:
- id: number – унікальний ідентифікатор;
- text: string – назва ;
- idUser: number – посилання на номер користувача;
- idFilm: number – посилання на номер фільму.
Методи:
- Save(CommentDto): void – збереження коментаря;
- GetById(number): CommentDto – отримання коментаря за номером
фільму.
2.3.2 Діаграма пакетів
Як можна побачити з наданої діаграми на рисунку 2.5, існує три пакети.
Один відповідає за базу даних, один за Серверну частину і один за інтерфейс
користувача. Всі вони залежать один від одного в такій послідовності: інтерфейс
користувача від серверної частини, а серверна частина від бази даних, де
зберігаються всі необхідні нам дані. Дана діаграма має такий вигляд із-за вибору
архітектури ПЗ. Так як Клієнт-серверна архітектура передбачає в собі
використання трьох різних рівнів. Таких як Клієнтська частина для відображення
даних, серверна частина для безпечної обробки та взаємодії з базою даних та база
даних для зберігання даних.
30
ЧДТУ 242248.009 ПЗ

Рисунок 2.5 - Діаграми пакетів каталог перегляду фільмів

2.4 Архітектурне проєктування
Опишемо архітектурне проєктування більш детальніше. А саме розглянемо
такі діаграми: діаграма компонентів, розгортання програмної системи на
апаратних засобах та діаграму розгортання.
2.4.1 Діаграми компонентів
На даному рисунку 2.6 можна побачити те як буде взаємодіяти компонент
по отриманню списку фільмів, а саме: разом із фільмом будуть братися дані про
його оцінку та коментарі до фільму, чи є він у списку користувача. При отриманні
фільмів до них одразу будуть братись залежні дані.

Рисунок 2.6 - Діаграма компонентів каталог перегляду фільмів
31
ЧДТУ 242248.009 ПЗ
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
На даному рисунку 2.7 показано як буде відбуватись розгортання проекту.
Користувач:
Взаємодіє з пристроєм що має браузер та доступ до мережі інтернет.
Користувач взаємодіє через екран на який виводиться інформація та клавіатуру
для введення інформації.
Пристрій користувача:
Пристрій що має встановлений браузер та доступ до мережі інтернет.
Займається відображенням інформації на дисплей та виконує запити на WEB
Сервер для отримання нових даних.
WEB Сервер:
Сервер що обробляє запити на отримання даних чи додавання даних.
Звернення до нього відбувається по протоколу HTTP/HTTPS. Також відповідає за
всю головну логіку додатку.
База даних:
Віддалений сервер на якому розміщується база даних, що зберігає всі дані
ІС. Звертання до неї відбувається по протоколу TCP/IP.

Рисунок 2.7 - Діаграма розгортання каталог перегляду фільмів
32
ЧДТУ 242248.009 ПЗ
2.5 Моделювання поведінки системи
Опишемо моделювання поведінки системи більш детальніше. А саме
розглянемо такі діаграми: діаграма діяльності, діаграма комунікації, діаграма
скінченного автомату.
2.5.1 Діаграма діяльності
На даній діаграмі 2.8 показано діаграму діяльності, а саме те як будуть
виконуватись дії в проекті. Представлено 2 типи діяльності.

Рисунок 2.8 - Діаграма діяльності каталог перегляду фільмів
33
ЧДТУ 242248.009 ПЗ
Пошук фільму:
1 Користувач вибирає за якими критеріями він хоче шукати фільм.
2 Клієнтська частина формується запит на сервер та очікує відповідь.
3 Серверна частина шукає співпадіння за критеріями з бази даних.
4 Сервер формує дані в потрібний вигляд та відправляє їх назад.
Додати фільм:
5 Адміністратор заповняє дані фільму.
6 Клієнтська частина перевіряє чи всі дані заповнені.
7 Клієнтська частина відправляє дані на сервер.
8 Серверна частина перевіряє чи запит має відповідні права.
9 Серверна частина зберігає дані в базі даних.
2.5.2 Діаграма послідовності
На даній діаграмі 2.9 показано наглядний приклад в якій послідовності
будуть виконуватись дії для пошуку фільму, реєстрації користувача та додавання
коментаря користувача.
Запит на пошук фільму:
1 Запит на пошук.
2 Запит до бази даних.
3 Отримання даних.
4 Отримання результатів пошуку.
Реєстрація користувача:
1 Відправлення даних реєстрації.
2 Збереження даних.
3 Отримання збережених даних.
4 Отримання даних авторизації.
Створення коментаря:
1 Створення коментаря.
2 Збереження коментаря.
3 Отримання збереженого коментаря.
4 Отримання коментаря та успішності операції.
34
ЧДТУ 242248.009 ПЗ

Рисунок 2.9 – Діаграма послідовності каталог перегляду фільмів

2.5.3 Діаграма комунікації
Дана діаграма на рисунку 2.10 демонструю нам як буде комунікувати між
собою користувач, інтерфейс та сервер при пошуку фільму за допомогою
фільтра. Для початку користувач обирає критерії фільму що його цікавлять після
35
ЧДТУ 242248.009 ПЗ
чого йде запит на сервер із вказаними критеріями і ми отримуємо результат
пошуку який відображаємо користувачеві.

Рисунок 2.10 - Діаграма комунікації в каталозі перегляду фільмів

2.5.4 Діаграма скінченного автомату
Дана діаграма на рисунку 2.11 демонструє наглядний приклад того як буде
виконуватись фільтрація фільмів. Та те що ми в кінці отримаємо. У фільтрі ми
обираємо параметри за якими будемо фільтрувати фільми. Дальше формуємо
запит із перевіркою на коректність їх та відправляємо далі на обробку. На обробці
ми перевіряємо їх знову та шукаємо за даними параметрами. Якщо параметри
були хибні то ми видаємо помилку фільтрації. В іншому випадку якщо все добре
то ми відправляємо дані що були знайдені за вказаними параметрами.

Рисунок 2.11 - Діаграма скінченного автомату в каталозі перегляду фільмів
36
ЧДТУ 242248.009 ПЗ
Висновки до другого розділу
В другому розділі було проведено моделювання предметної області, опис
класів та їх взаємодії, а також представлено інші діаграми, що полегшить
розуміння того, як повинна функціонувати система.

37
ЧДТУ 242248.009 ПЗ
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
Опишемо розробку програмного комплексу більш детальніше. А саме
обґрунтування вибору засобів реалізації, опис структурної схема, функціональної
схеми, опис логічної схеми, розробка бази даних, розробка інтерфейсу
користувача, опис розробки програмних компонентів.
3.1.1 Обґрунтування вибору засобів реалізації
Для реалізації поставленої задачі були вибрані такі технології:
1 База даних: Була обрана PostgreSQL. Вона являється реляційною базою
даних, сама вона є відкритою та безкоштовною для використання. На
даний час її широко застосовують на різних проектах, саме тому мій
вибір впав саме на цю базу даних.
2 Серверна частина: Для серверної частини була обрана мова
програмування TypeScript, який є зручним та бистрим для використання
разом із фреймворком Nest.js. Nest.js є потужним засобом для бистрого і
зручного розгортання сервера, що працює з архітектурі програмного
забезпечення REST API. До нього були підключені додатково бібліотеки
TypeORM для взаємодії із базою даних. Swagger для зручного
відслідковування наших кінцевих точок. BCrypt для шифрування паролів
користувача. Cloudinary для зберігання медіа файлів. JWT для зручної і
бистрої взаємодії між клієнтом і сервером для зменшення кількості
запитів до бази даних.
3 Інтерфейс користувача: Для клієнтської частини також була обрана мова
програмування TypeScript, що дозволить прискорити розробку для двох
частин. Для відображення інтерфейсу було обрано фреймворк React, що
дозволяє швидко та якісно розробляти любий необхідний нам інтерфейс.
Для зменшення витрат часу на написання власних стилів було вирішено
38
ЧДТУ 242248.009 ПЗ
використовувати готову бібліотеку MUI. Вона забезпечила всіма
необхідними компонентами. Для зручного звернення до спільних даних
був використаний менеджер станів Zustund. Він є легким у вивчені та
застосування, а його швидкодії можна тільки позаздрити.
3.1.2 Опис структурної (функціональної) схеми
На рисунку 3.1 файлова структура клієнтської частини, а на рисунку 3.2
показано файлова структура серверної частини ІС.

Рисунок 3.1- Файлова структура клієнтської частини

Файлова структура клієнтської частини складається з наступних елементів:
Root – Коренева директорія де зберігаються конфігурація проекту та точка
початку виконання.
39
ЧДТУ 242248.009 ПЗ
Service – Сервіси що допомагають взаємодіяти з серверною частиною.
Components – Окремі частинки що відповідають за вивід інформації для
користувача.
App – Тут зберігаються сторінки що складаються із наборів components.
Const – Дані що є незмінними і завжди мають не змінний стан.
Helper – Класи що допомагають в певних діях і використовуються в різних
частинах коду.
Layout – Макет для сторінок який є кругом однаковий.
Store – Модулі що відповідають за зберігання інформації.
Styles – Стилі інтерфейсу що є зазделегіть визначеними.
Type – Типи даних для зручного користування.

Рисунок 3.2 – Файлова структура серверної частини
40
ЧДТУ 242248.009 ПЗ
Файлова структура серверної частини складається:
Src – Коренева директорія проекту.
Auth – Обробник для перевірки авторизації користувача.
Const – Статичні дані що не змінюють свій стан.
Exception – Помилки що видає серверна частина.
Files – Обробник для зберігання файлів.
Guard – Обробник для використання перевірки авторизації.
Models – Обробники для отримання даних з бази даних.
Pipes – Обробники що викликаються між запитами.
Seed – Тестові дані що використовуються для перевірки роботи.
3.1.3 Опис логічної схеми системи
Переходячи до логічної схеми системи розглянемо її на прикладі рисунку
3.3 логічна схема системи каталог перегляду фільмів. Для цього розпишимо
основні елементи які включатиме на нашу думку схема системи каталог
перегляду фільмів. Першим елементом розглянемо DataBase. Перейдемо до його
розгляду.
DataBase:
Це тип віддаленого сервера на якому розташовується база даних яка
зберігає в собі дані.
BackEnd:
Сервер що має в собі бізнес логіка із визначеними правилами. Через нього
відбувається вся взаємодія із базою даних, а також через нього проходить вся
логіка додатку.
Cloudinary:
Тип файлового віддаленого сервера на якому зберігаються файли ІС, що
використовуються для відображення на стороні FrontEnd.
FrontEnd:
Клієнтська частина що відповідає за відображення даних для користувача в
зрозумілому йому виді.
41
ЧДТУ 242248.009 ПЗ

Рисунок 3.3 – Логічна схема системи каталогу перегляду фільмів

3.1.4 Розробка бази даних
Проєктування бази даних — це процес створення схеми бази даних і
визначення необхідних обмежень цілісності. Для цього розглянемо кожен
елемент і розпишимо з яких елементів на нашу думку він буде складатися.
Перейдемо до розгляду елементу Відео.
1 Відео
‒ Id;
‒ назва (name);
‒ рік випуску (dateRelease);
‒ група відео (groupId);
‒ жанри (ganreId);
‒ тип (type);
‒ статус (status);
‒ категорія відео (videoCategory);
‒ видавець (publisherId);
‒ віковий рейтинг (ageRatingId).
Взаємо зв’язки:
Кожне відео може мати багато жанрів. Зв'язок багато до багатьох.
Кожне відео може мати один тип. Зв'язок один до багатьох.
Кожне відео може мати один статус. Зв'язок один до багатьох.
Кожне відео може мати один категорію відео. Зв'язок один до багатьох.
Кожне відео може мати одного видавця. Зв'язок один до багатьох.
42
ЧДТУ 242248.009 ПЗ
Кожне відео може мати один віковий рейтинг. Зв'язок один до багатьох.
Кожне відео може мати багато груп. Зв'язок багато до багатьох.
Перейдемо до розгляду елемента інформація про відео.
2 Інформація про відео:
‒ Id;
‒ відео (videoId);
‒ опис фільму (description);
‒ головні персонажі (mainCharacter);
‒ трейлери (trailers);
‒ зображення (pictures);
‒ постер (icon);
‒ кількість серій (countSeries);
‒ тривалість (duration).
Взаємо зв’язки:
Кожна інформація про відео може мати лише одне відео. Зв’язок один до
одного.
Перейдемо до розгляду елемента відео рейтинг.
3 Відео рейтинг:
‒ Id;
‒ відео (videoid);
‒ користувач (userid);
‒ рейтинг (rate).
Взаємо зв’язки:
Кожен рейтинг відео може мати одне відео. Зв'язок один до багатьох.
Кожен рейтинг відео може мати одного користувача. Зв'язок один до
багатьох.
Перейдемо до розгляду елемента сезон.
4 Сезон:
‒ id;
‒ назва (name);
‒ відео (videoid);
‒ номер (number).
Взаємо зв’язки:
Кожен сезон може мати одне відео. Зв'язок один до багатьох.
Перейдемо до розгляду елемента відео серія.
43
ЧДТУ 242248.009 ПЗ
5 Відео серія:
‒ id;
‒ відео (videoid);
‒ назва (name);
‒ серія (series);
‒ дата виходу (date);
‒ статус серії (status);
‒ сезон (seasonid).
Взаємо зв’язки:
Кожна відео серія може мати одне відео. Зв'язок один до багатьох.
Кожна відео серія може мати однин сезон. Зв'язок один до багатьох.
Перейдемо до розгляду елемента група відео.
6 Група відео:
‒ id;
‒ назва (name);
‒ відео (videoid).
Взаємо зв’язки:
Кожна група відео може мати багато відео. Зв'язок багато до багатьох.
Перейдемо до розгляду елемента жанри.
7 Жанри:
‒ id;
‒ назва (name);
‒ опис (description).
Перейдемо до розгляду елемента видавець.
8 Видавець
‒ id;
‒ назва (name);
‒ опис (description).
Перейдемо до розгляду елемента віковий рейтинг.
9 Віковий рейтинг
‒ id;
‒ назва (name);
‒ опис (description).
Перейдемо до розгляду елемента користувач.
44
ЧДТУ 242248.009 ПЗ
10 Користувач
‒ id;
‒ логін (login);
‒ пароль (password);
‒ ім’я (nickname);
‒ роль (roleid).
Взаємо зв’язки:
Кожен користувач може мати багато ролей. Зв'язок багато до багатьох.
Перейдемо до розгляду елемента ролі.
11 Ролі:
‒ id;
‒ назва (name).
Перейдемо до розгляду елемента список перегляду користувача.
12 Список перегляду користувача
‒ id;
‒ назва (name);
‒ користувач (userid).
Взаємо зв’язки:
Кожна список перегляду може мати одного користувача. Зв'язок один до
багатьох.
Перейдемо до розгляду елемента список перегляду.
13 Список перегляду
‒ id;
‒ список перегляду користувача (userlistviewid);
‒ відео (videoid).
Взаємо зв’язки:
Кожен список перегляду може мати один список перегляду користувача.
Зв'язок один до багатьох.
Перейдемо до розгляду елемента коментарі.
14 Коментарі:
‒ id;
‒ користувач (userid);
‒ відео (videoid);
‒ коментар (comment).
Взаємо зв’язки:
45
ЧДТУ 242248.009 ПЗ
Кожен коментар може мати одне відео. Зв'язок один до багатьох.
Кожен коментар може мати одного користувача. Зв'язок один до багатьох.
Перейдемо до розгляду елемента рейтинг коментарів.
15 Рейтинг коментарів:
‒ id;
‒ коментар (commentid);
‒ користувач (userid);
‒ рейтинг (rate).
Взаємо зв’язки:
Кожен рейтинг коментаря може мати одного користувача. Зв'язок один до
багатьох.
Кожен рейтинг коментаря може мати однин коментар. Зв'язок один до
багатьох.

Рисунок 3.4 – Діаграма бази даних каталогу перегляду фільмів
46
ЧДТУ 242248.009 ПЗ
3.1.5 Розробка інтерфейсу користувача
У сучасному цифровому ландшафті зручний і візуально привабливий
інтерфейс має вирішальне значення для успіху будь-якого веб-сайту чи програми.
Ось тут і вступає в гру дизайн UI/UX[12]. Дизайн користувальницького
інтерфейсу (UI) зосереджується на візуальних елементах і макеті продукту, тоді
як дизайн UX (користувацький досвід) зосереджується на тому, як користувачі
взаємодіють із продуктом і відчувають його. [13]
Інтерфейс користувача повинен бути зручним та швидким. Так щоб при
першому погляду на нього у користувача не виникало питань до того як ним
користуватись і куди натискати.

Рисунок 3.5 – Головна сторінка

До прикладу коли користувач заходить на сайт, необхідно щоб йому в очі
кидалось тільки необхідне та потрібне. Із рисунку 3.5 вище можна побачити що
користувача не буде нічого відволікати і все необхідне йому просто перед ним.
47
ЧДТУ 242248.009 ПЗ

Рисунок 3.6 – Карточка фільму

Також із карточки фільму рисунок 3.6 ми одразу відокремлюємо необхідну
для користувача інформацію у вигляді назви, рейтингу, жанри, рік виходу та
віковий рейтинг. Саме ці дані для користувача будуть необхідні.

Рисунок 3.7 – Сторінка фільму

На сторінці фільму рисунок 3.7 користувач буде отримувати детальну
інформацію яка його цікавить. Все необхідне йде структуроване та відокремлена
для зручного перегляду.
48
ЧДТУ 242248.009 ПЗ

Рисунок 3.8 – Коментарі

Коментарі на рисунку 3.8 є корисною функцією для того аби поділитись
думкою із іншими, також це допоможе користувачеві подивитись в нас на сайті
коментарі, а не перейти на інший.
3.1.6 Опис розробки програмних компонентів
Модуль “Авторизації користувача”
Призначення: Використовується для реєстрації, або входу користувача у систему.
Зв’язки з іншими компонентами:
‒ Використовує модуль «Створення токена» для створення токена
користувача.
‒ Використовує модуль «Користувачі» для обробки даних користувача.
Особливості реалізації алгоритму:
@Injectable()
export class AuthService {

constructor(
private usersService: UsersService,
private jwtService: JwtService
) {
}
async login(dto: AuthDto) {
console.log(dto);
const user: UserDto = await this.validation(dto);
return this.generateToken(user);
}
async registration(dto: CreateUserDto, useRole: boolean) {
const exists = await this.usersService.getByEmail(dto.email);
if (exists)
49
ЧДТУ 242248.009 ПЗ
throw new ExistsException(`User already registration by email:
${dto.email}.`);
console.log("Start registration in auth service!");
const hashPassword = await bcrypt.hash(dto.password, 5);
const user: UserDto = await this.usersService.registration({
...dto, password: hashPassword }, useRole);
return this.generateToken(user);
}
private generateToken(user: UserDto) {
const payload: TokenFormat = { id: user.id, nickname:
user.nickname, roles: user.roles };
return { token: this.jwtService.sign(payload) };
}
private async validation(dto: AuthDto) {
const user = await this.usersService.getByEmail(dto.login);
if (!user)
throw new UnauthorizedException("Bad email or password.");
const passwordEquals = await bcrypt.compare(dto.password,
user.password);
if (passwordEquals) {
return new UserDto(user);
}
throw new UnauthorizedException("Bad email or password.");
}
}
Модуль “Фільми”
Призначення: Використовується для отримання фільмів, або їх додавання у
систему
Зв’язки з іншими компонентами:
‒ Використовує модуль «Додаткова інформація про фільм» для додавання чи
отримання додаткової інформації про фільм.
‒ Використання модуля «Сервіс для файлів» для зберігання файлів на
хмарному сервері.
‒ Використання модуля «Жанри» для додавання жанрів та отримання до
фільму.
‒ Використання модуля «Віковий рейтинг» для додавання та отримання
вікового рейтингу до фільму.
‒ Використання модуля «Видавець» для додавання та отримання видавця до
фільму.
‒ Використання модуля «Рейтинг фільму» для отримання рейтингу до
фільму.
‒ Використовує модуль «Бази даних» для отримання даних про фільм, або їх
збереження.
Особливості реалізації алгоритму:
@Injectable()
50
ЧДТУ 242248.009 ПЗ
export class VideoService {
constructor(
@InjectRepository(Video)
private videoRepository: Repository<Video>,
private videoInfoService: VideoInfoService,
private filesService: FilesService,
@InjectRepository(Genre)
private genreService: Repository<Genre>,
@InjectRepository(Publisher)
private publisherService: Repository<Publisher>,
@InjectRepository(AgeRating)
private ageRatingService: Repository<AgeRating>,
@InjectRepository(Group)
private groupService: Repository<Group>,
@InjectRepository(VideoRate)
private videoRateRepository: Repository<VideoRate>,
@InjectRepository(VideoSeries)
private videoSeriesRepository: Repository<VideoSeries>,
) {}
async create(dto: CreateVideoCombineDto, files) {
console.log('VideoService', 'Create', dto);
const videoDto: CreateVideoDto = dto;

const existsAtr: {
tag: string;
exists: boolean;
}[] = [];
existsAtr.push({
tag: 'genreIds',
exists: !!videoDto.genreIds,
});
existsAtr.push({
tag: 'publisherId',
exists: await this.publisherService.exists({
where: { id: videoDto.publisherId },
}),
});
existsAtr.push({
tag: 'ageRatingId',
exists: await this.ageRatingService.exists({
where: { id: videoDto.ageRatingId },
}),
});

if (files.icon && files.icon[0])
videoDto.icon = await this.filesService.createFile(
TypeFile.PICTURES,
files.icon[0],
);
const entityVideo = this.videoRepository.create(videoDto);
entityVideo.genre = await this.genreService.findBy({
id: In(videoDto.genreIds),
});

if (videoDto.groupId)
entityVideo.group = await this.groupService.findBy({
id: videoDto.groupId,
});
const video: Video = await
this.videoRepository.save(entityVideo);
const videoInfoDto: CreateVideoInfoDto = {
trailers: dto.trailers,
videoId: video.id,
description: dto.description,
pictures: dto.pictures,
mainCharacters: dto.mainCharacters,
countSeries: dto.countSeries,
duration: dto.duration,
};
const videoInfo = await this.videoInfoService.createInfo(
video.id,
videoInfoDto,
files,
);
const series = await this.createSeries(video.id, dto.series);
const response = { video, videoInfo, series } as ResponseVideo;
console.log('VideoService', 'Create Response', response);
return response;
}
async createSeries(
videoId: number,
dto: CreateVideoSeriesDto[],
): Promise<ResponseVideoSeriesDto[]> {
console.log(dto);
if (!dto) return [];
52
ЧДТУ 242248.009 ПЗ

async getAll(dto: GetCommentsDto, auth: TokenFormat) {
console.log('Comments Service: dto ', dto)
const search: { videoId: number, commentsId?: number } =
{videoId: dto.videoId};
if (dto.commentId)
search.commentsId = dto.commentId;
console.log('Comments Service: search ', search)
const take = dto.count || 20;
const skip = dto.count * dto.page;

console.log('Comments Service:', `take: ${take}. skip:
${skip}`);

const exists = await this.videoRepository.exists({where:
{id: dto.videoId}});
if (!exists) {
throw new BadRequestException(`Request param videoId is
null or bad value!`);
}
const commentsCount = await
this.commentsRepository.findAndCount({
where: {...search},
relations: {
user: true,
comments: true,
},
select: {
user: {id: true, nickname: true, avatar: true}
},
order:{
createdAt: 'asc'
}
})

const comments = commentsCount[0];
const newComments = [];
for (const comment of comments) {
const likeCount = await
this.commentsRateRepository.count({
where: {
commentsId: comment.id,
rate: true
}
});

56
ЧДТУ 242248.009 ПЗ
const dislikeCount = await
this.commentsRateRepository.count({
where: {
commentsId: comment.id,
rate: false
}
});

const userLike = await
this.commentsRateRepository.findOne({
where: {
commentsId: comment.id,
userId: auth ? auth.id : 0
}
});

newComments.push({...comment, likeCount, dislikeCount,
userLike: userLike ? userLike.rate : 'none'})
}

console.log('Comments Service:', 'newComments date',
newComments);

return new ResponseCountCommentsDto(commentsCount[1],
newComments);
}
}
3.2 Тестування системи
В даному розділі буде проводитись тестування системи з різними
підходами. Дана частина продемонструє готовність ПЗ до впровадження та
виконання своїх поставлених задач.
3.2.1 Модульне тестування
Для даного тестування було обрано мову програмування TypeScript по тій
особливості що на ній написано дві частини системи.
Також для зручного тестування було обрано бібліотеку Jest[10], яка надає
зручні методи та засоби для тестування. Її особливість полягає в тому що для
написання тестів потрібно створити окремий файл і в нього підключати те що
нам необхідно протестувати. Також для зручності відображення тестування
існують додаткові плагіни що виводять результат не в консоль, а в графічний
інтерфейс.

57
ЧДТУ 242248.009 ПЗ

Рисунок 3.9 – Тест для відображення зображення

Рисунок 3.10 – Тест для відображення детальної інформації про фільм
58
ЧДТУ 242248.009 ПЗ

Рисунок 3.11 – Тест для відображення банера фільму
Таблиця № 3.1
Результат модульного тестування
Модулі тестування Результат
RenderImg.test.tsx Успішно
VideoInfo.test.tsx Успішно
VideoBanner.test.tsx Успішно

3.2.2 Інтеграційне тестування
Для даного виду тестування також було залучено бібліотеку Jest. Її
особливістю також є те що можна протестувати одразу і інтеграцію з іншими
компонентами. Даний функціонал є дуже зручний в нашому випадку.
59
ЧДТУ 242248.009 ПЗ

Рисунок 3.12 – Тест для перевірки відображення фільму

Рисунок 3.13 – Тест для перевірки роботи фільтру
60
ЧДТУ 242248.009 ПЗ
Таблиця № 3.2
Результат інтеграційного тестування
Компонент Результат
Video.test.tsx Успішно
Filter.test.tsx Успішно

3.2.3 Системне тестування
Проведення даного тестування дасть нам зрозуміти чи система відповідає
нашим вимогам. А саме дасть побачити на візуальну відповідність, те чи має
користувач той функціонал що був протестований вище. Дане тестування
продемонструє готовність системи зі сторони користувача для її використання
наведено на рисунках 3.14 - 3.21.

Рисунок 3.14 – Відображення фільтра
61
ЧДТУ 242248.009 ПЗ

Рисунок 3.15 – Фільтрація фільмів

Рисунок 3.16 – Відображення сторінки списку фільмів на екранах комп’ютера
62
ЧДТУ 242248.009 ПЗ

Рисунок 3.17 – Відображення списку фільмів на телефонах

Рисунок 3.18 – Відображення головної сторінки на екранах комп’ютера
63
ЧДТУ 242248.009 ПЗ

Рисунок 3.19 – Відображення головної сторінки на телефонах

Рисунок 3.20 – Відображення сторінки фільму на екранах комп’ютера
64
ЧДТУ 242248.009 ПЗ

Рисунок 3.21 – Відображення сторінки фільму на телефонах

Таблиця № 3.3
Результат системного тестування
Системне тестування Результат
Перевірка відображення фільтру Успішно
Перевірка відображення списку фільмів Успішно
Перевірка на відображення головної сторінки Успішно
Перевірка на відображення сторінки фільму Успішно

3.2.4 Приймальне тестування
Після проведення всіх тестів можна зрозуміти що програмний комплекс
повністю готовий до використання. Впровадження відбувається на
безкоштовному хосту Vercel[14] що зображений на рисунку 3.22. Який як для
початку зможе забезпечити стабільною роботою. Також є зручне відображення
станів наших збірок. Чи працюють вони чи ні та коли ми їх завантажили.
65
ЧДТУ 242248.009 ПЗ
В ході приймального тестування система показала що вона успішно працює
та всі її частини взаємодіють між собою так як від неї це очікується.

Рисунок 3.22 – Завантажені збірки на сервер

Таблиця № 3.4
Результат приймального тестування
Частини додатку Результат
Серверної частини Успішно
Клієнтської частини Успішно
Сервера з базою даних Успішно

3.3 Приклади впровадженого програмного комплексу
Для створення даної системи були використана клієнт-серверна
архітектура. Для обох частин було обрана спільна мова програмування
TypeScript. Вибір однієї мови для створення обох частин дозволить заощади
сили на вивчення тонкощів різних мов програмування.
Отже, для клієнтської частини був обраний фреймворк React, який
66
ЧДТУ 242248.009 ПЗ
забезпечує відображення інтерфейсу. Також для стилізації додатку було додано
готову бібліотеку стилів MUI, що дозволило зменшити час на створення власного
дизайну. Для зберігання спільних даних додатка був використаний менеджер
станів Zustund, який є бистрий та зручний.
Для серверної частини було обраний фреймворк Nest. Він вже має всі
необхідні обробники та методи для обміну даними за допомогою Rest API. Для
комунікації з базою даних була підключена бібліотека TypeORM, яка забезпечить
зручну комунікацію за допомогою об’єктів, без необхідності писати власні SQL
запити. Також для безпечної комунікації було додано JWT токен. Який має за
мету зменшити кількість звертань до бази даних та усуває необхідність постійно
передавати логін та пароль в місця де потрібна авторизація.
В ролі місця для збереження всіх даних була обрана сучасна реляційна база
даних Postgre. Яка також являється відкритим продуктом. Що дозволяє всім
охочим допомагати в її покращені та виправленні помилок. Також дана база
даних є продуктивною та не вимогливим рішення, що дозволить розмістити її на
любому пристрою що має накопичувач та доступом до мережі інтернет.
Отже результат клієнтської частини виглядає наступним чином:
Головна сторінка сайту рисунок 3.23 починається з головної сторінки
показує базову інформацію, яка є необхідною для користувача. На ній також
можна побачити дати виходу на тиждень фільмів, мультфільмів, серіалів і так
далі.

Рисунок 3.23 – Головна сторінка
67
ЧДТУ 242248.009 ПЗ
Наступним рисунком є рисунок 3.24 карточка яка дозволяє отримати базову
необхідну інформацію про фільм. Вона містить: рейтинг, назви, дату виходу, тип,
жанри та віковий рейтинг. Ця інформація є необхідною для базового розуміння
що представляє із себе фільм.

Рисунок 3.24 – Карточка фільму

На рисунок 3.25 показано верхнє навігаційне меню дозволяє нам швидко
переходити між головними вкладками. Також на ньому показано те чи
авторизований користувач чи ні.

Рисунок 3.25 – Верхнє навігаційне меню
68
ЧДТУ 242248.009 ПЗ
На рисунку 3.26 показано сторінка фільму яка необхідна для ознайомлення
із детальною інформацією про фільм. Вона також дозволяє переглянути кадри із
фільму на рисунку 3.27 та трейлери на рисунку 3.28, які можуть допомогти у
виборі для перегляду.

Рисунок 3.26 – Сторінка фільму

Рисунок 3.27 – Кадри фільму
69
ЧДТУ 242248.009 ПЗ

Рисунок 3.28 – Трейлери до фільму

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

Рисунок 3.29 – Коментарі до фільму
70
ЧДТУ 242248.009 ПЗ
На рисунку 3.30 показані коментарі, що також мають власні оцінки, що
дозволяє зрозуміти чи є даний коментар корисним чи ні, та те скільки людей
думають про дану думку користувача.

Рисунок 3.30 – Коментар користувача

На сайті також присутня реєстрація користувача, що продемонстрована на
рисунку 3.31. Коли користувач є зареєстрованим йому доступно більше функцій.
Він зможе залишати оцінку до фільму та коментар. Також користувач зможе
додавати переглянуті фільми до списку переглядів щоб контролювати свої
перегляди.

Рисунок 3.31 – Сторінка входу
71
ЧДТУ 242248.009 ПЗ
Коли користувач авторизований у системі його навігаційне меню де що
змінюється. Замість кнопки увійти в нього зявляється кнопка профіль. Що
дозволить зайти в особистий профіль користувача. Дана зміна показано на
рисунку 3.32.

Рисунок 3.32 – Навігаційне меню

У профілю користувача можна побачити список фільмів користувача та те
які фільми де знаходяться. Це можна побачити на рисунку 3.33.

Рисунок 3.33 – Профіль користувача

Якщо користувачеві потрібно вийти із системи то для цього передбачена
спеціальна кнопка виходу що зображена на рисунку 3.34. Після її натискання
користувач вийде із системи і потрапить на сторінку входу.
72
ЧДТУ 242248.009 ПЗ

Рисунок 3.34 – Кнопка виходу системи

Елемент списку відображає лише мінімальну інформацію про фільм. Також
за потреби фільм можна бистро вилучити із списку, якщо він був доданий
помилково. Цей елемент можна побачити на рисунку 3.35.

Рисунок 3.35 – Елемент списку

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

73
ЧДТУ 242248.009 ПЗ

Рисунок 3.36 – Сторінка фільтрації

Фільтр на рисунку 3.37 та 3.38 має всі елементи фільтрації. За допомогою
нього можна знайти фільм за жанрами, віковим рейтингом, категорією, типом,
статусом, сезоном виходу та роками. Він дозволить доволі точно знайти фільм за
вашими потребами.

Рисунок 3.37 – Сторінка фільтрації фільмів
74
ЧДТУ 242248.009 ПЗ

Рисунок 3.38 – Заповнений фільтр

Якщо користувач зайде в систему як адміністратор то йому будуть доступні
функції для адміністрування. Також з’явиться кнопка щоб можна було перейти до
панелі адміністратора. Ці кнопки продемонстровані на рисунку 3.39.

Рисунок 3.39 – Кнопка для панелі адміністратор
75
ЧДТУ 242248.009 ПЗ
На сторінці адміністратора що зображена на рисунку 3.40 - 3.41 можна
швидко та зручно додати новий фільм. Також за необхідності можна додати інші
властивості.

Рисунок 3.40 – Сторінка адміністратора

Рисунок 3.41 – Сторінка адміністратора
76
ЧДТУ 242248.009 ПЗ
Також адміністратор може редагувати наявні фільми. Для цього йому
потрібно перейти на необхідний фільм, після чого натиснути на відповідну
кнопку, що зображена на рисунку 3.42.

Рисунок 3.42 – Кнопка панель адміністратора для редагування фільму

На рисунку 3.43 зображена сторінка редагування, що відповідає за
редагування фільму, тобто за оновлення даних про фільм. Також вона є дещо
схожа на додавання фільму про те відповідає за інший функціонал.

Рисунок 3.43 – Сторінка редагування фільму
77
ЧДТУ 242248.009 ПЗ
Висновки до третього розділу
Отже в третьому розділі ми отримали повне розуміння ІС. Розглянули її
основні складові та вибір технологій. Описали отриманні результати які нас
повністю задовільнили. Також система була протестована різними видами. Після
всіх видів тестування ніяких помилок виявлено не було, що може засвідчувати
що наша система готова до роботи.

78
ЧДТУ 242248.009 ПЗ
ВИСНОВКИ
Отже, дана інформаційна система буде корисною для користувачів що
бажають користуватись україномовним продуктом. Який також може
задовільнити всі необхідні потреби користувача. Також використання даної
системи можлива для поширення українських фільмів. Можлива публікація їх
саме на даній системі, що може значно полегшити та покращити механізми
популяризації українського контенту.
Для розробки системи було обрана клієнт-серверна архітектура. Де в ролі
сервера виступав фреймворк NestJS, а в ролі клієнтської частини фреймворк
ReactJS. Для написання двох частин була обрана спільна мова програмування
TypeScript, що мало за мету полегшити розробку двох частин.
Для збереження даних була обрана продуктивна реляційна база даних
Postgres. За допомогою неї було збережено всі необхідні дані для використання
системи.
В ході реалізації ніяких труднощів виявлено не було. Система була
спроектована з урахуванням подальшого вдосконалення. За потреби додавання
нового, або специфічного функціоналу який не входи в першочергову поставлену
задачу. Також продуктивність створеної системи є на висоті. Її використання
можливе на любих малопродуктивних пристроях що мають браузер та
підключення до мережі інтернет.
Також для відповідності до вимог система пройшла всі необхідні тести. Як
з впевненістю показали що вона готова до свого впровадження та роботи. Вона
повністю відповідає на поставлені вимоги та задовольняє кінцевого користувача.
Також її робота можлива на різних типах дисплеїв. Від телефонних до великих
комп’ютерних. Це дозволить залучити велику аудиторію на різних пристроях.
Також при цьому зручність використання залишається відмінною. Ніяких
проблем не виникає на різних типів екранах. Вся інформація відображається
вірно.

79
ЧДТУ 242248.009 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Документація до фреймворку React: https://uk.legacy.reactjs.org/
2 Документація до бібліотеки компонентів React MUI: https://mui.com/material-
ui/getting-started/
3 Документація до менеджера станів Zustand:
https://docs.pmnd.rs/zustand/getting-started/introduction
4 Як використовувати JWT: https://devzone.org.ua/post/iak-vykorystovuvaty-json-
web-tokens-jwt-dlia-avtentyfikatsiyi
5 Документація до фреймворку Nest: https://docs.nestjs.com/
6 Документація до бібліотеки TypeORM: https://typeorm.io/
7 Документація до бази даних Postgre: https://typeorm.io/
8 Тема на форумі для ІТ спеціалістів: https://dou.ua/forums/topic/42366/
9 Методичні вказівки до роботи бакалавра:
Кваліфікаційна_робота_бакалавра_нове_ПЗАС_2023.doc
10 Документація до бібліотеки Jest: https://jestjs.io/uk/docs/getting-started
11 Стаття на Wiki. Проєктування баз даних:
https://uk.wikipedia.org/wiki/%D0%9F%D1%80%D0%BE%D1%94%D0%BA%
D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F_%D0%B1%
D0%B0%D0%B7%D0%B8_%D0%B4%D0%B0%D0%BD%D0%B8%D1%85
12 Дизайн графічного інтерфейсу: https://training.qatestlab.com/blog/technical-
articles/what-is-graphical-user-interface-design/
13 UI/UX Дизайн: принципи та методи створення зручного інтерфейсу
користувача: https://whileweb.com/uk/blog/uiux-dizajn-principi-ta-metodi-
stvorennya-zruchnogo-interfejsu-koristuvacha/
14 Vercel документація до того як задеплоїти проект:
https://vercel.com/docs/deployments/overview

80

ДОДАТОК А

ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2024 р.

Програмне забезпечення каталог перегляду фільмів

Специфікація
482. ЧДТУ 24 2248.009
Листів 2

Розробник ________________ Майчук Т. М.
Керівник ________________ Немченко В. В.

2024

Позначення Найменування Примітка
Документація
482.ЧДТУ. 24 2248 12 01 Текст програми
482.ЧДТУ. 24 2248 34 01 Інструкція користувачеві
482.ЧДТУ. 24 2248 90 01 Графічні матеріали

82

ДОДАТОК Б

Програмне забезпечення каталог перегляду фільмів

Текст програми
482.ЧДТУ. 24 2248 12 01
Листів 7

Розробник ________________ Майчук Т. М.

2024

482.ЧДТУ. 24 2248 12 01
-- GanreState
type State = {
genre: BaseResponse[];
isLoad: boolean;
}
type Action = {
add: (brand: BaseResponse) => void;
getGenre: () => Promise<void>;
getAndReload: () => Promise<void>;
remove: (id: number) => void;
}
const initState: State = {
genre: [],
isLoad: false,
}
export const useGenreStore = create<State &
Action>()(persist((set, get) => ({
...initState,
add(brand) {
set({genre: [...get().genre, brand]});
},
async getGenre() {
if (get().genre.length > 0)
return Promise.resolve();
console.log("useGenreStore", "Load arr brand. getGenre",
get().genre)
await get().getAndReload();
},
async getAndReload() {
if (get().isLoad)
return Promise.resolve();
set({isLoad: true})
const genre = await CategoriesService.getGenre();
set({genre: genre || [], isLoad: false})
},
remove(id) {
const newBrands = get().genre.filter(value => value.id != id);
set({genre: newBrands});
}
}), {
name: 'useGenreStore',
storage: createJSONStorage(() => sessionStorage),
}));
-- Video component
export interface VideoProps {
id: number;
videoDetail: VideoDetail;
videoSeries?: boolean;
}
function Video({id, videoDetail}: VideoProps) {
console.log("Video", JSON.stringify(videoDetail), "id", id)
const typeLink = videoDetail.video.videoCategory;
console.log('Video:', 'link', typeLink);
84
482.ЧДТУ. 24 2248 12 01
const [video] = useState<VideoDetail>(videoDetail);
const [value, setValue] = React.useState('1');
const [view, setView] = useState<string>('1');
const handleChange = (event: React.SyntheticEvent, newValue:
string) => {
setValue(newValue);
};
const handleChangeView = (event: React.SyntheticEvent, newValue:
string) => {
setView(newValue);
};
const {user, token, getOut} = useAuthStore();
const [isAdmin, setIsAdmin] = useState<boolean>(false);
useEffect(() => {
if (!user)
return;
const admin = user.roles.includes(Roles.ADMIN);
setIsAdmin(admin);
}, []);
if (!videoDetail)
return (
<Container>
<Skeleton variant="rectangular" height={'100%'}
width={'100%'}/>
</Container>
)
return (
<Container>
<Paper>
<Box p={1}>
{
isAdmin && <Button href={`/${typeLink}/${id}/update`}
variant="outlined">
Admin panel
</Button>
}
<Stack direction={{xs: 'column', sm: 'row'}}>
<Stack alignItems={'center'}>
{
video.video.icon ? <VideoBanner
icon={video.video.icon}/> :
<Skeleton>
<VideoBanner icon={video.video.icon}/>
</Skeleton>
}
<UserListViewButton videoId={id}/>
<Divider sx={{width: '100%', mt: '6px'}}
orientation="horizontal" variant="fullWidth"/>
</Stack>
<VideoInfo typeLink={typeLink} {...video}/>
</Stack>
<Typography p={1}>
{video.videoInfo.description}
</Typography>
<RenderSeries series={video.series}/>
85
482.ЧДТУ. 24 2248 12 01
<TabContext value={view}>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<TabList onChange={handleChangeView} aria-label="lab
API tabs example">
<Tab label="Кадри" value="1"/>
<Tab label="Трейлери" value="2"/>
</TabList>
</Box>

<Stack sx={{
maxHeight: {
xs: 230,
sm: 500,
md: 600
}, minHeight: 80
}}>
<TabPanel sx={{padding: 1}} value="1">
{
video.videoInfo.pictures &&
video.videoInfo.pictures.length > 0 ?
<Carousel
fullHeightHover
animation={"slide"}
duration={800}
indicators={false}
>
{video.videoInfo.pictures.map((value, index)
=>
<RenderImg sx={{
height: {xs: 230, sm: 500, md: 600},
}} src={value}
alt={`Трейлер до
${videoCategories[video.video.videoCategory]}
${video.video.name[0]} ${index + 1}`}
/>
)}
</Carousel>
:
<Typography variant='h3' textAlign='center'>
Інформація відсутня
</Typography>
}
</TabPanel>
<TabPanel sx={{padding: 1, flexGrow: 1}} value="2">
{
video.videoInfo.trailers &&
video.videoInfo.trailers.length > 0 ?
<Carousel
fullHeightHover
animation={"slide"}
duration={800}
navButtonsAlwaysVisible={false}
autoPlay={false}
>
{video.videoInfo.trailers.map((value) =>
86
482.ЧДТУ. 24 2248 12 01
<Box key={value} sx={{
height: {xs: 230, sm: 500, md: 600},
}}>
<iframe width="100%" height="100%"
src={value}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay;
clipboard-write; encrypted-media; gyroscope; picture-in-picture;
web-share"
referrerPolicy="strict-origin-
when-cross-origin" allowFullScreen></iframe>
</Box>
)}
</Carousel>
:
<Typography variant='h3' textAlign='center'>
Інформація відсутня
</Typography>
}
</TabPanel>
</Stack>
</TabContext>
<BreakBlock2/>
</Box>
<Box sx={{width: '100%', typography: 'body1'}}>
<TabContext value={value}>
<Box sx={{borderBottom: 1, borderColor: 'divider'}}>
<TabList onChange={handleChange} aria-label="lab API
tabs example">
<Tab label="Коментарі" value="1"/>
</TabList>
</Box>
<TabPanel sx={{padding: 1}} value="1">
<Comments videoId={video.video.id}/>
</TabPanel>

</TabContext>
</Box>
</Paper>
</Container>
);
}
export default Video;
-- BrowserRouter
export const router = createBrowserRouter([
{
path: "/",
element: <MainPage/>,
}, {
path: Links.user,
element: <UserPage/>,
}, {
path: Links.admin,
87
482.ЧДТУ. 24 2248 12 01
element: <AdminPage/>,
}, {
path: Links.movie,
element: <MovieListPage/>,
}, {
path: Links.anime,
element: <AnimePage/>,
}, {
path: Links.serial,
element: <SerialPage/>,
}, {
path: Links.carton,
element: <CartonListPage/>,
}, {
path: '/:videoCategory/:id',
element: <DetailPage/>
}, {
path: '/:videoCategory/:id/update',
element: <UpdateVideoPage/>
},
{
path: "*",
element: <div>About</div>,
},
]);
-- VideoService
class VideoService {

async create(form: FormData) {
return await ApiService.postWithFile('/video', form);
}
async createSeries(videoId: number, series: []) {
return await ApiService.post('/video-series', {videoId,
series})
}
async getVideoDetails(id: number) {
const url = `/video?id=${id}`
const date = await ApiService.get(url) as VideoDetail;
console.log(date);
return date;
}
async getVideoByFilter(queryObg: FilterVideo) {
queryObg.page = queryObg.page || 0;
console.log('VideoService', 'getVideoByFilter:', queryObg)
const query = queryString.stringify(queryObg, {arrayFormat:
'comma', skipNull: true, skipEmptyString: true})
const url = `/video/filter?${query}`;
return await ApiService.get(url) as {
rows: VideoType[],
page: number,
count: number
} || {rows: [], count: 0, page: 0}
}
88
482.ЧДТУ. 24 2248 12 01
async getVideoByName(name: string, videoCategory: VideoCategory,
page: number = 0, limit: number = 20) {
const url = `/video/searchByName?`
const query = queryString.stringify({page, name,
videoCategory, limit}, {
arrayFormat: 'comma',
skipNull: true,
skipEmptyString: true
})
return await ApiService.get(url + query) as {
rows: VideoType[],
page: number,
count: number
}
}
async getVideoByDayOfWeek() {
const url = `/video-series/seriesOfDay`;
return await ApiService.get(url) as [Series[]] || [];
}
async updateVideo(form: FormData, id: number) {
return await ApiService.putWithFile(`/video/${id}`, form);
}
}
export default new VideoService()

89

ДОДАТОК В

Програмне забезпечення каталог перегляду фільмів

Інструкція користувачеві
482. ЧДТУ 24 2248 34 01
Листів 11

Розробник ________________ Майчук Т. М.

2024

482. ЧДТУ 24 2248 34 01
Розглянута програмна система є WEB-сайтом, і для її функціонування
необхідно мати браузер та підключення до мережі інтернет:
Рисунок В.1 це головна сторінка сайту показує базову інформацію, яка є
необхідною для користувача. На ній також можна побачити дати виходу на
тиждень фільмів, мультфільмів, серіалів і так далі.

Рисунок В.1 – Головна сторінка

Карточка що на рисунку В.2 дозволяє отримати базову необхідну
інформацію про фільм. Вона містить: рейтинг, назви, дату виходу, тип, жанри та
віковий рейтинг. Ця інформація є необхідною для базового розуміння що
представляє із себе фільм.

Рисунок В.2 – Карточка фільму
91
482. ЧДТУ 24 2248 34 01
Верхнє навігаційне меню розташоване на рисунку В.3 дозволяє нам
швидко переходити між головними вкладками. Також на ньому показано те чи
авторизований користувач чи ні.

Рисунок В.3 – Верхнє навігаційне меню

Сторінка фільму що знаходиться на рисунку В.4 необхідна для
ознайомлення із детальною інформацією про фільм. Вона також дозволяє
переглянути кадри із фільму рисунок В.5 та трейлери рисунок В.6, які можуть
допомогти у виборі для перегляду.

Рисунок В.4 – Сторінка фільму
92
482. ЧДТУ 24 2248 34 01

Рисунок В.5 – Кадри фільму

Рисунок В.6 – Трейлери до фільму

Також на сторінці фільму розміщують коментарі які можна побачити на
рисунку В.7, де можна ознайомитись, або залишити власний. Дана функція
дозволяє зрозуміти користувачам думку оточуючих про фільм.
93
482. ЧДТУ 24 2248 34 01

Рисунок В.7 – Коментарі до фільму

Коментарі також мають власні оцінки, що дозволяє зрозуміти чи є даний
коментар корисним чи ні, та те скільки людей думають про дану думку
користувача наглядний приклад є на рисунку В.8.

Рисунок В.8 – Коментар користувача

На сайті також присутня реєстрація користувача що показана на рисунку
В.9. Коли користувач є зареєстрованим йому доступно більше функцій. Він
зможе залишати оцінку до фільму та коментар. Також користувач зможе
94
482. ЧДТУ 24 2248 34 01
додавати переглянуті фільми до списку переглядів щоб контролювати свої
перегляди.

Рисунок В.9 – Сторінка входу

Коли користувач авторизований у системі його навігаційне меню де що
змінюється. Замість кнопки увійти в нього зявляється кнопка профіль яку
можна побачити на рисунку В.10. Що дозволить зайти в особистий профіль
користувача.

Рисунок В.10 – Навігаційне меню

У профілю користувача можна побачити список фільмів користувача та те
які фільми де знаходяться це зображено на рисунку В.11.
95
482. ЧДТУ 24 2248 34 01

Рисунок В.11 – Профіль користувача

Якщо користувачеві потрібно вийти із системи то для цього передбачена
спеціальна кнопка виходу. Після її натискання користувач вийде із системи і
потрапить на сторінку входу. Дана кнопка зображена на рисунку В.12.

Рисунок В.12 – Кнопка виходу системи

Елемент списку відображає лише мінімальну інформацію про фільм.
Також за потреби фільм можна швидко вилучити із списку, якщо він був
доданий помилково. Елемент списку зображено на рисунку В.13.

Рисунок В.13 – Елемент списку
96
482. ЧДТУ 24 2248 34 01
На даній сторінці що зображена на рисунку В.14 можна знайти
необхідний фільм за допомогою пошуку за назвою, або за допомогою
спеціального фільтру. Всі фільми відображаються з мінімальною інформацію
щоб не заважати користувачеві в пошуку потрібного. А за необхідності
детальної інформації користувач може перейти на самий фільм і отримати
більш детальну інформацію.

Рисунок В.14 – Сторінка фільтрації

Фільтр на рисунках В.15 та В.16 має всі елементи фільтрації. За
допомогою нього можна знайти фільм за жанрами, віковим рейтингом,
категорією, типом, статусом, сезоном виходу та роками. Він дозволить доволі
точно знайти фільм за вашими потребами.

Рисунок В.15 – Сторінка фільтрації фільмів
97
482. ЧДТУ 24 2248 34 01

Рисунок В.16 – Заповнений фільтр

Якщо користувач зайде в систему як адміністратор то йому будуть
доступні функції для адміністрування. Також з’явиться кнопка щоб можна було
перейти до панелі адміністратора.

Рисунок В.17 – Кнопка для панелі адміністратор

98
482. ЧДТУ 24 2248 34 01
На сторінці адміністратора можна бистро та зручно додати новий фільм.
Також за необхідності можна додати інші властивості.

Рисунок В.18 – Сторінка адміністратора

Рисунок В.19 – Сторінка адміністратора
99
482. ЧДТУ 24 2248 34 01
Також адміністратор може редагувати наявні фільми. Для цього йому
потрібно перейти на необхідний фільм, після чого натиснути на відповідну
кнопку.

Рисунок В.20 – Кнопка панель адміністратора для редагування фільму

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

Рисунок В.21 – Сторінка редагування фільму

100

ДОДАТОК Г

Програмне забезпечення каталог перегляду фільмів

Графічні матеріали
482.ЧДТУ. 24 2248 90 01
Листів 11

Розробник ________________ Майчук Т. М.

2024

482.ЧДТУ. 24 2248 90 01

Рисунок Г.1 –Титульний слайд

Рисунок Г.2 – Слайд з актуальність теми

102
482.ЧДТУ. 24 2248 90 01

Рисунок Г.3 – Слайд з метою і завданням розробки

Рисунок Г.4 – Слайд з аналогами

103
482.ЧДТУ. 24 2248 90 01

Рисунок Г.5 – Слайд з дослідженням функціоналу аналогів

Рисунок Г.6 – Слайд з дослідженням функціоналу аналогів

104
482.ЧДТУ. 24 2248 90 01

Рисунок Г.7 – Слайд з моделлю предметної області та діаграмою класів

Рисунок Г.8 – Слайд з діаграмою прецедентів та пакетів

105
482.ЧДТУ. 24 2248 90 01

Рисунок Г.9 – Слайд з діаграмою компонентів та діяльності

Рисунок Г.10 – Слайд з діаграмою розгортання та послідовності

106
482.ЧДТУ. 24 2248 90 01

Рисунок Г.11 – Слайд з діаграмою комунікації та скінченним автоматом

Рисунок Г.12 – Слайд з структурною схемою та функціональною

107
482.ЧДТУ. 24 2248 90 01

Рисунок Г.13 – Слайд з використаними технологіями

Рисунок Г.14 – Слайд з серверною частиною та базою даних

108
482.ЧДТУ. 24 2248 90 01

Рисунок Г.15 – Слайд з готовим інтерфейсом головної сторінки та фільтру

Рисунок Г.16 – Слайд з готовим інтерфейсом сторінкою фільму та коментарями

109
482.ЧДТУ. 24 2248 90 01

Рисунок Г.17 - Слайд з готовим інтерфейсом список перегляду та додавання
фільму

Рисунок Г.18 - Слайд з тестуванням системи

110
482.ЧДТУ. 24 2248 90 01

Рисунок Г.19 – Слайд з висновками
111

ChSTU repository

ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets