Інформаційний сайт магазину з продажу автомобільних шин та дисків

Хаменушко, Дмитро Михайлович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/9690
Full metadata record
DC Field	Value	Language
dc.contributor.advisor	Оксамитна, Любов Павлівна	-
dc.contributor.author	Хаменушко, Дмитро Михайлович	-
dc.date.accessioned	2026-06-22T13:52:53Z	-
dc.date.available	2026-06-22T13:52:53Z	-
dc.date.issued	2026-06-10	-
dc.identifier.uri	https://er.chdtu.edu.ua/handle/ChSTU/9690	-
dc.description.abstract	В умовах стрімкого розвитку електронної комерції та цифровізації бізнес-процесів особливої актуальності набуває створення сучасних інформаційних сайтів для автоматизації діяльності підприємств. Сфера продажу автомобільних шин та дисків характеризується значною кількістю номенклатури, різноманіттям параметрів продукції (розміри, сезонність, виробник, типи дисків), а також необхідністю швидкого доступу до актуальної інформації для клієнтів. Основною проблемою предметної області є відсутність зручних, функціональних та інтегрованих веб-рішень, які забезпечують ефективну взаємодію між продавцем і покупцем, автоматизацію обліку товарів та зручний пошук продукції. Метою кваліфікаційної роботи бакалавра є розроблення інформаційного сайту магазину з продажу автомобільних шин та дисків, який забезпечує зручний доступ до каталогу товарів, можливість фільтрації продукції за різними параметрами, а також підтримку основних бізнес-процесів онлайн-продажу. Практичне значення отриманих результатів полягає у створенні функціонального інформаційного сайту, який дозволяє автоматизувати процес продажу шин та дисків, покращити доступність інформації для клієнтів та підвищити ефективність роботи магазину.	uk_UA
dc.language.iso	uk	uk_UA
dc.subject	ІНТЕРНЕТ-МАГАЗИН	uk_UA
dc.subject	ВЕБ-САЙТ	uk_UA
dc.subject	АВТОМОБІЛЬНІ ШИНИ	uk_UA
dc.subject	ДИСКИ	uk_UA
dc.subject	КАТАЛОГ ТОВАРІВ	uk_UA
dc.subject	ФІЛЬТРАЦІЯ	uk_UA
dc.subject	ВЕБ-РОЗРОБКА	uk_UA
dc.subject	ІНФОРМАЦІЙНА СИСТЕМА.	uk_UA
dc.title	Інформаційний сайт магазину з продажу автомобільних шин та дисків	uk_UA
dc.type	Bachelor Thesis	uk_UA
Appears in Collections:	122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування)
Files in This Item:
File	Description	Size	Format
Пояснювальна записка_Хаменушко Дмитро_КН-2201_2025-2026.pdf Restricted Access		2.06 MB	Adobe PDF	View/Open Request a copy
Show simple item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
 
Факультет інформаційних технологій і систем 
 
Кафедра комп’ютерних наук та системного аналізу 
 
 
 
 
Пояснювальна записка 
до кваліфікаційної роботи 
 бакалавра  
(освітньо-кваліфікаційний рівень) 
на тему: «Інформаційний сайт магазину з продажу автомобільних шин та 
дисків» 
 
 
 
Виконав: студент 4 курсу, групи КН-2201   
    
Спеціальності 122   «Комп’ютерні науки»  
                                                             (шифр і назва спеціальності) 
 
Освітня програма  «Комп’ютерні науки та  
(назва освітньої програми) 
прикладне програмування»  
 
 Дмитро ХАМЕНУШКО 
 
Керівник   Любов ОКСАМИТНА    
(ім’я та прізвище) 
 
Рецензент                            Сергій СТАСЬ   
                                                         (ім’я та прізвище) 
 
 
 
 
 
 
 
 
 
 
 
 
Черкаси 2026 року 
2 
 
Бланк завдання на кваліфікаційну роботу бакалавра студенту 
 
Черкаський державний технологічний університет 
Факультет Інформаційних технологій і систем 
Кафедра Комп’ютерних наук та системного аналізу 
Освітньо-кваліфікаційний рівень Бакалавр 
Спеціальність 122  – Комп’ютерні науки 
Освітня програма Комп’ютерні науки та прикладне програмування 
 
 
ЗАТВЕРДЖУЮ 
Завідувач кафедри КНСА  
_______________ Юрій ТРИУС 
«____» _____________ 2026 р. 
 
   
ЗАВДАННЯ 
на кваліфікаційну роботу бакалавра студенту 
Хаменушку Дмитру Михайловичу 
   (прізвище, ім‘я, по батькові) 
1. Тема роботи        Інформаційний сайт магазину з продажу автомобільних шин та дисків 
 
Керівник роботи Оксамитна Л.П., к.т.н., доцент 
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
затверджені наказом університету від « 12 » березня 2026 р. №56/03-03.  
2. Строк подання студентом роботи « 08 » червня 2026 року. 
3. Вихідні дані до роботи: 
Практичні навички роботи з інформаційними ресурсами. Робота з базами даних. 
Звіт з виробничої практики. Звіт з переддипломної практики. 
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити): 
Вступ    
4.1. Аналіз предметної області та обґрунтування вимог до інформаційного сайту магазину   
з продажу автомобільних шин та дисків.  
4.2. Методи та засоби проєктування інформаційного сайту магазину з продажу    
автомобільних шин та дисків.  
4.3. Розробка, реалізація та тестування інформаційного сайту магазину    
автомобільних шин та дисків. 
Висновки.    
5. Перелік додатків (з точним зазначенням назв додатків): 
5.1. Додаток А. Специфікація 482. ЧДТУ. 62255-01.    
5.2. Додаток Б. Текст програми.    
5.3. Додаток В. Інструкція користувача.    
5.4. Додаток Г. Структура бази даних    
5.5.  Презентація у вигляді 25 слайдів.    
    
 
3 
 
6. Консультанти розділів роботи 
 
Прізвище, ініціали та Підпис, дата 
Розділ посада 
консультанта завдання видав завдання прийняв 
    
    
 
7. Дата видачі завдання 12.01.2026 р. 
 
 
КАЛЕНДАРНИЙ ПЛАН 
№ з/п Назва етапів кваліфікаційної роботи бакалавра Строк виконання 
етапів роботи Примітка 
1 Видача завдання на кваліфікаційну роботу 
бакалавра. 12.01.2026 Виконано 
2 Аналіз літературних джерел, об’єкту та предмету 
дослідження. до 08.02.2026 Виконано 
3 Написання теоретичного розділу кваліфікаційної 
роботи бакалавра. до 23.03.2026 Виконано 
4 Написання аналітичного розділу (аналіз об’єкту 
й предмету дослідження). до 06.04.2026 Виконано 
5 Написання практичних розділів й висновків по 
роботі. до 15.05.2026 Виконано 
6 Передзахист кваліфікаційної роботи бакалавра 
на засіданні кафедри КНСА. 20.05.2026 Виконано 
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2026 Виконано 
8 Захист кваліфікаційної роботи бакалавра. 10.06.2026 Виконано 
    
    
 
Студент   Дмитро ХАМЕНУШКО 
(підпис) 
 
 
Керівник роботи   Любов ОКСАМИТНА 
(підпис) 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
4 
 
РЕФЕРАТ 
Кваліфікаційна робота бакалавра містить: 64 с., 26 рис., 3 таблиці, 15 
використаних джерел, 4 додатки. 
Актуальність теми. В умовах стрімкого розвитку електронної комерції та 
цифровізації бізнес-процесів особливої актуальності набуває створення сучасних 
інформаційних сайтів для автоматизації діяльності підприємств. Сфера продажу 
автомобільних шин та дисків характеризується значною кількістю номенклатури, 
різноманіттям параметрів продукції (розміри, сезонність, виробник, типи дисків), а 
також необхідністю швидкого доступу до актуальної інформації для клієнтів. 
Основною проблемою предметної області є відсутність зручних, функціональних та 
інтегрованих веб-рішень, які забезпечують ефективну взаємодію між продавцем і 
покупцем, автоматизацію обліку товарів та зручний пошук продукції. 
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є 
розроблення інформаційного сайту магазину з продажу автомобільних шин та дисків, 
який забезпечує зручний доступ до каталогу товарів, можливість фільтрації продукції 
за різними параметрами, а також підтримку основних бізнес-процесів онлайн-
продажу. 
Завдання кваліфікаційної роботи бакалавра: 
− провести аналіз предметної області онлайн-продажу автомобільних шин та 
дисків; 
− дослідити існуючі веб-рішення та технології розробки інтернет-магазинів; 
− обґрунтувати вибір архітектури інформаційного сайту; 
− розробити структуру бази даних для зберігання інформації про товари; 
− реалізувати функціонал каталогу продукції з можливістю фільтрації та 
пошуку; 
− створити інтерфейс користувача для взаємодії з системою; 
− провести тестування розробленого веб-орієнтованого інформаційного сайту. 
Об’єкт дослідження: операційні процеси веб-сайтів для електронної комерції. 
Предмет дослідження: методи, алгоритми та програмні засоби розробки 
5 
 
