Інтернет-магазин мобільної техніки

Чорновол, Давлат Таджиддінович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/8908
Full metadata record
DC Field	Value	Language
dc.contributor.advisor	Немченко , Вадим В'ячеславович	-
dc.contributor.author	Чорновол, Давлат Таджиддінович	-
dc.date.accessioned	2026-03-20T17:42:34Z	-
dc.date.available	2026-03-20T17:42:34Z	-
dc.date.issued	2024-06-08	-
dc.identifier.uri	https://er.chdtu.edu.ua/handle/ChSTU/8908	-
dc.description.abstract	АНОТАЦІЯ Виконавець: Чорновол Давлат Таджиддінович. Назва кваліфікаційної бакалаврської роботи: "Інтернет-магазин мобільної техніки". Спеціальність: 121 «Інженерія програмного забезпечення». Установа: Черкаський державний технологічний університет (ЧДТУ). Місто, рік: Черкаси, 2024 рік. Основні ідеї, результати та висновки кваліфікаційної бакалаврської роботи: Основні ідеї: - розгляд реальних потреб цільової аудиторії – споживачі, які ухвалюють рішення про купівлю мобільного пристрою; - аналіз широкого спектру функцій, спрямованих на допомогу споживачам: отримання інформація про мобільні телефони, їх технічні характеристики, ціни та можливість замовлення; Результати: - аналіз та обґрунтування вибору React, Java Spring для реалізації інтернет-магазину. Опис архітектури та використані технології; Висновки: - аналіз конкурентоспроможності інтернет-магазину та залученню більше споживачів; - оцінка технічних аспектів реалізації, переваг та недоліків використання React та Java Spring.	uk_UA
dc.description.abstract	ANNOTATION Performer: Chornovol Davlat Tajiddinovych. Title of the qualified bachelor’s work: "Online store of mobile equipment" Specialty: 121 "Software Engineering" Institution: Cherkasy State Technological University (CSTU). City, year: Cherkasy, 2024. Main ideas, results, and conclusions of the qualified bachelor’s work: Main ideas: - consideration of the real needs of the target audience – consumers who decide to buy a mobile device; - analysis of a wide range of functions aimed at assisting consumers: obtaining information about mobile phones, their technical characteristics, prices, and the possibility of ordering. Results: - analysis and justification of the choice of React, Java Spring for the implementation of the online store. Description of architecture and technologies used. Conclusions: - analysis of the competitiveness of the online store and attracting more consumers; - evaluation of technical aspects of implementation, advantages, and disadvantages of using React and Java Spring.	uk_UA
dc.language.iso	uk	uk_UA
dc.title	Інтернет-магазин мобільної техніки	uk_UA
dc.type	Bachelor Thesis	uk_UA
Appears in Collections:	121 Інженерія програмного забезпечення (Інженерія програмного забезпечення)
Files in This Item:
File	Description	Size	Format
Кваліфікаційна робота бакалавра Чорновол Давлат Таджиддінович.pdf Restricted Access		4.04 MB	Adobe PDF	View/Open Request a copy
Show simple item record
Extracted text
 
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра програмного забезпечення автоматизованих систем 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
бакалавра 
 
 
на тему:  Інтернет-магазин мобільної техніки 
 
 
Виконав: студент 4 курсу, групи ПЗС-2244 
спеціальності 
121 «Інженерія програмного забезпечення»  
(шифр і назва напряму підготовки) 
 
 
 
Студент Чорновол Д.Т. 
 (прізвище та ініціали) 
Керівник  Немченко В.В. 
 (прізвище та ініціали) 
Рецензент  Ємелянов С.А. 
 (прізвище та ініціали) 
 
 
Черкаси 2024  
 
 
 Черкаський державний технологічний університет  
повне найменування вищого навчального закладу 
Факультет інформаційних технологій і систем  
Кафедра  програмного забезпечення автоматизованих систем  
Освітній рівень бакалавр  
Спеціальність 121 «Інженерія програмного забезпечення»  
Освітня програма Інженерія програмного забезпечення  
 
 
ЗАТВЕРДЖУЮ 
Зав. кафедри ПЗАС, професор 
___________                      С. Голуб 
«___» _______________ 2024 року 
 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
  Чорновол Давлат Таджиддінович  
(прізвище, ім’я, по батькові) 
1.Тему проекту (роботи) Інтернет-магазин мобільної техніки  
Керівник проекту (роботи) Немченко Вадим В’ячеславович, к.т.н. доцент  
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання) 
Затверджені наказом Черкаського державного технологічного університету від « 26 » лютого 2024 
року №60/04 
2. Строк подання студентом проекту (роботи) 2 червня 2024 р.  
3. Вхідні дані до проекту (роботи) Дослідження предметної області інтернет-магазину; 
проектування архітектури; вимоги до програмного комплексу; реалізація та тестування;  
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)  
Розділ 1. Існуючі методи та засоби розв’язання поставлених завдань;  
Розділ 2. Впровадження результатів досліджень у практику проектування програмного   
забезпечення інформаційних систем;  
Розділ 3. Розробка та тестування програмного забезпечення;  
Висновки;  
Список використаних джерел;  
Додатки.  
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту; 
Рис.Г.1 – Титульна сторінка;рис.Г.2 – Актуальність теми;рис.Г.3 – Мета і завдання розробки;рис.Г.4 
– Об’єкт та предмет розробки;рис.Г.5 – Методи проектування та конструювання;рис.Г.6 – Опис 
отриманих результатів;рис.Г.7 – Практичне значення отриманих результатів;рис.Г.8 – Первині та 
детальні вимоги;рис.Г.9 – Діаграма прецедентів;рис.Г.10 – Діаграма класів та діаграма 
пакетів;рис.Г.11 – Діаграма компонентів та діаграма розгортання;рис.Г.12 – Діаграма діяльності та 
діаграма послідовності;рис.Г.13 – Діаграма комунікації та діаграма скінченого автомату;рис.Г.14 – 
Структурна схема;рис.Г.15 – Функціональна схема;рис.Г.16 – Опис логічної схеми, частина 
1;рис.Г.17 – Опис логічної схеми, частина 2;рис.Г.18 – Опис логічної схеми, частина 3;рис.Г.19 – 
 
Структура бази даних.;рис.Г.20 – Інтерфейс користувача;рис.Г.21 – Тестування;рис.Г.22 – 
Завершення презентації. 
6. Консультанти розділів проекту (роботи)
Прізвище, ініціали та посади Підпис, дата 
Розділ 
консультанта Завдання видав Завдання прийняв 
1 
2 
3 
7. Дата видачі завдання 02 грудня 2023 р.
КАЛЕНДАРНИЙ ПЛАН 
Строк 
виконання 
№ 
Назва етапів випускної роботи етапів Примітки 
п/п випускної 
роботи 
1 Постановка задачі 05.12.2023 виконано 
2 Підготовка завдання 13.12.2023 виконано 
3 Погодження завдання 16.12.2023 виконано 
4 Затвердження завдання 19.12.2023 виконано 
Основна стадія 
1 Підбір матеріалів 14.01.2024 виконано 
2 Аналіз шляхів вирішення поставленої задачі 17.02.2024 виконано 
3 Розрахунок основних параметрів роботи 22.02.2024 виконано 
4 Вибір кінцевого варіанту проектного рішення 27.02.2024 виконано 
5 Оформлення первісної редакції роботи 21.04.2024 виконано 
Заключна стадія 
1 Узгодження прийнятих проектних рішень з 28.04.2024 виконано 
керівником 
2 Оформлення пояснювальної записки роботи в 02.05.2024 виконано 
кінцевій редакції 
3 Попередній захист роботи 14.05.2024 виконано 
4 Затвердження роботи 24.05.2024 виконано 
5 Рецензування роботи 28.05.2024 виконано 
6 Захист роботи 07.06 2024 
Студент _____________________ Чорновол Д.Т 
(підпис) (прізвище та ініціали) 
Керівник роботи _____________________ Немченко В.В. 
(підпис) (прізвище та ініціали) 
 
АНОТАЦІЯ 
Виконавець: Чорновол Давлат Таджиддінович.  
Назва кваліфікаційної бакалаврської роботи: "Інтернет-магазин мобільної 
техніки".  
Спеціальність: 121 «Інженерія програмного забезпечення». 
Установа: Черкаський державний технологічний університет (ЧДТУ). 
Місто, рік: Черкаси, 2024 рік. 
Основні ідеї, результати та висновки кваліфікаційної бакалаврської роботи: 
Основні ідеї: 
- розгляд реальних потреб цільової аудиторії – споживачі, які ухвалюють 
рішення про купівлю мобільного пристрою; 
- аналіз широкого спектру функцій, спрямованих на допомогу 
споживачам: отримання інформація про мобільні телефони, їх технічні 
характеристики, ціни та можливість замовлення; 
Результати: 
- аналіз та обґрунтування вибору React, Java Spring для реалізації 
інтернет-магазину. Опис архітектури та використані технології; 
Висновки: 
- аналіз конкурентоспроможності інтернет-магазину та залученню більше 
споживачів; 
- оцінка технічних аспектів реалізації, переваг та недоліків використання 
React та Java Spring. 
 
 
ANNOTATION 
Performer: Chornovol Davlat Tajiddinovych.  
Title of the qualified bachelor’s work: "Online store of mobile equipment" 
Specialty: 121 "Software Engineering"  
Institution: Cherkasy State Technological University (CSTU).  
City, year: Cherkasy, 2024. 
Main ideas, results, and conclusions of the qualified bachelor’s work:  
Main ideas: 
- consideration of the real needs of the target audience – consumers who decide 
to buy a mobile device; 
- analysis of a wide range of functions aimed at assisting consumers: obtaining 
information about mobile phones, their technical characteristics, prices, and 
the possibility of ordering. 
Results:  
- analysis and justification of the choice of React, Java Spring for the 
implementation of the online store. Description of architecture and 
technologies used. 
Conclusions:  
- analysis of the competitiveness of the online store and attracting more 
consumers;  
- evaluation of technical aspects of implementation, advantages, and 
disadvantages of using React and Java Spring. 
 
 
ЧДТУ 242252.013 ПЗ 
ЗМІСТ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ................................................................................9 
ВСТУП ................................................................................................................................10 
РОЗДІЛ 1. Існуючі методи та засоби розв’язання поставлених завдань .....................15 
1.1. Основні визначення ..........................................................................................15 
1.2. Аналіз та моніторинг сучасних інтернет магазинів ......................................16 
1.3. Методи реалізації сучасних інтернет-магазинів ............................................20 
1.4. Постановка задачі .............................................................................................22 
Висновки до першого розділу ................................................................................23 
РОЗДІЛ 2. Впровадження результатів досліджень у практику проектування 
програмного забезпечення інформаційних систем ........................................................25 
2.1. Моделювання предметної області ..................................................................25 
2.1.1. Предметна область моделювання. Модель предметної області. 
Словник предметної області ............................................................................25 
2.1.2. Елементи моделювання предметної області ........................................27 
2.1.3. Робоча область моделювання.................................................................30 
2.2. Формування та аналіз вимог ............................................................................31 
2.2.1. Формування вимог до програмного забезпечення. Первинні і 
детальні вимоги. Вимоги замовника і розробника. Функціональні та 
нефункціональні вимоги ...................................................................................31 
2.2.2. Формування вимог за допомогою діаграми прецедентів ....................34 
2.3. Проектування логічної структури програмного комплексу .........................36 
 
 
 
ЧДТУ 242252.013 ПЗ 
Зм. Лист № документа№ ПідписПі ДатаД
РЗомз.
 
р обЛ. ист Чо дронкоувмоелн тДа. Т. дпис ата 
«Інтернет-магазин мобільної техніки»  Літ. Лист Листів 
Керівник Немченко В.В. 
 Пояснювальна записка Д 4  
. Н
ФІТІС, кафедра ПЗАС, 
Н.контр. Півень О.Б. 
Затв. Голуб С.В. ПЗС-2244 
2 
ЧДТУ 242252.013 ПЗ 
 
2.3.1. Діаграми класів ........................................................................................36 
2.3.2. Діаграми пакетів ......................................................................................41 
2.4. Архітектурне проектування .............................................................................42 
2.4.1. Діаграма компонентів .............................................................................43 
2.4.2. Розгортання програмної системи на апаратних засобах. Діаграма 
розгортання ........................................................................................................44 
2.5. Моделювання поведінки системи ...................................................................46 
2.5.1. Діаграма діяльності .................................................................................46 
2.5.2. Діаграма послідовності ...........................................................................48 
2.5.3. Діаграми комунікації ..............................................................................50 
2.5.4. Діаграма скінченного автомату .............................................................53 
Висновки до другого розділу ...........................................................................54 
РОЗДІЛ 3. Розробка та тестування програмного забезпечення ....................................56 
3.1. Розробка програмного комплексу ...................................................................56 
3.1.1. Обґрунтування вибору засобів реалізації .............................................56 
3.1.2. Опис структурної (функціональної) схеми ...........................................58 
3.1.3. Опис логічної схеми системи .................................................................61 
3.1.4. Розробка бази даних ................................................................................64 
3.1.5. Розробка інтерфейсу користувача .........................................................70 
3.1.6. Опис розробки програмних компонентів .............................................79 
3.2. Тестування системи ..........................................................................................83 
3.2.1. Модульне тестування ..............................................................................84 
3.2.2. Інтеграційне тестування .........................................................................92 
 
3 
ЧДТУ 242252.013 ПЗ 
 
3.2.3. Системне тестування ..............................................................................98 
3.2.4. Приймальне тестування ........................................................................102 
3.3. Приклади впровадженого програмного комплексу ....................................107 
Висновки до третього розділу ..............................................................................117 
ВИСНОВКИ .....................................................................................................................118 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ........................................................................119 
ДОДАТОК А ....................................................................................................................122 
ДОДАТОК Б .....................................................................................................................124 
ДОДАТОК В ....................................................................................................................154 
ДОДАТОК Г .....................................................................................................................165 
 
 
  
4 
ЧДТУ 242252.013 ПЗ 
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ 
UML  – Unified Modeling Language 
XSS  – Cross-Site Scripting 
SQL  – Structured Query Language 
JSON  – JavaScript Object Notation 
СУБД – Система Управління Базами Даних 
БД  – База даних 
ПЗ  – Програмне забезпечення 
JDBC – Java Database Connectivity 
API  – Application Programming Interface 
SSL  – Secure Sockets Layer 
HTTP/S – HyperText Transfer Protocol / Secure 
REST – Representational State Transfer 
IDE  – Integrated Development Environment 
VS Code – Visual Studio Code 
CRUD – Create Read Update Delete 
UI  – User Interface 
  
