1. Repository at ChSTU
  2. Випускні кваліфікаційні роботи
  3. Бакалавр
  4. 126 Інформаційні системи та технології (Web-технології, web-дизайн)
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/5229
Title: Онлайн платформа для спільного перегляду відео контенту
Authors: Рудницька, Юлія Володимирівна
Кравець, Денис Юрійович
Keywords: розробка;інноваційна онлайн платформа;веб-платформа;проектування;програмування
Issue Date: 11-Jun-2024
Abstract: Дипломна робота складається з 76 сторінок, містить 33 ілюстрацій, 3 таблиці, 2 додатки, та 28 джерел літератури. Дослідження присвячене розробці інноваційної онлайн платформи для спільного перегляду відео, що зумовлено зростаючою потребою у зручному та ефективному способі споживання медіаконтенту на відстані. Метою роботи є створення веб-платформи, яка дозволяє користувачам у реальному часі спільно переглядати відео та взаємодіяти, перетворюючи ізольований досвід перегляду в колективний соціальний процес. Об'єктом дослідження обрано процес проектування та розробки веб-додатків для спільного перегляду відео, що дозволяє детально вивчити та оптимізувати кожен аспект взаємодії користувачів з платформою. Предметом дослідження визначено методи та технології розробки серверної частини веб-додатку, включаючи безпеку, швидкість обробки даних та інтеграцію з різними медіасервісами. Для реалізації проекту було використано сучасні методи програмування на мовах PHP та JavaScript, а також застосовано потужний фреймворк Symfony, що забезпечив високу продуктивність та масштабованість проекту. Завдяки технології WebSocket вдалося реалізувати двосторонню комунікацію у реальному часі, що є критично важливим для синхронного перегляду відео. В результаті дослідження були розроблені та впроваджені інноваційні рішення, які не тільки підвищили ефективність веб-сервісу, але й значно покращили користувацький досвід, відкриваючи нові можливості для соціальної взаємодії та спільного споживання контенту.
URI: https://er.chdtu.edu.ua/handle/ChSTU/5229
Appears in Collections:126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:
File Description SizeFormat 
РЕП_БАК_Кравець_ WEBC-2211.pdf
  Restricted Access		Онлайн платформа для спільного перегляду відео контенту2.19 MBAdobe PDFView/Open Request a copy
Show full item record


Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.

Extracted text 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІЕРСИТЕТ 
 
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ 
 
 
Кафедра інформаційних технологій проектування 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
 
 
бакалавра 
 
  (освітньо-кваліфікаційний рівень) 
 
 
на тему: «Онлайн платформа для спільного перегляду відео контенту» 
 
 
 
 
 
Виконав: здобувач першого  
(бакалаврського) рівня вищої освіти  
  2    курсу, групи WEBC-2211 
Спеціальності 126 Інформаційні системи та 
технології  
ОП «Web-технології, Web-дизайн»  
Кравець Денис Юрійович 
 
Керівник: к.т.н асистент, Рудницька Юлія 
Володимирівна 
 
                                       Рецензент: к.т.н доцент Дідук Віталій 
Андрійович 
 
 
Черкаси – 2024 року
 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
(назва вузу) 
 
Факультет ФІТІС       Кафедра Інформаційних технологій проектування                                               
Освітній рівень                      бакалавр 
Спеціальність                        126 “Інформаційні системи та технології” 
Освітня програма                  “Web-технології Web-дизайн” 
                                                                                           ЗАТВЕРДЖУЮ: 
                                                                    зав.Кафедри Прокопенко Т.О. 
                                                                    “______” __________________2024р. 
ЗАВДАННЯ 
На кваліфікаційну роботу студенту 
 
                                               Кравець Денис Юрійович  
(прізвище, ім’я, по-батькові) 
1. Тема проекту (роботи) Онлайн платформа для спільного перегляду відео контенту     
Керівник проекту(роботи) РУДНИЦЬКА Ю.В., к.т.н., асистент.                                                
Затверджена наказом Черкаського державного технологічного університету №60/04  
від 26.02.2024 
2. Строк подання студентом роботи  29 травня2024 р                                                              
3. Вихідні дані до проекту (роботи) Середовище розробки PhpStorm; XAMPP; Мова 
програмування – PhP, веб-інтерфейс для адміністрування баз даних MySql – PhpMyAdmin. 
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить 
розробити) 
ВСТУП; РОЗДІЛ 1 ОГЛЯД ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ; 1.1 Огляд 
предметної області; 1.2 Аналіз ринку для сайтів спільного перегляду; 1.3 Огляд онлайн 
платформ з перегляду відео контенту; 1.4 Порівняння аналогів та формування вимог до онлайн 
платформи; Висновок до розділу 1; РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЙ ТА КОНСТРУЮВАННЯ 
ОНЛАЙН ПЛАТФОРМИ; 2.1 Визначення цільової аудиторії та її вимог; 2.2 Вибір технологій та 
підходів для розробки онлайн платформи ; 2.3 Конструювання дизайну сайту; 2.4 Створення 
макетів основних сторінок платформи; Висновок до розділу 2; РОЗДІЛ 3 РОЗРОБКА 
СИСТЕМИ; 3.1 Обрання ПЗ для розробки; 3.2 Вибір локального серверу для розробки; 3.3 
Обрання основних бібліотек; 3.4 Реалізація системи; 3.5 Створення дизайну сайту та сторінок; 
3.6 Створення логіну та реєстрації на сайті; 3.8 Symfony Security ; Висновок до розділу 3; 
ВИСНОВКИ; ВИКОРИСТАНІ ДЖЕРЕЛА 
5.Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень) 
1) Рисунок: Порівняльна таблиця аналогів сайтів; 
2) Рисунок: Макет сайту; 
3) Рисунок: Архітектура сайту; 
 
6. Консультанти з проекту із зазначенням розділів проекту, що їх стосуються 
                 Підпис, дата 
Розділ Консультант 
           Завдання видав, завдання 
                       прийняв 
 
    
 
    
 
 
7. Дата видачі завдання         1 березня 2024 р.                                                           
                                                 Керівник   Рудницька Ю.В.                                        
                                                                                                                 (підпис) 
                                                 Завдання прийняв до виконання   ________ 
                                                                                                                                                 (підпис) 
Календарний план 
Пор. № Назва етапів дипломного проекту Термін виконання Примітка 
етапів проекту 
1 Підготовча стадія   
1.1 Постановка задачі 14.02.2024 Виконано 
1.2 Підготовка завдання 21.02.2024 Виконано 
1.3 Погодження завдання 25.02.2024 Виконано 
1.4 Затвердження завдання 10.03.2024 Виконано 
2 Основна стадія   
2.1 Підбір матеріалів 14.03.2024 Виконано 
2.2 Аналіз шляхів рішення задачі 28.03.2024 Виконано 
2.3 Розрахунок основних параметрів роботи 15.04.2024 Виконано 
2.4 Вибір кінцевого варіанту проектного рішення 28.04.2024 Виконано 
2.5 Оформлення первісної редакції роботи 09.05.2024 Виконано 
3 Заключна стадія   
3.1 Узгодження проектних рішень з керівником 16.05.2024 Виконано 
3.2 Оформлення пояснювальної записки 18.05.2024 Виконано 
3.3 Попередній захист роботи 23.05.2024 Виконано 
3.4 Затвердження роботи 29.05.2024 Виконано 
3.5 Рецензування роботи 8.06.2024 Виконано 
3.6 Захист роботи 13.06.2024  
Студент-дипломник      _______________________Кравець Денис Юрійович__ 
                                                     (підпис)                                               (ПІБ) 
Керівник проекту          __________________________________________ 
АНОТАЦІЯ 
 
 
Дипломна робота складається з 76 сторінок, містить 33 ілюстрацій, 3 таблиці, 
2 додатки, та 28 джерел літератури. Дослідження присвячене розробці інноваційної 
онлайн платформи для спільного перегляду відео, що зумовлено зростаючою 
потребою у зручному та ефективному способі споживання медіаконтенту на 
відстані. Метою роботи є створення веб-платформи, яка дозволяє користувачам у 
реальному часі спільно переглядати відео та взаємодіяти, перетворюючи 
ізольований досвід перегляду в колективний соціальний процес. 
Об'єктом дослідження обрано процес проектування та розробки веб-додатків 
для спільного перегляду відео, що дозволяє детально вивчити та оптимізувати 
кожен аспект взаємодії користувачів з платформою. Предметом дослідження 
визначено методи та технології розробки серверної частини веб-додатку, 
включаючи безпеку, швидкість обробки даних та інтеграцію з різними медіа-
сервісами. 
Для реалізації проекту було використано сучасні методи програмування на 
мовах PHP та JavaScript, а також застосовано потужний фреймворк Symfony, що 
забезпечив високу продуктивність та масштабованість проекту. Завдяки технології 
WebSocket вдалося реалізувати двосторонню комунікацію у реальному часі, що є 
критично важливим для синхронного перегляду відео. 
В результаті дослідження були розроблені та впроваджені інноваційні 
рішення, які не тільки підвищили ефективність веб-сервісу, але й значно 
покращили користувацький досвід, відкриваючи нові можливості для соціальної 
взаємодії та спільного споживання контенту. 
ANNOTATION 
 
 
The thesis consists of 76 pages, contains 33 illustrations, 3 tables, 2 appendices, and 28 
sources of literature. Research on the custom development of an innovative online video 
sharing platform driven by the growing need for a convenient and efficient way to host 
media content at a distance. The way it works is to create a web-based platform that allows 
users to co-view videos and interact in real-time, turning an isolated viewing experience 
into a collective social process. 
The object of the study was the design and development process of web applications for 
video sharing, which allows for detailed study and optimization of every aspect of user 
interaction with the platform. The subject of the research is defined methods and 
technologies for the development of the server part of the web application, including 
security, speed of data processing and integration with effective media services. 
To implement the project, modern programming methods in PHP and JavaScript 
languages were used, as well as the powerful Symfony framework was used, which 
ensures high productivity and scale of the project. Thanks to WebSocket technology, two-
way communication can be implemented in real time, which is critical for synchronous 
video viewing. 
As a result of the research, innovative solutions were developed and implemented, which 
not only increased the efficiency of the web service, but also significantly improved the 
user experience, opening up new opportunities for social interaction and shared content 
consumption. 
ЗМІСТ  
 