інформаційного сайту для продажу автомобільних шин та дисків. 
Методи дослідження. У роботі використано методи системного аналізу для 
дослідження предметної області продажу автомобільних шин та дисків, методи 
проєктування інформаційних систем для розробки структури веб-застосунку, а також 
сучасні підходи до створення клієнт-серверних систем. Для реалізації програмного 
продукту застосовано методи веб-розробки з використанням мов програмування 
HTML, CSS, JavaScript та PHP. Також використано методи проєктування баз даних 
для організації ефективного зберігання інформації. 
Практичне значення отриманих результатів полягає у створенні 
функціонального інформаційного сайту, який дозволяє автоматизувати процес 
продажу шин та дисків, покращити доступність інформації для клієнтів та підвищити 
ефективність роботи магазину. 
Ключові слова: ІНТЕРНЕТ-МАГАЗИН, ВЕБ-САЙТ, АВТОМОБІЛЬНІ 
ШИНИ, ДИСКИ, КАТАЛОГ ТОВАРІВ, ФІЛЬТРАЦІЯ, БАЗА ДАНИХ, ВЕБ-
РОЗРОБКА, ІНФОРМАЦІЙНА СИСТЕМА. 
ABSTRACT 
The bachelor’s qualification thesis consists of: 64 pages, 26 illustrations, 3 tables, 
15 references, 4 attachments. 
Relevance of the topic. In the context of rapid development of e-commerce and 
digitalization of business processes, the creation of modern information systems for 
automation of enterprise activities becomes especially relevant. The field of sales of 
automobile tires and wheels is characterized by a large assortment, a variety of product 
parameters (sizes, seasonality, manufacturer, types of wheels), as well as the need for quick 
access to up-to-date information for customers. The main problem of the subject area is the 
lack of convenient, functional, and integrated web solutions that ensure effective interaction 
between seller and buyer, automation of product accounting, and convenient product search. 
Purpose and objectives of the research. The purpose of the bachelor’s qualification 
work is to develop an information website for a store selling automobile tires and wheels, 
which provides convenient access to the product catalog, the ability to filter products by 
various parameters, and support for the main business processes of online sales. 
6 
 
Objectives of the bachelor’s qualification work: 
− to analyze the subject area of online sales of automobile tires and wheels; 
− to study existing web solutions and technologies for developing online stores; 
− to justify the choice of the information system architecture; 
− to design the database structure for storing product information; 
− to implement the functionality of the product catalog with filtering and search 
capabilities; 
− to create a user interface for interaction with the system; 
− to test the developed web application.  
Object of research: e-commerce website operational processes. 
Subject of the research: methods, algorithms, and software tools for developing an 
information website for selling automobile tires and wheels. 
Research Methods. The work uses systems analysis methods to study the subject 
area of sales of automobile tires and wheels, information systems design methods to develop 
the structure of a web application, as well as modern approaches to creating client-server 
systems. Web development methods using the programming languages HTML, CSS, 
JavaScript and PHP were used to implement the software product. Database design methods 
were also used to organize effective information storage. 
Practical significance of the results obtained lies in the creation of a functional 
information website that allows automating the process of selling tires and wheels, 
improving the availability of information for customers, and increasing the efficiency of the 
store. 
Keywords: ONLINE STORE, WEBSITE, AUTOMOBILE TIRES, WHEELS, 
PRODUCT CATALOG, FILTERING, DATABASE, WEB DEVELOPMENT, 
INFORMATION SYSTEM. 
 
 
 
 
 
7 
 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ  9 
ВСТУП………………………………………………………………………………. 10 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ОБҐРУНТУВАННЯ ВИМОГ ДО  
ІНФОРМАЦІЙНОГО САЙТУ МАГАЗИНУ З ПРОДАЖУ  
АВТОМОБІЛЬНИХ ШИН ТА ДИСКІВ………………………...……………… 13 
 1.1 Опис педметної області …………………………………………...……….. 13 
 1.2 Аналіз існуючих аналогів веб-орієнтованих сайтів з продажу  
автомобільних шин та дисків……………………………………………… 14 
1.2.1 Аналіз сервісу «Rozetka»...…………………………………………...  15 
1.2.2 Аналіз сервісу «Shina.ua»……………………………………………. 15 
1.2.3 Аналіз сервісу «Infoshina»…………………………………………… 16 
1.2.4 Аналіз сервісу «Rezina.cc»…………………………………………… 17 
1.2.5 Аналіз сервісу «Autoshini»…………………………………………… 18 
 1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та  
постановка завдання  ……………………………………………………… 18 
 Висновки до розділу 1…………………………………………………………... 21 
2 МЕТОДИ ТА ЗАСОБИ ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОГО САЙТУ  
МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ ШИН ТА ДИСКІВ ……….. 22 
 2.1 Вибір та обґрунтування методів вирішення проблеми…………………... 22 
 2.2 Вибір та обґрунтування засобів вирішення проблеми…………………… 26 
 2.3 Опис алгоритмів для ключових процесів обробки  
даних...………………………………………………………………………. 28 
 Висновки до розділу 2…………………………………………………….……... 32 
3 РОЗРОБКА, РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО  
САЙТУ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ ШИН ТА ДИСКІВ.. 34 
 3.1 Вибір технологій та засобів розробки…………………………………….. 34 
 3.2 Реалізація клієнтської частини……………………………………………. 34 
 3.3 Реалізація серверної частини……………………………………………… 35 
8 
 
 3.4 Реалізація функціоналу кабінету користувача…………………………… 35 
 3.5 Реалізація модуля управління замовленнями……………………………. 36 
 3.6 Тестування інформаційного сайту магазину з продажу автомобільних  
шин та дисків ……………………………………………………………….  37 
 Висновки до розділу 3…………………………………………………………... 42 
ВИСНОВКИ………...……………………………………………...………………... 44 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ………………...………………................. 46 
ДОДАТОК А. Специфікація 482. ЧДТУ. 62255-01……………….......................... 48 
ДОДАТОК Б. Текст програми………………...………………................................. 50 
ДОДАТОК В. Інструкція користувача………………...……………….................... 55 
ДОДАТОК Г. Структура бази даних………………...………………...................... 63 
  
  
9 
 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 
ПЗ – програмне забезпечення; 
API – прикладний програмний інтерфейс; 
UI – інтерфейс користувача; 
UX – користувацький досвід; 
HTTP – протокол передачі гіпертексту; 
REST API – архітектурний стиль взаємодії клієнт-сервер; 
JSON – формат обміну даними; 
SSR – серверний рендеринг; 
CSR – клієнтський рендеринг; 
Next.js – фреймворк для розробки веб-застосунків на React; 
React – бібліотека для побудови інтерфейсів користувача; 
Node.js – середовище виконання JavaScript на сервері; 
БД – база даних; 
СКБД – система керування базами даних; 
ORM – об'єктно-реляційне відображення; 
CRUD – базові операції над даними (створення, читання, оновлення, видалення); 
JWT – JSON Web Token для автентифікації користувачів; 
Nova Poshta API – сервіс доставки для інтеграції оформлення замовлень; 
ETL – процес витягнення, трансформації та завантаження даних; 
thread pool – пул потоків; 
cache – кешування даних для пришвидшення роботи системи; 
middleware – проміжне програмне забезпечення для обробки запитів.  
10 
 
ВСТУП 
В умовах стрімкого розвитку інформаційних технологій та зростання 
популярності електронної комерції створення сучасних веб-сайтів стає необхідною 
складовою успішного функціонування підприємств. Особливо це стосується галузі 
продажу автомобільних комплектуючих, зокрема шин та дисків, де важливу роль 
відіграє швидкість доступу до інформації, зручність вибору товару та можливість 
онлайн-замовлення. 
Актуальність теми. Актуальність теми кваліфікаційної роботи бакалавра 
«Інформаційний сайт магазину з продажу автомобільних шин та дисків» зумовлена 
необхідністю створення ефективного програмного рішення, яке забезпечує 
автоматизацію процесів представлення товарів, їх пошуку, фільтрації та взаємодії з 
користувачем. У сучасних умовах конкуренції на ринку автомобільних товарів 
наявність зручного та функціонального веб-сайту є важливим фактором успіху 
підприємства.  
Сучасний стан проблеми свідчить, що багато існуючих сайтів мають обмежений 
функціонал, незручний інтерфейс або недостатню адаптацію до потреб користувачів. 
Крім того, відсутність ефективних механізмів фільтрації та пошуку товарів 
ускладнює процес вибору продукції, що негативно впливає на досвід користувача та 
знижує рівень продажів. 
Теоретичне підґрунтя дослідження базується на принципах розробки 
інформаційних систем, веб-технологіях, методах проєктування баз даних та сучасних 
підходах до створення клієнт-серверних застосунків. Використання цих підходів 
дозволяє створити ефективну, масштабовану та зручну у використанні систему. 
Зв’язок роботи з науковими програмами, планами і темами кафедри 
комп’ютерних наук та системного аналізу (КНСА) визначається її спрямованістю на 
розроблення прикладного програмного забезпечення в галузі комп’ютерних наук, 
автоматизацію бізнес-процесів та підвищення якості обробки даних у корпоративних 
інформаційних системах. Результати дослідження узгоджуються з тематикою 
науково-дослідних робіт кафедри КНСА, що стосуються проєктування 
11 
 