5 
ЧДТУ 242252.013 ПЗ 
ВСТУП 
Актуальність теми: 
Актуальність теми визначається потребою у розробці програмного 
забезпечення інтернет-магазину для забезпечення потреби користувачів у зручному 
сервісі для здійснювання покупок онлайн. Такими сервісами виступають веб-сайти з 
розробленим програмним забезпеченням яке має функціонал для забезпечення 
можливості перегляду товарів, організації обраних для покупки товарів у кошик, 
керування цим кошиком, перегляду детальної інформації про кожен окремий товар та 
оформлення замовлення. Актуальність електронної комерції  зростає в умовах 
поширення мобільних пристроїв, коли доступ до інтернету люди мають практично 
завжди під рукою[12]. 
У свою чергу, для бізнесу інтернет-магазини є ключовим інструментом для 
розвитку та поширення свого бренду, впливу, тощо. Вони дозволяють компаніям 
розширити свою аудиторію та здійснювати продажі не лише в межах місця 
розташування, обмежуючись живим потоком людей, але й на національному чи 
навіть міжнародному рівні. Зниження витрат на оренду та утримання фізичного 
простору, а також можливість автоматизувати процеси замовлення, оплати та 
доставки, дозволяють підприємствам збільшувати ефективність та прибутковість 
своєї діяльності. Більше того, інтернет-магазини відкривають нові можливості для 
аналізу даних про споживачів збираючи аналітичні дані в автоматичному режимі, що 
дозволяє підприємствам краще розуміти свою цільову аудиторію, їх потреби та 
пропонувати їм більш персоналізовані товари та послуги 
Мета розробки: 
Метою розробки є забезпечення потреб користувачів шляхом розробки 
програмного забезпечення для інтернет-магазину мобільної техніки, яке 
відповідатиме їх потребам. 
Завдання розробки: 
Завданням є розробка програмного забезпечення та його архітектури [13], яка 
буде відповідати сучасним стандартам. Розробка системи каталогу товарів з 
фільтрацією по специфічним характеристикам, що властиві відповідному типу 
6 
ЧДТУ 242252.013 ПЗ 
товару. Розробка алгоритму для системи пошуку, яка дозволить користувачам шукати 
необхідні товари за назвою або її частиною. Програмна реалізація систем кошику та 
оформлення замовлень, що забезпечить можливість користувачам додавати необхідні 
товари до кошику та оформлювати замовлення. 
Об’єкт розробки: 
Об’єктом розробки є процеси створення програмного забезпечення та 
інфраструктури, що забезпечують ефективну та зручну онлайн торгівлю мобільними 
пристроями. 
– веб-сайт – основний візуальний інтерфейс, через який користувач буде 
взаємодіяти з сервісом. Він буде містити інформацію про товари, надавати 
форми для реєстрації, авторизації та оформлення замовлення. 
– база даних – організована структура даних, у якій буде зберігатись вся 
необхідна для функціонування інтернет-магазину інформація. Наприклад, 
інформація про товари, замовлення, користувачів, тощо. 
– сервер – компонент, який буде обробляти всі запити від користувачів, які на 
сервер вони будуть відправляти через користування веб-сайтом. В залежності 
від запитів, сервер буде взаємодіяти з базою даних та надавати відповіді. 
Предмет розробки: 
Предметом розробки є процеси побудови програмного забезпечення для 
створення інтернет-магазину мобільної техніки. 
Методи проектування та конструювання: 
Для розробки програмного забезпечення інтернет-магазину мобільної техніки 
були використані наступні методи та засоби: 
– мова програмування Java з фреймворком Spring [1] – була обрана як одна з 
найпоширеніших технологій для реалізації бізнес-логіки інтернет-магазину. 
Spring надає потужний стек інструментів та компонентів для розробки веб-
додатків, зокрема управління залежностями, обробку запитів, безпеку, доступ 
до бази даних та інше. Використання Java дозволяє забезпечити високу 
продуктивність, стабільність та масштабованість системи, що є важливими 
характеристиками для інтернет-магазину; 
7 
ЧДТУ 242252.013 ПЗ 
– React[2] - бібліотека JavaScript для розробки динамічних інтерфейсів 
користувача, дозволяє створювати ефективні веб-додатки за рахунок 
використання компонентного підходу до розробки. React забезпечує швидкий 
та гнучкий спосіб розробки інтерфейсу, що дозволяє створювати високоякісні 
користувацькі інтерфейси з мінімальними зусиллями; 
– Redux[3] – бібліотека для управління станом додатку, часто використовується 
разом з React. Він допомагає зберігати весь стан додатку в одному об’єкті, що 
спрощує управління станом додатку та робить його прогнозованим та легко 
відтворюваним; 
– IntelliJ IDEA[14] – інтегроване середовище розробки (IDE) для різних мов 
програмування; 
– PostgreSQL[4] – реляційна база даних для зберігання та управління даними, 
такими як інформація про клієнтів, товари через реляційні бази даних, була 
використана для зберігання даних; 
– Git[15] та GitHub[16] – системи контролю версій, які дозволяють, відстежувати 
зміни в коді та керувати різними версіями додатку, були використані для 
ефективної та організованої роботи над проектом; 
– Junit[17] – інструментарій для автоматизованих тестів для перевірки 
відповідності результатів виконання коду очікуванням, був використаний для 
тестування коду; 
– VS code[18] – легкий, але потужний текстовий редактор,  який 
використовується як інтегроване середовище розробки (IDE) для 
програмування на різних мовах, переважно високого рівня. В цьому проекті 
використовувався для розробки веб-сайту на React. 
Для проектування також були використанні різні UML діаграми [20], що 
допомагають візуалізувати структуру та поведінку системи, що розробляється. 
Unified Modeling Language (UML) діаграми допомагають розробникам краще 
розуміти та проектувати систему. 
Опис отриманих результатів: 
8 
ЧДТУ 242252.013 ПЗ 
Розроблено комплексне програмне забезпечення для інтернет-магазину 
мобільної техніки яке включає в себе весь необхідний функціонал: систему каталогу 
з фільтрацією по характеристикам, пошуку товарів за назвою чи частиною назви, 
систему корзини та оформлення замовлення. Спроектовано та створено базу даних, 
яка забезпечує швидкий доступ до інформації про товари, замовлення та 
користувачів. Розроблено програмне забезпечення яке відповідає RESTful API [19], 
що забезпечує інтерфейс для взаємодії між клієнтом (веб-сайтом) та сервером. API 
включає в себе кінцеві точки[21] для обробки запитів на отримання інформації про 
товари, створення замовлень, інформацію про замовлення та надає можливість 
редагування інформації про товари. Сервер було успішно інтегровано з базою даних 
PostgreSQL [22], тож це дозволяє серверу ефективно обробляти запити на читання та 
запис даних. Також було проведено тестування окремих функцій та модулів для 
забезпечення його надійності та стабільності. Використовувалися різні методи 
тестування, включаючи модульне тестування, інтеграційне тестування, системне 
тестування та приймальне тестування. 
Практичне значення отриманих результатів: 
Розроблене програмне забезпечення для інтернет-магазину мобільної техніки 
надає користувачам зручний та ефективний спосіб вибору товару з наявного 
асортименту за допомогою системи пошуку товарів за назвою, каталогу та фільтрації 
результатів за специфічними характеристиками відповідно властивостям певного 
товару. Завдяки зручному інтерфейсу та ефективній системі пошуку, простому 
процесу замовлення, інтернет-магазин привабить більше користувачів та збільшить 
продажі бізнесу, виходячи за рамки фізичного магазину. Система також автоматизує 
багато процесів, пов’язаних з продажом мобільної техніки, включаючи обробку 
замовлень. Це зменшує навантаження на персонал та знижує витрати на операційну 
діяльність. Завдяки інтеграції з базою даних, система може збирати корисні дані про 
поведінку користувачів, продажі, популярні товари, тощо. Це дозволяє власникам 
магазину отримувати цінні дані та використовувати їх для прийняття обґрунтованих 
рішень.  
9 
ЧДТУ 242252.013 ПЗ 
РОЗДІЛ 1. ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ 
ЗАВДАНЬ 
1.1 Основні визначення 
Потенційні покупці - це особи, які мають намір придбати товар певного 
призначення. Потенційні покупці, що мають намір придбати товар певного 
призначення, переважно роблять кілька кроків у процесі вибору та придбання товару 
в інтернет-магазині. Першим кроком є аналіз асортименту, представленого на ринку, 
відповідно до категорії товару, який вони планують придбати. Це може бути огляд 
смартфонів різних виробників, моделей, операційних систем тощо. 
Після вибору конкретного товару потенційний покупець додає його у 
віртуальний кошик та заповнює необхідні дані для оформлення замовлення. Це 
включає вказання кількості товарів, обраного способу оплати та доставки, а також 
відправлення контактних даних для зв'язку та доставки. 
Потенційні покупці можуть здійснювати покупки, переглядаючи товари через 
веб-сайт, використовуючи мобільні додатки або інші онлайн-платформи. Після 
вибору товару і оформлення замовлення клієнт може здійснити оплату, підтвердивши 
замовлення та надсилаючи необхідну для доставки інформацію. 
Інтернет-магазин – це онлайн-платформа, яка реалізує товари або послуги через 
мережу інтернет. Це віртуальне торгівельне підприємство, яке дозволяє потенційним 
покупцям переглядати асортимент, обирати товари, робити замовлення та сплачувати 
їх онлайн або при отримані відповідно обраному способу доставки. 
Інтернет-магазин може представляти товари фізичних або юридичних осіб, або 
самостійно виробляти та реалізовувати свою продукцію. Інтернет-магазин може 
надавати різноманітні послуги та функціонал для зручності користувачів та 
ефективного ведення торгівлі засобами мережі інтернет. Ключовими можливостями 
є онлайн-каталог у якому розміщена інформація про товари чи послуги, можливість 
оформлення та оплати замовлення, вибору місця доставки та наявність особистого 
кабінету. 
Поміж основних переваг інтернет-магазинів є також можливість 
10 
ЧДТУ 242252.013 ПЗ 
проведення додаткових аналітичних операцій. Завдяки системам відстеження 
поведінки користувачів, магазини можуть аналізувати дані про перегляди товарів, 
додавання їх у кошик, час, проведений на сайті, та багато іншого. Ця інформація 
дозволяє покращувати стратегії маркетингу, персоналізувати рекламу та пропозиції, 
а також вдосконалювати асортимент товарів відповідно до попиту. 
Також важливою складовою інтернет-магазинів є можливість забезпечення 
клієнтського сервісу. Це може включати в себе онлайн-чати для консультацій, 
швидку відповідь на запитання через електронну пошту чи телефон, а також 
можливість повернення або обміну товару в разі незадоволення. 
Додатково інтернет-магазини можуть використовувати різноманітні технічні 
інновації, такі як віртуальна реальність або розширена реальність, щоб покупці могли 
краще оцінити товари перед покупкою, наприклад 3D візуалізація фізичного магазину 
та його товарів, де відвідувач сайту може віртуально «пройти» по магазину та обрати 
товар. Це дозволяє забезпечити більш динамічний та інтерактивний досвід для 
клієнтів, що може значно підвищити їхню зацікавленість у відвідуванні сайту та 
впевненість у зробленому виборі, знизивши кількість повернень та негативних 
відгуків. 
1.2 Аналіз та моніторинг сучасних інтернет-магазинів 
У період активних змін в тенденціях веб-розробки, виникає необхідність в 
глибокому аналізі інструментів, призначених для поліпшення користувальницького 
досвіду та оптимізації процесів. У такому контексті досліджено та оцінено існуючий 
інтернет-магазин електроніки. (рис.1.1, рис.1.2, рис.1.3). Зокрема, увагу було 
приділено таким аспектам, як зручність навігації, швидкість завантаження сторінок, 
адаптивність дизайну для різних пристроїв та ефективність пошукової системи 
магазину. Користувальницький досвід грає ключову роль у залученні та утриманні 
клієнтів, тому детальний аналіз дозволяє виявити сильні та слабкі сторони поточного 
рішення. Крім того, було розглянуто використання сучасних технологій, таких як 
інтеграція з соціальними мережами та впровадження системи лояльності. 
11 
ЧДТУ 242252.013 ПЗ 
Рисунок 1.1 – Головна сторінка сайту brain.com.ua, магазину електроніки 
Рисунок 1.2 – Сторінка окремого товару на сайті 
Інтернет магазин створений власними засобами або на замовлення ТОВ 
«Приватінвест», «BRAIN Computers» та доступний українською мовою. 
12 
ЧДТУ 242252.013 ПЗ 
Використовується на будь-якому пристрої з доступом до інтернету та 
адаптований під різні характеристики дисплею пристрою на якому виконується 
відображення. Зручний вибір товарів в категорії мобільних телефонів, цьому сприяє 
детально опрацьований веб-дизайн, зокрема широкий вибір підкатегорій та великий 
обсяг фільтрів по певним ознакам: від виробника до особливостей корпусу (рис. 1.4). 
Рисунок 1.3 – Приклад наявних категорій мобільних пристроїв 
Рисунок 1.4 – Різноманітність фільтрів застосовуваних до пошуку 
Інтернет-магазин BRAIN надає змогу потенційним покупцям ознайомитись з 
актуальним асортиментом останніх моделей смартфонів, з їх характеристиками, 
13 
ЧДТУ 242252.013 ПЗ 
фотографіями, відгуками від людей які вже придбали той чи інший пристрій та 
замовити його за допомогою функціонала сайту й сплатити одразу при бажанні. 
Інтернет-магазин розділяє товари на категорії, підкатегорії а також надає 
функціонал фільтрів для кожної окремої категорії відповідно специфіки товару. 
Приклад реалізації фільтрів та категорій зображений на рисунку 1.3, 1.4. 
Перевагами інтернет-магазину BRAIN є: 
‒ доступність – інтернет-магазин BRAIN доступний 24/7, що дозволяє клієнтам 
робити покупки в будь-який зручний для них час; 
‒ автоматичне підтвердження замовлення, якщо його загальна вартість не 
перевищує встановлений ліміт; 
‒ широкий вибір товарів та детальна система фільтрації; 
‒ зручність – веб-дизайн виконаний відповідно всім сучасним вимогам та 
враховує потреби користувачів; 
‒ система лояльності для постійних клієнтів. 
Недоліки: 
‒ проблеми з поверненням – процес повернення товарів може бути складнішим 
онлайн, ніж у фізичному магазині; 
‒ повільне завантаження списку товарів; 
‒ при повільному інтернет з’єднанні частина інтерфейсу формується некоректно. 
Мета аналізу полягає в розробці та впровадженні інтернет магазину для 
споживачів, враховуючи недоліки та переваги вже існуючих рішень, переймання ідей 
та технологій які показали свою ефективність з часом на практиці. Процес розробки 
та аналізу передбачає додавання нових сервісів та врахування повноцінного 
функціоналу для найточнішої відповідності потребам. 
1.3 Методи реалізації сучасних інтернет-магазинів 
Розробка інтернет-магазинів часто виконується з використанням наступних 
14 
ЧДТУ 242252.013 ПЗ 
мов програмування та технологій: React, Redux, react-router[6]  – для Frontend, та 
PostgreSQL, Java Spring , Spring Security[23] – для Backend. 
Для зберігання інформації про наявність товарів, їх технічних характеристик, 
цін та інших корисних даних використовують базу даних. Зазвичай використовують 
такі системи, як MySQL[24], PostgreSQL, MongoDB[25], чи Firebase Realtime 
Database[26] – це найпопулярніші сучасні рішення для веб-додатків. 
Забезпечення безпеки та конфіденційності даних в інтернет магазині є 
надзвичайно важливим аспектом, оскільки магазин обробляє особисту і фінансову 
інформацію своїх клієнтів. Для вирішення цієї задачі використовують SSL-
шифрування [29], безпечні протоколи передачі даних, реалізують аутентифікацію 
користувачів, розробляють рішення для захисту від крос-сайтового скриптінгу (XSS) 
та SQL Injections [27]. На сайті обов’язково повинна бути розміщена політика 
конфіденційності, в якій детально описано, як будуть збиратись та 
використовуватись, а головне захищатись дані користувачів. 
Інтеграція сайту з інструментами аналітики, Google Analytics[28] або власними 
рішеннями системи відстеження, дозволяє отримувати важливі дані про поведінку 
користувачів на сайті. 
Для створення інтернет-магазину мобільної техніки з використанням React та 
Java Spring, можна використати наступні методи та засоби: 
‒ мова програмування Java з фреймворком Spring, яка є однією з 
найпоширеніших технологій для реалізації бізнес-логіки інтернет-магазину. 
Spring надає потужний стек інструментів та компонентів для розробки веб-
додатків, зокрема управління залежностями, обробку запитів, безпеку, доступ 
до бази даних та інше. Використання Java дозволяє забезпечити високу 
продуктивність, стабільність та масштабованість системи, що є важливими 
характеристиками для інтернет-магазину; 
‒ React – бібліотека JavaScript для розробки динамічних інтерфейсів користувача. 
Вона дозволяє створювати ефективні веб-додатки за рахунок використання 
компонентного підходу до розробки. React забезпечує швидкий та гнучкий 
15 
ЧДТУ 242252.013 ПЗ 
спосіб розробки інтерфейсу, що дозволяє створювати високоякісні 
користувацькі інтерфейси з мінімальними зусиллями; 
‒ Redux – це бібліотека для управління станом додатку, що часто 
використовується разом з React. Він допомагає зберігати весь стан додатку в 
одному об'єкті, що спрощує управління станом додатку та робить його 
прогнозованим та легко відтворюваним; 
‒ IntelliJ IDEA - інтегроване середовище розробки (IDE) для різних мов 
програмування, зокрема Java. Гнучкі та надійні інструменти для розробки веб-
додатків на Java та JavaScript. Вона надає зручність у написанні, налагодженні 
та тестуванні коду, а також має багато корисних функцій, таких як 
автодоповнення коду, системи контролю версій та багато іншого; 
‒ PostgreSQL - реляційна база даних для зберігання та управління даними, такими 
як інформація про клієнтів, товари через реляційні бази даних; 
‒ Git та GitHub - системи контролю версій, які дозволяють  відстежувати зміни в 
коді та керувати різними версіями додатку. Вони забезпечують ефективну та 
організовану роботу над проектом; 
‒ JUnit – інструментарій для автоматизованих тестів для перевірки відповідності 
результатів виконання коду очікуванням; 
‒ VS code – легкий, але потужний текстовий редактор, використовується як 
інтегроване середовище розробки (IDE) для програмування на різних мовах, 
переважно високого рівня. 
Перераховані інструменти та методи у поєднанні можуть створити ефективний 
та функціональний інтернет-магазин, який забезпечить розробку якісного продукту 
та у результаті зручність взаємодії користувача з веб-сайтом. Використання мов 
програмування Java з фреймворком Spring дозволить реалізувати потужну бізнес-
логіку, забезпечуючи стабільність та масштабованість системи. React разом з 
Redux[30] забезпечить швидку та гнучку розробку користувацького інтерфейсу, 
зробивши додаток динамічним і привабливим для користувачів. Інтегроване 
середовище розробки, такі як IntelliJ IDEA, сприятимуть зручному написанню, 
налагодженню та тестуванню коду. Використання PostgreSQL для зберігання даних 
16 
ЧДТУ 242252.013 ПЗ 
забезпечить надійність та ефективність управління інформацією про клієнтів та 
товари. Git та GitHub сприятимуть організованому керуванню версіями проекту, а 
інструменти для автоматизованих тестів з JUnit допоможуть забезпечити якість коду 
та надійність функціоналу. Усі ці аспекти допоможуть створити інтернет-магазин, 
який буде відповідати потребам користувачів і забезпечить їм приємний та зручний 
користувацький досвід покупок онлайн. 
1.4 Постановка задач 
Метою даної кваліфікаційної роботи є розробка та впровадження 
функціонального інтернет-магазину мобільної техніки, який забезпечить зручну 
взаємодію користувача з системою через веб-сайт. В результаті аналізу предметної 
області, були сформовані наступні функціональні та нефункціональні вимоги до 
програмного комплексу: 
1 Розробка системи каталогу з відображенням списку товарів: Кожен товар у 
каталозі повинен відображатись з зображенням, назвою та ціною. 
2 Розробка функціоналу для фільтрації товарів: фільтрація повинна включати 
можливість вибору кількох параметрів одночасно. Результати фільтрації 
повинні відображатися миттєво. 
3 Розробка системи кошику для товарів: Кошик повинен відображати список 
доданих товарів, загальну суму та кількість товарів у замовленні та надавати 
можливість змінити кількість кожного товару або видалити товар з кошика, при 
цьому кошик повинен зберігатись у клієнтській частині. 
4 Розробка системи оформлення замовлення: Процес оформлення замовлення 
повинен включати введення контактної інформації, вибір способу доставки та 
способу оплати. Веб-сайт повинен надавати зворотний зв’язок про статус 
замовлення після його оформлення. 
5 Модуль авторизації та реєстрації облікового запису: користувач повинен мати 
змогу створити та авторизуватись у обліковий запис; 
6 Оптимізація серверної архітектури: відгук на дії користувача повинен бути 
максимально швидким, не перевищувати 10ms на звичайні запити; 
17 
ЧДТУ 242252.013 ПЗ 
7 Рекомендована швидкість завантаження сторінки веб-сайту не більш ніж 
230ms. 
Для розробки бізнес-логіки можна використати мову програмування Java з 
фреймворком Spring, що забезпечить ефективне управління товарами та 
замовленнями.  Для реалізації користувацького інтерфейсу можна використати 
бібліотеку React для забезпечення динамічного та зручного дизайну, який надає змогу 
користувачам переглядати товари, додавати їх у кошик, оформлювати замовлення та 
ознайомлюватись з інформацією представленою на веб-сайті. В якості середовища 
розробки можна використати такі інтегровані середовища як IntelliJ IDEA для 
зручного написання основної логіки та тестів для серверної частини додатку та Visual 
Studio Code для клієнтської частини. Для зберігання та маніпуляцій з даними про 
клієнтів, товари, замовлення та інше – реляційна база даних PostgreSQL. Для 
забезпечення відповідності розробленого продукту вимогам та специфікаціям, 
скористатись інструментами для тестування такими як Junit, Postman, Jest та провести 
відповідне тестування: модульне, системне, інтеграційне та приймальне. 
18 
ЧДТУ 242252.013 ПЗ 
Висновки до першого розділу 
Згідно плану кваліфікаційної бакалаврської роботи, проведено повний аналіз 
предметної області у якому підтверджена актуальність розроблюваного програмного 
комплексу та обґрунтована фактична користь для споживачів і бізнесу. Я визначив та 
проаналізував сучасні методи та інструменти для вирішення поставленої задачі, 
розглянув та зробив аналіз альтернативних рішень розроблюваного проекту, 
включаючи аналогічні підходи з прикладом та визначенням їх переваг та недоліків. 
Результати досліджень для розробки інтернет-магазину мобільної техніки 
враховують сучасні тенденції у цьому напрямку та потреби споживачів. 
В ході розгляду сучасних технологій, було визначено що це сприяє підвищенню 
продуктивності на етапі проектування. Вони дозволяють забезпечити оптимальну 
ефективність та зручність взаємодії користувача з веб-сайтом завдяки сучасним 
стандартам та високого рівня функціональності. Зокрема, React для розробки 
користувацького інтерфейсу сприяє не лише  покращенню роботи програми, а й 
швидкому впровадженню нових функцій та забезпечує легкість обслуговування в 
подальшому. 
В результаті було сформована та поставлена задача на розробку програмного 
комплексу, з попереднім визначенням та обґрунтуванням обраних технологій, 
необхідного функціоналу та вимог до користувацького інтерфейсу. 
19 
ЧДТУ 242252.013 ПЗ 
РОЗДІЛ 2. ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ 
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ 
СИСТЕМ 
2.1 Моделювання предметної області 
Моделювання предметної області допомагає розробникам краще розуміти 
проблему, яку вони намагаються вирішити, і створює основу для проектування 
системи [31]. В цьому пункті ми розглянемо такі аспекти моделювання предметної 
області, як: предметна область моделювання, модель предметної області, словник 
предметної області. Тепер, коли ми маємо загальне уявлення про те, що ми 
збираємося розглядати, давайте перейдемо до детального розгляду цих питань. 
2.1.1 Предметна область моделювання. Модель предметної області. Словник 
предметної області 
Предметна область моделювання 
Предметна область моделювання інтернет-магазину мобільної техніки включає 
проектування структури та визначення концепції програмного комплексу, яка 
повинна задовольняти всі потреби користувачів у цій області. В цю предметну 
область входить аналіз ринку електронної комерції, визначення цільової аудиторія та 
їх потреби як користувачів. Завдяки отриманим аналітичним даним при досліджені 
аналогічних програмних комплексів була визначена мінімальна функціональність 
інтернет-магазину та перелік технологій які можна використати для вирішення 
поставленої задачі. Важливими аспектами визначеної предметної області є 
представлення товарів у вигляді структурованих списків, забезпечення можливості 
перегляду детальної інформації про кожен окремий товар, реалізація системи кошику 
товарів, можливість оформлення замовлення та наявність функціоналу авторизації та 
реєстрації облікових записів. 
Модель предметної області 
Модель предметної області для інтернет-магазину мобільної техніки дозволяє 
створити абстрактну модель бізнес-логіки інтернет-магазину, використовуючи 
20 
ЧДТУ 242252.013 ПЗ 
об'єктно-орієнтований підхід. За допомогою моделі предметної області зображено 
ключові аспекти роботи інтернет-магазину, які представлені сутностями, що мають 
атрибути та взаємозв'язки в межах предметної області. Сутності представляють 
реальні об'єкти та концепції, такі як клієнти, замовлення, продукти, процеси обробки 
замовлень тощо. 
Розроблена модель дозволяє краще зрозуміти вимоги до системи програмного 
комплексу інтернет-магазину. Завдяки розробленій моделі були виявлені основні 
компоненти та їх взаємодія, що забезпечить правильну реалізацію програмного 
забезпечення. Завдяки цій моделі також можна чітко визначити потреби та вимоги, 
що полегшить планування проекту та оцінку ресурсів. 
Для демонстрації моделі предметної області зазвичай використовуються UML-
діаграми, на яких показані всі сутності та їх взаємозв'язки. Використання моделі 
предметної області сприяє більш чіткому та систематичному підходу до розробки 
програмного забезпечення, забезпечуючи успішне виконання проекту та досягнення 
його цілей [31]. 
Словник предметної області 
Для даної предметної області було сформовано словник (рис.2.1) для об’єкту 
вхідних даних замовлення, у якому зазначена детальна інформація про його 
структуру, атрибути та їх типи, а також дії які необхідно виконати для його 
формування.  
Рисунок 2.1 – Словник предметної області для вхідних даних про замовлення у 
інтернет-магазині 
21 
ЧДТУ 242252.013 ПЗ 
2.1.2 Елементи моделювання предметної області 
Для моделювання предметної області переважно використовують UML (Unified 
Modeling Language) діаграми, вони зручні та ефективні для візуалізації, специфікації, 
конструювання та документування компонентів програмного забезпечення. Кожен 
тип діаграми має свої символи та позначення[32]. Розглянемо основні компоненти. 
Структурні об’єкти (рис. 2.2) відображають певні дійсні сутності, що мають 
незмінну поведінку. В рамках моєї предметної області акторами можуть виступати 
такі сутності як клієнт, адміністратор, менеджер, тощо. Варіантами використання 
системи виступають дії, які доступні для відповідного актора. Якщо це клієнт, такими 
діями можуть бути: додавання товару у кошик, оформлення замовлення, перегляд 
каталогу та інші дії які ми розглянемо детальніше далі у цьому розділі. Класами в 
інтернет-магазині можуть виступати об’єкти що представляють товар, користувача, 
замовлення. Модулем може виступати окрема частина системи інтернет-магазину, 
така як оформлення замовлення, авторизація, фільтрація товарів. 
Рисунок 2.2 – Структурні об’єкти UML діаграм для інтернет-магазину 
Поведінковими об’єктами називають об’єкти, які зображують поведінку та 
послідовність системи. У контексті інтернет-магазину мобільної техніки такими 
22 
ЧДТУ 242252.013 ПЗ 
об’єктами можуть виступати стани входу у систему з боку користувача, додавання 
товару у кошик, оформлення замовлення, стан валідації введених користувачем 
даних. Початковим станом в цій предметній області зазвичай виступає перехід на 
одну з сторінок сайту. Також початковий стан може бути визначений для окремих 
процесів у цій предметній області, наприклад для процесу авторизації чи отримання 
списку товарів. Приклад поведінкових об’єктів для предметної області інтернет-
магазину показано на рисунку 2.3. 
Рисунок 2.3 – Об’єкти діаграми скінченого автомату 
Також існують різні позначення відношень між об'єктами у інтернет-магазині 
(рис.2.4), які допомагають візуалізувати їхню взаємодію та зв'язки. Такими зв’язками 
можуть виступати відношення асоціації між клієнтом за замовленням, відношенням 
агрегації між товаром та замовленням, відношенням залежності кошику від товару. 
Рисунок 2.4 – Можливі відношення між об’єктами у інтернет-магазині 
23 
ЧДТУ 242252.013 ПЗ 
2.1.3 Робоча область моделювання 
Для того щоб система була розроблено якісно і приносила максимальну 
користь, необхідно чітко визначити вимоги до розроблюваного проекту та виконати 
моделювання враховуючи їх. Для інтернет-магазину мобільної техніки, 
проаналізувавши предметну область, можемо визначити модель предметної області 
яка зображена на рис. 2.5. 
Рисунок 2.5 – Модель предметної області інтернет-магазину 
Опис моделі предметної області 
На цій моделі предметної області зображені процеси, які вона має виконувати. 
Центральний процес «Обробка запитів» відповідає за обробку запитів, що надходять 
від інтерфейсу. Він складається з ще чотирьох процесів які відповідають за виконання 
процесів створення замовлення, обробки даних про користувача, збереження даних 
про користувача та формування списку товарів. Користувач зображений на цій моделі 
є об’єктом, який взаємодіє з системою через інтерфейс. Таким чином, користувач 
взаємодіє з інтерфейсом через інтерактивні UI елементи на веб-сайті, який відправляє 
24 
ЧДТУ 242252.013 ПЗ 
запити до модуля обробки запитів, де він взаємодіє з іншими компонентами системи 
для виконання необхідних функцій в залежності від запиту. 
2.2 Формування та аналіз вимог 
У цьому розділі акцентована увага на формуванні та аналізі вимог до інтернет-
магазину мобільної техніки, що є важливим етапом у процесі розробки будь якого 
програмного комплексу. Вимоги визначають, що система інтернет-магазину повинна 
робити, і як вона повинна працювати. Вони відіграють ключову роль у визначенні 
функціональності та якості кінцевого програмного комплексу інтернет-магазину. Ми 
поступово пройдемо процес формування вимог, включаючи первинні та детальні 
вимоги, а також вимоги замовника і розробника, після чого  визначимо функціональні 
та нефункціональні вимоги до розроблюваного програмного забезпечення. 
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні 
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні вимоги 
Формування вимог до програмного забезпечення 
Вимоги до інтернет-магазину формуються на основі потреб користувачів, 
бізнес-цілей організації, а також технічних обмежень і можливостей [9]. У результаті 
збору вимог після аналізу предметної області та аналізу цих вимог, я опрацював їх та 
переконався, що вимоги є повними та відповідають очікуванням користувачів. Ці 
вимоги представлені нижче у списках. 
Первинні і детальні вимоги: 
Первинні вимоги: 
‒ система каталогу для відображення товарів: Веб-сайт повинен відображати 
список доступних товарів з основною інформацією про кожен товар, такою як 
ціна, назва та зображення; 
‒ можливість фільтрації товарів: Веб-сайт повинен надавати можливість 
фільтрувати товари за різними параметрами; 
‒ реалізація системи кошику для покупок: На веб-сайті повинен бути функціонал 
додавання, видаляння та зберігання товарів у кошику; 
25 
ЧДТУ 242252.013 ПЗ 
‒ система оформлення замовлення: Веб-сайт повинен надавати можливість 
оформити замовлення, включаючи збір контактної інформації та вибір способу 
оплати, доставки; 
‒ система облікових записів: користувач повинен мати можливість створити та 
авторизуватись у обліковий запис; 
‒ швидкий відгук на дії користувача на сайті; 
‒ швидке завантаження сторінок. 
Детальні вимоги: 
‒ розробка системи каталогу з відображенням списку товарів: Кожен товар у 
каталозі повинен відображатись з зображенням, назвою та ціною. 
‒ розробка функціоналу для фільтрації товарів: фільтрація повинна включати 
можливість вибору кількох параметрів одночасно. Результати фільтрації 
повинні відображатися миттєво; 
‒ розробка системи кошику для товарів: Кошик повинен відображати список 
доданих товарів, загальну суму та кількість товарів у замовленні та надавати 
можливість змінити кількість кожного товару або видалити товар з кошика, при 
цьому кошик повинен зберігатись у клієнтській частині; 
‒ розробка системи оформлення замовлення: Процес оформлення замовлення 
повинен включати введення контактної інформації, вибір способу доставки та 
способу оплати. Веб-сайт повинен надавати зворотний зв’язок про статус 
замовлення після його оформлення; 
‒ модуль авторизації та реєстрації облікового запису: користувач повинен мати 
змогу створити та авторизуватись у обліковий запис; 
‒ оптимізація серверної архітектури: відгук на дії користувача повинен бути 
максимально швидким, не перевищувати 10ms на звичайні запити; 
‒ рекомендована швидкість завантаження сторінки веб-сайту не більш ніж 230ms. 
ВИМОГИ ЗАМОВНИКА 
Користувач повинен мати можливість переглядати товар та послуги, 
фільтрувати перегляд товарів відповідно однієї або кількох характеристик які 
властиві певній категорії, реєструвати та авторизуватись у обліковий запис, додавати 
26 
ЧДТУ 242252.013 ПЗ 
товари у кошик, видаляти товари з кошику, перейти на сторінку товару з його 
детальною інформацію та оформлювати замовлення з корзини. Веб-сайт повинен 
справлятись з великим навантаженням яке викликає одночасне знаходження на веб-
сайті великої кількості активних відвідувачів, а саме витримувати навантаження, яке 
викликають близько 500-700 активних осіб. 
ВИМОГИ РОЗРОБНИКА 
Розробити інтерфейс для перегляду товарів та послуг, включаючи модуль 
каталогу товарів з відображенням невеликих карточок товару, які містять в собі 
коротку інформацію: зображення, опис та ціну. Реалізувати функціонал фільтрації 
товарів за однією або кількома характеристиками, які властиві певній категорії. 
Розробити можливість додавання товарів у кошик та видалення їх з кошика, 
можливість керувати кількістю одиниць доданого до кошику товару. Реалізувати 
функціонал оформлення замовлення з кошику, включаючи збір контактної інформації 
та іншої інформації яка необхідна для замовлення. Розробити систему авторизації та 
реєстрації облікового запису. 
Система повинна бути гнучкою для впровадження нового функціоналу, база 
даних повинна ураховувати масштабованість у майбутньому. Забезпечити 
оптимізацію коду та бази даних для ефективної роботи з великою кількістю 
одночасних відвідувачів. Для розробки використати наступні мови програмування та 
технології: React, Redux, react-router – для Frontend; PostgreSQL, Java Spring – для 
Backend. 
Функціональні та нефункціональні вимоги: 
Функціональні вимоги: 
‒ система каталогу для відображення повного списку товарів; 
‒ система фільтрації товарів по певному набору характеристик; 
‒ система додавання, видалення та зберігання товару у корзину; 
‒ система авторизації та реєстрації; 
‒ можливість оформлення замовлення товарів з корзини. 
Нефункціональні вимоги:  
‒ захист персональних даних користувачів; 
27 
ЧДТУ 242252.013 ПЗ 
‒ швидкий відгук на дії користувача на сайті; 
‒ швидке завантаження сторінок. 
2.2.2 Формування вимог за допомогою діаграми прецедентів 
На діаграмі прецедентів (рис.2.6) інтернет-магазину було визначено два актори: 
клієнт (користувач, який зайшов на сайт) та адміністратор. Проаналізувавши вимоги, 
на основі визначених бізнес-процесів я сформував перелік варіантів використання 
системи для кожного актора враховуючи його роль у системі. 
Зображена діаграма прецедентів бізнес-процесу інтернет магазину з продажу 
мобільної техніки та включає в себе два актори, які представляють клієнта та 
адміністратора. 
1. Клієнт:
Клієнт – це користувач, який зайшов на сайт інтернет-магазину. 
Клієнт може оформити замовлення, додавати та видаляти товар з кошику, 
переглянути каталог наявних товарів представлених інтернет-магазином, 
скористуватись полем пошуку щоб знайти необхідний товар за його назвою та 
використати фільтри для підбору товару який відповідає  певним характеристикам. 
Клієнт також може зареєструвати  обліковий запис або авторизуватись в уже 
існуючий обліковий запис. 
28 
ЧДТУ 242252.013 ПЗ 
Рисунок 2.6 – Діаграма прецедентів інтернет-магазину 
2. Адміністратор:
Адміністратор – це користувач який має особливі права, зобов’язання 
адмініструвати магазин, керувати замовленнями та списком товарів. 
Адміністратор має можливість додавати нові товари та редагувати 
характеристики чи основну інформацію про вже існуючі товари, обробляти 
замовлення, змінювати статус замовлення, додавати та редагувати категорії товару. 
2.3 Проектування логічної структури програмного комплексу 
Проектування логічної структури інтернет-магазину мобільної техніки 
забезпечує чітке розуміння структури програмного комплексу та взаємодії між 
29 
ЧДТУ 242252.013 ПЗ 
різними компонентами системи. Результати проектування подані у вигляді діаграми 
класів та діаграми пакетів. 
2.3.1 Діаграми класів 
За допомогою діаграми класів нижче подані результати розробки структури 
інтернет-магазину мобільної техніки, на якій зображені основні об’єкти системи, такі 
як категорія, статус замовлення, товар, замовлення, користувач та інші. Також на цій 
діаграмі у об’єктів вказані методи, взаємозв’язки між об’єктами та їх атрибути. Це 
дозволить чітко розуміти, як у розроблюваному інтернет-магазині будуть 
організовані та оброблені дані. 
Рисунок 2.7 – Початкова діаграма класів для інтернет-магазину
30 
ЧДТУ 242252.013 ПЗ 
Для проектування діаграми класів інтернет-магазину були проаналізовані вимоги до 
системи на основі потреб користувачів та були ідентифіковані ключові 
функціональні можливості. На основі цієї інформації, я створив початкову діаграму 
класів де визначив основні класи та взаємозв’язки між ними (рис. 2.7) за допомогою 
інструментів для побудови UML діаграм. 
Після того, як я побудував початкову діаграму, я провів повторний аналіз та 
визначив специфікацію класів, щоб краще розуміти, які атрибути повинен мати той 
чи інший клас та які функції у системі він повинен виконувати. 
‒ Специфікація класів на початковій діаграмі класів: 
‒ User – клас об’єктів-користувачів, який взаємодіє з замовленнями; 
‒ Order – клас об’єктів-замовлень які формують клієнти; 
‒ OrderStatus –нумератор, надає перелік можливих станів замовлення; 
‒ OrderProduct – клас, який відносить товари до певного замовлення; 
‒ Category – клас, представляє категорії товарів; 
‒ Product – клас об’єктів товару, представляє основні характеристики товару, 
інформацію про товари; 
‒ 
SmartphoneDetails – клас, який представляє детальну інформацію про товар 
відповідно специфіки категорії. 
В результаті аналізу специфікації та перевірки спроектованої структури на 
відповідність вимогам та логічну цілісність, були додані до діаграми необхідні 
атрибути для кожного з класів (рис. 2.8). 
31 
ЧДТУ 242252.013 ПЗ 
Рисунок 2.8 – Діаграма класів інтернет-магазину з атрибутами 
На цій діаграмі класів вже подана повна чітка структура даних для інтернет-
магазину мобільної техніки, що включає користувачів, товари, категорії товарів, 
деталі про смартфони, замовлення. Між класами чітко визначені зв’язки, що 
забезпечує можливість ефективного управління даними та взаємодії між 
компонентами системи. Далі розглянемо цю діаграму більш детально. 
Опис діаграми класів: 
1 Клас Category 
Атрибути: 
- category_id: Long – унікальний ідентифікатор категорії;
32 
ЧДТУ 242252.013 ПЗ 
- name: String – назва категорії;
- description: String – опис категорії.
2 Клас Product 
Атрибути: 
- product_id: String – унікальний ідентифікатор товару;
- articul: String – артикул товару;
- name: String – назва товару;
- description: String – опис товару;
- price: BigDecimal – ціна товару;
- stock :Int – кількість товару на складі;
- category_id: Long – ідентифікатор категорії, до якої належить товар;
- imageLinks: String – посилання на зображення товару.
Методи: 
- findProductById() – знаходить товар за його ідентифікатором.
3 Клас SmartphoneDetails 
Атрибути: 
- details_id: Long – унікальний ідентифікатор деталей;
- product_id: String – ідентифікатор товару, до якого належать ці деталі;
- brand: String – бренд смартфону;
- model: String – модель смартфону;
- display_size: float – розмір екрану;
- resolution: String – роздільна здатність екрану;
- processor: String – процесор смартфону;
- ram: int – обсяг оперативної пам'яті;
- storage_capacity: int – обсяг внутрішньої пам'яті;
- battery_capacity: int – ємність акумулятора.
- camera_resolution: float – роздільна здатність камери;
- operating_system: String – операційна система смартфону.
Методи: 
- findAllWithDetailsByName() – пошук всіх товарів з деталями за ім’ям;
33 
ЧДТУ 242252.013 ПЗ 
- findAllWithDetails() – пошук всіх товарів з деталями;
- findWithDetailsById() – пошук товару за певним ідентифікатором.
4 Клас Order 
Атрибути: 
- order_id: Long – унікальний ідентифікатор замовлення;
- order_date: date – дата замовлення;
- status: OrderStatus – статус замовлення;
- user_id: int – ідентифікатор користувача, який зробив замовлення;
- products: String – продукти, які включені в замовлення;
- total_price: BigDecimal – загальна вартість замовлення;
- firstname: String – ім'я користувача;
- lastname: String – прізвище користувача;
- email: String – електронна пошта користувача;
- delivery_method: String – метод доставки;
- payment_method: String – метод оплати;
- address: String – адреса доставки.
Методи: 
- createOrder() – створення нового замовлення;
- editOrderDetails() – редагування деталів замовлення;
- getTotalPrice() – розрахунок загальної ціни замовлення.
5 Клас OrderProduct 
Атрибути: 
- id: Long – унікальний ідентифікатор користувача;
- order_id: Long – ідентифікатор замовлення, до якого відноситься товар;
- product_id: Long – ідентифікатор товару, який відноситься до замовлення;
- quantity: Int – кількість товару.
Методи: 
- getProductList() – отримання списку товарів до замовлення.
6 Клас User 
Клас User представляє користувача. 
34 
ЧДТУ 242252.013 ПЗ 
- user_id: Long – унікальний ідентифікатор користувача;
- firstname: String – ім'я користувача;
- lastname: String – прізвище користувача;
- login: String – логін користувача;
- password: String – пароль користувача;
- email: String – електронна пошта користувача.
Методи: 
- auth() – метод для аутентифікації;
- registration() – метод для реєстрації;
- findByEmail() – метод для пошуку користувача за електронною поштою.
7 Перерахований тип OrderStatus 
- name: String – назва статусу.
2.3.2 Діаграми пакетів 
Проаналізувавши структуру розроблюваного програмного комплексу, 
спроектував діаграму пакетів на якій зображений результат організації структурних 
компонентів у пакети (рис.2.9). 
Рисунок 2.9 – Діаграма пакетів інтернет-магазину
35 
ЧДТУ 242252.013 ПЗ 
Ця діаграма відображає залежності між підсистемами або модулями, які 
згруповані у пакети. Це допомагає краще розуміти структуру та організацію 
елементів у моєму проекті. 
Опис діаграми пакетів: 
На поданій діаграмі пакетів зображено організацію структури розробленого 
інтернет-магазину мобільної техніки у пакети. Основним функціоналом серверу є 
обробка замовлень та управління списком товарів (редагування, читання, 
додавання), а веб-сайт надає інтерфейс користувачам. Залежність веб-сайту від 
сервера вказує на те, що частину даних для інтерфейсу він отримує з сервера. 
Такими даними у контексті розробленого проекту є дані про товари, замовлення, 
тощо. Сервер, у свою чергу, отримує ці дані з бази даних тож залежить від неї. 
2.4 Архітектурне проектування 
Архітектура програмного комплексу базується на принципах мікро-сервісної 
архітектури. Кожен функціональний блок, такий як взаємодія з веб-сайтом, базою 
даних, процес оформлення замовлення та інші, реалізований як окремий мікро-сервіс. 
Це забезпечує гнучкість, масштабованість та незалежність компонентів системи. У 
цьому пункті результати архітектурного проектування будуть подані у вигляді 
діаграм компонентів та розгортання. Вони покажуть, які компоненти існують у 
системі та як вони взаємодіють між собою. 
2.4.1 Діаграма компонентів 
Діаграма компонентів інтернет-магазину мобільної техніки (рис.2.10) була 
спроектована щоб візуально зобразити основні компоненти розглядуваної системи та 
визначення зв’язку між ними. Це необхідно для більшого розуміння того, як саме 
компоненти інтернет-магазину взаємодіють між собою, яким чином обмінюються 
даними та які інтерфейси надають або використовують. На діаграмі відображено 
ключові елементи системи, такі як база даних, сервер, веб-сайт, пошукова система, 
обробка замовлень, UI/UX інтерфейс та інші. Далі ми детально розглянемо 
спроектовану діаграму. 
36 
ЧДТУ 242252.013 ПЗ 
Рисунок 2.10 – Діаграма компонентів розробленого програмного комплексу
На цій діаграмі компонентів зображено, як взаємодіють основні компоненти 
системи інтернет-магазину мобільної техніки. Веб-додаток, використовуючи запити 
до інтерфейсу (API) наданого сервером, формує користувацький інтерфейс на основі 
відповідей від нього. Такі модулі, як «Каталог товарів» та «Пошукова система» 
використовують отримані веб-додатком від серверу дані для формування відповідних 
секцій UI інтерфейсу. Сервер, в свою чергу, отримує дані з бази даних 
використовуючи власний функціонал. 
Опис діаграми компонентів: 
1 Веб-додаток (Фронтенд): це інтерфейс для користувачів, де вони можуть 
переглядати товари, робити замовлення та взаємодіяти з системою. 
2  База даних: компонент у якому зберігаються дані про товари, замовлення, 
користувачів та інші сутності. 
3 Сервер (Бекенд):  цей компонент обробляє запити від клієнтського додатку, 
взаємодіє з базою даних та забезпечує логіку бізнес-процесів. 
4 Каталог товарів: відповідає за відображення товарів користувачам. 
37 
ЧДТУ 242252.013 ПЗ 
5 Пошукова система: компонент, що відповідає за пошук товарів за 
ключовими словами або фільтрами. 
6 Обробка замовлень: відповідає за обробку замовлень, встановлення 
початкового стану замовлення. 
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма 
розгортання. 
Розгортання програмної системи на апаратних засобах: 
Для того щоб розгорнути програмний комплекс інтернет-магазину мобільної 
техніки, потрібне відповідне апаратне забезпечення, яким виступив фізичний сервер. 
Сервер був налаштований та на нього була встановлена операційна система Windows. 
Після налаштування серверу, на ньому була розгорнута серверна частина 
розроблюваного програмного комплексу та створена і налаштована база даних для 
зберігання інформації, яка необхідна для повноцінного функціонування інтернет-
магазину. База даних була створена згідно структури яка була спроектована під час 
розробки продукту. 
Останнім кроком було завантаження виконавчих файлів веб-сайту на сервер, їх 
розпаковка та розміщення у відповідних каталогах. Після повного розгортання усіх 
складових розроблюваного програмного комплексу, необхідно провести комплексне 
тестування розгорнутої системи інтернет-магазину, щоб переконатись в коректному 
функціонуванню та правильної інтеграції усіх модулів. Тестування буде розглянуто 
більш детально у наступному розділі цієї роботи. 
Діаграма розгортання: 
Результати проектування розгортання розроблюваного програмного комплексу 
на апаратних засобах подані у вигляді діаграми розгортання (рис.2.11). Вона 
відображає як повинні бути розгорнуті артефакти на вузлах. За допомогою діаграми 
розгортання я чітко визначив, які сервери потрібно налаштувати для розгортання 
програмного комплексу інтернет-магазину, як компоненти взаємодіють між собою і 
які протоколи при цьому використовуються для обміну даними. На діаграмі 
зображено чотири вузли, позначені як «Client (Клієнт)», «Web Server (Веб-сервер)», 
«Server (Сервер)» та «Database Server (Сервер бази даних)». Кожен вузол містить 
38 
ЧДТУ 242252.013 ПЗ 
символ компонента, що вказує на розгортаний артефакт. Крім того, діаграма показує 
мережеві з'єднання між вузлами. Наприклад, для з'єднання між веб сервером, 
сервером і сервером бази даних використовуються протоколи HTTPS та JDBC (TPD), 
що забезпечують шифрування даних і захист від несанкціонованого доступу. 
Рисунок 2.11 – Діаграма розгортання інтернет-магазину 
Опис діаграми розгортання: 
1 Клієнт: 
– підключений до вузла «Веб-сервер», лінія підключення позначена як
«HTTP/s». Це означає, що між цими двома вузлами відбувається
комунікація через протокол HTTP або HTTPS.
2 Веб-сервер: 
– містить компонент, позначений як «Користувацький інтерфейс веб-сайту»,
який відповідає за повернення користувацького інтерфейсу у відповідь на
запити до веб-серверу.
– підключений до вузла «Сервер», з яким обмінюється даними за допомогою
HTTP/s протоколу.
39 
ЧДТУ 242252.013 ПЗ 
3 Сервер: 
– підключений до вузла «Сервер бази даних», для взаємодії між ними
використовується JDBC.
– вузол «Сервер» має компонент додатку, розгорнутого на ньому, який
оброблює запити від вузла «Веб-сервер» до вузла «Сервер», та звертається
у разі необхідності до вузла «Сервер бази даних» для отримання відповідних
даних, що були запитані.
4 Сервер бази даних: 
– містить компонент, позначений як «База даних».
– використовується для надання зовнішнього доступу до даних збережених у
розгорнутій базі даних.
2.5 Моделювання поведінки системи 
У цьому розділі будуть подані результати моделювання поведінки системи 
інтернет-магазину за допомогою діаграм діяльності, скінченного автомату та діаграм 
послідовності і комунікації. Результати моделювання поведінки для розроблюваного 
інтернет-магазину мобільної техніки допоможуть визначити, як система повинна 
працювати в різних сценаріях. Завдяки аналізу результатів цього моделювання буде 
легше проектувати та реалізовувати вимоги до системи. 
2.5.1 Діаграма діяльності 
Діаграма діяльності інтернет-магазину (рис.2.12) дозволяє краще розуміти 
послідовність дій користувача який користується веб-сайтом для взаємодії з 
системою, які рішення повинні прийматись користувачем на різних етапах 
використання системи та варіанти  рішень які користувач може прийняти та наслідки 
його вибору. На зображеній діаграмі діяльності показаний процес користування веб-
сайтом від переходу на будь яку сторінку веб-сайту до його закриття. Діаграма 
охоплює основні дії користувача, такі як авторизація в обліковий запис при умові що 
він вже існує або реєстрація якщо такого облікового запису немає, перегляд каталогу 
товарів, додавання їх до кошика та можливість видалення, оформлення замовлення та 
завершення покупки. 
40 
ЧДТУ 242252.013 ПЗ 
Рисунок 2.12 – Діаграма діяльності інтернет-магазину 
Опис кроків діаграми діяльності: 
1 Перехід на сторінку веб-сайту 
- користувач заходить на веб-сайт.
2 Перевірка реєстрації 
Якщо користувач не зареєстрований: 
- ознайомлення з умовами користування сайтом.
- реєстрація облікового запису (у разі згоди з умовами).
Якщо користувач зареєстрований: 
- вхід у обліковий запис.
41 
ЧДТУ 242252.013 ПЗ 
3 Взаємодія з сайтом 
- додавати або видаляти товари з корзини.
- переглядати каталог товарів.
- оформляти замовлення.
4 Завершення роботи 
- вихід з облікового запису.
- закриття веб-сторінки.
2.5.2.Діаграма послідовності 
Результати дослідження та проектування взаємодії між різними модулями 
системи інтернет-магазину у хронологічному порядку подані у вигляді діаграми 
послідовності (рис.2.13). Вона відображає взаємодію між різними модулями в системі 
під час користування сайтом та оформлення замовлення в хронологічному порядку. 
Завдяки проектуванню цієї діаграми було чітко визначено, які процеси відбуваються 
між веб-сайтом, сервером та базою даних в залежності від дій користувача. 
Рисунок 2.13 – Діаграма послідовності інтернет-магазину мобільної техніки 
42 
ЧДТУ 242252.013 ПЗ 
Ця діаграма послідовності показує процес взаємодії між користувачем, веб-
сайтом, сервером та базою даних під час авторизації, пошуку товарів та оформлення 
замовлення.  
Опис діаграми послідовності: 
1 Авторизація користувача: 
– користувач вводить свої облікові дані на веб-сайті.
– веб-сайт передає дані користувача на сервер.
– сервер запитує дані користувача у бази даних.
– база даних підтверджує особу користувача.
– сервер дозволяє доступ до облікового запису користувача.
– користувач отримує повідомлення про успішну авторизацію.
2 Пошук товарів: 
– користувач виконує пошук товарів на веб-сайті.
– веб-сайт формує запит на сервер.
– сервер надсилає запит до бази даних.
– база даних повертає знайдені товари на сервер.
– сервер повертає список товарів на веб-сайт.
– веб-сайт показує список товарів користувачу.
3 Додавання товару у кошик: 
– користувач додає товар у кошик на веб-сайті.
– веб-сайт зберігає інформацію про товар у localStorage браузера користувача.
4 Оформлення замовлення: 
– користувач оформлює замовлення на веб-сайті.
– веб-сайт передає дані про замовлення на сервер.
– сервер зберігає замовлення у базі даних.
– база даних підтверджує збереження даних замовлення.
– сервер повідомляє веб-сайт про успішне оформлення замовлення.
– веб-сайт відправляє користувачу деталі замовлення.
2.5.3 Діаграма комунікації 
Результати візуалізації взаємодії між різними об’єктами у 
43 
ЧДТУ 242252.013 ПЗ 
розроблюваній системі подані у вигляді діаграми комунікації. За допомогою цієї 
діаграми було зображено, як об’єкти обмінюються повідомленнями в процесі 
виконання сценарію або операції. 
Рисунок 2.14 – Діаграма комунікації інтернет-магазину 
На цій діаграмі комунікації зображено взаємодію між користувачем, веб-
сайтом, сервером і базою даних під час процесу авторизації, пошуку товарів, 
додавання їх у кошик та оформлення замовлення. Вона демонструє послідовність дій 
та передачу інформації між користувачем, веб-сайтом, сервером та базою даних під 
час виконання основних операцій в моєму інтернет-магазині. 
Опис діаграми комунікації: 
1 Авторизація: 
– користувач вводить свої облікові дані (логін і пароль) на веб-сайті.
2 Валідація користувача: 
44 
ЧДТУ 242252.013 ПЗ 
– веб-сайт передає введені користувачем дані на сервер для перевірки.
– сервер здійснює валідацію користувача, запитуючи відповідну інформацію
з бази даних.
3 Отримання даних: 
– сервер отримує дані з бази даних, щоб підтвердити облікові дані
користувача.
4 Передача інформації: 
– після успішної валідації сервер передає інформацію назад на веб-сайт, що
користувач авторизований.
5 Виконання пошуку: 
– користувач вводить запит для пошуку товарів на веб-сайті.
6 Отримання списку товарів: 
– веб-сайт передає запит на сервер для отримання списку товарів.
– сервер запитує відповідний список товарів у бази даних.
7 Виводить товари: 
– сервер отримує список товарів з бази даних.
– сервер передає список товарів на веб-сайт.
– веб-сайт відображає список товарів користувачу.
8 Додавання товару у кошик: 
– користувач вибирає товар і додає його у кошик на веб-сайті.
9 Зберігання кошика локально: 
– веб-сайт зберігає інформацію про доданий товар у localStorage браузера
користувача.
10 Оформлення замовлення: 
– користувач переходить до оформлення замовлення і заповнює необхідні
дані.
11 Передача сформованого замовлення: 
– веб-сайт передає дані про сформоване замовлення на сервер.
12 Збереження замовлення: 
– сервер отримує дані про замовлення і зберігає їх у базі даних.
45 
ЧДТУ 242252.013 ПЗ 
2.5.4. Діаграма скінченного автомату 
Діаграма скінченного автомату інтернет-магазину допомогла визначити та 
візуалізувати стани системи, переходи між цими станами та події, які викликають ці 
переходи. Ця діаграма дає чітке розуміння про те, як система інтернет-магазину 
повинна реагувати на різні події або умови і як вона повинна переходити між різними 
станами. 
Рисунок 2.15 – Діаграма скінченного автомату інтернет-магазину 
На цій діаграмі скінченого автомату зображено процес взаємодії користувача з 
інтернет-магазином під час завантаження сторінки, отримання списку товарів та 
авторизації користувача.  
Опис діаграми скінченого автомату: 
1 Початковий перехід: 
– користувач переходить на сторінку веб-сайту інтернет-магазину.
– відбувається завантаження сторінки.
2 Завантаження головної сторінки: 
– після завантаження сторінки користувач потрапляє на головну сторінку
інтернет-магазину.
46 
ЧДТУ 242252.013 ПЗ 
– сторінка завантажена та готова до взаємодії з користувачем.
3 Отримання списку товарів: 
– система починає процес отримання списку товарів.
– після отримання списку товарів відбувається оновлення інтерфейсу.
– інтерфейс оновлений та показує користувачу список товарів.
4 Авторизація користувача: 
– користувач намагається авторизуватися.
– якщо авторизація успішна, інтерфейс оновлюється, і користувач може
продовжувати взаємодію зі сторінкою.
– якщо авторизація не пройдена, процес авторизації завершується, і
користувач залишається неавторизованим.
5 Очікування команд від користувача: 
– після успішної авторизації та/або отримання списку товарів і оновлення
інтерфейсу, система очікує подальших команд від користувача.
– користувач може виконувати пошук товарів, додавати їх у кошик,
оформлювати замовлення тощо.
47 
ЧДТУ 242252.013 ПЗ 
Висновки до другого розділу 
Моделювання предметної області дозволило чітко визначити основні аспекти 
та компоненти системи, аналіз вимог допоміг зрозуміти потреби як з боку замовника, 
так і з боку розробника. Формування вимог за допомогою діаграми прецедентів 
дозволило наочно визначити функціональність системи та очікувані процеси 
взаємодії користувачів з веб-додатком. Архітектурне проектування визначило 
основні аспекти для подальшої розробки програмного комплексу, забезпечуючи його 
ефективність та масштабованість. Моделювання поведінки системи допомогло 
визначити потреби взаємодії між компонентами системи. 
Проведена робота з моделювання предметної області, формування вимог, 
проектування структури та архітектури програмного комплексу, а також 
моделювання поведінки системи була важливим кроком у розробці продукту. 
Отримані результати дозволять ефективно реалізувати функціональність 
системи та забезпечити задоволення потреб з боку користувачів. Даний підхід до 
розробки дозволить створити конкурентоздатний продукт. 
48 
ЧДТУ 242252.013 ПЗ 
РОЗДІЛ 3. РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ 
3.1 Розробка програмного комплексу 
У цьому розділі ми детально розглянемо процес створення програмного 
комплексу інтернет-магазину, призначеного для забезпечення ефективного 
функціонування обраної системи. Основною метою розробки є створення надійного, 
зручного та функціонального інтернет-магазину мобільної техніки, що відповідає 
вимогам користувачів та специфікаціям проекту. В ході цього розділу, буде 
проведено аналіз обраних технологій, мов програмування, фреймворків та інших 
інструментів, які використовувались під час розробки. Обґрунтування вибору засобів 
реалізації буде базуватись на критеріях ефективності, продуктивності, надійності та 
відповідності завданням проекту. Також у цьому розділі наведено структурну схему 
програмного комплексу, що демонструє основні компоненти системи та їх взаємодію. 
Це допоможе зрозуміти загальну архітектуру програми та зв'язки між її елементами. 
Розглянемо логічну структуру системи, включаючи її основні модулі та функції, а 
також алгоритми, що забезпечують роботу програмного комплексу, опис процесу 
розробки бази даних, інтерфейсу користувача та програмних компонентів. 
3.1.1 Обґрунтування вибору засобів реалізації 
При виборі програмних та апаратних засобів для розробки інтернет-магазину 
мобільної техніки важливо враховувати кілька ключових факторів. Перш за все, 
необхідно забезпечити високу продуктивність та масштабованість системи, оскільки 
інтернет-магазин повинен обробляти велику кількість запитів і даних одночасно. 
Безпека є також критичним аспектом, особливо враховуючи обробку фінансових 
транзакцій та збереження конфіденційних даних користувачів.  
Легкість у розробці, підтримці та розширенні системи є важливою для 
зменшення часу та витрат на розробку. Крім того, враховується доступність та якість 
інструментів розробки, їх популярність та підтримка спільноти розробників. 
Важливим аспектом є також інтеграція з існуючими системами та можливість 
49 
ЧДТУ 242252.013 ПЗ 
використання сучасних технологій для створення інтуїтивно зрозумілих і зручних 
користувацьких інтерфейсів. 
Для реалізації програмного комплексу інтернет-магазину мобільної техніки, 
були використані наступні технології: 
‒ Java з фреймворком Spring - Java є однією з найпоширеніших мов 
програмування, відома своєю продуктивністю та стабільністю. Spring надає 
широкий набір інструментів для створення веб-додатків, включаючи 
управління залежностями, безпеку та доступ до баз даних. Це дозволяє легко 
реалізувати бізнес-логіку інтернет-магазину та забезпечити його 
масштабованість. 
‒ React – ця бібліотека JavaScript дозволяє створювати динамічні та інтерактивні 
користувацькі інтерфейси. Використання компонентного підходу сприяє 
легкості в розробці та підтримці коду, а також забезпечує швидкий відгук веб-
додатку, що покращує користувацький досвід. 
‒ Redux - використовується для управління станом додатку, зберігаючи весь стан 
у єдиному об'єкті. Це робить управління станом прогнозованим та легко 
відтворюваним, що є особливо корисним у складних додатках з великою 
кількістю взаємодій. 
‒ IntelliJ IDEA – середовище розробки, забезпечує зручні засоби для розробки на 
Java, має підтримку популярних фреймворків Java таких як Spring Boot та 
підтримує роботу з базами даних, зокрема, з використаною у цьому проекті 
PostgreSQL. 
‒ PostgreSQL - реляційна база даних, яка забезпечує надійне зберігання та 
управління даними. Вона відома своєю стабільністю, високою продуктивністю 
та відповідністю стандартам SQL, що робить її надійним вибором для інтернет-
магазину. 
‒ Git та GitHub - Використовуються для контролю версій, що дозволяє ефективно 
відстежувати зміни в коді та мати резервну копію кожної з версії. Це сприяє 
організованій роботі та зменшує ризик втрати коду. 
50 
ЧДТУ 242252.013 ПЗ 
‒ JUnit - Цей інструмент забезпечує автоматизоване тестування коду, що 
дозволяє швидко виявляти та виправляти помилки, забезпечуючи високу якість 
програмного забезпечення. 
‒ VS Code - Легкий, але потужний текстовий редактор, який може бути 
використаний як IDE для різних мов програмування. В поточній роботі 
використаний для створення Frontend. 
Вибір програмних та апаратних засобів для розробки інтернет-магазину 
мобільної техніки обґрунтований необхідністю забезпечити продуктивність, 
стабільність та безпеку системи. Використання Java з фреймворком Spring дозволяє 
ефективно реалізувати бізнес-логіку, тоді як React забезпечує створення сучасного 
користувацького інтерфейсу. Інструменти для управління станом, такі як Redux, 
сприяють зручності в розробці та підтримці коду. Обране середовище розробки, таке 
як IntelliJ IDEA, разом з PostgreSQL, забезпечують надійне зберігання даних. Системи 
контролю версій та інструменти для автоматизованого тестування сприяють 
організованій, безпечній та якісній розробці. Такий підхід дозволяє створити 
ефективний та надійний інтернет-магазин, що відповідає вимогам сучасного ринку. 
3.1.2 Опис структурної (функціональної) схеми 
Структурна схема (рис.3.1) представляє основні компоненти системи, їхні 
взаємозв'язки та ієрархію, надаючи чітке уявлення про архітектуру програмного 
забезпечення. Вона допомагає визначити основні модулі, їх підсистеми та способи 
взаємодії між ними. Функціональна схема (рис.3.2), зі свого боку, описує основні 
функції системи, їх взаємозв'язки та послідовність виконання. Вона забезпечує 
розуміння того, як саме система досягає своїх цілей і які операції виконуються для 
забезпечення її функціонування. Аналіз цих схем дозволяє точно визначити 
внутрішню організацію програмного комплексу. 
51 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.1 – Структурна схема розробленого програмного комплексу 
Опис структурної схеми 
Структурна схема (рис. 3.1) відображає основні компоненти інтернет-магазину 
та їх взаємозв'язки: 
- UI інтерфейс: Відповідає за відображення інтерфейсу користувача та
взаємодію з ним.
- підсистема фільтрації товарів: Забезпечує можливість фільтрації товарів за
різними критеріями.
- підсистема авторизації: Керує процесом авторизації та автентифікації
користувачів.
- підсистема пошуку товарів: Відповідає за пошук товарів у базі даних на
основі запитів користувача.
- підсистема замовлень: Забезпечує оформлення та обробку замовлень
користувачів.
Кожен компонент взаємодіє з базою даних для отримання або збереження 
необхідної інформації. UI інтерфейс взаємодіє з користувачем і отримує дані для 
подальшої обробки підсистемами. Підсистеми фільтрації, пошуку та замовлень 
взаємодіють з базою даних для отримання списків товарів або обробки запитів. 
Підсистема авторизації перевіряє дані користувача та оновлює інтерфейс відповідно 
до результатів авторизації. 
52 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.2 – Функціональна схема розробленого програмного комплексу 
Опис функціональної схеми 
Функціональна схема (рис. 3.2) використовується для наочного представлення 
роботи програми чи системи. Вона відображає взаємозв'язок між різними частинами 
програми, функціями, модулями та даними: 
1 UI інтерфейс: Відповідає за взаємодію з користувачем та оновлення UI 
елементів на основі дій користувача. 
- взаємодія з інтерактивними елементами UI: Користувач взаємодіє з
елементами інтерфейсу, такими як кнопки, форми тощо.
- оновлення UI елементів: Інтерфейс оновлюється в залежності від введення
користувача.
2 Підсистема фільтрації товарів: Забезпечує фільтрацію товарів за певними 
критеріями, введеними користувачем. 
- введення запиту: Користувач вводить критерії для фільтрації.
- список товарів: Відображає список товарів, що відповідають заданим
критеріям.
3 Підсистема авторизації: Керує процесом авторизації користувачів. 
- введення даних: Користувач вводить дані для авторизації.
53 
ЧДТУ 242252.013 ПЗ 
- оновлення UI з результатом: Інтерфейс оновлюється відповідно до
результатів авторизації.
4 Підсистема пошуку товарів: Забезпечує пошук товарів у базі даних за 
запитом користувача. 
- введення запиту: Користувач вводить запит для пошуку.
- список товарів: Відображає результати пошуку товарів.
5 Підсистема замовлень: Керує процесом оформлення замовлень. 
- введення даних: Користувач вводить дані для оформлення замовлення.
- оновлення UI з результатом: Інтерфейс оновлюється відповідно до
результатів обробки замовлення.
3.1.3 Опис логічної схеми системи 
Логіка роботи інтернет-магазину описує покроковий план виконання дій 
або алгоритм, яким система досягає поставленої мети. Нижче описана послідовність 
дій та процесів які відбуваються у системі розробленого проекту під час їх виконання. 
1 Вхід на сайт: 
- користувач вводить адресу сайту в адресний рядок браузера або переходить
за посиланням;
- до системи надсилається запит на отримання товарів та іншої інформації
розташованої на головній сторінці;
- Завантажується головна сторінка інтернет-магазину.
2 Перегляд каталогу: 
- користувач переходить до каталогу з меню навігації або за посиланням;
- до системи надсилається запит на отримання загального списку товарів;
- відкривається сторінка каталогу, де відображаються всі товари у вигляді
списку або сітки з фото, назвами та ціною.
3 Пошук товарів за назвою 
- користувач вводить назву товару або ключове слово в рядок пошуку,
розташований у верхній частині сторінки;
- користувач натискає кнопку пошуку або клавішу Enter;
54 
ЧДТУ 242252.013 ПЗ 
- до системи надсилається запит на отримання товарів з відповідним ім’ям
або його частиною;
- відображається сторінка результатів пошуку з товарами, що відповідають
запиту.
4 Використання фільтрів 
- на сторінці результатів пошуку або в категорії товарів користувач може
використовувати фільтри (наприклад, за брендом, ціною,
характеристиками);
- користувач вибирає потрібні параметри фільтрації;
- веб-сайт на клієнтській стороні фільтрує загальний список товарів
відповідно до обраних фільтрів та виводить результат.
5 Перегляд товару 
- користувач натискає на товар, що його зацікавив, для детального перегляду;
- на сервер відправляється запит на отримання детальної інформації про
відповідний товар по його ідентифікатору;
- відкривається сторінка товару, де представлена детальна інформація: фото,
специфічні характеристики, ціна, опис, наявність на складі, тощов.
6 Авторизація (якщо користувач має обліковий запис) 
- користувач натискає на кнопку "Увійти" у верхньому правому куті сторінки;
- відкривається форма авторизації, де користувач вводить свої облікові дані;
- після натискання кнопки "Увійти", клієнтський додаток направляє запит до
серверу для аутентифікації та, у разі успіху, користувач авторизується;
- UI інтерфейс оновлюється для авторизованого користувача.
7 Реєстрація (якщо користувач не має облікового запису) 
- користувач натискає на кнопку "Реєстрація";
- відкривається форма реєстрації, де користувач вводить необхідні для
створення облікового запису дані;
- після натискання кнопки "Зареєструватися", система надсилає запит на
створення нового облікового запису;
8 Додавання товару до корзини 
55 
ЧДТУ 242252.013 ПЗ 
- на сторінці товару користувач натискає кнопку "Додати до корзини";
- клієнтський додаток додає товар до корзини, яка зберігається локально до
закриття користувачем браузеру, після чого користувач може продовжувати
покупки або перейти до оформлення замовлення.
9 Оформлення замовлення 
- користувач натискає на іконку корзини у верхньому правому куті сторінки;
- відкривається сторінка корзини, де користувач може переглянути всі додані
товари, змінити кількість або видалити непотрібні товари;
- користувач натискає кнопку "Оформити замовлення";
- відкривається сторінка оформлення замовлення, де користувач вводить
необхідні дані для замовлення;
- після заповнення всіх даних користувач натискає кнопку
"Підтвердити замовлення", після чого до серверу надсилається запит на
створення нового замовлення;
10 Завершення користування сайтом 
- у будь який момент користувач може перейти за іншим посиланням або
закрити вкладку браузера;
- у разі потреби, користувач може вийти з облікового запису, натиснувши на
кнопку "Вийти" у верхньому правому куті сторінки;
Ця послідовність дій та процесів, що відбуваються у системі інтернет-магазину 
мобільної техніки, описує основні функціональні можливості. В залежності від повної 
кодової бази можуть існувати додаткові функціональні можливості та послідовності. 
3.1.4 Розробка бази даних 
Розробка бази даних — це важливий процес для будь-якого додатку, що має 
зберігати та працювати з даними. Створення такої структури даних потребує 
ретельного аналізу вимог до проекту та запланованої бізнес-логіки, щоб створити 
ефективну структуру для зберігання та управління даними.  
На першому етапі розробки бази даних здійснюється аналіз вимог до проекту. 
Це включає збір інформації про потреби користувачів, бізнес-процеси та обмеження, 
які можуть вплинути на проект. Аналіз вимог дозволяє виявити, які дані необхідні, як 
56 
ЧДТУ 242252.013 ПЗ 
вони будуть використовуватися і які зв’язки між ними існують. На основі цього 
аналізу створюється концептуальна модель бази даних. 
Концептуальна модель бази даних: 
Користувачі: 
- user_id: унікальний ідентифікатор користувача;
- firstname: ім'я користувача;
- lastname: прізвище користувача;
- login: логін користувача для входу в систему;
- password: пароль користувача;
- email: електронна адреса користувача.
Категорії: 
- category_id: унікальний ідентифікатор категорії;
- name: назва категорії;
- description: опис категорії;
Замовлення: 
- order_id: унікальний ідентифікатор замовлення;
- order_date: дата створення замовлення;
- status: статус замовлення;
- user_id: ідентифікатор користувача, який зробив замовлення;
- total_price: загальна вартість замовлення;
- firstname: ім’я замовника;
- lastname: прізвище замовника;
- phone_number: номер телефону замовника;
- email: електрона поштова скринька замовника;
- delivery_method: спосіб доставки;
- payment_method: спосіб оплати;
- address: адреса доставки.
Товари у замовленні: 
- id: унікальний ідентифікатор запису;
57 
ЧДТУ 242252.013 ПЗ 
- order_id: ідентифікатор замовлення, до якого належить товар;
- product_id: ідентифікатор товару, який було замовлено;
- quantity: кількість замовленого товару.
Товари: 
- product_id: унікальний ідентифікатор товару;
- articul: артикул товару;
- name: назва товару;
- description: опис товару;
- price: ціна товару;
- stock: кількість товару на складі;
- category_id: ідентифікатор категорії, до якої належить товар;
- image_links: посилання на зображення товару.
Деталі смартфонів: 
- details_id: унікальний ідентифікатор деталей;
- product_id: ідентифікатор товару, до якого належать деталі;
- brand: бренд смартфону;
- model: модель смартфону;
- display_size: розмір дисплея смартфону;
- resolution: роздільна здатність дисплея;
- processor: процесор смартфону;
- ram: об'єм оперативної пам'яті (RAM);
- storage_capacity: об'єм вбудованої пам'яті;
- battery_capacity: ємність батареї;
- camera_resolution: роздільна здатність камери;
- operating_system: операційна система смартфону.
Після створення концептуальної моделі наступає етап розробки логічної 
моделі. Логічна модель (рис. 3.4) деталізує концептуальну модель, переводячи її у 
форму, яка може бути реалізована у конкретній СУБД. Логічна модель включає 
визначення таблиць, стовпців, типів даних та зв’язків між таблицями. Для визначення 
зв’язків на логічній моделі використовуються позначення зображені на рисунку 3.3. 
58 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.3 – Позначення зв’язків між таблицями 
59 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.4 – Логічна модель бази даних для інтернет-магазину 
Спираючись на логічну модель, створюється фізична модель бази даних, яка 
відображає логічну модель у вигляді, придатному для реалізації у конкретній СУБД, 
у цьому проекті це PostgreSQL. Фізична модель враховує специфічні особливості 
обраної СУБД та оптимізує структуру даних для покращення продуктивності. 
Після створення фізичної моделі, потрібно провести тестування бази даних. 
Цей етап є критично важливим для забезпечення її надійності, продуктивності та 
60 
ЧДТУ 242252.013 ПЗ 
безпеки. Під час тестування перевіряються всі аспекти функціональності бази даних, 
щоб гарантувати, що вона працює відповідно до вимог і не містить помилок. 
Для початку, до бази даних буде зроблено мануальний прямий запит на 
заповнення таблиці products та smartphone_details тестовими даними (рис. 3.5), після 
чого виконаємо join запит, який буде об’єднувати ці дві таблиці, на отримання всіх 
даних (рис. 3.6): 
Рисунок 3.5 – SQL запит на додавання тестових даних у таблиці products та 
smartphone_details 
Рисунок 3.6 – Результат виконання JOIN запиту 
61 
ЧДТУ 242252.013 ПЗ 
У результаті видно, що мануальні запити пройшли успішно і дані записались та 
були отримані правильно. Тепер для тестування взаємодії бази даних з сервером 
додатку, використаємо частину логіки серверу для надсилання цього запиту до бази 
даних та отримання у відповіді JSON об’єкту з необхідними даними (рис. 3.7). Для 
надсилання запиту на сервер буде використаний такий інструмент для тестування API 
як Postman. 
Примітка: логіка серверу буде описана у наступних пунктах цієї роботи. 
Рисунок 3.7 – Результат запиту на сервер для отримання інформації з бази даних. 
Рисунок 3.8 – Швидкість виконання запиту 
62 
ЧДТУ 242252.013 ПЗ 
Результатом виконання запиту є отримання JSON об’єкту з інформацією, яка 
отримана з бази даних шляхом надсилання SQL запиту з серверу безпосередньо до 
бази даних. Дані не пошкоджені, час який зайняв запит – 12 ms. Згідно результатів 
проведеного тестування, зважаючи на цілісність отриманих даних у відповідь на 
мануальні запити та запити з серверу, швидкий час отримання цих даних, можна 
рахувати тестування успішним. 
3.1.5 Розробка інтерфейсу користувача 
Розробка конкурентоспроможного інтерфейсу користувача вимагає 
застосування сучасних технологій та підходів. В умовах високої конкуренції на ринку 
електронної комерції, забезпечення зручного, інтуїтивно зрозумілого та 
привабливого інтерфейсу може стати вирішальним фактором для залучення і 
утримання клієнтів. Для розробки елементів інтерфейсу використовувалась 
бібліотека React для JavaScript. Для обробки та керування станами, які 
використовуються в компонентах створених за допомогою React був використаний 
інструмент керування станами Redux, завдяки якому було створено глобальне 
сховище для зберігання станів та була визначена логіка обробки цих станів при 
отримані команд з зазначенням дій які відбулися у системі. Це дозволило ефективно 
керувати станами та оновлювати елементи інтерфейсу лише тоді коли це необхідно, 
що позитивно вплинуло на оптимізацію завантаження сторінок. Навігація між 
сторінками реалізована за допомогою бібліотеки react-router, яка забезпечила зручний 
перехід між сторінками використовуючи інформацію про поточний шлях відносно 
кореневої директорії та автоматичного монтування компонентів з відповідними 
шляху сторінками. Далі ми проаналізуємо та детально розглянемо основні елементи 
розробленого користувацького інтерфейсу для інтернет-магазину мобільної техніки. 
Першим, що бачить користувач при вході на сайт – головна сторінка (рис. 3.9), 
на верхній частині сторінки розташований банер, який демонструє один із товарів, 
представлених в інтернет-магазині. Банер автоматично змінює зображення, 
показуючи різні товари з певною періодичністю. Це дозволяє відвідувачам сайту 
швидко ознайомитися з асортиментом та акціями, які пропонує інтернет-магазин. 
Банер є інтерактивним, тобто користувачі можуть натиснути на нього, щоб перейти 
63 
ЧДТУ 242252.013 ПЗ 
безпосередньо на сторінку з детальною інформацією про товар. Завдяки цьому 
елементу дизайну вдається залучити більше уваги до певних продуктів і стимулювати 
покупців до їх придбання. 
Рисунок 3.9 – Головна сторінка веб-сайту 
Окрім цього, користувач може самостійно гортати зображення скориставшись 
інтерактивними точками які розташовані під ним. 
Нижче банера знаходяться блок вибірки товарів на певну тематику, що 
заздалегідь визначається адміністратором сайту. На момент розробки, такими 
вибірками є: новинки, хіт продажів, флагмани. На будь якій сторінці веб-сайту 
користувачу доступна так звана «шапка» сайту (рис. 3.10) 
Рисунок 3.10 – «Шапка» веб-сайту 
64 
ЧДТУ 242252.013 ПЗ 
У «шапці» користувачу надається зручний доступ до пошуку товару за назвою 
чи частиною назви, доступ до авторизації та реєстрації, кошику (рис. 3.11) у якому 
він може керувати вже доданими товарами (їх кількістю та доданими позиціями), та 
доступ до навігаційного меню щоб переходити між сторінками веб-сайту. 
Рисунок 3.11 – Кошик товарів 
У кошику користувачу доступна загальна інформація про його замовлення, така 
як кількість доданих товарів враховуючи товари одного виду але в множині та 
загальна сума замовлення, що враховує кількість кожної позиції. Користувач може за 
допомогою інтерактивних кнопок управління керувати кількістю одиниць товару у 
замовлені, при кількості менше одиниці товар видаляється, також користувач може 
самостійно видалити товар з кошику натиснувши червону кнопку видалення. Для 
зручності, товар також автоматично видалиться з корзини як позиція якщо його 
кількість одиниць буде рівна нулю. З корзини користувач може перейти відразу до 
оформлення замовлення. Потрапити на сторінку оформлення замовлення він може 
також при додаванні товару у корзину, скориставшись інтерактивними кнопками у 
модальному вікні додавання товару (рис.3.12) або натиснути «Продовжити покупки» 
щоб закрити модальне вікно та продовжити перегляд товарів чи іншого, 
інформаційного наповнення сайту. 
65 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.12 – Модальне вікно при додаванні товару до кошику 
 
 Для зручного пошуку та вибору товару, на сайті представлений каталог товарів 
