Інтернет-магазин дитячих іграшок з системою управління товарами та замовленнями

Биченко, Владислав Вадимович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9704
Title:	Інтернет-магазин дитячих іграшок з системою управління товарами та замовленнями
Authors:	Дяченко, Петро Васильович Биченко, Владислав Вадимович
Keywords:	WEB-ЗАСТОСУНОК;КАБІНЕТ КОРИСТУВАЧА;УПРАВЛІННЯ ЗАМОВЛЕННЯМИ;ІНТЕРФЕЙС КОРИСТУВАЧА;ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ;СИСТЕМА, ПРОЄКТУВАННЯ.
Issue Date:	10-Jun-2026
Abstract:	Актуальність теми. Сучасний етап розвитку глобальної цифрової економіки характеризується стрімким зміщенням роздрібної торгівлі у площину електронної комерції (e-commerce). Традиційні методи продажу товарів масового вжитку, зокрема дитячих іграшок, поступово поступаються місцем інтерактивним веб-платформам. Специфіка ринку дитячих товарів вимагає від веб-ресурсів не лише високої швидкості роботи, а й підвищеної інтерактивності, візуальної привабливості, адаптивності під мобільні пристрої та бездоганного рівня безпеки персональних даних користувачів. У межах даної кваліфікаційної роботи було створено сайт магазину дитячих іграшок, який дозволяє клієнтам переглядати асортимент продукції, отримувати детальну інформацію про товари, здійснювати онлайн-пошук, переглядати категорії товарів та, за потреби, зв’язатися з адміністрацією магазину. Метою кваліфікаційної роботи бакалавра є проєктування та програмна реалізація повнофункціонального Full-stack веб-застосунку «ToyWebService» для автоматизації процесів електронної комерції у сфері роздрібної торгівлі іграшками, із забезпеченням високої продуктивності, адаптивності інтерфейсу та гнучкої архітектури системи. Основні положення і результати кваліфікаційної роботи бакалавра доповідалися і були обговорені на конференції «День студентської науки кафедри КНСА», 22 квітня 2026 року, Черкаси, Україна.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/9704
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)
Files in This Item:
File	Description	Size	Format
Пояснювальна записка_Биченко Владислав_КН-2201_2025-2026.pdf Restricted Access		1.61 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
1 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ  
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
 
Кафедра комп’ютерних наук та системного аналізу 
 
 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
бакалавра 
 (освітньо-кваліфікаційний рівень) 
 
на тему: «Інтернет-магазин дитячих іграшок з системою управління товарами 
та замовленнями» 
 
 
 
 
 
      Виконав: студент 4 курсу, групи КН-2201 
 
Спеціальності 122  «Комп’ютерні науки»  
                                                             (шифр і назва спеціальності) 
 
Освітня програма  «Комп’ютерні науки та  
(назва освітньої програми) 
прикладне програмування»  
 
 Владислав БИЧЕНКО  
 
Керівник __________   Петро ДЯЧЕНКО  
                                                                          (прізвище та ініціали) 
 
Рецензент __________                                
                                                                          (прізвище та ініціали) 
    
 
 
 
 
 
 
Черкаси 2026 року 
2 
Бланк завдання на кваліфікаційну роботу бакалавра студенту 
 
 
Черкаський державний технологічний університет 
Факультет Інформаційних технологій і систем 
Кафедра Комп’ютерних наук та системного аналізу 
Освітньо-кваліфікаційний рівень Бакалавр 
Спеціальність 122 (F3) – Комп’ютерні науки 
Освітня програма Комп’ютерні науки та прикладне програмування 
 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри КНСА  
_______________ Юрій ТРИУС 
«____» _____________ 2026 р. 
 
 
 
ЗАВДАННЯ 
на кваліфікаційну роботу бакалавра студенту 
Биченка Владислава Вадимовича 
(прізвище, ім‘я, по батькові) 
1. Тема роботи  Інтернет-магазин дитячих іграшок з системою управління товарами та   
замовлення       
 
Керівник роботи      Дяченко  П.В., к.т.н., доцент                    
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
затверджені наказом університету від «12» березня 2026 р. № 56/03-03. 
2. Строк подання студентом роботи «10» червня 2026 року 
3. Вихідні дані до роботи: 
Відомості про структуру університетської інформаційно-аналітичної системи. 
Звіт з виробничої практики. Звіт з переддипломної практики. 
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити): 
Вступ 
4.1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ОБҐРУНТУВАННЯ НЕОБХІДНОСТІ РОЗРОБКИ 
WEB-СЕРВІСУ "ToyWebService" 
4.2.  ОГЛЯД ТА АНАЛІЗ ІСНУЮЧИХ РІШЕНЬ (АНАЛОГІВ) 
4.3.  ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ 
4.4.  ОБҐРУНТУВАННЯ ВИБОРУ ТЕХНОЛОГІЧНОГО СТЕКУ 
4.5.  ПРОГРАМНА РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ WEB-СЕРВІСУ 
Висновки.  
5. Перелік додатків (з точним зазначенням назв додатків): 
5.1. Додаток А. Специфікація 482.ЧДТУ. 62299-01. 
5.3. Додаток Б. Лістинг коду програми. 
3 
5.4. Додаток В. Публікація по темі кваліфікаційної роботи бакалавра . 
 
6. Консультанти розділів роботи 
Прізвище, ініціали та Підпис, дата 
Розділ 
посада консультанта завдання видав завдання прийняв 
    
    
 12.01.2026 р. 
7. Дата видачі завдання 
  
 
КАЛЕНДАРНИЙ ПЛАН 
Строк 
№ з/п Назва етапів кваліфікаційної роботи бакалавра виконання Примітка 
етапів роботи 
1 Видача завдання на кваліфікаційну роботу 
12.01.2026   
бакалавра. 
2 Аналіз літературних джерел, об’єкту та предмету 
дослідження.   до 06.02.2026  
3 Написання теоретичного розділу кваліфікаційної 
роботи бакалавра.   до 22.03.2026  
4 Написання аналітичного розділу кваліфікаційної 
 
роботи бакалавра.   до 08.04.2026 
5 Написання практичних розділів й висновків до 
 
кваліфікаційної роботи бакалавра.   до 1.05.2026 
6 Передзахист кваліфікаційної роботи бакалавра 
на засіданні кафедри КНСА.      26.05.2026  
7 Подання роботи завідувачу кафедри КНСА.   до 11.06.2026  
8 Захист кваліфікаційної роботи бакалавра. 11.06.2026  
    
    
    
 
 
 
Студент                                   _____________________________     Владислав БИЧЕНКО 
                                                                            (підпис)                                                                     
 
Керівник роботи                     ____________________________        Петро ДЯЧЕНКО 
                                           (підпис)      
 
                                                              
 
4 
РЕФЕРАТ 
Кваліфікаційна робота бакалавра містить: 66 с., 8 рис., 3 таблицю, 13 
використаних джерел, 3 додатки. 
Актуальність теми. Сучасний етап розвитку глобальної цифрової економіки 
характеризується стрімким зміщенням роздрібної торгівлі у площину електронної 
комерції (e-commerce). Традиційні методи продажу товарів масового вжитку, зокрема 
дитячих іграшок, поступово поступаються місцем інтерактивним веб-платформам. 
Специфіка ринку дитячих товарів вимагає від веб-ресурсів не лише високої швидкості 
роботи, а й підвищеної інтерактивності, візуальної привабливості, адаптивності під 
мобільні пристрої та бездоганного рівня безпеки персональних даних користувачів. 
У межах даної кваліфікаційної роботи було створено сайт магазину дитячих іграшок, 
який дозволяє клієнтам переглядати асортимент продукції, отримувати детальну 
інформацію про товари, здійснювати онлайн-пошук, переглядати категорії товарів та, 
за потреби, зв’язатися з адміністрацією магазину. Реалізовано адаптивний дизайн, що 
дозволяє користуватися сайтом з будь-яких пристроїв – смартфонів, планшетів чи 
комп’ютерів. Вебсайт також передбачає зручну адміністративну панель для 
керування товарами, категоріями та користувачами. Завдяки використанню сучасних 
технологій, таких як React JS, Node.js, Bootstrap 4.x, сайт є швидким, зручним та 
масштабованим. Тобто створення веб-сайту магазину дитячих іграшок є актуальним 
кроком у розвитку електронної торгівлі та впровадженні інтернет-рішень у бізнес-
процеси. 
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є 
проєктування та програмна реалізація повнофункціонального Full-stack веб-
застосунку «ToyWebService» для автоматизації процесів електронної комерції у сфері 
роздрібної торгівлі іграшками, із забезпеченням високої продуктивності, 
адаптивності інтерфейсу та гнучкої архітектури системи. Для досягнення мети були 
поставлені наступні задачі: 
− проаналізувати існуючі сайти аналогічних магазинів; 
− визначити функціональні вимоги до сайту; 
− обрати програмно-технічні засоби для реалізації задачі; 
5 
− спроєктувати структуру сайту та його функціонал; 
− реалізувати веб-сайт з адаптивною версткою; 
− реалізувати бекенд частину з підтримкою API для товарів, категорій і 
користувачів; 
− провести тестування та перевірку працездатності розробленої системи. 
Об’єкт дослідження: процеси проєктування, розробки та функціонування Full-
stack веб-застосунків для електронної комерції. 
Предмет дослідження: методи, технології та інструменти розробки клієнт-
серверної архітектури (з використанням React, Node.js та Express) для реалізації 
інтерактивного інтерфейсу та модуля управління замовленнями у веб-застосунку 
«ToyWebService». 
Методи дослідження. Для досягнення поставленої мети та розв'язання 
визначених завдань у кваліфікаційній роботі використано комплекс теоретичних та 
практичних методів дослідження 
Апробація результатів роботи. Основні положення і результати 
кваліфікаційної роботи бакалавра доповідалися і були обговорені на конференції 
«День студентської науки кафедри КНСА», 22 квітня  2026 року, Черкаси, Україна. 
Публікації. Владислав Биченко Розробка Full-stack веб-застосунку 
«ToyWebService» для автоматизації процесів електронної комерції : Збірник тез 
доповідей студентської науково-практичної конференції ЧДТУ : 22-23 квітня 2026 / 
[упорядник Мельник І.В.]; Міністерство освіти і науки України, Черкаський 
державний технологічний ун-т. Черкаси : ЧДТУ, 2026. С. 26. 
Ключові слова: WEB-ЗАСТОСУНОК, КАБІНЕТ КОРИСТУВАЧА, 
УПРАВЛІННЯ ЗАМОВЛЕННЯМИ, ІНТЕРФЕЙС КОРИСТУВАЧА, БАЗА ДАНИХ, 
WEB-РОЗРОБКА, ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ, СИСТЕМА, ПРОЄКТУВАННЯ. 
ABSTRACT 
The qualification work of the bachelor contains: 66 pages, 8 figures, 3 table, 13 
references, and 3 appendices. 
6 
Actuality of theme. The current stage of development of the global digital economy 
is characterized by a rapid shift of retail trade toward e-commerce. Traditional methods of 
selling consumer goods, particularly children’s toys, are gradually giving way to interactive 
web platforms. The specific nature of the children’s goods market requires web resources 
not only to operate at high speed but also to offer enhanced interactivity, visual appeal, 
responsiveness to mobile devices, and impeccable security for users’ personal data. The 
current stage of development of the global digital economy is characterized by the rapid 
shift of retail trade into the realm of e-commerce. Traditional methods of selling consumer 
goods, in particular children's toys, are gradually giving way to interactive web platforms. 
The specifics of the children's goods market require web resources not only high speed of 
operation, but also increased interactivity, visual appeal, adaptability to mobile devices and 
an impeccable level of security of users' personal data. As part of this qualification work, a 
children's toy store website was created, which allows customers to view the product range, 
receive detailed information about the products, perform online searches, view product 
categories and, if necessary, contact the store administration. An adaptive design has been 
implemented, which allows you to use the site from any devices - smartphones, tablets or 
computers. The website also provides a convenient administrative panel for managing 
products, categories and users. Thanks to the use of modern technologies such as React JS, 
Node.js, Bootstrap 4.x, the site is fast, convenient and scalable. That is, creating a website 
for a children's toy store is a relevant step in the development of e-commerce and the 
implementation of Internet solutions in business processes. 
Purpose of the work and research objectives. The objective of this bachelor’s thesis 
is the design and software implementation of a fully functional full-stack web application, 
“ToyWebService,” to automate e-commerce processes in the toy retail sector, ensuring high 
performance, interface adaptability, and a flexible system architecture. To achieve the goal, 
the following tasks were set: 
− analyze existing websites of similar stores; 
− determine the functional requirements for the site; 
− select software and hardware tools to implement the task; 
− design the site structure and its functionality; 
7 
− implement a website with adaptive layout; 
− implement the backend part with API support for products, 
categories and users; 
− conduct testing and verification of the functionality of the 
developed system. 
Research object: the processes of designing, developing, and operating full-stack 
web applications for e-commerce. 
Research subject: methods, technologies, and tools for developing client-server 
architecture (using React, Node.js, and Express) to implement an interactive interface and 
an order management module in the “ToyWebService” web application. 
Research methods. To achieve the set goal and solve the defined tasks, this thesis 
employs a combination of theoretical and practical research methods 
Approval of the results of work. The main provisions and results of the bachelor’s 
thesis were presented and discussed at the conference “Student Science Day of the 
Department of Computer Science and Software Engineering,” on April 22, 2026, in 
Cherkasy, Ukraine. 
Publications. Vladislav Bychenko Development of the Full-stack Web Application 
“ToyWebService” for the Automation of e-commerce Processes: Collection of Abstracts 
from the Student Scientific and Practical Conference of Cherkasy State Technological 
University: April 22–23, 2026/[edited by I.V. Melnyk]; Ministry of Education and Science 
of Ukraine, Cherkasy State Technological University. Cherkasy: ChSTU, 2026. p. 26. 
Keywords: WEB APPLICATION, USER ACCOUNT, ORDER MANAGEMENT, 
USER INTERFACE, DATABASE, WEB DEVELOPMENT, SOFTWARE, SYSTEM, 
DESIGN. 
 