інформаційних систем, інтеграції програмних компонентів і застосування сучасних 
технологій обробки даних. 
Мета роботи і задачі дослідження. Метою кваліфікаційної роботи бакалавра є 
розроблення інформаційного сайту магазину з продажу автомобільних шин та дисків, 
який забезпечує зручний доступ до каталогу товарів, можливість фільтрації продукції 
за різними параметрами, а також підтримку основних бізнес-процесів онлайн-
продажу. 
Для досягнення поставленої мети у роботі розв’язуються такі завдання: 
− провести аналіз предметної області онлайн-продажу автомобільних шин та 
дисків; 
− дослідити існуючі веб-рішення та технології розробки інтернет-магазинів; 
− обґрунтувати вибір архітектури інформаційного сайту; 
− розробити структуру бази даних для зберігання інформації про товари; 
− реалізувати функціонал каталогу продукції з можливістю фільтрації та 
пошуку; 
− створити інтерфейс користувача для взаємодії з системою; 
− провести тестування розробленого веб-застосунку. 
Об’єкт дослідження: операційні процеси веб-сайтів для електронної комерції.  
Предмет дослідження: методи та засоби створення інформаційного сайту для 
продажу автомобільних шин та дисків. 
Методи дослідження. У роботі використано методи системного аналізу для 
дослідження предметної області продажу автомобільних шин та дисків, методи 
проєктування інформаційних систем для розробки структури веб-застосунку, а також 
сучасні підходи до створення клієнт-серверних систем. Для реалізації програмного 
продукту застосовано методи веб-розробки з використанням мов програмування 
HTML, CSS, JavaScript та PHP. Також використано методи проєктування баз даних 
для організації ефективного зберігання інформації. 
Практичне значення отриманих результатів полягає в розробці 
функціонального інформаційного сайту магазину автомобільних шин та дисків, який 
може бути використаний для автоматизації процесів продажу продукції. Створений 
12 
 
сайт забезпечить зручний доступ користувачів до каталогу товарів, можливість 
швидкого пошуку та фільтрації продукції за різними параметрами, а також спрощує 
процес оформлення замовлень. Він може бути впроваджений у діяльність реального 
підприємства, що дозволить підвищити ефективність роботи магазину та покращити 
якість обслуговування клієнтів. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13 
 
1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ОБҐРУНТУВАННЯ ВИМОГ ДО 
ІНФОРМАЦІЙНОГО САЙТУ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ 
ШИН ТА ДИСКІВ 
1.1 Опис предметної області  
В умовах активного розвитку інформаційних технологій та цифровізації 
суспільства Інтернет став ключовим інструментом для здійснення комерційної 
діяльності. Особливо це стосується сфери електронної торгівлі, де значну частку 
займають інтернет-магазини автомобільних товарів, зокрема шин та дисків.  
На сьогоднішній день користувачі все частіше надають перевагу онлайн-
покупкам, що пояснюється зручністю, доступністю та економією часу. Веб-сервіси з 
продажу автомобільних шин і дисків дозволяють швидко знайти необхідний товар, 
ознайомитися з його характеристиками, порівняти ціни та оформити замовлення без 
необхідності відвідування фізичних магазинів.  
Сучасні інтернет-магазини пропонують широкий функціонал, який включає 
пошук товарів за різними параметрами, такими як діаметр, ширина, сезонність, бренд, 
тип транспортного засобу та інші характеристики. Це дозволяє значно спростити 
процес підбору шин та дисків і зробити його більш точним. 
Основними факторами, що впливають на розвиток даного сегменту, є:  
− зростання популярності електронної комерції та онлайн-платежів; 
− підвищення рівня довіри користувачів до інтернет-магазинів; 
− розвиток логістичних сервісів і служб доставки; 
− необхідність швидкого доступу до актуальної інформації про товари; 
− зростання конкуренції між онлайн-платформами. 
Важливу роль у веб-сайтах відіграє візуалізація товарів, оскільки якісні 
зображення та детальні описи допомагають користувачам приймати обґрунтовані 
рішення щодо покупки. Крім того, велике значення мають відгуки інших покупців, 
які формують довіру до товару та продавця. 
Особливістю інтернет-магазинів шин і дисків є необхідність реалізації точного 
14 
 
підбору товарів відповідно до параметрів автомобіля. Це вимагає створення зручної 
системи фільтрації та пошуку, яка забезпечує швидкий доступ до потрібної продукції. 
Також важливим аспектом є інтеграція з сервісами доставки, що дозволяє 
автоматизувати процес розрахунку вартості перевезення та вибору відділення. Це 
значно підвищує зручність користування веб-сайтом.  
При розробці веб-орієнтованого сайту для продажу автомобільних шин та 
дисків необхідно враховувати такі функціональні можливості:  
− перегляд каталогу товарів; 
− пошук та фільтрація продукції; 
− перегляд детальної інформації про товар; 
− додавання товарів до кошика; 
− оформлення замовлення; 
− вибір способу доставки та оплати. 
 Для адміністративної частини системи необхідно передбачити можливість 
управління товарами, замовленнями та користувачами. 
Процес розробки веб-сайту включає наступні етапи: 
1. Аналіз предметної області та ринку. 
2. Визначення потреб користувачів. 
3. Формування функціональних вимог. 
4. Вибір технологій реалізації. 
5. Розробка, тестування та підтримка системи. 
1.2 Аналіз існуючих аналогів веб-орієнтованих сайтів з продажу 
автомобільних шин та дисків 
У сучасному інформаційному просторі існує велика кількість веб-сервісів, що 
спеціалізуються на продажу автомобільних шин та дисків. Аналіз таких платформ 
дозволяє визначити їхні сильні та слабкі сторони, а також сформувати вимоги до 
розробки власного веб-сайту. 
У даній роботі розглянуто найбільш популярні інтернет-магазини, що 
15 
 
функціонують на території України. 
 1.2.1 Аналіз сервісу «Rozetka». Даний веб-сервіс є універсальним інтернет-
магазином, який пропонує широкий асортимент товарів, включаючи автомобільні 
шини та диски. Система має зручний інтерфейс та розвинену систему пошуку [1]. 
До основних переваг можна віднести: 
– широкий асортимент продукції; 
– зручну навігацію; 
– наявність відгуків користувачів; 
– швидку обробку замовлень. 
Серед недоліків слід зазначити: 
– відсутність вузькоспеціалізованого підбору шин; 
– складність пошуку для професійного користувача. 
Головна сторінка сервісу «Rozetka» показана на рис. 1.1. 
 
Рисунок 1.1 – Головна сторінка сервісу «Rozetka» [1] 
1.2.2 Аналіз сервісу «Shina.ua». Сервіс спеціалізується виключно на продажі 
автомобільних шин та дисків, що робить його більш орієнтованим на цільову 
аудиторію. 
Переваги: 
16 
 
– точний підбір товарів за параметрами; 
– спеціалізований функціонал; 
– широкий вибір шин. 
Недоліки: 
– застарілий інтерфейс; 
– недостатньо сучасний дизайн. 
Головна сторінка сервісу «Shina.ua» показана на рис. 1.2 [2]. 
 
Рисунок 1.2 – Головна сторінка сервісу «Shina.ua» [2]  
1.2.3 Аналіз сервісу «Infoshina». Даний веб-сервіс є одним із найбільш відомих 
у сфері продажу шин. Він пропонує великий вибір товарів та інтеграцію з 
логістичними сервісами. 
Переваги: 
– велика база товарів; 
– наявність складів; 
– можливість доставки. 
Недоліки: 
– складний інтерфейс; 
– перевантаженість інформацією. 
Головна сторінка сервісу «Infoshina» показана на рис. 1.3 [3]. 
17 
 
 
Рисунок 1.3 – Головна сторінка сервісу «Infoshina» [3] 
1.2.4 Аналіз сервісу «Rezina.cc». Сервіс орієнтований на продаж шин за 
доступними цінами. Головна сторінка сервісу «Rezina.cc» показана на рис. 1.4 [4]. 
 
Рисунок 1.4 – Головна сторінка сервісу «Rezina.cc» [4] 
Переваги: 
– конкурентні ціни; 
18 
 
– простота використання. 
Недоліки: 
– обмежений функціонал; 
– недостатня інформативність товарів. 
1.2.5 Аналіз сервісу «Autoshini». Сервіс спеціалізується на підборі шин і дисків 
для різних типів транспортних засобів. Головна сторінка сервісу «Autoshini» показана 
на рис. 1.5 [5]. 
 
