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/6036| Title: | Сайт магазину електротоварів |
| Authors: | Дяченко, Петро Васильович Солтанова, Ельвіра Фікратівна |
| Keywords: | ЕЛЕКТРОТОВАРИ,;ВЕБ-САЙТ МАГАЗИНУ,;АДАПТИВНИЙ ДИЗАЙН,;ЕЛЕКТРОННА КОМЕРЦІЯ,;BOOTSTRAP,;ІНФОРМАЦІЙНА СИСТЕМА. |
| Issue Date: | 11-Jun-2025 |
| Abstract: | У сучасному світі наявність власного веб-сайту є важливою складовою успішного розвитку будь-якого бізнесу. Особливо це стосується роздрібної торгівлі, де конкуренція постійно зростає, а споживачі прагнуть зручності, швидкості та доступності інформації про товари. Онлайн-присутність дозволяє значно розширити цільову аудиторію, оптимізувати процеси замовлення та продажу, а також покращити взаємодію з клієнтами. У межах даної кваліфікаційної роботи було створено сайт магазину електротоварів, який дозволяє клієнтам переглядати асортимент продукції, отримувати детальну інформацію про товари, здійснювати онлайн-пошук, переглядати категорії товарів та, за потреби, зв’язатися з адміністрацією магазину. Реалізовано адаптивний дизайн, що дозволяє користуватися сайтом з будь-яких пристроїв смартфонів, планшетів чи комп’ютерів. Вебсайт також передбачає зручну адміністративну панель для керування товарами, категоріями та користувачами. Метою кваліфікаційної роботи є проектування та створення сучасного веб-сайту для магазину електротоварів з використанням сучасних web-технологій. Об’єкт дослідження: web-орієнтовані інформаційні системи для підприємств роздрібної торгівлі. Предмет дослідження: web-сайт магазину електротоварів. Методи дослідження. У процесі виконання роботи використовувалися методи аналізу і порівняння існуючих рішень, практичне програмування з використанням JavaScript бібліотеки React JS, фреймворку Bootstrap 4.x та серверної частини Node.js. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6036 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Солтанова Ельвіра_КНС-2101_2024-2025.pdf Restricted Access | 5.05 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра комп’ютерних наук та системного аналізу
Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітній рівень)
на тему: «Сайт магазину електротоварів»
Виконала: студентка 4 курсу, групи КНС-2101
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування»
Солтанова Ельвіра Фікратівна
Керівник Дяченко П.В.
(прізвище та ініціали)
Черкаси 2025 року
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітній рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
ЗАТВЕРДЖУЮ
Завідувач кафедри КН та СА
_______________ Триус Ю.В.
«____» _____________ 2025 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
(прізвище, ім‘я, по батькові)
1. Тема роботи «Сайт магазину електротоварів»
Керівник роботи Дяченко П.В., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «25» лютого 2025 р. №45/03-03.
2. Строк подання студентом роботи до 11 червня 2025 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з наукової практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Обґрунтування необхідності створення web-орієнтованої інформаційної системи інтернет-
магазину електротоварів.
4.2. Огляд аналогів існуючих інтернет-магазинів електротоварів.
4.3. Постановка задачі створення інформаційного ресурсу.
4.4. Вибір програмних засобів.
4.5. Проєктування структури сайту та бази даних.
4.6. Реалізація користувацького інтерфейсу та функціональних можливостей системи .
4.7. Забезпечення інформаційної безпеки та захисту даних користувачів.
Висновки.
5 . Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А.
5.5. Презентація у вигляді 23 слайдів.
6 . Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі
завдання 25.02.2025
КАЛЕНДАРНИЙ ПЛАН
№ Строк виконання
Назва етапів кваліфікаційної роботи магістра Примітка
з/п етапів роботи
1 Видача завдання на кваліфікаційну роботу
25.02.2025 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та
до 28.02.2025 Виконано
предмету дослідження.
3 Написання теоретичного розділу
до 15.03.2025 Виконано
кваліфікаційної роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2025 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2025 Виконано
кваліфікаційної роботи бакалавра.
6 Перед захист кваліфікаційної роботи магістра на
01.06.2025 Виконано
засіданні кафедри КН та СА.
7 Подання роботи завідувачу кафедри КН та СА. до 28.05.2025 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2025 Виконано
Студент _____________________________ Солтанова Е. Ф.
(підпис)
Керівник роботи ____________________________ Дяченко П. В.
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 88 с., 39 рис., 5 табл., 8
використаних джерел, 1 додатків.
Актуальність теми.
У сучасному світі наявність власного веб-сайту є важливою складовою
успішного розвитку будь-якого бізнесу. Особливо це стосується роздрібної торгівлі,
де конкуренція постійно зростає, а споживачі прагнуть зручності, швидкості та
доступності інформації про товари. Онлайн-присутність дозволяє значно розширити
цільову аудиторію, оптимізувати процеси замовлення та продажу, а також
покращити взаємодію з клієнтами.
У межах даної кваліфікаційної роботи було створено сайт магазину
електротоварів, який дозволяє клієнтам переглядати асортимент продукції,
отримувати детальну інформацію про товари, здійснювати онлайн-пошук,
переглядати категорії товарів та, за потреби, зв’язатися з адміністрацією магазину.
Реалізовано адаптивний дизайн, що дозволяє користуватися сайтом з будь-яких
пристроїв смартфонів, планшетів чи комп’ютерів. Вебсайт також передбачає
зручну адміністративну панель для керування товарами, категоріями та
користувачами.
Завдяки використанню сучасних технологій, таких як React JS, Node.js,
Bootstrap 4.x, сайт є швидким, зручним та масштабованим. Тобто створення веб-
сайту магазину електротоварів є актуальним кроком у розвитку електронної торгівлі
та впровадженні інтернет-рішень у бізнес-процеси.
Мета роботи і задачі дослідження: Метою кваліфікаційної роботи є
проектування та створення сучасного веб-сайту для магазину електротоварів з
використанням сучасних web-технологій. Для досягнення мети необхідно вирішити
наступні задачі:
− проаналізувати існуючі сайти аналогічних магазинів;
− визначити функціональні вимоги до сайту;
− обрати програмно-технічні засоби для реалізації задачі;
− спроєктувати структуру сайту та його функціонал;
− реалізувати веб-сайт з адаптивною версткою;
− реалізувати бекенд частину з підтримкою API для товарів, категорій і
користувачів;
− провести тестування та перевірку працездатності розробленої системи.
Об’єкт дослідження: web-орієнтовані інформаційні системи для підприємств
роздрібної торгівлі.
Предмет дослідження: web-сайт магазину електротоварів.
Методи дослідження. У процесі виконання роботи використовувалися методи
аналізу і порівняння існуючих рішень, практичне програмування з використанням
JavaScript бібліотеки React JS, фреймворку Bootstrap 4.x та серверної частини
Node.js.
Перелік ключових слів: ЕЛЕКТРОТОВАРИ, ВЕБ-САЙТ МАГАЗИНУ,
REACT JS, АДАПТИВНИЙ ДИЗАЙН, BOOTSTRAP, ЕЛЕКТРОННА КОМЕРЦІЯ,
ІНФОРМАЦІЙНА СИСТЕМА.
ABSTRACT
The qualification work of the bachelor contains: 88 pages, 39 figures, 5 table, 8
used sources, appendices.
Actuality of theme.
In today's world, having a website is an essential component of successful business
development. This is especially relevant in the field of retail trade, where competition is
constantly growing and consumers seek convenience, speed, and easy access to product
information. Online presence allows businesses to significantly expand their target
audience, optimize the ordering and sales processes, and improve customer interaction.
As part of this qualification work, a website for an electrical goods store was
developed, allowing clients to view the product catalog, access detailed information,
perform online searches, browse product categories, and contact store administration if
needed. The site features a responsive design, making it accessible from any device
smartphones, tablets, or computers. Additionally, the website includes a convenient admin
panel for managing products, categories, and users.
Thanks to the use of modern technologies such as React JS, Node.js, and Bootstrap
4.x, the site is fast, user-friendly, and scalable. Therefore, the development of the electrical
goods store website is a relevant step in the growth of e-commerce and the implementation
of internet solutions in business processes.
Purpose and tasks of research: The aim of this bachelor's qualification work is to
design and develop a modern website for an electrical goods store using up-to-date web
technologies. To achieve this aim, the following objectives were defined:
− nalyze existing websites of similar stores;
− define the functional requirements of the site;
− select software and hardware tools for implementation;
− design the website structure and its functionality;
− implement a responsive web layout;
− implement the backend part with API support for products, categories, and users;
− test and verify the functionality of the developed system.
Object of research: web-oriented information systems for retail enterprises.
Subject of research: website of an electrical goods store.
Research methods. During the course of the work, methods of analysis and
comparison of existing solutions were used, as well as practical programming using the
React JS JavaScript library, the Bootstrap 4.x framework, and the Node.js server platform.
List of key words: ELECTRICAL GOODS, WEBSITE OF THE STORE, REACT
JS, RESPONSIVE DESIGN, BOOTSTRAP, E-COMMERCE, INFORMATION
SYSTEM.
ЗМІСТ
ВСТУП ............................................................................................................................ 10
1. ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МАГАЗИНУ ЕЛЕКТРОТОВАРІВ ........................... 12
1.1. Актуальність створення інформаційного ресурсу для магазину
електротоварів ...............................................................Error! Bookmark not defined.
1.2. Основні завдання і функції інтернет магазину електротоварів ....................... 13
1.3. Види електронної комерції ................................................................................ 15
1.4. Огляд аналогів та платформ електронної комерції .......................................... 16
1.5. Порівняльна характеристика сучасних E-Commerce рішень .......................... 24
Висновок до розділу 1 ................................................................................................. 25
2. ОПИС СТРУКТУРИ ТА ФУНКЦІОНУВАННЯ ІНТЕРНЕТ МАГАЗИНУ .......... 26
2.1. Загальна характеристика інтернет магазину .................................................... 26
2.2. Організаційна структура магазину ................................................................... 27
2.2.1. Адміністративне управління інтернет-магазином ...................................... 27
2.2.2. Управління контентом сайту ....................................................................... 28
2.2.3. Клієнтська підтримка та сервісне обслуговування..................................... 28
2.2.4. Логістика та товарний облік ........................................................................ 28
2.2.5. Цифровий маркетинг та рекламне просування інтернет-магазину ........... 29
2.2.6. Технічне забезпечення та розвиток веб-платформи ................................... 29
2.3. Моделювання бізнес-процесів .......................................................................... 30
Висновок до розділу 2 ................................................................................................. 37
3. ПРОЄКТУВАННЯ СТРУКТУРИ ІНТЕРНЕТ МАГАЗИНУ ................................. 38
3.1. Проєктування адміністративної частини .......................................................... 38
3.2. Проєктування клієнтської частини ................................................................... 39
3.2. Проектування бази даних магазину .................................................................. 40
Висновки до розділу 3 ................................................................................................. 46
4. РЕАЛІЗАЦІЯ МАГАЗИНУ ЕЛЕКТРОТЕХНІЧНИХ ТОВАРІВ ЧЕРЕЗ
МЕРЕЖУ ІНТЕРНЕТ .................................................................................................... 47
4.1. Вибір середовища розробки .............................................................................. 47
9
4.2. Опис роботи розробленої адміністративної частини магазину ....................... 49
4.3. Опис роботи розробленої клієнтської частини магазину ................................ 56
Висновки до розділу 4 ................................................................................................. 65
ВИСНОВКИ ................................................................................................................... 67
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ....................................................................... 69
ДОДАТОК А .................................................................................................................. 70
10
ВСТУП
Сучасне суспільство активно застосовує досягнення інформаційних
технологій у всіх сферах діяльності, зокрема у сфері торгівлі. Одним із
найстрімкіших напрямів розвитку є електронна комерція, котра дозволяє
здійснювати купівлю та продаж товарів через Інтернет. Створення власного онлайн-
магазину стало доступним для великого кола підприємців завдяки порівняно
незначним витратам на запуск, широким можливостям автоматизації процесів та
охопленню значної кількості потенційних клієнтів.
Інтернет-магазини електротоварів є особливо затребуваними, адже сучасна
людина постійно має потребу в електротехнічних засобах від освітлення до
складної побутової техніки. Онлайн-торгівля такою продукцією забезпечує
користувачам зручність замовлення, доступність цін, широкий асортимент, а також
можливість швидкого пошуку потрібного товару. Для власника бізнесу це спосіб
зменшити витрати на оренду приміщення, персонал і логістику, при цьому
збільшуючи конкурентоспроможність.
Предметом дослідження є інформаційні засоби автоматизації процесу продажу
електротоварів із використанням вебтехнологій.
Об’єктом дослідження виступають принципи побудови електронних
магазинів, що дозволяють забезпечити ефективну взаємодію між продавцем і
покупцем у сфері електротоварів.
Мета роботи – проєктування та розробка інформаційного вебресурсу для
автоматизації продажу електротоварів через Інтернет з можливістю адміністрування
асортименту, обробки замовлень та взаємодії з користувачами.
Для досягнення поставленої мети необхідно реалізувати такі завдання:
– дослідити існуючі рішення та платформи для створення онлайн-магазинів;
– визначити вимоги до функціональності інформаційної системи для
електронного магазину електротоварів;
– спроєктувати архітектуру вебзастосунку з урахуванням потреб
користувачів та адміністратора;
11
– розробити базу даних для зберігання інформації про товари, категорії,
замовлення та клієнтів;
– реалізувати клієнтську та адміністративну частини сайту з використанням
сучасних технологій веброзробки;
– протестувати функціональність сайту та оцінити його ефективність.
Вивченню процесів створення електронних магазинів присвячено значну
кількість наукових і прикладних досліджень. У літературі розглядаються питання
архітектури систем електронної комерції, зручності користувацького інтерфейсу,
особливостей CMS і фреймворків для реалізації проєктів подібного типу. Ці джерела
стали основою для розробки повноцінного, функціонального та зручного онлайн-
магазину електротоварів у рамках цієї кваліфікаційної роботи.
12
1. ОБГРУНТУВАННЯ НЕОБХІДНОСТІ СТВОРЕННЯ WEB-ОРІЄНТОВАНОЇ
ІНФОРМАЦІЙНОЇ СИСТЕМИ МАГАЗИНУ ЕЛЕКТРОТОВАРІВ
1.1 Актуальність створення інформаційного ресурсу для магазину
електротоварів
На сьогодні електронна комерція є одним із найбільш динамічних і зручних
способів продажу товарів. У зв’язку зі зростанням попиту на електротехнічну
продукцію, створення спеціалізованого web-сайту магазину електротоварів є
актуальним завданням, яке дозволяє ефективно представити асортимент товарів,
забезпечити швидкий зв’язок із клієнтом, автоматизувати процеси замовлення та
доставки.
Для зручності потенційних покупців, а також для підвищення впізнаваності
бренду, було прийнято рішення створити сучасний web-сайт, який забезпечує
доступ до інформації про електротовари, акції, способи оплати, доставки, а також
дозволяє легко зробити замовлення.
Наявність такого ресурсу відкриває нові можливості для бізнесу – значне
зниження витрат на обслуговування клієнтів, підвищення швидкості обробки
замовлень, цілодобова доступність товарів, що є важливим конкурентним чинником.
Із розвитком технологій та високою конкуренцією на ринку електротоварів,
важливо не лише мати вебсайт, але й зробити його ефективним інструментом
взаємодії з цільовою аудиторією. Вебсайт повинен мати унікальний, приємний для
користувача дизайн, адаптивну верстку, зрозумілу навігацію та зручну систему
фільтрації продукції.
Особливу увагу слід приділити Internet-маркетингу, серед методів якого
можна виділити:
– індексацію сайту у пошукових системах (Google, Bing);
– контекстну рекламу у пошукових системах;
– просування через соціальні мережі (Facebook, Instagram);
– email-розсилки з інформацією про акції та новинки.
13
Створення сайту також дає змогу бізнесу бути присутнім на різноманітних
майданчиках:
– онлайн-каталогах товарів;
– маркетплейсах;
– дошках оголошень;
– профільних форумах та спільнотах.
Крім того, сучасна аудиторія, яка користується Інтернетом, є переважно
обізнаною та активно впливає на репутацію бренду – це так звані «лідери думок».
Тому важливо створити ресурс, який викликає довіру, забезпечує зручність
користування та постійно оновлюється.
Сайт магазину електротоварів має забезпечувати такі функціональні
можливості:
– цілодобовий доступ до каталогу продукції;
– зручна навігація та система пошуку;
– відгуки та рейтинг товарів;
– онлайн-форма замовлення;
– адмінпанель для керування контентом сайту;
– інформація про новинки, акції та знижки.
Отже, Web-орієнтована система для магазину електронних виробів - це
проєкт, який буде сучасним і актуальним з точки зору ведення успішного бізнесу.
1.2 Основні завдання і функції інтернет магазину електротоварів
Сучасні технології значно прискорили ритм життя в суспільстві. Темп, з яким
ми рухаємося, а ще з якою отримуємо доступ до товарів та послуг, дуже важлива.
Відтак, споживачі все частіше надають перевагу онлайн-магазинам як швидкому та
безпечному способу придбати потрібний товар. Однією з найпопулярніших в
Україні і надалі залишається побутова електроніка – від дрібних електроприладів до
промислового обладнання та їхніх частин.
14
Веб-магазини електротоварів - це не тільки автоматизована торгівельна точка,
а інформаційний вузол, що забезпечує зв'язок між продавцями та покупцями. Такі
платформи економлять час, адже клієнти мають можливість не тільки побачити весь
асортимент, отримати консультацію, порівняти його, безпосередньо здійснити
оплату, але все це виконати в режимі онлайн.
Основні завдання веб-магазину електротоварів полягають у наступному:
– забезпечення зручного та швидкого доступу користувачів до каталогу
продукції;
– надання актуальної та детальної інформації про кожен товар
(характеристики, фото, наявність, ціна);
– організація ефективної системи пошуку та фільтрації товарів;
– реалізація простого механізму замовлення та оформлення покупки;
– зберігання історії замовлень та особистого кабінету клієнта;
– адаптивний дизайн, що дозволяє комфортно користуватись сайтом з будь-
якого пристрою;
– можливість керування контентом сайту через адміністративну панель.
Переваги використання веб-магазину:
– економія часу як для клієнтів, так і для персоналу;
– розширення клієнтської бази завдяки доступності в будь-якому регіоні;
– зменшення витрат на оренду та утримання фізичних торгових площ;
– швидке оновлення інформації про наявність товарів та зміну цін;
– можливість аналітики продажів і поведінки користувачів у реальному часі.
Інтернет-магазин електротехніки завдяки своїй зручній структурі та
функціональності надає багато переваг не тільки кінцевому споживачеві, а й
компанії-власнику. Система може збирати важливу інформацію про поведінку
користувачів веб-сайту, дозволяючи компанії розробляти персоналізовані
маркетингові кампанії та надавати спеціальні акції та знижки постійним клієнтам.
Веб-магазин повинен бути не лише зручним для користувача, а й ефективним
у плані технічної підтримки. Це включає в себе як своєчасні оновлення, так і швидке
реагування на запити користувачів через різні канали підтримки чати, гарячі лінії,
15
електронну пошту. Автоматизовані системи обробки запитів дозволяють скоротити
час відповіді і забезпечити високий рівень задоволення клієнтів.
Веб-магазин це не просто онлайн-вітрина, а повноцінна цифрова платформа,
яка дозволяє вивести процес купівлі-продажу електротоварів на новий рівень
ефективності та комфорту як для покупця, так і для адміністрації магазину.
1.3 Види електронної комерції
Електронна комерція (e-commerce) це не лише процес купівлі-продажу
товарів і послуг через Інтернет. Це також обмін даними, оформлення замовлень,
обробка платежів і вся взаємодія між покупцем і продавцем у цифровому просторі.
Залежно від того, хто є учасником цих процесів, виділяють кілька основних
форматів електронної комерції. Кожен з них має свої особливості й сфери
застосування.
Електронна комерція функціонує через інтернет. Це означає, що торгівля
відбувається в цифровому середовищі, де покупець і продавець взаємодіють через
веб-платформи, додатки або інші онлайн-канали. Електронна комерція включає в
себе різні види діяльності, такі як онлайн-магазини, інтернет-аукціони, електронні
платіжні системи, цифрові служби доставки товарів і багато іншого. Загалом, e-
commerce надає можливість проводити торгівлю без фізичної присутності покупця і
продавця в одному і тому ж місці [1].
Види електронної комерції:
1. B2C (Business-to-Consumer) найпоширеніший тип, за якого компанії
продають товари або послуги кінцевим споживачам. Це класичні інтернет-магазини,
маркетплейси, мобільні застосунки тощо. Наприклад, Amazon чи спеціалізовані
магазини автозапчастин, побутової техніки або електроніки.
2. B2B (Business-to-Business) формат, орієнтований на торгівлю між
бізнесами. Йдеться про оптові закупівлі, постачання обладнання, програмного
забезпечення, сировини тощо. Такі транзакції зазвичай відбуваються на професійних
16
платформах, які дозволяють укладати контракти, обговорювати умови поставок і
керувати замовленнями онлайн.
3. C2C (Consumer-to-Consumer) коли люди продають щось напряму
іншим людям. Цей формат став популярним завдяки таким сервісам, як eBay або
OLX, де користувачі можуть продавати нові чи вживані речі без посередників.
4. C2B (Consumer-to-Business) зворотна модель, за якої саме споживачі
пропонують свої послуги бізнесу. Це характерно для фріланс-бірж на кшталт
Upwork або Fiverr, де компанії замовляють послуги в окремих виконавців:
дизайнерів, розробників, копірайтерів тощо.
5. B2G (Business-to-Government) електронна взаємодія між компаніями
та державними структурами. Це участь у тендерах, держзакупівлях, постачання
продукції чи надання послуг для державних установ через спеціалізовані онлайн-
системи.
6. G2C (Government-to-Consumer) це формат, у якому держава надає
послуги громадянам через електронні сервіси. Наприклад, сплата податків, штрафів,
подача заяв чи отримання документів через державні портали.
Кожен вид електронної комерції має свої особливості та дозволяє по-своєму
вдосконалити бізнес-процеси і розвивати торгівлю в цифровому просторі. Обрати
той чи інший формат варто, виходячи з цілей компанії, потреб цільової аудиторії та
специфіки товарів чи послуг, які вона пропонує.
1.4 Огляд аналогів та платформ електронної комерції
Усі платформи електронної комерції, які ми розглядали, мають свої
особливості та підходи до продажу товарів онлайн. Вони відрізняються за
асортиментом, тим, на кого орієнтовані, і як саме побудована їхня робота. Якщо
плануєш створити власний інтернет-магазин, варто врахувати цей досвід: зробити
сайт зручним і зрозумілим для користувача, подбати про безпечну оплату, надійну
доставку й просту систему повернення товару. Усе це допоможе зробити сервіс
приємним для покупців і підвищити довіру до нього.
17
1. Rozetka (рис. 1.1) є одним з найбільших і найпопулярніших інтернет-магазинів
в Україні. Платформа пропонує широкий асортимент товарів від електроніки до
побутової техніки та товарів для дому. Окрім того, Rozetka надає зручний інтерфейс
для користувачів, що дозволяє швидко знаходити потрібні товари, а також має
систему знижок і акцій, що робить покупки ще більш вигідними.
Особливості платформи:
– великий асортимент товарів різних категорій;
– можливість оплати при отриманні або карткою;
– доставка по всій Україні.
Рисунок 1.1 – Головна сторінка сайту Rozetka.ua
2. Prom.ua (рис. 1.2) українська онлайн-платформа, яка об'єднує малий та
середній бізнес. Бізнеси можуть створювати свої інтернет-магазини на платформі
для продажу товарів або послуг. Prom.ua підтримує інтеграцію з різними
платіжними системами та службами доставки, що дозволяє підприємцям
18
організувати продажі на платформі без необхідності створення окремого веб-
сайту.
Особливості платформи:
– можливість створення онлайн-магазину для бізнесів без необхідності
програмування;
– інтеграція з платіжними системами;
– підтримка різноманітних бізнес-інструментів для оптимізації продажів.
Рисунок 1.2 – Головна сторінка сайту Prom.ua
3. Allegro (рис. 1.3) польська онлайн-платформа, яка активно працює на
українському ринку. Це великий торговий майданчик, де покупці можуть знайти
різноманітні товари, від техніки до одягу та взуття. Allegro надає бізнесам
19
можливість створювати онлайн-магазини на своїй платформі, а також підтримує
різні способи оплати та доставки.
Особливості платформи:
– великий вибір товарів різних категорій;
– можливість переглядати відгуки та рейтинги товарів;
– підтримка міжнародної доставки.
Рисунок 1.3 – Головна сторінка сайту Allegro.ua
4. Epicentrk (рис. 1.4) одна з найбільших українських платформ для продажу
товарів для дому, ремонту та будівництва. Цей інтернет-магазин є частиною
мережі будівельних гіпермаркетів, що має потужний онлайн-магазин, де можна
придбати не лише будівельні матеріали, але й побутову техніку, товари для
садівництва та багато іншого.
Особливості платформи:
– спеціалізація на товарах для ремонту та будівництва;
20
– різноманітні методи оплати та доставки;
– можливість покупки для бізнесів і фізичних осіб.
Рисунок 1.4 – Головна сторінка сайту Epicentrk.ua
5. Foxtrot (рис. 1.5) інтернет-магазин електроніки та побутової техніки в
Україні. Платформа дозволяє купувати продукцію різних виробників за
конкурентоспроможними цінами. Інтерфейс платформи зручний та інтуїтивно
зрозумілий, що дозволяє користувачам швидко знаходити потрібні товари та
здійснювати покупки.
Особливості платформи:
– спеціалізація на техніці та побутових приладах;
– програми лояльності для постійних покупців;
– багато варіантів доставки та оплати.
21
Рисунок 1.5 – Головна сторінка сайту Foxtrot
6. Yakaboo (рис. 1.6) український інтернет-магазин, спеціалізований на
продажу книг. Платформа пропонує широкий вибір книжок різних жанрів, мов та
форматів. Це одна з найбільших онлайн-книгарень в Україні, яка зручна як для
покупців, так і для видавців, що дозволяє їм ефективно продавати свою
продукцію через Інтернет.
Особливості платформи:
– спеціалізація на книгах, аудіокнигах та навчальних матеріалах;
– зручний інтерфейс для пошуку книг;
– можливість передзамовлення новинок.
22
Рисунок 1.6 – Головна сторінка сайту Yakaboo
7. Allo (рис. 1.7) інтернет-магазин, який спеціалізується на електроніці та
побутових приладах. На платформі доступні смартфони, телевізори,
холодильники, а також різноманітні аксесуари. Allo забезпечує зручний процес
покупки та доставку товарів по всій Україні.
Особливості платформи:
– спеціалізація на електроніці;
– можливість вибору варіантів доставки та оплати;
– наявність безкоштовної доставки.
23
Рисунок 1.7 – Головна сторінка сайту Allo.ua
Усі розглянуті платформи електронної комерції мають власні особливості та
підходи до організації продажу товарів через Інтернет. Кожна з них має свою
специфіку, залежно від асортименту товарів, цільової аудиторії та обраної бізнес-
моделі. При створенні власного онлайн-магазину важливо враховувати досвід цих
платформ, орієнтуватися на інтуїтивно зрозумілий інтерфейс, безпечні способи
оплати, ефективну систему доставки та зручний процес повернення товарів.
24
1.5 Порівняльна характеристика сучасних E-Commerce рішень
Зараз, коли цифрові технології розвиваються дуже швидко, а онлайн-покупки
стали звичною справою, правильно підібрана платформа для інтернет-магазину має
велике значення. Якщо йдеться про продаж електротехнічної продукції, то варто
зважати не лише на зовнішній вигляд сайту, а й на зручність роботи з товарами,
можливість легко оновлювати інформацію, приймати оплату, відправляти
замовлення через різні служби доставки та мати запас на майбутнє якщо магазин
буде рости.
Щоб створити такий магазин, є кілька шляхів: можна скористатися вже
готовими системами для керування вмістом (CMS), взяти хмарний сервіс на кшталт
SaaS або ж робити сайт з нуля, використовуючи сучасні інструменти розробки.
Багато українських підприємців починають із платформи Prom.ua вона
проста у використанні і дозволяє запустити магазин без зайвих технічних
складнощів. Але такий варіант має свої межі: якщо потрібні особливі функції,
гнучкий дизайн або точні налаштування під конкретний тип товарів і клієнтів як у
випадку з електротехнікою краще обирати більш гнучкий і технологічний підхід.
Ще один популярний варіант це використання CMS-платформ, наприклад,
OpenCart або WordPress із плагіном WooCommerce. Такі системи дають більше
свободи: можна налаштовувати функціонал під свої потреби, підключати додаткові
модулі, змінювати дизайн. Але без базових технічних знань тут не обійтись або ж
доведеться звертатися до спеціалістів. Якщо товарів багато, особливо з детальними
характеристиками, можуть виникати складнощі з продуктивністю тоді вже
потрібно оптимізувати базу даних і думати про більш серйозні серверні рішення.
Shopify це хмарна платформа, яку часто хвалять за простоту та зручний
інтерфейс. На ній можна швидко стартувати й мати технічну підтримку «з
коробки». Але вона більше орієнтована на міжнародний ринок: коштує недешево, а
з українською локалізацією іноді виникають труднощі. Тому для наших реалій
Shopify підходить не завжди.
25
Magento (Adobe Commerce) є одним із найпотужніших e-commerce рішень,
орієнтованих на великі торговельні платформи. Її можливості дозволяють
реалізувати практично будь-який бізнес-процес, проте така система є складною в
освоєнні та обслуговуванні. Розгортання Magento вимагає значних фінансових і
технічних ресурсів, що не завжди є доцільним для середніх за масштабом проєктів.
У межах цієї роботи було вирішено не йти стандартним шляхом, а розробити
власний вебзастосунок для інтернет-магазину електротехніки. Для цього
використано React.js на фронтенді, Node.js і Express.js для серверної частини, а
також MongoDB як гнучку нереляційну базу даних. Інтерфейс побудовано на базі
Material UI, що дало змогу зробити його сучасним і зручним. Такий підхід дозволив
максимально точно втілити всі потрібні функції, забезпечити швидку роботу навіть
з великим обсягом даних, адаптивність до різних пристроїв і підготувати систему до
подальшого розвитку.
Підсумовуючи, після аналізу доступних рішень стало зрозуміло, що саме
індивідуальна розробка найкращий варіант для проєктів зі специфічними
вимогами до структури товарів, фільтрації, адміністрування й інтеграції зі
сторонніми сервісами. Це дозволяє створити інтернет-магазин, який не просто «є», а
дійсно працює для своєї аудиторії.
Висновок до розділу 1
В даному розділі було проаналізовано принципи функціонування електронної
комерції, розглянуто основні процеси роботи онлайн-магазинів, зокрема у сфері
продажу електротехнічних товарів, а також проведено огляд сучасних вітчизняних
рішень та платформ для реалізації таких проєктів. Зіставлення можливостей різних
підходів до створення e-commerce ресурсів дозволило обґрунтувати доцільність
використання індивідуального підходу до розробки веб-застосунку, що забезпечує
максимальну гнучкість, адаптивність і масштабованість для майбутнього розвитку
онлайн-магазину.
26
2 ОПИС СТРУКТУРИ ТА ФУНКЦІОНУВАННЯ ІНТЕРНЕТ МАГАЗИНУ
2.1 Загальна характеристика інтернет-магазину
Інтернет-платформа з продажу електротоварів «Електротехніка» функціонує
виключно в онлайн-форматі та забезпечує доступ користувачів до широкого
асортименту електротехнічної продукції для побутового, офісного та промислового
використання.
1. Продаж електротоварів різного призначення:
– кабельно-провідникова продукція: кабелі, дроти, монтажні комплектуючі;
– джерела освітлення: лампи, LED-світильники, прожектори, LED-стрічки;
– модульне електрообладнання: автоматичні вимикачі, реле, УЗО та інші
засоби захисту;
– електроінструменти, вимірювальні прилади, витратні матеріали;
– товари для систем електропостачання й елементи розумного дому.
2. Надання детальної інформації та технічних характеристик товарів для
зручного підбору.
3. Можливість оформлення онлайн-замовлення з доставкою по всій території
України.
4. Персоналізований підбір товару відповідно до потреб клієнта через
систему фільтрів і сортування.
5. Гарантія якості продукції, супровідна документація (сертифікати,
техпаспорти), консультаційна підтримка.
6. Гнучка система знижок, бонусів і акцій для постійних клієнтів.
27
2.2 Організаційна структура магазину
На рисунку 2.1 представлено організаційну структуру магазину.
Власник /
Адміністратор
сайту
Менеджер з
Контент- Головний Фахівець з
обслуговуванн Розробник Маркетолог
менеджер бухгалтер логістики
я клієнтів
Технічна SMM-
Склад
підтримка менеджер
Рисунок 2.1 – Організаційна структура магазину електротоварів
Представимо опис основних підрозділів підприємства.
2.2.1 Адміністративне управління інтернет-магазином
До адміністрації входять директор (він же засновник проєкту) та головний
бухгалтер.
Директор виконує функції управління всіма напрямами роботи сайту:
визначає стратегію розвитку онлайн-магазину, формує загальний асортимент,
контролює прибутковість та витрати, керує взаємодією з постачальниками. Він
відповідає за впровадження нових функціональних можливостей на сайті,
організовує рекламні кампанії, укладає договори з партнерами. Також проводить
регулярні онлайн-наради з командою, визначає цілі та контролює їх виконання.
Забезпечує юридичний супровід діяльності сайту, вирішує питання ліцензування,
податкової відповідності та загальної безпеки.
Головний бухгалтер відповідає за ведення повного бухгалтерського обліку,
включаючи облік доходів, витрат, податкових нарахувань, зарплат працівникам, а
також звітність перед податковими органами. Веде облік банківських операцій,
взаєморозрахунків з клієнтами та постачальниками, контролює платіжну дисципліну
28
та формує щомісячну фінансову звітність. Забезпечує дотримання законодавчих
норм у фінансових аспектах діяльності сайту.
2.2.2 Управління контентом сайту
Контент-менеджер забезпечує актуальність і повноту інформації на сайті.
Його завдання додавання нових товарів до каталогу, створення якісних описів,
оптимізованих під пошукові системи (SEO), редагування характеристик,
завантаження зображень та відеооглядів. Також він слідкує за правильністю
відображення акцій, знижок, оновленням статусів наявності товарів на складі.
Контент-менеджер щоденно перевіряє, щоб на сайті не було «битих» посилань,
неправильних цін або дублювання товарів. Співпрацює з маркетологом для
формування контенту під рекламні кампанії та підвищення конверсії.
2.2.3 Клієнтська підтримка та сервісне обслуговування
Менеджери з підтримки працюють з клієнтами на всіх етапах замовлення: від
першого питання на сайті до підтвердження доставки. Вони надають консультації
в онлайн-чаті, телефоном або в месенджерах (Telegram, Viber, Instagram Direct),
допомагають з підбором товару, уточнюють деталі доставки, обробляють
повернення. Також ведуть облік звернень, формують щотижневу звітність про
кількість замовлень, звернень, рівень задоволеності клієнтів.
Менеджери вміють працювати з CRM-системами, швидко знаходити
необхідну інформацію, вирішувати проблемні ситуації та мають високий рівень
комунікації. Основна ціль утримати клієнта та забезпечити позитивний досвід від
покупки.
2.2.4 Логістика та товарний облік
Менеджер з логістики організовує процес обробки замовлень після їх
надходження. Його завдання обрати найбільш вигідний спосіб доставки (Нова
29
Пошта, Укрпошта, Meest, кур'єрська доставка), оформити відправлення через API
або через CRM, контролювати наявність товару на складі постачальника,
погоджувати строки доставки з клієнтом.
Якщо магазин працює за моделлю дропшипінгу, логіст координує відправку
товарів напряму від постачальника до клієнта. В іншому випадку підтримує
зв’язок з партнерськими складами, де фізично зберігається товар.
Також веде облік залишків товарів, формує звіти по поставках, слідкує за
своєчасною доставкою та отримує зворотний зв’язок від клієнтів після отримання
посилки.
2.2.5 Цифровий маркетинг та рекламне просування інтернет-магазину
Менеджер з маркетингу відповідає за просування сайту: створення та запуск
рекламних кампаній у Google Ads, Meta Ads, налаштування ремаркетингу, контенту
для соціальних мереж, просування на маркетплейсах (Prom, Rozetka), а також SEO-
оптимізацію сайту.
Він аналізує поведінку користувачів на сайті за допомогою аналітики (Google
Analytics, Hotjar, Serpstat), створює стратегії зростання трафіку, конверсії та
підвищення продажів. Регулярно проводить A/B тестування банерів, рекламних
текстів і цінових пропозицій. Вивчає конкурентів, готує щомісячні звіти про
ефективність реклами, вносить правки в контент та ціни, виходячи з динаміки
ринку.
2.2.6 Технічне забезпечення та розвиток веб-платформи
Розробники або технічні фахівці відповідають за справну роботу сайту:
оновлення, інтеграцію з платіжними сервісами (LiqPay, Fondy), логістичними API
(Нова Пошта, Justin), CRM (RetailCRM, Bitrix24) та обробку замовлень.
Вони слідкують за безпекою ресурсу, захистом від DDoS-атак, резервним
копіюванням даних. В разі технічних проблем оперативно виявляють і усувають
баги. Також реалізують нові функції: фільтри товарів, мобільну адаптацію, пошук,
30
інтерактивні віджети, інтеграцію з AI-рекомендаціями.
2.3 Моделювання бізнес-процесів
Для повноцінного і наочного аналізу функціонування магазину
електротехнічних товарів скористаємося CASE-засобами, зокрема стандартом
IDEF0, який є одним із найбільш поширених для опису функціональних моделей
бізнес-процесів. Контекстна IDEF0-діаграма представлена на рисунку 2.2.
Рисунок 2.2 – Контекстна діаграма «Функціонування магазину
електротехнічних товарів»
У загальному вигляді початкова діаграма в нотації IDEF0 представляє один
блок, який відображає загальну діяльність системи. Надалі, у процесі проєктування,
цей блок підлягає декомпозиції розбиттю на більш дрібні підпроцеси з метою
детальнішого аналізу. На рисунку 2.3 наведено деталізацію контекстної діаграми.
Дана діаграма складається з наступних блоків:
31
– отримання електротехнічного товару;
– перевірка, облік і розміщення товару;
– оформлення і здійснення продажу;
– облік продажів та складання звітності;
– аналіз попиту і товарного обігу.
Для більш повного розуміння роботи магазину електротехнічних товарів
необхідно виконати декомпозицію кожного з цих блоків.
Рисунок 2.3 – Деталізація контекстної діаграми
На рисунку 2.4 подано декомпозицію блоку «Отримання електротехнічного
товару». Дана діаграма дозволяє уточнити етапи контролю та перевірки поставленої
продукції на відповідність раніше сформованому замовленню.
Переваги використання веб-магазину:
перевірка кількості товару;
– звірка номенклатури з документами;
32
– перевірка стану та якості продукції;
– фіксація результатів перевірки;
– формування повідомлення про відповідність або невідповідність
замовленню.
Рисунок 2.4 – Деталізація блоку «Отримання електротехнічного товару»
Вхідними даними є поставка товару та дані попереднього замовлення. На
виході формується звіт про результати перевірки, який передається далі для
прийняття рішення щодо прийому товару або рекламації.
На рисунку 2.5 представлена деталізація блоку «Перевірка технічного стану
товару», що є частиною загального процесу підготовки продукції до продажу в
магазині електротехнічних товарів.
Цей процес дозволяє забезпечити належну якість товару перед його передачею
до торгового залу або відправленням покупцеві.
До підпроцесів даного блоку належать:
– перевірка відповідності поставки;
33
– внесення в облікову систему;
– присвоєння маркування;
– розміщення товару.
Рисунок 2.5 – Деталізація блоку «Перевірка, облік і розміщення товару»
Наступний блок «Оформлення і здійснення продажу» представлено на
рисунку 2.6, і він складається з наступних блоків:
– прийом замовлення від клієнта;
– перевірка наявності товару;
– оформлення супровідних документів;
– видача товару клієнту;
– фіксація продажу в обліковій системі;
– формування фіскального чека;
– оновлення залишків на складі.
34
Рисунок 2.6 – Деталізація блоку «Оформлення і здійснення продажу»
На рисунку 2.7 представлено деталізацію блоку «Облік продажів та складання
звітності». Блок «Облік продажів та складання звітності» представлено трьома
підпроцесами:
– облік проданого товару;
– формування внутрішніх звітів;
– аналіз ефективності продажів.
Крім того, цей блок включає механізми контролю за своєчасністю та
коректністю внесення даних про продажі, що забезпечує високу точність обліку.
Завдяки автоматизації процесів формування звітності зменшується людський фактор
і підвищується оперативність прийняття управлінських рішень. Аналіз ефективності
продажів здійснюється на основі зібраних даних із можливістю виявлення
тенденцій, сезонних коливань та пріоритетних товарних груп, що сприяє оптимізації
асортиментної політики та маркетингових стратегій.
35
Рисунок 2.7 – Деталізація блоку «Облік продажів та складання звітності»
На рисунку 2.8 представлена декомпозиція блоку «Аналіз попиту і товарного
обігу».
Даний процес деталізується через такі підпроцеси:
– збір даних про продажі;
– виявлення популярних товарів;
– аналіз залишків на складі;
– оцінка динаміки попиту;
– формування рекомендацій;
– аналіз ефективності продажів.
36
Рисунок 2.8 – Деталізація блоку «Аналіз попиту і товарного обігу»
Виконавши побудову моделей, можна виявити ключові проблемні зони, що
потребують автоматизації:
– відсутність системного контролю за переміщенням автозапчастин на різних
етапах обробки та продажу;
– недостатня інтеграція інформації про супровідні документи, довідкові дані
та звітність, які формуються в процесі роботи з товаром;
– не відображені процеси, що є критично важливими для ефективного
функціонування автоматизованої облікової системи магазину
автозапчастин.
Висновок до розділу 2
У розділі було детально розглянуто структуру та функціонування інтернет-
магазину, що спеціалізується на продажу електротоварів. Виконано аналіз основних
напрямів діяльності магазину, включаючи адміністративне управління, контент-
менеджмент, клієнтську підтримку, логістику, маркетинг і технічне забезпечення.
37
Завдяки цьому визначено ключові підрозділи, які забезпечують ефективну роботу
платформи та якісний сервіс для клієнтів.
Також проведено моделювання бізнес-процесів із застосуванням методології
IDEF0, що дало змогу структурувати основні етапи діяльності магазину від
прийому товарів до аналізу продажів і формування рекомендацій для подальшого
розвитку. Виявлені проблемні зони, що потребують автоматизації, дозволять
підвищити ефективність управління товарними потоками та покращити інтеграцію
інформаційних систем.
38
3. ПРОЄКТУВАННЯ СТРУКТУРИ ІНТЕРНЕТ МАГАЗИНУ
ЕЛЕКТРОТОВАРІВ
3.1 Проєктування адміністративної частини
Адмінпанель вебзастосунку реалізована як окремий модуль із власною
навігацією, логікою сторінок і системою управління станом. Вона відповідає за
повне керування ключовими об’єктами сайту товарами, категоріями,
підкатегоріями, користувачами, банерами й замовленнями. Доступ до всіх
можливостей мають лише авторизовані адміністратори, завдяки чіткому
розмежуванню прав.
Адмінпанель дозволяє:
– повноцінно керувати товарами створювати, редагувати, переглядати й
видаляти;
– управляти структурою категорій і підкатегорій;
– додавати банери, рекламні блоки, слайдери;
– переглядати замовлення користувачів і змінювати їхній статус;
– працювати з реєстрацією користувачів і перевіркою акаунтів;
– зручно переміщатися між розділами через бічну й верхню панелі.
Стан додатку зберігає важливі дані: інформацію про авторизованого
користувача, вибрану тему інтерфейсу (світлу чи темну), базову API-адресу, список
категорій і повідомлення про успішність або помилки під час дій. Це дає змогу
підтримувати цілісну роботу між різними компонентами інтерфейсу.
Інтерфейс адаптується під будь-який розмір екрана. Бічна панель автоматично
приховується або з’являється залежно від ширини вікна та дій користувача. Тему
можна перемикати вибраний варіант зберігається в локальному сховищі браузера,
щоб користувач бачив знайоме оформлення при наступному вході.
Крім того, реалізована система сповіщень: адмін отримує короткі
повідомлення після кожної дії (наприклад, при додаванні чи оновленні даних), а
39
також бачить індикатор завантаження, коли триває взаємодія із сервером. Це значно
підвищує зручність і прозорість керування сайтом.
Додатково інтегровано механізм отримання інформації про країни світу через
зовнішнє API, що відкриває можливість для майбутнього географічного розширення
функціоналу, зокрема в частині фільтрації або аналітики.
Архітектура побудована відповідно до принципу модульності: кожна логічна
підсистема реалізована як окрема сторінка або функціональний блок, що забезпечує
легкість супроводу, тестування та масштабування застосунку. Компоненти
ізольовані один від одного настільки, наскільки це можливо, а повторно
використовувані елементи винесені в окремі модулі, що значно покращує
підтримуваність коду.
3.2 Проєктування клієнтської частини
Клієнтська частина інтернет-магазину створена з орієнтацією на комфорт
користувача. Основна мета – зробити інтерфейс простим і зрозумілим, а взаємодію з
сайтом – швидкою, приємною та зручною на будь-якому пристрої.
Користувач може легко переглядати доступні товари, шукати потрібні позиції
за різними параметрами, відкривати сторінки з детальним описом, додавати товари
до кошика, редагувати його вміст і оформлювати замовлення. Додатково доступна
можливість залишати відгуки, що дозволяє отримати зворотний зв’язок і
покращувати сервіс.
Кошик є одним із головних елементів на сайті. Він дозволяє зберігати вибрані
товари до моменту оформлення покупки. У будь-який момент користувач може
змінити кількість одиниць товару, видалити непотрібні позиції або повністю
очистити кошик.
Для оформлення замовлення потрібно заповнити просту форму із зазначенням
особистих даних (ПІБ, електронна пошта, телефон), вибрати спосіб та адресу
доставки, а також метод оплати. Ця інформація потрібна для зв’язку з клієнтом і
правильної обробки замовлення.
40
Після підтвердження замовлення інформація про нього автоматично
потрапляє до адміністративної частини сайту. Менеджер обробляє заявку, оновлює
її статус, а користувач може стежити за змінами у своєму профілі.
Фронтенд реалізований із використанням сучасних технологій, що
забезпечують швидку роботу сайту, адаптивний дизайн та підтримку мобільних
пристроїв. Це дозволяє зручно користуватися магазином як з комп’ютера, так і зі
смартфона або планшета.
3.3 Проектування бази даних магазину
Щоб організувати інформаційну базу (ІБ) для вебзастосунку інтернет-
магазину електротоварів, було проаналізовано можливі підходи до організації
зберігання даних. Існують три основні способи організації ІБ: файлова, інтегрована
та змішана
Файлова система це сукупність методів і структур, які використовуються
операційною системою (ОС) комп'ютера для впорядкування даних на будь-якому
цифровому запам'ятовувальному пристрої, а також для контролю над вільним
простором для зберігання даних. Щоб краще зрозуміти сутність такої складної
технології, слід ознайомитися з головними принципами в її основі [2].
Змішана організація є актуальною для систем з підвищеними вимогами до
відмовостійкості та географічного розподілення. У ній використовується
розподілена база даних, яка зберігається на кількох серверах і синхронізується між
ними за допомогою реплікації. Така модель характерна для великих ERP-систем, що
потребують паралельної роботи з однією інформаційною базою з кількох офісів.
Інтегрована організація інформаційної бази, що була обрана для даного
проєкту, передбачає представлення ІБ у вигляді взаємозв’язаних об’єктів, що
зберігаються централізовано. Цей підхід дозволяє знизити надмірність даних та
забезпечити їх ефективне використання у різних модулях вебзастосунку. У
поєднанні з сучасною СУБД він забезпечує високу масштабованість, незалежність
даних від програми і централізоване управління інформацією.
41
У рамках дипломної роботи використовується нереляційна СУБД MongoDB,
яка дозволяє гнучко організовувати інформацію у форматі колекцій документів
(аналог таблиць у реляційних базах). Кожен документ це JSON-подібна структура,
що зберігає набір атрибутів з різною структурою. Такий підхід особливо зручний
для вебзастосунків, де структура даних може змінюватися з часом або мати
вкладену ієрархію.
Для логічної структури ІБ використовувалася документно-орієнтована модель,
яка дозволяє описати дані у вигляді повноцінних об’єктів, кожен з яких включає всі
пов’язані атрибути. Основними колекціями у базі є:
– наявність вкладених структур (наприклад, масиви зображень товарів чи
банерів);
– можливість легко зберігати динамічні атрибути (розмір, вага, RAM тощо);
– відсутність необхідності складного SQL-запиту для отримання зв’язаних
даних;
– підвищення швидкодії на читання, що є критично важливим для фронтенду
магазину.
Реляційна база даних це набір інформації, яка організовує дані в попередньо
визначених зв’язках, де дані зберігаються в одній або кількох таблицях (або
зв’язках) стовпців і рядків, що дає змогу легко побачити та зрозуміти, як різні
структури даних пов’язані одна з одною. Зв’язки це логічний зв’язок між різними
таблицями, встановлений на основі взаємодії між цими таблицями [3].
Ієрархічна модель даних це модель даних, де використовується
представлення бази даних у вигляді деревовидної (ієрархічної) структури, що
складається з об'єктів (даних) різних рівнів. Між об'єктами існують зв'язки, кожен
об'єкт може включати в себе кілька об'єктів більш низького рівня. Такі об'єкти
перебувають у відношенні предка (об'єкт більш близький до кореня) до нащадку
(об'єкт більш низького рівня), при цьому можлива ситуація, коли об'єкт-предок не
має нащадків або має їх декілька, тоді як в об'єкта-нащадка обов'язково тільки один
предок. Об'єкти, що мають спільного предка, називаються близнюками (в
програмуванні стосовно до структури даних дерево усталена назва брати) [4].
42
Об’єктно-орієнтована база даних (object-oriented database) призначена для
роботи з різними типами даних зображеннями, аудіо, документами, відео. Системи
управління документно-орієнтованими базами даних, такі як MongoDB, дозволяють
працювати з даними у вигляді гнучких об’єктів (документів), що зберігаються у
форматі JSON/BSON, що значно спрощує обробку складних структур даних.
На відміну від реляційних баз даних, де структура є жорстко визначеною
через таблиці та зовнішні ключі, MongoDB дозволяє зберігати вкладені структури,
масиви та навіть об’єкти всередині об’єктів. Це особливо зручно при розробці
вебзастосунків із високою динамікою контенту, де дані можуть змінюватися
залежно від типу об'єкта.
В якості моделі логічної структури бази даних було обрано документно-
орієнтовану модель MongoDB. Такий підхід дозволяє ефективно реалізувати зв’язки
між сутностями через вкладення документів або за допомогою посилань
(референсів), а також зменшити кількість операцій при виконанні запитів.
Архітектура на основі MongoDB є масштабованою, простою в розгортанні та
зручною для інтеграції з backend-технологією Node.js.
Для реалізації застосунку було обрано стек MERN (MongoDB, Express.js,
React.js, Node.js). Така комбінація є сучасним стандартом для створення
повнофункціональних вебзастосунків з підтримкою API, динамічного оновлення
даних, адаптивного інтерфейсу та безпеки доступу до ресурсу.
MongoDB це документно-орієнтована база даних NoSQL, яка
використовується для зберігання великих обсягів даних. Замість використання
таблиць і рядків, як у традиційних реляційних базах даних, MongoDB використовує
колекції та документи. Документи складаються з пар ключ-значення, які є основною
одиницею даних у MongoDB.
MongoDB функції:
– кожна база даних містить колекції, які, у свою чергу, містять документи,
кожен документ може мати різну кількість полів, розмір і зміст кожного
документа можуть відрізнятися один від одного;
43
– структура документа більше відповідає тому, як розробники будують свої
класи та об’єкти на відповідних мовах програмування, розробники часто
кажуть, що їхні класи не є рядками та стовпцями, а мають чітку структуру з
парами ключ-значення;
– рядки (або документи, як викликано в MongoDB) не потребує попередньої
визначеної схеми. Натомість поля можна створювати на льоту;
– доступна модель даних MongoDB дозволяє легше представляти ієрархічні
зв’язки, зберігати масиви та інші складніші структури [5].
Під час проєктування бази даних було виокремлено основні сутності
предметної області: категорії, товари, користувачі, замовлення, кошики, а також
банери й інші інформаційні елементи інтерфейсу.
У подальшому буде наведено опис полів для кожної колекції, що формують
повну структуру бази даних (таблиці 3.1 – 3.5).
Таблиця 3.1 – Поля таблиці банери (categories)
Поле Тип даних Опис
_id ObjectId Унікальний ідентифікатор банера
images Array[String] Масив URL зображень банера
catId ObjectId Ідентифікатор категорії
catName String Назва категорії
subCatId ObjectId Ідентифікатор підкатегорії
subCatName String Назва підкатегорії
Таблиця 3.2 – Поля таблиці кошик (cards)
Поле Тип даних Опис
_id ObjectId Унікальний ідентифікатор кошика
productTitle String Назва товару
image String URL зображення товару
rating Number Рейтинг товару
price Number Ціна за одиницю товару
quantity Number Кількість товару у кошику
44
subTotal Number Загальна сума за товар (price * quantity)
productId ObjectId Ідентифікатор товару
countInStock Number Кількість товару на складі
Ідентифікатор користувача, який додав товар у
userId ObjectId
кошик
Таблиця 3.3 – Поля таблиці категорій (categories)
Поле Тип даних Опис
_id ObjectId Унікальний ідентифікатор категорії
name String Назва категорії
slug String Слаг категорії (для URL)
images Array[String] Масив URL зображень категорії
color String Колір категорії
createdAt Date Дата створення документа
updatedAt Date Дата останнього оновлення
Таблиця 3.4 – Поля таблиці товари (products)
Поле Тип даних Опис
_id ObjectId Унікальний ідентифікатор товару
name String Назва товару
description String Опис товару
images Array[String] Масив URL зображень товару
brand String Виробник (бренд)
price Number Ціна
oldPrice Number Стара ціна (до знижки)
catName String Назва категорії
catId ObjectId Ідентифікатор категорії
subCatId ObjectId Ідентифікатор підкатегорії
subCat String Назва підкатегорії
45
countInStock Number Кількість товару на складі
rating Number Рейтинг товару
isFeatured Boolean Чи є товар у розділі “Рекомендовані”
discount Number Відсоток знижки
productRam Array Дані про оперативну пам’ять (якщо актуально)
size Array Розміри товару
productWeight Array Вага товару
location Array[Object] Локації товару (значення, ярлик, _id)
dateCreated Date Дата створення товару
Таблиця 3.5 – Поля таблиці користувачі (users)
Поле Тип даних Опис
_id ObjectId Унікальний ідентифікатор користувача
name String Ім'я користувача
phone String Телефон користувача
email String Email користувача
password String Хешований пароль
images Array Масив зображень користувача
isAdmin Boolean Чи є користувач адміністратором
isVerified Boolean Чи верифікований користувач
otp String Одноразовий пароль для підтвердження
Структура бази даних зроблена логічно і продумано, щоб усі частини
інтернет-магазину добре працювали разом. Кожна таблиця (або колекція) виконує
свою роль це допомагає зручно зберігати, оновлювати і обробляти інформацію,
яка потрібна для нормальної роботи сайту. Такий підхід не лише полегшує
підтримку і подальший розвиток магазину, а й дає змогу масштабувати його,
тримати дані впорядкованими та швидко додавати нові функції.
46
Висновок до розділу 3
У цьому розділі ми детально розглянули, як будували структуру інтернет-
магазину електротоварів і адміністративну частину, і клієнтський інтерфейс, і базу
даних. Адмінка зроблена гнучкою та зручною, щоб легко керувати всіма важливими
елементами сайту з урахуванням ролей і рівнів доступу. Клієнтська частина
створена так, щоб була зрозумілою, швидкою і добре працювала на будь-яких
пристроях від комп’ютера до смартфона. Використання MongoDB як бази даних
дає змогу гнучко працювати з інформацією, легко масштабувати і забезпечує
хорошу продуктивність. Загалом, обрана архітектура і технології дають надійну
основу для подальшої роботи, розвитку і підтримки магазину.
47
4. РЕАЛІЗАЦІЯ МАГАЗИНУ ЕЛЕКТРОТЕХНІЧНИХ ТОВАРІВ ЧЕРЕЗ
МЕРЕЖУ ІНТЕРНЕТ
4.1 Вибір середовища розробки
Для розробки інтернет-магазину був обраний сучасний підхід, що дозволив
створити швидкий, зручний у використанні та адаптивний
вебзастосунок. Клієнтська частина написана на React JS це популярна бібліотека
для створення інтерактивних інтерфейсів, яка забезпечує плавну роботу без
постійного перезавантаження сторінок (SPA-архітектура). Для серверної частини
використовувався Node.js, що дозволило легко реалізувати API для обміну даними з
базою.
Інтерфейс магазину було розроблено з урахуванням сучасних стандартів
дизайну та максимізації зручності використання. Завдяки інтеграції Bootstrap 4.x
сайт автоматично підлаштовується під різні типи пристроїв від смартфонів до
персональних комп’ютерів. Для підвищення естетичної привабливості та
покращення взаємодії з користувачем використано технології Google Fonts і CSS3.
React це бібліотека JavaScript для створення веб-інтерфейсів. Вона дозволяє
розробникам будувати компоненти, які забезпечують відображення і взаємодію з
даними на веб-сторінці. React спрощує процес створення складних інтерфейсів,
забезпечує швидке оновлення і відображення змін без перезавантаження сторінки.
Реакт потрібен для розробки сучасних інтерфейсів користувача в застосунках. Він
дозволяє розбити інтерфейс на компоненти, ефективно керувати станом додатку,
спрощує взаємодію з API та забезпечує швидкий та масштабований реактивний
рендерінг. Завдяки React розробники можуть писати модульний код, який можна
використовувати вдруге, та забезпечувати зацікавленість користувачів у застосунку
завдяки більш плавному та динамічному інтерфейсу. З Реактом легко працювати:
його можна розширити за допомогою додаткових бібліотек і фреймворків, також він
має активне співтовариство розробників, що забезпечує підтримку, ресурси та
плагіни для збільшення функціональності [6].
48
Node.js це однопоточне кросплатформове середовище виконання з
відкритим вихідним кодом і бібліотека, яка використовується для запуску
вебдодатків, написаних на JavaScript, поза браузером клієнта [7].
Як серверну частину було обрано Node.js, що забезпечує реалізацію API для
обробки запитів до бази даних. Розроблено повнофункціональні API для управління
категоріями, товарами, а також додано функціонал аутентифікації користувачів. Для
роботи з медіафайлами інтегровано сервіс Cloudinary, який дозволяє завантажувати
зображення безпосередньо з клієнтського застосунку.
Cloudinary – це комплексне рішення для керування зображеннями для веб-
сайтів та мобільних додатків. Програма підтримує завантаження зображень, хмарне
сховище, маніпуляції із зображеннями, оптимізацію зображень для Інтернету та
доставку. Cloudinary пропонує API-інтерфейси та гнучкі можливості адміністратора
для інтеграції з новими та існуючими веб-додатками та мобільними додатками.
Cloudinary дозволяє завантажувати та зберігати необмежену кількість зображень
конфіденційно та безпечно та включає автоматичне резервне копіювання та
історичні зміни. Ви можете керувати зображеннями, використовуючи широкий
спектр опцій, таких як застосування ефектів, зміна розміру, обрізка, виявлення
облич, водяні знаки та багато іншого. Зображення надсилаються через всесвітню
мережу CDN Akamai для швидкої доставки, оптимізованої для будь-якого
пристрою. Cloudinary виступає як рішення для керування цифровими активами з
медіа-бібліотекою, яка використовує RESTful API та SDK для автоматизації
керування зображеннями. Ви також можете отримати доступ до розширеної
аналітики та звітів, щоб оптимізувати та зрозуміти продуктивність зображень [8].
Проєкт було реалізовано без застосування готових CMS-систем, що дозволило
створити оптимальне рішення, повністю адаптоване до потреб цього конкретного
магазину. Такий підхід забезпечує легкість у подальшому розширенні функціоналу
та адаптації системи до нових вимог.
У результаті вдалося розробити стабільну, швидку та зручну платформу для
електронної комерції, яка здатна ефективно працювати навіть за умов значного
49
збільшення навантаження. Використана методологія гарантує тривалий термін
експлуатації системи та її гнучкість для майбутніх удосконалень.
4.2 Опис роботи розробленої адміністративної частини магазину
Адміністративна панель інтернет-магазину електротоварів розроблена з
використанням сучасного технологічного стеку, до якого входять React.js, Node.js,
Express і MongoDB. Для створення зручного та інтуїтивно зрозумілого інтерфейсу
було застосовано бібліотеку Material UI. Вхід до панелі адміністратора здійснюється
через спеціальну сторінку авторизації, де користувач вводить свій електронний
адрес і пароль. Окрім стандартної процедури входу, передбачена інтеграція
авторизації через Google-акаунт, а також функція відновлення пароля для випадків
його втрати або забуття.
Рисунок 4.1 – Сторінка входу
Створена панель адміністратора включає всі потрібні інструменти управління
та забезпечує швидкий і зручний доступ до основних розділів інтернет-
магазину. Вона дозволяє адміністратору здійснювати керування такими
функціональними модулями:
– каталогом товарів (додавання, редагування, видалення продукції,
сортування за категоріями);
– замовленнями клієнтів (перегляд, оновлення статусу, історія замовлень);
50
– інформаційним наповненням сайту (новини, опис компанії, контактна
інформація);
– налаштуваннями зовнішнього вигляду та контенту головної сторінки.
Після успішної авторизації адміністратор потрапляє на головну сторінку
керування (рис. 4.2), яка містить такі розділи:
– управління банерами головної сторінки;
– керування категоріями товарів;
– робота з товарами;
– обробка замовлень;
– налаштування додаткових банерів.
На рисунку 4.2 представлено головну сторінку.
Рисунок 4.2 – Головна сторінка
51
Адміністратор має можливість додавати та керувати банерами на головній
сторінці інтернет-магазину через спеціальний розділ панелі керування (рис. 4.3-4.4).
Рисунок 4.3 – Додавання банеру
Рисунок 4.4 – Керування банерами
Адміністратор має можливість керувати категорійною структурою магазину
(рис. 4.5-4.6). Основний функціонал включає:
– створення та редагування основних категорій ("Освітлення",
"Електрощити");
– формування підкатегорій ("Прожектори", "Лампи");
– призначення кольорових міток для категорій;
– завантаження зображень для категорій.
52
Рисунок 4.5 – Додавання категорій
Рисунок 4.6 – Управління категоріями
Адміністративна панель надає повний контроль над товарами магазину.
Список товару включає (рис. 4.7):
53
– відображення всієї продукції у табличному вигляд;
– сортування за категоріями, брендами та ціною;
– фільтрація за різними параметрами.
Додавання нового товару включає:
Рисунок 4.7 – Список товару
Додавання нового товару. Форма заповнення містить:
– основну інформацію (назва, опис);
– призначення категорії та підкатегорії;
– встановлення ціни та акційної ціни;
– вказівка кількості на складі;
– вибір бренду;
– завантаження зображень.
54
Рисунок 4.8 – Додавання товару
Банерна система є важливим інструментом візуального маркетингу та
навігації в інтернет-магазині (рис. 4.9). Вона дозволяє ефективно презентувати
акційні пропозиції, новинки асортименту та ключові категорії товарів.
Адміністративна панель надає повний комплекс інструментів для керування
банерним простором сайту.
Структура банерного меню:
– головні банери (Home Banner Slides);
– бічні банери (Home Side Banners);
– нижні банери (Home Bottom Banners);
– список усіх банерів (Banners List);
– форма додавання (Banner Upload).
55
Рисунок 4.9 – Список доданих банерів
Додавання нового банера (рис. 4.10).
Система пропонує:
– вибір відповідної категорії товарів ("Релейне обладнання і датчики");
– призначення підкатегорії ("Реле контролю напруги");
– завантаження графічного зображення (кнопка "Image upload");
– публікація (кнопка "PUBLISH AND VIEW").
Рисунок 4.10 – Форма додавання банера
56
Рисунок 4.11 – Список замовлень
4.3 Опис роботи розробленої клієнтської частини магазину
Для початку роботи з інтернет-магазином користувач вводить у браузері
адресу http://localhost:3008. Система надає зручний інтерфейс авторизації (рис. 4.12)
з можливістю:
– входу через email та пароль;
– відновлення пароля;
– реєстрації нового акаунта;
– авторизації через соціальні мережі (Google).
Рисунок 4.12 – Сторінка входу в обліковий запис
57
Головна сторінка відрізняється збалансованим дизайном та чіткою
структурою. Її ключові елементи включають:
– навігаційний блок з основним меню та логотипом;
– пошукову систему (випадаючим списком категорій, інтуїтивним рядком
пошуку, підказкою для користувачів);
– функціональні особливості (швидкий доступ до основних розділів, зручну
навігацію по каталогу, ефективний пошук товарів).
Інтерфейс пошукової системи магазину (рис. 4.13) представлений
компактним, але функціональним блоком у верхній частині сторінки. Він
складається з випадаючого меню вибору категорій та рядка пошуку з підказкою
"Що ви шукаєте?". Підказка у пошуковому полі спонукає користувача до введення
запиту, підвищуючи ймовірність успішного пошуку.
Рисунок 4.13 – Головна сторінка магазину
Каталог товарів (рис. 4.14) представлений у вигляді структурованого списку
основних категорій електротоварів. Кожна категорія чітко виділена та має логічне
угруповання, що спрощує пошук необхідних товарів. Верхня частина блоку містить
58
заголовок "КАТАЛОГ ТОВАРІВ", який візуально відокремлює цей розділ від інших
елементів сторінки.
Рисунок 4.14 – Каталог товарів
Головна сторінка містить спеціальні розділи для презентації актуального
асортименту. Верхня частина блоку "ПОПУЛЯРНІ ТОВАРИ" містить інформацію
про акційний період дії пропозицій до кінця березня (рис. 4.15). Кожен товар
представлений з детальною інформацією про наявність, рейтинг та ціну.
Товарні картки містять усю необхідну інформацію для прийняття рішення про
покупку:
– чіткі назви товарів з основними характеристиками;
– індикатор наявності на складі;
– візуалізація рейтингу у вигляді зірок;
– цінова політика з відображенням старої та нової ціни.
Ліва частина головної сторінки містить рекламний блок, який доповнює
основний контент та підвищує ефективність маркетингових комунікацій. Він може
включати акційні пропозиції, банерні зображення з посиланнями на спеціальні
категорії товарів або обмежені за часом пропозиції.
59
Рисунок 4.15 – Блоки популярних та нових товарів
Секція "Рекомендовані товари" (рис. 4.16) призначена для демонстрації
популярних та акційних позицій, що стимулює покупки та підвищує залученості
користувачів. Вона розташована на головній сторінці та виділена окремим блоком із
заголовком "РЕКОМЕНДОВАНІ ТОВАРИ", який супроводжується закликом не
пропустити актуальні пропозиції.
На головній сторінці розміщено шість рекламних блоків три у верхній частині
та три в нижній:
– Верхні банери відображають акційні пропозиції, новинки та спеціальні
умови покупок.
– Нижні банери містять інформацію про додаткові знижки, послуги доставки
та крос-продажі.
60
Рисунок 4.16 – Секція рекомендованих товарів
На сайті присутній спеціальний блок для підписки на email-розсилку (рис.
4.17), який пропонує користувачам:
– знижку 10% на перше замовлення як мотивацію до підписки;
– інформацію про майбутні акції та купони;
– просту форму з полем для введення email та кнопкою "Підписатися".
Рисунок 4.17 – Форма підписки на розсилку
61
Нижня частина сайту містить структуровану інформацію для зручної навігації
та комунікації (рис. 4.18). Основні розділи:
– каталог товарів;
– додаткові послуги;
– інформаційні сторінки;
– контактні дані;
– юридична інформація.
Рисунок 4.18 – Футер сайту
Сторінка товару (рис. 4.19) містить детальну інформацію про продукт та
інструменти для здійснення покупки. Основні елементи сторінки:
– заголовок товару;
– цінова інформація;
– блок з основними характеристиками;
– опис товару;
– технічні характеристики (таблиця).
Функціональні можливості:
– перегляд усіх характеристик товару;
– можливість залишити відгук;
– порівняння цін (стара/акційна).
62
Рисунок 4.19 – Сторінка товару
Сторінка особистого кабінету (рис. 4.20) надає можливість керування
персональними даними та налаштуваннями облікового запису.
Форма має простий дизайн, усі поля чітко позначені, що спрощує взаємодію.
Адаптивна верстка забезпечує коректне відображення на різних пристроях.
Рисунок 4.20 – Сторінка особистого кабінету
Сторінка "Список уподобань" (рис. 4.21) дозволяє користувачам зберігати та
керувати товарами, які їх зацікавили. Інтерфейс включає:
63
– інформаційний заголовок з кількістю збережених товарів;
– список товарів;
– функціональні елементи.
Рисунок 4.21 – Сторінка "Список уподобань"
Сторінка кошика (рис. 4.22) призначена для перегляду та оформлення обраних
товарів.
Основні елементи сторінки:
– інформаційний блок;
– таблиця товарів;
– підсумкова інформація;
– кнопка "Оформити замовлення" для переходу до оформлення покупки.
Функціональні можливості:
– зручне керування кількістю товарів;
– швидке видалення позицій;
– автоматичний розрахунок загальної суми;
– прозора інформація про доставку.
64
Рисунок 4.22 – Сторінка кошика
Сторінка оформлення замовлення (рис. 4.23) забезпечує зручний процес
введення даних для доставки та оплати. Інтерфейс включає два основних блока:
1. Персональні дані:
– обов'язкові поля (позначені зірочкою): ПІБ, країна, адреса, місто, область,
поштовий індекс;
– додаткові поля: квартира/офіс, телефон, email.
2. Деталі замовлення:
– перелік товарів з кількістю та вартістю;
– підсумкова сума;
– кнопка підтвердження замовлення.
Рисунок 4.23 – Сторінка оформлення замовлення
65
Сторінка відображає перелік усіх попередніх замовлень користувача у вигляді
компактної таблиці (рис. 4.24).
Рисунок 4.24 – Сторінка історії замовлень
У даному розділі було вирішено ключові завдання з розробки інтернет-
магазину. Спочатку представлено детальний опис середовища розробки, включаючи
використані технології та інструменти. Далі виконано повноцінну програмну
реалізацію системи, де особливу увагу приділено архітектурним рішенням та
інтеграції зовнішніх сервісів.
Окремо розглянуто роботу адміністративної частини, яка забезпечує повний
контроль над асортиментом, замовленнями та аналітикою. Для керування товарами
реалізовано зручний інтерфейс з можливістю швидкого оновлення інформації.
Система обробки замовлень дозволяє ефективно керувати всіма етапами продажу.
Клієнтська частина магазину розроблена з акцентом на зручність користувача.
Реалізовано інтуїтивну навігацію, потужну систему пошуку, зрозумілий процес
оформлення замовлення та функціональний особистий кабінет. Особливу увагу
приділено адаптивному дизайну, який забезпечує комфортне користування на будь-
яких пристроях.
Всі компоненти системи інтегровані між собою та оптимізовані для стабільної
роботи під навантаженням. Результатом є повноцінний інтернет-магазин, готовий до
промислового експлуатування.
Висновок до розділу 4
У розділі детально описано процес реалізації інтернет-магазину
електротехнічних товарів із використанням сучасного стеку технологій, що включає
React JS для клієнтської частини та Node.js для серверної логіки. Вибране
66
середовище розробки забезпечило гнучкість, масштабованість і можливість
подальшого розвитку застосунку, а також створення зручного та адаптивного
інтерфейсу користувача завдяки інтеграції Bootstrap і Material UI.
Адміністративна частина проекту була розроблена з урахуванням потреб
керування товарами, замовленнями, категоріями та банерами, що дозволяє
ефективно контролювати всі ключові процеси магазину. Клієнтська частина
забезпечує комфортний досвід користувача, включаючи авторизацію, пошук
товарів, перегляд каталогу та презентацію актуальних пропозицій.
Загалом, реалізований інтернет-магазин відповідає сучасним вимогам ринку,
має потенціал для подальшого розширення функціоналу та оптимізації, що робить
його ефективним інструментом для ведення електронної комерції в галузі
електротехнічних товарів.
67
ВИСНОВКИ
Розробка інтернет-магазину електротоварів “Electricity” спрямована на
створення сучасного ефективного інструменту для ведення електронної комерції у
сфері електротехнічної продукції. Проект реалізує всі сучасні вимоги до онлайн-
торгівлі, забезпечуючи зручний інтерфейс для клієнтів та потужні інструменти
управління для адміністраторів.
У ході роботи було поставлено завдання проектування та створення
інформаційних засобів для автоматизації процесів продажу у вигляді електронного
магазину. В рамках виконання проєкту реалізовано такі основні завдання:
– проведено аналіз діяльності інтернет-магазинів та моделювання бізнес-
процесів за допомогою діаграм DFD;
– досліджено існуючі підходи до розробки подібних систем;
– визначено структуру взаємодії підсистем інтернет-магазину;
– розроблено адміністративну та клієнтську частини інтерфейсу;
– спроектовано структуру бази даних із використанням MongoDB для
ефективного зберігання даних;
– створено діаграми класів для основних компонентів системи;
– реалізовано програмну частину з використанням сучасних технологій;
– описано роботу клієнтської і адміністративної частин.
Розроблені інформаційні підсистеми забезпечують автоматизацію і підтримку
функціоналу магазину:
– підсистема взаємодії з покупцем дозволяє переглядати каталог товарів,
здійснювати пошук, додавати товари до кошика, оформлювати замовлення
та відслідковувати їх статус;
– підсистема взаємодії з адміністратором дає змогу керувати дизайном сайту,
управляти товарами і категоріями, опрацьовувати замовлення, надсилати
повідомлення користувачам;
– підсистема управління сайтом спрощує адміністрування, підтримує роботу
з базою даних, обробляє замовлення, формує звіти та статистику продажів.
68
Підсистема для адміністратора забезпечує гнучкий контроль над сайтом.
Адміністратор може налаштовувати візуальне оформлення магазину, змінювати
способи відображення товарів на різних сторінках, а також керувати структурою
каталогу створювати нові категорії, редагувати або видаляти існуючі,
контролювати характеристики товарів. Особливо важливою є можливість керувати
замовленнями: адміністратор може змінювати їхній статус, видаляти непотрібні
замовлення та автоматично надсилати покупцям сповіщення про зміну стану їх
замовлення через електронну пошту.
Для зберігання інформації використано MongoDB, що дозволяє гнучко
працювати зі структурованими і неструктурованими даними. Зображення товарів та
іншого контенту зберігаються і обробляються за допомогою сервісу Cloudinary, що
забезпечує ефективне управління медіафайлами.
У створеному магазині реалізовано ключові функції сучасних інтернет-
магазинів:
1. Каталог товарів багаторівнева структура категорій і товарів для зручного
і швидкого пошуку;
2. Пошукова система дозволяє користувачам легко знаходити потрібні
товари;
3. Реєстраційна форма збір персональних даних покупців;
4. Кошик покупок додавання та редагування товарів, підрахунок вартості
замовлення;
5. Адміністративна панель керування каталогом, дизайном, замовленнями,
користувачами та статистикою.
Розроблені інформаційні засоби мають зручний інтерфейс і гнучкі
налаштування, що робить користування магазином комфортним як для покупців, так
і для адміністратора.
69
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. E-Commerce: як працює електронна комерція. URL:
https://voll.com.ua/uk/blog/e-commerce-yak-pracyuye-elektronna-komerciya
(дата звернення: 20.05.2025).
2. Основи файлових систем. URL: https://www.ufsexplorer.com/uk/articles/file-
systems-basics/ (дата звернення: 20.05.2025).
3. Реляційні бази даних. URL: https://it-osvita.diia.gov.ua/task/item/c1d56d2b-
718f-4490-8498-ee209eac30d8 (дата звернення: 20.05.2025).
4. Ієрархічна база даних. URL: https://bazidanih5.blogspot.com/p/blog-page.html
(дата звернення: 21.05.2025).
5. Що таке MongoDB? вступ, Archiтектура, функції та приклад. URL:
https://www.guru99.com/uk/what-is-mongodb.html (дата звернення:
21.05.2025).
6. Що таке React JS? Як почати вивчати Реакт? Навички для react developer.
URL: https://cases.media/en/article/sho-take-react-js-yak-pochati-vivchati-reakt-
navichki-dlya-react-
developer?srsltid=AfmBOoq38tZvVIdx9xoP7BlMcp7GG3Nwko09npAcM9k9
WojWQuVaRYpT (дата звернення: 21.05.2025).
7. Що таке Node JS простими словами. URL: https://dan-it.com.ua/uk/blog/chto-
jeto-takoe-node-js-prostymi-slovami/ (дата звернення: 21.05.2025).
8. Cloudinary. URL: https://hellip.com/ua/product/cloudinary.html (дата
звернення: 22.05.2025).
Додаток А
Програмний код
Приклад коду сторінки app.js
import "bootstrap/dist/css/bootstrap.min.css";
import "./App.css";
import "./responsive.css";
import { BrowserRouter, Route, Router, Routes, json } from "react-router-dom";
import Home from "./Pages/Home";
import Listing from "./Pages/Listing";
import ProductDetails from "./Pages/ProductDetails";
import Header from "./Components/Header";
import { createContext, useEffect, useState } from "react";
import axios from "axios";
import Footer from "./Components/Footer";
import ProductModal from "./Components/ProductModal";
import Cart from "./Pages/Cart";
import SignIn from "./Pages/SignIn";
import SignUp from "./Pages/SignUp";
import MyList from "./Pages/MyList";
import Checkout from "./Pages/Checkout";
import Orders from "./Pages/Orders";
import MyAccount from "./Pages/MyAccount";
import SearchPage from "./Pages/Search";
import VerifyOTP from "./Pages/VerifyOTP";
import ChangePassword from "./Pages/ChangePassword";
import { fetchDataFromApi, postData } from "./utils/api";
import Snackbar from "@mui/material/Snackbar";
import Alert from "@mui/material/Alert";
const MyContext = createContext();
function App() {
const [countryList, setCountryList] = useState([]);
const [selectedCountry, setselectedCountry] = useState("");
const [isOpenProductModal, setisOpenProductModal] = useState(false);
const [isHeaderFooterShow, setisHeaderFooterShow] = useState(true);
const [isLogin, setIsLogin] = useState(false);
const [productData, setProductData] = useState([]);
const [categoryData, setCategoryData] = useState([]);
const [subCategoryData, setsubCategoryData] = useState([]);
const [addingInCart, setAddingInCart] = useState(false);
const [cartData, setCartData] = useState();
const [searchData, setSearchData] = useState([]);
const [isOpenNav, setIsOpenNav] = useState(false);
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
const [enableFilterTab, setEnableFilterTab] = useState(false);
const [isOpenFilters, setIsOpenFilters] = useState(false);
const [isBottomShow, setIsBottomShow] = useState(true);
const [alertBox, setAlertBox] = useState({
msg: "",
error: false,
open: false,
});
const [user, setUser] = useState({
name: "",
email: "",
userId: "",
});
useEffect(() => {
const user = JSON.parse(localStorage.getItem("user"));
if (
user?.userId !== "" &&
user?.userId !== undefined &&
user?.userId !== null
) {
fetchDataFromApi(`/api/cart?userId=${user?.userId}`).then((res) => {
setCartData(res);
});
}
}, [isLogin]);
useEffect(() => {
getCountry("https://countriesnow.space/api/v0.1/countries/");
fetchDataFromApi("/api/category").then((res) => {
setCategoryData(res.categoryList);
const subCatArr = [];
res.categoryList?.length !== 0 &&
res.categoryList?.map((cat, index) => {
if (cat?.children.length !== 0) {
cat?.children?.map((subCat) => {
subCatArr.push(subCat);
});
}
});
setsubCategoryData(subCatArr);
});
const handleResize = () => {
setWindowWidth(window.innerWidth);
};
const location = localStorage.getItem("location");
if (location !== null && location !== "" && location !== undefined) {
setselectedCountry(location);
} else {
setselectedCountry("All");
localStorage.setItem("location", "All");
}
window.addEventListener("resize", handleResize);
return () => {
window.removeEventListener("resize", handleResize);
};
}, []);
const getCartData = () => {
const user = JSON.parse(localStorage.getItem("user"));
fetchDataFromApi(`/api/cart?userId=${user?.userId}`).then((res) => {
setCartData(res);
});
};
useEffect(() => {
const token = localStorage.getItem("token");
if (token !== "" && token !== undefined && token !== null) {
setIsLogin(true);
const userData = JSON.parse(localStorage.getItem("user"));
setUser(userData);
} else {
setIsLogin(false);
}
}, [isLogin]);
const openProductDetailsModal = (id, status) => {
fetchDataFromApi(`/api/products/${id}`).then((res) => {
setProductData(res);
setisOpenProductModal(status);
});
};
const getCountry = async (url) => {
try {
const response = await axios.get(url);
const allCountries = response.data.data;
const ukraine = allCountries.find(
(item) => item.country.toLowerCase() === "ukraine"
);
if (ukraine) {
setCountryList(ukraine.cities);
}
} catch (error) {
console.error("Помилка при отриманні країн:", error);
}
};
const handleClose = (event, reason) => {
if (reason === "clickaway") {
return;
}
setAlertBox({
open: false,
});
};
const addToCart = (data) => {
if (isLogin === true) {
setAddingInCart(true);
postData(`/api/cart/add`, data).then((res) => {
if (res.status !== false) {
setAlertBox({
open: true,
error: false,
msg: "Item is added in the cart",
});
setTimeout(() => {
setAddingInCart(false);
}, 1000);
getCartData();
} else {
setAlertBox({
open: true,
error: true,
msg: res.msg,
});
setAddingInCart(false);
}
});
} else {
setAlertBox({
open: true,
error: true,
msg: "Please login first",
});
}
};
const values = {
countryList,
setselectedCountry,
selectedCountry,
isOpenProductModal,
setisOpenProductModal,
isHeaderFooterShow,
setisHeaderFooterShow,
isLogin,
setIsLogin,
user,
setUser,
categoryData,
setCategoryData,
subCategoryData,
setsubCategoryData,
openProductDetailsModal,
alertBox,
setAlertBox,
addToCart,
addingInCart,
setAddingInCart,
cartData,
setCartData,
getCartData,
searchData,
setSearchData,
windowWidth,
isOpenNav,
setIsOpenNav,
setEnableFilterTab,
enableFilterTab,
setIsOpenFilters,
isOpenFilters,
setIsBottomShow,
isBottomShow,
};
return (
<BrowserRouter>
<MyContext.Provider value={values}>
<Snackbar
open={alertBox.open}
autoHideDuration={6000}
onClose={handleClose}
className="snackbar"
>
<Alert
onClose={handleClose}
autoHideDuration={6000}
severity={alertBox.error === false ? "success" : "error"}
variant="filled"
sx={{ width: "100%" }}
>
{alertBox.msg}
</Alert>
</Snackbar>
{isHeaderFooterShow === true && <Header />}
<Routes>
<Route path="/" exact={true} element={<Home />} />
<Route
path="/products/category/:id"
exact={true}
element={<Listing />}
/>
<Route
path="/products/subCat/:id"
exact={true}
element={<Listing />}
/>
<Route
exact={true}
path="/product/:id"
element={<ProductDetails />}
/>
<Route exact={true} path="/cart" element={<Cart />} />
<Route exact={true} path="/signIn" element={<SignIn />} />
<Route exact={true} path="/signUp" element={<SignUp />} />
<Route exact={true} path="/my-list" element={<MyList />} />
<Route exact={true} path="/checkout" element={<Checkout />} />
<Route exact={true} path="/orders" element={<Orders />} />
<Route exact={true} path="/my-account" element={<MyAccount />} />
<Route exact={true} path="/search" element={<SearchPage />} />
<Route exact={true} path="/verifyOTP" element={<VerifyOTP />} />
<Route exact={true} path="/changePassword" element={<ChangePassword />} />
</Routes>
{isHeaderFooterShow === true && <Footer />}
{isOpenProductModal === true && <ProductModal data={productData} />}
</MyContext.Provider>
</BrowserRouter>
);
}
export default App;
export { MyContext };
Приклад коду сторінки ProductDetails.js
import ProductZoom from "../../Components/ProductZoom";
import Rating from "@mui/material/Rating";
import QuantityBox from "../../Components/QuantityBox";
import Button from "@mui/material/Button";
import { BsCartFill } from "react-icons/bs";
import { useContext, useEffect, useState } from "react";
import { FaRegHeart } from "react-icons/fa";
import { MdOutlineCompareArrows } from "react-icons/md";
import Tooltip from "@mui/material/Tooltip";
import RelatedProducts from "./RelatedProducts";
import { useParams } from "react-router-dom";
import { fetchDataFromApi, postData } from "../../utils/api";
import CircularProgress from "@mui/material/CircularProgress";
import { MyContext } from "../../App";
import { FaHeart } from "react-icons/fa";
const ProductDetails = () => {
const [activeSize, setActiveSize] = useState(null);
const [activeTabs, setActiveTabs] = useState(0);
const [productData, setProductData] = useState([]);
const [relatedProductData, setRelatedProductData] = useState([]);
const [recentlyViewdProducts, setRecentlyViewdProducts] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [reviewsData, setreviewsData] = useState([]);
const [isAddedToMyList, setSsAddedToMyList] = useState(false);
let [cartFields, setCartFields] = useState({});
let [productQuantity, setProductQuantity] = useState();
const [tabError, setTabError] = useState(false);
const { id } = useParams();
const context = useContext(MyContext);
const isActive = (index) => {
setActiveSize(index);
setTabError(false);
};
useEffect(() => {
window.scrollTo(0, 0);
setActiveSize(null);
fetchDataFromApi(`/api/products/${id}`).then((res) => {
setProductData(res);
if (
res?.productRam.length === 0 &&
res?.productWeight.length === 0 &&
res?.size.length === 0
) {
setActiveSize(1);
}
fetchDataFromApi(
`/api/products/subCatId?subCatId=${
res?.subCatId
}&location=${localStorage.getItem("location")}`
).then((res) => {
const filteredData = res?.products?.filter((item) => item.id !== id);
setRelatedProductData(filteredData);
});
});
fetchDataFromApi(`/api/productReviews?productId=${id}`).then((res) => {
setreviewsData(res);
});
const user = JSON.parse(localStorage.getItem("user"));
fetchDataFromApi(
`/api/my-list?productId=${id}&userId=${user?.userId}`
).then((res) => {
if (res.length !== 0) {
setSsAddedToMyList(true);
}
});
context.setEnableFilterTab(false);
}, [id]);
const [rating, setRating] = useState(1);
const [reviews, setReviews] = useState({
productId: "",
customerName: "",
customerId: "",
review: "",
customerRating: 1,
});
const onChangeInput = (e) => {
setReviews(() => ({
...reviews,
[e.target.name]: e.target.value,
}));
};
const changeRating = (e) => {
setRating(e.target.value);
reviews.customerRating = e.target.value;
};
const addReview = (e) => {
e.preventDefault();
const user = JSON.parse(localStorage.getItem("user"));
if (user !== null) {
reviews.customerName = user?.name;
reviews.customerId = user?.userId;
reviews.productId = id;
if(reviews.review!==""){
setIsLoading(true);
postData("/api/productReviews/add", reviews).then((res) => {
setIsLoading(false);
reviews.customerRating = 1;
setReviews({
review: "",
customerRating: 1,
});
fetchDataFromApi(`/api/productReviews?productId=${id}`).then((res) => {
setreviewsData(res);
});
});
}else{
context.setAlertBox({
open: true,
error: true,
msg: "Будь ласка, додайте відгук.",
});
}
} else {
context.setAlertBox({
open: true,
error: true,
msg: "Будь ласка, спочатку увійдіть до системи.",
});
}
};
const quantity = (val) => {
setProductQuantity(val);
};
const addtoCart = () => {
if (activeSize !== null) {
const user = JSON.parse(localStorage.getItem("user"));
cartFields.productTitle = productData?.name;
cartFields.image = productData?.images[0];
cartFields.rating = productData?.rating;
cartFields.price = productData?.price;
cartFields.quantity = productQuantity;
cartFields.subTotal = parseInt(productData?.price * productQuantity);
cartFields.productId = productData?.id;
cartFields.countInStock = productData?.countInStock;
cartFields.userId = user?.userId;
context.addToCart(cartFields);
} else {
setTabError(true);
}
};
const selectedItem = () => {};
const gotoReviews = () => {
window.scrollTo({
top: 550,
behavior: "smooth",
});
setActiveTabs(2);
};
const addToMyList = (id) => {
const user = JSON.parse(localStorage.getItem("user"));
if (user !== undefined && user !== null && user !== "") {
const data = {
productTitle: productData?.name,
image: productData?.images[0],
rating: productData?.rating,
price: productData?.price,
productId: id,
userId: user?.userId,
};
postData(`/api/my-list/add/`, data).then((res) => {
if (res.status !== false) {
context.setAlertBox({
open: true,
error: false,
msg: "the product added in my list",
});
fetchDataFromApi(
`/api/my-list?productId=${id}&userId=${user?.userId}`
).then((res) => {
if (res.length !== 0) {
setSsAddedToMyList(true);
}
});
} else {
context.setAlertBox({
open: true,
error: true,
msg: res.msg,
});
}
});
} else {
context.setAlertBox({
open: true,
error: true,
msg: "Please Login to continue",
});
}
};
return (
<>
<section className="productDetails section">
<div className="container">
{productData?.length === 0 ? (
<div
className="d-flex align-items-center justify-content-center"
style={{ minHeight: "300px" }}
>
<CircularProgress />
</div>
) : (
<div className="row">
<div className="col-md-4 pl-5 part1">
<ProductZoom
images={productData?.images}
discount={productData?.discount}
/>
</div>
<div className="col-md-7 pl-5 pr-5 part2">
<h2 className="hd text-capitalize">{productData?.name}</h2>
<ul className="list list-inline d-flex align-items-center">
<li className="list-inline-item">
<div className="d-flex align-items-center">
<span className="text-light mr-2">Бренд : </span>
<span>{productData?.brand}</span>
</div>
</li>
<li className="list-inline-item">
<div className="d-flex align-items-center">
<Rating
name="read-only"
value={parseInt(productData?.rating)}
precision={0.5}
readOnly
size="small"
/>
<span
className="text-light cursor ml-2"
onClick={gotoReviews}
>
{reviewsData?.length} Залишити відгук
</span>
</div>
</li>
</ul>
<div className="d-flex info mb-3">
<span className="oldPrice"> {productData?.oldPrice.toLocaleString("uk-UA", {
style: "currency",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
currency: "UAH",
}).replace('грн', '₴')}</span>
<span className="netPrice text-danger ml-2">
{productData?.price.toLocaleString("uk-UA", {
style: "currency",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
currency: "UAH",
}).replace('грн', '₴')}
</span>
</div>
{productData?.countInStock >= 1 ? (
<span className="badge badge-success">В НАЯВНОСТІ</span>
) : (
<span className="badge badge-danger">НЕМАЄ В НАЯВНОСТІ</span>
)}
<p className="mt-3"> {productData?.description.toLocaleString("uk-UA", {
style: "currency",
minimumFractionDigits: 0,
maximumFractionDigits: 0,
currency: "UAH",
}).replace('грн', '₴')}</p>
{productData?.productRam?.length !== 0 && (
<div className="productSize d-flex align-items-center">
<span>RAM:</span>
<ul
className={`list list-inline mb-0 pl-4 ${
tabError === true && "error"
}`}
>
{productData?.productRam?.map((item, index) => {
return (
<li className="list-inline-item">
<a
className={`tag ${
activeSize === index ? "active" : ""
}`}
onClick={() => isActive(index)}
>
{item}
</a>
</li>
);
})}
</ul>
</div>
)}
{productData?.size?.length !== 0 && (
<div className="productSize d-flex align-items-center">
<span>Size:</span>
<ul
className={`list list-inline mb-0 pl-4 ${
tabError === true && "error"
}`}
>
{productData?.size?.map((item, index) => {
return (
<li className="list-inline-item">
<a
className={`tag ${
activeSize === index ? "active" : ""
}`}
onClick={() => isActive(index)}
>
{item}
</a>
</li>
);
})}
</ul>
</div>
)}
{productData?.productWeight?.length !== 0 && (
<div className="productSize d-flex align-items-center">
<span>Weight:</span>
<ul
className={`list list-inline mb-0 pl-4 ${
tabError === true && "error"
}`}
>
{productData?.productWeight?.map((item, index) => {
return (
<li className="list-inline-item">
<a
className={`tag ${
activeSize === index ? "active" : ""
}`}
onClick={() => isActive(index)}
>
{item}
</a>
</li>
);
})}
</ul>
</div>
)}
<div className="d-flex align-items-center mt-3 actions_">
<QuantityBox
quantity={quantity}
item={productData}
selectedItem={selectedItem}
/>
<div className="d-flex align-items-center btnActions">
<Button
className="btn-blue btn-lg btn-big btn-round bg-red"
onClick={() => addtoCart()}
>
<BsCartFill />
{context.addingInCart === true
? "Додається..."
: " Додати до кошика"}
</Button>
<Tooltip
title={`${
isAddedToMyList === true
? "Додано до списку бажань"
: "Додати до списку бажань"
}`}
placement="top"
>
<Button
className={`btn-blue btn-lg btn-big btn-circle ml-4`}
onClick={() => addToMyList(id)}
>
{isAddedToMyList === true ? (
<FaHeart className="text-danger" />
) : (
<FaRegHeart />
)}
</Button>
</Tooltip>
<Tooltip title="Додати до порівняння" placement="top">
<Button className="btn-blue btn-lg btn-big btn-circle ml-2">
<MdOutlineCompareArrows />
</Button>
</Tooltip>
</div>
</div>
</div>
</div>
)}
<br />
<div className="card mt-5 p-5 detailsPageTabs">
<div className="customTabs">
<ul className="list list-inline">
<li className="list-inline-item">
<Button
className={`${activeTabs === 0 && "active"}`}
onClick={() => {
setActiveTabs(0);
}}
>
Опис
</Button>
</li>
<li className="list-inline-item">
<Button
className={`${activeTabs === 1 && "active"}`}
onClick={() => {
setActiveTabs(1);
}}
>
Додаткова інформація
</Button>
</li>
<li className="list-inline-item">
<Button
className={`${activeTabs === 2 && "active"}`}
onClick={() => {
setActiveTabs(2);
}}
>
Відгуки ({reviewsData?.length})
</Button>
</li>
</ul>
<br />
{activeTabs === 0 && (
<div className="tabContent">{productData?.description}</div>
)}
{activeTabs === 1 && (
<div className="tabContent">
<div className="table-responsive">
<table className="table table-bordered">
<tbody>
<tr className="frame">
<th>Тип</th>
<td>
<p>Прожектор світлодіодний з датчиком руху Lemanso 30W 6500K 3000Lm IP54
LMPS105-35 "Чарівність"</p>
</td>
</tr>
<tr className="weight-wo-wheels">
<th>Виробник</th>
<td>
<p>Lemanso</p>
</td>
</tr>
<tr className="weight-capacity">
<th>Напруга живлення</th>
<td>
<p>АС 175 - 265В, частота 50Гц</p>
</td>
</tr>
<tr className="width">
<th>Електрична потужність</th>
<td>
<p>100 Вт</p>
</td>
</tr>
<tr className="handle-height-ground-to-handle">
<th>Найменування</th>
<td>
<p>Світлодіодний прожектор, з вбудованими діодами</p>
</td>
</tr>
<tr className="wheels">
<th>Світловий потік</th>
<td>
<p>5600 Лм</p>
</td>
</tr>
<tr className="seat-back-height">
<th>Ступінь захисту</th>
<td>
<p>IP65</p>
</td>
</tr>
<tr className="head-room-inside-canopy">
<th>Матеріал</th>
<td>
<p>Метал / скло</p>
</td>
</tr>
<tr className="pa_size">
<th>Розмір</th>
<td>
<p>240 х 175 х 33 мм</p>
</td>
</tr>
<tr className="pa_color">
<th>Колір</th>
<td>
<p>Чорний</p>
</td>
</tr>
<tr className="pa_color_s">
<th>Колір світіння</th>
<td>
<p>Холодний білий (6500К)</p>
</td>
</tr>
<tr className="pa_dat">
<th>Датчик руху</th>
<td>
<p>Немає</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
)}
{activeTabs === 2 && (
<div className="tabContent">
<div className="row">
<div className="col-md-8">
<h3>Питання та відповіді клієнтів</h3>
<br />
{reviewsData?.length !== 0 &&
reviewsData
?.slice(0)
?.reverse()
?.map((item, index) => {
return (
<div
className="reviewBox mb-4 border-bottom"
key={index}
>
<div className="info">
<div className="d-flex align-items-center w-100">
<h5>{item?.customerName}</h5>
<div className="ml-auto">
<Rating
name="half-rating-read"
value={item?.customerRating}
readOnly
size="small"
/>
</div>
</div>
<h6 className="text-light">
{item?.dateCreated?.split('T')[0]}
</h6>
<p>{item?.review} </p>
</div>
</div>
);
})}
<br className="res-hide" />
<form className="reviewForm" onSubmit={addReview}>
<h4>Додати відгук</h4>
<div className="form-group">
<textarea
className="form-control shadow"
placeholder="Напишіть відгук"
name="review"
value={reviews.review}
onChange={onChangeInput}
></textarea>
</div>
<div className="row">
<div className="col-md-6">
<div className="form-group">
<Rating
name="rating"
value={rating}
precision={0.5}
onChange={changeRating}
/>
</div>
</div>
</div>
<br />
<div className="form-group">
<Button
type="submit"
className="btn-blue btn-lg btn-big btn-round"
>
{isLoading === true ? (
<CircularProgress
color="inherit"
className="loader"
/>
) : (
"Надіслати відгук"
)}
</Button>
</div>
</form>
</div>
</div>
</div>
)}
</div>
</div>
<br />
{relatedProductData?.length !== 0 && (
<RelatedProducts
title="RELATED PRODUCTS"
data={relatedProductData}
/>
)}
</div>
</section>
</>
);
};
export default ProductDetails;