8 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 10 
ВСТУП 10 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ОБҐРУНТУВАННЯ НЕОБХІДНОСТІ 
РОЗРОБКИ WEB-СЕРВІСУ "ToyWebService" 12 
1.1 Актуальність автоматизації процесів у сфері торгівлі іграшками 12 
1.2 Огляд бізнес-процесів та основні завдання веб-сервісу 13 
Висновки до розділу 1 15 
2 ОГЛЯД ТА АНАЛІЗ ІСНУЮЧИХ РІШЕНЬ (АНАЛОГІВ) 16 
2.1 Класифікація систем електронної комерції та веб-сервісів 16 
2.2 Порівняльний аналіз популярних платформ (напр. "Будинок іграшок", 
"Антошка", Rozetka) 18 
2.3 Визначення переваг та особливостей розроблюваного сервісу 21 
Висновки до розділу 2 23 
3 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ 25 
3.1 Постановка задачі та формування вимог до системи 25 
3.2 Опис функціональних та нефункціональних вимог 27 
3.3 Моделювання архітектури системи 29 
3.3.1. Діаграма прецедентів (Use Case Diagram) 30 
3.3.2. Діаграма класів (Class Diagram) 31 
3.3.3. Діаграма послідовності (Sequence Diagram) 32 
Висновки до розділу 3 32 
4 ОБҐРУНТУВАННЯ ВИБОРУ ТЕХНОЛОГІЧНОГО СТЕКУ 34 
4.1 Аналіз та вибір мови програмування та фреймворків (Backend/Frontend) 34 
4.2 Обґрунтування вибору системи управління базами даних (СУБД) 36 
4.3 Огляд допоміжних засобів розробки та розгортання 37 
Висновки до розділу 4 39 
5 ОЦІНКА ВИКОРИСТАНИХ ЗАСОБІВ ТА НАПРЯМИ РОЗВИТКУ 40 
5.1 Структура програмного проєкту 40 
5.2 Реалізація користувацького інтерфейсу 41 
5.3 Опис логіки роботи основних модулів 43 
5.3.1 Модуль керування анімаціями (useScrollAnimation) 43 
5.3.2. Модуль презентаційної логіки (Component Layer) 44 
5.3.3. Модуль інтеграції стилів та станів 44 
Висновки до розділу 5 45 
ВИСНОВКИ 47 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 49 
9 
ДОДАТОК А 50 
ДОДАТОК Б 51 
ДОДАТОК В 65 
 
 
 
 
 
    
 
 
 
 
 