Рисунок 1.5 – Головна сторінка сервісу «Autoshini» [5] 
Переваги: 
– зручний підбір по авто; 
– сучасний інтерфейс; 
– актуальні ціни. 
Недоліки: 
– обмежений асортиментр деяких брендів. 
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та 
постановка завдання 
У результаті проведеного аналізу існуючих веб-орієнтованих сервісів, що 
спеціалізуються на продажу автомобільних шин та дисків, виявлено ряд спільних 
19 
 
характеристик, а також визначено їх основні переваги та недоліки. Більшість 
розглянутих платформ забезпечують базовий функціонал для перегляду товарів, 
пошуку та оформлення замовлення, проте не всі з них відповідають сучасним 
вимогам користувачів щодо зручності, швидкості та актуальності інформації 
Аналіз показав, що універсальні інтернет-магазини мають широкий асортимент 
продукції. Однак, вони часто поступаються спеціалізованим сервісам у точності 
підбору товарів. У свою чергу, вузькоспеціалізовані платформи забезпечують більш 
глибоку функціональність у межах своєї предметної області, але можуть мати 
обмеження у зручності інтерфейсу або актуальності даних.  
Суттєвою проблемою більшості сервісів є недостатньо ефективна система 
фільтрації, що ускладнює процес пошуку необхідних шин або дисків. Крім того, в 
деяких випадках спостерігається перевантаженість інтерфейсу, що негативно впливає 
на користувацький досвід. Не менш важливим недоліком є відсутність або недостатня 
точність інтеграції з логістичними сервісами, що ускладнює процес розрахунку 
вартості доставки. 
З метою узагальнення отриманих результатів було виконано порівняльний 
аналіз розглянутих реалізацій за основними критеріями, такими як зручність дизайну, 
швидкість роботи та якість представленої інформації (табл. 1.1). 
Таблиця 1.1 – Таблиця порівнянь існуючих рішень розглянутих реалізацій 
Критерії порівняння сервісів 
Назва сервісу Дизайн Швидкість Якість представленої 
(0-5) завантаження (0-5) інформації (0-5) 
«Rozetka» 5 5 4,5 
«Shina.ua» 3,5 4 4 
«Infoshina» 4,5 4,5 4,5 
«Rezina.cc» 4,5 4 4 
«Autoshini» 3,5 4 3,5 
Власний сайт 5 5 5 
Проведений аналіз дозволив визначити ключові вимоги до розроблюваного веб-
20 
 
сайту. Зокрема, майбутній сервіс повинен поєднувати в собі переваги існуючих 
рішень та усувати їх недоліки.  
До основних вимог можна віднести: 
– наявність інтуїтивно зрозумілого інтерфейсу користувача; 
– високу швидкість завантаження сторінок; 
– ефективну систему пошуку та фільтрації товарів; 
– актуальність інформації про наявність і ціни; 
– інтеграцію з сервісами доставки для автоматичного розрахунку вартості; 
– адаптивність веб-сайту для різних пристроїв. 
На основі проведеного дослідження сформульовано постановку завдання 
кваліфікаційної роботи бакалавра.  
Постановка завдання:    
Основною метою даної роботи є розробка веб-орієнтованого інформаційного 
сайту для продажу автомобільних шин та дисків, який забезпечить зручний доступ до 
товарів, швидкий пошук та ефективне оформлення замовлення. 
Для досягнення поставленої мети необхідно вирішити наступні задачі: 
1. Провести аналіз існуючих веб-сервісів у сфері продажу автомобільних шин 
та дисків. 
2. Дослідити сучасні технології веб-розробки та обрати найбільш доцільні для 
реалізації системи. 
3. Розробити клієнтську частину веб-сайту з використанням сучасних 
фреймворків. 
4. Реалізувати функціонал каталогу товарів із можливістю фільтрації та 
пошуку. 
5. Створити систему кошика та оформлення замовлення. 
6. Забезпечити інтеграцію з API служби доставки для автоматизації процесу 
доставки. 
7. Реалізувати адміністративну частину для управління товарами та 
замовленнями. 
Таким чином, розроблюваний інформаційний сайт магазину з продажу 
21 
 
автомобільних шин та дисків повинен забезпечити комплексне вирішення задач, 
пов’язаних із онлайн-продажем автомобільних шин та дисків, та відповідати 
сучасним вимогам до якості, зручності та функціональності. 
 Висновки до розділу 1 
У цьому розділі було проведено комплексне дослідження предметної області, 
що охоплює особливості функціонування веб-орієнтованих сайтів у сфері продажу 
автомобільних шин та дисків. 
У ході аналізу сучасного стану ринку встановлено, що електронна комерція в 
даній сфері активно розвивається, а використання веб-сайтів стає основним способом 
взаємодії між продавцем і покупцем. Визначено, що ключовими факторами 
ефективності таких систем є зручність користування, швидкість обробки запитів, 
точність підбору товарів та інтеграція з логістичними сервісами. 
Проведений огляд існуючих аналогів дозволив виявити їхні основні переваги та 
недоліки. Зокрема, встановлено, що універсальні інтернет-магазини забезпечують 
широкий асортимент продукції, проте поступаються спеціалізованим сервісам у 
точності підбору товарів. Спеціалізовані платформи мають більш глибокий 
функціонал, але не завжди відповідають сучасним вимогам щодо дизайну та 
зручності інтерфейсу. 
Визначено ключові вимоги до розроблюваного інформаційного сайту: 
реалізація ефективної системи пошуку та фільтрації, забезпечення актуальності 
даних, висока швидкодія, а також інтеграція з сервісами доставки для автоматизації 
процесу оформлення замовлення. Сформульовано постановку завдання 
кваліфікаційної роботи бакалавра. 
Таким чином, результати проведеного дослідження є теоретичною основою для 
подальшої розробки ефективного, зручного та конкурентоспроможного веб-
орієнтованого інформаційного сайту. 
 
 
22 
 
2 МЕТОДИ ТА ЗАСОБИ ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОГО САЙТУ 
МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ ШИН ТА ДИСКІВ 
 У попередньому розділі сформульовано систему функціональних та 
нефункціональних вимог до інформаційного сайту магазину з продажу автомобільних 
шин та дисків. Визначено, що він має забезпечувати зручний доступ до каталогу 
продукції, можливість пошуку та фільтрації товарів, інтеграцію із зовнішніми 
сервісами доставки, а також взаємодію з базою даних і адміністративною панеллю.  
Обґрунтуємо вибір конкретних методів та програмних засобів, що дозволяють 
реалізувати зазначені вимоги, а також наведемо формальний опис підходів, 
покладених в основу основних процесів системи: отримання даних, їх обробки та 
відображення користувачу, а також обробки замовлень. 
2.1 Вибір та обґрунтування методів вирішення проблеми 
 Для розв'язання задачі розробки інформаційного сайту магазину з продажу 
автомобільних шин та дисків у роботі обґрунтовано застосування клієнт-серверної 
архітектури з використанням сучасного підходу до розробки веб-застосунків [15].  
Відповідно до цього підходу, система розділяється на логічно відокремлені 
рівні: клієнтський інтерфейс, серверну частину (API) та рівень зберігання даних. 
Такий підхід забезпечує можливість незалежної розробки та тестування окремих 
компонентів, спрощує масштабування системи та підвищує її надійність. 
Для реалізації взаємодії між компонентами системи використано REST API, що 
забезпечує обмін даними між клієнтською частиною (Next.js + React) та серверною 
логікою. Це дозволяє чітко розмежувати відповідальність між інтерфейсом 
користувача та обробкою даних. 
 Як альтернативний підхід розглядалася монолітна архітектура, за якої всі 
компоненти системи реалізуються в межах одного застосунку без чіткого розподілу 
на рівні [10]. Даний підхід було відхилено з кількох причин.  
По-перше, монолітна структура ускладнює масштабування системи при 
збільшенні кількості користувачів та обсягу даних.  
23 
 
По-друге, відсутність чіткого розділення компонентів знижує гнучкість системи 
та ускладнює внесення змін у майбутньому. 
По-третє, інтеграція із зовнішніми сервісами, такими як API служби доставки 
«Нова Пошта», є більш зручною та ефективною у випадку використання API-
орієнтованої архітектури. 
Особливістю реалізованого підходу є інтеграція із зовнішнім API служби 
доставки, що дозволяє отримувати актуальні дані про відділення, розраховувати 
вартість доставки та автоматизувати процес оформлення замовлень. Це значно 
підвищує функціональність системи та покращує взаємодію з користувачем. 
Загальну архітектуру інформаційного сайту магазину автомобільних шин та 
дисків, що відображає взаємодію основних компонентів системи відповідно до 
обраного підходу, наведено на рисунку 2.1. 
 
Рисунок 2.1 – Компонентна діаграма архітектури інформаційного сайту 
магазину автомобільних шин та дисків 
24 
 