з фільтрацією за різними характеристиками (рис.3.13), що властиві мобільній техніці. 
У перелік таких характеристик відносяться: бренд, вбудована пам’ять, оперативна 
пам’ять, діагональ екрану, тощо. 
 
 
Рисунок 3.13 – Каталог товарів з списком фільтрів 
66 
ЧДТУ 242252.013 ПЗ 
Щодо інформаційного наповнення, такого як доставка та оплата, інформації про 
компанію,  контакти для зв’язку з представниками компанії, користувач може з усім 
цим ознайомитись перейшовши по одному з посилань розташованих у шапці сайту. 
На сторінці з інформацією, його зустрінуть інформаційні блоки з наповненням згідно 
тематики сторінки (рис.3.14). Користувач може ознайомитись з умовами доставки, 
прочитавши на відповідній сторінці повну та детальну інформацію щодо умов та 
способів якими здійснюється доставка, а також переглянути інформацію про методи 
оплати які доступні для користувача. 
 
 
Рисунок 3.14 – Сторінка «Доставка та оплата» 
 
 На кожній сторінці, перед самим основним наповнюванням, для користувача 
було розроблено систему «хлібні крихти» - інтерактивний навігаційний елемент, який 
показує послідовність переміщення користувача від домашньої сторінки до поточної 
точки перебування. Цей навігаційний елемент надає змогу користувачу не тільки 
побачити, де саме він зараз знаходиться відносно домашньої сторінки, але й 
скористатись ним щоб повернутись на одну з посередницьких точок шляхом 
натискання на відповідну назву точки (рис.3.15). 
67 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.15 – Навігаційний елемент «хлібні крихти» 
 