10 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 
API – Application Programming Interface, інтерфейс програмування застосунків; 
CRUD – Create, Read, Update, Delete, чотири базові операції для роботи з даними 
(створення, читання, оновлення, видалення); 
DTO – Data Transfer Object, об'єкт перенесення даних; шаблон проектування, 
що використовується для обміну даними між підсистемами; 
HTTP – HyperText Transfer Protocol, протокол передавання гіпертексту; 
H2 Database – Вбудована реляційна база даних, що працює в оперативній 
пам'яті (in-memory) і використовується для тестування та розробки; 
JPA – Jakarta Persistence API (раніше Java Persistence API), специфікація для 
відображення об'єктно-орієнтованих моделей Java у реляційні бази даних; 
JSON – JavaScript Object Notation, текстовий формат обміну даними, що 
використовується для взаємодії між клієнтом та сервером; 
JSR 380 – Специфікація Java (Bean Validation 2.0) для декларативної валідації 
даних за допомогою анотацій; 
Lombok – Бібліотека Java, призначена для автоматичної генерації шаблонного 
коду (геттерів, сеттерів, конструкторів) на етапі компіляції; 
Maven – Інструмент для автоматизації збірки проєктів, управління 
залежностями та життєвим циклом програмного забезпечення на платформе Java; 
MockMvc – Інструмент Spring Test для тестування контролерів шляхом 
симуляції HTTP-запитів без запуску реального веб-сервера вебзастосунку за 
допомогою стандартних методів HTTP. 
11 
ВСТУП 
Сучасний ринок електронної комерції стрімко розвивається, і сегмент дитячих 
товарів та іграшок є одним із найдинамічніших напрямів. Сучасні споживачі все 
частіше надають перевагу онлайн-покупкам завдяки зручності, економії часу, 
широкому асортименту та можливості оперативного пошуку потрібного товару. Для 
бізнесу створення власного спеціалізованого веб-сервісу – це необхідний крок для 
підвищення конкурентоспроможності, розширення клієнтської бази та автоматизації 
рутинних процесів продажу. Розробка власного програмного рішення дозволяє 
врахувати специфічні потреби ніші, гнучко управляти каталогом товарів, 
відстежувати замовлення та забезпечити зручну взаємодію між продавцем і 
покупцем. Саме тому тема розробки веб-сервісу для онлайн-продажу іграшок є 
актуальною та має практичну цінність. Вивченню процесів створення електронних 
магазинів присвячено значну кількість наукових і прикладних досліджень. У 
літературі розглядаються питання архітектури систем електронної комерції, 
зручності користувацького інтерфейсу, особливостей CMS і фреймворків для 
реалізації проєктів подібного типу. Для досягнення поставленої мети необхідно 
виконати такі завдання: 
− проаналізувати предметну область та оглянути існуючі платформи електронної 
комерції; 
− визначити функціональні та нефункціональні вимоги до веб-сервісу; 
− спроєктувати архітектуру застосунку та структуру бази даних для зберігання 
інформації про товари, категорії, користувачів і замовлення; 
− обґрунтувати вибір сучасного стека вебтехнологій для реалізації проєкту; 
− розробити серверну (API) та клієнтську частини інформаційної системи; 
− провести тестування розробленого веб-сервісу та перевірити його 
працездатність. 
Практичне значення одержаних результатів полягає у створенні 
функціонального програмного продукту, який може бути використаний як основа для 
реального інтернет-магазину іграшок з метою оптимізації процесів оформлення 
замовлень та управління асортиментом. 
12 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ОБҐРУНТУВАННЯ НЕОБХІДНОСТІ 
РОЗРОБКИ WEB-СЕРВІСУ "ToyWebService" 
1.1 Актуальність автоматизації процесів у сфері торгівлі іграшками 
Сучасна сфера роздрібної торгівлі дитячими товарами та іграшками 
характеризується високим рівнем конкуренції та стрімким переходом у цифровий 
простір. Зростання частки онлайн-покупок зумовлене зміною споживчих звичок: 
сучасні батьки прагнуть мінімізувати час на фізичний пошук і купівлю товарів, 
віддаючи перевагу зручним електронним каталогам з можливістю швидкого 
замовлення та доставки. У таких умовах традиційне (ручне) управління торговими 
процесами стає вкрай неефективним і стримує масштабування бізнесу. 
Відсутність автоматизації в роздрібній чи гуртовій торгівлі призводить до 
низки критичних проблем: збільшення кількості людських помилок при обліку 
товарних залишків, затримок в обробці замовлень, втрати інформації про клієнтів та 
нездатності швидко реагувати на зміни попиту. Крім того, важливою особливістю 
ринку іграшок є його яскраво виражена сезонність (наприклад, період зимових свят) 
та постійна прив'язка до індивідуальних подій (дні народження дітей). У періоди 
пікових навантажень бізнес, який не має автоматизованої системи, неминуче 
стикається з колапсом в обробці заявок та зниженням рівня лояльності покупців. 
Автоматизація процесів за допомогою спеціалізованого веб-сервісу дозволяє 
комплексно вирішити ці проблеми шляхом перенесення більшості рутинних операцій 
у цифрове середовище. Впровадження інформаційної системи забезпечує низку 
беззаперечних переваг: 
− безперебійність продажів: цілодобова доступність вітрини товарів для клієнтів, 
незалежно від графіка роботи менеджерів чи фізичних точок продажу. 
− актуальність даних: автоматична синхронізація інформації про наявність 
товару та ціни в режимі реального часу, що виключає ситуації із замовленням 
відсутніх на складі позицій. 
13 
− оптимізація ресурсів: суттєве зниження навантаження на персонал. Система 
здатна самостійно генерувати номери замовлень, розраховувати підсумкову 
вартість, враховувати знижки та зберігати історію взаємодії з клієнтом. 
− аналітика та прогнозування: можливість автоматичного збору статистики 
продажів для виявлення найбільш популярних категорій іграшок, що є основою 
для ефективного управління закупівлями та маркетингом. 
Таким чином, автоматизація процесів у сфері торгівлі іграшками сьогодні є не 
просто технологічним трендом, а базовою вимогою для забезпечення життєздатності 
та конкурентоспроможності підприємства. Створення власного, адаптованого під 
конкретні потреби веб-сервісу є економічно та технологічно обґрунтованим кроком. 
Це дозволяє підприємцям оптимізувати операційні витрати, підвищити швидкість 
обслуговування та надати клієнтам сучасний, інтуїтивно зрозумілий інструмент для 
покупок, що повністю підтверджує актуальність розробки даної кваліфікаційної 
роботи. 
1.2 Огляд бізнес-процесів та основні завдання веб-сервісу 
Для успішного проєктування та розробки веб-сервісу «ToyWebService» 
необхідно проаналізувати ключові бізнес-процеси, які супроводжують життєвий 
цикл продажу дитячих іграшок, та трансформувати їх у конкретні програмні 
завдання. Робота інтернет-магазину передбачає взаємодію двох основних категорій 
користувачів: покупців (клієнтів) та адміністраторів (менеджерів магазину). 
Базова модель функціонування магазину іграшок складається з наступних 
ключових бізнес-процесів: 
1. Управління товарним каталогом. Цей процес включає формування 
асортименту, категоризацію іграшок (наприклад, за віком, брендом, типом), 
додавання описів, фотографій та встановлення цін. Адміністратор повинен 
мати змогу оперативно оновлювати інформацію про номенклатуру. 
2. Навігація та пошук товарів клієнтом. Процес взаємодії покупця з 
вітриною. Враховуючи специфіку дитячих товарів, критично важливим є 
14 
наявність зручних фільтрів, які дозволяють швидко знайти іграшку за заданими 
критеріями (вік дитини, інтереси, ціновий діапазон). 
3. Оформлення та обробка замовлення. Ключовий етап електронної 
комерції, який охоплює додавання товару до віртуального кошика, введення 
контактних даних клієнта, вибір способу доставки/оплати та фіксацію 
замовлення в системі. Після цього статус замовлення змінюється в міру його 
виконання (нове, комплектується, відправлено, виконано). 
4. Управління запасами (складський облік). Процес автоматичного або 
напівавтоматичного коригування кількості доступних іграшок після кожного 
успішного оформлення замовлення, що запобігає продажу товарів, яких немає 
в наявності. 
Виходячи з аналізу наведених бізнес-процесів, можна сформулювати основні 
завдання, які повинен вирішувати розроблюваний веб-сервіс «ToyWebService»: 
1. Реалізація клієнтського інтерфейсу (Frontend): створення інтуїтивно 
зрозумілого, адаптивного дизайну, який коректно відображатиметься на різних 
пристроях (ПК, смартфони, планшети) та забезпечить позитивний 
користувацький досвід (UX/UI). 
2. Створення системи автентифікації та авторизації: розробка механізмів 
реєстрації та входу користувачів для розмежування прав доступу між 
звичайними покупцями та адміністраторами системи. 
3. Розробка модуля каталогу та кошика: програмна реалізація функціоналу 
перегляду списку іграшок, детальної сторінки товару, а також логіки додавання, 
видалення та підрахунку загальної вартості товарів у кошику. 
4. Створення панелі адміністратора (Back-office): реалізація захищеного 
розділу веб-сервісу для управління контентом (CRUD-операції: створення, 
читання, оновлення, видалення товарів та категорій) і відстеження статусів 
замовлень. 
5. Проєктування та інтеграція бази даних: розробка нормалізованої 
структури реляційної (або нереляційної) бази даних для надійного збереження 
інформації про користувачів, асортимент іграшок та історію транзакцій. 
15 
6. Виконання цих завдань дозволить створити повноцінну інформаційну 
систему, здатну автоматизувати рутинні операції інтернет-магазину та 
забезпечити зручну платформу для реалізації дитячих товарів. 
Висновки до розділу 1 
У першому розділі кваліфікаційної роботи було проведено детальний аналіз 
предметної області та обґрунтовано необхідність розробки спеціалізованого веб-
сервісу для онлайн-продажу дитячих іграшок. З'ясовано, що в умовах сучасного 
ринку електронної комерції автоматизація торгових процесів є критично важливою 
умовою для підвищення конкурентоспроможності бізнесу, оптимізації операційних 
витрат та забезпечення високого рівня обслуговування клієнтів. 
В ході дослідження було розглянуто ключові бізнес-процеси інтернет-
магазину, зокрема: управління товарним каталогом, процеси пошуку товарів 
покупцем, оформлення та обробку замовлень, а також основи управління 
складськими запасами. На базі цього аналізу було сформульовано головні завдання, 
які має вирішувати розроблювана інформаційна система «ToyWebService». 
Визначено, що проєкт повинен включати клієнтську частину із зручним інтерфейсом, 
систему автентифікації, функціонал кошика, захищену панель адміністратора та 
надійну базу даних. 
Таким чином, результати першого розділу формують чітке розуміння мети та 
масштабів проєкту. Визначені бізнес-вимоги та функціональні завдання стануть 
базою для подальшого проєктування веб-сервісу. Для обрання найкращих підходів до 
реалізації цих завдань необхідно дослідити досвід конкурентів та проаналізувати 
існуючі програмні рішення на ринку, що буде здійснено у наступному розділі. 
 
 
16 
2 ОГЛЯД ТА АНАЛІЗ ІСНУЮЧИХ РІШЕНЬ (АНАЛОГІВ) 
2.1 Класифікація систем електронної комерції та веб-сервісів 
Електронна комерція (e-commerce) є комплексною сферою, що охоплює 
різноманітні бізнес-моделі та технологічні рішення для здійснення торговельних 
операцій у мережі Інтернет. Для правильного позиціонування та вибору архітектури 
розроблюваного веб-сервісу «ToyWebService» необхідно провести класифікацію 
існуючих систем за ключовими критеріями. 
1. Класифікація за моделлю взаємодії суб'єктів (бізнес-моделлю) 
Залежно від того, хто є продавцем і хто покупцем, виділяють наступні основні 
категорії систем електронної комерції: 
− B2C (Business-to-Consumer – бізнес для споживача): Модель, за якої компанія 
продає товари чи послуги кінцевим фізичним особам. Це найпопулярніший 
формат для класичних інтернет-магазинів. Проєкт «ToyWebService» належить 
саме до цієї категорії, оскільки орієнтований на роздрібний продаж дитячих 
іграшок кінцевим покупцям (батькам). 
− B2B (Business-to-Business – бізнес для бізнесу): Торговельні відносини між 
компаніями (наприклад, оптові закупівлі іграшок у виробників або 
дистриб'юторів для подальшої реалізації). 
− C2C (Consumer-to-Consumer – споживач для споживача): Платформи, де фізичні 
особи продають товари іншим фізичним особам (наприклад, дошки оголошень, 
такі як OLX). 
− B2G / C2G (взаємодія з державою): Системи державних закупівель або сплати 
податків та послуг. 
2. Класифікація за масштабом та обсягом функціоналу 
За розміром та складністю торговельні майданчики поділяються на: 
− Лендінги (односторінкові сайти): Використовуються для продажу одного 
монотовару або невеликої лінійки товарів. Мають обмежений функціонал, 
орієнтований на швидку конверсію. 
17 
− Класичні інтернет-магазини: Веб-сервіси з повноцінним каталогом, фільтрами, 
кошиком, системою оформлення замовлень та особистим кабінетом. 
«ToyWebService» проєктується саме в цьому форматі. 
− Маркетплейси: Великі платформи, які надають інфраструктуру для багатьох 
незалежних продавців (наприклад, Rozetka, Prom.ua). 
3. Класифікація за способом технічної реалізації веб-сервісу 
З точки зору розробки та розгортання, сучасні e-commerce рішення можна 
поділити на три основні групи: 
− SaaS-платформи (Software as a Service): Хмарні рішення (наприклад, Shopify, 
Хорошоп, Wix), де користувач отримує готовий магазин за підпискою. 
Переваги: швидкий запуск, відсутність потреби в хостингу. Недоліки: 
обмежена гнучкість, неможливість глибокої зміни програмного коду, регулярні 
абонентські платежі. 
− Системи управління контентом (CMS / Коробкові рішення): Готові програмні 
продукти, такі як OpenCart, Magento або WordPress (з плагіном WooCommerce). 
Вони встановлюються на власний сервер і дозволяють керувати магазином 
через адмін-панель. Переваги: велика кількість готових модулів і шаблонів. 
Недоліки: архітектурна надмірність (забагато зайвого коду), вразливість до атак 
при використанні сторонніх плагінів, складність масштабування при великих 
навантаженнях. 
− Кастомні веб-сервіси (Custom Development): Розробка інформаційної системи 
«з нуля» з використанням сучасних мов програмування та фреймворків. 
Переваги: максимальна гнучкість, висока продуктивність, безпека, можливість 
реалізації унікальної бізнес-логіки та легкість масштабування архітектури в 
майбутньому. 
Резюме 
Аналіз наведених класифікацій показує, що для реалізації проєкту 
«ToyWebService» оптимальною є бізнес-модель B2C у форматі класичного інтернет-
магазину. З огляду на потребу в індивідуальному налаштуванні логіки, повному 
контролі над даними та можливості подальшого розширення системи, найбільш 
18 
доцільним підходом до технічної реалізації є кастомна розробка веб-сервісу із 
застосуванням сучасного технологічного стеку, що дозволить уникнути обмежень 
готових CMS та SaaS-платформ. 
2.2 Порівняльний аналіз популярних платформ (напр. "Будинок іграшок", 
"Антошка", Rozetka) 
Для формування обґрунтованих вимог до розроблюваного веб-сервісу 
«ToyWebService» доцільно провести конкурентний аналіз існуючих рішень на ринку 
України. Як об’єкти для порівняння обрано провідні платформи, що реалізують 
дитячі іграшки: вузькоспеціалізовані інтернет-магазини («Будинок іграшок», 
«Антошка») та мультикатегорійний маркетплейс (Rozetka). 
Аналіз проводився за такими ключовими критеріями: зручність 
користувацького інтерфейсу (UI/UX), система навігації та фільтрації, процес 
оформлення замовлення, а також рівень спеціалізації під цільову аудиторію. 
1. Інтернет-магазин «Будинок іграшок» (bi.ua)  
Це один із найбільших спеціалізованих ритейлерів іграшок в Україні. 
− Переваги: Платформа відрізняється глибокою спеціалізацією. Головною 
перевагою є продумана система фільтрації: товари можна шукати не лише за 
віком, статтю чи брендом, але й за «улюбленим героєм» (франшизою) або 
навичками, які розвиває іграшка. Дизайн емоційно орієнтований на дитячу 
тематику. 
− Недоліки: Перевантаженість інтерфейсу маркетинговими банерами та поп-
апами, що іноді уповільнює роботу сайту на мобільних пристроях. Складний 
процес авторизації для нових користувачів. 
19 
 
Рисунок 2.1 – Інтернет-магазин «Будинок іграшок» (bi.ua)  
2. Інтернет-магазин «Антошка» (antoshka.ua)  
Магазин охоплює ширший спектр дитячих товарів, включаючи харчування, 
одяг та меблі, де іграшки є лише однією з категорій. 
− Переваги: Зручність для батьків, які прагнуть закрити всі потреби дитини в 
одному замовленні. Добре структуроване меню категорій та інтеграція з 
офлайн-мережею (перевірка наявності в конкретному магазині). 
− Недоліки: Через надмірну кількість різнотипних товарів пошукова видача іноді 
видає нерелевантні результати (наприклад, при пошуку іграшки певного бренду 
можуть відображатися елементи одягу того ж бренду). Інтерфейс каталогу 
місцями виглядає застарілим. 
 
Рисунок 2.2 – Інтернет-магазин «Антошка» (antoshka.ua) 
20 
 
3. Маркетплейс Rozetka (rozetka.com.ua)  
Найбільший український маркетплейс, який працює за змішаною моделлю 
(продає власні товари та товари сторонніх продавців). 
− Переваги: Висока швидкість завантаження сторінок, технічна стабільність при 
величезних навантаженнях. Максимально спрощений і стандартизований 
процес оформлення замовлення (чекаут). Потужна система відгуків та 
рейтингів. 
− Недоліки: Відсутність фокусу на дитячій тематиці (відсутній емоційний 
дизайн). Оскільки товари завантажуються різними продавцями, описи та 
фотографії часто не стандартизовані, а якість контенту варіюється. Фільтри є 
базовими і не завжди враховують специфіку вибору саме іграшок. 
 
Рисунок 2.3 – Інтернет-магазин «Антошка» (antoshka.ua)  
Для систематизації отриманих даних результати порівняльного аналізу 
наведено у Таблиці 2.1. 
Таблиця 2.1 – Порівняльна характеристика платформ-аналогів 
Критерій Будинок іграшок Антошка Rozetka 
порівняння (bi.ua) (antoshka.ua) (маркетплейс) 
Високий  Середній  Низький 
Рівень спеціалізації 
(тільки іграшки) (всі дитячі товари) (універсальний) 
Деталізована  
Стандартна  
Система фільтрації (за героями, Базова  
(вік, бренд, тип) 
навичками, віком) 
21 
Критерій Будинок іграшок Антошка Rozetka 
порівняння (bi.ua) (antoshka.ua) (маркетплейс) 
(часто перевантажена 
зайвими 
параметрами) 
Середня  
Швидкодія та 
(велика кількість Середня Висока 
оптимізація 
скриптів) 
Висока  Низька  
Стандартизація 
(якісні описи та Висока (залежить від 
контенту 
фото) продавця) 
Швидке  
Оформлення 
Багатокрокове Багатокрокове (в один клік/на одній 
замовлення 
сторінці) 
 
Проведений огляд показує, що ідеальна система для продажу іграшок повинна 
поєднувати емоційний підхід та спеціалізовані фільтри вузьконішевих магазинів (як 
у «Будинку іграшок») із технічною швидкістю та лаконічним процесом оформлення 
замовлення великих платформ (як у Rozetka). У розроблюваному веб-сервісі 
«ToyWebService» планується врахувати ці аспекти: уникнути інформаційного 
перевантаження інтерфейсу, забезпечити швидкий пошук товарів за специфічними 
дитячими критеріями та оптимізувати процес додавання товару до кошика й 
оформлення покупки. 
2.3 Визначення переваг та особливостей розроблюваного сервісу 
На основі проведеного аналізу існуючих платформ електронної комерції було 
сформовано концепцію розроблюваного інформаційного веб-сервісу 
«ToyWebService». Головною ідеєю проєкту є створення легкої, швидкої та 
вузькоспеціалізованої платформи для продажу іграшок, яка позбавлена характерних 
недоліків масових рішень (перевантаженості інтерфейсу, архітектурної надмірності 
та складних процесів оформлення замовлення). 
Для досягнення поставленої мети веб-сервіс проєктується з урахуванням низки 
специфічних особливостей: 
22 
− Кастомна архітектура розробки (Custom Development): На відміну від 
використання готових "коробкових" CMS-систем (наприклад, WordPress або 
OpenCart), веб-сервіс створюється "з нуля" з використанням сучасного 
технологічного стека. Це дозволяє уникнути наявності зайвого коду (bloatware) 
та забезпечує повний контроль над бізнес-логікою застосунку. 
− Спеціалізована структура каталогу: Організація бази даних та інтерфейсу 
розроблена виключно під потреби реалізації дитячих іграшок. Це виключає 
проблему змішування результатів пошуку з іншими категоріями (одяг, 
харчування), як це часто трапляється на великих маркетплейсах. 
− Мінімалістичний користувацький інтерфейс (UI): Відсутність нав'язливих 
рекламних банерів та спливаючих вікон. Інтерфейс спроєктовано за принципом 
інтуїтивної зрозумілості, з акцентом безпосередньо на товар та швидкий доступ 
до кошика. 
Завдяки впровадженню описаних особливостей, розроблюваний сервіс 
«ToyWebService» матиме наступні беззаперечні переваги перед існуючими 
аналогами: 
1. Висока швидкодія та продуктивність: Оскільки система містить лише 
необхідний для продажу іграшок функціонал та не обтяжена сторонніми 
плагінами, швидкість завантаження сторінок та відгук сервера на запити 
користувачів будуть значно вищими. Це критично важливо для утримання 
клієнтів, особливо користувачів мобільних пристроїв. 
2. Оптимізований процес чекауту (Checkout): Процес оформлення 
замовлення скорочено до мінімально необхідної кількості кроків. Це дозволяє 
зменшити показник "покинутих кошиків" (Cart Abandonment Rate) та 
підвищити загальну конверсію інтернет-магазину. 
3. Ергономічна панель адміністратора (Back-office): Адміністративна 
частина системи розробляється з фокусом на зручність менеджера. Вона 
містить лише необхідні інструменти (CRUD-операції для товарів, категорій та 
управління замовленнями), що суттєво скорочує час на навчання персоналу та 
мінімізує ймовірність людської помилки під час управління контентом. 
23 
4. Високий рівень масштабованості: Модульна архітектура кастомного 
рішення дозволяє в майбутньому легко розширювати функціонал: наприклад, 
інтегрувати платіжні шлюзи (LiqPay, WayForPay), служби доставки (Нова 
Пошта) або CRM-системи без необхідності глобальної перебудови ядра сервісу. 
Таким чином, розроблюваний веб-сервіс «ToyWebService» є сучасним, 
продуктивним та гнучким програмним продуктом. Він не лише задовольняє потреби 
споживачів у зручному та швидкому пошуку дитячих іграшок, але й надає бізнесу 
надійний інструмент для автоматизації процесів торгівлі та подальшого 
масштабування. 
Висновки до розділу 2 
У другому розділі кваліфікаційної роботи було проведено детальний огляд та 
аналіз існуючих рішень на ринку електронної комерції з метою обґрунтування 
концепції розроблюваного проєкту. 
Під час дослідження здійснено класифікацію систем електронної комерції. 
Визначено, що для реалізації інформаційного веб-сервісу «ToyWebService» найбільш 
оптимальною є бізнес-модель B2C (Business-to-Consumer). З технічної точки зору 
обґрунтовано доцільність використання підходу кастомної розробки (Custom 
Development), що дозволить забезпечити високу продуктивність, гнучкість та 
масштабованість системи порівняно з використанням готових CMS-платформ чи 
SaaS-рішень. 
Проведений порівняльний аналіз провідних конкурентів у сегменті дитячих 
товарів («Будинок іграшок», «Антошка», маркетплейс Rozetka) виявив як їхні сильні 
сторони, так і суттєві недоліки. З'ясовано, що великі платформи часто страждають від 
перевантаженості інтерфейсу, ускладненого процесу оформлення замовлення або 
недостатньої спеціалізації саме на дитячих іграшках. 
На основі виявлених недоліків аналогів було сформовано перелік переваг та 
особливостей розроблюваного сервісу. Головними критеріями успішності проєкту 
«ToyWebService» визначено: мінімалістичний та інтуїтивно зрозумілий 
користувацький інтерфейс, оптимізований процес додавання товарів до кошика та 
24 
швидкий чекаут, а також наявність ергономічної панелі адміністратора для зручного 
управління контентом. 
Отримані результати аналізу конкурентів та визначена концепція проєкту 
формують міцну базу для наступного етапу роботи — переходу до безпосереднього 
проєктування інформаційної системи, формування конкретних вимог та 
моделювання архітектури веб-сервісу, що буде детально розглянуто в наступному 
розділі 
25 
3 ПРОЕКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ 
3.1 Постановка задачі та формування вимог до системи 
Метою даного етапу роботи є детальне формулювання технічних та 
функціональних завдань, які має вирішувати веб-сервіс «ToyWebService», а також 
визначення критеріїв якості, яким повинен відповідати кінцевий програмний продукт. 
Постановка задачі Основним завданням проєкту є розробка та впровадження 
цілісної інформаційної системи для автоматизації роздрібної торгівлі іграшками. 
Система повинна забезпечувати зручну взаємодію покупця з асортиментом товарів 
через вебінтерфейс та надавати адміністратору інструменти для ефективного 
управління контентом і замовленнями. 
На основі аналізу бізнес-процесів, проведеного в першому розділі, до веб-
сервісу висуваються наступні групи вимог: 
1. Вимоги до функціональності (Functional Requirements) Система повинна 
підтримувати роботу трьох основних ролей користувачів: Гість, Авторизований 
покупець та Адміністратор. 
Для Гостя та Покупця: 
− перегляд повного каталогу іграшок із можливістю пагінації та сортування; 
− перегляд детальної інформації про товар (назва, опис, ціна, наявність, 
зображення); 
− фільтрація товарів за категоріями (наприклад: конструктори, м’які іграшки, 
настільні ігри); 
− функціонал «Кошика»: додавання товарів, зміна кількості одиниць, видалення 
позицій; 
− реєстрація та автентифікація користувачів; 
− оформлення замовлення із заповненням контактних даних. 
26 
 
Рисунок 3.1 – перегляд повного каталогу іграшок 
Для Адміністратора (через захищену панель керування): 
− керування категоріями товарів (створення, редагування, видалення); 
− керування переліком іграшок (додавання нових позицій, завантаження 
зображень, актуалізація цін та описів); 
− перегляд та зміна статусів замовлень, отриманих від клієнтів; 
− керування базою користувачів. 
 
Рисунок 3.2 – панель адміністратора 
2. Вимоги до інтерфейсу та зручності (Usability Requirements) 
− Адаптивність: вебінтерфейс повинен коректно відображатися на десктопних 
моніторах, планшетах та смартфонах. 
− Інтуїтивність: навігація сайтом має бути зрозумілою для користувача без 
додаткових інструкцій. Шлях від вибору іграшки до завершення замовлення 
має містити мінімальну кількість кроків. 
27 
− Візуалізація: графічний контент (зображення іграшок) повинен бути 
пріоритетним у дизайні сторінок каталогу. 
− 3. Технічні та нефункціональні вимоги (Non-functional Requirements) 
− Продуктивність: час відгуку сервера на запити користувача не повинен 
перевищувати 1-2 секунди при середньому навантаженні. 
− Надійність та безпека: захист персональних даних користувачів та паролів 
(хешування). Обмеження доступу до адмін-панелі лише для авторизованих осіб 
із відповідними правами. 
− Масштабованість: архітектура системи повинна дозволяти легко додавати нові 
модулі (наприклад, модуль відгуків або онлайн-оплати) без глобальної 
переробки існуючого коду. 
− Цілісність даних: база даних повинна забезпечувати збереження зв’язків між 
товарами, категоріями та замовленнями навіть у разі видалення окремих 
об’єктів (використання м’якого видалення або каскадних правил). 
Формування цих вимог дозволяє перейти до наступного кроку — детального 
опису функціональних вимог та моделювання архітектури системи за допомогою 
діаграм (UML), що забезпечить точність програмної реалізації на етапі розробки. 
3.2 Опис функціональних та нефункціональних вимог  
На основі проведеного аналізу бізнес-процесів та постановки задачі, було 
сформовано детальний перелік вимог до веб-сервісу «ToyWebService». Вимоги 
поділяються на дві основні категорії: функціональні (визначають, що система 
повинна робити) та нефункціональні (визначають, як система повинна працювати). 
Функціональні вимоги описують взаємодію користувачів із системою та логіку 
обробки даних. Для наочності ці вимоги згруповані за ролями користувачів та 
представлені у Таблиці 3.1. 
 
 
 
 
28 
Таблиця 3.1 – Функціональні вимоги до веб-сервісу «ToyWebService» 
Ідентифікатор Категорія Опис вимоги 
Система повинна відображати повний каталог 
Користувач / 
FR-01 товарів із можливістю перегляду детальної 
Гість 
сторінки кожної іграшки. 
Користувач / Система має забезпечувати фільтрацію товарів за 
FR-02 
Гість категоріями та сортування за ціною. 
Користувач повинен мати можливість додавати 
Користувач / 
FR-03 товари до кошика, змінювати їх кількість та 
Гість 
видаляти їх. 
Користувач / Система повинна забезпечувати реєстрацію та 
FR-04 
Гість автентифікацію користувачів. 
Авторизований користувач повинен мати змогу 
FR-05 Покупець оформити замовлення, вказавши дані для 
доставки. 
Система повинна надавати інтерфейс для 
FR-06 Адміністратор додавання, редагування та видалення товарів та 
категорій (CRUD-операції). 
Адміністратор повинен мати можливість 
FR-07 Адміністратор переглядати список усіх замовлень та змінювати 
їхні статуси. 
Система має забезпечувати розмежування прав 
FR-08 Адміністратор доступу (доступ до адмін-панелі лише після 
перевірки ролі). 
 
Нефункціональні вимоги визначають атрибути якості системи, такі як 
продуктивність, безпека та зручність використання. Вони наведені у Таблиці 3.2. 
29 
 
Таблиця 3.2 – Нефункціональні вимоги до веб-сервісу «ToyWebService» 
Ідентифікатор Тип вимоги Опис вимоги 
Час відгуку сервера при запиті списку товарів не 
NFR-01 Продуктивність 
повинен перевищувати 1,5 секунди. 
Веб-сервіс повинен коректно працювати у 
NFR-02 Сумісність сучасних браузерах (Chrome, Firefox, Safari, Edge) 
та на мобільних пристроях. 
Паролі користувачів мають зберігатися у базі 
NFR-03 Безпека даних виключно у зашифрованому (хешованому) 
вигляді. 
Інтерфейс повинен мати адаптивний дизайн 
NFR-04 Зручність (UX) (Responsive Web Design) для зручної роботи на 
смартфонах. 
Система повинна коректно обробляти помилки 
(наприклад, введення невірних даних) та 
NFR-05 Надійність 
виводити інформативні повідомлення 
користувачу. 
Архітектура коду повинна бути модульною, що 
NFR-06 Масштабованість дозволить додавати нові платіжні системи або 
методи доставки без зміни ядра системи. 
         
Деталізація цих вимог дозволяє мінімізувати ризики на етапі розробки та 
забезпечує відповідність кінцевого продукту очікуванням замовника і користувачів. 
Наступним кроком у проєктуванні системи є візуальне моделювання процесів 
взаємодії користувачів із сервісом. 
30 
3.3 Моделювання архітектури системи 
Проєктування архітектури веб-сервісу «ToyWebService» базується на об’єктно-
орієнтованому підході з використанням мови моделювання UML. Це дозволяє 
візуалізувати взаємодію користувачів із системою та визначити внутрішню структуру 
програмних компонентів. 
3.3.1. Діаграма прецедентів (Use Case Diagram) 
Діаграма прецедентів дозволяє визначити межі системи та основні функції, які 
доступні кожній ролі користувача. Для веб-сервісу виділено три основні актори: 
Гість, Покупець та Адміністратор. 
Основні сценарії взаємодії: 
− Гість: може переглядати каталог іграшок, використовувати пошук та 
фільтрацію, а також проходити процедуру реєстрації. 
− Покупець (авторизований користувач): крім функцій гостя, має доступ до 
керування кошиком (додавання/видалення товарів) та процесу оформлення 
замовлення. 
− Адміністратор: має повний доступ до керування контентом. Сюди відносяться 
прецеденти «Додати товар», «Редагувати категорію», «Видалити товар», а 
також «Перегляд замовлень» та «Зміна статусу замовлення». 
 
31 
Рисунок 3.1 – Діаграма прецедентів. 
3.3.2. Діаграма класів (Class Diagram) 
Діаграма класів відображає статичну структуру системи, визначаючи основні 
сутності (об'єкти), їх атрибути та зв'язки між ними. Для проєкту «ToyWebService» 
ключовими класами є: 
1. User (Користувач): містить дані про користувачів (id, login, 
password_hash, email, role). 
2. Product (Товар/Іграшка): містить характеристики іграшки (id, name, 
description, price, stock_quantity, category_id). 
3. Category (Категорія): призначений для групування товарів (id, title, 
description). Зв'язок із класом Product — «один-до-багатьох» (одна категорія 
може містити багато товарів). 
4. Order (Замовлення): зберігає інформацію про купівлю (id, user_id, 
total_price, status, created_at). 
5. OrderItem (Елемент замовлення): допоміжний клас для зв'язку замовлень 
із конкретними товарами, що дозволяє зберігати кількість куплених одиниць та 
ціну на момент покупки. 
 
Рисунок 3.2 – Діаграма класів. 
32 
3.3.3. Діаграма послідовності (Sequence Diagram) 
Для деталізації динаміки системи розглянемо процес «Оформлення 
замовлення». Ця діаграма демонструє послідовність обміну повідомленнями між 
об’єктами: 
1. Користувач ініціює запит на оформлення замовлення через інтерфейс 
(Frontend). 
2. Frontend передає дані контролеру (Backend). 
3. Контролер перевіряє наявність товарів через модель Product. 
4. Після підтвердження створюється запис у таблиці Order та відповідні 
записи в OrderItem. 
5. Система повертає користувачу підтвердження про успішне оформлення. 
Моделювання архітектури дозволяє чітко розмежувати зони відповідальності 
різних модулів системи та слугує фундаментом для вибору технологічного стеку і 
безпосередньої програмної реалізації веб-сервісу. 
Висновки до розділу 3 
У третьому розділі кваліфікаційної роботи було здійснено комплексне 
проєктування інформаційної системи веб-сервісу «ToyWebService». 
На основі попереднього аналізу бізнес-процесів було сформульовано чітку 
постановку задачі та розроблено детальний перелік функціональних і 
нефункціональних вимог. Визначено, що система повинна забезпечувати зручний 
пошук товарів, керування віртуальним кошиком та швидке оформлення замовлень 
для покупців, а також надавати адміністратору безпечний інструментарій для 
управління контентом (CRUD-операції). Серед критичних нефункціональних вимог 
виділено необхідність адаптивного дизайну, високу швидкість відгуку сервера та 
безпечне зберігання даних користувачів. 
Для візуалізації логіки роботи та архітектури застосунку було використано 
об'єктно-орієнтований підхід та інструментарій UML. Побудована діаграма 
прецедентів дозволила чітко розмежувати ролі користувачів системи (Гість, 
Авторизований покупець, Адміністратор) та визначити доступні їм сценарії 
33 
використання. Діаграма класів, у свою чергу, визначила статичну структуру 
майбутньої бази даних та взаємозв'язки між ключовими сутностями проєкту 
(Користувач, Товар, Категорія, Замовлення, Елемент замовлення). 
Проведене проєктування формує надійний концептуальний фундамент для 
безпосередньої розробки програмного продукту, оскільки дозволяє заздалегідь 
продумати логіку та мінімізувати архітектурні помилки. Наступним логічним кроком 
є обґрунтування та вибір оптимального технологічного стека (мов програмування, 
фреймворків та СУБД) для ефективної реалізації спроєктованої моделі, що буде 
детально розглянуто в четвертому розділі. 
34 
4 ОБҐРУНТУВАННЯ ВИБОРУ ТЕХНОЛОГІЧНОГО СТЕКУ 
4.1 Аналіз та вибір мови програмування та фреймворків 
(Backend/Frontend) 
Вибір технологічного стека є одним із найважливіших етапів проєктування 
інформаційної системи, оскільки від нього залежить продуктивність, 
масштабованість, безпека та швидкість розробки майбутнього веб-сервісу. Оскільки 
проєкт «ToyWebService» має класичну клієнт-серверну архітектуру, вибір технологій 
доцільно розділити на серверну (Backend) та клієнтську (Frontend) частини. 
1. Вибір технологій для серверної частини (Backend) 
Серверна частина відповідає за бізнес-логіку, обробку запитів від користувачів, 
взаємодію з базою даних та забезпечення безпеки. Під час вибору мови 
програмування розглядалися наступні популярні альтернативи: 
− Java (фреймворк Spring Boot): Забезпечує високу надійність та ідеально 
підходить для великих корпоративних (Enterprise) систем. Однак для розробки 
нішевого інтернет-магазину цей інструмент може бути занадто громіздким та 
вимагати більше часу на налаштування інфраструктури. 
− Python (фреймворки Django / FastAPI): Відрізняється високою швидкістю 
розробки та чистим синтаксисом. Django пропонує багато готових рішень «з 
коробки», але має дещо монолітну архітектуру, що може обмежувати гнучкість 
при побудові сучасних REST API. 
− JavaScript / Node.js (фреймворк Express.js): Середовище виконання Node.js 
базується на рушії V8 і використовує подієво-орієнтовану, асинхронну 
(неблокуючу) модель вводу/виводу. Це робить його надзвичайно ефективним 
для веб-сервісів із великою кількістю одночасних запитів (наприклад, під час 
пошуку товарів або роботи з кошиком). 
Обґрунтування вибору: Для реалізації серверної частини було обрано 
платформу Node.js у поєднанні з мінімалістичним вебфреймворком Express.js. Цей 
вибір зумовлений високою продуктивністю при роботі з мережевими запитами, 
35 
величезною екосистемою готових модулів (npm) та можливістю легко масштабувати 
архітектуру (створювати мікросервіси) в майбутньому. 
2. Вибір технологій для клієнтської частини (Frontend) 
Клієнтська частина відповідає за користувацький інтерфейс (UI) та взаємодію 
покупця з системою. Враховуючи вимоги до інтерактивності (швидка фільтрація 
товарів, динамічне оновлення кошика), використання класичного підходу з повним 
перезавантаженням сторінок (HTML/CSS) є неефективним. Тому розглядалися 
сучасні JavaScript-бібліотеки та фреймворки для створення Single Page Applications 
(SPA): 
− Angular: Потужний фреймворк від Google із жорсткою структурою 
(використовує TypeScript). Добре підходить для складних корпоративних 
систем, але має високий поріг входження та є надлишковим для магазину 
іграшок. 
− Vue.js: Легкий та прогресивний фреймворк, який швидко набирає популярність 
завдяки простоті інтеграції, проте має меншу екосистему порівняно з лідерами 
ринку. 
− React.js: Бібліотека від компанії Meta для створення користувацьких 
інтерфейсів на основі компонентного підходу. Головною перевагою React є 
використання віртуального DOM (Virtual DOM), що дозволяє миттєво 
оновлювати лише ті частини сторінки, які змінилися (наприклад, ціну в 
кошику), без перезавантаження всього документа. 
Обґрунтування вибору: Для розробки клієнтського інтерфейсу було обрано 
React.js. Компонентна архітектура дозволяє створити набір незалежних елементів 
(картка іграшки, кнопка покупки, форма реєстрації) та повторно використовувати їх 
на різних сторінках сервісу, що суттєво пришвидшує розробку та спрощує підтримку 
коду. 
Використання JavaScript (або його типізованої надбудови TypeScript) як єдиної 
мови програмування для Backend та Frontend частин дозволяє застосувати парадигму 
Fullstack-розробки. Це оптимізує процес створення веб-сервісу «ToyWebService», 
36 
зменшує кількість потенційних помилок при передачі даних між сервером і клієнтом 
та спрощує серіалізацію даних у форматі JSON. 
4.2 Обґрунтування вибору системи управління базами даних (СУБД) 
Організація зберігання даних є критично важливою складовою будь-якої 
системи електронної комерції. База даних веб-сервісу «ToyWebService» повинна 
забезпечувати надійне зберігання інформації про користувачів, каталог іграшок, 
історію замовлень та поточні залишки на складі. З огляду на це, до системи 
управління базами даних (СУБД) висуваються високі вимоги щодо цілісності даних, 
швидкодії та підтримки транзакцій. 
Під час вибору СУБД розглядалися два основні підходи: нереляційні (NoSQL) 
та реляційні (SQL) бази даних. 
1. Нереляційні СУБД (на прикладі MongoDB) NoSQL рішення чудово підходять 
для зберігання неструктурованих даних та забезпечують високу швидкість розробки 
завдяки гнучкій схемі (schema-less). Однак для інтернет-магазину цей підхід є 
неоптимальним. Процес оформлення замовлення вимагає виконання кількох 
пов'язаних дій (наприклад, списання коштів, зменшення кількості товару на складі та 
створення запису про замовлення). Відсутність суворої підтримки ACID-транзакцій 
(Atomicity, Consistency, Isolation, Durability) у базових конфігураціях багатьох NoSQL 
систем створює ризик втрати цілісності даних, що є неприпустимим для електронної 
комерції. 
2. Реляційні СУБД (MySQL та PostgreSQL) Реляційні бази даних зберігають 
інформацію у вигляді взаємопов'язаних таблиць із чітко заданою структурою. Вони 
гарантують консистентність даних та підтримують складні транзакції. Серед 
найпопулярніших рішень з відкритим вихідним кодом (Open Source) виділяються 
MySQL та PostgreSQL: 
− MySQL: Одна з найпопулярніших СУБД у світі веброзробки. Вона 
відрізняється високою швидкістю виконання простих запитів на читання (що 
корисно для відображення каталогу товарів). Проте MySQL має певні 
37 
обмеження при роботі зі складними аналітичними запитами та менш суворо 
ставиться до перевірки типів даних "з коробки". 
− PostgreSQL: Потужна об'єктно-реляційна система, яка вважається стандартом 
для складних комерційних проєктів. Вона забезпечує повну відповідність 
принципам ACID, має сувору типізацію та потужні механізми забезпечення 
цілісності даних (через зовнішні ключі та обмеження). Крім того, PostgreSQL 
має відмінну вбудовану підтримку формату JSON (тип JSONB), що дозволяє 
зберігати динамічні атрибути товарів (наприклад, специфічні характеристики 
різних іграшок), поєднуючи переваги SQL та NoSQL підходів. 
Обґрунтування вибору 
Для реалізації веб-сервісу «ToyWebService» було обрано СУБД PostgreSQL. 
Цей вибір ґрунтується на специфіці предметної області: система продажу 
іграшок має чітко виражену реляційну структуру (Користувач -> Замовлення -> 
Елемент замовлення -> Товар -> Категорія). PostgreSQL гарантує, що жодне 
замовлення не буде збережено з помилками, а складські залишки завжди 
відображатимуться коректно завдяки надійному механізму транзакцій. Крім того, 
підтримка JSONB дозволить у майбутньому гнучко розширювати характеристики 
іграшок без необхідності постійної зміни схеми бази даних. Використання 
PostgreSQL забезпечує системі високу надійність, безпеку та готовність до 
масштабування при збільшенні обсягів продажів. 
4.3 Огляд допоміжних засобів розробки та розгортання 
Для забезпечення високої якості програмного коду, зручності тестування та 
ефективного розгортання веб-сервісу «ToyWebService» у робочому середовищі, 
окрім основних мов програмування та СУБД, необхідно використовувати набір 
допоміжних інструментів. Сучасний процес розробки (Software Development Life 
Cycle) вимагає автоматизації рутинних задач та стандартизації середовища. 
1. Система контролю версій (VCS) та хостинг коду 
− Git: Розподілена система керування версіями, яка є галузевим стандартом. Вона 
дозволяє фіксувати історію змін у коді, створювати окремі гілки (branches) для 
38 
розробки нових функцій (наприклад, кошика або панелі адміністратора) без 
ризику пошкодити основну, робочу версію програми. 
− GitHub / GitLab: Хмарна платформа для віддаленого хостингу репозиторіїв Git. 
Використання GitHub у проєкті забезпечує надійне резервне копіювання 
вихідного коду, спрощує синхронізацію між різними пристроями та створює 
основу для налаштування базових процесів безперервної інтеграції та доставки 
(CI/CD) у майбутньому. 
2. Інструменти для тестування API. Оскільки архітектура проєкту передбачає 
розділення на серверну (Backend) та клієнтську (Frontend) частини, які взаємодіють 
через REST API, критично важливо мати інструмент для ізольованого тестування 
серверних запитів. 
− Postman (або Insomnia): Потужний інструмент для створення, виконання та 
збереження HTTP-запитів. Він дозволяє тестувати роботу серверних маршрутів 
(routes), перевіряти коректність відповідей від бази даних PostgreSQL та 
імітувати дії користувача (наприклад, передачу токенів авторизації) ще до того, 
як буде повністю готовий графічний інтерфейс застосунку. 
3. Середовище контейнеризації 
− Docker: Платформа для розробки, доставки та запуску програмного 
забезпечення в ізольованих контейнерах. Використання Docker вирішує 
класичну проблему несумісності середовищ («на локальному комп'ютері 
працює, а на сервері – ні»). Контейнеризація дозволяє запакувати Backend, 
Frontend та СУБД разом із усіма їхніми залежностями та конфігураційними 
файлами. Це суттєво спрощує процес розгортання (деплою) веб-сервісу на 
будь-якому хмарному хостингу, оскільки середовище виконання стає 
передбачуваним, незалежним від операційної системи сервера та 
стандартизованим. 
4. Інтегроване середовище розробки (IDE) 
− Visual Studio Code (VS Code): Легкий, але потужний редактор вихідного коду. 
Він обраний завдяки відмінній підтримці екосистеми вебтехнологій, 
вбудованому терміналу, зручній інтеграції з Git та величезній кількості 
39 
розширень (наприклад, інструментів для форматування коду Prettier, ESLint), 
що допомагає дотримуватися єдиного стандарту та стилю написання коду 
(Clean Code). 
Висновки до розділу 4 
У четвертому розділі було здійснено обґрунтований вибір технологічного стека 
для реалізації інформаційної системи «ToyWebService». Визначено, що найбільш 
оптимальним рішенням для побудови сучасного, швидкого та масштабованого 
інтернет-магазину є використання зв'язки популярних вебтехнологій: надійної 
серверної платформи (наприклад, Node.js) для обробки бізнес-логіки та компонентно-
орієнтованої бібліотеки (React) для розробки реактивного клієнтського інтерфейсу. 
Для забезпечення цілісності, безпечного зберігання даних користувачів та 
підтримки транзакцій під час оформлення замовлень обрано потужну реляційну 
систему управління базами даних PostgreSQL. 
Крім того, сформовано набір необхідних допоміжних інструментів розробки. 
Використання системи контролю версій Git забезпечить надійне управління версіями 
коду, Postman дозволить проводити глибоке тестування API, а середовище 
контейнеризації Docker гарантуватиме безпроблемне розгортання проєкту на сервері. 
Обраний технологічний інструментарій повністю відповідає сформованим у 
попередніх розділах функціональним та нефункціональним вимогам, що дозволяє 
впевнено перейти до етапу безпосередньої програмної реалізації веб-сервісу. 
40 
5 ОЦІНКА ВИКОРИСТАНИХ ЗАСОБІВ ТА НАПРЯМИ РОЗВИТКУ 
5.1 Структура програмного проєкту 
Програмна реалізація веб-сервісу «ToyWebService» базується на компонентно-
орієнтованій архітектурі Single Page Application (SPA). Для забезпечення високої 
якості коду, легкості підтримки та масштабованості проєкту була обрана чітка 
модульна структура каталогів. 
Основним принципом організації вихідного коду є поділ на рівень 
представлення (UI-компоненти) та рівень логіки (кастомні хуки). Вся розробка 
зосереджена в директорії src, яка має наступну ієрархію: 
1. /components — основний каталог, що містить незалежні React-
компоненти. Кожен компонент відповідає за окрему частину інтерфейсу 
(наприклад, NavBar.tsx, HeroSection.tsx, FeaturedProducts.tsx). Такий підхід 
дозволяє реалізувати принцип повторного використання коду (reusability). 
2. /hooks — каталог для кастомних React-хуків. Тут зосереджена логіка, що 
не стосується безпосередньо відмальовування інтерфейсу. Прикладом є хук 
useScrollAnimation.tsx, який використовує Intersection Observer API для 
керування анімаціями при прокрутці сторінки. 
3. App.tsx — кореневий компонент застосунку, який виконує роль 
головного оркестратора. Він збирає всі окремі компоненти в єдину структуру 
сторінки. 
4. main.tsx (або index.tsx) — точка входу в програму, де відбувається 
ініціалізація React-застосунку та його монтування в DOM-дерево сторінки 
index.html. 
5. index.css — файл глобальних стилів, де підключено фреймворк Tailwind 
CSS та визначено кастомні дизайн-токени (колірна палітра «charcoal», «gold», 
«cream»). 
Для конфігурації середовища розробки та збірки проєкту використовуються 
наступні системні файли: 
41 
− vite.config.ts — конфігурація інструменту збірки Vite, що забезпечує швидке 
гаряче перезавантаження (HMR) та оптимізацію продуктивності. 
− tsconfig.json — налаштування компілятора TypeScript, де активовано суворий 
режим перевірки типів (strict: true), що гарантує стабільність роботи програми. 
− package.json — маніфест проєкту, що містить перелік усіх залежностей (React, 
Tailwind, Lucide React) та скрипти для запуску та збірки застосунку. 
Така структура проєкту дозволяє дотримуватися принципу Separation of 
Concerns (розділення відповідальності): стилі описуються за допомогою утилітарних 
класів Tailwind безпосередньо в компонентах, логіка виноситься в хуки, а компоненти 
залишаються максимально декларативними та легкими для читання. 
5.2 Реалізація користувацького інтерфейсу 
Реалізація користувацького інтерфейсу (UI) веб-сервісу «ToyWebService» 
базується на сучасних стандартах розробки Single Page Application (SPA), де основна 
увага приділяється швидкодії, інтерактивності та адаптивності. Інтерфейс 
побудований за допомогою бібліотеки React 18.2.0, що дозволяє створювати 
динамічні елементи без повного перезавантаження сторінки. 
1. Компонентний підхід та декларативність Інтерфейс розбитий на систему 
незалежних компонентів, що забезпечує чітку структуру та повторне використання 
коду. Основними функціональними блоками інтерфейсу є: 
− NavBar: головна навігаційна панель із підтримкою станів прокрутки; 
− HeroSection: презентаційний блок із ключовим закликом до дії; 
− CategoryNav: панель швидкої фільтрації товарів за категоріями; 
− FeaturedProducts: сітка карток популярних іграшок; 
− RecentlySoldTicker: динамічна стрічка останніх продажів для підвищення 
соціальної довіри. 
2. Стилізація за допомогою Tailwind CSS Для візуального оформлення 
використано фреймворк Tailwind CSS 4.2.2. Замість написання громіздких зовнішніх 
CSS-файлів застосовано підхід утилітарних класів, що дозволило значно 
пришвидшити розробку та забезпечити консистентність дизайну. 
42 
Дизайн системи базується на унікальній палітрі «Luxury & Playful», яка включає 
такі дизайн-токени: 
− Charcoal (вугільний): основний колір фону для створення преміального 
вигляду; 
− Gold (золотий): акцентний колір для кнопок, іконок та важливих елементів 
(використовується також ефект gold-shimmer-text); 
− Cream (кремовий): колір для текстового контенту, що забезпечує високу 
читабельність на темному фоні. 
3. Адаптивність та кросбраузерність Інтерфейс реалізовано за принципом 
Mobile First. Використання гнучких сіток (Grid) та флекс-контейнерів (Flexbox) у 
Tailwind CSS дозволяє елементам автоматично підлаштовуватися під розміри екранів 
смартфонів, таблетів та десктопів. Наприклад, сітка товарів у компоненті 
FeaturedProducts змінює кількість колонок залежно від ширини вікна перегляду. 
 
