ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/9202| Title: | Розробка WEB-сайту для інтернет магазину електроніки |
| Authors: | Скуцький, Артем Борисович Величко, Дмитро Олексійович |
| Keywords: | Web-сайт;програмне забезпечення;тестування;інтерфейс;інтернет магазин;Web site;software;testing;interface;online store |
| Issue Date: | 17-Jun-2024 |
| Abstract: | АНОТАЦІЯ
Величко Д.О., кваліфікаційна робота бакалавра на тему: “Розробка WEB-сайту для інтернет магазину електроніки”. Напрям підготовки 121 “Інженерія програмного забезпечення”, ЧДТУ, 2024.
Метою виконання кваліфікаційної роботи бакалавра є створення ефективного web-сайту інтернет магазину електроніки для зручного перегляду та замовлення товарів для користувачів, а також управління товарами, замовленнями для адміністратора.
Головні завдання при проектуванні інформаційної системи включають аналіз предметної області, розробку логічної структури системи, проектування інтерфейсу користувача з використанням сучасних технологій, створення бази даних, проведення модульного, інтеграційного, системного та приймального тестування.
Об'єктом роботи є процеси купівлі та адміністрування інтернет магазину.
Предметом розробки є програмне забезпечення для інтернет магазину електроніки.
В результаті вирішено наступні поставлені задачі: аналіз існуючих методів та засобів створення інтернет магазину електроніки, розробка комплексного програмного забезпечення, яке забезпечує ефективну працездатність інтернет магазину електроніки, тестування та впровадження розробленої системи.
Обсяг роботи – 97 сторінок, вона містить 3 розділи, 47 ілюстрації, 11 джерел в переліку посилань, 4 додатки. ABSTRACT Velychko D.O., bachelor's qualification thesis on the topic: "Development of a WEB site for an online electronics store." Field of training 121 "Software engineering", ChSTU, 2024. The purpose of the bachelor's qualification work is to create an effective website of an online electronics store for convenient viewing and ordering of goods for users, as well as management of goods and orders for the administrator. The main tasks in the design of an information system include the analysis of the subject area, the development of the logical structure of the system, the design of the user interface using modern technologies, the creation of a database, and the conduct of modular, integration, system and acceptance testing. The object of the work is the processes of purchase and administration of the online store. The subject of development is software for an online electronics store. As a result, the following tasks were solved: analysis of existing methods and means of creating an online electronics store, development of complex software that ensures the efficient operation of an online electronics store, testing and implementation of the developed system. The volume of the work is 97 pages, it contains 3 chapters, 47 illustrations, 11 sources in the list of references, 4 appendices. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9202 |
| Appears in Collections: | 121 Інженерія програмного забезпечення (Інженерія програмного забезпечення) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Кваліфікаційна робота бакалавра Величко Дмитро Олексійович.pdf Restricted Access | 7.99 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи
бакалавра
на тему: Розробка WEB-сайту для інтернет магазину електроніки
Виконав: студент 4 курсу, групи ПЗС-2144
спеціальності
121 «Інженерія програмного забезпечення»
(шифр і назва напряму підготовки)
Студент Величко Д.О.
(прізвище та ініціали)
Керівник Скуцький А.Б.
(прізвище та ініціали)
Рецензент Цибровський Ц.В.
(прізвище та ініціали)
Черкаси 2024
Черкаський державний технологічний університет
повне найменування вищого навчального закладу
Факультет інформаційних технологій і систем
Кафедра програмного забезпечення автоматизованих систем
Освітній рівень бакалавр
Спеціальність 121 «Інженерія програмного забезпечення»
Освітня програма Інженерія програмного забезпечення
ЗАТВЕРДЖУЮ
Зав. кафедри ПЗАС, професор
____________________ С. Голуб
«___» _______________ 2024 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ
Величко Дмитро Олексійович
(прізвище, ім’я, по батькові)
1. Тему проекту (роботи) Розробка WEB-сайту для інтернет магазину електроніки
Керівник проекту (роботи) Скуцький Артем Борисович, асистент
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання)
Затверджені наказом Черкаського державного технологічного університету від « 26 » лютого 2024
року №60/04
2. Строк подання студентом проекту (роботи) 05.06.2024р____________________________
3. Вхідні дані до проекту (роботи) завдання до розробки, аналоги, рекомендації керівника роботи.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно розробити)
Перелік умовних позначень; Вступ; Наявні методи та засоби розв’язання поставлених завдань;
Впровадження результатів досліджень у практику проектування програмного забезпечення
інформаційних систем; Розробка та тестування програмного забезпечення; Висновки; Список
використаних джерел; Додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт проекту);
Слайд 1; Слайд 2; Слайд 3; Слайд 4; Слайд 5; Слайд 6; Слайд 7; Слайд 8; Слайд 9; Слайд 10; Слайд
11; Слайд 12; Слайд 13; Слайд 14; Слайд 15; Слайд 16; Слайд 17;
6. Консультанти розділів роботи
Прізвище, ініціали та посади Підпис, дата
Розділ
консультанта Завдання видав Завдання прийняв
1
2
3
7. Дата видачі завдання 02 грудня 2023 р.
КАЛЕНДАРНИЙ ПЛАН
№ Строк виконання етапів
Назва етапів випускної роботи Примітки
п/п кваліфікаційної роботи
1 Постановка задачі 05.12.2023 виконано
2 Підготовка завдання 13.12.2023 виконано
3 Погодження завдання 16.12.2023 виконано
4 Затвердження завдання 19.02.2024 виконано
Основна стадія
1 Підбір матеріалів 27.02.2024 виконано
2 Аналіз шляхів вирішення поставленої задачі 04.02.2024 виконано
3 Розрахунок основних параметрів роботи 10.03.2024 виконано
4 Вибір кінцевого варіанту проектного рішення 17.03.2024 виконано
5 Оформлення первісної редакції роботи 25.03.2024 виконано
Заключна стадія
1 Узгодження прийнятих проектних рішень з 31.04.2024 виконано
керівником
2 Оформлення пояснювальної записки роботи в 13.05.2024 виконано
кінцевій редакції
3 Попередній захист роботи 15.05.2024 виконано
4 Затвердження роботи 27.05.2024 виконано
5 Рецензування роботи 30.06.2024 виконано
6 Захист роботи 05.06.2024
Студент _____________________ Величко Д.О.
(підпис) (прізвище та ініціали)
Керівник роботи _____________________ Скуцький А.Б.
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Величко Д.О., кваліфікаційна робота бакалавра на тему: “Розробка
WEB-сайту для інтернет магазину електроніки”. Напрям підготовки 121
“Інженерія програмного забезпечення”, ЧДТУ, 2024.
Метою виконання кваліфікаційної роботи бакалавра є створення
ефективного web-сайту інтернет магазину електроніки для зручного
перегляду та замовлення товарів для користувачів, а також управління
товарами, замовленнями для адміністратора.
Головні завдання при проектуванні інформаційної системи включають
аналіз предметної області, розробку логічної структури системи,
проектування інтерфейсу користувача з використанням сучасних технологій,
створення бази даних, проведення модульного, інтеграційного, системного та
приймального тестування.
Об'єктом роботи є процеси купівлі та адміністрування інтернет
магазину.
Предметом розробки є програмне забезпечення для інтернет магазину
електроніки.
В результаті вирішено наступні поставлені задачі: аналіз існуючих
методів та засобів створення інтернет магазину електроніки, розробка
комплексного програмного забезпечення, яке забезпечує ефективну
працездатність інтернет магазину електроніки, тестування та впровадження
розробленої системи.
Обсяг роботи – 97 сторінок, вона містить 3 розділи, 47 ілюстрації, 11
джерел в переліку посилань, 4 додатки.
Ключові слова: Web-сайт, програмне забезпечення, тестування,
інтерфейс, інтернет магазин.
ABSTRACT
Velychko D.O., bachelor's qualification thesis on the topic: "Development of a
WEB site for an online electronics store." Field of training 121 "Software
engineering", ChSTU, 2024.
The purpose of the bachelor's qualification work is to create an effective
website of an online electronics store for convenient viewing and ordering of goods
for users, as well as management of goods and orders for the administrator.
The main tasks in the design of an information system include the analysis of
the subject area, the development of the logical structure of the system, the design of
the user interface using modern technologies, the creation of a database, and the
conduct of modular, integration, system and acceptance testing.
The object of the work is the processes of purchase and administration of the
online store.
The subject of development is software for an online electronics store.
As a result, the following tasks were solved: analysis of existing methods and
means of creating an online electronics store, development of complex software that
ensures the efficient operation of an online electronics store, testing and
implementation of the developed system.
The volume of the work is 97 pages, it contains 3 chapters, 47 illustrations, 11
sources in the list of references, 4 appendices.
Keywords: Web site, software, testing, interface, online store.
ЧДТУ 242235.002 ПЗ
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ ...................................................................... 5
ВСТУП ........................................................................................................................ 6
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ ПОСТАВЛЕНИХ
ЗАВДАНЬ . .................................................................................................................. 8
1.1 Аналіз наукової та технічної інформації....................................................8
1.1.1 Огляд актуальних проблем .................................................................... 8
1.1.2 Аналіз методів та рішень . ...................................................................... 9
1.2 Аналіз існуючих аналогів...........................................................................11
1.2.1 Порівняльний огляд програмного забезпечення ................................ 12
1.2.2 Ідентифікація прогалин та можливостей ............................................. 16
1.3 Постановка задачі........................................................................................18
ВИСНОВОКИ ДО ПЕРШОГО РОЗДІЛУ ...................................................... 19
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У ПРАКТИКУ
ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ ІНФОРМАЦІЙНИХ
СИСТЕМ .................................................................................................................... 21
2.1 Моделювання предметної області ............................................................. 21
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області .......................................................................... 21
2.1.2 Елементи моделювання предметної області ....................................... 24
2.1.3 Робоча область моделювання ............................................................... 27
2.2 Формування та аналіз вимог ...................................................................... 28
2.2.1 Формування вимог до програмного забезпечення. Первинні і
детальні вимоги. Вимоги замовника і розробника. Функціональні та
нефункціональні вимоги. ................................................................................ 28
2.2.2 Формування вимог за допомогою діаграми прецедентів .................. 31
2.3 Проектування логічної структури програмного комплексу ................... 32
2.3.1 Діаграма класів ....................................................................................... 32
2.3.2 Діаграма пакетів ..................................................................................... 37
2.4 Архітектурне проектування ....................................................................... 39
2.4.1 Діаграма компонентів ............................................................................ 40
ЧДТУ 242235.002 ПЗ
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання. ..................................................................................................... 43
2.5 Моделювання поведінки системи ............................................................. 44
2.5.1 Діаграма діяльності ................................................................................ 45
2.5.2 Діаграма послідовності .......................................................................... 47
2.5.3 Діаграма комунікації .............................................................................. 49
2.5.4 Діаграма скінченного автомату ............................................................ 50
ВИСНОВОКИ ДО ДРУГОГО РОЗДІЛУ ........................................................ 54
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
..................................................................................................................................... 55
3.1 Розробка програмного комплексу ............................................................. 55
3.1.1 Обґрунтування вибору засобів реалізації ............................................ 55
3.1.2 Опис структурної схеми ........................................................................ 61
3.1.3 Опис логічної схеми системи ................................................................ 62
3.1.4 Розробка бази даних ............................................................................... 64
3.1.5 Розробка інтерфейсу користувача ........................................................ 70
3.1.6 Опис розробки програмних компонентів ............................................ 75
3.2 Тестування системи.....................................................................................79
3.2.1 Модульне тестування ............................................................................. 79
3.2.2 Інтеграційне тестування ........................................................................ 82
3.2.3 Системне тестування ............................................................................. 85
3.2.4 Приймальне тестування ......................................................................... 88
3.3 Приклади впровадженого програмного комплексу ................................. 89
ВИСНОВОКИ ДО ТРЕТЬОГО РОЗДІЛУ ...................................................... 93
ВИСНОВОКИ ............................................................................................................ 94
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................. 96
ДОДАТОК А .............................................................................................................. 97
ДОДАТОК Б............................................................................................................... 99
ДОДАТОК В .......................................................................................................... 116
ДОДАТОК Г .......................................................................................................... 122
ЧДТУ 242235.002 ПЗ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ
ПЗ – Програмне забезпечення
БД – База даних
СКБД – Система керування базами даних
ООП – Об'єктно-орієнтоване програмування
Кросплатформеність – здатність програмного забезпечення працювати більш,
ніж на одній апаратній платформі
Фреймворк – Бібліотека, що полегшує розробку складних систем.
WEB-сайт – Сукупність вебсторінок та залежного вмісту
Backend – Серверна частина
Frontend – Клієнтська частина
UML – Unified Modeling Language
MVC – Model-View-Controller
JPA – Java Persistence API
UX – User Experience
POJO – Plain Old Java Object
UI – User Interface
ЧДТУ 242235.002 ПЗ
ВСТУП
Актуальність теми. Дана кваліфікаційна робота присвячена розробці,
веб-додатку для інтернет магазину електроніки, що стало актуальним з таких
причин як зростання покупок в інтернеті, автоматизація процесів, покращення
взаємодії з клієнтами, аналіз даних, конкурентоспроможність. Це дозволяє
покращити процес продажу товарів та автоматизувати обробку замовлень.
Запропоноване програмне забезпечення було розроблене з метою полегшення
продажу товарів та адміністрування.
У роботі з точки зору інженерії програмного забезпечення розглядаються
основні проблеми, з якими стикаються користувачі та адміністратори при
виконанні своїх обов'язків, а саме покупка товару, ускладнений доступ до
необхідної інформації та складність управління адміністративною частиною.
Мета і завдання розробки. Метою бакалаврської роботи є розробка веб-
додатку для інтернет магазину електроніки, який дозволить спростити процес
пошуку та купівлі товару зі сторони користувача та процеси адміністрування зі
сторони продавця (адміністратора).
Об'єкт розробки процеси купівлі та адміністрування інтернет магазину.
Предмет розробки веб-додаток інтернет магазину електроніки.
Методи проектування та конструювання.
У роботі наведено основні етапи розробки веб-додатку, такі як
формалізація вимог, моделювання предметної області, об'єктно-орієнтоване
проектування та тестування і верифікація. В процесі розробки були використані
сучасні технології, такі як Java Spring Boot, CSS, React, PostgreSQL та інші.
Опис отриманих результатів. У ході розробки був проведений
порівняльний аналіз існуючих інтернет магазинів, що дозволяють користувачу
замовити товар, а адміністратору здійснювати керуванням онлайн магазином.
Це дозволило побачити переваги та недоліки інших рішень та врахувати їх при
розробці власного програмного продукту.
Основні функціональні можливості розробленого вебсайту інтернет магазину
електроніки, включають у себе: каталог товарів, детальна інформація про
товари, можливість замовлення товарів, а також адміністративна частина сайту.
ЧДТУ 242235.002 ПЗ
Практичне значення отриманих результатів.
Отримані результати дозволили розробити ефективний та
функціональний web-додаток, який може бути використаний для розвитку
онлайн ринку продаж електроніки і має всі перспективи для подальшого
розвитку та вдосконалення системи.
ЧДТУ 242235.002 ПЗ
ВСТУП
Актуальність теми. Дана кваліфікаційна робота присвячена розробці, веб-
додатку для інтернет магазину електроніки, що стало актуальним з таких
причин: зростання покупок в інтернеті, автоматизація процесів, покращення
взаємодії з клієнтами, аналіз даних, конкурентоспроможність. Веб-додаток
інтернет магазину дозволяє покращити процес продажу товарів та
автоматизувати обробку замовлень. Запропоноване програмне забезпечення
було розроблене з метою полегшення продажу товарів та адміністрування.
У роботі з точки зору інженерії програмного забезпечення розглядаються
основні проблеми, з якими стикаються користувачі та адміністратори при
виконанні своїх обов'язків, а саме покупка товару, ускладнений доступ до
необхідної інформації та складність управління адміністративною частиною.
Мета і завдання розробки. Метою бакалаврської роботи є розробка веб-
додатку для інтернет магазину електроніки, який дозволить спростити процес
пошуку та купівлі товару зі сторони користувача та процеси адміністрування зі
сторони продавця (адміністратора).
Об'єкт розробки процеси купівлі та адміністрування інтернет магазину.
Предмет розробки вебсайт інтернет магазину електроніки.
Методи проектування та конструювання.
У роботі наведено основні етапи розробки веб-додатку, такі як
формалізація вимог, моделювання предметної області, об'єктно-орієнтоване
проектування та тестування і верифікація. В процесі розробки були використані
сучасні технології, такі як Java Spring Boot, CSS3, React, PostgreSQL та інші.
Опис отриманих результатів. У ході розробки проведено порівняльний
аналіз існуючих інтернет магазинів, що дозволяють користувачу замовити товар,
а адміністратору здійснювати керуванням онлайн магазином. Це дозволило
побачити переваги та недоліки інших рішень та врахувати їх при розробці
власного програмного продукту.
Основні функціональні можливості розробленого вебсайту інтернет
магазину електроніки, включають у себе: каталог товарів, детальна інформація
6
ЧДТУ 242235.002 ПЗ
про товари, можливість замовлення товарів, а також адміністративна частина
сайту.
Практичне значення отриманих результатів.
Отримані результати дозволили розробити ефективний та функціональний
веб-додаток, який може бути використаний для розвитку онлайн ринку продаж
електроніки і має всі перспективи для подальшого розвитку та вдосконалення
системи.
7
ЧДТУ 242235.002 ПЗ
РОЗДІЛ 1 ІСНУЮЧІ МЕТОДИ ТА ЗАСОБИ РОЗВ’ЯЗАННЯ
ПОСТАВЛЕНИХ ЗАВДАНЬ
1.1 Аналіз наукової та технічної інформації
У нашому житті електронна комерція стає все більш значущою галуззю у
бізнесі, особливо в сегменті продажу електроніки. Швидкий розвиток
технологій, зростання популярності онлайн-торгівлі[1] та постійне прагнення до
удосконалення користувацького досвіду (user experience UX) ставлять перед
компаніями та розробниками численні завдання та виклики.
У цьому контексті аналіз наукової та технічної інформації є надзвичайно
важливим для розуміння тенденцій ринку, виявлення можливостей для
вдосконалення та розробки ефективних стратегій розвитку. Ми зосередимося на
порівняльному аналізі трьох провідних інтернет-магазинів електроніки:
Rozetka.ua, Amazon.com та Citrus.ua. Отриманий аналіз дозволить виявити
переваги та недоліки кожної платформи, а також визначити ключові аспекти, які
впливають на користувацький досвід (UX) та конкурентоспроможність компаній
у цьому секторі.
1.1.1 Огляд актуальних проблем
В останні десятиліття спостерігається стрімкий ріст електронної комерції,
особливо у сфері продажу електроніки. Цей ріст зумовлений кількома
ключовими факторами: автоматизація, цифровізація, штучний інтелект,
аналітика [2] , які динамічно впливають зміни у цьому сегменті ринку.
З погляду споживача, перехід до покупок електроніки через інтернет став
надзвичайно привабливим. Переваги, такі як: швидкість, доступність,
індивідуалізований вибір товарів та зручність у виборі, дали поштовх зростанню
популярності онлайн-торгівлі.
Розвиток технологій, таких як штучний інтелект, розширена реальність та
вдосконалення систем управління, значно полегшив процес покупок через
Інтернет. Відсутність географічних обмежень та можливість детального огляду
8
ЧДТУ 242235.002 ПЗ
продуктів перед покупкою за допомогою новітніх технологій зробили онлайн-
покупки електроніки більш привабливими для споживачів.
Розуміння та адаптація до потреб споживачів у відповідності до їхнього
швидко змінного способу життя також відіграли значну роль у рості онлайн-
торгівлі електронікою. Взаємодія з платформами соціальних мереж,
персоналізовані рекомендації та збільшення довіри споживачів до онлайн-
магазинів сприяли цьому росту.
Ці фактори разом визначають швидкість та напрямок розвитку електронної
комерції, зокрема сегмента онлайн-торгівлі електронікою, і вказують на
потенціал подальшого росту цього сектору.
1.1.2 Аналіз методів та рішень
Проведений огляд статей досліджень зосереджувався на розвитку
електронної комерції [3] та розвитку програмного забезпечення для інтернет-
магазинів електроніки [4], [5]. Аналіз цих статей дозволив визначити ключові
тенденції розробки у цій сфері.
Дослідження виявило, що в сучасному світі електронна комерція стає все
більш популярною, особливо в галузі продажу електроніки. Автори акцентують
увагу на інноваціях у підходах до взаємодії з клієнтами, використанні штучного
інтелекту для підвищення персоналізації та автоматизації процесів управління
магазином, а також на розвитку безпеки та захисту даних у віртуальному
середовищі.
Під час аналізу досліджувалися різні підходи, методи та інструменти, які
використовуються для створення та управління інтернет-магазинами електроніки
[6]–[8]. Зокрема, були розглянуті такі технології для розробки серверної частини
(Backend): Java Spring Boot і Node.js з фреймворком Express.js. Щодо клієнтської
частини (Frontend), були розглянуті такі інструменти як React.js та Angular.
Опис існуючих рішень для серверної частини (Backend):
1 Java Spring Boot:
Переваги:
‒ широкий функціонал: надає різноманітні інструменти для створення
9
ЧДТУ 242235.002 ПЗ
сервера, включаючи роботу з базами даних, безпеку,
автентифікацію;
‒ стабільність та надійність: добре відомий своєю стабільністю та
підтримкою;
‒ зручність для великих проектів: має механізми для ефективного
управління складними проектами.
Недоліки:
‒ великий обсяг коду: може потребувати більше коду порівняно з
іншими фреймворками для досягнення тих самих цілей;
‒ швидкість розробки: деякі функції можуть вимагати більше часу
для розробки порівняно з іншими технологіями;
‒ складність налаштування: деякі аспекти конфігурації можуть бути
складні для розуміння.
2 Node.js з Express.js:
Переваги:
‒ швидкодія: швидкий та ефективний у роботі з великими обсягами
запитів;
‒ JavaScript: можливість використання однієї мови (JavaScript) для
серверної та клієнтської частин;
‒ простота в розгортанні: легко і швидко розгортається на серверах.
Недоліки:
‒ масштабованість: для великих проектів можуть виникати проблеми
з масштабованістю;
‒ асинхронність: вимагає ретельного управління асинхронним кодом;
‒ відсутність вбудованих засобі: для деяких задач, що може вимагати
використання сторонніх модулів.
‒ обмежені можливості для багатоядерних процесорів: Node.js
використовує однопоточну модель, що може обмежувати ефективне
використання багатоядерних процесорів без додаткових налаштувань.
Опис існуючих рішень для клієнтської частини(Frontend):
10
ЧДТУ 242235.002 ПЗ
1 React.js:
Переваги:
‒ швидкодія та продуктивність: висока швидкодія завдяки
віртуальному DOM (Document Object Model);
‒ компонентний підхід: модульна архітектура для розробки складних
інтерфейсів;
‒ велика спільнота: широко підтримується великою активною
спільнотою розробників.
Недоліки:
‒ висока крива навчання: для початківців може бути складним у
навчанні через велику кількість концепцій;
‒ екосистема: деякі функції можуть вимагати використання сторонніх
бібліотек;
‒ інтеграція зі стандартами безпеки: потрібно додатково
налаштовувати для повноцінного захисту додатків.
2 Angular:
Переваги:
‒ широкі можливості: широкий спектр функціоналу та підтримка від
Google;
‒ стабільність: ретельна підтримка та оновлення з боку розробників;
‒ модульність: система модулів дозволяє ефективно організувати код
проекту.
Недоліки:
‒ складність: часом вимагає більше часу для оволодіння через велику
кількість концепцій;
‒ обмежена гнучкість: може бути менш гнучким у порівнянні з
іншими фреймворками;
‒ інтеграція з іншими технологіями: деякі інші інструменти можуть
вимагати додаткової настройки для зручної співпраці з Angular.
1.2 Аналіз існуючих аналогів
11
ЧДТУ 242235.002 ПЗ
У світі електронної комерції роль інтернет-магазинів стає все більш
визначальною. При цьому створення та управління інтернет-магазином є
стратегічно важливим кроком для будь-якого бізнесу. У даному аналізі ми
приділимо увагу порівняльному огляду трьох відомих інтернет-магазинів
електроніки: Rozetka.ua[9], Amazon.com[10] та Citrus.ua[11]. Цей огляд допоможе
виявити сильні та слабкі сторони кожного інтернет магазину, а також допоможе
зрозуміти, які аспекти впливають на користувацький досвід та
конкурентоспроможність кожного магазину.
1.2.1 Порівняльний огляд програмного забезпечення
У зв'язку із стрімким розвитком електронної комерції, порівняльний аналіз
магазинів стає ключовим етапом при визначенні оптимального шляху розробки
інтернет-магазинів. В цьому контексті розгляд та порівняння трьох популярних
магазинів електронної комерції - Citrus.ua, Rozetka.ua та Amazon.com, дозволяє
виявити переваги, недоліки та особливості кожної з них у контексті вимог
електронної комерції, що допоможе зробити аналіз аналогів для створення
успішного інтернет-магазину електроніки.
Рисунок 1.1 ‒ Головна сторінка Citrus.ua
12
ЧДТУ 242235.002 ПЗ
Аналіз взаємодії з інтерфейсом користувача вебсайту Citrus.ua (Рисунок
1.1) та враження від користувацького досвіду, було виявлено такі переваги:
‒ привабливий дизайн: інтерфейс сайту Citrus.ua привабливий та зручний
для користувачів, що спрощує навігацію та пошук товарів;
‒ просте оформлення замовлення: сайт пропонує зручну форму
оформлення замовлення, що сприяє швидкому та зручному процесу
покупок;
‒ зручна доставка: Citrus.ua надає різні варіанти доставки товарів,
включаючи кур'єрську доставку та самовивіз з пунктів видачі;
‒ програма лояльності: клієнти можуть користуватися програмою
лояльності, отримуючи бонуси та знижки за покупки;
‒ якісний сервіс: Citrus.ua забезпечує якісний сервіс підтримки, що
допомагає вирішувати будь-які питання та проблеми клієнтів.
З недоліків було виявлено:
‒ нестабільність сайту: у періоди великої активності або під час
проведення промоакцій можуть виникати проблеми з доступом до
сайту або повільною роботою;
‒ обмеженість асортименту: у порівнянні з більшими магазинами,
асортимент товарів на Citrus.ua може бути обмеженим;
‒ нестабільність мобільної версії: недолік оптимізації для мобільних
пристроїв може призвести до нестабільної роботи мобільної версії
сайту;
‒ можливість затримок у доставці: у рідкісних випадках можуть виникати
затримки у доставці товарів через різні обставини;
‒ відсутність деяких категорій товарів: деякі категорії товарів можуть
бути відсутніми у порівнянні з конкурентами.
13
ЧДТУ 242235.002 ПЗ
Рисунок 1.2 ‒ Головна сторінка Rozetka.ua
Аналіз взаємодії з інтерфейсом користувача вебсайту Rozetka.ua (Рисунок
1.2) та враження від користувацького досвіду, було виявлено такі переваги:
‒ зручний пошук товарів: інтерфейс Rozetka.ua має зручний пошук
товарів та зручне сортуванняx;
‒ просте оформлення замовлення: Rozetka.ua надає швидке та просте
оформлення замовлення;
‒ швидкий пошук: користувачі можуть швидко знаходити потрібні
товари завдяки ефективному пошуку;
‒ багатофункціональний інтерфейс: сайт має багато корисних функцій та
можливостей для зручності користувачів;
‒ якісний сервіс: Rozetka.ua забезпечує якісний сервіс підтримки, який
допомагає вирішувати будь-які питання та проблеми клієнтів.
Під час виявлення недоліків були визначені такі проблеми:
‒ нестабільність інтерфейсу: можлива нестабільність інтерфейсу на
різних пристроях або у деяких версіях мобільних додатків;
‒ обмежена система фільтрів: наявність обмеженої системи фільтрів та
сортування результатів пошуку;
‒ обмеженість відстеження статусу замовлення: існує можливість
обмеженого відстеження статусу замовлення;
14
ЧДТУ 242235.002 ПЗ
‒ можливість помилкової інформації: Rozetka.ua може надавати
помилкову інформацію про наявність товарів на складі;
‒ відсутність програми лояльності: наявність програми лояльності може
бути відсутньою або менше розвиненою порівняно з конкурентами.
Рисунок 1.3 ‒ Головна сторінка Amazon.com
Аналіз взаємодії з інтерфейсом користувача вебсайту Amazon.com
(Рисунок 1.3) та враження від користувацького досвіду, було виявлено такі
переваги:
‒ широкі можливості персоналізації: Amazon.com надає різноманітні
зручні функції сортування та персоналізації рекомендацій для
користувачів;
‒ простий пошук: інтерфейс Amazon.com має простий та ергономічний
дизайн, що дозволяє швидко знаходити потрібні товари;
‒ широкий вибір товарів: Amazon.com пропонує великий асортимент
товарів різних категорій, що задовольняє різні потреби користувачів;
‒ зручна система оформлення замовлення: система оформлення
замовлення на Amazon.com проста та зручна, що сприяє швидкому
15
ЧДТУ 242235.002 ПЗ
завершенню покупки;
‒ якісний сервіс підтримки: Amazon.com надає якісний сервіс підтримки
користувачів, включаючи швидку відповідь на запити та розв'язання
проблем.
У процесі виявлення недоліків були зазначені наступні проблеми:
‒ складний інтерфейс: для новачків інтерфейс Amazon.com може
виглядати складним через велику кількість інформації та функцій;
‒ велика кількість товарів: об'єм товарів на Amazon.com може викликати
заплутаність та ускладнити пошук певного товару;
‒ затримки у відстеженні: час від часу можуть виникати затримки у
відстеженні статусу замовлення та обробці повернень товарів;
‒ високі вимоги до доставки: Деякі користувачі можуть стикатися з
високими вимогами до доставки товарів, особливо якщо це міжнародна
доставка;
‒ залежність від регіону: деякі функції та послуги Amazon.com можуть
бути недоступні для певних регіонів або країн.
Порівнюючи зазначені вебсайти аналогів, можна зазначити, що кожний з
цих магазинів має свої переваги та недоліки. Citrus.ua відрізняється привабливим
дизайном та швидким оформленням замовлення, але може стикатися з
нестабільністю роботи сайту мобільної версії при взаємодії з користувачем. У
свою чергу, Rozetka.ua має зручний пошук та швидку доставку, але має
проблеми нестабільність мобільної версії та обмеженим відстеженням статусу
замовлення. Amazon.com вражає своїм широким вибором товарів та зручною
системою оформлення замовлення, але може викликати заплутаність через
складний інтерфейс і є не популярним в Україні.
1.2.2 Ідентифікація прогалин та можливостей
Під час аналізу аналогів інтернет-магазинів були виявлені недоліки та
можливості для поліпшення, які слід враховувати у процесі розробки інтернет
магазину. Перелік недоліків розглянутих магазинів та можливості для
покращення:
16
ЧДТУ 242235.002 ПЗ
Проблеми у вебсайті Rozetka.ua:
‒ складність функцій фільтрації товарів, що може ускладнити пошук для
користувачів;
‒ нестабільність інтерфейсу на мобільних пристроях, що може вплинути
на користувацький досвід.
Можливості для покращення:
‒ розширення функціоналу фільтрації товарів для полегшення пошуку;
‒ оптимізація мобільного додатку для підвищення стабільності на різних
пристроях.
Проблеми у вебсайті Amazon.com:
‒ складність інтерфейсу, яка може збентежити новачків та ускладнити
процес покупок;
‒ затримки у відстеженні замовлень та обробці повернень товарів.
Можливості для покращення:
‒ спрощення інтерфейсу для покращення зручності користування,
зокрема для новачків;
‒ покращення системи обробки замовлень для забезпечення швидкості та
ефективності.
Проблеми у вебсайті роботи Citrus.ua:
‒ відсутність інноваційних функцій, що може обмежити
конкурентоспроможність на ринку;
‒ нестабільність роботи сайту, що може призвести до неприємностей для
користувачів.
Можливості для покращення:
‒ впровадження нововведень та інноваційних функцій для привертання
більшої уваги користувачів;
‒ оптимізація роботи сайту для забезпечення стабільності та надійності.
Загальний висновок полягає в тому, що кожен інтернет-магазин має свої
сильні та слабкі сторони, але важливо постійно працювати над поліпшенням
функціоналу та користувацького досвіду, щоб задовольняти потреби своїх
17
ЧДТУ 242235.002 ПЗ
клієнтів та залишатися конкурентоспроможними на ринку електронної комерції.
1.3 Постановка задачі
Для розробки вебсайту інтернет-магазину електроніки, який повинен мати
зручний інтерфейс для користувачів, а також включатиме адміністративну
частину необхідно виконати наступні задачі:
‒ на основі проведеного аналізу існуючих аналогів потрібно визначити
можливості для покращення вебсайту інтернет магазину електроніки;
‒ сформувати перелік функціональних та нефункціональних вимог до
програмного забезпечення;
‒ сформувати структуру програмного забезпечення на основі
сформованих вимог;
‒ відповідно до структури розробити відповідні компоненти;
‒ провести тестування та впровадження програмного забезпечення
інтерне магазину електроніки.
18
ЧДТУ 242235.002 ПЗ
ВИСНОВОКИ ДО ПЕРШОГО РОЗДІЛУ
З огляду актуальних проблем та аналізу методів та рішень у сфері
електронної комерції, стає зрозуміло, що розвиток цієї галузі надзвичайно
динамічний та вимагає постійного вдосконалення технологій та підходів.
Зростання популярності онлайн-торгівлі електронікою зумовлене
швидкістю, доступністю, індивідуалізованим вибором товарів та зручністю для
споживачів. Технологічні інновації, такі як штучний інтелект, розширена
реальність та покращені системи управління, полегшили процес покупок онлайн.
Зокрема, відсутність географічних обмежень та можливість докладного огляду
продуктів перед покупкою завдяки новітнім технологіям роблять онлайн-
покупки електроніки привабливішими для споживачів.
Наявність персоналізованих рекомендацій, взаємодія з платформами
соціальних мереж та підвищення довіри споживачів до онлайн-магазинів також
відіграють ключову роль у зростанні цього сектору.
Щодо методів та рішень, використаних для створення та управління
інтернет-магазинами електроніки, аналіз показав, що фреймворки та
інструменти, такі як Java Spring Boot, Node.js (з фреймворком Express.js) для
серверної частини (Backend), а також React.js та Angular для клієнтської частини
(Frontend), відіграють важливу роль у розробці ефективних та функціональних
інтернет-магазинів.
З аналізу існуючих рішень для серверної частини (Backend) та
користувацького інтерфейсу і користувацького досвіду (Frontend), а також
порівняльного огляду програмного забезпечення, можна зробити декілька
важливих висновків:
1 Рішення для серверної частини: Java Spring Boot та Node.js з Express.js -
обидва мають свої переваги та недоліки. Spring Boot відомий своєю
стабільністю та широким функціоналом, але може потребувати більше
коду. Node.js є швидким та ефективним, але може виникнути проблеми
з масштабованістю та асинхронним кодом.
19
ЧДТУ 242235.002 ПЗ
2 Рішення для користувацького інтерфейсу і користувацького досвіду:
React.js та Angular - обидва вони мають свої переваги, такі як
швидкодія та широкий функціонал. Проте, React може виявитися
складним у навчанні через багато концепцій, тоді як Angular може
вимагати більше часу для освоєння через складність.
3 Аналіз існуючих аналогів: Розетка.ua, Amazon.com та Citrus.ua мають
власні переваги та недоліки, які варто враховувати при розробці
власного інтернет-магазину для розвитку бізнесу.
4 Ідентифікація прогалин та можливостей: кожен інтернет-магазин має
свої можливості для покращення, такі як оптимізація фільтрації товарів,
стабілізація мобільних додатків та спрощення інтерфейсу для кращого
користувацького досвіду.
У кожному випадку, важливо зважати на специфіку проекту та потреби
користувачів при виборі конкретного рішення для розвитку інтернет-магазину.
Кожне рішення має свої сильні сторони та можливості для покращення, що варто
враховувати при прийнятті рішення.
Загалом, розвиток електронної комерції у сегменті продажу електроніки
невід'ємно пов'язаний з технологічними інноваціями, підвищенням зручності для
споживачів та постійним удосконаленням програмного забезпечення, що сприяє
подальшому зростанню цього сектору.
20
ЧДТУ 242235.002 ПЗ
РОЗДІЛ 2 ВПРОВАДЖЕННЯ РЕЗУЛЬТАТІВ ДОСЛІДЖЕНЬ У
ПРАКТИКУ ПРОЕКТУВАННЯ ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ
ІНФОРМАЦІЙНИХ СИСТЕМ
2.1 Моделювання предметної області
Моделювання предметної області є ключовим етапом в розробці будь-якої
інформаційної системи. Цей процес полягає в аналізі та уявленні складних
систем та процесів у вигляді абстракцій та моделей, які полегшують їхнє
розуміння та подальшу розробку. Моделювання предметної області для інтернет
магазину електроніки включає в себе різноманітні компоненти функціонування
магазину, від керування товарним асортиментом до обробки замовлень
користувачів. Далі ми зазначимо основні компоненти цієї предметної області та
пояснимо їхню важливість у контексті моделювання.
2.1.1 Предметна область моделювання. Модель предметної області.
Словник предметної області
Предметна область моделювання для інтернет-магазину електроніки
охоплює різноманітні елементи торгівлі електронікою та взаємодії з
користувачами:
1 Користувачі: це особи, які відвідують магазин, шукають товари та
роблять покупки. Вони мають облікові записи, власні дані, інформацію
про адресу доставки та інші дані, які використовуються під час процесу
покупок.
2 Адміністратори: це особи, які виконують керування магазином,
виконують маніпуляції над товарами та обробляють замовлення.
3 Товари: електроніка різних категорій, таких як смартфони, планшети,
ноутбуки, побутова техніка тощо. Товари мають визначені
характеристики (назва, ціна, технічні характеристики, опис), які
представлені у каталозі.
4 Замовлення: інформація про покупки, зроблені користувачами.
Замовлення мають номер, статус, відомості про доставку, обрані товари
21
ЧДТУ 242235.002 ПЗ
та інші деталі.
5 Кошик: це місце, де користувачі додають та зберігають обрані товари
перед остаточним замовленням.
6 Бренди: виробники електронної техніки, які представлені у магазині.
7 Категорії товарів: товари можуть бути розділені на різні категорії
(смартфони, планшети, комп'ютери тощо), щоб полегшити навігацію
покупців у каталозі.
8 Інформація про пристрої: розгорнутий перелік технічні характеристики,
опис та додаткові відомості про кожен конкретний електронний
пристрій що є в товарах.
9 Оплата та доставка: інформація про способи оплати та умови доставки
товарів користувачам.
Ця предметна область являє собою широкий спектр елементів, що
взаємодіють у процесі функціонування інтернет-магазину електроніки,
створюючи віртуальне середовище для покупок та обслуговування клієнтів.
Розроблена модель предметної області для інтернет-магазину
електроніки включає такі сутності:
1 Товари (Products):
‒ ідентифікатор товару;
‒ назва товару;
‒ знижена ціна;
‒ ціна;
‒ категорія товару;
‒ бренд товару;
‒ фотографії товару;
‒ наявність на складі.
2 Категорії товарів (Product Categories):
‒ ідентифікатор категорії;
‒ назва категорії;
‒ опис категорії.
22
ЧДТУ 242235.002 ПЗ
3 Користувачі (Users):
‒ ідентифікатор користувача;
‒ ім'я;
‒ прізвище;
‒ по батькові;
‒ адреса електронної пошти;
‒ адреса доставки;
‒ історія замовлень.
4 Замовлення (Orders):
‒ ідентифікатор замовлення;
‒ дата та час замовлення;
‒ ідентифікатор користувача, який розмістив замовлення;
‒ список товарів у замовленні;
‒ адреса доставки;
‒ статус замовлення.
5 Бренди (Brands):
‒ ідентифікатор бренду;
‒ назва бренду;
‒ опис бренду.
6 Інформація про товар (Product Information):
‒ ідентифікатор запису інформації;
‒ ідентифікатор товару;
‒ назва характеристики;
‒ опис характеристики;
‒ відгуки користувачів;
‒ рейтинг товару.
Терміни словника предметної області інтернет магазину електроніки
наведено у таблиці 2.1.
23
ЧДТУ 242235.002 ПЗ
Таблиця 2.1
Словник предметної області
Термін Опис
Користувачі Особи, які відвідують магазин, шукають товари та
роблять покупки.
Товари Електроніка різних категорій з характеристиками та
описом.
Замовлення Інформація про покупки, включаючи номер, статус,
відомості про доставку.
Кошик Місце для зберігання обраних товарів перед
остаточним замовленням.
Бренди Виробники електроніки, представлені у магазині.
Категорії товарів Розділення товарів на різні категорії для полегшення
навігації.
Інформація про товар Деталізовані технічні характеристики, опис та
додаткові відомості про товар.
2.1.2 Елементи моделювання предметної області
Елементи моделювання предметної області включають у себе основні
конструктивні елементи, які допомагають описати та структурувати цю область.
Ключові елементи, які використані для моделювання предметної області
інтернет магазину електроніки:
1 Користувачі:
Клас користувачі містить такі поля:
‒ id (ідентифікатор користувача);
‒ ім'я (прізвище та ім'я користувача);
‒ email (адреса електронної пошти користувача);
24
ЧДТУ 242235.002 ПЗ
‒ адреса доставки (поштова адреса користувача).
Клас користувачі містить відносини:
‒ користувач може мати багато замовлень (зв'язок один до
багатьох);
‒ кожен користувач має свій кошик (зв'язок один до одного).
2 Замовлення:
Клас замовлення містить такі поля:
‒ id (ідентифікатор замовлення);
‒ дата створення (дата створення замовлення);
‒ статус (поточний статус замовлення);
‒ загальна сума (загальна вартість замовлення).
Клас замовлення містить такі відносини:
‒ замовлення належить конкретному користувачеві (зв'язок багато
до одного);
‒ замовлення може містити багато товарів (зв'язок один до
багатьох).
3 Товари:
Клас товари містить такі поля:
‒ id (ідентифікатор товару);
‒ назва (назва товару);
‒ ціна (вартість товару);
‒ категорія (категорія, до якої відноситься товар);
‒ бренд (виробник товару);
‒ тип (тип товару).
Клас товари містить такі відносини:
‒ товар може бути включений у багато замовлень (зв'язок багато
до багатьох);
‒ товар належить певному бренду (зв'язок багато до одного);
‒ товар відноситься до певного типу (зв'язок багато до одного).
4 Кошик:
25
ЧДТУ 242235.002 ПЗ
Клас кошик містить такі поля:
‒ id (ідентифікатор кошика);
‒ кількість (кількість товарів у кошику);
‒ товари (список товарів у кошику).
Клас кошик містить такі поля відносини:
‒ кожен кошик належить конкретному користувачеві (зв'язок один
до одного);
‒ у кошику може бути багато товарів (зв'язок один до багатьох).
5 Інформація про пристрої:
Клас інформація про пристрої містить такі поля:
‒ id (ідентифікатор інформації про пристрій);
‒ назва пристрою (назва конкретного пристрою);
‒ характеристики (детальні технічні характеристики пристрою);
‒ категорія (категорія, до якої відноситься пристрій).
Клас інформація про пристрої містить такі відносини:
‒ інформація про пристрій може бути пов'язана з товаром (зв'язок
багато до одного).
6 Бренди:
Клас бренди містить такі поля:
‒ id (ідентифікатор бренду);
‒ назва бренду (назва виробника).
Клас бренди містить такі відносини:
‒ бренд може бути пов'язана з товаром (зв'язок один до багатьох).
7 Типи:
Клас типи містить такі поля:
‒ id (ідентифікатор типу);
‒ назва типу (назва категорії товару).
Клас типи містить такі відносини:
‒ тип може бути пов'язана з товаром (зв'язок один до багатьох).
2.1.3 Робоча область моделювання
26
ЧДТУ 242235.002 ПЗ
Робоча область моделювання для інтернет-магазину електроніки охоплює
різноманітні функції та процеси, що забезпечують ефективне управління та
координацію роботи магазину. Деякі з ключових елементів робочої області
моделювання включають:
‒ каталог товарів: моделювання робочої області включає створення
інтерфейсу для відображення товарів, їхніх характеристик, цін та інших
деталей. Користувачі повинні мати можливість ефективно переглядати і
шукати товари в магазині;
‒ кошик покупок: модель передбачає створення функціоналу для
додавання товарів до кошика, керування кількістю та видалення товарів
перед оформленням покупки;
‒ оформлення замовлення: ця частина моделі включає процеси, пов'язані
з оформленням замовлення, введенням інформації про адресу доставки,
вибором методу оплати та підтвердженням замовлення;
‒ система оплати: модель передбачає інтеграцію з різними платіжними
системами для забезпечення безпечної та зручної оплати покупок;
‒ управління замовленнями: функціонал для відстеження статусу
замовлень, оновлення їхнього стану та сповіщення користувачів про
зміни;
‒ система відгуків та рейтингів: моделювання включає створення
системи для залишення відгуків та оцінок товарів користувачами, а
також їхнього відображення на сайті;
‒ адміністративна панель: частина моделі передбачає розробку
інтерфейсу для адміністраторів магазину, який дозволяє керувати
товарами, замовленнями, користувачами та іншою інформацією;
‒ система звітності та аналітики: модель включає функціонал для збору,
аналізу та візуалізації даних про продажі, користувачів та інші
показники для прийняття управлінських рішень.
2.2 Формування та аналіз вимог
27
ЧДТУ 242235.002 ПЗ
У вимогах до програмного забезпечення для інтернет-магазину
електроніки визначанні ключові функції та характеристики системи, які
гарантують задоволення потреб замовника та забезпечують зручність та
ефективність користування для кінцевих користувачів. Під час формування
вимог враховано потреби та очікування як замовника, так і користувачів. Вимоги
поділяються на дві основні категорії: первинні і детальні. Первинні вимоги
визначають загальні цілі та основні функціональність системи, тоді як детальні
вимоги конкретизують ці цілі та функції до рівня, необхідного для подальшого
проектування та розробки програмного забезпечення.
2.2.1 Формування вимог до програмного забезпечення. Первинні і детальні
вимоги. Вимоги замовника і розробника. Функціональні та нефункціональні
вимоги.
Формування вимог до програмного забезпечення є критичним етапом у
процесі розробки, оскільки воно визначає функціональні та нефункціональні
характеристики системи. Первинні вимоги визначають загальні цілі проекту, такі
як створення вебсайту інтернет-магазину для продажу електроніки. Детальні
вимоги доповнюють це, визначаючи конкретні функції, які має виконувати
система, наприклад, зручний пошук товарів за категоріями. Вимоги замовника
зазвичай спрямовані на задоволення потреб користувачів, включаючи зручність
використання та захист особистих даних. Вимоги розробника, у свою чергу,
забезпечують технічну реалізацію системи з використанням сучасних технологій
та найкращих практик. Функціональні вимоги визначають функції, які система
повинна виконувати, тоді як нефункціональні вимоги встановлюють якісні
аспекти, такі як безпека та продуктивність.
Первинні та детальні вимоги:
Первинні вимоги:
‒ розробка та створення вебсайту інтернет-магазину для продажу
електроніки;
‒ реалізувати можливість перегляду товарів без обов'язкової
авторизації;
28
ЧДТУ 242235.002 ПЗ
‒ реалізувати оформлення замовлень через кошик;
‒ передбачити реєстрацію користувачів та збереження їх особистих
даних.
Детальні вимоги:
‒ реалізувати зручний пошук товарів за різними категоріями
(смартфони, ноутбуки, аксесуари тощо);
‒ програмне забезпечення має містити можливість додавання товарів
у кошик, редагування вмісту кошику, виконання оформлення
замовлення на основі вмісту кошику;
‒ інструменти адміністратора, що дозволяють керувати додавання,
редагування, видалення товарів. додавання, редагування, видалення
категорій. створення, видалення, перегляд та обробка статусу
замовлення.
Вимоги замовника та розробника:
Вимоги замовника:
‒ перегляд каталогу товарів без обмежень;
‒ перегляд інформації про товар;
‒ зручне оформлення замовлення;
‒ Захист особистих даних користувачів.
Вимоги розробника:
‒ використання сучасних технологій для забезпечення швидкодії та
безпеки системи;
‒ реалізація зручного інтерфейсу користувача;
‒ розробка системи адміністрування для зручного управління
магазином.
Функціональні та нефункціональні вимоги:
1 Реєстрація та авторизація:
‒ реєстрація користувача: збереження особистої інформації
користувача для подальших покупок;
‒ авторизація: можливість входу в систему для доступу до
29
ЧДТУ 242235.002 ПЗ
особистого кабінету.
2 Перегляд товарів:
‒ пошук та фільтрація товарів: можливість швидкого пошуку
товарів за категоріями, брендами, характеристиками тощо;
‒ детальна інформація про товар: відображення фото, опису,
характеристик, цін та наявності товарів.
3 Оформлення замовлення:
‒ додавання товарів у кошик: можливість вибору та збереження
товарів для покупки;
‒ оформлення замовлення: введення адреси доставки та іншої
інформації про замовлення.
4 Управління адміністратором:
‒ додавання/редагування/видалення товарів: можливість зміни
асортименту магазину;
‒ управління замовленнями: перегляд, обробка замовлень.
Нефункціональні вимоги:
1 Безпека:
‒ захист особистих даних: забезпечення конфіденційності інформації
користувачів.
2 Продуктивність та швидкодія:
‒ оптимізація швидкості завантаження сторінок: швидка відповідь
системи на запити користувачів;
‒ масштабованість: передбачити здатність системи для
масштабування і ефективно працювати при зростанні обсягу
користувачів або товарів.
3 Інтерфейс:
‒ інтуїтивний інтерфейс користувача: забезпечення зручності та
легкості використання вебсайту для будь-якого користувача;
‒ адаптивний дизайн: працездатність та зручність використання на
різних пристроях та розмірах екранів.
30
ЧДТУ 242235.002 ПЗ
2.2.2 Формування вимог за допомогою діаграми прецедентів
Діаграма прецедентів відображає функціональність системи з точки зору
користувачів, і дозволяє аналізувати взаємодію між користувачами та системою.
В результаті проведення моделювання предметної області, формуванню
словника та представлення вимог до системи сформовано діаграму прецедентів з
використанням UML технологій (рисунок 2.1) використання веб-додатку
інтернет магазину електроніки.
На діаграмі відображенні основні варіанти використання системи з
розподілом функціональності по ролям користувачів які зареєстровані в даній
системі:
1 Перегляд каталогу товарів: цей компонент дозволяє користувачам
переглядати асортимент товарів у магазині без необхідності
авторизації. Вони можуть бачити всі доступні товари в магазині.
2 Пошук товарів: користувачі можуть використовувати пошукові функції
для знаходження товарів за категоріями, брендами, характеристиками
тощо.
3 Перегляд детального опису товару: цей компонент дозволяє
користувачам переглядати детальну інформацію про конкретний товар
таку як: фото товару, опис, характеристики, ціну та наявність в
магазині.
4 Додавання товару до кошика: користувачі можуть вибирати товари для
покупки та додавати їх до свого кошика для подальшої оплати.
5 Оформлення замовлення: цей прецедент дозволяє користувачам
здійснювати замовлення, вводячи необхідні дані для доставки та
оплати.
6 Реєстрація/авторизація: користувачі можуть реєструватися в системі
для створення облікового запису або авторизуватися для доступу до
свого особистого кабінету.
7 Управління товарами (для адміністратора): адміністратор має
можливість додавати нові товари, редагувати існуючі та видаляти
31
ЧДТУ 242235.002 ПЗ
товари з магазину.
8 Управління замовленнями (для адміністратора): адміністратор може
переглядати список оформлених замовлень, виконувати обробку та
керувати ними.
Ця діаграма прецедентів визначає основні можливості, які користувачі та
адміністратори можуть мати в системі інтернет-магазину.
Рисунок 2.1 – Діаграма прецедентів для інтернет магазину
2.3 Проектування логічної структури програмного комплексу
Проектування логічної структури системи включає в себе створення
докладної моделі системи, що відображає, як система буде організована на рівні
класів та пакетів. Цей процес дозволяє визначити, які компоненти будуть
присутні в системі, як вони будуть взаємодіяти між собою та як будуть
виконуватися основні функції системи. Логічне проектування допомагає
підготувати систему до фази фізичного проектування, коли будуть створюватися
конкретні реалізації класів та їх методів.
32
ЧДТУ 242235.002 ПЗ
2.3.1 Діаграма класів
Діаграма класів є одним із видів діаграм в рамках мови моделювання UML
Вона використовується для відображення класів, їх взаємодій та залежностей
між ними в об'єктно-орієнтованому програмуванні (ООП). Діаграма класів
містить класи, атрибути, методи, асоціації та інші відношення між класами, що
дозволяє проектувати та аналізувати архітектуру програмного забезпечення.
Для розробки веб-додатку інтернет магазину електроніки на етапі
проектування була створена діаграма класів представлена на рисунок 2.2.
Рисунок 2.2 – Діаграма класів на етапі проектування для веб-додатку інтернет
магазину
33
ЧДТУ 242235.002 ПЗ
Опис основних класів та відносин представлених в діаграмі класів:
1 Користувач (User): представляє користувача, який взаємодіє з
системою.
2 Інформація про користувача (UserInfo): містить детальну інформацію
про користувача, таку як ім'я, адреса, контактні дані і т.д.
3 Кошик (Cart): представляє кошик для покупок, де зберігаються товари,
які користувач вибрав для покупки.
4 Замовлення (Order): представляє замовлення, яке зробив користувач і
яке зазвичай включає один або декілька пристроїв.
5 Пристрій (Device): представляє фізичний або віртуальний пристрій,
доступний у системі, такий як продукт.
6 Інформація про пристрій (DeviceInfo): містить детальну інформацію
про пристрій, включаючи характеристики, особливості тощо.
7 Бренд (Brand): представляє бренд або виробника пристрою.
8 Тип (Type): представляє тип або категорію пристрою (наприклад,
смартфон, ноутбук, планшет).
Відносини між класами вказують на зв'язки між об'єктами:
1 Користувач(User) і Інформація про користувача(UserInfo): кожен
користувач має один набір інформації, що описує їх профіль.
2 Користувач(User) і Замовлення(Order): користувач може зробити одне
або кілька замовлень.
3 Користувач(User) і Кошик(Cart): у користувача є один активний
кошик для покупок, де можна додавати або видаляти товари.
4 Замовлення(Order) і Пристрій(Device): замовлення включає один або
кілька придбаних пристроїв.
5 Кошик(Cart) і Пристрій(Device): кошик може містити нуль або більше
пристроїв, які користувач розглядає для покупки.
6 Пристрій(Device) і Інформація про пристрій(DeviceInfo): кожен
пристрій має один набір інформації, що описує пристрій.
7 Пристрій(Device) і Бренд(Brand): кожен пристрій має один бренд, що
34
ЧДТУ 242235.002 ПЗ
забезпечує фільтрацію по відповідному бренду.
8 Пристрій(Device) і Тип(Type): кожен пристрій має один бренд, що
забезпечує фільтрацію по відповідному бренду.
Після створення веб-додатку в результаті я отримав таку діаграму класів з
її атрибутами та зв’язками між об’єктами (Рисунок 2.3).
Рисунок 2.3 – Діаграма класів після розробки веб-додатку інтернет магазину
35
ЧДТУ 242235.002 ПЗ
Далі представлений опис класів та відносин представлених в діаграмі
класів, що утворилась після створення веб-додатку:
1 Користувач (User) включає в себе інформацію про логін та пароль для
авторизації в веб-додатку.
2 Інформація про користувача (UserInfo) включає в себе основну
інформацію про користувача, таку як ім'я, прізвище, email та адреса
доставки. У цього класу є методи для отримання цієї інформації.
3 Замовлення (Order) містить інформацію про окремі замовлення, таку як
дата створення, статус та загальна сума замовлення.
4 Пристрої в замовленні (OrderItem) містить в собі список всіх пристроїв
та їх кількість в замовленні.
5 Пристрої (Device) описує товар у магазині, включаючи його назву,
ціну, категорію, бренд. У класі є методи для отримання цих
характеристик товару.
6 Кошик (Cart) має інформацію про товари, які додані до кошика
користувача, включаючи кількість товарів.
7 Пристрої в кошику (CartItem) містить в собі список всіх пристроїв та їх
кількість в корзині для подальшого замовлення.
8 Інформація про товар (DeviceInfo) включає характеристики
конкретного пристрою, який може бути пов'язаний з певним товаром у
магазині.
9 Бренд (Brand) відображає окремий бренд товару, до якого можуть
належати певні товари.
10 Тип (Type) представляє окремий тип товарів, до яких також можуть
бути прив'язані певні товари.
11 Фотографії (Photo) зберігає інформацію про шлях до картинки, та
пристрій якому вона належить.
Відносини між класами вказують на зв'язки між об'єктами:
1 Користувач (User) і Замовлення (Order):
‒ користувач може мати багато замовлень, вказано зв'язок "один до
36
ЧДТУ 242235.002 ПЗ
багатьох", що показує, що кожен користувач може мати декілька
замовлень;
‒ кожне замовлення належить конкретному користувачеві, зв'язок
"багато до одного".
2 Замовлення (Order) і Пристрої (Device):
‒ замовлення може містити багато товарів, вказано зв'язок "один до
багатьох", що показує, що в одному замовленні може бути декілька
товарів;
‒ багато товарів може містити замовлення, вказано зв'язок "багато до
одного", що показує, що в одному замовленні може бути декілька
товарів.
3 Користувач (User) і Кошик (Cart):
‒ кожен користувач має свій кошик, вказано зв'язок "один до одного",
що означає, що кожен користувач має лише один кошик.
4 Кошик (Cart) і Пристрої (Device):
‒ кожен кошик може містити багато товарів, вказано зв'язок "один до
багатьох", що показує, що в кошику може бути декілька товарів.
5 Пристрої (Device) і Бренд (Brand):
‒ кожен товар належить певному бренду, зв'язок "багато до одного",
показує, що багато товарів можуть належати до одного бренду.
6 Пристрої (Device) і Тип (Type):
‒ кожен товар відноситься до певного типу, зв'язок "багато до
одного", що показує, що кілька товарів можуть відноситися до
одного типу.
7 Інформація про продукт (ProductInfo) і Пристрої (Device):
‒ інформація про пристрій може бути пов'язана з пристроєм, зв'язок
"один до багатьох", оскільки товар може мати багато інформацій
про пристрої.
2.3.2 Діаграма пакетів
37
ЧДТУ 242235.002 ПЗ
Під час розробки інтернет-магазину електроніки важливо ретельно
структурувати програмний комплекс, щоб забезпечити його ефективність,
функціональність та зручність як для користувачів, так і для адміністраторів.
Інтеграція модулів, розподіл функціоналу та прозорість роботи різних
компонентів є ключовими успішного функціонування системи.
Опис пакетів:
1 Користувацький інтерфейс(Frontend):
‒ інтерфейс користувача: цей пакет містить всі компоненти,
необхідні для відображення веб-сторінок або мобільного додатку
інтернет-магазину. Сюди входять сторінки каталогу товарів,
деталізація товарів, сторінка кошика, оформлення замовлення та
інші інтерфейси для користувачів.
‒ інтерфейс адміністратора: цей пакет включає в себе панель
управління для адміністратора магазину. Тут знаходяться
інструменти для додавання/редагування товарів, керування
замовленнями, управління користувачами та налаштування системи.
2 Серверна частина(Backend):
‒ модуль інформації про товари: логіка, що відповідає за взаємодію з
базою даних щодо товарів. Це включає отримання, оновлення,
видалення та додавання нових товарів.
‒ модуль авторизації та реєстрації: цей модуль відповідає за
аутентифікацію користувачів, перевірку доступу та процес
реєстрації нових користувачів.
‒ модуль замовлення: управління процесом оформлення та обробки
замовлень користувачів. Це включає взаємодію з кошиком, обробку
оплати та створення замовлень.
‒ модуль кошика: логіка, яка керує товарами, що додані в кошик
покупця. Модуль дозволяє додавати, видаляти та змінювати
кількість товарів у кошику.
3 База даних: це місце зберігання всієї інформації про товари,
38
ЧДТУ 242235.002 ПЗ
користувачів, замовлення та інші дані, необхідні для коректної роботи
системи. Сюди входять таблиці товарів, клієнтів, замовлень,
інформацію про сесії та інше.
Ця структура пакетів надає відокремленість функціоналу, полегшує
розробку та підтримку системи і забезпечує кращу масштабованість для
подальших змін та доповнень.
Рисунок 2.4 – Діаграма пакетів інтернет магазину
2.4 Архітектурне проектування
Етап архітектурного проектування інформаційної системи включає
детальний процес об’єктно-орієнтованої декомпозиції системи. Це означає
розбиття системи на підсистеми, визначення їх функціональних зв’язків та
взаємодій. Кожна підсистема чітко окреслена, із зазначенням її ролі та відношень
39
ЧДТУ 242235.002 ПЗ
з іншими підсистемами.
Крім того, архітектурне проектування включає опис логічної структури
системи у вигляді пакетів компонентів. Це передбачає створення діаграм
компонентів, які показують, як різні програмні класи, модулі та підсистеми
об’єднуються у функціональні блоки. Цей опис допомагає зрозуміти, з яких
основних елементів складається система, як вони організовані та взаємодіють
між собою, забезпечуючи основу для подальшої реалізації та розгортання
системи.
2.4.1 Діаграма компонентів
Діаграма компонентів – це вид діаграми, що використовується в розробці
програмного забезпечення для відображення архітектури системи та залежність
між її компонентами. Діаграма компонентів зображує окремі компоненти
програмної системи, їх інтерфейси та залежності між ними. Ця діаграма
допомагає у розумінні, як окремі компоненти системи взаємодіють між собою та
як вони розподілені між фізичними або логічними областями.
На діаграмі компонентів інтернет магазину електроніки (рисунок 2.4),
зображено взаємодію компонентів, які становлять інтернет-магазин електроніки.
Ці компоненти включають інтерфейс користувача та адміністратора(Frontend),
логіка операцій з товарами, замовленнями, авторизація та реєстрація(Backend) та
сховище для даних товарів, замовлень та користувачів(Database).
Клієнтська частина(Frontend) містить в собі:
‒ інтерфейс адміністратора (сторінка адміністратора): це компонент, який
відповідає за візуальний інтерфейс та функціональність, доступну для
адміністратора системи. тут можуть бути реалізовані інструменти керування
товарами, замовленнями та налаштуваннями системи.
‒ інтерфейс користувача (каталог товарів, кошик, сторінка користувача):
це набір компонентів, які забезпечують візуальний інтерфейс та
функціональність для звичайного користувача. тут можуть бути реалізовані
сторінки перегляду товарів, управління кошиком, профіль користувача та інші.
Серверна частина(Backend) компонент містить в собі:
40
ЧДТУ 242235.002 ПЗ
‒ система управління товарами: цей компонент містить логіку, необхідну
для управління товарами: додавання, видалення, редагування інформації про
товари.
‒ система управління замовленнями: тут реалізовано логіку замовлень:
обробка нових замовлень, оновлення статусу замовлень тощо.
‒ система авторизації та реєстрації: компонент, що відповідає за
автентифікацію та авторизацію користувачів, а також за їх реєстрацію в системі.
База даних(Database) компонент містить в собі:
‒ сховище товарів: база даних, де зберігається вся інформація про товари:
характеристики, категорії, ціни тощо.
‒ сховище замовлень: база даних, де зберігаються дані про замовлення
користувачів, їх статуси та інші відомості.
‒ сховище користувачів: тут зберігаються дані користувачів: персональні
дані, інформація про акаунти та інше.
Інтерфейс адміністратора та Система управління товарами /
замовленнями: Інтерфейс адміністратора взаємодіє з системою управління
товарами та замовленнями, щоб дозволити адміністратору додавати, видаляти
або редагувати інформацію про товари та управляти замовленнями.
Інтерфейс користувача та Система авторизації / Система управління
замовленнями: Користувацький інтерфейс пов'язаний з системою авторизації
для входу користувачів і системою управління замовленнями для оформлення та
перегляду замовлень.
Система управління товарами / замовленнями та Сховище товарів /
замовлень: Система управління взаємодіє з базою даних товарів та замовлень
для збереження, отримання та зміни інформації.
Інтерфейс користувача / адміністратора та Сховище товарів /
замовлень: Frontend використовує базу даних для отримання інформації про
товари, замовлення та користувачів для відображення на сторінках інтерфейсу.
Система управління користувачами та Система авторизації /
реєстрації: Щоб автентифікувати користувачів і зберігати їх дані, система
41
ЧДТУ 242235.002 ПЗ
управління користувачами взаємодіє з системою авторизації / реєстрації.
Інтерфейси адміністратора / користувача та Backend-сервіси (товари,
замовлення, авторизація): Інтерфейси взаємодіють зі відповідними сервісами
backend для отримання необхідних даних та виконання дій.
Рисунок 2.5 – Діаграма компонентів інтернет магазину
42
ЧДТУ 242235.002 ПЗ
2.4.2 Розгортання програмної системи на апаратних засобах. Діаграма
розгортання.
Діаграма розгортання вказує на апаратні засоби та програмне забезпечення,
яке використовується в системі та їхні взаємозв'язки. Розгортання програмної
системи на апаратних засобах для інтернет-магазину електроніки виглядає
наступним чином:
1 Апаратні засоби:
‒ веб-сервер: для обробки запитів від користувачів та надання веб-
сторінок;
‒ база даних: де зберігається інформація про товари, замовлення,
користувачів і т.д;
‒ сервер для обробки замовлень: для автоматизованої обробки та
виконання замовлень.
2 Програмне забезпечення:
‒ веб-додаток (Frontend): клієнтська частина, яка взаємодіє з
користувачем через веб-браузер;
‒ серверний додаток (Backend): серверна частина, яка обробляє
запити від веб-додатку та взаємодіє з базою даних;
‒ база даних: місце для зберігання даних про товари, замовлення,
користувачів тощо.
3 Взаємозв'язки:
‒ веб-сервер взаємодіє з клієнтами (користувачами) через HTTPS
протоколи;
‒ серверна частина (Backend) взаємодіє з базою даних для отримання
/ зберігання даних, відповідно до запитів від користувацької
частини.
4 Інші компоненти:
‒ система платежів: якщо є інтегрованим, то може взаємодіяти з
серверною частиною(Backend) для операцій з оплатою;
43
ЧДТУ 242235.002 ПЗ
‒ API інтеграції: якщо необхідно, інші служби можуть взаємодіяти з
серверною частиною(Backend) через API для обміну даними.
Діаграма розгортання відображає, розміщення компонентів інтернет
магазину електроніки та їхню взаємодію між собою та з апаратними засобами.
Рисунок 2.6 – Діаграма розгортання для інтернет магазину
2.5 Моделювання поведінки системи
Модель поведінки системи визначає, як саме система працює і взаємодіє з
іншими компонентами. Для цього використовуються різні типи діаграм, такі як
діаграми діяльності, послідовності, комунікації та скінченого автомата. Діаграма
44
ЧДТУ 242235.002 ПЗ
діяльності відображає послідовність дій в рамках процесу, діаграма
послідовності показує взаємодії між об'єктами, діаграма взаємодії описує обмін
інформацією, а діаграма скінченого автомата моделює поведінку системи через
переходи між станами. Ці діаграми разом створюють повний опис того, як
система функціонує на рівні алгоритмів і взаємодії між її частинами.
2.5.1 Діаграма діяльності
Концепція діаграми діяльності допомагає систематизувати послідовні
кроки, які користувачі виконують у програмній системі. Ця діаграма відображає
ключові дії, які користувач може здійснити у електронному магазині під час
перегляду, вибору товарів та оформлення замовлення. Ось перелік етапів
діаграми діяльності:
1 Перегляд каталогу з товарами: користувач розпочинає з перегляду
товарів у каталозі.
2 Вибір та додавання товарів в кошик: після перегляду користувач може
обрати товари та додати їх у кошик.
3 Змінити кількість товарів: користувач може змінити кількість товарів у
кошику.
4 Розрахувати загальну суму: система розраховує загальну суму з
урахуванням вибраних товарів.
5 Оформити замовлення: користувач вирішує купити товари у кошику і
переходить до оформлення замовлення.
6 Авторизований користувач?: система перевіряє, чи авторизований
користувач.
7 Користувач є адміністратором?: якщо користувач - адміністратор, він
має доступ до додавання, редагування та видалення товарів, а також
перегляду замовлень.
8 Ввести дані для замовлення: користувач вводить дані для здійснення
оформлення замовлення.
9 Завершити замовлення: після оплати користувач завершує процес
замовлення.
45
ЧДТУ 242235.002 ПЗ
Кожен етап послідовності процесів, від вибору товару до завершення
замовлення, має свої власні операції, які користувач може виконати. Діаграма
надає зручний спосіб відображення цих дій, допомагаючи розуміти послідовність
операцій у системі.
Крім того, враховуючи роль адміністратора, діаграма показує різницю між
можливостями користувача і правами адміністратора, дозволяючи керувати
товарами та переглядати замовлення
На рисунку 2.6 представлений загальний алгоритм використання системи у
вигляді діаграми діяльності.
Рисунок 2.7 – Діаграма діяльності замовлення товару для інтернет магазину
46
ЧДТУ 242235.002 ПЗ
Рисунок 2.8 – Продовження діаграми діяльності замовлення товару для інтернет
магазину
2.5.2 Діаграма послідовності
Діаграма послідовності для інтернет-магазину електроніки відображає
послідовність подій та взаємодію різних частин системи під час процесу вибору,
додавання товарів у кошик, оформлення та завершення замовлення. Далі йде
опис діаграми:
1 Перегляд каталогу товарів: користувач переглядає товари, які доступні
у магазині.
2 Вибір та додавання товарів у кошик: користувач обирає певні товари та
додає їх у кошик для покупки.
3 Зміна кількості товарів у кошику: користувач може змінити кількість
товарів у кошику перед оформленням замовлення.
4 Оформлення замовлення: користувач оформляє замовлення на певні
47
ЧДТУ 242235.002 ПЗ
товари.
5 Авторизація користувача: якщо користувач ще не авторизований, він
увійде або зареєструється.
6 Введення даних платежу: користувач вводить дані платежу для
завершення замовлення.
7 Завершення замовлення: після введення необхідної інформації
користувач завершує процес оформлення замовлення.
8 Перегляд інформації для адміністратора: якщо користувач є
адміністратором, він може переглянути додаткову інформацію щодо
замовлень та товарів.
Це загальний опис послідовності подій у діаграмі, яка відображає типовий
сценарій взаємодії користувачів з інтернет-магазином електроніки.
Рисунок 2.9 – Діаграма послідовності для інтернет магазину
48
ЧДТУ 242235.002 ПЗ
2.5.3 Діаграма комунікації
Ця діаграма комунікації відображає послідовність дій та обміну
інформацією між різними об'єктами, які беруть участь у процесі покупки товарів
у нашому інтернет-магазині електроніки. Цей процес охоплює від вибору товару
до завершення замовлення та включає можливість авторизації користувача.
Діаграма відображає логіку взаємодії між користувачем та системою,
допомагаючи уявити послідовність операцій для успішного завершення покупки.
Загальний огляд етапів комунікації що відбувається з інтернет магазином:
1 Початок: початок процесу.
2 Перегляд каталогу з товаром: користувач переглядає товари, доступні
для покупки та обирає товари.
3 Додавання товарів до кошика: користувач додає вибрані товари до
свого кошика.
4 Товари в кошику?: перевірка, чи є товари в кошику. Якщо так,
користувач може змінити кількість товарів.
5 Зміна кількості товарів: користувач редагує кількість вибраних товарів
у кошику.
6 Авторизований?: перевірка, чи користувач авторизований. Якщо так,
процес оформлення замовлення. Якщо ні, користувач може замовити
товар без авторизації, заповнивши відповідні поля даними для
підтвердження замовлення.
7 Оформлення замовлення: користувач оформляє замовлення на
придбання товарів.
8 Авторизуватися: користувач авторизується в системі, для перегляду
профіля та історії покупок в інтернет магазині.
9 Профіль користувача: користувач може переглянути особисту
інформацію або історію замовлень.
10 Сторінка товару: користувач може переглянути інформацію про товар,
та додати товар до кошика.
49
ЧДТУ 242235.002 ПЗ
Рисунок 2.10 – Діаграма комунікації для інтернет магазину
2.5.4 Діаграма скінченного автомату
Ця діаграма скінченного автомату демонструє стани і переходи для
користувачів та адміністраторів. Користувач може переглядати каталог, додавати
товари у кошик та оформлювати замовлення. У разі успішного оформлення
замовлення користувач вводить дані для замовлення або авторизується, після
чого замовлення завершується. Адміністратор може переглядати замовлення,
товари, редагувати та видаляти їх.
50
ЧДТУ 242235.002 ПЗ
Рисунок 2.11 – Діаграма скінченого автомату для адміністратора інтернет
магазину
Ось опис діаграми скінченного автомату адміністратора для інтернет-
магазину. Після запуску веб-додатку інтернет магазину електроніки ми побачимо
каталог товарів. Для того щоб зайти в профіль адміністратора потрібно
авторизуватись з роллю адміністратора. Після авторизації адміністратор має такі
функції:
‒ перегляд замовлень: перегляд усіх зроблених замовлень;
‒ перегляд товарів: огляд існуючих товарів у магазині.;
‒ додавання товарів: можливість додавати товари до каталогу;
‒ редагування товарів: можливість змінювати дані про товари;
− видалення товарів: опція вилучення певного товару з каталогу;
− додавання брендів: можливість додавати бренди до фільтрації;
− додавання типів: можливість додавати типи до фільтрації;
51
ЧДТУ 242235.002 ПЗ
− редагування брендів: опція змінювати дані про бренди;
− редагування типів: опція змінювати дані про типи.
Рисунок 2.12 – Діаграма скінченого автомату замовлення товарів в
інтернет магазині
Ось опис діаграми скінченного автомату для замовлення товарів в інтернет-
магазині:
1 Неавторизований користувач:
‒ початковий стан: користувач, який ще не увійшов в систему;
‒ перегляд каталогу: відображення доступних товарів;
‒ вибір товару: можливість вибору товару для перегляду деталей.
‒ додавання у кошик: додавання обраного товару у кошик.
52
ЧДТУ 242235.002 ПЗ
‒ видалення з кошика: вилучення товару з кошика.
‒ оформлення замовлення: процес оформлення покупки.
2 Оформлення замовлення:
‒ Введення даних замовлення: Введення необхідних даних для
здійснення оплати.
‒ Підтвердження замовлення: Успішне завершення процесу
замовлення після введення даних.
Ця діаграма відображає можливості користувачів інтернет-магазину, їхні дії
та доступні переходи між станами системи в залежності від дій користувачів.
53
ЧДТУ 242235.002 ПЗ
ВИСНОВОКИ ДО ДРУГОГО РОЗДІЛУ
В даному розділи було спроектовано модель предметної області,
сформований словник предметної області та основні елементи предметної
області. Також в даному розділі було визначено основні вимоги до програмного
забезпечення, а також первинні, детальні вимоги. Також було описано вимоги
розробки і розробника. На основі цього були зазначенні функціональні та
нефункціональні вимоги та сформована діаграма прецедентів. За допомогою
діаграми класів та пакетів було спроектовано логічну структуру програмного
комплексу. Діаграма компонентів та діаграма розгортання були розроблені для
архітектурного проектування. Моделювання поведінки системи було аналізовано
на основі діаграм діяльності, послідовності, комунікації та скінченного автомату.
54
ЧДТУ 242235.002 ПЗ
РОЗДІЛ 3 РОЗРОБКА ТА ТЕСТУВАННЯ ПРОГРАМНОГО
ЗАБЕЗПЕЧЕННЯ
3.1 Розробка програмного комплексу
3.1.1 Обґрунтування вибору засобів реалізації
Засобами розробки були обрані Java зі Java Spring Boot фреймворк на
серверній частині(Backend) та JavaScript фреймворк React на клієнтській
частині(Frontend), системою керування базою даних було обрано PostgreSQL.
Загальна схема використаних технологій та засобів показана на рисунок 3.1.
Рисунок 3.1 – Загальна схема використаних технологій
Java є однією з найбільш популярних мов програмування у світі. Вона
відома своєю надійністю, кросплатформеністю, широким спектром застосувань і
великою спільнотою розробників. Ось деякі ключові особливості та переваги
Java:
1 Надійність і безпека: Java відома своєю надійністю і стійкістю до
помилок. Вона має вбудовану систему обробки винятків, яка дозволяє
розробникам ефективно керувати помилками. Крім того, Java має
вбудовані механізми безпеки, що дозволяють запобігати вразливостям і
атакам.
2 Кросплатформеність: Java є платформо-незалежною мовою
55
ЧДТУ 242235.002 ПЗ
програмування, що означає, що програми, написані на Java, можуть
працювати на різних операційних системах без змін. Це робить Java
ідеальним вибором для розробки кросплатформених додатків.
3 Об'єктно-орієнтованість: повністю об'єктно-орієнтована мова
програмування, що дозволяє розробникам створювати легко зрозумілі,
підтримувані та масштабовані програми. Об'єктно-орієнтований підхід
сприяє використанню кращих практик програмування, таких як
інкапсуляція, спадкування і поліморфізм.
4 Широкі можливості застосування: Java використовується для розробки
різноманітних типів програм, від веб-додатків і мобільних додатків до
корпоративних систем і вбудованих додатків. Вона є основною мовою
програмування для Android-розробки та широко використовується в
корпоративному середовищі.
5 Велика екосистема: Java має велику спільноту розробників і багато
сторонніх бібліотек та фреймворків, що полегшують розробку програм.
Це включає в себе такі інструменти, як Spring Framework, Hibernate,
Maven, Gradle та багато інших.
Java Spring Boot - це фреймворк, який спрощує розробку веб-додатків на
Java, забезпечуючи швидку настройку та структуру проекту. Він базується на
основних принципах Spring Framework, таких як інверсія керування і введення
залежностей, і додає до цього автоматичну конфігурацію і вбудовані сервери, що
робить розробку веб-додатків на Java ще швидше і простіше.
Java Spring Boot є одним з найпопулярніших фреймворків для розробки
веб-додатків на мові програмування Java. Він вирізняється кількома ключовими
особливостями:
1 Швидке налаштування: Однією з ключових переваг Spring Boot є його
можливість швидко створювати і запускати веб-додатки з
мінімальними конфігураційними зусиллями. Завдяки вбудованій
конфігурації, Spring Boot автоматично налаштовує багато компонентів,
що дозволяє розробникам швидко переходити до розробки бізнес-
56
ЧДТУ 242235.002 ПЗ
логіки.
2 Вбудовані сервери: Spring Boot постачається з вбудованими серверами
додатків, що дозволяє запускати веб-додатки без необхідності
встановлення та налаштування зовнішнього сервера додатків.
3 Спрощене введення залежностей: Spring Boot забезпечує потужну
систему введення залежностей, що дозволяє легко управляти
компонентами додатку та їх взаємозв'язками. Це полегшує тестування
та підтримку коду.
4 Моноліт або мікросервіси: Spring Boot дозволяє розробляти як
монолітні, так і мікросервісні додатки. Він надає інструменти для
створення та управління мікросервісами, що спрощує розгортання та
масштабування додатків у розподіленому середовищі.
5 Багатофункціональність: Spring Boot має велику кількість вбудованих
функціональностей і додаткових модулів, що дозволяє розробникам
швидко і ефективно створювати різноманітні види додатків, від
простих веб-сайтів до складних корпоративних систем.
6 Підтримка стандартів: Spring Boot підтримує широкий спектр
стандартів і технологій, JPA для роботи з базами даних, Spring Security
для забезпечення безпеки додатків та інші.
Архітектура Java Spring Boot базується на патерні проектування "Model-
View-Controller" (MVC), що розділяє додаток на три основні компоненти: модель
(Model), представлення (View) та контролер (Controller). Ось короткий огляд
кожного з цих компонентів:
‒ модель (model): це компонент, який відповідає за обробку даних та
бізнес-логіки. модель представляє собою об'єкти даних, які
використовуються в додатку, а також методи для роботи з цими
даними. в java spring boot модель може бути реалізована за допомогою
pojo (plain old java object) або сутностей jpa (java persistence api), які
взаємодіють з базою даних;
‒ представлення (view): це компонент, який відповідає за відображення
57
ЧДТУ 242235.002 ПЗ
даних користувачу. в java spring boot представлення може бути
сторінкою html, шаблоном react. представлення отримує дані з моделі
та відображає їх у вигляді, зрозумілому для користувача;
‒ контролер (controller): це компонент, який відповідає за обробку запитів
користувача та взаємодію з іншими компонентами. контролер приймає
http-запити від користувача, викликає відповідні методи моделі для
обробки даних та передає результати в представлення для
відображення. в java spring boot контролери позначаються анотаціями,
що вказують на url-шляхи, за якими вони слухають запити;
Рисунок 3.2 – Патерн Model-View-Controller (MVC) для серверної частини
Крім основних компонентів MVC, в архітектурі Java Spring Boot також
можуть бути використані інші компоненти, такі як сервіси (Services) для логіки
додатку, репозиторії (Repositories) для роботи з базою даних, фільтри (Filters) для
обробки запитів та інші.
58
ЧДТУ 242235.002 ПЗ
Загалом, архітектура Java Spring Boot дозволяє ефективно організувати свої
додатки, розділяючи їх на окремі компоненти з чіткою відповідальністю, що
полегшує тестування, розширення та підтримку коду.
JavaScript є однією з найпопулярніших мов програмування у світі,
особливо в контексті веб-розробки. Вона використовується для створення
динамічних та інтерактивних веб-сторінок. Основні риси JavaScript включають:
1 Динамічна типізація: в JavaScript типи змінних визначаються
автоматично під час виконання програми.
2 Об'єктно-орієнтоване програмування: JavaScript підтримує об'єктно-
орієнтований підхід, де об'єкти можуть мати властивості та методи.
3 Функціональне програмування: JavaScript підтримує функціональне
програмування, дозволяючи використовувати функції як значення.
4 Динамічне програмування: JavaScript дозволяє змінювати структуру
програми в ході її виконання.
5 Широке використання: JavaScript використовується не тільки для веб-
розробки, але й для створення мобільних додатків (за допомогою
фреймворків, таких як React Native), розробки серверних додатків (за
допомогою Node.js), розширення можливостей веб-сторінок (за
допомогою бібліотек, таких як jQuery), тощо.
React - це бібліотека JavaScript, розроблена компанією Facebook,
призначена для створення користувацьких інтерфейсів (UI). Основні
характеристики React включають:
‒ компонентна архітектура: react базується на ідеї розділення інтерфейсу
на невеликі, самодостатні компоненти, які можуть бути легко
перевикористані та мають власний стан;
‒ віртуальний dom: react використовує віртуальний dom для оптимізації
швидкості оновлення інтерфейсу. він автоматично визначає, які
частини сторінки повинні бути оновлені, і оновлює їх, не
перезавантажуючи всю сторінку;
‒ jsx: jsx - це розширений синтаксис javascript, який дозволяє включати
59
ЧДТУ 242235.002 ПЗ
html-подібні теги безпосередньо в код javascript. це полегшує створення
шаблонів інтерфейсу в react;
‒ реактивність: react реагує на зміни в стані додатку та автоматично
оновлює відповідні частини інтерфейсу;
‒ комплектація та екосистема: react має велику кількість додаткових
бібліотек та інструментів, що дозволяють розширювати його
функціональність та полегшують розробку.
В цілому, JavaScript та React - це потужні інструменти для створення веб-
застосунків, які забезпечують швидку, ефективну та інтерактивну розробку
користувацького інтерфейсу.
PostgreSQL є однією з найпопулярніших відкритих систем керування
базами даних (СКБД). Ось деякі ключові аспекти PostgreSQL:
‒ відкритий код: PostgreSQL є вільною та відкритою для використання та
модифікації. Це означає, що ви можете використовувати, змінювати та
розповсюджувати її безкоштовно.
‒ реляційна модель даних: PostgreSQL використовує реляційну модель
даних, що означає, що дані організовані у вигляді таблиць з рядками та
стовпцями. це дозволяє забезпечити структуроване та ефективне
зберігання даних.
‒ підтримка SQL: PostgreSQL підтримує мову запитів SQL, стандартний
мовний інтерфейс для роботи з базами даних. це робить її досить
сумісною з іншими СКБД та інструментами.
‒ розширені функціональні можливості: PostgreSQL має великий набір
вбудованих функцій та функціональностей, які дозволяють ефективно
керувати даними. вона підтримує розширення, які дозволяють додавати
нові типи даних, функції та інші можливості.
‒ масштабованість: PostgreSQL підтримує різні методи масштабування,
включаючи горизонтальне та вертикальне масштабування. це дозволяє
забезпечити високу продуктивність та доступність для великих обсягів
даних.
60
ЧДТУ 242235.002 ПЗ
У цілому, PostgreSQL є потужною та надійною СКБД, яка підходить для
широкого спектру застосувань, від невеликих веб-сайтів до великих
корпоративних систем. Вона надає розширені можливості управління даними,
гнучкість та високий рівень безпеки.
3.1.2 Опис структурної схеми
Для побудови веб-додатку для інтернет магазину електроніки використано
таку функціональну схему. На даній схемі представлено моделювання
архітектури інтернет-магазину електроніки. Вона відображає різноманітні
функції та взаємозв'язки між різними частинами магазину, які включають
управління товарами, каталогом, замовленнями, а також функціональність для
клієнтів, таку як перегляд товарів та оформлення покупок. На схемі показано як
компоненти системи взаємодіють між собою, щоб забезпечити ефективну та
зручну платформу для як клієнтів, так і адміністраторів магазину.
Рисунок 3.3 – Структурна схема інтернет магазину електроніки
Ось опис компонентів та функцій даної схеми:
1 Клієнтська частина:
61
ЧДТУ 242235.002 ПЗ
‒ перегляд каталогу товарів: це перша стадія, де клієнти можуть
бачити всі доступні товари. це може включати категорії товарів,
фільтри і можливість сортування;
‒ вибір товару: після перегляду каталогу клієнти можуть переходити
до конкретного товару для отримання детальної інформації, такої як
опис, зображення, відгуки тощо;
‒ додавання товарів в кошик: після того як клієнт вибрав товар, він
може додати його до кошика для подальшого оформлення
замовлення;
‒ перегляд товарів в кошику: тут клієнти можуть переглядати список
товарів, які вони вибрали для покупки, разом зі зведеною
інформацією про кількість і ціну;
‒ оформлення замовлення: це останній крок, де клієнти вказують
необхідну інформацію для доставки, спосіб оплати та
підтверджують своє замовлення.
2 Адміністративна частина:
‒ управління товарами, типами, брендами тощо: адміністратор
магазину має можливість додавати, редагувати та видаляти товари,
а також керувати типами товарів, брендами тощо.
‒ редагування бази даних: адміністратор може вносити зміни до бази
даних, наприклад, змінювати ціни, описи або іншу інформацію про
товари.
‒ управління замовленнями: це включає перегляд замовлень, зміну
статусів (наприклад, відправлено, доставлено) і взагалі керування
процесом обробки замовлень.
Всі ці компоненти взаємодіють між собою через систему управління базою
даних та логічні контролери, які обробляють запити користувачів і
адміністраторів. Така архітектура дозволяє забезпечити ефективну та зручну
роботу як для клієнтів, так і для адміністраторів магазину.
3.1.3 Опис логічної схеми системи
62
ЧДТУ 242235.002 ПЗ
Архітектура додатку представлено на рисунку 3.4. Модулі нашого додатку
можна поділити на 3 основні функціональні частини:
− клієнтська частина (frontend), служить для взаємодії користувача з
нашим інтернет магазином.
− серверна частина (backend), відповідає за обробку всіх подій які
приходять від взаємодії користувача з клієнтською частиною.
− база даних, використовується для збереження всіх даних нашого
додатку.
Рисунок 3.4 – Логічна схема інтернет магазину
Серверна частина (Backend) складається з 4 основних компонентів:
− контролери (controllers): це класи, які приймають https-запити від
клієнтів та маршрутизують їх до відповідних сервісів або компонентів.
− сервіси (services): класи, які містять бізнес-логіку додатку. вони
виконують операції, які необхідні для обробки запитів, та можуть
взаємодіяти з репозиторіями для отримання та збереження даних.
− репозиторії (repositories): це інтерфейси або класи, які взаємодіють з
базою даних для виконання операцій зчитування та запису.
− моделі (models): представлення даних в додатку, які відображають
об'єкти доменної моделі та сутності, з якими працює додаток.
Вебсайт інтернет магазин електроніки розроблений за допомогою
інтегрованого середовища розробки IntelliJ IDEA. Структура проекту
63
ЧДТУ 242235.002 ПЗ
представлена на рисунку 3.5. В структурі проекту можна помітити відповідні
директорії для зберігання елементів які зображені в структурі модулів системи
(рисунок 3.4). А саме: controller, service, model, repository та інші. В яких
розміщенні конфігурація та бізнес логіка проекту.
Рисунок 3.5 – Структура серверної частини
3.1.4 Розробка бази даних
Спроектована база даних складається з тринадцяти таблиць які між собою
зв’язками (рисунок 3.5). Таблиці призначенні для збереження даних необхідних
для роботи вебсайту інтернет магазину електроніки, а саме: таблиця пристроїв,
64
ЧДТУ 242235.002 ПЗ
таблиця інформації про товар, бренди, типи, користувачі, інформація про
користувача, замовлення тощо.
Рисунок 3.6 – Модель бази даних інтернет магазину електроніки
Детальний опис призначення і структури таблиць. Таблиця devices
(пристрої) містить в собі інформацію про товари, що будуть відображатись в
каталозі товарів. Структура таблиці бази даних наведена в таблиці 3.1
Таблиця 3.1
Структура таблиці Пристрої(devices)
№ п/п Назва поля Тип поля Ключ Опис
1 id bigint PK Ідентифікатор
2 name character varying Назва
3 price double precision Ціна
4 discounted_price double precision Ціна зі знижкой
5 rating integer Рейтинг
6 brand_id bigint FK Бренд
7 type_id bigint FK Тип
65
ЧДТУ 242235.002 ПЗ
Таблиця device_info (інформація про пристрій) призначена для зберігання
інформації про конкретний пристрій. Структура даної сутності бази даних
наведена в таблиці 3.2.
Таблиця 3.2
Структура таблиці Інформація про пристрій (device_info)
№ п/п Назва поля Тип поля Ключ Опис
1 id bigint PK Ідентифікатор
2 description character varying опис
3 title character varying назва
Ідентифікатор
4 device_id bigint FK
пристрою
Таблиця Бренди (Brands) являє собою перелік всіх брендів пристроїв які
продаються в інтернет магазині. Її структура наведена в таблиці 3.3.
Таблиця 3.3
Структура таблиці Бренди(rands)
№ п/п Назва поля Тип поля Ключ Опис
1 id bigint PK Ідентифікатор
2 name character varying назва
Таблиця Типи (Types) являє собою перелік всіх типів пристроїв які будуть
ділити пристрої для більш зручного пошуку в інтернет магазині. Її структура
наведена в таблиці 3.4.
Таблиця 3.4
Структура таблиці Типи(types)
№ п/п Назва поля Тип поля Ключ Опис
66
ЧДТУ 242235.002 ПЗ
Продовження таблиці 3.4
1 If bigint PK Ідентифікатор
2 name character varying назва
Таблиця Замовлення (orders) зберігає інформацію про всі оформлені
замовлення в інтернет магазині(таблиця 3.5).
Таблиця 3.5
Структура таблиці Замовлення(orders)
№ п/п Назва поля Тип поля Ключ Опис
1 id bigint PK Ідентифікатор
2 status character varying Статус
3 address character varying Адреса
4 name character varying Ім’я
5 phone character varying Телефон
6 surname character varying Прізвище
7 email character varying Електрона адреса
8 order_date timestamp without time zone Дата замовлення
Ідентифікатор
9 user_id bigint FK замовлення
Таблиця order_items (Замовлені товари) призначена для зберігання
інформації про замовленні пристрої. Структура даної сутності бази даних
наведена в таблиці 3.6.
Таблиця 3.6
Структура таблиці Замовлені товари(order_items)
Назва
№ п/п Тип поля Ключ Опис
поля
1 id bigint PK Ідентифікатор
67
ЧДТУ 242235.002 ПЗ
Продовження таблиці 3.6
Кількість
2 Quantity integer
Ідентифікатор
3 device_id bigint FK
пристрою
Ідентифікатор
4 order_id bigint FK замовлення
Таблиця Кошик (carts) зберігає інформацію про всі кошики які були додані
кожному окремо користувачу в інтернет магазині(таблиця 3.7).
Таблиця 3.7
Структура таблиці Кошик(carts)
Назва
№ п/п Тип поля Ключ Опис
поля
1 id bigint PK Ідентифікатор
2 user_id bigint FK Ідентифікатор користувача
Таблиця cart_devices (Пристрої в кошику) призначена для зберігання всіх
пристроїв які були додані до кошика користувачем. Структура даної сутності
бази даних наведена в таблиці 3.8.
Таблиця 3.8
Структура таблиці Пристрої в кошику(cart_devices)
Назва
№ п/п Тип поля Ключ Опис
поля
1 id bigint PK Ідентифікатор
2 quantity integer Кількість
Ідентифікатор
3 device_id bigint FK
пристрою
4 cart_id bigint FK Ідентифікатор кошика
Таблиця users (Користувачі) призначена для зберігання даних для
авторизації користувача які були зареєстровані на сайті. Структура даної
68
ЧДТУ 242235.002 ПЗ
сутності бази даних наведена в таблиці 3.9.
Таблиця 3.9
Структура таблиці Користувачі(users)
Назва
№ п/п Тип поля Ключ Опис
поля
1 id bigint PK Ідентифікатор
2 email character varying Електрона адреса
3 password character varying Пароль
4 username character varying Логін
Таблиця user_info (Інформація про користувача) призначена для зберігання
інформації про зареєстрованого користувача сайту. Структура даної сутності
бази даних наведена в таблиці 3.10.
Таблиця 3.10
Структура таблиці Інформація про користувача(user_info)
№ п/п Назва поля Тип поля Ключ Опис
1 id bigint PK Ідентифікатор
2 address character varying Адреса
3 first_name character varying Ім’я
4 phone_number character varying Телефон
5 last_name character varying Прізвище
6 user_id bigint FK Ідентифікатор замовлення
Таблиця Ролі (roles) зберігає інформацію про ролі для призначення
користувачам при реєстрації в магазині(таблиця 3.11).
Таблиця 3.11
Структура таблиці Ролі(roles)
Назва
№ п/п Тип поля Ключ Опис
поля
1 id bigint PK Ідентифікатор
2 name character varying Назва
69
ЧДТУ 242235.002 ПЗ
Таблиця Ролі користувачів (users_roles) додаткова таблиця яка зберігає
інформацію про користувачів та їхні ролі(таблиця 3.12).
Таблиця 3.12
Структура таблиці Ролі користувачів (users_roles)
Назва
№ п/п Тип поля Ключ Опис
поля
Ідентифікатор
1 user_id bigint PK
користувача
2 role_id integer FK Ідентифікатор ролі
Таблиця Фото (photos) додаткова таблиця яка зберігає інформацію про
шлях фото для пристроїв(таблиця 3.13).
Таблиця 3.13
Структура таблиці Фото (photos)
Назва
№ п/п Тип поля Ключ Опис
поля
1 photoid bigint PK Ідентифікатор
2 path character varying Шлях
3 device_id bigint FK Ідентифікатор пристрою
3.1.5 Розробка інтерфейсу користувача
На головній сторінці (рисунок 3.14) відображається каталог товарів
інтернет магазину. У лівій верхній частині меню присутній логотип сайту, також
у верху по середині є поле для пошуку товарів, що доступні для перегляду та
покупки. Праворуч знаходиться кнопки «Кошик» та «Профіль» визначені
певними іконками. Також на головній сторінці відображається фільтр товарів, а
саме: фільтр категорій(типів), брендів, ціни.
70
ЧДТУ 242235.002 ПЗ
Рисунок 3.7 – Головне вікно
Для переходу до сторінки Профіль користувача, потрібно авторизуватися
або зареєструватись. На модальному вікні авторизації (рисунок 3.15)
відображаються поля для введення даних для авторизації, а саме логіну
користувача та його паролю. Також кнопки «Увійти» та «Реєстрація», якщо
користувач немає профілю.
Рисунок 3.8 – Модальне вікно авторизації
Дизайн модального вікна реєстрації (рисунок 3.16) аналогічний дизайну
авторизації, але має додаткові поля електронної адреси та повторного введення
паролю для перевірки правильності.
71
ЧДТУ 242235.002 ПЗ
Рисунок 3.9 – Модальне вікно реєстрації
Після успішної авторизації на сторінці Профіль користувача (рисунок
3.17), з лівої частини зображена основна інформація про користувача(Прізвище,
ім’я, телефон) та вкладки Профіль, Мої замовлення тощо. А праворуч від списку
вкладок відображено робоче поле даних вкладок.
Рисунок 3.10 – Сторінка профілю користувача
72
ЧДТУ 242235.002 ПЗ
При перегляді каталогу пристроїв користувач може натиснути на
конкретний пристрій для перегляду сторінки пристрою(рисунок 3.18) на ній
зображено з лівого боку картинки даного пристрої, по середині основну
інформацію про товар(назва, ціна, рейтинг, інформація про доставку, оплату,
гарантію), а з правого боку сайту відображаються всі характеристики пристрою.
Рисунок 3.11 – Сторінка інформації про пристрій
Після перегляду каталогу пристроїв, а також перегляду інформації про
пристрої є можливість додати товар в кошик кнопкою «Купити», яка знаходиться
на головній сторінці(рисунок 3.14) або сторінці інформації про пристрій(рисунок
3.18). Сторінка кошика представлена у вигляді модального вікна(рисунок 3.19),
на ній зображено пристрої які були додані користувачем та їхня кількість також
для зручності є кнопка видалення товарів з кошика та очищення кошика
повністю.
73
ЧДТУ 242235.002 ПЗ
Рисунок 3.12 – Модальне вікно кошик
Сторінка оформлення замовлення(рисунок 3.20) складається з двох частин:
1 Оформлення без профіля – це вкладка яка відображає поля для вводу
інформації покупця без реєстрації або авторизації.
2 Авторизуватись – це вкладка яка відображає поля для авторизації після
чого автоматично підтягує дані користувача з його профілю для
замовлення.
Також під полями з даними користувача відображається весь список
товарів, які входять до замовлення та вся інформація про них та замовлення.
Рисунок 3.13 – Сторінка оформлення замовлення
74
ЧДТУ 242235.002 ПЗ
Після оформлення замовлення можна переглянути замовлення на сторінці
профілю(рисунок 3.17) у вкладці Мої замовлення(рисунок 3.21).
Рисунок 3.14 – Вкладка мої замовлення
Адміністративна частина нашого інтернет магазину включає в себе
можливість додавати, редагувати та видаляти товари, бренди, категорії(типи)
тощо. Також переглядати всі замовлення та керувати статусом замовлення. Ці всі
функції будуть даватися тільки профілям які матимуть роль адміністратора.
Інтерфейс адміністратора(рисунок 3.22) аналогічний тільки на сторінці
профілю додаються вкладка Адміністрування та Всі замовлення.
Рисунок 3.15 – Сторінка профіль адміністратора
75
ЧДТУ 242235.002 ПЗ
3.1.6 Опис розробки програмних компонентів
У даному пункті наведено опис розроблених модулів та структурних
компонентів для сторінки інтернет-магазину, створеної за допомогою React.
Опис містить призначення модуля, зв’язки з іншими компонентами розробки,
особливості реалізації алгоритму, а також використані методи, технології та
компоненти.
1 Компонент ShopPage
Компонент ShopPage є основною сторінкою інтернет-магазину, яка містить
логіку та структуру для відображення списку пристроїв, фільтрів за брендами та
типами, а також додавання товарів до кошика користувача.
Зв’язки з іншими компонентами:
‒ Header: відповідає за верхню частину сторінки, включаючи функціонал
пошуку.
‒ TypeBar: дозволяє користувачу обирати тип пристроїв.
‒ BrandBar: дозволяє користувачу обирати бренд пристроїв.
‒ DeviceList: відображає список пристроїв, що відповідають обраним
фільтрам.
‒ Footer: відображає нижній колонтитул сторінки.
Особливості реалізації алгоритму:
‒ використання react hook usestate для керування станом компонентів,
таких як пристрої, бренди, типи, обрані фільтри, цінові межі, стан
завантаження та помилки.
‒ Hook useEffect для асинхронного завантаження даних при зміні обраних
фільтрів (типи, бренди, цінові межі).
‒ виклик асинхронних функцій з модуля deviceapi для отримання даних з
сервера: fetchbrands: завантаження списку брендів, fetchtypes:
завантаження списку типів пристроїв, fetchdevices: завантаження
списку пристроїв відповідно до обраних фільтрів, fetchalldevicesbasket:
завантаження даних кошика користувача.
‒ фільтрація пристроїв за ціновими межами.
76
ЧДТУ 242235.002 ПЗ
‒ обробка подій користувача для зміни обраних фільтрів та додавання
пристроїв до кошика.
Використані методи та технології:
‒ React з хуками (useState, useEffect);
‒ компоненти material-ui для створення інтерфейсу користувача;
‒ асинхронні функції для запитів до api;
‒ CSS для стилізації компонентів.
2 Компонент DevicePage
Компонент DevicePage відповідає за відображення детальної інформації
про окремий пристрій, включаючи його характеристики, фотографії, ціну,
наявність, а також можливість додавання товару до кошика.
Зв’язки з іншими компонентами:
‒ Header: Відображає верхню частину сторінки, що включає навігацію.
‒ Footer: Відображає нижню частину сторінки з додатковою
інформацією.
‒ useUser: hook для отримання інформації про користувача.
‒ API функції (fetchOneDevice, fetchAllPhotoDevice,
fetchAllDevicesBasket, addToCart) з deviceAPI: Використовуються для
взаємодії з сервером.
Особливості реалізації алгоритму:
‒ використання хуків usestate та useeffect для керування станом
компонентів, таких як інформація про пристрій, фотографії пристрою,
вибране фото, дані кошика користувача та індикатор додавання до
кошика.
‒ hook useparams для отримання параметра id з url, що ідентифікує
конкретний пристрій.
‒ виклик асинхронних функцій з модуля deviceapi для отримання даних
про пристрій та фотографій: fetchonedevice: завантаження інформації
про пристрій за його ідентифікатором, fetchallphotodevice:
завантаження фотографій пристрою за його ідентифікатором,
77
ЧДТУ 242235.002 ПЗ
fetchalldevicesbasket: завантаження даних кошика користувача.
‒ обробка подій користувача для вибору фотографії та додавання
пристрою до кошика.
Використані методи та технології:
‒ React з хуками (useState, useEffect, useParams).
‒ компоненти Material-UI для створення інтерфейсу користувача.
‒ CSS для стилізації компонентів (DevicePage.css).
‒ локальне сховище (LocalStorage) для збереження даних кошика.
3 Компонент OrderPage
Компонент OrderPage відповідає за відображення сторінки оформлення
замовлення. Користувачі можуть вибирати між двома вкладками для оформлення
замовлення: як гість або авторизувавшись. Компонент також надає можливість
перегляду та видалення товарів з кошика.
Зв’язки з іншими компонентами:
‒ Header: Відображає верхню частину сторінки з навігацією.
‒ Footer: Відображає нижню частину сторінки з додатковою
інформацією.
‒ OrderList: Компонент для відображення списку товарів, доданих до
кошика.
‒ GuestOrderForm: Форма для оформлення замовлення без авторизації.
‒ LoginOrderForm: Форма для оформлення замовлення після авторизації.
‒ компоненти Material-UI для побудови інтерфейсу користувача.
Особливості реалізації алгоритму:
‒ використання hook useState та useEffect для керування станом
компонентів, таких як замовлені товари, вибрана вкладка та товари в
кошику.
‒ зчитування даних кошика з локального сховища (localStorage) під час
завантаження сторінки.
‒ використання вкладок для перемикання між формами оформлення
замовлення для гостя та авторизованого користувача.
78
ЧДТУ 242235.002 ПЗ
‒ обробка подій користувача для видалення товарів з кошика, яка
оновлює стан компонентів і локальне сховище.
Використані методи та технології:
‒ React з хуками (useState, useEffect).
‒ компоненти Material-UI для створення інтерфейсу користувача.
‒ CSS для стилізації компонентів (OrderPage.css).
‒ локальне сховище (LocalStorage) для збереження даних кошика.
3.2 Тестування системи
Тестування розробленої системи є важливим етапом, який включає ряд
ключових дій для забезпечення якості програмного забезпечення. Під час цього
процесу визначали об’єкти тестування, які можуть включати окремі модулі,
класи, компоненти або всю систему в цілому. Далі формулювали мету
тестування, що може охоплювати виявлення дефектів, перевірку відповідності
вимогам або підтвердження коректності функціонування системи. Вибір
технологій тестування включає в себе вибір інструментів і методик для
проведення тестів, які найбільш ефективно відповідають характеристикам
проекту. Після цього розробляються тестові сценарії, які охоплюють різні
аспекти функціональності системи і можуть включати модульне тестування для
окремих функцій, інтеграційне для взаємодії компонентів та системне для
перевірки цілісності і взаємодії всієї системи. Після проведення тестів
аналізуються отримані результати для ідентифікації дефектів, оцінки якості та
прийняття рішень щодо подальшого розвитку і вдосконалення системи.
3.2.1 Модульне тестування
Модульне тестування передбачає перевірку окремих модулів або
компонентів системи на коректність їх роботи. Основна мета модульного
тестування полягає в тому, щоб переконатись, що кожен модуль працює
правильно і відповідає вимогам специфікації.
Проведемо тестування модуля, зв’язаного з адмініструванням магазину,
перевіривши його основні функції. На рисунку 3.23 зображений інтерфейс
79
ЧДТУ 242235.002 ПЗ
модуля.
Рисунок 3.16 – Модуль адміністрування магазину
Для додавання нового товару в магазин, потрібно вибрати вкладку
Додавання. Після чого буде відкрито створення нового товару для додавання в
каталог магазину (рисунок 3.24) де необхідно вказати назву товару, рейтинг,
ціну, характеристики та вибрати бренд, тип. Максимальна оцінка рейтингу – 5.
Після заповнення всіх полів необхідно перевірити кнопку Додати товар. В
разі успішного відпрацювання товар буде доданий до бази даних системи та
користувач зможе побачити доданий товар в каталозі магазину(рисунок 3.25).
80
ЧДТУ 242235.002 ПЗ
Рисунок 3.17 – Модуль адміністрування магазину: створення нового товару
Рисунок 3.18 – Модуль каталог товарів магазину
Перевіримо можливість редагування товару, натиснувши відповідну
вкладку в модулі адміністрування. У відкритій вкладці(рисунок 3.26) ми маємо
змогу вибрати товар який потрібно редагувати. Після чого буде відображено всю
інформацію про товар, яку ми можемо редагувати. Для збереження потрібно
натиснути «Редагувати товар».
81
ЧДТУ 242235.002 ПЗ
Рисунок 3.19 – Модуль адміністрування магазину: редагування товару
Перевіримо можливість видалення, натиснувши відповідну вкладку в
модулі адміністрування. У відкритій вкладці(рисунок 3.27) ми маємо змогу
вибрати товар який потрібно видалити. В разі успішного відпрацювання
сценарію, товар буде видалений із бази даних.
Рисунок 3.20 – Модуль адміністрування магазину: видалення товару
82
ЧДТУ 242235.002 ПЗ
3.2.2 Інтеграційне тестування
Наступним етапом після модульного тестування є інтеграційне тестування,
що передує прийняттю системи в експлуатацію. Його мета полягає у перевірці
взаємодії між різними модулями або компонентами системи, щоб впевнитись в їх
правильній інтеграції та спільному функціонуванні.
Для інтеграційного тестування між декількома модулями, спробуємо
створити нове замовлення, в якій буде використано створений товар вище. Для
цього перейдемо до модуля «Каталог товарів»(рисунок 3.28) та натиснемо
кнопку «Купити» на картці товару(рисунок 3.29), для додавання товару до
корзини.
Рисунок 3.21 – Модуль каталог магазину
Рисунок 3.22 – Карточка товару
83
ЧДТУ 242235.002 ПЗ
Далі перейдемо в кошик(рисунок 3.30), де буде відображено всі товари які
були доданні для подальшого замовлення, для замовлення натиснемо «Оформити
замовлення»(рисунок 3.31).
Рисунок 3.23 – Кошик товарів після додавання
Рисунок 3.24 – Оформлення замовлення
84
ЧДТУ 242235.002 ПЗ
Для замовлення товарів нам потрібно заповнити всі обов‘язкові поля, або
авторизуватись для автоматичного заповнення даних полів даними з облікового
запису користувача. Після натискання кнопки «Оформити замовлення»,
замовлення буде створено та прийняте для обробки адміністратором.
Для перевірки статусу замовлення можемо перейти до модуля «Профіль
користувача» та вибрати вкладку «Мої замовлення»(рисунок 3.32).
Рисунок 3.25 – Профіль користувача (модуль мої замовлення)
Рисунок 3.26 – Створене замовлення в базі даних
85
ЧДТУ 242235.002 ПЗ
3.2.3 Системне тестування
Системне тестування є одним з основних тестувань, під час даного
тестування було перевірено основні функціональні компоненти, також оцінку
продуктивності та зручності використання. Це тестування включало в себе різні
сценарії роботи системи, включаючи взаємодію користувача з системою,
обробку даних, виконання бізнес-логіки. Системне тестування було поділено на
такі етапи:
1 Тестування системи в ролі користувача
Цей етап включає перевірку всіх функцій, доступних для звичайного
користувача інтернет-магазину електроніки:
− навігація по сайту: перевірка меню, пошуку товарів, категорій,
фільтрів;
− перегляд товарів: оцінка інформації про товари, фотографій,
характеристик;
− додавання товарів до кошика: тестування функціоналу додавання
товарів до кошика, перегляд кошика, редагування кількості товарів та
видалення товарів з кошика;
− оформлення замовлення: перевірка процесу оформлення замовлення,
включаючи введення даних покупця, або автоматичне вставлення
даних якщо користувач авторизований, підтвердження замовлення.
2 Тестування системи в ролі адміністратора
Цей етап включає перевірку всіх функцій, доступних для адміністратора
системи:
− управління товарами: додавання, редагування та видалення товарів,
оновлення інформації про знижки та ціни;
− управління замовленнями: перегляд, обробка та зміна статусів
замовлень;
86
ЧДТУ 242235.002 ПЗ
− управління брендами та типами: додавання, редагування та видалення
брендів та типів, для фільтрації товарів в каталозі.
3 Тестування авторизації та реєстрації користувачів
Цей етап включає перевірку всіх аспектів, пов’язаних з авторизацією та
реєстрацією користувачів:
− реєстрація нового користувача: перевірка процесу реєстрації,
включаючи введення обов’язкових полів, перевірка валідності даних;
− авторизація користувача: перевірка можливості входу в систему,
використовуючи правильні та неправильні дані;
− редагування профілю: перевірка можливості зміни персональних даних,
включаючи ім’я, email, адресу, паролі;
− додавання інформації профілю: перевірка можливості додавання
персональних даних, включаючи ім’я, email, адресу, паролі;
− видалення інформації профілю: перевірка можливості видалення
персональних даних, включаючи ім’я, email, адресу, паролі.
4 Тестування зручності використання інтерфейсу.
Цей етап включає оцінку зручності та інтуїтивності інтерфейсу
користувача:
− навігація: перевірка логічності та простоти навігації по сайту,
доступність основних функцій, розташування меню та кнопок;
− читабельність: оцінка шрифтів, кольорів, контрасту та розміру тексту,
щоб забезпечити зручне читання;
− форми та введення даних: перевірка зручності заповнення форм,
наявність підказок та повідомлень про помилки;
− мобільна версія: оцінка адаптивності дизайну для мобільних пристроїв,
зручність використання на різних екранах.
Після завершення всіх етапів системного тестування отримано результати,
які представленні в таблиці 3.14. Виявлені помилки та недоліки виправленні,
87
ЧДТУ 242235.002 ПЗ
невиявлені помилки будуть виправлені в процесі використання інтернет
магазину. Підсумкова оцінка готовності системи підтвердила її високу якість та
надійність, що дозволяє підготувати систему до впровадження в експлуатацію.
Таблиця 3.14
Етап
№ Дії тестування Результати тестування
тестування
1 Тестування Навігація по сайту: перевіркаВ сі функції працюють
системи в ролі меню, пошуку товарів, категорій, без проблем.
користувача фільтрів. Замовлення
Перегляд товарів: перевірка оформлюються без
інформації про товари, фотографій, проблем.
характеристики.
Додавання товарів до кошика:
функціонал додавання, перегляд
кошика, редагування, видалення.
Оформлення замовлення: процес
оформлення замовлення, введення
даних покупця, підтвердження
замовлення.
2 Тестування Управління товарами: додавання, Всі функції
системи в ролі редагування, видалення товарів. адміністратора
адміністратора Управління замовленнями: працюють коректно.
перегляд, обробка, зміна статусів. Дані в системі
Управління брендами та типами: оновлюються правильно.
додавання, редагування, видалення. Замовлення
обробляються
ефективно.
88
ЧДТУ 242235.002 ПЗ
Продовження таблиці 3.14
3 Тестування Реєстрація нового користувача: Реєстрація та вхід в
авторизації та процес реєстрації, введення даних, систему працюють без
реєстрації перевірка на правильність. проблем.
користувачів Авторизація користувача: вхід в Профілі користувачів
систему, перевірка даних. оновлюються правильно.
Редагування профілю: зміна Система захищена від
персональних даних, паролів. несанкціонованого
доступу.
4 Тестування Навігація: перевірка логічності та Інтерфейс зрозумілий та
зручності простоти навігації. легкий у використанні.
використання Читабельність: оцінка шрифтів, Читабельність тексту на
інтерфейсу кольорів, контрасту. високому рівні.
Форми та введення даних: Мобільна версія
зручність заповнення форм, оптимізована для
наявність підказок. різних пристроїв.
Мобільна версія: адаптивність
дизайну для мобільних пристроїв.
3.2.4 Приймальне тестування
Останнім кроком тестування є приймальне тестування програмного
забезпечення перед впровадженням в експлуатацію. Метою приймального
тестування є перевірити систему на відповідність заявленим вимогам замовника
та очікуванням користувачів, а також з’ясування готовності до впровадження в
експлуатацію.
У приймальному тестуванні системи інтернет магазину електроніки
прийняли участь кінцеві користувачі для проведення тестів та оцінки зручності
інтерфейсу веб-додатку та його функціональності. Дане тестування поділено на
етапи, кожен з яких був спрямований на перевірку різних сценаріїв роботи.
89
ЧДТУ 242235.002 ПЗ
Один з етапів приймального тестування є перевірка відповідності вимогам
до програмного забезпечення, функціональним та нефункціональним вимогам, а
саме: створення веб-додатку інтернет магазину електроніки з реєстрацію,
авторизацію, переглядом товарів та оформленням замовлень, включаючи безпеку
даних, продуктивність, масштабованість, інтуїтивний інтерфейс користувача та
адаптивний дизайн.
Програмний продукт відповідає заявленим вимогам, також проведено
обговорено подальших удосконалень.
На наступному етапі проведено тестування системи кінцевими
користувачами, це дозволило з’ясувати всі проблеми та недоліки продукту.
Система виявилась повністю працездатною , містить зручний інтерфейс. З
недоліків було виявлено погану адаптивність під деякі мобільні пристрої, які
будуть усуненні в подальшій розробці. Користувачі відмітили зручний та
привабливий дизайн, цікаву назву магазину, а також інформативну панель про
основні характеристики товару без додаткового переходу на сторінку товару.
Приймальне тестування пройшло успішно, розроблений веб-додаток
відповідає вимогам. При тестуванні користувачами, виявлені проблеми та
недоліки, які були задокументовані та усунуті.
3.3 Приклади впровадженого програмного комплексу
Розроблений вебсайту інтернет магазину електроніки дає можливість
застосуванню в сфері бізнесу, що дозволяє вийти на рівень продаж через
інтернет. Зокрема, це спрощує як для користувачів замовлення товарів не
виходячи з дому, так і для керівника бізнесу збільшує обсяг покупців через
інтернет, що дозволяє збільшити прибуток.
При завантажені вебсайту зустрічає сторінка на якій є каталог товарів з
можливістю пошуку та фільтрації (Рисунок 3.33).Тут також є логотип магазину
та кнопки для переходу на інші сторінки.
90
ЧДТУ 242235.002 ПЗ
Рисунок 3.27 – Головна сторінка вебсайту
Після того як користувач натисне на будь який товар в каталозі магазину,
відкриється сторінка товару на якій можемо побачити фотографії товару,
характеристики та іншу інформацію(Рисунок 3.34).
Рисунок 3.28 – Сторінка товару
91
ЧДТУ 242235.002 ПЗ
Для замовлення товару потрібно додати його до кошика для цього потрібно
натиснути кнопку «Купити». На рисунку 3.35 зображено модальне вікно кошика.
Рисунок 3.29 – Модальне вікно кошик
Для того щоб попасти на сторінку для введення даних для оформлення
замовлення потрібно натиснути кнопку «Оформлення замовлення». Ось вигляд
сторінки оформлення замовлення.
Рисунок 3.30 – Сторінка оформлення замовлення
92
ЧДТУ 242235.002 ПЗ
Щоб переглянути профіль користувача потрібно натиснути іконку профіля
у верхній правій частині, авторизуватись за допомогою логіна та пароля
користувача або адміністратора (Рисунок 3.37). На рисунку 3.38 представлений
вигляд профілю користувача(User).
Рисунок 3.31 – Модальне вікно для авторизації
Рисунок 3.32 – Профіль користувача(User)
93
ЧДТУ 242235.002 ПЗ
ВИСНОВОКИ ДО ТРЕТЬОГО РОЗДІЛУ
У даному розділі описано вибір засобів реалізації, для клієнтської частини
обрано технологія React, для серверної частини обрано мову програмування Java
з використанням технології Spring Boot, для збереження інформації використано
реляційну базу даних PostgressSQL. Описано структурну та функціональну
схему, яка дозволила продемонструвати функціонал системи. Також в даному
розділі спроектовано базу даних для вебсайту інтернет магазину електроніки, в
якій визначено основні таблиці з структурою та зв’язками. Далі
продемонстровано розроблений інтерфейс користувача, та опис розроблених
компонентів. Після цього виконано модульне, інтеграційне, системне та
приймальне тестування що дало змогу перевірити систему на коректність
роботи.
94
ЧДТУ 242235.002 ПЗ
ВИСНОВОКИ
Розвиток електронної комерції в секторі продажу електроніки представляє
собою високодинамічний процес, що стабільно змінюється під впливом новітніх
технологій і змін у споживчих уподобаннях. Останні роки показали значний ріст
популярності онлайн-торгівлі електронікою, що зумовлено швидкістю,
зручністю та індивідуалізацією процесу покупок. Завдяки технологічним
інноваціям, таким як штучний інтелект, розширена реальність і покращені
системи управління, споживачі мають можливість отримати доступ до більш
широкого асортименту товарів і послуг, не залежно від географічного
розташування.
Важливу роль у зростанні електронної комерції відіграють персоналізовані
рекомендації і взаємодія з соціальними мережами, що дозволяє підвищити рівень
довіри споживачів до онлайн-магазинів і покращити користувацький досвід.
Модерні технології дозволяють індивідуалізувати процеси обслуговування
клієнтів і створювати персоналізовані пропозиції, що відповідають унікальним
потребам кожного користувача.
У контексті розробки інтернет-магазинів електроніки важливими
компонентами є вибір правильних технологій і фреймворків для серверної
(Backend) і клієнтської (Frontend) частин системи. Наприклад, використання Java
Spring Boot або Node.js для Backend і React.js чи Angular для Frontend дозволяє
забезпечити ефективну і функціональну реалізацію магазину з врахуванням
вимог до швидкодії, масштабованості і безпеки.
Аналіз існуючих рішень показав, що вибір конкретних технологій повинен
базуватися на потребах конкретного проекту і специфіці бізнес-вимог. Кожне
рішення має свої сильні сторони і можливості для оптимізації, що варто
враховувати при розробці інтернет-магазину. Важливо також постійно
вдосконалювати програмне забезпечення, враховуючи змінювані технологічні та
ринкові умови, що дозволяє підтримувати конкурентоспроможність і успішність
в електронній комерції.
95
ЧДТУ 242235.002 ПЗ
Для розробки програмного забезпечення інтернет магазину електроніки
спроектовано модель предметної області, сформований словник предметної
області та основні елементи предметної області. Також визначено основні
вимоги до програмного забезпечення, а також первинні, детальні вимоги.
Описано вимоги розробки і розробника, що дозволило чітко встановити контекст
розробки та очікування від продукту. На основі цього були сформульовані
функціональні та нефункціональні вимоги, а також створена діаграма
прецедентів для визначення основних сценаріїв взаємодії користувачів з
системою.
Для архітектурного проектування програмного комплексу були розроблені
діаграми класів та пакетів для логічної структури системи, а також діаграми
компонентів та розгортання для визначення архітектурних аспектів реалізації.
Моделювання поведінки системи було аналізовано з використанням діаграм
діяльності, послідовності, комунікації та скінченного автомата, що дозволило
детально розібрати роботу системи на різних етапах взаємодії з користувачем.
Проведений вибір засобів реалізації, зокрема для клієнтської частини була
обрана технологія React, для серверної частини обрано мову програмування Java
з використанням Spring Boot, а для збереження інформації використано
реляційну базу даних PostgreSQL. Описано структурну та функціональну схему
системи, що відображає внутрішню логіку та взаємозв'язки компонентів
програмного комплексу.
Продемонстровано розроблений інтерфейс користувача та описано
розроблені компоненти, що підкріплюється реалістичними сценаріями
використання і практичними випробуваннями. Завершивши цей етап, було
проведено комплексне тестування, що охоплює модульне, інтеграційне, системне
та приймальне тестування, що підтвердило коректність роботи системи і
відповідність її функціоналу вимогам
96
ЧДТУ 242235.002 ПЗ
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1 О. Ярось, "Розвиток онлайн-торгівлі в Україні: вплив COVID19", Master’s
Thesis, Сумський державний університет, 2020.
2 О. Харченко і В. Яремич, "МОДЕЛЬ ВПРОВАДЖЕННЯ ТЕХНОЛОГІЙ
ЕЛЕКТРОННОЇ КОМЕРЦІЇ", Електронне фахове наукове видання
«Кібербезпека: освіта, наука, техніка», т. 2, № 22, с. 204-213, Груд 2023.
3 Л. Березовська і А. Кириченко, "Розвиток електронної комерції в Україні та
ЄС", Економіка та суспільство, № 42, 2022.
4 В. В. Лобачов, "Розробка програмного забезпечення для підтримки
інтернет-магазинів на базі відкритих E-commerce-систем", 2024.
5 Я. М. Скиба, "Програмне забезпечення інтернет-магазину на основі
технології Spring Boot", B.S. thesis, КПІ ім. Ігоря Сікорського, 2023.
6 С. Богута, "Frontend розробка на основі React", 2022.
7 Д. Соловйов, "Порівняльний аналіз сучасних технологій розробки веб-
застосувань", 2022.
8 О. Ткаченко і В. Бондар, "Деякі аспекти використання Node. js та MongoDB
під час створення освітніх вебзастосунків", Цифрова платформа:
інформаційні технології в соціокультурній сфері, т. 6, № 1, с. 76-89, 2023.
9 "Rozetka.ua". [Електронний ресурс]. Доступно: https://rozetka.com.ua.
10 "Amazon.com". [Електронний ресурс]. Доступно: https://www.amazon.com.
11 "Citrus.ua". [Електронний ресурс]. Доступно: https://www.ctrs.com.ua.
97
ДОДАТОК А
ЗАТВЕРДЖЕНО:
Зав. кафедрою ПЗАС, професор
_________________ Голуб С.В.
„____” ______________ 2024 р.
Розробка WEB-сайту для інтернет магазину електроніки
Специфікація
482. ЧДТУ 242235.002
Листів 2
Розробник ________________ Величко Д.О.
Керівник ________________ Скуцький А.Б.
2024
482. ЧДТУ 242235.002
Позначення Найменування Примітка
Документація
482.ЧДТУ. 24223512 01 Текст програми
482.ЧДТУ. 242235 34 01 Інструкція користувачеві
482.ЧДТУ. 242235 90 01 Графічні матеріали
99
ДОДАТОК Б
Розробка WEB-сайту для інтернет магазину електроніки
Текст програми
482.ЧДТУ. 242235 12 01
Листів 17
Розробник ________________ Величко Д.О.
2024
482.ЧДТУ. 242235 12 01
public class AuthController {
private final AuthService authService;
private final UserService userService;
@PostMapping("/login")
public ResponseEntity<?> createAuthToken(@RequestBody JwtRequest authRequest) {
return authService.createAuthToken(authRequest);
}
@PostMapping("/registration")
public ResponseEntity<?> createNewUser(@RequestBody RegistrationUserDto
registrationUserDto) {
return authService.createNewUser(registrationUserDto);
}
@GetMapping("/auth")
public ResponseEntity<?> generateAuthToken(@RequestBody JwtRequest authRequest) {
ResponseEntity<?> response = authService.createAuthToken(authRequest);
return response;
}
@PutMapping("/password/{userId}")
public ResponseEntity<String> changePassword(@PathVariable Long userId, @RequestParam
String newPassword) {
boolean passwordChanged = userService.changeUserPassword(userId, newPassword);
if (passwordChanged) {
return ResponseEntity.ok("Password changed successfully");
} else {
return ResponseEntity.badRequest().body("User with id " + userId + " not found");
}
}
@PutMapping("/email/{userId}")
public ResponseEntity<String> changeEmail(@PathVariable Long userId, @RequestParam
String newEmail) {
boolean emailChanged = userService.changeUserEmail(userId, newEmail);
if (emailChanged) {
101
482.ЧДТУ. 242235 12 01
return ResponseEntity.ok("Email changed successfully");
} else {
return ResponseEntity.badRequest().body("User with id " + userId + " not found");
}
}
@DeleteMapping("/{userId}")
public ResponseEntity<String> deleteUserAndInfo(@PathVariable Long userId) {
boolean deleted = userService.deleteUserAndInfo(userId);
if (deleted) {
return ResponseEntity.ok("User and info deleted successfully");
} else {
return ResponseEntity.badRequest().body("User with id " + userId + " not found");
}
}
}
public class BrandController {
private final BrandService brandService;
@Autowired
public BrandController(BrandService brandService) {
this.brandService = brandService;
}
@GetMapping()
public ResponseEntity<List<BrandDTO>> getAllBrands() {
List<BrandDTO> brands = brandService.getAllBrands();
return new ResponseEntity<>(brands, HttpStatus.OK);
}
@GetMapping("/{id}")
public ResponseEntity<BrandDTO> getBrandById(@PathVariable Long id) {
BrandDTO brand = brandService.getBrandById(id);
if (brand != null) {
return new ResponseEntity<>(brand, HttpStatus.OK);
102
482.ЧДТУ. 242235 12 01
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
@PostMapping()
public ResponseEntity<BrandDTO> createBrand(@RequestBody BrandDTO brandDTO) {
BrandDTO createdBrand = brandService.createBrand(brandDTO);
return new ResponseEntity<>(createdBrand, HttpStatus.CREATED);
}
@PutMapping("/{id}")
public ResponseEntity<BrandDTO> updateBrand(@PathVariable Long id, @RequestBody
BrandDTO brandDTO) {
BrandDTO updatedBrand = brandService.updateBrand(id, brandDTO);
if (updatedBrand != null) {
return new ResponseEntity<>(updatedBrand, HttpStatus.OK);
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteBrand(@PathVariable Long id) {
brandService.deleteBrand(id);
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}
}
public class CartController {
private final CartService cartService;
public CartController(CartService cartService) {
this.cartService = cartService;
}
@GetMapping("/{userId}")
public ResponseEntity<CartDTO> getCartByUserId(@PathVariable Long userId) {
103
482.ЧДТУ. 242235 12 01
CartDTO cartDTO = cartService.getCartByUserId(userId);
return ResponseEntity.of(Optional.ofNullable(cartDTO));
}
@PostMapping("/{cartId}/add/{deviceId}/{quantity}")
public ResponseEntity<String> addToCart(
@PathVariable Map<String, String> pathVariables
) {
Long cartId = Long.parseLong(pathVariables.get("cartId"));
Long deviceId = Long.parseLong(pathVariables.get("deviceId"));
int quantity = Integer.parseInt(pathVariables.get("quantity"));
cartService.addToCart(cartId, deviceId, quantity);
return ResponseEntity.ok("Товар успішно додано в кошик");
}
@DeleteMapping("/{cartId}/remove/{deviceId}")
public ResponseEntity<String> removeFromCart(
@PathVariable Long cartId,
@PathVariable Long deviceId
) {
cartService.removeFromCart(cartId, deviceId);
return ResponseEntity.ok("Товар успішно видалено з кошика");
}
@PutMapping("/{cartId}/update/{deviceId}/{quantity}")
public ResponseEntity<String> updateQuantity(
@PathVariable Long cartId,
@PathVariable Long deviceId,
@PathVariable int quantity
) {
cartService.updateQuantity(cartId, deviceId, quantity);
return ResponseEntity.ok("Кількість успішно оновлено");
}
}
@Data
104
482.ЧДТУ. 242235 12 01
public class CreateOrderRequest {
private Long userId;
private String name;
private String surname;
private String phone;
private String address;
private String email;
private List<Long> deviceIds;
private List<Integer> quantities;
}
public class DeviceController {
private final DeviceService deviceService;
private final BrandService brandService;
private final TypeService typeService;
private final FileStorageService fileStorageService;
private final PhotoService photoService;
private final DeviceRepository deviceRepository;
private final DeviceInfoRepository deviceInfoRepository;
private final DeviceInfoService deviceInfoService;
private static final String UPLOAD_DIR = "res/";
private static final String SERVER_CONTEXT_PATH = "/photos"; // Контекст сервера
@GetMapping
public ResponseEntity<List<AllDevice>> getAllDevices(
@RequestParam(required = false) String name,
@RequestParam(required = false) Long typeId,
@RequestParam(required = false) Long brandId
) {
if (name != null && typeId != null && brandId != null) {
// Якщо всі три параметри присутні, отримуємо список пристроїв за ім'ям, типом та
брендом
return ResponseEntity.ok(deviceService.getDevicesByNameAndTypeAndBrand(name,
typeId, brandId));
105
482.ЧДТУ. 242235 12 01
} else if (name != null && typeId != null) {
// Якщо вказані ім'я та тип, отримуємо список пристроїв за ім'ям та типом
return ResponseEntity.ok(deviceService.getDevicesByNameAndType(name, typeId));
} else if (name != null && brandId != null) {
// Якщо вказані ім'я та бренд, отримуємо список пристроїв за ім'ям та брендом
return ResponseEntity.ok(deviceService.getDevicesByNameAndBrand(name, brandId));
} else if (name != null) {
// Якщо вказане тільки ім'я, отримуємо список пристроїв за ім'ям
return ResponseEntity.ok(deviceService.getDevicesByName(name));
} else if (typeId != null && brandId != null) {
// Якщо вказані тип та бренд, отримуємо список пристроїв за типом та брендом
return ResponseEntity.ok(deviceService.getDevicesByTypeAndBrand(typeId, brandId));
} else if (typeId != null) {
// Якщо вказаний тільки тип, отримуємо список пристроїв за типом
return ResponseEntity.ok(deviceService.getDevicesByType(typeId));
} else if (brandId != null) {
// Якщо вказаний тільки бренд, отримуємо список пристроїв за брендом
return ResponseEntity.ok(deviceService.getDevicesByBrand(brandId));
} else {
// Якщо параметри відсутні, отримуємо всі пристрої
return ResponseEntity.ok(deviceService.getAllDevices());
}
}
@GetMapping("/{deviceId}/photos")
public ResponseEntity<List<AllDevicePhoto>> getAllDevicePhotos(@PathVariable Long
deviceId) {
List<AllDevicePhoto> devicePhotos = deviceService.getAllDevicePhotos(deviceId);
return ResponseEntity.ok(devicePhotos);
}
@GetMapping("/{id}")
public ResponseEntity<DeviceDTO> getDeviceWithInfo(@PathVariable Long id) {
106
482.ЧДТУ. 242235 12 01
Optional<Device> optionalDevice = deviceRepository.findById(id);
if (optionalDevice.isPresent()) {
Device device = optionalDevice.get();
// Формування DeviceDTO з даними про Device та DeviceInfo
DeviceDTO deviceDTO = new DeviceDTO();
deviceDTO.setId(device.getId());
deviceDTO.setName(device.getName());
deviceDTO.setPrice(device.getPrice());
deviceDTO.setDiscountedPrice(device.getDiscountedPrice());
deviceDTO.setRating(device.getRating());
deviceDTO.setCreatedAt(device.getCreatedAt().toString());
deviceDTO.setUpdatedAt(device.getUpdatedAt().toString());
deviceDTO.setBrandId(device.getBrand().getId());
deviceDTO.setTypeId(device.getType().getId());
// Отримання інформації про DeviceInfo для кожного Device
List<DeviceInfo> infoList = device.getInfo();
List<DeviceInfoDTO> deviceInfoDTOList = new ArrayList<>();
for (DeviceInfo info : infoList) {
DeviceInfoDTO deviceInfoDTO = new DeviceInfoDTO();
deviceInfoDTO.setId(Long.valueOf(info.getId()));
deviceInfoDTO.setTitle(info.getTitle());
deviceInfoDTO.setDescription(info.getDescription());
// Інші поля DeviceInfoDTO за необхідності
deviceInfoDTOList.add(deviceInfoDTO);
}
// Додавання інформації про DeviceInfo до DeviceDTO
deviceDTO.setInfo(deviceInfoDTOList);
return ResponseEntity.ok(deviceDTO);
} else {
return ResponseEntity.notFound().build();
107
482.ЧДТУ. 242235 12 01
}
}
@PostMapping
public ResponseEntity<Device> createDeviceAndInfo(
@RequestPart("device") DeviceDTO deviceDTO,
@RequestPart("files") MultipartFile[] files
) {
// Отримання бренду та типу з DTO
Long brandId = deviceDTO.getBrandId();
Long typeId = deviceDTO.getTypeId();
BrandDTO brandDTO = brandService.getBrandById(brandId);
TypeDTO typeDTO = typeService.getTypeById(typeId);
// Конвертація DTO в сутності
Brand brand = convertToBrand(brandDTO);
Type type = convertToType(typeDTO);
if (brand == null || type == null) {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
// Створення пристрою та інформації про нього
Device createdDevice = deviceService.createDevice(deviceDTO, brand, type);
photoService.createPhoto(files, createdDevice);
createdDevice.setCreatedAt(new Date());
createdDevice.setUpdatedAt(new Date());
Long deviceId = createdDevice.getId();
// Створення та збереження декількох інформаційних об'єктів для пристрою
List<DeviceInfo> deviceInfos = new ArrayList<>();
// for (int i = 0; i < Math.min(titles.size(), descriptions.size()); i++)
for (int i = 0; i < deviceDTO.getInfo().size(); i++) {
DeviceInfoDTO infoDTO = new DeviceInfoDTO();
infoDTO.setTitle(deviceDTO.getInfo().get(i).getTitle());
infoDTO.setDescription(deviceDTO.getInfo().get(i).getDescription());
108
482.ЧДТУ. 242235 12 01
DeviceInfo createdDeviceInfo = deviceInfoService.createDeviceInfo(infoDTO, deviceId);
createdDeviceInfo.setDevice(createdDevice);
deviceInfos.add(createdDeviceInfo);
}
createdDevice.setDeviceInfos(deviceInfos);
// Повернення відповіді
return new ResponseEntity<>(createdDevice, HttpStatus.CREATED);
}
private Brand convertToBrand(BrandDTO brandDTO) {
if (brandDTO == null) {
return null;
}
Brand brand = new Brand();
brand.setId(brandDTO.getId());
brand.setName(brandDTO.getName());
return brand;
}
private Type convertToType(TypeDTO typeDTO) {
if (typeDTO == null) {
return null;
}
Type type = new Type();
type.setId(typeDTO.getId());
type.setName(typeDTO.getName());
return type;
}
@PutMapping("/{id}")
public ResponseEntity<DeviceDTO> updateDevice(
@PathVariable Long id,
@RequestPart("device") DeviceDTO deviceDTO,
@RequestPart(value = "files", required = false) MultipartFile[] files
) {
109
482.ЧДТУ. 242235 12 01
Optional<Device> optionalDevice = deviceRepository.findById(id);
if (optionalDevice.isPresent()) {
Device existingDevice = optionalDevice.get();
// Оновлення інформації про пристрій
existingDevice.setName(deviceDTO.getName());
existingDevice.setPrice(deviceDTO.getPrice());
existingDevice.setDiscountedPrice(deviceDTO.getDiscountedPrice());
existingDevice.setRating(deviceDTO.getRating());
// Оновлення бренду та типу пристрою
Long brandId = deviceDTO.getBrandId();
Long typeId = deviceDTO.getTypeId();
BrandDTO brandDTO = brandService.getBrandById(brandId);
TypeDTO typeDTO = typeService.getTypeById(typeId);
Brand updatedBrand = convertToBrand(brandDTO);
Type updatedType = convertToType(typeDTO);
existingDevice.setBrand(updatedBrand);
existingDevice.setType(updatedType);
// Оновлення інформації про пристрій
List<DeviceInfoDTO> updatedInfoDTOList = deviceDTO.getInfo();
// Оновлення існуючих об'єктів DeviceInfo
List<DeviceInfo> existingInfoList = existingDevice.getInfo();
for (Iterator<DeviceInfo> iterator = existingInfoList.iterator(); iterator.hasNext();) {
DeviceInfo existingInfo = iterator.next();
boolean found = false;
for (DeviceInfoDTO infoDTO : updatedInfoDTOList) {
if (infoDTO.getId() != null && infoDTO.getId().equals(existingInfo.getId())) {
// Оновлення існуючого об'єкту DeviceInfo
existingInfo.setTitle(infoDTO.getTitle());
existingInfo.setDescription(infoDTO.getDescription());
// Оновлення інших полів за необхідності
found = true;
break;
110
482.ЧДТУ. 242235 12 01
}
}
// Видалення властивості, якщо її ідентифікатор не знайдено в оновленому списку
if (!found) {
iterator.remove();
// Виконається видалення в базі даних
deviceInfoRepository.delete(existingInfo);
}
}
// Додавання нових об'єктів DeviceInfo
for (DeviceInfoDTO infoDTO : updatedInfoDTOList) {
if (infoDTO.getId() == null) {
// Створення нового об'єкта DeviceInfo
DeviceInfo info = new DeviceInfo();
info.setTitle(infoDTO.getTitle());
info.setDescription(infoDTO.getDescription());
// Встановлення інших полів за необхідності
info.setDevice(existingDevice);
existingDevice.getInfo().add(info);
}
}
if (files != null && files.length > 0) {
photoService.deleteDevicePhotos(existingDevice.getId());
photoService.createPhoto(files, existingDevice);
}
// Збереження оновленого пристрою
Device updatedDevice = deviceRepository.save(existingDevice);
DeviceDTO updatedDeviceDTO = DeviceDTO.fromDevice(updatedDevice);
return ResponseEntity.ok(updatedDeviceDTO);
} else {
return ResponseEntity.notFound().build();
111
482.ЧДТУ. 242235 12 01
}
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteDevice(@PathVariable Long id) {
boolean deleted = deviceService.deleteDevice(id);
if (deleted) {
return ResponseEntity.noContent().build();
} else {
return ResponseEntity.notFound().build();
}
}
}
public class OrderController {
private final OrderService orderService;
@Autowired
public OrderController(OrderService orderService) {
this.orderService = orderService;
}
@PostMapping("/create")
public ResponseEntity<OrderDTO> createOrder(@RequestBody CreateOrderRequest request) {
OrderDTO createdOrder = orderService.createOrder(request.getUserId(), request.getName(),
request.getSurname(), request.getPhone(), request.getAddress(), request.getEmail(),
request.getDeviceIds(), request.getQuantities());
return ResponseEntity.ok(createdOrder);
}
@GetMapping("/user/{userId}")
public ResponseEntity<List<OrderDTO>> getOrdersByUserId(@PathVariable Long userId) {
List<OrderDTO> orders = orderService.getOrdersByUserId(userId);
return ResponseEntity.ok(orders);
}
@GetMapping("/{orderId}")
public ResponseEntity<OrderDTO> getOrderById(@PathVariable Long orderId) {
OrderDTO order = orderService.getOrderById(orderId);
112
482.ЧДТУ. 242235 12 01
if (order == null) {
// Обробка випадку, коли замовлення з таким ідентифікатором не знайдено
return ResponseEntity.notFound().build();
}
return ResponseEntity.ok(order);
}
@DeleteMapping("/{orderId}")
public ResponseEntity<Void> deleteOrderById(@PathVariable Long orderId) {
orderService.deleteOrderById(orderId);
return ResponseEntity.noContent().build();
}
@DeleteMapping("/cancel/{orderId}")
public ResponseEntity<Void> cancelOrderById(@PathVariable Long orderId) {
orderService.cancelOrderById(orderId);
return ResponseEntity.noContent().build();
}
@GetMapping("/all")
public ResponseEntity<List<OrderDTO>> getAllOrders() {
List<OrderDTO> orders = orderService.getAllOrders();
return ResponseEntity.ok(orders);
}
@PutMapping("/status/{orderId}")
public ResponseEntity<Void> updateOrderStatus(
@PathVariable Long orderId,
@RequestParam OrderStatus status) {
orderService.updateOrderStatus(orderId, status);
return ResponseEntity.ok().build();
}
}
public class PhotoController {
private final FileStorageService fileStorageService;
113
482.ЧДТУ. 242235 12 01
private final PhotoRepository photoRepository;
@GetMapping("/res/{filename}")
public ResponseEntity<byte[]> serveFile(@PathVariable String filename) {
return fileStorageService.readFile(filename);
}
}
public class TypeController {
private final TypeService typeService;
@Autowired
public TypeController(TypeService typeService) {
this.typeService = typeService;
}
@GetMapping
public ResponseEntity<List<TypeDTO>> getAllTypes() {
List<TypeDTO> types = typeService.getAllTypes();
return new ResponseEntity<>(types, HttpStatus.OK);
}
@GetMapping("/{id}")
public ResponseEntity<TypeDTO> getTypeById(@PathVariable Long id) {
TypeDTO type = typeService.getTypeById(id);
if (type != null) {
return new ResponseEntity<>(type, HttpStatus.OK);
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
@PostMapping
public ResponseEntity<TypeDTO> createType(@RequestBody TypeDTO typeDTO) {
TypeDTO createdType = typeService.createType(typeDTO);
return new ResponseEntity<>(createdType, HttpStatus.CREATED);
}
@PutMapping("/{id}")
114
482.ЧДТУ. 242235 12 01
public ResponseEntity<TypeDTO> updateType(@PathVariable Long id, @RequestBody
TypeDTO typeDTO) {
TypeDTO updatedType = typeService.updateType(id, typeDTO);
if (updatedType != null) {
return new ResponseEntity<>(updatedType, HttpStatus.OK);
} else {
return new ResponseEntity<>(HttpStatus.NOT_FOUND);
}
}
@DeleteMapping("/{id}")
public ResponseEntity<Void> deleteType(@PathVariable Long id) {
typeService.deleteType(id);
return new ResponseEntity<>(HttpStatus.NO_CONTENT);
}
}
public class UserInfoController {
private final UserInfoService userInfoService;
@GetMapping("/{userId}")
public ResponseEntity<?> getUserInfoByUserId(@PathVariable Long userId) {
UserInfo userInfo = userInfoService.getUserInfoByUserId(userId);
if (userInfo != null) {
return ResponseEntity.ok(userInfo);
} else {
return ResponseEntity.notFound().build();
}
}
@GetMapping
public ResponseEntity<List<UserInfo>> getAllUserInfo() {
List<UserInfo> userInfos = userInfoService.getAllUserInfo();
return ResponseEntity.ok(userInfos);
}
@PutMapping("/{userId}")
115
482.ЧДТУ. 242235 12 01
public ResponseEntity<?> updateUserInfo(@PathVariable Long userId, @RequestBody
UserInfo userInfo) {
UserInfo updatedUserInfo = userInfoService.updateUserInfo(userId, userInfo);
if (updatedUserInfo != null) {
return ResponseEntity.ok(updatedUserInfo);
} else {
return ResponseEntity.notFound().build();
}
}
}
116
ДОДАТОК В
Розробка WEB-сайту для інтернет магазину електроніки
Інструкція користувачеві
482. ЧДТУ 242235 34 01
Листів 5
Розробник ________________ Величко Д.О
2024
482. ЧДТУ 242235 34 01
При відкритті веб-сайту нам відображається сторінка з каталогом товарів,
де ми можемо здійснювати пошук за допомогою поля для пошуку яке розміщене
у верхній центральній частині(Рисунок В1). У верхній правій частині розміщенні
іконки корзини та профілю користувача при натисненні на них нам
відображаються відповідні сторінки. Також на головній сторінці ми маємо три
фільтра для зручного пошуку товару який потрібний.
Рисунок В1 – Головна сторінка каталогу товарів
Після натискання на будь-який товар у каталозі, відкривається сторінка
товару, де можна переглянути фотографії, характеристики та іншу інформацію
про товар(Рисунок B2).
Рисунок B2 – Сторінка товару
118
482. ЧДТУ 242235 34 01
Щоб замовити товар, необхідно додати його до кошика, натиснувши
кнопку «Купити». На рисунку B3 показано модальне вікно кошика.
Рисунок B3 – Модальне вікно кошик
Щоб перейти на сторінку введення даних для оформлення замовлення,
необхідно натиснути кнопку «Оформити замовлення». Нижче представлено
вигляд цієї сторінки.
Рисунок B4 – Сторінка оформлення замовлення
119
482. ЧДТУ 242235 34 01
Щоб переглянути профіль користувача, натисніть на іконку профілю у
верхньому правому куті на головній сторінці та авторизуйтесь за допомогою
логіна і пароля (Рисунок B5). На рисунку B6 показано вигляд профілю
користувача (User).
Рисунок B5 – Модальне вікно для авторизації
Рисунок B6 – Профіль користувача(User)
На сторінці профілю користувача можна переглянути особисту інформацію
профілю, а також при натисненні на вкладку «Мої замовлення» нам буде
показано всі замовлення даного користувача(Рисунок B7).
120
482. ЧДТУ 242235 34 01
Рисунок B7 – Профіль користувача (Мої замовлення)
Для переходу в режим Адміністратора потрібно авторизуватись з даною
роллю, після чого ми отримаємо набір функцій які доступні тільки
адміністратору. Ось такий вигляд має профіль адмістратора магазину(Рисунок
B8).
Рисунок B8 – Профіль користувача (Admin)
В даному профілі з’явилися нові вкладки: «Всі замовлення» та
«Адміністрування». На вкладці «Всі замовлення» адмістратор може переглядати
всі замовлення користувачів, а також змінювати статус замовлення(Рисунок B9).
На вкладці «Адміністрування» ми можемо додавати, редагувати, видаляти
товари, бренди, типи. Також у нас є можливістю змінювати інформацію про
товар, а саме його характеристики(Рисунок B10).
121
482. ЧДТУ 242235 34 01
Рисунок B9 – Профіль користувача (Всі замовлення)
Рисунок B10 – Профіль користувача (Адміністрування)
122
ДОДАТОКГ
Розробка WЕВ-сайту для інтернет магазину електроніки
Графічні матеріали
482. ЧДТУ 242235 90 01
листів 8
~В еличко Д.О
Розробник
2024
-
ЧДТУ 242235 90 01 2
Бакалаврська робота
на тему: Розробка WEB-cafrry ·
дЛЯ штернет магаз1mу електронію1
здобувач: Величко Д.О. , с-rудент групп П'3С-2l 44
І(ерівнпк : Скуuькпй А.Б ., асистент
Рисунок Г 1 - Слайд 1
Вступ
А1о."1')·.1,,~.міст• теш,;
~(tтo;i■ llpot"--Т)'"8.188JI Т.1 Jо."О■стру10а.1■ВJІ;
Дана КW11ф1.uu1flнa робота npнc&~ttla ро,робш. uo-.1o.un.,
у роботі IIDC.1t80 OCIIOIRI еtа.ПІІ розробDІ aco-.10.:xan·y, ni,:j
.1М 1нтtрне1 шrазнну сле1.,рон11:н, wo с1а..10 u.,уа..-n.кю, 1 Ю;: , ФOina,1J)ЩUI ІЮІОr, NO;Jt.1JOlm!U Dp(.DltПIOЇ oo.,actl~
уа)(І(Х причин: 3poC1aJIИJI покупок & ІHttJ)Hetl, UJ0)4lJ11J.Ш~
оо СJ.ї110-ор1СІПоаане npotn)-aaJDU та 1ec1:--.amu 1
проuес11, покраwенНJІ 11:к•10,11( 1 "-1І~'Мtаwн, а.иа..113 .иин'х. ЩRфІПІІUІ. В rтроцес1 ро1ро6DІ бу:m IПQPIICJ:uJJ C)"'UCBi
~rошурентосnромо-ЮІІСП.. Веб-.10.:uток 1н1tрнет І>Ш'Uику tcxвo.,oru. tцi п Ja\. Sprшg Boot, CSSJ. React, PostgreSQL
;io1aon•c по~,;раwщн проuес npo;iaжy 1onp111 1а mou.arн1)'U'nl 11 LIШll.
оброб1.'}' 1аиоале11•. Зanpono1101aJІe nporpUІ.нe забс1nnеюu
бу.10 ро1роблене 1 ••пою no.1erwe111~ npo.1u., · 1о~р111 н Оп■с отр■~І.1ІІ■Х pU)·.-i"тma
адм1111стру1а11н• .
У ХО.11 ро1роба;и npo1t.1e110 nорІІІUіП,ВІІЙ ава..11з ІСІІ)10ЧИХ
У роботі 1 то•ш1 1ору 111жс11ср11 nporpшнoro 1aбc1nne.inu Ul'ltpRet І,QГЮІ/ИІJ, 1110 .:ioзao.uюn J.ОрВСТ)~' ].а)ІОІНПІ
ро1rл•дюnс• осно1111 nроб.1см11 , 1 -'J.JІШІ CrиgJQn,u тoiup, а U)IUІJcrpatopy UIJicюourн up)-иaJIJUt\l ок.,айв
~.:орІІСТ)'І3ЧІ та ;а;І)ІІІІІСТра1ор11 пр11 ІЮ,ОІІанІtJ СІО\х o6oa"ni.u а J.OnlllRO)I Це .:10180.1JL10 ПОО3'ІІІТИ Пераал! t.1 Bt.10.l!ПI
cwe ПОk'}'П1'~ Іооару, )'СІ..1ЦНСІІІІА .lОСІ'}"П ,10 ие~ОІ І.ІШПІJІ pUDen та ар~~-.пи їх при розробці L1acвoro
111формаu1І та скл;uн~ст• ynpaL11нiu uw1нicrpanвнoю nporpUOІoro Про.1)-..,у.
часn,ною. Осво11t1 Ф:,1D:І11Оиа..U111 )IOX."ПDOcn розроб.1tвОТО ІСОСанt)'
Мп:а і 12L1ан1111 ро)J)об..:11; mернст J.Qn3IOI)' t.1u.po11im, ах.1Ю'Іаюn у себе : i:an.,or
тоuрІJ, .:ien.uвa 1нфорУЩі.s про то~uри, JlO'L'IJlllicп.
Метою бака.1а1рс•1.-01 робоТІІ с розробu вс6-.10.1аn·у .:i.u UUOL1elllU t Oupl.8, а JUOЖ U)IWctpanoяa 'ІаСПІИа сайту.
1иrерист Nara111нy СЛСІо.їрОІІІІ.ІІ , Jll(.IIR .10380.'Um. cnpocmrn
ta 11. ·n1L11 11 Пр:а~.-т■,.■t 1в.1"tв•• отр■)Іав.п pe:Jy.-iьт.rтu.
процес пошу1.-у 101ару ctopoкn шрІІСІ)~ та
npoucc11 цшн~стр~•1а11НJІ ,i сторонн npo.:iaaщ (a;v.rІН1crparopa). Отрюwu ~:-n.taп .101ao.m:m розробити ефативвий та
06'ci.,- Ф:,·ю::ц1011~'WІИІЇ всб-.10.:~ато~... пий )103::С оутв апорвсrаиий
ро)роб..:11;
.].U J>0111ПL"Y 011.UЙІІ рипу продж t.lenpoвim І Ш( всі
nроцсс11 k'}'n11.11 та ;ui.iiнicтpyвaIOUІ ІНтtрвет тrазвиу. ntpentлDВ .:i.u пo;ia..~moro poзum.)' та в..:~осхоиа..,еюu
сисrеШІ. 2
Рисунок Г2 - Слайд 2
Перв11нні та детальні вимого
Пtрв■ввІ BH!\torв: ДtТІ'І.'ІЬВі 881'10f8:
- розробка та створення вебса1пу - реалізуватн зручю111 пошук товарів за
інтернет-маrаз11ну ;хля продажу різннмн катеrоріnш (смартфонн, ноутбуки.
електронікп: аксесуарп тощо);
- реалізувати можлнвість перегляду програмне забезпечення має міст1m1
товарів без обов'язкової авторпзації: можлпвість додавання товарів у кошпк,
- реалізуватп офор~~лення замовлень редагування вмісtу кошш.')', внконання
через кошнк: оформлення замовлення на основі вмісtу
- передбачптн реєстрацію корпсrувачів КОШІlІ\у';
та збереження ·i:.x особ11ст11х данпх. - інструментп адміністратора. що дозволяють
керуватп додавання, редагування, в1щалення
товарів . додавання, редагування, в1щалення
катеrоріfі. створення, впдалення, переrnяд та
обробка стаtусу замовлення.
Рисунок ГЗ - Слайд З
123
ЧДТУ 242235 90 01 з
Функціональні та нефункціональні в111\1оrи
~11...-ціова.1~.в1 а■,1оrв: Вtф) в.щіова.,ьві вв"оrп:
р,єстроЧІА та а торшацІJІ: _
1 1 БvnQ№
_ реєстраІJІ.І ~,;орнстуuча з~~.ения особисто~ - за.uст осооистих даних : забезлечеИНІ конфі.1енuійності
ІІІФоР ,аuн ~,;орнстувача ;:t:u no;ia:nmнx noi..;1101,;; інфор)1аu11 ~,;орнстувачш.
_ а,торизаu1.1 ~10:.L1НВ1сn •хо~· • систему ;t.lJI 2 Продрапu.н1сть та швидкодія:
;JO(.,..}.- n,v ,10 особистоrо ..:ао1Не1)'. - оптю11зац1.1 mвн.:u-ост1 завантажеюu сторінок: mвн:u-а
1 п,~uд то1ар11: в~;хnов~;п, систе!>m на запити корис1)'8а'ІІ.В
_ nо!П)1' та фLїьтраuUІ товарш : мож."DПІість ПDндоrо - масштабоваюсть: ле~;~,о3'ІНТН з;~,аТН1сть системи .:t.1Я
JJOIII)1.)' тоааріа за 1.aтeropwrн o~и;ia)m масштаоуваюu I ефе~..-тивно працювати при зросУаню обсяr}·
,tар&І--Теf)Нетю,:ами ТОЩО, шрнс1)'Ва'ІІ.В або товарш.
_ ;~ета.;ьна 1нфор~1ація ~ро товар· 111,1ображеюu фото, З ІнтерфQйс:
оІІJІС)', х.ара~..-тернстю.:, um та на.оност1 товар18 - Uf1)·1ТШІний ІНТерфейс шрнС1)'1ІЗЧа забезпечеНЮІ зручносn
з Офор\t.1'1ННJІ Jй\lOlltlHНJІ: Уа :ten:ocт1 вт:орнстання веосайІ)· ;t.1Я oy;:xь-.noro
_ ;~о;1АВАЮU товар11 у i,;omю.:: ,-10,1,;:rnвість вибору та І.ОрНС1)'8аЧ8,
юере,1,;еюu товар11 ;t.lJI ПОJ..)'1'1}(И; - а,1аптш~ннй .1НЗайн nраце3,1атюсп. Уа зручюсn.
_ офор)L1еИНІ замов.,еНИІ . вве,1еюu а,1~сн ,1оста.вки вю;орнстаюur на р1зних nрнстроюt та роз.\11рах е~..-раюв
та ІЮПОІ 1нфор:-.1ац11 про замов.,енюr
4 }'пра11інНІІ ад:w1юстраторо.,1:
,1о;ха.вакня ~;tаІ')'ВаННJІ. вид:1еННJІ. товарш ·
wо,..їІ111сть зм~ю, асортнменt) маrазИН)
Рисунок Г4 - Слайд 4
Діаграма прецедентів
Рисунок Г5 - Слайд 5
124
ЧДТУ 242235 90 01 4
Проектування логічної структури
Діаrрама к~1асів Діаrрама пакетів
-- ~ l- -
-'
-· ~
:-----~:-··: . --·-
-· ..
'
.·-' .
Рисунок Гб - Слайд 6
Архітектурне проектування
Діаrра1'1а · Діаrрама розrортаввя
K0I\IO0BfBTIB
КМ!ІІ
1=~~
\_ ,І
Рисунок Г7 - Слайд 7
125
ЧДТУ 242235 90 01 5
Моделювання поведінки системи
Діаграма діяльності
•·
.. •
..
. [ --"
.. .. /
,,,, ,, ' .. ' ---,
г
.... ,.
І
:.,е\._.,..,.,.,.. . , .,,._
. ·------_.)
•!
Рисунок Г8 - Слайд 8
Моделювання поведінки системи
Діаrрама послідовності
f\)uJ tONPI
~4 '!_....,, ~ •~І ►І ,t.,.,...... ,~•~o.,111-, _ -------
1 n •:-~:.,,...,щ. .- -
,с -
1
<ln_._P._. ., _..-•• ·-·
r ~'f'~•':f"~---------
!І"-----
1 ,c щ-""1'"•'""""".,...i
*<f'' ___, _. '" І
І t nir"9A• - ,t,,ff. .....
1'
p»cyJIOK Г9 - слайд 9
126
-.
6
--{ ,.. ... -.. І
Рисунок Г 1О - Слайд 1О
Моделювання поведінки системи
Дiarpa1'ra сківчt>ввоrо авто1'1ату
• iBTt'pфt>lcy
•І
1.t. ... ,. и<,.;а.:Іt•t ,..-t>ff•
"""&J,1.-, .r-eo ~1" ..
AAІo,p,,.J.a.J!l•~Na4 ._.
1,:~rpr,1~
-с=-:=-)
'--=:::--.---~;;;;_
•l - ----
Рисунок Г 11 - Слайд 11
Структурна схема
r-,.и .~~.,, ,. .. ).,
l ~t.ap.f
ок Г12 _ Слайд 12
Рисун
127
ЧДТУ -
242235 90 01
7
Jiori1111a схема
P,noiитopfli
Rt~t
Канали
передач/
Контроn,р /,І- Ctp1ic Moдtn1o
клієнтська частина
Серверна частина
Рисунок ГІЗ - Слайд 13
Струк1УJ)а бази даних
·-
......
·-
·- , .. 41)
- , І ......
.. ,,,.
.... ·-(,. ....... ·-
·- ·-
Рисунок Г 14 - Слайд 14
128
ЧДТУ 242235 90 о J 8
.... Інтерфеі'
- Іс кор11стув11ча l
., • n
1 кvкУРУ.3.К..А. ... ______о: ;.;•,.;·,;· __;· .,
... f,' .:.
" '" ..: ~" '-1 . ~..,-, ., .. ut- --
"~" ,с... ~4•·- ••.ан,r--, _ __
мсс; м -')) Ірм • I Jf!j) ІРОі н-•-
M ·CF&Ei! ~-ЕІ&ііе+е +м•Ніr &Е МЕ
•L'""8a'r0 Lf'9IO" S
Рисунок Г 15 - Слайд 15
Тестування
N! Е,...,~ д;;тктуао- Ре,-,v,,тктуuнм,
! Tecтvw1ot11 с,. .,. ...,,., Н18trацІА no сайту: nере1ірк1 меню, nowyкy тоuрі1, к,~rорій, фи~,тріІ. Всі Q';'НІ<ЦІЇ Пр.ІЦЮЮ'Т1) 6-J nробмм.
І рм1 ttOp44C"ТyU"'tJ П.рt,rлц Т'МІр!І . Мрt:Іір.са іJ,tфор.у.,ціі npo ТОІІРН, фот~'9. ЦPf~cnt,tИ. 3ІМО8МННА ~ІСЖП'ЬаІ б@J n~'.
Да.аа■І"4НА roupi■ де кow,ta: Ф'f1,4кціон.м дОДІuню~, n~rмд коt.uкка, ред,fУNНЮІ,
І•'ІДаММНR.
ОформмнЮІІ 11моемнн~.: nроцк ~нм.~t 1амо111енн,,, 1и.цен~,u~ ,1ин.tх no,tynц,i,
n ,~n"...-et-i+4A JІNІОІМ+-t~.
2 Тестуа~"°' с,,стw.\,, Уnра8І'Іінн,~ топрами: дадаІІННJt, ~ryuкм.it, ■и..t:+МеНМІ' тоuрі1. Всі Оункціі ~.а,.У.іністрпо~ nрац,юкm.1<01)еКТ'Но,
·-· Уnрамі11НА 11моІЛЬ4н.АМи: nepe:r/U\A, oбpo6tt,, 1,-u~ сптусіt. Дані . о,стtмі ОНО8/І~ Пр.ІІМСWЮ.
ІАМІніС'f'РІr,,р1 Уnра&nіНЮІ' б~нд,ІНJІ П тнn1мм: АодІІІНН.11, ре.ц.1rуа1нНА, Інд,.м~. :З.МО811t-+tНА оброШІОТЬС." -оектм,но.
3 Tr.::тyu,otA Ркстра.ци~: мt:11':)ro r.09~1: r.рсцк ~стр~ц,ї, taeдttcJodl д,м..-з., n~рк.а 1d Ркстр.1ці,1 n ах.ід• о~ \~У npaЦ8Ct(nЬ 6-J n~e.v:.
ІІ'Т'ОрНІІWЇ ТІ nр,,а~ЬІ4іс'п,,, Профu,і .сористуuчі1 омо~ Mp.18MDfoIO.
рес.стрІЦІЇ А8тормJІЦU' КОІ)Исту8іІ'41: ах.ід 8 СИСТ~у, nt'j)eaЇptQ ДJIOtX. Смспм1 JUИщен. ~ нес1нмціомоа1иоrо /JIXТVffY.
KOJ)МCТVU"fЇI РtД,ІrуаІнНJІІ nрофи,о: sмін1 nе,рс<Жа.r.ьних ДІНЮ:, n1po1Ua.
4 Тe CT)'ZAll!LI HQІSi.a~iJt.: aepezipxa nолЧJІост1 та простоти 11uіrації. !итерфейс spo.sp,i'UIЙ та .1erom у
sруЧІІосn Чита~єлніст~: oailln шрифтіz, to;u,opia, 1:о~прасту. 1в~орист111ю.
IIЩ>J)JІCT&IIJUI Фор.wи та иед,ню1 даних: sppuucть sааоавекu фор>r, иuавість ai..:Iuso~. Чвта~иість ~~сту ва аисо~""У ріаиі.
uперфеііС)· Мо6и~на uptl.f. uааnаюсть звsа.ііиу n,1.1 >rоб~иих пристроїв. ~Іобіn,иа аерсіа onт1n1iюaua ;1.1.1 рUИІІХ
І DDИСТDОЇІ.
Рисунок Г 16 - Слайд 16
Дякую за увагу!
Рисунок ГІ 7 - Слайд 17
129