Етап обробки даних (Transform) у системі інформаційного сайту магазину 
автомобільних шин та дисків побудовано на основі підходу, що керується правилами 
(англ. rule-based approach) [9]. Суть методу полягає в застосуванні набору 
формалізованих правил обробки до кожного запиту користувача або запису в базі 
даних. Оскільки дані про товари (наприклад, характеристики шин: розмір, сезонність, 
тип, виробник) можуть надходити з різних джерел або вводитися вручну 
адміністратором, в роботі застосовано методи валідації та нормалізації даних. Це 
дозволяє уніфікувати структуру даних незалежно від способу їх введення та 
забезпечити коректне відображення у системі. 
Правила обробки організовано у вигляді набору серверних обробників (API-
ендпоінтів), кожен з яких відповідає за конкретний тип даних: обробка товарів, 
обробка замовлень, обробка користувачів, а також інтеграція із зовнішніми сервісами. 
Такий підхід дозволяє розширювати функціональність системи без зміни існуючих 
компонентів, що відповідає принципу відкритості-закритості (англ. Open-Closed 
Principle) [9]. 
Для уникнення дублювання даних при створенні або оновленні товарів і 
замовлень застосовано стратегію створення або оновлення (англ. create-or-update, або 
upsert) [11]. Метод полягає у використанні унікальних ідентифікаторів (наприклад, ID 
товару або замовлення) для перевірки наявності запису в базі даних. Якщо запис уже 
існує, то відбувається його оновлення, якщо ні,  то створюється новий запис. Це 
забезпечує цілісність даних та запобігає появі дублікатів у системі. 
Обробка запитів користувачів та отримання даних організовано за принципом 
асинхронної взаємодії між клієнтською та серверною частинами. Запити передаються 
через REST API, а їх обробка виконується на сервері з можливістю паралельного 
виконання.  
Такий підхід дозволяє ефективно обробляти велику кількість запитів, зменшити 
навантаження на сервер та підвищити швидкодію системи. Схему взаємодії 
компонентів під час обробки запитів наведено на рисунку 2.2. 
25 
 
 
Рисунок 2.2 – Діаграма взаємодії компонентів системи 
Для процесу оформлення замовлення та взаємодії із зовнішнім сервісом 
доставки застосовано підхід послідовної обробки станів. Кожне замовлення 
проходить визначені етапи: створення, введення даних користувача, вибір способу 
доставки, отримання даних з API служби «Нова Пошта», підтвердження замовлення 
та завершення. У випадку помилки система переводить процес у відповідний стан для 
повторної обробки або повідомлення користувача. Такий підхід забезпечує контроль 
виконання операцій та підвищує надійність системи. Діаграму переходів між станами 
наведено на рисунку 2.3. 
 
Рисунок 2.3 – Діаграма потоків даних 
26 
 
2.2 Вибір та обґрунтування засобів вирішення проблеми 
При виборі програмних засобів для реалізації інформаційного сайту магазину з 
продажу автомобільних шин та дисків враховувалися вимоги щодо високої 
продуктивності, масштабованості, зручності розробки, інтеграції із зовнішніми 
сервісами та забезпечення безпеки даних користувачів. 
Клієнтську частину системи реалізовано з використанням сучасного JavaScript-
фреймворку Next.js у поєднанні з бібліотекою React [7]. 
Вибір цього стеку зумовлено кількома факторами.  
По-перше, Next.js забезпечує серверний рендеринг (SSR) та генерацію 
статичних сторінок (SSG), що дозволяє значно підвищити швидкість завантаження 
сторінок та покращити SEO-оптимізацію сайту [8]. 
По-друге, використання компонентного підходу React дозволяє будувати 
масштабовану та повторно використовувану структуру інтерфейсу користувача, що 
спрощує розробку та підтримку системи. 
По-третє, Next.js надає вбудовану підтримку API-маршрутів, що дозволяє 
реалізувати серверну логіку без необхідності використання окремого бекенд-
фреймворку, забезпечуючи єдине середовище розробки. 
Серверну частину системи реалізовано у вигляді REST API, яке відповідає за 
обробку запитів користувачів, реалізацію бізнес-логіки та взаємодію з базою даних. 
Такий підхід забезпечує чітке розмежування клієнтської та серверної частин системи. 
Доступ до бази даних реалізовано через ORM-рівень (наприклад, Prisma або 
інший інструмент) [11], що дозволяє працювати з даними у вигляді об’єктів, спрощує 
розробку та зменшує кількість помилок при роботі з SQL-запитами. 
Адміністративну частину системи реалізовано у вигляді окремого захищеного 
модуля на базі Next.js. Це дозволяє забезпечити централізоване керування товарами, 
замовленнями та користувачами. Доступ до адміністративної панелі здійснюється 
після проходження автентифікації, що забезпечує захист даних від несанкціонованого 
доступу. 
27 
 
Для інтеграції із зовнішніми сервісами доставки використано API служби «Нова 
Пошта» [6]. Це дозволяє отримувати актуальні дані про відділення, автоматично 
розраховувати вартість доставки та спрощує процес оформлення замовлення для 
користувача. 
Засоби мережевої взаємодії реалізовано за допомогою HTTP-запитів до REST 
API. Асинхронна модель обробки запитів дозволяє ефективно працювати з великою 
кількістю користувачів та забезпечує швидку реакцію системи на дії користувача. 
Допоміжні засоби розроблення включають використання систем контролю 
версій (Git), пакетного менеджера npm, а також інструментів для стилізації 
інтерфейсу (CSS, Tailwind або Bootstrap). Для розгортання системи можуть 
використовуватися технології контейнеризації, зокрема Docker, що забезпечує 
стабільність середовища виконання.  
Загальну структуру програмних засобів та їх взаємозв’язки в складі 
інформаційного сайту наведено на рисунку 2.4. 
 
Рисунок 2.4 – Діаграма залежностей програмних засобів інформаційного сайту 
магазину автомобільних шин та дисків 
 Порівняльну характеристику засобів вирішення проблеми наведено в табл. 2.1. 
 
28 
 
Таблиця 2.1 – Порівняльна характеристика засобів вирішення проблеми 
Критерій Next.js React Vue.js 
SSR / SEO Так Ні Частково 
Вбудований API Так Ні Ні 
Продуктивність Висока Висока Висока 
Масштабованість Висока Середня Середня 
Простота інтеграції API Висока Середня Середня 
Швидкість розробки Висока Середня Висока 
Бібліотеку Next.js обрано як основний інструмент розробки, оскільки вона 
забезпечує серверний рендеринг, вбудовану підтримку API та високу продуктивність. 
У порівнянні з іншими підходами, даний фреймворк дозволяє значно спростити 
розробку та забезпечити кращу оптимізацію веб-застосунку.  
2.3 Опис алгоритмів для ключових процесів обробки даних 
У процесі проєктування інформаційного сайту магазину з продажу 
автомобільних шин та дисків розроблено алгоритми для трьох ключових процесів 
обробки даних: обробки та відображення каталогу товарів, оформлення замовлення 
користувачем та інтеграції із зовнішнім API служби доставки. 
Алгоритм 1  – Обробка та відображення каталогу товарів. 
Призначення алгоритму полягає в забезпеченні отримання, фільтрації, 
сортування та відображення даних про автомобільні шини та диски з бази даних у 
зручному для користувача вигляді. Блок-схему алгоритму наведено на рисунку 2.5. 
Послідовність кроків алгоритму: 
1) отримання запиту від користувача з параметрами фільтрації (ціна, виробник, 
діаметр, сезонність); 
2) передача запиту до серверної частини через REST API; 
3) перевірка коректності параметрів запиту; у разі помилки – повернення 
повідомлення користувачу; 
4) формування SQL-запиту до бази даних із урахуванням фільтрів; 
29 
 
5) отримання списку товарів із бази даних; 
6) виконання сортування результатів (за ціною, популярністю або новизною); 
7) формування структури відповіді у форматі JSON; 
8) передача результату на клієнтську частину; 
9) відображення товарів у вигляді каталогу на сторінці сайту. 
 
 
Рисунок 2.5 – Блок-схема алгоритму обробки каталогу товарів 
Обґрунтування коректності алгоритму.  
Алгоритм є детермінованим, оскільки при однакових параметрах запиту 
результат вибірки з бази даних залишається незмінним. Завершуваність 
забезпечується скінченністю кількості записів у базі даних. Відсутність циклів із 
невизначеною кількістю ітерацій гарантує стабільну роботу алгоритму. 
Алгоритм 2 – Оформлення замовлення користувачем. 
Призначення алгоритму полягає в забезпеченні процесу створення замовлення 
користувачем із перевіркою введених даних, інтеграцією з API доставки та 
30 
 
збереженням результату в базі даних. Блок-схему алгоритму наведено на рисунку 2.6. 
 