Рисунок 5.1 – дизайн в figma 
 
4. Графічні елементи та анімація Для візуалізації функціоналу використано 
бібліотеку іконок Lucide React, яка забезпечує легкість та чіткість графіки (іконки 
43 
кошика, пошуку, користувача). Окрему увагу приділено «живому» відгуку 
інтерфейсу: 
− Hover-ефекти: інтерактивні зміни стану кнопок та карток товарів при наведенні 
курсору; 
− Scroll Animations: плавна поява елементів при прокрутці сторінки за допомогою 
кастомного хука useScrollAnimation, що покращує користувацький досвід (UX). 
Таким чином, реалізований інтерфейс не лише відповідає естетичним вимогам 
до сучасного інтернет-магазину, але й технічно оптимізований для швидкого 
рендерингу та зручної взаємодії з користувачем на будь-якому пристрої. 
5.3 Опис логіки роботи основних модулів 
Логіка функціонування веб-сервісу «ToyWebService» побудована на взаємодії 
двох основних рівнів: презентаційного (компоненти) та функціонального (кастомні 
хуки). Основна ідея реалізації полягає в тому, щоб відокремити візуальну частину від 
складної логіки обробки подій браузера. 
5.3.1 Модуль керування анімаціями (useScrollAnimation)  
Ключовим функціональним модулем системи є кастомний хук 
useScrollAnimation.tsx. Його основне завдання — відстежувати появу елементів у зоні 
видимості користувача (viewport) та ініціювати відповідні CSS-анімації. 
Логіка роботи модуля базується на використанні Intersection Observer API: 
1. Хук ініціалізує стан isVisible за допомогою useState. 
2. Створюється об’єкт IntersectionObserver, який налаштований на 
відстеження конкретного DOM-елемента через ref. 
3. Параметр threshold (поріг чутливості) визначає, який відсоток елемента 
має бути видимим для спрацювання тригера. 
4. Коли елемент перетинає межу видимості, хук змінює стан isVisible на 
true. 
5. Компонент отримує це значення та динамічно додає класи Tailwind 
(наприклад, opacity-100 translate-y-0), що запускає плавний перехід. 
44 
5.3.2. Модуль презентаційної логіки (Component Layer)  
Кожен UI-компонент у системі працює як незалежна функціональна одиниця. 
Логіка взаємодії компонентів реалізована за принципом односпрямованого потоку 
даних (Unidirectional Data Flow). 
− NavBar: містить логіку відстеження прокрутки вікна (window.scrollY). Якщо 
користувач прокручує сторінку нижче певного порогу (наприклад, 20 пікселів), 
компонент змінює свій вигляд: додає розмиття фону (backdrop-blur-md) та 
змінює колір рамки, що покращує читабельність контенту на фоні інших блоків. 
− RecentlySoldTicker: реалізує логіку «нескінченної» стрічки новин. Це 
досягається за допомогою CSS-анімації scrollTicker, яка циклічно переміщує 
список останніх продажів по горизонталі, створюючи ефект динамічного 
оновлення даних у реальному часі. 
− FeaturedProducts: виконує роль ітератора даних. Модуль приймає масив об'єктів 
(іграшок) та за допомогою методу .map() динамічно генерує картки товарів. Це 
забезпечує легку заміну статичних даних на дані з API у майбутньому. 
5.3.3. Модуль інтеграції стилів та станів  
Важливою частиною логіки є поєднання станів React із утилітарними класами 
Tailwind CSS. Замість прямої маніпуляції стилями через JavaScript-об’єкти, система 
використовує умовний рендеринг класів: 
TypeScript 
// Приклад логіки перемикання стилів 
<div className={`transition-all duration-700 ${isVisible ? 'opacity-100' : 'opacity-
0'}`}> 
Такий підхід забезпечує високу продуктивність, оскільки за перерахунок 
координат та анімацію відповідає графічний рушій браузера (GPU), а React лише 
керує додаванням потрібних маркерів у DOM. 
Розроблена логіка модулів дозволяє системі працювати плавно навіть при 
великій кількості графічних елементів, забезпечуючи при цьому чистоту коду та 
можливість його легкого тестування. 
45 
Висновки до розділу 5 
У п'ятому розділі було здійснено безпосередню програмну реалізацію 
клієнтської частини інформаційної системи «ToyWebService». На основі 
спроєктованої раніше архітектури та обраного технологічного стека створено 
функціональний прототип вебзастосунку формату Single Page Application (SPA). 
Під час розробки було застосовано сучасні підходи до організації коду. 
Використання бібліотеки React у поєднанні зі строгою типізацією TypeScript 
дозволило побудувати надійну компонентно-орієнтовану архітектуру. Розділення 
проєкту на рівень представлення (UI-компоненти) та рівень бізнес-логіки (кастомні 
хуки) забезпечило високу модульність системи, що значно полегшує її подальшу 
підтримку та масштабування. 
Реалізація користувацького інтерфейсу виконана за принципом Mobile First із 
використанням фреймворку Tailwind CSS. Це дозволило швидко створити 
адаптивний, кросбраузерний та естетично привабливий дизайн, який відповідає 
сучасним вимогам електронної комерції. Інтеграція кастомних анімацій (за 
допомогою хука useScrollAnimation та Intersection Observer API) суттєво покращила 
користувацький досвід (UX), зробивши взаємодію з каталогом товарів плавною та 
інтерактивною. 
Аналіз розроблених модулів підтвердив правильність обраних архітектурних 
рішень: система ефективно керує станами компонентів за допомогою 
односпрямованого потоку даних (Unidirectional Data Flow) та мінімізує зайві 
перемальовування DOM-дерева. 
Таким чином, розроблена клієнтська частина веб-сервісу повністю відповідає 
поставленим нефункціональним вимогам щодо швидкодії та зручності інтерфейсу, і 
формує надійну основу для подальшої інтеграції із серверною частиною (API) бази 
даних. Наступним етапом життєвого циклу проєкту є проведення комплексного 
тестування розробленого програмного забезпечення для виявлення та усунення 
можливих недоліків. 
46 
ВИСНОВКИ 
У кваліфікаційній роботі бакалавра було вирішено актуальне завдання 
проєктування та розробки сучасної інформаційної системи — веб-сервісу 
електронної комерції «ToyWebService», призначеного для зручного пошуку та купівлі 
іграшок. 
У ході виконання роботи було досягнуто поставленої мети та отримано такі 
основні результати: 
1. Проведено системний аналіз предметної області. Досліджено специфіку 
функціонування інтернет-магазинів, сформовано перелік функціональних та 
нефункціональних вимог до системи. Чітко визначено цільові ролі користувачів 
(Гість, Авторизований покупець, Адміністратор) та розроблено сценарії їхньої 
взаємодії з платформою. 
2. Спроєктовано архітектуру інформаційної системи. За допомогою методології 
об’єктно-орієнтованого проєктування та інструментарію UML побудовано 
концептуальні моделі веб-сервісу. Розроблена діаграма прецедентів дозволила 
візуалізувати функціональні межі системи, а діаграма класів стала надійною 
основою для організації внутрішньої структури даних та проєктування 
реляційної бази. 
3. Обґрунтовано вибір технологічного стека. На основі порівняльного аналізу 
сучасних інструментів веброзробки визначено оптимальні рішення для 
проєкту. Для забезпечення масштабованості та високої швидкодії обрано 
бібліотеку React у зв'язці зі строго типізованою мовою TypeScript, інструмент 
збірки Vite та фреймворк Tailwind CSS. 
4. Здійснено програмну реалізацію клієнтської частини (Frontend). Розроблено 
функціональний прототип веб-сервісу за архітектурою Single Page Application 
(SPA). Створено систему незалежних адаптивних компонентів за принципом 
Mobile First. Реалізовано складні механізми взаємодії з користувачем, зокрема, 
плавні CSS-анімації на основі відстеження прокрутки сторінки за допомогою 
кастомного хука useScrollAnimation та Intersection Observer API. 
47 
5. Проаналізовано технічний борг та визначено вектори розвитку. Розроблена 
архітектура дозволяє легко масштабувати систему. Визначено, що основними 
напрямками для подальшого вдосконалення проєкту є: розробка повноцінної 
серверної частини (Backend), заміна статичних (захардкоджених) даних на 
динамічні через інтеграцію з REST API, налаштування політик безпеки 
контенту (CSP) та впровадження системи автоматизованого тестування 
(наприклад, Vitest та React Testing Library). 
Таким чином, розроблений веб-сервіс «ToyWebService» відповідає сучасним 
стандартам веброзробки, забезпечує високий рівень користувацького досвіду (UX/UI) 
та має надійний архітектурний фундамент для подальшого впровадження у 
комерційне середовище. 
  
