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/6023| Title: | Онлайн-ресурс для замовлення комп’ютерної техніки |
| Authors: | Оксамитна, Любов Павлівна Лукій, Максим Олегович |
| Keywords: | ПРЕДМЕТНА ОБЛАСТЬ,;ОНЛАЙН-РЕСУРС,;ПРОЄКТУВАННЯ,;БАЗА ДАНИХ,;JAVASCRIPT,;TYPESCRIPT,;API,;NODE.JS. |
| Issue Date: | 11-Jun-2024 |
| Abstract: | У сучасному цифровому столітті великого значення набуває можливість надійної та швидкої покупки комп’ютерної техніки. Онлайн-ресурси для замовлення комп’ютерної техніки стають важливим інструментом для споживачів. У цьому контексті важливо дослідити й розглянути ефективність та використання таких ресурсів. Мета кваліфікаційної роботи бакалавра – створення онлайн-ресурсу для замовлення комп’ютерної техніки. Об’єкт дослідження: процес розробки та використання онлайн-ресурсу для замовлення комп’ютерної техніки. Предмет дослідження: онлайн-ресурс для замовлення комп’ютерної техніки. Кваліфікаційна робота бакалавра присвячена дослідженню сфери електронної комерції та розробці онлайн-ресурсу для замовлення комп'ютерної техніки. Шляхом вивчення існуючих проблем та аналізу світових тенденцій у цій галузі, в роботі ставиться завдання створити платформу, що відповідає найвищим стандартам якості та задовольняє потреби сучасного споживача. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/6023 |
| Appears in Collections: | 122 Комп’ютерні науки (Комп’ютерні науки та прикладне програмування) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| Пояснювальна записка_Лукій Максим_КН-2001_2023-24.pdf Restricted Access | 4.1 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 курсу, групи КН-2001
спеціальності 122 «Комп’ютерні науки»
(шифр і назва спеціальності)
освітня програма «Комп’ютерні науки та
(назва освітньої програми)
прикладне програмування
Лукій Максим Олегович
Керівник __________ Оксамитна Л.П.
(прізвище та ініціали)
Рецензент __________ Стась С.В.
(прізвище та ініціали)
Черкаси 2024 рік
Бланк завдання на кваліфікаційну роботу бакалавра студенту
Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Комп’ютерних наук та системного аналізу
Освітньо-кваліфікаційний рівень Бакалавр
Спеціальність 122 – Комп’ютерні науки
Освітня програма Комп’ютерні науки та прикладне програмування
ЗАТВЕРДЖУЮ
Завідувач кафедри КНСА
_______________ Юрій ТРИУС
«____» _____________ 2024 р.
ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Лукію Максиму Олеговичу
(прізвище, ім’я, по батькові)
1. Тема роботи Онлайн-ресурс для замовлення комп’ютерної техніки
Керівник роботи Оксамитна Л.П., к.т.н., доцент
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від «26» лютого 2024 р. №60/04.
2. Строк подання студентом роботи до 10 червня 2024 року.
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Дослідження предметної області.
4.2. Проєктування та розробка онлайн-ресурсу для замовлення комп’ютерної техніки
4.3. Програмна реалізація.
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):
5.1. Додаток А. Специфікація 482.ЧДТУ. 42031-01.
5.2. Додаток Б. Текст програми.
5.3. Додаток В. Інструкція користувача.
5 .4. Презентація у вигляді 34 слайдів.
6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
завдання видав завдання прийняв
консультанта
7. Дата видачі завдання 15.01.2024
КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу
15.01.2024 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету
до 12.02.2024 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної
до 18.03.2024 Виконано
роботи бакалавра.
4 Написання аналітичного розділу кваліфікаційної
до 01.04.2024 Виконано
роботи бакалавра.
5 Написання практичних розділів й висновків до
до 01.05.2024 Виконано
кваліфікаційної роботи бакалавра.
6 Передзахист кваліфікаційної роботи бакалавра
03.06.2024 Виконано
на засіданні кафедри КНСА.
7 Подання роботи завідувачу кафедри КНСА. до 10.06.2024 Виконано
8 Захист кваліфікаційної роботи бакалавра. 11.06.2024 Виконано
Студент _____________________________ Максим ЛУКІЙ
(підпис)
Керівник роботи ____________________________ Любов ОКСАМИТНА
(підпис)
РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 86 с., 20 рис., 1 таблицю, 13
використаних джерел, 5 додатків.
Актуальність теми. У сучасному цифровому столітті великого значення
набуває можливість надійної та швидкої покупки комп’ютерної техніки. Онлайн-
ресурси для замовлення комп’ютерної техніки стають важливим інструментом для
споживачів. У цьому контексті важливо дослідити й розглянути ефективність та
використання таких ресурсів.
Мета роботи і задачі дослідження. Мета кваліфікаційної роботи бакалавра –
створення онлайн-ресурсу для замовлення комп’ютерної техніки.
Для досягнення мети були поставлені такі завдання:
дослідження предметної області;
застосування методу порівняння аналогів вже існуючих онлайн-ресурсів для
замовлення комп'ютерної техніки;
визначення стеку сучасних технологій для програмної реалізації онлайн-
ресурсу;
реалізація бази даних онлайн-ресурсу;
розробка онлайн-ресурсу, його відлагодження, тестування та впровадження.
Об’єкт дослідження: процес розробки та використання онлайн-ресурсу для
замовлення комп’ютерної техніки.
Предмет дослідження: онлайн-ресурс для замовлення комп’ютерної техніки.
Методи дослідження. Для досягнення поставленої мети в кваліфікаційній
роботі бакалавра використовувалися наступні методи:
Теоретичний метод: аналіз літературних джерел і теоретичних аспектів
електронної комерції та інтерфейсного дизайну для розробки оптимального
інтерфейсу та функціоналу онлайн-ресурсу.
Емпіричний метод: проведення опитувань серед користувачів онлайн-ресурсів
для збору відгуків щодо функціоналу, швидкості обслуговування та загального
задоволення від використання платформи.
Порівняльний метод: порівняння онлайн-ресурсу з конкуруючими онлайн-
ресурсами за кількома параметрами, такими як цінова політика, асортимент
товарів та якість обслуговування.
Перелік ключових слів: ПРЕДМЕТНА ОБЛАСТЬ, ОНЛАЙН-РЕСУРС,
ПРОЄКТУВАННЯ, БАЗА ДАНИХ, REACT, JAVASCRIPT, TYPESCRIPT, API,
NODE.JS.
ABSTRACT
Master’s work contains. 86 pages, 20 figures, 1 table, 13 sources used, 5
attachments.
Actuality of theme. Relevance of the Topic: In the modern digital era, the ability to
reliably and quickly purchase computer equipment is of paramount importance. Online
resources for ordering computer equipment have become a vital tool for consumers. In this
context, it is essential to investigate and examine the efficiency and usage of such resources,
particularly "ComputerCraze."
Purpose and tasks of the research. The aim of the bachelor's qualification work is
to develop an online resource for ordering computer equipment. To achieve this goal, the
following tasks were set:
Study of the subject area;
Application of the method of comparing analogs of existing online resources for
ordering computer equipment;
Determination of the stack of modern technologies for the software implementation
of the online resource;
Implementation of the online resource's database;
Development of the online resource, its debugging, testing, and implementation.
The object of research. the process of developing and using an online resource for
ordering computer equipment..
The subject of research: online resource for ordering computer equipment.
Research methods: The following methods were used to achieve the stated goal:
Theoretical Method: Analysis of literature sources and theoretical aspects of
electronic commerce and interface design to develop an optimal interface and
functionality of the online resource.
Empirical Method: Conducting surveys among users of online resources to gather
feedback on functionality, service speed, and overall satisfaction with the platform's
usage.
Comparative Method: Comparison of the online resource with competing platforms
based on several parameters such as pricing policy, product assortment, and service
quality.
The list of keywords: SUBJECT AREA, ONLINE RESOURCE, DEVELOPMENT,
DATABASE, REACT, JAVASCRIPT, TYPESCRIPT, API, NODE.JS.
6
ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ ........ 8
ВСТУП .................................................................................................................................. 9
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ ............................................................... 11
1.1 Аналіз сучасного стану вибору онлайн-ресурсів для замовлення комп'ютерної
техніки …………………… ............................................................................................ 11
1.2 Огляд існуючих аналогів ресурсів для замовлення комп’ютерної техніки ....... 12
1.2.1 Аналіз платформи «Amazon» ......................................................................... 12
1.2.2 Аналіз онлайн-ресурсу «Best Buy» ................................................................. 14
1.2.3 Аналіз онлайн-ресурсу «f.ua» .......................................................................... 16
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та постановка
завдання……………….. ................................................................................................ 18
Висновки до розділу 1 ................................................................................................... 22
2 ПРОЄКТУВАННЯ ОНЛАЙН-РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ
ТЕХНІКИ ............................................................................................................................ 23
2.1 Опис функціонального програмного середовища для розробки ........................ 23
2.2 Основні принципи розробки веб-ресурсів ............................................................ 26
2.3 Архітектура онлайн-ресурсу ................................................................................... 27
2.4 Розробка діаграми варіантів використання ........................................................... 29
2.5 Проєктування структури бази даних .................................................................... 30
2.6 Опис процесу проєктування структури онлайн-ресурсу для замовлення
комп’ютерної техніки .................................................................................................... 32
2.7 Проєктування інтерфейсу користувача ................................................................ 33
Висновки до розділу 2 ................................................................................................... 36
3 ПРОГРАМНА РЕАЛІЗАЦІЯ ......................................................................................... 38
3.1 Постановка завдання ............................................................................................... 38
3.2 Інтерфейс онлайн-ресурсу для замовлення комп’ютерної техніки .................... 42
3.3 Програмна онлайн-ресурсу для замовлення комп’ютерної техніки .................. 43
3.4 Особливості тестування веб-ресурсу ..................................................................... 49
7
3.5 Тестування онлайн-ресурсу для замовлення комп’ютерної техніки .................. 50
Висновки до розділу 3 ................................................................................................... 52
ВИСНОВКИ ....................................................................................................................... 53
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................................... 55
Додаток А. Специфікація 482.ЧДТУ. 42031-01 ……………………………………… 56
Додаток Б. Текст програми ............................................................................................... 58
Додаток В. Інструкція користувача ................................................................................. 74
Додаток Г. Структура бази даних .................................................................................... 80
Додаток Д. Діаграми процесів замовлення товарів та підтвердження замовлення
адміністратором (менеджером) ........................................................................................ 83
8
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ
UML – уніфікована мова моделювання;
MVC – архітектурний шаблон;
ООП – об’єктно орієнтоване програмування;
БД – база даних;
СУБД – система управління базами даних;
ІТ – інформаційні технології;
API – інтерфейс програмного забезпечення (application
programming interface).
9
ВСТУП
В сьогоденні, швидкість та зручність виконання покупок стають ключовими
факторами, онлайн-ресурси для замовлення комп'ютерної техніки займають важливе
місце серед споживачів. Однак, не завжди можна знайти оптимальне рішення, яке
відповідає усім потребам та очікуванням користувача. У цьому контексті, виникає
актуальна необхідність у розробці та впровадженні онлайн-ресурсів, які забезпечують
зручну, надійну та ефективну покупку комп'ютерної техніки.
Задоволення цієї потреби є складною задачею, оскільки сфера електронної
комерції постійно зростає, з цим пов'язані чисельні проблеми. Інтереси користувачів
та вимоги ринку постійно змінюються, що вимагає постійного адаптування та
вдосконалення існуючих платформ.
Актуальність кваліфікаційної роботи бакалавра.
На сьогоднішній день провідні спеціалісти цієї галузі пропонують свої рішення,
проте багато з них не відповідають усім вимогам споживачів. Тому виникає потреба
у вивченні світових тенденцій у розробці та використанні онлайн-ресурсів для
замовлення комп'ютерної техніки та визначення напрямків подальшого розвитку.
В контексті вищевикладеного, дана кваліфікаційна робота бакалавра
присвячена дослідженню сфери електронної комерції та розробці онлайн-ресурсу для
замовлення комп'ютерної техніки. Шляхом вивчення існуючих проблем та аналізу
світових тенденцій у цій галузі, в роботі ставиться завдання створити платформу, що
відповідає найвищим стандартам якості та задовольняє потреби сучасного
споживача.
Ця робота важлива не лише з практичної точки зору, а й з точки зору наукових
досліджень, оскільки вона спрямована на збагачення наукового аспекту розвитку
електронної комерції та розробки інформаційних технологій (ІТ).
Таким чином, розробка онлайн-ресурсу для замовлення комп’ютерної техніки
є актуальним завданням, яке відповідає сучасним світовим тенденціям та вимогам
споживачів у сфері електронної комерції.
10
Мета кваліфікаційної роботи бакалавра – створення онлайн-ресурсу для
замовлення комп’ютерної техніки.
Для досягнення мети були поставлені такі завдання:
дослідження предметної області;
застосування методу порівняння аналогів вже існуючих онлайн-ресурсів для
замовлення комп'ютерної техніки;
визначення стеку сучасних технологій для програмної реалізації онлайн-
ресурсу;
реалізація бази даних онлайн-ресурсу;
розробка онлайн-ресурсу, його відлагодження, тестування та впровадження.
Об’єкт і предмет дослідження.
Об’єктом дослідження є процес розробки та використання онлайн-ресурсу для
замовлення комп’ютерної техніки.
Предметом дослідження є онлайн-ресурс для замовлення комп’ютерної
техніки.
Для вирішення поставлених завдань були застосовані наступні методи
дослідження:
Теоретичний метод: аналіз літературних джерел і теоретичних аспектів
електронної комерції та інтерфейсного дизайну для розробки оптимального
інтерфейсу та функціоналу онлайн-ресурсу.
Емпіричний метод: проведення опитувань серед користувачів онлайн-ресурсів
для збору відгуків щодо функціоналу, швидкості обслуговування та загального
задоволення від використання платформи.
Порівняльний метод: порівняння онлайн-ресурсу з конкуруючими онлайн-
ресурсами за кількома параметрами, такими як цінова політика, асортимент товарів
та якість обслуговування.
11
1 ДОСЛІДЖЕННЯ ПРЕДМЕТНОЇ ОБЛАСТІ
1.1 Аналіз сучасного стану вибору онлайн-ресурсів для замовлення
комп'ютерної техніки
У сучасному світі інтернет-торгівлі конкуренція серед онлайн-ресурсів для
замовлення комп'ютерної техніки є вельми великою. Для ефективного аналізу
потрібно розглянути кілька ключових аспектів, включаючи: доступність товарів,
якість обслуговування, технічні можливості платформи та інші.
Одним з основних критеріїв вибору онлайн-ресурсу для замовлення
комп'ютерної техніки є доступність асортименту. Користувачі хочуть мати
можливість вибирати серед широкого спектру товарів, включаючи ноутбуки,
периферійні пристрої, комплектуючі та інші компоненти. Якщо ресурс пропонує
обмежений вибір або відстежується постійний дефіцит популярних товарів, це може
відлякати покупців і спричиняти втрату клієнтів на користь конкурентів.
Якість обслуговування відіграє важливу роль у задоволенні клієнтів та
утриманні їх лояльності. Вона включає швидкість обробки замовлень, точність
виконання доставки, якість післяпродажного обслуговування та можливість
отримання консультацій. Ресурси, які забезпечують ефективне обслуговування та
виявляють високу реактивність на запити клієнтів, зазвичай здобувають більшу
популярність серед споживачів.
Ефективність та зручність користування онлайн-ресурсом значно залежать від
його технічних можливостей. Це включає швидкість роботи веб-сайту, його
адаптивність для різних пристроїв, зручну систему фільтрації та сортування товарів,
а також безпеку та захист персональних даних користувачів. Ресурси з високим
рівнем технічної розвиненості здатні забезпечувати зручний та безпечний досвід
покупок, що стає ключовим фактором успіху в онлайн-торгівлі.
Одним із важливих критеріїв, які впливають на вибір онлайн-ресурсу для
замовлення комп'ютерної техніки, є його репутація серед користувачів. Позитивні
відгуки та рекомендації сприяють підвищенню довіри до платформи та збільшенню
12
ймовірності того, що нові клієнти оберуть саме її. Негативні відгуки, навпаки, можуть
вплинути на репутацію компанії та втрату потенційних покупців.
Асортимент товарів є ще одним важливим фактором, на який звертають увагу
користувачі при виборі онлайн-ресурсу для замовлення комп'ютерної техніки.
Користувачі бажають мати можливість вибирати серед різноманітності брендів,
моделей та конфігурацій, що відповідають їхнім потребам та бюджету. Ресурси з
широким асортиментом товарів зазвичай мають більше шансів привернути увагу та
задовольнити потреби різних категорій користувачів.
Цінова політика також впливає на вибір онлайн-ресурсу. Користувачі оцінюють
конкурентоспроможність цін на товари, порівнюючи їх з аналогічними пропозиціями
на інших платформах. Особливо це стосується таких аспектів, як промо-акції, знижки,
акційні пропозиції та можливість отримання додаткових бонусів чи кешбеку. Ресурси
з привабливою ціновою політикою здатні залучити більше клієнтів та забезпечити
їхню лояльність.
Зручність інтерфейсу грає важливу роль у виборі онлайн-ресурсу. Інтуїтивно
зрозумілий та легко навігований інтерфейс сприяє покращенню досвіду користувача
та зменшує ймовірність його втрати в процесі пошуку та вибору товарів. Доцільно
використовувати зручні та ефективні функції фільтрації та сортування, які
допомагають користувачам швидко знаходити необхідні товари.
Наявність різноманітних опцій оплати та доставки є ще одним важливим
аспектом для користувачів. Індивідуальні умови платежів та доставки дозволяють
задовольнити різні потреби та вимоги клієнтів, забезпечуючи їм зручність та комфорт
при здійсненні покупок.
1.2 Огляд існуючих аналогів ресурсів для замовлення комп’ютерної
техніки
У сучасному цифровому середовищі існує безліч онлайн-ресурсів, які
пропонують замовлення комп'ютерної техніки. Розглянемо деякі з них, щоб виявити
їхні переваги, недоліки та особливості.
13
1.2.1 Аналіз платформи «Amazon». «Amazon» є одним з найбільших та
найпопулярніших онлайн-магазинів у світі, який пропонує широкий спектр товарів,
включаючи комп'ютерну техніку. Приголомшлива репутація «Amazon» базується на
декількох ключових факторах, які варто розглянути детальніше [1].
Однією з найбільших переваг «Amazon» є безліч варіантів, які вони пропонують
своїм покупцям. Вони мають широкий асортимент комп'ютерних пристроїв,
включаючи ноутбуки, комп'ютери, монітори, периферійні пристрої та комплектуючі.
Це дає користувачам можливість вибирати саме ті продукти, які найкраще
відповідають їхнім потребам та бюджету [1].
Головна сторінка онлайн-ресурсу «Amazon» представлена на рис. 1.1.
Рисунок 1.1 – Головна сторінка онлайн-ресурсу «Amazon» [1]
«Amazon» відомий своїми конкурентоспроможними цінами та привабливими
пропозиціями. Вони часто пропонують знижки та акції на широкий спектр товарів,
включаючи комп'ютерну техніку. Це дозволяє клієнтам значно зекономити гроші та
отримати якісні товари за вигідними цінами.
«Amazon» забезпечує швидку та надійну доставку своїх товарів по всьому світу.
Вони мають розгалужену мережу доставки, що дозволяє їм швидко виконувати
замовлення та доставляти товари вчасно. Крім того, «Amazon» також пропонує
14
можливість безкоштовної доставки для певних товарів або для підписки на Amazon
Prime [1].
Крім широкого вибору та вигідних цін, «Amazon» відомий своєю високою
якістю обслуговування та клієнтською підтримкою. Вони забезпечують чудовий
сервіс післяпродажного обслуговування, швидко вирішують будь-які проблеми чи
скарги та стежать за задоволеністю своїх клієнтів.
«Amazon» постійно впроваджує нові технології та інновації для покращення
свого сервісу та задоволення потреб клієнтів. Вони активно вивчають та
впроваджують різноманітні ідеї, щоб забезпечити найкращий досвід покупок для
своїх клієнтів.
Узагальнюючи вищесказане, зазначимо, що «Amazon» є визнаним лідером у
сфері онлайн-торгівлі, забезпечуючи широкий вибір товарів, конкурентоспроможні
ціни, швидку доставку, високу якість обслуговування та постійні інновації. Це робить
їх одним з найкращих варіантів для покупки комп'ютерної техніки онлайн.
1.2.2 Аналіз онлайн-ресурсу «Best Buy». «Best Buy» є відомою мережею
магазинів та онлайн-ресурсом, спеціалізованим на продажі електроніки та
комп'ютерної техніки [2]. Розглянемо детальніше ключові особливості та переваги
цього ресурсу.
Однією з головних переваг «Best Buy» є широкий вибір комп'ютерної техніки
та електроніки. Вони пропонують різноманітність брендів, моделей та конфігурацій,
включаючи ноутбуки, стаціонарні комп'ютери, планшети, монітори та аксесуари. Це
дозволяє клієнтам вибирати товари, які найкраще відповідають їхнім потребам та
бюджету [2].
«Best Buy» відомий своїми висококваліфікованими працівниками та
експертами, які готові надати консультації та поради клієнтам. Їхні фахівці можуть
допомогти з вибором правильного продукту, надати інформацію про технічні
характеристики та функціональні можливості, а також розкласти на полиці товари
таким чином, щоб спростити вибір для клієнтів.
Головна сторінка онлайн-ресурсу «Best Buy» представлена на рис. 1.2.
15
Рисунок 1.2 – Головна сторінка онлайн-ресурсу «Best Buy» [2]
«Best Buy» пропонує конкурентоспроможні ціни на свою продукцію та
регулярно проводить різноманітні акції, знижки та спеціальні пропозиції. Це дає
клієнтам можливість зекономити гроші та отримати вигідні умови покупок.
«Best Buy» має добру репутацію серед клієнтів та отримує позитивні відгуки за
якість своїх товарів та обслуговування. Це підтверджує їхню здатність задовольняти
потреби клієнтів та забезпечувати високий рівень задоволеності.
Узагальнюючи викладене, варто зазначити те, що «Best Buy» є відомим і
надійним джерелом комп'ютерної техніки та електроніки, пропонуючи широкий
вибір товарів, консультації високої якості, доступні ціни, гарантійне обслуговування
та репутацію лідера у своїй галузі. Саме це робить онлайн-ресурс привабливим
вибором для покупців, які шукають надійне та якісне місце для придбання
комп'ютерної техніки.
Незважаючи на свої багаті переваги, «Best Buy» також має кілька недоліків, які
варто врахувати перед покупкою. Хоча «Best Buy», зазвичай, пропонує
конкурентоспроможні ціни, але на деякі товари їхні ціни можуть бути вищими, ніж в
інших магазинах або онлайн-платформах. Це може стати перешкодою для покупців з
16
обмеженим бюджетом. Деякі клієнти скаржаться на рівень обслуговування та
підтримки клієнтів у «Best Buy», особливо у випадках повернення товарів або
розв'язання проблем. Деякі відгуки свідчать про те, що сервіс може бути
непослідовним або не задовільним.
1.2.3 Аналіз онлайн-ресурсу «F.ua». «F.ua» є відомою онлайн-платформою в
Україні, спеціалізованою на продажі електроніки та комп'ютерної техніки.
Однією з головних переваг «F.ua» є широкий вибір товарів, який вони
пропонують своїм клієнтам. Вони мають різноманіття брендів, моделей та типів
комп'ютерної техніки, включаючи ноутбуки, планшети, монітори, комп'ютерні
компоненти та аксесуари. Це дозволяє клієнтам вибирати товари, що найкраще
відповідають їхнім потребам та бюджету [3]. Головна сторінка онлайн-ресурсу «F.ua»
представлена на рис. 1.3.
Рисунок 1.3 – Головна сторінка онлайн-ресурсу «F.ua» [3]
«F.ua» відомий своїми конкурентоспроможними цінами на електроніку та
комп'ютерну техніку. Вони часто пропонують різноманітні знижки, акції та
спеціальні пропозиції для своїх клієнтів. Це дозволяє їм зекономити гроші та
отримати вигідні умови покупок.
17
«F.ua» славиться своєю високою якістю обслуговування та дбайливим підходом
до клієнтів. Вони надають оперативну підтримку та консультації клієнтам щодо
вибору товару, технічних питань чи інших питань, які виникають під час покупок.
«F.ua» пропонує швидку доставку своїх товарів по всій Україні та надає зручні
способи оплати, включаючи оплату готівкою при отриманні, безготівковий
розрахунок та онлайн-оплату. Це дозволяє клієнтам отримати свої замовлення
швидко та зручно.
«F.ua» гарантує якість своїх товарів і надає гарантійне обслуговування на свою
продукцію. Крім того, вони мають гнучку політику щодо повернення товарів, що
дозволяє клієнтам здійснювати повернення або обмін товарів у випадку необхідності.
«F.ua» постійно працює над вдосконаленням своєї платформи та
впровадженням новітніх технологій для забезпечення найкращого досвіду покупок
для своїх клієнтів. Вони активно вивчають світові тенденції та здійснюють інновації
у сфері електронної комерції.
Незважаючи на свої багаті переваги, «F.ua» також має кілька недоліків, які
варто врахувати.
Деякі клієнти висловлюють скарги щодо можливих помилок у замовленнях та
проблем з доставкою товарів. Це може включати помилкову комплектацію
замовлення, затримки у доставці або недоліки у транспортних компаніях, що
постачають товар.
Інші клієнти висловлюють незадоволення щодо рівня обслуговування та
підтримки клієнтів у «F.ua». Вони можуть зазнавати проблем з отриманням
відповідей на свої запитання або вирішенням своїх проблем.
Узагальнюючи проведений аналіз, варто відмітити, що хоча «F.ua» є
популярною та надійною платформою для покупки електроніки та комп'ютерної
техніки, вона також має свої недоліки, такі як можливість помилок у замовленнях та
доставці, проблеми з обслуговуванням клієнтів, обмеженість акцій та знижок,
проблеми з внутрішнім пошуком та гарантійним обслуговуванням. Перед
придбанням товару варто ретельно розглянути всі ці аспекти.
18
1.3 Аналіз порівнянь існуючих рішень розглянутих реалізацій та
постановка завдання
Проведемо порівняльний аналіз розглянутих реалізацій онлайн-сервісів для
замовлення комп’ютерної техніки, а саме: «Amazon», «Best Buy» та «F.ua». Це три
великих гравці на ринку електроніки та комп'ютерної техніки. Кожен з них має свої
унікальні характеристики, переваги та недоліки.
«Amazon» відомий своїм безмежним асортиментом товарів, що включає в себе
практично будь-який тип комп'ютерної техніки та електроніки. Вони пропонують
широкий вибір товарів від різних виробників, що робить їхню платформу
привабливою для різних клієнтів.
«Best Buy» також має великий асортимент товарів, але, можливо, менший, ніж
у Amazon. Вони спеціалізуються на електроніці та комп'ютерній техніці, а також
пропонують деякі додаткові послуги, такі як консультації і технічна підтримка.
«F.ua», як і «Best Buy» спеціалізуються на електроніці та комп'ютерній техніці,
проте їхній асортимент може бути обмеженим, особливо в порівнянні з «Amazon».
Однак, вони намагаються компенсувати це широким вибором товарів в межах своєї
спеціалізації.
«Amazon» відомий своїми конкурентоспроможними цінами та регулярними
знижками на товари. Їхня система знижок та пропозицій дозволяє клієнтам
отримувати вигідні умови покупок.
«Best Buy» також пропонує конкурентоспроможні ціни та акції для своїх
клієнтів. Вони регулярно оголошують знижки та спеціальні пропозиції на популярні
товари.
«F.ua» може мати різноманітність акцій та знижок для своїх клієнтів, проте їхні
пропозиції можуть бути менш привабливими у порівнянні з Amazon та Best Buy.
«Amazon» славиться своєю швидкою доставкою та високоякісним
обслуговуванням клієнтів. Вони надають широкий спектр доставки та забезпечують
гнучкі умови повернення товарів.
19
«Best Buy» також має ефективну систему доставки та обслуговування клієнтів.
Вони пропонують різні способи доставки та надають підтримку клієнтам у вирішенні
будь-яких проблем.
«F.ua» також намагається забезпечити якісну доставку та обслуговування
клієнтів, але може мати обмеженіші можливості у порівнянні з конкурентами.
«Amazon», завдяки своєму великому обсягу продажів та клієнтській базі,
зазвичай має багато відгуків та рейтингів для своїх товарів, що допомагає клієнтам
приймати інформовані рішення.
«Best Buy» також має велику кількість відгуків та рейтингів для своїх товарів,
можливо, в меншій мірі, ніж «Amazon».
«F.ua» має менше відгуків та рейтингів, особливо якщо порівнювати їх з
більшими гравцями, що може ускладнити процес прийняття рішення для клієнтів.
Узагальнюючи викладене, робимо висновок, що кожен з трьох ресурсів має свої
унікальні переваги та недоліки. «Amazon» відомий своєю широкою різноманітністю
товарів та конкурентоспроможними цінами, «Best Buy» має ефективну систему
обслуговування клієнтів та акцій, а «F.ua» спеціалізується на місцевому ринку та
намагається пропонувати якісні послуги для клієнтів в Україні. Клієнти можуть
здійснити вибір серед них залежно від своїх індивідуальних потреб та уподобань.
У таблиці 1.1 висвітлено порівняльний аналіз розглянутих онлайн-сервісів для
замовлення комп’ютерної техніки, а саме: «Amazon», «Best Buy», «F.ua».
Таблиця 1.1 – Порівняльна таблиця існуюючих програмних рішень
Характеристика «Amazon» «Best Buy» «F.ua»
Асортимент Широкий, Великий, з фокусом Обмежений, але в
товарів включаючи на електроніці та межах своєї
практично будь-який комп'ютерах спеціалізації
тип комп'ютерної
техніки та
електроніки
20
Ціни та знижки Конкурентоспромож- Конкурентоспро- Має менш
ні, регулярні знижки можні, регулярні привабливі акції
та акції знижки та акції та знижки
Обслуговування Швидка доставка, Ефективна система Робить спроби
клієнтів та високоякісне доставки та забезпечити
доставка обслуговування обслуговування якісну доставку
та
обслуговування
Відгуки та Багато відгуків та Значна кількість Має менше
рейтинги рейтингів, відгуків та відгуків та
допомагають рейтингів рейтингів
клієнтам приймати
рішення
Постановка завдання. Розробка онлайн-ресурсу для замовлення комп’ютерної
техніки передбачає вирішення ряду ключових завдань, спрямованих на створення
ефективної та зручної платформи для покупки та продажу комп’ютерної техніки.
Головною метою кваліфікаційної роботи бакалавра є створення інноваційного
онлайн-ресурсу, який забезпечуватиме споживачам широкий вибір товарів, зручний
та інтуїтивно зрозумілий інтерфейс, а також надійність та безпеку покупок. Для
досягнення цієї мети поставлені наступні завдання:
Аналіз ринку та конкурентів: детальне вивчення сучасного стану ринку
комп’ютерної техніки та існуючих конкурентів для визначення основних потреб та
пріоритетів споживачів.
Проєктування інтерфейсу: розробка інтуїтивно зрозумілого та зручного для
користувачів інтерфейсу, що відповідає сучасним стандартам дизайну та включає в
себе всі необхідні функціональні можливості.
Реалізація бази даних: створення надійної та ефективної бази даних для
зберігання інформації про товари, клієнтів та замовлення.
Розробка онлайн-ресурсу: створення функціонального онлайн-ресурсу для
замолення комп’ютерної техніки, який дозволить користувачам переглядати
21
асортимент товарів, здійснювати замовлення та оплату, а також взаємодіяти з іншими
користувачами.
Відлагодження та тестування: проведення ретельного відлагодження
програмного забезпечення та тестування всіх функціональних можливостей для
забезпечення його стабільної та безперебійної роботи.
Впровадження та підтримка: запуск онлайн-ресурсу та забезпечення його
подальшої підтримки та розвитку, включаючи впровадження нових функцій та
відповідь на потреби користувачів.
Розглянемо функціональні вимоги до власної розробки:
Реєстрація та авторизація користувачів: система реєстрації користувачів з
можливістю авторизації через електронну пошту або соціальні мережі.
Пошук товарів: можливість швидкого пошуку товарів за назвою, категорією,
виробником, ціною тощо.
Перегляд деталей товару: функціонал для перегляду повної інформації про
товар, включаючи фотографії, характеристики, відгуки користувачів тощо.
Додавання товарів до кошика: можливість користувачів додавати товари до
кошика для подальшої покупки.
Оформлення замовлення: функція оформлення замовлення, включаючи вибір
способу доставки та оплати.
Система відгуків та рейтингів: можливість користувачів залишати відгуки та
оцінки товарів, а також переглядати рейтинги товарів інших користувачів.
Сповіщення та оновлення: можливість підписки на сповіщення про нові
надходження товарів, зміни цін або акції.
Адміністративний розділ: система управління товарами, замовленнями,
користувачами та іншими аспектами платформи для адміністраторів.
Захист даних та безпека: забезпечення конфіденційності та безпеки особистих
даних користувачів, включаючи захист від шахраїв та кібератак.
Сумісність з різними пристроями: адаптивний дизайн.
22
Висновки до розділу 1
У результаті дослідження предметної області було проведено аналіз сучасного
стану замовлення комп'ютерної техніки в онлайн-ресурсах, а також розглянуто
існуючі аналоги таких ресурсів: «Amazon», «Best Buy» та «F.ua».
Виявлено, що ринок комп'ютерної техніки відчуває постійний попит, а онлайн-
ресурси стають все більш популярними серед споживачів за їхньою зручністю та
доступністю.
Аналіз існуючих аналогів показав, що кожен з них має свої переваги та
недоліки, Наприклад, «Amazon» відомий своїм широким асортиментом та
конкурентоспроможними цінами, тоді як «Best Buy» забезпечує ефективну систему
обслуговування клієнтів та акції, а «F.ua» спеціалізується на місцевому ринку та
намагається пропонувати якісні послуги для клієнтів в Україні.
Результати проведеного дослідження визначили основні параметри та
функціональні вимоги з метою подальшої розробки онлайн-ресурсу для замовлення
комп'ютерної техніки.
23
2 ПРОЄКТУВАННЯ ОНЛАЙН-РЕСУРСУ ДЛЯ ЗАМОВЛЕННЯ
КОМП’ЮТЕРНОЇ ТЕХНІКИ
2.1 Опис функціонального програмного середовища для розробки
При розробці онлайн-ресурсу для замовлення комп’ютерної техніки було
використано середовище розробки «Visual Studio Code».
«Visual Studio Code» є одним з найпопулярніших та потужних інтегрованих
середовищ розробки (IDE) для програмістів у сучасному програмуванні. Це
безкоштовне та відкрите програмне забезпечення, розроблене компанією Microsoft,
яке надає широкі можливості для роботи з різними мовами програмування,
включаючи JavaScript, TypeScript, HTML, CSS та багато інших [5].
Однією з основних переваг «Visual Studio Code» є його легка вага та швидкість
роботи. Він має мінімальний обсяг вбудованих ресурсів, що дозволяє ефективно
працювати навіть на не зовсім потужних комп'ютерах. Крім того, «VS Code» має
широкий набір розширень, які дозволяють розширювати його функціональність та
налаштовувати під індивідуальні потреби розробника.
Ще однією важливою перевагою «VS Code» є його вбудована підтримка систем
контролю версій, таких як Git, що спрощує спільну роботу над проєктом та
відстеження змін.
У «VS Code» доступні різноманітні інструменти для розробки веб-додатків,
включаючи відладчик, автодоповнення, підказки та інші [5]. Це робить його
ідеальним вибором для створення клієнтської частини онлайн-ресурсу для
замовлення комп'ютерної техніки, яка буде взаємодіяти з користувачами через веб-
браузер. У цьому середовищі розробки було створено та налагоджено клієнтську та
серверну частину ресурсу, забезпечено зручний та продуктивний процес розробки, а
також забезпечено можливість спільної роботи над проєктом для всього
розробницького колективу.
Використання «Visual Studio Code» виявилося успішним та ефективним для
розробки онлайн-ресурсу для замовлення комп'ютерної техніки, дозволяючи
24
зосередитися на створенні високоякісного та функціонального інтерфейсу для
замовлень.
Під час розробки онлайн-ресурсу для замовлення комп'ютерної техніки у
«Visual Studio Code» використовувалися різноманітні інструменти та можливості, які
сприяли продуктивності та ефективності процесу розробки.
Починаючи з інтерфейсу, «VS Code» надавав зручний та приємний інтерфейс
користувача, який спрощував навігацію по проєкту та доступ до необхідних функцій.
Інтегрована підтримка мов програмування, таких як TypeScript, HTML та CSS,
дозволяла зручно розробляти клієнтську частину ресурсу без необхідності
встановлення додаткових розширень або інструментів.
Функціональні можливості «VS Code», такі як відладка, автодоповнення коду,
підказки та перегляд документації, значно полегшили процес написання коду та
відлагодження програмного забезпечення. Інтегрована система контролю версій Git
дозволила зручно керувати версіями коду та спільно працювати над проєктом у
команді.
Одним з ключових аспектів «VS Code» є його розширюваність. За допомогою
розширень, доступних у веб-магазині «VS Code», розробники можуть налаштувати
середовище розробки під свої потреби, додавши нові функціональні можливості та
інструменти [5].
Під час виконання кваліфікаційної роботи бакаларва виникли численні
моменти, для вирішення яких використовувася «Visual Studio Code». Середовище
значно полегшило процес створення онлайн-ресрсу.
«VS Code» надав підсвічування синтаксису для різних мов програмування,
таких як HTML, CSS, TypeScript тощо. Це допомогло легко розрізняти різні елементи
коду та швидше виявляти помилки.
«VS Code» автодоповнював код, що спростило процес написання коду.
Середовище має вбудований відладчик, який дозволив крок за кроком
відстежувати виконання програми та виявляти помилки. Це надзвичайно корисно при
вирішенні складних проблем у коді.
25
Однією з найбільших переваг «VS Code» виявилась його розширюваність. Вона
надає можливість встановлювати різноманітні розширення з магазину «VS Code», які
додають нові функціональні можливості та інструменти, такі як підтримка різних
фреймворків, шаблони коду, аналізатори та багато іншого [5].
«VS Code» легко інтегрувався з іншими інструментами розробки, такими як
редактори графічного інтерфейсу користувача (GUI), термінали, системи керування
пакетами та середовища віртуальних оточень.
Також допомогло те, що використане середовище підтримує розширені мови
програмування та технології, такі як TypeScript, Angular, React, Vue.js тощо. Також
має підтримку використання препроцесорів CSS, таких як Sass та Less, що робить
його ідеальним інструментом для веб-розробки.
Узагальнюючи вищевикладене, визначено, що використання «Visual Studio
Code» для розробки онлайн-ресурсу для замовлення комп'ютерної техніки дозволило
ефективно та зручно реалізовувати проєкт, що сприяло успішному завершенню
програмної реалізації.
Рисунок 2.1 – Середовище розробки Visual Studio Code [5]
26
2.2 Основні принципи розробки веб-ресурсів
Розробка веб-ресурсів базується на кількох ключових принципах, які
допомагають створити ефективні та функціональні додатки.
Клієнт-серверна архітектура: цей принцип передбачає розділення функцій
між клієнтською та серверною частинами ресурсу чи додатку. Клієнтська частина
відповідає за відображення інтерфейсу та взаємодію з користувачем, тоді як серверна
частина виконує бізнес-логіку та взаємодіє з базою даних.
Масштабованість та продуктивність: під час розробки веб-ресурсів важливо
враховувати можливість масштабування додатка для обробки більшої кількості
користувачів та підтримки великого обсягу даних. Це може бути досягнуто за
допомогою оптимізації коду, використання кешування та шкальованості
інфраструктури [6].
Безпека: забезпечення безпеки даних та захисту від зловмисників є однією з
найважливіших складових розробки веб-додатків. Це включає в себе захист від атак,
таких як крос-сайтовий скриптінг (XSS), впровадження SQL-запитів (SQL injection),
а також правильне управління доступом та аутентифікацією користувачів.
Використання сучасних технологій: розробка веб-ресурсів повинна
ґрунтуватися на сучасних технологіях та підходах, таких як використання
фреймворків та бібліотек для швидкої розробки, які сприяють реалізації
інтерактивних інтерфейсів та використання технік DevOps для автоматизації процесів
розгортання та тестування.
Респонсивний дизайн: у сучасних веб-ресурсах важливо мати респонсивний
дизайн, який забезпечує коректне відображення додатка на різних пристроях та
розмірах екранів, що забезпечує зручність користування для всіх користувачів [6].
Тестування та якість коду: принцип тестування дозволяє впевнитися в
стабільності та надійності веб-додатка. Важливо використовувати автоматизовані
тести для перевірки функціональності, щоб уникнути появи помилок у
продуктивному середовищі. Крім того, підтримка якості коду через стандартизацію,
27
рецензування та використання кращих практик, сприяє підтримці чистоти та
зрозумілості кодової бази.
Інтерактивність та користувацький досвід: важливо створювати веб-додатки
чи веб-ресурси, які надають користувачам інтерактивний та привабливий
корситувацький досвід (UX). Використання анімацій, переходів, візуальних ефектів
та динамічного оновлення сторінок допомагає залучити та утримати увагу
користувачів [6].
Розробка веб-ресурсів з дотриманням цих принципів дозволяє створювати
продуктивні, безпечні та ефективні додатки, які задовольняють потреби користувачів
та бізнесу.
2.3 Архітектура онлайн-ресурсу
Архітектура онлайн-ресурсу для замовлення комп'ютерної техніки базується на
розподіленій системі клієнт-сервер.
Рисунок 2.2 – Клієнт-серверна архітектура
28
Нижче наведено детальний опис архітектури з використанням вказаних
технологій.
Клієнтська частина реалізована за допомогою бібліотеки ReactJS для побудови
інтерфейсу користувача. Redux Toolkit використовується для управління станами
додатку та забезпечення передачі даних між компонентами.
Використання типізованих та власних «хуків» допомагає організувати та
перевикористовувати логіку в клієнтському коді.
Серверна частина реалізована за допомогою фреймворку ExpressJS на
платформі Node.js. ExpressJS забезпечує обробку запитів, маршрутизацію та
взаємодію з базою даних.
Для забезпечення безпеки автентифікації використовується пакет JWT (JSON
Web Tokens), який дозволяє створювати та перевіряти токени доступу [7].
Використання бібліотеки Mongoose спрощує взаємодію з базою даних
MongoDB, дозволяючи створювати моделі даних та виконувати операції CRUD [8].
Взаємодія між технологіями в архітектурі онлайн-ресурсу для замовлення
комп'ютерної техніки відбувається на різних рівнях та етапах розробки та
експлуатації.
Користувацький інтерфейс розроблений за допомогою ReactJS та Redux Toolkit,
взаємодіє з сервером через HTTP запити.
При запуску веб-ресурсу клієнтська частина надсилає запит на сервер для
отримання необхідних даних, наприклад, списку товарів чи користувачів.
Сервер розроблений на ExpressJS з використанням Mongoose для взаємодії з
базою даних MongoDB, яка, в свою чергу, обробляє цей запит та повертає відповідь з
необхідними даними.
Користувацький інтерфейс реагує на цю відповідь, оновлюючи вміст сторінок
відповідно до отриманих даних.
Під час автентифікації користувача клієнтська частина отримує «токен»
доступу від сервера після успішної перевірки облікових даних користувача.
Цей «токен», зазвичай, зберігається в локальному сховищі браузера або «куках»
та використовується для авторизації при подальших запитах до захищених ресурсів.
29
Сервер перевіряє дійсність «токену» та, надає доступ до ресурсу.
Redux Toolkit допомагає управляти станом додатку, зберігаючи дані про стан у
централізованому місці – Redux Store.
Компоненти React можуть взаємодіяти з Redux Store, отримуючи потрібні дані
та викликаючи дії (actions), які модифікують стан додатку.
При зміні стану Redux Store компоненти автоматично оновлюються,
відображаючи актуальний стан додатку користувачу.
Ця архітектура забезпечує розділення веб-додатку на логічні частини, які
спрощують розробку, тестування та підтримку системи. Вона дозволяє ефективно
використовувати можливості клієнтської та серверної частин, забезпечуючи високий
рівень безпеки, швидкодії та зручності для користувачів.
2.4 Розробка діаграми варіантів використання
Діаграма варіантів використання (Use Case Diagram) є важливим інструментом
в аналізі та проєктуванні ПЗ. Вона використовується для візуалізації функціональних
вимог до онлайн-ресурсу для замовлення комп'ютерної техніки та взаємодії між її
компонентами й зовнішніми акторами.
В розробленій діаграмі варіантів використання враховані ролі двох основних
акторів: користувач (User) та адміністратор (Admin). Нижче наведено опис їх
можливостей:
User (Користувач):
Реєстрація користувача: користувач має можливість створити обліковий запис
на онлайн-ресурсі, введенням особистих даних та обранням унікального
ідентифікатора та пароля.
Перегляд товарів: після входу в обліковий запис, користувач може переглядати
доступний асортимент комп'ютерної техніки.
Детальний огляд товарів: користувач може детальніше ознайомитися з описом
та характеристиками конкретного товару.
30
Додавання товарів до корзини та замовлення: користувач може додавати
товари до корзини та оформляти замовлення, вказуючи необхідні дані для доставки й
оплати.
Admin (Адміністратор):
Перегляд оформлених замовлень: адміністратор має можливість переглядати
список оформлених замовлень, їх статус та деталі.
Додавання товарів в базу даних: адміністратор може додавати нові товари до
каталогу, вказуючи їх опис, характеристики та ціну.
Отже, розроблена діаграма варіантів використання (рис. 2.3) стала важливим
інструментом при проєктуванні розроблюваного програмного забезпечення, яка
допомагла забезпечити успішне виконання проєкту онлайн-ресурсу для замовлення
комп'ютерної техніки.
Рисунок 2.3 – Діаграма варіантів використання
2.5 Проєктування структури бази даних
Під час розробки онлайн-ресурсу для замовлення комп'ютерної техніки, для
зберігання даних використовувалася NoSQL база даних MongoDB. MongoDB є
31
документ-орієнтованою базою даних, яка дозволяє зберігати дані у вигляді
документів у форматі JSON.
MongoDB – це документ-орієнтована база даних, яка використовує модель
даних у вигляді документів у форматі JSON (JavaScript Object Notation).
MongoDB дозволяє зберігати документи з різними структурами в одній
колекції. Це означає, що кожен документ може містити різні поля, що робить його
ідеальним вибором для проєктів з непередбачуваними або змінними вимогами до
даних [8].
СКБД підтримує горизонтальне масштабування шляхом розподілу даних по
декількох серверах. Це дозволяє обробляти великі обсяги даних та забезпечує високу
доступність системи.
MongoDB надає розширений мовний запитовий інтерфейс, що дозволяє
виконувати різноманітні запити до бази даних, включаючи запити на основі
текстового пошуку, агрегаційні запити та інші.
Використовувана СКБД підтримує різноманітні типи індексів, включаючи одно
та багато-складні індекси, що дозволяє оптимізувати швидкість виконання запитів.
Вбудована реплікація та шардування: MongoDB має вбудовану підтримку
реплікації для забезпечення високої доступності та надійності даних. Також вона
підтримує шардування для розподілу навантаження на декілька серверів.
Інтеграція з різними мовами програмування: MongoDB має офіційні драйвери
для багатьох популярних мов програмування, що робить її легкоінтегрованою у
різноманітні додатки.
При проєктуванні було вирішено використовувати бібліотеку Mongoose для
моделювання даних MongoDB.
Mongoose спрощує роботу з MongoDB, дозволяючи використовувати схеми та
моделі для визначення структури документів та їх взаємозв'язків. Вона також надає
вбудовані методи для валідації даних, обробки хешування паролів та інші корисні
функції [9].
Завдяки Mongoose, розробники можуть легко створювати та керувати даними в
MongoDB, що робить їх роботу ефективнішою та продуктивнішою.
32
Наступник кроком створено моделі «Product», «User» «Cart».
Модель «Product» описує продукти, які доступні для замовлення. У ній є такі
поля, як imgLink (посилання на зображення), name (назва продукту), price (ціна), seller
(продавець), desc (опис) і inStock (кількість товару на складі).
Модель «User» описує користувачів системи. У ній зберігаються дані про
користувачів, їхні замовлення, список бажань та інші пов'язані дані.
Модель «Cart» визначає структуру кошика, який зберігає інформацію про
товари, що додані до корзини користувача.
Кожен елемент кошика містить productId – ідентифікатор продукту (з
посиланням на модель Product) та quantity – кількість одиниць товару.
В Додатку Г представлено: загальну структуру БД; таблицю товарів магазину;
таблицю користувачів магазину.
2.6 Опис процесу проєктування структури онлайн-ресурсу для замовлення
комп’ютерної техніки
У процесі проєктування структури онлайн-ресурсу для замовлення
комп'ютерної техніки ретельно вивчається весь цикл взаємодії користувачів з
додатком. Нижче наведено опис кожного з етапів.
Процес реєстрації користувача в онлайн-ресурсі:
Користувач заповнює форму реєстрації, вводячи особисті дані, такі як ім'я,
прізвище, електронну пошту та пароль.
Система перевіряє введені дані на валідність та унікальність.
Якщо дані коректні, користувач створює обліковий запис та отримує
підтвердження про успішну реєстрацію.
Процес авторизації користувача в онлайн-ресурсі:
Користувач вводить свої облікові дані (електронну пошту та пароль) у форму
авторизації.
Система перевіряє введені дані та перевіряє їх збіг з обліковими записами у базі
даних.
33
При успішній перевірці, користувач отримує доступ до особистого кабінету.
Процес використання інформації:
Після авторизації, користувач може переглядати товари, шукати певні моделі
комп'ютерної техніки та ознайомлюватися з їх характеристиками.
Користувач може додавати товари до кошика, та оформлювати замовлення.
Процес створення замовлення продуктів харчування:
Після вибору необхідних товарів, користувач переходить до оформлення
замовлення.
Він вводить свою адресу доставки та обирає спосіб оплати.
Після підтвердження замовлення, система автоматично формує замовлення та
відправляє його на обробку.
В Додатку Д наведено розроблені діаграми процесів замовлення товарів та
підтвердження замовлення адміністратором (менеджером).
2.7 Проєктування інтерфейсу користувача
Під час розробки онлайн-ресурсу для замовлення комп’ютерної техінки велика
увага приділялася проєктуванню інтерфейсу користувача (UI) та користувацького
досвіду (UX), щоб забезпечити зручність, естетичність та задоволення від
використання платформи для кожного користувача.
Інтерфейс онлайн-ресурсу ретельно продуманий, щоб забезпечити зрозумілу та
інтуїтивно зрозумілу навігацію для користувачів. Меню розташоване логічно, а
пошукова функція допомагає швидко знаходити потрібні товари. Структура сторінок
категорій логічна та систематизована, що спрощує процес пошуку товарів.
Дизайн інтерфейсу онлайн-ресурсу надається з особливою увагою до деталей.
Колірна палітра та шрифти підібрані гармонійно, щоб створити приємне візуальне
сприйняття. Фотографії товарів якісні та привабливі, що підвищує інтерес
користувачів до продукції. Особлива увага приділялася адаптивному дизайну. Веб-
сторінка адаптована для різних розмірів екрану та пристроїв, що дозволяє
34
користувачам отримувати доступ до ресурсу з будь-якого пристрою зручно та без
затримок.
Процес оформлення замовлення товарів є простим та зрозумілим. Користувачі
легко можуть додати товари до кошика та оформити замовлення дуже швидко, що
сприяє зручності та швидкості процесу покупки.
Для розробки інтерфейсу користувача (UI) та забезпечення зручного
користувацького досвіду (UX) для онлайн-ресурсу для продажу комп’ютерної
техніки був використаний наявний інтерфейс, що базується на шаблонному UX
інтерфейсі. Цей підхід дозволив забезпечити високу якість та консистентність
інтерфейсу для користувачів, забезпечуючи при цьому ефективний та зручний
користувацький досвід.
Одним з ключових аспектів використання наявного інтерфейсу для розробки
UX було його вже перевірене використання в реальних умовах. Шаблонний інтерфейс
вже мав велику кількість відгуків користувачів та був оптимізований для
забезпечення зручності використання. Використання такого інтерфейсу дозволило
уникнути витрат часу та зусиль на розробку з нуля, а також забезпечило б більшу
ймовірність успіху на ринку.
Розробка на основі шаблонного UX інтерфейсу також дозволила значно
збільшити швидкість розробки. Замість витрачання часу на розробку кожного
елемента інтерфейсу окремо, було використано готові компоненти та рішення, що
вже були наявні в шаблоні.
Крім того, використання наявного інтерфейсу дозволило забезпечити
консистентність та єдність дизайну. Усі елементи інтерфейсу, від кнопок до форм,
мали однаковий стиль та вигляд, що дозволяло користувачам легко орієнтуватися на
сайті та використовувати його без зайвих ускладнень.
Розробка на основі шаблонного інтерфейсу також дозволила використовувати
кращі практики UX та дизайну. Враховуючи те, що шаблонний інтерфейс вже був
створений з врахуванням найкращих стандартів та практик UX/UI дизайну, виникла
можливість використовувати ці знання та досвід для покращення користувацького
досвіду на своєму ресурсі.
35
Таким чином, використання наявного інтерфейсу для розробки UX на онлайн-
ресурсі було важливим кроком для забезпечення успішного впровадження та
задоволення потреб користувачів.
Використання React для верстки інтерфейсу користувача (UI) було важливим
кроком у забезпеченні високої якості та ефективності веб-додатку. React – це потужна
бібліотека JavaScript, яка дозволяє створювати динамічні та інтерактивні інтерфейси
з використанням компонентного підходу [10].
Одною з головних переваг використання React є його компонентна архітектура.
React дозволяє розбити інтерфейс на невеликі, самостійні компоненти, які можуть
бути повторно використані у різних частинах додатку. Це полегшує розробку,
тестування та підтримку коду, а також забезпечує консистентність та ефективність
розробки.
Ще однією перевагою React є використання віртуального DOM (Document
Object Model). React використовує віртуальний DOM для оптимізації швидкодії
рендерингу і оновлення сторінки, що дозволяє підтримувати високу продуктивність
навіть у складних додатках з великою кількістю елементів [10].
Крім того, React надає багато корисних інструментів та бібліотек для розробки,
таких як Redux для управління станом додатку, React Router для навігації між
сторінками, та багато інших. Ці інструменти дозволяють створювати потужні та
функціональні додатки зі зручним та привабливим інтерфейсом.
Ще однією перевагою React є широка спільнота розробників та велика кількість
доступних ресурсів для навчання та підтримки. Це робить React популярним вибором
для розробки веб-додатків будь-якої складності.
Нижче на рисунку 2.6 наведено протототип розробленого користувацького
інтерфейсу онлайн-ресурсу для замовлення комп’ютерної техінки.
36
Рисунок 2.6 – Інтерфейс користувача онлайн-ресурсу для замовлення комп’ютерної
техінки
Висновки до розділу 2
В даному розділі було проведено проєктування онлайн-ресурсу для замовлення
комп’ютерної техніки.
Використане програмне середовище, а саме Visual Studio Code, забезпечило
ефективну та комфортну розробку додатку. Гнучкість та можливості налаштування
цього середовища дозволили нам швидко та ефективно розробляти нові функції та
виправляти помилки.
Основні принципи розробки веб-додатків були повністю дотримані.
Використання принципів компонентної архітектури дозволило створити добре
структурований та легко розширюваний код. Використання бібліотек та інструментів,
таких як React, Redux та TypeScript, сприяло створенню ефективного та сучасного
веб-додатку.
Архітектура веб-додатку була ретельно розроблена з метою забезпечення
ефективної та стабільної роботи. Frontend та Backend компоненти взаємодіють між
собою з високою швидкістю та безпекою. Використання JWT для автентифікації та
37
Mongoose для взаємодії з базою даних дозволило нам створити надійний та безпечний
сервіс для користувачів.
Діаграма варіантів використання відображає всі основні функції та можливості,
доступні для користувачів та адміністраторів. Це дозволило чітко визначити вимоги
та очікування користувачів і підтримувати відповідність функціональності веб-
додатку.
Проєктування структури бази даних було проведено з урахуванням всіх вимог
та потреб користувачів. Використання MongoDB дозволило створити гнучку та
ефективну базу даних, яка відповідає вимогам проєкту та забезпечує зручний доступ
до інформації.
Процес проєктування структури онлайн-ресурсу був проведений з великою
увагою до деталей та вимог користувачів. Всі аспекти додатку були ретельно
пророблені та оптимізовані з метою забезпечення максимальної ефективності та
зручності для користувачів.
Проєктування інтерфейсу користувача було проведено з використанням
існуючих шаблонів та компонентів для забезпечення зручної та привабливої взаємодії
з додатком. Використання React дозволило створити динамічний та ефективний
інтерфейс, який забезпечує зручну навігацію та взаємодію з користувачами.
38
3 ПРОГРАМНА РЕАЛІЗАЦІЯ
3.1 Постановка завдання
Завданням кваліфікаційної роботи бакалавра є стоврення онлайн-ресурсу для
замовлення комп’ютерної техніки.
Середовище розробки було обрано з урахуванням потреб розробки онлайн-
ресурсу для замовлення комп’ютерної техінки. Для розробки клієнтської частини
використовувався «Visual Studio Code», надійний та потужний редактор коду, що
забезпечує швидку та зручну розробку веб-додатків. Для серверної частини ми
використовували Node.js, що дозволяє писати код на TypeScript, та Express.js, який є
надійним фреймворком для побудови веб-додатків.
Основною мовою програмування для розробки клієнтської частини булa
TypeScript з використанням бібліотеки React.js. TypeScript є однією з
найпоширеніших мов програмування для веб-розробки, а React.js забезпечує швидку
та ефективну розробку динамічних інтерфейсів [10]. Для розробки серверної частини
також використовувався TypeScript з використанням фреймворку Node.js та
Express.js.
Основними завданнями програмної реалізації є:
Розробка клієнтської та серверної частини онлайн-ресурсу.
Реалізація функціональності автентифікації та авторизації користувачів.
Розробка інтерфейсу користувача, що забезпечує зручну та інтуїтивно
зрозумілу навігацію.
Взаємодія з базою даних для збереження та отримання інформації про товари,
користувачів та замовлення.
Розробка функціоналу додавання товарів до кошика та оформлення
замовлення.
Для кращого розуміння структури програмного рішення, нижче наведений
список класів (рис. 3.1) діаграма класів для клієнтської (рис. 3.2) та серверної частини
додатку (рис. 3.3).
39
Рисунок 3.1 – Список класів програмного продукту
40
Рисунок 3.2 – Діаграма класів клієнтської частини
41
Рисунок 3.3 – Діаграма класів серверної частини
42
3.2 Інтерфейс онлайн-ресурсу для замовлення комп’ютерної техніки
Під час розробки інтерфейсу онлайн-ресурсу для замовлення комп`ютерної
техніки використовувався фреймворк React, що забезпечив ефективну та зручну
розробку динамічних інтерфейсів. Інтерфейс складається з набору компонентів,
кожен з яких відповідає за певну функціональність або елемент візуального
представлення.
Основні компоненти, які використовуються для відображення меню магазину
та продуктів, розташовані в директорії src/components та мають розширення .tsx,
оскільки розробка компонентів відбувалася на мові TypeScript. Це забезпечує
перевагу статичної типізації та ряд інших переваг, таких як виявлення помилок на
етапі розробки та полегшення рефакторингу коду.
Компоненти інтерфейсу розділяються на кілька категорій відповідно до їхньої
функціональності.
Header Component відображає заголовок додатку та основне меню навігації,
таке як пошукове поле та кнопки для переходу до різних розділів ресурсу.
Footer Component відповідає за відображення нижньої частини інтерфейсу, де
зазвичай містяться посилання на сторінки ресурсу, контактна інформація та інші
корисні посилання. Цей компонент допомагає забезпечити зручну навігацію для
користувачів та підвищує загальний рівень зручності використання ресурсу.
NavBar Component відображає верхню панель навігації, де розміщені основні
елементи керування та пошук. Цей компонент забезпечує користувачам зручний
доступ до різних розділів додатку та дозволяє швидко знаходити потрібні ресурси.
Index Component є головною сторінкою ресурсу, де користувач може
переглянути основний контент, такий як пропозиції дня, нові надходження або
рекомендації. Цей компонент має велике значення для першого враження
користувача від ресурсу та допомагає привернути увагу до актуальних пропозицій.
Search Component надає можливість швидко знаходити потрібні продукти за
допомогою пошукового поля. Користувач може ввести ключові слова або фрази, і
43
компонент відобразить відповідні результати, спрощуючи процес знаходження
потрібного товару.
ItemCheckout Component відображає окремий товар у кошику користувача під
час оформлення замовлення. Він містить інформацію про товар, його ціну, кількість
та загальну вартість. Цей компонент дозволяє користувачам переглядати та управляти
товарами у своєму кошику перед оформленням замовлення.
ComposableModal Component використовується для створення модальних вікон,
що з'являються на сторінці за певних умов або дій користувача. Він містить
різноманітну інформацію, наприклад, підтвердження дій, додаткові налаштування
тощо. Цей компонент допомагає забезпечити інтерактивність та зручність
користування онлайн-ресурсом.
Рисунок 3.4 – Компоненти програмної реалізації
3.3 Програмна реалізація онлайн-ресурсу для замовлення комп’ютерної
техніки
В програмній реалізації онлайн-ресурсу для онлайн-ресурсу для замовлення
комп’ютерної техніки використоувється розділення проєкту на дві директорії,
44
frontend і backend. Таке рішення було прийнято для структурованості та організації
коду. Даний підхід дозволяє чітко визначити відповідальність кожної частини
проєкту: frontend відповідає за відображення інтерфейсу користувача, а backend – за
обробку запитів та взаємодію з базою даних.
У директорії frontend знаходиться весь код, пов'язаний з відображенням
сторінок, компонентів та ресурсів, необхідних для користувача. Тут розміщуються
файли TypeScript, CSS і HTML, які відповідають за відображення та інтерактивність
веб-сторінок. Також у цій директорії розташовані файли для взаємодії з сервером, які
включають в себе запити до API та обробку отриманих даних.
У директорії backend знаходиться весь код, пов'язаний з обробкою запитів від
клієнтської частини та взаємодією з базою даних. Тут використовується мова
програмування TypeScript, для створення та налаштування серверу, обробки запитів
та відправлення відповідей. Також у цій директорії розміщені файли, пов'язані з
конфігурацією сервера та роботою з базою даних.
Для взаємодії між клієнтом та сервером використовується REST API. Це
дозволяє забезпечити ефективну та стандартизовану комунікацію між різними
частинами нашого проєкту. Крім того, REST API дозволяє легко розширювати та
модифікувати функціонал розробленого онлайн-ресурсу шляхом додавання нових
ендпоінтів або зміни вже існуючих [11].
Рисунок 3.5 – Візуалізація RestAPI
45
Для реалізації CRUD було створено директорію «api» в клієнтській частині
онлайн-ресурсу. Ця директорія зберігає всі класи, які відповідають за запити до
серверу та отримання інформації з нього.
Директорія api, створена в клієнтській частині онлайн-ресурсу, відіграє
ключову роль у реалізації CRUD (створення, читання, оновлення, видалення)
операцій. Ця директорія містить класи, які відповідають за взаємодію з сервером,
надсилаючи запити та оброблюючи отримані відповіді.
У програмній реалізації проєкту директорія api містить такі класи:
AuthApi: відповідає за взаємодію з сервером у справах аутентифікації та
авторизації користувачів. В ньому реалізовані методи для реєстрації нових
користувачів (register), входу в онлайн-ресурс (login), виходу з нього (logout) та
отримання даних про поточного користувача (getCurrentUser).
CartApi: відповідає за взаємодію з сервером у справах керування кошиком
користувача. В ньому реалізовані методи для додавання товарів до кошика
(addToCart), видалення товарів з кошика (removeFromCart), отримання списку товарів
у кошику (getCartItems) та оновлення кількості товарів у кошику (updateCartItem).
OrderApi: відповідає за взаємодію з сервером у справах керування
замовленнями користувача. В ньому реалізовані методи для створення нового
замовлення (createOrder), отримання списку замовлень користувача (getUserOrders),
отримання деталей про конкретне замовлення (getOrderDetails) та скасування
замовлення (cancelOrder).
ProductApi: відповідає за взаємодію з сервером у справах керування
продуктами в магазині. В ньому реалізовані методи для отримання списку всіх
продуктів (getAllProducts), отримання деталей про конкретний продукт
(getProductDetails), пошуку продуктів за певними критеріями (searchProducts) та
оновлення даних про продукт (updateProduct).
Routes: відповідає за визначення шляхів (routes), які доступні у клієнтській
частині онлайн-ресурсу. Він встановлює відповідність між URL-адресами та
компонентами, які відповідають за їх відображення.
Нижче наведено зображення класу CartApi (рис. 3.6).
46
Рисунок 3.6 – Клас CartApi.tsx
На серверній частині було створено директорію routes, в якій розміщені класи
для направлення запитів в відповідний контроллер. Контроллери виконують задачу
обробки запитів та відправки відповіді на клієнт.
В директорії routes на сервері знаходяться класи, які відповідають за
направлення запитів до відповідних контролерів. Контролери в свою чергу
відповідають за обробку цих запитів і відправку відповіді назад на клієнт.
Кожен файл у цій директорії представляє окремий маршрут, який клієнт може
викликати. Ці маршрути визначають, які дії може виконувати клієнт та які дані він
може отримати або надіслати на сервер.
Таким чином, коли клієнт надсилає запит на сервер, він спочатку пройде через
відповідний маршрут у файлі routes, який направить його до відповідного контролера.
Контроллер обробляє запит, виконує необхідні операції (наприклад, вибірка даних з
бази даних) і повертає відповідь на клієнт. Цей підхід допомагає розділити логіку
додатку на більш менш самостійні частини, що полегшує розробку, тестування та
розширення коду.
Нижче на рисунах наведено програмну реалізацію маршрутів (рис. 3.7) та
контроллерів (рис. 3.8).
47
Рисунок 3.7 – Програмна реалізація маршрутів
Рисунок 3.8 – Програмна реалізація контроллерів
48
Для роботи з базою даних на сервері була використана бібліотека Mongoose.
Одним з ключових переваг використання Mongoose є те, що вона надає
об'єктно-реляційну проєкцію (ORM) для роботи з MongoDB. Це означає, що можливо
визначати моделі даних у вигляді класів TypeScript і працювати з ними,
використовуючи стандартні об'єкти та методи, які використовуються в розробці з
використанням Node.js [9].
Рисунок 3.9 – Використання ORM для відображення об’єктів бази даних
49
3.4 Особливості тестування онлайн-ресурсу
Тестування веб-додатків або онлайн-ресурсів є критичним етапом розробки,
оскільки воно дозволяє виявити помилки та проблеми перед впровадженням
продукту в експлуатацію. В програмній реалізації використано різні методи
тестування, щоб забезпечити високу якість і надійність розробленого онлайн-ресурсу.
Також застосовувались основні аспекти тестування онлайн-ресурсу, включаючи
функціональне тестування, тестування інтеграції, тестування взаємодії та
автоматизоване тестування.
Функціональне тестування – це процес перевірки функціональності ресурсу,
щоб переконатися, що він працює згідно з очікуваннями та відповідає вимогам
специфікації. У розробленому онлайн-ресурсі виконували функціональне тестування
для кожної функції та компоненту, щоб переконатися, що вони працюють належним
чином та задовольняють потреби користувачів. Використано різні техніки
тестування, такі як: чорного ящика, білого ящика та взаємодії [12].
Тестування інтеграції полягає в перевірці взаємодії між різними компонентами
та модулями програмного забезпечення для переконання, що вони працюють
правильно разом. У програмній реалізації виконано тестування інтеграції для
переконання, що всі компоненти взаємодіють між собою без проблем та конфліктів.
Перевірено правильність передачі даних між компонентами, коректність обробки
запитів та відповідей, а також забезпечено сумісність між версіями програмного
забезпечення.
Тестування взаємодії включає в себе перевірку взаємодії користувача з онлайн-
ресурсом для переконання, що всі функції працюють правильно та зручно для
користувача. Виконано тестування взаємодії для переконання, що всі елементи
інтерфейсу користувача працюють належним чином, а також для перевірки
швидкості та продуктивності додатку під час взаємодії з користувачем.
Автоматизоване тестування – це процес виконання тестів за допомогою
спеціальних програмних засобів та скриптів без прямого втручання користувача. У
програмній реалізації використано автоматизоване тестування для автоматизації
50
процесу тестування та забезпечення швидкої зміни та відлагодження програмного
забезпечення. Використано різні інструменти для автоматизованого тестування, такі
як Jest, Puppeteer, Selenium та інші, для переконання, що наш веб-додаток працює без
помилок та проблем на різних платформах та пристроях [13].
Загалом, тестування онлайн-ресурсу в даному проєкті відіграє важливу роль для
забезпечення високої якості та надійності програмного забезпечення, а також задля
задоволення потреб користувачів. При цьому використано різні методи та
інструменти тестування для переконання, що розроблений онлайн-ресурс працює
належним чином і забезпечує високу продуктивність та ефективність.
3.5 Тестування онлайн-ресурсу для замовлення комп’ютерної техніки
Першим кроком у процесі тестування було ретельне обдумування вимог до
продукту та функціональних можливостей. На цьому етапі було визначено обсяг
тестування, визначено основні функції, які потрібно протестувати, а також створено
тестову документацію та план тестування.
Рисунок 3.10 – План тестування онлай-ресурсу
51
Першим етапом тестування було тестування функціональності ресурсу.
Виконано широкий спектр тестів, включаючи перевірку реєстрації та входу в онлайн-
ресурс, додавання товарів у кошик, оформлення замовлення, перегляд інформації про
товари, тощо. З’явилось переконання, що кожна функція працює правильно та
забезпечує зручну та безперебійну взаємодію з користувачем.
Наступним етапом було тестування сумісності та продуктивності.
Перевірено, як онлайн-ресурс працює на різних браузерах (Google Chrome, Mozilla
Firefox, Microsoft Edge, Safari) та пристроях (комп'ютери, планшети, смартфони).
Також проведено тестування швидкості завантаження сторінок та часу відповіді
сервера, щоб переконатися, що онлайн-ресурс працює швидко та ефективно.
Оскільки безпека є одним з найважливіших аспектів онлайн-ресурсу, проведено
широке тестування безпеки. Є переконання, що всі дані передаються по захищеному
каналу, всі персональні дані користувачів зашифровані, а також виконано тестування
на вразливості, щоб уникнути можливих атак з боку зловмисників. Використано
Pentest Tools.
Рисунок 3.11 – Тестування онлайн-ресурсу
52
Також було вирішено виконати тестування бази даних, перевірити правильність
зберігання даних, ефективність запитів та забезпечення консистентності даних.
Виявилося, що база даних працює стабільно та надійно.
Після завершення всіх етапів тестування було зібрано та проаналізовано всі
отримані результати. Виявлені помилки та проблеми були виправлені, а вже
протестований продукт готовий до впровадження та використання користувачами.
Тестування відіграло ключову роль у забезпеченні високої якості та надійності
онлайн-ресурсу для замовлення комп'ютерної техніки.
Висновки до розділу 3
Під час прогамної реалізації було розроблено та реалізовано всі компоненти,
необхідні для створення повноцінного онлайн-ресурсу. Завдяки використанню
сучасних технологій та методологій розробки, забезпечено високу якість,
продуктивність і безпеку продукту.
У ході програмної реалізації враховано всі вимоги до функціональності та
забезпечено їхнє виконання. Розроблено як клієнтську, так і серверну частини
програмного забезпечення, які ефективно співпрацюють між собою через REST API.
Важливим аспектом було також тестування, яке дозволило виявити і виправити
потенційні проблеми та помилки перед впровадженням продукту.
Використання технологій, таких як React, Node.js, Express та MongoDB,
дозволило створити швидкий, надійний та легко розширюваний веб-додаток. Крім
того, вдосконалено UX/UI інтерфейс для забезпечення максимальної зручності
користувачів під час використання ресурсу.
В цілому, програмна реалізація виявилася успішною та відповідає всім
вимогам, що ставилися до проєкту.
53
ВИСНОВКИ
Мета кваліфікаційної роботи бакалавра – створення онлайн-ресурсу для
замовлення комп’ютерної техніки.
Для досягнення мети в кваліфікаційній роботі бакалавра виконано такі
завдання:
дослідження предметної області;
застосування методу порівняння аналогів вже існуючих онлайн-ресурсів для
замовлення комп'ютерної техніки;
визначення стеку сучасних технологій для програмної реалізації онлайн-
ресурсу;
реалізація бази даних онлайн-ресурсу;
розробка онлайн-ресурсу, його відлагодження, тестування та впровадження.
Мета кваліфікаційної роботи бакалавра досягнута. Під час виконання
спроєктовано та розроблено онлайн-ресурс для замовлення комп’ютерної техніки.
У рамках кваліфікаціїної роботи була розглянута актуальна проблематика
замовлення комп’ютерної техніки через онлайн-ресурси, проведений аналіз існуючих
платформ та їхніх недоліків, визначені основні вимоги до створюваного додатку.
Проведено ретельне дослідження предметної області, визначено ключові
функціональні вимоги та обрано оптимальні технології для його реалізації.
Програмна реалізація включала в себе створення як клієнтської, так і серверної
частини програмного забезпечення, їхню взаємодію за допомогою прикладного
програмного інтерфейсу, а також розробку інтерфейсу користувача з використанням
сучасних технологій веб-розробки. Приділена особлива увагу тестуванню, що
дозволило забезпечити високу якість та надійність нашого продукту.
Розроблений онлайн-ресурс є потужним інструментом для замовлення
комп'ютерної техніки, який поєднує в собі сучасний дизайн, ефективну
функціональність та високий рівень безпеки.
Проєкт, розроблений у рамках кваліфікаційної роботи бакалавра, є не лише
демонстрацією технічних знань та навичок у галузі веб-розробки і програмування, але
54
й представляє значний внесок у сферу електронної комерції. Проєкт допоможе
покращити взаємодію шляхом надання зручного та інтуїтивно зрозумілого
інтерфейсу для клієнтів. Користувачі можуть легко шукати товари, робити
замовлення та оплачувати їх, що сприяє покращенню їхнього досвіду покупок.
Завдяки широкому вибору товарів та зручному процесу замовлення, компанії можуть
привертати більше клієнтів та підвищувати свій прибуток.
У цілому, розроблюваний проєкт має значимий вплив на практичні завдання
електронної комерції, забезпечуючи зручність, безпеку та ефективність взаємодії між
покупцями та продавцями в онлайн-середовищі.
55
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Платформа «Amazon». URL: https://amazon.com (дата звернення: 21.02.2024).
2. «Best Buy Official Online Store». URL: https://www.bestbuy.com/ (дата звернення:
27.02.2024).
3. «F.ua – Онлайн-гіпермаркет». URL: https://www.f.ua/ (дата звернення:
1.02.2024).
4. Visual Studio Code. URL: https://en.wikipedia.org/wiki/Visual_Studio_Code/ (дата
звернення: 21.02.2024).
5. 12 Web Application Development Principles To Be Followed in 2024. URL:
https://mobidev.biz/blog/web-application-development-principles (дата звернення:
21.02.2024).
6. Express.js. URL: https://expressjs.com/ (дата звернення: 17.03.2024).
7. MongoDB. URL: https://www.mongodb.com/ (дата звернення: 17.03.2024).
8. MongoDB. URL: https://mongoosejs.com/ (дата звернення: 17.03.2024).
9. React – A JavaScript library for building user interfaces. React. URL:
https://reactjs.org/ (дата звернення: 17.03.2024).
10. TypeScript. URL: https://www.typescriptlang.org/ (дата звернення: 28.03.2024).
11. TypeScript. URL: https://en.wikipedia.org/wiki/REST (дата звернення: 28.03.2024).
12. Functional Testing. URL: https://en.wikipedia.org/wiki/Functional_testing (дата
звернення: 15.04.2024).
13. Testing Library. URL: https://testing-library.com/ (дата звернення: 15.04.2024).
56
ДОДАТОК А
Затверджую
Зав. кафедри КНСА,
______________ Юрій ТРИУС
«____»____________2024 р.
ОНЛАЙН-РЕСУРС ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ ТЕХНІКИ
Специфікація
482.ЧДТУ. 42031-01
Листів 2
Розробник ____________________ Лукій М.О.
Керівник ____________________ Оксамитна Л.П.
Черкаси – 2024
57
482.ЧДТУ. 42031-01
Позначення Найменування Примітка
Документація
482.ЧДТУ. 42031-01 12 01 Текст програми
482.ЧДТУ. 42031-01 34 01 Інструкція користувача
482.ЧДТУ. 42031-01 90 01 Структура бази даних
482.ЧДТУ. 42031-01 90 02 Діаграми процесів
замовлення товарів та
підтвердження замовлення
адміністратором
(менеджером)
58
ДОДАТОК Б
ОНЛАЙН-РЕСУРС ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ ТЕХНІКИ
Текст програми
482.ЧДТУ. 42031-01 12 01
Листів 16
Розробник _____________ Лукій М.О.
Черкаси – 2024
59
authController.ts
import { NextFunction, Request, Response } from "express";
import { StatusCodes } from "http-status-codes";
import { genAccessToken } from "../utils/jwt";
import User from "../models/userModel";
import * as CustomErrors from "../errors";
import asyncWrapper from "../utils/asyncWrapper";
export const loginController = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const { email, password } = _req.body;
if (!email || !password)
return _next(
new CustomErrors.BadRequestError("Please provide email and password")
);
const user = await User.findOne({ email: email });
if (!user)
return _next(
new CustomErrors.NotFoundError("Invalid email or user does not exist")
);
// passwords match, return access token and refresh token
if (await user.comparePassword(password, _next)) {
const accessToken = genAccessToken(user);
_res.status(StatusCodes.OK).json({
name: user.name,
email: user.email,
accessToken: accessToken,
});
// passwords do not match
} else {
return _next(new CustomErrors.UnauthorizedError("Invalid password"));
}
}
);
export const registerController = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
if (!_req.body.name || !_req.body.email || !_req.body.password)
return _next(
new CustomErrors.BadRequestError("Please provide all required fields")
);
let user = await User.findOne({
email: _req.body.email,
});
if (user)
return _next(new CustomErrors.BadRequestError("User already exists"));
else {
user = await User.create(_req.body);
const accessToken = genAccessToken(user);
_res
.status(StatusCodes.CREATED)
.json({ name: user.name, email: user.email, accessToken: accessToken });
}
}
60
);
export const logoutController = asyncWrapper(
async (_req: Request, _res: Response) => {
_res.status(StatusCodes.OK).json(_req.body);
}
);
cartController.ts
import { NextFunction, Request, Response } from "express";
import { StatusCodes } from "http-status-codes";
import UserModel from "../models/userModel";
import ProductModel from "../models/productModel";
import * as CustomError from "../errors/";
import asyncWrapper from "../utils/asyncWrapper";
import calculateTotal from "../utils/calculateTotal";
export const getUserCart = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const user = await UserModel.findById(_req.user);
if (!user) return _next(new CustomError.NotFoundError("User not found"));
_res
.status(StatusCodes.OK)
.json({ cart: user.cart, ...calculateTotal(user.cartTotal) });
}
);
export const addUserCart = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const user = await UserModel.findById(_req.user);
const product = await ProductModel.findById(_req.body.product).select(
"price"
);
if (!product)
return _next(new CustomError.NotFoundError("Product not found"));
if (!user) return _next(new CustomError.NotFoundError("User not found"));
// add product to cart
user.cart.push(_req.body);
// add product price to cart total
user.cartTotal += product.price! * _req.body.amount;
await user.save();
_res.status(StatusCodes.CREATED).json(calculateTotal(user.cartTotal));
}
);
export const patchUserCart = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const userId = _req.user;
const productId = _req.params.prod_id;
let user = await UserModel.findById(userId);
const productInfo = await ProductModel.findById(productId).select("price");
if (!productInfo)
return _next(new CustomError.NotFoundError("Product not found"));
if (!user) return _next(new CustomError.NotFoundError("User not found"));
61
// update product in cart
const product = user.cart.find((item) => item.product.equals(productId));
if (!product)
return _next(new CustomError.NotFoundError("Product not found in cart"));
const prevAmount = product.amount;
product.amount = _req.body.amount;
user.cartTotal += (product.amount - prevAmount) * productInfo.price!;
user = await user.save();
_res.status(StatusCodes.OK).json(calculateTotal(user.cartTotal));
}
);
export const deleteUserCart = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const userId = _req.user;
const productId = _req.params.prod_id;
let user = await UserModel.findById(userId);
const product = await ProductModel.findById(productId).select("price");
if (!product)
return _next(new CustomError.NotFoundError("Product not found"));
if (!user) return _next(new CustomError.NotFoundError("User not found"));
// delete product from cart
const index = user.cart.findIndex((item) => item.product.equals(productId));
user.cartTotal -= product.price! * user.cart[index].amount;
user.cart.splice(index, 1);
user = await user.save();
_res.status(StatusCodes.OK).json(calculateTotal(user.cartTotal));
}
);
productController.ts
import { NextFunction, Request, Response } from "express";
import { StatusCodes } from "http-status-codes";
import ProductModel from "../models/productModel";
import asyncWrapper from "../utils/asyncWrapper";
export const getProduct = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const product = await ProductModel.findOne({ _id: _req.params.id });
_res.status(StatusCodes.OK).json(product);
}
);
export const getAllProducts = asyncWrapper(
async (_req: Request, _res: Response, _next: NextFunction) => {
const products = await ProductModel.find();
_res.status(StatusCodes.OK).json(products);
}
);
cartSchema.ts
import mongoose from "mongoose";
const CartSchema = new mongoose.Schema(
{
62
product: {
type: mongoose.Schema.Types.ObjectId,
ref: "Product",
required: true,
},
amount: {
type: Number,
default: 0,
},
},
{ _id: false }
);
export default CartSchema;
orderSchema.ts
import mongoose from "mongoose";
const OrderItemSchema = new mongoose.Schema(
{
imgLink: String,
name: String,
price: Number,
seller: String,
desc: String,
quantity: Number,
},
{ _id: false }
);
const PaymentSchema = new mongoose.Schema(
{
transactionId: String,
subtotal: Number,
tax: Number,
shippingCost: Number,
total: Number,
},
{ _id: false }
);
const ShippingDetails = new mongoose.Schema(
{
firstName: { type: String, required: true },
lastName: { type: String, required: true },
address: { type: String, required: true },
city: String,
state: String,
zip: { type: String, required: true },
country: { type: String, required: true },
phone: { type: Number, required: true },
},
{ _id: false }
);
const OrderSchema = new mongoose.Schema(
{
shippingDetails: ShippingDetails,
63
orderItems: [OrderItemSchema],
payment: PaymentSchema,
},
{ timestamps: true }
);
export default OrderSchema;
productModel.ts
import mongoose from "mongoose";
export interface ProductType {
imgLink: string;
name: string;
price: number;
seller: string;
desc: string;
inStock: number;
}
const ProductSchema = new mongoose.Schema({
imgLink: String,
name: String,
price: Number,
seller: String,
desc: String,
inStock: Number,
});
export default mongoose.model("Product", ProductSchema);
userModel.ts
import mongoose, { Document, Model } from "mongoose";
import bcrypt from "bcrypt";
import CartSchema from "./schema/cartSchema";
import WishlistSchema from "./schema/wishlistSchema";
import OrderSchema from "./schema/orderSchema";
import { NextFunction } from "express";
// Type definitions for typescript
export interface UserDocument extends Document {
name: string;
email: string;
password: string;
cart: mongoose.Types.Array<any>;
cartTotal: number;
wishlist: mongoose.Types.Array<any>;
orders: mongoose.Types.Array<any>;
role: string;
comparePassword: (
candidatePassword: string,
next: NextFunction
) => Promise<boolean>;
}
export interface UserModel extends Model<UserDocument> {}
64
const userSchema = new mongoose.Schema({
name: {
type: String,
required: [true, "Please provide a name"],
trim: true,
maxlength: [50, "Name cannot be more than 50 characters"],
},
email: {
type: String,
required: [true, "Please provide an email"],
trim: true,
unique: true,
},
password: {
type: String,
required: [true, "Please provide a password"],
minlength: [6, "Password must be at least 6 characters"],
},
// user permissions
role: {
type: String,
enum: ["user", "admin"],
default: "user",
},
// embed cart, wishlist, and order schemas
cart: {
type: [CartSchema],
default: [],
},
cartTotal: {
type: Number,
default: 0,
},
orders: {
type: [OrderSchema],
default: [],
},
wishlist: {
type: [WishlistSchema],
default: [],
},
});
// Save hashed passwords to database
userSchema.pre("save", async function () {
const user = this;
if (!user.isModified("password")) return;
const salt = await bcrypt.genSalt(10);
const hash = await bcrypt.hash(user.password, salt);
user.password = hash;
});
// utility function to compare passwords
userSchema.methods.comparePassword = async function (
candidatePassword: string,
next: NextFunction
) {
return await bcrypt.compare(candidatePassword, this.password).catch(next);
};
65
const User = mongoose.model<UserDocument, UserModel>("User", userSchema);
export default User;
authRoutes.ts
import express from "express";
import {
loginController,
logoutController,
registerController,
} from "../controllers/authControllers";
import * as CustomError from "../errors";
export const authRouter = express.Router();
authRouter.post("/login", loginController);
authRouter.post("/register", registerController);
authRouter.post("/logout", logoutController);
// fallback route
authRouter.use((_req, _res, _next) => {
_next(new CustomError.ForbiddenError("Only POST requests are allowed"));
});
userRoutes.ts
import express from "express";
import { authenticateToken } from "../middleware/authenticateToken";
import {
getUserInfo,
patchUser,
deleteUser,
} from "../controllers/userControllers";
import {
getUserCart,
addUserCart,
patchUserCart,
deleteUserCart,
} from "../controllers/cartControllers";
import {
getUserOrders,
addUserOrder,
getUserOrder,
deleteUserOrder,
} from "../controllers/orderControllers";
export const userRouter = express.Router();
// User Routes //
// NOTE: User create route is not needed because it is handled by authRoutes
userRouter
.route("/profile")
.get(authenticateToken, getUserInfo)
.patch(authenticateToken, patchUser)
66
.delete(authenticateToken, deleteUser);
// Cart Routes //
userRouter
.route("/cart")
.get(authenticateToken, getUserCart)
.post(authenticateToken, addUserCart);
userRouter
.route("/cart/:prod_id")
.patch(authenticateToken, patchUserCart)
.delete(authenticateToken, deleteUserCart);
// Order Routes //
userRouter
.route("/orders")
.get(authenticateToken, getUserOrders)
.post(authenticateToken, addUserOrder);
userRouter
.route("/orders/:order_id")
.get(authenticateToken, getUserOrder)
.delete(authenticateToken, deleteUserOrder);
asyncWrapper.ts
import { Request, Response, NextFunction } from "express";
import mongoose from "mongoose";
import * as CustomError from "../errors/";
type Callback = (
_req: Request,
_res: Response,
_next: NextFunction
) => Promise<void>;
// Generate a wrapper function that executes the callback function
// safely and handles any errors that may occur
const asyncWrapper =
(callback: Callback): Callback =>
async (_req: Request, _res: Response, _next: NextFunction): Promise<void> => {
try {
await callback(_req, _res, _next);
} catch (error: any) {
if (error instanceof mongoose.Error.CastError) {
_next(new CustomError.BadRequestError("Invalid user id"));
}
_next(
new CustomError.InternalServerError(
`Something went wrong ${error.message}`
)
);
}
};
export default asyncWrapper;
authenticateToken.ts
import { NextFunction, Request, Response } from "express";
import jwt from "jsonwebtoken";
67
import env from "../utils/environment";
import * as CustomError from "../errors";
export const authenticateToken = (
_req: Request,
_res: Response,
_next: NextFunction
) => {
const authHeader = _req.headers["authorization"];
const token = authHeader && authHeader.split(" ")[1];
if (token == null)
throw new CustomError.UnauthorizedError("No token provided");
jwt.verify(token, env.ACCESS_TOKEN_SECRET, (err, user: any) => {
if (err) throw new CustomError.UnauthorizedError(err.message);
_req.user = user.userId;
_next();
});
};
AuthApi.ts
import axios from "axios";
import { resolve } from "../utils/Resolve";
import { AUTHURL, USERSURL } from "../api/Routes";
export const login = async (email: string, password: string): Promise<any> => {
const [error, response] = await resolve(
axios.post(`${AUTHURL}/login`, { email, password })
);
if (error) {
throw error;
}
return response.data;
};
export const register = async (
name: string,
email: string,
password: string
): Promise<any> => {
const [error, response] = await resolve(
axios.post(`${AUTHURL}/register`, { name, email, password })
);
if (error) {
throw error;
}
return response.data;
};
export const logout = async (): Promise<any> => {
const [error, response] = await resolve(axios.post(`${AUTHURL}/logout`));
if (error) {
throw error;
}
return response.data;
68
};
export const getUserInfo = async (accessToken: string): Promise<any> => {
const [error, response] = await resolve(
axios.get(`${USERSURL}/profile`, {
headers: {
authorization: `Bearer ${accessToken}`,
},
})
);
if (error) {
throw error;
}
return response.data;
};
CartApi.ts
import axios from "axios";
import { resolve } from "../utils/Resolve";
import { USERSURL } from "../api/Routes";
const CARTURL = USERSURL + "/cart";
export const addToCart = async (
productId: string,
amount: number,
accessToken: string
): Promise<any> => {
const [error, response] = await resolve(
axios.post(
`${CARTURL}/`,
{ product: productId, amount: amount },
{
headers: {
authorization: `Bearer ${accessToken}`,
},
}
)
);
if (error) {
throw error;
}
return response.data;
};
export const updateCart = async (
productId: string,
amount: number,
accessToken: string
): Promise<any> => {
const [error, response] = await resolve(
axios.patch(
`${CARTURL}/${productId}`,
{ amount: amount },
{
headers: {
authorization: `Bearer ${accessToken}`,
69
},
}
)
);
if (error) {
throw error;
}
return response.data;
};
export const removeFromCart = async (
productId: string,
accessToken: string
): Promise<any> => {
const [error, response] = await resolve(
axios.delete(`${CARTURL}/${productId}`, {
headers: {
authorization: `Bearer ${accessToken}`,
},
})
);
if (error) {
throw error;
}
return response.data;
};
export const getCart = async (accessToken: string): Promise<any> => {
const [error, response] = await resolve(
axios.get(`${CARTURL}`, {
headers: {
authorization: `Bearer ${accessToken}`,
},
})
);
if (error) {
throw error;
}
const cartArr = response.data.cart;
// convert cart array to an object with id as key
const cartObj = cartArr.reduce((map: any, cart: any) => {
map[cart.product] = cart.amount;
return map;
}, {});
return {
...response.data,
cart: cartObj,
};
};
OrderApi.ts
import axios from "axios";
import { resolve } from "../utils/Resolve";
import { USERSURL } from "../api/Routes";
import { ShippingDetails } from "../state/features/orders/orderTypes";
const ORDERURL = USERSURL + "/orders";
70
export const getOrders = async (accessToken: string): Promise<any> => {
const [error, response] = await resolve(
axios.get(ORDERURL, {
headers: {
authorization: `Bearer ${accessToken}`,
},
})
);
if (error) {
throw error;
}
return response.data;
};
export const createOrder = async (
accessToken: string,
shippingDetails: ShippingDetails
): Promise<any> => {
const [error, response] = await resolve(
axios.post(ORDERURL, shippingDetails, {
headers: {
authorization: `Bearer ${accessToken}`,
},
})
);
if (error) {
throw error;
}
return response.data;
};
ProductApi.ts
import axios from "axios";
import { resolve } from "../utils/Resolve";
import { PRODUCTURL } from "../api/Routes";
import { Product } from "../models/Product";
export const getAllProducts = async (): Promise<any> => {
const [error, response] = await resolve(axios.get(PRODUCTURL));
if (error) {
throw error;
}
const productsArr: Product[] = response.data;
// convert the products array to an object with id as key
const productsObj = productsArr.reduce((map: any, product: Product) => {
map[product._id] = product;
return map;
}, {});
return productsObj;
};
export const getProduct = async (id: string): Promise<any> => {
const [error, response] = await resolve(axios.get(`${PRODUCTURL}/${id}`));
if (error) {
throw error;
}
71
return response.data;
};
Product.ts
// Product details to be fetched from backend
export interface Product {
_id: string;
imgLink: string;
name: string;
price: number;
seller: string;
desc: string;
inStock: number;
amount?: number;
isWishlisted?: boolean;
}
// Converts JSON strings to/from Product arrays
export class Convert {
public static toProducts(json: string): Product[] {
return JSON.parse(json);
}
public static productsToJson(value: Product[]): string {
return JSON.stringify(value);
}
}
PopupModals.tsx
// Design:
https://i.pinimg.com/originals/91/41/8e/91418e228e42282dece83b4041a9a2a0.png
import ReactDom from "react-dom";
import { RxCross2 } from "react-icons/rx";
import checkimg from "../../assets/check.png";
import infoimg from "../../assets/information.png";
import errorimg from "../../assets/error_cross.png";
type Props = {
title?: string;
isOpen: boolean;
text: string;
onClose: CallableFunction;
};
// Generate modals for different types
// All use the same design
// IMPORTANT: Tailwind cannot deduce partial class names sent as arguments, and
// removes them from final bundle, safe to use inline styling
const _generateModal = (
initialTitle: string,
image: string,
buttonColor: string,
bgColor: string = "white",
textColor: string = "rgb(55 65 81)",
buttonText: string = "Continue"
) => {
return ({ title = initialTitle, text, isOpen, onClose }: Props) => {
72
if (!isOpen) return null;
return ReactDom.createPortal(
<div className="fixed inset-0 z-50 bg-black bg-opacity-80">
<div className="flex h-full flex-col items-center justify-center">
<div
className="relative flex h-1/2 w-min flex-col items-center justify-
evenly rounded-xl p-9 sm:w-1/2 md:w-1/3 lg:w-1/4"
style={{ color: textColor, backgroundColor: bgColor }}
>
<RxCross2
className="absolute top-0 right-0 mr-5 mt-5 cursor-pointer text-2xl"
onClick={() => onClose()}
/>
<h1 className="text-center text-3xl font-thin">{title}</h1>
<h3 className="text-center text-xl font-light tracking-wider opacity-
80">
{text}
</h3>
<img src={image} alt="modal image" className="w-1/2 sm:w-1/4" />
<button
onClick={() => onClose()}
className="rounded-full px-16 py-2 text-xl text-white"
style={{ backgroundColor: buttonColor }}
>
{buttonText}
</button>
</div>
</div>
</div>,
document.getElementById("modal-root") as HTMLElement
);
};
};
export const SuccessModal = _generateModal(
"Success!",
checkimg,
"rgb(21 128 61)" // green-700
);
export const InfoModal = _generateModal(
"Hey there!",
infoimg,
"rgb(59 130 246)" // blue-500
);
export const ErrorModal = _generateModal(
"Face-plant!",
errorimg,
"rgb(190 18 60)", // rose-700
"rgb(225 29 72)", // rose-600
"rgb(229 231 235)", // gray-200
"Try Again"
);
App.tsx
import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Navbar from "./components/Navbar";
73
import Footer from "./components/Footer";
import ScrollToTop from "./components/ScrollToTop";
import SignIn from "./pages/SignIn";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import SignUp from "./pages/SignUp";
import NoPage from "./pages/NoPage";
import Checkout from "./pages/Checkout";
import Cart from "./pages/Cart";
import Orders from "./pages/Orders";
import Profile from "./pages/Profile";
import { useAppDispatch, useAppSelector } from "./hooks/useReduxHooks";
import { getCartApi, clearCart } from "./state/features/cart/cartSlice";
import { getOrdersApi, clearOrders } from "./state/features/orders/orderSlice";
import { getProducts } from "./state/features/products/productSlice";
import { loadLoginInfo } from "./state/features/login/loginSlice";
function App() {
const [isLoggedIn, accessToken] = useAppSelector((state) => [
state.login.isLoggedIn,
state.login.accessToken,
]);
const dispatch = useAppDispatch();
React.useEffect(() => {
dispatch(getProducts());
dispatch(loadLoginInfo())
.unwrap()
.then(() => {
if (accessToken) {
dispatch(getCartApi(accessToken));
dispatch(getOrdersApi(accessToken));
}
})
.catch(() => {
dispatch(clearCart());
dispatch(clearOrders());
});
}, [isLoggedIn]);
74
ДОДАТОК В
ОНЛАЙН-РЕСУРС ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ ТЕХНІКИ
ІНСТРУКЦІЯ КОРИСТУВАЧА
482. ЧДТУ. 42031-01 34 01
Листів 5
Розробник _____________ Лукій М.О.
Черкаси – 2024
75
В розробленому онлайн-ресурсі для замовлення комп’ютерної техніки
користувач на головній сторінці може бачити список товарів магазину.
На рис. В.1 представлено головну сторінку онлайн-ресурсу для замовлення
комп’ютерної техніки.
Рисунок В.1 – Головна сторінка онлайн-ресурсу
Для замовлення товарів користувач повинен зареєструватися. Після заповнення
всіх потрібних потрібних полів, користувач натискає кнопку «Register» (рис. В.2.)
Рисунок В.2 – Сторінка «Реєстрації користувача»
76
Наступним кроком користувач повинен увійти до створеного облікового
запису, заповниши поля: «E-Mail» та «Password» (рис. В.3).
Рисунок В.3 – Сторінка входу в обліковий запис
Після входу до облікового запису, користувач може переглядати товар, його
опис, має змогу бачити продавця товару та кількість товару в наявності (рис. В.4).
Рисунок В.4 – Перегляд товару користувачем
77
Наступни кроком користувач може додати товар до кошику, натиснувши
кнопку «Add to cart». Далі користувач зможе переглянути кошик та список товарів
для замовлення (рис. В.5).
Рисунок В.5 – Сторінка «Кошик»
Після натиснення кнопки «Checkout» користувач побачить сторінку з
оформленням замовлення. На ній користувач повинен заповнити всі необхідні поля
та натиснути кнопку «Checkout» для успішного оформлення замовлення (рис. В.6).
Рисунок В.6 – Сторінка оформлення замовлення
78
Якщо оформлення замовлення пройшло успішно, користувач побачить
відповідне повідомлення (рис. В.7).
Рисунок В.7 – Повідомлення про успішно оформлене замовлення
В ососбистому кабінеті користувач може переглянути список, створених ним,
замовлень (рис. В.8) та інформацію про обліковий запис (рис. В.9).
Рисунок В.8 – Список замовлень користувача
79
Рисунок В.9 – Інформація про обліковий запис
Також користувач має змогу скористатися сторінкою «Contact», на якій
розміщени контакти магазину та форма зворотнього зв’язкуз менеджером (рис. В.10).
Рисунок В.10 – Сторінка з контактною інформацією
80
ДОДАТОК Г
ОНЛАЙН-РЕСУРС ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ ТЕХНІКИ
Структура бази даних
482. ЧДТУ. 42031-01 90 01
Листів 3
Розробник _____________ Лукій М.О.
Черкаси – 2024
81
Рисунок Г.1 – Структура бази даних
Рисунок Г.2 – Таблиця користувачів в базі даних
82
Рисунок Г.3 – Таблиця товарів в базі даних
83
ДОДАТОК Д
ОНЛАЙН-РЕСУРС ДЛЯ ЗАМОВЛЕННЯ КОМП’ЮТЕРНОЇ ТЕХНІКИ
Діаграми процесів замовлення товарів та підтвердження замовлення
адміністратором (менеджером)
482. ЧДТУ. 42031-01 90 02
Листів 2
Розробник _____________ Лукій М.О.
Черкаси – 2024
84
Рисунок Д.1 – Діаграма процесу замовлення товару
85
Рисунок Д.2 – Діаграма процесу підтвердження замовлення адміністратором