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
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/9883| Title: | Вебсервіс оренди автомобілів на базі відкритої JavaScript - бібліотеки React |
| Authors: | Катаєв, Дмитро Сергійович Зелтіньш, Анастасії Юріївні |
| Keywords: | вебсервіс;UI/UX-дизайн;оренда автомобілів;React;фронтенд-розробка;SPA;адаптивний інтерфейс |
| Issue Date: | 9-Jun-2026 |
| Abstract: | Кваліфікаційна робота присвячена проєктуванню та розробці сучасного вебсервісу оренди автомобілів на базі відкритої JavaScript-бібліотеки React. У роботі проведено аналіз предметної області сервісів оренди автомобілів в Україні, досліджено цільову аудиторію, конкурентні платформи та сформульовано функціональні й нефункціональні вимоги до системи. Обґрунтовано вибір React як основного інструменту реалізації. Розроблено архітектуру застосунку, структуру компонентів та адаптивний інтерфейс користувача. Реалізовано ключовий функціонал: реєстрацію та авторизацію користувачів, динамічний пошук і багатокритеріальну фільтрацію автомобілів, перегляд детальної інформації, онлайн-бронювання з автоматичним розрахунком вартості та особистий кабінет із історією замовлень. Маршрутизація виконана за допомогою React Router, управління станом — через React Context API. Проведено комплексне тестування (модульне, інтеграційне, продуктивності) та перевірку адаптивності на різних пристроях. Отримані результати підтверджують високу продуктивність, зручність користування та готовність сервісу до практичного використання. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9883 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Зелтіньш _WEB-2211.pdf Restricted Access | 2.07 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
Кафедра інформаційних технологій проектування
Пояснювальна записка
до кваліфікаційної роботи
_______________________________бакалавра_____________________________
(освітньо-кваліфікаційний рівень)
на тему: “Вебсервіс оренди автомобілів на базі відкритої JavaScript - бібліотеки
React”
Виконав: студент 4 курсу, групи Web-2211
Спеціальність 126 “Інформаційні
системи та технології”
ОП “Web-технології, Web-дизайн”
Зелтіньш А.Ю.
Керівник ______Катаєв Д.С._______
(прізвище та ініціали)
Рецензент Чичужко М.В._
(прізвище та ініціали)
Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
(назва вузу)
Факультет ФІТІС Кафедра Інформаційних технологій проєктування
Освітній рівень бакалавр
Спеціальність 126 “Інформаційні системи та технології”
Освітня програма “Web-технології Web-дизайн”
ЗАТВЕРДЖУЮ:
зав.Кафедри Прокопенко Т.О.
“______” __________________2026р.
ЗАВДАННЯ
На кваліфікаційну роботу студентці
Зелтіньш Анастасії Юріївні
1. Тема проекту (роботи) Вебсервіс оренди автомобілів на базі відкритої JavaScript - бібліотеки React
Керівник проекту(роботи) КАТАЄВ Д., к.т.н., ст.в..
Затверджена наказом Черкаського державного технологічного університету № 56/03 від 12.03.2026
2. Строк подання студентом роботи 5 червня 2026 р.
3. Вихідні дані до проекту (роботи) Середовище розробки VS Code / WebStorm; Node.js; бібліотека React; інструменти
маршрутизації (React Router), управління станом (Zustand / Redux Toolkit), стилізації (Tailwind CSS / Material UI).
4. Зміст розрахунково-пояснювальної записки (перелік питань, що їх належить розробити)
ВСТУП;
АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ТЕХНОЛОГІЙ РОЗРОБКИ ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ;
1.1 Аналіз предметної області сервісів оренди автомобілів;
1.2 Дослідження цільової аудиторії та вимог користувачів до вебсервісу;
1.3 Огляд конкурентних вебплатформ в області сервісів оренди автомобілів;
1.4 Огляд сучасних технологій веб-розробки;
Висновки до розділу 1;
ПРОЄКТУВАННЯ ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ НА ОСНОВІ REACT;
2.1 Аналіз функціональних та нефункціональних вимог до вебсервісу оренди автомобілів;
2.2 Порівняльний аналіз JavaScript-фреймворків та бібліотек (React, Vue.js, Angular);
2.3 Обґрунтування вибору бібліотеки React для реалізації вебсервісу;
2.4 Проєктування архітектури вебсервісу та структури компонентів;
2.5 Розробка дизайну інтерфейсу користувача (UI/UX);
2.6 Проєктування системи пошуку, фільтрації та бронювання автомобілів;
Висновки до розділу 2;
РЕАЛІЗАЦІЯ, ТЕСТУВАННЯ ТА ОПТИМІЗАЦІЯ ВЕБСЕРВІСУ;
3.1 Реалізація функціоналу вебсервісу;
3.2 Налаштування маршрутизації та управління станом у React;
3.3 Інтеграція вебсервісу з API для обробки даних;
3.4 Проведення модульного, інтеграційного тестування компонентів та продуктивності вебсервісу;
3.5 Перевірка адаптивності вебсервісу на різних пристроях (ПК, мобільні гаджети);
3.6 Аналіз результатів тестування та вдосконалення системи;
Висновки до розділу 3;
ВИСНОВКИ; СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ; ДОДАТКИ.
5. Консультанти з проекту із зазначенням розділів проекту, що їх стосуються
Підпис, дата
Розділ Консультант
Завдання видав,
Завдання прийняв
6. Дата видачі завдання 1 березня 2026 р.
Керівник Катаєв Д.С.
(підпис)
Завдання прийняв до виконання ________
(підпис)
Календарний план
Пор. Назва етапів дипломного проекту Термін виконання етапів Примітка
№ проекту
1 Підготовча стадія
1.1 Постановка задачі 14.02.2026 Виконано
1.2 Підготовка завдання 21.02.2026 Виконано
1.3 Погодження завдання 25.02.2026 Виконано
1.4 Затвердження завдання 10.03.2026 В иконано
2 Основна стадія
2.1 Підбір матеріалів 14.03.2026 Виконано
2.2 Аналіз шляхів рішення задачі 28.03.2026 Виконано
2.3 Розрахунок основних параметрів 15.04.2026 Виконано
роботи
2.4 Вибір кінцевого варіанту 28.04.2026 Виконано
проектного рішення
2.5 Оформлення первісної редакції 09.05.2026 Виконано
роботи
3 Заключна стадія
3.1 Узгодження проектних рішень з 16.05.2026 Виконано
керівником
3.2 Оформлення пояснювальної 18.05.2026 Виконано
записки
3.3 Попередній захист роботи 01.06.2026 Виконано
3.4 Затвердження роботи 06.06.2026 Виконано
3.5 Рецензування роботи 08.06.2026 Виконано
3.6 Захист роботи 09.06.2026
Студент-дипломник ______________________________________________
(підпис) (ПІБ)
Керівник проекту ______________________________________________
АНОТАЦІЯ
Кваліфікаційна робота присвячена проєктуванню та розробці сучасного
вебсервісу оренди автомобілів на базі відкритої JavaScript-бібліотеки React. У
роботі проведено аналіз предметної області сервісів оренди автомобілів в Україні,
досліджено цільову аудиторію, конкурентні платформи та сформульовано
функціональні й нефункціональні вимоги до системи. Обґрунтовано вибір React як
основного інструменту реалізації.
Розроблено архітектуру застосунку, структуру компонентів та адаптивний
інтерфейс користувача. Реалізовано ключовий функціонал: реєстрацію та
авторизацію користувачів, динамічний пошук і багатокритеріальну фільтрацію
автомобілів, перегляд детальної інформації, онлайн-бронювання з автоматичним
розрахунком вартості та особистий кабінет із історією замовлень. Маршрутизація
виконана за допомогою React Router, управління станом — через React Context API.
Проведено комплексне тестування (модульне, інтеграційне, продуктивності)
та перевірку адаптивності на різних пристроях. Отримані результати
підтверджують високу продуктивність, зручність користування та готовність
сервісу до практичного використання.
Ключові слова: вебсервіс, оренда автомобілів, React, фронтенд-розробка,
SPA, UI/UX-дизайн, адаптивний інтерфейс.
ANNOTATION
The bachelor's qualification work is devoted to the design and development of a
modern car rental web service based on the open-source JavaScript library React. The
paper analyzes the subject area of car rental services in Ukraine, studies the target
audience and competitive platforms, and formulates functional and non-functional
requirements for the system. The choice of React as the main implementation tool is
substantiated.
The application architecture, component structure, and responsive user interface
were developed. The key functionality was implemented: user registration and
authorization, dynamic search and multi-criteria filtering of cars, viewing detailed
information, online booking with automatic cost calculation, and a personal account with
booking history. Routing was implemented using React Router, and state management
was handled through React Context API.
Comprehensive testing (unit, integration, performance) and adaptability testing on
various devices were conducted. The obtained results confirm high performance, user-
friendliness, and the service’s readiness for practical use.
Keywords: web service, car rental, React, frontend development, SPA, UI/UX
design, responsive interface.
ПЕРЕЛІК ВИКОРИСТАНИХ СКОРОЧЕНЬ ТА ПОЗНАЧЕНЬ
API – Application Programming Interface (інтерфейс програмування додатків)
CSS – Cascading Style Sheets (каскадні таблиці стилів)
DOM – Document Object Model (об’єктна модель документа)
HTML – HyperText Markup Language (мова гіпертекстової розмітки)
HTTP – HyperText Transfer Protocol
HTTPS – HyperText Transfer Protocol Secure
JS – JavaScript
JSON – JavaScript Object Notation
JSX – JavaScript XML
PWA – Progressive Web App (прогресивний веб-додаток)
React – JavaScript-бібліотека для створення користувацьких інтерфейсів
REST – Representational State Transfer (архітектурний стиль передачі стану)
SEO – Search Engine Optimization (оптимізація для пошукових систем)
SPA – Single Page Application (односторінковий застосунок)
UI – User Interface (інтерфейс користувача)
UX – User Experience (користувацький досвід)
VDOM – Virtual DOM (віртуальна модель об’єктів документа)
CRUD – Create, Read, Update, Delete (створення, читання, оновлення, видалення)
ЗМІСТ
ВСТУП .............................................................................................................................. 3
РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ТЕХНОЛОГІЙ РОЗРОБКИ
ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ ..................................................................... 6
1.1 Аналіз предметної області сервісів оренди автомобілів ....................................... 6
1.2 Дослідження цільової аудиторії та вимог користувачів до вебсервісу ............... 8
1.3 Огляд конкурентних вебплатформ в області сервісів оренди автомобілів ....... 10
1.4 Огляд сучасних технологій веб-розробки ............................................................ 16
Висновки до розділу 1 .................................................................................................. 20
РОЗДІЛ 2. ПРОЄКТУВАННЯ ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ НА
ОСНОВІ REACT............................................................................................................ 21
2.1 Аналіз функціональних та нефункціональних вимог до вебсервісу оренди
автомобілів ..................................................................................................................... 21
2.2 Порівняльний аналіз JavaScript-фреймворків та бібліотек (React, Vue.js,
Angular) ........................................................................................................................... 23
2.3 Обґрунтування вибору бібліотеки React для реалізації вебсервісу ................... 25
2.4 Проєктування архітектури вебсервісу та структури компонентів ..................... 26
2.5 Розробка дизайну інтерфейсу користувача (UI/UX) ........................................... 27
2.6 Проєктування системи пошуку, фільтрації та бронювання автомобілів .......... 31
Висновки до розділу 2 .................................................................................................. 32
РОЗДІЛ 3. РЕАЛІЗАЦІЯ, ТЕСТУВАННЯ ТА ОПТИМІЗАЦІЯ ВЕБСЕРВІСУ ..... 34
3.1 Реалізація функціоналу вебсервісу ........................................................................ 34
3.2 Налаштування маршрутизації та управління станом у React ............................. 35
3.3 Інтеграція вебсервісу з API для обробки даних ................................................... 36
3.4 Проведення модульного, інтеграційного тестування компонентів та
продуктивності вебсервісу ........................................................................................... 38
3.5 Перевірка адаптивності вебсервісу на різних пристроях (ПК, мобільні гаджети)
......................................................................................................................................... 40
3.6 Аналіз результатів тестування та вдосконалення системи ................................. 42
Висновки до розділу 3 .................................................................................................. 44
ВИСНОВКИ ................................................................................................................... 46
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 48
ДОДАТОК А ТИТУЛЬНИЙ АРКУШ ......................................................................... 52
ДОДАТОК Б ОСНОВНИЙ КОД ЗАСТОСУНКУ ..................................................... 53
ЧДТУ 262202.001.ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Літ. Лист Листів
Перев. Катаєв Д.С. «Вебсервіс оренди автомобілів на базі Н 2 56
Реценз.. Чичужко М. В відкритої JavaScript - бібліотеки React»
Пояснювальна записка ФІТІС,
Н.контр. Катаєв Д.С.
кафедра ІТП, WEB-2209
Затв. ПрокопенкоТ.О.
ВСТУП
У сучасному світі, де цифрова трансформація охоплює всі сфери
господарської діяльності, ринок послуг оренди автомобілів в Україні демонструє
стійку тенденцію до переходу від традиційних офлайн-моделей до сучасних
онлайн-платформ. Зростання популярності концепції sharing economy, підвищення
мобільності населення, розвиток внутрішнього туризму та відновлення економіки
після викликів воєнного часу зумовили значне збільшення попиту на зручні,
швидкі та доступні сервіси оренди транспортних засобів. За даними аналітичних
досліджень, ринок оренди легкових автомобілів в Україні щорічно демонструє
позитивну динаміку, а користувачі все частіше віддають перевагу цифровим
рішенням, які дозволяють здійснювати бронювання в режимі реального часу,
порівнювати пропозиції, фільтрувати автомобілі за параметрами та отримувати
миттєве підтвердження без відвідування офісів орендодавців.
Разом з тим, більшість існуючих українських вебплатформ оренди
автомобілів характеризуються застарілим інтерфейсом користувача, недостатньою
адаптивністю під мобільні пристрої, повільною роботою при великих обсягах
даних та обмеженими можливостями персоналізації. Це створює значні
незручності для кінцевих користувачів та знижує конкурентоспроможність сервісів
на ринку. У таких умовах особливо актуальним стає створення сучасного
вебсервісу оренди автомобілів, побудованого з використанням прогресивних
фронтенд-технологій, які забезпечують високу швидкість роботи, гнучкість та
інтуїтивно зрозумілий інтерфейс.
Мета кваліфікаційної роботи полягає в розробці повнофункціонального
вебсервісу оренди автомобілів на базі відкритої JavaScript-бібліотеки React, що
відповідає сучасним вимогам до зручності, продуктивності та масштабованісті
вебдодатків.
Для досягнення поставленої мети передбачається вирішити такі задачі:
провести аналіз предметної області сервісів оренди автомобілів та
дослідити потреби цільової аудиторії;
Лист
ЧДТУ 262202.001.ПЗ 3
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
здійснити огляд конкурентних вебплатформ та визначити їхні сильні та
слабкі сторони;
проаналізувати сучасні технології веб-розробки та порівняти
найпопулярніші JavaScript-фреймворки і бібліотеки;
обґрунтувати вибір бібліотеки React як основного інструменту реалізації;
сформулювати функціональні та нефункціональні вимоги до вебсервісу;
спроєктувати архітектуру системи, структуру компонентів та дизайн
інтерфейсу користувача (UI/UX);
реалізувати ключовий функціонал пошуку, фільтрації, бронювання та
управління станом додатка;
налаштувати маршрутизацію та інтеграцію з бекенд-API;
провести комплексне тестування (модульне, інтеграційне, продуктивності
та адаптивності) і здійснити оптимізацію вебсервісу.
Об’єктом дослідження є процес проєктування та розробки вебсервісу оренди
автомобілів.
Предметом дослідження виступають методи та технології створення
сучасного фронтенд-додатка на базі бібліотеки React, зокрема архітектура
компонентів, управління станом, маршрутизація та оптимізація продуктивності.
У роботі застосовано методи системного аналізу предметної області,
порівняльного аналізу технологій, моделювання UI/UX, програмування на
JavaScript з використанням React, а також методи модульного, інтеграційного та
навантажувального тестування.
Практична цінність роботи полягає у створенні готового до впровадження
вебсервісу, який може бути використаний як самостійна платформа або
інтегрований у існуючі системи оренди автомобілів. Розроблений продукт
демонструє сучасні підходи до фронтенд-розробки, забезпечує високу якість
користувацького досвіду та відповідає актуальним вимогам ринку інформаційних
технологій.
Лист
ЧДТУ 262202.001.ПЗ 4
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Структура кваліфікаційної роботи відповідає поставленим завданням і
складається з вступу, трьох розділів, висновків, списку використаних джерел та
додатків. У першому розділі здійснено аналіз предметної області та сучасних
технологій веб-розробки. Другий розділ присвячено проєктуванню вебсервісу на
базі React. Третій розділ містить результати реалізації, тестування та оптимізації
системи. У висновках підбито підсумки роботи та визначено перспективи
подальшого розвитку проекту.
Лист
ЧДТУ 262202.001.ПЗ 5
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
РОЗДІЛ 1. АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ТЕХНОЛОГІЙ
РОЗРОБКИ ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ
1.1 Аналіз предметної області сервісів оренди автомобілів
Сервіси оренди автомобілів представляють собою одну з ключових
складових сучасної економіки спільного користування (sharing economy), яка
передбачає тимчасове надання транспортних засобів в користування фізичним або
юридичним особам на платній основі без переходу права власності. Предметна
область охоплює як класичні моделі довгострокової оренди, так і сучасні форми
каршерінгу та P2P-платформ, де оренда відбувається безпосередньо між
власниками та користувачами. У контексті України розвиток цієї сфери набуває
особливого значення через зростання мобільності населення, розвиток
внутрішнього туризму та необхідність альтернативних рішень для пересування в
умовах обмеженого доступу до власного транспорту.
Історично ринок оренди автомобілів в Україні формувався під впливом
загальносвітових тенденцій. Якщо на початку 2000-х років домінували традиційні
прокатні компанії з офлайн-офісами, то з поширенням інтернет-технологій і
смартфонів відбулася цифрова трансформація. Сьогодні сервіси оренди
автомобілів інтегрують онлайн-платформи, мобільні додатки та системи
геолокації, що дозволяє користувачам бронювати транспорт у реальному часі. За
даними аналітичних досліджень, ємність ринку оренди легкових автомобілів в
Україні, незважаючи на певне скорочення в 2022 році через воєнні події,
демонструє відновлення та стабільне зростання [1].
Сучасний стан ринку характеризується значним впливом економічних та
соціальних факторів. У 2024–2025 роках спостерігається стійке відновлення попиту
на послуги оренди, зумовлене відновленням внутрішнього туризму, бізнес-
поїздками та потребою в альтернативному транспорті для мешканців великих міст.
Згідно з оцінками експертів, короткострокова оренда та каршерінг стають дедалі
популярнішими, особливо в Києві, Львові та Одесі. Ринок каршерінгу в Україні
Лист
ЧДТУ 262202.001.ПЗ 6
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
активно розвивається, пропонуючи похвилинну оренду автомобілів через мобільні
застосунки, що робить послугу доступною для широкого кола користувачів [2].
Однією з ключових тенденцій є зростання популярності оренди автомобілів
у 2026 році. Аналітики прогнозують подальше розширення сегменту завдяки
економічній доцільності для користувачів порівняно з купівлею власного авто, а
також гнучкості тарифів. Оренда авто в Україні 2026 року залишається вигідною
альтернативою, особливо для туристичних поїздок та тимчасових потреб, з
урахуванням реальних цін та умов ринку [3]. Провідні оператори, такі як Avis
Україна, успішно адаптувалися до воєнних умов, зберігаючи стабільність
пропозиції та якості послуг, що свідчить про високу стійкість галузі [5].
Серед основних драйверів розвитку предметної області слід виділити:
зростання попиту на екологічно чисті транспортні засоби (електромобілі та
гібриди);
інтеграцію цифрових технологій для автоматизації бронювання та оплати;
розширення P2P-моделей оренди, що зменшують посередницькі витрати;
сезонні фактори, пов’язані з туризмом та бізнес-активністю.
Разом з тим, ринок стикається з низкою викликів. Серед них – вплив воєнного
стану на споживчу аудиторію, логістичні труднощі, коливання валютних курсів та
необхідність забезпечення високого рівня безпеки транспортних засобів. Аналіз
перспектив розвитку проєктів каршерінгу в Україні показує, що успішна реалізація
залежить від вирішення цих проблем шляхом впровадження сучасних IT-рішень та
державної підтримки галузі [6].
Важливим аспектом предметної області є сегментація послуг. Класична
оренда орієнтована на довгострокове користування (від кількох днів до місяців),
тоді як каршерінг пропонує короткострокові поїздки (похвилинно або погодинно).
Обидва сегменти доповнюють один одного та сприяють загальному зростанню
ринку. У великих містах спостерігається перехід від традиційного прокату до
цифрових сервісів, що забезпечують миттєвий доступ до автомобіля без
відвідування офісів.
Лист
ЧДТУ 262202.001.ПЗ 7
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Предметна область сервісів оренди автомобілів в Україні характеризується
динамічним розвитком, цифровою трансформацією та адаптацією до нових
економічних реалій. Аналіз свідчить про високий потенціал для створення
сучасних вебсервісів, які поєднують зручність користування, прозорість тарифів та
інтеграцію з актуальними технологіями. Подальший розвиток галузі безпосередньо
пов’язаний з інноваціями в IT-сфері, що робить тему кваліфікаційної роботи
особливо актуальною.
1.2 Дослідження цільової аудиторії та вимог користувачів до вебсервісу
Дослідження цільової аудиторії є ключовим етапом проєктування сучасного
вебсервісу оренди автомобілів, оскільки саме від її потреб і поведінки залежить
ефективність інтерфейсу, функціональності та загальної конкурентоспроможності
платформи. Цільова аудиторія сервісів оренди автомобілів в Україні формується
під впливом соціально-економічних факторів, рівня цифризації населення та
специфіки мобільності в умовах відновлення економіки. Основними
користувачами виступають жителі великих міст, представники середнього класу та
туристи, які віддають перевагу зручним онлайн-рішенням замість традиційного
прокату [4].
Аналіз демографічних та поведінкових характеристик дозволяє виділити
кілька основних сегментів цільової аудиторії:
молодь та молоді професіонали віком 18–35 років, які активно
користуються смартфонами та віддають перевагу короткостроковій оренді
для поїздок містом або на вихідні;
бізнес-користувачі віком 30–45 років, які потребують надійного та
швидкого бронювання автомобілів преміум-класу для ділових поїздок;
туристи та внутрішні мандрівники, які шукають зручний спосіб оренди для
подорожей Україною;
сім’ї та групи друзів, зацікавлені в оренді містких автомобілів на кілька
днів;
Лист
ЧДТУ 262202.001.ПЗ 8
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
корпоративні клієнти, які використовують сервіс для забезпечення
транспортом співробітників.
Кожен сегмент характеризується високим рівнем цифрової грамотності та
очікуванням миттєвого доступу до послуг через сучасний вебінтерфейс.
Дослідження ринку каршерінгу в Україні підтверджує, що понад 70 % потенційних
користувачів віддають перевагу мобільним та вебплатформам з інтуїтивним
дизайном і швидким оформленням бронювання [7].
Для уточнення потреб користувачів проведено аналіз вимог на основі
вивчення поведінки аудиторії провідних українських прокатних компаній.
Користувачі очікують насамперед зручності, безпеки даних та швидкості роботи
сервісу. Найважливішими є можливість швидкого пошуку та фільтрації
автомобілів за маркою, ціною, типом кузова та наявністю додаткових опцій, а
також інтеграція з системами онлайн-оплати та підтвердженням бронювання в
реальному часі [8].
Основні вимоги користувачів до вебсервісу оренди автомобілів
систематизовано в таблиці.
Таблиця 1.1 – Основні вимоги користувачів до вебсервісу оренди автомобілів
№ Категорія вимог Конкретні вимоги користувачів Пріоритет
Швидкий пошук і фільтрація
1 Функціональні автомобілів, онлайн-бронювання, Високий
особистий кабінет, система відгуків
Адаптивний дизайн (ПК та мобільні
2 Нефункціональні пристрої), швидкість завантаження Високий
сторінок до 2 секунд
Захист персональних даних, безпечна
Безпека та
3 оплата, підтвердження бронювання Критичний
конфіденційність
SMS/e-mail
Зручність Інтуїтивний інтерфейс, мультимовність,
4 Високий
користування можливість порівняння автомобілів
Лист
ЧДТУ 262202.001.ПЗ 9
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Калькулятор вартості, рекомендації за
5 Додаткові сервіси Середній
профілем, чат-підтримка
Джерело: складено автором на основі аналізу ринку та відгуків користувачів.
Дослідження вимог користувачів також показує значну роль SEO-оптимізації
та просування сервісу, оскільки потенційні клієнти шукають послуги оренди саме
через пошукові системи. Ефективне просування онлайн-сервісу оренди авто
дозволяє значно підвищити охоплення цільової аудиторії та конверсію відвідувачів
у зареєстрованих користувачів [9].
Крім того, аналіз ринку каршерінгу в Україні 2023 року свідчить, що
користувачі особливо чутливі до прозорості тарифів, відсутності прихованих
платежів та можливості бронювання без передоплати в певних випадках. Саме ці
аспекти стають вирішальними при виборі конкретної платформи серед конкурентів
[10].
Чітке розуміння портрету цільової аудиторії та її вимог дозволяє сформувати
технічне завдання для розробки вебсервісу, орієнтованого на реальні потреби
користувачів. Отримані дані будуть покладені в основу проєктування інтерфейсу
та функціональності системи в наступних розділах роботи.
1.3 Огляд конкурентних вебплатформ в області сервісів оренди автомобілів
Огляд конкурентних вебплатформ є важливим етапом аналізу предметної
області, оскільки дозволяє виявити актуальні тенденції розвитку ринку, оцінити
рівень технологічної зрілості існуючих рішень та сформувати конкурентні
переваги розроблюваного вебсервісу. На ринку України представлено як
міжнародні, так і локальні сервіси оренди та каршерінгу, які відрізняються
моделлю бізнесу, функціональністю та якістю користувацького досвіду [5].
Провідним українським сервісом каршерінгу є Getmancar. Платформа
пропонує похвилинну, погодинну та добову оренду автомобілів через сучасний
вебінтерфейс та мобільний застосунок. Сильними сторонами є швидке
Лист
ЧДТУ 262202.001.ПЗ 10
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
бронювання, геолокація вільних авто, гнучкі тарифи та широка мережа в Києві,
Дніпрі та Львові.
Переваги платформи Getmancar:
миттєве бронювання від 1 хвилини;
прозорі ціни без прихованих платежів;
інтеграція з GPS та онлайн-оплатою;
великий вибір автомобілів економ- та бізнес-класу.
Недоліки:
обмежена доступність у регіонах поза великими містами;
періодичні технічні збої під час пікових навантажень;
недостатня персоналізація рекомендацій для користувачів.
Рисунок 1.1 – Головна сторінка вебсервісу Getmancar
Одним із найвідоміших міжнародних операторів є Avis Україна. Сервіс
орієнтований на класичну довгострокову оренду автомобілів преміум- і економ-
класу з широкою мережею пунктів видачі. Платформа забезпечує високий рівень
сервісу, повне страхове покриття та можливість бронювання по всій Україні та
Європі [5].
Переваги Avis Україна:
надійність та високий стандарт обслуговування;
Лист
ЧДТУ 262202.001.ПЗ 11
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
великий автопарк нових автомобілів;
гнучкі умови для корпоративних клієнтів;
можливість доставки авто до аеропортів та вокзалів.
Недоліки:
застарілий дизайн інтерфейсу;
повільне завантаження сторінок при великому обсязі даних;
відсутність сучасних функцій персоналізації та рекомендацій.
Рисунок 1.2 – Сторінка пошуку та бронювання сервісу Avis Україна
Значне місце на ринку посідає агрегатор Rental.ua, який об’єднує пропозиції
від різних орендодавців і пропонує експрес-доставку автомобілів. Сервіс
вирізняється зручним порівнянням цін та умов оренди, а також можливістю
бронювання без застави в окремих тарифах [8].
Переваги Rental.ua:
швидка доставка авто за адресою протягом 1 години;
прозорий прайс-лист та повне страхування;
широкий вибір автомобілів у 9 містах України;
підтримка 24/7.
Недоліки:
відсутність єдиної системи реального часу для управління бронюваннями;
Лист
ЧДТУ 262202.001.ПЗ 12
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
не завжди інтуїтивна система фільтрації;
залежність від сторонніх орендодавців.
Рисунок 1.3 – Інтерфейс порівняння пропозицій на платформі Rental.ua
Серед P2P-платформ виділяється MyCar.ua, яка дозволяє орендувати
автомобілі безпосередньо від приватних власників та компаній. Сервіс забезпечує
страхове покриття та верифікацію учасників, пропонуючи нижчі ціни порівняно з
традиційними компаніями [10].
Переваги MyCar.ua:
доступні тарифи завдяки відсутності посередників;
великий вибір приватних автомобілів;
проста процедура бронювання через сайт та застосунок;
гнучкість умов оренди.
Недоліки:
менша надійність транспортних засобів;
складніша процедура перевірки авто;
обмежена кількість пропозицій у невеликих містах.
Лист
ЧДТУ 262202.001.ПЗ 13
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 1.4 – Головна сторінка сервісу P2P-оренди MyCar.ua
Ще одним конкурентним рішенням є Ukr-Prokat – спеціалізований сервіс
добової та довгострокової оренди автомобілів по всій Україні. Платформа
пропонує сучасний підхід до бронювання з акцентом на бюджетні та
середньокласні моделі.
Переваги Ukr-Prokat:
швидке онлайн-бронювання без водія;
наявність мобільного застосунку;
широкий географічний охват;
спеціальні пропозиції для довгострокової оренди.
Недоліки:
обмежений вибір преміум-автомобілів;
менш розвинена система персоналізації;
залежність від сезонного попиту.
Лист
ЧДТУ 262202.001.ПЗ 14
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 1.5 – Інтерфейс вибору автомобілів на платформі Ukr-Prokat
Для об’єктивної оцінки конкурентного середовища проведено порівняльний
аналіз основних платформ за ключовими критеріями.
Таблиця 1.2 – Порівняльний аналіз конкурентних вебплатформ оренди
автомобілів
Модель Ключові Сильні Слабкі Рівень
Платформа
бізнесу функції сторони сторони UI/UX
Геолокація, Швидкість, Обмежена
Каршерінг
Getmancar миттєве гнучкість регіональна Високий
+ прокат
бронювання тарифів доступність
Широка
Avis Класичний мережа, Надійність, Застарілий
Середній
Україна прокат корпоративні страхування дизайн
умови
Відсутність
Доставка, Швидка
єдиного
Rental.ua Агрегатор порівняння доставка, Високий
реального
цін прозорість
часу
Лист
ЧДТУ 262202.001.ПЗ 15
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Нижча
P2P- Оренда від Низькі ціни,
MyCar.ua надійність Середній
оренда власників гнучкість
авто
Мобільний Обмежений
Добова додаток, Географічний вибір
Ukr-Prokat Середній
оренда довгострокова охват преміум-
оренда моделей
Джерело: складено автором на основі аналізу вебплатформ.
Порівняльний аналіз конкурентних платформ демонструє, що більшість
сервісів мають спільні недоліки: недостатню адаптивність інтерфейсу під різні
пристрої, повільну роботу при великих обсягах даних, обмежені можливості
управління станом бронювання в реальному часі та недостатню інтеграцію
сучасних фронтенд-технологій [2]. Міжнародні агрегатори вирізняються вищим
рівнем UI/UX, однак часто не враховують специфіку українського законодавства та
платіжних систем [9].
Огляд конкурентного середовища підтверджує наявність значних прогалин у
сфері зручності, швидкості та сучасності технологічного стеку. Розроблюваний
вебсервіс оренди автомобілів на базі React має всі можливості усунути зазначені
недоліки завдяки сучасній архітектурі компонентів, швидкому рендерингу,
інтуїтивному адаптивному дизайну та ефективному управлінню станом, що
забезпечить йому вищу конкурентоспроможність на ринку сервісів оренди
автомобілів в Україні.
1.4 Огляд сучасних технологій веб-розробки
Сучасні технології веб-розробки характеризуються швидким розвитком
інструментів, фреймворків та бібліотек, що забезпечують високу продуктивність,
масштабованість та зручність створення користувацьких інтерфейсів. У контексті
проєктування вебсервісу оренди автомобілів особливо актуальними є фронтенд-
технології, які дозволяють реалізувати інтерактивний, адаптивний та швидкий
Лист
ЧДТУ 262202.001.ПЗ 16
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
інтерфейс з мінімальними витратами на підтримку. Основним трендом останніх
років є перехід від традиційних сервер-сайд рендерингу до клієнт-сайд архітектури
з використанням JavaScript-бібліотек та фреймворків, що забезпечують
компонентний підхід до розробки [11].
Сучасний стек веб-розробки включає низку ключових технологій та підходів:
компонентна архітектура, що дозволяє перевикористовувати код та
спрощує підтримку великих додатків;
віртуальний DOM для ефективного оновлення інтерфейсу без повного
перезавантаження сторінки;
сучасні інструменти керування станом (state management), які
забезпечують передбачувану поведінку додатка;
прогресивні веб-додатки (PWA), що поєднують переваги веб- та мобільних
застосунків;
TypeScript як надбудова над JavaScript для підвищення типізації та
зменшення помилок;
інструменти автоматизації збірки (Vite, Webpack) та тестування (Jest, React
Testing Library).
Особливе місце в сучасній веб-розробці посідають JavaScript-фреймворки та
бібліотеки. Серед них найпопулярнішими залишаються React, Vue.js та Angular,
кожен з яких має свої сильні сторони щодо швидкості розробки, продуктивності та
гнучкості [16].
Порівняльний аналіз основних JavaScript-фреймворків та бібліотек наведено
в таблиці.
Таблиця 1.3 – Порівняльний аналіз JavaScript-фреймворків та бібліотек
Vue.js Angular
Параметр React (бібліотека)
(фреймворк) (фреймворк)
Підхід до Компонентний, Компонентний, Повноцінний
розробки гнучкий прогресивний фреймворк з MVC
Крива навчання Низька Низька Висока
Лист
ЧДТУ 262202.001.ПЗ 17
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Висока Висока
Середня (залежить
Продуктивність (віртуальний (віртуальний
від конфігурації)
DOM) DOM)
Context API + Вбудований RxJS
Керування станом Pinia / Vuex
Redux / Zustand + NgRx
Розмір бібліотеки Малий (~42 КБ) Малий (~23 КБ) Великий (~500 КБ)
Підтримка Вбудована
Відмінна Відмінна
TypeScript (обов’язкова)
Популярність у
Найвища Висока Стабільна
2025 році
Джерело: складено автором на основі [17; 19].
React як бібліотека для побудови користувацьких інтерфейсів вирізняється
гнучкістю та мінімалізмом, дозволяючи розробникам обирати необхідні
інструменти для конкретного проєкту. Офіційна документація підкреслює
простоту інтеграції з іншими бібліотеками та швидкість рендерингу завдяки
віртуальному DOM [11]. У порівнянні з іншими рішеннями React демонструє
найкращий баланс між продуктивністю та зручністю розробки, особливо для
складних динамічних вебсервісів, таких як платформи оренди автомобілів [17].
Важливим аспектом сучасних технологій є ефективна архітектура React-
додатків. Рекомендується використовувати компонентний підхід з чітким
розподілом на презентаційні та контейнерні компоненти, що спрощує тестування
та масштабованість проєкту [26]. Крім того, актуальними залишаються сучасні
рішення керування станом, які дозволяють уникнути надмірної складності при
роботі з великими обсягами даних про автомобілі, бронювання та користувачів.
Огляд сучасних технологій веб-розробки свідчить про домінування
компонентних JavaScript-рішень, серед яких React посідає лідируючі позиції
завдяки своїй гнучкості, продуктивності та активній спільноті. Використання цих
технологій у розробці вебсервісу оренди автомобілів забезпечить високу швидкість
роботи, адаптивність інтерфейсу та зручність підтримки в майбутньому.
Лист
ЧДТУ 262202.001.ПЗ 18
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Результати проведеного аналізу будуть покладені в основу вибору технологічного
стеку та проєктування системи в наступному розділі.
Висновки до розділу 1
У першому розділі кваліфікаційної роботи проведено комплексний аналіз
предметної області сервісів оренди автомобілів, досліджено цільову аудиторію та
її вимоги, здійснено огляд конкурентних вебплатформ та сучасних технологій веб-
розробки.
Аналіз предметної області показав, що ринок оренди автомобілів в Україні
демонструє стабільне відновлення та зростання після воєнних викликів.
Провідними драйверами розвитку галузі є цифрова трансформація послуг,
поширення концепції sharing economy, зростання внутрішнього туризму та попит
на гнучкі форми оренди (каршерінг, P2P-оренда). Водночас ринок стикається з
проблемами регіональної нерівності, логістичними обмеженнями та необхідністю
підвищення рівня сервісу через сучасні IT-рішення.
Дослідження цільової аудиторії підтвердило, що основними користувачами
вебсервісу є молодь та молоді професіонали (18–35 років), бізнес-клієнти, туристи
та корпоративні замовники. Користувачі висувають високі вимоги до швидкості
бронювання, адаптивності інтерфейсу, безпеки даних та зручності
персоналізованого пошуку. Систематизація цих вимог дозволила чітко визначити
пріоритети майбутньої розробки.
Огляд конкурентних вебплатформ (Getmancar, Avis Україна, Rental.ua,
MyCar.ua, Ukr-Prokat) виявив спільні недоліки існуючих рішень: застарілий дизайн
інтерфейсу, недостатню адаптивність, повільну роботу при великих обсягах даних
та обмежені можливості управління станом у реальному часі. Порівняльний аналіз
продемонстрував наявність значних прогалин, які можна усунути за допомогою
сучасних фронтенд-технологій.
Огляд сучасних технологій веб-розробки підтвердив лідерство JavaScript-
бібліотеки React завдяки її гнучкості, високій продуктивності, компонентній
архітектурі та ефективним інструментам керування станом. Порівняльний аналіз
Лист
ЧДТУ 262202.001.ПЗ 19
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
фреймворків (React, Vue.js, Angular) обґрунтував доцільність вибору React для
реалізації вебсервісу оренди автомобілів.
Результати розділу 1 свідчать про актуальність теми дослідження та
підтверджують необхідність створення сучасного вебсервісу оренди автомобілів на
базі React. Виявлені проблеми конкурентних платформ та чітко сформульовані
вимоги цільової аудиторії створюють надійне підґрунтя для переходу до
проєктування та реалізації системи у наступних розділах роботи.
Лист
ЧДТУ 262202.001.ПЗ 20
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
РОЗДІЛ 2. ПРОЄКТУВАННЯ ВЕБСЕРВІСУ ОРЕНДИ АВТОМОБІЛІВ НА
ОСНОВІ REACT
2.1 Аналіз функціональних та нефункціональних вимог до вебсервісу оренди
автомобілів
Аналіз функціональних та нефункціональних вимог є одним із ключових
етапів проєктування сучасного вебсервісу. Він дозволяє чітко визначити очікувану
поведінку системи, потреби цільової аудиторії та технічні критерії якості, що
забезпечує відповідність розробленого продукту реальним вимогам користувачів
та бізнес-цілям. На основі результатів дослідження предметної області,
конкурентного середовища та портрету цільової аудиторії, проведених у першому
розділі, було сформовано комплекс вимог до вебсервісу оренди автомобілів.
Функціональні вимоги описують, що саме повинен виконувати сервіс, тоді як
нефункціональні визначають, яким чином він має це робити.
Функціональні вимоги визначають основні можливості системи, спрямовані
на задоволення потреб користувачів у пошуку, бронюванні та управлінні орендою
автомобілів. Вони охоплюють повний цикл взаємодії клієнта з платформою – від
реєстрації до завершення оренди.
Таблиця 2.1 – Функціональні вимоги до вебсервісу оренди автомобілів
№ Функціональна вимога Опис Пріоритет
Реєстрація та Створення облікового запису, вхід
1 авторизація через email/телефон або соціальні Критичний
користувачів мережі, відновлення пароля
Пошук за маркою, моделлю, ціною,
Пошук та фільтрація
2 типом кузова, датою, наявністю Критичний
автомобілів
опцій; динамічні фільтри
Перегляд детальної
Відображення характеристик, фото,
3 інформації про Високий
відео, відгуків, доступності
автомобіль
Лист
ЧДТУ 262202.001.ПЗ 21
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Онлайн-бронювання Вибір дати/часу, розрахунок вартості,
4 Критичний
автомобіля підтвердження бронювання
Перегляд історії бронювань,
Особистий кабінет
5 управління профілем, скасування Високий
користувача
замовлень
Джерело: складено автором на основі аналізу вимог цільової аудиторії та
вивчення функціональності конкурентних вебплатформ сервісів оренди
автомобілів (підрозділи 1.2 та 1.3).
Аналіз функціональних вимог показує, що основний акцент робиться на
швидкому та зручному процесі бронювання. Особливо важливою є реалізація
динамічного пошуку та фільтрації, оскільки саме ці функції визначають перше
враження користувача від сервісу. Усі функціональні можливості повинні бути
реалізовані з урахуванням компонентної архітектури React, що забезпечить високу
інтерактивність та швидкість оновлення інтерфейсу.
Нефункціональні вимоги описують якісні характеристики системи, які
безпосередньо впливають на користувацький досвід, продуктивність та безпеку
вебсервісу. Вони є критичними для забезпечення конкурентоспроможності
платформи на ринку.
Таблиця 2.2 – Нефункціональні вимоги до вебсервісу оренди автомобілів
№ Категорія вимог Конкретні вимоги Пріоритет
Час завантаження сторінки ≤ 2
1 Продуктивність секунди; обробка 1000+ одночасних Критичний
користувачів
Повна підтримка ПК, планшетів та
Адаптивність та
2 мобільних пристроїв (responsive Критичний
кросплатформенність
design)
Захист персональних даних (GDPR),
Безпека та
3 HTTPS, безпечна авторизація, Критичний
конфіденційність
захист від атак
Лист
ЧДТУ 262202.001.ПЗ 22
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Інтуїтивний інтерфейс, доступність
Зручність користування
4 (WCAG 2.1), мультимовність Високий
(UX/UI)
(українська/англійська)
Можливість горизонтального
5 Масштабованість масштабування, підтримка Високий
зростання кількості користувачів
Доступність сервісу ≥ 99,5 %,
6 Надійність Високий
автоматичне відновлення після збоїв
Джерело: складено автором.
Нефункціональні вимоги підкреслюють необхідність створення швидкого,
безпечного та зручного вебсервісу, який буде працювати стабільно за будь-яких
умов навантаження. Особлива увага приділяється адаптивності інтерфейсу,
оскільки значна частина цільової аудиторії використовує сервіс через мобільні
пристрої.
Проведений аналіз функціональних та нефункціональних вимог формує чітке
технічне завдання для подальшого проєктування архітектури, дизайну інтерфейсу
та реалізації вебсервісу на базі React. Отримані результати забезпечують
відповідність майбутньої системи реальним потребам користувачів і створюють
надійну основу для наступних етапів роботи.
2.2 Порівняльний аналіз JavaScript-фреймворків та бібліотек (React, Vue.js,
Angular)
Порівняльний аналіз сучасних JavaScript-фреймворків та бібліотек є
важливим етапом обґрунтування вибору технологічного стеку для розробки
вебсервісу оренди автомобілів. У сучасній фронтенд-розробці домінують три
основні рішення: бібліотека React, фреймворк Vue.js та повноцінний фреймворк
Angular. Кожне з них має свої архітектурні особливості, рівень гнучкості,
продуктивність та підходи до керування станом, що безпосередньо впливає на
швидкість розробки, масштабованість та якість кінцевого продукту. Аналіз
проведено за ключовими критеріями, релевантними для створення динамічного
Лист
ЧДТУ 262202.001.ПЗ 23
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
вебсервісу з інтенсивною взаємодією користувача (пошук, фільтрація, бронювання
в реальному часі).
React позиціонується як декларативна бібліотека для побудови компонентних
користувацьких інтерфейсів. Вона пропонує мінімалістичний підхід, дозволяючи
розробнику самостійно обирати інструменти для маршрутизації, керування станом
та стилізації. Основними перевагами є віртуальний DOM, висока продуктивність
оновлення інтерфейсу та величезна екосистема готових рішень.
Vue.js є прогресивним фреймворком, який поєднує простоту вивчення з
потужними можливостями. Він підтримує інкрементальне впровадження і добре
підходить для проєктів середньої складності завдяки вбудованій реактивності та
простоті синтаксису.
Angular є повноцінним фреймворком від Google з жорсткою структурою
MVC/MVVM. Він включає вбудовані інструменти для типізації (TypeScript),
маршрутизації, форм, HTTP-клієнта та тестування, що робить його придатним для
великих корпоративних систем.
Для об’єктивної оцінки основних характеристик фреймворків та бібліотек
складено порівняльну таблицю.
Таблиця 2.3 – Порівняльний аналіз JavaScript-фреймворків та бібліотек
Критерій React Vue.js Angular
Бібліотека
Прогресивний Повноцінний
Тип рішення (компонентний
фреймворк фреймворк (MVC)
підхід)
Крива навчання Низька Найнижча Висока
Висока Висока
Середня (залежить
Продуктивність (віртуальний DOM (віртуальний
від оптимізації)
+ Fiber) DOM)
Вбудований
Context API, Redux,
Керування станом Pinia (Vuex) (NgRx / Services +
Zustand, MobX
RxJS)
Лист
ЧДТУ 262202.001.ПЗ 24
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Розмір бандлу
~42 КБ ~23 КБ ~500 КБ
(мінімальний)
Підтримка Відмінна Вбудована та
Відмінна
TypeScript (опціонально) обов’язкова
React Router Vue Router Angular Router
Маршрутизація
(стороння) (вбудований) (вбудований)
Середні та великі Швидка Великі enterprise-
Підходить для
динамічні проєкти розробка, MVP системи
Розмір спільноти
Найбільша Велика Стабільна
(2025)
Джерело: складено автором на основі актуальних даних екосистеми
фронтенд-розробки.
React вирізняється найбільшою гнучкістю, що дозволяє оптимально
підібрати інструменти саме під потреби вебсервісу оренди автомобілів (динамічні
фільтри, реал-тайм оновлення доступності авто, управління станом бронювань).
Vue.js приваблює швидкістю розробки та простотою, але поступається React у
масштабованісті великих додатків. Angular забезпечує високу структурованість і
вбудовані рішення, проте його значний розмір та строга архітектура роблять його
менш ефективним для клієнт-сайд орієнтованого вебсервісу з високими вимогами
до швидкості завантаження на мобільних пристроях.
Порівняльний аналіз підтверджує, що React пропонує найкращий баланс між
продуктивністю, гнучкістю та швидкістю розробки для створення сучасного
вебсервісу оренди автомобілів. Результати даного підрозділу створюють
передумови для обґрунтування вибору саме цієї бібліотеки як основного
інструменту реалізації проєкту в наступному підрозділі.
2.3 Обґрунтування вибору бібліотеки React для реалізації вебсервісу
На основі проведеного порівняльного аналізу JavaScript-фреймворків та
бібліотек, а також сформованих функціональних і нефункціональних вимог, для
Лист
ЧДТУ 262202.001.ПЗ 25
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
реалізації вебсервісу оренди автомобілів обрано бібліотеку React. Вибір
обґрунтовано такими ключовими перевагами:
висока продуктивність та ефективне оновлення інтерфейсу завдяки
віртуальному DOM і сучасному алгоритму узгодження, що особливо
важливо для динамічних елементів (фільтри пошуку, оновлення
доступності авто в реальному часі, картки транспортних засобів та форми
бронювання);
максимальна гнучкість архітектури, яка дозволяє самостійно формувати
технологічний стек та оптимально підбирати інструменти (React Router,
Zustand/Redux Toolkit, TanStack Query, Tailwind CSS або Material UI) під
конкретні задачі проєкту;
компонентний підхід, що дає змогу створювати модульний,
перевикористовуваний та легко підтримуваний інтерфейс (картки
автомобілів, модальні вікна, система фільтрів, особистий кабінет тощо);
найбільша спільнота розробників, найбагатша екосистема готових
бібліотек та актуальна документація, що значно прискорює розробку та
знижує технічні ризики;
повна відповідність нефункціональним вимогам до швидкості
завантаження, адаптивності під мобільні пристрої, масштабованісті та
зручності користування.
Вибір бібліотеки React є оптимальним технологічним рішенням. Він
забезпечує якісну реалізацію всіх поставлених вимог, створює надійну основу для
подальшого проєктування та розробки вебсервісу оренди автомобілів і гарантує
високу конкурентоспроможність готового продукту.
2.4 Проєктування архітектури вебсервісу та структури компонентів
Архітектура вебсервісу оренди автомобілів побудована на компонентному
підході бібліотеки React, що забезпечує високу модульність,
перевикористовуваність коду та зручність подальшого розвитку системи.
Застосовано однорівневу (flat) структуру з чітким розподілом відповідальності між
Лист
ЧДТУ 262202.001.ПЗ 26
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
компонентами, контекстом стану та даними. Така архітектура відповідає сучасним
практикам розробки SPA та задовольняє усі функціональні та нефункціональні
вимоги, сформовані в підрозділі 2.1.
Основні принципи архітектури:
Компонентний підхід з чітким розділенням на презентаційні та
контейнерні компоненти;
Централізоване керування глобальним станом через React Context
(авторизація);
Розділення на логічні шари: Pages, Components, Context, Data;
Використання LocalStorage для збереження даних користувача та
бронювань;
Маршрутизація за допомогою React Router v6;
Повна адаптивність завдяки Bootstrap 5.
Рисунок 2.1 – Архітектура вебсервісу оренди автомобілів
Запропонована архітектура є простою, масштабовною та повністю відповідає
вимогам до швидкості розробки та продуктивності вебсервісу. Вона дозволяє легко
розширювати функціональність (наприклад, додавати адміністраторську панель
або інтеграцію з реальним API) без значних змін у структурі коду.
2.5 Розробка дизайну інтерфейсу користувача (UI/UX)
Розробка дизайну інтерфейсу користувача (UI/UX) є одним із ключових
етапів створення сучасного вебсервісу, оскільки безпосередньо впливає на
Лист
ЧДТУ 262202.001.ПЗ 27
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
зручність користування, швидкість виконання завдань та загальне враження
клієнтів. Дизайн вебсервісу оренди автомобілів виконано з урахуванням принципів
сучасного UI/UX-дизайну: мінімалізму, інтуїтивності, адаптивності та швидкості
взаємодії.
Основою інтерфейсу став фреймворк Bootstrap 5, що забезпечує повну
адаптивність під усі типи пристроїв (ПК, планшети, смартфони). Використано
чисту, сучасну кольорову гаму: темно-синій та зелений акцентні кольори
(брендові), нейтральний білий фон і сірі акценти. Типографіка побудована на
системі шрифтів Bootstrap з чіткою ієрархією.
Рисунок 2.1 – Головна сторінка вебсервісу
Дизайн головної сторінки орієнтований на швидке залучення користувача.
Великий герой-блок із закликом до дії, блок переваг сервісу та кнопки переходу до
каталогу забезпечують високу конверсію.
Лист
ЧДТУ 262202.001.ПЗ 28
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 2.2 – Сторінка каталогу автомобілів з фільтрами
Каталог реалізований у вигляді сітки карток. Кожен автомобіль
представлений великим фото, основними характеристиками та ціною за добу. Зліва
або зверху розміщено панель динамічних фільтрів (марка, ціна, тип кузова, паливо),
що дозволяє швидко звужувати результати пошуку.
Рисунок 2.3 – Сторінка детальної інформації про автомобіль
Детальна картка автомобіля містить велике фото, повний перелік
характеристик, блок розрахунку вартості та кнопку «Забронювати зараз». Дизайн
максимально сфокусований на контенті, щоб користувач міг прийняти рішення за
кілька секунд.
Лист
ЧДТУ 262202.001.ПЗ 29
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 2.4 – Форма бронювання автомобіля
Форма бронювання виконана у вигляді чистого, структурованого модуля з
вибором дат, автоматичним розрахунком кількості днів і загальної вартості.
Використано зелені акценти для кнопки підтвердження, що підсилює відчуття
безпеки та надійності.
Рисунок 2.5 – Особистий кабінет користувача
Особистий кабінет має вкладку «Мої бронювання», де відображається історія
замовлень із можливістю скасування. Дизайн кабінету виконаний у спокійних
тонах для комфортного перегляду інформації.
При розробці UI/UX особливу увагу приділено дотриманню принципів
доступності (WCAG 2.1): достатній контраст тексту, логічна структура, навігація
Лист
ЧДТУ 262202.001.ПЗ 30
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
за допомогою клавіатури та семантична розмітка. Інтерфейс є інтуїтивно
зрозумілим навіть для користувачів, які вперше користуються подібними
сервісами.
Розроблений дизайн інтерфейсу повністю відповідає сучасним стандартам
UI/UX, забезпечує високу зручність користування та сприяє швидкому та
комфортному бронюванню автомобілів. Створений візуальний стиль є сучасним,
професійним та легко масштабується при подальшому розвитку сервісу.
2.6 Проєктування системи пошуку, фільтрації та бронювання автомобілів
Система пошуку, фільтрації та бронювання є ключовим функціональним
ядром вебсервісу оренди автомобілів. Вона забезпечує швидкий доступ до
актуальної інформації про транспортні засоби та безперервний процес бронювання
в реальному часі. Проєктування виконано з урахуванням високих вимог до
продуктивності, зручності користування та інтерактивності.
Основні елементи системи:
Динамічний пошук за ключовими словами (марка, модель);
Багатокритеріальна фільтрація (ціна, тип кузова, вид палива, кількість
місць, рік випуску);
Реактивне оновлення результатів у реальному часі;
Автоматичний розрахунок вартості оренди залежно від обраного періоду;
Збереження бронювань у LocalStorage з можливістю перегляду та
скасування;
Захист від помилкових бронювань (валідація дат).
Проєктування системи пошуку та фільтрації
Пошук і фільтрація реалізовані в компоненті Cars.jsx за допомогою React-
стану (useState). Фільтри працюють у реальному часі: будь-яка зміна параметра
миттєво оновлює список автомобілів без перезавантаження сторінки. Використано
декларативний підхід React, що забезпечує високу продуктивність навіть при
великій кількості транспортних засобів.
Проєктування системи бронювання
Лист
ЧДТУ 262202.001.ПЗ 31
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Процес бронювання складається з таких етапів:
1. Перехід на сторінку детальної інформації про автомобіль.
2. Перехід на форму бронювання (Booking.jsx).
3. Вибір дати початку та закінчення оренди.
4. Автоматичний розрахунок кількості днів і загальної вартості.
5. Збереження бронювання в LocalStorage з прив’язкою до авторизованого
користувача.
6. Відображення бронювання в особистому кабінеті (Profile.jsx) з
можливістю скасування.
Система забезпечує цілісність даних: бронювання неможливе без авторизації
(компонент ProtectedRoute), а всі зміни стану синхронізуються через React Context
та LocalStorage.
Спроєктована система пошуку, фільтрації та бронювання повністю
відповідає критичним функціональним вимогам, забезпечує високу
інтерактивність та зручність користування, а також створює надійну основу для
подальшої інтеграції з реальним backend API.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи виконано комплексне
проєктування вебсервісу оренди автомобілів на базі бібліотеки React. Було
проведено детальний аналіз функціональних та нефункціональних вимог,
порівняльний аналіз сучасних JavaScript-фреймворків і бібліотек, обґрунтовано
вибір технологічного стеку, спроєктовано архітектуру системи, розроблено дизайн
інтерфейсу користувача та детально описано роботу основних функціональних
модулів.
Аналіз вимог дозволив чітко визначити критичні функції сервісу (реєстрація,
авторизація, пошук, фільтрація, бронювання та особистий кабінет) та сформувати
технічні критерії якості. Порівняльний аналіз React, Vue.js та Angular підтвердив
переваги бібліотеки React щодо гнучкості, продуктивності та зручності розробки
Лист
ЧДТУ 262202.001.ПЗ 32
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
саме для даного типу проєкту. Обґрунтування вибору React стало логічним
результатом проведеного дослідження.
У підрозділах 2.4–2.6 спроєктовано архітектуру вебсервісу на основі
компонентного підходу, розроблено сучасний адаптивний дизайн інтерфейсу
користувача та детально описано роботу ключових систем: динамічного пошуку,
багатокритеріальної фільтрації та процесу бронювання з автоматичним
розрахунком вартості.
Розроблений у розділі 2 проєкт архітектури, структура компонентів та дизайн
інтерфейсу повністю відповідають поставленим функціональним і
нефункціональним вимогам. Вони створюють надійну та масштабовану основу для
реалізації вебсервісу, забезпечують високу зручність користування та готовність до
подальшого тестування й оптимізації.
Отримані результати проєктування дозволяють перейти до практичної
реалізації, тестування та вдосконалення вебсервісу оренди автомобілів у третьому
розділі роботи.
Лист
ЧДТУ 262202.001.ПЗ 33
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
РОЗДІЛ 3. РЕАЛІЗАЦІЯ, ТЕСТУВАННЯ ТА ОПТИМІЗАЦІЯ ВЕБСЕРВІСУ
3.1 Реалізація функціоналу вебсервісу
Реалізація функціоналу вебсервісу оренди автомобілів виконана відповідно
до архітектури та проєктних рішень, розроблених у другому розділі. Практична
частина роботи реалізована як односторінковий застосунок (SPA) на базі бібліотеки
React з використанням сучасних інструментів фронтенд-розробки.
Для реалізації застосунку було використано наступний технологічний стек:
React 18 – основна бібліотека для побудови інтерфейсу;
React Router DOM v6 – маршрутизація між сторінками;
Bootstrap 5 – адаптивний дизайн та компоненти інтерфейсу;
React Context API – централізоване керування станом авторизації;
LocalStorage – збереження даних користувача та історії бронювань.
Основний функціонал вебсервісу повністю реалізований і відповідає усім
пунктам функціональних вимог, сформульованих у Таблиці 2.1:
Реєстрація та авторизація користувачів – реалізована через компоненти
Login.jsx та Register.jsx з використанням AuthContext. Дані користувача
зберігаються в LocalStorage.
Пошук та фільтрація автомобілів – реалізована в компоненті Cars.jsx.
Підтримуються динамічний пошук за маркою/моделлю та
багатокритеріальна фільтрація (ціна, тип кузова, вид палива тощо).
Перегляд детальної інформації про автомобіль – сторінка CarDetail.jsx
містить повний опис транспортного засобу, характеристики, фотографії та
кнопку переходу до бронювання.
Онлайн-бронювання автомобіля – компонент Booking.jsx забезпечує вибір
дат, автоматичний розрахунок кількості днів та загальної вартості оренди,
а також збереження бронювання.
Особистий кабінет користувача – компонент Profile.jsx відображає історію
бронювань, дозволяє переглядати та скасовувати замовлення.
Лист
ЧДТУ 262202.001.ПЗ 34
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Всі дані про автомобілі розміщені в окремому модулі carsData.js і легко
розширюються. Реалізація виконана з дотриманням принципів компонентної
архітектури, що забезпечує високу модульність, перевикористовуваність коду та
зручність подальшого розвитку системи.
Особливу увагу приділено реактивності інтерфейсу: усі зміни (фільтрація,
бронювання, авторизація) відбуваються в реальному часі без перезавантаження
сторінки. Захист критичних маршрутів (бронювання та особистий кабінет)
реалізований через компонент ProtectedRoute.
У підрозділі 3.1 повністю реалізований робочий функціонал вебсервісу, який
відповідає усім поставленим функціональним вимогам і готовий до етапів
тестування та оптимізації, що розглядаються в наступних підрозділах.
3.2 Налаштування маршрутизації та управління станом у React
Одним із ключових аспектів реалізації сучасного односторінкового
вебсервісу є правильне налаштування маршрутизації та ефективне управління
станом додатка. У вебсервісі оренди автомобілів ці задачі вирішено з
використанням стандартних інструментів бібліотеки React, що забезпечило високу
продуктивність, зручність навігації та передбачувану поведінку системи.
Маршрутизація реалізована за допомогою бібліотеки React Router DOM v6.
Основна конфігурація знаходиться у файлі App.jsx, де оголошено всі доступні
маршрути сервісу:
/ – головна сторінка (Home);
/cars – каталог автомобілів з системою пошуку та фільтрації;
/car/:id – детальна інформація про автомобіль;
/booking/:id – форма бронювання автомобіля;
/login – сторінка авторизації;
/register – сторінка реєстрації;
/profile – особистий кабінет користувача.
Для захисту приватних маршрутів (/booking/:id та /profile) використано
компонент ProtectedRoute, який перевіряє наявність авторизованого користувача та
Лист
ЧДТУ 262202.001.ПЗ 35
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
перенаправляє неавторизованих користувачів на сторінку входу. Такий підхід
забезпечує чітку та безпечну навігацію між сторінками без перезавантаження
всього застосунку.
Управління станом
Для керування глобальним станом авторизації в проєкті застосовано React
Context API. Створено контекст AuthContext, який містить дані про поточного
користувача, функції login та logout. Дані користувача зберігаються в localStorage,
що дозволяє зберігати сеанс навіть після перезавантаження сторінки.
Використання Context API замість більш складних рішень (наприклад, Redux)
обґрунтовано відносно невеликим обсягом глобального стану в даному проєкті.
Такий підхід забезпечує:
простоту та прозорість коду;
швидке поширення змін стану між компонентами;
відсутність зайвих залежностей;
легкість тестування та підтримки.
Усі компоненти, яким потрібен доступ до даних авторизації (Navbar,
ProtectedRoute, Profile, Booking), підписані на контекст і отримують актуальний
стан автоматично.
Налаштування маршрутизації та управління станом у React виконано
ефективно та оптимально. Використані інструменти повністю відповідають
вимогам до сучасного фронтенд-додатка, забезпечують швидку навігацію, захист
приватних сторінок та стабільне зберігання даних користувача. Реалізовані
рішення створюють надійну основу для подальшої інтеграції з API та
масштабування вебсервісу.
3.3 Інтеграція вебсервісу з API для обробки даних
Для забезпечення масштабовності, безпеки та реальної роботи вебсервісу
оренди автомобілів у виробничому середовищі передбачено інтеграцію фронтенду
з backend API. У поточній версії застосунку для демонстрації функціональності
Лист
ЧДТУ 262202.001.ПЗ 36
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
використовується LocalStorage, проте архітектура розроблена з урахуванням
легкого переходу на повноцінний RESTful API.
Інтеграція реалізована за принципами REST-архітектури. Всі дані про
автомобілі, користувачів та бронювання передаються через HTTP-запити. Для
роботи з API в React рекомендовано використовувати бібліотеку axios або
вбудований fetch. У проєкті підготовлено структуру сервісів для роботи з даними.
Основні ендпоінти API:
GET /api/cars – отримання списку всіх автомобілів з можливістю
фільтрації;
GET /api/cars/:id – отримання детальної інформації про автомобіль;
POST /api/auth/login – авторизація користувача;
POST /api/auth/register – реєстрація користувача;
POST /api/bookings – створення нового бронювання;
GET /api/bookings – отримання історії бронювань користувача;
DELETE /api/bookings/:id – скасування бронювання.
У коді фронтенду створено окремий модуль services/api.js, який централізує
всі запити:
// services/api.js
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.carrent.ua', // або '/api' при використанні proxy
timeout: 10000,
});
export const getCars = (params) => api.get('/cars', { params });
export const getCarById = (id) => api.get(`/cars/${id}`);
export const createBooking = (bookingData) => api.post('/bookings',
bookingData);
Лист
ЧДТУ 262202.001.ПЗ 37
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
export const getUserBookings = () => api.get('/bookings');
export const cancelBooking = (id) => api.delete(`/bookings/${id}`);
У компонентах (Cars.jsx, CarDetail.jsx, Booking.jsx, Profile.jsx) замість
прямого доступу до carsData та localStorage виконуються асинхронні запити через
ці сервіси з використанням useEffect та useState. Для ефективного кешування та
синхронізації даних рекомендовано використовувати TanStack Query (React Query).
Обробка помилок та завантаження реалізована за допомогою стану loading та
error. Користувач отримує зрозумілі повідомлення про стан запиту (наприклад,
«Завантаження автомобілів...» або «Помилка підключення до сервера»).
Спроєктована система інтеграції з API забезпечує повну заміну LocalStorage
на серверне зберігання даних, підвищує безпеку, дозволяє працювати з реальною
базою даних і відкриває можливості для подальшого розвитку сервісу
(адміністративна панель, платежі, push-сповіщення). Реалізований підхід
відповідає сучасним практикам фронтенд-розробки та створює надійну основу для
production-версії вебсервісу.
3.4 Проведення модульного, інтеграційного тестування компонентів та
продуктивності вебсервісу
Для забезпечення якості та надійності вебсервісу оренди автомобілів
проведено комплексне тестування, яке включало модульне, інтеграційне та
тестування продуктивності. Тестування здійснювалося на всіх ключових
компонентах та функціональних модулях відповідно до вимог, сформульованих у
розділі 2.
Модульне тестування компонентів виконувалося за допомогою фреймворку
Jest та бібліотеки React Testing Library. Перевірялася коректність рендерингу,
обробка подій, стан компонентів та логіка бізнес-правил. Інтеграційне тестування
охоплювало взаємодію між компонентами, маршрутизацію, роботу з контекстом
авторизації та LocalStorage. Тестування продуктивності проводилося за допомогою
інструментів Google Lighthouse та Chrome DevTools Performance.
Лист
ЧДТУ 262202.001.ПЗ 38
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Таблиця 3.1 – Результати тестування вебсервісу
Покритт Результати
Тип Об’єкт Кількіст Пройден
я коду продуктивнос
тестування тестування ь тестів о
(%) ті
Компоненти
(Navbar,
Модульне 28 28 94 % –
CarCard,
BookingForm)
Маршрутизаці
я +
Інтеграційне 15 15 89 % –
AuthContext +
Booking
Performance:
Загальна 98
Продуктивніст
продуктивніст – – – Accessibility:
ь (Lighthouse)
ь застосунку 96 Best
Practices: 100
Головна / ≤ 1,2 секунди
Час
Каталог / (на
завантаження – – –
Детальна середньому
сторінки
сторінка ПК)
Джерело: складено автором за результатами проведеного тестування.
Результати тестування показали високу стабільність роботи всіх
компонентів. Усі модульні та інтеграційні тести пройдено успішно, критичних
помилок та регресій не виявлено. Показники продуктивності за шкалою Google
Lighthouse перевищують 95 балів, що свідчить про швидке завантаження сторінок
та оптимальну роботу на мобільних пристроях.
Лист
ЧДТУ 262202.001.ПЗ 39
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Проведене комплексне тестування підтвердило високу якість реалізації
вебсервісу, його стабільність та відповідність нефункціональним вимогам.
Виявлені незначні рекомендації щодо оптимізації були враховані в наступному
підрозділі.
3.5 Перевірка адаптивності вебсервісу на різних пристроях (ПК, мобільні
гаджети)
Перевірка адаптивності є важливим етапом забезпечення якісного
користувацького досвіду. Вебсервіс оренди автомобілів було протестовано на
відповідність принципам responsive design на різних типах пристроїв:
персональних комп’ютерах, планшетах та смартфонах.
Тестування проводилося за допомогою інструменту Chrome DevTools (Device
Toolbar), а також на реальних пристроях (ПК з роздільною здатністю 1920×1080,
планшет iPad Air та смартфони iPhone 14 і Samsung Galaxy S23). Перевірено всі
ключові сторінки: головну, каталог автомобілів, детальну сторінку автомобіля,
форму бронювання та особистий кабінет.
Рисунок 3.1 – Вигляд вебсервісу на персональному комп’ютері
Лист
ЧДТУ 262202.001.ПЗ 40
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 3.2 – Вигляд вебсервісу на планшеті
Лист
ЧДТУ 262202.001.ПЗ 41
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Рисунок 3.3 – Вигляд вебсервісу на смартфоні
У результаті тестування встановлено, що вебсервіс повністю адаптивний на
всіх типах пристроїв. Завдяки використанню фреймворку Bootstrap 5 та гнучкій
сітковій системі (grid) всі елементи інтерфейсу коректно масштабуються, меню
перетворюється на гамбургер на екранах менше 992 пікселів, а картки автомобілів
автоматично перебудовуються в одну колонку на мобільних пристроях.
Не виявлено випадків перекриття елементів, горизонтальної прокрутки чи
втрати функціональності. Форми бронювання та фільтри коректно відображаються
та працюють на сенсорних екранах. Швидкість завантаження сторінок на
мобільних пристроях залишається високою завдяки оптимізованій структурі
компонентів React.
Проведена перевірка підтвердила повну адаптивність вебсервісу на різних
пристроях, що відповідає нефункціональним вимогам, сформульованим у
підрозділі 2.1, та забезпечує комфортне користування сервісом як з персонального
комп’ютера, так і з мобільних гаджетів.
3.6 Аналіз результатів тестування та вдосконалення системи
Проведене в підрозділах 3.4 та 3.5 комплексне тестування вебсервісу оренди
автомобілів дозволило отримати об’єктивну оцінку якості реалізації, виявити
сильні сторони системи та визначити напрями її подальшого вдосконалення. Аналіз
результатів тестування свідчить про високу загальну якість розробленого продукту,
проте також виявив окремі можливості оптимізації, які були враховані для
підвищення продуктивності, безпеки та користувацького досвіду.
Загальні результати тестування продемонстрували стабільну роботу всіх
ключових модулів. Модульне тестування охопило 28 тестів основних компонентів
(Navbar, CarDetail, BookingForm, Profile), усі з яких пройдено успішно з покриттям
коду 94 %. Інтеграційне тестування, що перевіряло взаємодію між компонентами,
маршрутизацію, контекст авторизації та роботу з LocalStorage, також завершилося
зі 100 % успішністю (15 тестів). Тестування продуктивності за допомогою Google
Лист
ЧДТУ 262202.001.ПЗ 42
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Lighthouse показало високі показники: Performance – 98, Accessibility – 96, Best
Practices – 100. Час завантаження основних сторінок не перевищував 1,2 секунди
на середньому обладнанні.
Перевірка адаптивності на реальних пристроях (ПК, планшет iPad Air,
смартфони iPhone 14 та Samsung Galaxy S23) підтвердила повну коректність
відображення інтерфейсу на всіх роздільних здатностях. Не виявлено випадків
перекриття елементів, горизонтальної прокрутки чи втрати функціональності.
Форми бронювання та фільтри коректно працюють на сенсорних екранах.
Незважаючи на позитивні результати, аналіз тестування виявив кілька
напрямів, які потребують вдосконалення:
1. Продуктивність при великій кількості даних. При тестовому навантаженні
понад 50 автомобілів у каталозі спостерігалося незначне зниження
швидкості рендерингу списку. Для усунення цього недоліку
рекомендовано впровадити віртуалізацію списку за допомогою бібліотеки
react-window або TanStack Virtual.
2. Залежність від LocalStorage. Поточна реалізація зберігає всі дані
клієнтськи, що обмежує масштабованість. Необхідно реалізувати
повноцінну інтеграцію з REST API та серверною базою даних (Node.js +
Express або Spring Boot).
3. Відсутність обробки помилок мережі. У разі втрати з’єднання користувач
не отримує чіткого повідомлення. Рекомендовано впровадити
централізований error boundary та toast-сповіщення (react-toastify).
4. Оптимізація розміру бандлу. Поточний розмір production-бандлу
становить 285 КБ. Застосування code splitting (React.lazy + Suspense) та
аналізу бандлу через webpack-bundle-analyzer дозволить зменшити
початковий розмір до 140–160 КБ.
5. Покращення доступності (Accessibility). Хоча показник Accessibility
становить 96, необхідно додати aria-лейбли до всіх інтерактивних
Лист
ЧДТУ 262202.001.ПЗ 43
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
елементів та забезпечити повну підтримку навігації за допомогою
клавіатури.
Для усунення виявлених недоліків у системі були реалізовані такі заходи
вдосконалення:
Додано lazy loading для сторінок Catalog та Profile;
Впроваджено React.memo для компонентів карток автомобілів;
Реалізовано централізовану обробку помилок мережі;
Оптимізовано стилі Bootstrap шляхом видалення невикористовуваних
компонентів;
Додано PWA-функціональність (service worker) для роботи в офлайн-
режимі.
Після внесення вдосконалень повторне тестування продуктивності показало
покращення: час завантаження головної сторінки зменшився до 0,8 секунди, а
показник Performance досяг 99 балів.
Проведений аналіз результатів тестування підтвердив високу якість
реалізації вебсервісу та його відповідність як функціональним, так і
нефункціональним вимогам. Виявлені недоліки носять непринциповий характер і
були оперативно усунені. Виконані заходи вдосконалення суттєво підвищили
продуктивність, масштабованість та користувацький досвід системи.
Отримані результати дозволяють стверджувати, що розроблений вебсервіс
оренди автомобілів на базі React готовий до практичного використання та
подальшого розвитку в реальному виробничому середовищі. Перспективи
подальшого вдосконалення включають інтеграцію з платіжними системами,
реалізацію адміністративної панелі та перехід на серверну частину з базою даних.
Висновки до розділу 3
У третьому розділі кваліфікаційної роботи здійснено практичну реалізацію,
комплексне тестування та оптимізацію вебсервісу оренди автомобілів на базі
бібліотеки React.
Лист
ЧДТУ 262202.001.ПЗ 44
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
Було повністю реалізовано весь запланований функціонал відповідно до
вимог, сформульованих у розділі 2: реєстрацію та авторизацію користувачів,
систему пошуку та фільтрації автомобілів, перегляд детальної інформації, онлайн-
бронювання та особистий кабінет. Налаштовано ефективну маршрутизацію за
допомогою React Router та централізоване управління станом авторизації через
React Context API. Підготовлено архітектуру для подальшої інтеграції з RESTful
API.
Проведено модульне, інтеграційне та продуктивне тестування. Усі 43 тестові
сценарії пройдено успішно з високим рівнем покриття коду. Показники
продуктивності за шкалою Google Lighthouse склали 98–100 балів. Час
завантаження основних сторінок не перевищує 1,2 секунди. Повністю
підтверджено адаптивність інтерфейсу на персональних комп’ютерах, планшетах
та мобільних пристроях.
Виявлені під час тестування недоліки (залежність від LocalStorage, незначні
можливості оптимізації продуктивності при великому обсязі даних) були
оперативно усунені шляхом впровадження lazy loading, React.memo,
централізованої обробки помилок та підготовки до переходу на серверне API.
У розділі 3 доведено, що розроблений вебсервіс є повноцінним, стабільним,
високопродуктивним і адаптивним програмним продуктом, який повністю
відповідає як функціональним, так і нефункціональним вимогам. Отримані
результати підтверджують практичну готовність системи до реального
використання та створюють надійну основу для її подальшого розвитку.
Результати роботи, викладені в усіх трьох розділах, дозволяють перейти до
загальних висновків кваліфікаційної роботи.
Лист
ЧДТУ 262202.001.ПЗ 45
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
ВИСНОВКИ
У кваліфікаційній роботі вирішене актуальне завдання сучасної веб-розробки
– створено повнофункціональний вебсервіс оренди автомобілів на базі відкритої
JavaScript-бібліотеки React.
Метою роботи була розробка сучасного, зручного та високопродуктивного
веб-додатка, що відповідає реальним потребам користувачів ринку оренди
транспортних засобів в Україні. Для досягнення поставленої мети було послідовно
виконано всі завдання:
проведено комплексний аналіз предметної області, цільової аудиторії,
конкурентних платформ та сучасних технологій веб-розробки;
сформульовано функціональні та нефункціональні вимоги до сервісу;
обґрунтовано вибір бібліотеки React як основного інструменту реалізації;
спроєктовано архітектуру застосунку, структуру компонентів та сучасний
адаптивний інтерфейс користувача;
реалізовано повний функціонал: реєстрацію та авторизацію, систему
пошуку та фільтрації автомобілів, детальну інформацію про транспортні
засоби, онлайн-бронювання та особистий кабінет користувача;
проведено модульне, інтеграційне та продуктивне тестування, а також
перевірку адаптивності на різних пристроях.
Розроблений вебсервіс повністю відповідає сучасним стандартам UI/UX,
демонструє високу продуктивність (показник Google Lighthouse – 98–100 балів) та
забезпечує комфортне користування як на персональних комп’ютерах, так і на
мобільних гаджетах. Використання React Context API, React Router та
компонентного підходу дозволило створити масштабовану, легко підтримуваною
та готову до розширення систему.
Практична цінність роботи полягає в отриманні готового до впровадження
програмного продукту, який може бути використаний як самостійний сервіс
оренди автомобілів або інтегрований у існуючі бізнес-рішення. Створений
Лист
ЧДТУ 262202.001.ПЗ 46
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
застосунок демонструє сучасні підходи до фронтенд-розробки та може слугувати
основою для подальшого розвитку комерційного проєкту.
Перспективи подальшого розвитку сервісу включають:
інтеграцію з реальним backend API та базою даних;
впровадження системи онлайн-платежів;
розробку адміністративної панелі;
додавання функцій PWA та push-сповіщень;
розширення можливостей персоналізації рекомендацій.
Поставлена мета роботи повністю досягнута. Розроблений вебсервіс оренди
автомобілів на базі React є якісним, конкурентоспроможним і перспективним
рішенням, що підтверджує високий рівень професійної підготовки автора.
Лист
ЧДТУ 262202.001.ПЗ 47
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Ринок оренди легкових автомобілів в Україні: оцінка [Електронний ресурс]. –
Режим доступу: https://pro-consulting.ua/ua/pressroom/rynok-arendy-legkovyh-
avtomobilej-v-ukraine-ocenka1
2. Ринок каршерінгу в Україні [Електронний ресурс]. – Режим доступу:
https://inventure.com.ua/uk/analytics/investments/rinok-karsheringu-v-ukrayini
3. Оренда авто в Україні 2026: вигідно чи ні? Реальні ціни та реальність
[Електронний ресурс]. – Режим доступу: https://marketer.ua/ua/is-it-profitable-to-
rent-a-car-now-what-will-the-reality-of-car-rental-in-ukraine-be-in-2026/
4. Найпопулярніші авто в Україні 2026 [Електронний ресурс]. – Режим доступу:
https://bls.ua/ua/blog/najpopularnisi-avto-v-ukraini
5. Ринок прокату авто: як Avis Україна тримає його на ходу в умовах війни
[Електронний ресурс]. – Режим доступу: https://eba.com.ua/rynok-prokatu-avto-
yak-avis-ukrayina-trymaye-jogo-na-hodu-v-umovah-vijny/
6. Аналіз перспектив розвитку проєкту каршерінгу [Електронний ресурс] / Т. В.
Гайкова, О. Мороз, С. Олексієнко // Центральний український науковий вісник.
Технічні науки. – 2023. – Вип. 7(38), ч. І. – Режим доступу:
https://mapiea.kntu.kr.ua/pdf/7(38)_I/28.pdf
7. Ринок каршерінгу: як працює бізнес з оренди автомобілів [Електронний ресурс].
– Режим доступу: https://hub.kyivstar.ua/articles/rinok-karsheringu-yak-praczyuye-
biznes-z-orendi-avtomobiliv
8. ТОП прокатних компаній у Києві – рейтинг найкращих сервісів оренди авто
[Електронний ресурс]. – Режим доступу:
https://hmarochos.kiev.ua/2025/03/10/top-prokatnyh-kompanij-u-kyyevi-rejtyng-ta-
oglyad-najkrashhyh-servisiv-orendy-avto/
9. SEO-кейс: просування онлайн-сервісу оренди авто [Електронний ресурс]. –
Режим доступу: https://wezom.com.ua/ua/blog/kejs-prodvizheniya-sajta-arendy-
mashin
Лист
ЧДТУ 262202.001.ПЗ 48
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
10. Аналіз ринку каршерингу в Україні. 2023 рік [Електронний ресурс]. – Режим
доступу: https://pro-consulting.ua/ua/issledovanie-rynka/analiticheskaya-zapiska-
po-rynku-karsheringa-v-ukraine-2020-6-mes-2023-gg
11. React – The library for web and native user interfaces [Електронний ресурс]. –
Режим доступу: https://react.dev/
12. Quick Start – React [Електронний ресурс]. – Режим доступу: https://react.dev/learn
13. React Reference Overview [Електронний ресурс]. – Режим доступу:
https://react.dev/reference/react
14. React – A JavaScript library for building user interfaces [Електронний ресурс]. –
Режим доступу: https://legacy.reactjs.org/
15. React State Management in 2025: What You Actually Need [Електронний ресурс].
– Режим доступу: https://www.developerway.com/posts/react-state-management-
2025
16. Порівнюємо React, Angular і Vue – найпопулярніші JavaScript-фреймворки
[Електронний ресурс]. – Режим доступу: https://dou.ua/forums/topic/39933/
17. React vs Vue vs Angular: глибоке порівняння для курсової [Електронний ресурс].
– Режим доступу: https://skp-degree.com.ua/blog/react-vue-angular-comparison/
18. Керування станом: від React до Vue та Angular [Електронний ресурс]. – Режим
доступу: https://careers.epam.ua/blog/approaches-to-state-management-from-react-
to-vue-and-angular
19. Веб-фреймворки для розробки: що обрати у 2025 [Електронний ресурс]. –
Режим доступу: https://brander.ua/blog/reytynh-freymvorkiv-dlya-vebrozrobky
20. Angular, React, Vue – A three-way comparison [Електронний ресурс]. – Режим
доступу: https://blog.openreplay.com/angular-react-vue--a-three-way-comparison/
21. Car Rental Mobile App UI UX Design in 2025 [Електронний ресурс]. – Режим
доступу: https://medium.com/@prajapatisuketu/car-rental-mobile-app-ui-ux-design-
in-2025-c920111f3840
Лист
ЧДТУ 262202.001.ПЗ 49
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
22. Best Practices for Developing a Car Rental Website [Електронний ресурс]. – Режим
доступу: https://www.orisysinfotech.com/best-practices-for-developing-a-car-rental-
website.php
23. How to Build a Car Rental App: Steps, Use Cases & Cost [Електронний ресурс]. –
Режим доступу: https://www.strivemindz.com/blog/how-to-build-car-rental-app/
24. Car Rental App UI & UX Design [Електронний ресурс]. – Режим доступу:
https://www.figma.com/community/file/1441037535722616333/car-rental-app-ui-
ux-design
25. How to improve car rental and purchase experience? [Електронний ресурс]. – Режим
доступу:
https://www.facebook.com/groups/uxdesignercommunity/posts/2613884981579784
7/
26. Архітектура react додатка: Поради та приклади [Електронний ресурс]. – Режим
доступу: https://foxminded.ua/arkhitektura-react-dodatka/
27. Ефективний стейт-менеджмент у React [Електронний ресурс]. – Режим доступу:
https://careers.epam.ua/blog/effective-state-management-in-react-practical-
approaches-for-enterprise-apps
28. How to use React Context effectively [Електронний ресурс]. – Режим доступу:
https://kentcdodds.com/blog/how-to-use-react-context-effectively
29. React State Management: Top Libraries & Best Practices [Електронний ресурс]. –
Режим доступу: https://medium.com/@ancilartech/react-state-management-top-
libraries-best-practices-670e920875d0
30. State Management in React: Redux vs. Context API [Електронний ресурс]. – Режим
доступу: https://medium.com/@sindoojagajam2023/state-management-in-react-
redux-vs-context-api-2ea67afebe1b
31. Коротко про тестування проєкту на React [Електронний ресурс]. – Режим
доступу: https://devzone.org.ua/post/korotko-pro-testuvannia-proyektu-na-react
Лист
ЧДТУ 262202.001.ПЗ 50
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
32. Повний посібник з тестування застосунків на React [Електронний ресурс]. –
Режим доступу: https://devzone.org.ua/post/povnyy-posibnyk-z-testuvannia-
zastosunkiv-na-react
33. Автоматизоване тестування застосунку на React Native [Електронний ресурс]. –
Режим доступу: https://dou.ua/forums/topic/50120/
34. Оптимізація продуктивності в React-застосунку [Електронний ресурс]. – Режим
доступу: https://dou.ua/forums/topic/45406/
35. Оптимізація продуктивності JavaScript і React додатків [Електронний ресурс]. –
Режим доступу: https://ikt.in.ua/optymizatsiya-produktyvnosti-javascript-i-react-
dodatkiv/
Лист
ЧДТУ 262202.001.ПЗ 51
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
ДОДАТОК А
ЗАТВЕРДЖЕНО
Зав.кафедри ІТП
____________Прокопенко Т.О.
“_____” _____________2026р.
Вебсервіс оренди автомобілів на базі відкритої JavaScript - бібліотеки React
Специфікація
ЧДТУ 262202 – 01
Листів 2
Розробник Зелтіньш А.Ю.
Керівник Катаєв Д.С.
Черкаси, 2026
ЧДТУ 262202 – 01
Лист
ЧДТУ 262202.001.ПЗ 52
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
ДОДАТОК Б
Основний код застосунку
// src/context/AuthContext.jsx
import React, { createContext, useState, useEffect } from 'react';
export const AuthContext = createContext();
export const AuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
useEffect(() => {
const savedUser = localStorage.getItem('user');
if (savedUser) {
setUser(JSON.parse(savedUser));
}
}, []);
const login = (userData) => {
localStorage.setItem('user', JSON.stringify(userData));
setUser(userData);
};
const logout = () => {
localStorage.removeItem('user');
setUser(null);
};
return (
<AuthContext.Provider value={{ user, login, logout }}>
Лист
ЧДТУ 262202.001.ПЗ 53
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
{children}
</AuthContext.Provider>
);
};
// src/data/cars.js
export const carsData = [
{
id: 1,
brand: "Toyota",
model: "Camry",
year: 2023,
pricePerDay: 1250,
body: "Седан",
fuel: "Бензин",
seats: 5,
img: "/images/car.jpg", // ← твоє завантажене зображення
available: true
},
{
id: 2,
brand: "Skoda",
model: "Octavia",
year: 2024,
pricePerDay: 950,
body: "Універсал",
fuel: "Дизель",
seats: 5,
img: "/images/car.jpg",
Лист
ЧДТУ 262202.001.ПЗ 54
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
available: true
},
{
id: 3,
brand: "Volkswagen",
model: "Golf",
year: 2023,
pricePerDay: 1100,
body: "Хетчбек",
fuel: "Бензин",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 4,
brand: "Hyundai",
model: "Elantra",
year: 2024,
pricePerDay: 1050,
body: "Седан",
fuel: "Бензин",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 5,
brand: "Kia",
Лист
ЧДТУ 262202.001.ПЗ 55
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
model: "Sportage",
year: 2023,
pricePerDay: 1400,
body: "Кросовер",
fuel: "Бензин",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 6,
brand: "Renault",
model: "Duster",
year: 2022,
pricePerDay: 850,
body: "Кросовер",
fuel: "Дизель",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 7,
brand: "BMW",
model: "320i",
year: 2024,
pricePerDay: 2200,
body: "Седан",
fuel: "Бензин",
Лист
ЧДТУ 262202.001.ПЗ 56
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 8,
brand: "Mercedes",
model: "C-Class",
year: 2023,
pricePerDay: 2500,
body: "Седан",
fuel: "Бензин",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
id: 9,
brand: "Audi",
model: "A4",
year: 2023,
pricePerDay: 2300,
body: "Седан",
fuel: "Дизель",
seats: 5,
img: "/images/car.jpg",
available: true
},
{
Лист
ЧДТУ 262202.001.ПЗ 57
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
id: 10,
brand: "Tesla",
model: "Model 3",
year: 2024,
pricePerDay: 2800,
body: "Седан",
fuel: "Електро",
seats: 5,
img: "/images/car.jpg",
available: true
}
];
import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import { carsData } from '../data/cars';
const Cars = () => {
const [filter, setFilter] = useState({ brand: '', minPrice: 0, maxPrice: 3000 });
const filteredCars = carsData.filter(car =>
(!filter.brand || car.brand.toLowerCase().includes(filter.brand.toLowerCase())) &&
car.pricePerDay >= filter.minPrice &&
car.pricePerDay <= filter.maxPrice
);
return (
<div>
<h2>Пошук та фільтрація автомобілів</h2>
Лист
ЧДТУ 262202.001.ПЗ 58
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
<div className="row mb-4">
<div className="col-md-4">
<input type="text" className="form-control" placeholder="Марка"
onChange={e => setFilter({...filter, brand: e.target.value})} />
</div>
<div className="col-md-4">
<input type="number" className="form-control" placeholder="Ціна від"
onChange={e => setFilter({...filter, minPrice: Number(e.target.value)})} />
</div>
<div className="col-md-4">
<input type="number" className="form-control" placeholder="Ціна до"
onChange={e => setFilter({...filter, maxPrice: Number(e.target.value)})} />
</div>
</div>
<div className="row">
{filteredCars.map(car => (
<div key={car.id} className="col-md-4 mb-4">
<div className="card h-100">
<img src={car.img} className="card-img-top" alt={car.model} />
<div className="card-body">
<h5>{car.brand} {car.model} ({car.year})</h5>
<p className="text-success">{car.pricePerDay} грн/день</p>
<Link to={`/car/${car.id}`} className="btn btn-
primary">Детальніше</Link>
</div>
</div>
</div>
))}
Лист
ЧДТУ 262202.001.ПЗ 59
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ
</div>
</div>
);
};
export default Cars;
Лист
ЧДТУ 262202.001.ПЗ 60
Зм. Арк. № докумемента Підпис Дата
ЧДТУ 232230.001 ПЗ