48 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ  
1. React – A JavaScript library for building user interfaces. React. URL: 
https://react.dev (дата звернення: 12.03.2026). 
2. Node.js — Run JavaScript Everywhere. Node.js. URL: https://nodejs.org (дата 
звернення: 12.03.2026). 
3. Express - Node.js web application framework. Express. URL: https://expressjs.com 
(дата звернення: 15.03.2026). 
4. Tailwind CSS - Rapidly build modern websites without ever leaving your HTML. 
Tailwind CSS. URL: https://tailwindcss.com (дата звернення: 18.03.2026). 
5. Vite | Next Generation Frontend Tooling. Vite. URL: https://vite.dev (дата 
звернення: 12.03.2026). 
6. npm – Build amazing things. npm. URL: https://www.npmjs.com (дата звернення: 
15.03.2026) 
7. Axios – Promise based HTTP client for the browser and node.js. Axios. URL: 
https://axios-http.com (дата звернення: 02.04.2026). 
8. REST API Design Tutorial. REST API Tutorial. URL: https://restfulapi.net (дата 
звернення: 20.03.2026). 
9. JSON Schema: A Media Type for Describing JSON Data. IETF. URL: https://json-
schema.org (дата звернення: 20.03.2026). 
10. PostgreSQL: The World's Most Advanced Open Source Relational Database. 
PostgreSQL. URL: https://www.postgresql.org (дата звернення: 20.03.2026). 
11. OpenCV: introduction. OpenCV documentation index. URL: 
https://docs.opencv.org/3.4/d1/dfb/intro.html (дата звернення: 09.05.2026). 
12. Sequelize | The Node.js ORM for PostgreSQL, MySQL, SQLite and Microsoft SQL 
Server. Sequelize. URL: https://sequelize.org (дата звернення: 22.03.2026). 
13. Jest · Delightful JavaScript Testing. Jest. URL: Jest · �� Delightful JavaScript 
Testing (дата звернення: 12.04.2026). 
49 
ДОДАТОК А 
 
 
        Затверджую               