Рисунок 2.6 – Блок-схема алгоритму оформлення замовлення 
Послідовність кроків алгоритму: 
1) додавання товарів до кошика користувачем; 
2) перехід до оформлення замовлення; 
3) введення контактних даних (ПІБ, телефон, місто); 
4) вибір відділення доставки через API «Нова Пошта»; 
5) перевірка валідності введених даних; 
6) у разі помилки – повернення повідомлення користувачу; 
7) формування об’єкта замовлення; 
8) збереження замовлення в базі даних; 
9) повернення підтвердження користувачу про успішне оформлення 
замовлення. 
31 
 
Обґрунтування коректності алгоритму.  
Алгоритм є детермінованим, оскільки кожен етап обробки виконується 
послідовно та залежить від попереднього стану. Завершуваність гарантується 
скінченністю дій користувача. Використання перевірок забезпечує коректність 
введених даних та запобігає помилкам. 
Алгоритм 3 – Інтеграція з API служби доставки 
Призначення алгоритму полягає у забезпеченні отримання актуальних даних 
про відділення доставки та розрахунок вартості перевезення через зовнішній API. 
Алгоритм є ключовим для коректного функціонування процесу оформлення 
замовлення. Блок-схему алгоритму наведено на рисунку 2.7. 
 
Рисунок 2.7 – Блок-схема алгоритму інтеграції з API служби доставки 
Послідовність кроків алгоритму: 
1) отримання запиту від клієнта на список відділень або розрахунок доставки; 
32 
 
2) формування HTTP-запиту до API служби «Нова Пошта»; 
3) передача запиту із необхідними параметрами (місто, тип доставки); 
4) отримання відповіді від зовнішнього сервісу; 
5) перевірка відповіді на наявність помилок; 
6) у разі помилки – повернення повідомлення користувачу; 
7) обробка отриманих даних (парсинг JSON); 
8) передача результату на клієнтську частину; 
9) відображення інформації користувачу. 
Обґрунтування коректності алгоритму.  
Алгоритм є детермінованим за умови стабільної роботи зовнішнього API. 
Завершуваність забезпечується обмеженим числом запитів та відповідей. 
Використання перевірок дозволяє обробляти помилки та забезпечує надійність 
системи. 
Висновки до розділу 2 
У розділі обґрунтовано вибір методів та програмних засобів для проєктування 
інформаційного сайту магазину з продажу автомобільних шин та дисків. 
Для організації процесу обробки даних обрано клієнт-серверну архітектуру з 
використанням REST API, що забезпечує чітке розмежування клієнтської та серверної 
частин системи. Обробка даних реалізується через послідовність етапів отримання, 
перевірки, обробки та відображення інформації. Для забезпечення коректності даних 
застосовано підхід, що базується на правилах валідації та нормалізації вхідних 
параметрів, що дозволяє уніфікувати структуру даних незалежно від джерела їх 
отримання. 
Для запобігання дублюванню записів обґрунтовано використання стратегії 
«створення або оновлення» (create-or-update) за унікальними ідентифікаторами. Для 
ефективної обробки запитів користувачів та взаємодії із зовнішніми сервісами 
застосовано асинхронну модель обробки даних, що дозволяє підвищити 
продуктивність та масштабованість системи. 
Обґрунтовано вибір стеку технологій: клієнтська та серверна частини 
33 
 
реалізовані на базі Next.js та React; серверна логіка реалізована через API-маршрути; 
у якості системи керування базами даних використано PostgreSQL; для взаємодії із 
зовнішнім сервісом доставки застосовано API служби «Нова Пошта». 
Адміністративна панель реалізована як окремий модуль системи з обмеженим 
доступом. 
Описано три алгоритми, що складають функціональне ядро системи: алгоритм 
обробки та відображення каталогу товарів, алгоритм оформлення замовлення 
користувачем, а також алгоритм інтеграції із зовнішнім API служби доставки. Для 
кожного алгоритму доведено властивості детермінованості, завершуваності та 
узгодженості результатів. 
Сукупність обґрунтованих у цьому розділі методів та програмних засобів 
формує повноцінну технологічну основу для подальшої програмної реалізації 
інформаційного сайту магазину з продажу автомобільних шин та дисків, опис якої 
наведено в наступному розділі. 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
34 
 
3 РОЗРОБКА, РЕАЛІЗАЦІЯ ТА ТЕСТУВАННЯ ІНФОРМАЦІЙНОГО 
САЙТУ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ ШИН ТА ДИСКІВ 
3.1 Вибір технологій та засобів розробки 
При виборі програмних засобів для реалізації інформаційного сайту магазину з 
продажу автомобільних шин та дисків враховувалися вимоги щодо продуктивності, 
масштабованості, зручності розробки та інтеграції із зовнішніми сервісами. 
Клієнтську та серверну частини системи реалізовано з використанням 
фреймворку Next.js, що базується на бібліотеці React. Даний підхід дозволяє 
реалізувати як серверний рендеринг (SSR), так і статичну генерацію сторінок (SSG), 
що позитивно впливає на швидкість завантаження сайту та SEO-оптимізацію. 
 Для реалізації серверної логіки використано вбудовані API-маршрути Next.js, 
що дозволяє організувати обробку запитів без необхідності розгортання окремого 
серверного застосунку. 
 У якості системи керування базами даних обрано PostgreSQL, що забезпечує 
надійне зберігання структурованих даних, підтримку транзакцій та відповідність 
вимогам ACID. 
 Для взаємодії із зовнішнім сервісом доставки використано API служби «Нова 
Пошта», що дозволяє отримувати актуальні дані про відділення та здійснювати 
розрахунок доставки. 
 Адміністративну панель системи доцільно реалізувати як окремий веб-
інтерфейс із використанням React та готових UI-бібліотек (наприклад, Material UI або 
Ant Design), що дозволяє швидко створювати зручний інтерфейс для управління 
товарами та замовленнями. Текст програми подано в Додатку Б. 
3.2 Реалізація клієнтської частини 
Клієнтська частина системи реалізована як веб-застосунок із використанням 
React та Next.js. Основною задачею клієнтської частини є відображення інформації 
про товари, забезпечення зручної навігації та взаємодії користувача із системою. 
35 
 
Інтерфейс користувача включає такі основні сторінки: 
– головна сторінка з переліком популярних товарів; 
– каталог шин та дисків із можливістю фільтрації; 
– сторінка конкретного товару з детальним описом; 
– кошик користувача; 
– сторінка оформлення замовлення. 
Для оптимізації роботи застосовано механізми: 
– клієнтського та серверного рендерингу; 
– кешування запитів; 
– динамічного завантаження компонентів. 
3.3 Реалізація серверної частини 
Серверна частина реалізована за допомогою API-маршрутів Next.js, що 
обробляють HTTP-запити від клієнта. 
Основні функції серверної частини: 
– отримання та обробка запитів користувачів; 
– робота з базою даних; 
– реалізація бізнес-логіки; 
– інтеграція із зовнішніми сервісами. 
Для доступу до бази даних використовується ORM або SQL-запити, що 
дозволяє виконувати операції створення, читання, оновлення та видалення даних. 
Структуру бази даних представлено в Додатку Г. 
Обробка запитів організована за принципом REST API, що забезпечує чітку 
структуру взаємодії між клієнтом і сервером. 
3.4 Реалізація функціоналу кабінету користувача 
У ході реалізації клієнтської частини розроблено інтерфейс користувача, що 
забезпечує перегляд каталогу товарів, фільтрацію шин та дисків за параметрами, а 
також взаємодію з кошиком і оформлення замовлення (Додаток В). Важливими є 
36 
 
адаптивність інтерфейсу та зручність використання. Кабінет користувача реалізовано 
як окремий функціональний модуль системи, що забезпечує взаємодію користувача 
із власними даними. 
Основні можливості кабінету: 
– перегляд історії замовлень; 
– перегляд інформації про оформлені покупки; 
– редагування контактних даних; 
– повторне оформлення замовлення. 
Доступ до кабінету здійснюється після авторизації користувача, що забезпечує 
захист персональних даних. 
3.5 Реалізація модуля управління замовленнями 
Модуль управління замовленнями забезпечує створення, обробку та збереження 
інформації про замовлення. 
Основні функції модуля: 
– створення нового замовлення; 
– збереження інформації в базі даних; 
– обробка статусів замовлення; 
– інтеграція з API служби доставки. 
Кожне замовлення містить: 
– список товарів; 
– контактні дані користувача; 
– адресу доставки; 
– статус виконання. 
Для уникнення дублювання записів застосовується унікальний ідентифікатор 
замовлення. 
 
 
 
37 
 
