Репозиторій ЧДТУ
Репозиторій ЧДТУ зберігає і дозволяє легкий і відкритий доступ до всіх видів цифрового контенту, включаючи текст, зображення, анімовані зображення, MPEG і набори даних
Дізнатися більше
Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал:
https://er.chdtu.edu.ua/handle/ChSTU/9885| Назва: | Інформаційний web-ресурс «Мандрівки Карпатами» |
| Автори: | Ланських , Євген Володимирович Прокопенко, Денис Русланович |
| Ключові слова: | web-ресурс;адміністративна панель;туристичний сайт;Мандрівки Карпатами;маршрути;бронювання;відгуки;Supabase;React;Vercel;web-технології |
| Дата публікації: | 9-чер-2026 |
| Короткий огляд (реферат): | Кваліфікаційна робота присвячена розробці інформаційного web-ресурсу «Мандрівки Карпатами», призначеного для пошуку туристичних маршрутів, перегляду порад для мандрівників, галереї, бронювання подорожей, роботи з відгуками та збереження обраних маршрутів. Розроблений сайт містить користувацьку частину, профіль користувача та адміністративну панель для керування контентом. Актуальність роботи зумовлена розвитком цифрових сервісів у туристичній сфері та потребою користувачів у зручному доступі до структурованої інформації про маршрути Карпатського регіону. Створення такого web-ресурсу дозволяє об’єднати туристичну інформацію, візуальний контент, заявки, відгуки та адміністрування в межах однієї системи. Метою роботи є розробка інформаційного web-ресурсу «Мандрівки Карпатами» з використанням сучасних web-технологій і сервісу Supabase для зберігання та синхронізації даних. Об’єкт дослідження – процес створення web-орієнтованих інформаційних систем для туристичної сфери. Предмет дослідження – структура, функціональні можливості, інтерфейс і програмна реалізація web-ресурсу «Мандрівки Карпатами». У роботі використано методи аналізу предметної області, порівняння існуючих туристичних web-ресурсів, проєктування структури сайту, розробки користувацького інтерфейсу, роботи з базою даних, функціонального тестування, UX-тестування та перевірки адаптивності. Практична значущість отриманих результатів полягає у створенні web-сайту, який може бути використаний для інформаційної підтримки туристів, популяризації маршрутів Карпатського регіону та спрощення планування подорожей. Ресурс забезпечує перегляд маршрутів, порад, галереї, роботу з бронюваннями, відгуками, обраними елементами та адміністративне керування даними. У першому розділі розглянуто предметну область і виконано аналіз туристичних web-ресурсів-аналогів. У другому розділі обґрунтовано технічне завдання, структуру, дизайн, навігацію та функціонал сайту. У третьому розділі описано програмну реалізацію web-ресурсу, роботу з Supabase, тестування та порівняння з аналогами. |
| URI (Уніфікований ідентифікатор ресурсу): | https://er.chdtu.edu.ua/handle/ChSTU/9885 |
| Розташовується у зібраннях: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Файли цього матеріалу:
| Файл | Опис | Розмір | Формат | |
|---|---|---|---|---|
| РЕП_БАК_Прокопенко _WEB-2211.pdf Restricted Access | 2.31 MB | Adobe PDF | Переглянути/Відкрити Запит копії |
Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: Інформаційний web-ресурс «Мандрівки Карпатами»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 F6 «Інформаційні
системи та технології»
ОП «Web-технології, Web-дизайн»
Прокопенко Денис Русланович
Керівник: кандидат технічних наук,
доцент
Ланських Євген Володимирович
Рецензент: директор ТОВ
"АНДЕРСЕНЛАБ"
Алесін Олег Вікторович
Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ
УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалавр
(назва)
Спеціальність 126 F6 «Інформаційні системи та технології»
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
Тетяна
ПРОКОПЕНКО
« » 20
року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Прокопенка Дениса Руслановича
(прізвище, ім’я, по батькові)
1. Тема роботи Інформаційний web-ресурс «Мандрівки Карпатами»
Керівник роботи Ланських Євген Володимирович, кандидат технічних наук, доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
«12» березня 2026 року № 56/03-03
2. Строк подання здобувачем роботи 01.06.2026
3. Вихідні дані до роботи Методичні рекомендації до підготовки кваліфікаційної роботи
бакалавра зі спеціальності 126 F6 «Інформаційні системи та технології»; матеріали з
проєктування web-орієнтованих інформаційних систем; офіційна документація React,
Vite, Vercel, Supabase, PostgreSQL; інформаційні матеріали щодо туристичних web-
ресурсів, UX/UI-дизайну, адаптивної верстки, баз даних і тестування web-застосунків.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити).
Постановка задачі та аналіз предметної області туристичних web-ресурсів. Аналіз аналогів
web-ресурсу «Мандрівки Карпатами», визначення їхніх переваг і недоліків. Обґрунтування
технічного завдання на розробку інформаційного web-ресурсу. Проєктування структури,
дизайну, навігації та функціональних модулів сайту. Обґрунтування вибору засобів розробки,
Supabase та платформи розгортання. Реалізація основних сторінок сайту, профілю
користувача та адміністративної панелі. Організація зберігання даних у Supabase і робота з
маршрутами, порадами, повідомленнями, бронюваннями, відгуками та обраними
елементами. Тестування web-ресурсу, перевірка адаптивності, зручності використання,
роботи з базою даних і порівняння з аналогами. Висновки. Додатки
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, плакатів)
Навігаційна структура web-ресурсу «Мандрівки Карпатами»; модель наповнення та
адміністрування сайту; схема взаємодії frontend-частини, API-маршрутів і Supabase;
скріншоти основних сторінок сайту; скріншоти адміністративної панелі та таблиць бази
даних Supabase; ілюстрації результатів перевірки адаптивності та продуктивності.
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та Підпис, дата
посада
консультанта
завдання видав завдання прийняв
7. Дата видачі завдання 28 січня 2026 року
КАЛЕНДАРНИЙ ПЛАН
№
Строк виконання
з/ Назва етапів кваліфікаційної роботи бакалавра
етапів роботи Примітка
п
1 Видача завдання на кваліфікаційну роботу бакалавра 28.01.2026 Виконано
2 Аналіз літературних джерел, об’єкта та предмета дослідження 08.02.2026 Виконано
Написання теоретичного розділу кваліфікаційної роботи
3 11.03.2026 Виконано
бакалавра
Написання аналітичного розділу, аналіз існуючих платформ
4 02.04.2026 Виконано
онлайн-навчання програмуванню
5 Проєктування структури та функціоналу web-сайту 15.04.2026 Виконано
6 Практична реалізація web-сайту 01.05.2026 Виконано
7 Тестування web-сайту та підготовка висновків 05.05.2026 Виконано
Передзахист кваліфікаційної роботи бакалавра на засіданні
8 22.04.2026 Виконано
кафедри
9 Подання роботи завідувачу кафедри 26.05.2026 Виконано
10 Захист кваліфікаційної роботи бакалавра 09.06.2026 Виконано
Здобувач вищої освіти
(підпис) (прізвище та ініціали)
Керівник роботи
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з трьох
розділів, викладена на 88 сторінках, містить 18 рисунків, 1 таблицю, 35 джерел
використаної літератури, 2 додатки.
Кваліфікаційна робота присвячена розробці інформаційного web-ресурсу
«Мандрівки Карпатами», призначеного для пошуку туристичних маршрутів,
перегляду порад для мандрівників, галереї, бронювання подорожей, роботи з
відгуками та збереження обраних маршрутів. Розроблений сайт містить
користувацьку частину, профіль користувача та адміністративну панель для
керування контентом.
Актуальність роботи зумовлена розвитком цифрових сервісів у
туристичній сфері та потребою користувачів у зручному доступі до
структурованої інформації про маршрути Карпатського регіону. Створення
такого web-ресурсу дозволяє об’єднати туристичну інформацію, візуальний
контент, заявки, відгуки та адміністрування в межах однієї системи.
Метою роботи є розробка інформаційного web-ресурсу «Мандрівки
Карпатами» з використанням сучасних web-технологій і сервісу Supabase для
зберігання та синхронізації даних.
Об’єкт дослідження – процес створення web-орієнтованих інформаційних
систем для туристичної сфери. Предмет дослідження – структура,
функціональні можливості, інтерфейс і програмна реалізація web-ресурсу
«Мандрівки Карпатами».
У роботі використано методи аналізу предметної області, порівняння
існуючих туристичних web-ресурсів, проєктування структури сайту, розробки
користувацького інтерфейсу, роботи з базою даних, функціонального
тестування, UX-тестування та перевірки адаптивності.
Практична значущість отриманих результатів полягає у створенні web-сайту,
який може бути використаний для інформаційної підтримки туристів,
популяризації маршрутів Карпатського регіону та спрощення планування
подорожей. Ресурс забезпечує перегляд маршрутів, порад, галереї, роботу з
бронюваннями, відгуками, обраними елементами та адміністративне
керування даними.
У першому розділі розглянуто предметну область і виконано аналіз
туристичних web-ресурсів-аналогів.
У другому розділі обґрунтовано технічне завдання, структуру, дизайн,
навігацію та функціонал сайту.
У третьому розділі описано програмну реалізацію web-ресурсу, роботу з
Supabase, тестування та порівняння з аналогами.
Ключові слова: web-ресурс, туристичний сайт, Мандрівки Карпатами,
маршрути, бронювання, відгуки, Supabase, React, Vercel, web-технології,
адміністративна панель.
SUMMARY
The structure and volume of the work. The thesis consists of three chapters,
set out on 88 pages, contains 18 figures, 1 table, 35 references, 2 appendices.
The bachelor’s thesis is dedicated to the development of the informational web
resource “Mandrivky Karpatamy”, designed for searching tourist routes, viewing
travel tips, exploring a photo gallery, booking trips, working with reviews, and
saving selected routes. The developed website includes a user interface, a personal
profile, and an administrative panel for managing website content.
The relevance of the work is determined by the development of digital
services in the tourism industry and the need for convenient access to structured
information about routes in the Carpathian region. The creation of such a web
resource makes it possible to combine tourist information, visual content, booking
requests, reviews, and administration tools within one system.
The aim of the study is to develop an informational web resource “Mandrivky
Karpatamy” using modern web technologies and the Supabase service for data
storage and synchronization.
The object of the study is the process of creating web-oriented information
systems for the tourism industry. The subject of the study is the structure,
functionality, user interface, and software implementation of the “Mandrivky
Karpatamy” web resource.
The following methods were used: subject area analysis, comparative analysis of
existing tourist web resources, website structure design, user interface development,
database interaction, functional testing, UX testing, and responsive design testing.
The practical value of the results lies in the creation of a website that can be
used for informational support of tourists, popularization of routes in the Carpathian
region, and simplification of travel planning. The resource provides route browsing,
travel tips, a photo gallery, booking functions, reviews, saved routes, and
administrative data management.
The first chapter considers the subject area and presents an analysis of similar
tourist web resources.
The second chapter substantiates the technical assignment, website structure,
design, navigation, and functionality.
The third chapter describes the software implementation of the web resource,
interaction with Supabase, testing, and comparison with similar systems.
Keywords: web resource, tourist website, Mandrivky Karpatamy, routes,
booking, reviews, Supabase, React, Vercel, web technologies, administrative panel.
ЗМІСТ
ВСТУП ......................................................................................................................... 4
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ ................................................................................................................. 9
1.1. Опис предметної області ............................................................................. 9
1.2. Доцільність розробки інформаційного web-ресурсу «Мандрівки
Карпатами» ........................................................................................................ 11
1.3. Чинники, які впливають на розробку туристичного web-ресурсу ........ 13
1.4. Аналітичний огляд існуючих туристичних web-ресурсів ...................... 15
Висновки до розділу 1 ...................................................................................... 26
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ......................... 28
2.1. Призначення інформаційного web-ресурсу «Мандрівки Карпатами» .. 28
2.2. Вимоги до дизайну інформаційного web-ресурсу «Мандрівки
Карпатами» ........................................................................................................ 30
2.3. Структура сторінок інформаційного web-ресурсу «Мандрівки
Карпатами» ........................................................................................................ 31
2.4. Навігація інформаційного web-ресурсу «Мандрівки Карпатами» ........ 34
2.5. Наповнення сторінок інформаційного web-ресурсу «Мандрівки
Карпатами» ........................................................................................................ 36
2.6. Адміністрування інформаційного web-ресурсу «Мандрівки Карпатами»
............................................................................................................................. 39
2.7. Вимоги до прототипу інформаційного web-ресурсу «Мандрівки
Карпатами» ........................................................................................................ 40
2.8. Техніко-економічне обґрунтування доцільності розробки
інформаційного web-ресурсу «Мандрівки Карпатами» ................................ 42
Висновки до розділу 2 ...................................................................................... 47
РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ ................................................................. 50
3.1. Обґрунтування вибору інструментальних засобів розробки ................. 50
3.2. Опис програмної реалізації web-ресурсу «Мандрівки Карпатами» ..... 53
3.3. Організація бази даних і взаємодія з Supabase ........................................ 59
3.4. Логіка API-маршрутів і обміну даними ................................................... 62
3.5. Тестування web-ресурсу «Мандрівки Карпатами» ................................. 64
3.6. Порівняння розробленого web-ресурсу з аналогами .............................. 66
Висновки до розділу 3 ...................................................................................... 68
ВИСНОВКИ ............................................................................................................. 70
ЧДТУ 262218.019 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Прокопенко Д. Р.. Літ. Арк. Аркушів
Перевір. Ланських Є. В.. Інформаційний web-ресурс 2 88
Мандрівки Карпатами.
Рецензент
Пояснювальна записка ФІТІС,
Н. контр. Ланських Є. В. кафедра ІТП, WEB-2211
Затверд. Прокопенко Т.О.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................. 75
ДОДАТОК А ............................................................................................................. 78
ДОДАТОК Б ............................................................................................................. 85
Арк.
ЧДТУ 262218.019 ПЗ
3
Змн. Арк. № Документа Підпис Дата
ВСТУП
У сучасних умовах web-технології відіграють важливу роль у розвитку
туристичної сфери, оскільки забезпечують швидкий доступ користувачів до
інформації про маршрути, природні об’єкти, умови подорожей, туристичні
послуги та рекомендації щодо планування відпочинку. Туризм дедалі
активніше переходить у цифрове середовище, де користувач очікує отримати
не лише загальний опис місцевості, а й зручний інструмент для вибору
маршруту, перегляду фотографій, ознайомлення з порадами, надсилання
заявки, бронювання подорожі та збереження обраних напрямків.
Актуальність теми кваліфікаційної роботи зумовлена зростанням потреби у
доступних, зручних та функціональних web-ресурсах, які допомагають
користувачам планувати туристичні поїздки. За даними Всесвітньої
туристичної організації, у 2024 році міжнародний туризм фактично відновився
до докризового рівня, а кількість міжнародних туристичних прибуттів
становила приблизно 1,4 млрд осіб [1]. Це свідчить про стабільне зростання
інтересу до подорожей та необхідність розвитку цифрових сервісів, які
спрощують процес пошуку туристичної інформації. Крім того, Всесвітня рада
з подорожей і туризму зазначає, що туристична галузь продовжує залишатися
важливою складовою світової економіки, що підтверджує практичну
значущість інформаційних систем у цій сфері [2].
Особливе значення цифрові туристичні сервіси мають для внутрішнього
туризму України. Карпати є одним із найпопулярніших природних
туристичних регіонів країни, який приваблює мандрівників гірськими
маршрутами, водоспадами, озерами, полонинами, лісовими стежками та
можливостями для активного відпочинку. Водночас користувачі часто
стикаються з проблемою розрізненості інформації: описи маршрутів, поради,
фотографії, контакти, можливості бронювання та відгуки можуть бути
розміщені на різних ресурсах. Це ускладнює планування подорожі, особливо
для користувачів, які не мають достатнього туристичного досвіду.
Арк.
ЧДТУ 262218.019 ПЗ
4
Змн. Арк. № Документа Підпис Дата
Державне агентство розвитку туризму України окремо виділяє
цифровізацію туристичної сфери як один із напрямів розвитку, що
передбачає впровадження цифрових рішень, підвищення доступності
туристичної інформації та покращення взаємодії між користувачами й
туристичними сервісами [3]. Отже, створення інформаційного web-ресурсу,
орієнтованого на туристичні маршрути Карпат, є актуальним завданням, яке
відповідає сучасним тенденціям розвитку web-технологій та потребам
користувачів.
На сьогодні існує значна кількість туристичних сайтів, каталогів
маршрутів, блогів і сервісів бронювання. Проте не всі вони поєднують в
одному інтерфейсі інформаційні матеріали, маршрутні картки, галерею,
поради, контактну форму, профіль користувача, обране, відгуки та
адміністративне керування контентом. Частина таких ресурсів має
перевантажений інтерфейс, недостатню адаптивність, обмежені можливості
персоналізації або не надає зручних інструментів для взаємодії з
користувачем. Це зумовлює доцільність розробки власного web-ресурсу
«Мандрівки Карпатами», який поєднує інформаційні, навігаційні та
користувацькі функції в межах єдиної системи.
Розроблюваний web-ресурс «Мандрівки Карпатами» призначений для
інформаційної підтримки користувачів, які планують подорожі
Карпатським регіоном. Сайт містить головну сторінку з коротким описом
проєкту, сторінку маршрутів із картками туристичних напрямків, сторінку
порад для мандрівників, галерею фотографій, контактну сторінку, профіль
користувача та адміністративну панель. Система також передбачає роботу з
бронюваннями, відгуками, обраними маршрутами та формами зв’язку. Для
зберігання й синхронізації даних використовується Supabase, що надає
можливості роботи з базою даних PostgreSQL, автентифікацією,
зберіганням файлів та іншими сервісами для web-додатків [4].
Метою кваліфікаційної роботи є розробка інформаційного web-ресурсу
«Мандрівки Карпатами», призначеного для пошуку туристичних
Арк.
ЧДТУ 262218.019 ПЗ
5
Змн. Арк. № Документа Підпис Дата
маршрутів, перегляду корисної інформації, взаємодії користувачів із
сайтом, збереження обраних маршрутів, надсилання заявок та
адміністрування контенту з використанням сучасних web-технологій і
хмарного сервісу Supabase.
Для досягнення поставленої мети необхідно вирішити такі задачі:
– проаналізувати предметну область туристичних інформаційних web-
ресурсів та визначити особливості цифрової підтримки планування
подорожей;
– дослідити існуючі аналоги туристичних сайтів і сервісів, визначити їхні
переваги, недоліки та можливості використання окремих рішень у
власній розробці;
– сформувати функціональні та нефункціональні вимоги до web-ресурсу
«Мандрівки Карпатами»;
– спроєктувати структуру web-сайту, логіку навігації, основні сторінки,
користувацькі сценарії та складові інтерфейсу;
– обґрунтувати вибір інструментальних засобів, технологій розробки та
сервісу Supabase для зберігання, синхронізації та обробки даних;
– реалізувати основні сторінки web-ресурсу, зокрема головну сторінку,
каталог маршрутів, сторінку порад, галерею, контакти, профіль
користувача та адміністративну панель;
– реалізувати функціональні можливості роботи з маршрутами,
відгуками, бронюваннями, обраними елементами, контактними формами
та адміністративним керуванням контентом;
– виконати тестування працездатності, адаптивності, зручності
використання та коректності взаємодії web-ресурсу з базою даних;
– провести порівняння розробленого web-ресурсу з існуючими
аналогами та визначити його практичні переваги.
Об’єкт дослідження – процес створення web-орієнтованих
інформаційних систем для туристичної сфери.
Арк.
ЧДТУ 262218.019 ПЗ
6
Змн. Арк. № Документа Підпис Дата
Предмет дослідження – методи, засоби та технології проєктування і
розробки інформаційного web-ресурсу для пошуку туристичних маршрутів
Карпат, взаємодії з користувачами, зберігання даних та адміністрування
контенту.
Методи дослідження. У процесі виконання кваліфікаційної роботи
використано методи аналізу та узагальнення інформації для дослідження
предметної області й аналогічних web-ресурсів; методи порівняльного аналізу
для визначення переваг і недоліків існуючих туристичних сервісів; методи
структурного та функціонального проєктування для формування архітектури
web-сайту; методи моделювання користувацьких сценаріїв для опису
взаємодії користувача із системою; методи web-програмування для реалізації
клієнтської частини ресурсу; методи роботи з базами даних для організації
збереження інформації в Supabase; методи тестування програмного
забезпечення для перевірки працездатності, адаптивності, коректності
функціонування та зручності використання розробленого сайту.
Практичне значення одержаних результатів полягає у створенні
функціонального інформаційного web-ресурсу «Мандрівки Карпатами», який
може бути використаний для ознайомлення користувачів із туристичними
маршрутами Карпатського регіону, перегляду порад для мандрівників,
збереження обраних маршрутів, надсилання заявок, залишення відгуків та
взаємодії з адміністрацією сайту. Розроблений ресурс забезпечує
централізоване подання туристичної інформації, покращує зручність
планування подорожей і може бути надалі розширений шляхом додавання
інтерактивної карти, онлайн-оплати, персональних рекомендацій, інтеграції з
погодними сервісами та системою повідомлень.
Розроблена система має практичну цінність завдяки поєднанню
інформаційного контенту, користувацьких функцій та адміністративного
керування. Використання Supabase дає змогу організувати збереження даних
про маршрути, заявки, відгуки та обрані елементи, а також забезпечити
подальше масштабування системи. Завдяки адаптивному інтерфейсу сайт
Арк.
ЧДТУ 262218.019 ПЗ
7
Змн. Арк. № Документа Підпис Дата
може використовуватися з різних пристроїв, що є важливим для туристів, які
часто переглядають інформацію зі смартфонів під час планування або
здійснення подорожі.
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох
розділів, висновків, списку використаних джерел та додатків. Така структура
дозволяє послідовно розкрити тему дослідження: від аналізу предметної
області та постановки задачі до практичної реалізації, тестування й
оцінювання результатів розробки інформаційного web-ресурсу «Мандрівки
Карпатами».
У першому розділі розглянуто предметну область туристичних
інформаційних web-ресурсів, визначено актуальність створення сайту для
підтримки планування подорожей Карпатським регіоном, проаналізовано
сучасні аналоги, їхні функціональні можливості, переваги та недоліки. На
основі проведеного аналізу було сформульовано постановку задачі та
визначено основні напрями подальшої розробки.
У другому розділі обґрунтовано технічне завдання, визначено
функціональні та нефункціональні вимоги до web-ресурсу, описано загальну
структуру сайту, користувацькі сценарії, вимоги до дизайну, навігації, бази
даних та адміністрування. Окрему увагу приділено проєктуванню основних
сторінок сайту, логіці взаємодії користувача із системою та ролі
адміністративної панелі в керуванні контентом.
У третьому розділі описано вибір засобів реалізації, процес розробки
інформаційного web-ресурсу «Мандрівки Карпатами», інтеграцію із Supabase,
реалізацію основних сторінок і функціональних модулів. Також розглянуто
організацію зберігання даних, роботу з маршрутами, порадами,
бронюваннями, відгуками та обраними елементами. Завершальним етапом
розділу є тестування системи, перевірка її працездатності, адаптивності,
зручності використання та порівняння отриманого результату з існуючими
аналогами.
Арк.
ЧДТУ 262218.019 ПЗ
8
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ
1.1. Опис предметної області
Туристичні інформаційні web-ресурси є важливою складовою сучасного
цифрового середовища, оскільки забезпечують користувачам швидкий доступ
до відомостей про туристичні маршрути, природні об’єкти, умови подорожей,
варіанти відпочинку, рекомендації, відгуки та контактну інформацію. Основне
призначення таких ресурсів полягає у наданні користувачеві структурованої
інформації, яка допомагає обрати напрямок подорожі, оцінити складність
маршруту, переглянути фотографії місцевості, ознайомитися з порадами та за
потреби надіслати заявку або звернення до адміністрації сервісу.
У сучасних умовах туристична діяльність значною мірою залежить від
цифрових інструментів. Користувачі дедалі частіше шукають інформацію про
подорожі через web-сайти, онлайн-карти, мобільні застосунки, соціальні
мережі та спеціалізовані туристичні платформи. Це пояснюється зручністю
доступу до інформації, можливістю швидкого порівняння різних маршрутів,
переглядом відгуків інших мандрівників і наявністю візуального контенту.
Відповідно, туристичний web-ресурс повинен не лише містити інформацію
про напрямки, а й забезпечувати зрозумілу навігацію, адаптивний дизайн,
актуальність даних і можливість взаємодії користувача із системою.
Особливе значення туристичні web-ресурси мають для популяризації
внутрішнього туризму. Карпати є одним із найбільш відомих туристичних
регіонів України, який приваблює мандрівників гірськими вершинами,
водоспадами, озерами, лісовими стежками, полонинами, історико-
культурними пам’ятками та можливостями для активного відпочинку.
Водночас інформація про маршрути, поради, фотографії, можливості
бронювання та відгуки часто розміщується на різних ресурсах, що ускладнює
процес планування подорожі.
Арк.
ЧДТУ 262218.019 ПЗ
9
Змн. Арк. № Документа Підпис Дата
Туристичні web-сайти можуть мати різне функціональне призначення.
Частина ресурсів виконує роль довідкових порталів, які містять описи регіонів,
населених пунктів, готелів, садиб, туристичних об’єктів і маршрутів. Інші
ресурси орієнтовані на бронювання послуг, пошук житла, купівлю турів або
формування індивідуального плану подорожі. Також існують спеціалізовані
платформи для пішохідного, велосипедного, гірського та активного туризму,
де основну увагу приділено маршрутам, картам, навігації, відгукам і
фотографіям користувачів.
Сучасний туристичний інформаційний web-ресурс може включати такі
основні компоненти:
– головну сторінку з коротким описом призначення ресурсу та
основними перевагами;
– каталог туристичних маршрутів із картками, які містять назву,
короткий опис, складність, тривалість, ціну, сезонність або інші
характеристики;
– сторінку детального перегляду маршруту з описом, фотографіями,
рекомендаціями та можливістю взаємодії з користувачем;
– систему пошуку та фільтрації маршрутів за об’єктивними
параметрами;
– розділ порад для туристів, який містить рекомендації щодо
спорядження, безпеки, підготовки до маршруту та сезонних
особливостей подорожей;
– галерею фотографій для візуального ознайомлення з туристичними
локаціями;
– контактну сторінку з формою зворотного зв’язку;
– особистий кабінет користувача для перегляду обраних маршрутів,
бронювань і відгуків;
– адміністративну панель для керування маршрутами, порадами,
повідомленнями, бронюваннями та користувацькими даними.
Арк.
ЧДТУ 262218.019 ПЗ
10
Змн. Арк. № Документа Підпис Дата
Перевагами туристичних web-ресурсів є доступність інформації з будь-
якого місця, можливість оперативного оновлення даних, зручне
структурування туристичного контенту, підтримка візуального представлення
маршрутів і спрощення взаємодії між користувачем та адміністрацією сервісу.
Такі ресурси дозволяють користувачеві швидше прийняти рішення щодо
вибору подорожі, а адміністраторам — ефективніше керувати інформаційним
наповненням сайту.
Разом із перевагами існують і певні проблеми, характерні для
туристичних web-сайтів. До них можна віднести неповну або застарілу
інформацію, відсутність зручної фільтрації, складну навігацію, недостатню
адаптацію під мобільні пристрої, перевантаженість інтерфейсу, обмежені
можливості персоналізації та відсутність адміністративних інструментів для
швидкого оновлення контенту. Такі недоліки можуть знижувати ефективність
використання web-ресурсу та ускладнювати процес планування подорожі.
Отже, туристичні інформаційні web-ресурси є актуальним напрямом
розвитку web-орієнтованих інформаційних систем. Вони поєднують
інформаційне наповнення, зручну навігацію, візуальний контент,
користувацькі функції та адміністративне керування. Це створює передумови
для розробки web-ресурсу «Мандрівки Карпатами», який буде орієнтований на
зручне подання туристичних маршрутів Карпатського регіону та взаємодію з
користувачами.
1.2. Доцільність розробки інформаційного web-ресурсу «Мандрівки
Карпатами»
Розробка інформаційного web-ресурсу «Мандрівки Карпатами» є
доцільною у зв’язку з потребою користувачів у зручному, структурованому та
сучасному інструменті для пошуку туристичної інформації про Карпатський
регіон. Під час планування подорожі користувачеві необхідно швидко
отримати відомості про маршрут, його складність, тривалість, вартість,
Арк.
ЧДТУ 262218.019 ПЗ
11
Змн. Арк. № Документа Підпис Дата
доступність, особливості місцевості, поради щодо підготовки та можливість
зв’язку з організаторами або адміністрацією ресурсу.
Більшість існуючих туристичних сайтів надають корисну інформацію,
проте не завжди поєднують в одному інтерфейсі всі необхідні можливості.
Наприклад, окремі ресурси орієнтовані переважно на довідкову інформацію,
інші — на бронювання або відгуки, а спеціалізовані сервіси маршрутів можуть
бути не повністю адаптовані до потреб користувачів, які шукають саме
туристичні маршрути Карпатами. У результаті користувач змушений
переходити між кількома платформами, щоб знайти опис маршруту,
переглянути фото, оцінити відгуки, зберегти обране або надіслати заявку.
До основних недоліків частини існуючих туристичних web-ресурсів
можна віднести:
– розрізненість інформації про маршрути, поради, відгуки та контакти;
– відсутність єдиного особистого кабінету користувача;
– недостатню кількість інструментів для збереження обраних маршрутів;
– обмежені можливості адміністрування контенту;
– складну або перевантажену структуру інтерфейсу;
– недостатню адаптацію до мобільних пристроїв;
– відсутність зручної системи керування бронюваннями та
повідомленнями.
Розробка web-ресурсу «Мандрівки Карпатами» дозволяє вирішити
зазначені проблеми шляхом створення єдиної системи, яка поєднує
інформаційне наповнення, користувацький функціонал і адміністративне
керування. Сайт передбачає наявність головної сторінки, каталогу маршрутів,
сторінки порад, галереї, контактної сторінки, профілю користувача та
адміністративної панелі. Така структура забезпечує логічний поділ інформації
та спрощує взаємодію користувача із системою.
Особливо важливим є використання бази даних і сервісу синхронізації
даних. У межах розроблюваного web-ресурсу для зберігання та обробки
інформації використовується Supabase. Цей сервіс надає можливості роботи з
Арк.
ЧДТУ 262218.019 ПЗ
12
Змн. Арк. № Документа Підпис Дата
базою даних PostgreSQL, автентифікацією користувачів, зберіганням даних та
інтеграцією з web-додатками [4]. Завдяки цьому система може зберігати
інформацію про маршрути, бронювання, відгуки, повідомлення та обрані
елементи.
Доцільність розробки також пояснюється необхідністю підвищення
зручності користувача. Наявність профілю дозволяє переглядати власні дії на
сайті, працювати з обраними маршрутами та відгуками. Адміністративна
панель забезпечує можливість керування контентом без прямого редагування
програмного коду. Це важливо для подальшого супроводу системи, оскільки
адміністратор може оновлювати туристичні маршрути, додавати нові
матеріали, переглядати заявки та підтримувати актуальність інформації.
Таким чином, створення інформаційного web-ресурсу «Мандрівки
Карпатами» є актуальним і практично доцільним рішенням, оскільки воно
дозволяє об’єднати туристичну інформацію, користувацькі сервіси та
інструменти адміністрування в межах однієї web-орієнтованої інформаційної
системи.
1.3. Чинники, які впливають на розробку туристичного web-
ресурсу
Процес розробки туристичного web-ресурсу залежить від сукупності
технічних, функціональних, інформаційних, дизайнерських та організаційних
чинників. Їх урахування дозволяє створити систему, яка буде зручною для
користувачів, стабільною в роботі та придатною для подальшого розвитку.
Одним із головних чинників є визначення цільової аудиторії. Web-ресурс
«Мандрівки Карпатами» орієнтований на користувачів, які цікавляться
подорожами Карпатами, шукають туристичні маршрути, поради, фотографії та
можливість залишити заявку або відгук. До потенційної аудиторії належать
туристи-початківці, досвідчені мандрівники, користувачі, які планують
Арк.
ЧДТУ 262218.019 ПЗ
13
Змн. Арк. № Документа Підпис Дата
сімейний відпочинок, а також особи, які шукають короткі маршрути для
активного дозвілля.
Важливим чинником є структура сайту. Вона повинна бути логічною,
зрозумілою та не перевантаженою. Для туристичного web-ресурсу доцільним
є поділ на окремі сторінки: головна, маршрути, поради, галерея, контакти,
профіль користувача та адміністративна панель. Така структура дозволяє
користувачеві швидко знайти необхідний розділ і не витрачати зайвий час на
пошук потрібної інформації.
Наступним чинником є якість користувацького інтерфейсу. Дизайн
туристичного сайту повинен бути візуально привабливим, але не заважати
сприйняттю інформації. Для тематики Карпат доцільно використовувати
природну кольорову гаму, якісні фотографії, достатні відступи між
елементами, читабельні шрифти та зрозумілі кнопки дії. Важливо, щоб
користувач міг легко перейти до перегляду маршрутів, зберегти обране,
надіслати заявку або відкрити контактну сторінку.
Окрему роль відіграє адаптивність. Оскільки туристи часто
переглядають інформацію зі смартфонів, сайт повинен коректно
відображатися на різних типах пристроїв: комп’ютерах, планшетах і
мобільних телефонах. Адаптивність впливає не лише на зручність
використання, а й на загальну якість web-ресурсу.
Важливим технічним чинником є організація роботи з базою даних. Для
туристичного web-ресурсу необхідно зберігати інформацію про маршрути,
користувачів, відгуки, бронювання, обрані елементи та повідомлення.
Використання Supabase дає можливість організувати централізоване
зберігання даних і забезпечити взаємодію між інтерфейсом сайту та базою
даних [4].
Безпека також є одним із ключових чинників. Система повинна
забезпечувати коректну роботу з користувацькими даними, обмеження
доступу до адміністративної панелі, захист від несанкціонованого редагування
Арк.
ЧДТУ 262218.019 ПЗ
14
Змн. Арк. № Документа Підпис Дата
інформації та надійну автентифікацію користувачів. Особливо важливо
розмежовувати можливості звичайного користувача й адміністратора.
Ще одним чинником є зручність адміністрування. Туристичний web-
ресурс потребує постійного оновлення інформації: додавання нових
маршрутів, редагування описів, перегляду заявок, опрацювання відгуків і
керування контентом. Саме тому адміністративна панель є важливою
складовою системи. Вона дозволяє підтримувати актуальність ресурсу без
необхідності безпосереднього втручання у програмний код.
Також необхідно враховувати швидкодію web-сайту. Туристичні ресурси
часто містять велику кількість зображень, тому важливо оптимізувати
графічний контент, структуру сторінок і запити до бази даних. Надмірне
навантаження може призвести до повільного завантаження сторінок, що
негативно впливає на користувацький досвід.
Отже, успішна реалізація web-ресурсу «Мандрівки Карпатами» потребує
комплексного підходу, який враховує інформаційне наповнення, дизайн,
адаптивність, безпеку, роботу з базою даних, швидкодію, зручність
адміністрування та потреби цільової аудиторії.
1.4. Аналітичний огляд існуючих туристичних web-ресурсів
Проведення аналітичного огляду існуючих туристичних web-ресурсів
дозволяє визначити основні підходи до подання туристичної інформації,
виявити сильні та слабкі сторони аналогів, а також сформувати вимоги до
розроблюваної системи. Для аналізу було обрано ресурси, які виконують
подібні або частково подібні функції до web-ресурсу «Мандрівки Карпатами»:
Karpaty.info, Visit Ukraine, Tripadvisor та AllTrails.
Обрані аналоги відрізняються за масштабом і призначенням. Karpaty.info
є регіонально орієнтованим ресурсом про відпочинок у Карпатах. Visit Ukraine
виконує роль ширшого сервісного порталу для подорожей Україною.
Tripadvisor є міжнародною платформою з відгуками, рекомендаціями та
Арк.
ЧДТУ 262218.019 ПЗ
15
Змн. Арк. № Документа Підпис Дата
бронюванням. AllTrails спеціалізується на маршрутах для активного
відпочинку, пішохідних і велосипедних подорожей. Такий вибір аналогів
дозволяє оцінити різні підходи до організації туристичного web-ресурсу.
Під час аналізу туристичних web-ресурсів доцільно використати такі
об’єктивні критерії:
– наявність каталогу туристичних маршрутів або локацій;
– можливість пошуку інформації;
– наявність фільтрації за параметрами;
– наявність карток маршрутів або туристичних об’єктів;
– наявність детального опису маршруту або локації;
– наявність фотографій або галереї;
– можливість перегляду відгуків користувачів;
– можливість залишення відгуку;
– можливість збереження обраних маршрутів або місць;
– наявність бронювання або заявки;
– наявність контактної форми;
– наявність особистого кабінету користувача;
– адаптація сайту для пристроїв різних форматів;
– орієнтація саме на Карпатський регіон.
Karpaty.info
Рисунок 1.1 – Головна сторінка ресурсу Karpaty.info
Арк.
ЧДТУ 262218.019 ПЗ
16
Змн. Арк. № Документа Підпис Дата
Karpaty.info є туристичним web-ресурсом, присвяченим відпочинку в
Карпатах. На сайті подано інформацію про місця, які варто відвідати, варіанти
проживання, розваги, лижний відпочинок, походи, термальні води та інші
туристичні можливості регіону [6]. Основною перевагою ресурсу є його
тематична спрямованість саме на Карпати, що робить його близьким за
предметною областю до web-ресурсу «Мандрівки Карпатами».
Ресурс має значний обсяг інформації про туристичні об’єкти, населені
пункти, готелі, садиби та різні види відпочинку. Для користувача це є
перевагою, оскільки він може знайти багато даних про Карпатський регіон в
одному місці. Також позитивною рисою є наявність регіонального фокусу,
адже сайт не розпорошує увагу на всі туристичні напрямки світу, а
концентрується на конкретному регіоні.
Водночас Karpaty.info має певні недоліки з точки зору сучасного
користувацького досвіду. Через велику кількість інформації інтерфейс може
сприйматися перевантаженим. Не всі елементи подання контенту відповідають
сучасним підходам до мінімалістичного web-дизайну. Крім того, ресурс більше
орієнтований на довідкове подання інформації, ніж на персоналізовану
взаємодію користувача із системою. Для web-ресурсу «Мандрівки Карпатами»
доцільно врахувати сильну сторону Karpaty.info — регіональну спрямованість,
але реалізувати більш сучасний інтерфейс, профіль користувача, обране,
відгуки, заявки та адміністративне керування.
Арк.
ЧДТУ 262218.019 ПЗ
17
Змн. Арк. № Документа Підпис Дата
Visit Ukraine
Рисунок 1.2 – Головна сторінка ресурсу Visit Ukraine
Visit Ukraine є сервісним порталом про Україну, який надає користувачам
інформацію, пов’язану з подорожами, правилами в’їзду, страхуванням,
юридичною підтримкою, квитками, готелями та іншими сервісами [7]. На
відміну від Karpaty.info, цей ресурс має ширше призначення та не обмежується
лише Карпатським регіоном.
Перевагою Visit Ukraine є сервісний підхід до організації інформації.
Портал не лише інформує користувачів, а й надає доступ до додаткових послуг,
які можуть бути корисними під час подорожей. Такий підхід демонструє
важливість поєднання інформаційної та сервісної складових у сучасних
туристичних web-ресурсах.
Разом із тим Visit Ukraine не є вузькоспеціалізованим ресурсом для
вибору туристичних маршрутів Карпатами. Його функціональність більше
орієнтована на загальну підтримку подорожей Україною та вирішення
Арк.
ЧДТУ 262218.019 ПЗ
18
Змн. Арк. № Документа Підпис Дата
організаційних питань. Для користувача, який шукає саме маршрут Карпатами,
такий ресурс може бути недостатньо конкретним. Тому під час розробки
«Мандрівки Карпатами» доцільно зберегти зручність сервісного підходу, але
зосередити функціонал саме на туристичних маршрутах, порадах, галереї,
бронюваннях, відгуках та особистому кабінеті.
Tripadvisor
Рисунок 1.3 – Головна сторінка ресурсу Tripadvisor
Tripadvisor є однією з найбільших міжнародних туристичних платформ,
яка допомагає планувати подорожі, переглядати відгуки, отримувати поради
від спільноти, знаходити готелі, ресторани, розваги та бронювати туристичні
послуги [8]. Важливою особливістю Tripadvisor є велика кількість
користувацьких відгуків і рейтингів, що дозволяє мандрівникам оцінювати
туристичні об’єкти на основі досвіду інших людей.
Перевагами Tripadvisor є масштабність, велика база туристичних
об’єктів, наявність відгуків, рейтингів, фотографій, рекомендацій і
можливостей бронювання. Платформа добре демонструє значення соціального
Арк.
ЧДТУ 262218.019 ПЗ
19
Змн. Арк. № Документа Підпис Дата
підтвердження у туристичній сфері, оскільки відгуки інших користувачів часто
впливають на вибір маршруту, готелю або послуги.
Недоліком Tripadvisor у контексті теми кваліфікаційної роботи є його
надмірна універсальність. Платформа охоплює різні країни, міста, заклади та
види послуг, тому для користувача, який шукає саме маршрути Карпатами,
інформація може бути недостатньо структурованою. Крім того, велика
кількість функцій може ускладнювати швидкий вибір конкретного маршруту.
Для web-ресурсу «Мандрівки Карпатами» доцільно врахувати сильні сторони
Tripadvisor, зокрема відгуки, рейтингування, фотографії та можливість
взаємодії користувачів, але уникнути перевантаженості інтерфейсу.
AllTrails
Рисунок 1.4 – Головна сторінка ресурсу AllTrails
AllTrails є спеціалізованою платформою для пошуку маршрутів для
піших прогулянок, бігу, велосипедних поїздок та інших видів активного
відпочинку. Сервіс пропонує користувачам путівники маршрутами, карти,
фотографії, відгуки та велику базу маршрутів для активних мандрівників [9].
На офіційній сторінці платформи зазначено, що AllTrails містить велику
кількість маршрутів і дозволяє користувачам досліджувати природу за
допомогою карт, фото та відгуків.
Арк.
ЧДТУ 262218.019 ПЗ
20
Змн. Арк. № Документа Підпис Дата
Перевагою AllTrails є чітка орієнтація на маршрути та активний
відпочинок. Для користувачів, які планують піші або велосипедні подорожі,
важливими є фільтри, карти, складність маршруту, довжина, оцінки,
фотографії та коментарі інших мандрівників. Саме ці елементи роблять
платформу корисною для планування активних подорожей.
Водночас AllTrails є міжнародним сервісом і не зосереджується
конкретно на українських Карпатах. Частина функціоналу може бути доступна
через мобільний застосунок або платну підписку, а для локального
туристичного ресурсу важливішою є подача регіонального контенту
українською мовою, з урахуванням місцевих особливостей, порад і
можливостей зв’язку з адміністрацією. Для web-ресурсу «Мандрівки
Карпатами» доцільно використати ідею маршрутної структури, карток, фото та
відгуків, але адаптувати її до локальної тематики Карпат.
Інформаційний web-ресурс «Мандрівки Карпатами»
Рисунок 1.5 – Головна сторінка web-ресурсу «Мандрівки Карпатами»
Розроблюваний web-ресурс «Мандрівки Карпатами» орієнтований на
інформаційну підтримку користувачів, які планують подорожі Карпатським
регіоном. На відміну від універсальних туристичних платформ, сайт має
Арк.
ЧДТУ 262218.019 ПЗ
21
Змн. Арк. № Документа Підпис Дата
конкретну тематичну спрямованість і поєднує в межах однієї системи
маршрутні картки, поради, галерею, контактну сторінку, профіль користувача,
обране, відгуки, бронювання та адміністративну панель.
Особливістю ресурсу є використання Supabase для зберігання та
синхронізації даних. Це дозволяє організувати роботу з маршрутами, заявками,
відгуками, повідомленнями та обраними елементами. Наявність
адміністративної панелі дає змогу керувати контентом сайту, що є важливою
перевагою порівняно з ресурсами, де адміністрування не розглядається як
частина користувацької системи.
Таблиця 1.1 Порівняння аналогів туристичних web-ресурсів
Критерії Karpaty.info Visit Tripadvisor Alltrails Мандрівки
Порівняння Ukraine Карпатами
Орієнтація на Так Так Так Так Так
туристичну
тематику
Орієнтація Так Частково Частково Частково Так
саме на
Карпатський
регіон
Каталог Так Частково Так Так Так
маршрутів або
туристичних
об’єктів
Картки Частково Частково Так Так Так
маршрутів або
локацій
Детальний опис Так Частково Так Так Так
маршруту або
Арк.
ЧДТУ 262218.019 ПЗ
22
Змн. Арк. № Документа Підпис Дата
туристичного
місця
Продовження таблиці 1.1
Пошук Так Так Так Так Так
інформації на
сайті
Фільтрація за Частково Частково Так Так Так
параметрами
Галерея або Так Так Так Так Так
фотографії
туристичних
об’єктів
Наявність Частково Ні Так Так Так
відгуків
користувачів
Можливість Частково Ні Так Так Так
залишення
відгуку
Збереження Ні Ні Так Так Так
обраних
маршрутів або
місць
Бронювання Частково Так Так Частково Так
або надсилання
заявки
Контактна Так Так Так Частково Так
форма
Арк.
ЧДТУ 262218.019 ПЗ
23
Змн. Арк. № Документа Підпис Дата
Особистий Ні Частково Так Так Так
кабінет
користувача
Продовження таблиці 1.1
Адаптація для Частково Так Так Так Так
різних
пристроїв
Локальна Так Так Частково Так Так
тематична подача
українською
мовою
Використання Не Не Так Так Так
бази даних для визначено визначено
динамічного
контенту
Розділ порад для Так Частково Так Частково Так
туристів
Простота Частково Частково Частково Частково Так
структури для
користувача-
початківця
За результатами порівняння встановлено, що всі розглянуті аналоги
мають корисні функціональні можливості для туристичної сфери. Karpaty.info
є найближчим за регіональною тематикою, оскільки містить інформацію про
відпочинок у Карпатах, туристичні об’єкти, проживання та розваги. Проте цей
ресурс більше виконує роль довідкового порталу й не має достатньо вираженої
персоналізації користувацької взаємодії.
Арк.
ЧДТУ 262218.019 ПЗ
24
Змн. Арк. № Документа Підпис Дата
Visit Ukraine має ширший сервісний характер і може бути корисним для
подорожей Україною загалом. Його перевагою є поєднання інформаційної та
організаційної складової, однак він не спеціалізується на маршрутах
Карпатами та не надає вузького функціоналу для роботи з конкретними
туристичними маршрутами цього регіону.
Tripadvisor вирізняється великою кількістю відгуків, рейтингів,
фотографій і можливістю бронювання. Ці можливості є важливими для
туристичних web-ресурсів, оскільки вони підвищують довіру користувача до
інформації. Водночас Tripadvisor є глобальною платформою, тому її структура
може бути надто широкою для користувача, який шукає локальні маршрути
Карпатського регіону.
AllTrails має сильну маршрутну складову, оскільки орієнтований на
пішохідні, велосипедні та інші маршрути активного відпочинку. Його
перевагами є карти, фільтри, фотографії та відгуки. Однак цей сервіс також є
міжнародним і не зосереджується саме на українських Карпатах, а частина
функцій може бути пов’язана з мобільним застосунком або додатковими
умовами використання.
Порівняно з розглянутими аналогами, web-ресурс «Мандрівки
Карпатами» має перевагу у поєднанні локальної тематики, простішої
структури, користувацьких функцій і адміністративного керування. Сайт
орієнтований саме на маршрути Карпатами, містить розділи з порадами,
галереєю, контактами, профілем користувача, обраними маршрутами,
бронюваннями та відгуками. Наявність адміністративної панелі дозволяє
підтримувати актуальність контенту, а використання Supabase забезпечує
зберігання й синхронізацію даних.
Таким чином, аналіз аналогів показав, що розробка web-ресурсу
«Мандрівки Карпатами» є обґрунтованою. Власна система повинна поєднати
сильні сторони існуючих рішень: регіональну спрямованість Karpaty.info,
сервісний підхід Visit Ukraine, відгуки та візуальне наповнення Tripadvisor,
маршрутну логіку AllTrails. Водночас розроблюваний ресурс має усунути
Арк.
ЧДТУ 262218.019 ПЗ
25
Змн. Арк. № Документа Підпис Дата
окремі недоліки аналогів, зокрема розрізненість інформації, недостатню
персоналізацію, складність структури та відсутність адміністративного
керування контентом.
Висновки до розділу 1
У першому розділі кваліфікаційної роботи було розглянуто предметну
область туристичних інформаційних web-ресурсів і визначено їх основне
призначення. Було встановлено, що такі системи забезпечують користувачам
доступ до інформації про туристичні маршрути, природні об’єкти, поради,
фотографії, відгуки та додаткові сервіси для планування подорожей.
Також було обґрунтовано доцільність розробки інформаційного web-
ресурсу «Мандрівки Карпатами». Визначено, що потреба у такій системі
зумовлена популярністю Карпатського регіону, розрізненістю туристичної
інформації на різних ресурсах і необхідністю створення єдиного зручного
середовища для пошуку маршрутів, перегляду порад, збереження обраних
напрямків, надсилання заявок і взаємодії з адміністрацією сайту.
У процесі аналізу було визначено основні чинники, які впливають на
розробку туристичного web-ресурсу. До них належать цільова аудиторія,
структура сайту, якість користувацького інтерфейсу, адаптивність, організація
бази даних, безпека, швидкодія, зручність адміністрування та актуальність
інформаційного наповнення. Було встановлено, що створення такого ресурсу
потребує комплексного підходу, який охоплює технічні, функціональні,
дизайнерські та організаційні аспекти.
У межах аналітичного огляду було досліджено існуючі туристичні web-
ресурси: Karpaty.info, Visit Ukraine, Tripadvisor та AllTrails. Для порівняння
було використано об’єктивні критерії, зокрема наявність каталогу маршрутів,
пошуку, фільтрації, карток локацій, детального опису, фотографій, відгуків,
обраного, бронювання, контактної форми, особистого кабінету,
адміністративної панелі, адаптивності та орієнтації на Карпатський регіон.
Арк.
ЧДТУ 262218.019 ПЗ
26
Змн. Арк. № Документа Підпис Дата
За результатами порівняння встановлено, що кожен із розглянутих
аналогів має власні переваги. Karpaty.info вирізняється регіональною
спрямованістю на Карпати, Visit Ukraine має сервісний підхід до подорожей
Україною, Tripadvisor забезпечує велику кількість відгуків і фотографій, а
AllTrails має розвинену маршрутну логіку для активного відпочинку. Водночас
аналіз показав, що ці ресурси не повністю поєднують локальну тематику
Карпат, просту структуру, профіль користувача, обране, бронювання, відгуки
та адміністративне керування контентом.
Отже, результати першого розділу дозволили сформувати основні
напрями подальшої розробки web-ресурсу «Мандрівки Карпатами». У процесі
аналізу предметної області було визначено, що сучасні туристичні web-
ресурси мають забезпечувати не лише подання загальної інформації про
маршрути, а й зручну взаємодію користувача із сервісом. Особливо важливими
є швидкий пошук потрібної інформації, зрозуміла структура сторінок,
адаптивність інтерфейсу, наявність візуального контенту, можливість
збереження обраних маршрутів і взаємодія з адміністрацією сайту.
На основі проведеного аналізу доцільно реалізувати каталог
туристичних маршрутів, систему пошуку та фільтрації, картки маршрутів із
детальним описом, галерею зображень, розділ порад, контактну форму,
особистий кабінет користувача, роботу з обраними маршрутами,
бронюваннями та відгуками. Окрему увагу необхідно приділити
адміністративній панелі, яка забезпечуватиме керування контентом, перегляд
повідомлень користувачів, опрацювання заявок і підтримку актуальності
інформації на сайті.
Отримані результати є основою для подальшого обґрунтування
технічного завдання та розробки структури інформаційної системи. Вони
дають змогу визначити функціональні вимоги до майбутнього web-ресурсу,
сформувати логіку взаємодії користувача із сайтом, обрати необхідні засоби
реалізації та перейти до етапу проєктування основних сторінок, модулів і бази
даних web-сайту «Мандрівки Карпатами».
Арк.
ЧДТУ 262218.019 ПЗ
27
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1. Призначення інформаційного web-ресурсу «Мандрівки
Карпатами»
Розробка інформаційного web-ресурсу «Мандрівки Карпатами»
спрямована на створення сучасного цифрового середовища для пошуку
туристичних маршрутів, перегляду інформації про подорожі Карпатським
регіоном, ознайомлення з порадами для мандрівників, перегляду
фотоматеріалів, надсилання заявок і взаємодії користувачів із ресурсом. Такий
сайт має забезпечувати користувачам зручний доступ до структурованої
туристичної інформації та допомагати планувати подорожі відповідно до
власних потреб, рівня підготовки та інтересів.
Основне призначення web-ресурсу «Мандрівки Карпатами» полягає в
інформаційній підтримці користувачів, які цікавляться подорожами
Карпатами. Сайт орієнтований на туристів, які хочуть швидко знайти маршрут,
переглянути його основні характеристики, ознайомитися з описом,
переглянути фотографії, додати маршрут до обраного, залишити відгук або
надіслати заявку на бронювання. Завдяки цьому ресурс виконує не лише
довідкову, а й сервісну функцію.
Актуальність створення такого web-ресурсу підтверджується
загальними тенденціями розвитку туристичної сфери. За даними UN Tourism,
у 2024 році міжнародний туризм фактично відновився до рівня, що передував
пандемії, а кількість міжнародних туристичних прибуттів становила близько
1,4 млрд осіб [11]. Це свідчить про зростання попиту на подорожі та
необхідність розвитку цифрових інструментів, які допомагають користувачам
планувати поїздки. В Україні також приділяється увага формуванню сучасної,
сталої та діджиталізованої системи туризму, що підтверджує важливість
цифрових сервісів для туристичної галузі [12].
Арк.
ЧДТУ 262218.019 ПЗ
28
Змн. Арк. № Документа Підпис Дата
Особливістю розроблюваного ресурсу є поєднання кількох
функціональних модулів. До них належать головна сторінка, каталог
маршрутів, сторінка порад, галерея, контактна сторінка, профіль користувача
та адміністративна панель. Окремо реалізуються функції роботи з
бронюваннями, відгуками, обраними маршрутами та повідомленнями
користувачів. Така структура дає змогу створити не просто інформаційний
сайт, а повноцінну web-орієнтовану систему для взаємодії користувачів із
туристичним контентом.
Web-ресурс «Мандрівки Карпатами» може бути корисним для
користувачів, які вперше планують подорож до Карпат, для досвідчених
туристів, які шукають нові маршрути, а також для людей, які хочуть отримати
загальне уявлення про туристичні можливості регіону. Наявність маршрутних
карток, порад, галереї та профілю користувача дозволяє зробити процес
підготовки до подорожі більш зручним і впорядкованим.
Цінність web-ресурсу «Мандрівки Карпатами» полягає в таких
можливостях:
– Надання доступу до туристичних маршрутів Карпатського регіону.
– Перегляд карток маршрутів із коротким описом, характеристиками та
візуальним наповненням.
– Можливість пошуку та фільтрації маршрутів за визначеними
параметрами.
– Перегляд порад для туристів щодо підготовки до подорожей.
– Доступ до галереї фотографій туристичних місць.
– Можливість надсилання повідомлень через контактну форму.
– Збереження обраних маршрутів у профілі користувача.
– Робота з бронюваннями та заявками.
– Залишення та перегляд відгуків користувачів.
– Адміністрування маршрутів, порад, повідомлень, бронювань та
іншого контенту.
Арк.
ЧДТУ 262218.019 ПЗ
29
Змн. Арк. № Документа Підпис Дата
Отже, інформаційний web-ресурс «Мандрівки Карпатами» є
інструментом для систематизації туристичної інформації, покращення
зручності планування подорожей і забезпечення взаємодії між користувачами
та адміністрацією сайту.
2.2. Вимоги до дизайну інформаційного web-ресурсу «Мандрівки
Карпатами»
Дизайн туристичного web-ресурсу має важливе значення, оскільки саме
інтерфейс формує перше враження користувача та впливає на зручність
подальшої роботи із сайтом. Для туристичної тематики недостатньо лише
привабливого зовнішнього вигляду. Сайт повинен бути зрозумілим, логічно
структурованим, адаптивним, візуально приємним і зручним для швидкого
пошуку інформації.
Web-ресурс «Мандрівки Карпатами» доцільно оформлювати у стилі,
який відповідає тематиці природи, гірських маршрутів і активного відпочинку.
Для цього можуть використовуватися природні кольори, які асоціюються з
Карпатами: відтінки зеленого, білого, блакитного, сірого та коричневого.
Важливу роль відіграють якісні фотографії гір, лісів, водоспадів, озер і
туристичних маршрутів. Вони не лише прикрашають сторінки, а й
допомагають користувачеві краще оцінити атмосферу майбутньої подорожі.
Основними вимогами до дизайну web-ресурсу «Мандрівки Карпатами» є:
Зрозуміла структура інтерфейсу. Користувач повинен швидко
орієнтуватися в основних розділах сайту: «Головна», «Маршрути», «Поради»,
«Галерея», «Контакти», «Профіль».
Єдиний візуальний стиль. Усі сторінки повинні мати узгоджене
оформлення, однакову логіку розміщення елементів, спільну кольорову гаму
та подібний стиль кнопок, карток і форм.
Арк.
ЧДТУ 262218.019 ПЗ
30
Змн. Арк. № Документа Підпис Дата
Адаптивність. Сайт повинен коректно відображатися на комп’ютерах,
ноутбуках, планшетах і смартфонах, оскільки туристи часто користуються
мобільними пристроями під час планування або здійснення подорожі.
Читабельність тексту. Опис маршрутів, поради, контактна інформація та
інші текстові матеріали повинні бути оформлені достатньо великим шрифтом,
з правильними відступами й контрастом.
Візуальне виділення ключових дій. Кнопки «Детальніше», «Додати в
обране», «Забронювати», «Надіслати» мають бути помітними та розміщеними
у логічних місцях.
Зручність роботи з картками маршрутів. Картки повинні містити
коротку, але достатню інформацію, щоб користувач міг швидко оцінити
маршрут.
Використання якісного візуального контенту. Фотографії мають
відповідати тематиці сайту, бути чіткими та не перевантажувати сторінку.
Доступність інтерфейсу. Елементи керування повинні бути зрозумілими
для різних категорій користувачів, зокрема для тих, хто не має значного досвіду
роботи з туристичними сервісами.
Мінімізація зайвих елементів. Інтерфейс не повинен бути
перевантаженим, оскільки це ускладнює пошук потрібної інформації.
Логічне розміщення навігації. Основне меню має бути доступним з усіх
ключових сторінок сайту.
Таким чином, дизайн web-ресурсу «Мандрівки Карпатами» повинен
забезпечувати не лише естетичну привабливість, а й ефективну взаємодію
користувача з туристичними маршрутами, порадами, галереєю, формами
зв’язку та особистим профілем.
2.3. Структура сторінок інформаційного web-ресурсу «Мандрівки
Карпатами»
Арк.
ЧДТУ 262218.019 ПЗ
31
Змн. Арк. № Документа Підпис Дата
Структура web-сайту визначає логіку розміщення сторінок,
функціональних модулів і зв’язків між ними. Для туристичного ресурсу
важливо, щоб користувач міг швидко перейти від загальної інформації до
перегляду маршрутів, порад, фотографій, контактів або особистого профілю.
Зручна структура скорочує кількість зайвих дій і підвищує ефективність
використання сайту.
Основна структура web-ресурсу «Мандрівки Карпатами» включає такі
розділи: «Головна», «Маршрути», «Поради», «Галерея», «Контакти»,
«Профіль». Також у системі передбачено адміністративну панель для
керування інформаційним наповненням сайту.
Головна сторінка виконує ознайомчу та презентаційну функцію. Вона
знайомить користувача з призначенням ресурсу, коротко описує переваги
подорожей Карпатами, містить візуальний блок із тематичним зображенням,
переходи до маршрутів, порад і галереї. На головній сторінці доцільно
розміщувати короткий опис сайту, переваги використання ресурсу, популярні
маршрути або заклик до перегляду каталогу.
Сторінка «Маршрути» є одним із головних функціональних розділів
сайту. Вона містить каталог туристичних маршрутів у вигляді карток. Кожна
картка може містити назву маршруту, короткий опис, зображення, рівень
складності, тривалість, орієнтовну вартість, сезонність або інші
характеристики. Наявність такого каталогу дозволяє користувачеві швидко
порівнювати маршрути та обирати найбільш відповідний варіант.
Сторінка детального перегляду маршруту призначена для розширеного
ознайомлення з обраним маршрутом. На ній може розміщуватися повний опис,
фотографії, рекомендації, основні характеристики, кнопка додавання до
обраного, можливість бронювання або залишення відгуку. Така сторінка є
важливою, оскільки саме на ній користувач приймає рішення щодо подальшої
взаємодії з маршрутом.
Сторінка «Поради» містить інформаційні матеріали для мандрівників. У
цьому розділі можуть бути розміщені рекомендації щодо підготовки до походу,
Арк.
ЧДТУ 262218.019 ПЗ
32
Змн. Арк. № Документа Підпис Дата
вибору спорядження, безпеки в горах, сезонних особливостей, поведінки на
маршруті та планування подорожі. Такий розділ підвищує практичну цінність
сайту, оскільки допомагає користувачам краще підготуватися до подорожі.
Сторінка «Галерея» призначена для візуального ознайомлення з
туристичними місцями Карпат. Вона містить фотокартки гір, озер, водоспадів,
лісів, маршрутів та інших природних об’єктів. Галерея допомагає створити
емоційне враження від ресурсу та може мотивувати користувача перейти до
вибору маршруту.
Сторінка «Контакти» забезпечує можливість зв’язку з адміністрацією
сайту. Вона містить контактну інформацію, форму надсилання повідомлення
та, за потреби, посилання на соціальні мережі. Наявність такої сторінки
підвищує довіру до ресурсу та дає користувачам змогу швидко отримати
відповідь на запитання.
Сторінка «Профіль» призначена для персоналізації взаємодії
користувача із сайтом. У профілі користувач може переглядати власні
бронювання, відгуки, обрані маршрути та інші персональні дані. Такий розділ
дозволяє зробити використання сайту більш зручним і організованим.
Окремим структурним елементом web-ресурсу «Мандрівки Карпатами»
є адміністративна панель. Вона призначена для керування основним
інформаційним наповненням сайту, зокрема туристичними маршрутами,
порадами, галереєю, повідомленнями від користувачів, бронюваннями та
користувацькими даними. За допомогою адміністративної панелі
адміністратор може додавати нові матеріали, редагувати наявну інформацію,
видаляти застарілі записи, переглядати звернення користувачів і контролювати
актуальність розміщеного контенту.
Наявність адміністративної панелі значно спрощує процес супроводу
web-сайту, оскільки дозволяє оновлювати дані без безпосереднього
редагування програмного коду. Це підвищує зручність експлуатації системи,
зменшує ризик технічних помилок і дає змогу оперативно реагувати на зміни,
пов’язані з туристичними маршрутами, умовами подорожей або запитами
Арк.
ЧДТУ 262218.019 ПЗ
33
Змн. Арк. № Документа Підпис Дата
користувачів. Таким чином, адміністративна панель є важливим інструментом
для підтримки стабільної роботи web-ресурсу та забезпечення його
інформаційної актуальності.
Рисунок 2.1 – Навігаційна структура web-ресурсу «Мандрівки Карпатами»
2.4. Навігація інформаційного web-ресурсу «Мандрівки Карпатами»
Навігація є одним із ключових елементів web-ресурсу, оскільки вона визначає,
наскільки швидко і зручно користувач може знаходити потрібну інформацію.
Для туристичного сайту це особливо важливо, адже користувач може шукати
маршрут, поради, фотографії, контакти або дані про власні бронювання. Якщо
навігація побудована логічно, користувач швидше переходить до потрібної дії
та менше часу витрачає на пошук інформації.
Арк.
ЧДТУ 262218.019 ПЗ
34
Змн. Арк. № Документа Підпис Дата
У web-ресурсі «Мандрівки Карпатами» основна навігація реалізується
через верхнє меню, яке містить головні розділи сайту. До нього входять
сторінки «Головна», «Маршрути», «Поради», «Галерея», «Контакти» та
«Профіль». Така структура є зрозумілою для користувача, оскільки кожен
пункт меню має конкретне призначення.
Розділ «Головна» дозволяє повернутися до стартової сторінки сайту. Він
використовується для загального ознайомлення з ресурсом, його призначенням
і основними можливостями.
Розділ «Маршрути» відкриває каталог туристичних напрямків. На цій
сторінці користувач може переглядати маршрутні картки, використовувати
пошук або фільтрацію, переходити до детальної інформації та взаємодіяти з
обраним маршрутом.
Розділ «Поради» призначений для перегляду рекомендацій, які можуть
бути корисними під час підготовки до подорожі. Цей розділ допомагає
користувачам краще орієнтуватися в питаннях спорядження, безпеки та
планування маршруту.
Розділ «Галерея» забезпечує швидкий доступ до фотографій
туристичних місць. Він виконує візуальну функцію та доповнює
інформаційний зміст сайту.
Розділ «Контакти» відкриває сторінку зі зворотним зв’язком. Через неї
користувач може надіслати повідомлення адміністрації або знайти контактну
інформацію.
Розділ «Профіль» призначений для доступу до персональної інформації
користувача. Через нього користувач може переглядати обрані маршрути,
бронювання та відгуки.
Окрім основного меню, на сайті використовуються й інші навігаційні
елементи:
Пошук маршрутів. Дає можливість швидко знайти потрібний маршрут
за назвою або ключовими словами.
Арк.
ЧДТУ 262218.019 ПЗ
35
Змн. Арк. № Документа Підпис Дата
Фільтри за параметрами. Дозволяють відібрати маршрути за складністю,
тривалістю, ціною або іншими характеристиками.
Кнопки дії. Наприклад, «Детальніше», «Додати в обране»,
«Забронювати», «Надіслати», «Зберегти».
Посилання між сторінками. Забезпечують логічний перехід від загальної
інформації до конкретних маршрутів або форм взаємодії.
Навігація в адміністративній панелі. Дозволяє адміністратору
переходити між розділами керування маршрутами, повідомленнями,
бронюваннями та іншими даними.
Грамотно побудована навігація зменшує кількість зайвих дій, покращує
зручність користування ресурсом і дозволяє користувачеві швидко перейти до
вибору маршруту, перегляду порад або взаємодії з адміністрацією сайту.
2.5. Наповнення сторінок інформаційного web-ресурсу «Мандрівки
Карпатами»
Контент туристичного web-сайту повинен бути інформативним,
структурованим, актуальним і корисним для користувача. Основне завдання
наповнення полягає в тому, щоб допомогти користувачеві зрозуміти
можливості сайту, обрати відповідний маршрут, переглянути поради, оцінити
фотографії та за потреби надіслати заявку або повідомлення.
На головній сторінці розміщується загальна інформація про ресурс
«Мандрівки Карпатами», його призначення та переваги. Ця сторінка має
зацікавити користувача та мотивувати його перейти до перегляду маршрутів.
Доцільно розміщувати на ній короткий опис проєкту, тематичні зображення,
блоки з перевагами, кнопки швидкого переходу та популярні маршрути.
На сторінці «Маршрути» подається каталог доступних туристичних
напрямків. Кожен маршрут представлений у вигляді картки, яка може містити:
– зображення маршруту;
– назву;
Арк.
ЧДТУ 262218.019 ПЗ
36
Змн. Арк. № Документа Підпис Дата
– короткий опис;
– рівень складності;
– тривалість;
– вартість;
– сезонність;
– основні характеристики;
– кнопку «Детальніше»;
– кнопку додавання до обраного;
– кнопку бронювання або надсилання заявки.
Таке наповнення дозволяє користувачеві швидко оцінити маршрут і
прийняти рішення щодо його перегляду або бронювання. Наявність пошуку та
фільтрів робить каталог більш зручним і функціональним.
На сторінці детального перегляду маршруту розміщується повна
інформація про туристичний напрям. Вона може включати розгорнутий опис
маршруту, фотографії, характеристики, поради, рекомендації щодо підготовки,
кнопку додавання в обране, форму бронювання або блок відгуків. Така
сторінка є однією з найважливіших, оскільки саме вона допомагає
користувачеві прийняти остаточне рішення.
Сторінка «Поради» містить тематичні матеріали для туристів. До таких
матеріалів можуть належати рекомендації щодо вибору спорядження,
планування маршруту, безпеки в горах, підготовки до сезонних умов,
поведінки під час походу та загальні правила відповідального туризму. Розділ
порад підвищує практичну цінність ресурсу, оскільки допомагає не лише
обрати маршрут, а й правильно підготуватися до подорожі.
Сторінка «Галерея» містить фотоматеріали, які демонструють природні
об’єкти Карпат. Фотографії є важливим елементом туристичного сайту,
оскільки вони створюють емоційне враження та допомагають користувачеві
краще уявити місцевість. Галерея може містити зображення гір, озер,
водоспадів, лісів, стежок, оглядових майданчиків та інших туристичних
локацій.
Арк.
ЧДТУ 262218.019 ПЗ
37
Змн. Арк. № Документа Підпис Дата
Сторінка «Контакти» містить контактну інформацію, форму надсилання
повідомлення та інші засоби зв’язку. Завдяки цьому користувач може швидко
звернутися до адміністрації сайту, поставити запитання, уточнити інформацію
про маршрут або залишити повідомлення.
Сторінка «Профіль» містить персональні дані користувача та
інформацію про його взаємодію із сайтом. У цьому розділі можуть
відображатися обрані маршрути, бронювання, залишені відгуки та інші
індивідуальні елементи. Наявність профілю робить використання сайту більш
персоналізованим.
В адміністративній частині сайту наповнення організоване у вигляді
таблиць, форм і панелей керування. Адміністратор може переглядати
маршрути, додавати нові записи, редагувати інформацію, обробляти
повідомлення, працювати з бронюваннями та контролювати вміст сайту.
Арк.
ЧДТУ 262218.019 ПЗ
38
Змн. Арк. № Документа Підпис Дата
Рисунок 2.2 – Модель наповнення та адміністрування web-ресурсу
«Мандрівки Карпатами»
Таким чином, наповнення web-ресурсу «Мандрівки Карпатами» охоплює як
інформаційну частину для користувачів, так і адміністративну частину для
керування туристичним контентом.
2.6. Адміністрування інформаційного web-ресурсу «Мандрівки
Карпатами»
Адміністрування web-ресурсу є важливою складовою його
функціонування, оскільки забезпечує підтримку актуальності контенту,
керування маршрутами, обробку повідомлень, контроль бронювань і роботу з
користувацькими даними. Для туристичного ресурсу адміністрування повинно
бути зручним, логічним і доступним для адміністратора без необхідності
постійного втручання у програмний код.
У web-ресурсі «Мандрівки Карпатами» передбачено окрему
адміністративну панель. Вона призначена для керування основними
інформаційними та сервісними модулями сайту. Через адміністративну панель
можна оновлювати туристичні маршрути, редагувати описи, додавати нові
матеріали, переглядати повідомлення користувачів, працювати з
бронюваннями та контролювати відгуки.
Основні функції адміністрування web-ресурсу «Мандрівки Карпатами»:
– Перегляд загальної інформації про стан сайту.
– Додавання нових туристичних маршрутів.
– Редагування інформації про наявні маршрути.
– Видалення застарілих або неактуальних маршрутів.
– Керування порадами для туристів.
– Додавання та оновлення фотографій у галереї.
– Перегляд повідомлень, надісланих через контактну форму.
– Обробка бронювань або заявок користувачів.
Арк.
ЧДТУ 262218.019 ПЗ
39
Змн. Арк. № Документа Підпис Дата
– Перегляд і контроль відгуків.
– Керування користувацькими даними.
– Підтримка актуальності інформаційного наповнення.
– Вихід з адміністративного облікового запису.
Адміністративна панель дозволяє підтримувати ресурс в актуальному
стані. Це особливо важливо для туристичного сайту, оскільки інформація про
маршрути, умови подорожей, поради та доступність окремих послуг може
змінюватися. Якщо адміністратор має зручний інструмент для оновлення
контенту, сайт може залишатися корисним для користувачів протягом
тривалого часу.
Особливе значення має робота з базою даних. У межах розроблюваного
web-ресурсу використовується Supabase, який надає можливості роботи з
PostgreSQL, автентифікацією, зберіганням файлів і синхронізацією даних у
web-додатках [4]. Це дозволяє організувати збереження маршрутів,
повідомлень, відгуків, бронювань та обраних елементів у централізованому
вигляді.
Ефективна система адміністрування дозволяє зменшити витрати часу на
супровід сайту, швидко оновлювати туристичний контент, контролювати
активність користувачів і забезпечувати стабільну роботу інформаційної
системи.
2.7. Вимоги до прототипу інформаційного web-ресурсу «Мандрівки
Карпатами»
Прототип web-ресурсу є важливим етапом розробки, оскільки дозволяє
попередньо оцінити структуру, зовнішній вигляд і функціональні можливості
майбутньої системи. Завдяки прототипуванню можна визначити, як користувач
буде взаємодіяти із сайтом, які сторінки є основними, які елементи потребують
покращення та наскільки зручною є загальна логіка роботи ресурсу.
Арк.
ЧДТУ 262218.019 ПЗ
40
Змн. Арк. № Документа Підпис Дата
Прототип web-ресурсу «Мандрівки Карпатами» повинен враховувати як
користувацьку частину, так і адміністративну панель. Це важливо, оскільки
сайт передбачає не лише перегляд туристичної інформації, а й роботу з
бронюваннями, відгуками, обраними маршрутами, повідомленнями та
адмініструванням контенту.
До прототипу web-ресурсу «Мандрівки Карпатами» висуваються такі
вимоги:
– Головна сторінка. Повинна містити основну інформацію про сайт,
його призначення, переваги та переходи до головних розділів.
– Каталог маршрутів. Має відображати список доступних туристичних
маршрутів у вигляді карток із назвою, описом, зображенням і
характеристиками.
– Пошук і фільтрація маршрутів. Користувач повинен мати можливість
швидко знаходити потрібний маршрут за назвою або параметрами.
– Сторінка детального перегляду маршруту. Повинна містити повний
опис, фотографії, характеристики, поради, відгуки та кнопки
взаємодії.
– Розділ порад. Має містити корисні рекомендації для туристів щодо
підготовки до подорожей.
– Галерея. Повинна забезпечувати перегляд фотографій туристичних
об’єктів Карпат.
– Контактна сторінка. Має містити контактну інформацію та форму
надсилання повідомлення.
– Профіль користувача. Повинен забезпечувати доступ до обраних
маршрутів, бронювань, відгуків та інших персональних даних.
– Адміністративна панель. Повинна містити інструменти для керування
маршрутами, порадами, галереєю, повідомленнями, бронюваннями
та відгуками.
– Адаптивність. Усі сторінки повинні коректно відображатися на різних
типах пристроїв.
Арк.
ЧДТУ 262218.019 ПЗ
41
Змн. Арк. № Документа Підпис Дата
– Єдиний стиль оформлення. Користувацька та адміністративна
частини повинні мати узгоджену логіку інтерфейсу.
– Безпека даних. Система повинна передбачати захищений доступ до
профілю користувача та адміністративної панелі.
– Зручність взаємодії. Кнопки, форми, картки, фільтри та таблиці
мають бути зрозумілими й логічно розташованими.
– Можливість подальшого розширення. Прототип повинен передбачати
додавання нових маршрутів, сервісів, інтеграцій та функціональних
модулів.
Таким чином, прототип web-ресурсу «Мандрівки Карпатами» дозволяє
оцінити майбутню структуру системи, перевірити зручність навігації та
сформувати основу для подальшої програмної реалізації.
2.8. Техніко-економічне обґрунтування доцільності розробки
інформаційного web-ресурсу «Мандрівки Карпатами»
Техніко-економічне обґрунтування є важливим етапом під час розробки web-
орієнтованої інформаційної системи, оскільки дозволяє оцінити доцільність
створення ресурсу з погляду технічної реалізації, трудомісткості, очікуваної
користі, витрат часу та перспектив подальшого розвитку. Для туристичного
web-ресурсу таке обґрунтування має особливе значення, оскільки система
поєднує інформаційний контент, користувацькі сервіси, базу даних та
адміністративне керування.
Розробка web-ресурсу «Мандрівки Карпатами» передбачає створення
сучасної туристичної платформи, яка забезпечує користувачам доступ до
маршрутів, порад, галереї, контактної форми, профілю, бронювань, відгуків та
обраних маршрутів. Саме тому під час оцінювання доцільності розробки
необхідно враховувати не лише створення інтерфейсу, а й реалізацію окремих
функціональних модулів, налаштування бази даних, тестування, наповнення
контентом і подальшу підтримку ресурсу.
Арк.
ЧДТУ 262218.019 ПЗ
42
Змн. Арк. № Документа Підпис Дата
З технічної точки зору доцільність створення web-ресурсу полягає в
можливості реалізації повноцінної інформаційної системи засобами сучасних
web-технологій. Такі технології дозволяють створити адаптивний, швидкий і
зручний ресурс, який працює у браузері та не потребує встановлення
додаткового програмного забезпечення. Це важливо для туристів, які можуть
користуватися сайтом як з персонального комп’ютера, так і зі смартфона.
З економічної точки зору web-ресурс може бути корисним завдяки
багаторазовому використанню, можливості оновлення контенту, поступовому
розширенню функціоналу та зменшенню потреби в ручній обробці частини
інформаційних запитів. Туристична сфера залишається важливою складовою
економіки, а цифрові сервіси дають змогу підвищити доступність туристичної
інформації, покращити комунікацію з користувачами та спростити процес
організації подорожей [13].
Розробка web-ресурсу «Мандрівки Карпатами» виконується послідовно та
охоплює кілька взаємопов’язаних етапів. На першому етапі здійснюється
аналіз предметної області, під час якого визначаються особливості
туристичних інформаційних систем, потреби потенційних користувачів,
основні функції майбутнього сайту та проблеми, які повинна вирішувати
система. Такий аналіз дає змогу сформувати загальне бачення web-ресурсу та
визначити його місце серед аналогічних рішень.
Наступним етапом є формування функціональних і нефункціональних
вимог до системи. До функціональних вимог належать перегляд туристичних
маршрутів, робота з картками маршрутів, пошук і фільтрація, перегляд порад,
галереї, надсилання повідомлень, збереження обраних маршрутів, робота з
бронюваннями та відгуками. До нефункціональних вимог належать
адаптивність, зручність інтерфейсу, швидкодія, безпека даних, стабільність
роботи та можливість подальшого розширення.
Після визначення вимог виконується проєктування структури сайту. На
цьому етапі визначаються основні сторінки ресурсу, логіка навігації та
взаємозв’язки між окремими модулями. Для web-ресурсу «Мандрівки
Арк.
ЧДТУ 262218.019 ПЗ
43
Змн. Арк. № Документа Підпис Дата
Карпатами» передбачено такі основні розділи: «Головна», «Маршрути»,
«Поради», «Галерея», «Контакти», «Профіль» та адміністративна панель. Така
структура дозволяє логічно розподілити інформацію та забезпечити зручний
доступ до основних функцій сайту.
Окремим етапом є розробка дизайну інтерфейсу. Для туристичного
ресурсу важливо створити візуально привабливий вигляд, який відповідає
тематиці Карпат, природи та активного відпочинку. Під час розробки дизайну
враховуються кольорова гама, типографіка, розміщення карток маршрутів,
вигляд кнопок, форм, навігаційних елементів і блоків із фотографіями.
Важливо, щоб інтерфейс був не лише естетично привабливим, а й зручним для
користувача.
Після підготовки структури та дизайну виконується реалізація
користувацької частини сайту. У межах цього етапу створюються основні
сторінки web-ресурсу, зокрема головна сторінка, каталог маршрутів, сторінка
порад, галерея, контактна сторінка та профіль користувача. Особлива увага
приділяється каталогу маршрутів, оскільки саме він є одним із ключових
функціональних розділів системи. Картки маршрутів повинні містити стислий
опис, зображення, основні характеристики та кнопки взаємодії.
Важливим етапом є реалізація профілю користувача. Цей розділ
забезпечує персоналізовану взаємодію із сайтом, оскільки користувач може
переглядати власні обрані маршрути, бронювання та відгуки. Наявність
профілю підвищує зручність використання ресурсу та дозволяє користувачеві
повертатися до раніше збереженої інформації.
Окреме значення має інтеграція із Supabase. Цей сервіс використовується
для зберігання та синхронізації даних, зокрема інформації про маршрути,
повідомлення, відгуки, бронювання та обрані елементи. Supabase надає
можливості роботи з базою даних PostgreSQL, автентифікацією користувачів і
хмарним зберіганням даних, що робить його зручним рішенням для web-
додатків [4].
Арк.
ЧДТУ 262218.019 ПЗ
44
Змн. Арк. № Документа Підпис Дата
Також у межах розробки створюється адміністративна панель. Вона дає
змогу адміністратору керувати маршрутами, порадами, галереєю,
повідомленнями, бронюваннями та відгуками. Наявність такого інструменту
значно спрощує подальший супровід сайту, оскільки оновлення інформації
може виконуватися через зручний інтерфейс без прямого редагування
програмного коду.
Після реалізації основних модулів проводиться тестування web-ресурсу.
Перевіряється коректність роботи сторінок, кнопок, форм, пошуку, фільтрації,
навігації, адаптивності та взаємодії з базою даних. Тестування дозволяє
виявити помилки, оцінити зручність користування сайтом і перевірити
відповідність реалізованої системи поставленим вимогам.
Важливим елементом технічного обґрунтування є визначення маршрутів
web-сайту та логіки обробки даних. У межах користувацької частини web-
ресурсу передбачено такі основні сторінкові маршрути: головна сторінка «/»,
сторінка маршрутів «/routes», сторінка детального перегляду маршруту
«/routes/», сторінка порад «/tips», галерея «/gallery», контактна сторінка
«/contacts», профіль користувача «/profile» та сторінки адміністративної панелі
«/admin». Такий підхід забезпечує зрозумілу структуру переходів і дозволяє
користувачам швидко знаходити потрібні розділи.
Для взаємодії з даними можуть використовуватися окремі API-маршрути
або запити до Supabase. Зокрема, для роботи з туристичними маршрутами
доцільно передбачити отримання списку маршрутів, отримання детальної
інформації про конкретний маршрут, додавання нового маршруту, редагування
та видалення маршруту. Для користувацької взаємодії можуть бути
передбачені запити для створення бронювання, додавання маршруту до
обраного, залишення відгуку та надсилання повідомлення через контактну
форму.
Узагальнено логіку API-маршрутів можна описати так: маршрут
«/api/routes» відповідає за отримання списку туристичних маршрутів;
«/api/routes/» — за отримання детальної інформації про обраний маршрут;
Арк.
ЧДТУ 262218.019 ПЗ
45
Змн. Арк. № Документа Підпис Дата
«/api/bookings» — за створення та перегляд бронювань; «/api/reviews» — за
роботу з відгуками; «/api/favorites» — за додавання та видалення обраних
маршрутів; «/api/contact» — за надсилання повідомлень із контактної форми;
«/api/admin/routes» — за адміністративне керування маршрутами. У разі
використання Supabase частина таких операцій може виконуватися не через
окремі серверні API-маршрути, а через клієнтські запити до відповідних
таблиць бази даних.
Наявність чіткої системи маршрутів і запитів до бази даних підвищує
структурованість розробки та спрощує подальше масштабування web-ресурсу.
У майбутньому до системи можна додати нові маршрути для інтерактивної
карти, погодного сервісу, онлайн-оплати, email-сповіщень або персональних
рекомендацій.
Окремою перевагою розробленого web-ресурсу є можливість
подальшого розвитку. У майбутньому сайт «Мандрівки Карпатами» можна
доповнити інтерактивною картою маршрутів, погодним віджетом, системою
персональних рекомендацій, онлайн-оплатою, email-сповіщеннями, рейтингом
маршрутів і розширеною статистикою для адміністратора. Це дозволяє
розглядати проєкт не лише як дипломну розробку, а й як основу для реального
туристичного web-сервісу.
До можливих напрямів подальшого розвитку web-ресурсу належать
додавання нових туристичних маршрутів, розширення системи фільтрації,
інтеграція інтерактивної карти, підключення погодного сервісу, впровадження
онлайн-оплати бронювань, додавання системи персональних рекомендацій,
розширення профілю користувача, впровадження email-сповіщень, додавання
рейтингу маршрутів, покращення адміністративної статистики та інтеграція з
соціальними мережами.
З технічної точки зору web-ресурс є придатним до масштабування,
оскільки його структура передбачає окремі функціональні модулі: маршрути,
поради, галерея, контакти, профіль, бронювання, відгуки, обране та
Арк.
ЧДТУ 262218.019 ПЗ
46
Змн. Арк. № Документа Підпис Дата
адміністративна панель. Такий модульний підхід дозволяє доповнювати
систему новими можливостями без повної зміни її архітектури.
З практичної точки зору розроблений ресурс може використовуватися як
демонстраційна туристична платформа, інформаційний сайт для популяризації
подорожей Карпатами або основа для подальшого комерційного проєкту. Його
використання дозволяє систематизувати туристичну інформацію, надати
користувачам зручні інструменти для вибору маршрутів і забезпечити
адміністраторам можливість керувати контентом.
Отже, розробка інформаційного web-ресурсу «Мандрівки Карпатами» є
технічно можливою, економічно обґрунтованою та практично доцільною.
Створений ресурс може використовуватися для інформаційної підтримки
туристів, пошуку маршрутів, перегляду порад, роботи з бронюваннями,
відгуками та обраними маршрутами. Наявність адміністративної панелі,
профілю користувача, каталогу маршрутів і бази даних забезпечує
функціональну завершеність системи, а можливість подальшого розширення
підвищує її цінність і перспективність.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи було розглянуто призначення
інформаційного web-ресурсу «Мандрівки Карпатами», визначено його основні
функції та роль у підтримці планування туристичних подорожей Карпатським
регіоном. Було встановлено, що розроблюваний ресурс має не лише надавати
користувачам доступ до описів маршрутів, а й створювати зручне середовище
для перегляду порад, фотографій, збереження обраних напрямків, надсилання
заявок, залишення відгуків і взаємодії з адміністрацією сайту.
У процесі аналізу було сформовано вимоги до дизайну, структури
сторінок, навігації, наповнення, адміністрування та прототипу web-ресурсу.
Особливу увагу було приділено зручності користувацького інтерфейсу,
оскільки для туристичного сайту важливо забезпечити швидкий доступ до
Арк.
ЧДТУ 262218.019 ПЗ
47
Змн. Арк. № Документа Підпис Дата
маршрутів, порад, галереї, контактів і профілю користувача. Визначено, що
дизайн ресурсу має бути сучасним, адаптивним, візуально привабливим і
водночас не перевантаженим зайвими елементами.
Під час розробки структури сайту було враховано фактичну реалізацію
web-ресурсу «Мандрівки Карпатами», яка включає основні розділи «Головна»,
«Маршрути», «Поради», «Галерея», «Контакти» та «Профіль». Кожен із цих
розділів виконує окрему функцію в межах туристичної інформаційної системи.
Головна сторінка знайомить користувача з ресурсом, розділ «Маршрути»
забезпечує доступ до туристичних напрямків, «Поради» містять рекомендації
для мандрівників, «Галерея» надає візуальне представлення локацій,
«Контакти» забезпечують зворотний зв’язок, а «Профіль» призначений для
персоналізованої роботи користувача із сайтом.
Також було описано каталог маршрутів, який містить картки
туристичних напрямків, пошук і фільтрацію. Наявність таких елементів значно
покращує зручність користування сайтом, оскільки користувач може швидко
знайти маршрут відповідно до власних інтересів, рівня підготовки та умов
подорожі. Окремо було розглянуто сторінку детального перегляду маршруту,
де розміщується повний опис, фотографії, характеристики, поради, відгуки та
кнопки взаємодії. Така структура сприяє більш усвідомленому вибору
маршруту.
Важливою складовою web-ресурсу є використання Supabase для зберігання та
синхронізації даних. Завдяки цьому система може працювати з маршрутами,
повідомленнями, бронюваннями, відгуками та обраними елементами. Це
забезпечує централізоване зберігання інформації та створює основу для
подальшого масштабування ресурсу.
Окрему увагу у другому розділі було приділено адміністративній частині
web-сайту. Вона забезпечує можливість керування маршрутами, порадами,
галереєю, повідомленнями, бронюваннями та відгуками. Наявність
адміністративної панелі є важливою перевагою розробленого ресурсу,
Арк.
ЧДТУ 262218.019 ПЗ
48
Змн. Арк. № Документа Підпис Дата
оскільки вона дозволяє підтримувати сайт в актуальному стані без
необхідності постійного внесення змін безпосередньо в програмний код.
Також було обґрунтовано доцільність створення такого сайту з технічної
та економічної точок зору. З технічної точки зору, реалізація web-ресурсу
«Мандрівки Карпатами» є доцільною, оскільки сучасні web-технології
дозволяють створити адаптивний, швидкий і зручний ресурс із можливістю
подальшого розширення. З економічної точки зору, розроблений сайт може
використовуватися багаторазово, доповнюватися новими маршрутами та
поступово масштабуватися відповідно до потреб користувачів.
Проведений аналіз дозволив сформувати основу для подальшої
реалізації web-ресурсу «Мандрівки Карпатами» та визначити ключові напрями
його розвитку. У межах другого розділу було уточнено структуру майбутнього
сайту, його основні функціональні можливості, особливості навігації, логіку
взаємодії користувача з ресурсом, а також роль адміністративної панелі в
процесі керування інформаційним наповненням. Це дало змогу сформувати
цілісне уявлення про web-систему як з боку звичайного користувача, так і з
боку адміністратора.
У майбутньому ресурс може бути доповнений інтерактивною картою
туристичних маршрутів, погодним віджетом, системою персональних
рекомендацій, онлайн-оплатою, email-сповіщеннями та розширеною
статистикою для адміністратора. Такі можливості дозволять підвищити
зручність користування сайтом, зробити процес планування подорожей більш
інформативним і персоналізованим, а також забезпечити ефективніше
адміністрування ресурсу.
Отже, результати другого розділу створюють необхідне підґрунтя для
подальшої програмної реалізації, тестування та вдосконалення
інформаційного web-ресурсу «Мандрівки Карпатами». Сформовані проєктні
рішення можуть бути використані під час розробки основних сторінок сайту,
реалізації функціональних модулів, налаштування бази даних і перевірки
працездатності системи.
Арк.
ЧДТУ 262218.019 ПЗ
49
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 3. РОЗРОБКА WEB-САЙТУ
3.1. Обґрунтування вибору інструментальних засобів розробки
Розробка інформаційного web-ресурсу «Мандрівки Карпатами»
потребувала вибору таких програмних засобів, які забезпечують зручну
реалізацію інтерфейсу, стабільну роботу з даними, швидке розгортання
проєкту та можливість подальшого розширення функціональності. Оскільки
сайт орієнтований на туристичну тематику, важливими були не лише технічні
характеристики, а й можливість створення привабливого, адаптивного та
зрозумілого користувацького інтерфейсу.
Під час вибору технологій враховувалися такі критерії: підтримка
компонентної побудови інтерфейсу, швидкість розробки, зручність оновлення
окремих модулів, можливість інтеграції з базою даних, простота розгортання
у мережі Інтернет, підтримка адаптивного дизайну, стабільність роботи та
придатність до подальшого масштабування. Також важливо було обрати такі
інструменти, які дозволяють ефективно реалізувати як користувацьку частину
сайту, так і адміністративну панель.
Основним середовищем розробки було обрано Visual Studio Code. Це
середовище є зручним для створення web-застосунків, оскільки підтримує
роботу з HTML, CSS, JavaScript, TypeScript та сучасними frontend-
бібліотеками. Завдяки розширенням Visual Studio Code спрощується
форматування коду, перевірка синтаксису, робота з Git, пошук помилок і
організація структури проєкту. Для дипломного web-проєкту це є важливим,
оскільки розробка містить багато окремих компонентів, сторінок і
функціональних блоків.
Для реалізації інтерфейсу використано бібліотеку React. Її перевагою є
компонентний підхід, за якого сторінки сайту формуються з окремих
незалежних елементів. У межах web-ресурсу «Мандрівки Карпатами» такими
компонентами є навігаційне меню, картки маршрутів, блоки порад, галерея,
Арк.
ЧДТУ 262218.019 ПЗ
50
Змн. Арк. № Документа Підпис Дата
форми введення, елементи профілю користувача та адміністративної панелі.
Завдяки цьому окремі частини інтерфейсу можна повторно використовувати,
змінювати та розширювати без повної перебудови всієї системи. Компонентна
модель React описується в офіційній документації як основа створення
користувацьких інтерфейсів [14].
Для локальної розробки та збирання проєкту використано Vite. Цей
інструмент забезпечує швидкий запуск проєкту, миттєве оновлення змін під
час редагування коду та оптимізоване формування фінальної версії сайту.
Використання Vite дозволило прискорити процес розробки, оскільки зміни в
інтерфейсі відображаються без тривалого перезавантаження середовища. В
офіційній документації Vite зазначено, що цей інструмент орієнтований на
швидку розробку сучасних web-застосунків [15].
Для зберігання та синхронізації даних використано Supabase. Цей сервіс
надає можливість працювати з базою даних PostgreSQL, автентифікацією
користувачів, хмарним зберіганням файлів і realtime-оновленнями. У межах
розробленого ресурсу Supabase використовується для збереження маршрутів,
порад, повідомлень, бронювань, відгуків, обраних маршрутів та інформації
про користувачів. Такий підхід дозволяє відокремити дані від інтерфейсу та
забезпечити централізоване керування інформацією. Офіційна документація
Supabase описує платформу як набір backend-інструментів, що включає
Postgres, Auth, Storage та інші сервіси для web-застосунків [4].
Для розміщення сайту в мережі Інтернет використано платформу Vercel.
Вона дає змогу швидко публікувати frontend-проєкти та оновлювати їх після
внесення змін до репозиторію. Vercel підтримує автоматизоване розгортання,
що є зручним для дипломного проєкту, оскільки дозволяє швидко отримати
публічне посилання на сайт і перевіряти його роботу в реальних умовах. У
документації Vercel зазначено, що платформа підтримує розгортання
застосунків із Git-репозиторіїв та командного рядка [16].
Крім основних технологій, під час розробки враховувалися вимоги до
адаптивності, доступності, безпеки та продуктивності. Сайт повинен коректно
Арк.
ЧДТУ 262218.019 ПЗ
51
Змн. Арк. № Документа Підпис Дата
працювати на комп’ютерах, ноутбуках, планшетах і смартфонах. Це особливо
важливо для туристичного ресурсу, адже користувачі можуть переглядати
маршрути не лише вдома, а й під час планування поїздки або перебування в
дорозі. Для оцінювання безпеки web-застосунків доцільно орієнтуватися на
рекомендації OWASP Top 10, які описують найпоширеніші ризики для web-
систем [17]. Для оцінювання продуктивності можна враховувати підхід Core
Web Vitals, що охоплює показники завантаження, інтерактивності та
стабільності відображення сторінок [18].
Отже, обраний стек технологій є доцільним для реалізації
інформаційного web-ресурсу «Мандрівки Карпатами». Поєднання React, Vite,
Supabase, Vercel і Visual Studio Code дозволяє створити адаптивний,
функціональний і масштабований сайт, який поєднує туристичний каталог,
інформаційні матеріали, користувацький профіль, форми взаємодії та
адміністративне керування.
Рисунок 3.1 – Структура проєкту «Мандрівки Карпатами» у середовищі
Visual Studio Code
Арк.
ЧДТУ 262218.019 ПЗ
52
Змн. Арк. № Документа Підпис Дата
3.2. Опис програмної реалізації web-ресурсу «Мандрівки
Карпатами»
Web-ресурс «Мандрівки Карпатами» реалізовано як інформаційну
систему туристичного призначення, яка надає користувачам доступ до
маршрутів Карпатського регіону, порад для мандрівників, галереї фотографій,
контактної форми, особистого профілю та адміністративного керування.
Основна ідея сайту полягає в тому, щоб об’єднати в одному ресурсі
інформаційний, сервісний та користувацький функціонал, необхідний для
планування подорожей.
Користувацький інтерфейс побудований за принципом простої навігації.
У верхньому меню розміщено основні розділи: «Головна», «Маршрути»,
«Поради», «Галерея», «Контакти» та «Профіль». Така структура дозволяє
користувачеві швидко перейти до потрібного розділу без зайвого пошуку.
Кожна сторінка має окреме функціональне призначення, що робить роботу із
сайтом зрозумілою навіть для користувачів, які вперше відкрили ресурс.
Головна сторінка web-ресурсу «Мандрівки Карпатами» виконує роль
стартового інформаційного центру та є першою сторінкою, з якою взаємодіє
користувач після переходу на сайт. Вона має ознайомити відвідувача з
тематикою ресурсу, коротко пояснити його призначення та зацікавити
подальшим переглядом туристичних маршрутів. Для цього на сторінці
розміщено великий візуальний блок із тематичним зображенням Карпат,
короткий опис можливостей сайту, а також елементи, які підкреслюють
переваги використання ресурсу для планування подорожей.
До основних складових головної сторінки належать статистичні
переваги, блок популярних маршрутів, погодний блок, відгуки туристів і
заклик до бронювання. Статистичні показники допомагають підвищити довіру
користувача до ресурсу, популярні маршрути дають змогу швидко перейти до
перегляду найцікавіших напрямків, а погодний блок є корисним елементом для
попереднього планування поїздки. Відгуки туристів створюють додаткове
Арк.
ЧДТУ 262218.019 ПЗ
53
Змн. Арк. № Документа Підпис Дата
уявлення про якість запропонованих маршрутів, а заклик до бронювання
спрямовує користувача до виконання цільової дії.
Рисунок 3.2 – Головна сторінка web-ресурсу «Мандрівки Карпатами»
Сторінка «Маршрути» є одним із центральних модулів сайту. Вона
містить каталог туристичних напрямків у вигляді карток. Кожна картка має
зображення, назву маршруту, короткий опис, рівень складності, рейтинг,
тривалість, відстань, вартість та елементи взаємодії. Такий формат подання
інформації є зручним, оскільки користувач може швидко оцінити кілька
маршрутів і обрати той, який найкраще відповідає його інтересам.
Для покращення роботи з каталогом реалізовано фільтрацію маршрутів.
Користувач може відбирати маршрути за складністю та сезоном. Це дозволяє
швидше знайти потрібний варіант, особливо якщо кількість маршрутів у
системі збільшується. Наприклад, турист-початківець може обрати легкий
маршрут, а більш досвідчений користувач — складніший напрям із більшою
тривалістю або відстанню.
Арк.
ЧДТУ 262218.019 ПЗ
54
Змн. Арк. № Документа Підпис Дата
Рисунок 3.3 – Каталог маршрутів web-ресурсу «Мандрівки Карпатами»
Сторінка «Поради» призначена для інформаційної підтримки
користувачів web-ресурсу «Мандрівки Карпатами». Її основна мета полягає в
наданні корисних рекомендацій, які допомагають туристам краще
підготуватися до подорожей Карпатським регіоном. У цьому розділі
розміщуються матеріали щодо підготовки до походів, вибору спорядження,
правил безпеки, сезонних особливостей мандрівок, планування маршруту та
практичних туристичних лайфхаків.
Матеріали на сторінці представлені у вигляді окремих інформаційних
карток із зображеннями, категоріями, назвами, короткими описами, авторами
та датами публікації. Такий формат подання дозволяє зробити сторінку
візуально привабливою, а інформацію — легкою для сприйняття. Користувач
може швидко переглянути перелік порад, визначити тематику матеріалу за
категорією та перейти до детальнішого ознайомлення з потрібною
інформацією.
Арк.
ЧДТУ 262218.019 ПЗ
55
Змн. Арк. № Документа Підпис Дата
Рисунок 3.4 – Сторінка порад для мандрівників
Сторінка «Галерея» використовується для демонстрації візуального
контенту web-ресурсу «Мандрівки Карпатами». Її основне призначення
полягає в тому, щоб ознайомити користувачів із природною красою
Карпатського регіону та створити позитивне враження про можливі туристичні
напрямки. На сторінці розміщуються фотографії гірських краєвидів, лісів,
водоспадів, озер, туристичних стежок, оглядових майданчиків та інших
природних об’єктів Карпат.
Візуальна складова є важливою для туристичного web-ресурсу, оскільки
саме фотографії допомагають користувачеві краще уявити атмосферу місця,
оцінити привабливість маршруту та сформувати попереднє враження про
майбутню подорож. Якісні зображення можуть впливати на зацікавленість
відвідувача, мотивувати його перейти до перегляду детальної інформації про
маршрути або скористатися функцією бронювання.
Арк.
ЧДТУ 262218.019 ПЗ
56
Змн. Арк. № Документа Підпис Дата
Рисунок 3.5 – Галерея web-ресурсу «Мандрівки Карпатами»
Сторінка «Контакти» забезпечує комунікацію між користувачем і
адміністрацією сайту. Вона містить блок із контактною інформацією, телефон,
email, адресу, час відповіді та форму надсилання повідомлення. У формі
передбачено поля для імені, електронної пошти, телефону та тексту звернення.
Після заповнення форми дані можуть бути збережені в базі даних Supabase для
подальшого опрацювання адміністратором.
Рисунок 3.6 – Контактна сторінка web-ресурсу «Мандрівки Карпатами»
Арк.
ЧДТУ 262218.019 ПЗ
57
Змн. Арк. № Документа Підпис Дата
Сторінка «Профіль» створена для персоналізованої взаємодії
користувача із сайтом. У цьому розділі відображається інформація про
користувача, контактні дані, статистика активності, завершені походи,
пройдена відстань, кількість відгуків, а також вкладки «Бронювання»,
«Відгуки» та «Обране». Завдяки цьому користувач отримує окремий простір
для перегляду власної активності та збережених маршрутів.
Рисунок 3.7 – Профіль користувача web-ресурсу «Мандрівки Карпатами»
Адміністративна панель реалізована для керування інформаційним
наповненням сайту. Вона містить розділи для роботи з маршрутами, порадами
та листами користувачів. У розділі маршрутів адміністратор може переглядати
список туристичних напрямків, додавати нові записи, редагувати наявні
маршрути та видаляти неактуальні. У розділі порад можна керувати
інформаційними статтями, а в розділі листів — переглядати повідомлення,
надіслані через контактну форму.
Арк.
ЧДТУ 262218.019 ПЗ
58
Змн. Арк. № Документа Підпис Дата
Рисунок 3.8 – Адміністративна панель web-ресурсу «Мандрівки Карпатами»
Таким чином, розроблений web-ресурс має дві основні частини:
користувацьку та адміністративну. Користувацька частина орієнтована на
перегляд туристичної інформації та взаємодію з маршрутами, а
адміністративна — на підтримку актуальності контенту та керування даними.
3.3. Організація бази даних і взаємодія з Supabase
Для зберігання даних web-ресурсу «Мандрівки Карпатами» використано
Supabase. Застосування цього сервісу дозволило організувати централізоване
зберігання інформації та забезпечити взаємодію між користувацьким
інтерфейсом, адміністративною панеллю та даними сайту. Supabase базується
на PostgreSQL, тому є зручним рішенням для роботи зі структурованими
таблицями, зв’язками між сутностями та запитами до даних [4].
У межах розробленого сайту база даних виконує одну з ключових ролей.
Вона зберігає інформацію про туристичні маршрути, поради, повідомлення
користувачів, бронювання, відгуки, обрані маршрути та облікові записи
користувачів. Завдяки цьому контент сайту не є статичним, а може
Арк.
ЧДТУ 262218.019 ПЗ
59
Змн. Арк. № Документа Підпис Дата
оновлюватися через адміністративну панель або під час взаємодії користувачів
із сайтом.
Рисунок 3.9 – Таблиці бази даних web-ресурсу «Мандрівки Карпатами» у
Supabase
Основною таблицею системи є таблиця маршрутів. Вона містить дані,
необхідні для відображення туристичних карток на сторінці «Маршрути». До
таких даних належать назва маршруту, опис, зображення, складність,
тривалість, відстань, вартість, рейтинг та додаткові характеристики. Саме з цієї
таблиці користувацька частина отримує інформацію для формування каталогу
маршрутів.
Таблиця порад використовується для збереження інформаційних
матеріалів, які відображаються на сторінці «Поради». У ній можуть
зберігатися назва статті, категорія, короткий опис, автор, дата публікації та
зображення. Завдяки такій структурі адміністратор може додавати нові поради,
редагувати наявні матеріали або видаляти застарілу інформацію.
Таблиця повідомлень призначена для збереження звернень, які
користувачі надсилають через контактну форму. У ній можуть міститися ім’я
Арк.
ЧДТУ 262218.019 ПЗ
60
Змн. Арк. № Документа Підпис Дата
користувача, email, телефон, текст повідомлення та статус опрацювання. Це
дає змогу адміністратору переглядати звернення та контролювати їх обробку.
Таблиця бронювань використовується для збереження заявок
користувачів на туристичні маршрути. Вона може містити інформацію про
користувача, обраний маршрут, дату бронювання, кількість учасників і статус
заявки. Такий підхід дозволяє організувати взаємодію між користувачем та
адміністрацією сайту.
Таблиця відгуків містить коментарі й оцінки користувачів щодо
маршрутів або загального досвіду подорожі. Відгуки є важливою складовою
туристичного ресурсу, оскільки вони підвищують довіру до маршруту та
допомагають іншим користувачам приймати рішення.
Таблиця обраного використовується для збереження маршрутів, які
користувач додав до власного профілю. Завдяки цьому він може повернутися
до них пізніше та продовжити планування подорожі. Така функція робить сайт
більш персоналізованим і зручним.
Таблиця користувачів містить інформацію, необхідну для роботи
профілю та персоналізованих функцій. До неї можуть належати email, ім’я,
телефон, роль користувача, дата реєстрації та інші службові дані. Для
адміністратора важливим є розмежування доступу між звичайним
користувачем і користувачем з адміністративними правами.
Взаємодія сайту з базою даних відбувається через запити до Supabase.
Наприклад, під час відкриття сторінки маршрутів система отримує список
доступних маршрутів із таблиці маршрутів. Під час надсилання контактної
форми дані записуються до таблиці повідомлень. Якщо користувач додає
маршрут до обраного, відповідний запис створюється в таблиці обраного. У
разі редагування маршруту в адміністративній панелі оновлюються записи в
таблиці маршрутів.
Така організація бази даних забезпечує гнучкість і масштабованість
системи. У майбутньому до неї можна додати нові таблиці, наприклад для
інтерактивної карти, погодних даних, онлайн-оплати, сповіщень або
Арк.
ЧДТУ 262218.019 ПЗ
61
Змн. Арк. № Документа Підпис Дата
персональних рекомендацій. Це дозволяє розглядати web-ресурс «Мандрівки
Карпатами» як основу для подальшого розвитку повноцінного туристичного
сервісу.
3.4. Логіка API-маршрутів і обміну даними
У web-ресурсі «Мандрівки Карпатами» взаємодія з даними може бути
описана через логіку API-маршрутів або безпосередні запити до Supabase.
Навіть якщо окремі операції виконуються напряму через клієнтську частину, у
межах архітектурного опису доцільно виділити логічні маршрути обміну
даними. Це дозволяє чіткіше показати, які саме процеси відбуваються між
інтерфейсом, базою даних та адміністративною частиною сайту.
Для роботи з туристичними маршрутами використовується логічний
маршрут «/api/routes». Він відповідає за отримання списку маршрутів, які
відображаються в каталозі. Маршрут «/api/routes/» може використовуватися
для отримання детальної інформації про конкретний маршрут. У разі
додавання, редагування або видалення маршруту в адміністративній панелі
відповідні дії можуть виконуватися через «/api/admin/routes».
Для сторінки порад передбачено логічний маршрут «/api/tips», який
відповідає за отримання списку інформаційних матеріалів. Адміністративне
керування порадами може виконуватися через «/api/admin/tips». Це дозволяє
відокремити користувацьке отримання даних від адміністративних дій із
редагування контенту.
Контактна форма може взаємодіяти з маршрутом «/api/contact». Після
заповнення форми користувачем дані передаються до системи та зберігаються
в таблиці повідомлень. Адміністратор може переглядати ці звернення через
логічний маршрут «/api/admin/messages».
Для бронювань може використовуватися маршрут «/api/bookings». Він
відповідає за створення нових заявок і перегляд уже наявних бронювань у
профілі користувача. Для відгуків доцільно передбачити маршрут
Арк.
ЧДТУ 262218.019 ПЗ
62
Змн. Арк. № Документа Підпис Дата
«/api/reviews», який дозволяє додавати нові коментарі та отримувати список
відгуків. Для обраних маршрутів використовується «/api/favorites», який
забезпечує додавання або видалення маршруту з персонального списку
користувача.
Узагальнено логіку обміну даними можна описати так: користувач
виконує дію в інтерфейсі сайту, після чого формується запит до відповідної
таблиці Supabase або до логічного API-маршруту. Після опрацювання запиту
система повертає актуальні дані, які відображаються на сторінці. Наприклад,
після додавання маршруту до обраного користувач може побачити цей
маршрут у профілі, а після надсилання контактної форми адміністратор
отримує нове повідомлення в адміністративній панелі.
Рисунок 3.10 – Схема взаємодії web-ресурсу «Мандрівки Карпатами» з
Supabase
Арк.
ЧДТУ 262218.019 ПЗ
63
Змн. Арк. № Документа Підпис Дата
Описана логіка API-маршрутів робить архітектуру системи більш
зрозумілою та підготовленою до масштабування. У майбутньому можна
додати нові маршрути для інтерактивної карти, погодного сервісу, email-
сповіщень, онлайн-оплати або персональних рекомендацій.
3.5. Тестування web-ресурсу «Мандрівки Карпатами»
Тестування web-ресурсу є необхідним етапом розробки, оскільки воно
дозволяє перевірити відповідність реалізованої системи поставленим вимогам.
Для сайту «Мандрівки Карпатами» тестування було спрямоване на перевірку
коректності роботи сторінок, зручності навігації, відображення контенту,
роботи форм, фільтрів, профілю користувача, адміністративної панелі та
взаємодії з базою даних.
Під час перевірки враховувалися такі напрями: тестування верстки,
функціональне тестування, UX-тестування, адаптивне тестування, безпекове
тестування і тестування продуктивності. Такий підхід дозволяє оцінити не
лише технічну працездатність сайту, а й зручність його використання з погляду
звичайного користувача.
Тестування верстки передбачало перевірку правильності відображення
основних елементів інтерфейсу. Було перевірено наявність логотипу,
верхнього меню, кнопок, карток маршрутів, блоків порад, галереї, контактної
форми, профілю користувача та елементів адміністративної панелі. Також
оцінювалося коректне розміщення блоків, читабельність тексту, відповідність
кольорів загальному стилю та відсутність візуальних помилок.
Функціональне тестування було спрямоване на перевірку основних
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками,
відкриття каталогу маршрутів, фільтрація за складністю та сезоном, перегляд
порад, відкриття галереї, надсилання повідомлення через контактну форму,
робота профілю, додавання маршруту до обраного та дії адміністратора з
керування контентом.
Арк.
ЧДТУ 262218.019 ПЗ
64
Змн. Арк. № Документа Підпис Дата
UX-тестування дозволило оцінити зручність використання сайту. Було
перевірено зрозумілість назв пунктів меню, логічність структури сторінок,
помітність кнопок, зручність карток маршрутів, простоту використання
фільтрів і зрозумілість контактної форми. Для туристичного ресурсу це є
важливим, оскільки користувач повинен швидко знайти потрібний маршрут і
не витрачати зайвий час на розуміння структури сайту.
Адаптивне тестування передбачало перевірку відображення сайту на
різних пристроях. Було оцінено роботу сторінок на комп’ютері, планшеті та
смартфоні. Особлива увага приділялася коректному відображенню меню,
карток маршрутів, галереї, форм і профілю користувача. Відсутність
горизонтального прокручування та зручність натискання кнопок на
мобільному пристрої є важливими показниками якості адаптивного
інтерфейсу.
Безпекове тестування було спрямоване на перевірку обмеження доступу
до адміністративної панелі, коректність роботи форм, відсутність відкритого
доступу до службових функцій і захист користувацьких даних. Для web-
застосунків доцільно враховувати рекомендації OWASP Top 10, оскільки вони
описують поширені ризики, пов’язані з автентифікацією, контролем доступу,
ін’єкціями та іншими вразливостями [17].
Тестування продуктивності передбачало перевірку швидкості
завантаження основних сторінок, стабільності роботи фільтрів, відкриття
галереї, реакції інтерфейсу на дії користувача та відсутності критичних
помилок у консолі браузера. Для оцінювання якості роботи web-сторінок
доцільно враховувати Core Web Vitals, які охоплюють показники завантаження,
інтерактивності та стабільності візуального відображення [18].
Тестування web-ресурсу «Мандрівки Карпатами» було виконано з
використанням браузерних інструментів Google Chrome DevTools, Lighthouse,
а також шляхом ручної перевірки роботи сторінок у різних браузерах. Під час
тестування було перевірено коректність відображення головної сторінки,
сторінки маршрутів, порад, галереї, контактної форми, профілю користувача
Арк.
ЧДТУ 262218.019 ПЗ
65
Змн. Арк. № Документа Підпис Дата
та адміністративної панелі. Окремо було перевірено адаптивність інтерфейсу
на різних розмірах екрана, роботу форм, кнопок, фільтрів і взаємодію із
сервісом Supabase.
Рисунок 3.11 – Результати тестування
За результатами тестування встановлено, що web-ресурс «Мандрівки
Карпатами» відповідає основним вимогам до туристичного інформаційного
сайту. Основні сторінки відображаються коректно, навігація є зрозумілою,
фільтри працюють відповідно до призначення, контактна форма виконує свою
функцію, а адміністративна панель забезпечує керування контентом.
Інтеграція з Supabase дозволяє зберігати й оновлювати дані, що підвищує
практичну цінність системи.
3.6. Порівняння розробленого web-ресурсу з аналогами
Порівняння розробленого web-ресурсу з аналогічними рішеннями
дозволяє визначити його переваги та оцінити практичну значущість створеної
Арк.
ЧДТУ 262218.019 ПЗ
66
Змн. Арк. № Документа Підпис Дата
системи. У межах дипломної роботи доцільно порівняти «Мандрівки
Карпатами» з такими ресурсами, як Karpaty.info, Visit Ukraine, Tripadvisor та
AllTrails.
Karpaty.info має перевагу у вигляді регіональної спрямованості, оскільки
містить інформацію про відпочинок у Карпатах, туристичні об’єкти,
проживання та розваги. Проте цей ресурс більше виконує роль довідкового
порталу, тоді як «Мандрівки Карпатами» орієнтований на поєднання каталогу
маршрутів, порад, галереї, профілю користувача, відгуків, бронювань та
адміністративного керування.
Visit Ukraine є ширшим сервісним порталом для подорожей Україною.
Його перевагою є загальна інформаційна та сервісна спрямованість. Водночас
він не зосереджений саме на маршрутах Карпатського регіону, тому для
користувача, який шукає локальні туристичні напрямки, розроблений ресурс є
більш конкретним і тематично орієнтованим.
Tripadvisor має велику базу відгуків, рейтингів, фотографій і
туристичних об’єктів. Його сильна сторона — велика користувацька спільнота.
Однак через глобальний масштаб платформи користувач може стикатися з
надмірною кількістю інформації. «Мандрівки Карпатами» має компактнішу
структуру та спрямований саме на маршрути Карпат, що робить його
простішим для використання в межах конкретної предметної області.
AllTrails орієнтований на активний відпочинок, піші маршрути, карти й
навігацію. Його маршрутна логіка є корисною для планування походів, однак
сервіс є міжнародним і не має вузької локальної орієнтації на українські
Карпати. У розробленому web-ресурсі маршрутна складова поєднана з
локальним контентом, порадами, галереєю, контактною формою та
адміністративним керуванням.
Перевагою web-ресурсу «Мандрівки Карпатами» є поєднання кількох
функціональних напрямів у межах одного сайту. Користувач може переглядати
маршрути, фільтрувати їх за параметрами, читати поради, переглядати
галерею, надсилати повідомлення, працювати з профілем, зберігати обране,
Арк.
ЧДТУ 262218.019 ПЗ
67
Змн. Арк. № Документа Підпис Дата
залишати відгуки та створювати бронювання. Адміністратор, зі свого боку, має
змогу оновлювати маршрути, редагувати поради та переглядати звернення
користувачів.
Отже, розроблений web-ресурс не дублює повністю функціональність
великих туристичних платформ, а створює локальне, зручне та тематично
спрямоване середовище для планування подорожей Карпатами. Основними
перевагами системи є простота структури, адаптивний інтерфейс, каталог
маршрутів, профіль користувача, збереження обраного, робота з відгуками,
бронюваннями та наявність адміністративної панелі.
Висновки до розділу 3
У третьому розділі було розглянуто програмну реалізацію
інформаційного web-ресурсу «Мандрівки Карпатами». Було обґрунтовано
вибір інструментальних засобів розробки, зокрема Visual Studio Code, React,
Vite, Supabase та Vercel. Обрані технології дозволили реалізувати адаптивний
інтерфейс, організувати роботу з даними, забезпечити розгортання сайту в
мережі Інтернет і створити основу для подальшого розвитку системи.
Було описано реалізацію основних сторінок сайту: головної сторінки,
каталогу маршрутів, сторінки порад, галереї, контактної сторінки, профілю
користувача та адміністративної панелі. Кожен розділ виконує окрему функцію
та забезпечує логічну взаємодію користувача із сайтом. Особливу увагу
приділено каталогу маршрутів, фільтрації, роботі з профілем, бронюваннями,
відгуками та адміністративному керуванню.
Окремо розглянуто організацію бази даних у Supabase. Було визначено
основні таблиці, необхідні для роботи системи: маршрути, поради,
повідомлення, бронювання, відгуки, обране та користувачі. Така структура
дозволяє централізовано зберігати дані, оновлювати контент і забезпечувати
зв’язок між користувацькою та адміністративною частинами web-ресурсу.
Арк.
ЧДТУ 262218.019 ПЗ
68
Змн. Арк. № Документа Підпис Дата
Також було описано логіку API-маршрутів і обміну даними. Було
показано, як користувацькі дії можуть бути пов’язані з відповідними запитами
до бази даних або логічними API-маршрутами. Це дає змогу краще зрозуміти
архітектуру системи та визначити напрями її подальшого масштабування.
У межах розділу було розглянуто тестування web-ресурсу за кількома
напрямами: перевірка верстки, функціональне тестування, UX-тестування,
адаптивність, безпека та продуктивність. За результатами тестування
встановлено, що сайт має логічну структуру, коректно відображає основні
сторінки, забезпечує роботу форм і фільтрів, підтримує взаємодію з базою
даних і може використовуватися для інформаційної підтримки туристів.
Порівняння з аналогами показало, що web-ресурс «Мандрівки
Карпатами» має практичну цінність завдяки локальній орієнтації на
Карпатський регіон, простому інтерфейсу, каталогу маршрутів, порад, галереї,
профілю користувача, бронюванням, відгукам, обраному та адміністративній
панелі. Таким чином, розроблений сайт можна вважати функціонально
завершеною туристичною інформаційною системою, яка відповідає
поставленій меті кваліфікаційної роботи.
Важливою перевагою ресурсу є поєднання інформаційних і
функціональних можливостей в межах однієї системи. Користувач може не
лише ознайомитися з маршрутами та переглянути візуальні матеріали, а й
зберігати обрані маршрути, залишати відгуки, здійснювати бронювання та
взаємодіяти із сайтом через особистий профіль. Наявність адміністративної
панелі, своєю чергою, забезпечує можливість керування контентом, оновлення
інформації та підтримання актуальності даних без необхідності внесення змін
безпосередньо до програмного коду.
Арк.
ЧДТУ 262218.019 ПЗ
69
Змн. Арк. № Документа Підпис Дата
ВИСНОВКИ
У межах кваліфікаційної роботи було розроблено інформаційний web-
ресурс «Мандрівки Карпатами», призначений для підтримки користувачів у
процесі планування туристичних подорожей Карпатським регіоном.
Розроблений web-сайт поєднує інформаційні та функціональні можливості, що
забезпечують зручний доступ до туристичних маршрутів, корисних
рекомендацій і візуальних матеріалів.
Актуальність розробки зумовлена тим, що сучасна туристична сфера
активно використовує цифрові інструменти для пошуку інформації, вибору
маршрутів, перегляду відгуків, планування подорожей і взаємодії з
туристичними сервісами. Карпатський регіон є одним із найпопулярніших
туристичних напрямів України, однак інформація про маршрути, поради,
фотографії, можливості бронювання та контакти часто розміщується на різних
ресурсах. Це ускладнює процес планування подорожі для користувача. Тому
створення єдиного інформаційного web-ресурсу, орієнтованого саме на
подорожі Карпатами, є доцільним і практично значущим.
У першому розділі було виконано аналіз предметної області туристичних
інформаційних web-ресурсів. Було визначено, що такі системи виконують
інформаційну, навігаційну, комунікаційну та сервісну функції. Вони
допомагають користувачам отримувати відомості про туристичні об’єкти,
маршрути, умови подорожей, поради, відгуки та можливості зв’язку з
адміністрацією сервісу. Також було розглянуто основні чинники, які
впливають на якість туристичного web-ресурсу: структура сайту, зручність
інтерфейсу, адаптивність, актуальність інформації, робота з базою даних,
безпека, швидкодія та можливість адміністрування.
У межах аналітичного огляду було досліджено існуючі туристичні web-
ресурси, зокрема Karpaty.info, Visit Ukraine, Tripadvisor та AllTrails.
Порівняння аналогів дало змогу визначити їхні переваги й недоліки. Було
встановлено, що Karpaty.info має регіональну спрямованість на Карпати, Visit
Арк.
ЧДТУ 262218.019 ПЗ
70
Змн. Арк. № Документа Підпис Дата
Ukraine надає ширшу сервісну інформацію про подорожі Україною, Tripadvisor
має значну базу відгуків і туристичних об’єктів, а AllTrails орієнтований на
активні маршрути та навігацію. Водночас жоден із розглянутих ресурсів
повністю не поєднує локальну орієнтацію на Карпатський регіон, просту
структуру, каталог маршрутів, поради, галерею, профіль користувача, обране,
бронювання, відгуки та адміністративне керування контентом. Це підтвердило
доцільність розробки власного web-ресурсу «Мандрівки Карпатами».
У другому розділі було обґрунтовано технічне завдання для створення
інформаційного web-ресурсу. Було визначено призначення сайту, його основні
функції, вимоги до дизайну, структури сторінок, навігації, наповнення,
адміністрування та прототипу. Розроблюваний ресурс було спроєктовано як
систему, що складається з користувацької та адміністративної частин.
Користувацька частина охоплює головну сторінку, каталог маршрутів,
сторінку порад, галерею, контактну сторінку та профіль користувача.
Адміністративна частина призначена для керування маршрутами, порадами,
повідомленнями користувачів та іншими даними сайту.
Окрему увагу було приділено вимогам до інтерфейсу. Було визначено,
що дизайн web-ресурсу повинен відповідати туристичній тематиці, бути
візуально привабливим, адаптивним, зрозумілим і не перевантаженим зайвими
елементами. Для цього доцільно використовувати природну кольорову гаму,
якісні фотографії, зрозумілі кнопки, логічну навігацію та зручне розміщення
карток маршрутів. Також було визначено, що сайт повинен коректно
відображатися на різних пристроях, оскільки користувачі можуть переглядати
туристичну інформацію як із комп’ютера, так і зі смартфона.
У третьому розділі було описано програмну реалізацію web-ресурсу
«Мандрівки Карпатами». Для розробки було обрано сучасні інструментальні
засоби: Visual Studio Code, React, Vite, Supabase та Vercel. Використання React
дало змогу реалізувати компонентний підхід до побудови інтерфейсу, Vite
забезпечив швидку локальну розробку та збирання проєкту, Supabase
Арк.
ЧДТУ 262218.019 ПЗ
71
Змн. Арк. № Документа Підпис Дата
використано для зберігання та синхронізації даних, а Vercel — для розгортання
сайту в мережі Інтернет.
У процесі реалізації було створено основні сторінки web-сайту: головну
сторінку, сторінку маршрутів, сторінку порад, галерею, контактну сторінку,
профіль користувача та адміністративну панель. Головна сторінка виконує
презентаційну функцію та знайомить користувача з ресурсом. Сторінка
маршрутів містить каталог туристичних напрямків із картками, фільтрацією за
складністю та сезоном. Сторінка порад надає користувачам корисні
рекомендації щодо підготовки до подорожей. Галерея забезпечує візуальне
ознайомлення з природними об’єктами Карпат. Контактна сторінка дає змогу
надсилати повідомлення адміністрації, а профіль користувача забезпечує
персоналізовану роботу з бронюваннями, відгуками та обраними маршрутами.
Було розглянуто організацію бази даних у Supabase. У системі
передбачено збереження даних про маршрути, поради, повідомлення
користувачів, бронювання, відгуки, обрані маршрути та користувачів. Така
структура дозволяє централізовано зберігати інформацію, оновлювати контент
через адміністративну панель і забезпечувати зв’язок між користувацькою та
адміністративною частинами сайту. Використання Supabase підвищує
гнучкість системи та створює можливість для її подальшого масштабування.
Також було описано логіку API-маршрутів і обміну даними. Для роботи
з маршрутами, порадами, повідомленнями, бронюваннями, відгуками та
обраними елементами передбачено логічну структуру взаємодії між frontend-
частиною, API-запитами та базою даних Supabase. Це дозволяє краще
організувати обмін інформацією, підвищити зрозумілість архітектури системи
та спростити її подальший розвиток.
У межах роботи було виконано тестування web-ресурсу. Перевірялися
коректність відображення сторінок, робота навігації, функціональність форм,
фільтрів, профілю користувача, адміністративної панелі та взаємодія з базою
даних. Також було враховано адаптивність сайту, зручність інтерфейсу, безпеку
та продуктивність. За результатами тестування встановлено, що web-ресурс
Арк.
ЧДТУ 262218.019 ПЗ
72
Змн. Арк. № Документа Підпис Дата
працює відповідно до поставлених вимог, має логічну структуру, коректно
відображає основні сторінки та забезпечує виконання основних функцій.
Практичне значення одержаних результатів полягає у створенні
функціонального інформаційного web-ресурсу, який може бути використаний
для популяризації туристичних маршрутів Карпатського регіону та спрощення
процесу планування подорожей. Розроблений сайт дозволяє користувачам
переглядати туристичні маршрути, ознайомлюватися з порадами, переглядати
галерею, надсилати повідомлення, зберігати обрані маршрути, працювати з
бронюваннями та відгуками. Для адміністратора система надає можливість
керувати контентом сайту без прямого втручання у програмний код.
Поставлену мету кваліфікаційної роботи було досягнуто. У результаті
виконання роботи розроблено інформаційний web-ресурс «Мандрівки
Карпатами», призначений для пошуку туристичних маршрутів, перегляду
корисної інформації, взаємодії користувачів із сайтом, збереження обраних
маршрутів, надсилання заявок та адміністрування контенту з використанням
сучасних web-технологій і сервісу Supabase.
Усі поставлені задачі було виконано: проаналізовано предметну область
туристичних web-ресурсів; досліджено існуючі аналоги; визначено
функціональні та нефункціональні вимоги; спроєктовано структуру сайту й
логіку навігації; обґрунтовано вибір технологій; реалізовано основні сторінки
та функціональні модулі; організовано роботу з базою даних Supabase;
виконано тестування системи; проведено порівняння розробленого web-
ресурсу з аналогами.
Розроблений web-ресурс має перспективи подальшого розвитку. У
майбутньому систему можна доповнити інтерактивною картою маршрутів,
погодним віджетом, онлайн-оплатою бронювань, системою персональних
рекомендацій, email-сповіщеннями, розширеною статистикою для
адміністратора, рейтингом маршрутів і глибшою інтеграцією із зовнішніми
туристичними сервісами. Це дозволить підвищити функціональність ресурсу
Арк.
ЧДТУ 262218.019 ПЗ
73
Змн. Арк. № Документа Підпис Дата
та перетворити його на повноцінну туристичну платформу для планування
подорожей Карпатами.
Отже, розроблений інформаційний web-ресурс «Мандрівки Карпатами»
є завершеним програмним продуктом у межах поставленого завдання. У
процесі його створення було реалізовано основні функціональні можливості,
необхідні для зручного пошуку, перегляду та використання туристичної
інформації про Карпатський регіон. Сайт містить логічно побудовану
структуру, зручну навігацію, каталог маршрутів, інформаційні розділи,
галерею, контактну форму, профіль користувача та адміністративну панель для
керування контентом.
Розроблений web-ресурс відповідає визначеним вимогам, має практичну
цінність і забезпечує ефективну взаємодію користувачів із туристичною
інформацією. Завдяки поєднанню інформаційного наповнення, візуальних
матеріалів і функціональних елементів сайт сприяє зручнішому плануванню
подорожей, вибору маршрутів і отриманню корисних рекомендацій.
Використання сучасних web-технологій і хмарного сервісу для зберігання
даних забезпечує стабільність роботи системи та можливість її подальшого
масштабування.
Таким чином, web-ресурс «Мандрівки Карпатами» може бути
використаний як основа для подальшого розвитку цифрового сервісу у сфері
внутрішнього туризму України. У перспективі система може бути доповнена
новими інтерактивними можливостями, зокрема розширеною картою
маршрутів, персональними рекомендаціями, онлайн-оплатою, сповіщеннями
та додатковими аналітичними інструментами для адміністратора.
Арк.
ЧДТУ 262218.019 ПЗ
74
Змн. Арк. № Документа Підпис Дата
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. UN Tourism — International tourism recovers pre-pandemic levels in 2024
URL: https://www.untourism.int/news/international-tourism-recovers-pre-
pandemic-levels-in-2024
2. World Travel & Tourism Council — Travel & Tourism Economic Impact
2024: Global Trends URL: https://researchhub.wttc.org/product/economic-
impact-report-global-trends
3. Державне агентство розвитку туризму України — ЄТР 2.0 / цифрові
рішення у сфері туризму URL: https://www.tourism.gov.ua/blog/ietr-2-0---
-onovlennya-iedinogo-turistichnogo-reiestru-uviyshlo-do-triyki-klyuchovih-
viklikiv-dlya-yakih-programa-govtech-lab-ukraine-rozrobit-innovaciyni-
rishennya
4. Supabase Documentation URL: https://supabase.com/docs
5. World Tourism Barometer — January 2025 URL: https://en.unwto-
ap.org/news/worldtourismbarometer_jan2025/
6. Karpaty.info. Traveling in the Carpathians. URL:
https://www.karpaty.info/en/
7. Visit Ukraine. Service portal about Ukraine 24/7. URL:
https://visitukraine.today/
8. Tripadvisor. Plan your next trip, read reviews and get travel advice. URL:
https://www.tripadvisor.com/
9. AllTrails. Trail Guides & Maps for Hiking, Camping, and Running. URL:
https://www.alltrails.com/
10. State Agency for Tourism Development of Ukraine. Official website. URL:
https://www.tourism.gov.ua/en/home
11. UN Tourism. International tourist arrivals recover pre-pandemic levels in
2024. URL: https://www.e-
unwto.org/doi/pdf/10.18111/wtobarometereng.2025.23.1.1
Арк.
ЧДТУ 262218.019 ПЗ
75
Змн. Арк. № Документа Підпис Дата
12. Державне агентство розвитку туризму України. Офіційний сайт. URL:
https://www.tourism.gov.ua/
13. World Travel & Tourism Council. Travel & Tourism Economic Impact 2024:
Global Trends. URL: https://researchhub.wttc.org/product/economic-impact-
report-global-trends
14. React. Official Documentation. URL: https://react.dev/
15. Vite. Getting Started. URL: https://vite.dev/guide/
16. Vercel. Deployments Documentation. URL:
https://vercel.com/docs/deployments
17. OWASP. OWASP Top 10. URL: https://owasp.org/www-project-top-ten/
18. Google Web.dev. Core Web Vitals. URL: https://web.dev/vitals/
19. Krug S. Don’t Make Me Think, Revisited: A Common Sense Approach to
Web Usability. 3rd ed. New Riders, 2014. 216 p.
20. Duckett J. HTML and CSS: Design and Build Websites. Indianapolis: John
Wiley & Sons, 2011. 490 p.
21. Duckett J. JavaScript and JQuery: Interactive Front-End Web Development.
Indianapolis: John Wiley & Sons, 2014. 640 p.
22. Robbins J. N. Learning Web Design: A Beginner’s Guide to HTML, CSS,
JavaScript, and Web Graphics. 5th ed. Sebastopol: O’Reilly Media, 2018.
808 p.
23. Banks A., Porcello E. Learning React: Modern Patterns for Developing
React Apps. 2nd ed. Sebastopol: O’Reilly Media, 2020. 310 p.
24. Wieruch R. The Road to React: Your Journey to Master Plain Yet Pragmatic
React.js. 2024 Edition. Independently published, 2024.
25. Beaird J., Walker A., George J. The Principles of Beautiful Web Design. 4th
ed. SitePoint, 2020. 206 p.
26. Tidwell J., Brewer C., Valencia A. Designing Interfaces: Patterns for
Effective Interaction Design. 3rd ed. Sebastopol: O’Reilly Media, 2020. 602
p.
Арк.
ЧДТУ 262218.019 ПЗ
76
Змн. Арк. № Документа Підпис Дата
27. Nielsen J. Usability Engineering. San Francisco: Morgan Kaufmann, 1993.
362 p.
28. Elmasri R., Navathe S. B. Fundamentals of Database Systems. 7th ed.
Pearson, 2016. 1280 p.
29. PostgreSQL Documentation. Official documentation. URL:
https://www.postgresql.org/docs/
30. MDN Web Docs. HTML: HyperText Markup Language. URL:
https://developer.mozilla.org/en-US/docs/Web/HTML
31. MDN Web Docs. CSS: Cascading Style Sheets. URL:
https://developer.mozilla.org/en-US/docs/Web/CSS
32. MDN Web Docs. JavaScript. URL: https://developer.mozilla.org/en-
US/docs/Web/JavaScript
33. Web Content Accessibility Guidelines (WCAG) 2.2. W3C
Recommendation. URL: https://www.w3.org/TR/WCAG22/
34. Google Developers. Responsive Web Design Basics. URL:
https://web.dev/responsive-web-design-basics/
35. Google Developers. Lighthouse. URL:
https://developer.chrome.com/docs/lighthouse/overview/
Арк.
ЧДТУ 262218.019 ПЗ
77
Змн. Арк. № Документа Підпис Дата
78
ДОДАТОК А
Програмний код головної сторінки сайту
import { Link } from 'react-router'
import {
ArrowRight,
MapPin,
Star,
Clock,
TrendingUp,
Shield,
Users,
Award,
Heart,
} from 'lucide-react'
import { routes } from '../../data/routes'
import { Weather } from '../Weather'
import { useAuth } from '../AuthContext'
export function Home() {
const popularRoutes = routes.slice(0, 3)
const { user, isAuthenticated, getUserData, setUserData } = useAuth()
const toggleFavorite = (routeId: number, e: React.MouseEvent) => {
e.preventDefault() // Запобігає переходу по посиланню
if (!user) return
const favorites = getUserData('favorites') || []
let updatedFavorites
if (favorites.includes(routeId)) {
updatedFavorites = favorites.filter((id: number) => id !== routeId)
} else {
updatedFavorites = [...favorites, routeId]
}
setUserData('favorites', updatedFavorites)
}
const isFavorite = (routeId: number) => {
if (!user) return false
const favorites = getUserData('favorites') || []
return favorites.includes(routeId)
}
const testimonials = [
{
name: 'Олена Коваль',
rating: 5,
text: 'Неймовірний досвід! Команда професійна, маршрути добре організовані.',
79
image:
'https://images.unsplash.com/photo-1494790108377-
be9c29b29330?w=100&h=100&fit=crop',
},
{
name: 'Максим Петренко',
rating: 5,
text: "Здійснились всі мої мрії про Карпати. Обов'язково повернусь!",
image:
'https://images.unsplash.com/photo-1507003211169-
0a1dd7228f2d?w=100&h=100&fit=crop',
},
{
name: 'Анна Сидоренко',
rating: 5,
text: 'Чудовий відпочинок для всієї родини. Діти в захваті!',
image:
'https://images.unsplash.com/photo-1438761681033-
6461ffad8d80?w=100&h=100&fit=crop',
},
]
return (
<div>
<section className='relative h-[600px] flex items-center justify-center overflow-hidden'>
<div className='absolute inset-0'>
<ImageWithFallback
src='https://images.unsplash.com/photo-1668900053088-
c379837cdc5c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&q=80&w=1920'
alt='Карпатські гори'
className='w-full h-full object-cover'
/>
<div className='absolute inset-0 bg-gradient-to-b from-black/50 to-black/30' />
</div>
<div className='relative z-10 text-center text-white px-4 max-w-4xl mx-auto'>
<h1 className='text-5xl md:text-6xl mb-6'>
Відкрийте для себе Карпати
</h1>
<p className='text-xl md:text-2xl mb-8 text-white/90'>
Найкращі маршрути, досвідчені гіди та незабутні пригоди
</p>
<Link
to='/routes'
className='inline-flex items-center gap-2 px-8 py-4 bg-primary text-primary-
foreground rounded-2xl hover:bg-primary/90 transition-colors text-lg'
>
Почати подорож
<ArrowRight className='w-5 h-5' />
</Link>
</div>
80
</section>
<section className='py-16 px-4 bg-muted'>
<div className='max-w-7xl mx-auto'>
<div className='grid grid-cols-1 md:grid-cols-4 gap-8'>
<div className='text-center'>
<div className='w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-
center mx-auto mb-4'>
<TrendingUp className='w-8 h-8 text-primary' />
</div>
<h3 className='mb-2'>50+ Маршрутів</h3>
<p className='text-muted-foreground text-sm'>
Для будь-якого рівня підготовки
</p>
</div>
<div className='text-center'>
<div className='w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-
center mx-auto mb-4'>
<Shield className='w-8 h-8 text-primary' />
</div>
<h3 className='mb-2'>Безпека</h3>
<p className='text-muted-foreground text-sm'>
Досвідчені гіди та страхування
</p>
</div>
<div className='text-center'>
<div className='w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-
center mx-auto mb-4'>
<Users className='w-8 h-8 text-primary' />
</div>
<h3 className='mb-2'>10,000+ Туристів</h3>
<p className='text-muted-foreground text-sm'>
Задоволених мандрівників
</p>
</div>
<div className='text-center'>
<div className='w-16 h-16 bg-primary/10 rounded-2xl flex items-center justify-
center mx-auto mb-4'>
<Award className='w-8 h-8 text-primary' />
</div>
<h3 className='mb-2'>8 Років досвіду</h3>
<p className='text-muted-foreground text-sm'>
Найкращі тури з 2018 року
</p>
</div>
</div>
</div>
</section>
<section className='py-16 px-4'>
<div className='max-w-7xl mx-auto'>
81
<div className='text-center mb-12'>
<h2 className='mb-4'>Популярні маршрути</h2>
<p className='text-muted-foreground'>
Оберіть свою наступну пригоду
</p>
</div>
<div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
{popularRoutes.map(route => (
<Link
key={route.id}
to={`/routes/${route.id}`}
className='group bg-card rounded-2xl overflow-hidden border border-border
hover:shadow-xl transition-all'
>
<div className='relative h-64 overflow-hidden'>
<ImageWithFallback
src={route.image}
alt={route.title}
className='w-full h-full object-cover group-hover:scale-110 transition-
transform duration-300'
/>
<div className='absolute top-4 right-4 flex gap-2'>
<div className='px-3 py-1 bg-white/90 backdrop-blur-sm rounded-full text-
sm flex items-center gap-1'>
<Star className='w-4 h-4 fill-yellow-400 text-yellow-400' />
<span>{route.rating}</span>
</div>
{isAuthenticated && (
<button
onClick={e => toggleFavorite(route.id, e)}
className={`p-2 bg-white/90 backdrop-blur-sm rounded-full transition-
colors ${
isFavorite(route.id)
? 'text-red-500 hover:text-red-600'
: 'text-gray-500 hover:text-gray-600'
}`}
>
<Heart
className={`w-4 h-4 ${isFavorite(route.id) ? 'fill-current' : ''}`}
/>
</button>
)}
</div>
</div>
<div className='p-6'>
<h3 className='mb-2'>{route.title}</h3>
<p className='text-muted-foreground text-sm mb-4'>
{route.description}
</p>
82
<div className='flex items-center justify-between text-sm text-muted-
foreground'>
<div className='flex items-center gap-1'>
<Clock className='w-4 h-4' />
<span>{route.duration}</span>
</div>
<div className='flex items-center gap-1'>
<MapPin className='w-4 h-4' />
<span>{route.distance}</span>
</div>
</div>
<div className='mt-4 pt-4 border-t border-border flex items-center justify-
between'>
<span className='text-primary'>від {route.price} грн</span>
<span className='text-primary group-hover:translate-x-2 transition-
transform'>
→
</span>
</div>
</div>
</Link>
))}
</div>
<div className='text-center mt-8'>
<Link
to='/routes'
className='inline-flex items-center gap-2 px-6 py-3 border border-primary text-
primary rounded-xl hover:bg-primary hover:text-primary-foreground transition-colors'
>
Дивитись всі маршрути
<ArrowRight className='w-4 h-4' />
</Link>
</div>
</div>
</section>
<section className='py-16 px-4'>
<div className='max-w-7xl mx-auto'>
<div className='text-center mb-12'>
<h2 className='mb-4'>Поточна погода в Карпатах</h2>
<p className='text-muted-foreground'>
Перевіряйте погоду перед плануванням подорожі
</p>
</div>
<Weather />
</div>
</section>
<section className='py-16 px-4 bg-muted'>
<div className='max-w-7xl mx-auto'>
83
<div className='text-center mb-12'>
<h2 className='mb-4'>Відгуки туристів</h2>
<p className='text-muted-foreground'>Що кажуть наші мандрівники</p>
</div>
<div className='grid grid-cols-1 md:grid-cols-3 gap-8'>
{testimonials.map((testimonial, index) => (
<div
key={index}
className='bg-card rounded-2xl p-6 border border-border'
>
<div className='flex items-center gap-4 mb-4'>
<ImageWithFallback
src={testimonial.image}
alt={testimonial.name}
className='w-12 h-12 rounded-full object-cover'
/>
<div>
<div className='font-medium'>{testimonial.name}</div>
<div className='flex items-center gap-1'>
{Array.from({ length: testimonial.rating }).map(
(_, i) => (
<Star
key={i}
className='w-4 h-4 fill-yellow-400 text-yellow-400'
/>
),
)}
</div>
</div>
</div>
<p className='text-muted-foreground'>{testimonial.text}</p>
</div>
))}
</div>
</div>
</section>
<section className='py-16 px-4 bg-gradient-to-r from-primary to-secondary text-white'>
<div className='max-w-4xl mx-auto text-center'>
<h2 className='text-white mb-4'>Готові до пригод?</h2>
<p className='text-xl mb-8 text-white/90'>
Забронюйте свій маршрут зараз та отримайте знижку 10% на першу
подорож
</p>
<Link
to='/routes'
className='inline-flex items-center gap-2 px-8 py-4 bg-white text-primary rounded-
2xl hover:bg-white/90 transition-colors text-lg'
>
Забронювати зараз
84
<ArrowRight className='w-5 h-5' />
</Link>
</div>
</section>
</div>
)
}
85
ДОДАТОК Б
Програмний код сторінки логіну
import { useState } from 'react'
import { Link, useNavigate } from 'react-router'
import { Mail, Lock, Eye, EyeOff } from 'lucide-react'
import { useAuth } from '../AuthContext'
export function Login() {
const [formData, setFormData] = useState({
email: '',
password: '',
})
const [showPassword, setShowPassword] = useState(false)
const [error, setError] = useState('')
const [loading, setLoading] = useState(false)
const { login, isAdmin } = useAuth()
const navigate = useNavigate()
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault()
setError('')
setLoading(true)
try {
const success = await login(formData.email, formData.password)
if (success) {
// Navigate based on user role (isAdmin will be updated after login)
setTimeout(() => {
if (isAdmin) {
navigate('/admin')
} else {
navigate('/profile')
}
}, 100)
} else {
setError('Невірний email або пароль')
}
} catch (err) {
setError('Помилка входу. Спробуйте ще раз.')
} finally {
setLoading(false)
}
}
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setFormData({
...formData,
[e.target.name]: e.target.value,
86
})
}
return (
<div className='min-h-[80vh] flex items-center justify-center px-4'>
<div className='max-w-md w-full'>
<div className='bg-card rounded-2xl border border-border p-8'>
<div className='text-center mb-8'>
<h1 className='text-2xl mb-2'>Вхід в акаунт</h1>
<p className='text-muted-foreground'>
Увійдіть, щоб керувати своїми бронюваннями
</p>
</div>
<form onSubmit={handleSubmit} className='space-y-6'>
<div>
<label className='block mb-2 text-sm'>Email</label>
<div className='relative'>
<Mail className='absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-
foreground' />
<input
type='email'
name='email'
value={formData.email}
onChange={handleChange}
required
placeholder='[email protected]'
className='w-full pl-12 pr-4 py-3 bg-input-background border border-border
rounded-xl focus:ring-2 focus:ring-primary outline-none'
/>
</div>
</div>
<div>
<label className='block mb-2 text-sm'>Пароль</label>
<div className='relative'>
<Lock className='absolute left-4 top-1/2 -translate-y-1/2 w-5 h-5 text-muted-
foreground' />
<input
type={showPassword ? 'text' : 'password'}
name='password'
value={formData.password}
onChange={handleChange}
required
placeholder='Введіть пароль'
className='w-full pl-12 pr-12 py-3 bg-input-background border border-border
rounded-xl focus:ring-2 focus:ring-primary outline-none'
/>
<button
type='button'
onClick={() => setShowPassword(!showPassword)}
87
className='absolute right-4 top-1/2 -translate-y-1/2 text-muted-foreground
hover:text-foreground'
>
{showPassword ? (
<EyeOff className='w-5 h-5' />
) : (
<Eye className='w-5 h-5' />
)}
</button>
</div>
</div>
{error && (
<div className='text-red-500 text-sm text-center'>{error}</div>
)}
<button
type='submit'
disabled={loading}
className='w-full px-6 py-3 bg-primary text-primary-foreground rounded-xl
hover:bg-primary/90 transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex
items-center justify-center'
>
{loading ? (
<>
<div className='w-4 h-4 border-2 border-white border-t-transparent rounded-
full animate-spin mr-2'></div>
Вхід...
</>
) : (
'Увійти'
)}
</button>
</form>
<div className='text-center mt-6 space-y-4'>
<p className='text-sm text-muted-foreground'>
Немає акаунту?{' '}
<Link to='/register' className='text-primary hover:underline'>
Зареєструватися
</Link>
</p>
<div className='border-t border-border pt-4'>
<p className='text-xs text-muted-foreground mb-2'>
Демо облік адміністратора:
</p>
<p className='text-xs font-mono bg-muted/50 p-2 rounded'>
Email: [email protected]
</p>
<p className='text-xs font-mono bg-muted/50 p-2 rounded'>
88
Password: admin123
</p>
</div>