ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/6877| Title: | Інформаційний web-ресурс поціновувачів кавових традицій з використанням React |
| Authors: | Ланських , Євген Володимирович Ковалик, Лоліта Михайлівна |
| Keywords: | web-ресурс;адаптивність;кавова культура;React;інформаційний сайт;локальне зберігання |
| Issue Date: | 5-Jun-2025 |
| Abstract: | Кваліфікаційна робота присвячена створенню інформаційного web-ресурсу для поціновувачів кавових традицій із використанням сучасних вебтехнологій, зокрема бібліотеки React. Робота є актуальною, оскільки розвиток кавової культури потребує якісних цифрових рішень, які поєднують інформативність, естетику та функціональність. Метою роботи є розробка повнофункціонального інформаційного ресурсу з динамічним вмістом, що забезпечує якісний користувацький досвід. Об’єкт дослідження – процес розробки інформаційного вебресурсу. Предмет дослідження – архітектура, дизайн, функціональність і реалізація клієнтської частини сайту засобами React. Було використано основні методи: аналітичний (аналіз аналогів та предметної області), інженерний (створення структурної і логічної схем), моделювання (UX/UI та бізнес-процеси), експериментальний (тестування). Практична значущість отриманих результатів полягає у можливості використання створеного ресурсу як платформи для просування кавової культури. У першому розділі обґрунтовано актуальність, охарактеризовано предметну область, розглянуто аналоги та сформульовано вимоги до сайту. У другому розділі обґрунтовується обґрунтовано вибір технологій, проведено аналіз інструментів розробки, представлено бізнес-модель та моделювання процесів. Третій розділ присвячений проектуванню структури сайту, функціональних і логічних схем, дизайну та прототипів інтерфейсу. У четвертому розділі описано реалізацію фронтенду засобами React, механізми виведення статей, систему коментарів, а також результати тестування. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6877 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Ковалик_WEB-2111.pdf Restricted Access | 2.09 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Інформаційний web-ресурс поціновувачів кавових традицій з
використанням React»
Виконала: здобувачка першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2111
Спеціальності 126 Інформаційні
системи та
технології
ОП «Web-технології, Web-дизайн»
Ковалик Лоліта Михайлівна
Керівник: кандидат технічних наук,
доцент кафедри інформаційних
технологій проектування,
Ланських Євген Володимирович
Рецензент: директор ТОВ
"АНДЕРСЕНЛАБ", Алесін Олег
Вікторович
Черкаси – 2025 року
ЗМІСТ
ВСТУП………………………………………………………………….3
РОЗДІЛ 1. Огляд існуючих рішень, постановка задачі роботи
розробки інформаційного web-ресурсу……………………………..5
H
Y
H
P
Y
E HP
YHER
LYРPR ОЗДІЛ 2. Огляд інструментів розробки інформаційного web-
E
рPILR есурсу …………………………………………………………………14
N
2I
E
KLR .1. Вибір технологій для розробки інформаційного web-ресурсу…14
2I
N
KL
.2. Огляд технологій верстки та стилізації інтерфейсу…………….15
\N2IlK .3. Бізнес-модель предметної області сайту ………………………..16
N
K l2
\ .4. Моделювання бізнес-процесів сайту.……………………………21
"\
lРОЗДІЛ 3. Проєктування інформаційного web-ресурсу………...29
_\3" lT .1. Основні функції інформаційного web-ресурсу………………….29
_
o"3T .2. Опис структурної (функціональної) схеми сайту……………….30
_c3"oT .3. Опис логічної схеми сайту………………………………………..32
_5co
T31 .4. UX/UI-дизайн сайту, концепція і прототипи……………………34
Р7c
5
1o ОЗДІЛ 4. Реалізація та тестування інформаційного
45c7
41web-ресурсу............................................................................................37
44
5
718 .1. Реалізація фронтенду за допомогою React………………………37
4
46784.2. Виведення статей та іншого контенту у React ………………….43
446
841" .3. Тестування функціоналу та інтерфейсу ………………………...46
44
86 "
1В8 ИСНОВКИ ………………………………………………………….49
С
6
"
9.ОП
ДОп
И
ДисСА п
О
ТрКе
Кд ИмВ е
ИтКноОї РобИлСасТтАі сНаИйтХу, ДщЖо ЕроРзЕроЛб лТяАєт ЛьсІяТ…ЕР…А…ТУРИ
…..… .6
"
1 Огляд аналог ів сайту, що розробляється……………………..…...8
. Постановка задачі та визначення вимог до розробки сайту……11
А
к
т
у
а
л
ь
н
і
с
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалаврський
(назва)
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
_________Тетяна ПРОКОПЕНКО
«_____»_____________20___року
ЗАВДАННЯ
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Ковалик Лоліті Михайлівні
(прізвище, ім’я, по батькові)
1. Тема роботи ___Інформаційний web-ресурс поціновувачів кавових традицій з
використанням React___________________________________________________
Керівник роботи Ланських Євген Володимирович, кандидат технічних наук,
доцент_______________________________________________________________
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
«___» ___________ 20__ року № ________
2. Строк подання здобувачем роботи _____________________________________
3. Вихідні дані до роботи _______________________________________________
_____________________________________________________________________
_____________________________________________________________________
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити) Постановка задачі; існуючі аналоги; вимоги до користувацького
інтерфейсу; вимоги до архітектури; вимоги до функціональності; обґрунтування
вибору засобів реалізації системи; реалізація системи; тестування системи.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень,
плакатів) Рис 1.1 Головна сторінка coffeegeek.com, Рис 1.2 Головна сторінка
folks.com.ua/blog/, Рис 1.3 Головна сторінка icoffee.in.ua/blog/, Рис 1.4 Головна
сторінка сайту papakava.ua/ua/blog, Рис 2.1 Карта бачення бізнес-послуг сайту,
Рис 2.2 Карта бачення бізнес-акторів сайту, Рис 2.3 Карта бачення бізнес-ролей
сайту, Рис 2.4 Карта бачення бізнес-концепції, Рис 2.5 Карта бачення бізнес-
процесів сайту, Рис 2.6 Карта бачення бізнес-функцій сайту, Рис 2.7 Карта
бачення бізнес-процесів співробітництва сайту, Рис 2.8 Діаграма прецедентів,
Рис 2.9 Діаграма класів, Рис 2.10 Діаграма компонентів, Рис 2.11 Діаграма
розгортання, Рис 2.12 Діаграма послідовності, Рис 2.13 Діаграма взаємодії, Рис
3.1 Діаграма "User flow", Рис 3.2 Структура проєкту, Рис 3.3 Логічна схема
сайту, Рис 3.4 Прототипи сайту, Рис 4.1 Сторінка повної статті, Рис 4.2
Повідомлення після авторизації, Рис 4.3 DOM-структура Головної сторінки в
засобах розробника браузера, Рис 4.4 Сторінка зі списком статей, Рис 4.5 Секція
«Коментарі» під статтею.
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та посада
консультанта Підпис, дата
7. Дата видачі завдання __________________________________________
КАЛЕНДАРНИЙ ПЛАН
№ Назва етапів Строк виконання Примітка
з/п кваліфікаційної роботи етапів роботи
1 Вибір теми роботи 18.02.2025 Виконано
2 Підбір матеріалів 21.02.2025 Виконано
3 Вибір технологій 01.03.2025 Виконано
4 Проєктування системи 10.03.2025 Виконано
5 Розробка системи 14.04.2025 Виконано
6 Тестування системи 04.05.2025 Виконано
7 Оформлення пояснювальної записки 19.05.2025 Виконано
Здобувач вищої освіти ______________________ _____________________
(підпис) (прізвище та ініціали)
Керівник роботи ______________________ _____________________
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з 4 розділів,
викладена на 50 сторінках, містить 27 рисунків, 25 джерел використаної
літератури, 6 додатків.
Кваліфікаційна робота присвячена створенню інформаційного web-ресурсу
для поціновувачів кавових традицій із використанням сучасних вебтехнологій,
зокрема бібліотеки React.
Робота є актуальною, оскільки розвиток кавової культури потребує якісних
цифрових рішень, які поєднують інформативність, естетику та функціональність.
Метою роботи є розробка повнофункціонального інформаційного ресурсу
з динамічним вмістом, що забезпечує якісний користувацький досвід. Об’єкт
дослідження – процес розробки інформаційного вебресурсу. Предмет
дослідження – архітектура, дизайн, функціональність і реалізація клієнтської
частини сайту засобами React.
Було використано основні методи: аналітичний (аналіз аналогів та
предметної області), інженерний (створення структурної і логічної схем),
моделювання (UX/UI та бізнес-процеси), експериментальний (тестування).
Практична значущість отриманих результатів полягає у можливості
використання створеного ресурсу як платформи для просування кавової
культури.
У першому розділі обґрунтовано актуальність, охарактеризовано
предметну область, розглянуто аналоги та сформульовано вимоги до сайту.
У другому розділі обґрунтовується обґрунтовано вибір технологій,
проведено аналіз інструментів розробки, представлено бізнес-модель та
моделювання процесів.
Третій розділ присвячений проектуванню структури сайту,
функціональних і логічних схем, дизайну та прототипів інтерфейсу.
У четвертому розділі описано реалізацію фронтенду засобами React,
механізми виведення статей, систему коментарів, а також результати тестування.
Ключові слова: web-ресурс, кавова культура, React, інформаційний сайт,
локальне зберігання, адаптивність.
SUMMARY
The structure and volume of the work. The thesis consists of 4 chapters, set out
on 50 pages, contains 27 figures, 0 tables, 25 references, 6 appendices.
The master's thesis is dedicated to the development of an informational web resource
for coffee culture enthusiasts using modern web technologies, particularly the React
library.
The work is relevant because the growth of coffee culture requires high-quality
digital solutions that combine informativeness, aesthetics, and functionality.
The aim of the study is to develop a full-featured informational resource with
dynamic content that ensures a high-quality user experience. Object – the process of
developing an informational web resource. Subject – the architecture, design,
functionality, and implementation of the client-side of the site using React.
It was used the basic methods: analytical (analysis of analogs and the subject
area), engineering (development of structural and logical diagrams), modeling
(UX/UI and business processes), experimental (testing).
The practical value of the results lies in the possibility of using the developed
resource as a platform for promoting coffee culture.
In the first chapter the relevance is substantiated, the subject area is described,
analogs are analyzed, and the requirements for the website are formulated.
In the second chapter it is substantiated the choice of technologies, tools are
analyzed, and a business model and process modeling are presented.
The third chapter is devoted to designing the website structure, functional and
logical schemes, user interface, and prototypes.
In the fourth chapter, the frontend implementation using React is described,
along with article rendering mechanisms, a comment system, and testing results.
Keywords: web resource, coffee culture, React, informational website, local
storage, responsiveness.
ВСТУП
У сучасному суспільстві, де інформаційні технології проникають у всі
сфери життя, зростає попит на якісні вебресурси, що поєднують інформативність,
зручність і можливість взаємодії користувачів. Окрема увага приділяється
тематикам, пов’язаним зі способом життя, хобі та культурними звичками. Однією
з таких тем, що має стабільний інтерес в Україні й, зокрема, у Черкаському
регіоні, є культура споживання кави. Кава перестала бути просто напоєм — це
частина щоденної рутини, елемент соціалізації, джерело естетики й натхнення.
Усе більше людей шукають не лише смачну каву, а й інформацію про сорти зерен,
методи приготування, рекомендації від бариста та новинки на ринку аксесуарів.
Однак українському ринку бракує тематичних сайтів, які б комплексно
охоплювали всі ці аспекти та при цьому мали сучасний дизайн, зручну навігацію
і можливість для обміну думками.
Реалізація вебресурсу, присвяченого кавовій тематиці, є відповіддю на
зростаючий інтерес аудиторії до якісного контенту, пов’язаного з кавою. Метою
цієї роботи є створення сучасного вебсайту, який дозволяє публікувати тематичні
статті, рецепти, огляди обладнання, а також забезпечує можливість
коментування, обговорення та зворотного зв’язку. Такий ресурс не лише
інформуватиме, а й об’єднуватиме спільноту любителів кави — як початківців,
так і досвідчених гурманів.
У межах проєкту буде створено клієнтську частину вебсайту, реалізовану
за допомогою бібліотеки React — однієї з найпоширеніших сучасних технологій
для розробки динамічних вебінтерфейсів. Поточна версія ресурсу
функціонуватиме без серверної частини: зберігання даних реалізовано локально
через механізми браузера (LocalStorage), що дозволяє забезпечити базову
персоналізацію досвіду користувача — такі як збереження авторизації,
коментарів та обраних статей.
Такий підхід обрано для демонстрації основного функціоналу сайту, з
акцентом на зручність взаємодії, адаптивність інтерфейсу та естетичність
дизайну. Надалі проєкт може бути масштабований із додаванням серверної
частини — з реалізацією повноцінної бази даних, аналітики користувацької
поведінки, системи ролей та управління контентом.
Поточний етап реалізації передбачає збереження даних на стороні клієнта
за допомогою локального сховища браузера, що забезпечує базову
персоналізацію без необхідності складної серверної інфраструктури. Такий
підхід дозволяє зосередитися на якісному дизайні, логіці користувацької
взаємодії та функціональності, залишаючи можливість подальшого розширення
функціоналу з додаванням серверної частини.
Практична цінність розробки полягає у можливості впровадження сайту на
базі кав’ярень, освітніх платформ або медіаресурсів, які прагнуть розширити
присутність у цифровому середовищі. Розроблений ресурс можна
використовувати як інструмент для просвітницької діяльності, маркетингу
кавових продуктів, або як базу для створення спільноти навколо кавової
тематики.
Кваліфікаційна робота складається зі вступу, чотирьох розділів, висновків,
списку використаних джерел і додатків. У роботі послідовно розглядаються
теоретичні засади теми, аналізуються аналогічні рішення, обґрунтовується вибір
технологій, описується процес проєктування й реалізації інтерфейсу, а також
проводиться тестування функціоналу. Такий підхід дозволив створити не просто
інформаційний сайт, а повноцінну платформу, здатну масштабуватись і
розвиватися відповідно до потреб аудиторії.
РОЗДІЛ 1. Огляд існуючих рішень, постановка задачі роботи
розробки інформаційного web-ресурсу
1.1 Актуальність розробки сайту.
Кава є одним з найпопулярніших напоїв в Україні протягом десятиліть [1].
Її значення давно вийшло за межі простого напою і стало невід'ємною частиною
культури, способу життя і навіть соціальної взаємодії. У той час як ритуал випити
чашку кави вранці є звичним досвідом для мільйонів людей, сучасна кавова
культура охоплює набагато ширший спектр аспектів, включаючи історію напою,
його різноманітність, обсмажування, способи приготування та створення нових
смакових комбінацій.
Інтерес до кави зростає в різних галузях. Це пов'язано як з її унікальним
смаком, так і з потенційною користю для здоров'я, якщо вживати її в помірних
кількостях. Наукові дослідження показують, що кава позитивно впливає на
когнітивні функції, настрій і навіть на профілактику деяких захворювань [2]. Усе
це підкреслює важливість надання достовірної інформації про каву.
Ринок кави також стрімко змінюється. З'являються нові сорти кавових
зерен, що імпортуються з далеких куточків світу, методи обробки, що дозволяють
отримувати унікальні смаки, та способи обсмажування, що дають можливість для
подальших експериментів.
Крім того, все більшої популярності набувають кав'ярні та кавові бари, що
пропонують напої преміум-класу, де клієнти можуть дізнатися більше про напій,
побачити, як його готують, або просто провести час у приємній атмосфері.
В епоху, коли цифрові технології стали основним джерелом інформації,
розробка сайтів на кавову тематику має велике значення.
Подібні ресурси обмінюються досвідом між любителями кави:
публікують унікальні рецепти і способи заварювання
роблять огляди кав'ярень і обладнання
надають платформу для поширення інформації про історію, сорти і вплив кави
на здоров'я.
Окрім функції надання інформації, веб-сайт також може слугувати
інтерактивною спільнотою, де користувачі можуть взаємодіяти, ставити
запитання, обговорювати новинки кавового ринку та ділитися своїми знахідками.
Це дозволяє веб-сайту охопити читачів з різним рівнем знань, від новачків до
досвідчених гурманів і бариста.
Таким чином, створення сайтів про каву не тільки відповідає сучасним
тенденціям ринку, але й задовольняє потреби аудиторії в якісному контенті. Це
стане важливим внеском у популяризацію та подальший розвиток кавової
культури.
1.2 Опис предметної області сайту, що розробляється
Опис предметної області є важливим, оскільки визначає напрямок і межі
проекту, ідентифікує цільову аудиторію і основні теми контенту. Це допомагає
зберегти ясність і зосередженість у процесі розробки, уникнути відхилень від
основних тем і чітко розуміти, чого можна очікувати від проекту. Технічне
завдання також полегшує планування та виконання проекту, забезпечуючи чітке
розуміння завдань і вимог.
Кавовий блог орієнтований на читачів, які цікавляться всіма аспектами
кави, від приготування та споживання до історії та культури: базова інформація
про каву, які існують сорти кави, як обрати зерна, способи заварювання кави в
домашніх умовах, новинки на ринку кавових аксесуарів, останні тенденції в
кавовій культурі.
Основні теми блогу:
• Опис типів кави, їхніх характеристик, смаків та способів заварювання.
• Порівняння видів кави (арабіка, робуста, ліберіка).
• Інформація про спеціальні сорти кави (наприклад, Гейша) та їх популярність
серед гурманів.
• Поглиблений огляд історії кави: легенди, походження, розвиток кавової
культури.
• Окремий розділ про кавову культуру в Україні.
• Хронологія важливих подій у світовій кавовій індустрії.
• Рецепти від професійних бариста.
• Огляд різноманітних кавових аксесуарів, включаючи кавомашини, кавомолки
та чашки.
• Цікаві факти про каву, її користь для здоров'я та наслідки вживання.
• Міфи про каву та їх розвінчання.
Формат контенту:
• Текстовий: статті, поради, новини.
• Фото та відео: підкреслюють візуальну привабливість кавової культури.
• Подкасти: обговорення цікавих тем з експертами.
• Інтерактивні матеріали: калькулятори кавових пропорцій, тести на знання
кави та інтеграція соціальних мереж для обміну рецептами.
Блог базується на надійних джерелах, таких як:
1. Наукові дослідження про вплив кави на організм людини.
2. Інтерв'ю з кавовими експертами.
3. Кавова література та спеціалізовані журнали.
4. Дані про відомі кавові бренди та аксесуари.
Перспективи розвитку блогу:
1. Розробка мобільного додатку для доступу до контенту блогу.
2. Взаємодія зі спільнотою через інтерактивні заходи, такі як конкурси та
вебінари.
3. Створення інтернет-магазину з продажу кави та аксесуарів.
1.3 Огляд аналогів сайту, що розробляється.
Розробка сайту про каву починається з ретельного аналізу та порівняння
наявних ресурсів. Це допомагає визначити сильні та слабкі сторони конкурентів,
знайти найкращі рішення та створити унікальні шляхи для розвитку. Для аналізу
обрано чотири популярні кавові сайти: CoffeeGeek [3], Folks [4], Кучерява Кава
[4] та PapaKava [6].
CoffeeGeek [3] спеціалізується на оглядах кавоварок та кавомашин і надає
детальні характеристики та поради для любителів кави. Сайт має велику
спільноту користувачів, які активно діляться своїм досвідом на форумі. Окрім
оглядів кавового обладнання, сайт також пропонує статті про різні способи
приготування кави, рекомендації щодо вибору зерен та останні тенденції в
кавовій індустрії. Сайт має застарілий дизайн, але це не впливає на якість
контенту, сайт залишається функціональним і корисним.
Рисунок 1.1 Головна сторінка coffeegeek.com
Folks [4] - український блог, що висвітлює новини кавової індустрії та надає
актуальні поради та огляди. Однією з головних особливостей сайту є регулярні
інтерв'ю з експертами кавової індустрії та оригінальні статті про кавову культуру
в різних країнах. Сайт має сучасний дизайн, високу SEO-оптимізацію та швидке
завантаження. Сайт активно взаємодіє з читачами через коментарі та соціальні
мережі, що робить його популярним серед українських кавоманів. Популярними
також є рецепти фірмової кави та напоїв, які можна знайти на сайті.
Рисунок 1.2 Головна сторінка folks.com.ua/blog/
«Кучерява кава» [5] присвячена українській кавовій культурі, пропонуючи
якісні рецепти, огляди кавового обладнання та поради. Окрім стандартного
контенту, на сайті регулярно з'являються поради щодо поєднання кави з різними
стравами та статті про історію кави в Україні. Сайт має сучасний, інтуїтивно
зрозумілий дизайн, якісну мобільну версію та оптимізований для пошукових
систем. Читачі взаємодіють з сайтом через коментарі, соціальні мережі та
тематичні опитування, що дозволяє розвивати контент відповідно до їхніх
побажань.
Рисунок 1.3 Головна сторінка icoffee.in.ua/blog/
PapaKava [6] фокусується на оглядах кави, рецептах та порадах. Часто
використовуються відео та інфографіка, щоб зробити інформацію більш
доступною та цікавою. На сайті є вбудований калькулятор для розрахунку
ідеального співвідношення кави та води та інтерактивні уроки з приготування
кави. Сайт має сучасний дизайн, оптимізований для SEO та швидко
завантажується. Активна взаємодія з читачами через коментарі, соціальні мережі
та регулярні розіграші збільшила популярність сайту.
Рисунок 1.4 Головна сторінка сайту papakava.ua/ua/blog
Детальний аналіз та порівняння чотирьох кавових сайтів допомагає
зрозуміти їхні сильні та слабкі сторони, виявити кращі практики та знайти
унікальні шляхи їхнього вдосконалення. У додатку А наведено порівняльну
таблицю, яка охоплює широкий спектр критеріїв, включаючи основні теми
контенту, частоту оновлень, наявність додаткових ресурсів, якість дизайну та
користувацького досвіду, технічні аспекти та багато іншого.
Розробка власного веб-сайту вимагає врахування сильних сторін
конкурентів і розробки унікальних функцій, які вирізняють з-поміж інших
ресурсів. Наприклад, інтеграція інтерактивних елементів, таких як калькулятор
для розрахунку співвідношення кави та води, відеоуроки з приготування напоїв
або створення розділу для публікації користувацького контенту є важливими
перевагами.
Крім того, при розробці веб-сайту слід враховувати адаптивний дизайн,
щоб забезпечити зручність користування сайтом як на персональних
комп’ютерах, так і на мобільних пристроях.
Ще одним важливим аспектом є створення спільноти навколо веб-сайту. Це
може включати інтеграцію з соціальними мережами, організацію конкурсів,
розміщення інформаційних матеріалів і створення форумів для обговорення
актуальних тем, пов'язаних з кавою. Усе це сприятиме зростанню зацікавленості
та лояльності користувачів до web-ресурсу.
Таким чином, результати аналізу конкурентів та виявлені можливості для
вдосконалення є основою для створення сайту, який відповідає потребам
різноманітної аудиторії та підтримує розвиток кавової культури.
1.4 Постановка задачі та визначення вимог до розробки сайту
У сучасному суспільстві інформаційні ресурси відіграють важливу роль у
формуванні суспільного інтересу, обізнаності та культурного розвитку. Кава вже
давно стала частиною повсякденного життя мільйонів людей і потребує якісних
онлайн-ресурсів, які поєднують в собі інформативність, інтерактивність та
доступність. Основною метою розробки кавового блогу є створення платформи,
яка задовольняє потреби як початківців, так і досвідчених ентузіастів кавової
культури, надаючи актуальну інформацію, навчальні інструменти та можливості
для взаємодії.
Завданням проєкту є розробка кавового блогу, який буде:
• Джерелом інформації про каву, включаючи історію кави, рецепти, огляди
обладнання та рекомендації щодо продуктів.
• Форум для обговорення та обміну досвідом між користувачами.
• Мати інтерактивні інструменти для навчання приготування кави.
• Простий у використанні дизайн на будь-якому пристрої.
Для досягнення поставлених цілей необхідно виконати наступні кроки:
1. Аналіз цільових користувачів та вимог:
• Дослідити потреби користувачів, які цікавляться кавою.
• Визначити основні групи цільової аудиторії (новачки, експерти та кавомани).
2. Розробити структуру сайту:
• Створити чітку та зрозумілу ієрархію розділів.
• Виділити ключові теми: новини кавової індустрії, рецепти, огляди обладнання,
поради, відгуки.
• Створити розділ для публікації користувацького контенту.
3. Дизайн та юзабіліті:
• Створити зручний, сучасний та адаптивний дизайн.
• Забезпечити інтуїтивно зрозумілу навігацію по сайту.
4. Функціональність сайту:
• Реалізувати можливість публікації статей, фото та відео.
• Інтегрувати можливість коментування матеріалів.
5. Технічна реалізація:
• Вибрати відповідну платформу для розробки (CMS або індивідуальна
розробка).
• Оптимізувати веб-сайт для пошукових систем (SEO).
• Реалізувати швидке завантаження сторінок для покращення користувацького
досвіду.
6. Розробка контенту:
• Створити унікальний та цікавий контент про каву.
• Створити базу даних рецептів, порад та навчальних матеріалів.
Розроблений веб-сайт має стати надійним джерелом інформації про каву та
популярною платформою для кавоманів. Завдяки якісному контенту, сучасному
дизайну та широкому функціоналу сайт повинен привертати увагу великої
кількості користувачів, сприяти створенню кавової спільноти, підвищувати
інтерес до кавової культури.
Для забезпечення успіху проекту планується наступне:
• Використання гнучких методологій для ефективного управління розробкою.
• Застосування новітніх технологій front-end розробки.
• Використання аналітичних інструментів для постійного вдосконалення
функціональності та контенту.
Таким чином, проект розробки сайту кавового блогу дозволить створити
багатофункціональний ресурс, який просуває кавову культуру, задовольняє
потреби користувачів та підтримує взаємодію з ними.
РОЗДІЛ 2. Огляд інструментів розробки інформаційного web-
ресурсу
2.1. Вибір технологій для розробки інформаційного web-ресурсу
Розробка сучасного інформаційного web-ресурсу потребує ретельного
вибору технологій, які дозволяють забезпечити високу продуктивність,
адаптивність, зручність використання та легкість масштабування. У рамках цього
проєкту — створення ресурсу для поціновувачів кавових традицій — особлива
увага приділялася не лише зручності для кінцевого користувача, але й
ефективності розробки, підтримуваності коду та перспективам подальшого
розвитку.
Ключовим інструментом для побудови інтерфейсу було обрано React —
JavaScript-бібліотеку, яка на сьогодні є однією з найпопулярніших у сфері
фронтенд-розробки [7]. React базується на компонентному підході, що дозволяє
розбивати інтерфейс на ізольовані, багаторазово використовувані блоки. Це
значно спрощує як створення, так і тестування окремих частин сайту, а також
полегшує командну розробку.
Однією з переваг React є його широка екосистема та активна спільнота.
Завдяки цьому доступно безліч готових рішень, що дозволяє скоротити час на
реалізацію типових функцій і зосередитися на унікальному функціоналі ресурсу.
Для забезпечення грамотної маршрутизації в межах сайту
використовується React Router [8]. Цей інструмент дозволяє реалізувати логіку
переходу між сторінками без повного перезавантаження, що забезпечує плавність
навігації та покращує взаємодію з користувачем.
Щодо стилізації інтерфейсу, то основними засобами обрано CSS3 у
поєднанні з Material UI — бібліотекою готових компонентів з реалізацією
принципів Material Design [9]. Це дозволяє дотримуватися єдиного візуального
стилю, створити адаптивний та інтуїтивно зрозумілий інтерфейс, а також
мінімізувати витрати часу на реалізацію базових елементів.
Уся розробка здійснюється мовою програмування JavaScript, яка
залишається стандартом у розробці веб-інтерфейсів [10]. Використання
сучасного синтаксису ES6+ забезпечує читабельність, гнучкість та компактність
коду [11]. Для керування станом компонента (у разі потреби складної логіки)
передбачається використання вбудованого механізму useState, а в разі
необхідності — сторонніх бібліотек на кшталт Redux або Context API.
Таким чином, обраний стек технологій є сучасним, перевіреним на
практиці та цілком придатним для реалізації web-ресурсу, що має зручний
інтерфейс, швидку навігацію, можливість розширення й адаптації до потреб
користувачів.
2.2. Огляд технологій верстки та стилізації інтерфейсу
Якісне візуальне оформлення відіграє важливу роль у сприйнятті будь-
якого web-ресурсу, особливо якщо йдеться про сайт для аудиторії з естетичними
вподобаннями, як-от поціновувачі кавових традицій. У цьому контексті особлива
увага приділяється не лише зовнішньому вигляду інтерфейсу, а й зручності
користування, адаптивності для різних пристроїв та загальній узгодженості
стилю.
Основу для верстки сайту становить HTML5 — сучасна версія мови
розмітки, що підтримує семантичні теги, мультимедійний контент і забезпечує
зручну структуру документа [12]. HTML5 дозволяє логічно організувати контент
сторінки, що позитивно впливає як на зручність сприйняття, так і на подальшу
обробку інформації браузером або пошуковими системами.
Для стилізації застосовується CSS3 — стандартна технологія, яка
відповідає за оформлення елементів сторінки [13]. Вона дозволяє задавати
кольори, відступи, розміри, анімації, оформлення шрифтів та інші параметри,
необхідні для створення привабливого й зручного інтерфейсу. Завдяки медіа-
запитам у CSS3 реалізується адаптивна верстка, що гарантує коректне
відображення інтерфейсу на різних розмірах екранів — від мобільних пристроїв
до десктопів [14].
З метою підвищення швидкості розробки й уніфікації зовнішнього вигляду
обрано Material UI [9] — бібліотеку стилізованих React-компонентів, створену на
основі концепцій Material Design від Google. Вона надає великий набір готових
елементів — кнопок, меню, діалогових вікон, карток тощо — які відповідають
сучасним принципам дизайну та мають вбудовану адаптивність. Використання
Material UI дозволяє мінімізувати потребу в написанні власного CSS-коду для
типових компонентів, а також забезпечити стилістичну цілісність усього
інтерфейсу.
У разі необхідності, додаткові стилі створюються за допомогою CSS-
модулів або Emotion — бібліотеки CSS-in-JS, яка забезпечує інтеграцію стилів
безпосередньо в компоненти React. Це дозволяє уникати конфліктів стилів між
різними частинами програми та спрощує підтримку коду.
Також під час верстки застосовується система Flexbox і Grid Layout, які
забезпечують гнучке компонування елементів. Це особливо корисно для
побудови адаптивних макетів, де важливо точно керувати розміщенням контенту
залежно від розміру вікна браузера.
Загалом, обрані технології верстки та стилізації дозволяють досягти
балансу між швидкістю розробки, якістю реалізації та зручністю використання.
Вони відповідають сучасним вимогам до фронтенд-розробки [15] та
забезпечують необхідну гнучкість для подальшого розширення інтерфейсу.
2.3. Бізнес-модель предметної області сайту
Перед створенням сайту, важливо ретельно проробити бізнес-моделі та
карти бачення, які дозволяють створити чітку структуру та стратегію розвитку
проекту, враховуючи всі ключові аспекти його функціонування та взаємодії з
користувачами.
Блог про каву є не лише інформаційним ресурсом, але й платформою для
спілкування, самоосвіти та співпраці зі спільнотою кавоманів. Для досягнення
цієї мети використовуються різні бізнес-інструменти та концепції, які
відображені у відповідних діаграмах бачення бізнес-процесів та функцій.
Карта бачення бізнес-послуг веб-сайту про каву визначає основні послуги,
які він надає своїм користувачам. Послуги включають огляди кавових закладів,
рецепти, новини кавової індустрії, освітні матеріали та можливості для
спілкування у спільноті.
Рисунок 2.1 Карта бачення бізнес-послуг сайту
Карта бачення бізнес-акторів ідентифікує основних учасників веб-сайту,
таких як користувачі, адміністратори, модератори спільноти, автори контенту та
постачальники послуг, які співпрацюють для забезпечення функціонування
сайту.
Рисунок 2.2 Карта бачення бізнес-акторів сайту
Карта бачення бізнес-ролей визначає та ілюструє різні ролі, що
виконуються учасниками бізнес-процесів на сайті. Вона описує, хто саме
залучений до роботи сайту, які обов’язки та функції виконує. Така карта
допомагає чітко окреслити відповідальність кожного учасника, що сприяє більш
ефективному управлінню ресурсами та покращує координацію між різними
ролями на сайті [16].
Рисунок 2.1.3 Карта бачення бізнес-ролей сайту
Карта бачення бізнес-концепції інформаційного ресурсу про каву — це
стратегічний план, який окреслює основні цілі, місію та унікальні конкурентні
переваги сайту. Вона визначає цільову аудиторію, основні види контенту
(наприклад, огляди кавових машин, рецепти, новини індустрії), а також
маркетингові стратегії для залучення та утримання користувачів. Ця карта
допомагає сформувати чітке бачення розвитку ресурсу та забезпечує орієнтацію
на потреби аудиторії, що сприяє успішному функціонуванню та росту сайту.
Рисунок 2.4 Карта бачення бізнес-концепції
Карта бачення бізнес-процесів інформаційного ресурсу про каву охоплює
такі процеси, як створення та публікація контенту, модерація коментарів,
управління користувачами, взаємодія з читачами, та технічна підтримка. Карта
допомагає оптимізувати роботу сайту, забезпечити ефективне управління
ресурсами та покращити користувацький досвід за рахунок чіткого розуміння
кожного етапу та його ролі в загальній діяльності ресурсу.
Рисунок 2.5 Карта бачення бізнес-процесів сайту
Карта бачення бізнес-функцій інформаційного ресурсу про каву включає
такі функції, як пошук та фільтрація контенту, публікація статей та оглядів,
інтерактивні елементи (форум, коментарі, опитування), а також системи обміну
повідомленнями між користувачами. Така карта допомагає чітко визначити, які
саме можливості має надавати сайт, щоб задовольнити потреби користувачів та
забезпечити зручний і привабливий користувацький досвід.
Рисунок 2.6 Карта бачення бізнес-функцій сайту
Карта бачення бізнес-процесів співробітництва сайту інформаційного
ресурсу про каву включає процеси співпраці з постачальниками контенту,
рекламодавцями, кавовими компаніями, партнерами з афілійованих програм та
іншими зацікавленими сторонами. Карта відображає, як організовані ці взаємодії,
як відбувається обмін інформацією та ресурсами, а також як керуються спільні
проекти та маркетингові кампанії. Це дозволяє ефективно планувати та
координувати співробітництво, забезпечуючи стабільний розвиток та зростання
ресурсу.
Рисунок 2.7 Карта бачення бізнес-процесів співробітництва сайту
Створення карт бачення перед запуском сайту є важливим етапом, що
забезпечує успішність проекту. Ці карти допомагають чітко визначити
стратегічні цілі, розподілити ролі серед учасників, спланувати надання послуг та
оптимізувати бізнес-процеси. Завдяки цьому можливо зрозуміти, які функції та
сервіси найважливіші для користувачів, і як найефективніше організувати
взаємодію з партнерами. Пророблення карт бачення дозволяє уникнути багатьох
помилок на початкових етапах, забезпечуючи узгодженість дій всіх учасників
проекту та підвищуючи ймовірність успішного впровадження і розвитку сайту.
2.4. Моделювання бізнес-процесів сайту
Словник предметної області інформаційного ресурсу про каву — це
комплексна структура, що включає терміни, поняття і ключові аспекти, пов'язані
з індустрією кави. Цей словник визначає основні терміни, які використовуються
в контенті сайту (наприклад, "арабіка", " обжарка", "лате арт"), їх визначення та
контекстуальне використання. Важливо мати такий словник перед створенням
сайту, оскільки він сприяє уніфікації термінології, забезпечує зрозумілість для
користувачів та покращує якість контенту, що дозволяє більш ефективно
спілкуватися з аудиторією і підвищує професіоналізм ресурсу відносно кавової
тематики. Повний словник предметної області для інформаційного ресурсу про
каву наведено в додатку Б.
Формування та аналіз вимог до сайту перед його створенням є ключовим
для успіху проекту [17]. Цей процес дозволяє чітко визначити функціональність
сайту, врахувати потреби користувачів і оптимізувати їх користувацький досвід.
Вимоги визначаються з огляду на типи контенту, необхідні функції для
користувачів і адміністраторів, а також технічні можливості сайту. Чітке
формулювання вимог допомагає мінімізувати ризики непорозумінь у процесі
розробки і знижує витрати на подальші корекції. Крім того, цей етап дозволяє
стратегічно планувати розвиток сайту, забезпечуючи його здатність відповідати
зростаючим потребам і впроваджувати нові технології. Такий підхід сприяє
ефективному виконанню проекту і підвищує ймовірність його успішної реалізації
на ринку.
Функціональні вимоги до сайту визначають конкретні функції та операції,
які має здійснювати сайт. До функціональних вимог можна віднести:
1. Реєстрація нових користувачів.
2. Можливість створення особистого профілю користувача зі збереженням
інформації про уподобання щодо кави.
3. Можливість додавати нові статті, огляди, рецепти з кави; завантаження фото і
відео матеріалів.
4. Пошук статей за ключовими словами, авторами, темами; фільтрація контенту
за категоріями (наприклад, кавові рецепти, історії про каву, наукові статті
тощо).
5. Можливість коментування статей; взаємодія з іншими користувачами (лайки,
обговорення).
6. Модерація контенту (видалення неприпустимих коментарів, редагування
статей); аналітика відвідування сайту і поведінки користувачів.
7. Зручний перегляд сайту на різних пристроях (комп'ютери, планшети, мобільні
телефони).
Нефункціональні вимоги до сайту описують якості, які має мати сайт, але
не пов'язані з його конкретними функціями. До нефункціональних вимог можна
віднести:
1. Швидкість завантаження сторінок сайту; ефективне використання ресурсів
сервера при великій кількості одночасних відвідувачів.
2. Забезпечення високої доступності сайту; захист від вірусів, зловмисного
програмного забезпечення та інших загроз безпеці.
3. Захист персональних даних користувачів; використання безпечного з'єднання
(HTTPS).
4. Підтримка різних веб-браузерів (Chrome, Firefox, Safari, Edge тощо); адаптація
до різних операційних систем (Windows, macOS, Linux).
5. Інтуїтивно зрозумілий і зручний інтерфейс користувача; відповідність веб-
дизайну сучасним трендам.
6. Здатність сайту збільшувати обсяг і обробляти більше даних з часом без
втрати продуктивності.
7. Оптимізація витрат на розробку, підтримку і оновлення сайту.
8. Простота налаштування та управління сайтом для адміністраторів і редакторів
контенту.
Обидва типи вимог важливі для успішного розвитку та експлуатації веб-
сайту, оскільки вони спільно визначають функціональність та якість продукту,
що задовольняє потреби користувачів і відповідає вимогам ринку.
Ще одним із важливих процесів перед створенням сайту є розробка
діаграми прецедентів, оскільки вона візуалізує взаємодію користувачів з
системою. Вона допомагає чітко визначити функціональні вимоги сайту,
ідентифікувати ролі користувачів та визначити основні дії, які можуть бути
виконані на сайті. Це спрощує розробку і дозволяє краще зрозуміти, яким чином
користувачі будуть взаємодіяти з інтерфейсом сайту. Крім того, діаграма
допомагає уникнути непорозумінь у вимогах і забезпечити, що всі необхідні
функції будуть враховані в процесі розробки, забезпечуючи оптимальний
користувацький досвід та виконання бізнес-цілей проекту.
Рисунок 2.8 Діаграма прецедентів
Проектування логічної структури сайту — це процес створення
внутрішньої організації і структури інформації на веб-сайті. Це включає в себе
розподіл інформації на сторінках сайту, створення системи навігації, визначення
логічних зв'язків між різними частинами сайту та створення схеми навігації для
користувачів. Головна мета цього процесу — забезпечити логічний і зручний
доступ користувачів до інформації, забезпечити однорідність і послідовність
відвідування сторінок, а також спростити адміністрування та редагування сайту.
Однією з частин проектування логічної структури сайту є діаграма класів,
яка дозволяє розробникам чітко організувати функціональність програми,
ідентифікувати класи та їх атрибути, методи і взаємозв'язки. Діаграма класів
спрощує розуміння архітектури програми, сприяє її модульності та полегшує
взаємодію між розробниками у команді. Такий підхід допомагає підвищити
якість програмного продукту, знижує ризики помилок та сприяє більш
ефективному управлінню проектом в цілому.
Рисунок 2.9 Діаграма класів
Важливою частиною розробки сайту є архітектурне проектування сайту.
Архітектурне проектування сайту — це процес створення загальної структури та
організації веб-сайту з точки зору його компонентів, взаємозв'язків та
розгортання на серверах.
Діаграма компонентів візуалізує основні компоненти системи та їх
взаємодію. Вона включає у себе модулі, сервіси та інші ключові елементи, що
складають архітектуру веб-сайту.
Рисунок 2.10 Діаграма компонентів
Діаграма розгортання показує, як саме компоненти системи фізично
розташовані на серверах або інших обчислювальних пристроях, а також зв'язки
між ними та зовнішніми системами.
Рисунок 2.11 Діаграма розгортання
Ці діаграми є важливими інструментами для розробників, оскільки вони
допомагають чітко спланувати структуру сайту, забезпечити масштабованість та
ефективність веб-додатку, а також підвищити його надійність і безпеку.
Ще одним важливим процесом є моделювання поведінки системи, який
визначає як система взаємодіє з користувачами та іншими системами в різних
сценаріях використання. Найкраще можна проілюструвати ці процеси за
допомогою діаграми послідовностей та діаграми взаємодії.
Діаграма послідовності ілюструє послідовність взаємодій між об'єктами
системи в конкретному сценарії. Вона дозволяє візуалізувати порядок виконання
операцій та передачу повідомлень між об'єктами.
Рисунок 2.12 Діаграма послідовності
Діаграма взаємодії показує взаємодію між об'єктами системи у вигляді
взаємозв'язків та повідомлень. Ця діаграма допомагає розуміти, як об'єкти
взаємодіють між собою та як вони спільно досягають певних цілей.
Рисунок 2.13 Діаграма взаємодії
Ці діаграми дозволяють не лише краще зрозуміти процеси та логіку в
системі, але й сприяють уточненню вимог до програмного забезпечення та
виявленню можливих проблем в ранніх етапах розробки.
Моделювання бізнес-процесів дозволяє чітко визначити всі аспекти
функціонування інформаційного ресурсу [18]. Цей процес включає аналіз
поточних процесів взаємодії з користувачами, адміністраторами, ідентифікацію
оптимальних методів обробки та подання інформації. Моделювання дозволяє
виявити та усунути можливі недоліки, покращити ефективність взаємодії з
користувачами, забезпечити зручний та інтуїтивно зрозумілий інтерфейс для
навігації сайтом. Крім того, воно сприяє покращенню управління контентом,
оптимізації процесів доставки інформації, а також забезпечує високий рівень
якості обслуговування аудиторії.
РОЗДІЛ 3. Проєктування інформаційного web-ресурсу
3.1. Основні функції інформаційного web-вебресурсу
Розроблюваний вебресурс, присвячений кавовій тематиці, орієнтований на
створення комфортного середовища для ознайомлення з матеріалами про каву, її
традиції, рецепти та культуру споживання. Основна мета — надати відвідувачам
інформативний, доступний та водночас інтуїтивно зрозумілий контент у
привабливому середовищі.
Головна сторінка виконуватиме роль вітрини сайту: вона знайомить
користувача з найпопулярнішими статтями, пропонуючи короткий опис кожної з
них із можливістю перейти до повного перегляду. Візуально головна сторінка є
збалансованою, завдяки наявності чітко структурованого хедера з навігацією та
футера. Це забезпечує швидкий доступ до всіх ключових розділів і створює
враження завершеного, гармонійного інтерфейсу.
Окрему увагу буде приділено сторінці зі статтями, яка реалізована у
вигляді повноцінного каталогу, що дозволяє переглядати всі наявні публікації з
коротким вступом до кожної. Користувач має змогу переходити до перегляду
повного тексту статті, а також зручно перемикатися між ними в циклічному
порядку. Це дає можливість читати матеріали послідовно, не повертаючись
щоразу до списку. Окрім цього, реалізована система коментарів, що дозволяє
залишити свою думку або зауваження під кожною публікацією, тим самим
створюючи інтерактивний простір для обговорення.
Сторінка «Про нас» виконуватиме важливу роль у формуванні довіри до
ресурсу. На ній буде представлено авторів проєкту — з короткою інформацією
про кожного, а також контактами для зв’язку та посиланнями на відповідні
соціальні профілі. Це не лише надає прозорості, а й дозволяє читачеві краще
зрозуміти, хто стоїть за створенням контенту, формуючи емоційний зв’язок із
аудиторією.
Функціонал авторизації та реєстрації забезпечуватиме базову
персоналізацію досвіду користувача. Сайт дозволить створювати новий профіль
або входити до вже існуючого. Задля зручності всі дані зберігаються в
локальному сховищі браузера, що дає змогу зберігати інформацію навіть після
закриття сторінки без необхідності звертання до серверу. Це рішення спрощує
структуру проєкту й водночас дозволяє реалізувати основні потреби
користувачів без втрати функціональності.
Таким чином, функціональність сайту охопить ключові потреби цільової
аудиторії — отримання якісної інформації, обмін думками та практичне
застосування знань. Це створює передумови для формування довготривалого
інтересу користувачів до ресурсу та розвитку лояльної онлайн-спільноти.
3.2. Опис структурної (функціональної) схеми сайту
Структура створеного вебресурсу побудована так, щоб забезпечити
максимально зрозумілу та зручну навігацію для користувачів. Усі основні
елементи інтерфейсу об'єднані в єдину логічну систему, де кожен розділ виконує
конкретну функцію і водночас взаємодіє з іншими.
Рисунок 3.1 Діаграма "User flow"
На передньому плані — головна сторінка, яка виступить центральним
навігаційним вузлом. Вона надає короткий огляд найцікавіших і
найпопулярніших статей, що дозволяє новим відвідувачам швидко ознайомитися
зі змістом ресурсу. Присутність фіксованого заголовка з меню на всіх сторінках
забезпечує зручний перехід до інших розділів незалежно від того, де саме
перебуває користувач. Завершує структуру футер, формуючи завершене
візуальне оформлення.
Функціональність розділу зі статтями буде реалізована як динамічний
список, що дозволяє користувачу швидко переглядати публікації й обирати ті, що
його зацікавили. Кожна стаття відкривається на окремій сторінці, де буде
реалізовано плавний перехід до наступного матеріалу, що дозволяє зручно читати
контент послідовно. Також буде можливість повернутися до загального списку,
не втрачаючи орієнтацію у структурі сайту.
Інформація про авторів буде розміщена у відповідному розділі, де
відображено фотографії, короткі біографії та контактні дані. Це не лише надає
ресурсу прозорості, а й дозволяє читачам відчути реальну присутність людей за
контентом, що посилює емоційний зв’язок з аудиторією. Тут же знаходитимуться
посилання на соціальні мережі, які забезпечують додатковий канал комунікації.
Розділ авторизації поєднає в собі форми входу та реєстрації, забезпечуючи
зручний доступ до персоналізованого функціоналу. Навіть у відсутності
складного серверного механізму, реалізація через локальне сховище дозволяє
зберігати дані користувача без втрати функціональності.
З точки зору технічної реалізації, структура буде побудована на основі
компонентного підходу. Це дасть змогу зручно розділити інтерфейс на незалежні
функціональні блоки, які легко підтримувати, тестувати та масштабувати. Така
організація не лише підвищує гнучкість, але й забезпечує швидку реакцію сайту
на дії користувача.
Рисунок 3.2 Структура проєкту
Загальна схема побудови ресурсу спрямована на логічність, стабільність та
доступність — усе це створює сприятливі умови для комфортної роботи з
контентом незалежно від технічної підготовки користувача.
3.3. Опис логічної схеми сайту
Логічна схема вебресурсу базується на простій, інтуїтивно зрозумілій
моделі, яка дозволяє користувачеві без труднощів орієнтуватися на сайті й
виконувати основні дії — від ознайомлення з контентом до взаємодії з ним. Уся
побудова взаємозв’язків між сторінками спрямована на створення
передбачуваного, комфортного користувацького досвіду.
Рисунок 3.3 Логічна схема сайту
Відправною точкою є головна сторінка, яка виконує роль навігаційного
хабу. Звідси користувач зможе перейти до каталогу статей, ознайомитися з
популярними публікаціями або скористатися навігаційним меню для переходу до
інших розділів. Навігація є сталою на всіх сторінках сайту, що дозволяє легко
перемикатися між розділами без необхідності повертатися на головну.
Каталог статей представлений у вигляді списку, де кожна публікація має
короткий опис і можливість відкриття повної версії. При перегляді конкретної
статті користувач може перейти до наступної або попередньої без повернення до
загального списку, що значно спрощує ознайомлення з контентом. Після
ознайомлення зі статтею передбачено можливість залишити коментар, якщо
користувач авторизований. У разі відсутності авторизації система пропонує
перейти на сторінку входу або реєстрації, після чого дію (написання коментаря)
можна завершити без повторного пошуку статті.
Розділ «Про нас» не лише містить інформацію про авторів сайту, але й
логічно вплетений у загальну навігацію. Він доступний з будь-якої сторінки, що
дозволяє вільно ознайомлюватися з командою проєкту незалежно від поточного
розділу. Контактна інформація та соціальні посилання також органічно
вмонтовані у футер, який присутній на кожній сторінці, що посилює логічну
зв’язність між елементами сайту.
Сторінка авторизації та реєстрації є логічно незалежною, проте доступ до
неї здійснюється з будь-якої точки сайту, зокрема — при спробі скористатися
персоналізованими функціями. Після успішного входу користувач автоматично
повертається до тієї сторінки, з якої починав, що дозволяє не втрачати контекст.
Таким чином, логіка побудови сайту ґрунтується на принципах
передбачуваності та мінімізації зайвих кроків. Усі переходи між сторінками є
послідовними й логічно обґрунтованими, що дозволяє забезпечити плавний і
приємний користувацький досвід без розривів у навігації чи взаємодії.
3.4. UX/UI-дизайн сайту, концепція і прототипи
Розробка UX/UI-дизайну стала одним з найважливіших етапів створення
вебресурсу, оскільки саме через інтерфейс відбувається безпосередній контакт
користувача з системою [19][20]. Весь дизайн будувався з позиції користувача,
який має отримати не лише естетичне задоволення, а й чітке відчуття контролю,
зручності та передбачуваності під час взаємодії з сайтом.
Концепція дизайну ґрунтується на уявному портреті цільової аудиторії —
це люди, які цікавляться кавою, шукають рецепти, хочуть почитати тематичні
статті або поділитися враженнями. Тому ключовим завданням було створити
інтерфейс, який би не відволікав, а допомагав зануритися у зміст, залишаючись
при цьому легким для освоєння.
У плані візуального оформлення було обрано теплу, природну кольорову
палітру, натхненну відтінками кави — від м’якого бежевого до глибокого
еспресо-коричневого. Це рішення підтримує загальну атмосферу ресурсу,
створює емоційний зв’язок і формує відчуття затишку. Шрифтові пари підібрано
з урахуванням читабельності як на великих екранах, так і на мобільних
пристроях. Заголовки акцентовані, проте не агресивні, тоді як основний текст —
легкий для читання впродовж тривалого часу.
У структурному плані сайт побудований на принципах мінімалізму:
відсутність зайвих декоративних елементів, чітка ієрархія контенту, логічне
розміщення кнопок та блоків. Усі дії, які користувач може виконати — читання
статті, написання коментаря, перехід на іншу сторінку — реалізовані
максимально очевидно. Наприклад, під кожною статтею є зрозуміла форма
коментарів, з підказкою щодо авторизації, якщо користувач ще не увійшов у
систему. Навігаційне меню фіксоване і дозволяє перейти до будь-якого розділу
без необхідності прокручування.
З технічної точки зору, дизайн реалізовано за принципом компонентності.
Це означає, що кожен елемент інтерфейсу — кнопка, картка статті, форма
реєстрації — створений як окремий незалежний блок, який можна
перевикористовувати або змінювати без впливу на інші частини сайту. Такий
підхід забезпечує не лише стабільність роботи ресурсу, але й дає змогу легко
впроваджувати нові функції або змінювати існуючі.
Окремо варто зупинитися на процесі прототипування. На основі
функціональних вимог до сайту було створено низку інтерактивних макетів.
Вони дозволили перевірити логіку розміщення елементів, сценарії переходів і
поведінку інтерфейсу в різних ситуаціях. Прототипи демонструвалися кільком
користувачам, які не брали участі в розробці, що дозволило зібрати зворотний
зв’язок і внести корисні корективи ще до початку програмної реалізації.
У межах прототипів моделювалися такі сценарії, як: відкриття головної
сторінки, перегляд списку статей, читання повного матеріалу, написання
коментаря, реєстрація нового профілю.
Особливу увагу було приділено забезпеченню кросплатформенності web-
ресурсу, зокрема його коректній роботі на різних типах пристроїв. Інтерфейс
адаптовано під різні розміри екранів, що гарантує зручність користування та
повноцінну функціональність незалежно від платформи.
Рисунок 3.4 Прототипи сайту
На завершення варто зазначити, що UX/UI-дизайн у цьому проєкті виконує
не лише роль візуальної оболонки, а й виступає важливою частиною логіки
взаємодії з сайтом. Він допомагає користувачу орієнтуватися, приймати рішення
та отримувати позитивний досвід, що, своєю чергою, сприяє поверненню
відвідувачів, формуванню лояльної аудиторії та розвитку проєкту в цілому.
РОЗДІЛ 4. Реалізація та тестування ресурсу
4.1. Реалізація фронтенду за допомогою React
Клієнтська частина вебресурсу реалізована з використанням бібліотеки
React, яка на сьогодні є однією з найпопулярніших технологій для створення
сучасних інтерфейсів. Її основна перевага — компонентно-орієнтована
архітектура, що дає змогу розбити інтерфейс на незалежні, ізольовані логічні
блоки. Це суттєво полегшує супровід, модифікацію та масштабування проєкту в
майбутньому.
Розробку було розпочато з ініціалізації проєкту за допомогою утиліти
create-react-app, яка надала базову структуру з налаштуванням Webpack, Babel,
ESLint і підтримкою JSX. Проєкт має стандартну модульну структуру з чітким
поділом на папки assets, components, data, pages. Така організація дозволяє
зберігати чистоту коду та забезпечує логічну навігацію серед файлів.
Усі функціональні сторінки реалізовані як React-компоненти: головна
(HomePage.jsx), список статей (Articles.jsx), окрема стаття (ArticlePage.jsx),
авторизація (Auth.jsx) та сторінка «Про нас» (About.jsx). Також винесено загальні
частини сайту — навігаційне меню (Header.jsx), підвал (Footer.jsx) та секцію
коментарів (CommentSections.jsx) — до окремих компонентів, що дозволяє
використовувати їх повторно на всіх сторінках і забезпечує однаковість
структури інтерфейсу.
Одним із ключових компонентів є ArticlePage.jsx, який відповідає за
відображення як окремої статті, так і повного списку всіх публікацій, залежно від
того, чи передано параметр id у маршруті. У цьому компоненті реалізовано
умовне рендерування на основі присутності ідентифікатора. Якщо параметр
відсутній, користувач бачить перелік усіх статей з коротким описом,
зображенням та кнопкою «Читати далі». Якщо ж id передано, компонента
знаходить відповідну статтю з масиву articles, виводить її повний текст та
зображення, дату публікації й автора. Також реалізовано навігацію до наступної
статті за принципом циклічного переходу. За допомогою хука useNavigate можна
швидко повертатися до загального списку, а useParams дозволяє отримати доступ
до параметрів маршруту. Компонент коментарів (CommentSection)
підключається як дочірній, і його виклик відбувається в нижній частині сторінки,
що дозволяє користувачам взаємодіяти з контентом після прочитання.
Наведений фрагмент коду ArticlePage.jsx відповідає за відображення
списку всіх статей, повний код наведено в додатку В.
const ArticlePage = () => {
const { id } = useParams();
const navigate = useNavigate();
if (!id) {
return (
<div className="article-wrapper">
<div className="all-articles">
<h2>Усі статті</h2>
<ul className="article-list">
{articles.map((article) => (
<li key={article.id} className="article-item">
<h3>{article.title}</h3>
<div className="article-content">
{article.image && (
<img
src={article.image}
alt={article.title}
className="article-image"
/>
)}
<div>
<p>{article.content.substring(0, 100)}...</p>
<Link to={`/article/${article.id}`} className="read-more-btn">
Читати далі
</Link>
</div>
</div>
</li>
))}
</ul>
</div>
</div>
);
}
Рисунок 4.1 Сторінка повної статті
Маршрутизація в межах клієнтської частини реалізована за допомогою
бібліотеки react-router-dom, яка забезпечує динамічну навігацію без
перезавантаження сторінки. У файлі App.jsx описано основну структуру
застосунку — компоненти обгорнуті у Router, що дозволяє задавати різні шляхи
для відображення відповідного контенту. Кожна сторінка сайту підключається як
окремий React-компонент: головна (HomePage), список статей або окрема стаття
(ArticlePage), сторінка про команду (About) та сторінка авторизації (Login).
Також у коді використано глобальний фон, який задається динамічно через inline-
стилі, що демонструє застосування змінних зображень у стилізації.
Код головного компоненту App.jsx, що відповідає за маршрутизацію між
сторінками вебресурсу за допомогою бібліотеки react-router-dom:
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Footer from './components/Footer';
import HomePage from './pages/HomePage';
import ArticlePage from './pages/ArticlePage';
import Login from './pages/Login';
import About from "./pages/About";
import bgImage from './assets/images/coffee-bg.jpg';
function App() {
const backgroundStyle = {
backgroundImage: `url(${bgImage})`,
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
minHeight: '100vh',
};
return (
<Router>
<div style={backgroundStyle}>
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/article" element={<ArticlePage />} />
<Route path="/article/:id" element={<ArticlePage />} />
<Route path="/about" element={<About />} />
<Route path="/login" element={<Login />} />
</Routes>
<Footer />
</div>
</Router>
);
}
export default App;
Особливу увагу було приділено адаптивності дизайну. Усі компоненти
верстано з урахуванням мобільних пристроїв, використовуючи гнучку сітку,
media-запити та відсоткові значення ширини. Це забезпечує коректне
відображення на різних екранах — від смартфонів до великих моніторів. Крім
того, верстка реалізована з урахуванням принципів доступності: забезпечено
контрастність текстів, зручний розмір шрифтів, інтуїтивно зрозумілі кнопки,
семантичні HTML-елементи.
Для зберігання стану та роботи з даними на початковому етапі було обрано
Local Storage, що дозволило реалізувати базову функціональність (наприклад,
збереження профілю користувача після входу, коментарі до статей) без
необхідності бекенду. Дані зчитуються та оновлюються через відповідні React-
хуки, забезпечуючи реактивність інтерфейсу.
Цей підхід простий у реалізації та дозволяє зберігати дані без серверної
частини. Однак LocalStorage не призначений для зберігання конфіденційної
інформації, оскільки дані там зберігаються у відкритому вигляді і можуть бути
доступні через скрипти на стороні клієнта або у випадку атак типу XSS. Тому у
подальших версіях ресурсу планується впровадження серверної частини з
безпечним зберіганням і обробкою персональних даних.
Інтерфейс форми реалізовано у вигляді компонента Login, який підтримує
два режими: реєстрацію нового користувача та вхід у вже існуючий обліковий
запис. Кожен режим має власну валідацію — перевіряється наявність усіх
обов’язкових полів, правильність формату електронної пошти та відповідність
логіну й паролю. Перемикання між режимами відбувається через звичайну
кнопку у нижній частині форми.
Під час реєстрації дані нового користувача (ім’я, email, пароль) додаються
до масиву, який зберігається у localStorage [21] під ключем users. Перед
збереженням перевіряється, чи не існує вже облікового запису з такою адресою
електронної пошти. У разі успіху користувач отримує повідомлення з
підтвердженням і може одразу перейти до входу.
Функція обробки реєстрації (handleRegister)
const users = JSON.parse(localStorage.getItem("users")) || [];
const existing = users.find((u) => u.email === form.email);
if (!existing) {
users.push({ name: form.name, email: form.email, password: form.password });
localStorage.setItem("users", JSON.stringify(users));
}
Під час авторизації користувач вводить email і пароль, які порівнюються з
даними збережених облікових записів. Якщо збіг знайдено, інформація про
поточного користувача зберігається у localStorage [22] під окремим ключем
currentUser, що дозволяє виводити індивідуальне вітання, а також надає
можливість керувати сесією.
Функція входу (handleLogin)
const found = users.find((u) => u.email === form.email && u.password ===
form.password);
if (found) {
localStorage.setItem("currentUser", JSON.stringify(found));
setCurrentUser(found);
}
При повторному завантаженні сторінки, якщо currentUser існує в сховищі,
інтерфейс автоматично визначає, що користувач уже авторизований. У цьому
випадку відображається його ім’я та кнопка «Вийти», яка очищає збережені дані
й повертає інтерфейс до форми авторизації.
Рисунок 4.2 Повідомлення після авторизації
Кожен компонент має окремий CSS-модуль або SCSS-стилі, що дає змогу
локалізувати оформлення та уникати конфліктів між стилями різних частин
сайту. Назви класів структуровані відповідно до методології BEM або сучасної
CSS-in-JS практики.
Рисунок 4.3 DOM-структура Головної сторінки в засобах розробника браузера
Завдяки використанню React-підходу та модульної структури код сайту
залишився чистим, зрозумілим і готовим до подальшого розширення. За потреби
будь-яку частину інтерфейсу можна легко вдосконалити або замінити без впливу
на інші блоки.
Таким чином, реалізація фронтенду за допомогою React дозволила
створити швидкий, стабільний та адаптивний інтерфейс, що повністю відповідає
потребам користувача та закладеним у проєкт функціональним вимогам.
4.2. Виведення статей та іншого контенту у React
Один із ключових аспектів реалізації вебресурсу полягає у динамічному
виведенні контенту, зокрема тематичних статей, візуального супроводу
(зображень) та пов’язаної інформації. У проєкті використано масив об’єктів у
форматі JavaScript (articles.js) для зберігання даних про статті, а також
інтегровано систему коментарів, яка працює з localStorage [21]. Усе це
реалізовано через компонентну модель React, що забезпечує логічний поділ
відповідальностей між сторінками та дозволяє легко керувати даними.
На сторінці /article користувач бачить повний список доступних
публікацій. Для цього у компоненті ArticlePage передбачено перевірку наявності
параметра id у URL. Якщо параметр не передано, компонент рендерить
оглядовий список усіх статей. Кожна стаття представлена у вигляді картки, яка
включає зображення, заголовок, уривок тексту та кнопку переходу до повної
версії. Дані беруться з локального масиву, що дозволяє уникнути підключення до
зовнішнього API на цьому етапі розробки.
Фрагмент рендерингу списку статей у ArticlePage.jsx
{articles.map((article) => (
<li key={article.id} className="article-item">
<h3>{article.title}</h3>
<div className="article-content">
{article.image && <img src={article.image} alt={article.title} />}
<div>
<p>{article.content.substring(0, 100)}...</p>
<Link to={`/article/${article.id}`}>Читати далі</Link>
</div>
</div>
</li>
))}
Рисунок 4.4 Сторінка зі списком статей
Коли користувач переходить за посиланням на окрему статтю (наприклад,
/article/2), відбувається динамічне зчитування параметра id за допомогою хука
useParams. Знайдений об’єкт статті виводиться на екран у повному форматі — з
усім текстом, зображенням, датою та автором. Окрім цього, реалізовано зручну
навігацію між статтями: кнопка «Наступна стаття» дозволяє переглядати контент
циклічно, не повертаючись до загального списку. Це підвищує зручність читання
та забезпечує плавний користувацький потік.
Ще однією важливою частиною контенту є коментарі, що додаються
користувачами. Усі коментарі зберігаються в localStorage, причому ключ
створюється динамічно на основі articleId, що гарантує ізольованість між
статтями. Завдяки цьому кожна публікація має власний набір коментарів, які
зберігаються навіть після оновлення сторінки.
Збереження коментарів у localStorage (CommentSection.jsx)
useEffect(() => {
const savedComments = JSON.parse(localStorage.getItem(`comments-
${articleId}`)) || [];
setComments(savedComments);
}, [articleId]);
const saveComments = (newComments) => {
localStorage.setItem(`comments-${articleId}`, JSON.stringify(newComments));
setComments(newComments);
};
Рисунок 4.5 Секція «Коментарі» під статтею
Для реалізації взаємодії з контентом використовуються стандартні React-
хуки (useState, useEffect, useParams, useNavigate), що забезпечують динамічну
реакцію на дії користувача [23]. Наприклад, після натискання кнопки
«Надіслати» новий коментар додається до списку й одразу ж зберігається у
сховищі, оновлюючи стан без перезавантаження сторінки.
Крім текстового контенту, у ресурсі також реалізовано підтримку
зображень, які додаються до кожної статті. Вони завантажуються з локальної
директорії assets/images і відображаються у списку та в повному перегляді статті.
Це значно покращує візуальне сприйняття й робить інтерфейс живішим.
Загалом, підхід до виведення контенту у React базується на принципах
компонентності, повторного використання та мінімізації залежності від
зовнішніх сервісів. Така структура не лише спрощує розробку, а й дозволяє легко
інтегрувати нові типи контенту (наприклад, рецепти або відгуки) у подальших
ітераціях проєкту.
4.3. Тестування функціоналу та інтерфейсу
Тестування вебсайту — це критично важливий етап, що передбачає
перевірку ресурсу на коректність функціонування, стабільність, відповідність
очікуванням користувачів, а також дотримання технічних та візуальних
стандартів [24] . Метою тестування є виявлення та усунення помилок до того, як
продукт потрапить до кінцевого користувача.
У процесі перевірки створеного сайту було підтверджено стабільну роботу
основних функцій, зокрема: навігація між сторінками виконується безперервно
завдяки використанню React Router, контент завантажується без затримок,
зображення відкриваються швидко, адаптивність забезпечена — сайт коректно
відображається на різних розмірах екранів. Також протестовано форму
авторизації/реєстрації: введення даних, перевірка помилок, збереження стану у
localStorage відбувається відповідно до очікуваної логіки. Усі коментарі до статей
зберігаються й відображаються належним чином. При перевірці сценаріїв з
невалідними даними система реагує відповідними повідомленнями.
Чек-лист функціонального тестування сайту наведено у додатку Г, так само
як і чек-лист верстки наведено у додатку Д. Усі тест-кейси розроблені на основі
вимог до сайту, включаючи базові сценарії користувача: перегляд статей,
додавання коментарів, перехід до наступної статті, використання навігаційного
меню, роботу в мобільній версії.
У ході тестування проводився аналіз поведінки продукту в різних умовах:
на десктопах і мобільних пристроях, у популярних браузерах (Chrome, Firefox),
при різних розмірах екрана [25]. Була перевірена коректність стилів,
узгодженість інтерфейсу та відповідність колористики фірмовій тематиці (кавова
палітра). Всі знайдені дрібні недоліки (типографічні помилки, некоректне
форматування абзацу при масштабуванні) були усунені.
Процес тестування включав такі етапи:
1. Робота із вимогами. Було проаналізовано технічне завдання, макети,
список бажаного функціоналу. Жодних критичних невідповідностей між
очікуваннями й реалізацією не виявлено.
2. Розробка стратегії тестування. Визначено цілі, методи тестування та
сценарії для перевірки окремих частин сайту. Враховано специфіку React-
застосунку та локального збереження даних.
3. Створення тестової документації. Підготовлено чек-листи для перевірки
функціональності, верстки, адаптивності, логіки переходів, авторизації та роботи
з localStorage.
4. Тестування прототипу. На початковому етапі було протестовано макети та
базову навігацію для виявлення проблем ще до впровадження повного
функціоналу.
5. Основне тестування. Було виконано покрокове проходження основних
сценаріїв користувача: відкриття головної сторінки, перегляд і читання статей,
написання та видалення коментарів, вхід та вихід з акаунта. Перевірено циклічну
навігацію між статтями. Усі перевірені функції працювали стабільно.
6. Стабілізація. Було усунено виявлені незначні проблеми з версткою в
мобільній версії та додано перевірку форм. Після цього ресурс демонстрував
стабільну роботу.
7. Експлуатація. Після завершення основної розробки сайт додатково
перевірявся у процесі використання. Не виявлено жодних критичних багів.
Система стабільно працює навіть після перезавантаження завдяки збереженню
стану користувача у localStorage.
Таким чином, вебсайт відповідає усім визначеним технічним і
функціональним вимогам. Його стабільна робота, швидке завантаження
зображень, чітка навігація та коректна робота форм підтверджують якість
реалізації. Тестування продемонструвало, що створений продукт готовий до
використання кінцевими користувачами. Проте, як і у будь-якому цифровому
рішенні, подальше вдосконалення можливе після аналізу реального досвіду
взаємодії з сайтом.
ВИСНОВКИ
У результаті виконання кваліфікаційної роботи було досягнуто основну
мету — створено сучасний вебресурс, присвячений кавовій тематиці, який
поєднує в собі зручність користування, інформативність та естетичну
привабливість. Реалізацію проєкту здійснено з використанням бібліотеки React,
мови JavaScript, HTML5, CSS3, а також механізмів локального зберігання даних
у браузері. Такий технологічний підхід дав змогу реалізувати динамічний,
адаптивний інтерфейс без серверної частини, що значно спростило розгортання
ресурсу й водночас забезпечило всі основні функції: перегляд статей,
коментування, авторизацію, збереження сесій користувачів.
У процесі роботи було детально проаналізовано існуючі сайти аналогічної
тематики. Це дало змогу чітко визначити функціональні та візуальні недоліки
конкурентів і сформувати обґрунтоване бачення щодо структури та можливостей
майбутнього ресурсу. Також було спроєктовано логічну структуру сайту, яка
передбачає чітку навігацію, зручний поділ на розділи та швидкий доступ до
потрібної інформації.
Особливу увагу приділено дизайну інтерфейсу — він був розроблений
відповідно до принципів UX/UI із урахуванням очікувань цільової аудиторії.
Було обрано теплу, природну кольорову палітру, що асоціюється з тематикою
сайту, шрифти з високою читабельністю та мінімалістичний підхід до візуальних
елементів, що дозволило зосередити увагу користувача на змісті.
Прототипування дозволило перевірити зручність інтерфейсу до початку
реалізації та своєчасно внести зміни.
Функціональність вебресурсу реалізовано у вигляді компонентів React. Усі
основні сторінки — головна, каталог статей, перегляд окремої публікації, «Про
нас», авторизація — розроблено з урахуванням модульності й можливості
подальшого розширення. Коментарі, авторизація та збереження даних
реалізовані через localStorage, що дозволило забезпечити базову персоналізацію
без використання бази даних.
Усі ключові функції було протестовано на практиці. Сайт демонструє
стабільну роботу на різних пристроях, коректно масштабується та швидко
завантажується. Тестування навігації, інтерактивних елементів, адаптивності та
збереження даних підтвердило відповідність реалізованої системи початковим
технічним вимогам.
Завдяки обґрунтованому вибору інструментів і технологій, вдалося досягти
високого рівня якості при збереженні простої архітектури. React у поєднанні з
локальним зберіганням забезпечив можливість створення гнучкого й
динамічного інтерфейсу без складних серверних рішень, що особливо важливо
на етапі MVP (мінімально життєздатного продукту).
Вебресурс показав добру прогнозовану ефективність як пілотний продукт
для просування кавової культури в інтернеті. Сайт може бути використаний як
інформаційна платформа для кав’ярень, навчальних ініціатив, гурманів та
широкої аудиторії, яка цікавиться кавою. За результатами тестування ресурс вже
доступний до використання в локальному середовищі, а за потреби його легко
адаптувати для реального впровадження.
Ресурс має потенціал до масштабування та може стати основою для
створення повноцінної онлайн-платформи з інформаційною, соціальною та
комерційною складовими. У перспективі можлива також розробка мобільного
застосунку, який забезпечить ще зручніший доступ до контенту з будь-якого
пристрою.
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ТА ЛІТЕРАТУРИ
1. Державна служба статистики України. Офіційні дані про споживання
кави в Україні за 2022 рік. – [Електронний ресурс]. – Режим доступу:
https://ukrstat.gov.ua
2. Harvard T.H. Chan School of Public Health. Coffee and Health. –
[Електронний ресурс]. – Режим доступу:
https://www.hsph.harvard.edu/nutritionsource/food-features/coffee/
3. CoffeeGeek – Інформаційний портал про кавове обладнання та культуру.
[Електронний ресурс]. – Режим доступу: https://www.coffeegeek.com
4. Folks – Український блог про кавову індустрію. [Електронний ресурс]. –
Режим доступу: https://www.folks.com.ua/blog/
5. Кучерява кава – Інформаційний ресурс про кавову культуру.
[Електронний ресурс]. – Режим доступу: https://icoffee.in.ua/
6. PapaKava – Блог про каву, рецепти та обладнання. [Електронний ресурс].
– Режим доступу: https://papakava.ua/ua/blog
7. Крамаренко Г. Ю., Сухоставець С. М. Веб-дизайн та програмування :
підручник. – Київ : Видавництво Ліра-К, 2021. – 336 с.
8. Wieruch R. The Road to React. – 2022. – [Електронне видання]. – Режим
доступу: https://www.roadtoreact.com/
9. Material UI. Component Library. – [Електронний ресурс]. – Режим
доступу: https://mui.com/
10. Макаров В. І. Основи веб-технологій і програмування : навч. посіб. –
Київ : Видавництво КНУ, 2021. – 172 с.
11. Марченко І. В. Веб-технології. HTML5, CSS3, JavaScript : навч. посіб. –
Харків : НТУ "ХПІ", 2021. – 154 с.
12. Duckett J. HTML and CSS: Design and Build Websites. – Wiley, 2011. –
512 p.
13. Cederholm D. CSS Mastery. – 3rd ed. – New Riders, 2017. – 336 p.
14. Freeman E., Robson E. Head First HTML and CSS. – 2nd ed. – O’Reilly
Media, 2014. – 768 p.
15. Глушаков А. О. Основи фронтенд-розробки : метод. рек. – Вінниця :
ВНТУ, 2022. – 92 с.
16. Столяров В. Д. Проектування інформаційних систем. – Київ : КНУТД,
2021. – 240 с.
17. Кришталь Ю. С. Інформаційні системи і технології в управлінні
організаціями : навч. посіб. – Київ : Центр учбової літератури, 2020. – 304 с.
18. Єременко І. І., Павленко А. А. Моделювання інформаційних систем. –
Полтава : ПНТУ, 2020. – 184 с.
19. Громов Ю. В. Основи проєктування користувацького інтерфейсу : навч.
посіб. – Львів : ЛНУ, 2021. – 168 с.
20. Пастушенко В. В. UX/UI дизайн: принципи, методи, інструменти : навч.
посіб. – Львів : ЛНТУ, 2022. – 198 с.
21.Mozilla Developer Network. HTML Reference. – [Електронний ресурс]. –
Режим доступу: https://developer.mozilla.org/
22. Фленаган Д. JavaScript. Повний посібник : пер. з англ. – 7-е вид. – К. :
Діалектика, 2020. – 1080 с.
23. React Documentation. Official Website. – [Електронний ресурс]. – Режим
доступу: https://reactjs.org/
24. BrowserStack. Web Application Testing Checklist. – [Електронний
ресурс]. – Режим доступу: https://www.browserstack.com/guide/web-application-
testing-checklist
25. Global App Testing. Functional Testing Checklist. – [Електронний ресурс].
– Режим доступу: https://www.globalapptesting.com/blog/functional-testing-
checklist
ДОДАТОК А
ПОРІВНЯЛЬНА ТАБЛИЦЯ ВЕБ-РЕСУРСІВ ПРО КАВУ
Сайт Кучерява
CoffeeGeek Folks Кава PapaKava
Огляди
кавових Новини Рецепти,
Основні теми машин, кавової огляди Огляди кави,
поради, індустрії, обладнання, рецепти,
рецепти поради поради поради
Частота
оновлень Регулярно Регулярно Регулярно Регулярно
Додаткові Форуми, Статті,
ресурси статті огляди Відео, статті Відео, статті
Велика
спільнота, Український
блог з Орієнтація Орієнтація
Особливості детальні актуальними на українську на українську
огляди новинами та кавову кавову
кавових
машин порадами культуру культуру
Застарілий,
Дизайн та UX але Сучасний, Сучасний, Сучасний,
функціональ зручний інтуїтивний зручний
ний
Мобільна
версія Так Так Так Так
Швидкість
завантаження Низька Висока Висока Висока
Висока, Висока,
Якість детальні Висока, Висока,
контенту технічні актуальні якісні
теми рецепти та доступні
огляди огляди матеріали
Взаємодія Взаємодія Взаємодія Взаємодія
Спільнота та
взаємодія через через через через
коментарі коментарі коментарі коментарі
Мова
підтримки Англійська Українська Українська Українська
ДОДАТОК Б
СЛОВНИК ПРЕДМЕТНОЇ ОБЛАСТІ
А Арабіка — один з найпопулярніших видів кавових зерен, що вирощується в різних
регіонах світу. Відрізняється м'яким смаком та ароматом.
Аеропрес — метод приготування кави, який використовує спеціальний прилад для
створення тиску, що дозволяє отримати насичений смак напою.
Б Бариста — людина, що спеціалізується на приготуванні кави, зокрема еспресо та
його варіацій.
В Віденська кава — традиційний напій, що складається з чорної кави з додаванням
збитих вершків.
Г Гейзерна кавоварка — пристрій для приготування кави, що використовує пар для
підйому води через кавові зерна.
Д Дегустація кави — процес оцінки смаку, аромату та текстури кави.
Е Еспресо — маленький об’ємний напій, приготований під високим тиском з
використанням спеціальної машини. Основна база для багатьох кавових напоїв.
З Зелена кава — сировинні кавові зерна, які ще не піддавались обсмаженню.
Зерно — Насіння кавового дерева, з якого отримують кавовий напій.
І Імерсивний метод — метод приготування кави, де кавові зерна замочуються у воді
на певний час перед фільтрацією (наприклад, френч—прес).
К Кавова культура — сукупність традицій, звичаїв та ритуалів, пов'язаних з
приготуванням та вживанням кави.
Кавомолка — пристрій для подрібнення кавових зерен перед приготуванням.
Л Лате — кавовий напій на основі еспресо з великою кількістю молока і невеликою
кількістю піни.
Лате арт — це особливий спосіб вливання спіненого молока в еспресо, завдяки чому
на поверхні кави утворюються різні візерунки.
М Мокко — кавовий напій, що поєднує в собі еспресо, гаряче молоко та шоколадний
сироп.
О Обжарка — це термічна обробка кавових зерен, завдяки якій кава має певні
смакові і ароматичні властивості.
П Пуровер — метод приготування кави шляхом повільного наливання гарячої води
на кавові зерна через фільтр.
Р Робуста — інший популярний вид кавових зерен, відомий своєю гіркістю і високим
вмістом кофеїну.
С Смаковий профіль — характеристика смаку кави, яка включає ноти фруктів,
спецій, шоколаду тощо.
Т Тераруар — вплив навколишнього середовища, включаючи ґрунт, клімат та
географію, на смак кавових зерен.
Ф Френч-прес — пристрій для заварювання кави, що включає замочування грубо
змелених зерен у гарячій воді з подальшим фільтруванням через поршень.
ДОДАТОК В
КОД СТОРІНКИ ArticlePage.jsx
import React from "react";
import { useParams, Link, useNavigate } from "react-router-dom";
import articles from "../data/articles";
import CommentSection from "../components/CommentSection";
import "./ArticlePage.css";
const ArticlePage = () => {
const { id } = useParams();
const navigate = useNavigate();
if (!id) {
return (
<div className="article-wrapper">
<div className="all-articles">
<h2>Усі статті</h2>
<ul className="article-list">
{articles.map((article) => (
<li key={article.id} className="article-item">
<h3>{article.title}</h3>
<div className="article-content">
{article.image && (
<img
src={article.image}
alt={article.title}
className="article-image"
/>
)}
<div>
<p>{article.content.substring(0, 100)}...</p>
<Link to={`/article/${article.id}`} className="read-more-btn">
Читати далі
</Link>
</div>
</div>
</li>
))}</ul></div></div>
);
}
const articleIndex = articles.findIndex((a) => a.id.toString() === id);
const article = articles[articleIndex];
if (!article) {
return <p>Статтю не знайдено.</p>;
}
ПРОДОВЖЕННЯ ДОДАТКУ В
КОД СТОРІНКИ ArticlePage.jsx
const nextArticle = articles[(articleIndex + 1) % articles.length];
return (
<div className="article-wrapper">
<div className="article-page">
<h2>{article.title}</h2>
<p className="article-meta">
Автор: {article.author} • {new Date(article.date).toLocaleDateString("uk-
UA")}
</p>
{article.image && (
<img
src={article.image}
alt={article.title}
className="article-full-image"
/>
)}
<div className="article-text">
{article.content
.trim()
.split("\n")
.filter((line) => line.trim() !== "")
.map((paragraph, idx) => (
<p key={idx}>{paragraph.trim()}</p>
))}
</div>
<div className="article-nav">
<Link to="/article" className="nav-btn">
← Назад до списку статей
</Link>
<Link to={`/article/${nextArticle.id}`} className="nav-btn next">
Наступна стаття →
</Link>
</div>
<CommentSection articleId={article.id} />
</div>
</div>
);
};
export default ArticlePage;
ДОДАТОК Г
ЧЕК-ЛИСТ ФУНКЦІОНАЛЬНОГО ТЕСТУВАННЯ САЙТУ
ДОДАТОК Д
ЧЕК-ЛИСТ ТЕСТУВАННЯ ВЕРСТКИ САЙТУ