Для того, щоб перейти на сторінку товару (рис.3.16), користувачу потрібно 
натиснути на назву або зображення товару розміщене на карточці товару, після чого 
він потрапить на сторінку з детальною інформацією та описом саме того товару, на 
який він натиснув. На цій сторінці окрім більш детального ознайомлення з товаром 
користувач також може додати його до корзини. 
 
 
Рисунок 3.16 – Сторінка товару 
 
Характеристики представлені у вигляді таблиці (рис.3.17), де перелічена 
основна специфікація. Справа від таблиці з характеристиками користувач може 
бачити текстовий опис товару, який може доповнювати характеристики деталями про 
технології які були використані, наприклад, при розробці дисплею, тощо. 
68 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.17 – Характеристики та опис товару на сторінці товару 
 
Коли користувач обрав товар який хоче купити, він може перейти на сторінку 
оформлення замовлення (рис.3.18) та заповнити необхідні дані для створення 
замовлення, які включають в себе: ім’я та прізвище одержувача, адреса електронної 
скриньки, номер телефону, спосіб доставки і оплати та адресу за якою потрібно 
доставити товар. Дані, які були введені користувачем, перевіряються на відповідність 
очікуваному формату (рис. 3.19). Таким чином, перевіряється щоб ім’я та прізвище 
одержувача було не менш ніж 2 символи, електрона скринька відповідала 
загальноприйнятому формату, номер телефону – в форматі українського номеру 
телефону у варіаціях з кодом країни та без такого. 
 
 
Рисунок 3.18 – Сторінка оформлення замовлення 
69 
ЧДТУ 242252.013 ПЗ 
 
 Рисунок 3.19 – Валідація введених користувачем даних 
  
