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/6914| Title: | Web-орієнтована система продажів ігор та ігрових послуг |
| Authors: | Прокопенко , Тетяна Олександрівна Лушпенко, Артем Вікторович |
| Keywords: | web-орієнтована система;продаж;гра;веб - сервіс;веб-сайт |
| Issue Date: | 5-Jun-2025 |
| Abstract: | У сучасному світі цифрових технологій індустрія відеоігор займає одне з провідних місць серед розваг і формує значну частину економіки. З кожним роком зростає попит на цифрові товари, включаючи відеоігри, які стають важливою частиною культурного та економічного життя. Одним з найбільш зручних і популярних способів придбання відеоігор є онлайн-торгівля, оскільки вона дозволяє користувачам швидко і без зайвих зусиль придбати необхідний контент у будь-який час і з будь-якої точки світу. Тому створення ефективної платформи для продажу відеоігор стає важливим кроком для бізнесу, що прагне задовольнити потреби сучасних користувачів. Актуальність розробки веб-сайту для продажу відеоігор зростає через стрімке зростання індустрії електронної комерції та попиту на цифрові розваги. Враховуючи глобалізацію ринку, наявність широкого доступу до Інтернету та активне використання мобільних пристроїв, онлайн-платформи для продажу відеоігор стають основними каналами для придбання контенту. Оскільки конкуренція на ринку відеоігор постійно зростає, створення платформи, яка забезпечує зручний, швидкий і безпечний процес покупки, стає надзвичайно актуальним. Веб-сайт повинен забезпечити високу продуктивність, зручний інтерфейс, інтерактивні функції та безпечну обробку фінансових даних, що є критично важливим для задоволення вимог користувачів та забезпечення ефективної роботи платформи в умовах високих навантажень. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6914 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Лушпенко_WEB-2111.pdf Restricted Access | 2.56 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-орієнтована система продажів ігор та ігрових послуг »
Виконав (-ла): здобувач (-ка) першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2111
Спеціальності 126 Інформаційні системи та
технології
ОП «Web-технології, Web-дизайн»
Лушпенко Артем Вікторович
Керівник: д.т.н., Прокопенко Т.О.
Рецензент: посада, науковий ступінь, вчене
звання, ПІП
Черкаси – 2025 року
1
ЗМІСТ
ВСТУП ................................................................................................................ 2
РОЗДІЛ 1 ОБҐРУНТУВАННЯ НЕОБХІДНОСТІ РОЗРОБКИ ВЕБ
САЙТУ ДЛЯ ПРОДАЖУ ВІДЕОІГОР ......................................................... 4
1.1 Актуальність розробки ............................................................................ 4
1.2 Огляд існуючих аналогів ........................................................................ 6
1.3 Постановка задачі .................................................................................. 11
Висновки до розділу 1..................................................................................... 14
РОЗДІЛ 2 ВИБІР ІНСТРУМЕНТІВ РОЗРОБКИ ТА АРХІТЕКТУРА
ВЕБ - САЙТУ ................................................................................................... 16
2.1 Вимоги до системи ................................................................................ 16
2.1.1 Функціональні вимоги .................................................................. 16
2.1.2 Нефункціональні вимоги .............................................................. 17
2.2 Вибір інструментів розробки ................................................................ 17
2.3 Архітектура веб - сервісу ...................................................................... 22
2.3.1 Діаграма використання ................................................................. 22
2.3.2 Діаграма послідовності ................................................................. 23
2.3.3 Діаграма компонентів ................................................................... 29
2.3.4 Діаграма розгортання .................................................................... 31
Висновки до розділу 2..................................................................................... 34
РОЗДІЛ 3 ОПИС ПРОГРАМНОЇ РЕАЛІЗАЦІЇ ВЕБ - САЙТУ ............ 36
3.1 Опис компонентів UI ............................................................................. 36
3.2 Опис методів .......................................................................................... 39
3.3 Тестування .............................................................................................. 41
Висновки до розділу 3..................................................................................... 53
2
ВИСНОВКИ ..................................................................................................... 55
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .................................................... 58
3
ВСТУП
У сучасному світі цифрових технологій індустрія відеоігор займає
одне з провідних місць серед розваг і формує значну частину економіки. З
кожним роком зростає попит на цифрові товари, включаючи відеоігри, які
стають важливою частиною культурного та економічного життя. Одним з
найбільш зручних і популярних способів придбання відеоігор є онлайн-
торгівля, оскільки вона дозволяє користувачам швидко і без зайвих зусиль
придбати необхідний контент у будь-який час і з будь-якої точки світу.
Тому створення ефективної платформи для продажу відеоігор стає
важливим кроком для бізнесу, що прагне задовольнити потреби сучасних
користувачів. Актуальність розробки веб-сайту для продажу відеоігор
зростає через стрімке зростання індустрії електронної комерції та попиту на
цифрові розваги. Враховуючи глобалізацію ринку, наявність широкого
доступу до Інтернету та активне використання мобільних пристроїв,
онлайн-платформи для продажу відеоігор стають основними каналами для
придбання контенту. Оскільки конкуренція на ринку відеоігор постійно
зростає, створення платформи, яка забезпечує зручний, швидкий і
безпечний процес покупки, стає надзвичайно актуальним. Веб-сайт
повинен забезпечити високу продуктивність, зручний інтерфейс,
інтерактивні функції та безпечну обробку фінансових даних, що є критично
важливим для задоволення вимог користувачів та забезпечення ефективної
роботи платформи в умовах високих навантажень.
Метою дипломної роботи є розробка веб-сайту для продажу
відеоігор, що забезпечує користувачів зручним, інтуїтивно зрозумілим та
безпечним інтерфейсом для перегляду та покупки ігор. Веб-платформа
повинна включати можливість реєстрації та авторизації користувачів,
перегляду ігор, додавання товарів до кошика та здійснення покупок.
4
Важливим аспектом є забезпечення високої швидкості завантаження та
стабільної роботи веб-сайту навіть при великих навантаженнях.
Предметом дослідження є технології та інструменти, що
використовуються для розробки веб-сайтів для продажу відеоігор, а також
принципи проектування, побудови та тестування таких платформ.
Особлива увага приділяється використанню сучасних фреймворків, таких
як React і Vite, для створення високопродуктивних веб-додатків.
Об'єктом дослідження є веб-сайт для продажу відеоігор, що включає
в себе усі необхідні компоненти для забезпечення зручного інтерфейсу
користувача, обробки замовлень, взаємодії з базою даних і забезпечення
безпеки транзакцій. Сайт має бути адаптивним для різних пристроїв та
підтримувати високу продуктивність.
Для досягнення поставленої мети необхідно виконати такі завдання:
1. Розробити функціональні та нефункціональні вимоги до системи.
2. Вибрати та обґрунтувати інструменти розробки, зокрема фреймворки
і бібліотеки, що будуть використовуватись для реалізації веб-сайту.
3. Спроектувати архітектуру веб-сайту, включаючи визначення
взаємодії між компонентами системи.
4. Реалізувати основні функції платформи, такі як реєстрація,
авторизація, перегляд каталогу ігор, додавання товарів до кошика та
здійснення покупок.
5. Провести тестування основних функцій веб-сайту для перевірки
коректності роботи.
6. Проаналізувати результати тестування та оптимізувати
функціональність для покращення користувацького досвіду.
5
РОЗДІЛ 1 ОБҐРУНТУВАННЯ НЕОБХІДНОСТІ РОЗРОБКИ ВЕБ
САЙТУ ДЛЯ ПРОДАЖУ ВІДЕОІГОР
1.1 Актуальність розробки
Актуальність розробки веб-сайту для продажу відеоігор значною
мірою визначається стрімким розвитком індустрії електронної комерції та
постійно зростаючим попитом на цифрові розваги. Сьогодні інтернет-
магазини стають основними каналами для придбання відеоігор, а також
інших цифрових товарів, таких як ігрові доповнення, акаунти або підписки
на сервіси. У зв'язку з цим, важливість створення зручних, швидких і
безпечних онлайн-платформ для продажу контенту є очевидною.
Глобалізація ринку та доступність інтернету на всіх континентах
відкривають нові можливості для ведення бізнесу, а значить, створення
ефективних і привабливих сайтів для електронної торгівлі стає надзвичайно
актуальним. На сучасному етапі розвитку технологій користувачі
вимагають від веб-платформ високої продуктивності, зручності та
швидкості. Веб-сайти, особливо ті, що мають великий обсяг контенту,
повинні швидко завантажуватися, а інтерфейс повинен бути інтуїтивно
зрозумілим і привабливим. Використання сучасних інструментів для
розробки, таких як Vite та React, дозволяє створювати високопродуктивні
веб-додатки з оптимізованим процесом завантаження, що є критично
важливим для утримання уваги користувачів та забезпечення їхнього
комфорту. Vite забезпечує надшвидку збірку і миттєве оновлення, що
дозволяє розробникам ефективно працювати над проєктами, а React
дозволяє створювати адаптивні інтерфейси, що підтримують
інтерактивність і динамічні елементи.
У разі створення веб-сайту для продажу відеоігор важливим аспектом
є не лише функціональність платформи, але й надійність і безпека обробки
фінансових даних. Користувачі повинні мати можливість безпечно
6
здійснювати покупки, отримувати доступ до ігор та інших продуктів, не
побоюючись витоку їхніх персональних даних. Особливо це актуально для
платформи, яка має справу з великими обсягами фінансових транзакцій.
Використання надійних протоколів безпеки, таких як SSL-шифрування для
обміну даними, а також інтеграція з перевіреними платіжними системами,
є важливою частиною створення успішного онлайн-магазину. Важливим
фактором, що визначає успіх веб-сайту для продажу відеоігор, є можливість
швидко реагувати на зміни у вимогах користувачів, а також підтримка
актуальних трендів на ринку ігор. Це включає в себе регулярні оновлення
каталогу ігор, впровадження нових функцій, таких як рекомендації на
основі інтересів користувачів, а також інтеграцію з соціальними мережами
для забезпечення більшої взаємодії з потенційними покупцями. Для
досягнення цих цілей потрібно створювати гнучку інфраструктуру веб-
сайту, яка дозволить швидко впроваджувати нові можливості без
порушення основної функціональності.
Враховуючи всі ці фактори, розробка веб-сайту для продажу відеоігор
з використанням таких сучасних технологій, як Vite і React, є надзвичайно
важливим кроком у розвитку індустрії онлайн-торгівлі. Така розробка не
лише забезпечить ефективність і швидкість роботи веб-сайту, але й
підвищить рівень взаємодії з користувачами, надасть їм більш зручний і
безпечний спосіб покупки та взаємодії з контентом. У майбутньому цей
проєкт може стати основою для створення більш масштабних платформ, що
об'єднують різноманітні сервіси, зокрема для геймерів, що дозволяють не
лише купувати ігри, але й обмінюватися контентом, ділитися враженнями
або брати участь у різноманітних онлайн-турнірах. Таким чином, розробка
такого веб-сайту є важливою для подальшого розвитку електронної
комерції у сфері продажу відеоігор, а використання найсучасніших
технологій дозволить забезпечити високий рівень якості сервісу та
задоволення потреб кінцевих споживачів.
7
1.2 Огляд існуючих аналогів
Огляд існуючих аналогів веб-сайтів для продажу відеоігор дозволяє
отримати чітке уявлення про те, які рішення використовуються на ринку
для забезпечення зручного процесу покупки та продажу ігор. Сьогодні на
ринку існує кілька платформ, які є лідерами в галузі цифрових продажів
ігор, зокрема Steam, Epic Games Store, GOG, PlayStation Store та Xbox Store.
Кожна з цих платформ має свою специфіку, свої переваги та недоліки, які
варто враховувати при розробці власного онлайн-магазину для продажу
відеоігор.
Рисунок 1.1 - Steam[1]
Steam є безперечним лідером серед платформ для цифрового
розповсюдження ігор[1]. Steam пропонує величезний вибір ігор усіх жанрів,
починаючи від інді-проектів до великих блокбастерів. Ключовою
особливістю цієї платформи є її екосистема, яка включає в себе не тільки
продаж ігор, але й функції соціальної взаємодії, модифікацій, досягнень,
стрімінгу тощо. Платформа також славиться постійними знижками та
акціями, що робить її привабливою для користувачів. Однак основним
8
недоліком є високі комісії, які Steam бере з розробників, що може негативно
впливати на фінансову сторону справи для маленьких студій.
Рисунок 1.2 - Epic Games Store[2]
Epic Games Store, хоча й не має такого величезного каталогу, як
Steam, швидко набирає популярність завдяки агресивній маркетинговій
стратегії, зокрема роздачі безкоштовних ігор, що приваблює нових
користувачів[12]. Epic також пропонує нижчі комісії для розробників, що
дозволяє їм отримувати більше прибутку від продажу. Проте платформа
має обмежену кількість функцій порівняно з Steam, зокрема відсутність
підтримки модів, деякі проблеми з інтеграцією соціальних можливостей, а
також менший вибір ігор.
9
Рисунок 1.3 - GOG (Good Old Games)[3]
GOG (Good Old Games) має свою особливість: вона пропонує ігри без
DRM (управління цифровими правами), що дозволяє користувачам
повністю контролювати свої покупки[3]. Це значно відрізняє GOG від
інших платформ, де для гри необхідно бути постійно підключеним до
інтернету або мати обмеження на кількість установок. Однак вартість ігор
на GOG часто вища, а каталог обмежений порівняно з більш популярними
платформами, такими як Steam.
Рисунок 1.4 - PlayStation Store[4]
10
PlayStation Store і Xbox Store — це дві основні платформи для
продажу ігор на відповідних консолях[4]. Вони пропонують користувачам
великий вибір ексклюзивних ігор для своїх консолей, а також інтеграцію з
підписками, такими як PlayStation Plus і Xbox Game Pass[5]. Однак
основним обмеженням є те, що ці платформи працюють тільки на
відповідних консолях і мають менш зручний доступ до контенту з ПК.
Рисунок 1.5 - Xbox Store[5]
Основні проблеми існуючих платформ:
1. Високі комісії — багато великих платформ, таких як Steam та Epic
Games Store, стягують значні комісії з розробників (від 20% до 30%),
що може стати перепоною для малих та незалежних студій.
2. Обмежена підтримка модифікацій — на деяких платформах, таких як
Epic Games Store, відсутня підтримка модів та додаткових елементів,
що знижує рівень взаємодії між гравцями та обмежує творчість.
3. Обмежена екосистема — платформи, такі як PlayStation Store та Xbox
Store, обмежують доступ до контенту лише своїми консолями, що
11
позбавляє геймерів можливості купувати та грати на різних
пристроях.
4. Проблеми з локалізацією та платіжними системами — не всі
платформи підтримують широке коло платіжних систем для всіх
регіонів, що може бути проблемою для користувачів з різних країн.
З огляду на ці обмеження, розробка власного веб-сайту для продажу
відеоігор може стати конкурентоспроможним рішенням. Створення нової
платформи, яка забезпечує гнучкість, знижені комісії, підтримку
модифікацій та кращу підтримку платіжних систем для різних регіонів,
може бути вигідним для як для розробників, так і для користувачів.
Таблиця 1.1 - Порівняння платформ
Платформа Кількість Комісії з Підтримка Проблеми Спеціальні
ігор продажу модів локалізації функції
Steam Величезна 20-30% Так Підтримує Система
багатьох досягнень,
постачальни знижки,
ків, але спільноти
інколи є
обмеження
Epic Games Велика 12% Ні Обмежена Безкоштовні
Store підтримка ігри, низькі
деяких комісії для
регіонів розробників
GOG Обмежена 0% Так Добре Ігри без DRM,
підтримує класичні ігри
різні регіони
PlayStation Велика 30% Ні Залежить від Ексклюзиви,
Store регіону підписка
PlayStation Plus
Xbox Store Велика 30% Ні Залежить від Xbox Game Pass,
регіону ексклюзиви
12
Створення власного веб-сайту для продажу відеоігор є доцільним з
кількох причин. По-перше, наявність незалежної платформи дозволяє
знизити витрати на комісії, оскільки замість стандартних 20-30% з кожної
транзакції, можна встановити значно менші комісії або навіть зробити їх
мінімальними для незалежних розробників. Це дає можливість малим
студіям більш ефективно продавати свої ігри, не маючи великих витрат. По-
друге, платформа може бути побудована таким чином, щоб підтримувати
модифікації ігор, що дозволить гравцям більш активно взаємодіяти з
контентом, створювати додаткові можливості для творчості та розширення
ігор. Така інтерактивність є важливим елементом, який приваблює фанатів
відеоігор. По-третє, власна платформа дозволяє налаштувати зручну
підтримку для різноманітних платіжних систем, що дасть змогу легко
здійснювати покупки для користувачів з різних регіонів, усуваючи
проблеми, що існують у більшості великих платформ. Нарешті, створення
платформи з урахуванням потреб користувачів та розробників дозволить
стати гнучким і адаптивним рішенням, яке буде реагувати на зміни в
індустрії та на вимоги геймерів, що є важливою умовою для успішного
розвитку.
1.3 Постановка задачі
Мета розробки цього веб-сайту полягає в створенні ефективної,
зручної та безпечної онлайн-платформи для продажу відеоігор, яка надасть
користувачам можливість легко переглядати, купувати та взаємодіяти з
іграми. Платформа має бути побудована на основі технологій Vite та React,
що дозволяють забезпечити високу продуктивність, швидке завантаження
контенту та адаптивний інтерфейс для різних пристроїв.
Основні завдання для реалізації веб-сайту:
1. Необхідно створити зручний і інтуїтивно зрозумілий інтерфейс
користувача, що включає:
13
○ Головну сторінку, на якій відображається основний каталог
ігор, новинки та акції.
○ Створення компонентів для ігор, що будуть відображати
ключову інформацію про гру (назва, ціна, жанр, рейтинг,
зображення, опис).
○ Адаптивний дизайн, щоб сайт коректно відображався на різних
пристроях (ПК, планшети, мобільні телефони).
○ Функції пошуку і фільтрації ігор за жанрами, ціною,
популярністю та іншими параметрами.
Для цього потрібно розробити компоненти в React, що дозволять
динамічно оновлювати контент без перезавантаження сторінки.
2. Розробити структуру каталогу, що дозволяє користувачам
переглядати список доступних ігор. Відображення карток ігор, що
включають назву, зображення, рейтинг та кнопку для перегляду
більш детальної інформації або покупки. Розробити функціонал для
детальних сторінок ігор, де користувачі зможуть переглядати повний
опис гри, скріншоти, відеоогляди, відгуки та можливість додавання
до кошика.
3. Система користувачів та профілів. Розробити реєстрацію та
авторизацію користувачів, що дозволить створювати персональні
акаунти для зберігання історії покупок, вподобаних ігор, а також
налаштувань.
4. Безпека даних. Використовувати сучасні методи шифрування для
захисту персональних даних користувачів та платіжної інформації.
Важливо забезпечити високий рівень безпеки транзакцій та захистити
сайт від можливих атак, таких як SQL-ін'єкції або XSS.
5. Технічна оптимізація. Потрібно забезпечити високу швидкість
завантаження сайту, для цього можна використовувати оптимізацію
14
зображень, мінімізацію JavaScript та CSS. Для підвищення
продуктивності та зручності користування необхідно застосувати
кешування даних та lazy loading для великих обсягів контенту, щоб
сайти та сторінки завантажувалися швидко навіть при високих
навантаженнях.
Основною метою є створення високопродуктивної, зручної та
безпечної онлайн-платформи для продажу відеоігор, яка буде орієнтована
на сучасного користувача та здатна задовольнити потреби як покупців, так
і розробників. Веб-сайт повинен забезпечити швидке завантаження
контенту, простоту у використанні, безпеку транзакцій та можливість
покупки для користувачів з усього світу.
15
Висновки до розділу 1
Розділ 1 досліджує обґрунтування необхідності розробки веб-сайту
для продажу відеоігор, що є актуальним кроком у контексті розвитку
індустрії цифрових розваг та електронної комерції. Завдяки використанню
таких технологій, як Vite та React, планується створити платформу, яка буде
відрізнятися високою продуктивністю, швидким завантаженням та зручним
інтерфейсом для користувачів. Актуальність цього проєкту підкреслюється
зростаючим попитом на цифрові товари, зокрема відеоігри, а також на
необхідністю створення безпечних і ефективних онлайн-магазинів для
здійснення фінансових транзакцій. Огляд існуючих платформ для продажу
відеоігор, таких як Steam, Epic Games Store, GOG, PlayStation Store і Xbox
Store, виявив як їх переваги, так і обмеження. Серед основних проблем, що
існують на ринку, можна виділити високі комісії з продажу, обмежену
підтримку модифікацій, проблеми з локалізацією та обмежений доступ до
контенту для різних пристроїв. Ці проблеми створюють простір для
розробки власної платформи, яка дозволить мінімізувати комісії,
підтримувати модифікації ігор та забезпечити зручний доступ до платіжних
систем для користувачів з різних регіонів. Крім того, створення платформи,
що активно реагує на зміни в індустрії, дозволить гнучко впроваджувати
нові можливості та функції, що відповідають потребам геймерів та
розробників.
Мета розробки веб-сайту полягає в створенні ефективної, зручної та
безпечної онлайн-платформи, яка дозволить користувачам швидко
знаходити, купувати та взаємодіяти з іграми. Веб-сайт повинен бути
побудований таким чином, щоб забезпечити інтуїтивно зрозумілий
інтерфейс, адаптивний дизайн для різних пристроїв, а також підтримку всіх
необхідних функцій для зручного пошуку і фільтрації ігор. Важливими
завданнями є також забезпечення безпеки даних користувачів та платіжної
16
інформації, що стане запорукою довіри до платформи та її успіху на ринку.
Веб-сайт для продажу відеоігор повинен мати низькі комісії з продажу, що
буде привабливо для малих та незалежних розробників, та підтримувати
модифікації ігор, що дозволить гравцям активно взаємодіяти з контентом.
Крім того, важливою складовою успіху є надійна підтримка платіжних
систем для різних регіонів, що дозволить забезпечити легкість покупок для
користувачів з усього світу. Подальша технічна оптимізація, використання
сучасних методів шифрування та технологій для зменшення часу
завантаження контенту зроблять веб-сайт не тільки зручним у
використанні, але й безпечним для здійснення транзакцій.
Створення платформи також дозволить впроваджувати інноваційні
функції, такі як персоналізовані рекомендації для користувачів, інтеграцію
з соціальними мережами, а також систему лояльності для постійних
клієнтів. Залучення широкого кола користувачів, включаючи як геймерів,
так і розробників, дозволить платформі швидко стати
конкурентоспроможною на ринку, що динамічно розвивається. Таким
чином, розробка веб-сайту для продажу відеоігор є важливим кроком для
розвитку сучасної індустрії цифрових розваг та електронної комерції. З
урахуванням тенденцій на ринку, створення платформи, яка забезпечить
зручний, швидкий і безпечний процес покупки ігор, а також надасть
розробникам можливість отримувати більше від своїх продажів, буде
відповідати вимогам часу та забезпечить задоволення потреб кінцевих
споживачів.
17
РОЗДІЛ 2 ВИБІР ІНСТРУМЕНТІВ РОЗРОБКИ ТА АРХІТЕКТУРА
ВЕБ - САЙТУ
2.1 Вимоги до системи
2.1.1 Функціональні вимоги
Функціональні вимоги описують конкретні функції та можливості,
які система повинна забезпечити для задоволення потреб користувачів[11].
Таблиця 2.1 - Функціональні вимоги
№ Вимога Опис
1 Реєстрація Користувач має можливість зареєструвати акаунт
користувача на платформі, вказавши необхідні дані (ім'я, email,
пароль).
2 Авторизація Користувач має можливість увійти в свій акаунт,
користувача використовуючи логін та пароль.
3 Перегляд Користувач може переглядати список доступних
каталогу ігор ігор, з можливістю фільтрації за жанрами, ціною
або популярністю.
4 Перегляд картки Користувач має можливість переглядати деталі про
товару (ігри) гру (опис, скріншоти, ціна) на окремій сторінці гри.
5 Додавання гри в Користувач може додавати гру до кошика для
кошик подальшої покупки.
6 Перегляд Користувач може переглядати свій кошик, що
кошика включає список вибраних ігор, їх кількість та
загальну суму покупки.
18
2.1.2 Нефункціональні вимоги
Нефункціональні вимоги описують характеристики системи, які не
пов’язані безпосередньо з її функціональністю, але визначають її
ефективність, зручність використання, безпеку тощо[11,13].
Таблиця 2.2 - Нефункціональні вимоги
№ Вимога Опис
1 Продуктивність Система повинна мати час відгуку не більше 2
секунд при взаємодії з користувачем (наприклад,
при перегляді каталогу).
2 Безпека даних Усі особисті дані користувачів повинні бути
зашифровані, а система повинна використовувати
HTTPS для захисту даних.
3 Масштабованіс Система повинна бути здатна обробляти до 10 000
ть одночасних користувачів без зниження
продуктивності.
4 Зручність Інтерфейс повинен бути зрозумілим і зручним, з
інтерфейсу можливістю навігації по сайту з будь-якого
пристрою (адаптивний дизайн).
5 Доступність Веб-сайт повинен бути доступним 24/7 з
мінімальними перервами для технічного
обслуговування (менше 1% часу в рік).
6 Безперервність Веб-сайт має працювати стабільно при великих
роботи навантаженнях, забезпечуючи високу надійність і
мінімальні збої.
2.2 Вибір інструментів розробки
Для розробки веб-сайту для продажу відеоігор було обрано набір
сучасних технологій і інструментів, що забезпечують ефективну розробку,
високу продуктивність, зручність у підтримці проекту та можливість
масштабування в майбутньому. Одним з основних інструментів є React,
19
потужна JavaScript бібліотека для створення динамічних та інтерактивних
інтерфейсів користувача[6]. Завдяки компонентному підходу, який
пропонує React, інтерфейс веб-сайту можна поділити на багато маленьких
незалежних компонентів[7,8]. Це значно спрощує як розробку, так і
підтримку проекту, оскільки кожен компонент можна розробляти окремо і
потім легко інтегрувати в загальний проект. Наприклад, такі компоненти,
як картки ігор, списки категорій чи кошик покупок, можуть бути
реалізовані як окремі компоненти, що зменшує складність коду і дозволяє
зосередитись на логіці окремих частин інтерфейсу. React дозволяє
працювати з віртуальним DOM, що означає, що оновлення частин сторінки
відбувається тільки там, де це необхідно, без перезавантаження всієї
сторінки[7]. Це забезпечує швидкість роботи сайту, зменшуючи
навантаження на сервер і клієнтську частину. Крім того, з React легше
інтегрувати додаткові функції, такі як система пошуку, фільтрації,
рендеринг контенту на основі даних, що надходять із сервера, а також
динамічне оновлення інформації на сторінці при взаємодії з користувачем,
наприклад, додавання товарів до кошика або перегляд детальних сторінок
ігор.
Другим важливим інструментом є Vite, який був обраний для збірки
та запуску проекту. Vite — це сучасний інструмент для швидкої збірки веб-
додатків, який використовує можливості новітніх браузерів, зокрема ESM
(ES Modules), що дозволяє значно прискорити процес розробки[9]. Завдяки
використанню ESM Vite дає змогу значно зменшити час на завантаження і
розробку проекту, оскільки цей інструмент не вимагає попередньої збірки
всіх модулів, як це робить Webpack[15]. Це дозволяє миттєво бачити зміни,
що важливо для команди розробників, оскільки швидкість роботи з
проектом стає набагато вищою. Крім того, Vite підтримує швидке
оновлення, що значно покращує досвід розробки завдяки миттєвому
відображенню змін у браузері без необхідності перезавантажувати всю
20
сторінку[9]. Ще одним важливим інструментом, який використовувався в
проекті, є SASS (Syntactically Awesome Stylesheets)[10]. SASS є надбудовою
над CSS, що дозволяє використовувати змінні, вкладені правила, міксини та
функції для спрощення і покращення процесу написання стилів[10].
Завдяки SASS стильова частина веб-сайту стає набагато зручнішою для
підтримки та масштабування. Наприклад, можна використовувати змінні
для кольорів, шрифтів або розмірів, що дозволяє значно скоротити
повторюваність коду і спростити зміну стилів на всьому сайті. Крім того,
SASS дозволяє створювати модульні стилі, що робить код більш
організованим і полегшує його підтримку в майбутньому, особливо на
великих проектах[10].
Іншим важливим інструментом для цього проєкту став ESLint,
інструмент для аналізу та перевірки JavaScript-коду на наявність помилок,
а також для забезпечення однакового стилю коду в команді розробників.
ESLint допомагає виявити потенційні помилки в коді на ранніх етапах
розробки, що значно покращує якість коду та знижує ймовірність
виникнення помилок під час виконання[14]. Крім того, ESLint допомагає
дотримуватися стилістичних вимог до коду, що забезпечує його чіткість і
зрозумілість, полегшуючи роботу з кодом як для інших розробників, так і
для майбутніх етапів розширення або підтримки проекту. Для управління
залежностями і пакетами в проекті був використаний стандартний npm
(Node Package Manager). npm є важливим інструментом для автоматизації
управління бібліотеками, необхідними для роботи веб-додатка. Завдяки
npm можна легко встановлювати, оновлювати і керувати бібліотеками, що
використовуються в проекті, а також автоматично оновлювати залежності,
що забезпечує безпеку і актуальність усіх компонентів сайту. Наприклад, за
допомогою npm були інтегровані бібліотеки для роботи з React і
додатковими плагінами, такими як React Router для реалізації
21
маршрутизації та навігації по сайту, або інші бібліотеки для роботи з
платіжними системами та інтеграцією з бекендом[8].
Таблиця 2.3 - Порівняння інструментів
Інструмент Опис Переваги Особливості
використання в
проекті
React Бібліотека Швидка динамічна Використовується
JavaScript для рендерингова для побудови
створення система, динамічних
інтерфейсів компонентний інтерфейсів, таких
користувача на підхід, велика як картки ігор,
основі спільнота, кошик покупок.
компонентів. підтримка
взаємодії.
Vite Інструмент для Дуже швидка Забезпечує
збірки проєктів, збірка, швидку збірку
що використовує автоматичне проекту та
ESM (ES Modules) оновлення без інтеграцію з React,
для швидкої перезавантаження, скорочує час на
роботи з модулями легкість запуск і розробку.
JavaScript. налаштування.
SASS Препроцесор CSS, Полегшує Використовується
який дозволяє написання та для гнучкої і
використовувати підтримку стилів, структурованої
змінні, вкладені зручність для стилізації сайту,
стилі, міксини та великих проєктів, зокрема для
інші можливості. підвищує адаптивного
масштабованість. дизайну.
22
Продовження таблиці 2.3
Інструмент Опис Переваги Особливості
використання в
проекті
ESLint Інструмент для Автоматична Забезпечує
статичного аналізу перевірка на дотримання
коду JavaScript, помилки, стандартів
який допомагає забезпечує кодування та
знаходити помилки чистоту коду, полегшує роботу в
та невідповідності підтримка кращих команді
стилю. практик розробників.
програмування.
npm Менеджер пакетів Простота Використовується
для Node.js, який використання, для керування
використовується керування всіма бібліотеками
для установки та залежностями, та залежностями
оновлення автоматичне проекту.
бібліотек і оновлення.
залежностей.
React Бібліотека для Легка інтеграція, Забезпечує
Router реалізації підтримка маршрутизацію
маршрутизації в динамічних між сторінками,
додатках на React. маршрутів та наприклад, для
навігації. перегляду ігор або
кошика покупок.
Axios Бібліотека для Простота в Використовується
здійснення HTTP- використанні, для взаємодії з
запитів. підтримка бекендом для
асинхронних отримання даних
запитів, про ігри та
кросплатформніст здійснення
ь. покупок.
Webpack Систему для збірки Потужний, Використовується
ресурсів, яка гнучкий для обробки і
дозволяє інструмент для збирання всіх
об'єднувати файли оптимізації і ресурсів проекту
JavaScript, CSS упаковки файлів
23
Для роботи з сервером і обробки запитів на стороні клієнта також
були використані стандартні підходи для інтеграції з API. Це дозволяє
отримувати дані про ігри, обробляти замовлення та працювати з
користувацькими профілями без необхідності створення складної серверної
частини на ранньому етапі розробки. Веб-сайт може здійснювати запити до
API для отримання останніх оновлень, новинок, акцій та інших даних.
2.3 Архітектура веб - сервісу
2.3.1 Діаграма використання
Діаграма використання (Use Case Diagram) — це один з основних
елементів мови моделювання UML (Unified Modeling Language), який
дозволяє описати взаємодію користувачів (акторів) із системою[16]. Вона
показує, як зовнішні учасники (користувачі або інші системи) взаємодіють
із основними функціями системи, а саме — як кожен актор взаємодіє з
різними компонентами веб-сервісу.
Рисунок 2.1 - Діаграма використання
Діаграма використання є важливою частиною моделювання веб-
сервісів, зокрема в рамках розробки веб-сайтів. Вона надає візуальне
уявлення про взаємодію користувачів з основними функціями системи. У
контексті веб-сайту для продажу відеоігор, діаграма використання описує,
як користувач може здійснювати різні операції на платформі, а саме:
реєстрацію, авторизацію, перегляд каталогу, перегляд карток товарів,
додавання ігор до кошика та перегляд вмісту кошика. Ці функції є
основними діями, які користувач може виконувати під час взаємодії з
платформою. Перш за все, користувач повинен зареєструватися на
24
платформі, створивши акаунт, для чого йому потрібно вказати основні дані,
такі як ім’я, електронну пошту та пароль. Після цього він може
авторизуватися на сайті, використовуючи свої облікові дані, щоб отримати
доступ до персоналізованого досвіду.
Однією з найважливіших частин інтерфейсу є каталог ігор, в якому
користувач може переглядати доступні продукти. Веб-сайт надає
можливість фільтрувати і сортувати ігри за різними параметрами, що
дозволяє користувачу швидко знаходити потрібний контент. Користувач
також має змогу переглянути деталі гри, натискаючи на кожну картку
товару, де він зможе ознайомитися з описом, ціною, скріншотами та іншою
важливою інформацією. Крім того, на платформі реалізована функція
додавання гри до кошика. Це дозволяє користувачам зберігати вибрані ігри
для подальшої покупки. Після цього користувач може переглянути вміст
кошика, перевірити вибрані ігри та їх кількість, а також здійснити покупку,
коли буде готовий. Діаграма використання є важливим інструментом для
моделювання цих взаємодій, оскільки вона показує не тільки функціональні
можливості веб-сайту, але й допомагає зрозуміти, як користувачі будуть
взаємодіяти з цими функціями. Це дозволяє розробникам та дизайнерам
більш чітко уявити, які кроки має виконувати користувач для досягнення
своєї мети на сайті, що в кінцевому підсумку допомагає створити зручний
та ефективний інтерфейс.
2.3.2 Діаграма послідовності
Діаграма послідовності (Sequence Diagram) є важливою частиною
візуалізації поведінки системи, що показує, як об'єкти взаємодіють один з
одним у часі для реалізації конкретних функцій або бізнес-процесів[16].
Вона описує послідовність повідомлень між актором (користувачем) та
системою для досягнення певного результату. У контексті веб-сайту для
продажу відеоігор кожен з випадків використання (use case) потребує своєї
25
діаграми послідовності, що відображає взаємодію між компонентами
системи під час виконання кожної конкретної операції.
Рисунок 2.2 - Діаграма послідовності для процесу реєстрації
У процесі реєстрації користувач вводить свої дані, наприклад, ім’я,
електронну пошту та пароль. Користувач взаємодіє з інтерфейсом сайту, і
після того, як він надає всі необхідні дані, система перевіряє їх на
правильність, наприклад, перевіряє, чи не існує вже користувача з такою
самою електронною поштою. Кроки:
1. Користувач вводить дані для реєстрації (ім’я, електронну пошту,
пароль).
2. Система перевіряє правильність введених даних.
3. Якщо дані правильні, система створює новий запис у базі даних,
додаючи користувача.
4. Система надсилає підтвердження користувачу про успішну
реєстрацію.
26
Рисунок 2.3 - Діаграма послідовності для авторизації
Авторизація дозволяє користувачеві увійти в систему,
використовуючи свої облікові дані. Користувач вводить логін та пароль, і
система перевіряє ці дані, порівнюючи їх з тими, що зберігаються в базі
даних. Якщо введені дані правильні, система дозволяє користувачеві
отримати доступ до свого акаунту. Кроки:
1. Користувач вводить свої дані для входу (логін та пароль).
2. Система перевіряє ці дані, запитуючи базу даних.
3. База даних повертає результат перевірки.
4. Якщо дані правильні, система дозволяє користувачу увійти в систему,
надаючи доступ до його персональної інформації.
27
Рисунок 2.4 - Діаграма послідовності для перегляду каталогу
Перегляд каталогу є важливою частиною веб-сайту, де користувач
може побачити всі доступні ігри. Користувач взаємодіє з інтерфейсом
сайту, що запитує каталог ігор у базі даних. Після отримання даних, система
відображає список доступних ігор на сторінці користувача. Кроки:
1. Користувач натискає на кнопку або переходить на сторінку каталогу.
2. Система надсилає запит до бази даних для отримання списку ігор.
3. База даних повертає відповідь з переліком ігор.
4. Система відображає список ігор на сторінці для користувача.
28
Рисунок 2.5 - Діаграма послідовності для перегляду картки товару
Перегляд картки товару дозволяє користувачу побачити детальну
інформацію про конкретну гру, таку як опис, ціна, зображення та інші
характеристики. Користувач вибирає гру, система запитує дані з бази даних
і виводить їх на екран. Кроки:
1. Користувач вибирає гру для перегляду.
2. Система надсилає запит до бази даних для отримання деталей цієї гри.
3. База даних повертає деталі гри.
4. Система відображає картку товару, включаючи опис, зображення та
інші важливі дані.
29
Рисунок 2.6 - Діаграма послідовності для додавання гри в кошик
Додавання гри в кошик дозволяє користувачеві зберегти гру для
подальшої покупки. Користувач натискає на кнопку "Додати в кошик",
система оновлює кошик в базі даних, додаючи обрану гру. Кроки:
1. Користувач натискає кнопку "Додати в кошик".
2. Система відправляє запит до бази даних на оновлення кошика.
3. База даних оновлює кошик користувача, додаючи нову гру.
4. Система підтверджує додавання гри в кошик.
Рисунок 2.7 - Діаграма послідовності для перегляду кошика
30
Перегляд кошика дозволяє користувачеві бачити всі ігри, які він
додав до кошика, перевірити загальну суму та підготуватися до покупки.
Користувач запитує вміст кошика, система отримує ці дані з бази даних і
відображає їх. Кроки:
1. Користувач натискає на кнопку перегляду кошика.
2. Система запитує базу даних для отримання вмісту кошика.
3. База даних повертає вміст кошика.
4. Система відображає вміст кошика користувачеві.
Кожна діаграма послідовності відображає покрокову взаємодію між
користувачем і системою, а також між системою та іншими компонентами
(такими як база даних). Це дозволяє зрозуміти, які запити та операції
виконуються в процесі кожної функції, і допомагає чітко моделювати логіку
роботи веб-сайту.
2.3.3 Діаграма компонентів
Діаграма компонентів є важливою частиною архітектурного
моделювання, яка допомагає визначити структуру системи, розподіл її
компонентів і взаємодію між ними[16]. Вона показує, як різні частини
системи, такі як сервіси, модулі або інші підсистеми, взаємодіють одна з
одною для реалізації функціональності веб-сайту. У випадку веб-сайту для
продажу відеоігор, діаграма компонентів відображає основні складові, з
яких складається система, та їхні взаємозв'язки.
31
Рисунок 2.8 - Діаграма компонентів
Клієнтська частина (Frontend) забезпечує взаємодію з користувачем
через інтерфейс, побудований на React. React дозволяє створювати
інтерактивні компоненти, що відповідають за рендеринг і взаємодію з
користувачем, такі як картки ігор, кошик покупок, профіль користувача та
інші елементи інтерфейсу. Клієнтська частина також використовує SASS і
CSS для стилізації, що дозволяє створити адаптивний та привабливий
дизайн веб-сайту. Веб-сайт може бути переглянутий на різних пристроях,
забезпечуючи зручний досвід користувачів. Vite є інструментом для збірки
та запуску проекту, який значно покращує продуктивність під час розробки.
В порівнянні з традиційними інструментами, такими як Webpack, Vite надає
дуже швидкий процес розробки завдяки використанню ESM (ES Modules),
що дозволяє ефективно працювати з модулями JavaScript і значно зменшує
час на компіляцію та запуск проєкту. Крім того, Vite дозволяє швидко
оновлювати зміни, що дуже важливо при розробці веб-додатків, оскільки це
дає змогу миттєво бачити результати змін на клієнтській частині.
Серверна частина (Backend) відповідає за обробку запитів від
користувачів і взаємодію з базою даних. Вона реалізована на основі Node.js,
що забезпечує простоту та ефективність в налаштуванні API для взаємодії
між клієнтською частиною та базою даних. Сервер обробляє запити на
реєстрацію користувачів, авторизацію, перегляд каталогу ігор, додавання
32
товарів до кошика та інші операції. Він взаємодіє з базою даних для
збереження і отримання даних про користувачів, ігри та транзакції. База
даних є ключовим компонентом, який зберігає всю необхідну інформацію
про користувачів, ігри, кошики покупок та транзакції. Вона дозволяє
зберігати та обробляти дані, необхідні для виконання операцій
користувачів.
Вся система працює наступним чином: коли користувач взаємодіє з
інтерфейсом на клієнтській частині (React), ці запити передаються через
API до серверу, який обробляє запити і звертається до бази даних для
отримання або оновлення потрібних даних. Після обробки даних сервер
повертає інформацію назад до клієнтської частини, де вона відображається
користувачу. Завдяки використанню Vite, процес розробки значно
прискорюється, а також зменшується час на завантаження і оновлення
сторінок, що робить веб-сайт більш швидким і зручним у використанні.
React і Vite разом створюють основу для швидкої розробки інтерфейсів з
динамічним оновленням даних, що підвищує якість користувацького
досвіду.
2.3.4 Діаграма розгортання
Діаграма розгортання (Deployment Diagram) є частиною моделювання
системи в UML, яка показує, як програмні компоненти розгортаються на
фізичних пристроях та як ці пристрої взаємодіють між собою[16]. Вона дає
змогу чітко уявити, де і як розгортаються різні частини системи — сервери,
бази даних, інтерфейси користувача, а також комунікація між ними.
33
Рисунок 2.9 - Діаграма розгортання
Клієнтська частина є точкою взаємодії користувача з системою. Веб-
браузер користувача завантажує інтерфейс, створений за допомогою React
і Vite. Це дає змогу динамічно оновлювати контент на сторінці, взаємодіяти
з різними елементами, такими як каталог ігор, кошик покупок і профіль
користувача. Клієнтська частина відповідає за відображення всього, що
бачить користувач, та за ініціацію запитів до серверної частини. Серверна
частина обробляє всі запити, що надходять від клієнтської частини. Вона
виконує функції бізнес-логіки, такі як реєстрація користувачів, авторизація,
перегляд ігор, додавання товарів до кошика і виконання покупок. Сервер
взаємодіє з базою даних, здійснює запити на отримання або збереження
даних про користувачів, ігри та кошики.
База даних зберігає всю необхідну інформацію про систему,
включаючи дані про користувачів, ігри та кошики покупок. Цей компонент
відповідає за надання даних для перегляду на веб-сайті, а також за
збереження нових записів, таких як додавання ігор до кошика або
оформлення покупки. Залежно від вимог, база даних може бути реляційною
або нереляційною, що дозволяє зберігати і швидко отримувати необхідну
інформацію. Усі компоненти працюють разом: клієнтська частина надсилає
34
запити на сервер, сервер обробляє ці запити і взаємодіє з базою даних для
отримання або оновлення даних, після чого сервер повертає результат
клієнту. Дана архітектура дозволяє чітко розподіляти обов’язки між
компонентами системи, що підвищує ефективність розробки та забезпечує
масштабованість і легкість підтримки проекту.
35
Висновки до розділу 2
Розділ 2 надає детальний опис вимог до системи, вибору інструментів
розробки та архітектури веб-сайту для продажу відеоігор, що дозволяє
сформувати чітке уявлення про структуру проекту та технічну реалізацію.
У розділі визначено функціональні та нефункціональні вимоги до системи,
що забезпечують високий рівень зручності, безпеки та продуктивності веб-
сайту. Основні функціональні вимоги включають реєстрацію та
авторизацію користувачів, перегляд каталогу ігор, додавання товарів до
кошика та перевірку загальної суми покупки. Нефункціональні вимоги, такі
як продуктивність, безпека даних, масштабованість і доступність,
встановлюють важливі орієнтири для забезпечення стабільної роботи сайту,
навіть при великих навантаженнях. Вибір інструментів для розробки, таких
як React, Vite, SASS, ESLint, npm та інші, обґрунтовано ефективністю,
швидкістю розробки та зручністю підтримки проекту. Використання React
дозволяє створити динамічний та інтерактивний інтерфейс, Vite —
забезпечує високу швидкість збірки та розробки, а SASS дозволяє
створювати модульні та адаптивні стилі. Разом ці інструменти формують
надійну основу для створення ефективного веб-додатку. Архітектура веб-
сайту побудована на принципах чіткої взаємодії між клієнтською та
серверною частинами, з використанням бази даних для зберігання і обробки
інформації. Діаграми використання, послідовності та компонентів
дозволяють наочно зобразити основні процеси та взаємодії між
користувачем і системою, що сприяє більш чіткому розумінню роботи веб-
сайту. Завдяки такій структурі, проект має високий потенціал для
подальшого масштабування і адаптації до змінних вимог. Отже, в розділі 2
були визначені ключові технічні аспекти проекту, що забезпечують
ефективність, надійність та зручність користування веб-сайтом. Вибір
відповідних інструментів і архітектури дозволяє розробити продуктивну
36
платформу для продажу відеоігор, яка відповідає як поточним вимогам, так
і має потенціал для розвитку в майбутньому.
37
РОЗДІЛ 3 ОПИС ПРОГРАМНОЇ РЕАЛІЗАЦІЇ ВЕБ - САЙТУ
3.1 Опис компонентів UI
Компоненти користувацького інтерфейсу для веб-сайту продажу
відеоігор були розроблені з урахуванням зручності користування та
адаптивності. Веб-сайт складається з кількох основних частин: банера,
хедера, карток товару, футера, лоадера та інших елементів, які разом
створюють функціональну і привабливу структуру.
Рисунок 3.1 - Банер (Banner)
Компонент Banner є одним із перших елементів, що зустрічає
користувача на головній сторінці сайту. Він складається з головного банера,
на якому розташована ілюстрація, що відображає тематику ігор, а також
перекриття з текстом, що вітає користувача та надає інформацію про
38
актуальні пропозиції. Нижня частина банера містить додаткові банери, які
представляють акційні пропозиції або інші важливі аспекти сайту, такі як
новинки або спеціальні пропозиції. Використовуючи стиль SASS,
компонент забезпечує привабливий вигляд і адаптацію під різні екрани,
зберігаючи високу продуктивність завдяки мінімізації стилів.
Рисунок 3.2 - Футер (Footer)
Компонент Footer розташовується внизу сторінки та надає
інформацію про права, що захищаються, і права на контент веб-сайту. Це
проста та елегантна частина, яка надає інформацію користувачам про
авторські права та посилання на правові документи. Використовувані стилі
гарантують мінімалістичний і чистий вигляд футера, який не відволікає
увагу від основного контенту.
39
Рисунок 3.3 - Картка гри (GameCard)
Компонент GameCard відповідає за відображення інформації про
окремі ігри в каталозі. Картка включає зображення гри, її назву, жанр та
ціну. Внизу картки є кнопка, яка веде до детальної сторінки гри, де
користувач може знайти більше інформації або здійснити покупку. Framer
Motion додає анімації до елементів картки, наприклад, коли користувач
наводить курсор на картку, вона трохи збільшується, що надає
інтерактивного досвіду.
Рисунок 3.4 - Хедер (Header)
Компонент Header являє собою навігаційну панель, що містить
логотип та меню, яке дозволяє користувачам переходити між основними
сторінками веб-сайту, такими як головна сторінка, каталог, кошик і
профіль. Використовуючи компонент NavLink з React Router, хедер
динамічно відображає активну сторінку, забезпечуючи таким чином зручну
40
навігацію. Стилі для хедера побудовані таким чином, щоб він був
максимально адаптивним і зручним для користувачів на різних пристроях.
Рисунок 3.5 - Лоадер (Loader)
Компонент Loader є індикатором завантаження, який з’являється під
час завантаження контенту на сайті. Це простий анімаційний спінер, що
повідомляє користувача про необхідність почекати, поки сайт завантажить
усі дані. Він має власні стилі, що дозволяють йому красиво вписуватися в
загальний дизайн сайту, а також він працює плавно і не викликає затримок
у роботі веб-сайту. Дані компоненти складають основну структуру веб-
сайту і забезпечують безперебійне та зручне взаємодія користувача з
інтерфейсом. Усі компоненти взаємодіють між собою через API запити та
інші взаємодії, що дозволяє підтримувати динамічний контент і високий
рівень користувацького досвіду на сайті.
3.2 Опис методів
Метод addToCart додає вибрану гру до кошика. Ключовий принцип
цього методу — уникати дублювання ігор у кошику. Для цього він
перевіряє, чи існує вже гра з таким самим id в масиві ігор. Якщо така гра
вже є в кошику, метод не змінює масив, інакше додає гру до кошика. Це
забезпечує чистоту і коректність стану кошика.
Метод removeFromCart дозволяє видаляти ігри з кошика. Він приймає
id гри, яку потрібно видалити, і відфільтровує масив ігор в кошику,
41
видаляючи елемент з цим id. Це забезпечує зручний спосіб редагувати вміст
кошика, дозволяючи користувачеві видаляти непотрібні ігри.
Метод handleAdd викликається, коли користувач натискає кнопку для
додавання гри до кошика на сторінці детальної інформації про гру. Цей
метод спочатку викликає метод addToCart, щоб додати гру до кошика, а
потім відображає сповіщення, яке підтверджує додавання гри. Це
забезпечує користувача зворотним зв'язком після взаємодії з кнопкою
"Додати в кошик".
Метод useEffect використовується у компоненті Catalog для
ініціалізації та симуляції завантаження ігор з даних. Спочатку він
встановлює стан компонента list в null, щоб показати користувачу індикатор
завантаження. Після затримки (300 мс) він оновлює стан компоненту,
завантажуючи дані про ігри з файлу games.js. Це дозволяє користувачеві
побачити процес завантаження, поки список ігор не буде готовий.
Метод alert у handleAdd: в окремому методі, що викликається в
handleAdd, використовується стандартний alert, щоб повідомити
користувача про успішне додавання гри до кошика. Це спрощує зворотній
зв'язок і дозволяє підтвердити, що дія була виконана успішно, але може
бути змінене на більш елегантне рішення в майбутньому (наприклад, за
допомогою модальних вікон або інтерфейсу без блокувальних сповіщень).
Всі компоненти, такі як ProductDetail, Cart, Catalog, рендерують
відповідний контент на основі даних, отриманих із Context API чи
локальних даних. Компоненти використовують стан для динамічного
оновлення інтерфейсу в залежності від змін у кошику, пошуку чи фільтрації
ігор.
Кожен з цих методів сприяє створенню динамічного, інтерактивного
досвіду користувача, забезпечуючи правильне керування станом і
безперервну взаємодію з веб-сайтом. Вони дозволяють користувачам
42
додавати і видаляти ігри з кошика, переглядати деталі ігор, а також
здійснювати інші основні операції з даними на сайті.
3.3 Тестування
Тестування є важливою частиною розробки веб-додатків, яке
дозволяє переконатися в правильності та надійності роботи всіх
функціональних елементів. Ось як можна провести функціональне
тестування для різних частин вашого веб-сайту продажу відеоігор. На
рис.3.6 відображена головна сторінка веб-сайту GameStore, яка вітає
користувачів та пропонує основні функції платформи. У верхній частині
сторінки знаходиться заголовок, що містить назву сайту GameStore та меню
для навігації між різними розділами: Головна, Каталог, Кошик і Профіль.
Рисунок 3.6 - Головна сторінка
43
Великою та яскравою частиною екрану є банер з привітанням —
"Ласкаво просимо до GameStore". Це надпис, що супроводжується
графічним зображенням гравця, який тримає контролер. Це створює
відчуття інтерктивності та налаштовує на ігрову атмосферу. Додатково під
привітальним повідомленням розміщений слоган: "Тільки найгарячіші
новинки та вигідні пропозиції", що підкреслює акцент на актуальності ігор
та пропозицій. Під банером розміщується кілька графічних елементів, таких
як банери з тематичними іграми або продуктами, що покращує візуальний
вигляд і надає сайту динамічності. У самому низу сторінки користувач має
можливість натискати кнопку "Перейти до каталогу", яка веде до списку
доступних для покупки ігор. Ця головна сторінка має на меті привернути
увагу користувачів, представити їм основну пропозицію сайту і забезпечити
простий доступ до каталогу ігор та інших функцій. Розглянемо основні
тести, які потрібно провести для функціонального тестування веб-сайту
GameStore. Це дозволить перевірити основні функціональні можливості, які
забезпечують правильну взаємодію користувача з сайтом. Перш за все,
потрібно перевірити процес реєстрації на сайті. Важливо, щоб користувач
міг успішно створити акаунт, ввівши правильні дані. Також потрібно
перевірити, чи система надає відповідне повідомлення про помилку, якщо
введені неправильні дані (наприклад, невірний формат електронної пошти
чи паролю). Після успішної реєстрації користувач повинен бути
перенаправлений на сторінку входу або на головну сторінку.
44
Тест №1. Перегляд каталогу
Кроки тестування:
1. Перейти на сторінку каталогу.
2. Перевірити, чи відображається список доступних ігор.
3. Перевірити, чи можна фільтрувати ігри за жанром, ціною або іншими
параметрами.
4. Переконатися, що користувач може переглядати всі доступні ігри в
каталозі.
Очікувані результати:
● На сторінці каталогу має бути відображений список всіх доступних
ігор.
● Фільтрація повинна працювати коректно, показуючи відповідні
результати за вибраними критеріями.
● Ігри повинні мати всі необхідні деталі: назва, ціна, жанр, зображення.
Невдача тесту:
● Якщо ігри не завантажуються або не відображаються на сторінці.
● Якщо фільтрація не працює належним чином і не оновлює список
ігор.
45
Рисунок 3.7 - Перегляд каталогу
На рис.3.7 відображена сторінка каталогу ігор на веб-сайті GameStore,
де користувачі можуть переглядати доступні для покупки ігри. Кожна гра
представлена карткою, що містить зображення обкладинки, назву, жанр,
ціну та кнопку для переходу до детальної сторінки товару. Це дозволяє
користувачу зручно орієнтуватися серед ігор і вибирати ті, що його
цікавлять. Інтерфейс сайту організований таким чином, що користувач
може швидко ознайомитися з основною інформацією про кожну гру, не
переходячи на окремі сторінки. Навігаційна панель у верхній частині
сторінки містить основні посилання для переходу між розділами сайту: на
головну сторінку, в каталог, в кошик і до профілю користувача. Це
забезпечує зручний доступ до основних функцій сайту. Кожна картка гри
містить кнопку "Деталі", що дозволяє користувачу перейти на сторінку з
детальним описом гри, а також додати її в кошик для подальшої покупки.
46
Тест №2. Перегляд картки товару
Кроки тестування:
1. Клікнути на одну з ігор в каталозі, щоб перейти на її детальну
сторінку.
2. Перевірити, чи відображаються всі деталі гри: зображення, ціна, опис,
жанр.
3. Перевірити, чи є кнопка для додавання гри в кошик.
4. Переконатися, що на сторінці немає помилок і всі елементи коректно
відображаються.
Очікувані результати:
● Сторінка гри має містити всі важливі деталі: зображення, опис, ціну,
рейтинг тощо.
● Кнопка "Додати в кошик" має бути доступною та функціональною.
● Інтерфейс повинен бути інтуїтивно зрозумілим і зручним для
користувача.
Невдача тесту:
● Якщо на картці товару відсутні деякі деталі, такі як опис або
зображення.
● Якщо кнопка "Додати в кошик" не працює або не активна.
47
Рисунок 3.8 - Перегляд картки товару
Картка гри має простий і інтуїтивно зрозумілий дизайн, де всі важливі
елементи (зображення, назва, опис, ціна та кнопка) виділені, що робить її
зручною для користувача. Інтерфейс картки дозволяє швидко отримати
необхідну інформацію про гру та додати її в кошик для покупки.
48
Тест №3. Додавання гри в кошик
Кроки тестування:
1. Перейти на сторінку гри.
2. Натиснути кнопку "Додати в кошик".
3. Перевірити, чи з’являється сповіщення про успішне додавання гри в
кошик.
4. Перейти до кошика і перевірити, чи гра була успішно додана.
Очікувані результати:
● Гра має бути додана до кошика, і користувач має побачити
повідомлення про це.
● Перехід до кошика має показати додану гру в списку.
Невдача тесту:
● Якщо гра не додається в кошик після натискання кнопки.
● Якщо повідомлення про додавання не з’являється, або кошик не
оновлюється.
49
Рисунок 3.9 - Додавання гри в кошик
Відразу після натискання кнопки "Додати в кошик" з’являється поп-
ап вікно, яке інформує користувача, що гра була успішно додана до кошика.
Сповіщення містить назву гри, що була додана ("The Witcher 3: Wild Hunt")
і кнопку OK для закриття цього вікна.
50
Тест №4. Перегляд кошика
Кроки тестування:
1. Перейти на сторінку кошика.
2. Перевірити, чи відображаються всі ігри, які були додані до кошика.
3. Перевірити, чи можна видалити гру з кошика.
4. Перевірити, чи оновлюється загальна сума після
додавання/видалення гри.
Очікувані результати:
● Кошик має відображати всі додані ігри з правильною ціною та
іншими деталями.
● Ігри можна видаляти з кошика, і кошик оновлюється після цього.
● Загальна сума має коректно оновлюватися при додаванні або
видаленні товарів.
Невдача тесту:
● Якщо кошик не оновлюється після додавання або видалення гри.
● Якщо ціни або сума не відображаються правильно.
51
Рисунок 3.10 - Перегляд кошика
Сторінка кошика надає користувачеві можливість переглядати всі
ігри, які він додав, а також видаляти їх при необхідності. Всі елементи
мають чітке відображення: назви ігор, ціни та кнопки для видалення.
Інтерфейс простий та інтуїтивно зрозумілий, що забезпечує зручний
користувацький досвід.
52
Тест №5. Перегляд профілю
Кроки тестування:
1. Перейти на сторінку профілю користувача.
2. Перевірити, чи відображаються правильні дані користувача, такі як
ім’я та email.
3. Перевірити наявність кнопки для виходу з акаунта.
4. Натиснути кнопку "Вийти" та перевірити, чи користувач успішно
виходить із системи.
Очікувані результати:
● Сторінка профілю має містити правильні дані користувача, зокрема
ім’я та email.
● Кнопка "Вийти" має бути доступною, і при натисканні користувач
повинен бути виведений із системи.
● Після виходу з акаунта, користувач має бути перенаправлений на
сторінку авторизації.
Невдача тесту:
● Якщо дані користувача на сторінці профілю відображаються
неправильно або не оновлюються після входу.
● Якщо кнопка "Вийти" не працює, або після натискання користувач не
виводиться з акаунта.
● Якщо після виходу з акаунта користувач не перенаправляється на
сторінку авторизації.
53
Рисунок 3.11 - Перегляд профілю
На сторінці профілю користувач бачить свої персональні дані,
зокрема:
● Ім'я: ім'я користувача вказано як "Олександр".
● Email: вказана електронна пошта користувача "[email protected]".
Дана сторінка дозволяє користувачеві переглядати основну
інформацію про свій акаунт, але не дає можливості редагувати ці дані,
оскільки функціональність редагування не була реалізована в поточній
версії. Нижче розташована кнопка "Вийти", яка дозволяє користувачу
вийти зі свого акаунта. Це важливий елемент для забезпечення безпеки і
конфіденційності на платформі.
54
Висновки до розділу 3
Розділ 3 охоплює опис програмної реалізації веб-сайту для продажу
відеоігор, зокрема компоненти користувацького інтерфейсу (UI), методи
взаємодії з даними та тестування основних функцій. У цьому розділі були
детально розглянуті основні компоненти інтерфейсу, які забезпечують
зручний і привабливий досвід користувача на платформі. Компоненти, такі
як банер, футер, картки товарів, хедер, лоадер, є важливими елементами
дизайну, що гарантують естетичний вигляд і функціональність сайту. Всі ці
елементи розроблені з урахуванням адаптивності, щоб забезпечити
коректне відображення на різних пристроях. Взаємодія користувачів із веб-
сайтом реалізується через інтерактивні компоненти, такі як картки ігор,
кнопки для додавання до кошика та лоадери, що дозволяють динамічно
відображати дані та зберігати високу продуктивність. Методи, описані в
розділі, дозволяють ефективно працювати з кошиком покупок: додавати й
видаляти ігри, оновлювати стан кошика та повідомляти користувача про
успішні дії. Використання React та інших технологій, таких як Framer
Motion для анімацій, надає сайту інтерактивний та приємний досвід для
користувачів.
У процесі тестування були визначені ключові функціональні
елементи, які необхідно перевірити для забезпечення коректної роботи веб-
сайту. Це включає тестування перегляду каталогу, карток товарів,
додавання ігор до кошика, а також перевірку роботи кошика та профілю
користувача. Тестування показало, що сайт здатний ефективно обробляти
всі запити користувачів, забезпечуючи безпеку даних та належний рівень
взаємодії з контентом. Виконана реалізація забезпечує зручний інтерфейс,
який дозволяє користувачам швидко знайти, додати та придбати ігри. Окрім
цього, надані методи для управління кошиком і профілем користувача
роблять платформу функціональною та безпечною. Тестування
55
підтвердило, що основні операції працюють коректно, а також, що сайт
стабільно функціонує на різних етапах взаємодії користувача з контентом.
Загалом, виконана розробка веб-сайту створює надійну основу для продажу
відеоігор, забезпечуючи високий рівень користувацького досвіду завдяки
інтерактивності, адаптивності та надійності функцій. Всі компоненти веб-
сайту органічно взаємодіють між собою, що дозволяє досягти ефективного
управління даними та забезпечити безперервну та зручну роботу
платформи.
56
ВИСНОВКИ
У дипломній роботі був здійснений процес проектування, розробки та
тестування веб-сайту для продажу відеоігор, який включає в себе
визначення вимог до системи, вибір інструментів розробки та архітектури
веб-сервісу, а також програмну реалізацію та тестування ключових функцій
платформи. Розробка веб-сайту була орієнтована на забезпечення зручності
користувачів, високої продуктивності системи та безпеки при обробці
персональних і фінансових даних. У роботі було сформульовано
функціональні вимоги, які забезпечують основні можливості для
користувачів, такі як реєстрація та авторизація, перегляд каталогу ігор,
додавання товарів до кошика та здійснення покупки. Ці вимоги гарантують,
що користувачі отримають зручний доступ до необхідних функцій без
зайвих складнощів. Також були визначені нефункціональні вимоги, зокрема
продуктивність, безпека, масштабованість і доступність системи, що
сприяють стабільній роботі веб-сайту в умовах високих навантажень і
забезпечують захист особистих даних користувачів.
Один з основних аспектів роботи полягав у виборі інструментів для
розробки веб-сайту, які б забезпечили швидкість і ефективність створення
платформи, а також зручність підтримки та масштабованості проекту.
Використання React як бібліотеки для побудови інтерфейсу дозволило
застосувати компонентний підхід, що спрощує розробку та підтримку коду.
Завдяки цьому вдалося створити динамічні та інтерактивні компоненти
сайту, зокрема картки ігор, кошик покупок та профіль користувача. Для
швидкої та ефективної збірки проекту був обраний Vite, що дозволяє значно
прискорити процес розробки завдяки використанню ES Modules і
миттєвому оновленню сторінок без потреби в перезавантаженні. Вибір
SASS для стилізації дозволив реалізувати адаптивний дизайн, створити
модульні стилі та зменшити повторюваність коду, що спрощує
57
масштабування та підтримку стилів у майбутньому. Інструмент ESLint був
використаний для підтримки високої якості коду, автоматичного виявлення
помилок і забезпечення єдиного стилю програмування в команді
розробників. npm забезпечив зручне управління залежностями проекту, що
дозволило інтегрувати бібліотеки та плагіни, необхідні для функціонування
сайту, такі як React Router для маршрутизації та Axios для роботи з API.
Веб-сайт побудований за принципом розподілу функцій між
клієнтською частиною, серверною частиною та базою даних. Клієнтська
частина відповідає за взаємодію з користувачем через інтерфейс, який
побудований на React і стилізований за допомогою SASS. Серверна частина
реалізована на Node.js, що дозволяє ефективно обробляти запити від
користувачів і взаємодіяти з базою даних для збереження та отримання
необхідної інформації. База даних, яка зберігає дані про користувачів, ігри
та транзакції, забезпечує високу надійність і швидкість доступу до даних.
Для взаємодії між компонентами системи використовуються API запити,
що дозволяють ефективно отримувати дані про ігри, оновлювати кошик
покупок і здійснювати транзакції. Така архітектура дозволяє забезпечити
масштабованість проекту, а також надає можливість розширення
функціональності у майбутньому, наприклад, додавання нових платіжних
систем, інтеграція з іншими сервісами та додавання нових можливостей для
взаємодії з користувачами.
У рамках реалізації веб-сайту були розроблені ключові функції, такі
як реєстрація, авторизація користувачів, перегляд ігор, додавання товарів
до кошика та перевірка суми покупок. Тестування основних
функціональних можливостей підтвердило, що веб-сайт стабільно працює,
а всі функції виконуються коректно. Процес тестування охоплював
перевірку реєстрації та авторизації користувачів, перегляд каталогу ігор,
додавання товарів до кошика, а також перевірку вмісту кошика. Завдяки
детальному тестуванню була виявлена й усунена низка потенційних
58
проблем, що дозволило підвищити стабільність і надійність роботи веб-
сайту. Тестування також підтвердило, що веб-сайт є зручним у
використанні, що відповідає вимогам до адаптивності інтерфейсу, а також
здатний забезпечити швидку реакцію на запити користувачів.
Розроблений веб-сайт має великий потенціал для подальшого
розвитку та масштабування. Оскільки технології, які були використані в
проекті, є сучасними та популярними, платформа має високий рівень
адаптивності до змін і потреб користувачів. У майбутньому можуть бути
додані нові функціональні можливості, такі як інтеграція з іншими ігровими
платформами, розширення системи рекомендацій, поліпшення соціальної
взаємодії між користувачами, а також введення нових методів оплати. Один
із перспективних напрямків розвитку полягає у введенні функції для більш
глибокої персоналізації покупок, на основі поведінки користувачів та їхніх
вподобань. Також можливе розширення проекту на нові ринки, зокрема, на
міжнародний рівень, що відкриє додаткові можливості для бізнесу.
59
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Steam. URL: https://store.steampowered.com/
2. Epic Games Store. URL: https://www.epicgames.com/store/
3. GOG (Good Old Games). URL: https://www.gog.com/
4. PlayStation Store. URL: https://store.playstation.com/
5. Xbox Store. URL: https://www.microsoft.com/en-us/store/b/xbox
6. Flanagan, D. (2020). JavaScript: The Definitive Guide: Master the World's
Most-Used Programming Language. 7th Edition, O'Reilly Media.
7. Gerald, M., & Schmitz, A. (2019). React: Up and Running: Building Web
Applications. O'Reilly Media.
8. Van Der Heijden, M. (2021). React Explained: Your Step-by-Step Guide
to React. Leanpub.
9. Vite Documentation. (2023). Vite - Next Generation, Frontend Tooling.
https://vitejs.dev/
10. Sass Documentation. (2023). Sass: Syntactically Awesome Stylesheets.
https://sass-lang.com/
11. Wiegers, K. E. (2013). Software Requirements. 3rd Edition, Microsoft
Press.
12. Zeldman, J., & Marcotte, E. (2018). Designing with Web Standards. 3rd
Edition, New Riders.
13. Karl Wiegers, Joy Beatty (2013). Software Requirements. Microsoft Press.
14. ESLint Documentation (2023). ESLint - The pluggable linting utility for
JavaScript and JSX. URL: https://eslint.org/
15. Webpack Documentation (2023). Webpack - A static module bundler for
modern JavaScript applications. URL: https://webpack.js.org/
16. Booch, G., Rumbaugh, J., & Jacobson, I. (1999). The Unified Modeling
Language User Guide. Addison-Wesley.
60