3.6 Тестування інформаційного сайту магазину з продажу автомобільних 
шин та дисків 
Тестування інформаційного сайту магазину з продажу автомобільних шин та 
дисків проводиться з метою перевірки коректності роботи всіх функціональних 
модулів, стабільності системи та відповідності поставленим вимогам. 
У процесі тестування було перевірено основні сценарії взаємодії користувача із 
системою, зокрема перегляд каталогу товарів, роботу кошика та оформлення 
замовлення.  
Таблиця 3.1 – Результати функціонального тестування веб-сайту 
№ Тестовий сценарій Очікуваний результат Фактичний результат 
1 Відкриття каталогу Відображення товарів Працює коректно 
2 Додавання в кошик Товар додається Працює коректно 
3 Зміна кількості Оновлення суми Працює коректно 
4 Видалення товару Товар видаляється Працює коректно 
5 Валідація форми Помилки при Працює 
неправильному вводі 
6 Вибір міста Підказки міст Працює 
7 Вибір відділення Завантаження Працює 
відділень 
8 Оформлення замовлення Успішне оформлення Працює 
 
Результати тестування наведені на рисунках 3.1–3.7. 
Результати тестування інтерфейсу. 
На рисунку 3.1 представлено головну сторінку каталогу товарів, де 
відображається список шин та дисків. 
На рисунку 3.2 показано процес додавання товару до кошика. 
На рисунку 3.3 зображено зміну кількості товару в кошику. 
Також проведено тестування форми замовлення. 
 
38 
 
 
Рисунок 3.1 – Перевірка відображення каталогу товарів 
 
Рисунок 3.2 – Додавання товару до кошика 
39 
 
 
Рисунок 3.3 – Зміна кількості товару 
На рисунку 3.4 представлено перевірку валідації форми при введенні 
некоректних даних. 
 
Рисунок 3.4 – Валідація форми замовлення 
40 
 
На рисунку 3.5 показано роботу пошуку міста через API служби доставки. 
 
Рисунок 3.5 – Пошук міста через API 
На рисунку 3.6 представлено завантаження списку відділень. 
 
Рисунок 3.6 – Вибір відділення доставки 
41 
 
На рисунку 3.7 показано результат успішного оформлення замовлення. 
 
Рисунок 3.7 – Успішне оформлення замовлення 
Висновки до розділу 3 
У розділі розглянуто процес розробки, реалізації та тестування інформаційного 
сайту магазину з продажу автомобільних шин та дисків. 
Обґрунтовано вибір технологічного стеку, що включає використання 
фреймворку Next.js та бібліотеки React для реалізації клієнтської частини, серверної 
логіки на основі API, а також інтеграції із зовнішнім сервісом доставки Nova Poshta. 
Обрані технології забезпечують високу продуктивність, масштабованість та зручність 
підтримки програмного продукту. 
У ході реалізації клієнтської частини розроблено інтерфейс користувача, що 
забезпечує перегляд каталогу товарів, фільтрацію шин та дисків за параметрами, а 
також взаємодію з кошиком і оформлення замовлення. Особлива увага приділена 
адаптивності інтерфейсу та зручності використання. 
Серверна частина системи реалізує обробку запитів користувачів, роботу з 
42 
 
базою даних, а також інтеграцію із зовнішніми API. Забезпечено коректну обробку 
даних, валідацію запитів та стабільність роботи системи при одночасному доступі 
кількох користувачів. 
Реалізовано функціонал кабінету користувача, що дозволяє переглядати історію 
замовлень, керувати особистими даними та взаємодіяти із сервісами доставки. 
Окремо розроблено модуль управління замовленнями, який забезпечує створення, 
обробку та зміну статусів замовлень. 
Проведено тестування інформаційного сайту магазину з продажу 
автомобільних шин та дисків, що включає перевірку коректності роботи основних 
функціональних модулів, обробку помилкових ситуацій та оцінку продуктивності. 
Результати тестування підтвердили відповідність розробленого програмного 
продукту поставленим вимогам. 
Таким чином, в розділі сформовано повноцінну реалізацію інформаційного 
сайту магазину з продажу автомобільних шин та дисків, що може бути використана 
як основа для подальшого розширення функціоналу та впровадження в реальних 
умовах. 
Проведене тестування інформаційного сайту магазину з продажу 
автомобільних шин та дисків включало функціональні, інтеграційні та користувацькі 
сценарії, а також перевірку продуктивності та адаптивності інтерфейсу. Отримані 
результати підтвердили стабільність роботи сайту та його готовність до практичного 
використання. 
43 
 
ВИСНОВКИ 
У ході написання кваліфікаційної роботи бакалавра було розроблено та 
реалізовано інформаційний сайт магазину з продажу автомобільних шин та дисків, 
який забезпечує зручний доступ користувачів до каталогу продукції, оформлення 
замовлень та взаємодію з сервісами доставки.  
У процесі дослідження було проаналізовано предметну область інтернет-
торгівлі автомобільними товарами, визначено основні функціональні та 
нефункціональні вимоги до системи, зокрема вимоги до продуктивності, 
масштабованості, зручності користування та безпеки обробки даних. 
Для реалізації системи обрано сучасний стек технологій: клієнтську частину 
побудовано з використанням Next.js та React, що забезпечує швидке відображення 
сторінок і зручний інтерфейс користувача; серверну частину реалізовано у вигляді 
REST API, що відповідає за обробку бізнес-логіки та взаємодію з базою даних; 
інтеграцію служби доставки здійснено за допомогою API «Нової пошти», що дозволяє 
автоматизувати процес оформлення та відстеження замовлень. 
У роботі обґрунтовано використання архітектурного підходу з розподілом 
системи на клієнтську та серверну частини, що забезпечує гнучкість розробки та 
можливість подальшого масштабування. Для організації взаємодії між компонентами 
застосовано API-орієнтований підхід. 
Реалізовано ключові функціональні модулі системи, зокрема: 
− каталог товарів із можливістю фільтрації та пошуку; 
− кабінет користувача; 
− модуль оформлення замовлень; 
− інтеграцію з сервісом доставки; 
− адміністративну панель для управління товарами, замовленнями та 
користувачами. 
У процесі реалізації розроблено алгоритми обробки даних, взаємодії з 
зовнішніми сервісами та управління замовленнями. Проведено тестування основних 
функціональних можливостей сайту, що підтвердило його працездатність та 
44 
 
відповідність поставленим вимогам. 
Практичне значення отриманих результатів полягає в можливості використання 
розробленого інформаційного сайту магазину, як готового рішення з онлайн-продажу 
автомобільних шин та дисків або, як основи для подальшого розширення функціоналу 
електронної комерції. 
Таким чином, поставлена мета роботи досягнута, а всі визначені завдання 
виконані в повному обсязі. 
  
 
 
 
 
45 
 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1. Інтернет-магазин автомобільних товарів Rozetka. 
URL: https://rozetka.com.ua/ (дата звернення: 22.03.2026). 
2. Інтернет-магазин автомобільних товарів Shina.ua URL: https://shina.ua/ (дата 
звернення: 22.03.2026). 
3. Сервіс продажу шин Infoshina. URL: https://infoshina.com.ua/ (дата звернення: 
22.03.2026). 
4. Інтернет-магазин шин Rezina.cc. URL: https://rezina.cc/ (дата звернення: 
22.03.2026). 
5. Сервіс підбору шин Autoshini. URL: https://autoshini.com/ (дата звернення: 
22.03.2026). 
6. Офіційний сайт Нової Пошти (API документація). 
URL: https://developers.novaposhta.ua/ (дата звернення: 22.03.2026). 
7. Офіційна документація React. URL: https://react.dev/ (дата звернення: 
22.03.2026). 
8. Офіційна документація Next.js. URL: https://nextjs.org/docs (дата звернення: 
22.03.2026). 
9. Теоретичні відомості про JavaScript. URL: https://developer.mozilla.org/ (дата 
звернення: 22.03.2026). 
10. Теоретичні відомості про веб-розробку. URL: https://www.w3schools.com/ (дата 
звернення: 22.03.2026). 
11. Офіційний сайт PostgreSQL. URL: https://www.postgresql.org/ (дата звернення: 
22.03.2026). 
12. Документація Tailwind CSS. URL: https://tailwindcss.com/docs (дата звернення: 
22.03.2026). 
13. JetBrains WebStorm – середовище розробки. 
URL: https://www.jetbrains.com/webstorm/ (дата звернення: 22.03.2026). 
14. JetBrains IntelliJ IDEA. URL: https://www.jetbrains.com/idea/ (дата звернення: 
22.03.2026). 
46 
 
15. Основи електронної комерції. 
URL: https://uk.wikipedia.org/wiki/Електронна_комерція (дата звернення: 
22.03.2026). 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
47 
 
ДОДАТОК А 
 
 
 
        Затверджую               
Зав. кафедри КНСА, 
______________ Юрій ТРИУС 
«____»____________2026 р.                                                                                                                                                                              
 
 
 
 
 
 
 
 
 
ІНФОРМАЦІЙНИЙ САЙТ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ 
ШИН ТА ДИСКІВ 
 
Специфікація  
482.ЧДТУ. 62255-01 
 
Листів 2 
 
 
 
Розробник                          ____________________                 Дмитро ХАМЕНУШКО 
 
Керівник                             ____________________                Любов ОКСАМИТНА 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2026  
48 
 