Після того, як користувач ввів коректні дані, спираючись на заповнювачі в 
полях вводу та на попередження системи про помилкові дані, замовлення успішно 
формується, відправляється на сервер та отримуючи позитивну відповідь візуально 
повідомляє користувача про успішне замовлення (рис.3.20). 
 
 
Рисунок 3.20 – Повідомлення про успішне замовлення 
 
Користувач також має можливість зареєструвати обліковий запис та 
авторизуватись в нього, за допомогою відповідних модальних вікон. Для того, щоб їх 
запустити користувачу потрібно натиснути на іконку профілю, яка знаходиться в 
70 
ЧДТУ 242252.013 ПЗ 
шапці сайту. Після натискання відкриється модальне вікно авторизації (рис.3.21), де 
користувачу буде запропоновано ввести дані для авторизації.  
Рисунок 3.21 – Модальне вікно авторизації 
Окрім цього, користувач зможе перейти до модального вікна реєстрації 
(рис.3.22) якщо він не має вже зареєстрованого облікового запису. Для полів вводу в 
формі авторизації та реєстрації, по аналогії з формою оформлення замовлення, також 
передбачена валідація введених користувачем даних на відповідність очікуваним 
форматам. 
Після успішної авторизації користувача, інтерфейс оновлюється та відображає 
ім’я яке було введено користувачем при реєстрації у шапці сайту біля корзини 
(рис.3.23), якщо навести на цей елемент інтерфейсу, відобразиться спадне меню з 
кнопкою для виходу з облікового запису. 
Рисунок 3.22 – Модальне вікно реєстрації 
71 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.23 – Відображення авторизованого в системі користувача 
У підсумку, розробка інтерфейсу інтернет-магазину мобільної техніки була 
проведена з акцентом на сучасні технології та зручність користувача. Для 
концентрації користувача на акційних та запропонованих адміністратором товарах 
було розроблено динамічний банер. Шапка сайту надає зручний та швидкий доступ 
до навігації по сторінкам веб-сайту, авторизації, реєстрації та кошика з товарами яким 
користувач може керувати при наведенні курсору на нього. Для зручної навігації 
також було впроваджено навігаційний елемент «хлібні крихти», що дозволяє 
користувачу відстежувати його шлях на сайті відносно головної сторінки та 
повертатись у разі необхідності на одну з сторінок які були на його шляху. 
Інформаційні сторінки з умовами доставки, оплати, інформацією про компанію та 
контактами надають користувачу повне розуміння про сервіс яким він користується 
та про умови надання послуг. Для зручності користувача при використанні різних 
форм представлених на сайті, були впроваджені заповнювачі у всіх полях введення, 
які відображають правильний приклад введення інформації у відповідні поля. Окрім 
цього, форми мають логіку валідації введених даних, тож система попередить 
користувача про їх некоректність. Таким чином, можна сказати що розроблений 
інтерфейс відповідає сучасним тенденціям. 
3.1.6 Опис розробки програмних компонентів 
Для розробки серверної частини додатку була використана мова програмування 
Java з фреймворком Spring Boot. Для того, щоб більш детально розглянути реалізацію 
програмних компонентів, спочатку визначимо перелік компонентів цього 
фреймворку які використовувались у проекті та їх значення у системі. У Spring Boot 
існує безліч компонентів, кожен із яких відіграє свою роль у додатку. Основними 
такими компонентами є: 
72 
ЧДТУ 242252.013 ПЗ 
– Репозиторії – інтерфейси, за допомогою яких ми можемо отримувати доступ
до бази даних та виконувати CRUD операції. Такий компонент
успадковується від інтерфейсу «JpaRepository», що надає нам доступ до вже
реалізованих стандартних операцій у цьому інтерфейсі;
– Контролери – класи для обробки HTTP-запитів, саме тут розмічаються так
звані ендпоінти, звертаючись до яких ми можемо отримувати певні дані або
відправляти свої для їх подальшої обробки та/або запису на сервері;
– Request моделі – це класи, які використовують для визначення структури
даних які будуть передаватись від клієнта на сервер. Це сучасний та зручний
спосіб валідації вхідних даних за допомогою анотацій які надає Spring Boot;
– Сервіси – це класи, у яких реалізовується вся бізнес-логіка додатку. Потім
ця логіка може використовуватись, наприклад, у контролерах для того щоб
визначати як саме отримані дані чи дані що відправляються будуть
оброблюватись;
– Моделі та сутності – класи для представлення даних та їх відношення до
відповідної таблиці в базі даних. Надають можливість за допомогою
анотацій співвідносити також і окремі поля з колонками таблиці.
Тепер, коли ми маємо загальне розуміння про основні компоненти фреймворку 
Spring, перейдемо до більш детального розгляду реалізованої логіки інтернет-
магазину мобільної техніки.  
Запити до бази даних реалізовуються за допомогою створених репозиторіїв, які 
можуть використовувати передані параметри та підставляти їх у надісланий запит. 
Викликом надсилання запиту керують класи-контролери та сервіси, залежно від 
потреби. У програмі були реалізовані наступні репозиторії: 
- OrderRepository – для запитів про замовлення;
- ProductRepository – для запитів до короткої інформації про продукти;
- UserRepository – для запитів про користувача;
- SmartphoneRepository – для запитів про товари з деталями;
- OrderProductRepository – для запитів які товари відносяться до замовлення.
73 
ЧДТУ 242252.013 ПЗ 
Для того, щоб зробити розмітку кінцевих точок на сервері та обробити 
звернення до них, були також розроблені наступні контролери: 
- OrderController – розмітка для роботи з запитами про замовлення;
- ProductController – для роботи с запитами про товари;
- UserController – для обробки запитів на авторизацію та реєстрацію.
Сутності представляють об'єкти бази даних. Вони визначають структуру даних 
і взаємозв'язки між ними. У програмі є наступні сутності: 
- OrderEntity – представляє замовлення, включаючи інформацію про клієнта,
дату замовлення та статус;
- OrderProductEntity – представляє товари, що входять до замовлення,
включаючи кількість і ціну кожного товару;
- ProductEntity – представляє товар, що включає основну інформацію, таку як
назва, артикул, опис і ціна;
- SmartphoneEntity – представляє товар з деталями, смартфон з його
технічними характеристиками;
- UserEntity – представляє інформацію про обліковий запис.
Перелічувальні типи даних визначають набір значень, що представляють 
можливі стани або категорії, які використовуються в програмі. Вони спрощують код 
і підвищують його зрозумілість. 
- OrderStatus – перелік можливих статусів замовлення, таких як
"обробляється", "завершено" та "відмінено".
Моделі запитів (Request Model) використовуються для передачі даних між 
клієнтом і сервером, забезпечуючи структуру і валідацію даних. Вони спрощують 
обробку запитів у контролерах і сервісах. У програмі були реалізовані такі моделі: 
- OrderProductRequest – представляє запит на отримання товарів в замовленні;
- OrderRequest – представляє запит на створення нового замовлення,
включаючи інформацію про клієнта та список товарів;
- UpdateOrderRequest – представляє запит на оновлення існуючого
замовлення, включаючи новий статус або зміни в списку товарів;
74 
ЧДТУ 242252.013 ПЗ 
- UpdateSmartphoneRequest – представляє запит на оновлення інформації про
смартфон, включаючи технічні характеристики та ціну.
- UserRequest – представляє запит на реєстрацію або авторизацію
користувача, включаючи ім'я, email і пароль.
Сервіси обробляють бізнес-логіку програми, виконуючи операції над даними, 
що надходять від контролерів, та взаємодіють з репозиторіями для зберігання та 
отримання даних. Вони забезпечують виконання необхідних операцій відповідно до 
запитів. 
- OrderService – обробляє бізнес-логіку, пов’язану із замовленнями,
включаючи створення та оновлення замовлення.
- UserService – обробляє бізнес-логіку, пов’язану з користувачами,
включаючи реєстрацію та авторизацію.
Використання цих компонентів дозволило створити структурований та 
підтримуваний сервер для програмного комплексу, забезпечуючи ефективне 
управління даними та їх обробку. Кожен компонент має чітко визначену роль, що 
сприяє розподілу відповідальності і полегшує підтримку та розширення системи в 
майбутньому. Завдяки цьому підходу можна легко додавати нові функціональні 
можливості, оновлювати існуючі та забезпечувати високу якість і надійність роботи 
серверу. Це забезпечує гнучкість та масштабованість програмного комплексу, 
відповідаючи на потреби бізнесу та користувачів. 
Примітка: Програмна реалізація перелічених класів та/або модулів зображена у 
додатку Б. 
3.2 Тестування системи 
У розробці будь-якого програмного забезпечення, тестування системи є одним 
з найважливіших етапів. Метою цього процесу є виявлення та подальше виправлення 
помилок, забезпечення відповідності програмного продукту визначеним вимогам і 
забезпечення його надійності та стабільності в умовах реального використання. У 
цьому розділі будуть ретельно розглянуті різні підходи та методології тестування та 
представлені практичні рішення, а також результати проведеного тестування. 
75 
ЧДТУ 242252.013 ПЗ 
Тестування використовують для перевірки різних аспектів програмного 
комплексу, включаючи: 
– Перевірка функціональності – допомагає забезпечити правильність
виконання усіх функцій відповідно до специфікації та вимог замовника;
– Оцінка продуктивності – допомагає визначити, наскільки ефективно
система працює під різним навантаженням, швидкість відгуку, витрати
ресурсів;
– Перевірка безпеки – тестування системи на захищеність системи від
потенційних загроз та вразливостей.
Це лише кілька прикладів, на практиці тестування охоплює практично кожен 
існуючий аспект у розробці та супроводі програмного забезпечення. Об’єктом 
тестування у цьому проекті буде виступати розроблене API, користувацький 
інтерфейс реалізований на React та база даних PostgreSQL. 
Для того, щоб успішно протестувати розроблений додаток, ми будемо 
підходити до цього поступово. Таким чином, ми будемо визначати обсяг тестування 
для кожного методу тестування, стратегію за якою будем тестувати та визначимо 
перелік тестових випадків які необхідно провести щоб переконатись у правильній 
роботі відповідного функціоналу чи модулів. Після завершення кожного етапу, ми 
будемо аналізувати отримані результати, у випадку якщо тест пройдений не 
правильно, ми виправимо помилки та проведемо повторне тестування. 
Далі ми розглянемо декілька підходів до тестування розробленого інтернет-
магазину мобільної техніки. 
3.2.1 Модульне тестування 
Обсяг тестування 
Модульне тестування буде включати в себе перевірку функціональності та 
відображення елементів UI інтерфейсу, що стосуються авторизації та реєстрації 
користувача. Таким чином, ми перевіримо такі компоненти як:  
- LogoutModal – компонент, що відповідає за відображення модального вікна
для підтвердження виходу з облікового запису. У цьому компоненті ми
будемо перевіряти відображення компоненту при умові зміни відповідного
76 
ЧДТУ 242252.013 ПЗ 
стану у глобальному сховищі та перевіряти обробку натискань на кнопки 
які представлені у цьому компоненті; 
- AuthModalForm – компонент, який відповідає за модальну форму
авторизації користувача. В ньому ми будемо перевіряти обробку змін у
текстових полях, відображення компоненту при певних умовах, обробку
надсилання форми та відображення помилок у формі;
- RegModalForm – компонент, що відповідає за відображення модальної
форми для реєстрації нового користувача. Перевіряти будемо валідацію
введених користувачем даних, відображення відповідних помилок щодо
валідації та відправки форми, обробку змін у текстових полях.
Стратегія тестування 
У ході тестування ми послідовно будемо перевіряти базове відображення 
компонентів з усіма необхідними елементами, тестувати взаємодію з користувачем 
шляхом симуляції подій натискання кнопок та введення тексту, перевіряти 
збереження та оновлення стану компонентів після взаємодії з користувачем, 
тестувати відправку Redux подій при маніпуляціях з інтерактивними елементами 
інтерфейсу (такими як кнопки «Увійти», «Зареєструватись», «Так», «Ні» та інші), 
перевіряти валідацію форм на відповідність введених даних тим які очікуються веб-
сайтом для відправки на сервер. 
Тестові випадки 
Таблиця 3.1 
Тестовий випадок модульного тестування №1 
Тест-кейс № 1 
Опис Рендер компоненту AuthModalForm 
Передумови Redux store з відкритим authModal 
Кроки 1. Рендер компоненту AuthModalForm за допомогою render.
2. Перевірка наявності полів і кнопок.
Очікуваний - Поля "Логин" та "Пароль" присутні на екрані.
результат - Кнопка "Увійти" присутня на екрані.
77 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.1 
Фактичний - Поля "Логин" та "Пароль" присутні на екрані. 
результат - Кнопка "Увійти" присутня на екрані. 
Пройдено Так 
 
