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/9094| Title: | Програмне забезпечення WEB-додаток каталог відеоігор |
| Authors: | Олексюк, Вадим Володимирович Веретільник, Віталій Олегович |
| Keywords: | ВІДЕОІГРИ;РОЗРОБКА;REACT;NODE.JS;БАЗА ДАНИХ;API;ІНТЕРФЕЙС |
| Issue Date: | 2024 |
| Abstract: | Веретільник В.О. Назва кваліфікаційна робота бакалавра: Програмне забезпечення WEB-додаток каталог відеоігор Спеціальність (шифр і назва): 121 «Інженерія програмного забезпечення» Установа, де відбудеться захист: Черкаський державний технологічний університет. Місто, рік: Черкаси, 2024 У роботі розглянуто створення інтерактивного веб-сервісу для каталогізації відеоігор, який надає користувачам можливість пошуку та вибору відеоігор. Сервіс розроблено з використанням бібліотеки React для фронтенду та Node.js для бекенду. Використано базу даних Firebase для зберігання інформації про користувачів та інтегровано зовнішні API для отримання актуальних новин про відеоігри. Основні результати включають розробку зручного інтерфейсу, реалізацію функціоналу фільтрації ігор за різними параметрами та створення інформаційних сторінок для кожної гри. Практичне значення роботи полягає у створенні інструменту, що спрощує процес вибору відеоігор, покращує користувацький досвід та підвищує залученість гравців. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9094 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Веретільник диплом.pdf Restricted Access | 7.29 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 курсу, групи ПЗС-2144
спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Веретільник В.О.
(прізвище та ініціали)
Керівник Олексюк В.В.
(прізвище та ініціали)
Рецензент Трембовецька Т. В.
(прізвище та ініціали)
Черкаси 2024
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
С. Голуб
«___» _______________ 2024 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Веретільник Віталій Олегович
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) Програмне забезпечення WEB-додаток каталог відеоігор
Керівник проекту (роботи) Олексюк Вадим Володимирович к.т.н. доцент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від «26 лютого»
2024 року №
2.Строк подання студентом проекту (роботи)
3. Вхідні дані до проекту (роботи)
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань
Розділ 2. Впровадження результатів дослідження у практику проектування програмного
забезпечення інформаційних систем
Розділ 3. Розробка та тестування програмного забезпечення
Висновки;
Список використаних джерел;
Додатки А, Додатки Б, Додатки В, Додатки Г.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту;
Графічний матеріал.
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та посади Підпис, дата
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 2 грудня 2024 р.
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№
Назва етапів випускної роботи етапів кваліфікаційної Примітки
п/п роботи
1 Постановка задачі 05.12.2023 виконано
2 Підготовка завдання 13.12.2023 виконано
3 Погодження завдання 16.12.2023 виконано
4 Затвердження завдання 19.02.2024 виконано
Основна стадія
1 Підбір матеріалів 27.02.2024 виконано
2 Аналіз шляхів вирішення поставленої 04.02.2024 виконано
задачі
3 Розрахунок основних параметрів роботи 10.03.2024 виконано
4 Вибір кінцевого варіанту проектного 17.03.2024 виконано
рішення
5 Оформлення первісної редакції роботи 25.03.2024 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень 31.04.2024 виконано
з керівником
2 Оформлення пояснювальної записки 13.05.2024 виконано
роботи в кінцевій редакції
3 Попередній захист роботи 27.05.2024 виконано
4 Затвердження роботи 02.06.2024 виконано
5 Рецензування роботи 04.06.2024 Виконано
6 Захист роботи 05.06.2024
Студент _____________________ Веретільник В.О.
(підпис) (прізвище та ініціали)
Керівник роботи _____________________ Олексюк В.В.
(підпис) (прізвище та ініціали)
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ .......................................................................... 3
ВСТУП ............................................................................................................................ 4
Актуальність теми ......................................................................................................... 4
Мета та завдання розробки .................................................................................... 4
Об'єкт розробки ....................................................................................................... 4
Предмет розробки ................................................................................................... 4
Методи проектування та конструювання ............................................................. 4
Опис отриманих результатів .................................................................................. 5
Практичне значення отриманих результатів ........................................................ 5
Особистий внесок автора ....................................................................................... 5
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАДАЧ ............................................................................................................................ 6
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ ....................................................................................................................... 18
2.1 Моделювання предметної області .................................................................... 18
2.1.1 Предметна область для веб-додатку каталог відеоігор ............................ 18
2.1.2 Робоча область моделювання: Веб-додатоку Каталог відеоігор ............ 20
2.2 Формування та аналіз вимог ............................................................................. 22
! !
!
"#$!B&'E! )!*+,-#$!! ./01&'! *2E2! A*BC!DEDDFG$HHF! ."!
3+45+6$! <858E/=>W&,!<$?$!
! I.5+J52#W8!426841!8K8WWL!MNOP B/E$! B&'E! B&'E/9!
7!85/9W&,!?=8,'@,$!<$<$! 0+02E+,!,2E2=+J!9/08+/J+5Q! ! !
;$,+WE5$! ! TUBUVW!72X8052!."YVW!
! !./98W>!?$[$! R.+L'W@92=>W2!421&',2S!
"2E9$! \+=-6!V$<$! ."VPDZEE!
! !
2.3 Проектування логічної структури програмного комплексу ....................... 27
2.3.1 Діаграми класів ......................................................................................... 28
2.3.2 Діаграми пакетів ....................................................................................... 28
2.4 Архітектурне проектування ........................................................................... 31
2.4.1 Діаграма компонентів ............................................................................... 31
2.4.2 Діаграма розгортання ............................................................................... 32
2.5 Моделювання поведінки системи .................................................................. 33
2.5.1 Діаграма діяльності .................................................................................. 33
2.5.3 Діаграма комунікації ................................................................................ 36
2.5.4 Діаграма скінченного автомату ............................................................... 36
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
.................................................................................................................................... 38
3.1 Розробка програмного комплексу ................................................................. 38
3.1.1 Обґрунтування вибору засобів реалізації ............................................... 38
3.1.2 Опис структурної (функціональної) схеми ............................................ 39
3.1.3 Опис логічної схеми системи .................................................................. 40
3.1.4 Розробка бази даних ................................................................................. 41
3.1.5 Розробка інтерфейсу користувача ........................................................... 42
3.1.6 Опис розробки програмних компонентів ............................................... 48
3.2 Тестування системи ........................................................................................ 49
3.2.1 Модульне тестування ............................................................................... 49
3.2.2 Інтеграційне тестування ........................................................................... 50
Лист
ЧДТУ 242238.004ПЗ
Зм. Лист № док. Підпис Дата
3.2.3 Системне тестування ................................................................................... 51
3.2.4 Приймальне тестування .............................................................................. 52
3.3 Приклади впровадженого програмного комплексу ........................................ 53
ВИСНОВКИ ................................................................................................................. 55
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .................................................................... 56
ДОДАТОК А ................................................................ Error! Bookmark not defined.
ДОДАТОК Б ................................................................. Error! Bookmark not defined.
ДОДАТОК В ................................................................ Error! Bookmark not defined.
4
ЧДТУ 242236.003ПЗ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
ПЗ – програмне забезпечення;
БД – база даних;
Frontend – інтерфейсна частина проекту;
Backend – серверна частина проекту.
4
ЧДТУ 242236.003ПЗ
ВСТУП
Актуальність теми
Актуальність розробки створення програмного забезпечення (ПЗ) каталогу
відеоігор пов’язана з швидким розвитком індустрії, тому виникає потреба в
платформах, які дозволяють гравцям легко знаходити інформацію про нові та
класичні ігри, обмінюватися відгуками та слідкувати за останніми новинами.
Створення ПЗ каталогу відеоігор на базі React сприяє задоволенню цієї потреби,
забезпечуючи зручний та ефективний доступ до великої бази даних ігор.
Мета та завдання розробки
Метою розробки є програмне забезппечення інтерактивного WEB-додатку
каталог відеоігор, який забезпечить користувачів усією необхідною інформацією
для пошуку та вибору.
Основні завдання розробки включають:
1 Розробка зручного та інтуїтивно зрозумілого інтерфейсу користувача.
2 Реалізація функціоналу фільтрації ігор за різними параметрами.
3 Створення інформаційних сторінок для кожної гри.
4 Інтеграція новин пов’язаних з відеоіграми.
5 Використати отримані результати в практику створення інформаційних
систем.
Об'єкт розробки
Об'єктом розробки є процес створення ПЗ інформаційної технології веб-
сервіс каталог відеоігор, що забезпечує користувачів інформацією про різні
відеоігри.
Предмет розробки
Предметом розробки є процес проектування програмного забезпечення
WEB-додатку каталогу відеоігор.
Методи проектування та конструювання
Для реалізації проекту використовувалися такі методи:
- проектування інтерфейсу користувача: розробка макетів та прототипів з
використанням інструментів;
5
ЧДТУ 242236.003ПЗ
- розробка на react: використання бібліотеки react для створення
динамічного та реактивного інтерфейсу користувача;
- бекенд розробка: використання node.js для створення серверної частини
додатку, забезпечуючи обробку запитів та управління базою даних;
- база даних: використання бази даних для зберігання інформації про
користувачів(Firebase);
- API інтеграція: інтеграція з зовнішніми API для отримання актуальної
інформації про ігри та новини(newsapi)[6].
Опис отриманих результатів
У результаті створено ПЗ функціональний веб-додаток каталог відеоігор,
який дозволяє користувачам легко фільтрувати відеоігри за різними параметрами.
Кожна гра має власну сторінку з детальною інформацією. Сервіс також забезпечує
постійне оновлення новин та інформації про події у світі відеоігор.
Практичне значення отриманих результатів
Практичне значення розробки полягає у створенні зручного інструменту для
геймерів, який спрощує процес вибору відеоігор. Це сприяє покращенню
користувацького досвіду та підвищує залученість гравців до геймерської
спільноти. Крім того, розроблений сервіс може використовуватися як платформа
для просування нових ігор та підтримки інтересу до класичних проектів.
Особистий внесок автора
Автор проекту здійснив повний цикл розробки веб-сервісу, включаючи
проектування інтерфейсу, написання коду на React, налаштування серверної
частини на Node.js, інтеграцію з базою даних та зовнішніми API, а також
тестування та оптимізацію продукту. Крім того, автор активно взаємодіяв з
потенційними користувачами для збору зворотного зв'язку та внесення
відповідних покращень.
6
ЧДТУ 242236.003ПЗ
РОЗДІЛ 1 ІСНУЮЧУ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАДАЧ
У цьому розділі проводиться аналіз наукової та технічної інформації, що
стосується розробки веб-додатку каталогу відеоігор, який включає інформацію
про ігри та новини про них. Аналізується доступна література, інтернет-ресурси
та існуючі рішення для виявлення актуальних проблем та методів їх вирішення.
Завданням є визначення основних вимог до функціоналу каталогу та
обґрунтування вибору технологій для його реалізації.
Аналіз існуючих рішень
Steam є одним із найпопулярніших інтернет-магазинів та соціальних
платформ для геймерів, представляючи собою відмінний приклад каталогу
відеоігор. Заснований компанією Valve Corporation, Steam надає гравцям широкий
вибір ігор на різних платформах та забезпечує низку інноваційних функцій[1].
Рисунок 1.1 - Інтерфейс інтернет-магазину Steam
7
ЧДТУ 242236.003ПЗ
Origin - це цифрова дистрибуційна платформа, що належить компанії
Electronic Arts (EA). Вона спеціалізується на продажі відеоігор та інших цифрових
контентів, таких як доповнення до ігор, ексклюзивний контент та різноманітні
акції. Оглянемо деякі ключові аспекти платформи:
1 Бібліотека ігор: Origin пропонує широкий вибір ігор для різних
платформ, зокрема для ПК та мобільних пристроїв. Вона включає як нові релізи,
так і класичні твори, що охоплюють різні жанри, від екшенів і стратегій до
спортивних ігор та ігор для дітей.
2 Ексклюзиви: Origin часто має ексклюзивний контент, який недоступний
на інших платформах. Це можуть бути унікальні предмети в іграх, спеціальні акції
або навіть ексклюзивні релізи деяких ігор.
3 Програма підписки EA Play: Origin є домашньою платформою для
програми підписки EA Play, яка дозволяє передплатникам отримувати доступ до
широкого асортименту ігор EA за фіксовану щомісячну плату. Ця програма також
надає різноманітні бонуси та знижки на інші послуги EA.
4 Соціальні функції: Origin має різноманітні соціальні функції, такі як
можливість додавати друзів, спілкуватися під час гри, створювати групи та
обмінюватися ігровими досягненнями.
5 Зручність інтерфейсу: Платформа має зручний інтерфейс, який дозволяє
легко шукати, купувати та управляти іграми. Користувачі також можуть
використовувати функції які зберігають їх геймплей та інші налаштування.
6 Акції та знижки: Origin регулярно пропонує різноманітні знижки, акції
та розіграші, що дозволяє користувачам придбати ігри за зниженими цінами або
отримати їх у подарунок.
Недоліки Origin , як каталогу відеоігор :
1 Обмежений вибір ігор: Origin здебільшого зосереджується на іграх від
EA, що значно звужує асортимент порівняно з іншими платформами, такими як
Steam.
2 Відсутність деяких популярних ігор: Через обмежений каталог на Origin
можуть бути відсутні відомі ігри від інших розробників, що змушує гравців
8
ЧДТУ 242236.003ПЗ
користуватися декількома платформами.
3 Можливі проблеми з DRM: Деякі користувачі стикаються з проблемами
DRM (Digital Rights Management), що може обмежувати доступ до ігор або
викликати труднощі при спробі грати офлайн.
4 Проблеми з підтримкою та оновленнями: Іноді користувачі стикаються
з затримками в оновленнях або недостатньою підтримкою певних ігор, що може
впливати на ігровий досвід.
5 Інтерфейс користувача: Хоча Origin має зручний інтерфейс, деякі
користувачі вважають його менш інтуїтивним у порівнянні з іншими
платформами.
6 Відсутність соціальних функцій: У порівнянні з конкурентами, такими
як Steam, Origin може не вистачати деяких соціальних функцій, таких як
спільноти, обговорення та модифікації.
7 Висока вартість ігор: Ігри на Origin часто мають вищі ціни, ніж на інших
платформах, що може бути недоліком для користувачів, які шукають дешевші
варіанти.
8 Обмеження регіону: Деякі ігри можуть бути недоступні в певних
регіонах, що обмежує доступ гравців до повного каталогу.
9 Проблеми з клієнтом: Деякі користувачі повідомляють про проблеми зі
стабільністю клієнта Origin, що може призводити до збоїв та втрати прогресу в
іграх.
10 Недостатня інтеграція з іншими платформами: Відсутність
кросплатформної інтеграції з іншими ігровими сервісами може ускладнювати
спільну гру з друзями, які користуються іншими платформами.
Недоліки Steam, як каталогу відеоігор[2] :
1 Перенасиченість контентом: Steam має величезну кількість ігор, через
що користувачам важко знайти якісний контент серед безлічі менш відомих або
низькоякісних проектів.
2 Проблеми з фільтрацією та пошуком: Хоча Steam надає різноманітні
фільтри для пошуку, користувачі часто стикаються з труднощами в пошуку
9
ЧДТУ 242236.003ПЗ
конкретних ігор через обмежену гнучкість і недостатню точність фільтрації.
3 Відсутність стандартизованих рецензій: Відгуки користувачів можуть
бути корисними, але вони часто суб'єктивні і не завжди надають повну картину
якості гри. Більше того, немає чіткої системи для відокремлення конструктивних
рецензій від спамових або упереджених коментарів.
4 Недостатня підтримка локалізації: Деякі ігри на Steam мають обмежену
підтримку локалізації, що створює проблеми для користувачів, які не володіють
англійською мовою або іншими популярними мовами.
5 Політика повернення коштів: Політика повернення коштів на Steam, хоча
і корисна, може бути недостатньо гнучкою для деяких користувачів, особливо
якщо вони зіткнулися з технічними проблемами після перевищення ліміту часу
для повернення.
6 Відсутність детальних метаданих: Інформація про ігри на Steam іноді
буває неповною або поверхневою. Часто бракує детальних технічних
специфікацій, інсайдерської інформації про розробників або історії розробки гри.
7 Монополізація ринку: Велика домінантність Steam на ринку може
обмежувати можливості для малих розробників і альтернативних платформ, що
може негативно впливати на різноманітність контенту.
8 Проблеми з контролем якості: Відсутність суворої перевірки якості ігор
перед їхнім додаванням до каталогу Steam може призводити до появи
низькоякісних або незавершених проектів.
9 Обмеженість соціальних функцій: Хоча Steam пропонує деякі соціальні
функції, такі як групи та форуми, їх функціональність часто обмежена і не завжди
відповідає потребам спільноти гравців для обговорення та обміну досвідом.
10 Застарілий дизайн: Інтерфейс Steam іноді виглядає застарілим і менш
інтуїтивним у порівнянні з новішими платформами, що може впливати на
зручність користування сервісом.
10
ЧДТУ 242236.003ПЗ
Рисунок 1.2 - Інтерфейс магазину Origin
Основні характеристики Steam:
1 Широкий Асортимент: Steam пропонує тисячі ігор для різних платформ,
від класичних до новітніх. Гравці можуть знайти ігри для ПК, Mac, Linux, а також
велику кількість ігор для віртуальної реальності.
2 Пошук та Фільтрація: Вбудовані фільтри дозволяють гравцям швидко
знаходити ігри за жанром, рейтингом, мовою та іншими параметрами.
3 Стімовські Рецензії та Оцінки: Гравці можуть залишати відгуки та
ставити оцінки іграм, що допомагає іншим користувачам при виборі.
11
ЧДТУ 242236.003ПЗ
4 Спільнота Гравців: Steam має вбудовану соціальну мережу, де гравці
можуть обговорювати ігри, долучатися до груп за інтересами та спільно грати у
багатокористувацьких іграх.
5 Рекомендації та Персоналізація: Система рекомендацій використовує
алгоритми для пропозицій ігор на основі попередньої активності гравця.
6 Акції та Розпродажі: Steam регулярно проводить розпродажі та надає
гравцям можливість придбати ігри зі значними знижками.
7 Інформація про Гру: Кожна сторінка гри містить докладну інформацію
про гру, включаючи відео-огляди, знімки екрану, вимоги та останні новини.
8 Система Досягнень: Багато ігор на Steam підтримують систему
досягнень, яка стимулює гравців до вивчення всіх аспектів гри.
Існуючі методи та засоби
Для розв’язання поставлених завдань у створенні каталогу відеоігор
використовуються такі методи та засоби:
- бібліотека React: Використання React для розробки динамічного інтерфейсу
користувача. React дозволяє створювати компонентний підхід до побудови
додатку, що значно полегшує його підтримку та масштабування;
- Node.js та Express: Для серверної частини використовується Node.js з
фреймворком Express, що забезпечує швидку обробку запитів та взаємодію
з базою даних;
- база даних: Для зберігання даних про ігри використовується реляційна
(PostgreSQL) або нереляційна (Firebase) база даних, що забезпечує швидкий
доступ та можливість масштабування.
12
ЧДТУ 242236.003ПЗ
Рисунок 1.3 - Використання Firebase
- API інтеграції: Використання зовнішніх API для отримання актуальної
інформації про відеоігри та новини. Це дозволяє зберігати дані оновленими
та релевантними.
Рисунок 1.4 - Api для новин
13
ЧДТУ 242236.003ПЗ
Актуальні проблеми
При розробці каталогу відеоігор виникають такі актуальні проблеми:
1 Обсяг та якість даних: Необхідність забезпечення точності та повноти
інформації про ігри.
2 Продуктивність: Оптимізація продуктивності додатку для швидкої
обробки запитів та завантаження даних.
3 Зручність користування: Забезпечення інтуїтивно зрозумілого
інтерфейсу для користувачів різних категорій.
Методи вирішення проблем
Для вирішення цих проблем використовуються наступні методи:
- використання сучасних технологій: React, Node.js та сучасні бази даних
дозволяють ефективно обробляти великі обсяги даних та забезпечувати
швидкий доступ до інформації;
- оптимізація запитів: Використання індексів та оптимізованих запитів до
бази даних для покращення продуктивності;
- юзабіліті-тестування: Проведення тестувань користувацького
інтерфейсу для забезпечення його зручності та зрозумілості.
Систематизація отриманих даних
Для успішної реалізації проекту необхідно систематизувати отримані дані з
різних джерел. Це включає:
- аналіз наукових та технічних статей, дисертацій, підручників та
монографій з теми розробки: Глибоке вивчення наукової літератури дозволяє
зрозуміти поточний стан досліджень та розробок у галузі створення каталогів
відеоігор. Це включає огляд методів зберігання та обробки даних, сучасних
підходів до розробки користувацьких інтерфейсів та інтеграції з зовнішніми
сервісами.
- вивчення популярних статей та інтернет-ресурсів, що стосуються
розробки каталогів відеоігор: Огляд блогів, форумів, технічних статей та онлайн-
курсів дозволяє ознайомитися з практичними аспектами розробки та новітніми
14
ЧДТУ 242236.003ПЗ
технологіями, які використовуються у створенні подібних додатків. Це допомагає
знайти інноваційні рішення та оптимальні підходи до реалізації проекту.
- огляд існуючих рішень на ринку, таких як Steam, та аналіз їхніх основних
характеристик та функцій: Дослідження популярних платформ для геймерів,
таких як Steam, GOG, Origin та інші, дозволяє зрозуміти, які функції є найбільш
затребуваними серед користувачів. Це включає аналіз інтерфейсу, функціоналу,
методів пошуку та фільтрації, системи рекомендацій, соціальних можливостей та
інших аспектів, які роблять ці платформи успішними.
- проведення порівняльного аналізу: Порівняння різних рішень дозволяє
виявити їхні переваги та недоліки, а також визначити, які функції та підходи
можуть бути адаптовані або покращені у власному проекті. Це включає оцінку
продуктивності, зручності користування, масштабованості та безпеки.
- збір зворотного зв'язку від користувачів: Важливим елементом є
вивчення відгуків та побажань користувачів існуючих платформ. Це допомагає
зрозуміти, які функції є найбільш важливими для користувачів та які проблеми
потребують вирішення. Такий підхід дозволяє створити продукт, що максимально
відповідає потребам цільової аудиторії.
- використання методу дизайн-мислення: Застосування методології
дизайн-мислення для розробки додатку допомагає глибше зрозуміти потреби
користувачів та знайти інноваційні рішення. Це включає етапи емпатії, визначення
проблем, генерації ідей, створення прототипів та тестування.
Отже, аналіз існуючих методів та засобів розв’язання поставлених завдань
показує, що для створення ефективного та зручного каталогу відеоігор необхідно
використовувати сучасні технології розробки та обробки даних. Вивчення
аналогів, таких як Steam, дозволяє визначити ключові функції та вимоги до
подібних систем, що сприяє розробці високоякісного продукту, який задовольняє
потреби геймерів. Проведення подальших досліджень у цій галузі є необхідним
для вдосконалення існуючих рішень та впровадження нових інноваційних
підходів.
15
ЧДТУ 242236.003ПЗ
Постановка задачі:
- інтерфейс користувача;
- розробити зручний та інтуїтивно зрозумілий інтерфейс користувача.
- фронтенд;
- використати React для створення динамічного інтерфейсу.
- бекенд;
- розробити серверну частину на Node.js;
- управляти базою даних Firebase.
- інтеграція API;
- інтегрувати зовнішні API для отримання новин та інформації про
ігри.
- фільтрація;
- реалізувати функціонал фільтрації ігор за різними параметрами.
- інформаційні сторінки;
- створити детальні сторінки для кожної гри.
- оновлення новин;
- забезпечити постійне оновлення новин про відеоігри.
- тестування та оптимізація;
- провести тестування та оптимізацію додатку.
16
ЧДТУ 242236.003ПЗ
ВИСНОВОК ДО РОЗДІЛУ 1
У даному розділі був проведений аналіз наукової та технічної інформації,
що стосується розробки веб-додатку каталогу відеоігор. Були розглянуті існуючі
рішення, такі як Steam та Origin, які надають широкий вибір ігор та інноваційні
функції для геймерів. За допомогою сучасних технологій, таких як React для
фронтенду та Node.js для бекенду, планується створення зручного та
функціонального веб-додатку, який дозволить користувачам легко фільтрувати,
знаходити та обговорювати відеоігри, а також отримувати актуальні новини у світі
геймінгу. Актуальні проблеми, такі як обсяг та якість даних, продуктивність та
зручність користування, були ідентифіковані, і для їх вирішення запропоновано
використовувати методи, такі як оптимізація запитів, тестування юзабіліті та
вивчення зворотного зв'язку від користувачів.
Загальний аналіз існуючих методів та засобів розв’язання проблем показав,
що для успішного створення каталогу відеоігор необхідно поєднувати сучасні
технології та аналіз існуючих ринкових рішень.
17
ЧДТУ 242236.003ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
У світі сучасних технологій галузь відеоігор постійно зростає та
розвивається, привертаючи увагу мільйонів гравців з усього світу. Споживачі
шукають зручний та ефективний спосіб вибору та придбання відеоігор, тоді як
розробники створюють нові продукти та інноваційні рішення, конкуруючи за
увагу аудиторії.
Відповідно до цих потреб, метою цього проекту є розробка веб-додатку
каталогу відеоігор, який буде забезпечувати гравців зручним інструментом для
вибору та придбання ігор, а також надавати актуальні новини та інформацію про
події у світі геймінгу.
У цьому розділі буде описано процес впровадження результатів досліджень
у практику проектування програмного забезпечення інформаційних систем,
зокрема створення веб-додатку каталогу відеоігор. Будуть розглянуті основні
етапи розробки, вибрані технології та методи, а також намічені перспективи
подальшого розвитку продукту.
2.1 Моделювання предметної області
Моделювання предметної області є важливим етапом у розробці будь-якого
програмного продукту, включаючи веб-додаток каталогу відеоігор. Цей процес
допомагає зрозуміти структуру та взаємозв'язки між об'єктами та сутностями, що
характеризують дану галузь. Основною метою моделювання є створення чіткої та
послідовної системи, яка відображає всі аспекти роботи веб-додатку.
Розглянемо основні сутності предметної області, вони складаються з таких
елементів:
1 Гра: Основна сутність каталогу, яка включає в себе інформацію про
конкретну відеогру, таку як назва, жанр, картинку, опис.
18
ЧДТУ 242236.003ПЗ
2 Користувач: має можливість переглядати інформацію про ігри.
3 Новини: Включає в себе останні оновлення та події у світі відеоігор, які
можуть бути корисними для користувачів.
Під час розробки будуть детально вивчатися кожна з цих сутностей, а також
визначатися додаткові атрибути та характеристики для забезпечення повного
функціоналу продукту.
2.1.1 Предметна область для веб-додатку каталог відеоігор
1 Користувача (User):
- атрибути: Ім'я користувача, електронна пошта, пароль;
- опис: Представляє користувача, який має змогу реєструватися
та увійти в систему.
2 Ігра (Game):
- атрибути: Назва, жанр, фото;
- опис: Представляє відеогру, яка може бути додана до каталогу.
Містить інформацію про гру для користувачів.
3 Категорія (Category):
- атрибути: Назва, опис;
- опис: Класифікація ігор за жанрами, що допомагає
користувачам знаходити ігри відповідно до їхніх вподобань.
4 Новини та Оновлення (News & Updates):
- атрибути: Оголошення, оновлення гри, події;
- опис: Інформація про останні новини у світі відеоігор,
оголошення нових ігор та оновлень.
Реалізовано графічне відображення предметної області (Рис 2.1).
19
ЧДТУ 242236.003ПЗ
Рисунок 2.1 - Модель предметної області
Створено словник предметної області:
1 Користувач (User);
- атрибути;
- ім'я користувача (username): Ім'я, яке ідентифікує користувача;
- електронна пошта (email): Адреса електронної пошти
користувача;
- пароль (password): Захищена інформація для аутентифікації
користувача.
- опис;
20
ЧДТУ 242236.003ПЗ
- представляє користувача системи, який може реєструватися та
увійти в систему.
2 Ігра (Game);
- атрибути;
- назва (title): Назва відеогри;
- жанр (genre): Жанр відеогри (наприклад, екшн, стратегія, RPG
тощо);
- фото (photo): Зображення або посилання на зображення гри.
- опис;
- представляє відеогру, яка може бути додана до каталогу. Містить
інформацію про гру для користувачів.
3 Категорія (Category);
- атрибути;
- назва категорії;
- опис категорії, що класифікує ігри за жанрами.
- опис;
- класифікація ігор за жанрами, що допомагає користувачам
знаходити ігри відповідно до їхніх вподобань.
4 Новини та Оновлення (News & Updates):
- атрибути:
- оголошення (announcements): Оголошення та новини про
відеоігри;
- оновлення гри (game_updates): Інформація про оновлення та патчі
для існуючих ігор.
- опис;
- інформація про останні новини у світі відеоігор, оголошення
нових ігор та оновлень.
2.1.2 Робоча область моделювання: Веб-додатоку Каталог відеоігор
1 Реєстрація та Вхід;
21
ЧДТУ 242236.003ПЗ
- дозволити користувачам створювати облікові записи за допомогою
ім'я користувача, електронної пошти та пароля;
- забезпечити можливість входу для вже зареєстрованих
користувачів.
2 Каталог Ігор;
- показати список ігор разом з їхніми жанрами та фотографіями;
- дозволити фільтрувати ігри за жанром або категорією;
- забезпечити можливість перегляду детальної інформації про кожну
гру.
3 Категорії та Жанри;
- показати список доступних категорій та жанрів гри;
- дозволити користувачам переглядати ігри відповідно до обраних
категорій або жанрів.
4 Новини та Оновлення;
- показати оголошення про нові ігри, оновлення та події у світі
відеоігор;
- забезпечити можливість підписки на оновлення та отримання
сповіщень.
2.2 Формування та аналіз вимог
Формування та аналіз вимог для веб-додатку каталогу відеоігор є ключовим
етапом у процесі розробки програмного забезпечення. Цей етап передбачає
детальне вивчення потреб користувачів та визначення функціональних та
нефункціональних вимог до системи.
В даному пункті розглянемо процес формування та аналізу вимог для веб-додатку
каталогу відеоігор. Дослідимо потреби користувачів, визначимо основні функції
та характеристики системи, а також обговоримо основні аспекти, що впливають
на її успішну реалізацію.
Мета цього пункту полягає в тому, щоб визначити та описати всі вимоги до
веб-додатку каталогу відеоігор з точки зору його користувачів, функціональності
22
ЧДТУ 242236.003ПЗ
та технічних характеристик. Це дозволить нам зрозуміти, як система повинна
працювати та які функції вона має виконувати для задоволення потреб своїх
користувачів.
Відповідно до цього, даний документ буде включати аналіз потреб
користувачів, опис функціональних та нефункціональних вимог, а також критерії
прийнятності системи.
Його результатом буде чіткий опис вимог до веб-додатку каталогу
відеоігор, який буде використовуватися як основа для подальшої розробки та
тестування системи.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника. Функціональні та нефункціональні вимоги:
Формування вимог до ПЗ:
- операційна система: Windows 7 або новіше, macOS 10.12 або новіше,
будь-який розповсюджений дистрибутив Linux;
- процесор: Intel Core i3 або еквівалентний AMD;
- оперативна пам'ять: Мінімум 4 ГБ RAM;
- веб-браузер: Остання версія веб-браузера, такого як Google Chrome,
Mozilla Firefox, Microsoft Edge або Safari;
- інтернет-з'єднання: Швидкість з'єднання не менше 5 Мбіт/с для
нормальної роботи веб-сайту.
Первинні вимоги:
1 каталог відеоігор: система повинна надавати можливість перегляду
каталогу відеоігор з різних платформ;
2 фільтрація та сортування: користувач повинен мати можливість
фільтрувати ігри за різними критеріями;
3 детальна інформація про гру: для кожної гри повинна бути доступна
детальна інформація, включаючи опис, зображення тощо;
4 актуалізація інформації: система повинна автоматично оновлювати
інформацію про новини з інтернет-джерел.
23
ЧДТУ 242236.003ПЗ
Детальні вимоги:
1 реєстрація та авторизація: система повинна забезпечити можливість
реєстрації та входу користувачів;
2 фільтр: система повинна мати можливість сортувати за жанрами;
3 мобільна сумісність: система повинна бути оптимізована для
використання на мобільних пристроях з різних платформ.
Функціональні вимоги:
1 Реєстрація користувача:
- система повинна дозволяти користувачам створювати облікові
записи, вводячи свої електронну пошту та пароль;
- підтвердження унікальності електронної адреси під час реєстрації.
2 Вхід користувача:
- система повинна надавати можливість входу для вже
зареєстрованих користувачів, вводячи їхні дані для автентифікації.
3 Перегляд каталогу ігор:
- користувачам слід мати можливість переглядати список ігор разом з
їхніми жанрами та фотографіями.
4 Фільтрація ігор:
- система повинна дозволяти користувачам фільтрувати ігри за
жанром або категорією.
5 Детальна інформація про гру:
- користувачам слід мати можливість переглядати детальну
інформацію про кожну гру.
6 Новини та оновлення:
- користувачі повинні мати доступ до оголошень про нові ігри,
оновлення та події у світі відеоігор.
Нефункціональні вимоги:
1 Безпека даних:
- система повинна забезпечувати захист конфіденційності та
цілісності персональних даних користувачів;
24
ЧДТУ 242236.003ПЗ
- паролі користувачів повинні бути захищені шифруванням у базі
даних.
2 Швидкодія:
- система повинна бути швидкою та ефективною у відгуку на запити
користувачів;
- серверна частина повинна мати оптимізований код для мінімізації
часу завантаження сторінок.
3 Масштабованість:
- система повинна бути масштабованою, щоб витримувати велику
кількість користувачів та об'єм даних;
- архітектура системи повинна бути гнучкою для легкої
розширюваності функціоналу.
4 Крос-платформеність:
- веб-додаток повинен бути сумісним з різними веб-переглядачами та
операційними системами;
- відображення інтерфейсу повинно бути адаптивним для різних типів
пристроїв та розмірів екранів.
Вимоги замовника:
- унікальний дизайн інтерфейсу: Створення дизайну інтерфейсу, який
вражає оригінальністю та новаторством, надаючи користувачам неповторний
візуальний досвід.
- алгоритми та технології: Використання новітніх алгоритмів та
технологій, які раніше не були застосовані у подібних продуктах, для
забезпечення унікальних можливостей та переваг.
2.2.2 Формування вимог за допомогою діаграми прецедентів
Сформовано діаграму прецедентів для вимог та визначено основні
прецеденти та їхні взаємодії(Рис 2.2. та Рис 2.3)[4/5].
1 Актори:
25
ЧДТУ 242236.003ПЗ
- користувач: кінцевий користувач, який взаємодіє входом чи
реєстрацією.
2 Прецеденти:
- авторизація: користувач може авторизуватись;
- реєстрація: користувач може зареєструватись.
3 Взаємодія:
- користувач використовує реєстрацію чи авторизацію для взаємодії з
базою даних каталогу відеоігор.
Рисунок 2.2 - Діаграма прецидентів авторизації та реєстрації
Рисунок 2.3 - Діаграма прецидентів взаємодія з сайтом
26
ЧДТУ 242236.003ПЗ
Формуванням вимог за допомогою діаграм прецедентів спочатку
визначаються основні взаємодії між користувачами (акторами) та системою. Вона
допомагає ідентифікувати функціональність системи та вимоги до неї. Ось
текстовий опис формування вимог на основі діаграми прецедентів:
1 Актори:
- гравець: кінцевий користувач, який взаємодіє з каталогом відеоігор.
2 Прецеденти:
- фільтрація ігор: гравець може використовувати цю функцію для
фільтрації ігор за жанром або категорією;
- перегляд детальної інформації: гравець може переглядати докладну
інформацію про кожну гру, включаючи опис, оцінки, відгуки тощо;
- перегляд новин: гравець може переглядати оголошення про нові ігри,
оновлення та інші події у світі відеоігор.
3 Взаємодія:
- гравець використовує "Фільтрацію ігор", "Перегляд детальної
інформації" та "Перегляд новин" для взаємодії з системою каталогу
відеоігор.
2.3 Проектування логічної структури програмного комплексу
Проектування логічної структури програмного комплексу є ключовим
етапом у розробці будь-якого програмного забезпечення, включаючи веб-додатки.
Цей етап передбачає розробку архітектурної концепції системи та визначення
взаємозв'язків між її складовими елементами.
Метою даного процесу є створення ефективної та логічної структури WEB-
додатку каталогу відеоігор, що дозволить забезпечити високу продуктивність,
надійність. В процесі проектування визначаються основні компоненти та їх
взаємодія, а також розробляються схеми баз даних та логічні алгоритми роботи
системи.
27
ЧДТУ 242236.003ПЗ
У даному вступі розглянемо ключові аспекти проектування логічної
структури програмного комплексу для веб-додатку каталогу відеоігор. Зокрема,
буде розглянуто визначення діаграми та зв’язки між ними.
2.3.1 Діаграми класів
Діаграми класів[4] для веб-додатка каталогу відеоігор ми маємо декілька
класів, які відображають ключові сутності системи та їхні взаємозв'язки(Рис 2.4 та
2.5).
Рисунок 2.4 - Діаграма класів для веб-додатка каталогу відеоігор
Вона включає в себе клас "Користувач", який має такі властивості:
- id: рядок, який має ідентифікаційний номер користувача;
- електронна пошта: рядок, що містить електронну пошту користувача;
- пароль: рядок, який містить пароль користувача.
«Гра» включає такі властивості:
- id: рядок, який має ідентифікаційний номер гри;
- назва: рядок, що містить назву гри;
- жанр: рядок, який містить жанр гри.
«Новини» включає такі властивості:
- id: рядок, який має ідентифікаційний номер новини;
- заголовок: рядок, що заголовок новини;
- текст: рядок, який містить основний текст новини.
«Категорії» включає такі властивості:
28
ЧДТУ 242236.003ПЗ
- id: рядок, який має ідентифікаційний номер категоії;
- назва: рядок, що містить назву категорії.
Рисунок 2.5 - Діаграма класів для веб-додатка каталогу відеоігор з властивостями
та методами
2.3.2 Діаграми пакетів
Представлені пакети[5] класів(Рис 2.6 та 2.7), які відповідають різним
частинам системи. Зв'язки між класами вказують на залежності між ними.
Пакет "Новини" має класи та методи, пов'язані з відображенням, додаванням
та видаленням новин. Пакет "API" також має свої класи та методи для отримання
та надсилання даних. Взаємодія між пакетами відображена стрілкою, що показує,
що пакет "Новини" використовує функціональність пакету "API".
29
ЧДТУ 242236.003ПЗ
Рисунок 2.6 - Діаграма пакетів новин
Пакет "Гра" включає клас "Гра", який представляє собою основну сутність для
опису гри. Ось опис його властивостей:
- назва: рядок, який містить назву гри;
- картинка: зображення або посилання на зображення, що представляє гру;
- жанр: рядок, що визначає жанр гри;
- опис гри: рядок, який містить опис гри, включаючи інформацію про
сюжет, геймплей та інші важливі характеристики.
Цей клас дозволяє представляти інформацію про гру, включаючи її основні
властивості та додатковий опис, який допомагає користувачам краще розуміти її
характеристики та особливості.
Рисунок 2.7 - Діаграма пакетів гри
30
ЧДТУ 242236.003ПЗ
Пакет "Авторизація та реєстрація" містить клас "АвторизаціяРеєстрація",
який включає методи для автентифікації користувача та реєстрації нового
користувача. Цей пакет використовується для забезпечення функціоналу
авторизації та реєстрації в системі.
Пакет "Користувач" містить клас "Користувач", який містить методи для
входу в систему та реєстрації нового облікового запису. Цей пакет представляє
користувача системи, який використовує функціонал авторизації та реєстрації.
Стрілка "->" вказує на використання класом "АвторизаціяРеєстрація"
функціоналу класу "Користувач", що означає, що функції авторизації та реєстрації
використовуються класом "Користувач".
Рисунок 2.8 - Діаграма пакетів реєстрації та авторизації
2.4 Архітектурне проектування
Архітектурне проектування є ключовим етапом у розробці програмного
забезпечення, оскільки воно визначає загальну структуру та організацію системи.
Цей етап передбачає розробку концепції системи, вибір архітектурних патернів та
визначення основних компонентів програмного комплексу.
Метою архітектурного проектування є створення такої архітектури, яка
забезпечить високу продуктивність, масштабованість, надійність та ефективне
31
ЧДТУ 242236.003ПЗ
управління WEB-додатоком каталог відеоігор протягом усього життєвого циклу
продукту. У процесі архітектурного проектування враховуються вимоги до
системи, особливості доменної області та сучасні технології розробки.
У даному вступі ми розглянемо ключові аспекти архітектурного
проектування для веб-додатку каталогу відеоігор. Зокрема, буде розглянуто
діаграми компонентів та розгортання.
2.4.1 Діаграма компонентів
Діаграма компонентів[4] відображає структуру системи на рівні
компонентів та їх взаємодії.Таку діаграму наведено нижче(Рис 2.9), для розуміння
структури системи та взаємодії між елементами.
Рисунок 2.9 - Діаграма компонентів авторизації/реєстрації
2.4.2 Діаграма розгортання
Діаграма розгортання[4] описує взаємодію між компонентами веб-додатка.
Реалізовано графічне зображення, що допоможе зрозуміти взаємодію між
компонентами та їх функціями.
32
ЧДТУ 242236.003ПЗ
Рисунок 2.10 - Діаграма розгортання для веб-додатка каталогу відеоігор
2.5 Моделювання поведінки системи
Моделювання поведінки системи є важливим етапом у розробці
програмного забезпечення, оскільки дозволяє передбачити та зрозуміти, як
система буде взаємодіяти з користувачами та іншими складовими середовища.
Цей процес включає в себе опис різних сценаріїв використання, взаємодію
користувачів з системою та взаємодію між компонентами програмного
забезпечення.
Моделювання поведінки системи допомагає зрозуміти, як система буде
реагувати на різні ситуації та які функціональні можливості вона повинна
надавати. Для цього ми використаємо діаграми діяльності, послідовності,
комунікації та скінченного автомату.
В результаті моделювання поведінки системи отримаємо чітке уявлення про
те, як система має працювати в різних умовах та які вимоги вона повинна
задовольняти. Це допоможе уникнути недорозумінь та помилок під час подальшої
розробки програмного забезпечення.
2.5.1 Діаграма діяльності
Діаграма діяльності дозволяє легко розуміти послідовність дій користувача
та взаємодію з додатком(Рис 2.11)[4].
33
Рисунок 2.11 Діаграма діяльності для веб-додатка каталогу відеоігор
2.5.2 Діаграма послідовності
Діаграма послідовності(Рис 2.12)[4] розкриває основні кроки взаємодії між
користувачем та веб-додатком, такі як відкриття веб-сайту, вибір гри чи
сортування за жанром, а також авторизація та реєстрація. Кожен крок
відображений стрілками вгору та вниз, щоб показати напрямок взаємодії.
35
2.5.3 Діаграма комунікації
Діаграма комунікації(Рис 2.13)[4] вказує на важливі кроки та взаємодії, що
відбуваються під час використання додатка. Вона є інструментом для аналізу та
визначення процесів, які відбуваються за лаштунками веб-додатка.
2.5.4 Діаграма скінченного автомату
Діаграма скінченного автомату(Рис 2.14)[4] відображає основні стани та
переходи в процесі використання магазину відеоігор.
Рисунок 2.14 - Діаграма скінченного автомату для веб-додатку каталогу відеоігор
37
ЧДТУ 242236.003ПЗ
ВИСНОВОК ДО РОЗДІЛУ 2
Розділ охоплює ключові етапи розробки веб-додатку каталогу відеоігор,
включаючи формування вимог, проектування логічної структури та архітектури, а
також моделювання поведінки системи. Використання різних типів діаграм та
методів аналізу дозволяє систематично та послідовно розробляти програмний
комплекс, забезпечуючи його ефективність та відповідність вимогам замовника.
Результатом цього процесу має бути високоякісний та функціональний веб-додаток
каталог відеоігор, який задовольняє потреби користувачів у зручному перегляді та
виборі відеоігор.
37
ЧДТУ 242236.003ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
Цей етап включає в себе реалізацію вимог, які були сформульовані під час
аналізу та проектування, а також перевірку відповідності розробленого
програмного забезпечення встановленим критеріям якості через тестування. Тут
буде розкрито основні завдання, що стоять перед розробниками, а також описано
загальну стратегію розробки та тестування програмного забезпечення.
3.1 Розробка програмного комплексу
Розробка програмного комплексу включає в себе ряд етапів, що мають на
меті створення функціонального і надійного веб-додатку каталогу відеоігор.
Основні кроки розробки включають аналіз вимог, проектування архітектури
системи, написання коду, тестування та впровадження.
Кожен з цих етапів є важливим для успішної реалізації програмного
продукту.
Аналіз вимог передбачає вивчення потреб користувачів та формулювання вимог
до функціональності та характеристик системи.
Тестування включає проведення різноманітних тестів для перевірки якості
та правильності роботи програми. На кожному етапі розробки використовуються
певні методології та інструменти, спрямовані на забезпечення якості та
ефективності процесу.
У цьому розділі будуть розглянуті кожен з цих етапів детальніше, а також
представлені результати роботи на кожному з них. Також буде описано стратегії
тестування, які були використані для перевірки функціональності та надійності
розробленого програмного забезпечення.
3.1.1 Обґрунтування вибору засобів реалізації
Для реалізації задач було використано такі засоби:
1 React: Використання бібліотеки React для реалізації клієнтської частини
додатку є обґрунтованим, оскільки React дозволяє побудувати ефективний,
38
ЧДТУ 242236.003ПЗ
динамічний та інтерактивний інтерфейс користувача. Завдяки використанню
компонентного підходу, код стає більш структурованим та легко підтримується.
2 Node.js: Для серверної частини веб-додатку вибір пав зупинитися на
Node.js , що забезпечує високу продуктивність та можливість швидкої обробки
запитів, що важливо для веб-додатків, що мають велику кількість користувачів.
3 База даних: нереляційної (Firebase) бази даних.
4 API інтеграції: Для отримання актуальної інформації про відеоігри та
новини використаємо news API. Це дозволить підтримувати дані оновленими та
релевантними.
3.1.2 Опис структурної (функціональної) схеми
- Клієнтська частина (Frontend):
- головна сторінка: перегляд списку ігор;
- сторінка детальної інформації про гру: відображення деталей
конкретної гри, включаючи опис, жанр тощо;
- реєстрація та вхід: функціонал для реєстрації нового користувача та
входу в систему для існуючих користувачів;
- фільтрація та сортування: можливість фільтрувати ігри;
- новини та оновлення: відображення оновлення та події у світі
відеоігор.
- Серверна частина (Backend):
- маршрутизація: обробка запитів користувачів та відповідне
маршрутизування їх до відповідних функцій обробки;
- керування користувачами: реєстрація, вхід, аутентифікація та
авторизація користувачів;
- зовнішні api: взаємодія з зовнішніми сервісами для отримання
актуальної інформації про відеоігри та новини.
- База даних:
- таблиця "authentication": зберігання даних про користувачів, такі як
ім'я, електронна пошта, захешований пароль тощо.
39
ЧДТУ 242236.003ПЗ
3.1.3 Опис логічної схеми системи
Рисунок 3.1- Опис логічної схеми системи
Логічна схема системи[5] може бути описана як взаємодія між клієнтською
(Frontend) та серверною (Backend) частинами:
- Клієнтська частина (Frontend):
- користувач переходить на головну сторінку, де переглядає каталог
ігор;
- обираючи конкретну гру, користувач потрапляє на сторінку детальної
інформації про гру, де може дізнатися більше про неї;
- для реєстрації або входу, користувач переходить на сторінку
реєстрації та входу;
- після успішного входу в систему, користувач може використовувати,
щоб знаходити ігри за різними критеріями;
- крім того, користувач може переглядати новини та оновлення, щоб
бути в курсі останніх подій у світі відеоігор.
40
ЧДТУ 242236.003ПЗ
- Серверна частина (Backend):
- запити від клієнтів передаються на маршрутизацію, яка визначає, як
обробляти кожен запит;
- керування користувачами відповідає за реєстрацію, аутентифікацію та
авторизацію користувачів;
- взаємодія з базою даних відбувається для збереження та отримання
інформації про користувачів;
- у разі потреби сервер може використовувати зовнішні api для
отримання додаткової інформації.
3.1.4 Розробка бази даних
Для використання обрано Firebase[3] як бази даних для веб-додатка каталогу
відеоігор, для реєстрації та авторизації користувачів .
Вона має кілька переваг:
1 Швидка для розгортання: Firebase пропонує готові інструменти для
роботи з базою даних, що дозволяє швидко розпочати розробку без необхідності
встановлення та налаштування окремого сервера.
2 Гнучкість сховища даних: Firebase Realtime Database пропонує гнучку
структуру даних, яка дозволяє легко організувати та зберігати інформацію про
відеоігри та користувачів.
3 Швидкий доступ до даних: Firebase забезпечує швидкий доступ до даних
через реальний час, що може бути корисним для відображення актуальної
інформації для користувачів.
4 Інтеграція з іншими сервісами Firebase: Крім бази даних, Firebase також
пропонує інші сервіси, такі як аутентифікація, зберігання файлів, аналітика тощо,
які можуть бути корисними для розширення функціональності додатку.
5 Масштабованість: Firebase може масштабуватися від простих додатків до
складних систем, що дозволяє розробникам розширювати та вдосконалювати
41
ЧДТУ 242236.003ПЗ
додаток з ростом обсягу даних та користувачів.
Рисунок 3.2 - Вигляд Firebase
3.1.5 Розробка інтерфейсу користувача
Програмне забезпечення WEB-додаток каталог відеоігор має 4 сторінки:
- Home;
- About;
- News;
- Profile.
Перша сторінка Home є основною та містить список ігор(Рис 3.3).
Рисунок 3.3 - Інтерфейс головної сторінки
42
ЧДТУ 242236.003ПЗ
Користувач може відсортувати по жанрам(Рис 3.4).
Рисунок 3.4 - Головна сторінка після сортування
При натисканні на корзину буде виведено відповідне вікно(Рис 3.5).
Рисунок 3.5 - Відображення пустої корзини
Але спочатку потрібно зареєструватись/ авторизуватись. Інакше користувача
перенаправить на сторінку Profile. Корзина має логіку на додавання однакових
товарів за сумування цін(Рис 3.6) [8/9/10].
43
ЧДТУ 242236.003ПЗ
Рисунок 3.6 - Відображення наповненої корзини
При сбробі купити буде виведено відповідну анімацію(Рис 3.7).
Рисунок 3.7 - Анімація, після спроби покупки
Також при натисненні на будь яку гру буде виведено більш детальна
інформація (Рис 3.8).
44
ЧДТУ 242236.003ПЗ
Рисунок 3.8 - Відображення детальної інформації про гру
На сторінці About ознайомча інформація(Рис 27).
Рисунок 3.9 - Інтерфейс сторінки About
На наступній сторінці(Рис 3.10) в нас виводятться новини за допомогою API
NEWS.
45
ЧДТУ 242236.003ПЗ
Рисунок 3.10 - Інтерфейс сторінки News
І на четвертій сторінці реалізована реєстрація та авторизація.(Рис 3.11-3.12).
Рисунок 3.11 - Інтерфейс сторінки Profile реєстрація
46
ЧДТУ 242236.003ПЗ
Рисунок 3.12 - Інтерфейс сторінки Profile входу
Якщо користувач увійшов, то буде виведено відповідну інформацію(Рис 3.13).
Рисунок 3.13 - Інтерфейс сторінки Profile після входу
47
ЧДТУ 242236.003ПЗ
3.1.6 Опис розробки програмних компонентів
Розробка програмних компонентів каталогу відеоігор передбачає створення
різних функціональних частин, які допоможуть користувачам переглядати ігри, та
ігрові новини. Ось опис деяких з цих компонентів:
1 Шапка (Header): компонент, який містить логотип магазину та навігаційні
посилання для переходу на різні сторінки магазину, такі як домашня сторінка,
каталог товарів, корзина тощо;
2 Категорії (Categories): компонент, що відображає список категорій
товарів. Користувач може обирати категорію, щоб переглянути товари, що
відносяться до цієї категорії;
3 Товари (Items): компонент, який відображає перелік товарів, доступних у
магазині. Кожен товар може мати своє зображення, назву, опис та ціну. Користувач
може додавати товари до корзини або переходити до сторінки з детальним описом
товару;
4 Показ повного товару (ShowFullItem): компонент, який відображає
детальний опис окремого товару. Користувач може переглядати всю доступну
інформацію про товар та додавати його до корзини;
5 Корзина (Cart): компонент, що відображає список товарів, які додані до
корзини. користувач може переглядати товари, змінювати їх кількість або видаляти
з корзини;
6 Кнопка купівлі (Buy): компонент, який відображає кнопку для
завершення покупки. Після натискання на цю кнопку користувач переходить до
процесу оплати;
7 Авторизація (AuthDetails): компонент, який відповідає за авторизацію
користувача в системі. Він містить форми для входу та реєстрації, а також логіку
для виконання цих дій;
8 Новини (News): цей компонент використовує API NewsAPI для
отримання списку новин про ігри та відображає їх у вигляді списку на сторінці.
48
ЧДТУ 242236.003ПЗ
3.2 Тестування системи
У цьому розділі розглянуто стратегію тестування, а також проведемо
валідацію та верифікацію розробленого програмного забезпечення.
Мета цього етапу - перевірити функціональність, безпеку та стабільність
системи перед її впровадженням. Ретельне тестування допоможе виявити та
виправити будь-які помилки, які можуть виникнути в процесі використання
програмного забезпечення користувачами.
У наступних розділах детально розглянемо кожен аспект тестування, від
планування тестів до їх виконання та аналізу результатів.
3.2.1 Модульне тестування
Перевіримо авторизацію, вводимо замість пошти рандомні букви(Рис 3.14).
Рисунок 3.14 - Перевірка захисту від неправильного вводу пошти
Також перевіримо реєстрацію (Рис 3.15).
49
ЧДТУ 242236.003ПЗ
Рисунок 3.15 - Перевірка захисту від неправильного вводу паролю
Отже логіка працює, тести пройдено успішно.
3.2.2 Інтеграційне тестування
Перевіромо роботу бекенду з базою даних. Для цього проведемо реєстрацію
та авторизацію(Рис 3.16 та 3.17).
Рисунок 3.16 - Реєстрація
50
ЧДТУ 242236.003ПЗ
Рисунок 3.17 – Авторизація
В результаті бачимо, що користувач увійшов(Рис 3.17) та присутній у БД(Рис 3.18).
Рис 3.18 - Доданий новий користувач
3.2.3 Системне тестування
Системне тестування є важливим етапом життєвого циклу розробки
програмного забезпечення, під час якого перевіряється повна інтегрована система
для оцінки її відповідності визначеним вимогам. На цьому етапі тестуються всі
компоненти системи разом(Табл 3.1), щоб переконатися, що всі частини працюють
належним чином і взаємодіють коректно.
Таблиця 3.1
Функція Протестовано Працює Опис дії
Реєстрація Так Так Користувачі вдало
реєструються та
додаються в БД
51
ЧДТУ 242236.003ПЗ
Продовження таблиці 3.1
Авторизація Так Так Користувачі можуть
входити по
зареєстрованим
даним.
Вивід новин Так Так Дані з API Вдало
додаються на сайт.
Сортування за Так Так Виводяться
жанрами необхыдны жанри.
Вивід детальної Так Так При натисненны на
інформації гру, виводиться
детальна
інформація.
Переходи між Так Так Переходи
сторінками працюють, як
потрібно.
Робота анімацій Так Так Всі анімації
відтворюються.
Зв’язок з БД Так Так Зв'язок присутній,
всі данні
передаються та
отримуються.
Системне тестування проведено успішно, всі вимоги виконано.
3.2.4 Приймальне тестування
52
ЧДТУ 242236.003ПЗ
Приймальне тестування є кінцевим етапом тестування програмного
забезпечення, на якому визначається, чи відповідає розроблений продукт вимогам
і очікуванням замовника або кінцевих користувачів.
Створено дизайн інтерфейсу(Рис 3.3-3.17), який вражає оригінальністю та
новаторством, надаючи користувачам неповторний візуальний досвід для пошуку
ігор та перегляду новин про них. А також використано новітні алгоритми та
технології для забезпечення унікальних можливостей та переваг.
Загальна оцінка:
Програмне забезпечення WEB-додаток каталог відеоігор працює добре та
виконує всі поставлені задачі. Також він буде доповнюватись новим функціоналом
, для покращення користувацького досвіду в майбутньому.
3.3 Приклади впровадженого програмного комплексу
Оскільки, головною задачею є надавати користувачам неповторний
візуальний досвід для пошуку ігор та перегляду новин про них. То роботу над
покращенням додатку буде продовжено в майбутньому.
Тож, планується розширити функціональність , покращивши та додавши нові
компоненти . Що дозволить зробити каталог ще кращим та приємнішим.
Запуск сервера для хостингу каталогу відеоігор, є необхідним у розвитку
нашого проекту. Однак реалізація цієї ідеї спонсорів чи низькошвидкісні
безкоштовні хостинги.
53
ЧДТУ 242236.003ПЗ
ВИСНОВОК ДО РОЗДІЛУ 3
Тут була розглянута розробка та WEB-додатоку каталогу відеоігор.
Розглянуті засоби реалізації, структура додатку інтерфейсну частину та проведено
групу тестів, що девели правельну працездатність проекту. Також перевірено
робота БД, що також є успішним.
Все це зроблено у вигляді модульного тестування, інтегрованого тестування,
системного тестування і приймального тестування.
Додаток успішно створено та протестовано його логічні компоненти та
інтерфейсну частину.
54
ЧДТУ 242236.003ПЗ
ВИСНОВКИ
Результатом моєї цієї кваліфікаційної роботи бакалавра є створення
програмного забезпечення WEB-додаток каталог відеоігор. Було реалізовано 4
сторінки. Перша має основну роботу. Представляє собою каталог ігор з
можливостю сортувати по категоріям чи вивести повну інформацію про гру.
Реалізована логіка корзини, де спочатку потрібно увійти/зареєструватись. Потім
користувач поме додавати товари, що будуть сумуватись ціною, але не можна
додати дві однакові гри. І при спробу покупки буде виведено анімацію.
Друга сторінка має ознайомчу інформацію. На третю сторінку виводяться
новини по певному запиту за допомогою API, а також перед виводом сортуються
та видаляються пусты чи не доречні.
Остання сторінка і є авторизація та реєстрація, перехід між якими зроблено
логікою та додані анімації. Також присутні перевірки та вимоги для правильного
вводу пошти на паролю. І всі ці дані записуються в Firebase. Додаток успішно
виконує всі вимоги, що були задані. Архітектура є гнучкою, а інтуїтивно
зрозумілий інтерфейс має адаптацію під різні екрани. Всі функції та інтерфейсні
компоненти протестовано. А оптимізація забезпечує стабільну роботу системи.
В цілому, додаток задовольняє всі поставлені вимоги.
55
ЧДТУ 242236.003ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 "gemini"[Електронний ресурс] – пошук інформації для коду та документації:
https://gemini.google.com/
2 "chatgpt"[Електронний ресурс] - пошук інформації для коду та документації:
https://chatgpt.com/
3 "firebase"[Електронний ресурс] – Документація та робота з БД:
https://console.firebase.google.com/
4 "OpenWeather"[Електронний ресурс] - Для створення діаграм:
https://mermaid.live/
5 "plantuml"[Електронний ресурс] – Для створення діаграм (UML):
https://www.plantuml.com/plantuml/uml
6 “Wiki” [Електронний ресурс] - перегляд статей, для написання своїх текстів:
https://uk.wikipedia.org/
7 Методичні рекомендіції для написання роботи бакалавра:
Кваліфікаційна робота бакалавра нове ПЗАС 2023.doc
8 Документація для React[Електронний ресурс]:
https://legacy.reactjs.org/
9 Документація для Webstorm[Електронний ресурс]:
https://www.jetbrains.com/webstorm/
10 Документація для Node.js[Електронний ресурс]:
https://nodejs.org/en/learn/getting-started/introduction-to-nodejs
56