Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/9873| Назва: | Веборієнтована інформаційна система для формування та перегляду інтерактивного каталогу мотоциклів |
| Автори: | Лавданська , Ольга В’ячеславівна Єрмоленко, Володимир Вікторович |
| Ключові слова: | Node.js;Figma;інтерактивний каталог;фреймворк;React;веборієнтована інформаційна система;PostgreSQL;сервер;Express |
| Дата публікації: | 9-чер-2026 |
| Короткий огляд (реферат): | У кваліфікаційній роботі бакалавра розроблено веборієнтовану інформаційну систему для формування та перегляду інтерактивного каталогу мотоциклів. В якості інструментів для розробки вибрано комплекс React, Node.js/Express та PostgreSQL. Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає 84 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел. Перший розділ кваліфікаційної роботи присвячений аналізу предметної області та опису інтерактивного каталогу мотоциклів. Визначено актуальність та доцільність створення ВІС для формування та перегляду інтерактивного каталогу мотоциклів, особливості розробки дизайн сучасних ВІС. Здійснено аналітичний огляд існуючих ВІС та визначено їх ключові відмінності. Другий розділ присвячений проектуванню ВІС для формування та перегляду інтерактивного каталогу мотоциклів: визначено ключові принципи ВІС для формування та перегляду інтерактивного каталогу мотоциклів, особливості застосування web-дизайну та описано етапи створення ВІС. У третьому розділі здійснено огляд інструментів розробки ВІС для формування та перегляду інтерактивного каталогу мотоциклів, визначено їх переваги і недоліки. Обґрунтовано вибір комплекс React, Node.js/Express та PostgreSQL для розробки ВІС. Описано процес розробки та інтерфейс створеної ВІС. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/9873 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Єрмоленко_WEB-2211.pdf Restricted Access | 1.51 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Веборієнтована інформаційна система для формування та перегляду
інтерактивного каталогу мотоциклів»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Єрмоленко Володимир Вікторович
Керівник: доцент кафедри інформаційних
технологій проектування, к.т.н.
Ольга ЛАВДАНСЬКА
Рецензент:
директор ТОВ «Андерсенлаб»
Алесін О.В.
Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалаврський
(назва)
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
Тетяна ПРОКОПЕНКО
«____» ________________ 2026 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Єрмоленко Володимиру Вікторовичу
(прізвище, ім’я, по батькові)
1. Тема роботи Веборієнтована інформаційна система для формування та перегляду
інтерактивного каталогу мотоциклів
Керівник роботи Лавданська Ольга В’ячеславівна, к.т.н., доцент
( прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
« 12 » березня 2026 року № 56/03-03
2. Строк подання здобувачем роботи 9 червня 2026 р.
3. Вихідні дані до роботи UX дизайн; технологія вебдизайну та веброзробки;
теорія проектування та розробки бази даних; управління проєктами; кіберезпека та захист
інформації; техніко-економічне обґрунтування проєкту; якість та тестування
вебоірнтованих систем.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Вступ; Розділ 1 Аналіз предметної області; Розділ 2 Проєктування веборієнтованої
інформаційної системи; Розділ 3 Розробка веборієнтованої інформаційної системи;
Висновки; Список використаних джерел; Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів)
1) Порівняння аналогів
2) Архітектура веборієнтованої інформаційної системи
3) Логічна структура веборієнтованої інформаційної системи
4) Фізична структура веборієнтованої інформаційної системи
5) Відбитки веборієнтованої інформаційної системи
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та посада Підпис, дата
консультанта
завдання видав завдання прийняв
7. Дата видачі завдання 27 лютого 2026 року
КАЛЕНДАРНИЙ ПЛАН
№ Назва етапів Строк виконання
Примітка
з/п кваліфікаційної роботи етапів роботи
1.1 Постановка задачі 12.01.2026 виконано
1.2 Підготовка завдання 15.01.2026 виконано
1.3 Погодження завдання 21.01.2026 виконано
1.4 Затвердження завдання 04.02.2026 виконано
2 Основна стадія
2.1 Підбір матеріалів 12.03.2026 виконано
2.2 Аналіз шляхів рішення поставленої задачі 23.03.2026 виконано
2.3 Формування проектних рішень 06.04.2026 виконано
2.4 Вибір кінцевого варіанту проєктного рішення 20.04.2026 виконано
2.5 Оформлення первісної редакції роботи 27.04.2026 виконано
3 Заключна стадія
3.1 Узгодження прийнятих проектних рішень 04.05.2026 виконано
Оформлення пояснювальної записки роботи в
3.2 11.05.2026 виконано
кінцевій редакції
3.3 Попередній захист роботи 18.05.2026 виконано
3.4 Затвердження роботи 05.06.2026 виконано
3.5 Рецензування роботи 08.06.2026 виконано
3.6 Захист роботи 09.06.2026 виконано
Здобувач вищої освіти ______________________ Єрмоленко В. В.
(підпис) (прізвище та ініціали)
Керівник роботи ______________________ Лавданська О. В.
(підпис) (прізвище та ініціали)
н
АНОТАЦІЯ
У кваліфікаційній роботі бакалавра розроблено веборієнтовану
інформаційну систему для формування та перегляду інтерактивного каталогу
мотоциклів. В якості інструментів для розробки вибрано комплекс React,
Node.js/Express та PostgreSQL.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає
84 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел.
Перший розділ кваліфікаційної роботи присвячений аналізу предметної
області та опису інтерактивного каталогу мотоциклів. Визначено актуальність
та доцільність створення ВІС для формування та перегляду інтерактивного
каталогу мотоциклів, особливості розробки дизайн сучасних ВІС. Здійснено
аналітичний огляд існуючих ВІС та визначено їх ключові відмінності.
Другий розділ присвячений проектуванню ВІС для формування та
перегляду інтерактивного каталогу мотоциклів: визначено ключові принципи
ВІС для формування та перегляду інтерактивного каталогу мотоциклів,
особливості застосування web-дизайну та описано етапи створення ВІС.
У третьому розділі здійснено огляд інструментів розробки ВІС для
формування та перегляду інтерактивного каталогу мотоциклів, визначено їх
переваги і недоліки. Обґрунтовано вибір комплекс React, Node.js/Express та
PostgreSQL для розробки ВІС. Описано процес розробки та інтерфейс створеної
ВІС.
Ключові слова: веборієнтована інформаційна система, інтерактивний
каталог, фреймворк, React, Node.js, Express, PostgreSQL, сервер, Figma.
ABSTRACT
A web-based information system for the formation and viewing of an
interactive motorcycle catalog has been developed in the bachelor's thesis. The
React, Node.js/Express and PostgreSQL complex was chosen as the development
tool.
The volume of the explanatory note of the bachelor's qualification work is
84 pages, including the introduction, 3 sections, conclusions, appendix and the list
of used sources. The work contains 22 drawings and 50 references.
The first section of the qualification work is devoted to the analysis of the
subject area and the description of the interactive motorcycle catalog. The relevance
and feasibility of creating a VIS for the formation and viewing of an interactive
motorcycle catalog are determined, the features of the development of the design
of modern VIS. An analytical review of existing VIS is carried out and their key
differences are identified.
The second section is devoted to the design of VIS for the formation and
viewing of an interactive motorcycle catalog: the key principles of VIS for the
formation and viewing of an interactive motorcycle catalog are determined, the
features of the application of web design are described, and the stages of creating
VIS are described.
The third section reviews the tools for developing a VIS for creating and
viewing an interactive motorcycle catalog, identifies their advantages and
disadvantages. The choice of React, Node.js/Express and PostgreSQL for
developing a VIS is justified. The development process and the interface of the
created VIS are described.
Keywords: web-based information system, interactive catalog, framework,
React, Node.js, Express, PostgreSQL, server, Figma.
н
ЗМІСТ
ВСТУП ............................................................................................................................................. 3
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ....................................................................... 6
1.1 Опис предметної області ................................................................................................ 6
1.2 Огляд та аналіз існуючих аналогів ............................................................................. 11
1.3 Постановка задачі .......................................................................................................... 19
1.4 Висновки до розділу 1 ................................................................................................... 26
РОЗДІЛ 2 ПРОЄКТУВАННЯ ВЕБОРІЄНТОВАНОЇ ІІНФОРМАЦІЙНОЇ
СИСТЕМИ ................................................................................................................ 28
2.1 Архітектура веборієнтованої інформаційної системи .......................................... 28
2.2 Особливості дизайну веборієнтованої інформаційної системи ........................... 32
2.3 Основні етапи розробки веборієнтованої інформаційної системи ..................... 37
2.4 Висновки до розділу 2 ................................................................................................... 40
РОЗДІЛ 3 РОЗРОБКА ВЕБОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ СИСТЕМИ ....... 41
3.1 Вибір засобів розробки веборієнтованої ІС .............................................................. 41
3.2 Розробка Front-end частини ........................................................................................ 45
3.3. Розробка Back-end частини………………………………………………48
3.2.1 Налаштування No.JS ......................................................................................... 48
3.2.2 Моделювання бази даних ................................................................................ 50
3.4 Розробка дизайну інтерфейсу ВІС ........................................................................... 565
3.5 Висновки до розділу 3 ................................................................................................. 633
ВИСНОВКИ ................................................................................................................................. 64
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ............................................................................... 66
ДОДАТОК A 482 ЧДТУ 2207-01 Веборієнтована інформаційна система для
формування та перегляду інтерактивного каталогу мотоциклів. Специфікація ...... 661
ЧДТУ 262207.007 ПЗ
Зм. Лист № докумемента Підпис Дата
Розроб. Єрмоленко В Літ. Лист Листів
Перев. Лавданська О.В. Веборієнтована інформаційна система Н 2 84
Реценз для формування та перегляду
ФІТІС,
Н. .контр. Лавданська О. В. інтерактивного каталогу мотоциклів.
Пояснювальна записка кафедра ІТП, Web-2211
Затв. Прокопенко Т.О.
ВСТУП
В умовах динамічного розвитку інформаційних технологій застосування
веборієнтованих інформаційних систем (ВОІС) є важливим завдяки їхній
здатності забезпечувати миттєвий доступ до даних та автоматизувати бізнес-
процеси незалежно від фізичного розташування користувача. На відміну від
класичних локальних систем, ВОІС працюють через браузер, що робить їх
універсальним інструментом для сучасного цифрового світу.
Доступність та мобільність ВОІС забезпечує можливості користувачам
працювати з системою з будь-якої точки світу та з будь-якого пристрою (ПК,
планшет, смартфон), де є інтернет. Це критично важливо для підприємств із
віддаленими філіями або працівниками на «дистанційці». Кросплатформність
сприяє незалежності систем від операційної системи клієнта (Windows, Linux,
macOS). Все, що потрібно для роботи — це актуальний веббраузер.
Централізоване управління та оновлення реалізовано через програмне
забезпечення, що встановлюється та оновлюється лише на сервері.
Користувачам не потрібно встановлювати жодних додаткових програм на свої
комп'ютери, що значно спрощує адміністрування та знижує витрати на ІТ-
підтримку. Масштабованість та спільна робота ВОІС легко підтримують
одночасну роботу великої кількості користувачів (багатокористувацький
режим) і дозволяють швидко нарощувати потужність системи відповідно до
зростання потреб бізнесу. Прозорість та швидкість даних: Автоматизація обліку
та обробки інформації в режимі реального часу забезпечує точність даних,
полегшує прийняття управлінських рішень та оптимізацію витрат.
Інтерактивний каталог на основі застосування веборієнтованих
інформаційних систем (ВОІС) є цифровою платформою, що дозволяє
користувачеві не просто переглядати перелік товарів чи послуг, а активно
взаємодіяти з контентом у режимі реального часу.
Актуальність. Веборієнтовані системи в умовах швидкого розвитку
інформаційних технологій стали фундаментом зв'язку, перетворивши інтернет
Арк.
ЧДТУ 262207.007 ПЗ 3
З м н. Арк. № докум. Підпис Дата
з простого джерела інформації на глобальне робоче та життєве середовище.
Завдяки поєднанню веборієнтованих систем та алгоритмів машинного навчання,
каталог перестав бути статичним списком товарів. Тепер це персоналізований в
реальному часі інтерфейс, який адаптується під користувача та миттєво змінює
асортимент і пропозиції на основі історії пошуку, кліків і навіть часу доби.
Стирає межу між онлайном і реальністю через технології доповненої реальності
(AR), дозволяючи «приміряти» товар з каталогу в інтер'єрі або на собі прямо в
браузері. Автоматизує оновлення через можливості системи підтягувати
актуальні ціни, наявність на складі та відгуки, виключаючи людський фактор.
Це перетворило каталог із простого інструменту перегляду на інтелектуальну
систему супроводу клієнта, яка веде його від інтересу до покупки.
Об’єктом дослідження є процес систематизації, збереження та
розповсюдження технічної інформації про транспортні засоби (мотоцикли)
через веб-середовище.
Предметом дослідження є методи та технології розробки
веборієнтованої інформаційної системи, що забезпечує формування та
інтерактивний перегляд каталогу мотоциклів.
Метою кваліфікаційної роботи бакалавра є створення веборієнтованої
інформаційної системи для формування та перегляду інтерактивного каталогу
мотоциклів на основі застосування комплексу сучасних засобів розробки. Для
досягнення поставленої мети кваліфікаційної роботи бакалавра необхідно
розв’язати наступні задачі:
• проаналізувати предметну область розробки;
• здійснити порівняльний аналіз засобів розробки створення
веборієнтованої інформаційної системи для формування та перегляду
інтерактивного каталогу мотоциклів на основі застосування і визначити
комплекс засобів розробки;
• сформувати вимоги до інтерфейсу веборієнтованої інформаційної
системи;
Арк.
ЧДТУ 262207.007 ПЗ 4
З м н. Арк. № докум. Підпис Дата
• розробити веб-орієнтовану інформаційну систему для формування та
перегляду інтерактивного каталогу мотоциклів.
Обсяг пояснювальної записки кваліфікаційної роботи бакалавра складає
77 сторінок, в тому числі вступ, 3 розділи, висновки, додаток та список
використаних джерел. Робота містить 22 рисунка та 50 інформаційних джерел.
Арк.
ЧДТУ 262207.007 ПЗ 5
З м н. Арк. № докум. Підпис Дата
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Опис предметної області
В сучасному житті веборієнтовані інформаційні системи стали
фундаментом зв'язку, перетворивши інтернет з простого джерела інформації на
глобальне робоче та життєве середовище. Сьогодні користувачі купують ПЗ, а
підписуються на сервіси (SaaS). Навіть робота з документами (Google Docs) чи
графікою (Canva) тепер відбувається в браузері. Соціальна інтеграція
реалізується через вебінтерфейси, що сприяє керуванню фінансами (банкінг),
отриманню державних послуг (Дія) та підтримці соціальні зв'язків. Навіть
побутові прилади завдяки технології Інтернет речей (IoT) тепер мають
вебінтерфейси для керування, що робить кожну домівку частиною глобальної
мережі.
Застосування інтерактивного каталогу забезпечує можливості
користувачеві динамічно взаємодіяти шляхом зміни вигляду сторінки,
використовувати фільтри, сортування та миттєвий пошук без перезавантаження
сторінки. Мультимедійність забезпечується через включення відеооглядів, 3D-
моделей товарів, анімацій та аудіо, що забезпечує ефект «занурення».
Інструменти вибору характери Наявність онлайн-конфігураторів (наприклад,
для підбору комплектації авто), калькуляторів вартості та сервісів порівняння
характеристик. Транзакційність через пряму інтеграцію з кошиком та
платіжними системами дозволяє здійснювати покупку безпосередньо з каталогу.
Збір аналітики через вебсистему забезпечує відстеження поведінки
користувача (на що натискав, які товари порівнював), що дозволяє
персоналізувати пропозиції. Актуальність даних на відміну від друкованих
каталогів, у веборієнтованому каталозі завжди відображає реальні залишки на
складі та актуальні ціни завдяки синхронізації з базами даних (ERP/CRM).
Демократизація доступу забезпечує цілодобовий доступ до інформації про
ресурси (наприклад, електронні бібліотечні каталоги OPAC) з будь-якої точки
світу.
Арк.
ЧДТУ 262207.007 ПЗ 6
З м н. Арк. № докум. Підпис Дата
Метою веборієнтованої інформаційної системи для формування та
перегляду інтерактивного каталогу мотоциклів є автоматизація процесу
систематизації та представлення даних про мототехніку для забезпечення
користувачів зручним інструментом пошуку, аналізу та вибору мотоциклів.
Дана система спрямована на централізацію інформації за рахунок створення
єдиної бази даних з актуальними технічними характеристиками, цінами та
медіаконтентом. Інтерактивність взаємодії надамть можливості користувачеві
можливості не просто читати текст, а взаємодіяти з контентом (порівнювати
моделі, фільтрувати за динамічними параметрами, переглядати 360-панорами).
Оптимізацію вибору спирятиме спрощенню процесу прийняття рішення для
покупця або ентузіаста за допомогою зручних інструментів навігації та
візуалізації. Ефективне управління контентом сприятиме наданню
адміністраторам (дилерам або модераторам) зручного інтерфейсу для швидкого
оновлення асортименту та редагування специфікацій без втручання в
програмний код. Результатом досягнення цієї мети є сучасний веб-ресурс, що
підвищує лояльність користувачів та ефективність продажів (якщо це
комерційний проєкт) або якість інформаційного обслуговування (якщо це
довідник).
В ніші мототехніки емоційна довіра та експертність є ключовими
факторами продажу. Коли бізнес інвестує в якісну інформаційну систему, він
транслює аудиторії професіоналізм. Така система працює на зміцнення
авторитету. Експертність через деталізацію, коли користувач бачить не просто
фото та ціну, а вичерпні технічні дані (графіки потужності, детальні
специфікації підвіски, типи гальмівних систем), забезпечує розуміння, що
компанія глибоко розбирається в продукті. Це перетворює каталог із простої
вітрини на експертний ресурс. Прозорість та чесність через інтерактивні
інструменти, такі як порівняння моделей, дозволяють користувачеві побачити
реальну різницю між дешевшим та дорожчим варіантами. Відсутність
прихованих параметрів будує фундамент довгострокової довіри. Технологічне
Арк.
ЧДТУ 262207.007 ПЗ 7
З м н. Арк. № докум. Підпис Дата
лідерство забезпечує учасний, швидкий та зручний веб-інтерфейс (особливо з
елементами 3D або якісним відео) підсвідомо асоціюється з надійністю самого
бренду. Якщо бізнес використовує передові IT-рішення, клієнт екстраполює цю
якість і на сервісне обслуговування чи якість техніки. Соціальний доказ та
фідбек сприяє інтеграції системи відгуків, рейтингів та реальних фото власників
всередині каталогу створює ефект спільноти. Бізнес, який не боїться відкритого
зворотного зв'язку, виглядає в очах аудиторії набагато авторитетнішим. Таким
чином, така система перетворює шлях клієнта з «я просто дивлюся» на «я
довіряю цій компанії свій вибір.
Веборієнтована інформаційна система для формування та перегляду
інтерактивного каталогу мотоциклів дає реальні маркетингові результати. У
сучасній мотоіндустрії веборієнтована система — це не просто цифрова вітрина,
а потужний інструмент конверсії. Маркетингові результати, які дає
впровадження такої системи забезпечують зростання конверсії через
інтерактивність. На відміну від статичних фото, інтерактивний каталог (з 3D-
оглядами 360°, конфігураторами кольорів та аксесуарів) затримує користувача
на сайті у 3–4 рази довше. Це підвищує ймовірність замовлення тест-драйву або
дзвінка. Автоматизація збору лідів дозволяє інтегрувати форми зворотного
зв'язку безпосередньо в картку моделі. Клієнт може записатися на сервіс або
перегляд; отримати розрахунок кредиту/лізингу в один клік; підписатися на
оновлення ціни на конкретну модель. Глибока аналітика споживчих переваг для
власників забезпечється можливості системою бачити не просто кількість
відвідувань, а конкретні дані: моделі, що найчастіше порівнюють між собою;
комплектації та кольори мають найбільший попит (це допомагає оптимізувати
закупівлі на склад); етапи перегляду каталогу користувач закриває сторінку.
Персоналізація маркетингу завдяки історії переглядів у каталозі, система
дозволяє налаштовувати ретаргетинг: якщо користувач тричі переглядав
категорію «Enduro», реклама в соцмережах пропонуватиме йому саме ці моделі
або екіпірування до них. SEO та органічне охоплення через структурований
Арк.
ЧДТУ 262207.007 ПЗ 8
З м н. Арк. № докум. Підпис Дата
каталог із технічними характеристиками та відгуками створює величезну
кількість релевантних сторінок для пошукових систем, що приводить цільовий
трафік без постійних витрат на рекламу.
Спираючись на статистику та звіти HubSpot (станом на 2025–2026 роки)
[1], використання веборієнтованих платформ та інтерактивного контенту
демонструє вражаючі результати для бізнесу:
Зростання прибутку та ROI. Близько 95% клієнтів HubSpot досягають
позитивного ROI, а 84% повідомляють про пряме зростання доходу компанії
після впровадження систем автоматизації маркетингу.
− генерація лідів. Компанії, що використовують комплексні
маркетингові платформи, за перший рік отримують у середньому на
129% більше вхідних лідів.
− ефективність інтерактивності. Інтерактивний контент (як-от
каталоги з конфігураторами) генерує в 2 рази більше залучення
порівняно зі статичним контентом. Крім того, він здатний подвоїти
показники конверсії.
− специфіка ніші. В індустрії "Авто та Мото" (Cars and Motorcycling)
середній показник конверсії сайтів коливається від 0,65% до 1,35%.
Проте впровадження інтерактивних інструментів продажів дозволяє
73% фахівців підвищити відсоток успішних угод (win rate).
− утримання уваги. Використання інтерактивних елементів на сайті
збільшує час перебування користувача на сторінці до 50%.
Наприклад, кейси в системі HubSpot показують, що компанії, які
переходять на розумні CRM-системи з інтегрованими каталогами та
автоматизацією, підвищують конверсію потенційних клієнтів на 173%.
Якісний контент інтерактивного каталогу перетворюється на «паливо»
для вірального маркетингу. Коли сайт надає унікальну інформацію (наприклад,
порівняння динаміки різних двигунів або 3D-візуалізацію кастомізації), він
запускає ланцюгову реакцію, що є соціальне підтвердження (Social Sharing).
Арк.
ЧДТУ 262207.007 ПЗ 9
З м н. Арк. № докум. Підпис Дата
Інтерактивні елементи — це те, чим хочеться поділитися. До них відносяться
конфігурації, коли користувач створив «мотоцикл своєї мрії» в конфігураторі й
робить репост у Facebook або Instagram, щоб запитати думку друзів. Це
безкоштовне охоплення для бренду. Інфографіка та ТТХ є унікальними даними
про випробування чи порівняльні таблиці стають джерелом посилань на
тематичних форумах та у спільнотах байкерів.
Електронний маркетинг (Email) нового рівня передбачає замість нудних
розсилок «Купіть у нас» цінність. При цьому виділяється персоналізація, якщо
система зафіксувала, що клієнт цікавився класом "Adventure", він отримає лист
зі статтею про вибір кофрів саме для цих моделей. Повернення (Abandoned
View) можливе через лист із нагадуванням про збережену в каталозі
конфігурацію має конверсію в рази вищу, ніж звичайна реклама. Створення
спільноти передбачає сайт, що перестає бути просто магазином і стає
інформаційним хабом. Коли користувачі діляться посиланнями на огляди чи
інтерактивні схеми, вони мимоволі стають амбасадорами бренду. Google
розцінює такі переходи з соцмереж як сигнал високої якості ресурсу, що ще
більше піднімає у пошуковій видачі. Зворотний зв'язок для бізнесу забезпечує
можливості отримання статистики, що зараз у тренді та який.
Для того, щоб каталог постійно генерував трафік та підвищував
впізнаваність бренду, варто впровадити тактику циклічного оновлення та
дистрибуції контенту, ключові кроки якої наступні [2]:
1. Серійність та регулярні оновлення. Замість того, щоб викласти всі
моделі одночасно, можна використовувати стратегію «релізів», таку як сезонні
оновлення, тобто додавання нових аксесуарів або тюнінг-пакетів до початку
сезону. «Модель тижня», що передбачає глибокий розбір однієї моделі з
інтерактивними схемами, що дає привід для щотижневого посту в соцмережах.
2. UGC (User Generated Content) — контент від користувачів. Система
може «добудовувати» себе за допомогою клієнтів. Відгуки з фото/відео дають
можливість завантажити фото свого мотоцикла в реальних умовах до картки
Арк.
ЧДТУ 262207.007 ПЗ 10
З м н. Арк. № докум. Підпис Дата
моделі в каталозі. Рейтинги та голосування через створення «Народного
рейтингу» надійності чи комфорту моделей.
3. Створення "Micro-content" для соцмереж. Де кожен елемент
інтерактивного каталогу можна розбити на дрібні одиниці контенту, наприклад
відео-стоп-кадри. тобто короткі ролики (Reels/Shorts), що показують процес
зміни кольору мотоцикла в конфігураторі. Порівняльні картки швидкі візуальні
порівняння характеристик (наприклад, "Old School vs Next Gen").
4. Експертний блог на базі каталогузабезпечує інтеграцію технічних
статей безпосередньо в опис категорій. наприклад, у розділі "Cruisers"
розмістити статтю "Як вибрати перший круїзер", що посилається на конкретні
моделі каталогу. Це створює додаткову вагу для SEO.
5. Партнерські посилання та віджети через надання можливості іншим
ресурсам (форумам, блогерам) вбудовувати ваш інтерактивний каталог або його
окремі моделі через iFrame або API.
1.2 Огляд та аналіз існуючих аналогів
Аналіз ринку показує, що системи каталогізації мототехніки
еволюціонували від простих переліків до складних екосистем. Для розробки
ефективної веборієнтованої системи розглянутj три типи аналогів[3]:
1. Глобальні агрегатори та бази даних (наприклад, Bikez.com). Це
«енциклопедії», що містять технічні характеристики майже всіх моделей з 1970-
х років. Сильні сторони: Величезний обсяг даних, можливість порівняння старих
і нових моделей, користувацькі рейтинги. Слабкі сторони: Застарілий дизайн
(UX/UI), низька інтерактивність, відсутність якісного візуального контенту
(3D/360°).Маркетинговий урок: Велика база даних залучає трафік, але не
утримує його без інтерактиву.
2. Офіційні конфігуратори брендів (наприклад, BMW Motorrad або Ducati
Configurator). Це еталонні системи для формування інтерактивного
досвіду.Сильні сторони: Фотореалістична 3D-візуалізація, можливість миттєво
Арк.
ЧДТУ 262207.007 ПЗ 11
З м н. Арк. № докум. Підпис Дата
додати аксесуари та побачити зміну ціни, інтеграція з дилерською мережею.
Слабкі сторони: Обмеженість лише одним брендом, висока вартість розробки та
підтримки. Маркетинговий урок: Інтерактивна кастомізація — головний
драйвер емоційних продажів.
3. Маркетплейси та дилерські платформи (наприклад, Cycle Trader або
AutoScout24). Системи, орієнтовані на швидкий продаж та лідогенерацію.
Сильні сторони: Потужні фільтри пошуку (за пробігом, локацією, ціною),
інтегровані фінансові калькулятори, адаптація під мобільні пристрої. Слабкі
сторони: Контент створюється продавцями, тому він часто неякісний або
неповний; відсутність «фанового» елемента. Маркетинговий урок: Зручність
пошуку та зв’язку є критичною для перетворення відвідувача на покупця.
Таблиця 1.1. Порівняльний аналіз характеристик
Характеристика Бази даних Брендові системи (BMW) Маркетплейси
(Bikez) (Cycle Trader)
Візуалізація Низька (фото) Найвища (3D/360°) Середня (галерея)
Інтерактивність Мінімальна МаксимальнаФункціональна Функціональна
(фільтри) (фільтри)
Ціль Інформування Емоційне залучення Продаж
(Транзакція)
SEO потенціал Високий Середній Найвищий
Bikez.com [4] — це одна з найстаріших та найповніших онлайн-
енциклопедій мотоциклів у світі, яка функціонує вже понад 20 років. Вона є
класичним прикладом глобального агрегатора даних, що побудував свою
маркетингову стратегію на масштабності інформації (рис.1.1).
Основні характеристики платформи наступні [4]:
− масштаб бази даних. Містить технічні характеристики, фотографії
та відгуки для понад 40 000 моделей мотоциклів, випущених у
період з 1894 по 2025 роки;
Арк.
ЧДТУ 262207.007 ПЗ 12
З м н. Арк. № докум. Підпис Дата
− охоплення брендів. У базі представлено понад 550 виробників —
від світових гігантів до маловідомих історичних марок;
− географія. Проєкт базується в Норвегії (Тьонсберг), але
орієнтований на глобальний англомовний ринок.
Рисунок 1.1 – Головна сторінка Bikez.com
Ключові функції для користувачів:
− глибокі технічні специфікації. Для кожної моделі доступні детальні
дані: тип двигуна, потужність, крутний момент, тип трансмісії,
гальма, вага та об’єм бака.Система порівняння: Дозволяє вивести
технічні дані або рейтинги двох різних мотоциклів поруч для
прямого порівняння.
− рейтинги від райдерів. Користувачі оцінюють мотоцикли за
параметрами: керованість, комфорт, надійність, вартість
обслуговування та дизайн. На основі цих даних формується
щорічний рейтинг «Motorcycle of the Year».
Арк.
ЧДТУ 262207.007 ПЗ 13
З м н. Арк. № докум. Підпис Дата
− дискусійні форуми. Кожна модельна лінійка має свою гілку
форуму, де власники обмінюються порадами щодо ремонту та
експлуатації.
Дошка оголошень: Безкоштовний сервіс для купівлі та продажу
вживаних мотоциклів.
Маркетинговий та технічний аспект передбачає:
− SEO-стратегію, завдяки величезній кількості сторінок із
низькочастотними запитами (конкретні моделі та роки випуску)
сайт займає топові позиції в Google за технічними запитами;
− UGC (User Generated Content) через значну частину контенту
(відгуки, фото, виправлення характеристик) генерується
спільнотою, що мінімізує витрати на підтримку актуальності бази;
− інтерфейс (UX), де сайт зберігає консервативний «текстовий»
дизайн, що забезпечує високу швидкість завантаження та зручність
для пошуку сухих фактів, але програє сучасним системам у
візуальній інтерактивності.
BMW Motorrad [5] — це один із лідерів у впровадженні цифрових
технологій для продажу мотоциклів (рис.1.2).
Рисунок 1.2 – Головна сторінка BMW Motorrad
Арк.
ЧДТУ 262207.007 ПЗ 14
З м н. Арк. № докум. Підпис Дата
Веборієнтована система фокусується на створенні емоційного зв'язку з
брендом через високу технологічність. Інтерактивний 3D-конфігуратор є ядром
цифрової екосистеми BMW. На відміну від статичних каталогів, він працює як
повноцінне CG-середовище мітить Live-збірку шарів, що містить конфігуратор,
який використовує окремі візуальні шари з каналами глибини для кожної деталі.
При додаванні опційне сидіння, кофру або захист двигуна, система не просто
змінює картинку, а динамічно збирає 3D-модель у реальному часі .Огляд 360° та
деталізація дозволяє користувачеві детально розглянути текстури матеріалів та
технічні вузли з будь-якого ракурсу. Інтеграція з реальністю через конфігуратор
враховує регіональні вимоги (хомологацію) та автоматично оновлює підсумкову
ціну (MSRP).
Віртуальний шоурум (Virtual Showroom) BMW в даній системі активно
використовує віртуальні тури, щоб стерти межу між онлайном та офлайном.
Bird's eye view забезпечує можливість переглянути весь шоурум з висоти
пташиного польоту та миттєво перейти до конкретної моделі або робочої зони.
VR та дистанційний доступ сприяє клієнтам відвідувати шоурум через VR-
окуляри безпосередньо в дилерському центрі або отримати персональне
посилання для безконтактного перегляду з дому .Інтерактивна підтримка через
вбудовані чати з консультантами прямо у віртуальному просторі дозволяють
отримати відповідь на складні технічні питання під час огляду байка.
Екосистема BMW Motorrad ConnectedМаркетингова стратегія BMW
полягає в тому, щоб зробити мотоцикл частиною цифрового життя райдера.
Додаток Connected App синхронізує смартфон з приладовою панеллю (TFT-
дисплеєм), забезпечуючи навігацію, керування музикою та дзвінками через
мультиконтролер на кермі. Інноваційні аксесуари, наприклад, ConnectedRide
Smartglasses, є окулярами, що проектують дані навігації та швидкість прямо в
поле зору водія (Head-up display).
Результативність для бізнесу завдяки стратегії у 2024 році BMW Motorrad
досягла рекордних показників — понад 210 408 продажів по всьому світу.
Арк.
ЧДТУ 262207.007 ПЗ 15
З м н. Арк. № докум. Підпис Дата
Система не лише продає залізо, а й залучає клієнтів до стилю життя через "My
BMW Motorrad" — персональний портал для керування своїми байками та
перегляду моделей мрії.
Веборієнтована інформаційна система для формування та перегляду
інтерактивного каталогу мотоциклів AutoScout24 [6] є найбільшою
загальноєвропейською онлайн-платформою для торгівлі автомобілями,
мотоциклами та комерційним транспортом (рис.1.3).
Рисунок 1.3 – Головна сторінка BMW AutoScout24
Заснована у 1998 році в Мюнхені (спочатку як MasterCar AG), система
сьогодні охоплює 19 країн, обслуговує понад 30 мільйонів користувачів
щомісяця та містить понад 2 мільйони оголошень. Ключовий функціонал
системи AutoScout24 працює як багаторівнева веборієнтована екосистема:
− інтерактивний пошук (Smart Search). Система використовує
детальні фільтри (марка, модель, тип палива, рік випуску,
екологічний стандарт) та автоматичну оцінку вартості, що
Арк.
ЧДТУ 262207.007 ПЗ 16
З м н. Арк. № докум. Підпис Дата
допомагає покупцям зрозуміти, наскільки вигідною є конкретна
пропозиція порівняно з середньоринковою ціною.
− AutoScout360°. Спеціальний інструмент для віртуального
перегляду автомобілів онлайн, що дозволяє «зайняти місце» в
салоні за допомогою 360-градусних панорам;
− AutoScout24 Smyle. Перший у світі повноцінний e-commerce сервіс
для купівлі вживаних авто повністю онлайн, що включає оплату,
страхування, реєстрацію та доставку додому з 14-денним правом на
повернення;
− платформа Direct (C2B). Новий сервіс, що дозволяє приватним
особам швидко продати свій автомобіль через мережу професійних
дилерів за допомогою аукціону.
Технічні та архітектурні особливості даної системи полягають в побудові
системи на базі сучасних хмарних та аналітичних технологіях:
− хмарна інфраструктура: платформа базується на AWS (Amazon
Web Services), що забезпечує масштабованість та високу
продуктивність (час оновлення даних було скорочено з годин до
хвилин).
− стек розробки: для серверної частини використовуються підходи
функціонального програмування (мова Scala) з такими
інструментами, як cats-effect для управління побічними ефектами
та http4s для HTTP-сервісів.CRM та управління замовленнями: Для
оптимізації взаємодії з дилерами та автоматизації процесів Smyle
використовується Salesforce Service Cloud;
− мобільна екосистема. Вебплатформа синхронізована з мобільними
застосунками, які надсилають миттєві push-сповіщення про зміну
ціни або нові оголошення за збереженими параметрами.
Група AutoScout24 постійно розширюється через поглинання інших
сервісів, таких як LeasingMarkt.de (лізинг), AutoProff (B2B-аукціони) та
Арк.
ЧДТУ 262207.007 ПЗ 17
З м н. Арк. № докум. Підпис Дата
канадський TRADER Corporation, що робить її глобальним гравцем на ринку
автотехніки
Розглянуті інформаційні ресурси представляють абсолютно різні підходи
до веборієнтованих систем: інформаційна база (Bikez), брендовий шоурум
(BMW) та комерційний маркетплейс (AutoScout24).
Bikez.com (Енциклопедичний каталог), тобто "Вікіпедія" для
мотоциклістів. Головний акцент тут на технічних характеристиках та історії
моделей з 1970-х років. Подача інформації максимально структурована, але
суха. Величезна база техданих (потужність, крутний момент, тип трансмісії). Є
унікальна система рейтингу моделей користувачами. Зображення часто низької
якості або аматорські, оскільки база наповнюється десятиліттями. Кольори та
дизайн застарілий інтерфейс (стиль 2000-х), багато білого фону та текстових
блоків. Велика кількість реклами, що відволікає.
Серед переваг можна виділити те, що це найповніша технічна база у
світі; можливість порівняти байки різних епох. Головний недолік даної системи
поганий візуальний досвід; відсутність інтерактивності.
BMW Motorrad (Офіційний сайт бренду), що є зразком для преміального
маркетингу. Система створена не для пошуку вживаного байка, а для занурення
в "світ бренду". Подача інформації є емоційною. Текстів небагато, вони
акцентують на технологіях (ABS Pro, Dynamic ESA) та способі життя.
Зображення найвищої якості, рендери, професійні відео. Є інтерактивні 3D-
конфігуратори, де можна "зібрати" байк. Кольори та дизайн -суворий, дорогий
мінімалізм. Фірмові кольори (білий, синій, темно-сірий). Велика кількість
"повітря" (вільного простору) на сторінках.
Серед переваг виділяють найвищий рівень візуалізації; інтерактивність
(конфігуратор). До недоліків можна віднести обмеженість лише одним брендом;
відсутність об’єктивних відгуків.
AutoScout24 (Комерційний маркетплейс), що є динамічною системою, де
головне — швидкість транзакції та актуальність ціни. Подача інформації
Арк.
ЧДТУ 262207.007 ПЗ 18
З м н. Арк. № докум. Підпис Дата
прагматична. На першому місці — ціна, пробіг, рік випуску та локація.
Інформація структурована для швидкого сканування очима. Зображення реальні
фото від продавців. Якість різна, але система стимулює робити багато ракурсів.
Є підтримка панорам 360°. Кольори та дизайн яскравий, енергійний (фірмовий
жовтий/помаранчевий колір). Багато кнопок заклику до дії ("Написати",
"Зателефонувати"). Переваги даної системи актуальні ціни; зручні фільтри;
геоприв'язка. Недоліки - візуальний хаос через різні умови зйомки у продавців;
технічні характеристики часто заповнюються поверхнево.
Таблиця 1.2. Порівняльні характеристики Bikez, BMW, AutoScout24
Характеристика Bikez.com BMW Motorrad AutoScout24
Призначення Довідка та Естетика та продаж Купівля/Продаж
порівняння нових вживаних
Візуал Слабкий (архівний) Еталонний Реалістичний (живий)
(рекламний)
Колірна гама Нейтральна (біло- Преміальна Акцентна (жовто-
сіра) (монохром) чорна)
Інтерактив Мінімальний Високий (3D- Середній (чат, фільтри)
(рейтинги) складання)
Аналіз досліджених систем показав, що для розробки веборієнтованої
інформаційної системи для формування та перегляду інтерактивного каталогу
мотоциклів, найкращою стратегією буде взяти структуру даних у Bikez, якість
візуалу та UX у BMW, а функціональність фільтрів та пошуку у AutoScout24.
1.3 Постановка задачі
Створення веборієнтованої інформаційної системи (ВІС) для
формування та перегляду інтерактивного каталогу мотоциклів — це не просто
створення сайту з картинками, а побудова динамічного середовища, яке вирішує
три основні задачі: структурування даних, візуальну взаємодію та
автоматизацію бізнес-процесів.
Дана система повинна забезпечити наступні можливості:
Арк.
ЧДТУ 262207.007 ПЗ 19
З м н. Арк. № докум. Підпис Дата
1. Інтерактивність та Візуалізація:
− 360-градусний огляд та 3D-конфігуратори. Можливість
«покрутити» байк, змінити колір кузова, встановити аксесуари
(кофри, дуги, вітрове скло) і миттєво побачити результат;
− динамічні картки характеристик. При наведенні на певну деталь
(двигун, підвіска) система може видавати підказки або
розгорнуті технічні специфікації;
− мультимедійні галереї. Інтеграція професійних відеооглядів та
записів звуку роботи вихлопної системи (що критично для
мотоциклістів).
2. Розумна система пошуку та порівняння:
− багатофакторна фільтрація. Пошук не лише за маркою, а й за
специфічними параметрами: висота по сідлу, тип приводу
(ланцюг/кардан), наявність систем безпеки (ABS, Traction Control);
− модуль порівняння «Side-by-Side». Можливість вивести 2-3 моделі в
одну таблицю, де система автоматично підсвітить відмінності в
характеристиках;
− персоналізовані рекомендації. На основі переглядів система може
пропонувати альтернативи (наприклад, «схожі крузери з меншою
вагою»).
3. Формування та управління контентом (для адміністраторів/дилерів):
− автоматизований імпорт даних. Можливість завантажувати списки
технічних характеристик напряму від виробників або через API;
− управління життєвим циклом оголошення. Автоматичне архівування
проданих моделей, оновлення цін у реальному часі та модерація
користувацького контенту;
− SEO-генерація. Автоматичне створення пошукових тегів та
оптимізованих сторінок для кожної моделі, щоб каталог було легко
знайти в Google.
Арк.
ЧДТУ 262207.007 ПЗ 20
З м н. Арк. № докум. Підпис Дата
4. Комунікаційні та комерційні можливості:
− інтеграція з месенджерами та чат-ботами. Миттєвий зв’язок із
консультантом прямо з картки мотоцикла;
− фінансовий калькулятор. Вбудований інструмент для розрахунку
кредиту, лізингу або вартості розмитнення (якщо каталог
міжнародний);
− бронювання та тест-драйв: Онлайн-календар для запису на перегляд або
пробну поїздку.
5. Аналітика та Big Data
− аналіз попиту. Система збирає дані про те, які бренди чи типи
мотоциклів шукають найчастіше в конкретному регіоні;
− теплові карти кліків. Відстеження того, які елементи каталогу (фото,
ціна чи техдані) найбільше цікавлять користувачів для покращення UX.
Оскільки це веборієнтована система, всі ці можливості доступні з будь-
якого пристрою без встановлення ПЗ, а оновлення каталогу відбувається
миттєво для всіх користувачів одночасно, що є технічною перевагою.
Враховуючи специфіку інтерактивного каталогу мотоциклів, основні
бізнес-процеси такої системи можна розділити на три ключові блоки: керування
контентом, взаємодія з користувачем та продажі/маркетинг (рис.1.4).
Процес роботи з
веб-системою
Аналітичний
модуль
Back-office
Інтерактивний Бізнес-логіка та
каталог
комунікація
Рисунок 1.4 – Діаграма бізнес-процесів веборієнтованої системи
Арк.
ЧДТУ 262207.007 ПЗ 21
З м н. Арк. № докум. Підпис Дата
Діаграма бізнес-процесів веборієнтованої системи містить детальний
перелік:
1. Керування каталогом (Back-office). Це процеси, що забезпечують
наповнення системи «паливом» — даними:
− реєстрація та модерація об'єктів. Додавання нових моделей
мотоциклів, перевірка технічних характеристик на відповідність
стандартам виробника.
− управління мультимедіа. Завантаження, стиснення та прив'язка фото,
відео та 3D-панорам до конкретних карток товарів.
− актуалізація прайс-листів. Автоматичне або ручне оновлення цін,
курсів валют та наявності техніки на складах.
− класифікація та тегування. Прив’язка моделей до категорій
(спортбайки, ендуро, крузери) для коректної роботи фільтрів.
2. Керування користувацьким досвідом (Front-office) – процеси, що
відбуваються безпосередньо під час перегляду каталогу:
− обробка пошукових запитів, тобто робота пошукових алгоритмів,
фільтрація за параметрами та сортування результатів.
− порівняння об'єктів, формування динамічних таблиць для
зіставлення характеристик декількох моделей.
− персоналізація, тобто збереження історії переглядів, формування
списків «Обране» та налаштування сповіщень про нові надходження.
3. Комерційні та комунікаційні процеси – процеси, що перетворюють
відвідувача на клієнта:
− обробка лідів (запитів), тобто збір та маршрутизація заявок з форм
зворотного зв'язку, запитів на тест-драйв або консультацію;
− Бронювання, тобто процес тимчасового резервування конкретної
одиниці техніки за користувачем;
Арк.
ЧДТУ 262207.007 ПЗ 22
З м н. Арк. № докум. Підпис Дата
− управління рекламою та просуванням через розміщення
пріоритетних («топових») оголошень, інтеграція рекламних банерів та
партнерських пропозицій (страхування, екіпірування).
4. Аналітичні процеси:
− моніторинг активності, що містить збір статистики переглядів, кліків
та запитів для формування звітів щодо популярності брендів.
− аналіз воронки продажів включає: відстеження шляху користувача
від першого кліку в каталозі до заповнення форми запиту.
Спрощена схема потоку даних (Data Flow) виглядає наступним чином
(рис. 1.5).
А дмін вносить дані БД Система
Інтерфейс Користувач
Рисунок 1.5 – Спрощена схема потоку даних (Data Flow)
Для опису веборієнтованої системи каталогу мотоциклів застосовано дві
діаграми: Use Case (функціонал) та Sequence (логіка взаємодії).
Діаграма прецедентів (Use Case Diagram) візуалізує, хто і як взаємодіє з
системою. До акторів відносяться:
− Користувач (Гість),
− Авторизований покупець,
− Адміністратор контенту.
Основними прецедентами є наступні:
− Користувач: Перегляд списку, Пошук за фільтрами, Перегляд
360°-моделі, Порівняння моделей.
Арк.
ЧДТУ 262207.007 ПЗ 23
З м н. Арк. № докум. Підпис Дата
− Адміністратор: Додавання нового мотоцикла, Модерація
відгуків, Оновлення технічних характеристик.
Діаграма послідовності (Sequence Diagram) описує процес «Перегляд
інтерактивної картки мотоцикла». Це є ключовим процесом даної системи.
Логіка взаємодії:
1. Користувач обирає конкретну модель у браузері.
2. Веб-інтерфейс надсилає запит до API-сервера (GET /motorcycles/{id}).
3. API-сервер звертається до Бази даних за характеристиками.
4. База даних повертає текст та посилання на медіа-файли.
5. API-сервер одночасно звертається до Хмарного сховища (S3) для
отримання важких інтерактивних елементів (3D/HD-фото).
6. Веб-інтерфейс рендерить отримані дані та ініціалізує скрипт для
інтерактивного перегляду.
Діаграма класів (Class Diagram) представляє структур даних. Щоб
каталог працював, класи мають виглядати так:
• Motorcycle: id, brand, model, engine_vol, price.
• MediaAsset: id, type (image/360_view), url.
• Category: id, name (Sport, Touring, etc.).
• Specification: id, parameter_name, value.
Робота веборієнтованої інформаційної системи (ВІС) представлено
вигляді структури IDEF0, де зверху йде управління, знизу — механізми
(виконавці), а зліва направо — потік даних (рис.1.6).
Введення даних та завантаження медіа (Вхід) розпочинається з
активності Адміністратора. Він вносить у систему технічні характеристики:
потужність двигуна, тип підвіски, габарити тощо. Медіа-пакети включають
набори фотографій з різних ракурсів (для 360°-огляду) та текстури для зміни
кольору. На цьому етапі передбачається контроль, коли адміністратор керується
технічними регламентами виробника, щоб опис відповідав стандартам бренду.
Арк.
ЧДТУ 262207.007 ПЗ 24
З м н. Арк. № докум. Підпис Дата
Валідація та обробка інтерактиву передбачає підключення до роботи
програмного модуля обробки. Тобто система автоматично перевіряє, чи всі
файли завантажено коректно. Відбувається «склейка» окремих фотографій у
єдину інтерактивну модель, яку користувач зможе обертати мишкою. Якщо
виявлено помилку (наприклад, бракує ракурсу), система повертає процес на
крок назад.
Рисунок 1.6 – IDEF0 роботи веборієнтованої інформаційної системи
Категоризація та SEO-оптимізація реалізується після технічної обробки.
Адміністратор (або автоматизований алгоритм) виконує логічну прив'язку,
тобто призначає модель до певної категорії (Крузери, Спортивні, Ендуро).
Прописує теги для фільтрації.Формує мета-теги (заголовки, описи) для того,
щоб мотоцикл можна було знайти через Google.
Збереження та публікація є фінальним технічним кроком, де залучена
База даних та API. Вся інформація структурується та записується в БД.
Генерується унікальне посилання на картку мотоцикла. Виходим є сформована
Арк.
ЧДТУ 262207.007 ПЗ 25
З м н. Арк. № докум. Підпис Дата
сторінка стає доступною для перегляду звичайним користувачам у загальному
каталозі.
Завдяки такій структурі ми отримуємо не просто статичну картинку, а
повноцінний цифровий актив, який можна фільтрувати, порівнювати та
роздивлятися з усіх боків.
1.4 Висновки до розділу 1
Створення сучасної веборієнтованої інформаційної системи для
управління каталогом мотоциклів обумовлено необхідністю трансформації
традиційного досвіду вибору техніки у високотехнологічний цифровий процес.
У сучасних умовах ринку статичних зображень та текстових описів уже
недостатньо для задоволення потреб вибагливого клієнта, який прагне отримати
максимально повне уявлення про продукт дистанційно. Впровадження такої
системи дозволяє бізнесу вийти за межі фізичного шоуруму, надаючи
користувачам можливість детально досліджувати технічні особливості та
дизайн кожної моделі через інтерактивні інструменти, такі як 360-градусні
огляди чи віртуальні конфігуратори кольорів.
З іншого боку, необхідність такої ВІС диктується потребою в ефективній
автоматизації внутрішніх процесів компанії. Централізоване управління
великими обсягами мультимедійного контенту та технічних характеристик
забезпечує цілісність даних і дозволяє миттєво оновлювати асортимент на всіх
платформах одночасно. Це не лише мінімізує ризик виникнення помилок при
ручному введенні даних, але й значно пришвидшує шлях мотоцикла від складу
виробника до вітрини онлайн-магазину.
Крім того, розробка спеціалізованої системи відкриває нові можливості
для аналітики та маркетингу. Відстежуючи взаємодію користувачів з
інтерактивними елементами, компанія отримує цінні інсайти щодо популярності
конкретних моделей чи комплектацій, що дозволяє формувати точніші стратегії
закупівель та продажів. Таким чином, ВІС стає стратегічним інструментом, який
одночасно підвищує лояльність клієнтів через якісний сервіс та оптимізує
Арк.
ЧДТУ 262207.007 ПЗ 26
З м н. Арк. № докум. Підпис Дата
операційну діяльність підприємства, створюючи вагому конкурентну перевагу в
цифровій екосистемі. В першому розділі кваліфікаційної роботи визначено
основні етапи створення веборієнтованої інформаційної системи та здійснено
аналітичний огляд найпоширеніших типів систем з наведенням наочних
прикладів.
Арк.
ЧДТУ 262207.007 ПЗ 27
З м н. Арк. № докум. Підпис Дата
РОЗДІЛ 2 ПРОЄКТУВАННЯ ВЕБОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ
2.1 Архітектура веборієнтованої інформаційної системи
Веб-технології часто представляють як «революцію», що стимулює зміни
від статичних, ієрархічних структур до динамічних, гнучких та заснованих на
знаннях організаційних форм. Однак наразі організаційні моделі для
впровадження та управління веб-додатками можна описати лише як нові.
Технологія перебуває в стані змін — з конкуренцією між альтернативними
продуктами та технічними стандартами — і організації, які проектують та
впроваджують веб-системи, часто не знають про відповідні організаційні моделі
та технологічні рішення [7].
Складні веб-інформаційні системи тісно інтегровані з іншими,
традиційними або невеб-інформаційними системами, наприклад, базами даних
та системами обробки транзакцій, або іншим чином складно пов'язані з іншими
комунікаційними технологіями. Такі складні веб-інформаційні системи
відрізняються від звичайних веб-сайтів (набору веб-сторінок) тим, що вони
опосередковують взаємодію між кількома розподіленими суб'єктами, які є не
лише користувачами, але й дизайнерами в тому сенсі, що вони роблять внесок у
структуру та контент системи. Гнучкі та інтегративні за своєю природою,
складні веб-інформаційні системи служать різному призначенню. Вони
забезпечують універсальний мультимодальний інтерфейс користувача для
бізнес-додатків, баз даних та застарілих систем, одночасно підтримуючи
управління документами та робочими процесами, спільну роботу та
розподілений обмін знаннями.
Доступність веб-технологій для складних веб-інформаційних систем
створила низку цікавих викликів стосовно традиційних інформаційних систем,
які можна описати наступним чином [8]:
Арк.
ЧДТУ 262207.007 ПЗ 28
З м н. Арк. № докум. Підпис Дата
• Веб — це принципово нове середовище людського спілкування, а не
технологія для обробки інформації чи обчислень. Як наслідок, розробка
програмного забезпечення поєднається з медіа-дизайном.
• Веб-інформаційні послуги будуть доступні будь-коли та в будь-якому
місці. Ця повсюдність послуг призведе до появи нових видів організацій та
нових способів взаємодії в рамках існуючих організацій (наприклад,
розподілених та мережевих організаційних форм).
• Швидкість змін у технологіях є безпрецедентною. Темпи, з якими
винаходяться нові інструменти та методи, нечувані навіть у швидкозмінному
світі обчислень. Таке поширення нових технологій створює кошмар сумісності
для розробників додатків та користувачів і ускладнює управління процесом
розробки.
• Традиційний розподіл праці та визначення робочих ролей у розробці ІС
руйнується. Різниця між дизайнерами, програмістами та користувачами стає
дедалі розмитішою, і в процес дизайну входять нові типи спеціалістів, такі як
графічні дизайнери та фахівці з комунікацій.
Архітектура веборієнтованої інформаційної системи (ВІС) складається з
графічних клієнтів та агентів сповіщень і працює з покращеними HTTP-
серверами, що складають цільові WBIS (рис.2.1). Сервери можуть обробляти два
методи для посилань метарівня: LINK та UNLINK. WebArchitect може
обробляти розподілену WBIS, яка складається з кількох серверів на різних
хостах. Існує два типи клієнтів: макро- та мікроклієнти. Макро-клієнти
показують огляд архітектури WBIS. Мікро-клієнти надають детальний огляд
частини архітектури та функції для маніпулювання веб-ресурсами. Прямокутна
область в макро-клієнті відображається детально в мікро-клієнтах. Обидва
режими роботи є кооперативними: якщо один режим переміщується або
змінюється, інший режим поводиться відповідно [9].
Арк.
ЧДТУ 262207.007 ПЗ 29
З м н. Арк. № докум. Підпис Дата
Рисунок 2.1 – Узагальнена архітектура веборієнтованої інформаційної
системи
Агенти сповіщень контролюють повідомлення-відповіді, що
надсилаються серверами за допомогою SNP (простого протоколу сповіщень),
розробленого нами. Якщо агенти сповіщень виявляють події, вказані
користувачами, агенти повідомляють користувачів про ці події через визначені
засоби зв'язку (наприклад, електронну пошту, пейджер тощо) [10].
В основі ВІС для формування та перегляду інтерактивного каталогу
мотоциклів багаторівнева архітектура (N-tier architecture), яка розділяє
інтерфейс, логіку та дані. Це дозволяє системі швидко завантажувати важкий
медіа-контент (3D-моделі, 360-фото), не гальмуючи роботу бази даних.
Ключовими рівнями архітектури ВІС є наступні [11]:
Арк.
ЧДТУ 262207.007 ПЗ 30
З м н. Арк. № докум. Підпис Дата
1. Рівень представлення (Client Side / Front-end) є тим, що бачить
користувач у браузері. Для інтерактивного каталогу тут використовуються:
• Single Page Application (SPA): Фреймворки React, Vue.js або Angular для
швидкої навігації без перезавантаження сторінок.
• Інтерактивні рушії: Бібліотеки типу Three.js або Babylon.js для рендерингу
3D-моделей мотоциклів.
• Адаптивна верстка: Щоб каталог однаково зручно виглядав і на великому
моніторі, і на смартфоні.
2. Рівень прикладної логіки (Server Side / Back-end) представляє
центральний «мозок» системи, який обробляє запити:
• REST API або GraphQL: Шлюз, через який фронтенд спілкується з
сервером.
• Сервіс обробки зображень: Автоматично створює мініатюри та оптимізує
360-панорами для швидкого завантаження.
• Модуль фільтрації: Складна логіка підбору мотоциклів за перехресними
параметрами (ціна + об'єм двигуна + тип).
• Система кешування (Redis/Memcached): Тимчасове зберігання частих
запитів, щоб не перевантажувати базу даних.
3. Рівень даних (Data Tier) зберігає всю інформацію:
• Реляційна БД (PostgreSQL/MySQL): Для зберігання структурованих
даних: ТТХ мотоциклів, замовлення, дані користувачів.
• NoSQL БД (MongoDB) — опціонально: Може використовуватися для
зберігання гнучких характеристик різних типів техніки (наприклад, різні
набори параметрів для електробайків та бензинових моделей).
• Об'єктне сховище (S3): Спеціальне місце для «важких» файлів (фото
високої якості, відеоогляди, 3D-об'єкти).
Архітектурна схема ВІС представлено на рис.2.2.
Арк.
ЧДТУ 262207.007 ПЗ 31
З м н. Арк. № докум. Підпис Дата
Browser React ThreeJS
API Logic Auth
DB Redis
Рисунок 2.2 – Архітектурна схема веборієнтованої інформаційної
системи
Схема взаємодії (Architecture Flow) реалізовано наступним чином:
користувач через браузер запитує модель мотоцикла. Front-end звертається до
API. Back-end бере технічні дані з SQL-бази, а посилання на 3D-модель — зі
сховища S3. Всі ці дані збираються в один пакет (JSON) і повертаються клієнту.
Браузер за допомогою графічного процесора (GPU) користувача збирає та
відображає інтерактивну модель.
Побудова ефективної веборієнтованої системи (ВІС) з інтерактивним
каталогом базується на наступних п'яти ключових принципів. Вони
забезпечують як зручність для користувача, так і технічну стабільність системи:
1. Принцип інтерактивної візуалізації (Visual-First), що є фундаментом
системи. Глибина огляду: Можливість не просто дивитися фото, а взаємодіяти з
об'єктом (360°-обертання, масштабування вузлів двигуна, зміна кольору кузова
в реальному часі).Інформаційна насиченість: Кожна деталь на інтерактивній
моделі може бути «клікабельною» (Hotspots) для виклику підказки з технічними
даними.
2. Висока продуктивність та швидкість завантаження. Оскільки
інтерактивний контент (3D/HD) важить багато, система має бути
Арк.
ЧДТУ 262207.007 ПЗ 32
З м н. Арк. № докум. Підпис Дата
оптимізованою: Lazy Loading: Завантаження «важких» елементів (3D-моделей)
лише тоді, коли користувач відкриває конкретну картку. Оптимізація ресурсів:
Використання сучасних форматів стиснення медіа (наприклад, WebP для фото
або Draco-стиснення для 3D-сіток).
3. Кросплатформеність та адаптивність. Користувач повинен мати
однаковий досвід на різних пристроях: Mobile-Friendly: Інтерактивні елементи
мають коректно реагувати на жести пальцями (свайпи, щипки для
зуму).Браузерна сумісність: Використання стандарту WebGL, який
підтримується всіма сучасними браузерами без встановлення додаткових
плагінів.
4. Зручність навігації та пошуку (UX/UI). Користувач не повинен
губитися в каталозі:Багаторівнева фільтрація: Миттєвий підбір за параметрами
(бренд, об’єм двигуна, тип посадки).Контекстне порівняння: Можливість додати
модель до порівняння в один клік і побачити різницю в характеристиках наочно.
5. Принцип цілісності та актуальності даних. Система повинна бути
надійним джерелом інформації: Централізоване управління: Адміністратор
змінює ціну або опис в одному місці, і вони миттєво оновлюються в усіх
розділах каталогу. Єдність структури: Сувора відповідність технічних даних
(ТТХ) регламентам виробників, що виключає дезінформацію клієнта.
2.2 Особливості дизайну веборієнтованої інформаційної системи
Дизайн ВІС для формування та перегляду інтерактивного каталогу
мотоциклів має поєднувати естетику бренду з високою функціональністю,
оскільки специфіка товару (дорога, емоційна техніка) вимагає особливого
візуального підходу.
Ключовими особливостями дизайну ВІС для формування та перегляду
інтерактивного каталогу мотоциклів є наступні:
1. Акцент на візуальному контенті (Immersive Design) «Повітряний»
інтерфейс. Використання великої кількості вільного простору (white space), щоб
Арк.
ЧДТУ 262207.007 ПЗ 33
З м н. Арк. № докум. Підпис Дата
не відволікати користувача від головного — фото та 3D-моделей мотоциклів.
Темна тема (Dark Mode), тому що індустрія часто використовує темні кольори
(вуглеволокно, метал, асфальт) для підкреслення преміальності та агресивності
дизайну. Cinemagraphs та мікровідео замість статичних банерів — фонові відео
з роботою двигуна або рухом байка для створення ефекту присутності.
2. Специфічний UX для інтерактиву. Інтуїтивні контролери 360°.
Користувач має відразу розуміти, як «крутити» модель. Використовуються
підказки у вигляді напівпрозорих іконок рук або стрілок, що зникають після
першої дії. Hotspots (Активні зони) для розміщення інтерактивних точок на
ключових вузлах мотоцикла (гальма Brembo, амортизатори Ohlins). При кліку
відкривається «поп-ап» із детальним описом саме цього компонента. Плавні
переходи забезпечує анімація зміни кольору або комплектації має бути
безшовною, без повного перезавантаження сторінки.
3. Адаптація під мобільне керування (Touch-First). Зона великого пальця,
оскільки мотоцикли часто обирають «на ходу», основні фільтри та кнопки
навігації повинні знаходитися в нижній частині екрана. Gesture Control
забезпечує підтримка жестів (pinch-to-zoom) для детального розгляду текстури
шкіри сидіння або зварних швів на рамі.
4. Дизайн параметричних даних. Інфографіка замість таблицьзабезпечує
технічні характеристики (потужність, крутний момент) краще подавати у
вигляді динамічних діаграм або іконок, що легко зчитуються, а не сухим
текстом. Візуальне порівняння при порівнянні двох моделей дизайн має
підсвічувати різницю (наприклад, червоним кольором — меншу потужність,
зеленим — більшу).
5. Конверсійні елементи. Закріплений CTA (Call to Action) через кнопку
«Записатися на тест-драйв» або «Хочу такий» має бути видимою постійно,
незалежно від глибини скролінгу картки товару. Інтерактивна мапа дилерів
представляє дизайн модуля пошуку найближчого салону з автоматичним
визначенням локації користувача.
Арк.
ЧДТУ 262207.007 ПЗ 34
З м н. Арк. № докум. Підпис Дата
Перше, що помічають користувачі при користуванні будь-яким
продуктом – це дизайн. Для каталогу мотоциклів дизайн — це не просто
«красива картинка», а інструмент продажу. Оскільки мотоцикл є емоційним
товаром, візуальне сприйняття формує довіру до бренду ще до того, як
користувач прочитає технічні характеристики. В контексті ВІС, перше враження
базується на трьох «китах»: візуальна домінанта, коли користувач має миттєво
побачити головний об'єкт — мотоцикл. Використання великих, якісних
зображень або фонового відео створює ефект присутності в шоурумі. Відчуття
технологічності є другим аспектом. Оскільки каталог інтерактивний, дизайн має
підказувати: «мене можна торкатися, крутити, змінювати». Плавні мікроанімації
при наведенні курсору на колесо чи бак спонукають до дослідження. Естетика
швидкості та сили – третя складова. Вибір шрифтів (часто масивних або
італійського типу — витягнутих) та колірної палітри (контрастні поєднання
чорного, червоного, металевого) повинен відповідати духу мотокультури. Якщо
перші 3-5 секунд користувач відчуває дискомфорт від перевантаженого меню
або застарілих іконок, він закриє сайт, навіть якщо у вас найкраща 3D-модель у
світі.
Три елементи — колір, анімація та зображення — складають «емоційний
каркас» ВІС для інтерактивного каталогу. Для тематики мотоциклів вони мають
працювати не просто на прикрашання, а на створення відчуття драйву та
преміальності. Реалізувати ці компоненти у ВІС можна натупним чином:
1. Психологія кольору передає енергію та контраст. У мотосвіті кольори
зазвичай поділяються на дві стратегії:«Dark Garage» (Темний преміум): Чорний,
антрацитовий та темно-сірий фони. Вони ідеально підкреслюють хромовані
деталі та яскраві кольори самих мотоциклів. Це створює ефект нічного міста або
елітного боксу.Акцентні кольори: Використання фірмових кольорів брендів
(червоний Ducati, помаранчевий KTM, зелений Kawasaki) лише для кнопок та
важливих показників. Це не перевантажує зір і веде користувача до цілі
(наприклад, до кнопки «Тест-драйв»).
Арк.
ЧДТУ 262207.007 ПЗ 35
З м н. Арк. № докум. Підпис Дата
2. Анімація реалізує процес від залучення до взаємодії. Анімація у ВІС
має бути «розумною», щоб не дратувати. Паралакс-ефект, коли при скролінгу
фон рухається трохи повільніше за мотоцикл, створюючи ілюзію глибини та
руху. Мікровзаємодії передбачають коли користувач наводить курсор на деталь
(наприклад, гальмівний диск), вона може злегка підсвітитися або «пульсувати»,
підказуючи, що тут є прихована інформація. Плавний вхід (Reveal) є поступовою
появою елементів інтерфейсу при завантаженні сторінки, що фокусує увагу
спочатку на мотоциклі, а потім — на його характеристиках.
3. Зображення передбачає створення візуального "гачка". Для
інтерактивного каталогу звичайних фото замало: Hero-images є головним
зображенням на першому екрані має бути «емоційним» — мотоцикл у динаміці
або при професійному студійному освітленні з грою відблисків на баку.
Макрозйомка є можливість наблизити зображення так, щоб побачити текстуру
сидіння, структуру протектора шин або гравіювання на двигуні. Це викликає
відчуття реального володіння річчю.360°-панорами, що є головним елементом
цікавості — можливість самостійно «обійти» байк навколо, що замінює візит до
фізичного магазину. Поєднання цих елементів перетворює перегляд каталогу на
захопливий досвід.
Дизайн веборієнтованої інформаційної системи для формування та
перегляду інтерактивного каталогу мотоциклів виступає не просто візуальною
оболонкою, а стратегічним інструментом формування довіри та емоційного
зв'язку з користувачем. Він базується на гармонійному поєднанні глибокої
контрастної палітри, яка підкреслює текстуру металу та пластику, з
інтерактивними елементами, що перетворюють звичайний перегляд на
цифровий тест-драйв. Використання плавних анімацій та високоякісних
зображень з ефектом присутності дозволяє відтворити атмосферу реального
шоуруму, де кожна деталь — від блиску фар до фактури сидіння — стає
доступною для дослідження. Такий підхід робить інтерфейс інтуїтивно
Арк.
ЧДТУ 262207.007 ПЗ 36
З м н. Арк. № докум. Підпис Дата
зрозумілим і технологічним, стимулюючи цікавість відвідувача та
перетворюючи пасивне спостереження на активну взаємодію з брендом.
2.3 Основні етапи розробки веборієнтованої інформаційної системи
Розробка веборієнтованої системи для формування та перегляду
інтерактивного каталогу мотоциклів — це комплексний процес, що поєднує
інженерну точність із креативним підходом до візуалізації.
Основними етапами створення такої системи є наступні [12]:
Етап 1. Аналіз та проектування (Discovery Phase).
На цьому етапі визначаються бізнес-цілі та технічні обмеження.
Формується технічне завдання (ТЗ), де описуються всі функціональні
можливості: від фільтрації за кубатурою до логіки роботи 360°-плеєра.
Створюється архітектурний план системи, обирається стек технологій та
розробляються UML-діаграми, які ми розглядали раніше.
Етап 2. Розробка структури та UX-прототипування.
Дизайнери створюють карту сайту та інтерактивні прототипи
(wireframes). Важливо спроектувати шлях користувача так, щоб перехід від
перегляду загального списку до обертання 3D-моделі конкретного мотоцикла
був безшовним. На цьому ж етапі проектується структура бази даних, яка
повинна витримувати навантаження при одночасних запитах до медіа-контенту.
Етап 3. Створення дизайну (UI Design).
Прототипи перетворюються на реальні макети. Підбирається колірна
гама, шрифти та стилістика іконок, що відповідають духу мотоспорту. Особлива
увага приділяється дизайну інтерфейсу плеєра для інтерактивного огляду та
вигляду карток технічних характеристик.
Етап 4. Frontend-розробка.
Програмісти реалізують клієнтську частину. Основний виклик тут —
інтеграція графічних бібліотек (наприклад, Three.js) для рендерингу мотоциклів.
Арк.
ЧДТУ 262207.007 ПЗ 37
З м н. Арк. № докум. Підпис Дата
Важливо забезпечити високу швидкість роботи інтерфейсу, щоб важкі медіа-
файли не гальмували браузер користувача.
Етап 5. Backend-розробка та API.
Створюється «серце» системи: серверна логіка, база даних та
адміністративна панель. Розробляються інструменти для зручного завантаження
3D-панорам адміністратором та алгоритми швидкого пошуку/фільтрації.
Налаштовується безпека даних та інтеграція з хмарними сховищами для великих
файлів.
Етап 6. Наповнення контентом та тестування.
У систему завантажуються реальні дані про мотоцикли та медіа-пакети.
QA-інженери тестують систему на різних пристроях та браузерах, перевіряючи
коректність відображення інтерактивних моделей, швидкість завантаження
сторінок та роботу всіх форм зворотного зв'язку.
Етап 7. Розгортання та підтримка (Deployment).
Система переноситься на хостинг або хмарний сервер. Налаштовуються
інструменти моніторингу та аналітики. Після запуску розпочинається етап
підтримки: виправлення дрібних помилок на основі відгуків перших
користувачів та поступове оновлення функціоналу.
Веб-хостинг – це компанія, яка пропонує простір на сервері, щоб зробити
веб-сайти або системаи своїх клієнтів доступними в Інтернеті. Іншими словами,
вони забезпечують простір, який ви займатимете у всесвітній мережі [13].
Існує багато причин, чому варто вибрати власний хостинг замість
безкоштовного хостингу. При виборі платного веб-хостингу, ви маєте перевагу
мати власне доменне ім’я та мати повний контроль над системаом, від його
зовнішнього вигляду до проблем безпеки та резервного копіювання.
Багато провайдерів веб-хостингу мають різні тарифи та ціни з
відповідними функціями. Вибираючи послугу веб-хостингу, варто звернути
увагу на наступне [14]:
Арк.
ЧДТУ 262207.007 ПЗ 38
З м н. Арк. № докум. Підпис Дата
• Обсяг веб-простору. Звісно, система буде розвиватися в
майбутньому, тому слід розглянути веб-хостинг, який пропонує більш ніж
достатньо місця для зберігання. Також потрібно розглянути вміст, який
планується публікуватись у блозі. Якщо він багатий на медіа (зображення, відео,
аудіо), то однозначно потрібно більше місця в Інтернеті.
• Вартість та спосіб оплати. В першу чергу тут потрібно визначитись
з ціною за хостинг. Це точка порівняння для багатьох, коли порівнюють плату
від різних провайдерів веб-хостингу. Деякі провайдери стягують щомісячну
плату, а інші надають можливість своїм клієнтам платити щорічно. Це, в свою
чергу, залежить від готовності та спроможності власника системи платити.
• Налаштування та наявність інструментів. Веб-хост повинен надавати
певний рівень контролю над тим, як повинен розміщуватися та функціонувати
система. Тут варто порівняти різні плани та подивиться, які інструменти та
функції потрібні для налаштування й керування системою.
• Заходи безпеки, час роботи та швидкість доступу. Належну увагу
слід приділити захисту розміщуваних на хостингу систем. Якщо система
завантажується дуже довго, читачі можуть «переїхати» в інше місце.
Використання системи контролю версій Git є критично важливим для
розробки такої складної системи, як ВІС для формування та перегляду
інтерактивного каталогу мотоциклів, оскільки вона поєднує роботу
програмістів, дизайнерів 3D-графіки та контент-менеджерів.
Git застосовується в розробці цього проекту наступним чином [15]:
1. Паралельна розробка функціоналу. Оскільки система складається з
багатьох модулів (фільтрація, 3D-плеєр, адмін-панель), команда використовує
розгалуження (Branching). Наприклад, один розробник працює у гілці feature/3d-
viewer, налаштовуючи обертання мотоцикла.Інший у гілці feature/filter-logic
створює алгоритми підбору байків. Це дозволяє не заважати один одному і не
"зламати" основний код сайту під час експериментів.
Арк.
ЧДТУ 262207.007 ПЗ 39
З м н. Арк. № докум. Підпис Дата
2. Контроль за важкими медіа-файлами (Git LFS). Специфіка вашого
каталогу — це велика кількість 3D-моделей та HD-зображень. Оскільки
звичайний Git погано працює з великими бінарними файлами, використовується
розширення Git LFS (Large File Storage). Це дозволяє зберігати посилання на
моделі мотоциклів у репозиторії, тоді як самі "важкі" файли зберігаються на
окремому сервері, що не перевантажує історію розробки.
3. Історія змін та відкат (Rollback). Якщо після оновлення інтерактивний
каталог перестав коректно відображатися на мобільних пристроях, Git дозволяє
за лічені секунди повернути систему до попереднього стабільного стану. Кожен
"коміт" (збереження) містить інформацію про те, хто, коли і які саме зміни вніс
у код.
4. Code Review (Перевірка коду). Перед тим як новий функціонал
потрапить на живий сайт, розробники створюють Pull Request. Колеги
переглядають код, перевіряють, чи не сповільнить він завантаження каталогу, і
лише після схвалення об'єднують його з основною версією.
5. Автоматизація (CI/CD). Git інтегрується з інструментами
автоматичного розгортання. Щойно розробник відправляє код у гілку
production, система автоматично запускає тестування, оптимізує зображення та
оновлює сайт на сервері.
Таким чином, Git перетворює хаотичний процес написання коду на
впорядковану структуру, де кожна зміна зафіксована, а ризик безповоротної
втрати даних зведений до нуля.
2.4 Висновки до розділу 2
Дизайн має бути гнучким: для тих, хто купує раціонально, виділяються
кнопки швидкого переходу до цифр і графіків; для емоційних покупців —
акцент залишається на повноекранних медіа та відеооглядах. Дизайн ВІС для
формування та перегляду інтерактивного каталогу мотоциклів забезпечує
завдання — не просто показати картинку, а провести користувача від цікавості
Арк.
ЧДТУ 262207.007 ПЗ 40
З м н. Арк. № докум. Підпис Дата
до конкретної дії (запису на тест-драйв або покупки), використовуючи
психологію сприйняття. В другому розділі описано архітектура ВІС, ключові
етапи розробки ВІС для формування та перегляду інтерактивного каталогу
мотоциклів, які допоможуть керуватися під час вибору того, як представляти
бренд в Інтернеті.
Арк.
ЧДТУ 262207.007 ПЗ 41
З м н. Арк. № докум. Підпис Дата
РОЗДІЛ 3 РОЗРОБКА ВЕБОРІЄНТОВАНОЇ ІНФОРМАЦІЙНОЇ
СИСТЕМИ
3.1 Вибір засобів розробки веборієнтованої інформаційної системи
ВІС для формування та перегляду інтерактивного каталогу мотоциклів
характеризується багаторівневою архітектурою (N-tier architecture), що
дозволяє чітко розмежувати відповідальність між представленням, бізнес-
логікою та збереженням даних. Структура ВІС є 3-tier (трирівневою).
Для створення сучасної, швидкої та масштабованої ВІС каталогу
мотоциклів у межах 3-tier архітектури використано наступний технологічний
стек, що індустріальними стандартами та мають величезні спільноти, а також
забезпечують легку інтеграцію між собою через REST API.
Розробка ВІС включає Front-end (Візуальну частину) та, Back-end
(Серверну частину).
Головна мета Front-end полягає в забезпеченні миттєвої реакції
інтерфейсу на дії користувача (фільтрація, порівняння) та адаптивність під
мобільні пристрої. Основний фреймворк, що може бути застосований React.js
або Vue.js (Vue 3). Дані фреймворки дозволяють створити SPA (Single Page
Application). Каталог оновлюється динамічно без перезавантаження всієї
сторінки, що критично для інтерактивних фільтрів.
React – це декларативна, ефективна і гнучка JavaScript-бібліотека,
призначена для створення інтерфейсів користувача. Вона дозволяє
компонувати складні інтерфейси з невеликих окремих частин коду –
“компонентів” [16].
Vue.js — це прогресивний JavaScript-фреймворк із відкритим вихідним
кодом, який використовується для створення користувацьких інтерфейсів
(Front-end) та односторінкових вебдодатків (SPA) [17].
Для розробки веборієнтованої системи каталогу мотоциклів обидва
фреймворки є чудовими інструментами, але вони мають різну філософію та
підходи до розробки. Vue.js краще підійде, якщо потрібно розробити систему
Арк.
ЧДТУ 262207.007 ПЗ 42
З м н. Арк. № докум. Підпис Дата
швидше, простіше і з меншою кількістю шаблонного коду. React.js краще
обрати, якщо планується у майбутньому створити мобільний додаток.
React є найпопулярнішим інструментом, що характеризується великою
кількістю готових бібліотек. Наприклад, якщо необхідно додати складну 3D-
графіку мотоцикла, бібліотека React Three Fiber (обгортка над Three.js) є однією
з найкращих на ринку. Гнучкість архітектури забезпечується за рахунок
бібліотеки для рендерингу інтерфейсу. Можливо налаштувати архітектуру
проєкту повністю під свої специфічні потреби. Перспектива мобільного додатка
в майбутньому для iOS та Android, завдяки React Native забезпечує
перевикористання до 80% коду вебсайту.
Стилізація та адаптивність базується на Tailwind CSS. Це забезпечує
швидку верстку за допомогою готових класів-утиліт. Інтерфейс каталогу буде
однаково зручним на смартфонах, планшетах та ПК. Управління станом (State
Management) реалізується через інструменти Redux Toolkit (для React).
Необхідно для збереження списку обраних мотоциклів, стану кошика
порівняння та збереження токену авторизації адміна між сторінками. Redux –
це бібліотека JavaScript з відкрити кодом для управління станом програми.
Redux, зазвичай, використовується з бібліотеками, такими як Angular або React,
для створення інтерфейсів користувача. Керувати станом кожного компонента
в додатку стає важко, коли розмір програми стає надзвичайно великим. Redux
допомагає в оновленні та підтримці стану кожного компонента в додатку [18].
Інтерактивні елементи та 3D/360° забезпечує Three.js або бібліотека Swiper.js.
Swiper ідеальний для створення тач-слайдерів та галерей. Three.js потрібен,
якщо планується повноцінний 3D-огляд мотоцикла. Для простішого 360°-
огляду з фотографій підійде плагін Cloudimage 360 View. Зв'язок із сервером
забезпечує Axios. Зручна бібліотека для відправки HTTP-запитів на Back-end,
автоматично конвертує дані в JSON та має зручну обробку помилок.
Арк.
ЧДТУ 262207.007 ПЗ 43
З м н. Арк. № докум. Підпис Дата
Якщо для Front-end частини обраj React.js, то для Back-end частини
логічним поєднанням з сервером є Node.js + Express. Таке поєднання є
частиною розповсюдженого та потужного технологічного стеку MERN / PERN.
У межах N-tier архітектури проєкт на React структурується за модульним
принципом, де логіка запитів відокремлена від візуальних компонентів:
Node.js — це опенсорсне, кросплатформове середовище виконання
(runtime environment), яке дозволяє запускати програмний код на мові JavaScript
поза веббраузером [19].
Node.js використовує архітектуру Event Loop (цикл подій). Замість того,
щоб створювати окремий потік для кожного нового користувача (як це роблять
традиційні сервери на Java або PHP), Node.js обробляє всі запити в одному
єдиному потоці. Коли сервер робить важку операцію (наприклад, Express
звертається до бази даних за списком мотоциклів або читає картинку з диска),
Node.js не чекає завершення цієї дії. Він дає команду БД, відпускає потік для
обробки запитів інших користувачів, а коли дані з БД готові, повертається і
віддає їх клієнту. Використання Node.js разом із React означає, що і візуальна
частина, і логіка сервера пишуться однією мовою — JavaScript. Це дозволяє
легко перевикористовувати шматки коду (наприклад, правила валідації
характеристик мотоцикла). Найбільший у світі реєстр програмного
Арк.
ЧДТУ 262207.007 ПЗ 44
З м н. Арк. № докум. Підпис Дата
забезпечення з відкритим кодом. Завдяки NPM вам не потрібно писати з нуля
систему авторизації, обробку картинок чи роутинг. Ви просто встановлюєте
готові пакети (як-от express, cors чи jsonwebtoken) однією командою в терміналі.
У межах 3-tier архітектури каталогу мотоциклів, Node.js є «платформою-
фундаментом» для сервера бізнес-логіки. Сам по собі Node.js вміє запускати
код та працювати з мережею, а мікрофреймворк Express накладається поверх
нього, щоб розробнику було зручно [20]:
1. Створювати маршрути (наприклад, відрізняти запит
/api/v1/motorcycles від інших).
2. Приймати параметри фільтрації та сортування від React-додатка.
3. Організовувати захист адмін-панелі каталогу.
PostgreSQL (часто називають Postgres) — це потужна, безкоштовна
реляційна база даних із відкритим вихідним кодом [21]. У ВІС вона відповідає
за Рівень даних (Data Tier), надійно зберігаючи інформацію про мотоцикли,
бренди та користувачів.
Основними характеристиками та перевагами для каталогу мотоциклів є:
− реляційна модель (SQL), що ідеально зв'язує таблиці між собою.
Наприклад, таблиця Мотоцикли чітко пов'язана з таблицею
Бренди через зовнішні ключі (Foreign Keys);
− гібридність (Підтримка JSON/JSONB) дозволяє зберігати
неструктуровані дані прямо в реляційній таблиці. Це ідеально для
динамічних технічних характеристик мотоцикла (наприклад, у
одного байка є "електростартер", а у іншого — немає);
− надійність та транзакційність (ACID) забезпечує повну
відповідність стандартам ACID та гарантує, що дані не
загубляться і не пошкодяться під час збоїв, навіть якщо адмін
редагує каталог одночасно з тисячею користувачів;
− повнотекстовий пошук (Full-Text Search) має вбудовані
інструменти для швидкого пошуку мотоциклів за назвою чи
Арк.
ЧДТУ 262207.007 ПЗ 45
З м н. Арк. № докум. Підпис Дата
описом моделі (наприклад, якщо користувач вводить у пошуковий
рядок "Yamaha Ендуро");
− масштабованість та розширюваність підтримує складні типи
даних, власні функції, тригери та велику кількість одночасних
підключень без втрати швидкості.
Комбінація React, Node.js/Express та PostgreSQL утворює один із
найпотужніших та найпопулярніших стеків веброзробки, відомий як PERN.
Головна перевага цього комплексу полягає в ідеальній синергії між його
компонентами та чіткому розділенні обов'язків у межах багаторівневої
архітектури. Використання JavaScript/TypeScript як для інтерфейсу на React, так
і для сервера на Node.js суттєво прискорює створення системи, оскільки
розробники можуть використовувати єдину логіку валідації та легко
обмінюватися даними у форматі JSON без складних трансформацій. При цьому
асинхронна природа Node.js та мікрофреймворк Express забезпечують високу
швидкість обробки великої кількості одночасних запитів користувачів, які
взаємодіють з фільтрами каталогу. Зі свого боку, PostgreSQL виступає надійним
і гнучким фундаментом для зберігання даних, який не лише гарантує цілісність
реляційних зв'язків між брендами та моделями, але й дозволяє легко оперувати
нестандартними технічними характеристиками мотоциклів завдяки вбудованій
підтримці формату JSONB. У результаті розробник отримує масштабовану,
безпечну та надзвичайно швидку веборієнтовану систему з миттєвим відгуком
інтерфейсу, яка легко витримує високі навантаження та готова до подальшого
розширення.
3.2 Розробка Front-end частини
Розпочнемо практичну реалізацію рівня представлення (Presentation
Tier) на React. Для цього розгорнемо базову структуру, налаштуємо
підключення до сервера через Axios та створимо інтерактивні компоненти
каталогу з використанням Tailwind CSS [22, 23, 24].
Арк.
ЧДТУ 262207.007 ПЗ 46
З м н. Арк. № докум. Підпис Дата
Для швидкого старту використано інструмент Vite. Створено структуру
папок, яка чітко відокремлює візуальні компоненти від логіки запитів до
Express-сервера:
Такий підхід є класичною архітектурою SPA (Single Page Application), де
Front-end та Back-end повністю розділені. Рендеринг у браузері користувача
(Client-Side Rendering / CSR) у поєднанні з асинхронними HTTP-запитами
(через Axios або Fetch API) до Node.js/Express сервера має такі технічні переваги
[25]:
1. Висока інтерактивність та плавний UX (User Experience):
− жодних перезавантажень сторінок. Після першого завантаження
сайту перехід між каталогом і карткою мотоцикла відбувається миттєво.
Браузер не перемальовує весь інтерфейс, а лише замінює контент
усередині React-компонентів;
− динамічна фільтрація, коли користувач змінює фільтр бренду чи
повзунок ціни, інтерфейс не замерзає. React плавно оновлює сітку моделей
у фоновому режимі, щойно отримує JSON-відповідь від Express;
− миттєвий відгук на дії. Такі функції, як додавання мотоциклів до
списку порівняння, працюють локально та миттєво, оскільки стан
зберігається безпосередньо в пам'яті браузера.
2. Зниження навантаження на сервер (Node.js):
− делегування обчислень, коли сервер не витрачає ресурси
процесора (CPU) на генерацію HTML-коду для кожного відвідувача. Він
Арк.
ЧДТУ 262207.007 ПЗ 47
З м н. Арк. № докум. Підпис Дата
лише віддає сирі дані у форматі JSON. Обробка, сортування та рендеринг
елементів інтерфейсу лягають на пристрій користувача;
− економічна масштабованість. оскільки Express-сервер виконує
мінімум роботи (прості CRUD-операції та запити до PostgreSQL), один і
той самий сервер може одночасно обслуговувати значно більшу кількість
користувачів, ніж за умови серверного рендерингу (SSR).
3. Розділення зон відповідальності (Decoupling):
− автономна розробка, де Front-end і Back-end стають повністю
незалежними проєктами. Розробник React може міняти дизайн, структуру
компонентів або переходити на Tailwind CSS, не чіпаючи серверний код на
Node.js;
− універсальне API, коли Бекенд на Express перетворюється на
універсальне джерело даних. Це ж саме API, яке віддає список мотоциклів
для React-сайту, у майбутньому зможе без жодних змін обслуговувати
мобільний додаток (на React Native) або телеграм-бота.
4. Ефективне кешування та розгортання:
− кешування на стороні клієнта, тобто статичні файли фронтенду (HTML-
каркас, JS-скрипти, CSS-стилі) завантажуються в браузер один раз і
можуть агресивно кешуватися. При повторних візитах користувач
завантажує з мережі лише легкі JSON-файли з актуальними цінами та
моделями мотоциклів;
− дешевий хостинг для Front-end, оскільки скомпілований React-додаток
є набором статичних файлів, його можна безкоштовно та з високою
швидкістю роздавати через глобальні мережі доставки контенту (CDN),
такі як Vercel або Netlify, а окремий VPS-сервер тримати суто під
Express та PostgreSQL.
Арк.
ЧДТУ 262207.007 ПЗ 48
З м н. Арк. № докум. Підпис Дата
3.3 Розробка Back-end частини
3.3.1 Налаштування Node.js
Налаштування серверної частини (Back-end) на базі Node.js та Express
полягає у створенні робочого середовища, встановленні залежностей та
ініціалізації сервера, який прийматиме асинхронні HTTP-запити від React-
додатка. Нижче наведено покроковий процес конфігурації логічного рівня
(Logic Tier).
1. Ініціалізація проєкту та встановлення пакетів. Створено окрему
директорію для бекенду та ініціалізовано менеджер пакетів npm:
mkdir moto-backend
cd moto-backend
npm init -y
Встановлено базовий набір бібліотек, необхідних для роботи каталогу
мотоциклів:
npm install express cors dotenv pg
npm install --save-dev nodemon
express — мікрофреймворк для керування маршрутами та запитами.
cors — модуль для зняття обмежень безпеки, щоб ваш React-додаток
(наприклад, на localhost:5173) міг вільно звертатися до Express-сервера (на
localhost:5000).
dotenv — інструмент для зберігання секретних ключів та конфігурацій
(паролі БД, порти) в ізольованому файлі.
pg — драйвер для прямого підключення та виконання SQL-запитів у
PostgreSQL.
nodemon — утиліта для розробника, яка автоматично перезапускає
сервер при кожній зміні коду.
Конфігурацію файлу середовища (.env)Створіть файл .env у корені
папки moto-backend, де зберігаються налаштування, які відрізняються залежно
від того, де запущено сервер (локально чи на хостингу):
Арк.
ЧДТУ 262207.007 ПЗ 49
З м н. Арк. № докум. Підпис Дата
PORT=5000
DATABASE_URL=postgresql://user:password@localhost:5432/moto_catal
og
Для налаштування скриптів запуску (package.json) відкрито файл
package.json та додано команду для запуску сервера за допомогою nodemon у
блок "scripts":
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js"
}
Для створення та налаштування сервера (server.js) створено головний
файл server.js у корені проєкту. Це точка входу, яка об'єднує налаштування
Express, підключає CORS для зв'язку з React та активує прослуховування
портів:
const express = require('express');
const cors = require('cors');
require('dotenv').config(); // Завантаження змінних з файлу .env
const app = express();
const PORT = process.env.PORT || 5000;
// Налаштування Middleware
app.use(cors()); // Дозволяє запити з будь-яких портів (у тому числі від
React)
app.use(express.json()); // Дозволяє серверу автоматично парсити JSON у
тілі запитів (req.body)
// Приклад тестового маршруту (Перевірка працездатності сервера)
app.get('/api/v1/health', (req, res) => {
Арк.
ЧДТУ 262207.007 ПЗ 50
З м н. Арк. № докум. Підпис Дата
res.status(200).json({
status: 'success',
message: 'Node.js сервер успішно працює і готовий приймати запити
від React!'
});
});
// Запуск сервера
app.listen(PORT, () => {
console.log(`Сервер логіки запущено на порту ${PORT}`);
});
Локальний запуск середовища Node.js у режимі розробки реалізовано за
допомогою команди:
npm run dev.
3.3.2 Моделювання бази даних
Веборієнтована інформаційна система для формування та перегляду
інтерактивного каталогу мотоциклів є складною системою, в основі якої
реляційна модель бази даних. Вона має забезпечувати швидку фільтрацію,
збереження медіафайлів та підбір характеристик.
Концептуальна схема даних (Сутності та зв'язки) має наступний вигляд:
− мотоцикли (Motorcycles), що є головною сутністю каталогу;
− бренди (Brands), тобто виробники (Зв'язок один-до-багатьох з
мотоциклами);
− категорії (Categories) з типами мотоциклів (Круїзер, Спорт,
Ендуро);
− технічні характеристики (Specifications): детальні параметри
двигуна, шасі та габаритів;
Арк.
ЧДТУ 262207.007 ПЗ 51
З м н. Арк. № докум. Підпис Дата
− галерея (Media, що містить зображення та 3D-моделі для
інтерактивного перегляду.
Вибір PostgreSQL є оптимальним для такої системи. Ця СУБД має
потужну підтримку JSON, розширені можливості індексації та специфічні типи
даних, що ідеально підходять для реалізації динамічних фільтрів та
інтерактивного контенту (наприклад, 360-градусних оглядів).Нижче наведено
адаптовану архітектуру БД під можливості PostgreSQL, включаючи
оптимізацію збереження медіафайлів та гнучких характеристик.
Фізична архітектура БД в PostgreSQL.
1. Довідникові таблиці (Бренди та Категорії)
CREATE TABLE brands (
brand_id INT GENERATED ALWAYS AS IDENTITY PRIMARY
KEY,
name VARCHAR(100) NOT NULL UNIQUE,
country VARCHAR(50),
logo_url VARCHAR(255),
is_active BOOLEAN DEFAULT TRUE
);
CREATE TABLE categories (
category_id INT GENERATED ALWAYS AS IDENTITY PRIMARY
KEY,
name VARCHAR(50) NOT NULL UNIQUE,
slug VARCHAR(50) NOT NULL UNIQUE, -- Для красивих URL
(наприклад, /catalog/sportbike)
description TEXT
);
2. Головна таблиця мотоциклів (з масивом тегів)
CREATE TABLE motorcycles (
Арк.
ЧДТУ 262207.007 ПЗ 52
З м н. Арк. № докум. Підпис Дата
motorcycle_id INT GENERATED ALWAYS AS IDENTITY
PRIMARY KEY,
brand_id INT REFERENCES brands(brand_id) ON DELETE
RESTRICT,
category_id INT REFERENCES categories(category_id) ON DELETE
SET NULL,
model_name VARCHAR(150) NOT NULL,
release_year SMALLINT NOT NULL CHECK (release_year
BETWEEN 1900 AND 2100),
price NUMERIC(10, 2) CHECK (price >= 0),
description TEXT,
tags TEXT[], -- PostgreSQL масив для швидких міток (наприклад,
{"A2", "ABS", "Новинка"})
created_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP,
updated_at TIMESTAMPTZ DEFAULT CURRENT_TIMESTAMP
);
3. Технічні характеристики (Гібридний підхід: Фіксовані поля +
JSONB)Для базових параметрів (по яких йде фільтрація)
використовуються стандартні колонки, а для специфічних рідкісних
даних — тип JSONB. Це позбавляє від необхідності створювати
десятки таблиць зв'язків.
CREATE TABLE specifications (
spec_id INT GENERATED ALWAYS AS IDENTITY PRIMARY
KEY,
motorcycle_id INT UNIQUE REFERENCES
motorcycles(motorcycle_id) ON DELETE CASCADE,
-- Основні фільтровані параметри
Арк.
ЧДТУ 262207.007 ПЗ 53
З м н. Арк. № докум. Підпис Дата
engine_displacement SMALLINT CHECK (engine_displacement > 0),
-- см³
engine_power SMALLINT CHECK (engine_power > 0), -- к.с.
cooling_system VARCHAR(30) CHECK (cooling_system IN
('Рідинне', 'Повітряне', 'Повітряно-олійне')),
dry_weight SMALLINT CHECK (dry_weight > 0), -- кг
seat_height SMALLINT CHECK (seat_height > 0), -- мм
-- Усі інші динамічні параметри (крутний момент, підвіска, гальма,
електроніка)
additional_specs JSONB NOT NULL DEFAULT '{}'::jsonb
);
4. Інтерактивна медіагалерея (360° та 3D)Для реалізації інтерактивного
перегляду (спрайти або послідовність кадрів розвороту)
використовується сортування за кутом огляду.
CREATE TYPE media_type_enum AS ENUM ('main_image',
'gallery_image', '360_frame', '3d_model');
CREATE TABLE motorcycle_media (
media_id INT GENERATED ALWAYS AS IDENTITY PRIMARY
KEY,
motorcycle_id INT REFERENCES motorcycles(motorcycle_id) ON
DELETE CASCADE,
file_url VARCHAR(255) NOT NULL,
media_type media_type_enum NOT NULL,
sort_order SMALLINT DEFAULT 0, -- Порядок відображення у
звичайній галереї
view_angle SMALLINT CHECK (view_angle BETWEEN 0 AND 359)
-- Кут для інтерактивного 360-плеєра
Арк.
ЧДТУ 262207.007 ПЗ 54
З м н. Арк. № докум. Підпис Дата
);
Повнотекстовий пошук (Full-Text Search)Замість повільного LIKE
%пошук% використовується вбудований пошуковий рушій
PostgreSQL з урахуванням словоформ:
-- Створення індексу для миттєвого пошуку за назвою та описом
CREATE INDEX idx_moto_search ON motorcycles
USING gin(to_tsvector('ukrainian', model_name || ' ' ||
COALESCE(description, '')));
Високопродуктивні індекси для фільтраціїФільтрація за ціною та
характеристиками в PostgreSQL оптимізується за допомогою B-Tree
індексів, а для JSONB та масивів використовується GIN-індекс:
-- Індекс для повзунків ціни та року випуску
CREATE INDEX idx_moto_price_year ON motorcycles(price,
release_year);
-- GIN-індекс для миттєвого пошуку за будь-якими параметрами
всередині додаткових характеристик (JSONB)
CREATE INDEX idx_moto_jsonb_specs ON specifications USING
gin(additional_specs);
-- GIN-індекс для фільтрації за тегами
CREATE INDEX idx_moto_tags ON motorcycles USING gin(tags);
Автоматичне оновлення дати зміни (Тригер)
CREATE OR REPLACE FUNCTION update_modified_column()
RETURNS TRIGGER AS $$
BEGIN
NEW.updated_at = NOW();
RETURN NEW;
END;
Арк.
ЧДТУ 262207.007 ПЗ 55
З м н. Арк. № докум. Підпис Дата
$$ LANGUAGE plpgsql;
CREATE TRIGGER update_motorcycles_modtime
BEFORE UPDATE ON motorcycles
FOR EACH ROW
EXECUTE FUNCTION update_modified_column();
Проєктована база даних на базі PostgreSQL повністю забезпечує технічні
потреби інтерактивного вебкаталогу мотоциклів. Ключовими перевагами
архітектури є наступні:
− гнучкість через JSONB, що забезпечується комбінацією класичних
реляційних полів та формату JSONB. Це дозволяє легко додавати
специфічні характеристики нових моделей без зміни структури
таблиць;
− готовність до інтерактиву через окреме поле view_angle та типізація
медіафайлів забезпечують швидку вибірку кадрів для плеєра 360°
та 3D-візуалізації;
− висока швидкість (оптимізація) забезпечується через використання
спеціалізованих індексів (B-Tree для ціни/року та GIN для масивів
тегів і JSONB), що гарантує миттєву роботу динамічних фільтрів
навіть при великому навантаженні на сайт.
3.4 Розробка дизайну інтерфейсу веборієнтованої інформаційної
системи
Розробку проєкту дизайну веборієнтованої інформаційної системи, яка
призначена для зручного формування та перегляду інтерактивного каталогу
мотоциклів, було повністю реалізовано у графічному редакторі Figma з
акцентом на сучасний користувацький досвід, інтерактивне прототипування та
повну адаптивність інтерфейсу під будь-які типи пристроїв. У межах проєкту
створено сучасну структуру динамічної сітки каталогу з інтуїтивно зрозумілими
Арк.
ЧДТУ 262207.007 ПЗ 56
З м н. Арк. № докум. Підпис Дата
інструментами фільтрації за технічними характеристиками, брендами та
ціновими категоріями. Особливу увагу приділено інтерактивним карткам
моделей, які дозволяють детально вивчати параметри транспорту завдяки
продуманій системі вкладок та візуальних елементів.
Для забезпечення високої реалістичності інтерфейсу у Figma було
налаштовано складне інтерактивне прототипування із застосуванням
мікроанімацій, ефектів наведення курсору та плавних переходів між сторінками.
Уся система побудована на основі єдиної бібліотеки компонентів та варіантів,
що гарантує візуальну цілісність усіх екранів. Окрім користувацької частини,
детально опрацьовано дизайн панелі адміністратора для зручного керування
базою даних та оновлення контенту. Фінальний макет є повністю адаптивним,
завдяки чому інтерфейс інформаційної системи коректно та привабливо
відображається на екранах комп'ютерів, планшетів і мобільних телефонів.
Для реалізації легкого, але інформативного інтерфейсу (UI/UX)
веборієнтованої інформаційної системи для формування та перегляду
інтерактивного каталогу мотоциклів, проектування будується за принципом
мінімалізму та прогресивного розкриття даних (інформація видається порціями
в міру потреби).
1. Головна сторінка є точкою входу. Екран не перевантажується текстом.
Головний фокус — візуальний пошук та швидкий перехід до категорій (рис.3.1):
− Header (Шапка): Логотип, пошуковий рядок (з автодоповненням
марки/моделі), кнопка «Порівняння» та іконка «Обране».
− Hero-блок: Велике якісне зображення флагманського байка з однією
чіткою кнопкою (CTA) — «Відкрити каталог».
− Блок категорій: Плитка з іконками або силуетами мотоциклів (Спорт,
Круїзер, Ендуро) для швидкої фільтрації в один клік.
Арк.
ЧДТУ 262207.007 ПЗ 57
З м н. Арк. № докум. Підпис Дата
Рисунок 3.1 – Головна сторінка веборієнтованої інформаційної системи
2. Сторінка каталогу містить плитку товарів та фільтри (рис.3.2). Головне
завдання — допомогти користувачеві швидко знайти потрібну модель без
блукання по меню. Містить настпні елементи:
− Ліва панель (Фільтри): Компактна, лише найважливіші параметри:
o Бренд (чекбокси).
o Ціна (повзунок/slider).
o Об'єм двигуна (діапазон см³).
o Теги швидкого вибору (наприклад, «Для новачків», «ABS»).
− Права частина (Картки мотоциклів): Чиста сітка (Grid). Картка містить
мінімум відволікаючих факторів:
o Якісне фото (вид збоку).
o Назва (Бренд + Модель).
o 3 ключові характеристики плашками (Потужність, Вага, Ціна).
o Кнопка «Детальніше» та іконка-сердечко («В обране»).
3. Картка мотоцикла представляє інтерактивний центр.
Арк.
ЧДТУ 262207.007 ПЗ 58
З м н. Арк. № докум. Підпис Дата
Рисунок 3.2 – Сторінка каталогу веборієнтованої інформаційної системи
Це найважливіша сторінка системи, де зосереджено весь інтерактив. Вона
ділиться на два блоки (рис.3.3):
Верхній блок: Візуально-інтерактивний (Спліт-екран)
− Ліворуч: Інтерактивний плеєр 360°:
o За замовчуванням стоїть головне фото.
o При затисканні мишки або свайпі вліво/вправо фото починає плавно
обертатися (реалізується послідовною зміною кадрів з БД за
допомогою JavaScript).
o Внизу плеєра розташована тонка шкала-повзунок кута огляду та
кнопка увімкнення 3D-моделі (якщо вона завантажена).
− Праворуч: Коротке інфо:
o Назва моделі великим шрифтом, ціна, статус наявності.
o Короткий текстовий опис (до 300 символів).
Нижній блок є інформаційний (Таби/Вкладки).
Арк.
ЧДТУ 262207.007 ПЗ 59
З м н. Арк. № докум. Підпис Дата
Рисунок 3.3 – Сторінка каталогу веборієнтованої інформаційної системи
(інтерактив)
Щоб сторінка не виглядала нескінченним сувоєм тексту, інформація
ховається у вкладки:
1. «Характеристики»: Акуратна таблиця (Двигун, Шасі, Габарити). Дані з
поля additional_specs (JSONB) виводяться у вигляді структурованого
списку.
2. «Галерея»: Додаткові "живі" фотографії та відео огляди.
3. «Комплектація»: Перелік того, що входить у вартість (наприклад, кофри,
вітрове скло).
Стримана сіра палітра є ідеальним вибором для каталогу мотоциклів. Вона
створює преміальний "індустріальний" або "технологічний" стиль, не відволікає
увагу від яскравих фотографій техніки та зменшує навантаження на зір
користувача при тривалому перегляді.
Ергономічна кольорова палітра (сіра гама) для забезпечення високого рівня
читабельності та ергономіки використовується правило контрастності (WCAG
2.1):
Арк.
ЧДТУ 262207.007 ПЗ 60
З м н. Арк. № докум. Підпис Дата
− фон сайту застосовано світло-сірий (#F4F4F6) для сторінок каталогу, що
мінімізує втому очей порівняно з чисто білим;
− картки та блоки виконано чисто білого (#FFFFFF) або ультра-світло сірого
кольору (#FAFAFA), що створює візуальний об'єм та відокремлює контент
від фону;
− елементи інтерфейсу (панелі, межі) мають середній сірий колір (#E5E7EB
для ліній, #9CA3AF для другорядних іконок);
− текст та заголовки виконано в глибокому темно-сірому (#1F2937) або
графітовому (#111827) кольорі що забезпечує чіткий контраст, але
сприймається м'якше, ніж чистий чорний;
− акцентний колір (миттєвий фокус) є насичений темно-сірий/антрацит
(#374151) або металік (#4B5563) для кнопок дій.
Ергономіка навігації та елементів керування розроблено на основ
наступних принципів:
− F-подібний патерн, де вся ключова інформація (назва моделі, ціна)
розташовується у верхній лівій частині екрана. Очі користувача
считують її першою;
− закон Фіттса (доступність кнопок):
o всі клікабельні елементи (картки, кнопки, фільтри) мають
мінімальний розмір 44x44 пікселі для зручного натискання
пальцем на смартфонах;
o відступи між картками мотоциклів становлять не менше 16-
24 пікселів, щоб уникнути випадкових помилкових кліків;
− прогресивне розкриття характеристик. Замість суцільного полотна
цифр, характеристики згруповані у випадаючі списки (Accordion)
або таби: "Двигун", "Шасі", "Електроніка". Користувач відкриває
лише те, що йому цікаво в цей момент.
Арк.
ЧДТУ 262207.007 ПЗ 61
З м н. Арк. № докум. Підпис Дата
Ергономічний макет інтерактивного плеєра 360°, що є центральним
інтерактивним елементом картки мотоцикла розробляється з максимальним
фокусом на зручність взаємодії:
1. Зона взаємодії (Touch Area). Візуальний плеєр займає 60% ширини екрана
на десктопах і всю ширину на смартфонах.
2. Візуальна підказка (Hint). По центру зображення розміщується
напівпрозора іконка руки зі стрілками вліво-вправо та делікатний напис:
«Утримуйте та тягніть для огляду 360°». Після першого кліку або свайпу
підказка зникає, щоб не перекривати деталі байка.
3. Дублюючий контролер (Слайдер). Під мотоциклом розташовано
горизонтальний повзунок сірого кольору. Якщо користувачу незручно
крутити саму картинку, він може плавно переміщати повзунок пальцем або
мишкою.
4. Зворотний зв'язок (Feedback). При обертанні картинка змінюється миттєво
без затримок (завдяки попередньому завантаженню сусідніх кадрів у кеш
браузера), що виключає дратівливий ефект "зависання" інтерфейсу.
Адаптивність (Mobile-First), коли мотоцикли часто вибирають зі
смартфонів, передбачає інтерфейс, що трансформується під мобільний екран:
− Фільтри каталогу ховаються за компактною кнопкою «Фільтри (3)» у
верхній частині екрана і відкриваються на весь екран (BottomSheet) лише
за запитом користувача.
− Двоколонковий макет картки товару перетворюється на одну вертикальну
стрічку: спочатку інтерактивний плеєр 360°, нижче — ціна та кнопки, в
самому кінці — таби з характеристиками.
Арк.
ЧДТУ 262207.007 ПЗ 62
З м н. Арк. № докум. Підпис Дата
3.5 Висновки до розділу 3
В третьому розділі детально описано процес розробки веборієнтованої
інформаційної системи, яка призначена для зручного формування та перегляду
інтерактивного каталогу мотоциклів, представлено дизайн та інтерфейс. В якості
інструменту для розробки ВІС для формування та перегляду інтерактивного
каталогу мотоциклів застосовано комбінацію інструментів React, Node.js/Express
та PostgreSQL, що утворює один із найпотужніших та найпопулярніших стеків
веброзробки, відомий як PERN. Обґрунтування вибору даного комплексу
програмних засобів та інструментів детально описано в третьому розділі. Також
описано структуру побудови сторінок та інтерфейс ВІС для формування та
перегляду інтерактивного каталогу мотоциклів.
Арк.
ЧДТУ 262207.007 ПЗ 63
З м н. Арк. № докум. Підпис Дата
ВИСНОВКИ
Актуальність створення ВІС для формування та перегляду
інтерактивного каталогу мотоциклів зумовлена стрімким зростанням ринку
мототехніки та цифровизацією комерції, де стандартні статичні вебсторінки вже
не задовольняють вимоги сучасних користувачів. Традиційні каталоги часто
перевантажені текстовою інформацією та складними таблицями, що ускладнює
процес вибору, порівняння та купівлі мотоцикла. Інтерактивна веборієнтована
інформаційна система вирішує цю проблему, надаючи користувачам інтуїтивно
зрозумілий інтерфейс із динамічною фільтрацією, візуалізацією моделей та
можливістю миттєвого порівняння технічних характеристик. З технічної та
бізнесової точок зору актуальність проєкту полягає у необхідності автоматизації
процесів адміністрування та оновлення бази даних транспортних засобів.
Створення гнучкої панелі управління дозволяє власникам платформи
оперативно змінювати модельний ряд, актуалізувати ціни та керувати контентом
без залучення розробників. Розробка адаптивного дизайну у Figma забезпечує
високу доступність системи з будь-яких пристроїв, що безпосередньо впливає на
залученість аудиторії, покращує користувацький досвід (UX) та підвищує
конверсію платформи в умовах високої конкуренції на ринку.
У кваліфікаційній роботі розроблено ВІС для формування та перегляду
інтерактивного каталогу мотоциклів із використанням комбінації інструментів
React, Node.js/Express та PostgreSQL, що утворює один із найпотужніших та
найпопулярніших стеків веброзробки, відомий як PERN. Це дозволяє
забезпечити високу продуктивність, масштабованість та надійність системи під
час обробки великих масивів даних. Використання компонентного підходу React
гарантує миттєве оновлення інтерфейсу без перезавантаження сторінок, що
критично важливо для інтерактивного каталогу та динамічної фільтрації
мотоциклів. Серверна частина на Node.js та Express ефективно справляється з
великою кількістю одночасних запитів користувачів, а реляційна база даних
PostgreSQL забезпечує цілісність, безпеку та швидкий пошук структурованої
Арк.
ЧДТУ 262207.007 ПЗ 64
З м н. Арк. № докум. Підпис Дата
інформації про технічні характеристики кожної моделі. У підсумку цей стек
дозволяє створити швидкий, адаптивний та легкий у підтримці вебпродукт із
високим рівнем безпеки даних. Основна перевага використання стеку PERN
(React, Node.js, Express, PostgreSQL) у цьому проєкті полягає у забезпеченні
максимальної швидкості відгуку інтерфейсу та високої продуктивності сервера
при роботі з великими обсягами структурованих даних. Завдяки технології
Virtual DOM у React, користувачі можуть миттєво фільтрувати, сортувати та
порівнювати мотоцикли у каталозі без повного перезавантаження вебсторінки,
що створює безперервний та плавний користувацький досвід. Водночас
асинхронна архітектура Node.js дозволяє серверу паралельно обробляти тисячі
запитів без затримок, а потужні механізми індексації PostgreSQL гарантують
безпеку даних та моментальний пошук складних технічних характеристик
кожної моделі.
В роботі ставилась задача розробити ВІС для формування та перегляду
інтерактивного каталогу мотоциклів, наповнення якого можна було б швидко
змінювати/доповнювати відповідно до сучасних трендів. Детально описано
процес розробки ВІС для формування та перегляду інтерактивного каталогу
мотоциклів, представлено інтерфейс розробленої ВІС.
Отже, можна стверджувати, що мета роботи досягнута, всі вимоги
технічного завдання виконані у повному обсязі.
Арк.
ЧДТУ 262207.007 ПЗ 65
З м н. Арк. № докум. Підпис Дата
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. https://www.hubspot.com/marketing-statistics. [Електронний ресурс].
Дата звернення – 28.04.2026.
2. Cycle world [Електронний ресурс]. – Режим доступу:
https://www.cycleworld.com/. Дата звернення – 28.04.2026.
3. Мотожурнал [Електронний ресурс]. – Режим доступу:
https://moto.in.ua/. Дата звернення – 28.04.2026.
4. Bikez [Електронний ресурс]. – Режим доступу:
https://bikez.com/main/index.php/. Дата звернення – 28.04.2026.
5. Bmw-motorrad [Електронний ресурс]. – Режим доступу:
https://www.bmw-motorrad.ua/uk/home.html/. Дата звернення – 02.04.2026.
6. Autoscout24 [Електронний ресурс]. – Режим доступу:
https://www.autoscout24.com.ua/. Дата звернення – 02.04.2026.
7. Денісова О. О. Автоматизоване проектування інформаційних систем
: навч. посіб. Київ : КНЕУ, 2011. 412 с
8. Пасічник В. В., Литвин В. В., Шаховська Н. Б. Проєктування
інформаційних систем : навч. посіб. Львів : Новий Світ-2000, 2013. 380 с.
9. Dong, Jing; Paul, Raymond & Zhang, Liang Jie (2009). "Chapter 12 :
Specifying Enterprise Web-Oriented Architecture". High Assurance Services
Computing. Springer. ISBN 978-0387876573.
10. Su, Chuan-Jun. Web-Oriented Architecture (WOA) Enabled Customer-
Centric Collaborative Commerce Platform (WCCP). Vol. 7. pp. 402–406.
11. Недашківський О. М. Планування та проєктування інформаційних
систем. Київ : КНЕУ, 2014. 215 с.
12. Жученко А. І. Основи проєктування баз даних : навч. посіб. 2-ге вид.,
допов. Київ : КПІ ім. Ігоря Сікорського, 2021.
13. Основні поняття мови HTML та структура документів
[Електронний ресурс]. – Режим доступу:
Арк.
ЧДТУ 262207.007 ПЗ 66
З м н. Арк. № докум. Підпис Дата
https://sites.google.com/site/vivcaemowebdizajndistancijno/html/lekcia-3-osnovni-
ponatta-movi-html-ta-struktura-dokumentiv.
14. Що таке CSS [Електронний ресурс]. – Режим доступу:
https://css.in.ua/article/shcho-take-html_10.
15. Прокопенко Т. О., Підкуйко О.І. DevOps: навч. посіб. [Електронний
ресурс] / Т. О. Прокопенко, О.І.Підкуйко ; М-во освіти і науки України, Черкас.
держ. технол. ун-т.– Черкаси:ЧДТУ, 2025. – 160 с.
16. Посібник: знайомство з React [Електронний ресурс]. – Режим
доступу: https://uk.reactjs.org/tutorial/tutorial.html.Dynamic Routes [Електронний
ресурс]. – Режим доступу: https://nextjs.org/docs/routing/dynamic-routes. Дата
звернення – 12.04.2022.
17. Gizas A., Christodoulou S., Papatheodorou T. Comparative Evaluation
of Javascript Frameworks [Текст] // Proceedings of the 21st Annual Conference on
World Wide Web Companion. – 2018. – P. 513-514.
18. Graziotin D., Abrahamsson P. Making Sense out of a Jungle of
Javascript Frameworks, Towards a Practitioner-friendly Comparative Analysis
[Текст] // Lecture Notes in Computer Science. – 2017. – P. 334- 337.
19. Павлиш В.А. Основи інформаційних технологій і систем.
Підручник [Текст] / В.А. Павлиш, Л.К. Гліненко, Н.Б. Шаховська. Львів:
Видавництво Львівської політехніки, – 2018. – 620 с.
20. Буйницька О.П. Інформаційні технології та технічні засоби
навчання. Навчальний посібник рекомендовано МОН України [Текст] / В-во:
ЦНЛ. – 2018. – 240 с.
21. Трофименко О. Г. Веб-технології та веб-дизайн : навч. посібник / О.
Г. Трофименко, О. Б. Козін, О. В. Задерейко, О. Є. Плачінда. – Одеса : Фенікс,
2019. – 284 с.
22. De Lamadrid J.C. Computer Organization. Basic Processor Structure /
J.C. De Lamadrid. – Boca Raton: CRC, 2018. – 384 p.
Арк.
ЧДТУ 262207.007 ПЗ 67
З м н. Арк. № докум. Підпис Дата
23. Peterson J.L. Computer Organization and Assembly Language
Programming / J.L. Peterson. – Independently published, 2019. – 434 p.
24. Warford J.S. Computer Systems / J.S. Warford // New York: Jones &
Bartlett Learning, 2016. — 892 p.
25. Wu Junjie. Advanced Computer Architecture / J. Wu, L. Li // Springer,
2016. – 224 p.
26. Fox C. Go Data Structures and Algorithms / C. Fox // Bookboon.com,
2018. – 265 p.
27. Kelvin L. Data Structures & Algorithms in Swift / L. Kelvin, N. Vincent.
– Razeware, 2018. – 328 p.
28. Karumanchi N. Data Structures and Algorithms Made Easy: Data
Structure and Algorithmic Puzzles / N. Karumanchi // 5th Edition. – CareerMonk
Publications, 2017. – 828 p.
29. Smith William. Everyday Data Structures / W. Smith. – Packt Publishing,
2017. – 385 p.
30. Campbell, Jennifer (2017). Web Design: Introductory. Cengage Learning.
p.
31. Keil, Mark; Cule, Paul E.; Lyytinen, Kalle; Schmidt, Roy C. (November
1998). "A framework for identifying software project risks". Communications of the
ACM. 41 (11): 76–83. doi:10.1145/287831.287843. ISSN 0001-0782.
32. Salas-Zárate, María del Pilar; Alor-Hernández, Giner; Valencia-García,
Rafael; Rodríguez-Mazahua, Lisbeth; Rodríguez-González, Alejandro; López
Cuadrado, José Luis (May 2015). "Analyzing best practices on Web development
frameworks: The lift approach". Science of Computer Programming. 102: 1–19.
doi:10.1016/j.scico.2014.12.004
33. Du, Xiaofeng; Song, William; Munro, Malcolm (2009), Barry, Chris;
Lang, Michael; Wojtkowski, Wita; Conboy, Kieran (eds.), "Semantic Service
Description Framework for Address", Information Systems Development, Boston,
Арк.
ЧДТУ 262207.007 ПЗ 68
З м н. Арк. № докум. Підпис Дата
MA: Springer US, pp. 1033–1045, doi:10.1007/978-0-387-78578-3_35, ISBN 978-
0-387-78577-6, retrieved 2023-11-30
34. Hall, Heather (2022-05-01). "Web 2.0 Explained: Everything You Need
To Know". History-Computer. Retrieved 2023-12-10.
35. Козловський А.В. Комп’ютерна техніка та інформаційні технології:
Навч. посіб. Рекомендовано МОН [Текст] / Козловський А.В., Паночишин
Ю.М., Погріщук Б.В. – В-во: Знання. – 2017. – 463 с.
36. Soni, Anuj; Gupta, Sachin; Talwandi, Navjot Singh (September 2023).
"Evolution Of Web Technologies in Recent Years" (PDF). Journal of Emerging
Technologies and Innovative Research. 10 (9). ISSN 2349-5162.
37. Mullenweg, Matt (May 27, 2003). "WordPress Now Available".
wordpress.org. WordPress. Archived from the original on July 19, 2010. Retrieved
July 22, 2010.
38. CMS Usage Statistics". builtwith.com. BuiltWith. Archived from the
original on August 6, 2013. Retrieved August 1, 2013.
39. Прокопенко Т. О. Теорія систем і системний аналіз : навч. посіб.
[Електронний ресурс] / Т. О. Прокопенко ; М-во освіти і науки України,Черкас.
держ. технол. ун-т. – 2-ге вид., змінене та доп. –Черкаси : ЧДТУ, 2025. – 147 с.
40. ECM Enterprise Content Management, Ulrich Kampffmeyer. Hamburg
2006, ISBN 978-3-936534-09-8. Definition, history, architecture, components and
ECM suites
41. Managing Enterprise Content: A Unified Content Strategy. Ann Rockley,
Pamela Kostur, Steve Manning. New Riders, 2003.
42. Aichner, T., Jacob, F. Measuring the Degree of Corporate Social Media
Use // International Journal of Market Research. – 2017. – 57 (2). – Рр. 257–275.
43. Thakkar, Mohit. Building React Apps with Server-Side Rendering: Use
React, Redux, and Next to Build Full Server-Side Rendering Applications. –
Berkeley, CA: Apress. – 2020. – Pp. 93–137.
Арк.
ЧДТУ 262207.007 ПЗ 69
З м н. Арк. № докум. Підпис Дата
44. Flanagan, David. JavaScript: The Definitive Guide. 7th edition. –
Sebastopol, California: O'Reilly, 2020. – Pp. 289-193.
45. Haverbeke, Marijn. Eloquent JavaScript. 3rd edition. – No Starch Press. –
2018. – 472 p.
46. Smith, Craig S. Have You Noticed The New Web? It's Faster, More
Secure. [Електронний ресурс]. – Режим доступу:
https://www.forbes.com/sites/craigsmith/2020/04/21/have-you-noticed-the-new-
web-its-faster-more-secure/. Дата звернення – 17.04.2022.
47. Krill P. Next.js 2.0 plays better with React and JavaScript [Електронний
ресурс]. – Режим доступу: https://www.infoworld.com/article/3185385/nextjs-20-
plays-better-with-react-and-javascript.html. Дата звернення – 17.04.2022.
48. Режим доступу: https://www.infoworld.com/article/3185385/nextjs-20-
plays-better-with-react-and-javascript.html. Дата звернення – 17.04.2022.
49. Managing Enterprise Content: A Unified Content Strategy. Ann Rockley,
Pamela Kostur, Steve Manning. New Riders, 2003.
50. Методичні рекомендації до підготовки кваліфікаційної роботи для
здобувачів освітнього ступеня «бакалавр» зі спеціальності 126 Інформаційні
системи та технології освітньої програми «Web-технології, Web-дизайн» усіх
форм навчання [Електронний ресурс] / [Упоряд.: Т.О. Прокопенко, Я.В.
Тарасенко]; М-во освіти і науки України, Черкас. держ. технол. ун-т. Черкаси:
ЧДТУ, 2021. – 48 c.
ПРОГРАМНІ ЗАСОБИ
1. Microsoft 365 © Microsoft Inc., 2026.
2. Node.js : open-source, cross-platform JavaScript runtime environment. URL:
https://nodejs.org (date of access: 07.05.2026).
Арк.
ЧДТУ 262207.007 ПЗ 70
З м н. Арк. № докум. Підпис Дата
ДОДАТОК A
ЗАТВЕРДЖЕНО
Зав. кафедри ІТП, проф.
_________________ Прокопенко Т.О.
«____» ________________ 2026 р.
ВЕБОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ФОРМУВАННЯ ТА
ПЕРЕГЛЯДУ ІНТЕРАКТИВНОГО КАТАЛОГУ МОТОЦИКЛІВ
Специфікація
482 ЧДТУ 2207-01
Листів 2
Розробник _______________ Єрмоленко В.В.
Керівник _______________ Лавданська О.В.
Н. Контроль _______________ Лавданська О.В.
Черкаси, 2026
2
482 ЧДТУ 2207-01
Позначення Найменування Примітка
Документація
482 ЧДТУ 2207-01 12 01 Текст програми
ВЕБОРІЄНТОВАНА ІНФОРМАЦІЙНА СИСТЕМА ДЛЯ ФОРМУВАННЯ ТА
ПЕРЕГЛЯДУ ІНТЕРАКТИВНОГО КАТАЛОГУ МОТОЦИКЛІВ
482 ЧДТУ 2207-01 12 01
Текст програми
Листів 8
Розробник _____________ Єрмоленко В.В.
Н
2026
2
482 ЧДТУ 2207-01 34 01
Лістинг програмного коду мережевих запитів (src/services/api.js):
import axios from 'axios';
const API = axios.create({
baseURL: 'http://localhost:5000/api/v1',
headers: { 'Content-Type': 'application/json' }
});
// Функція отримує відфільтровані дані з бази PostgreSQL через Express
export const getMotorcycles = (filters) => API.get('/motorcycles', { params: filters });
Панель інтерактивної фільтрації (src/components/FilterPanel.jsx)
import React from 'react';
export const FilterPanel = ({ filters, onFilterChange }) => {
const handleChange = (e) => {
const { name, value } = e.target;
onFilterChange(name, value);
};
return (
<div className="p-5 bg-white rounded-xl shadow-sm border border-gray-100 space-y-4">
<h3 className="text-lg font-bold text-gray-900">Фільтрація техніки</h3>
<div>
<label className="block text-xs font-semibold text-gray-500 uppercase tracking-
wider">Бренд</label>
<select
name="brand"
value={filters.brand}
onChange={handleChange}
3
482 ЧДТУ 2207-01 34 01
className="w-full mt-1 p-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700
focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Всі бренди</option>
<option value="Yamaha">Yamaha</option>
<option value="Honda">Honda</option>
<option value="KTM">KTM</option>
</select>
</div>
<div>
<label className="block text-xs font-semibold text-gray-500 uppercase tracking-
wider">Тип мотоцикла</label>
<select
name="type"
value={filters.type}
onChange={handleChange}
className="w-full mt-1 p-2 bg-gray-50 border border-gray-200 rounded-lg text-gray-700
focus:outline-none focus:ring-2 focus:ring-blue-500"
>
<option value="">Всі типи</option>
<option value="Sport">Спортбайк</option>
<option value="Enduro">Ендуро</option>
<option value="Cruiser">Круїзер</option>
</select>
</div>
</div>
);
};
Динамічна картка мотоцикла (src/components/MotorcycleCard.jsx)
import React from 'react';
export const MotorcycleCard = ({ motorcycle }) => {
4
482 ЧДТУ 2207-01 34 01
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden
hover:shadow-md transition-shadow duration-300">
<img
src={motorcycle.image_url || 'placeholder.com'}
alt={motorcycle.model}
className="w-full h-48 object-cover"
/>
<div className="p-4">
<span className="text-xs font-bold text-blue-600 uppercase tracking-
wide">{motorcycle.brand}</span>
<h4 className="text-xl font-bold text-gray-900 mt-1">{motorcycle.model}</h4>
<p className="text-sm text-gray-500 mt-1">Тип: {motorcycle.type}</p>
<div className="mt-4 flex items-center justify-between">
<span className="text-2xl font-black text-gray-900">${motorcycle.price}</span>
<button className="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg
hover:bg-gray-800 transition-colors">
Детальніше
</button>
</div>
</div>
</div>
);
};
Головний екран та координація стану (src/App.jsx)
import React, { useState, useEffect } from 'react';
import { getMotorcycles } from './services/api';
import { FilterPanel } from './components/FilterPanel';
import { MotorcycleCard } from './components/MotorcycleCard';
function App() {
5
482 ЧДТУ 2207-01 34 01
const [motorcycles, setMotorcycles] = useState([]);
const [loading, setLoading] = useState(false);
const [filters, setFilters] = useState({ brand: '', type: '' });
useEffect(() => {
const fetchData = async () => {
setLoading(true);
try {
const response = await getMotorcycles(filters);
setMotorcycles(response.data.data);
} catch (error) {
console.error("Не вдалося завантажити каталог:", error);
} finally {
setLoading(false);
}
};
fetchData();
}, [filters]); // Ефект спрацьовує автоматично при зміні фільтрів
const handleFilterChange = (name, value) => {
setFilters(prev => ({ ...prev, [name]: value }));
};
return (
<div className="min-h-screen bg-gray-50 text-gray-900">
<header className="bg-white border-b border-gray-200 py-4 px-8 shadow-sm">
<h1 className="text-2xl font-black tracking-tight text-gray-900"> Інтерактивний
Каталог Мотоциклів</h1>
</header>
<main className="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-4 gap-6">
<aside className="md:col-span-1">
<FilterPanel filters={filters} onFilterChange={handleFilterChange} />
6
482 ЧДТУ 2207-01 34 01
</aside>
<section className="md:col-span-3">
{loading ? (
<div className="flex justify-center items-center h-64 text-blue-600 font-semibold
animate-pulse">
Завантаження моделей з бази даних...
</div>
) : motorcycles.length === 0 ? (
<div className="text-center py-12 text-gray-500 bg-white rounded-xl border border-
dashed">
Мотоциклів за такими критеріями не знайдено.
</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{motorcycles.map(item => (
<MotorcycleCard key={item.id} motorcycle={item} />
))}
</div>
)}
</section>
</main>
</div>
);
}
export default App;
Встановлення та інтеграція маршрутизатора
npm install react-router-dom
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
7
482 ЧДТУ 2207-01 34 01
import App from './App';
import './index.css';
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
src/views/MotorcycleDetail.jsx
import React, { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import axios from 'axios';
export const MotorcycleDetail = () => {
const { id } = useParams(); // Отримуємо ID з URL (наприклад, 42)
const navigate = useNavigate(); // Для повернення назад до каталогу
const [bike, setBike] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
const fetchBikeDetail = async () => {
try {
// Запит до логічного рівня Express
const response = await axios.get(`http://localhost:5000/api/v1/motorcycles/${id}`);
setBike(response.data.data);
} catch (error) {
console.error("Помилка завантаження деталей:", error);
} finally {
setLoading(false);
}
};
8
482 ЧДТУ 2207-01 34 01
fetchBikeDetail();
}, [id]);
if (loading) return <div className="text-center p-10 animate-pulse">Завантаження
характеристик...</div>;
if (!bike) return <div className="text-center p-10 text-red-500">Модель не знайдено.</div>;
return (
<div className="max-w-4xl mx-auto p-6 bg-white rounded-xl shadow-sm mt-8 border">
<button
onClick={() => navigate(-1)}
className="mb-6 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200
transition-colors"
>
← Назад до каталогу
</button>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<img src={bike.image_url} alt={bike.model} className="w-full h-80 object-cover
rounded-xl" />
</div>
<div>
<span className="text-sm font-bold text-blue-600 uppercase">{bike.brand}</span>
<h2 className="text-3xl font-black text-gray-900 mt-1">{bike.model}</h2>
<p className="text-3xl font-bold text-gray-900 mt-4">${bike.price}</p>
<div className="mt-6 border-t pt-4 space-y-2">
<h3 className="font-bold text-gray-700 mb-2">Технічні характеристики:</h3>
{/* Відображення JSONB даних, отриманих з PostgreSQL */}
<div className="flex justify-between border-b py-1"><span className="text-gray-
500">Тип двигуна:</span> <span className="font-medium">{bike.specs?.engine}</span></div>
9
482 ЧДТУ 2207-01 34 01
<div className="flex justify-between border-b py-1"><span className="text-gray-
500">Потужність:</span> <span className="font-medium">{bike.specs?.power} к.с.</span></div>
<div className="flex justify-between border-b py-1"><span className="text-gray-
500">Вага:</span> <span className="font-medium">{bike.specs?.weight} кг</span></div>
</div>
</div>
</div>
</div>
);
};
src/components/MotorcycleCard.jsx
import React from 'react';
import { Link } from 'react-router-dom';
export const MotorcycleCard = ({ motorcycle }) => {
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
<img src={motorcycle.image_url} alt={motorcycle.model} className="w-full h-48 object-
cover" />
<div className="p-4">
<span className="text-xs font-bold text-blue-600 uppercase">{motorcycle.brand}</span>
<h4 className="text-xl font-bold text-gray-900 mt-1">{motorcycle.model}</h4>
<div className="mt-4 flex items-center justify-between">
<span className="text-2xl font-black text-gray-900">${motorcycle.price}</span>
{/* Динамічне посилання на ID мотоцикла */}
<Link
to={`/motorcycle/${motorcycle.id}`}
className="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-lg hover:bg-
gray-800 transition-colors"
>
Детальніше
</Link>
10
482 ЧДТУ 2207-01 34 01
</div>
</div>
</div>
);
};
Конфігурація маршрутів у src/App.jsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import { FilterPanel } from './components/FilterPanel';
import { MotorcycleCard } from './components/MotorcycleCard';
import { MotorcycleDetail } from './views/MotorcycleDetail';
import { useCatalog } from './hooks/useCatalog'; // Припустимо, логіка стану винесена сюди
// Окремий компонент для головної сторінки каталогу
const CatalogPage = () => {
const { motorcycles, loading, filters, handleFilterChange } = useCatalog(); // ваш колишній стан
з App.jsx
return (
<div className="max-w-7xl mx-auto px-4 py-8 grid grid-cols-1 md:grid-cols-4 gap-6">
<aside className="md:col-span-1">
<FilterPanel filters={filters} onFilterChange={handleFilterChange} />
</aside>
<section className="md:col-span-3">
{loading ? (
<div className="text-center py-10 animate-pulse">Завантаження...</div>
) : (
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
{motorcycles.map(item => <MotorcycleCard key={item.id} motorcycle={item} />)}
</div>
)}
</section>
</div>
11
482 ЧДТУ 2207-01 34 01
);
};
function App() {
return (
<div className="min-h-screen bg-gray-50 text-gray-900">
<header className="bg-white border-b py-4 px-8 shadow-sm">
<h1 className="text-2xl font-black tracking-tight"> Інтерактивний Каталог</h1>
</header>
{/* Головний менеджер маршрутів */}
<Routes>
<Route path="/" element={<CatalogPage />} />
<Route path="/motorcycle/:id" element={<MotorcycleDetail />} />
</Routes>
</div>
);
}
export default App;