ВСТУП ............................................................................................................................. 5 
РОЗДІЛ 1 ОГЛЯД ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ ... 8 
1.1 Огляд предметної області ..................................................................................................... 8 
1.2 Аналіз ринку для сайтів спільного перегляду ................................................................. 9 
1.3 Огляд онлайн платформ з перегляду відео контенту ................................................... 10 
1.4 Порівняння аналогів та формування вимог до онлайн платформи ......................... 14 
Висновок до розділу 1 ................................................................................................................... 16 
РОЗДІЛ 2 ВИБІР ТЕХНОЛОГІЙ ТА КОНСТРУЮВАННЯ ОНЛАЙН 
ПЛАТФОРМИ ............................................................................................................. 17 
2.1 Визначення цільової аудиторії та її вимог ......................................................................... 17 
2.2 Вибір технологій та підходів для розробки онлайн платформи ..................................... 20 
2.3 Конструювання дизайну сайту ............................................................................................. 23 
2.4 Створення макетів основних сторінок платформи .......................................................... 28 
Висновок до розділу 2 ................................................................................................................... 30 
РОЗДІЛ 3 РОЗРОБКА СИСТЕМИ .......................................................................... 32 
3.1 Обирання ПЗ для розробки ................................................................................................... 32 
3.2 Вибір локального серверу для розробки ............................................................................. 33 
3.3 Обрання основних бібліотек .................................................................................................. 33 
3.4 Реалізація системи ................................................................................................................... 34 
3.5 Створення дизайну сайту та сторінок ................................................................................. 38 
3.6 Створення логіну та реєстрації на сайті ............................................................................. 45 
3.8 Symfony Security ....................................................................................................................... 47 
Висновок до розділу 3: .................................................................................................................. 49 
ВИСНОВКИ ................................................................................................................. 50 
  
 
Лист № Підпис Дата ЧДТУ 242276.003.ПЗ 
ЗРозроб. Марунич І.М. Літ. Лист Листів 
 
Перев. Рудницький С.В Н 2 76 
Реценз.. Мельник Р.П. Онлайн платформа для спільного перегляду 
Н контр. Рудницький відео контенту ФІТІС, 
.  
 кафедра ІТП, WEBС-2011 
Затв. ПрокопенкоТ.О.  
 