Зав. кафедри КНСА, 
______________ Юрій ТРИУС 
«____»____________2026 р.                                                                                                                                                                              
 
 
 
 
КАБІНЕТ КОРИСТУВАЧА ТА МОДУЛЬ УПРАВЛІННЯ ЗАМОВЛЕННЯМИ 
WEB-ЗАСТОСУНКУ «VIRTUAL STAGING HOME» 
Специфікація  
482.ЧДТУ. 62287-01 
 
Листів 2 
 
 
 
Розробник                          ____________________                 Владислав БИЧЕНКО 
 
Керівник                             ____________________                Петро ДЯЧЕНКО 
 
Черкаси – 2026  
50 
482.ЧДТУ. 62287-01 
Позначення Найменування Примітка 
   
   
 Документація  
   
   
482.ЧДТУ. 62287-01    12 01 Лістинг коду програми  
482.ЧДТУ. 62287-01    91 01 Публікація по темі  
кваліфікаційної роботи 
бакалавра 
   
   
   
   
   
   
   
   
   
   
   
   
   
   
51 
ДОДАТОК Б 
 
 
 
 
 
КАБІНЕТ КОРИСТУВАЧА ТА МОДУЛЬ УПРАВЛІННЯ ЗАМОВЛЕННЯМИ 
WEB-ЗАСТОСУНКУ «VIRTUAL STAGING HOME» 
 
 
Лістинг коду програми 
482.ЧДТУ. 62279-01 12 01 
 