Таблиця 3.2 
Тестовий випадок модульного тестування №2 
Тест-кейс № 2 
Опис Обробка зміни текстових полів в AuthModalForm 
Передумови Redux store з відкритим authModal 
Кроки 1. Рендер компоненту AuthModalForm. 
2. Введення значення в поле "Логин". 
3. Введення значення в поле "Пароль". 
Очікуваний - Поле "Логин" містить введене значення  
результат - Поле "Пароль" містить введене значення 
Фактичний - Поле "Логин" містить введене значення  
результат - Поле "Пароль" містить введене значення 
Пройдено Так 
 
Таблиця 3.3 
Тестовий випадок модульного тестування №3 
Тест-кейс № 3 
Опис Обробка надсилання форми авторизації 
Передумови Redux store з відкритим authModal 
Кроки 1. Рендер компоненту AuthModalForm. 
2. Введення значень в поля "Логин" та "Пароль". 
3. Натискання на кнопку "Увійти". 
Очікуваний - Повернений результат записується викликом 
результат dispatch(setProfile()) 
- Модальне вікно з авторизацією закривається 
78 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.3 
еФактичний - Повернений результат записується викликом 
результат dispatch(setProfile()) 
- Модальне вікно з авторизацією закривається 
Пройдено Так 
 
Таблиця 3.4 
Тестовий випадок модульного тестування №4 
Тест-кейс № 4 
Опис Відображення помилки в AuthModalForm при неправильних 
даних 
Передумови Redux store з відкритим authModal 
Кроки 1. Рендер компоненту AuthModalForm. 
2. Введення неправильних значень в поля "Логин" та "Пароль". 
3. Натискання на кнопку "Увійти". 
Очікуваний - Відображення повідомлення "Аккаунт не знайдено! Перевірте 
результат логін та пароль.". 
Фактичний - Відображення повідомлення "Аккаунт не знайдено! Перевірте 
результат логін та пароль.". 
Пройдено Так 
 
