Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/9759Повний запис метаданих
| Поле DC | Значення | Мова |
|---|---|---|
| dc.contributor.advisor | Півень, Олександр Борисович | - |
| dc.contributor.author | Іванов, Назар Дмитрович | - |
| dc.date.accessioned | 2026-06-30T18:54:07Z | - |
| dc.date.available | 2026-06-30T18:54:07Z | - |
| dc.date.issued | 2026-06-17 | - |
| dc.identifier.uri | https://er.chdtu.edu.ua/handle/ChSTU/9759 | - |
| dc.description.abstract | АНОТАЦІЯ Виконавець: Іванов Назар Дмитрович Назва роботи: «Програмне забезпечення web-системи структурування відеоконтенту» Спеціальність: 121 Інженерія програмного забезпечення. Навчальний заклад: «Черкаський державний технологічний університет» м. Черкаси, 2026 р. Мета роботи: розробити сучасну web-систему для ефективного збереження, структурування та управління відеоконтентом із можливістю автоматичного отримання метаданих, категоризації матеріалів та створення персональних нотаток. Цілі: − провести аналіз існуючих рішень для збереження та організації відеоконтенту; − сформувати функціональні та нефункціональні вимоги до програмного забезпечення; − спроєктувати модель предметної області та архітектуру системи; − реалізувати основні модулі роботи з відеоконтентом; − забезпечити пошук, фільтрацію та категоризацію даних; − реалізувати локальне зберігання інформації та інтеграцію із зовнішніми API; − забезпечити високу швидкодію, автономність і зручність використання системи. У підрозділі аналізу вимог було визначено основні функціональні можливості системи та сформовано вимоги до програмного забезпечення. У підрозділі моделювання програмного забезпечення було описано предметну область, логічну структуру, архітектуру та UML-діаграми системи. У розділі розробки та тестування було реалізовано програмний комплекс, виконано розробку інтерфейсу користувача, логіки роботи системи та проведено тестування її функціональних можливостей. У розділі впровадження та супроводу було описано процеси розгортання програмного забезпечення та особливості його експлуатації. | uk_UA |
| dc.description.abstract | ANNOTATION Performer: Ivanov Nazar Dmytrovych Title of work: "Software for a web-system for structuring video content" Specialty: 121 Software Engineering. Educational institution: "Cherkasy State Technological University" Cherkasy, 2026 Objective of work: to develop a modern web-system for effective storage, structuring and management of video content with the ability to automatically obtain metadata, categorize materials and create personal notes. Objectives: − to analyze existing solutions for storing and organizing video content; − to form functional and non-functional requirements for software; − to design a model of the subject area and system architecture; − to implement the main modules for working with video content; − to provide search, filtering and categorization of data; − to implement local storage of information and integration with external APIs; − to ensure high performance, autonomy and ease of use of the system. In the requirements analysis section, the main functional capabilities of the system were determined and software requirements were formed. In the software modeling section, the subject area, logical structure, architecture, and UML diagrams of the system were described. In the development and testing section, the software complex was implemented, the user interface and system logic were developed, and its functionality was tested. In the implementation and support section, the software deployment processes and features of its operation were described. | uk_UA |
| dc.language.iso | uk | uk_UA |
| dc.subject | web-система | uk_UA |
| dc.subject | відеоконтент | uk_UA |
| dc.subject | структурування відео | uk_UA |
| dc.subject | VidKeeper | uk_UA |
| dc.subject | YouTube | uk_UA |
| dc.subject | категоризація контенту | uk_UA |
| dc.subject | нотатки | uk_UA |
| dc.subject | локальне зберігання даних | uk_UA |
| dc.subject | JavaScript | uk_UA |
| dc.subject | HTML5 | uk_UA |
| dc.subject | CSS3 | uk_UA |
| dc.subject | LocalStorage | uk_UA |
| dc.subject | Noembed API | uk_UA |
| dc.subject | SPA | uk_UA |
| dc.subject | веб-застосунок | uk_UA |
| dc.subject | web system | uk_UA |
| dc.subject | video content | uk_UA |
| dc.subject | video structuring | uk_UA |
| dc.subject | VidKeeper | uk_UA |
| dc.subject | YouTube | uk_UA |
| dc.subject | content categorization | uk_UA |
| dc.subject | notes | uk_UA |
| dc.subject | local data storage | uk_UA |
| dc.subject | JavaScript | uk_UA |
| dc.subject | HTML5 | uk_UA |
| dc.subject | CSS3 | uk_UA |
| dc.subject | LocalStorage | uk_UA |
| dc.subject | Noembed API | uk_UA |
| dc.subject | SPA | uk_UA |
| dc.subject | web application | uk_UA |
| dc.title | Програмне забезпечення web-системи структурування відеоконтенту | uk_UA |
| dc.type | Bachelor Thesis | uk_UA |
| Розташовується у зібраннях: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) | |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Іванов Назар Дмитрович.pdf Restricted Access | 8.55 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
«бакалавра»
освітній рівень
на тему: Програмне забезпечення web-системи структурування
відеоконтенту
Виконав: студент 4 курсу, групи ПЗ-2204
Спеціальності
121 «Інженерія програмного
забезпечення»
(шифр і назва напряму підготовки)
Студент Іванов Н.Д.
(прізвище та ініціали)
Керівник Півень О.Б.
(прізвище та ініціали)
Рецензент Захарова М.В
(прізвище та ініціали)
Черкаси 2026
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
С. Голуб
«___» _______________ 2026 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Іванов Назар Дмитрович
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) Програмне забезпечення web-системи структурування
відеоконтенту
Керівник проекту (роботи) Півень Олександр Борисович к.ф-м.н., доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від «12 березня»
2026 року № 56/03-03
2.Строк подання студентом проекту (роботи) 03.06.2026
3. Вхідні дані до проекту (роботи) 1) Платформа x86-64,
2) Мова програмування JavaScript
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань
Розділ 2. Впровадження результатів досліджень у практику проектування програмного
забезпечення інформаційних систем
Розділ 3. Розробка та тестування програмного забезпечення
Висновки;
Список використаних джерел;
Додатки А, Додатки Б, Додатки В.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту);
Додаток Г - Графічний матеріал.
6. Консультанти розділів роботи
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання грудень 2025 р.
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ етапів
Назва етапів випускної роботи Примітки
п/п кваліфікаційної
роботи
1 Постановка задачі 11.12.2025 виконано
2 Підготовка завдання 19.12.2025 виконано
3 Погодження завдання 20.04.2026 виконано
4 Затвердження завдання 23.04.2026 виконано
Основна стадія
1 Підбір матеріалів 24.04.2026 виконано
2 Аналіз шляхів вирішення поставленої задачі 26.04.2026 виконано
3 Розрахунок основних параметрів роботи 02.05.2026 виконано
4 Вибір кінцевого варіанту проектного рішення 09.05.2026 виконано
5 Оформлення первісної редакції роботи 16.05.2026 виконано
Заключна стадія 23.05.2026
1 Узгодження прийнятих проектних рішень з 27.05.2026 виконано
керівником
2 Оформлення пояснювальної записки роботи в 31.05.2026 виконано
кінцевій редакції
3 Попередній захист роботи 04.06.2026 виконано
4 Затвердження роботи 05.06.2026 виконано
5 Рецензування роботи 06.06.2026 виконано
6 Захист роботи 09.06.2026
Студент _____________________ Іванов Н.Д..
(підпис) (прізвище та ініціали)
Керівник роботи _____________________ Півень О.Б.
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Виконавець: Іванов Назар Дмитрович
Назва роботи: «Програмне забезпечення web-системи структурування
відеоконтенту»
Спеціальність: 121 Інженерія програмного забезпечення.
Навчальний заклад: «Черкаський державний технологічний університет»
м. Черкаси, 2026 р.
Мета роботи: розробити сучасну web-систему для ефективного збереження,
структурування та управління відеоконтентом із можливістю автоматичного
отримання метаданих, категоризації матеріалів та створення персональних нотаток.
Цілі:
− провести аналіз існуючих рішень для збереження та організації
відеоконтенту;
− сформувати функціональні та нефункціональні вимоги до програмного
забезпечення;
− спроєктувати модель предметної області та архітектуру системи;
− реалізувати основні модулі роботи з відеоконтентом;
− забезпечити пошук, фільтрацію та категоризацію даних;
− реалізувати локальне зберігання інформації та інтеграцію із зовнішніми
API;
− забезпечити високу швидкодію, автономність і зручність використання
системи.
У підрозділі аналізу вимог було визначено основні функціональні можливості
системи та сформовано вимоги до програмного забезпечення.
У підрозділі моделювання програмного забезпечення було описано предметну
область, логічну структуру, архітектуру та UML-діаграми системи.
У розділі розробки та тестування було реалізовано програмний комплекс,
виконано розробку інтерфейсу користувача, логіки роботи системи та проведено
тестування її функціональних можливостей.
У розділі впровадження та супроводу було описано процеси розгортання
програмного забезпечення та особливості його експлуатації.
Ключові слова: web-система, відеоконтент, структурування відео, VidKeeper,
YouTube, категоризація контенту, нотатки, локальне зберігання даних, JavaScript,
HTML5, CSS3, LocalStorage, Noembed API, SPA, веб-застосунок.
ANNOTATION
Performer: Ivanov Nazar Dmytrovych
Title of work: "Software for a web-system for structuring video content"
Specialty: 121 Software Engineering.
Educational institution: "Cherkasy State Technological University"
Cherkasy, 2026
Objective of work: to develop a modern web-system for effective storage, structuring
and management of video content with the ability to automatically obtain metadata,
categorize materials and create personal notes.
Objectives:
− to analyze existing solutions for storing and organizing video content;
− to form functional and non-functional requirements for software;
− to design a model of the subject area and system architecture;
− to implement the main modules for working with video content;
− to provide search, filtering and categorization of data;
− to implement local storage of information and integration with external APIs;
− to ensure high performance, autonomy and ease of use of the system.
In the requirements analysis section, the main functional capabilities of the system
were determined and software requirements were formed.
In the software modeling section, the subject area, logical structure, architecture, and
UML diagrams of the system were described.
In the development and testing section, the software complex was implemented, the
user interface and system logic were developed, and its functionality was tested.
In the implementation and support section, the software deployment processes and
features of its operation were described.
Keywords: web system, video content, video structuring, VidKeeper, YouTube,
content categorization, notes, local data storage, JavaScript, HTML5, CSS3, LocalStorage,
Noembed API, SPA, web application.
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ............................................................................ 5
ВСТУП .............................................................................................................................. 6
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАДАЧ .............................................................................................................................. 9
1.1 Аналіз існуючих рішень ........................................................................................ 9
1.2 Існуючі методи та засоби .................................................................................... 13
1.3 Актуальні проблеми............................................................................................. 14
1.4 Методи вирішення проблем ................................................................................ 16
1.5 Постановка задачі ................................................................................................ 18
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ ........................................................................................................................ 20
2.1 Моделювання предметної області ...................................................................... 20
2.1.1 Предметна область моделювання. Модель предметної області. Словник
предметної області ................................................................................................. 22
2.1.2 Елементи моделювання предметної області .............................................. 23
2.1.3 Робоча область моделювання ....................................................................... 24
2.2 Формування та аналіз вимог ............................................................................... 24
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги. ....... 26
2.2.2 Формування вимог за допомогою діаграми прецедентів .......................... 28
2.3 Проектування логічної структури програмного комплексу ............................ 30
2.3.1 Діаграми класів .............................................................................................. 31
2.3.2 Діаграми пакетів ............................................................................................ 34
ЧДТУ.262243.005 ПЗ
Зм Арк № докум. Підп. Дата
Розроб. Іванов Н.Д. ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ Лит. Лист Листів
Пров. Півень О.Б. WEB-СИСТЕМИ 3
СТРУКТУРУВАННЯ
ВІДЕОКОНТЕНТУ ФІТІС,
Н.контр. Півень О.Б. група ПЗ-2204
Затв. Голуб С.В.
2 .4 Архітектурне проектування ............................................................................... 36
2.4.1 Діаграма компонентів ................................................................................... 36
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання ............................................................................................................. 38
2.5 Моделювання поведінки системи ...................................................................... 40
2.5.1 Діаграма діяльності ....................................................................................... 41
2.5.2 Діаграма послідовності ................................................................................. 41
2.5.3 Діаграма комунікації ..................................................................................... 44
2.5.4 Діаграма скінченного автомату ................................................................... 45
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ .. 48
3.1 Розробка програмного комплексу ...................................................................... 48
3.1.1 Обґрунтування вибору засобів реалізації ................................................... 48
3.1.2 Опис структурної (функціональної) схеми ................................................. 50
3.1.3 Опис логічної схеми системи ....................................................................... 52
3.1.4 Розробка інтерфейсу користувача ............................................................... 55
3.1.5 Розробка бази даних ...................................................................................... 60
3.1.6 Опис розробки програмних компонентів ................................................... 60
3.2 Тестування системи ............................................................................................. 67
3.2.1 Модульне тестування .................................................................................... 67
3.2.2 Інтеграційне тестування................................................................................ 67
3.2.3 Системне тестування ..................................................................................... 70
3.2.4 Приймальне тестування ................................................................................ 71
3.3 Приклади впровадженого програмного комплексу ......................................... 72
ВИСНОВКИ ................................................................................................................... 74
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 76
ДОДАТОК А .................................................................................................................. 60
ДОДАТОК Б ................................................................................................................... 62
ДОДАТОК В .................................................................................................................. 75
ДОДАТОК Г . .................................................................................................................. 80
Л ист
ЧДТУ.262243.005 ПЗ
Зм. Лист № документа Підпис Дата 4
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
API – Application Programming Interface;
CSS – каскадна таблиця стилів;
DOM – Document Object Model;
HTML – мова гіпертекстової розмітки;
SPA – single page application;
UML – Unified modeling language;
URL – Uniform Resource Locator;
UX/UI – User Experience (UX) /User Interface (UI);
ПЗ – програмне забезпечення.
ЧДТУ 262243.005 ПЗ
ВСТУП
Актуальність теми
В епоху стрімкого розвитку інформаційних технологій відеоконтент став
одним із найважливіших джерел отримання інформації у сферах освіти, науки,
професійного розвитку та розваг. Платформи відеохостингу, такі як YouTube,
містять колосальний обсяг корисних матеріалів. Проте стандартні інструменти
збереження відео наприклад, плейлисти платформ або закладки браузера часто є
недостатніми: вони не дозволяють гнучко категоризувати контент, додавати
власні розширені нотатки чи створювати єдину, зручну для навігації персональну
базу знань.
Через інформаційне перевантаження користувачі часто втрачають важливі
матеріали або витрачають багато часу на їх повторний пошук. Тому розробка
спеціалізованого клієнтського програмного забезпечення web-системи
структурування відеоконтенту, яке б забезпечувало швидке додавання відео за
посиланням, автоматичний збір метаданих, гнучку категоризацію та офлайн-
збереження структури, є актуальним та практично значущим завданням.
Мета та завдання розробки
Метою кваліфікаційної роботи є розробка та впровадження програмного
забезпечення web-системи «VidKeeper» для ефективного збереження,
структурування та управління користувацьким відеоконтентом.
Для досягнення поставленої мети було визначено та вирішено наступні
завдання:
1 Провести аналіз предметної області та недоліків існуючих рішень для
збереження відео.
2 Спроєктувати користувацький інтерфейс UI/UX застосунку з
використанням сучасних візуальних підходів.
3 Розробити клієнтську частину web-системи, використовуючи базові
веб-технології HTML5, CSS3, JavaScript без залучення важких
фреймворків для забезпечення максимальної швидкодії.
4 Реалізувати механізм парсингу URL-адрес та інтеграцію зі сторонніми
6
ЧДТУ 262243.005 ПЗ
API для автоматичного отримання метаданих відео.
5 Налаштувати локальне збереження даних для забезпечення незалежної
роботи клієнтає.
6 Реалізувати алгоритми пошуку, фільтрації та динамічного управління
категоріями контенту.
Об'єкт розробки
Об'єктом розробки є процес організації, збереження та управління
відеоконтентом у веб-середовищі.
Предмет розробки
Предметом розробки є програмне забезпечення web-системи
структурування відеоконтенту.
Методи проектування та конструювання
При розробці програмного забезпечення було використано:
Методи об'єктно-орієнтованого програмування (ООП) – для побудови
архітектури JavaScript-додатку;
Методи проєктування користувацьких інтерфейсів – для створення
адаптивного та інтуїтивно зрозумілого дизайну;
Технології асинхронної взаємодії (AJAX/Fetch) – для взаємодії з REST API
зовнішніх сервісів;
Методи постійного зберігання даних на клієнті – використання Web
Storage API для серіалізації об'єктів у формат JSON.
Опис отриманих результатів
У результаті виконання роботи створено повноцінний односторінковий
веб-застосунок «VidKeeper». Програма має сучасний графічний інтерфейс із
темною темою та ефектами матового скла. Розроблено функціонал, що дозволяє
користувачу додавати відеоролики з YouTube лише за посиланням – система
автоматично розпізнає ID відео та завантажує його обкладинку і назву.
Реалізовано можливості створення кастомних категорій, додавання текстових
описів/нотаток до кожного відео, систему «улюблених» відеороликів, а також
миттєвий текстовий пошук. Архітектура додатку дозволяє системі працювати
7
ЧДТУ 262243.005 ПЗ
локально у браузері користувача, зберігаючи всі внесені зміни.
Практичне значення отриманих результатів
Розроблена web-система має високу практичну цінність для широкого кола
користувачів: студентів, викладачів, розробників, дослідників та всіх, хто
використовує відео для навчання або роботи. Система «VidKeeper» може
слугувати персональним менеджером знань, який допомагає організувати
хаотичні закладки в структуровану, візуально приємну базу даних. Оскільки
програма працює без необхідності розгортання складного серверного бекенду та
бази даних використовуючи ресурси браузера, вона є легкою у використанні,
розповсюдженні та модифікації.
Особистий внесок автора
Автор проєкту здійснив повний цикл розробки клієнтської частини web-
системи, включаючи проєктування користувацького інтерфейсу (UI/UX),
реалізацію логіки односторінкового застосунку, налаштування локального
збереження даних та інтеграцію зі стороннім API для збору метаданих, а також
тестування та оптимізацію продукту.
8
ЧДТУ 262243.005 ПЗ
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАДАЧ
Для обґрунтування доцільності розробки web-системи структурування
відеоконтенту «VidKeeper» було проведено аналіз існуючих на ринку
інформаційних технологій рішень, які частково або повністю задовольняють
потреби користувачів у збереженні та організації відеоматеріалів. Як аналоги
було обрано три популярні системи: вбудовані інструменти платформи YouTube,
спеціалізований менеджер закладок Raindrop.io та багатофункціональний
робочий простір Notion.
1.1. Аналіз існуючих рішень
Вбудовані інструменти YouTube
Найбільш очевидним і масовим способом структурування відеоконтенту є
використання базового функціоналу самої платформи YouTube. Користувачі
мають змогу як створювати тематичні списки відтворення так і додавати відео у
розділ «Переглянути пізніше» рис.1.1.
Рисунок 1.1 – YouTube (Watch later)
До переваг даного іструменту відносять:
9
ЧДТУ 262243.005 ПЗ
Глибока інтеграція: Не потребує встановлення стороннього програмного
забезпечення чи додаткової реєстрації;
Кросплатформеність: Дані автоматично синхронізуються між усіма
пристроями, де здійснено вхід в обліковий запис Google;
Автоматичне відтворення: Можливість послідовного перегляду всіх відео з
плейлиста.
До недоліків варто віднести:
Відсутність персональних нотаток: Користувач не може додати власний
текстовий опис, конспект або таймкоди до конкретного збереженого відео, опис
плейлиста застосовується до всього списку, а не до окремого елемента;
Обмежена ієрархія: Відсутня можливість створювати багаторівневі
категорії або гнучко застосовувати систему тегів. У разі великої кількості
плейлистів навігація стає ускладненою;
Інформаційний шум: Інтерфейс перевантажений рекомендаціями,
рекламою та коментарями, що відволікає від сфокусованого навчання чи роботи
з матеріалом [1].
Raindrop.io
Raindrop.io – це сучасний і популярний кросплатформений менеджер
закладок, який дозволяє зберігати посилання на будь-які веб-ресурси,
включаючи відео, статті та зображення, та організовувати їх у візуально
привабливі колекції.
Переваги:
Візуалізація: Система автоматично підтягує обкладинки збережених відео,
що робить інтерфейс приємним та інтуїтивно зрозумілим;
Гнучка категоризація: Підтримка тегів, папок та розумних фільтрів для
швидкого пошуку потрібного контенту;
Пошук: Наявність потужного механізму пошуку по назвах та описах
збережених матеріалів;
Недоліки:
Універсальність на шкоду спеціалізації: Застосунок орієнтований на
10
ЧДТУ 262243.005 ПЗ
збереження будь-яких посилань, тому в ньому немає специфічних інструментів,
орієнтованих виключно на відеоконтент;
Залежність від сервера та підписки: Дані зберігаються на віддалених
серверах та потребує створення акаунту, а частина корисного функціоналу
наприклад, вкладені колекції та повнотекстовий пошук доступна лише у платній
Premium версії.
Рисунок 1.2 – Інтерфейс Raindrop
Багатофункціональний робочий простір Notion
Notion являє собою комплексне середовище для створення баз знань,
ведення нотаток та управління проєктами. Багато користувачів адаптують його
функціонал баз даних для створення власних каталогів навчального
відеоконтенту (рис. 1.3).
11
ЧДТУ 262243.005 ПЗ
Рисунок 1.3 – Notion
До переваг Notion можна віднести:
Абсолютна гнучкість: Можливість спроєктувати базу даних відео з будь-
якими необхідними полями а саме статус перегляду, оцінка, категорія тощо;
Розширені нотатки: Дозволяє створювати повноцінні конспекти з
форматуванням, формулами, зображеннями безпосередньо під вбудованим
відеоплеєром на сторінці.
Недоліки:
Високий поріг входження: Налаштування зручної системи каталогізації
вимагає від користувача значних витрат часу на початковому етапі та розуміння
принципів роботи реляційних баз даних Notion;
Надмірне споживання ресурсів: Notion є «важким» веб-застосунком, який
може повільно працювати на застарілих пристроях і вимагає постійного
підключення до мережі Інтернет;
12
ЧДТУ 262243.005 ПЗ
Складність швидкого додавання: Процес збереження відео є більш
багатоетапним ніж в спеціалізованих клієнтах і включає створення запису, ручне
вставлення посилання, заповнення властивостей.
1.2. Існуючі методи та засоби
1 Методи структуризації відеоконтенту
Структуризація відео передбачає його поділ на логічні одиниці (кадри,
сцени, епізоди) та генерацію метаданих. Основними методами є:
1 Методи виявлення меж сцен (Shot Boundary Detection):
Використовуються для автоматичного розбиття відео на окремі
фрагменти (шоти) на основі аналізу гістограм кольорів, оптичного
потоку або за допомогою згорткових нейромереж (CNN) [2].
2 Семантичний аналіз та тегування: Передбачає розпізнавання
об'єктів, облич (Face Recognition) та тексту на відео (OCR). Для
цього застосовуються сучасні мультимодальні моделі (наприклад,
архітектури типу CLIP або YOLO) [3].
3 Автоматичне транскрибування та аналіз аудіосупроводу:
Виділення мовленнєвого потоку (Speech-to-Text) для створення
часових міток (timestamps) та аналізу тональності тексту (Sentiment
Analysis) [4].
2 Програмні засоби та технології реалізації Web-систем
Сучасні web-системи для роботи зі структурованим відео будуються на
базі розподіленої архітектури, де критично важливою є швидкість обробки
даних.
Засоби обробки та кодування відео (Backend & Ingestion)
FFmpeg: Інструмент із відкритим вихідним кодом для декодування,
кодування, транскодування та фільтрації відео. Він є базою для більшості систем
підготовки контенту [5].
GStreamer: Мультимедійний фреймворк, який часто використовується для
побудови пайплайнів обробки відео в реальному часі.
13
ЧДТУ 262243.005 ПЗ
Хмарні сервіси та AI-інструменти (Аналітика)
AWS Elemental MediaConvert & Amazon Rekognition: Хмарні
інструменти від Amazon, які дозволяють не лише транслювати відео, а й
автоматично виявляти знаменитостей, об'єкти, текст та небажаний контент [6].
Google Cloud Video Intelligence: API, що використовує моделі глибокого
навчання для розпізнавання об'єктів, відстеження кадрів та контекстного аналізу
відео [7].
Протоколи доставки контенту (Streaming)
Для адаптивного стримінгу (Adaptive Bitrate Streaming), який дозволяє
підлаштовувати якість відео під швидкість інтернету користувача, застосовують
протоколи:
HLS (HTTP Live Streaming): Розроблений Apple, де-факто стандарт для
мобільних пристроїв та веб-браузерів.
MPEG-DASH: Міжнародний стандарт адаптивного стримінгу, незалежний
від вендора.
Зберігання структурованих даних
Для збереження самого відео та його фрагментів використовуються
об'єктні сховища (наприклад, Amazon S3 чи MinIO).
Для метаданих (таймкоди, теги, результати аналізу облич) застосовують
NoSQL бази даних (наприклад, MongoDB, Elasticsearch для швидкого
повнотекстового пошуку по субтитрах та тегах) [8].
1.3. Актуальні проблеми
Ключовими проблемами з якими стикаються розробники та архітектори які
розробляють такі системи є:
1 Проблема обчислювальної складності семантичного аналізу
Структуризація відео передбачає автоматичне виявлення об'єктів, облич,
тексту (OCR) та транскрибування аудіо (Speech-to-Text).
Суть проблеми: Сучасні нейромережеві моделі (наприклад, архітектури
типу Vision-Language Models або трансформери для розпізнавання мовлення
типу Whisper) мають високу точність, але вимагають колосальних
14
ЧДТУ 262243.005 ПЗ
обчислювальних ресурсів (GPU/TPU) [9]. Обробка відео у реальному часі (Real-
time Video Analytics) для тисяч одночасних потоків стає економічно
неефективною або технічно неможливою без затримок.
Наслідки: Необхідність компромісу між точністю структуризації та
швидкістю обробки (наприклад, аналіз лише кожного N-го кадру), що знижує
якість фінальних метаданих.
2 Гетерогенність даних та відсутність єдиних стандартів метаданих
Відеоконтент з різних джерел суттєво відрізняється за якістю, роздільною
здатністю, ракурсами та контекстом.
Суть проблеми: На етапі агрегації даних виникає проблема сумісності
форматів структурованого опису відео. Попри наявність стандартів на кшталт
MPEG-7, більшість сучасних платформ використовують власні (пропрієтарні)
JSON-схеми для збереження таймкодів, графів знань (Knowledge Graphs) та тегів
[10].
Наслідки: Ускладнюється інтеграція між різними системами
(інтероперабельність), а пошукові алгоритми не можуть ефективно виконувати
наскрізний семантичний пошук у гетерогенних (різнорідних) базах відеоданих.
3 Масштабованість сховищ та ефективність індексації метаданих
Структуроване відео породжує величезні обсяги вторинної інформації. На
одну годину відео можуть припадати мільйони записів про виявлені об'єкти з
їхніми просторово-часовими координатами (x, y, t).
Суть проблеми: Традиційні реляційні бази даних не здатні ефективно
обробляти такі часові ряди паралельно з векторним пошуком (Vector Search),
який необхідний для сучасного ШІ-пошуку за змістом [11].
Наслідки: Уповільнення роботи пошукових рушіїв web-системи. Виникає
гостра потреба у впровадженні спеціалізованих векторних баз даних (наприклад,
Milvus, Qdrant) та NoSQL-рішень, що здорожує архітектуру ПЗ.
4 Проблеми адаптивного стримінгу та синхронізації метаданих
Для доставки відео використовуються протоколи HLS або MPEG-DASH,
які розбивають відео на чанки (сегменти).
15
ЧДТУ 262243.005 ПЗ
Суть проблеми: Головний виклик для ПЗ веб-систем — це динамічна
синхронізація потоку відео з інтерактивними метаданими. При зміні якості
зв'язку плеєр перемикає бітрейт, що може викликати розсинхронізацію між
відеорядом та шаром структурованих даних, які передаються паралельно через
веб-сокети або окремі API-запити.
1.4. Методи вирішення проблем
Для подолання проблем високої обчислювальної складності,
розсинхронізації даних, масштабованості та конфіденційності сучасна інженерія
програмного забезпечення пропонує комплексний інструментарій.
Нижче наведено основні архітектурні та алгоритмічні методи вирішення
зазначених проблем із відповідними посиланнями на літературні джерела.
1 Оптимізація обчислень за допомогою Edge Computing та
квантизації моделей
Щоб вирішити проблему високої вартості та обчислювальної складності
штучного інтелекту для аналізу відео (GPU-навантаження), застосовують такі
підходи:
1 Периферійні обчислення (Edge Computing): Перенесення
первинної структуризації відео (наприклад, декодування та
виділення ключових кадрів) безпосередньо на пристрої захоплення
контенту (камери, локальні сервери) або на CDN-вузли [12]. Це
розвантажує центральний Backend веб-системи.
2 Стиснення моделей (Model Quantization & Pruning): Оптимізація
нейромереж шляхом зменшення точності ваг (наприклад, з FP32 до
INT8) та видалення малозначущих зв'язків. Це дозволяє запускати
легші версії моделей (як-от MobileNet або дистильований Whisper)
без суттєвої втрати точності структуризації [13].
2 Гібридні архітектури баз даних та векторний пошук
Для збереження і швидкого пошуку по мільйонах просторово-часових
метаданих та семантичних тегів традиційні СКБД замінюють на спеціалізовані
16
ЧДТУ 262243.005 ПЗ
стеки:
1 Векторні бази даних (Vector Databases): Замість текстового
пошуку за ключовими словами метадані відео (кадри, об'єкти,
аудіосупровід) конвертуються у математичні вектори (embeddings)
за допомогою моделей типу CLIP і зберігаються у спеціалізованих
сховищах (Milvus, Qdrant, Pinecone) [14]. Це дозволяє виконувати
миттєвий семантичний пошук «за змістом» у мільйонах годин відео.
2 Поліглотне зберігання (Polyglot Persistence): Використання
кількох типів БД одночасно: часові ряди (Time-series DB) — для
таймкодів подій; графові БД (Neo4j) — для фіксації зв'язків між
об'єктами на відео; об'єктні сховища (S3) — для сегментів самого
відео [15].
3 Стандартизація метаданих та використання специфікацій MPEG-7
/ JSON-LD
Проблема сумісності (інтероперабельності) різних форматів та платформ
вирішується шляхом переходу на загальноприйняті семантичні стандарти:
1 MPEG-7 & ISO/IEC 15938: Стандарт, розроблений саме для опису
мультимедійного контенту, що надає багатий набір інструментів для
структурування відео на рівні кадрів, сцен та об'єктів.
2 Семантичний веб (JSON-LD & Schema.org): Для інтеграції
структурованого відео у веб-простір метадані транслюються у
формат JSON-LD з використанням словників Schema.org
(наприклад, тип VideoObject та властивість hasPart для маркування
кліпів/сцен) [16]. Це також критично важливо для пошукової
оптимізації (SEO).
4 Використання стандартів ISO/IEC 23009-1 (MPEG-DASH) та
специфікацій текстових доріжок для синхронізації
Для запобігання розсинхронізації інтерактивних елементів і відеотоку при
зміні якості мережі (Adaptive Bitrate Streaming) розробники ПЗ використовують
вбудовані контейнерні методи:
17
ЧДТУ 262243.005 ПЗ
1 Формати WebVTT та TTML: Використання доріжок метаданих
(Metadata Tracks), аналогічних субтитрам, де кожній часовій мітці
відповідає не просто текст, а структурований JSON-об'єкт із
метаданими [17].
5 Технології збереження конфіденційності (Privacy-Enhancing
Technologies)
Для виконання вимог законодавства (GDPR, AI Act) без зупинки процесу
аналізу контенту впроваджують:
1 Конвеєри анонімізації «на льоту» (On-the-fly Anonymization
Pipeline): Інтеграція у початковий етап обробки відео (наприклад,
засобами FFmpeg або OpenCV) обов'язкового модуля, який
розмиває обличчя та автомобільні номери перед тим, як відео буде
збережено або передано на подальший глибокий аналіз [18].
2 Децентралізоване навчання (Federated Learning): Метод, який
дозволяє навчати моделі структурування відео на локальних
пристроях користувачів без передачі самих приватних відеофайлів
на центральний сервер системи [18].
1.5. Постановка задачі
1 Провести аналіз предметної області та недоліків існуючих рішень для
збереження відео.
2 Спроєктувати користувацький інтерфейс UI/UX застосунку з
використанням сучасних візуальних підходів.
3 Розробити клієнтську частину web-системи, використовуючи базові
веб-технології HTML5, CSS3, JavaScript без залучення важких
фреймворків для забезпечення максимальної швидкодії.
4 Реалізувати механізм парсингу URL-адрес та інтеграцію зі сторонніми
API для автоматичного отримання метаданих відео.
5 Налаштувати локальне збереження даних для забезпечення незалежної
роботи клієнтає.
18
ЧДТУ 262243.005 ПЗ
6 Реалізувати алгоритми пошуку, фільтрації та динамічного управління
категоріями контенту.
Висновок до розділу 1
Проведений аналіз показав, що існуючі рішення або занадто прості і не
дозволяють додавати розширені нотатки до відео як YouTube-плейлисти, або є
надмірно складними, загальнопризначеними та вимагають реєстрації на
сторонніх сервісах (Raindrop, Notion).
Це обґрунтовує доцільність розробки web-системи «VidKeeper». На відміну
від проаналізованих аналогів, проєктуєма система буде сфокусована виключно
на відеоконтенті, матиме максимально простий процес додавання відео за URL-
посиланням з автоматичним парсингом метаданих, дозволить вести персональні
текстові записи та зберігатиме всі дані локально у браузері користувача, що
забезпечить високу швидкодію, конфіденційність та незалежність від серверної
інфраструктури.
19
ЧДТУ 262243.005 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
Перехід від етапів теоретичного обґрунтування та безпосередньої розробки
до практичного впровадження є завершальним і достатньо важливим кроком у
життєвому циклі створення будь-якого програмного забезпечення. Він
підтверджує життєздатність, затребуваність та реальну цінність створеного ІТ-
продукту.
У цьому розділі буде описано процес впровадження результатів
досліджень у практику проектування програмного забезпечення інформаційних
систем, зокрема створення web-системи структурування відеоконтенту
«VidKeeper». Будуть розглянуті основні етапи розробки, вибрані технології та
методи, а також перспективи подальшого розвитку даного продукту.
2.1. Моделювання предметної області
Моделювання предметної області є важливим етапом у розробці будь-
якого програмного продукту. Цей процес допомагає зрозуміти структуру та
взаємозв'язки між об'єктами та сутностями, що характеризують дану сферу.
Основною метою моделювання є створення чіткої та послідовної системи, яка
відображає всі аспекти роботи веб-додатку.
Розглянемо основні сутності предметної області, вони складаються з таких
елементів:
Користувач (User): Головний актор предметної області. Це особа, яка
відчуває потребу в збереженні та структуруванні інформації. Користувач є
єдиним джерелом змін у системі (створення, редагування, видалення об'єктів).
Збережений Відеоролик (Saved Video): Центральна концептуальна сутність
системи. Відображає факт збереження користувачем певного відеоматеріалу. Ця
сутність не містить самого фізичного відеофайлу, а є лише «карткою» чи
«закладкою», що зберігає посилання та супутню інформацію (метадані, дату,
20
ЧДТУ 262243.005 ПЗ
статус пріоритетності).
Категорія Контенту (Category): Класифікатор, який дозволяє користувачу
логічно групувати відеоролики за темами (наприклад, «Навчання», «Музика»,
«Технології»). Категорії формують структуру персональної бази знань.
Персональна Нотатка (Personal Note): Сутність, що відображає доданий
користувачем контекст. Вона невіддільна від відеоролика (якщо видаляється
відео – видаляється і нотатка) і слугує для збереження власних думок, конспектів
чи таймкодів до відео.
Зовнішня Платформа (External Platform): Сутність, що знаходиться поза
межами розроблюваної системи (у даному випадку — YouTube). Вона є
першоджерелом контенту та метаданих, на які посилаються збережені
відеоролики.
Бізнес-правила та зв'язки (Асоціації):
Користувач → Збережений Відеоролик / Категорія: Користувач має
відношення «один-до-багатьох» з відео та категоріями. Він одноосібно створює
та управляє своїм інформаційним простором.
Збережений Відеоролик → Категорія: Жорстке бізнес-правило системи:
кожне відео обов'язково класифікується лише за однією категорією. Якщо
користувач не вибрав категорію самостійно, застосовується категорія за
замовчуванням («Uncategorized» / «Без категорії»). Одна категорія може містити
безліч відео.
Збережений Відеоролик → Персональна Нотатка: Відношення строгої
композиції. Відеоролик може містити максимум одну текстову нотатку (або не
містити жодної).
Збережений Відеоролик → Зовнішня Платформа: Кожне збережене відео
жорстко прив'язане до оригінального відеоматеріалу на зовнішній платформі
через унікальне URL-посилання. Без існування відео на зовнішній платформі,
сутність у системі втрачає свій первісний сенс.
Під час розробки будуть детально вивчатися кожна з цих сутностей, а
також визначатися додаткові атрибути та характеристики для забезпечення
21
ЧДТУ 262243.005 ПЗ
повного функціоналу продукту.
2.1.1. Предметна область моделювання. Модель предметної області.
Словник предметної області
Предметна область моделювання веб охоплює інформацію про відео та їх
метадані. Кожна з цих сутностей має свої унікальні атрибути, що дозволяє
систематизувати і зберігати різноманітні дані, пов'язані з відео.
Модель предметної області
Нижче наведено опис основних сутностей моделі предметної області та
реалізовано її графічне відображення (рис 2.1).
Рисунок 2.1 – Модель предметної області
Створено словник предметної області:
22
ЧДТУ 262243.005 ПЗ
1 Сутність: Відео (Video)
Атрибути сутності:
1 ID запису: Унікальний внутрішній ідентифікатор збереженого відео
в системі (генерується на основі мітки часу).
2 YouTube ID: Унікальний ідентифікатор оригінального відео на
платформі YouTube (вилучається під час парсингу).
3 URL-посилання: Повна веб-адреса відеоролика для прямого
переходу до джерела.
4 Назва: Оригінальна назва відео, автоматично отримана з відкритих
метаданих платформи.
5 Обкладинка (Thumbnail): URL-посилання на графічне зображення
(прев'ю), що візуально репрезентує відео в сітці.
6 Нотатки / Опис: Персональний текстовий коментар, конспект або
таймкоди, додані користувачем вручну.
7 Категорія: Назва тематичного розділу, до якого користувач відніс
дане відео.
8 Ознака "Закріплене" (isPinned): Логічний статус (Так/Ні), який
визначає, чи додано відео до списку «Улюблених» для
пріоритетного відображення.
9 Дата створення: Точний час та дата додавання відеоролика до
персонального каталогу.
2 Сутність: Категорія (Category)
Атрибути сутності:
1 Назва категорії: Унікальне текстове найменування (наприклад,
"Education", "Music", "Tech"), яке слугує ідентифікатором для
класифікації контенту.
2.1.2. Елементи моделювання предметної області
Для побудови всіх UML діаграм було використано певний набір графічних
елементів. Даний набір значною мірою полегшує розуміння вимог до
розроблюваного програмного забезпечення.
23
ЧДТУ 262243.005 ПЗ
Нижче наведені в таблиці 2.1 елементи моделювання, які взято з
методичних вказівок до кваліфікаційної роботи бакалавра [21].
Таблиця 2.1
Елементи моделювання
Графічний символ Назва елемента
Дійова особа (користувач)
Варіант використання
Компонент
Вузол
Стан
Об’єкт
Клас
Лінія життя, фокус управління
Початковий та кінцевий стан
Відношення асоціації
Відношення залежності
Виклик
2.1.2. Робоча область моделювання:
1 Авторизація та доступ;
забезпечити повноцінну роботу системи локально у веб-браузері без
необхідності реєстрації або створення облікового запису
користувача.
24
ЧДТУ 262243.005 ПЗ
2 Каталог відеороликів;
відображати список (сітку) збережених відео разом з їхніми
обкладинками (прев'ю) та оригінальними назвами;
дозволити фільтрувати відео за категоріями та за статусом
«Улюблені» (закріплені відео);
забезпечити функцію миттєвого текстового пошуку відеоматеріалів
за назвою або вмістом нотаток.
3 Категорії контенту;
відображати актуальний список доступних (створених
користувачем) категорій на панелі навігації;
надати користувачам можливість створювати нові власні категорії
для класифікації;
дозволити користувачам переглядати лише ті відеоролики, що
відповідають обраній категорії.
4 Детальна інформація та контекст;
надати можливість перегляду, додавання та редагування
персональних текстових нотаток до кожного відеоролика у
спеціальному модальному вікні;
забезпечити можливість швидкого переходу до перегляду
оригінального відео на платформі YouTube шляхом кліку на його
обкладинку;
надати можливість гнучкого управління записом через зміну
категорії, закріплення або видалення відео з бази.
2.2. Формування та аналіз вимог
Формування та аналіз вимог для web-системи структурування
відеоконтенту «VidKeeper» є важливим етапом у процесі розробки програмного
забезпечення. Цей етап передбачає детальне вивчення потреб користувачів у
збереженні та організації навчального або розважального відеоматеріалу, а також
визначення функціональних та нефункціональних вимог до системи.
25
ЧДТУ 262243.005 ПЗ
В даному розділі розглянемо процес формування та аналізу вимог для
розроблюваного веб-застосунку. Дослідимо потреби користувачів в автономному
інструменті без необхідності реєстрації, визначимо основні функції системи, а
також опишимо технологічні аспекти, що впливають на її успішну реалізацію.
Мета цього пункту полягає в тому, щоб визначити та описати вимоги до
web-системи «VidKeeper» з точки зору користувацького досвіду, алгоритмів
обробки даних та технічних характеристик. Це дозволить чітко окреслити
архітектуру клієнтської частини та логіку взаємодії із зовнішніми сервісами
(API).
Відповідно до цього, даний підрозділ буде включати опис апаратних
вимог, первинних і детальних вимог, функціональних та нефункціональних
характеристик системи. Його результатом буде структурований перелік
специфікацій, який слугуватиме основою для подальшого написання коду та
тестування застосунку.
2.2.1. Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги.
Формування вимог до програмного забезпечення.
Розглянемо формування вимог до ПЗ:
операційна система: Windows 8+, macOS 12+ або розповсюджений
дистрибутив Linux;
процесор: Intel Core i3 або еквівалентний AMD;
оперативна пам'ять: Мінімум 4 ГБ RAM;
остання актуальна версія Google Chrome, Mozilla Firefox, Microsoft Edge
або Safari (з підтримкою ES6+ та CSS Grid);
інтернет-з'єднання: Швидкість з'єднання не менше 8 Мбіт/с для
нормальної роботи веб-сайту.
Первинні вимоги:
1 Збереження відеоконтенту: система повинна надавати можливість
швидкого додавання відеороликів виключно за URL-посиланням.
26
ЧДТУ 262243.005 ПЗ
2 Структурування та фільтрація: користувач повинен мати змогу
створювати власні категорії та фільтрувати за ними збережені
матеріали.
3 Контекстуалізація: до кожного доданого відео має бути можливість
створення розгорнутих текстових нотаток або описів.
4 Автономність: застосунок має зберігати усі дані локально в межах
браузера користувача без залучення серверних баз даних.
Детальні вимоги:
1 Доступ: система повинна забезпечити миттєвий початок роботи без
необхідності створення облікового запису чи введення паролів.
2 Автоматизація даних: система повинна самостійно вилучати
ідентифікатор відео з посилання та завантажувати оригінальну назву і
обкладинку (thumbnail).
3 Адаптивність: користувацький інтерфейс повинен коректно
масштабуватися для використання як на десктопних моніторах, так і на
екранах мобільних пристроїв.
Вимоги замовника та розробника:
1 Дизайн інтерфейсу: Створення дизайну зручного та привабливого
інтерфейсу.
2 Алгоритми та технології: Використання алгоритмів та новітніх
технологій, які раніше не були застосовані у подібних продуктах, для
забезпечення унікальних можливостей та переваг
Функціональні вимоги:
1 Ініціалізація та вхід: Надання повного доступу до функціоналу одразу
після відкриття веб-сторінки застосунку, ініціалізація збережених
локальних даних.
2 Додавання та парсинг: Система повинна аналізувати введені посилання
(youtu.be, watch?v=, embed), перевіряти їх на валідність та унікальність
(відсутність дублікатів).
3 Перегляд каталогу: Відображення збережених відеороликів у вигляді
27
ЧДТУ 262243.005 ПЗ
адаптивної сітки карток з їхніми назвами, категоріями, нотатками та
постерами.
4 Управління контентом: Надання можливості редагувати дані
відеоролика, змінювати його категорію, закріплювати (додавати в
"Улюблені") або видаляти з системи.
5 Пошук та фільтрація: Забезпечення миттєвого текстового пошуку по
назвах та нотатках, а також фільтрації відображення за обраною
користувацькою категорією.
Нефункціональні вимоги:
1 Безпека даних:
Система повинна забезпечувати захист, конфіденційність та цілісність
даних;
2 Швидкодія:
Система повинна бути швидкою та ефективною у відгуку на запити
користувачів;
Клієнтська частина повинна мати оптимізований код для мінімізації часу
завантаження сторінок.
3 Масштабованість:
Система повинна бути масштабованою, щоб витримувати велику кількість
користувачів та великі об'єми даних;
Архітектура системи повинна бути гнучкою для легкої розширюваності
функціоналу.
4 Крос-платформеність:
VidKeeper повинен бути сумісним з різними веб-переглядачами та
операційними системами;
Відображення інтерфейсу повинно бути адаптивним для різних типів
пристроїв та розмірів екранів.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Формування вимог за допомогою діаграми прецедентів дозволяє
візуалізувати основні варіанти використання системи та взаємодію між
28
ЧДТУ 262243.005 ПЗ
користувачем (актором) і програмним комплексом. Вона допомагає чітко
ідентифікувати функціональність системи «VidKeeper» та межі її
відповідальності. Ось текстовий опис формування вимог на основі діаграми
прецедентів:
1 Актори:
1 Користувач (Primary Actor): кінцевий користувач, який взаємодіє з
системою для організації, збереження та управління своїм
відеоконтентом.
2 Зовнішній сервіс / Noembed API (Secondary Actor): стороння
система, яка автоматично надає метадані (назву та обкладинку) за
запитом системи під час додавання нового відео.
2 Прецеденти (Варіанти використання):
1 Додавання відеоролика: користувач може додати нове відео до
свого каталогу, просто вставивши URL-посилання (система при
цьому звертається до зовнішнього API).
2 Перегляд каталогу: користувач може переглядати загальний список
збережених відеоматеріалів у вигляді зручної сітки карток.
3 Управління категоріями: користувач має можливість створювати
нові тематичні категорії для подальшої класифікації контенту.
4 Управління відеоконтентом: користувач може взаємодіяти з кожним
окремим відео: редагувати персональні нотатки, змінювати
призначену категорію, закріплювати (додавати до «Улюблених»)
або повністю видаляти запис.
5 Пошук та фільтрація: користувач може використовувати текстовий
пошук для знаходження відео за назвою чи вмістом нотаток, а
також фільтрувати каталог за обраною категорією чи статусом
закріплення.
3 Взаємодія:
1 Користувач взаємодіє з системою через графічний інтерфейс:
використовує бокову панель для ініціалізації «Управління
29
ЧДТУ 262243.005 ПЗ
категоріями» та «Фільтрації», рядок пошуку для прецеденту
«Пошук», верхню панель вводу для «Додавання відеоролика» та
кнопки взаємодії на картках для «Управління відеоконтентом».
На рисунку 2.3 представлено діаграму прецендентів.
Рисунок 2.3 – Діаграма прецидентів взаємодія з каталогом
2.3. Проектування логічної структури програмного комплексу
Проєктування логічної структури програмного комплексу є ключовим
етапом у розробці будь-якого програмного забезпечення, включаючи сучасні
односторінкові веб-застосунки (SPA). Цей етап передбачає розробку
архітектурної концепції системи та визначення взаємозв'язків між її складовими
модулями.
30
ЧДТУ 262243.005 ПЗ
Метою даного процесу є створення ефективної та концептуально цілісної
структури web-системи структурування відеоконтенту, що дозволить
забезпечити її високу швидкодію, автономність та надійність при роботі
безпосередньо у браузері користувача. В процесі проєктування визначаються
основні програмні компоненти та інтерфейси їх взаємодії, а також
розробляються моделі локального збереження даних (із застосуванням Web
Storage API) та логічні алгоритми обробки інформації на стороні клієнта.
У даному підрозділі розглянемо ключові аспекти проєктування логічної
структури програмного забезпечення розробленої системи. Зокрема, буде
наведено базові моделі та діаграми, що описують архітектуру застосунку,
статичні та динамічні зв’язки між його елементами, а також процеси обміну
даними із зовнішніми сервісами.
2.3.1. Діаграми класів
Діаграма класів (Class Diagram) є ключовою моделлю статичної структури
системи в об'єктно-орієнтованому проєктуванні. Для web-системи «VidKeeper»
розроблено архітектуру, яка базується на центральному класі-контролері
VideoApp, що інкапсулює в собі як логіку управління даними, так і логіку
взаємодії з користувацьким інтерфейсом (DOM). Також на діаграмі (рис. 2.4)
виділено логічну сутність Video, яка представляє структуру даних окремого
збереженого відеоролика.
Клас VideoApp (Головний контролер застосунку) Цей клас відповідає за
ініціалізацію програми, управління станом та обробку всіх дій користувача.
Атрибути (Властивості стану):
videos: Масив об'єктів типу Video, який зберігає всі додані
користувачем матеріали.
categories: Масив рядкових значень (String), що містить перелік
доступних категорій (включаючи базові: 'Music', 'Education', 'Entertainment',
'Tech').
MODAL: Посилання на HTML-елемент модального вікна у DOM-дереві
31
ЧДТУ 262243.005 ПЗ
для оптимізації доступу до нього.
Рисунок 2.4 – Діаграма класів
Методи управління даними (Data Management):
+ loadData(): Зчитує дані з localStorage та ініціалізує атрибути класу.
+ saveData(): Серіалізує поточний стан масивів videos та categories у JSON і
записує їх у localStorage.
32
ЧДТУ 262243.005 ПЗ
Методи бізнес-логіки (Business Logic):
+ handleAddVideo(): Асинхронний метод, який зчитує введений URL,
викликає парсер, робить запит до зовнішнього API та створює новий об'єкт
Video.
+ extractVideoID(): Допоміжна функція, що використовує регулярні вирази
для отримання ID відео з посилання.
+ togglePin(), + deleteVideo(), + saveEdit(): Методи для модифікації або
видалення існуючих записів у базі даних.
Методи рендерингу та UI (UI Rendering):
+ renderCategories(), + renderVideos(): Відповідають за генерацію HTML-
розмітки на основі поточного стану даних та вставку її у відповідні контейнери
на сторінці. renderVideos також містить логіку фільтрації та сортування
(спочатку закріплені, потім найновіші).
- createVideoCard(): Приватний метод для генерації HTML-коду окремої
картки відео.
+ openCategoryModal(), + openEditModal(), + closeModal(): Управління
станом модальних вікон.
Структура даних Video (Сутність моделі) Оскільки JavaScript не має
строгої типізації даних (на відміну від Java чи C#), сутність Video на діаграмі
представлена як логічний об'єкт (Entity), що зберігається в масиві та localStorage.
Вона містить наступні атрибути:
id: Унікальний ідентифікатор;
youtubeId: Технічний ідентифікатор відео на платформі YouTube;
url: Повне оригінальне посилання;
title, thumbnail: Метадані, отримані через зовнішнє API (назва та
посилання на картинку-прев'ю);
description: Текстові нотатки користувача;
category: Назва категорії, до якої належить відео;
isPinned: Логічний прапорець (Boolean) для ідентифікації «улюблених»
відео;
33
ЧДТУ 262243.005 ПЗ
createdAt: Timestamp (мітка часу) створення запису для реалізації
сортування.
Відношення між класами: На діаграмі (рис. 2.4) зображено відношення
композиції (Composition) між VideoApp та сутністю Video. Це означає, що
екземпляр класу VideoApp (який в системі існує в єдиному екземплярі – як
Singleton) містить у собі та повністю керує життєвим циклом колекції об'єктів
Video. Якщо застосунок очищує дані, об'єкти Video також знищуються.
2.3.2. Діаграми пакетів
Діаграма пакетів (Package Diagram) в UML використовується для
відображення організації елементів моделі у вищі рівні абстракції (пакети) та
залежностей між ними. Для web-системи «VidKeeper», яка реалізована у вигляді
класичного клієнтського застосунку на Vanilla JS, пакети представляють логічні
простори імен (namespaces), що групують функціонал за його архітектурним
призначенням згідно з принципом єдиної відповідальності (Single Responsibility
Principle). Діаграма представлена на рис. 2.6.
Пакет vidkeeper.ui (Представлення) Цей пакет об'єднує всі елементи, що
відповідають за візуальну складову та взаємодію з користувачем.
Вміст пакету: HTML-розмітка (структура сторінки, модальні вікна), CSS-
правила (анімації, ефекти матового скла, адаптивна сітка) та глобальні
обробники подій (Event Listeners), які "слухають" дії користувача (натискання
кнопок, введення тексту).
Залежності пакету: Пакет безпосередньо залежить від vidkeeper.core,
оскільки передає йому управління при виникненні користувацьких подій
(наприклад, виклик videoApp.renderVideos()).
Пакет vidkeeper.core (Ядро системи) Центральний пакет системи, який
містить головний клас контролера, що реалізує життєвий цикл застосунку.
Вміст: Логіка фільтрації, пошуку, сортування масивів відео, управління
станом модальних вікон та координація роботи інших пакетів.
34
ЧДТУ 262243.005 ПЗ
Рисунок 2.6 – Діаграма пакетів
Залежності: Є найбільш "зв'язаним" пакетом, оскільки для виконання своїх
функцій він агрегує можливості пакетів models, services та storage.
Пакет vidkeeper.models (Моделі даних) Містить структури даних (Data
Transfer Objects), якими оперує система.
Вміст: Логічний опис сутності відеоролика (Video), який містить усі
необхідні поля (ідентифікатор, назва, посилання, обкладинка, категорія,
нотатки). Цей пакет є найменш залежним від інших частин системи.
Пакет vidkeeper.services (Допоміжні сервіси) Пакет, що інкапсулює складну
або асинхронну логіку, яка не стосується безпосередньо інтерфейсу користувача.
Вміст: * Модуль мережевої взаємодії, що відповідає за використання Fetch
API для формування запитів до зовнішніх ресурсів.
35
ЧДТУ 262243.005 ПЗ
Модуль парсингу (синтаксичного аналізу), який містить регулярні вирази
для перетворення різних форматів посилань YouTube в єдиний стандартизований
ID.
Залежності: Має зовнішню залежність від Noembed API.
Пакет vidkeeper.storage (Сховище даних) Відповідає за абстракцію роботи з
механізмами постійного зберігання.
Вміст: Логіка серіалізації (перетворення об'єктів JavaScript у рядок JSON)
та десеріалізації масивів даних для їх безпечного запису і зчитування.
Залежності: Залежить від нативного Web Storage API середовища
виконання (браузера).
2.4. Архітектурне проектування
Для опису архітектурного проєктування більш детальніше розглянемо
діаграми: діаграма компонентів, розгортання програмної системи на апаратних
засобах та діаграму розгортання.
2.4.1. Діаграма компонентів
Діаграма компонентів (UML Component Diagram) відображає структурну
організацію програмної системи та залежності між її окремими складовими. Для
web-системи «VidKeeper» компонентна архітектура побудована навколо
логічного розділення відповідальності між представленням даних, бізнес-
логікою, механізмами збереження та зовнішньою інтеграцією (рис. 2.7).
Представимо детальний опис компонентів системи.
Компонент інтерфейсу користувача (UI Component)
Відповідає за формування візуальної оболонки застосунку та взаємодію з
користувачем. Забезпечує семантичну розмітку сторінки, стилізацію елементів
(реалізація ефекту Glassmorphism) та адаптивність під різні розміри екранів.
Інтерфейси взаємодії: Збирає дії користувача (кліки на кнопки навігації,
введення пошукових запитів, вставку посилань) у вигляді подій (DOM Events) та
передає їх компоненту бізнес-логіки. Приймає від логіки команди на оновлення
DOM-дерева (наприклад, перемальовування карток відеороликів).
36
ЧДТУ 262243.005 ПЗ
Рисунок 2.7 – Діаграма компонентів
Компонент бізнес-логіки (Core Logic Component)
Є центральним вузлом застосунку. Містить правила обробки даних:
фільтрацію за категоріями, логіку текстового пошуку, сортування масиву відео
(закріплені пріоритетніші за нові), управління життєвим циклом модальних вікон
(відкриття, закриття, збереження змін).
Інтерфейси взаємодії: Цей компонент виступає "мостом" між усіма іншими
частинами системи. Він слухає UI, формує запити до компонента інтеграції та
відправляє/отримує дані з компонента зберігання.
37
ЧДТУ 262243.005 ПЗ
Компонент інтеграції (API Client Component)
Забезпечує безпечну та швидку комунікацію із зовнішнім світом.
Отримуючи сире посилання на відео з платформи YouTube, цей компонент
розпізнає формат посилання, вилучає з нього унікальний ідентифікатор і формує
правильний запит до стороннього сервісу.
Інтерфейси взаємодії: Використовує протокол HTTP (метод GET) для
запиту до відкритого сервісу Noembed API. Обробляє отриману відповідь,
перетворюючи сирий JSON у структуровані метадані (назву відео та посилання
на обкладинку), після чого повертає їх до компонента бізнес-логіки.
Компонент зберігання (Storage Component)
Забезпечує персистентність (постійність) даних між сесіями користувача.
Замінює собою класичну серверну базу даних для забезпечення максимальної
швидкодії та автономності клієнтського застосунку.
Отримує від бізнес-логіки масиви JavaScript (відео та категорії), серіалізує
їх у текстовий формат JSON (JSON.stringify) для запису, та виконує зворотний
процес (JSON.parse) при завантаженні застосунку.
Зовнішній сервіс (Noembed API)
Стороння система, яка інкапсулює складність взаємодії з офіційним API
YouTube. Замість налаштування OAuth 2.0 та генерування ключів доступу,
система «VidKeeper» делегує завдання отримання обкладинок (thumbnails) та
назв відео цьому сервісу, отримуючи стандартизовану відповідь за відкритим
ендпоінтом без лімітів на кількість запитів для даного масштабу.
2.4.2. Розгортання програмної системи на апаратних засобах. Діаграма
розгортання
Діаграма розгортання (Deployment Diagram) моделює фізичну топологію
апаратного забезпечення, на якому виконується система, та розподіл програмних
компонентів (артефактів) по цих вузлах. Для web-системи «VidKeeper»
інфраструктура складається з трьох основних фізичних/логічних вузлів: сервера
хостингу, клієнтського пристрою та стороннього API-сервера. На рисунку 2.8
зображено UML діаграму розгортання.
38
ЧДТУ 262243.005 ПЗ
Рисунок 2.8 – Діаграма розгортання
На діній діаграмі зображено:
Короткий опис вузлів (Nodes) та їх взаємодії:
Вузол «Веб-сервер (Хостинг)»
Будь-який сервер (хмарний або фізичний), налаштований для віддачі
статичного контенту. Це може бути як повноцінний сервер з Nginx/Apache, так і
безкоштовні платформи на кшталт GitHub Pages.
39
ЧДТУ 262243.005 ПЗ
Артефакти: Сервер зберігає фізичні файли розробленого програмного
забезпечення (index.html, style.css, script.js).
Роль: Його єдина задача – відповісти на початковий запит користувача та
завантажити файли системи у браузер клієнта через захищений протокол HTTPS.
Вузол «Пристрій користувача»
Фізичний пристрій кінцевого користувача (персональний комп'ютер,
ноутбук, планшет або смартфон), який має підключення до мережі Інтернет та
встановлений веб-браузер.
Середовище виконання (Execution Environment): Веб-браузер (Google
Chrome, Safari, Firefox тощо). Саме тут відбувається безпосереднє виконання
(рендеринг інтерфейсу та запуск JavaScript) застосунку «VidKeeper».
Зберігання даних: Оскільки система є автономною, усі користувацькі дані
(збережені відео, категорії, нотатки) фізично записуються на жорсткий диск
клієнтського пристрою за допомогою підсистеми браузера LocalStorage. Дані не
відправляються на сервер хостингу.
Вузол «Сервер Noembed»
Зовнішній незалежний сервер, який надає доступ до публічного API.
Клієнтський пристрій періодично звертається до цього вузла за допомогою
асинхронних HTTP-запитів (Fetch), коли користувач додає нове посилання.
Сервер обробляє запит і повертає необхідні системі метадані відео у форматі
JSON.
Особливості архітектури розгортання:
Дана топологія демонструє архітектуру типу «Товстий клієнт» (Thick
Client), де 100% обчислювального навантаження (бізнес-логіка, фільтрація,
парсинг URL, збереження стану) перекладено на пристрій користувача. Це
мінімізує витрати на утримання серверної інфраструктури (сервер хостингу
залишається майже ненавантаженим) та забезпечує миттєвий відгук інтерфейсу.
2.5. Моделювання поведінки системи
Даний підрозділ присвячений опису моделювання поведінки системи за
40
ЧДТУ 262243.005 ПЗ
допомогою таких діаграм: діаграма діяльності, діаграма комунікації, діаграма
скінченного автомату.
2.5.1. Діаграма діяльності
На рисунку 2.9 зображена діаграма діяльності, яка узагальнено презентує
процес додавання нового відеоролика. Представлений алгоритм оптимізовано:
після введення користувачем URL-посилання, система перевіряє його
коректність та вилучає ідентифікатор відео. Якщо посилання невалідне або відео
вже існує – процес переривається помилкою. У разі успіху система автоматично
звертається до зовнішнього API для завантаження обкладинки та назви, зберігає
новий запис у локальну пам'ять браузера і миттєво оновлює інтерфейс,
відображаючи нове відео у загальній сітці.
Рисунок 2.9 – Діаграма діяльності
2.5.2. Діаграма послідовності
Діаграма послідовності (UML Sequence Diagram) відображає динаміку
взаємодії між компонентами системи у часі для реалізації конкретного сценарію
41
ЧДТУ 262243.005 ПЗ
використання (Use Case). На рисунку 2.10 змодельовано хронологічну
послідовність обміну повідомленнями під час процесу додавання нового
відеоролика до бази знань користувача.
У взаємодії беруть участь п'ять основних ліній життя (Lifelines): Актор
(Користувач), Інтерфейс (DOM-дерево браузера), Бізнес-логіка (екземпляр класу
VideoApp), Зовнішній сервіс (Noembed API) та Сховище даних (LocalStorage).
Рисунок 2.10 – Діаграма послідовності
Детальний опис кроків взаємодії (відповідно до нумерації на діаграмі):
1 Ініціація процесу: Користувач взаємодіє з візуальним інтерфейсом –
вставляє скопійовану URL-адресу в текстове поле input та натискає кнопку
42
ЧДТУ 262243.005 ПЗ
«Додати».
2 Передача управління: DOM-елемент (кнопка) генерує подію onclick, яка
викликає метод handleAddVideo() у головному контролері бізнес-логіки
(VideoApp).
3 Внутрішня обробка (Валідація): Контролер самостійно виконує
перевірку наявності тексту та викликає власний допоміжний метод
extractVideoID(url) для застосування регулярного виразу (RegExp). Далі логіка
розгалужується (блок alt).
4 Гілка помилки (Невалідні дані): Якщо парсер повертає null (посилання
не розпізнано), логіка повертає інтерфейсу команду на виведення помилки.
5 Сповіщення користувача: Інтерфейс відображає системне спливаюче
вікно (alert) з відповідним текстом. Процес завершується.
6 Перевірка унікальності (Успішна гілка): Якщо ID отримано успішно,
контролер перевіряє свій внутрішній стан (масив об'єктів videos), чи не існує вже
елемент з таким самим youtubeId.
7 Гілка помилки (Дублікат): Якщо знайдено збіг, логіка генерує
повідомлення про помилку.
8 Сповіщення користувача: Інтерфейс попереджає користувача, що дане
відео вже є в його каталозі. Процес переривається для уникнення надмірності
даних.
9 Запит до зовнішньої системи (API): Якщо відео є унікальним,
контролер призупиняє своє виконання (завдяки await) і відправляє мережевий
запит (fetch) до сервера Noembed API, передаючи йому ідентифікатор відео.
10 Отримання відповіді: Сервер Noembed API обробляє запит і повертає
назад клієнту серіалізований JSON-об'єкт, що містить очищені метадані (зокрема
title та thumbnail_url).
11 Формування сутності: Контролер створює новий JavaScript-об'єкт,
об'єднуючи отримані метадані з системними полями (генерація унікального ID
на основі часу, встановлення базової категорії).
12 Оновлення стану: Новий об'єкт додається на початок локального
43
ЧДТУ 262243.005 ПЗ
масиву відеороликів.
13 Персистентність даних: Контролер викликає метод збереження, який
серіалізує оновлений масив у рядок і передає його до API браузера
(LocalStorage).
14 Підтвердження збереження: Сховище виконує синхронний запис на
диск і повертає управління контролеру.
15 Оновлення представлення: Контролер дає команду інтерфейсу на
перемальовування та очищує значення поля вводу.
16 Завершення: Інтерфейс рендерить нову HTML-розмітку сітки, і
користувач візуально бачить щойно додану картку відеоролика на екрані свого
пристрою. Процес успішно завершено.
2.5.3. Діаграма комунікації
На рисунку 2.11 представлено діаграму комунікацій (в попередніх версіях
UML – діаграма співробітництва), що моделює взаємодію між об'єктами або
частинами системи, акцентуючи увагу на архітектурних зв'язках між ними. Для
демонстрації обрано базовий сценарій – додавання нового відеоролика в
систему. Повідомлення, якими обмінюються об'єкти, мають ієрархічну
нумерацію, що вказує на порядок їх виконання в межах єдиного процесу.
На діаграмі представлено 5 основних вузлів (об'єктів), які пов'язані між
собою структурними лініями (каналами зв'язку). Послідовність обробки запиту
визначається нумерацією повідомлень.
1 Клік 'Додати': Ініціатором взаємодії є Користувач, який відправляє
початкове повідомлення об'єкту Інтерфейс (натискає кнопку після введення
посилання).
1.1 handleAddVideo(url): Інтерфейс (DOM-елемент кнопки) делегує
обробку події головному об'єкту Контролер (екземпляру класу VideoApp),
передаючи йому введену URL-адресу.
1.1.1 extractVideoID(): Це внутрішнє повідомлення (self-message).
Контролер звертається сам до себе, щоб виконати парсинг посилання та
вилучити з нього ідентифікатор відео.
44
ЧДТУ 262243.005 ПЗ
Рисунок 2.10 – Діаграма комунікації
1.2 HTTP GET запит: Контролер звертається до зовнішнього об'єкта
Зовнішній сервіс (Noembed API) з проханням надати інформацію про відео за
його ID.
1.3 Повернення метаданих: Зовнішній сервіс відповідає контролеру,
передаючи необхідні дані (назву та картинку).
1.4 saveData(): Отримавши дані та сформувавши новий запис, Контролер
відправляє команду об'єкту Сховище на серіалізацію та постійне збереження
оновленого масиву.
1.5 renderVideos(): На останньому етапі Контролер відправляє
повідомлення об'єкту Інтерфейс про необхідність оновити візуальне
відображення списку відео для користувача.
Така структура наочно демонструє, що клас-контролер (VideoApp) є
центральним диспетчером системи, з яким пов'язані всі інші вузли, тоді як
Інтерфейс, Сховище та API безпосередньо між собою не взаємодіють.
2.5.4. Діаграма скінченного автомату
Діаграма скінченного автомату, що представлена на рисунку 2.11 моделює
динамічну поведінку окремого об'єкта системи, показуючи всі можливі стани, у
45
ЧДТУ 262243.005 ПЗ
яких він може перебувати, та події (виклики методів), що спричиняють переходи
між цими станами. На рисунку нижче зображено модель життєвого циклу об'єкта
Video у web-системі «VidKeeper»..
Рисунок 2.11 – Діаграма скінченного автомату
Нове (Ініціалізація): Транзитний стан. Об'єкт формується в пам'яті після
введення URL користувачем та очікує отримання метаданих від Noembed API.
Якщо посилання невалідне – об'єкт знищується.
Збережене (Основний стан): Відео успішно записано у LocalStorage та
відображається в сітці. Це композитний (вкладений) стан, оскільки всередині
нього відео може циклічно переходити між підстанами:
Звичайне – відображається у загальному списку.
Закріплене – додано до «Улюблених» (змінено прапорець isPinned), має
вищий пріоритет при сортуванні.
В Редагуванні: Стан блокування об'єкта, коли користувач відкрив модальне
вікно для зміни категорії чи нотаток. Зміни зберігаються (повернення в стан
Збережене) або скасовуються.
Видалене: Кінцевий стан. Користувач ініціював видалення, об'єкт
вилучається з масиву videos, після чого очищується збирачем сміття (Garbage
Collector) браузера. Життєвий цикл завершується.
46
ЧДТУ 262243.005 ПЗ
Висновок до розділу 2
В другому розділі проведено впровадження результатів дослідження для
проєктування програмного забезпечення web-системи структурування
відеоконтенту, що забезпечить необхідні потреби, а саме:
1 моделювання предметної області;
2 вимоги до програмного забезпечення;
3 структуру програмного комплексу, з розробкою діаграм класів та
пакетів;
4 архітектурне проєктування, що демонструє з яких компонентів буде
складатися ПЗ та яким чином дана система буде розгортатись на
апаратних засобах;
5 моделювання поведінки системи за: діяльністю, послідовністю,
комунікацією та скінченного автомату, що демонструє стани її роботи.
47
ЧДТУ 262243.005 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1. Розробка програмного комплексу
3.1.1. Обґрунтування вибору засобів реалізації
Для створення клієнтської частини web-системи структурування
відеоконтенту «VidKeeper» було обрано базовий стек веб-технологій: HTML5,
CSS3 та Vanilla JavaScript (чистий JavaScript без використання сторонніх
фреймворків). Нижче наведено обґрунтування вибору кожного з цих
інструментів.
HTML5 (HyperText Markup Language)
1 Структурування контенту: HTML5 є основною мовою для створення
каркаса односторінкового веб-застосунку (SPA). Вона дозволяє
визначити ключові елементи інтерфейсу: навігаційну панель, блоки
пошуку, контейнери для сітки відеокарток та модальні вікна.
2 Семантична розмітка: Використання семантичних тегів (наприклад,
<header>, <main>, <aside>, <nav>) покращує доступність системи
(Accessibility) та робить структуру коду більш логічною і зрозумілою
для подальшої підтримки розробниками.
3 Незалежність: Нативна HTML-розмітка підтримується абсолютно
всіма сучасними веб-браузерами та є основою, поверх якої працює вся
подальша логіка застосунку.
4 CSS3 (Cascading Style Sheets)
5 Стилізація та візуальні ефекти: CSS3 використовується для реалізації
сучасного оформлення інтерфейсу. Зокрема, у проєкті імплементовано
популярний стиль «Glassmorphism» (ефект матового скла) за
допомогою властивості backdrop-filter та напівпрозорих фонів, що
робить дизайн легким та естетичним [20].
6 Адаптивний дизайн (Layouts): Замість використання важких сторонніх
бібліотек (на кшталт Bootstrap), для побудови інтерфейсу застосовано
48
ЧДТУ 262243.005 ПЗ
сучасні CSS-модулі — Flexbox та CSS Grid. Вони забезпечують
створення гнучкої сітки відеокарток, яка автоматично підлаштовується
під розмір екрана (десктоп, планшет чи смартфон).
7 Гнучкість налаштувань: Використання нативних CSS-змінних (:root)
дозволяє централізовано керувати кольоровою схемою застосунку
(темною темою) та легко вносити глобальні зміни в дизайн.
8 Vanilla JavaScript (ES6+)
9 Об'єктно-орієнтований підхід: Використання сучасного стандарту
JavaScript (ES6) дозволило структурувати всю бізнес-логіку в межах
єдиного класу (VideoApp), що забезпечує інкапсуляцію даних та уникає
засмічення глобальної області видимості.
10 Маніпуляція DOM та Інтерактивність: Чистий JavaScript забезпечує
високу швидкість взаємодії з Document Object Model (DOM). Він
дозволяє динамічно генерувати нові картки відеороликів, оновлювати
списки категорій та керувати модальними вікнами без
перезавантаження сторінки.
11 Взаємодія з Web API (Збереження даних): Замість серверних баз даних,
JavaScript використовує браузерний механізм Web Storage API
(localStorage). Це дозволяє локально зберігати серіалізовані у JSON дані
(відео, категорії), роблячи застосунок швидким та автономним.
12 Асинхронна інтеграція (Fetch API): Нативний метод fetch() у поєднанні
з синтаксисом async/await дозволяє системі легко та асинхронно
отримувати метадані відео із зовнішнього сервісу (Noembed API) без
використання застарілих AJAX-запитів чи сторонніх бібліотек.
Вибір нативних технологій HTML5, CSS3 та Vanilla JavaScript для
розробки web-системи «VidKeeper» обґрунтований їхньою високою
продуктивністю та незалежністю. Відмова від використання важких фреймворків
чи застарілих бібліотек (наприклад, jQuery) дозволила створити максимально
швидкий, безпечний та сучасний веб-застосунок, який повністю виконує
поставлені завдання та відповідає найвищим стандартам веб-розробки.
49
ЧДТУ 262243.005 ПЗ
3.1.2 Опис структурної (функціональної) схеми
На рисунку 3.1 представлена структура клієнтської частини додатку.
Рисунок 3.1 – Структура клієнтської частини
Структурна (функціональна) схема web-системи «VidKeeper» відображає
базові логічні компоненти застосунку та інформаційні потоки між ними.
Оскільки програмне забезпечення спроєктовано як повністю клієнтський
односторінковий застосунок (SPA), його архітектура розгорнута в межах
середовища веб-браузера і складається з чотирьох основних взаємодіючих
модулів.
1 Модуль користувацького інтерфейсу (UI Module) Єдиний
компонент, з яким безпосередньо взаємодіє користувач. Відповідає за рендеринг
DOM-дерева та перехоплення подій (кліки, введення тексту). Структурно
поділяється на такі підсистеми:
1 Підсистема навігації (Sidebar): Забезпечує перемикання між
глобальними фільтрами («Всі відео», «Улюблені») та містить
динамічний список користувацьких категорій.
50
ЧДТУ 262243.005 ПЗ
2 Підсистема управління контентом (Main Content): Включає поле
пошуку, форму додавання нового відео за URL-посиланням та
адаптивну сітку карток відеороликів.
3 Підсистема модальних вікон (Modals): Відповідає за відображення
діалогових вікон для редагування існуючих записів (назва,
категорія, нотатки) та створення нових категорій.
2 Модуль управління бізнес-логікою (Logic Module) Центральний
компонент системи, реалізований у вигляді головного класу VideoApp. Виконує
роль контролера, що зв'язує інтерфейс із даними. Його основні функції:
1 Ініціалізація застосунку та завантаження початкового стану.
2 Обробка вхідних даних (фільтрація масиву відео за категоріями,
пошук за підрядком у назві чи описі).
3 Управління життєвим циклом об'єктів (створення нового об'єкта
відео, редагування полів, закріплення/відкріплення, видалення).
3 Модуль зовнішньої інтеграції (Network/API Module) Відповідає за
комунікацію системи із зовнішніми веб-сервісами. Складається з:
1 Аналізатора (Парсера) URL: Використовує регулярні вирази
(RegExp) для вилучення унікального ідентифікатора (ID) відео з
різних форматів посилань YouTube (youtu.be, watch?v=, embed).
2 Асинхронного клієнта: Виконує HTTP-запити (за допомогою Fetch
API) до відкритого сервісу noembed.com для отримання метаданих
відеоконтенту (оригінальної назви та посилання на обкладинку) у
форматі JSON.
4 Модуль постійного зберігання даних (Storage Module) Забезпечує
автономність системи та збереження користувацької інформації між сесіями
(перезавантаженнями сторінки) без використання зовнішніх баз даних.
1 Використовує механізм браузера Web Storage API (localStorage).
2 Здійснює серіалізацію (перетворення JavaScript-об'єктів і масивів у
JSON-рядки) при збереженні (метод saveData()) та десеріалізацію
при завантаженні застосунку (метод loadData()).
51
ЧДТУ 262243.005 ПЗ
Алгоритм функціональної взаємодії модулів (на прикладі додавання
відео):
1 Користувач вводить URL-адресу в Модулі UI та ініціює подію
додавання.
2 Модуль бізнес-логіки перехоплює подію та передає URL до Модуля
зовнішньої інтеграції.
3 Парсер вилучає ID відео, після чого виконується асинхронний запит до
Noembed API.
4 Отримані метадані повертаються в Модуль бізнес-логіки, який формує
новий об'єкт відеоролика (додаючи системні поля, такі як дата створення та
категорія за замовчуванням).
5 Оновлений масив даних передається до Модуля постійного зберігання
для запису в локальну пам'ять браузера.
6 Модуль бізнес-логіки віддає команду Модулю UI на перемальовування
(рендерінг) сітки відеокарток з урахуванням нових даних.
Така структурна схема забезпечує низьку зв'язність (loose coupling) між
відображенням даних та їх обробкою, що робить систему стійкою до помилок та
легкою для подальшого масштабування.
3.1.3. Опис логічної схеми системи
На рисунку 3.2 зображена логічна схема веб системи. Логічна схема
системи «VidKeeper» відображає абстрактну організацію даних та логічний
розподіл функціональних рівнів застосунку. Вона дозволяє зрозуміти, якими
інформаційними сутностями оперує система та як ці сутності взаємодіють між
собою без прив'язки до конкретної фізичної реалізації (файлів чи таблиць
реляційної бази даних).
Оскільки застосунок використовує документо-орієнтований підхід до
збереження даних (формат JSON у LocalStorage), логічну схему бази даних
найдоцільніше представити у вигляді діаграми «Сутність-Зв'язок» (ER-діаграми).
52
ЧДТУ 262243.005 ПЗ
Рисунок 3.2 – Логічнна схема системи
1 Логічна модель даних
Система оперує двома основними логічними сутностями, які утворюють
єдиний інформаційний простір (System):
1 Сутність «Відео» (VIDEO): Головна інформаційна одиниця системи.
Логічно представляє собою картку збереженого матеріалу. Містить
як системні атрибути (унікальний первинний ключ id, дата
створення createdAt), так і інформаційні (метадані YouTube: title,
thumbnail). Логічний атрибут isPinned визначає пріоритетність
відображення об'єкта.
2 Сутність «Категорія» (CATEGORY): Допоміжна сутність (у коді
реалізована як масив рядків), що слугує класифікатором. Відіграє
роль первинного ключа для фільтрації.
3 Логічні зв'язки: Між сутностями «Відео» та «Категорія» існує
53
ЧДТУ 262243.005 ПЗ
зв'язок типу «багато-до-одного» (N:1). Одне відео може належати
лише до однієї категорії, але одна категорія може містити безліч
відеороликів. При цьому категорія може існувати логічно навіть
тоді, коли в ній немає жодного збереженого відео.
2 Логічна багаторівнева архітектура
З точки зору обробки інформації, логічна схема «VidKeeper» розділена на
три взаємодіючі рівні (Three-Tier Logical Architecture), які розгорнуті в межах
браузера:
1 Рівень представлення (Presentation Layer):
1 Логічна функція: Візуалізація даних та перехоплення інтенцій
(намірів) користувача.
2 Опис: Логічно відповідає за те, щоб трансформувати стан системи
(наприклад, масив об'єктів відео) у зрозумілий користувачеві вигляд
(сітка карток). Цей рівень не приймає рішень про те, як шукати чи
сортувати дані – він лише відображає готовий результат.
2 Рівень прикладної логіки (Application/Business Logic Layer):
1 Логічна функція: Застосування бізнес-правил та управління станом.
2 Опис: Це «мозок» системи. На цьому рівні реалізовано логічні
правила:
1 Правило сортування: Система спочатку виводить ті сутності
Video, у яких атрибут isPinned = true, а потім усі інші,
відсортовані за спаданням атрибута createdAt (найновіші
зверху).
2 Правило пошуку: Логіка здійснює нечутливий до регістру
пошук введеного підрядка одночасно у двох атрибутах: title та
description.
3 Правило унікальності: Система забороняє створення нового
об'єкта Video, якщо його логічний атрибут youtubeId збігається з
існуючим у базі.
3 Рівень доступу до даних (Data Access / Persistence Layer):
54
ЧДТУ 262243.005 ПЗ
1 Логічна функція: Забезпечення постійності (персистентності) стану.
2 Опис: Цей рівень абстрагує бізнес-логіку від того, як саме
зберігаються дані. Він відповідає за логічний процес серіалізації
(перетворення логічних сутностей у текстовий формат JSON) перед
записом у браузерне сховище та десеріалізації (відновлення
логічних зв'язків та масивів) під час завантаження застосунку.
3.1.4. Розробка інтерфейсу користувача
Розробка користувацького інтерфейсу (UI) та проєктування
користувацького досвіду (UX) виконувалися з урахуванням сучасних тенденцій
веб-дизайну та вимог до ергономіки програмного забезпечення. Головною
концепцією візуального оформлення системи «VidKeeper» було обрано стиль
«Glassmorphism» (ефект матового скла) у поєднанні з глибокою темною
кольоровою схемою (Dark Mode) та градієнтним анімованим фоном. Таке
рішення дозволяє сфокусувати увагу користувача на яскравих обкладинках
відеороликів і зменшує навантаження на зір при тривалій роботі.
Застосунок реалізовано як односторінковий (SPA), що виключає
необхідність перезавантаження сторінки при переході між розділами. Робочий
простір екрану логічно поділено на дві основні функціональні зони: статичну
бокову панель навігації та динамічну головну робочу область.
1 Бокова панель навігації (Sidebar) Розташована в лівій частині екрану
і закріплена статично. Її основними елементами є:
1 Логотип системи: Графічна іконка та назва застосунку.
2 Глобальні фільтри: Кнопки «Всі відео» та «Улюблені». Активний
розділ візуально підсвічується, інформуючи користувача про
поточне місцезнаходження.
3 Блок «Категорії»: Динамічний список створених користувачем
папок. Кожна категорія є кнопкою-фільтром.
4 Кнопка «Нова категорія»: Дозволяє швидко додати новий розділ для
класифікації контенту.
55
ЧДТУ 262243.005 ПЗ
Рисунок 3.3 – Головне вікно web-системи «VidKeeper»
2 Верхня панель інструментів (Top Bar) Розташована у верхній частині
головної робочої області. Містить ключові елементи взаємодії:
1 Рядок пошуку (Search Bar): Дозволяє здійснювати миттєвий
текстовий пошук по назвах та нотатках збережених відео.
2 Панель додавання відео: Складається з текстового поля (куди
користувач вставляє URL-посилання з YouTube) та акцентної
кнопки «Додати».
3 Робоча область та відображення контенту (Videos Grid) Основну
площу екрану займає адаптивна сітка збережених відеоматеріалів. Завдяки
використанню технології CSS Grid, картки відеороликів автоматично
підлаштовуються під ширину вікна браузера, забезпечуючи коректне
відображення як на широких моніторах, так і на менших екранах. Якщо у
вибраній категорії немає матеріалів, система виводить інформаційне
56
ЧДТУ 262243.005 ПЗ
повідомлення «Відео не знайдено».
Рисунок 3.4 – Розділ «Улюблені»
4 Компонент «Картка відеоролика» Кожен збережений матеріал
представлений у вигляді окремого графічного блоку (картки)
Рисунок 3.5 – Компонент «Картка відеоролика»
57
ЧДТУ 262243.005 ПЗ
Картка містить:
1 Обкладинку (Thumbnail): При наведенні курсора миші (hover-ефект)
поверх обкладинки плавно з'являється напівпрозора маска з іконкою
відтворення. Натискання на обкладинку відкриває оригінальне відео на
платформі YouTube у новій вкладці.
2 Метадані: Назву відеоролика та текстовий опис (нотатки користувача).
Якщо текст занадто довгий, він автоматично скорочується (CSS line-
clamp), щоб зберегти візуальну цілісність сітки.
3 Інформаційний тег: Відображає приналежність відео до певної
категорії.
4 Панель дій (Action Buttons): Розташована в нижній частині картки і
містить три функціональні кнопки:
1 Закріпити/Відкріпити (значок шпильки) – додає відео до
«Улюблених». Закріплені відео візуально виділяються кольором
іконки та завжди відображаються на початку списку.
2 Редагувати (значок олівця) – викликає модальне вікно для зміни
даних.
3 Видалити (значок кошика) – видаляє відео із системи (при наведенні
підсвічується червоним кольором для попередження про
деструктивну дію).
Модальні вікна (Modals) Для виконання операцій, що потребують
зосередженості (редагування даних або підтвердження дій), інтерфейс
використовує модальні вікна. Вони з'являються поверх основного контенту з
ефектом затемнення та розмиття фону.
Модальне вікно редагування містить:
1 Текстове поле для зміни назви.
2 Випадний список (Dropdown) для перенесення відео в іншу категорію.
3 Текстову область (Textarea) для ведення розгорнутих нотаток.
4 Кнопки збереження змін та закриття вікна.
Загалом, розроблений користувацький інтерфейс відповідає критеріям
58
ЧДТУ 262243.005 ПЗ
інтуїтивної зрозумілості (Self-evident UI), не перевантажений зайвими
елементами та забезпечує швидкий доступ до всіх необхідних інструментів
управління відеоконтентом.
Рисунок 3.6 – Модальне вікно редагування відео
Розроблений додаток також володіє адаптивністю, що дозволяє ним
користуватися на мобільних пристроях, таких як планшет та телефон. Вигляд
програмного забезпечення на мобільному пристрої зображено на рис. 3.13.
Де зображено вигляд розгорнутого меню та порядок відображення відео у
один стовпчик, що є зручним для перегляду на телефоні з портретною
орієнтацією екрану.
59
ЧДТУ 262243.005 ПЗ
Рисунок 3.7 – Мобільна адаптація
3.1.5. Розробка бази даних
Наведемо до розробленої бази даних її структуру.
Основні сутності (Entities) та зв'язки:
1 User (Користувач) — зв'язок 1:M (один до багатьох) із сутністю Video
(якщо користувач є автором) та 1:M з Comment.
2 Video (Відеоконтент) — головна сутність.
3 Category (Категорія) — зв'язок 1:M або M:M з Video.
4 Tag (Тег) — зв'язок M:M (багато до багатьох) з Video (одне відео має
багато тегів, один тег є у багатьох відео). Потрібна проміжна таблиця
Video_Tags.
60
ЧДТУ 262243.005 ПЗ
5 Playlist (Плейлист) — зв'язок M:M з Video через проміжну таблицю з
вказанням порядкового номера відео в плейлисті (video_order).
6 VideoEpisode / Chapter (Таймкоди/Глави) — зв'язок 1:M з Video
(структурування всередині одного відеофайлу).
Наведемо приклад базової схеми даних у форматі SQL (PostgreSQL) для
реляційної частини системи.
// Реляційна структура бази даних для веб-системи структурування
відеоконтенту
Table users {
user_id integer [primary key, increment]
username varchar(50) [unique, not null]
email varchar(100) [unique, not null]
password_hash varchar(255) [not null]
role varchar [note: 'admin, moderator, creator, viewer']
created_at timestamp
}
Table categories {
category_id integer [primary key, increment]
name varchar(100) [not null]
slug varchar(100) [unique, not null]
parent_id integer
}
Table tags {
tag_id integer [primary key, increment]
name varchar(50) [unique, not null]
}
Table videos {
video_id integer [primary key, increment]
title varchar(255) [not null]
description text
duration integer [note: 'в секундах']
video_url varchar(500) [not null]
thumbnail_url varchar(500)
views_count integer [default: 0]
61
ЧДТУ 262243.005 ПЗ
creator_id integer
category_id integer
status varchar [note: 'uploaded, processing, ready, private']
created_at timestamp
}
// Проміжна таблиця для зв'язку Багато-до-Багатьох (Відео - Теги)
Table video_tags {
video_id integer
tag_id integer
Indexes {
(video_id, tag_id) [pk]
}
}
// Таймкоди/Глави всередині відео
Table video_chapters {
chapter_id integer [primary key, increment]
video_id integer
title varchar(150) [not null]
start_time integer [not null]
end_time integer [not null]
}
// Історія переглядів та прогрес
Table watch_history {
history_id integer [primary key, increment]
user_id integer
video_id integer
watched_position integer [default: 0]
is_finished boolean [default: false]
updated_at timestamp
}
// Визначення зв'язків та реляцій (Foreign Keys)
Ref: categories.parent_id > categories.category_id // Ієрархія категорій
(підкатегорії)
Ref: videos.creator_id > users.user_id [delete: set null]
Ref: videos.category_id > categories.category_id [delete: set null]
62
ЧДТУ 262243.005 ПЗ
Ref: video_tags.video_id > videos.video_id [delete: cascade]
Ref: video_tags.tag_id > tags.tag_id [delete: cascade]
Ref: video_chapters.video_id > videos.video_id [delete: cascade]
Ref: watch_history.user_id > users.user_id [delete: cascade]
Ref: watch_history.video_id > videos.video_id [delete: cascade]
1 Таблиця користувачів та ролей
CREATE TYPE user_role AS ENUM ('admin', 'moderator', 'creator', 'viewer');
CREATE TABLE users (
user_id SERIAL PRIMARY KEY,
username VARCHAR(50) UNIQUE NOT NULL,
email VARCHAR(100) UNIQUE NOT NULL,
password_hash VARCHAR(255) NOT NULL,
role user_role DEFAULT 'viewer',
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
2 Таблиці для структурування (Категорії та Теги)
CREATE TABLE categories (
category_id SERIAL PRIMARY KEY,
name VARCHAR(100) UNIQUE NOT NULL,
slug VARCHAR(100) UNIQUE NOT NULL, -- для URL
parent_id INT REFERENCES categories(category_id) -- для підкатегорій
);
CREATE TABLE tags (
tag_id SERIAL PRIMARY KEY,
name VARCHAR(50) UNIQUE NOT NULL
);
3 Таблиця відеоконтенту
CREATE TABLE videos (
video_id SERIAL PRIMARY KEY,
title VARCHAR(255) NOT NULL,
description TEXT,
duration INT NOT NULL, -- в секундах
video_url VARCHAR(500) NOT NULL, -- посилання на файл (наприклад, в AWS S3)
thumbnail_url VARCHAR(500), -- обкладинка відео
views_count INT DEFAULT 0,
63
ЧДТУ 262243.005 ПЗ
creator_id INT REFERENCES users(user_id) ON DELETE SET NULL,
category_id INT REFERENCES categories(category_id) ON DELETE SET NULL,
status VARCHAR(20) DEFAULT 'processing', -- uploaded, processing, ready,
private
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
4 Зв'язок Багато-до-Багатьох (Відео <-> Теги)
CREATE TABLE video_tags (
video_id INT REFERENCES videos(video_id) ON DELETE CASCADE,
tag_id INT REFERENCES tags(tag_id) ON DELETE CASCADE,
PRIMARY KEY (video_id, tag_id)
);
5 Структурування всередині відео (Таймкоди / Глави)
Дозволяє користувачеві навігувати по логічних частинах відео.
CREATE TABLE video_chapters (
chapter_id SERIAL PRIMARY KEY,
video_id INT REFERENCES videos(video_id) ON DELETE CASCADE,
title VARCHAR(150) NOT NULL,
start_time INT NOT NULL, -- час початку в секундах
end_time INT NOT NULL
);
6 Історія переглядів та прогрес (для аналітики)
CREATE TABLE watch_history (
history_id SERIAL PRIMARY KEY,
user_id INT REFERENCES users(user_id) ON DELETE CASCADE,
video_id INT REFERENCES videos(video_id) ON DELETE CASCADE,
watched_position INT DEFAULT 0, -- на якій секунді зупинився
is_finished BOOLEAN DEFAULT FALSE,
updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
3.1.6. Опис розробки програмних компонентів
Розробка клієнтського програмного забезпечення web-системи
«VidKeeper» здійснювалась з використанням об'єктно-орієнтованого підходу
мови JavaScript (стандарт ES6+). Для уникнення глобальної видимості змінних та
структурування коду, усю базову бізнес-логіку було інкапсульовано в межах
єдиного класу VideoApp.
Нижче розглянуто особливості програмної реалізації ключових
64
ЧДТУ 262243.005 ПЗ
компонентів системи.
1 Розробка компонента постійного зберігання даних Оскільки система
спроєктована як автономний клієнтський застосунок, для збереження стану
(масивів відео та категорій) між сесіями користувача було використано Web
Storage API.
Для цього реалізовано методи серіалізації та десеріалізації об'єктів.
Збереження поточного стану відбувається шляхом перетворення масивів
JavaScript у рядковий формат JSON (метод JSON.stringify()) та їх запису в
локальну пам'ять браузера за унікальними ключами:
JavaScript
// Програмна реалізація збереження даних у LocalStorage
saveData() {
localStorage.setItem('vidkeeper_videos', JSON.stringify(this.videos));
localStorage.setItem('vidkeeper_categories', JSON.stringify(this.categories));
}
Відповідно, під час завантаження застосунку (у конструкторі класу)
викликається метод loadData(), який зчитує ці рядки та відновлює об'єкти за
допомогою JSON.parse().
2 Розробка компонента парсингу та інтеграції з API Однією з
найважливіших функцій системи є автоматичне розпізнавання посилань на
відеоролики. Оскільки користувачі можуть копіювати посилання різних
форматів (короткі youtu.be, стандартні watch?v=, вбудовані embed), для
надійного вилучення 11-символьного ідентифікатора відео було застосовано
інструмент регулярних виразів (Regular Expressions):
JavaScript
// Метод синтаксичного аналізу URL-адрес
extractVideoID(url) {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
const match = url.match(regExp);
return (match && match[2].length === 11) ? match[2] : null;
}
Після успішного отримання ідентифікатора, застосунок виконує
асинхронний HTTP-запит (за допомогою методу fetch()) до відкритого сервісу
Noembed, який повертає назву відео та посилання на його обкладинку
65
ЧДТУ 262243.005 ПЗ
(thumbnail). Це дозволяє уникнути ручного введення цих даних користувачем.
3 Розробка компонента управління контентом (Бізнес-логіка) Для
відображення актуальної інформації розроблено метод renderVideos(), який
динамічно генерує HTML-розмітку. Важливою частиною цього компонента є
алгоритм фільтрації та пріоритетного сортування контенту.
Система спочатку застосовує вибраний фільтр (наприклад, текстовий
пошук або вибір конкретної категорії), а потім сортує отриманий масив. Логіка
сортування побудована таким чином, щоб «закріплені» (улюблені) відео завжди
знаходилися на початку списку, а решта сортувалася за датою додавання (від
найновіших до найстаріших):
JavaScript
// Фрагмент логіки сортування масиву відеороликів
filteredVideos.sort((a, b) => {
// Пріоритет закріплених відео (isPinned)
if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
// Вторинне сортування за часом створення (timestamp)
return b.createdAt - a.createdAt;
});
4 Розробка компонента користувацького інтерфейсу (UI) Для
забезпечення сучасного зовнішнього вигляду без використання важких
графічних бібліотек було імплементовано CSS-стилістику «Glassmorphism». Цей
ефект досягається комбінацією напівпрозорого фону (rgba), тонких світлих меж
та CSS-властивості backdrop-filter, яка розмиває контент, що знаходиться під
елементом:
CSS
/* Базовий клас для панелей в стилі Glassmorphism */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
}
Такий підхід дозволив створити легкий та швидкий інтерфейс, який
гармонійно поєднується з динамічним анімованим фоном сторінки, не
66
ЧДТУ 262243.005 ПЗ
перевантажуючи при цьому процесор клієнтського пристрою. Генерація самих
карток відео відбувається на стороні клієнта за допомогою шаблонних рядків
(Template literals) JavaScript, що дозволяє швидко інтерполювати змінні об'єкта
Video безпосередньо у HTML-код.
3.2. Тестування системи
3.2.1. Модульне тестування
В таблиці 3.1 представлене тестування окремих модулів від яких залежить
завантаження головної сторінки.
Таблиця 3.1
Результат модульного тестування
№ Модулі тестування Опис Результат
1 loadData(); Перевірка завантаження Успішно
відео
2 saveData() Перевірка збереження Успішно
відео
3 extractVideoID(url) Перевірка коректного Успішно
отримання
ідентифікатора відео
4 deleteVideo(id) Перевірка видалення Успішно
5 handleSearch(event) Перевірка пошуку та Успішно
фільтрації
3.2.2. Інтеграційне тестування
Наступним кроком в перевірці працездатності системи є інтеграційне
тестування. Дане тестування допомагає впевнетися, що всі компоненти системи
працюють разом коректно та без помилок, забезпечуючи цілісність та надійність
програмного забезпечення організації відеоконтенту.
Інтеграційне тестування включає в себе: тестування API, сховища даних,
користувацького інтерфейсу. Оскільки web-система «VidKeeper» є клієнтським
односторінковим застосунком (SPA), інтеграційне тестування зосереджено на
перевірці коректності обміну даними між внутрішньою бізнес-логікою, що
67
ЧДТУ 262243.005 ПЗ
зосереджена в класі VideoApp а також механізмами пам'яті браузера та
зовнішніми веб-сервісами.
Інтеграційне тестування включає в себе перевірку трьох основних
напрямків: тестування API, тестування сховища даних та тестування
користувацького інтерфейсу.
1 Тестування інтеграції із зовнішнім API. Цей етап перевіряє коректність
взаємодії клієнтського застосунку зі стороннім сервісом Noembed API, який
відповідає за надання метаданих про відеоролики. Під час тестування
перевірялися наступні сценарії:
1 Успішний запит: Перевірка того, що після успішного парсингу
валідного посилання на YouTube, система формує правильний
HTTP GET запит через fetch(), успішно отримує JSON-відповідь та
коректно вилучає з неї поля title (назва) та thumbnail_url
(обкладинка).
2 Обробка помилок мережі або невалідних відповідей: Тестування
поведінки системи у випадках, коли сервер Noembed недоступний,
або якщо відео було видалено з YouTube, API повертає поле error.
Перевірялося, чи коректно спрацьовує блок catch, і чи виводиться
користувачеві відповідне системне повідомлення (рис. 3.8.) без
критичного збою самого застосунку.
Рисунок 3.8 – Системне повідомлення
2 Тестування інтеграції зі сховищем даних. Оскільки система не
використовує класичну серверну базу даних, критично важливо було
68
ЧДТУ 262243.005 ПЗ
протестувати безперебійну роботу з Web Storage API (localStorage), що
забезпечує персистентність даних. Основні тестові сценарії:
1 Серіалізація при збереженні: Перевірка того, що при додаванні
нового відео, редагуванні існуючого або зміні статусу «Закріплено»,
метод saveData() коректно перетворює масиви об'єктів у рядок
формату JSON та записує їх у браузер за ключами vidkeeper_videos
та vidkeeper_categories.
2 Десеріалізація при завантаженні (Синхронізація стану): Імітація
закриття вкладки та повторного відкриття застосунку. Перевірялося,
чи метод loadData() успішно зчитує дані з localStorage, відновлює
об'єкти і передає їх у клас VideoApp без втрати інформації
(категорій, нотаток, міток часу).
3 Очищення даних (Видалення): Перевірка того, що після натискання
кнопки «Видалити відео» об'єкт не лише зникає з екрана, але й
остаточно стирається з локального сховища.
3 Тестування інтеграції користувацького інтерфейсу та бізнес-логіки. Цей
напрямок тестування підтверджує, що дії користувача в інтерфейсі (DOM-події)
правильно ініціюють логічні процеси, а зміни в даних миттєво відображаються
на екрані.
1 Синхронізація фільтрів та пошуку: Перевірка того, що при введенні
тексту в рядок пошуку або кліку на певну категорію в боковій
панелі, клас контролера миттєво фільтрує масив даних і дає
команду на перемальовування сітки відеокарток, залишаючи на
екрані лише релевантні результати.
2 Робота модальних вікон: Тестування процесу редагування відео.
Перевірялося, чи коректно дані конкретного відео підтягуються у
форму модального вікна (назва, поточна категорія, наявний опис),
та чи призводить натискання кнопки «Зберегти» до оновлення
DOM-дерева з новими даними.
3 Сортування: Перевірка алгоритму візуального відображення.
69
ЧДТУ 262243.005 ПЗ
Тестувалося, чи дійсно відео з прапорцем isPinned (Улюблені)
переміщуються на початок сітки, відтісняючи звичайні відеоролики.
Проведене інтеграційне тестування підтвердило, що всі модулі web-
системи «VidKeeper» безперешкодно взаємодіють між собою. Асинхронні запити
до зовнішнього API не блокують роботу інтерфейсу, дані надійно
синхронізуються з локальним сховищем, а користувацький інтерфейс миттєво та
безпомилково реагує на будь-які зміни стану системи.
3.2.3. Системне тестування
Системне тестування є важливим етапом життєвого циклу розробки
програмного забезпечення, під час якого перевіряється повна інтегрована
система для оцінки її відповідності визначеним вимогам. На цьому етапі
тестуються всі компоненти системи разом (табл 3.2), щоб переконатися, що всі
частини працюють належним чином і взаємодіють коректно.
Таблиця 3.2
Перелік перевірених функцій системного тестування
Пере- Праце-
№ Функція Опис дії
вірено здатність
Користувач при відкритті веб
Запуск веб
1 системи має можливість Так Так
системи
взаємодіяти з головною сторінкою
Зв’язок з Зв'язок присутній, всі данні з
2 Так Так
LocalStorege LocalStorege отримуються.
Дані про відео успішно
Завантаження
завантажуються із LocalStorege,
3 відео із Так Так
при умові, що дані перед тим були
LocalStorege
збережені.
70
ЧДТУ 262243.005 ПЗ
Продовження таблиці 3.2
Користувачі можуть переглядати
Відображення
попередню інформацію про нові
4 карток нових Так Так
відео, а саме: постер, назву,
відео
категорію, опис.
При виборі в головному меню
Фільтрація за
5 категорії на екрані відображаються Так Так
категоріями
відео обраної категорії
При виконанні пошуку,
6 Пошук користувачу відображаються відео Так Так
які відповідають заданим критеріям
При виборі відео, користувача
7 Перегляд відео перенаправляє на сторінку з Так Так
плеєром для програмання.
Системне тестування проведено успішно, всі вимоги виконано.
3.2.4. Приймальне тестування
Одним із завершальних етапів перевірки програмного забезпечення є
приймальне тестування. Ціль даного тестування – первірка чи відповідає
розроблена система вимогам та чи готова вона до експлуатації кінцевим
користувачем.
Після запуску системи, можна переконатися в тому, що система відповідає
поставленим вимогам, а саме:
має зручного та інтуїтивно зрозумілий інтерфейс користувача (рис. 3.9);
володіє функціоналом фільтрації відео за категоріями;
дає можливість пошуку відео за різними параметрами (рис. 3.9);
надає можливість перегляду відео.
71
ЧДТУ 262243.005 ПЗ
Рисунок 3.9 – Результат роботи системи
3.3. Приклади впровадженого програмного комплексу
На рисунку 3.10 продемонстровано приклад загального вигляду
програмного комплексу, що можу бути впроваджено в роботу.
Рисунок 3.10 – Приклад програмного комплексу
72
ЧДТУ 262243.005 ПЗ
Висновок до розділу 3
В третьому розділі детально описано розробку та тестування програмного
забезпечення. Проведено обґрунтування вибору засобів реалізації програмного
забезпечення. Описані структурна та логічна схема проекту. Організовано
збереження даних про відео. Також розроблено інтерфейс користувача та
описано його основні програмні компоненти.
На наступному етапі система була протестована декількома методами
тестування, а саме за допомогою: модульного, інтеграційного, системного та
приймального тестування. Із наведених результатів видно що система пройшла
успішно всі етапи тестування.
В результаті було наведено приклад впровадженого результату
програмного комплексу.
73
ЧДТУ 262243.005 ПЗ
ВИСНОВКИ
У рамках кваліфікаційної роботи бакалавра на тему «Програмне
забезпечення web-системи структурування відеоконтенту» було виконано
комплекс завдань, які дозволили розробити автономний, швидкий та зручний
односторінковий веб-застосунок (SPA) під назвою «VidKeeper». На основі
проведених етапів проєктування, розробки та тестування можна зробити
наступні висновки:
Проведений аналіз предметної області та існуючих програмних аналогів
підтвердив актуальність створення вузькоспеціалізованого інструменту для
збереження та організації відеоконтенту. Визначено, що ключовими потребами
користувачів є максимально швидке додавання відео за посиланням, гнучка
категоризація та можливість ведення персональних текстових нотаток без
зайвого інформаційного шуму.
На основі сучасних практик UX/UI дизайну було спроєктовано та
реалізовано адаптивний інтерфейс користувача із застосуванням візуального
стилю Glassmorphism (ефекти матового скла) та темної кольорової схеми (Dark
Mode). Це забезпечило не лише естетичну привабливість системи, але й
зниження візуального навантаження на користувача при роботі з контентом.
Успішно реалізовано основні програмні функції web-системи: алгоритми
синтаксичного аналізу (парсингу) URL-посилань YouTube, механізми динамічної
фільтрації за категоріями, миттєвий текстовий пошук та систему пріоритетного
відображення (закріплення) улюблених відеороликів.
Налаштовано інтеграцію із зовнішнім відкритим сервісом Noembed API,
що дозволило системі автоматично збирати необхідні метадані (назву відео та
обкладинку) лише за одним введеним посиланням, суттєво заощаджуючи час
користувача.
Забезпечено високу продуктивність та автономність роботи шляхом
відмови від складної клієнт-серверної архітектури на користь нативних веб-
технологій (HTML5, CSS3, Vanilla JavaScript). Впровадження механізмів Web
Storage API (LocalStorage) для серіалізації та постійного збереження даних
74
ЧДТУ 262243.005 ПЗ
гарантує миттєвий відгук інтерфейсу, незалежність від серверних баз даних та
повну конфіденційність користувацької інформації.
Розробка web-системи «VidKeeper» підтвердила ефективність обраного
технологічного стека та архітектурних рішень для створення легких клієнтських
додатків. Отримані результати демонструють, що створений програмний продукт
є повністю працездатним, виконує всі поставлені завдання та являє собою
зручний персональний інструмент управління відеоконтентом, готовий до
практичного використання.
75
ЧДТУ 262243.005 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 Вікіпедія. Don't repeat yourself. [Електронний ресурс]. – URL:
https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
2 Koprinska, Irena, and Sergio Carrato. "Temporal video segmentation: A
survey." Signal processing: Image communication 16.5 (2001): 477-500.
3 Redmon, Joseph, et al. "You only look once: Unified, real-time object
detection." Proceedings of the IEEE conference on computer vision and pattern
recognition. 2016.
4 Radford, Alec, et al. "Robust speech recognition via large-scale weak
supervision." International conference on machine learning. PMLR, 2023.
5 Li, Jian, Bowen Xu, and Sören Schwertfeger. "High-Quality, ROS
Compatible Video Encoding and Decoding for High-Definition Datasets." 2024 IEEE
International Conference on Robotics and Biomimetics (ROBIO). IEEE, 2024.
6 Kelly, Lauren. A comparative analysis of emotion detection accuracy in
AWS Rekognition and Luxand FaceSDK: balancing performance and cost. Diss.
Dublin, National College of Ireland, 2024.
7 Park, Kyungmin, et al. "Provision of helpful review videos: Effects of video
characteristics on perceived helpfulness." Production and Operations Management 32.7
(2023): 2031-2048.
8 Tong, Zachary. Elasticsearch: The Definitive Guide. O'Reilly, 2015.
9 Wu, Chao-Yuan, et al. "Long-term feature banks for detailed video
understanding." Proceedings of the IEEE/CVF conference on computer vision and
pattern recognition. 2019.
10 Dasiopoulou, Stamatia, et al. "Knowledge-assisted semantic video object
detection." IEEE Transactions on Circuits and Systems for Video Technology 15.10
(2005): 1210-1224.
11 Han, Jing, et al. "Survey on NoSQL database." 2011 6th international
conference on pervasive computing and applications. IEEE, 2011.
12 Shi, Weisong, et al. "Edge computing: Vision and challenges." IEEE internet
of things journal 3.5 (2016): 637-646.
76
ЧДТУ 262243.005 ПЗ
13 Han, Song, et al. "Learning both weights and connections for efficient neural
network." Advances in neural information processing systems 28 (2015).
14 Tsvelik, Alexei M., and Saheli Sarkar. "Charge density wave fluctuation
driven composite order in layered kagome metals." Physical Review B 108.4 (2023):
045119.
15 Sadalage, Pramod J., and Martin Fowler. NoSQL distilled: a brief guide to
the emerging world of polyglot persistence. Pearson Education, 2013.
16 Sporny, Manu, et al. JSON-LD 1.1–a JSON-based serialization for Linked
Data. Diss. W3C, 2019.
17 Hampapur, A., et al. "Multi-scale tracking for smart video surveillance:
IEEE Tran. on Signal Processing: Vol. 22." (2005): 38-51.
18 Konečný, Jakub, et al. "Federated learning: Strategies for improving
communication efficiency." arXiv preprint arXiv:1610.05492 (2016).
19 Система питань і відповідей про програмування [Електронний ресурс].
– URL: http://stackoverflow.com/ (дата звернення: 03.06.2024)
20 Вікіпедія. Формат даних JSON [Електронний ресурс]. – URL:
http://uk.wikipedia.org/wiki/JSON (дата звернення: 01.06.2024)
21 Методичні рекомендації до підготовки кваліфікаційної роботи
бакалавра для здобувачів вищої освіти зі спеціальності 121 «Інженерія
програмного забезпечення» усіх форм навчання [Текст] /Укл.: Голуб С.В., Заспа
Г.О., Куницька С.Ю., Півень О.Б. Катаєва Є.Ю., Салапатов В.І., Метелап В.В.,
Олексюк В.В.; М-во освіти і науки України, Черкас, держ. технол. ун-т. -
Черкаси: ЧДТУ, 2023. - 96 с.
22 Коул Р. Блискучий Agile. Практичний посібник для проєкт-менеджерів
із використання Agile, Scrum, Kanban / Р. Коул, Е. Скотчер. – Харьків: Фабула,
2020. – 192 с.
23 Мартін, Р. Чистий код: створення, аналіз, рефакторинг [Текст] / Р.
Мартін –., 2019 – 464 с.
24 HTML Tutorial W3schools. [Електронний ресурс]. – Режим доступу:
https://www.w3schools.com/html/default.asp
77
ЧДТУ 262243.005 ПЗ
25 CSS Tutorial W3schools. [Електронний ресурс]. – Режим доступу:
https://www.w3schools.com/css/default.asp
78
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
______________ Голуб С.В.
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ WEB-СИСТЕМИ
СТРУКТУРУВАННЯ ВІДЕОКОНТЕНТУ
Специфікація
482.ЧДТУ.262243.005
Листів 2
Розробник: _______________________І ванов Н.Д.
Керівник: _______________________П івень О.Б.
Черкаси 2026
482.ЧДТУ.262243.003
Позначення Найменування Примітка
482.ЧДТУ.262243 12 01 Текст програми
482.ЧДТУ.262243 34 01 Інструкція користувачеві
482.ЧДТУ.262243 90 01 Графічні матеріали
ДОДАТОК Б
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ WEB-СИСТЕМИ СТРУКТУРУВАННЯ
ВІДЕОКОНТЕНТУ
Текст програми
482.ЧДТУ.262243 12 01
Листів 20
Розробник _______________ Іванов Н.Д.
Черкаси 2026
482.ЧДТУ.262243 12 01
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VidKeeper</title>
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&d
isplay=swap" rel="stylesheet">
<!-- Icons -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wg
ht,FILL,GRAD@24,400,0,0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="background-globes">
<div class="globe globe-1"></div>
<div class="globe globe-2"></div>
</div>
<div class="app-container">
<!-- Sidebar -->
<aside class="sidebar glass-panel">
<div class="logo">
<span class="material-symbols-rounded">play_circle</span>
<h1>VidKeeper</h1>
</div>
<nav class="nav-menu">
<button class="nav-item active" data-filter="all">
<span class="material-symbols-rounded">grid_view</span>
Всі відео
</button>
63
482.ЧДТУ.262243 12 01
<button class="nav-item" data-filter="favorites">
<span class="material-symbols-rounded">favorite</span>
Улюблені
</button>
</nav>
<div class="categories-section">
<h3>Категорії</h3>
<div class="categories-list" id="categoriesList">
<!-- Categories injected by JS -->
</div>
<button class="add-category-btn"
onclick="videoApp.openCategoryModal()">
<span class="material-symbols-rounded">add</span> Нова категорія
</button>
</div>
</aside>
<!-- Main Content -->
<main class="main-content">
<header class="top-bar glass-panel">
<div class="search-bar">
<span class="material-symbols-rounded">search</span>
<input type="text" id="searchInput" placeholder="Пошук відео..."
oninput="videoApp.handleSearch(event)">
</div>
<div class="add-video-container">
<div class="input-group">
<input type="text" id="videoUrlInput" placeholder="Вставте
посилання на YouTube">
<button class="btn-primary" onclick="videoApp.handleAddVideo()">
<span class="material-symbols-rounded">add_link</span> Додати
</button>
</div>
</div>
</header>
<div class="content-area">
<div class="videos-grid" id="videosGrid">
<!-- Videos injected by JS -->
</div>
</div>
64
482.ЧДТУ.262243 12 01
</main>
</div>
<!-- Modals (Hidden by default) -->
<div id="videoModal" class="modal">
<!-- Modal content for editing notes etc -->
</div>
<script src="script.js"></script>
</body>
</html>
CSS
:root {
--primary-hue: 260;
/* Deep Purple */
--bg-color: #0f0c29;
--text-color: #ffffff;
--text-muted: #b3b3b3;
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-highlight: rgba(255, 255, 255, 0.15);
--accent-color: hsl(var(--primary-hue), 80%, 65%);
--accent-glow: hsla(var(--primary-hue), 80%, 65%, 0.4);
--radius-lg: 24px;
--radius-md: 16px;
--radius-sm: 8px;
--font-main: 'Outfit', sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
65
482.ЧДТУ.262243 12 01
font-family: var(--font-main);
background-color: var(--bg-color);
color: var(--text-color);
height: 100vh;
overflow: hidden;
background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
}
/* Background Animation */
.background-globes {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -1;
}
.globe {
position: absolute;
border-radius: 50%;
filter: blur(80px);
opacity: 0.4;
}
.globe-1 {
width: 400px;
height: 400px;
background: #7b2ff7;
top: -100px;
left: -100px;
animation: float 10s infinite alternate;
}
.globe-2 {
width: 300px;
height: 300px;
background: #f72f72;
bottom: -50px;
right: -50px;
animation: float 12s infinite alternate-reverse;
}
66
482.ЧДТУ.262243 12 01
@keyframes float {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(30px, 30px);
}
}
/* Layout */
.app-container {
display: flex;
height: 100vh;
padding: 20px;
gap: 20px;
}
/* Glass Components */
.glass-panel {
background: var(--glass-bg);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--glass-border);
border-radius: var(--radius-lg);
}
/* Sidebar */
.sidebar {
width: 260px;
padding: 24px;
display: flex;
flex-direction: column;
flex-shrink: 0;
}
.logo {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 40px;
color: var(--accent-color);
67
482.ЧДТУ.262243 12 01
}
.nav-menu {
display: flex;
flex-direction: column;
gap: 8px;
}
.nav-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
border: none;
background: transparent;
color: var(--text-muted);
border-radius: var(--radius-md);
cursor: pointer;
font-family: inherit;
font-size: 1rem;
transition: all 0.3s ease;
text-align: left;
}
.nav-item:hover,
.nav-item.active {
background: var(--glass-highlight);
color: var(--text-color);
}
.nav-item.active {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.categories-section {
margin-top: 40px;
}
.categories-section h3 {
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
color: var(--text-muted);
68
482.ЧДТУ.262243 12 01
margin-bottom: 16px;
}
.add-category-btn {
margin-top: 16px;
width: 100%;
padding: 10px;
background: transparent;
border: 1px dashed var(--glass-border);
color: var(--text-muted);
border-radius: var(--radius-sm);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.add-category-btn:hover {
border-color: var(--accent-color);
color: var(--accent-color);
}
/* Main Content */
.main-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 20px;
overflow: hidden;
position: relative;
border-radius: var(--radius-lg);
}
.top-bar {
padding: 16px 24px;
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
}
.search-bar {
69
482.ЧДТУ.262243 12 01
display: flex;
align-items: center;
background: rgba(0, 0, 0, 0.2);
padding: 8px 16px;
border-radius: 50px;
width: 300px;
border: 1px solid transparent;
transition: border 0.3s;
}
.search-bar:focus-within {
border-color: var(--accent-color);
}
.search-bar input {
background: transparent;
border: none;
color: white;
margin-left: 8px;
width: 100%;
outline: none;
font-family: inherit;
}
.add-video-container {
display: flex;
gap: 12px;
}
.input-group {
display: flex;
background: rgba(0, 0, 0, 0.2);
border-radius: var(--radius-md);
padding: 4px;
border: 1px solid var(--glass-border);
}
#videoUrlInput {
background: transparent;
border: none;
padding: 8px 16px;
color: white;
width: 250px;
70
482.ЧДТУ.262243 12 01
outline: none;
}
.btn-primary {
background: var(--accent-color);
color: #1a1a1a;
border: none;
padding: 8px 20px;
border-radius: var(--radius-sm);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 8px;
transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
box-shadow: 0 0 15px var(--accent-glow);
transform: translateY(-1px);
}
/* Content Area */
.content-area {
flex: 1;
overflow-y: auto;
padding-right: 8px;
/* Space for scrollbar */
}
/* Videos Grid */
.videos-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 24px;
padding-bottom: 40px;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 8px;
}
71
482.ЧДТУ.262243 12 01
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: var(--glass-border);
border-radius: 4px;
}
/* Video Card Actions */
.card-actions {
display: flex;
gap: 8px;
}
.action-btn {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
transition: color 0.2s;
}
.action-btn:hover {
color: var(--text-color);
}
.action-btn.delete:hover {
color: #ff4b4b;
}
/* Modal */
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
z-index: 1000;
align-items: center;
72
482.ЧДТУ.262243 12 01
justify-content: center;
}
.modal.active {
display: flex;
}
.modal-content {
background: #1a1a2e;
border: 1px solid var(--glass-border);
padding: 30px;
border-radius: var(--radius-lg);
width: 90%;
max-width: 500px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
position: relative;
animation: modalPop 0.3s ease-out;
}
@keyframes modalPop {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.modal-header h2 {
font-size: 1.5rem;
color: var(--text-color);
}
73
482.ЧДТУ.262243 12 01
.close-modal {
background: none;
border: none;
color: var(--text-muted);
cursor: pointer;
font-size: 1.5rem;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
color: var(--text-muted);
font-size: 0.9rem;
}
.form-ctrl {
width: 100%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--glass-border);
padding: 12px;
border-radius: var(--radius-sm);
color: white;
font-family: inherit;
outline: none;
}
.form-ctrl:focus {
border-color: var(--accent-color);
}
.modal-footer {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 30px;
}
class VideoApp {
constructor() {
74
482.ЧДТУ.262243 12 01
this.videos = [];
this.categories = ['Music', 'Education', 'Entertainment', 'Tech']; // Default
categories
this.MODAL = document.getElementById('videoModal');
// Load data on start
this.loadData();
// Initial Render
this.renderCategories();
this.renderVideos();
}
/* --- Logic --- */
loadData() {
const savedVideos = localStorage.getItem('vidkeeper_videos');
if (savedVideos) {
this.videos = JSON.parse(savedVideos);
}
const savedCats = localStorage.getItem('vidkeeper_categories');
if (savedCats) {
this.categories = JSON.parse(savedCats);
}
}
saveData() {
localStorage.setItem('vidkeeper_videos', JSON.stringify(this.videos));
localStorage.setItem('vidkeeper_categories', JSON.stringify(this.categories));
}
async handleAddVideo() {
const input = document.getElementById('videoUrlInput');
const url = input.value.trim();
if (!url) {
alert('Будь ласка, введіть посилання!');
return;
}
const videoId = this.extractVideoID(url);
if (!videoId) {
75
482.ЧДТУ.262243 12 01
alert('Невірне посилання на YuoTube.');
return;
}
// Check for duplicate
if (this.videos.find(v => v.youtubeId === videoId)) {
alert('Це відео вже додано!');
return;
}
try {
// Fetch metadata from noembed
const response = await
fetch(`https://noembed.com/embed?url=https://www.youtube.com/watch?v=${videoId
}`);
const data = await response.json();
if (data.error) {
throw new Error('Video not found');
}
const newVideo = {
id: Date.now().toString(),
youtubeId: videoId,
url: `https://www.youtube.com/watch?v=${videoId}`,
title: data.title,
thumbnail: data.thumbnail_url ||
`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`,
description: '',
category: 'Uncategorized',
isPinned: false,
createdAt: Date.now()
};
this.videos.unshift(newVideo); // Add to top
this.saveData();
this.renderVideos();
input.value = '';
console.log('Video added:', newVideo);
} catch (err) {
console.error(err);
alert('Не вдалося отримати дані відео. Перевірте посилання.');
76
482.ЧДТУ.262243 12 01
}
}
extractVideoID(url) {
const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
const match = url.match(regExp);
return (match && match[2].length === 11) ? match[2] : null;
}
/* --- Rendering --- */
/* --- Rendering --- */
renderCategories() {
const list = document.getElementById('categoriesList');
const defaultCats = ['Music', 'Education', 'Entertainment', 'Tech'];
// Ensure default categories exist if not in data
const displayCats = [...new Set([...defaultCats, ...this.categories])];
list.innerHTML = displayCats.map(cat => `
<div style="display: flex; align-items: center; justify-content: space-between;
group" class="nav-item-wrapper">
<button class="nav-item" style="flex: 1;"
onclick="videoApp.filterByCategory('${cat}')">
<span class="material-symbols-rounded">folder</span>
${cat}
</button>
</div>
`).join('');
}
renderVideos(filterType = 'all', filterValue = null) {
const grid = document.getElementById('videosGrid');
let filteredVideos = [...this.videos];
// Filter Logic
if (filterType === 'favorites') {
filteredVideos = filteredVideos.filter(v => v.isPinned);
} else if (filterType === 'category' && filterValue) {
filteredVideos = filteredVideos.filter(v => v.category === filterValue);
} else if (filterType === 'search' && filterValue) {
77
482.ЧДТУ.262243 12 01
const term = filterValue.toLowerCase();
filteredVideos = filteredVideos.filter(v =>
v.title.toLowerCase().includes(term) ||
v.description.toLowerCase().includes(term)
);
}
// Sort: Pinned first, then Newest
filteredVideos.sort((a, b) => {
if (a.isPinned !== b.isPinned) return a.isPinned ? -1 : 1;
return b.createdAt - a.createdAt;
});
// Update Active Nav State
document.querySelectorAll('.nav-item').forEach(btn =>
btn.classList.remove('active'));
if (filterType === 'all') document.querySelector('[data-
filter="all"]').classList.add('active');
if (filterType === 'favorites') document.querySelector('[data-
filter="favorites"]').classList.add('active');
if (filteredVideos.length === 0) {
grid.innerHTML = '<div style="grid-column: 1/-1; text-align: center; color:
var(--text-muted); margin-top: 50px;">Відео не знайдено.</div>';
return;
}
grid.innerHTML = filteredVideos.map(video =>
this.createVideoCard(video)).join('');
}
createVideoCard(video) {
return `
<div class="video-card glass-panel" style="padding: 12px; display: flex; flex-
direction: column;">
<div style="position: relative; border-radius: 12px; overflow: hidden;
margin-bottom: 12px; aspect-ratio: 16/9;">
<img src="${video.thumbnail}" alt="${video.title}" style="width: 100%;
height: 100%; object-fit: cover;">
<a href="${video.url}" target="_blank" style="position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.3);
opacity: 0; transition: opacity 0.3s;" onmouseover="this.style.opacity=1"
onmouseout="this.style.opacity=0">
78
482.ЧДТУ.262243 12 01
<span class="material-symbols-rounded" style="font-size: 48px; color:
white;">play_circle</span>
</a>
</div>
<h3 style="font-size: 1rem; margin-bottom: 8px; font-weight: 500; display: -
webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
height: 2.5em;">${video.title}</h3>
${video.description ? `<p style="font-size: 0.8rem; color: var(--text-muted);
margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient:
vertical; overflow: hidden;">${video.description}</p>` : ''}
<div style="display: flex; justify-content: space-between; align-items: center;
margin-top: auto; padding-top: 8px; border-top: 1px solid var(--glass-border);">
<span style="font-size: 0.75rem; color: var(--accent-color); background:
rgba(255,255,255,0.05); padding: 4px 8px; border-radius:
4px;">${video.category}</span>
<div class="card-actions">
<button class="action-btn"
onclick="videoApp.togglePin('${video.id}')" title="${video.isPinned ? 'Відкріпити' :
'Закріпити'}">
<span class="material-symbols-rounded" style="${video.isPinned ?
'font-variation-settings: \'FILL\' 1; color: var(--accent-color);' : ''}">keep</span>
</button>
<button class="action-btn"
onclick="videoApp.openEditModal('${video.id}')" title="Редагувати">
<span class="material-symbols-rounded">edit</span>
</button>
<button class="action-btn delete"
onclick="videoApp.deleteVideo('${video.id}')" title="Видалити">
<span class="material-symbols-rounded">delete</span>
</button>
</div>
</div>
</div>
`;
}
/* --- Actions --- */
togglePin(id) {
const video = this.videos.find(v => v.id === id);
if (video) {
79
482.ЧДТУ.262243 12 01
video.isPinned = !video.isPinned;
this.saveData();
this.renderVideos(); // Re-render to sort
}
}
deleteVideo(id) {
if (confirm('Ви впевнені, що хочете видалити це відео?')) {
this.videos = this.videos.filter(v => v.id !== id);
this.saveData();
this.renderVideos();
}
}
/* --- Search & Filter --- */
handleSearch(event) {
const term = event.target.value.trim();
if (term.length > 0) {
this.renderVideos('search', term);
} else {
this.renderVideos('all');
}
}
filterByCategory(cat) {
this.renderVideos('category', cat);
}
/* --- Modals for Edit & Category --- */
openCategoryModal() {
const name = prompt("Введіть назву нової категорії:");
if (name && name.trim()) {
if (!this.categories.includes(name.trim())) {
this.categories.push(name.trim());
this.saveData();
this.renderCategories();
} else {
alert('Така категорія вже існує!');
}
}
}
80
482.ЧДТУ.262243 12 01
openEditModal(id) {
const video = this.videos.find(v => v.id === id);
if (!video) return;
// Build Modal Content for Edit
this.MODAL.innerHTML = `
<div class="modal-content">
<div class="modal-header">
<h2>Редагувати відео</h2>
<button class="close-modal" onclick="videoApp.closeModal()">
<span class="material-symbols-rounded">close</span>
</button>
</div>
<div class="form-group">
<label>Назва</label>
<input type="text" id="editTitle" class="form-ctrl"
value="${video.title}">
</div>
<div class="form-group">
<label>Категорія</label>
<select id="editCategory" class="form-ctrl">
${this.categories.map(c => `<option value="${c}" ${c ===
video.category ? 'selected' : ''}>${c}</option>`).join('')}
</select>
</div>
<div class="form-group">
<label>Нотатки / Опис</label>
<textarea id="editDesc" class="form-ctrl" rows="4">${video.description ||
''}</textarea>
</div>
<div class="modal-footer">
<button class="btn-primary"
onclick="videoApp.saveEdit('${video.id}')">Зберегти</button>
</div>
</div>
`;
this.MODAL.classList.add('active');
}
closeModal() {
this.MODAL.classList.remove('active');
}
81
482.ЧДТУ.262243 12 01
saveEdit(id) {
const video = this.videos.find(v => v.id === id);
if (video) {
video.title = document.getElementById('editTitle').value;
video.category = document.getElementById('editCategory').value;
video.description = document.getElementById('editDesc').value;
this.saveData();
this.renderVideos(); // Refresh view
this.closeModal();
}
}
}
// Global Event Listeners for Nav
document.querySelector('[data-filter="all"]').addEventListener('click', () =>
videoApp.renderVideos('all'));
document.querySelector('[data-filter="favorites"]').addEventListener('click', () =>
videoApp.renderVideos('favorites'));
// Initialize
const videoApp = new VideoApp();
console.log('VidKeeper Initialized');
82
ДОДАТОК В
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ WEB-СИСТЕМИ СТРУКТУРУВАННЯ
ВІДЕОКОНТЕНТУ
Інструкція користувачеві
482.ЧДТУ.262243 34 01
Листів 6
Розробник _______________ Іванов Н.Д.
Черкаси 2026
482.ЧДТУ.262243 34 01
Загальні відомості та запуск
Система «VidKeeper» є веб-застосунком, який працює безпосередньо у
браузері. Для коректної роботи рекомендується використовувати сучасні версії
браузерів (Google Chrome, Firefox, Microsoft Edge або Safari).
Для початку роботи відкрийте файл index.html у вашому браузері. Після
завантаження ви побачите головний інтерфейс системи.
Рисунок В.1 – Вигляд головної сторінки
Додавання відеоконтенту
Процес наповнення вашої медіатеки автоматизований. Вам не потрібно
вводити назву відео чи шукати обкладинку самостійно. Для додавання слід
виконати наступну послідовність дій:
1. Скопіюйте посилання на потрібне відео з платформи YouTube (з
адресного рядка або через кнопку «Поділитися»).
2. Вставте посилання у поле вводу у верхній панелі системи.
3. Натисніть кнопку «Додати».
76
482.ЧДТУ.26 2243 34 01
Система автоматично розпізнає відео, завантажить його назву та прев'ю,
після чого воно з'явиться у загальній сітці.
Рисунок В.2 – Процес додавання відео за посиланням
Управління категоріями
Для ефективного структурування контенту система дозволяє розподіляти
відео за тематичними папками (категоріями).
Створення нової категорії:
На боковій панелі (Sidebar) натисніть кнопку «Нова категорія».
У діалоговому вікні, що з'явиться, введіть назву (наприклад «Проєкти»).
Натисніть «ОК». Нова категорія миттєво з'явиться у списку зліва.
77
482.ЧДТУ.26 2243 34 01
Рисунок В.3 – Створення нової категорії користувача
Робота з картками відео
Кожне збережене відео представлене у вигляді інтерактивної картки (рис.
В.4).
Рисунок В.4 – Елементи керування карткою відео
78
482.ЧДТУ.26 2243 34 01
Перегляд: Натисніть на обкладинку відео, щоб відкрити його у новій
вкладці на YouTube.
Закріплення (Pin): Натисніть іконку «шпильки» на картці. Відео
перейде у розділ «Улюблені» та завжди відображатиметься першим у списку.
Видалення: Натисніть іконку «кошика» та підтвердіть дію, щоб
вилучити відео із системи.
Редагування та ведення нотаток
Ви можете змінювати назву відео, змінювати його категорію або додавати
власні текстові нотатки (конспекти, тайм-коди тощо).
1. Натисніть іконку «Редагувати» (олівець) на картці відео.
2. У модальному вікні внесіть необхідні зміни.
3. Натисніть «Зберегти».
Рисунок В.5 – Вікно редагування метаданих та нотаток
79
482.ЧДТУ.262243 34 01
Пошук та фільтрація
Якщо ваша база відео стала великою, скористайтеся інструментами
швидкого доступу:
Пошук: Введіть слово у рядок пошуку зверху. Система миттєво
відфільтрує картки, назва або опис яких містять цей запит.
Фільтрація: Натискайте на назви категорій у боковому меню, щоб
переглянути лише ті відео, що належать до вибраної групи.
Рисунок В.6 – Використання інструментів пошуку та фільтрації
Збереження даних
Система «VidKeeper» зберігає всі ваші дані (відео, категорії, нотатки)
локально у пам'яті вашого браузера (LocalStorage). Це означає:
Вам не потрібно реєструватися.
Ваші дані конфіденційні та не передаються на сторонні сервери.
Важливо: При повному очищенні кешу та даних браузера (Clear
Browser Data) або переході на інший пристрій, список відео буде втрачено, тому
рекомендується не видаляти дані сайту.
80
ДОДАТОК Г
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ WEB-СИСТЕМИ СТРУКТУРУВАННЯ
ВІДЕОКОНТЕНТУ
Графічні матеріали
ЧДТУ 262243 90 01
Листів 15
Розробник ________________ Іванов Н.Д.
Черкаси 2026
482.ЧДТУ 262243 90 01
Рисунок Г.1 – Слайд 1
Рисунок Г.2 – Слайд 2
82
482.ЧДТУ 262243 90 01
Рисунок Г.3 – Слайд 3
Рисунок Г.4 – Слайд 4
83
482.ЧДТУ 262243 90 01
Рисунок Г.5 – Слайд 5
Рисунок Г.6 – Слайд 6
84
482.ЧДТУ 262243 90 01
Рисунок Г.7 – Слайд 7
Рисунок Г.8 − Слайд
85
482.ЧДТУ 262243 90 01
Рисунок Г.9 – Слайд 9
Рисунок Г.10 – Слайд 10
86
482.ЧДТУ 262243 90 01
Рисунок Г.11 – Слайд 11
Рисунок Г.12 – Слайд 12
87
482.ЧДТУ 262243 90 01
Рисунок Г.13 – Слайд 13
Рисунок Г.14 – Слайд 14
88
482.ЧДТУ 262243 90 01
Рисунок Г.15 – Слайд 15
Рисунок Г.16 – Слайд 16
89
482.ЧДТУ 262243 90 01
Рисунок Г.17 – Слайд 17
Рисунок Г.18 – Слайд 18
90
482.ЧДТУ 262243 90 01
Рисунок Г.19 – Слайд 19
Рисунок Г.20 – Слайд 20
91
482.ЧДТУ 262243 90 01
Рисунок Г.21 – Слайд 21
Рисунок Г.22 – Слайд 22
92
482.ЧДТУ 262243 90 01
Рисунок Г.23 – Слайд 23
Рисунок Г.24 – Слайд 24
93
482.ЧДТУ 262243 90 01
Рисунок Г.25 – Слайд 25
Рисунок Г.26 – Слайд 26
94
482.ЧДТУ 262243 90 01
Рисунок Г.27 – Слайд 27
95