Листів 13 
 
 
 
 
 
 
Розробник    _____________            Владислав БИЧЕНКО 
 
 
 
Черкаси – 2026 
 
52 
import { X, Minus, Plus, Trash2, ShoppingBag } from 'lucide-react'; 
import { Link } from 'react-router-dom'; 
import { useCartStore } from '../store'; 
 
export function CartDrawer() { 
  const { items, isOpen, closeCart, updateQuantity, removeItem, getTotal } = 
useCartStore(); 
 
  if (!isOpen) return null; 
 
  return ( 
    <div className="fixed inset-0 z-50"> 
      <div className="absolute inset-0 bg-black/50" onClick={closeCart} /> 
      <div className="absolute right-0 top-0 h-full w-full max-w-md bg-charcoal-800 
animate-slide-in-right"> 
        <div className="flex flex-col h-full"> 
          <div className="flex items-center justify-between p-6 border-b border-charcoal-
700"> 
            <h2 className="text-xl font-semibold flex items-center gap-2"> 
              <ShoppingBag size={20} /> 
              Your Cart ({items.length}) 
            </h2> 
            <button onClick={closeCart} className="text-cream-400 hover:text-white"> 
              <X size={24} /> 
            </button> 
          </div> 
 
          <div className="flex-1 overflow-auto p-6"> 
            {items.length === 0 ? ( 
              <div className="text-center text-cream-400 py-12"> 
53 
                <ShoppingBag size={48} className="mx-auto mb-4 opacity-50" /> 
                <p>Your cart is empty</p> 
                <Link to="/catalog" onClick={closeCart} className="text-toy-primary 
hover:underline mt-2 block"> 
                  Start Shopping 
                </Link> 
              </div> 
            ) : ( 
              <div className="space-y-4"> 
                {items.map(item => ( 
                  <div key={item.productId} className="flex gap-4 bg-charcoal-700/50 p-4 
rounded-xl"> 
                    <img src={item.image} alt={item.name} className="w-20 h-20 object-cover 
rounded-lg" /> 
                    <div className="flex-1"> 
                      <h3 className="font-medium text-sm mb-1">{item.name}</h3> 
                      <p className="text-toy-accent font-
semibold">${item.price.toFixed(2)}</p> 
                      <div className="flex items-center gap-2 mt-2"> 
                        <button 
                          onClick={() => updateQuantity(item.productId, item.quantity - 1)} 
                          className="p-1 bg-charcoal-600 rounded hover:bg-charcoal-500" 
                        > 
                          <Minus size={14} /> 
                        </button> 
                        <span className="text-sm w-8 text-center">{item.quantity}</span> 
                        <button 
                          onClick={() => updateQuantity(item.productId, item.quantity + 1)} 
                          className="p-1 bg-charcoal-600 rounded hover:bg-charcoal-500" 
                        > 
54 
                          <Plus size={14} /> 
                        </button> 
                        <button 
                          onClick={() => removeItem(item.productId)} 
                          className="ml-auto text-red-400 hover:text-red-300" 
                        > 
                          <Trash2 size={16} /> 
                        </button> 
                      </div> 
                    </div> 
                  </div> 
                ))} 
              </div> 
            )} 
          </div> 
 
          {items.length > 0 && ( 
            <div className="p-6 border-t border-charcoal-700"> 
              <div className="flex items-center justify-between mb-4"> 
                <span className="text-cream-400">Total</span> 
                <span className="text-2xl font-bold text-toy-
accent">${getTotal().toFixed(2)}</span> 
              </div> 
              <Link 
                to="/checkout" 
                onClick={closeCart} 
                className="block w-full bg-toy-primary hover:bg-toy-primary-dark text-white 
py-3 rounded-xl font-semibold text-center transition-all" 
              > 
                Proceed to Checkout 
55 
              </Link> 
            </div> 
          )} 
        </div> 
      </div> 
    </div> 
  ); 
} 
import React from 'react' 
import { useScrollAnimation } from '../hooks/useScrollAnimation' 
export function CategoryNav() { 
  const { ref, isVisible } = useScrollAnimation() 
  const categories = [ 
    'Vintage Figures', 
    'Sealed Grails', 
    'Limited Editions', 
    'Japanese Imports', 
    'Prototype & Pre-Production', 
  ] 
  return ( 
    <section className="bg-charcoal-900 py-16 border-b border-white/5"> 
      <div className="max-w-7xl mx-auto px-6"> 
        <div 
          ref={ref} 
          className={`flex flex-wrap justify-center gap-x-12 gap-y-6 transition-all duration-
1000 ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 translate-y-10'}`} 
        > 
          {categories.map((category, index) => ( 
            <a 
              key={index} 
56 
              href="#" 
              className="group relative text-xl md:text-2xl font-serif text-cream-300 
hover:text-gold-400 transition-colors duration-300" 
              style={{ 
                transitionDelay: `${index * 100}ms`, 
              }} 
            > 
              {category} 
              <span className="absolute -bottom-2 left-0 w-full h-[1px] bg-gold-500 
transform scale-x-0 group-hover:scale-x-100 transition-transform duration-500 origin-left 
ease-out"></span> 
            </a> 
          ))} 
        </div> 
      </div> 
    </section> 
  ) 
} 
import React from 'react' 
import { useScrollAnimation } from '../hooks/useScrollAnimation' 
import { Heart } from 'lucide-react' 
interface Product { 
  id: number 
  name: string 
  series: string 
  year: string 
  price: string 
  image: string 
  condition: string 
} 
57 
const products: Product[] = [ 
  { 
    id: 1, 
    name: 'Optimus Prime G1', 
    series: 'Transformers Generation 1', 
    year: '1984', 
    price: '$8,200', 
    condition: 'AFA 85', 
    image: 
      'https://images.unsplash.com/photo-1636572481914-
a07d3673bd36?q=80&w=1000&auto=format&fit=crop', 
  }, 
  { 
    id: 2, 
    name: 'USS Flagg Aircraft Carrier', 
    series: 'G.I. Joe', 
    year: '1985', 
    price: '$4,500', 
    condition: 'Complete in Box', 
    image: 
      'https://images.unsplash.com/photo-1532103861939-
270836c2455f?q=80&w=1000&auto=format&fit=crop', 
  }, 
  { 
    id: 3, 
    name: 'Skeletor Panthor Set', 
    series: 'Masters of the Universe', 
    year: '1983', 
    price: '$2,800', 
    condition: 'Mint on Card', 
58 
    image: 
      'https://images.unsplash.com/photo-1596461404969-
9ae70f2830c1?q=80&w=1000&auto=format&fit=crop', 
  }, 
  { 
    id: 4, 
    name: 'Technodrome Playset', 
    series: 'TMNT', 
    year: '1990', 
    price: '$3,200', 
    condition: 'Sealed', 
    image: 
      'https://images.unsplash.com/photo-1601153211050-
61a27458dd21?q=80&w=1000&auto=format&fit=crop', 
  }, 
  { 
    id: 5, 
    name: 'Darth Vader TIE Fighter', 
    series: 'Star Wars', 
    year: '1978', 
    price: '$1,900', 
    condition: 'AFA 80', 
    image: 
      'https://images.unsplash.com/photo-1472457897821-
70d3819a0e24?q=80&w=1000&auto=format&fit=crop', 
  }, 
  { 
    id: 6, 
    name: 'Voltron Lion Force', 
    series: 'Voltron', 
59 
    year: '1984', 
    price: '$5,600', 
    condition: 'Die-cast / Mint', 
    image: 
      'https://images.unsplash.com/photo-1618336753974-
aae8e04506aa?q=80&w=1000&auto=format&fit=crop', 
  }, 
] 
export function FeaturedProducts() { 
  const { ref, isVisible } = useScrollAnimation() 
  return ( 
    <section className="py-24 bg-charcoal-950"> 
      <div className="max-w-7xl mx-auto px-6"> 
        <div className="flex justify-between items-end mb-16"> 
          <div> 
            <h2 className="text-3xl md:text-4xl font-serif text-cream-100 mb-2"> 
              Curated Collection 
            </h2> 
            <p className="text-cream-400 font-light"> 
              Rare finds available for immediate acquisition 
            </p> 
          </div> 
          <a 
            href="#" 
            className="hidden md:block text-gold-500 hover:text-gold-300 transition-colors 
text-sm uppercase tracking-widest font-medium" 
          > 
            View All Inventory 
          </a> 
        </div> 
60 
 
        <div 
          ref={ref} 
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" 
        > 
          {products.map((product, index) => ( 
            <div 
              key={product.id} 
              className={`group relative bg-charcoal-800 border border-white/5 hover:border-
gold-500/30 transition-all duration-500 hover:-translate-y-2 hover:shadow-
[0_10px_40px_-10px_rgba(0,0,0,0.5)] ${isVisible ? 'opacity-100 translate-y-0' : 'opacity-0 
translate-y-10'}`} 
              style={{ 
                transitionDelay: `${index * 100}ms`, 
              }} 
            > 
              {/* Image Container */} 
              <div className="relative aspect-[4/3] overflow-hidden bg-charcoal-900"> 
                <div className="absolute inset-0 bg-gradient-to-t from-charcoal-800 to-
transparent opacity-60 z-10"></div> 
                <img 
                  src={product.image} 
                  alt={product.name} 
                  className="w-full h-full object-cover transform group-hover:scale-110 
transition-transform duration-700 opacity-80 group-hover:opacity-100" 
                /> 
 
                {/* Overlay Actions */} 
                <div className="absolute top-4 right-4 z-20 opacity-0 group-hover:opacity-100 
transition-opacity duration-300"> 
61 
                  <button className="p-2 bg-charcoal-900/80 backdrop-blur text-cream-100 
hover:text-gold-500 rounded-full border border-white/10 hover:border-gold-500/50 
transition-colors"> 
                    <Heart className="w-5 h-5" /> 
                  </button> 
                </div> 
 
                <div className="absolute top-4 left-4 z-20"> 
                  <span className="px-3 py-1 bg-gold-500/90 text-charcoal-950 text-xs font-
bold uppercase tracking-wider"> 
                    {product.condition} 
                  </span> 
                </div> 
              </div> 
 
              {/* Content */} 
              <div className="p-6 relative"> 
                <div className="absolute -top-10 left-6 z-20"> 
                  <span className="text-4xl font-serif text-cream-100 text-shadow-gold drop-
shadow-lg"> 
                    {product.price} 
                  </span> 
                </div> 
 
                <div className="mt-4 space-y-2"> 
                  <div className="flex justify-between items-start"> 
                    <div> 
                      <h3 className="text-xl font-serif text-cream-100 group-hover:text-gold-
300 transition-colors"> 
                        {product.name} 
62 
                      </h3> 
                      <p className="text-cream-400 text-sm"> 
                        {product.series} • {product.year} 
                      </p> 
                    </div> 
                  </div> 
 
                  <div className="pt-4 mt-4 border-t border-white/5 flex justify-between items-
center opacity-0 group-hover:opacity-100 transition-opacity duration-300 transform 
translate-y-2 group-hover:translate-y-0"> 
                    <span className="text-xs text-cream-400 uppercase tracking-wider"> 
                      Available Now 
                    </span> 
                    <span className="text-gold-500 text-sm font-medium cursor-pointer 
hover:underline"> 
                      View Details 
                    </span> 
                  </div> 
                </div> 
              </div> 
            </div> 
          ))} 
        </div> 
 
        <div className="mt-12 text-center md:hidden"> 
          <a 
            href="#" 
            className="inline-block px-8 py-3 border border-gold-500/30 text-gold-400 
uppercase tracking-widest text-sm font-medium" 
          > 
63 
            View All Inventory 
          </a> 
        </div> 
      </div> 
    </section> 
  ) 
}  
64 
ДОДАТОК В 
 
 
 
 
 