Таблиця 3.5 
Тестовий випадок модульного тестування №5 
Тест-кейс № 5 
Опис Рендер компоненту LogoutModal 
Передумови Redux store з відкритим logoutModal 
Кроки 1. Рендер компоненту LogoutModal за допомогою render. 
Очікуваний - Відображення повідомлення "Ви впевнені що хочете вийти з 
результат облікового запису?». 
- Кнопки "Ні" та "Так" присутні на екрані. 
79 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.5 
Фактичний - Відображення повідомлення "Ви впевнені що хочете вийти з 
результат облікового запису?». 
- Кнопки "Ні" та "Так" присутні на екрані. 
Пройдено Так 
 
Таблиця 3.6 
Тестовий випадок модульного тестування №6 
Тест-кейс № 6 
Опис Відправка подій clearProfile та closeModal при натискані "Так" в 
LogoutModal 
Передумови Redux store з відкритим logoutModal 
Кроки 1. Рендер компоненту LogoutModal. 
2. Натискання на кнопку "Так". 
Очікуваний - Викликається подія clearProfile() 
результат - Модальне вікно LogoutModal закривається 
Фактичний - Викликається подія clearProfile() 
результат - Модальне вікно LogoutModal закривається 
Пройдено Так 
 
 
Таблиця 3.7 
Тестовий випадок модульного тестування №7 
Тест-кейс № 7 
Опис Відправка тільки події closeModal при натискані "Ні" в 
LogoutModal 
Передумови Redux store з відкритим logoutModal 
Кроки 1. Рендер компоненту LogoutModal. 
2. Натискання на кнопку "Ні". 
 
80 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.7 
Очікуваний - Модальне вікно LogoutModal закривається 
результат 
Фактичний - Модальне вікно LogoutModal закривається 
результат 
Пройдено Так 
 
Таблиця 3.8 
Тестовий випадок модульного тестування №8 
Тест-кейс № 8 
Опис Рендер компоненту RegModalForm 
Передумови Redux store з відкритим regModal 
Кроки 1. Рендер компоненту RegModalForm. 
2. Перевірка наявності усіх полів і кнопок. 
Очікуваний - Поля «Ім'я», «Прізвище», «E-mail адреса», «Пароль», «Пароль 
результат повторно» та кнопка «Зарєеструватись» пристуні на екрані  
Фактичний - Поля «Ім'я», «Прізвище», «E-mail адреса», «Пароль», «Пароль 
результат повторно» та кнопка «Зарєеструватись» пристуні на екрані 
Пройдено Так 
 
Таблиця 3.9 
Тестовий випадок модульного тестування №9 
Тест-кейс № 9 
Опис Обробка зміни текстових полів в RegModalForm 
Передумови Redux store з відкритим regModal 
Кроки 1. Рендер компоненту RegModalForm. 
2. Введення значень в поля «Ім'я», «Прізвище», «E-mail адреса», 
«Пароль», «Пароль повторно» 
 
 
81 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.9 
Очікуваний - Усі поля містять відповідні введені значення  
результат 
Фактичний - Усі поля містять відповідні введені значення 
результат 
Пройдено Так 
 
Таблиця 3.10 
Тестовий випадок модульного тестування №10 
Тест-кейс № 10 
Опис Обробка надсилання форми реєстрації 
Передумови Redux store з відкритим regModal 
Кроки 1. Рендер компоненту RegModalForm. 
2. Введення правильних значень в поля «Ім'я», «Прізвище», «E-
mail адреса», «Пароль», «Пароль повторно» 
3. Натискання на кнопку «Зареєструватись» 
Очікуваний - Дані відправлені 
результат - Модальна форма реєстрації закривається  
Фактичний - Дані відправлені 
результат - Модальна форма реєстрації закривається 
Пройдено Так 
 
Таблиця 3.11 
Тестовий випадок модульного тестування №11 
Тест-кейс № 11 
Опис Відображення повідомлення про помилку щодо невідповідность 
пароля у RegModalForm 
Передумови Redux store з відкритим regModal 
 
 
82 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.11 
Кроки 1. Рендер компоненту RegModalForm. 
2. Введення правильних значень в поля «Ім'я», «Прізвище», «E-
mail адреса», «Пароль» та «Пароль повторно» з різними 
значеннями 
3. Натискання на кнопку «Зареєструватись» 
Очікуваний - Відображення повідомлення «Паролі не співпадають!» 
результат 
Фактичний - Відображається повідомлення «Паролі не співпадають!» 
результат 
Пройдено Так 
 
Проведення тестування 
Тестувати компоненти будемо за допомогою таких інструментів як Jest та 
@testing-library/react, так як вони добре пристосовані для тестування компонентів 
React. Для кожного тестового випадку були розроблені відповідні автоматичні тести, 
після чого кожен модуль був послідовно протестований (рис.3.24, рис.3.25, рис.3.26). 
Примітка: З програмною реалізацією тестів можна ознайомитись у додатку Б. 
 
 
Рисунок 3.24 – Результати тестування модуля AuthModalForm 
83 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.25 – Результати тестування модуля LogoutModal 
Рисунок 3.26 – Результати тестування модуля RegModalForm 
Аналіз проведеного тестування 
У ході цього етапу тестування були протестовані UI елементи інтерфейсу що 
відповідають за авторизацію користувача, реєстрацію та вихід з облікового запису. 
Перед проведенням тестування був визначений обсяг тестування, стратегія та тестові 
випадки. У результаті проведеного тестування, усі визначені тести завершені 
успішно, що означає відповідність цих модулів очікуванням, тож цей етап тестування 
завершено. 
84 
ЧДТУ 242252.013 ПЗ 
3.2.2 Інтеграційне тестування 
Обсяг тестування 
 Для інтеграційного тестування було проведено тестування всіх доступних 
ендпоінтів API. Метою даного тестування є перевірка коректної взаємодії між 
різними модулями системи, а також відповідності результатів очікуваним значенням. 
Основні ендпоінти, які будуть тестуватись: 
- GET /api/prod – отримання списку товарів; 
- GET /api/prod/smartphones – отримання списку товарів з деталями; 
- GET /api/prod/smartphones?id={id} – отримання деталей товару по ID;  
- GET /api/prod/smartphones?search={name} – отримання списку продуктів за 
назвою чи частиною назви; 
- POST /api/auth/login – авторизація користувача; 
- POST /api/auth/reg – реєстрація користувача 
Стратегія тестування 
Для цього тестування була використана стратегія тестування Big Bang 
Integration Testing. В рамках цієї стратегії всі модулі були інтегровані одночасно, 
після чого було проведено тестування усієї системи як єдиного цілого. Перевагами 
цього тестування є можливість швидко отримати повну картину роботи системи, а 
також економія часу на індивідуальне тестування кожного модуля окремо. 
Тестові випадки 
Таблиця 3.12 
Тестовий випадок інтеграційного тестування №1 
Тест-кейс №1 1 
Опис Отримання списку товарів 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити GET-запит на «http://localhost:8082/api/prod» 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить список товарів. 
 
 
85 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.12 
Фактичний Статус відповіді серверу – 200; 
результат Тіло відповіді містить список товарів. 
Пройдено Так 
 
Таблиця 3.13 
Тестовий випадок інтеграційного тестування №2 
Тест-кейс №2 2 
Опис Отримання списку товарів з деталями 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити GET-запит на 
«http://localhost:8082/api/prod/smartphones» 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить список товарів з деталями. 
Фактичний Статус відповіді серверу – 200; 
результат Тіло відповіді містить список товарів з деталями. 
Пройдено Так 
 
Таблиця 3.14 
Тестовий випадок інтеграційного тестування №3 
Тест-кейс №3 3 
Опис Перевірка відправки запиту на реєстрацію 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити POST-запит на «http://localhost:8082/api/auth/reg» з 
тілом {"firstname": "Тест", "lastname": "Тестович", "email": 
"[email protected]", "password": "Test123#"} 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить підтвердження реєстрації. 
 
 
86 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.14 
Фактичний Статус відповіді серверу – 200; 
результат Тіло відповіді містить підтвердження реєстрації. 
Пройдено Так 
Таблиця 3.15 
Тестовий випадок інтеграційного тестування №4 
Тест-кейс № 4 
Опис Перевірка відправки запиту на авторизацію 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити POST-запит на «http://localhost:8082/api/auth/login» з
тілом {"email": "[email protected]", "password": "Test123#"} 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить підтвердження авторизації. 
Фактичний Статус відповіді серверу – 200; 
результат Тіло відповіді містить підтвердження авторизації. 
Пройдено Так 
Таблиця 3.16 
Тестовий випадок інтеграційного тестування №5 
Тест-кейс № 5 
Опис Отримання товару по його ID 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити GET-запит на
«http://localhost:8082/api/prod/smartphones?id={id}» 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить інформацію про товар з вказаним ID. 
Фактичний Статус відповіді серверу – 200; 
результат Тіло відповіді містить інформацію про товар з вказаним ID. 
Пройдено Так 
87 
ЧДТУ 242252.013 ПЗ 
Таблиця 3.17 
Тестовий випадок інтеграційного тестування №6 
Тест-кейс № 6 
Опис Отримання списку товарів по їх назві або частиною назви 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити GET-запит на
«http://localhost:8082/api/prod/smartphones?search={%name%}» 
Очікуваний Статус відповіді – 200; 
результат Тіло відповіді містить інформацію про товари з вказаною назвою 
або з назвою яка містись частину пошукового запиту. 
Фактичний Статус відповіді – 200; 
результат Тіло відповіді містить інформацію про товари з вказаною назвою 
або з назвою яка містись частину пошукового запиту. 
Пройдено Так 
Проведення тестування 
Для розробки тестів відповідно визначеним тестовим випадкам у таблицях, 
було використано такий інструмент для тестування як JUnit. Для кожного з тестових 
випадків було розроблено окремий автоматичний тест засобами які надає JUnit (рис. 
3.27, рис. 3.28). Дані про результати проведеного інтеграційного тестування 
зображені на рисунку 3.29. 
88 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.27 – Розроблені на JUnit автоматичні тести, частина 1 
Рисунок 3.28 – Розроблені на JUnit автоматичні тести, частина 2 
89 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.29 – Результати інтеграційного тестування 
  
Аналіз проведеного тестування 
 Як ми можемо бачити, усі тести були виконані успішно. Це означає, що в усіх 
визначених тестових випадках ми отримуємо результат який відповідає нашим 
очікуванням. Таким чином, можемо підсумувати що інтеграційне тестування за 
стратегією Big Bang закінчилось успішно та не вимагає виправлення помилок в 
зв’язку з їх відсутністю, тож повторного тестування проведено не буде. 
3.2.3 Системне тестування 
 Обсяг тестування 
 У системному тестуванні охоплюються всі компоненти програми після їх 
інтеграції, що дозволяє протестувати роботу всієї системі у цілому. Цей вид 
тестування забезпечує ретельну перевірку на відповідність системи відносно 
визначених функціональних та нефункціональних вимог. Метою такого тестування є 
виявлення дефектів, що можуть виникнути при взаємодії окремих модулів чи частин 
системи. Ми перевіримо взаємодію окремих частин системи, а також протестуємо 
продуктивність роботи програмного комплексу. Результати тестування допоможуть 
нам гарантувати, що система працює коректно при взаємодії між модулями та 
забезпечить якість  підсумкового продукту. Об’єктом тестування буде взаємодія між 
клієнтським додатком, серверною частиною та базою даних при оформленні 
замовлення та отримані списку товарів що розміщуються у каталозі товарів. 
90 
ЧДТУ 242252.013 ПЗ 
Стратегія тестування 
Для перевірки продуктивності запитів ми використаємо інструментарій для 
тестування Postman який надає нам можливість мануальної відправки запитів на 
кінцеві точки серверного API та отримувати в тому числі статистичну інформацію 
про запит, таку як розмір отриманих пакетів даних, швидкість отримання відповіді, 
тощо. Перевірка взаємодії між модулями буде відбуватись шляхом тестування модуля 
який відповідає реєстрацію користувача. Таким чином, ми зможемо перевірити що 
серверна частина отримує дані та записує їх до бази даних, а клієнтська частина 
успішно отримує відповідь. 
 Тестові випадки 
Таблиця 3.18 
Тестовий випадок системного тестування №1 
Тест-кейс № 1 
Опис Продуктивність запиту на отримання товару по його ID 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити GET-запит за допомогою Postman на 
«http://localhost:8082/api/prod/smartphones?id={id}» 
Очікуваний Статус відповіді – 200; 
результат Швидкість виконання запиту не перевищує 15ms 
Фактичний Статус відповіді серверу – 200; 
результат Швидкість виконання запиту – 6ms. 
Пройдено Так 
 
Таблиця 3.19 
Тестовий випадок системного тестування №2 
Тест-кейс № 2 
Опис Продуктивність запиту на отримання повного списку товарів 
Передумови API сервер повинен бути запущеним 
 
 
91 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.19 
Кроки 1. Відправити GET-запит за допомогою Postman на 
«http://localhost:8082/api/prod/smartphones 
Очікуваний Статус відповіді – 200; 
результат Швидкість виконання запиту не перевищує 45ms 
Фактичний Статус відповіді серверу – 200; 
результат Швидкість виконання запиту – 10ms. 
Пройдено Так 
 
Таблиця 3.20 
Тестовий випадок системного тестування №3 
Тест-кейс №3 3 
Опис Перевірка взаємодії серверу з базою даних на запит реєстрації 
відправлений з клієнтської частини за допомогою форми 
Передумови API сервер повинен бути запущеним 
Кроки 1. Відправити правильно заповнену форму реєстрації з веб-сайту 
Очікуваний - Реєстраційні дані успішно записані в базу даних; 
результат - Отримується відповідь у інтерфейсі про успішний запит 
Фактичний - Реєстраційні дані успішно записані в базу даних 
результат - Отримується відповідь у інтерфейсі про успішний запит 
Пройдено Так 
 
Проведення тестування 
За допомогою інструменту Postman були відправлені відповідні запити, що 
вказані у тестових випадках до серверу та зібрана інформація про швидкість 
повернення відповіді від серверу. Результати тестових випадків системного 
тестування №1 та №2 представлено на рис.3.30 та рис.3.31. 
 
 
Рисунок 3.30 – Результат тестового випадку системного тестування №1 
92 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.31 – Результат тестового випадку системного тестування №2 
 
Для тестового випадку системного тестування №3 ми заповнюємо форму 
реєстрації на сайті (рис.3.32) та відправляємо запит натискаючи кнопку 
«Підтвердити», після чого бачимо отримання відповіді від сервера про успішне 
формування замовлення (рис.3.33) та перевіряємо чи дійсно воно виконано успішно 
надсилаючи запит до бази даних та звіряємо з реєстраційними даними які були 
відправлені у формі (рис.3.34). 
 
Рисунок 3.32 – Заповнена реєстраційна форма тестовими даними 
 
 
Рисунок 3.33 – Обробка відповіді від серверу про успішне формування замовлення 
93 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.34 – Запит до бази даних для перевірки наявності тестового користувача 
 
Аналіз проведеного тестування 
Згідно результатів проведеного системного тестування, ми можемо підтвердити 
відповідність фактичної продуктивності відносно вимогам щодо продуктивності які 
були визначені до системи. Тестування взаємодії показало, що модулі співпрацюють 
правильним чином: запити до серверної частини від клієнтської доходять коректно, 
після чого отримані дані записуються в базу даних за допомогою відповідного 
функціоналу на сервері та у клієнтський додаток повертається відповідь з 
підтвердженням про виконану операцію. У підсумку, розроблений додаток пройшов 
визначене системне тестування. 
3.2.4 Приймальне тестування 
Обсяг тестування 
Приймальне тестування охоплює всі функціональні та нефункціональні вимоги 
до інтернет-магазину мобільної техніки, що були визначені у розділі формування 
вимог за допомогою діаграми прецедентів та у текстовому форматі. Мета цього 
тестування полягає у тому, щоб переконатись у відповідності розробленого продукту 
всім визначеним на етапі проектування бізнес-вимогам.  
Стратегія тестування 
На першому етапі ми детально проаналізуємо всі бізнес-вимоги до готового 
продукту та визначимо перелік вимог, що будуть перевірятись під час цього 
тестування. Після того, як ми визначили перелік вимог, ми розробимо детальний чек-
лист та послідовно виконаємо усі тестові випадки. У кінці тестування проаналізуємо 
результати та підіб’ємо підсумок. 
94 
ЧДТУ 242252.013 ПЗ 
Проведення тестування 
Для початку, розглянемо вимоги, які були визначені на етапі проектування та 
які слід перевірити:  
1. Для клієнта: 
– Перегляд каталогу товарів; 
– Пошук товарів за назвою; 
– Додавання та видалення товарів з кошику; 
– Реєстрація облікового запису; 
– Авторизація у обліковий запис; 
– Оформлення замовлення. 
2. Для адміністратора: 
– Керування товарами; 
– Керування статусом замовлень; 
Опираючись на цей список розробимо детальні тестові випадки та протестуємо 
представлені у них сценарії: 
Таблиця 3.21 
Тестовий випадок приймального тестування №1 
Тест-кейс № 1 
Опис Перегляд каталогу товарів 
Кроки 1. Відкрити каталог товарів на веб-сайті, натиснувши «Каталог 
товарів» у навігаційному меню 
Очікуваний Відображення повного списку товарів 
результат 
Пройдено Так 
 
Таблиця 3.22 
Тестовий випадок приймального тестування №2 
Тест-кейс № 2 
Опис Пошук товарів за назвою 
 
95 
ЧДТУ 242252.013 ПЗ 
Продовж. табл. 3.22 
Кроки 1. Ввести назву або частину назви товару в пошуковий рядок та 
натиснути кнопку пошуку або Enter на клавіатурі. 
Очікуваний Відображення результатів пошуку, які включають товар(-и) з 
результат введеною назвою або частиною від назви. 
Пройдено Так 
 
Таблиця 3.23 
Тестовий випадок приймального тестування №3 
Тест-кейс № 3 
Опис Додавання та видалення товарів з кошику 
Кроки 1. Додати будь-який товар у кошик натиснувши кнопку «Купити» 
на карточці товару або на сторінці товару 
2. Навести на корзину та у спадному меню зі списком товарів у 
корзині натиснути на кнопку видалення товару 
Очікуваний - Після натискання кнопки «Купити» товар додається в кошик 
результат - Натиснувши кнопку видалення товар видаляється з кошику 
Пройдено Так 
 