482.ЧДТУ. 62255-01 
Позначення Найменування Примітка 
   
   
 Документація  
   
   
482.ЧДТУ. 62255-01    12 01 Текст програми  
482.ЧДТУ. 62255-01    34 01 Інструкція користувача  
482.ЧДТУ. 62255-01    90 01 Структура бази даних  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
49 
 
ДОДАТОК Б 
 
 
 
 
 
 
 
 
 
 
 
 
ІНФОРМАЦІЙНИЙ САЙТ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ 
ШИН ТА ДИСКІВ 
 
 
 
Текст програми 
482.ЧДТУ. 62255-01 12 01 
 
Листів 5 
 
 
 
 
 
 
Розробник    _____________             Дмитро ХАМЕНУШКО 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2026  
50 
 
Фрагмент лістингу програми 
CheckoutForm.tsx 
"use client"; 
 
import { useState } from "react"; 
 
export default function CheckoutForm() { 
  const [form, setForm] = useState({ 
    name: "", 
    phone: "", 
  }); 
 
  const [errors, setErrors] = useState<any>({}); 
 
  const [city, setCity] = useState(""); 
  const [cities, setCities] = useState<any[]>([]); 
  const [showDropdown, setShowDropdown] = useState(false); 
 
  const [warehouses, setWarehouses] = useState<any[]>([]); 
  const [warehouse, setWarehouse] = useState(""); 
 
  // Валідація 
  const validate = () => { 
    const err: any = {}; 
 
    if (!form.name.trim()) err.name = "Введіть ім'я"; 
    if (!form.phone.match(/^\+?\d{10,13}$/)) 
      err.phone = "Невірний номер"; 
 
    if (!city) err.city = "Оберіть місто"; 
    if (!warehouse) err.warehouse = "Оберіть відділення"; 
 
    setErrors(err); 
    return Object.keys(err).length === 0; 
  }; 
 
  // Пошук міст 
  const fetchCities = async (value: string) => { 
    setCity(value); 
 
    if (value.length < 2) { 
      setCities([]); 
      setShowDropdown(false); 
      return; 
    } 
 
    const res = await fetch("/api/nova-poshta", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json", 
      }, 
      body: JSON.stringify({ query: value }), 
    }); 
51 
 
 
    const data = await res.json(); 
    setCities(data); 
    setShowDropdown(true); 
  }; 
 
  // Відділення 
  const fetchWarehouses = async (cityRef: string) => { 
    setWarehouses([]); 
    setWarehouse(""); 
 
    const res = await fetch("/api/nova-poshta/warehouses", { 
      method: "POST", 
      headers: { 
        "Content-Type": "application/json", 
      }, 
      body: JSON.stringify({ city: cityRef }), 
    }); 
 
    const data = await res.json(); 
    setWarehouses(data); 
  }; 
 
  // Submit  
  const handleSubmit = (e: any) => { 
    e.preventDefault(); 
 
    if (!validate()) return; 
 
    console.log("Замовлення:", { 
      ...form, 
      city, 
      warehouse, 
    }); 
 
    alert("Замовлення оформлено �"); 
  }; 
 
  return ( 
    <form onSubmit={handleSubmit} className="space-y-6" id="checkout-form"> 
 
      {/* � Контакти */} 
      <div className="bg-white p-4 rounded shadow"> 
        <h2 className="font-bold mb-3">Контактні дані</h2> 
 
        <input 
          placeholder="Ім'я" 
          className={`w-full border p-2 mb-2 rounded ${ 
            errors.name ? "border-red-500" : "" 
          }`} 
          value={form.name} 
          onChange={(e) => 
            setForm({ ...form, name: e.target.value }) 
          } 
52 
 
        /> 
        {errors.name && ( 
          <p className="text-red-500 text-sm mb-2">{errors.name}</p> 
        )} 
 
        <input 
          placeholder="+380..." 
          className={`w-full border p-2 rounded ${ 
            errors.phone ? "border-red-500" : "" 
          }`} 
          value={form.phone} 
          onChange={(e) => 
            setForm({ ...form, phone: e.target.value }) 
          } 
        /> 
        {errors.phone && ( 
          <p className="text-red-500 text-sm">{errors.phone}</p> 
        )} 
      </div> 
 
      {/* � Доставка */} 
      <div className="bg-white p-4 rounded shadow"> 
        <h2 className="font-bold mb-3">Доставка</h2> 
 
        {/* Місто */} 
        <div className="relative"> 
          <input 
            placeholder="Місто" 
            className={`w-full border p-2 mb-2 rounded ${ 
              errors.city ? "border-red-500" : "" 
            }`} 
            value={city} 
            onChange={(e) => fetchCities(e.target.value)} 
          /> 
 
          {showDropdown && cities.length > 0 && ( 
            <div className="absolute bg-white border w-full z-10 max-h-40 overflow-y-auto rounded shadow"> 
              {cities.map((c: any) => ( 
                <div 
                  key={c.Ref} 
                  className="p-2 hover:bg-gray-100 cursor-pointer transition" 
                  onClick={() => { 
                    setCity(c.Present); 
                    setShowDropdown(false); 
                    fetchWarehouses(c.DeliveryCity); 
                  }} 
                > 
                  {c.Present} 
                </div> 
              ))} 
            </div> 
          )} 
        </div> 
 
53 
 
        {errors.city && ( 
          <p className="text-red-500 text-sm mb-2">{errors.city}</p> 
        )} 
 
        {/* Відділення */} 
        <select 
          className={`w-full border p-2 rounded ${ 
            errors.warehouse ? "border-red-500" : "" 
          }`} 
          value={warehouse} 
          disabled={warehouses.length === 0} 
          onChange={(e) => setWarehouse(e.target.value)} 
        > 
          <option value=""> 
            {warehouses.length === 0 
              ? "Спочатку оберіть місто" 
              : "Оберіть відділення"} 
          </option> 
 
          {warehouses.map((w: any) => ( 
            <option 
              key={w.Ref} 
              value={w.Description || w.ShortAddress} 
            > 
              {w.Description || w.ShortAddress} 
            </option> 
          ))} 
        </select> 
 
        {errors.warehouse && ( 
          <p className="text-red-500 text-sm mt-1"> 
            {errors.warehouse} 
          </p> 
        )} 
      </div> 
 
    </form> 
  ); 
} 
 
 
 
 
 
 
 
 
54 
 
ДОДАТОК В 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ІНФОРМАЦІЙНИЙ САЙТ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ 
ШИН ТА ДИСКІВ 
 
 
 
 
ІНСТРУКЦІЯ КОРИСТУВАЧА 
482. ЧДТУ. 62255-01 34 01 
 
Листів 8 
 
 
 
 
 
Розробник    _____________              Дмитро ХАМЕНУШКО 
 
 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2026  
55 
 
На головній сторінці розробленого інформаційного сайту магазину з продажу 
автомобільних шин та дисків відображається каталог товарів магазину шин та дисків 
(рис. В.1). 
Користувач може переглядати доступні товари, ознайомлюватися з їх 
характеристиками, цінами та швидко додавати їх до кошика (рис. В.2-В.3).  
У верхній частині сторінки розміщено навігаційне меню, логотип 
магазину Nakolesah, а також іконка кошика (рис. В.3). 
56 
 
 
Рисунок В.1 – Головна сторінка  веб-застосунку 
57 
 
 
Рисунок В.2 – Каталог товарів 
 
58 
 
 
Рисунок В.3 – Сторінка товару 
Кожен товар представлений у вигляді окремої картки, яка містить: 
− зображення товару; 
− назву; 
− ціну; 
− кнопку «Додати в кошик». 
59 
 
При натисканні кнопки товар автоматично додається до кошика користувача 
(рис. В.4). 
 
Рисунок В.4 – Кошик 
На сайті магазину відображається список обраних товарів (рис. В.5). 
Користувач може: 
− змінювати кількість товарів; 
− видаляти товари; 
− бачити загальну суму замовлення. 
 
60 
 
 
Рисунок В.5 – Оформлення замовлення 
 Сторінка замовлення складається з (рис. В.6): 
− форми введення даних; 
− блоку з підсумком замовлення. 
Відображається підсумок: 
− список товарів; 
− загальна сума замовлення; 
− кнопка «Оформити замовлення». 
Після натискання кнопки «Оформити замовлення» формується замовлення. 
 
61 
 
 
Рисунок В.6 – Підсумок замовлення 
  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
62 
 
ДОДАТОК Г 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ІНФОРМАЦІЙНИЙ САЙТ МАГАЗИНУ З ПРОДАЖУ АВТОМОБІЛЬНИХ 
ШИН ТА ДИСКІВ 
 
 
 
 
Структура бази даних 
482. ЧДТУ. 62255-01 90 01 
 
Листів 2 
 
 
 
 
 
 
Розробник    _____________  Дмитро ХАМЕНУШКО 
 
 
 
 
 
 
 
 
 
 
Черкаси – 2026  
63 
 
 
Рисунок Г.1 – Структура бази даних
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