КАБІНЕТ КОРИСТУВАЧА ТА МОДУЛЬ УПРАВЛІННЯ ЗАМОВЛЕННЯМИ 
WEB-ЗАСТОСУНКУ «VIRTUAL STAGING HOME» 
 
 
Публікація по темі кваліфікаційної роботи бакалавра 
482.ЧДТУ. 62279-01 91 01 
 
Листів 3 
 
 
 
 
 
 
Розробник    _____________  Владислав БИЧЕНКО 
 
 
 
Черкаси – 2026  
65 
РОЗРОБКА КАБІНЕТУ КОРИСТУВАЧА ТА МОДУЛЯ УПРАВЛІННЯ 
ЗАМОВЛЕННЯМИ WEB-ЗАСТОСУНКУ «VIRTUAL STAGING HOME» 
Биченко В.В. (студент ФІТІС), Дяченко П.В., к.т.н., доц. 
Черкаський державний технологічний університет 
 
У сучасному світі електронна комерція є одним із найдинамічніших напрямів 
розвитку інформаційних технологій. Онлайн-магазини дозволяють значно спростити 
процес купівлі товарів, розширити аудиторію клієнтів та забезпечити зручний доступ 
до продукції незалежно від місця перебування користувача. 
Актуальність даної роботи полягає у зростанні попиту на колекційні іграшки, 
такі як фігурки, лімітовані серії та тематичні набори. Колекціонування стає 
популярним хобі серед різних вікових категорій, що зумовлює необхідність 
створення зручного та функціонального вебресурсу для продажу таких товарів. 
Метою роботи є розробка сучасного вебсайту інтернет-магазину колекційних 
іграшок із зручним інтерфейсом, широким функціоналом та привабливим дизайном. 
Для досягнення поставленої мети було визначено такі завдання: 
- проаналізувати предметну область та існуючі аналоги; 
- визначити основні функціональні вимоги до сайту; 
- розробити структуру вебресурсу; 
- створити дизайн користувацького інтерфейсу; 
- реалізувати основний функціонал інтернет-магазину; 
- протестувати працездатність системи. 
Об’єктом дослідження є процес організації онлайн-продажу колекційних 
іграшок. 
Предметом дослідження є методи та засоби розробки вебсайтів інтернет-магазинів. 
У процесі виконання роботи використано сучасні вебтехнології, що 
забезпечують адаптивність, швидкість роботи та зручність використання сайту. 
Результатом роботи є створений вебсайт інтернет-магазину, який дозволяє 
переглядати каталог товарів, здійснювати пошук, додавати товари до кошика та 
оформлювати замовлення. 
66 
Практичне значення отриманих результатів полягає у можливості використання 
розробленого сайту для реальної комерційної діяльності або як основи для 
подальшого розвитку та вдосконалення.
ChSTU repository

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