Таблиця 3.24 
Тестовий випадок приймального тестування №4 
Тест-кейс № 4 
Опис Реєстрація облікового запису 
Кроки 1. Натиснути іконку профілю в шапці сайту 
2. Натиснути «Немає аккаунту?» 
3. Заповнити форму реєстрації та натиснути «Зареєструватись» 
Очікуваний - Створення облікового запису та повідомлення про успіх 
результат 
Пройдено Так 
 
 
96 
ЧДТУ 242252.013 ПЗ 
Таблиця 3.25 
Тестовий випадок приймального тестування №5 
Тест-кейс № 5 
Опис Авторизація у обліковий запис 
Кроки 1. Натиснути іконку профілю в шапці сайту 
2. Заповнити форму авторизації та натиснути «Увійти» 
Очікуваний - Вхід у аккаунт, відображення ім'я користувача на місці іконки 
результат профілю 
Пройдено Так 
 
Таблиця 3.26 
Тестовий випадок приймального тестування №6 
Тест-кейс № 6 
Опис Оформлення замовлення 
Кроки 1. Перейти на сторінку оформлення замовлення натиснувши 
«Перейти до оформлення» при додаванні товару у кошик або 
через кнопку «Оформити замовлення» у кошику 
2. Заповнити форму оформлення замовлення та натиснути 
«Підтвердити» 
Очікуваний - Замовлення оформлене, користувача повідомлено про успіх 
результат 
Пройдено Так 
 
Таблиця 3.27 
Тестовий випадок приймального тестування №7 
Тест-кейс № 7 
Опис Керування товарами: додавати або редагувати товари 
Кроки 1. Відкрити панель адміністрування 
2. Перейти до розділу товарів 
3. Виконати редагування будь якого товару 
4. Додати новий товар 
97 
ЧДТУ 242252.013 ПЗ 
 
Продовж. табл. 3.27 
Очікуваний - Після редагування дані у товара змінились та оновлені дані 
результат відображаються на сторінці цього товару та загальному каталозі 
- Новий товар відображається у загальному каталозі 
Пройдено Так 
 
Таблиця 3.28 
Тестовий випадок приймального тестування №8 
Тест-кейс № 8 
Опис Керування статусом замовлення 
Кроки 1. Відкрити панель адміністрування 
2. Перейти до розділу замовлень 
3. Виконати редагування статусу будь якого замовлення 
Очікуваний - Після редагування статус замовлення змінився 
результат 
Пройдено Так 
 
Аналіз проведеного тестування 
Проаналізувавши бізнес-вимоги, які були визначені на етапі проектування, було 
складено перелік тестових випадків необхідних для перевірки на відповідність 
вимогам. Відтворивши усі сценарії, ми переконались у тому що усі визначені вимоги 
задоволені і проходять тестування. Приймальне тестування можна рахувати 
успішним, продукт готовий до видачі замовнику.  
3.3 Приклади впровадженого програмного комплексу 
При переході на веб-сайт, відкривається головна сторінка сайту (рис.3.35), на 
якій зображений динамічний банер що гортає товари запропоновані інтернет-
магазином та списки з відібраними товарами. Для навігації по існуючим сторінкам 
98 
ЧДТУ 242252.013 ПЗ 
на сайті, у верхній частині веб-сайту знаходиться шапка сайту (рис.3.36) яка 
складається з: 
- навігаційного меню з основними сторінками веб-сайту; 
- профілю користувача; 
- кошику товарів; 
- поля для пошуку товарів. 
 
 
Рисунок 3.35 – Головна сторінка сайту 
 
 
Рисунок 3.36 – Шапка сайту 
 
99 
ЧДТУ 242252.013 ПЗ 
Для того, щоб зареєструватись або увійти у обліковий запис, потрібно 
натиснути на іконку профілю у правій частині шапки сайту, після чого відкриється 
відповідне модальне вікно авторизації (рис.3.37). 
 
Рисунок 3.37 – Модальне вікно авторизації 
 
 Якщо обліковий запис ще не створений, потрібно натиснути на кнопку «Немає 
аккаунту?», що знаходиться біля кнопки входу, після чого модальне вікно зміниться 
на вікно реєстрації (рис.3.38), де потрібно заповнити форму реєстрації відповідно 
встановленому формату та натиснути на кнопку «Зареєструватись». Форма реєстрації 
включає такі поля, як ім'я, прізвище, електронна пошта, номер мобільного телефону 
пароль та підтвердження пароля. Всі поля є обов'язковими для заповнення, щоб 
забезпечити безпеку та унікальність облікового запису. Пароль повинен відповідати 
встановленим вимогам безпеки, таким як мінімальна довжина, наявність великих та 
малих літер, хоча б однієї цифри та як мінімум одного спеціального символу. 
100 
ЧДТУ 242252.013 ПЗ 
  
Рисунок 3.38 – Форма реєстрації з прикладом заповнення 
Після створення аккаунту, потрібно знову натиснути на іконку профілю і у 
відкритій формі авторизації (рис.3.39) заповнити її даними які вказувались при 
реєстрації. 
 
 
Рисунок 3.39 – Форма авторизації з прикладом заповнення 
 
 Якщо дані введені правильно, вікно авторизації буде закрито та замість іконки 
профілю у правій частині шапки сайту відобразиться ім’я користувача яке було 
вказано при авторизації. Для виходу з аккаунту потрібно навести курсор мишки на 
101 
ЧДТУ 242252.013 ПЗ 
ім’я користувача та у спадному меню (рис.3.40) натиснути «Вийти», після чого 
відкриється модальне вікно підтвердження виходу з аккаунту (рис.3.41), де потрібно 
підтвердити свій намір виходу з облікового запису. 
Рисунок 3.40 – Відображення ім’я користувача та спадне меню при наведені курсору 
Рисунок 3.41 – Модельне вікно підтвердження виходу з облікового запису 
102 
ЧДТУ 242252.013 ПЗ 
Для пошуку товарів можна скористатись пошуковим полем (рис.3.42) у шапці 
сайту, ввівши свій пошуковий запит та натиснувши Enter на клавіатурі або іконку 
лупи в правій частині пошукового поля. 
Рисунок 3.42 – Пошукове поле 
Після обробки запиту, відкриється сторінка з каталогом товару (рис.3.43) де 
будуть представлені результати пошуку. Пошук відбувається по вмісту у назві товару 
ключового слова. 
Рисунок 3.43 – Каталог товарів з результатами пошуку 
Товари, представлені в каталозі, можна відфільтрувати за допомогою 
списку фільтрів (рис.3.44), що знаходяться у лівій частині каталогу. Для фільтрації 
103 
ЧДТУ 242252.013 ПЗ 
можна вибрати декілька параметрів, таким чином надаючи користувачам можливість 
швидко знайти потрібний товар. 
Рисунок 3.44 – Фільтри товарів доступні для користувача 
Щоб перейти на сторінку товару для ознайомлення з більш детальною 
інформацією про цей товар, потрібно в карточці товару (рис.3.45) натиснути на його 
назву або зображення, після чого користувача буде направлено на сторінку з 
відповідним товаром (рис.3.46), де розташований детальний опис товару та таблиця з 
його специфікацією (рис.3.47). 
104 
ЧДТУ 242252.013 ПЗ 
Рисунок 3.45 – Карточка товару 
Рисунок 3.46 – Сторінка товару 
105 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.47 – Детальний опис товару та таблиця специфікацій 
 
Коли користувач визначився з покупкою, для додавання товару у кошик 
потрібно натиснути кнопку «Купити» на сторінці товару або у карточці товару, після 
чого користувач буде повідомлений про додавання товару у кошик модальним вікном 
(рис.3.48), де буде запропоновано обрати: продовжити покупки чи перейти до 
оформлення замовлення. Також у цьому модальному вікні користувач може видалити 
позиції з товаром та змінити кількість товару для замовлення за допомогою 
інтерактивного лічильника. Якщо користувач обрав «Продовжити покупки», товари, 
які додані до кошика він може переглянути якщо наведе курсор мишки на іконку 
кошику (рис.3.49) яка розташована у правому верхньому куті, в шапці сайту. Іконка 
кошика завжди знаходиться у видимій частині екрану, що забезпечує швидкий доступ 
до кошика з будь-якої сторінки сайту. Наведення курсора на іконку кошика відкриває 
невелике спливаюче вікно, де відображається перелік доданих товарів, їх кількість та 
загальна вартість замовлення. 
106 
ЧДТУ 242252.013 ПЗ 
 
 
Рисунок 3.48 – Модальне вікно при додаванні товару у кошик 
 
 
Рисунок 3.49 – Кошик товарів 
  
 Перейти до сторінки оформлення замовлення (рис.3.50) користувач може 
натиснувши кнопку «Оформити замовлення» в модальному вікні при додаванні 
товару у кошик або спадному меню при наведені курсору мишки на іконку кошику 
яка знаходиться у шапці сайту.  
107 
ЧДТУ 242252.013 ПЗ 
 
Рисунок 3.50 – Сторінка оформлення замовлення 
 
На сторінці замовлення користувач також може керувати поточним кошиком, 
видаляючи з нього товари або редагувати кількість одиниць замовляємого товару. 
Для оформлення замовлення користувачу потрібно заповнити відповідну форму 
(рис.3.51) та натиснути кнопку «Підтвердити» яка знаходиться у кінці форми. 
 
 
Рисунок 3.51 – Приклад заповненої форми оформлення замовлення 
 
Після того, як користувач заповнив усі необхідні для замовлення поля, такі як: 
ім’я одержувача, прізвище одержувача, Email, номер телефону, спосіб доставки, 
108 
ЧДТУ 242252.013 ПЗ 
спосіб оплати та адреса доставки і натиснув «Підтвердити», користувач отримає 
повідомлення про успішне оформлення замовлення (рис.3.52). 
 
 
Рисунок 3.52 – Повідомлення про успішне замовлення 
 
Для звернень та пропозицій користувач може звернутись за контактами, які 
розміщені на сторінці «Контакти» (рис.3.53), на яку можна потрапити натиснувши 
відповідний пункт в навігаційному меню яке розташоване в шапці сайту. 
 
 
Рисунок 3.53 – Сторінка «Контакти» 
109 
ЧДТУ 242252.013 ПЗ 
Висновки до третього розділу 
Під час виконання робіт у третьому розділі, було обґрунтовано вибір 
програмних та апаратних засобів для розробки інтернет-магазину мобільної техніки 
необхідністю забезпечення продуктивності, стабільності та безпеки системи. Я 
розглянув переваги обраних технологій та підтвердив їх користь у проекті. Таким 
чином, було визначено що використання стеку технологій Java Spring, React/Redux, 
PostgreSQL є доцільним для виконання поставлених цілей по розробці інтернет-
магазину мобільної техніки. 
Для того, щоб мати чітке уявлення про архітектуру розроблюваного 
програмного комплексу, були спроектовані структурна та функціональна схеми. За 
допомогою цих схем я визначив основні модулі, їх підсистеми та способи взаємодії 
між ними. Функціональна схема також допомогла визначити основний функціонал 
системи, послідовність виконання та взаємозв’язки між функціями.  
При розробці інтерфейсу інтернет-магазину мобільної техніки акцентував увагу  
на сучасні технології та зручність використання для користувача. Для відповідності 
бізнес-цілям інтернет-магазину, були розроблені елементи дизайну для концентрації 
користувача на акційних та запропонованих адміністратором товарах, такі як 
динамічний банер, списки пропозицій, тощо. Проаналізувавши розроблений 
інтерфейс та зіставити його з результатами аналізу аналогічних продуктів, можна 
сказати що він відповідає сучасним тенденціям. 
У ході тестування проекту, шляхом виконання автоматичних та мануальних 
тестів по підготованим тестовим випадкам, була підтверджена відповідність 
розробленого програмного комплексу усім визначеним бізнес-вимогам, 
функціональним та нефункціональним вимогам. Під час тестування були 
протестовані як окремі модулі, зокрема у модульному тестуванні, так і система у 
цілому.  
110 
ЧДТУ 242252.013 ПЗ 
ВИСНОВКИ 
У результаті виконаної роботи був розроблений повністю функціональний 
програмний комплекс інтернет-магазину мобільної техніки. Етап аналізу предметної 
області допоміг визначити початкові дані для початку проекту, такі як визначення 
технологій, які використовуються для розробки сучасних інтернет-магазинів, та 
перелік мінімального функціоналу, який необхідно реалізувати. Ці дані допомогли 
поставити завдання на розробку та детально вивчити предметну область. 
Моделювання предметної області забезпечило чітку структуру та значно 
покращило процес розробки. Завдяки цьому етапу вдалося детально визначити всі 
сутності та їх взаємозв'язки, що дозволило уникнути багатьох потенційних проблем 
на початкових етапах розробки. Це моделювання допомогло зрозуміти ключові 
вимоги та особливості бізнес-логіки інтернет-магазину мобільної техніки, що в свою 
чергу забезпечило правильне проектування бази даних та архітектури додатку. 
Розроблена клієнт-серверна архітектура, яка включає клієнтський додаток у 
вигляді веб-сайту, створеного на основі бібліотеки React з використанням Redux для 
управління станами, та серверний додаток, реалізований за допомогою Java Spring, 
показала свою ефективність та відповідність поставленим вимогам на етапі 
тестування. Вибір PostgreSQL для зберігання даних забезпечив цілісність та 
узгодженість даних завдяки можливостям нормалізації. 
Загалом, виконана робота забезпечила створення надійного та масштабованого 
програмного комплексу, який задовольняє всі вимоги сучасного інтернет-магазину 
мобільної техніки.  
111 
ЧДТУ 242252.013 ПЗ 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
1 Java Spring [Документація]. - Точка доступу: URL: https://spring.io/web-applications.
- Java Spring: Web Applications
2 React [Документація]. - Точка доступу: URL: https://react.dev/learn. - Get Startting
React. 
3 Redux [Документація]. - Точка доступу: URL: https://redux.js.org /tutorials/essentials/
part-1-overview-concepts. - Redux Overview Concepts 
4 PostgreSQL [Документація]. - Точка доступу: URL: https://www.postgresql.org/docs/ -
Postgresql Docs.
5 Spacy.io [Електронний ресурс]. - Точка доступу: URL: spacy.io/ - Spacy.io.
6 React Router [Документація]. - Точка доступу: URL: https://reactrouter.com
/en/main/start/tutorial - React Router: Home v6.21.0. 
7 Діаграми UML [Електронний ресурс]. - Точка доступу: URL: https://
evergreens.com.ua/ua/articles/uml-diagrams.html - Побудова UML діаграм. 
8 Веб-проект стек Java Spring + React [Електронний ресурс]. - Точка доступу: URL:
https://habr.com/ru/articles/422985/ - BE - Java Spring, FE - React Redux. 
9 Формулювання вимог [Електронний ресурс]. - Точка доступу: URL: https://
www.researchgate.net/publication/328142794_Osoblivosti_formuluvanna_vimog_do_pro
gramnogo_zabezpecenna - Особливості формулювання вимог до програмного 
забезпечення. 
10 localStorage & React hooks [Електронний ресурс]. - Точка доступу: URL: https://
www.freecodecamp.org/ukrainian/news/yak-vykorystovuvaty-localstorage-z-khukamy-
react-dlya-vstanovlennya-ta-otrymannya-elementiv/ - React hooks. 
11 Axios [Електронний ресурс]. - Точка доступу: URL: https://axios-http.com /ru/docs/
intro - What is Axios. 
12 Електронна коммерція  [Електронний ресурс]. - Точка доступу: URL: business-
inform-2019-1_0-pages-139_144.pdf. – Сутність електронної торгівлі у світовій 
економіці 
13 Архітектура ПЗ [Електронний ресурс]. - Точка доступу: URL: https://
wezom.com.ua/ua/blog/arhitektura-programmnogo-obespecheniya . – Архітектура ПЗ 
112 
ЧДТУ 242252.013 ПЗ 
14 IntelliJ IDEA [Документація]. - Точка доступу: URL: https://www.jetbrains.com/ru-
ru/idea/resources/. – Intellij IDEA база знань 
15 GitHub [Документація]. - Точка доступу: URL: https://docs.github.com/ru/get-
started/using-git. – Документація по GitHub 
16 GitLab [Документація]. - Точка доступу: URL: https://docs.gitlab.com/. – GitLab 
Documentation 
17 JUnit [Документація]. - Точка доступу: URL: https://junit.org/junit5/docs/current/
user-guide/. – Junit 5 User Guide 
18 Visual Studio Code [Документація]. - Точка доступу: URL: https://
code.visualstudio.com/docs. – Documentation for Visual Studio Code 
19 RESTful API [Електронний ресурс]. - Точка https:// доступу: URL: 
aws.amazon.com/what-is/restful-api/. – What is RESTful API 
20 UML діаграми [Електронний ресурс]. - Точка доступу: URL: https://foxminded.ua/
uml-diagramy/. – Для чого потрібні UML діаграми 
21Endpoint [Електроний ресурс]. - Точка доступу: URL: https://www.microsoft.com/
uk-ua/security/business/security-101/what-is-an-endpoint. – What is an endpoint 
22 Java Spring and PostgreSQL [Електронний ресурс]. - Точка доступу: URL:
https://coderlessons.com/articles/java/spring-boot-i-integratsiia-spring-dannykh-jpa. – 
Spring Boot та інтеграція Spring даних JPA 
23 Spring Security [Документація]. - Точка доступу: URL: https://docs.spring.io/spring-
security/reference/servlet/getting-started.html. – Hello Spring Security 
24 MySQL [Документація]. - Точка доступу: URL: https://dev.mysql.com/doc/. –
MySQL Documentation 
25 MongoDB [Документація]. - Точка доступу: URL: https://www.mongodb.com /cloud/
atlas/register. – MongoDB Atlas 
26 Firebase Realtime Database [Документація]. - Точка доступу: URL: https://
firebase.google.com/docs/database/flutter/start. – Get Started with Realtime 
Database 
27  XSS and SQL Injections [Електронний ресурс]. - Точка доступу: URL: https://
portswigger.net/web-security/cross-site-scripting. – What is cross-site scripting 
113 
ЧДТУ 242252.013 ПЗ 
28 Google Analytics [Документація]. - Точка доступу: URL: https://support.google.com/
analytics/?hl=uk#topic=14090456. – Google Analytics Довідка 
29 SSL-шифрування [Електронний ресурс]. - https:// Точка доступу: URL: 
hostiq.ua/ukr/info/what-is-ssl/. – What is SSL 
30 React Redux [Документація]. - Точка доступу: URL: https://react-redux.js.org/. –
React Redux Get Started 
31 Моделювання предметної області [Електронний ресурс]. - Точка доступу: URL: 
https://nubip.edu.ua/sites/default/files/u286/pi_rp121_modelyuvannya_ta_analiz_predmet 
noyi_oblasti.pdf. – Моделювання та аналіз предметної області 
32 Компоненти  UML діаграмм [Електронний ресурс]. - Точка доступу: URL: https://
docs.kde.org/trunk5/uk/umbrello/umbrello/uml-elements.html. – Елементи UML 
114
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