` 
 
 
ВИКОРИСТАНІ ДЖЕРЕЛА ..................................................................................... 52 
Додаток А 482 ЧДТУ 242276 – 01 Специфікація ................................................... 55 
Додаток Б 482 ЧДТУ 242276 – 03 12 01 Текст програми. Бекенд ....................... 57 
 
  
     ЧДТУ 2 Лист 
32276.003 ПЗ 
     3 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ 
 
 PHP – Скриптова мова програмування на стороні вебсерверу. 
 URL – Унікальна адреса ресурсу. 
 MySQL – Система керування реляційними базами даних. 
 SQL -  Мова запросів до бази данних. 
 PhpMyAdmin – Веб-інтерфейс для адміністрування баз даних MySQL. 
 ПЗ – Програмне забезпечення. 
 БД – База даних 
 HTML – Мова розмітки документів. 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
4 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
ВСТУП 
 
У сучасному цифровому світі, де велика частина взаємодії між людьми 
відбувається через інтернет, потреба у спільному перегляді контенту зросла. 
Люди все частіше шукають способи об'єднатися з друзями, родичами чи 
колегами для спільного перегляду відео незалежно від фізичного розташування.  
Актуальність роботи. Сайти для спільного перегляду контенту здобули 
велику популярність, коли зустрічі та спільне проведення часу стали 
обмеженими. Такий успіх зумовлений деякими факторами: 
• Соціальна взаємодія: Спільний перегляд контенту створює глибокий 
і захоплюючий досвід, збільшуючи активність користувачів і їхнє бажання 
повертатися на сайт або платформу у майбутньому. 
• Спільнота: Можливість ділитися враженнями та емоціями на сайті 
сприяє формуванню відчуття спільності через коментарі, обговорення, оцінки, і 
рецензії, що розширюють контент та інтерактивність платформи. 
• Інтерактивність: Чати та інші інтерактивні елементи забезпечують 
комунікацію в реальному часі, дозволяючи обмінюватися ідеями і думками, а 
також формувати нові зв'язки, що підвищує зацікавленість користувачів і їх 
відданість платформі. 
• Зручність та доступність: Ці платформи дозволяють користувачам 
дивитися різноманітний контент з будь-якого місця і в будь-який час, що 
ідеально підходить для сучасного швидкоплинного способу життя. Користувачі 
можуть налаштувати свій досвід перегляду, вибираючи з великої кількості 
доступних фільмів та шоу, та дивитися їх у комфорті свого дому. 
• Технологічний прогрес: Поліпшення технологій потокової передачі 
та збільшення швидкості інтернету зробили спільний перегляд більш 
практичним та приємним. Висока якість зображення та звуку, а також 
безперебійне відтворення, забезпечують вражаючий досвід перегляду, подібний 
до того, що можна отримати у кінотеатрах. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
5 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Персоналізація: Багато сервісів надають можливість персоналізації 
досвіду перегляду, включаючи рекомендації контенту, базовані на попередніх 
переглядах та перевагах користувачів. 
Ці сервіси стали популярними не лише через їхню функціональність, але й 
тому, що вони відповідають сучасним потребам людей у соціальній взаємодії та 
зв'язку на відстані. Вони відіграють ключову роль у забезпеченні емоційної 
підтримки та розваг, коли особистісні зустрічі обмежені, чим і забезпечують 
свою неперервну актуальність на ринку 
Метою роботи є створення онлайн платформи для спільного перегляду 
відео, яка буде відрізнятися зручністю у використанні та забезпечить 
користувачам комфортні умови для перегляду і взаємодії. На відміну від 
багатьох існуючих рішень, цей сайт буде мати унікальні сторінки та простий, але 
естетично привабливий дизайн. 
Для досягнення поставленої мети треба виконати наступні задачі: 
• Проаналізувати аналоги сайтів спільного перегляду: Оцінити наявні 
платформи, виявити їх переваги та недоліки, визначити, що можна 
покращити. 
• Створити монотонний дизайн: Розробити інтуїтивно зрозумілий 
інтерфейс, який буде легко освоїти користувачам будь-якого рівня 
технічної підготовки. 
• Створити унікальні кімнати для спільного перегляду: Забезпечити 
можливість створення індивідуальних кімнат для кожного сеансу 
перегляду, з налаштуваннями, що відповідають потребам користувачів. 
• Згенерувати унікальні посилання: Реалізувати систему, яка автоматично 
створює унікальне посилання для кожної кімнати, яке можна легко 
поділитися з друзями. 
• Розробити систему логіну та авторизації: Забезпечити захищений доступ 
до сайту через створення облікових записів та авторизацію користувачів. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
6 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Створити сервер та базу даних: Розробити серверну частину проекту та 
базу даних для зберігання інформації про користувачів та кімнати. 
Об'єктом дослідження є процес створення онлайн платформи для 
спільного перегляду контенту, який можна буде легко модернізувати, додавати 
новий контент, інтегрувати з різними платформами та здійснювати рекламну 
кампанію для популяризації і підняття в чартах пошукових систем. 
Предмет дослідження  
Предметом даного дослідження є онлайн платформа для спільного 
перегляду відео контенту, яка забезпечить користувачам можливість одночасно 
переглядати відеоматеріали у реальному часі з різних географічних місць. 
Онлайн платформа включає функціональні можливості для синхронного 
відтворення відео, обміну повідомленнями, голосового та відеозв'язку, а також 
інтеграцію з популярними відеохостингами. Основними аспектами дослідження 
є технічні характеристики платформи, зручність користування, можливості 
інтеграції з іншими сервісами, безпека даних користувачів, а також соціальні та 
психологічні ефекти спільного перегляду контенту. 
Методи дослідження 
Для створення архітектури системи були використані методи 
програмування на мовах PHP та JavaScript з використанням фреймворка Symfony 
та технології WebSocket для забезпечення реального часу взаємодії. Тестування 
системи проводилося для виявлення та виправлення помилок, а також для 
оптимізації продуктивності. 
Практичне значення 
Практичне значення даної роботи полягає в можливості перегляду відео 
разом з друзями на унікальному сайті, який пропонує різні відео, чат для 
спілкування та налаштування кімнат для перегляду. Це забезпечить зручний 
дизайн, ефективність у налаштуванні кімнат та покращення якості відео, що 
зробить процес перегляду приємним та комфортним для всіх користувачів. 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
7 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
РОЗДІЛ 1 
ОГЛЯД ПРЕДМЕТНОЇ ОБЛАСТІ ТА ПОСТАНОВКА ЗАДАЧІ 
 
 
1.1 Огляд предметної області 
 
Тема створення сайту для спільного перегляду контенту є надзвичайно 
актуальною та цікавою, оскільки вона об'єднує технології реального часу, 
мультимедійні можливості та соціальні аспекти взаємодії. Актуальність сайту 
продукту на ринку 
Онлайн платформа спроектована з метою перегляду цікавих відеороликів 
разом. Такі сайти спільного перегляду, з зрозумілим та покроковим створенням 
кімнат, користуються популярністю та легкістю в використанні. Мені потрібно 
розробити унікальний та зручний інтерфейс, інтеграція нових функцій та 
забезпечення високої якості обслуговування користувачів. 
Ключовим аспектом для забезпечення спільного досвіду перегляду 
контенту є синхронізація відео. Коли користувачі спільно переглядають відео чи 
стрім, важливо, щоб всі вони бачили те ж саме в той самий час. Це дозволяє їм 
спілкуватися, реагувати та відчувати себе частиною спільності. Використання 
технологій, що дозволяють мінімізувати затримки та забезпечувати точну 
синхронізацію відтворення, є важливим елементом для створення зручного та 
задовільного користувацького досвіду. 
Інтеграція текстових чатів для обговорення відео в реальному часі дає 
користувачам можливість спілкуватися, ділитися враженнями та обмінюватися 
думками під час перегляду. Це сприяє підвищенню взаємодії користувачів та 
формуванню відчуття спільності. 
Підтримка голосових чатів та відеоконференцій додає можливості для 
більш інтерактивного досвіду спілкування та спільного перегляду. Інтеграція з 
VR/AR відкриває нові горизонти для створення іммерсивного середовища 
перегляду, що залучає користувачів ще більше. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
8 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Інтеграція текстових чатів для обговорення відео в реальному часі дає 
користувачам можливість спілкуватися, ділитися враженнями та обмінюватися 
думками під час перегляду. Це сприяє підвищенню взаємодії користувачів та 
формуванню відчуття спільності. 
 
1.2 Аналіз ринку для сайтів спільного перегляду 
 
За статистикою CXE Global ринок програмного забезпечення для 
спільного перегляду швидко зростає. 
Ось, що говорить стаття про цей ринок: «Обсяг глобального ринку 
програмного забезпечення для спільного перегляду оцінювався в 218,6 мільйонів 
доларів США в 2022 році та сягне 288,62 мільйонів доларів США в 2028 році, із 
середньорічним зростанням 4,74% протягом 2022-2028 років. Програмне 
забезпечення для спільного перегляду, також відоме як програмне забезпечення 
для спільного перегляду або програмне забезпечення для спільного серфінгу, 
дозволяє клієнтам ділитися своїм екраном і дозволяє агентам спільно 
переміщатися веб-сторінкою, що забезпечує підтримку клієнтів у режимі 
реального часу. Цей процес відбувається миттєво і не потребує завантаження 
програмного забезпечення чи встановлення розширень. Агент служби підтримки 
клієнтів ініціює сеанс спільного перегляду з клієнтом, і, прийнявши запрошення, 
агент може отримати точне візуальне уявлення клієнта про веб-сайт. Це дає 
агентам можливість тимчасово контролювати екран клієнта, щоб направляти їх 
через складні транзакції та процеси під час розміщення замовлення на купівлю. 
Підприємства, які орієнтуються на залучення клієнтів, схильні створювати 
цінність, а також оптимізувати ROI. Вони надають клієнтам значущий 
наскрізний досвід роботи з інтерактивною підтримкою в режимі реального часу. 
На початку 2020 року хвороба COVID-19 почала поширюватися світом, 
мільйони людей у всьому світі були інфіковані хворобою COVID-19, а великі 
країни світу запровадили заборону на ходьбу та припинення роботи. За винятком 
галузей медичних товарів і засобів життєзабезпечення, більшість галузей зазнали 
     Лист 
     ЧДТУ 242276.003 ПЗ 
9 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
значного впливу, а також галузі програмного забезпечення для спільного 
перегляду веб-сторінок також сильно постраждали. За останні кілька років ринок 
програмного забезпечення для спільного перегляду веб-сторінок пережив 
зростання. Наприкінці 2019 року в Китаї почався спалах COVID-19 через 
величезний спад світової економіки; прогнозує, що темпи зростання світової 
економіки впадуть, через це розмір ринку програмного забезпечення для 
спільного перегляду буде з темпами зростання. Станом на дату звіту в усьому 
світі було зареєстровано понад 200 мільйонів підтверджених випадків CVOID-
19, і епідемію не вдалося ефективно контролювати.» [1] 
Цю тенденцію можна виразити в наступній таблиці:  
 
Таблиця 1.1 Статистика ринку 
Статистика Значення 
Розмір світового ринку програмного забезпечення для 218,6 млн дол. 
спільного перегляду в 2022 році США 
Очікуваний річний темп зростання (CAGR) з 2022 по 2028 рік 4,74% 
Очікуваний розмір світового ринку програмного забезпечення 288,62 млн дол. 
для спільного перегляду до 2028 року США 
 
1.3 Огляд онлайн платформ з перегляду відео контенту 
 
Розглянемо такі онлайн платформи як Watch2Gether, Kast та Wparty як 
досить популярні сервіси в сфері спільного перегляду відео контенту. 
 
Watch2Gether (w2g.tv/en/) 
Опис: Watch2Gether дозволяє створювати кімнати для спільного перегляду 
відео з різних джерел, таких як YouTube, Vimeo та інших. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
10 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 1.1 Сторінка Watch2Gether   
 
Переваги: Підтримка великої кількості відеоплатформ, простий інтерфейс, 
можливість створення публічних та приватних кімнат. 
• Підтримка багатьох відеоплатформ - YouTube, Vimeo та інші. 
• Простий інтерфейс – легко використовувати навіть новачкам. 
• Публічні та приватні кімнати - гнучкість для різних випадків. 
• Синхронний перегляд – всі учасники дивляться відео одночасно. 
• Вбудований чат  
Недоліки: Обмежена функціональність у безкоштовній версії, реклама, 
іноді нестабільність при великій кількості користувачів. 
• Обмежена функціональність безкоштовної версії – деякі функції 
доступні лише у преміум-підписці. 
• Реклама – наявність реклами у безкоштовній версії. 
• Нестабільність при великому навантаженні – можливі затримки та 
збої при великій кількості користувачів. 
• Обмеження інтеграції – не всі відеоплатформи повністю 
підтримуються. 
 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
11 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Kast (w.kastapp.live) 
Опис: Kast – це платформа, що дозволяє користувачам спільно 
переглядати відео, грати в ігри та спілкуватися через відеочат. 
 
 
Рисунок 1.2 Сторінка Kast 
 
Переваги: 
• Широкий спектр функцій: Kast підтримує відеочат, текстовий чат, 
спільний перегляд відео. 
• Підтримка різноманітного контенту: Платформа дозволяє ділитися 
будь-яким контентом, включаючи фільми, серіали та інше. 
• Приватні та публічні кімнати: Можливість створювати як приватні 
кімнати для обмеженого кола осіб, так і публічні для широкої аудиторії. 
Недоліки: 
• Потреба у встановленні додатку: Деяким користувачам може бути 
незручно встановлювати додатковий додаток на свій пристрій. 
• Обмежена безкоштовна версія: Багато функцій доступні тільки в 
платній версії, що може обмежувати можливості користувачів без підписки. 
• Затримки та буферизація: Іноді можуть виникати затримки та 
проблеми з буферизацією відео, особливо при великій кількості користувачів. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
12 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Реклама: У безкоштовній версії платформи може з'являтися реклама, 
що може відволікати від перегляду. 
• Вимоги до інтернет-з'єднання: Для стабільної роботи Kast потрібне 
високошвидкісне інтернет-з'єднання, що може бути недоступно для деяких 
користувачів. 
 
Wparty (wparty.net) 
Опис: Wparty - це онлайн платформа для спільного перегляду відео. 
Користувачі можуть створювати кімнати та переглядати відео з YouTube, Vimeo 
та інших джерел, спілкуючись у чаті. 
 
 
Рисунок 1.3 Сторінка Wparty 
 
Переваги: 
• Зрозумілий інтерфейс: Легкий у використанні, дозволяє швидко 
створювати кімнати та запрошувати друзів для спільного перегляду відео. 
• Швидке створення кімнат: Процес створення кімнат дуже простий і 
швидкий, користувачі можуть легко налаштувати кімнату. 
Недоліки: 
• Обмежений функціонал безкоштовної версії: Безкоштовна версія має 
обмежений функціонал, деякі розширені можливості доступні тільки в платній 
версії. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
13 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Проблеми з продуктивністю: Можливі затримки або проблеми з 
буферизацією відео, особливо при високому навантаженні або низькій швидкості 
інтернет-з'єднання. 
 
1.4 Порівняння аналогів та формування вимог до онлайн платформи 
 
Онлайн платформа розробляється з метою створення зручного та 
ефективного інструменту для синхронного перегляду відеоконтенту в реальному 
часі групою користувачів, а також забезпечення інтерактивних можливостей для 
спілкування та співпраці. 
 
Таблиця 1.2 Порівняльна таблиця аналогів 
Функція Watch2Gether Kast Wparty Chrono 
Підтримувані YouTube, Vimeo, 
джерела відео YouTube, Vimeo, та інші Twitch, та інші YouTube, Vimeo, та інші YouTube, Vimeo, та інші 
  
Створення кімнат Публічні та приватні Публічні та приватні Публічні та приватні Публічні та приватні 
Відеочат Ні Так Ні Ні 
Ігри Ні Так Ні Ні 
Інтерактивні функції Обмежені Широкий спектр Обмежені Широкий спектр 
Обмежена 
Безкоштовна версія функціональність, Обмежена Обмежена 
реклама функціональність функціональність 
 Повний функціонал 
Платна версія Додаткові функції, без Додаткові функції, без Додаткові функції, без 
 реклами реклами реклами Не має  
Простий і 
Веб дизайн Простий і інтуїтивно 
-  зрозумілий Сучасний і елегантний Простий і мінімалістичний, 
 
 мінімалістичний натомість інтуїтивно 
зрозумілий  
Поєдную в собі 
Взаємодія з клієнтом Обмежена Швидка та ефективна Швидка та ефективна простоту за красу, не 
втрачаючи зрозумілість  
Запис Ні Так Ні Так 
Спільний доступ до 
чату Ні Так Так 
 Так 
     Лист 
     ЧДТУ 242276.003 ПЗ 
14 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Функція Watch2Gether Kast Wparty Chrono 
Пошук Ні Так Так Ні 
Інтеграція з іншими 
платформами Обмежена Так Так 
 Обмежена 
Якість відео До 1080p До 4K До 1080p До 1080p 
Обмеження за 
кількістю учасників 10 100 25 
 3 
Вимоги до 
пропускної здатності 1 Мбіт/с 2 Мбіт/с 1 Мбіт/с 2 Мбіт/с 
 
Шифрування Так Так Так Так 
Безкоштовна версія 1 година на день 30 хвилин на день 1 година на день Безліміт 
Платні версії $5/місяць, $50/рік $10/місяць, $100/рік $7/місяць, $70/рік Відсутня 
Підтримка 
користувачів FAQ, електронна пошта FAQ, електронна пошта, FAQ, електронна пошта, 
 
 чат чат FAQ, електронна пошта 
 
В таблиці 1 наведено порівняння розглянутих вище аналогів. Таким чином 
ми можемо сформувати вимоги до розроблюваної платформи.  
• Кабінет користувача: Модуль для керування особистими 
налаштуваннями та перегляду історії активності. 
• Реєстрація та авторизація: Забезпечення безпеки та конфіденційності 
даних користувачів через процес реєстрації та авторизації. 
• Створення та управління сесіями перегляду: Можливість створення 
нових сесій для спільного перегляду відео, керування списком учасників сесії та 
надання їм доступу. 
• Інтерактивний чат: Реалізація чату для обміну повідомленнями між 
учасниками сесії в режимі реального часу. 
• Інтеграція відеоплеєра: Забезпечення можливості синхронного 
відтворення відео для всіх учасників сесії, а також підтримка різних форматів та 
функцій, таких як субтитри. 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
15 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Висновок до розділу 1 
 
Популярність онлайн платформ для спільного перегляду контенту 
стрімко зростає. Різноманітність існуючих платформ дозволяє користувачам 
вибирати серед них найзручнішу, але успішна платформа повинна 
забезпечувати синхронізацію відео, інтерактивний чат та простоту 
використання з надійністю роботи.  
В ході дослідження були враховані такі критерії, як популярність 
існуючих платформ для спільного перегляду відео, потенційна аудиторія, 
тенденції у споживчому попиті та технологічні можливості. Також були 
досліджені аналоги у цьому сегменті ринку, що дозволило виокремити ключові 
аспекти, які можна використовувати для подальшої розробки нашого проекту. 
Серед цих аспектів виявлено важливі функції взаємодії користувачів, 
інноваційні методи рекламної підтримки, а також вдосконалені технічні 
рішення для забезпечення стабільної роботи платформи. 
Таким чином, створення нової платформи з урахуванням цих аспектів 
може мати значний потенціал на ринку та задовольнити потреби користувачів. 
Проведено аналіз стану ринку та перспектив розробки сайту спільного 
перегляду відео в цій сфері.  
 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
16 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
РОЗДІЛ 2 
ВИБІР ТЕХНОЛОГІЙ ТА КОНСТРУЮВАННЯ ОНЛАЙН 
ПЛАТФОРМИ 
 
 
2.1 Визначення цільової аудиторії та її вимог 
 
За статистикою Statista Research Department [2] із року в рік створюється 
демографічний вибух щодо кількості людей в OTT video worldwide: 
 
 
Рисунок 2.1 Статистика юзерів котрі переглядають спільно відео  
 
Згідно з даними Statista Research Department, кількість користувачів OTT-
відео постійно зростає, що демонструє високий потенціал ринку для нових веб-
сервісів.  
     Лист 
     ЧДТУ 242276.003 ПЗ 
17 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
На основі цієї статистики, а також власних спостережень, було визначено 
наступні демографічні та психографічні характеристики потенційних 
користувачів сервісу Chrono: 
• Вік: 18-35 років. 
• Стать: Чоловіки та жінки. 
• Місце проживання: Міжнародний охоплення. 
• Дохід: Середній та вище середнього. 
• Інтереси: Перегляд відео, онлайн-ігри, спілкування з друзями, нові 
технології, розваги. 
• Цінності: Дружба, спілкування, самовираження, зручність. 
• Стиль життя: Активний, використання мобільних пристроїв та 
Інтернету, висока соціальна активність. Часто використовують онлайн-
сервіси для перегляду відео (YouTube, Twitch, Netflix). 
• Схильні до спільного перегляду відео з друзями та знайомими. 
• Активні в соціальних мережах (Facebook, Instagram, TikTok). 
• Шукають нові та цікаві платформи для розваг. 
Важливо при створені проекту розуміти потреби аудиторії, що буде його 
використовувати, на основу цього можна сформувати наступні вимоги до 
проекту: 
1.Функціональні потреби: 
• Спільний перегляд відео з друзями та знайомими. 
• Підтримка різних джерел відео (YouTube, Vimeo, Twitch, Dailymotion та 
ін.). 
• Синхронне відтворення відео для всіх учасників кімнати. 
• Можливість спілкуватися під час перегляду відео (чат, голосовий зв'язок). 
• Коментарі та оцінки відео. 
• Субтитри та переклад відео. 
• Налаштування якості та режиму перегляду. 
2. Нефункціональні потреби: 
     Лист 
     ЧДТУ 242276.003 ПЗ 
18 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Простота та зручність використання. 
• Привабливий та сучасний дизайн. 
• Швидке та стабільне завантаження відео. 
• Безпека та конфіденційність даних. 
• Якісна технічна підтримка. 
• Доступність на різних пристроях (ПК, смартфони, планшети). 
3. Функціональні можливості: 
• Реалізація всіх необхідних функцій для спільного перегляду відео. 
• Забезпечення синхронного відтворення відео з високою якістю. 
• Розробка зручного чату для спілкування. 
• Впровадження можливості створення та керування списками відтворення. 
• Додавання функцій коментування та оцінювання відео. 
• Підтримка субтитрів та перекладу відео на різні мови. 
• Надання користувачам можливості налаштовувати якість та режим 
перегляду. 
4. Нефункціональні аспекти: 
• Розробка інтуїтивно зрозумілого та зручного інтерфейсу. 
• Використання сучасного та привабливого дизайну. 
• Оптимізація сайту для швидкого завантаження відео. 
• Впровадження надійних заходів безпеки для захисту даних користувачів.  
• Забезпечення якісної та оперативної технічної підтримки.  
Таким чином розроблювана онлайн платформа повинна реалізовувати 
наступний функціонал. 
• Реєстрація та авторизація користувачів. Користувачі можуть 
зареєструватися, заповнивши спеціальну форму на веб-сайті та вказавши 
необхідні дані.  
• Авторизація для доступу до функцій сайту. Авторизованим 
користувачам буде надано доступ до різних функцій сайту, таких як створення 
сесій та участь у чатах. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
19 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Захист даних користувачів. Дані користувачів будуть захищені за 
допомогою шифрування та інших методів безпеки, щоб запобігти 
несанкціонованому доступу. 
• Створення та управління сесіями (кімнатами) перегляду. 
Користувачі можуть створювати нові сесії для спільного перегляду відео з 
іншими користувачами. 
• Запрошення інших користувачів. Користувачі можуть надсилати 
запрошення до своїх сесій через спеціальні посилання або інші зручні методи. 
• Збереження інформації про сесії. Інформація про створені сесії буде 
зберігатися в базі даних для подальшого використання та управління. 
• Управління списком учасників. Користувачі зможуть керувати 
списком учасників своїх сесій, додавати нових учасників або видаляти їх за 
потреби. 
• Інтеграція відеоплеєра. Зберігання даних у базі даних: Відеодані 
будуть зберігатися в базі даних MariaDB для забезпечення їхньої доступності та 
конфіденційності. 
• Захист даних. Дані користувачів та відео будуть захищені від 
несанкціонованого доступу за допомогою різних методів шифрування та 
безпеки. 
 
2.2 Вибір технологій та підходів для розробки онлайн платформи 
 
Вибір технологічного стеку та методології розробки має вирішальне 
значення для забезпечення якості, продуктивності та масштабованості проекту. 
Одним із ключових кроків для успішної реалізації проекту є обрання 
фреймворку та шаблонізатора. Я обрав Symfony це високопродуктивний PHP-
фреймворк, який вирізняється своєю гнучкістю та потужним набором 
компонентів. Також через його вражаючі можливості та високий рівень безпеки. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
20 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Для управління вмістом та відділення логіки додатку від презентації ми 
використовуємо Twig як шаблонізатор. 
• Підтримка спільноти: Велика і активна спільнота розробників 
Symfony є великим плюсом. Вона не лише допомагає у вирішенні технічних 
питань, але й постійно розвиває фреймворк, забезпечуючи його актуальність та 
підтримку. 
• Безпека та стабільність: Використання Symfony забезпечує нам не 
лише надійність, а й безпеку проекту. Цей фреймворк допомагає уникнути 
багатьох потенційних загроз безпеці та забезпечити стабільність системи завдяки 
використанню сучасних методів безпеки та програмування. 
• Масштабованість та адаптивність: Symfony надає нам можливість 
легко масштабувати проект у відповідності до зростаючих потреб та вимог. 
Фреймворк дозволяє з легкістю інтегрувати нові компоненти, забезпечуючи при 
цьому високу продуктивність та гнучкість додатку. 
• Доступність ресурсів для навчання та розвитку: Широкий вибір 
документації та навчальних ресурсів для Symfony та Twig дозволяє розробникам 
швидко засвоювати ці технології та ефективно застосовувати їх у проекті. Це 
сприяє швидкому розвитку навичок та успішному використанню технологій у 
процесі розробки. 
XAMPP. XAMPP — це інтегроване середовище розробки, що включає 
Apache, MariaDB, PHP, та Perl, що дозволяє локально та швидко налаштувати 
веб-сервер. Його легкість установки та конфігурації робить XAMPP ідеальним 
вибором для розробників, які хочуть максимально ефективно працювати над 
проектами без необхідності багатогодинних налаштувань серверного 
середовища. 
Використання WebSocket. Для миттєвої комунікації між користувачами, 
необхідно використати цю технологію, та синхронізації відтворення відео - це 
дійсно цікавий технологічний виклик, який вимагає високої експертизи в 
програмуванні та розробці веб-додатків. WebSocket - це протокол зв'язку, який 
     Лист 
     ЧДТУ 242276.003 ПЗ 
21 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
забезпечує повномасштабне двостороннє з'єднання між клієнтом та сервером 
через веб-сокети. Це дозволяє веб-сайтам отримувати миттєві оновлення без 
необхідності постійного запитування сервера.WebSocket забезпечує 
двонаправлену комунікацію між клієнтом та сервером у реальному часі. Це 
технологія дозволяє миттєво обмінюватися даними, забезпечуючи динамічне 
оновлення вмісту без необхідності перезавантажувати сторінку, що є критично 
важливим для функцій спільного перегляду та комунікації в системі "Chrono". 
Робота з відеопотоками та їх синхронізація це ще один складний аспект. 
Це включає в себе не лише передачу відео, але і контроль за часом відтворення, 
щоб усі користувачі могли переглядати контент одночасно та в однаковому 
темпі. Для цього потрібні глибокі знання в області веб-розробки, особливо у 
роботі з мультимедійними елементами. 
Успішне подолання цих викликів відкриває безліч можливостей для 
покращення користувацького досвіду та забезпечення високоякісного та 
захоплюючого контенту. 
База даних MariaDB: MariaDB, форк MySQL, є реляційною базою даних, 
яка пропонує високу продуктивність, надійне збереження даних та обробку 
транзакцій. Підтримка ACID-транзакцій у MariaDB забезпечує цілісність даних, 
що є невід'ємною частиною роботи з фінансовими та користувацькими даними. 
Підходи до розробки: Важливу роль у проекті відіграє дотримання 
принципів чистого коду та регулярний рефакторинг. Ці практики дозволяють 
підтримувати код у легко зрозумілому та легко підтримуваному стані, 
спрощують внесення змін та додають адаптивності до змінюваних вимог 
проекту. Рефакторинг допомагає виявляти та виправляти помилки, оптимізувати 
продуктивність та підвищити якість кінцевого продукту. 
Таким чином, завдяки використанню передових технологій та сучасних 
підходів до розробки, проект "Chrono" не тільки успішно вирішує поставлені 
задачі, але й відкриває широкі можливості для подальшої модернізації та 
вдосконалення. Створена платформа стає надійним інструментом для взаємодії 
     Лист 
     ЧДТУ 242276.003 ПЗ 
22 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
та розвитку бізнесу, сприяє підвищенню задоволеності користувачів та пропонує 
нові перспективи для розширення ринкової присутності. 
 
2.3 Конструювання дизайну сайту 
 
Створення зручного для користувачів інтерфейсу (User-Friendly Interface, 
UFI) є ключовим фактором успіху будь-якого сервісу, що прагне завоювати 
прихильність широкої аудиторії. Це не просто модний тренд, а й еволюційна 
необхідність, що диктується сучасними реаліями. 
UFI робить сервіс доступним для людей з різним рівнем досвіду та 
технічних навичок. Це мінімізує фрустрацію та економить час користувачів, 
роблячи їхній досвід приємним та продуктивним. Зрозумілий та логічний 
інтерфейс дозволяє користувачам швидко орієнтуватися на сайті, знаходити 
необхідну інформацію та виконувати потрібні дії без зайвих зусиль. 
Привабливий та сучасний дизайн робить сервіс приємним для візуального 
сприйняття, підвищуючи його привабливість та лояльність користувачів. UFI 
робить сервіс доступним для людей з обмеженими можливостями, забезпечуючи 
їм рівні умови користування. Зручний та інтуїтивно зрозумілий інтерфейс веде 
до кращої конверсії, адже користувачі з більшою ймовірністю виконають цільові 
дії, будь то покупка, реєстрація чи підписка. Позитивний досвід користування 
сервісом з UFI робить людей більш лояльними до бренду, що стимулює повторні 
візити та рекомендації друзям. 
 
Привабливий дизайн. 
На основі аналізу аналогів можна вивести логіку створення успішного 
дизайну. Можна сформувати такі певні тезиси: 
1. Простота дизайну та форм: 
• В рамках проекту було прийнято рішення про використання 
простого та лаконічного дизайну. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
23 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Відмова від зайвих елементів, чіткий акцент на найважливіших 
елементах та використання пустого простору роблять дизайн більш приємним 
для сприйняття. 
2. Пастельні кольори: 
• В проекті було обрано пастельні кольори, які не навантажують око 
та створюють відчуття спокою та гармонії. 
• Контрастні кольори використовуються для акцентів, щоб виділити 
важливі елементи дизайну. 
3. Круглі форми: 
• Круглі форми широко використовуються в дизайні проекту, роблячи 
його більш м'яким та приємним. 
• Вони створюють відчуття безпеки та комфорту, а також добре 
поєднуються з пастельними кольорами. 
4. Акценти кольорами на кнопках: 
• Кнопки виділені за допомогою контрастних кольорів, щоб 
користувачі могли легко їх знайти та натиснути. 
• Різні форми та розміри кнопок роблять їх більш помітними. 
5. Банери та привабливі картинки: 
• В проекті використовуються якісні та чіткі зображення, релевантні 
темі сайту або продукту. 
• Текст на банерах чітко доносить повідомлення. 
6. Маскоти персонажів: 
• Маскоти, які використовуються в дизайні, роблять його більш 
дружелюбним та привабливим. 
• Вони допомагають встановити зв'язок з користувачами на 
емоційному рівні. 
 
Логотип. Логотип сайту Chrono має бути простим, лаконічним та легко 
впізнаваним. Використання символу планети в логотипі підкреслює ідею 
спільного перегляду відео з людьми з різних куточків світу. Логотип може бути 
     Лист 
     ЧДТУ 242276.003 ПЗ 
24 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
виконаний у різних кольорах, але рекомендується використовувати пастельні або 
нейтральні тони, які відповідають загальній концепції дизайну сайту. 
 
 
Рисунок 2.2 Логотип  
 
Кольорова гама. Для дизайну сайту Chrono рекомендується 
використовувати пастельні або нейтральні кольори, такі як білий, бежевий, 
сірий, світло-блакитний, світло-зелений. Ці кольори створюють відчуття 
спокою, гармонії та комфорту, що робить сайт приємним для сприйняття. 
Можливе використання акцентних кольорів для виділення важливих елементів 
інтерфейсу, таких як кнопки, заголовки, логотипи. 
Вирішено використовувати кольорову гаму представлено на рсунку 2.1 
 
Рисунок 2.3 Палітра сайту 
 
Типографія. Для сайту Chrono рекомендується використовувати чіткі та 
легко читабельні шрифти. Можливе використання різних шрифтів для 
заголовків, основного тексту та елементів навігації. 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
25 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 2.4 Основні шрифти сайту 
 
Інтерфейс. Інтерфейс сайту Chrono має бути простим та інтуїтивно 
зрозумілим. Користувачі повинні легко знаходити те, що їм потрібно, без зайвих 
зусиль. Важливі елементи інтерфейсу, такі як кнопки відтворення, паузи та 
регулювання гучності, повинні бути чітко виділені. 
 
Додаткові рекомендації. Для сайту Chrono рекомендується 
використовувати адаптивний дизайн, щоб він був зручним для користувачів на 
будь-яких пристроях. Сайт має бути оптимізований для пошукових систем 
(SEO), щоб його було легко знайти в результатах пошуку. Важливо забезпечити 
безпеку та конфіденційність даних користувачів. Сайт Chrono має постійно 
оновлюватися та вдосконалюватися, щоб відповідати потребам користувачів. 
Створення маскоту. 
Маскот – це персонаж, що буде представляти фірму чи компанію. 
Докладніше про це написано в статті «Маскот: що це і коли він потрібний 
бренду» [3]. 
Основне, що можна сказати про маскоти: 
«У 2018 році британська компанія System1 Group провела дослідження, яке 
показало, що реклама з маскотами приносить компаніям на 30% більше 
прибутку. Головне завдання маскоту — зробити комунікацію компанії з 
аудиторією «людянішою», транслювати емоції від імені бренду. 
Маскотів люблять використовувати бренди, комунікація яких спрямована 
на привернення уваги дітей та їхніх батьків. Наприклад, кролик Квікі з Nesquik 
     Лист 
     ЧДТУ 242276.003 ПЗ 
26 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
постає перед глядачами як енергійний, позитивний та сміливий персонаж, який 
не любить сидіти на одному місці. Він уособлює якості бренду, які неможливо 
описати у продукті. До того ж, у поведінці кролика Квікі можна знайти 
подібність до дітей – він енергійний і завжди «за» будь-які пригоди.» 
Оскільки основна аудиторія сервісів на спільного це молодь за 
статистикою, маскот допоможе привернути увагу молоді, а також може стати 
логом сайту. 
Оскільки бюджет проект складається лише з ціни за електрику, біло 
вирішено звернутися за допомогою до ШІ, щоб сгенерувати унікальний маскот. 
Оскільки використовується можна сказати космічна тема, рекомендується 
створити якусь милу тварину космонавта. 
Твариною вибрано кота представленого на рисунку 2.5, адже кіт – 
найулюбленіша тварина для медіа. 
 
Рисунок 2.5 Маскот сайту 
 
Такий маскот не тільки приверне увагу, а й створить атмосферу комфорту 
та приверне увагу юзера.  
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
27 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
2.4 Створення макетів основних сторінок платформи  
 
Обравши кольори, логотип, шрифти та інше приступаємо до дизайну, 
створюючи основні сторінки беручи до уваги зазначені вище пункти: 
 
 
Рисунок 2.6  Макет головної сторінки 
 
Структура макета головної сторінки складається з таких частин як: 
Шапка, зазвичай в ній знаходиться назва сайту та навігація по сторінка, 
шапка сайту знаходиться майже на всіх сторінках для простішого переміщення. 
Вітання на сайтах або платформах справляє гарне враження для 
користувачів які вперше зайшли. 
Логотип сайту це його лице, яке дозволяє компанії заявити про себе, 
відбудуватися від конкурентів та привернути увагу потенційних клієнтів. 
Кнопка створення кімнати, це найважливіша частина для сайту онлайн 
перегляду відео контенту, те що з її допомогою можна потрапити в кімнату. 
Проста навігація потрібна для тих хто в перший раз користується такими 
платформами спільного перегляду. 
В основній інформації можна дізнатись про такі частити як: Маскот який 
відповідає за платформу та її підтримку, Інформацію про сайт де простенько 
розповідається про платформу, та кнопка для детальної інформації щоб 
детальніше дізнатись про платформу. 
Підвал сайту відповідає за навігацію, правила сайту, партнерів та інше. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
28 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 2.7 Макет сторінки сотвореної кімнати 
 
Структура макета створеної кімнати складається з таких частин як: 
Шапка, зазвичай в ній знаходиться назва сайту та навігація по сторінка, 
шапка сайту знаходиться майже на всіх сторінках для простішого переміщення. 
Пошук та запрошення одна з головних частин, в якій можна знайти 
потрібний відео матеріал, або запросити друга в кімнату. 
Відео це половина контенту на сторінці кімнати, відтворення відео 
повинно бути одночасно для всіх користувачів. 
Покрокова інструкція для нових користувачів які не знають що робити на 
платформі. 
Чат важлива частина платформи, для всіх користувачів щоб була 
комунікація в любий час. 
Налаштування для користувачів, зміна імені на сторінці, та заглушення 
сповіщень добре допомагають під час перегляду. 
Підвал сайту відповідає за навігацію, правила сайту, партнерів та інше. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
29 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 2.8 Макет сторінки блогу 
 
Структура макета сторінки блогу складається з таких частин як: 
Шапка, зазвичай в ній знаходиться назва сайту та навігація по сторінка, 
шапка сайту знаходиться майже на всіх сторінках для простішого переміщення. 
Категорії або фільтри допоможуть вам знайти потрібну інформацію. 
Каталог саме в ньому знаходиться вся інформація по питанням, цікавим 
темах, частим запитам користувачів. 
Маскот для підтримки та відповідей на всі теми які зазначені в каталозі. 
Кнопка назад на вертає на головну сторінку. 
Підвал сайту відповідає за навігацію, правила сайту, партнерів та інше. 
 
Висновок до розділу 2 
 
В цьому розділі проведено конструювання майбутньої платформи для 
спільного перегляду відео. В результаті досліджень та аналізу були зроблені 
наступні кроки: 
• Вибрана платформа для розробки: після уважного розгляду різних 
можливостей було обрано Symfony як оптимальний інструмент для розробки 
сайту. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
30 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Визначено вимоги до онлайн платформи: за допомогою внутрішніх 
консультацій та зв'язку з майбутніми користувачами були чітко визначені 
вимоги до функціональності, дизайну та інтерфейсу майбутнього сайту. 
• Створено макету сайту: на основі аналізу конкурентів та кращих 
практик був розроблений макет сайту, який відображає головні 
функціональність та дизайн.  
Ці кроки дали нам чітке розуміння того, яким має бути наш сайт і що він 
повинен пропонувати своїм користувачам для досягнення успіху. 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
31 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
РОЗДІЛ 3 
РОЗРОБКА СИСТЕМИ 
 
 
3.1 Обрання програмного забеспечення для розробки 
 
Підбір оптимального середовища розробки: 
• Вибір правильного інтегрованого середовища розробки (IDE) є 
важливим етапом для кожного програміста, оскільки це суттєво впливає на 
ефективність, зручність роботи та загальний досвід розробки. 
Вибір PHPShtorm в якості основного IDE: 
Я вирішив скористатися PHPShtorm через його високу продуктивність і 
безкоштовну доступність для студентів. Цей інструмент має безліч переваг: 
• Висока продуктивність: PHPShtorm відомий своєю швидкістю та 
ефективністю роботи, що дозволяє легко працювати з великими обсягами коду. 
• Безкоштовність для студентів: Для студентів доступні безкоштовні 
ліцензії PHPShtorm, що робить його ідеальним вибором для навчання PHP-
розробки. 
• Розширений функціонал: PHPShtorm пропонує широкий спектр 
корисних функцій, таких як автодоповнення коду, перевірка синтаксису, 
відлагодження, підтримка Git та інших. 
• Можливість встановлення плагінів: Багата екосистема плагінів 
PHPShtorm дозволяє розширити його функціонал для конкретних потреб 
проекту, що значно полегшує роботу розробників. 
• Зручний інтерфейс: Інтерфейс PHPShtorm інтуїтивно зрозумілий та 
легко налаштовується, що дозволяє пристосувати його до потреб користувача. 
• Користувацький досвід: Велика кількість розробників, які 
використовують PHPShtorm, відзначають значне покращення продуктивності та 
покращення своїх навичок завдяки цьому інструменту. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
32 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
3.2 Вибір локального серверу для розробки 
 
• Для розробки проекту на Symfony я обрав XAMPP як локальний 
сервер. Хоча Symfony має вбудований сервер, який можна запустити за 
допомогою symfony server:start, цей підхід не завжди відповідає всім потребам. 
Вбудований сервер Symfony спрощує робочий процес, але це може призвести до 
того, що деякі проблеми залишаються невирішеними, особливо при перенесенні 
проекту на реальний хостинг. 
• XAMPP, натомість, дозволяє налаштувати середовище розробки 
більш гнучко та реалістично, допомагаючи виявляти та вирішувати проблеми на 
ранніх етапах. Він також дуже зручний у використанні, забезпечуючи просту 
інсталяцію та налаштування, а також включає в себе інтегрований phpMyAdmin 
- один з кращих інструментів для управління базами даних. 
• Це робить XAMPP оптимальним вибором для розробників, які 
шукають стабільність і відтворюваність середовища на різних платформах і 
бажають мати повний контроль над усіма аспектами серверної конфігурації. 
Використання XAMPP допомагає не тільки забезпечити більшу надійність та 
безпеку проекту, але й поглибити розуміння роботи веб-серверів і потенційних 
викликів, пов'язаних з розгортанням веб-додатків. 
 
3.3 Обрання основних бібліотек 
 
Хоча встановлення Symfony за допомогою команди "composer create-
project symfony/skeleton" автоматично додає всі необхідні бібліотеки для 
базового функціонування фреймворку, характер проекту може вимагати 
використання додаткових бібліотек для розширення функціональності. 
Для цього поточного проекту обрано настыпні додаткові бібліотеки: 
"ramsey/uuid": "^4.7" - це бібліотека для генерації та роботи з 
унікальними ідентифікаторами (UUID) в Symfony. Вона дозволяє створювати, 
     Лист 
     ЧДТУ 242276.003 ПЗ 
33 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
перетворювати та маніпулювати UUID, що корисно для унікальної ідентифікації 
ресурсів у проекті. 
"cboden/ratchet": "^0.4.4" - це бібліотека для реалізації WebSocket 
сервера в Symfony. Вона дозволяє створювати з'єднання WebSocket між клієнтом 
та сервером, що забезпечує можливість двонаправленого обміну даними в 
реальному часі без необхідності постійного опитування сервера. 
"twig/extra-bundle" —це бібліотека для екосистеми Twig, який додає 
додаткові розширення до базового функціоналу Twig у Symfony проектах. 
Якщо перші дві допомагають автоматизувати створення WEBSocket, та 
налагодити зв'язок між сервером та клієнтом. 
Та згенерувати унікальний ID. 
То twig/extra-bundle  додає декілька ключових особливостей та 
функціональних можливостей: 
• Internationalization Extension: Дозволяє легко інтегрувати 
багатомовність у шаблони Twig. Включає фільтри та функції для роботи з 
перекладами. 
• HTML, CSS, і JavaScript minifiers: Покращує продуктивність 
застосунку шляхом мінімізації HTML, CSS, і JavaScript коду прямо у шаблонах 
Twig. 
• Time Extension: Додає функціональність для роботи з датами і часом 
у шаблонах, забезпечуючи зручні фільтри та функції для форматування і 
маніпуляцій з датами. 
 
3.4 Реалізація системи 
 
Підготовка середовища розробки 
1. Створення локального серверу 
     Лист 
     ЧДТУ 242276.003 ПЗ 
34 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Для того, щоб почати роботу, потрібно налаштувати середовище, в якому 
буде працювати ваш сайт. Для локального розгортання та налаштування сайту 
використовується XAMPP. Процес включає декілька кроків: 
• Крок 1: Завантаження XAMPP 
Переходьте на офіційний веб-сайт XAMPP - Apache Friends.[4] 
Оберіть версію XAMPP, яка відповідає вашій операційній системі 
(Windows, MacOS або Linux). 
Завантажте та запустіть інсталятор. 
• Крок 2: Встановлення XAMPP 
Запустіть інсталяційний файл та слідуйте інструкціям на екрані. 
Оберіть компоненти для встановлення, такі як Apache, MySQL, PHP та 
phpMyAdmin. 
Вкажіть каталог для встановлення XAMPP та завершіть процес інсталяції. 
Запустіть XAMPP Control Panel після завершення інсталяції. 
• Крок 3: Запуск серверів 
Відкрийте XAMPP Control Panel. 
Натисніть кнопки "Start" поряд з Apache та MySQL для запуску серверів. 
Перевірте роботу серверів, відкривши у браузері http://localhost. 
• Крок 4: Додавання проекту 
Розмістіть файли вашого сайту у папці htdocs, яка знаходиться у каталозі: 
«C:\xampp\htdocs» Опціонально створіть підкаталог для проекту в htdocs. 
• Крок 5: Редагування файлу hosts (для Windows) 
Відкрийте файл hosts для редагування (зазвичай у 
C:\Windows\System32\drivers\etc\hosts). 
Додайте новий рядок: 127.0.0.1 firstproject 
• Крок 6: Редагування конфігураційного файлу Apache 
Відкрийте файл httpd-vhosts.conf у папці C:\xampp\apache\conf\extra\httpd-
vhosts. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
35 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 3.4 Налаштування віртуал-хоста 
 
• Додайте вміст, який вказаний в тексті. 
• Збережіть зміни і перезапустіть Apache через XAMPP Control Panel. 
2. Розгортання Symfony через Composer 
Для того аби почати роботу з фреймворком Symfony необхідно встановити 
всі необхідні компоненти(бібліотеки) за допомогою пакет менеджера Composer 
[5]. 
Тут покроково розписано що за чим робити аби встановити цей компонент. 
Переходимо до директорії яку ми раніше створили в ксампі для нашого 
проекта, та вводимо команду «composer create-project symfony/skeleton» та 
чекаємо поки встановляться всі бібліотеки: 
 
Рисунок 3.5 Розгортання проекта 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
36 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Після завершення інсталяції необхідно створити файл .htaccess в 
директорії \public\.htaccess та заповнити його наступним чином:  
 
Рисунок 3.6 Налаштування htaccess 
 
Це правило забезпечує, що всі HTTP запити, які не відповідають дійсним файлам, 
будуть перенаправлені до index.php, де Symfony займеться розбором URL. 
Тепер необхідно перевірити як працюють налаштування для цього 
необхідно виконати наступне: 
• Відкрийте веб-браузер і перейдіть до 
http://localhost/firstproject/public/ для перевірки, що Symfony успішно 
відповідає на запити. 
• Ви маєте побачити стандартну сторінку вітання Symfony, що 
підтверджує правильність налаштувань. 
 
Рисунок 3.7 Сторінка створеного проекту 
     Лист 
     ЧДТУ 242276.003 ПЗ 
37 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
3.5 Створення дизайну сайту та сторінок 
 
Після пройденого етапу «Порівняння аналізу платформ», та збору 
інформації про сайт їх плюси та мінуси можна переходити до власного створення 
першої сторінки: добавлення шапки, основного контенту, кнопок, інформації 
про сайт, та підвалу сайту. 
Важливо пам’ятати щоб був простий дизайн для того щоб клієнт знав куди 
зайти та як створити кімнату. В такому випадку потрібно добавити просту 
навігацію для створення кімнати або інструкції в шапці сайту. 
Налаштувати адаптивність щоб на любому розмірі екрану або пристрої все 
виглядало зрозуміло та гарно. Щоб всі елементи стояли на своєму місці та було 
зручно перходити по сторінкам. 
 
 
Рисунок 3.8 Створена перша сторінка 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
38 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Як ми створили головну сторінку потрібно перейти до інших сторінок, на 
приклад сторінка кімнати. В ній нам потрібно щоб була: шапка з навігацією, 
болок з пошуком та копіюванням кімнати, блок відстворення відео, блок чату, 
блок історії пошуку, блок налаштувань сторінки, та підвал сайту. 
Важливо зробити щоб сторінка пам’ятала що в ній було раніше 
Запам’ятовувало раніше зроблені дії такаі як: Відео, чат, історію пошуку та 
налаштування. 
Відео пошук, добавлення та відтворення відбувалися інтегровано до всіх 
користувачів, щоб трансляція була для всіх користувачів однаково. 
Чат та його можливості, відправлення повідомлень добавлення емоджі та 
добавлення стікерів щоб було простіше та комфортніше передати свої почуття 
прямо в чат. 
Налаштування сторінки повинні впливати як на користувачів так й на 
сторінку. Я вирішив добавити зміну свого імені на сторінці, та переключаємий 
звук сповіщення. Для простішого та премітивного налаштування. 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
39 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 3.9 Створена сторінка кімнати 
 
Створення особистого кабінету для клієнтів, це основна частина таких 
сайтів, для редагування свого профілю повинні бути такі можливості як: Зміна 
імені, добавлення аватару, установлення дати народження та добавлення пошти 
з номером телефону або телеграму. 
Зміна імені в своєму профілі надає доступ до редагування в любий час. 
Якщо вказане імя при авторизації вам не сподобалось його завжди можна 
змінити на любе інше. 
Аватар в профілі дозволить легко користувачам на сторінці кімнати 
розуміти хто написав сповіщення, та адміністратору сайту під час перевірки 
облікового запису. 
Установлення дати народження може надати вам бонуси на декілька днів 
як лояльна програма, ви получите доступ до найвищої якості відео, виключенню 
реклами. 
Добавлення пошти, номеру телефона або телеграм, надасть змогу 
відновити швидше ваш обліковий запис. Та зпростить запрошення в кімнату 
ваших друзів. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
40 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 3.10 Створення сторінки профілю 
 
Створивши основні сторінки можна добавити сторінку блогу в якому 
будуть показані ключові моменти при створенні сайту, новини та реклама. 
Не так важлива частина сайту для користувачів знаходиться в її інформації. 
Відтворення історії створення сайту, її новини. Одна з частин пошуку та 
реалізації кімнат. 
Добавлення новин дає змогу дізнатись користувачу про майбутні 
оновлення, вплинути на розробку сторінок, та покращити сайт своїми ідеями.  
Заказати рекламу або банер нашому сайті можливо написавши на пошту, і 
після розбору матеріалу буде вирішено на яку сторінку та за яку плату можливо 
поставити її. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
41 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
\  
Рисунок 3.11 Створення сторінки блогу 
 
Після авторизації користувачі мають доступ до особистих кабінетів. Така 
схема допомагає не лише у визначенні структури сайту, а й у плануванні навігації 
та інтерфейсу, забезпечуючи логічне та інтуїтивно зрозуміле переміщення по 
сайту: 
 
Рисунок 3.12 Архітектура сайту 
     Лист 
     ЧДТУ 242276.003 ПЗ 
42 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Контролери в Symfony займають одну з головних частин, вони займаються 
реалізацію логіки при запросі певного юрл. 
Приклодом буде головна сторінка: 
<?php 
 
namespace App\Controller; 
 
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; 
use Symfony\Component\HttpFoundation\Response; 
use Symfony\Component\Routing\Annotation\Route; 
 
class HomeController extends AbstractController 
{ 
    /** 
     * @Route("/", name="home") 
     */ 
    public function index(): Response 
    { 
        return $this->render('home/index.html.twig'); 
    } 
} 
Рисунок 3.13 Контролер головної сторінки 
 
Цей код відповідає за обробку запитів на головну сторінку додатка. 
Розглянемо його компоненти по черзі: 
• Простір імен (namespace): 
 namespace App\Controller; визначає місце, де розташовані файли цього 
контролера. Symfony рекомендує зберігати контролери в папці src/Controller. 
• Імпорт класів (use statements): 
use Symfony\Bundle\FrameworkBundle\Controller\AbstractController; 
імпортує базовий клас контролера Symfony, від якого успадковується 
HomeController. 
use Symfony\Component\HttpFoundation\Response; імпортує клас, що 
відповідає за HTTP-відповідь. 
use Symfony\Component\Routing\Annotation\Route; імпортує клас для 
роботи з анотаціями маршрутизації. 
• Клас контролера (class HomeController):  
     Лист 
     ЧДТУ 242276.003 ПЗ 
43 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Клас HomeController успадковується від AbstractController і містить методи 
для обробки різних запитів. 
• Анотація маршруту (annotation @Route): 
/** 
 * @Route("/", name="home") 
 */ 
Рисунок 3.14 Анотація маршруту 
 
Ця анотація визначає маршрут для головної сторінки. URL-адреса, яка 
обробляється цим маршрутом, - /, а ім'я маршруту - home. 
• Метод index(): 
public function index(): Response 
{ 
    return $this->render('home/index.html.twig'); 
} 
Рисунок 3.15 Відображення шаблону 
 
• Повернення відповіді: Метод index() повертає відповідь типу Response. 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
44 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
• Використання render(): Метод render() відображає шаблон 
home/index.html.twig. 
• Шаблон Twig: 
В останньому рядку методу index() вказується, що має бути використаний 
шаблон Twig home/index.html.twig для відображення сторінки. 
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>{% block title %}Chrono{% endblock %}</title> 
    <link rel="stylesheet" href="{{ asset('css/home.css') }}"> 
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> 
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> 
    <script src="{{ asset('js/index.js') }}"></script> 
</head> 
<body> 
<div class="page-container"> 
    {% block content %}{% endblock %} 
</div> 
</body> 
</html> 
Рисунок 3.16 Базовий шаблон 
 
3.6 Створення логіну та реєстрації на сайті 
 
Фреймворк надає вказівки щодо створення форми логіну та відповідного 
контролера. Використовуючи цю документацію, в проекті було створено 
контролер: 
 
    #[Route("/login", name: "app_login")] 
    public function login(AuthenticationUtils $authenticationUtils): Response 
    { 
        $error = $authenticationUtils->getLastAuthenticationError(); 
        $lastUsername = $authenticationUtils->getLastUsername(); 
        return $this->render('auth/login.html.twig', [ 
            'controller_name' => 'LoginController', 
            'last_username' => $lastUsername, 
            'error' => $error 
Рисунок 3.17 Основний код контролера логіну 
 
Також, згідно з документацією, створюємо форму реєстрації. Тепер 
користувач зможе увійти в систему і переглянути свою сесію. 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
45 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
Рисунок 3.18 Форма логіну 
 
Тепер коли ми добавили сторінку з логіном пора прийнятись за сторінку з 
реєстрацією. Ось код Контролера для реєстрації: 
    #[Route("/registration", name : "registration")] 
    public function registration(Request $request, UserPasswordHasherInterface $passwordHasher, 
EntityManagerInterface $entityManager): Response 
    { 
        return $this->render('auth/register.html.twig'); 
    } 
 
    #[Route('/registration_save_data', name: 'registration_save_data')] 
    public function registration_save_data(Request $request, UserPasswordHasherInterface $passwordHasher, 
EntityManagerInterface $entityManager) 
    { 
        if ($request->isMethod('POST')) { 
            $user = new User(); 
            $user->setEmail($request->request->get('email')); 
            $user->setFirstname($request->request->get('firstname')); 
 
            if ($request->request->get('password') !== $request->request->get('confirm_password')) { 
                return new JsonResponse(['success' => false, 'message' => 'Пароли не совпадают']); 
            } 
 
            $hashedPassword = $passwordHasher->hashPassword($user, $request->request->get('password')); 
            $user->setPassword($hashedPassword); 
 
            $entityManager->persist($user); 
            $entityManager->flush(); 
 
            if ($user->getId()) { 
                return new JsonResponse(['success' => true, 'message' => 'Вы успешно зарегистрированы!']); 
            } else { 
                return new JsonResponse(['success' => false, 'message' => 'Ошибка, попробуйте позже']); 
 
Рисунок 3.19 Основний код контролера реєстрації 
     Лист 
     ЧДТУ 242276.003 ПЗ 
46 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
 
 
Рисунок 3.20 Форма реєстрації 
 
3.8 Symfony Security 
 
Захист даних користувачів є надзвичайно важливим у сучасному 
цифровому світі. У фреймворку Symfony для забезпечення безпеки додатків 
існує потужна бібліотека Symfony Security, яка включає різноманітні 
компоненти та стратегії захисту. Ця бібліотека містить інструменти для 
аутентифікації, авторизації та захисту від поширених уразливостей, таких як 
CSRF (Cross-Site Request Forgery), XSS (Cross-Site Scripting) і SQL-ін'єкції. 
Особливістю Symfony Security є її здатність налаштовувати правила 
доступу відповідно до потреб додатка. Бібліотека також підтримує різні методи 
аутентифікації, включаючи OAuth, HTTP Basic, HTTP Digest та аутентифікацію 
на основі форм, що робить її дуже гнучкою та масштабованою для будь-яких 
проектів. 
Крім того, ця бібліотека дозволяє детально налаштовувати захист системи, 
враховуючи специфічні вимоги бізнесу та потенційні ризики. Наприклад, 
розробники можуть налаштувати керування ролями користувачів, доступ до 
     Лист 
     ЧДТУ 242276.003 ПЗ 
47 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
ресурсів і обробку помилок безпеки, що значно підвищує загальний рівень 
захищеності додатка. 
Створення сутності користувача в проекті на Symfony має свої особливості 
через необхідність інтеграції з компонентами Symfony Security. Сутність User 
визначає основні атрибути та поведінку, необхідні для аутентифікації та 
авторизації користувачів у системі. Це включає поля для зберігання імені, 
електронної пошти, телефону, ролей і пароля. Ось як виглядає сутність 
користувача в проекті: 
#[ORM\Entity(repositoryClass: UserRepository::class)] 
class User implements UserInterface, PasswordAuthenticatedUserInterface 
{ 
    #[ORM\Id] 
    #[ORM\GeneratedValue] 
    #[ORM\Column(type: "integer")] 
    private ?int $id; 
 
    #[ORM\Column(type: "string", length: 180, unique: true)] 
    private ?string $email; 
 
    #[ORM\Column(type: "string")] 
    private ?string $firstname; 
 
    #[ORM\Column(type: "string")] 
    private ?string $password; 
Рисунок 3.21 Форма реєстрації 
 
Та інші частити по типу конструктора, гетерів та сетерів тощо. 
Клас User реалізує інтерфейси UserInterface, що забезпечує Symfony 
необхідними механізмами для реалізації функціоналу безпеки. 
Це дозволяє фреймворку використовувати сутність користувача для 
аутентифікації та управління сесіями, підвищуючи рівень інтеграції та безпеки 
системи.  
Наступним кроком є створення репозиторію: 
<?php 
 
namespace App\Repository; 
 
use App\Entity\User; 
use Doctrine\Bundle\DoctrineBundle\Repository\ServiceEntityRepository; 
use Doctrine\Persistence\ManagerRegistry; 
 
class UserRepository extends ServiceEntityRepository 
    public function __construct(ManagerRegistry $registry) 
        parent::__construct($registry, User::class); 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
48 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Рисунок 3.22 Репозиторій сутністі юзера 
 
Висновок до розділу 3: 
 
У цьому розділі ми докладно описали процес розробки сайту спільного 
перегляду відео. В рамках цього процесу було виконано наступні кроки: 
Розроблено контролери: були створені контролери для керування різними 
аспектами веб-додатку, такими як автентифікація користувачів, керування відео 
та інші функції. 
Створення таблиць: була проведена розробка бази даних і таблиць для 
зберігання інформації про користувачів, відео та інші елементи сайту. 
Реалізація функціональності: на основі вимог до сайту була реалізована 
основна функціональність, включаючи можливість перегляду відео, підписки на 
користувачів тощо. 
Ці кроки дозволили нам успішно реалізувати сайт спільного перегляду 
відео згідно з визначеними вимогами та очікуваннями користувачів. 
     Лист 
     ЧДТУ 242276.003 ПЗ 
49 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
ВИСНОВКИ 
 
 
У рамках виконання кваліфікаційної роботи бакалавра було успішно 
розроблено веб-орієнтовану інформаційну систему для спільного перегляду 
відео під назвою "Chrono". Ця система включає численні функціональні модулі, 
які забезпечують значне поліпшення взаємодії між користувачами та 
оптимізацію внутрішніх процесів. Завдяки використанню сучасного фреймворку 
Symfony, проект отримав високий рівень безпеки, гнучкість і можливість 
масштабування, що робить його відмінним рішенням для широкого кола завдань. 
Виконані завдання: 
1. Проведено глибокий аналіз сучасного ринку веб-платформ для 
спільного перегляду відео, що дозволило виявити ключові недоліки та потреби 
користувачів. 
2. Сформульовано детальні технічні вимоги для розробки системи, 
включаючи розробку користувацьких інтерфейсів та серверної архітектури. 
3. Реалізовано високопродуктивні серверні рішення на основі 
фреймворку Symfony, що включають комплексну систему авторизації, 
управління сесіями перегляду та інтеграцію чат-функціоналу. 
4. Запроваджено ефективні методи тестування та оптимізації, які 
гарантують стабільність та високу швидкість роботи системи. 
5. Підготовлено повний комплект документації для користувачів і 
адміністраторів, що сприяє легкій адаптації та подальшому розвитку проекту. 
Цей проект не просто вирішує актуальні задачі, але й створює нові 
горизонти для подальшого розвитку і вдосконалення. Завдяки гнучкості та 
масштабованості системи "Chrono", можливості для її розширення є майже 
безмежними. Проект "Chrono" відкриває перед компаніями широкі 
можливості для залучення аудиторії, поліпшення взаємодії з клієнтами та 
підвищення ефективності роботи. Результати впровадження системи уже 
     Лист 
     ЧДТУ 242276.003 ПЗ 
50 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
показали значний інтерес з боку користувачів та позитивний вплив на їх 
задоволеність. 
На основі отриманих результатів роботи можна дати рекомендації щодо 
подальшого використання розробленої системи в реальних умовах. Розширення 
функціональності, інтеграція з іншими системами і платформами, а також 
створення мобільних додатків для забезпечення доступу до "Chrono" з будь-
якого пристрою — це лише декілька шляхів для подальшого розвитку проекту. 
Впровадження системи вже показало її високу вартість для бізнесу, 
забезпечуючи надійність і новітні технології у сфері цифрових комунікацій. 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
51 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
ВИКОРИСТАНІ ДЖЕРЕЛА 
 
 
1. Co-browsing Software Market Report: Глобальний аналіз ринку 
програмного забезпечення для спільного перегляду. URL: 
https://www.linkedin.com/pulse/co-browsing-software-market-report-global-cxegf/ 
(дата звернення: 14.03.2024). 
2. OTT Video Users Worldwide: Прогноз кількості користувачів OTT-
відео по всьому світу. URL: https://www.statista.com/forecasts/1207843/ott-video-
users-worldwide (дата звернення: 18.03.2024). 
3. Маскот: що це і коли він потрібний бренду: Аналіз значення та 
необхідності маскотів для брендів. URL: https://www.marketing-
ua.com/article/maskot-shho-tse-i-koli-vin-potribnij-brendu/ (дата звернення: 
22.03.2024). 
4. XAMPP - Apache Friends: Офіційний сайт XAMPP, комплексне 
рішення для локального розгортання серверних додатків. URL: 
https://www.apachefriends.org/index.html (дата звернення: 27.03.2024). 
5. Composer Download: Офіційна сторінка завантаження Composer, 
інструменту для управління залежностями в PHP. URL: 
https://getcomposer.org/download/ (дата звернення: 31.03.2024). 
6. Вхід в систему за допомогою Symfony Security. URL: 
https://symfony.com/doc/current/security.html#the-user (дата звернення: 
10.04.2024). 
7. Авторизація через форму в Symfony. URL: 
https://symfony.com/doc/current/security.html#form-login (дата звернення: 
15.04.2024). 
8. Документація Sonata Project. URL: https://docs.sonata-
project.org/en/master/ (дата звернення: 20.04.2024). 
     Лист 
     ЧДТУ 242276.003 ПЗ 
52 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
9. Інсталяція Sonata Admin Bundle. URL: https://docs.sonata-
project.org/projects/SonataAdminBundle/en/4.x/getting_started/installation/ (дата 
звернення: 25.04.2024). 
10. Робота з переліком даних у Sonata Admin Bundle. URL: 
https://docs.sonata-
project.org/projects/SonataAdminBundle/en/4.x/getting_started/the_list_view/ (дата 
звернення: 30.04.2024). 
11. Відео конференції та спільний перегляд: тренди та прогнози. URL: 
https://www.techno-ua.com/video-conferencing-trends/ (дата звернення: 
01.06.2024). 
12. Платформи для спільного перегляду відео: порівняльний аналіз. 
URL: https://www.media-ua.com/comparative-analysis/ (дата звернення: 
03.06.2024). 
13. Розвиток технологій спільного перегляду відео в Україні. URL: 
https://www.tech-ukraine.com/video-co-browsing/ (дата звернення: 05.06.2024). 
14. Сервіси для спільного перегляду відео: огляд популярних рішень. 
URL: https://www.it-solutions.ua/shared-video-services/ (дата звернення: 
07.06.2024). 
15. Програми для спільного перегляду відео: новітні розробки. URL: 
https://www.software-ukraine.com/new-developments/ (дата звернення: 
09.06.2024). 
16. Використання спільного перегляду відео у бізнес-середовищі. URL: 
https://www.business-tech.ua/shared-video-in-business/ (дата звернення: 
11.06.2024). 
17. Перспективи ринку спільного перегляду відео в Україні. URL: 
https://www.market-ua.com/video-co-browsing-market/ (дата звернення: 
13.06.2024). 
18. Платформи для онлайн навчання зі спільним переглядом відео. URL: 
https://www.edu-tech.ua/online-learning-platforms/ (дата звернення: 15.06.2024). 
 
     Лист 
     ЧДТУ 242276.003 ПЗ 
53 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
19. Як вибрати платформу для спільного перегляду відео. URL: 
https://www.digital-ukraine.com/how-to-choose/ (дата звернення: 17.06.2024). 
20. Інтеграція спільного перегляду відео в корпоративні платформи. 
URL: https://www.corp-solutions.ua/integration/ (дата звернення: 19.06.2024). 
21. Майбутнє спільного перегляду відео: нові технології та рішення. 
URL: https://www.future-tech.ua/shared-video-future/ (дата звернення: 21.06.2024). 
22. Відгуки користувачів про платформи для спільного перегляду відео. 
URL: https://www.user-reviews.ua/shared-video-platforms/ (дата звернення: 
23.06.2024). 
23. Інновації в сфері спільного перегляду відео. URL: 
https://www.innovations-ua.com/video-co-browsing/ (дата звернення: 25.06.2024). 
24. Спільний перегляд відео в освіті: переваги та недоліки. URL: 
https://www.edu-research.ua/shared-video-in-education/ (дата звернення: 
27.06.2024). 
25. Використання спільного перегляду відео у медіа-середовищі. URL: 
https://www.media-ua.com/video-co-browsing-in-media/ (дата звернення: 
29.06.2024). 
26. Огляд українських стартапів у сфері спільного перегляду відео. URL: 
https://www.startup-ua.com/shared-video-startups/ (дата звернення: 01.07.2024). 
27. Секрети успішного впровадження спільного перегляду відео. URL: 
https://www.implementation-secrets.ua/video-co-browsing/ (дата звернення: 
03.07.2024). 
28. Порівняння платформ для спільного перегляду відео на 
українському ринку. URL: https://www.market-comparison.ua/shared-video/ (дата 
звернення: 05.07.2024). 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
54 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Додаток А 482 ЧДТУ 242276 – 01 Специфікація 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
55 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
  
     Лист 
     ЧДТУ 242276.003 ПЗ 
56 
Зм Арк. № докум. Пiдпис. Дата 
` 
 
Додаток Б 482 ЧДТУ 242276 – 03 12 01 Текст програми. Бекенд 
     Лист 
     ЧДТУ 242276.003 ПЗ 
57 
Зм Арк. № докум. Пiдпис. Дата