Користувацька частина WEB-ресурсу з продажу комп’ютерної техніки

Хрієнко, Владислав Юрійович

Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/5466

Title:	Користувацька частина WEB-ресурсу з продажу комп’ютерної техніки
Authors:	Рудницький, Сергій Володимирович Хрієнко, Владислав Юрійович
Keywords:	веб-ресурси;Angular;розробка;користувацька частина;веб-додатки
Issue Date:	14-Jun-2023
Abstract:	У сучасному світі електронна комерція займає все більш вагоме місце, надаючи людям можливість здійснювати покупки та продажі в Інтернеті зручно і швидко. Одним з найпопулярніших сегментів електронної комерції є продаж комп'ютерної техніки. Зростання популярності комп'ютерів та інших технологічних пристроїв створює необхідність для розвитку веб-ресурсів, які забезпечують зручну та ефективну покупку комп'ютерної техніки. Ця кваліфікаційна робота бакалавра присвячена проектуванню та розробці користувацької частини веб-ресурсу «CompShop» для продажу комп'ютерної техніки. У цьому проекті використовується технологія Angular, яка є однією з найпотужніших та найпопулярніших платформ для розробки веб-додатків. Основна мета даної роботи полягає у створенні зручного та інтуїтивно зрозумілого інтерфейсу, який дозволить користувачам швидко знайти необхідні продукти, отримати інформацію про них та здійснити покупку відповідно до їхніх потреб. Для досягнення цієї мети було використано Angular, з його допомогою реалізовано набір функціональних можливостей, які покращують користувацький досвід та забезпечують зручну навігацію по ресурсу. У цій роботі будуть розглянуті основні принципи проектування та розробки користувацької частини веб-ресурсу, використання Angular для створення функціональності та взаємодії з серверною частиною, а також будуть представлені результати тестування та оцінка продуктивності розробленого веб-ресурсу.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/5466
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Files in This Item:

File	Description	Size	Format
РЕП_БАК_Хрієнко_WebC-2111.pdf Restricted Access	Користувацька частина WEB-ресурсу з продажу комп’ютерної техніки	2.96 MB	Adobe PDF	View/Open Request a copy

Show full item record

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ

ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Користувацька частина WEB-ресурсу з продажу комп’ютерної техніки»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WebС-2111
Спеціальності 126 Інформаційні системи
та технології
ОП «Web-технології, Web-дизайн»
Хрієнко Владислав Юрійович
Керівник: к.т.н. доцент кафедри ІПТ
Рудницький Сергій Володимирович
Рецензент: к.т.н., доцент кафедри техніки
та засобів цивільного захисту Черкаський
інститут пожежної безпеки імені Героїв
Чорнобиля Національного університету
цивільного захисту України Мельник
Руслан Павлович
Черкаси 2023

ЗМІСТ

ВСТУП .............................................................................................................................. 4
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ ................ 6
1.1 Аналіз предметної області .................................................................................... 6
1.2 Огляд існуючих аналогів і їх порівняння ............................................................ 8
1.3 Постановка задачі ................................................................................................ 19
Висновки до розділу 1 ............................................................................................... 19
РОЗДІЛ 2. ПРОЕКТУВАННЯ FRONTEND ЧАСТИНИ ВЕБ РЕСУРСУ ............... 21
2.1 Аналіз та вибір програмних засобів ................................................................... 21
2.2 Аналіз і вибір фреймворків ................................................................................. 27
2.3 Проектування структури сайту та зв’язку між сторінками ............................. 30
2.4 Проектування структури та наповнення сторінок сайту ................................. 32
Висновки до розділу 2 ............................................................................................... 38
РОЗДІЛ 3. РЕАЛІЗАЦІЯ WEB-РЕСУРСУ ................................................................. 39
3.1 Розробка дизайну ................................................................................................. 39
3.2 Реалізація фронтенду користувацької частини ................................................. 43
3.3 Реалізація фронтенду адмінської частини ......................................................... 49
Висновки до розділу 3 ............................................................................................... 51
ВИСНОВКИ ................................................................................................................... 52
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ..................................................................... 54
ДОДАТОК А .................................................................................................................. 56
ДОДАТОК Б ................................................................................................................... 58

СПИСОК СКОРОЧЕНЬ ТА УМОВНИХ ПОЗНАЧЕНЬ
ПЗ – програмне забезпечення.
ООП – Об’єктно-орієнтоване програмування.
HTML – HyperText Markup Language – Мова розмітки гіпертексту.
CSS – Cascading Style Sheets – Каскадні таблиці стилів.
Валідація – процедура, що дає високий ступінь впевненості в тому, що конкретний
процес, метод або система буде послідовно приводити до результатів, які
відповідають заздалегідь установленим критеріям прийнятності.
IDE – Integrated development environment – Інтегроване середовище розробки.
JSON – JavaScript Object Notation – запис об'єктів JavaScript
SPA – Single Page Applications, також відомий, як односторінковий інтерфейс.
DOM – Document Object Model – об'єктна модель документа.
API – Application Programming Interface – Прикладний програмний інтерфейс.

Лист
ЧДТУ 232232.005 ПЗ
3
Зм Арк. № докум. Пiдпис. Дата
нт

ВСТУП

У сучасному світі електронна комерція займає все більш вагоме місце, надаючи
людям можливість здійснювати покупки та продажі в Інтернеті зручно і швидко.
Одним з найпопулярніших сегментів електронної комерції є продаж комп'ютерної
техніки. Зростання популярності комп'ютерів та інших технологічних пристроїв
створює необхідність для розвитку веб-ресурсів, які забезпечують зручну та
ефективну покупку комп'ютерної техніки.
Ця кваліфікаційна робота бакалавра присвячена проектуванню та розробці
користувацької частини веб-ресурсу «CompShop» для продажу комп'ютерної техніки.
У цьому проекті використовується технологія Angular, яка є однією з найпотужніших
та найпопулярніших платформ для розробки веб-додатків.
Основна мета даної роботи полягає у створенні зручного та інтуїтивно
зрозумілого інтерфейсу, який дозволить користувачам швидко знайти необхідні
продукти, отримати інформацію про них та здійснити покупку відповідно до їхніх
потреб. Для досягнення цієї мети було використано Angular, з його допомогою
реалізовано набір функціональних можливостей, які покращують користувацький
досвід та забезпечують зручну навігацію по ресурсу.
У цій роботі будуть розглянуті основні принципи проектування та розробки
користувацької частини веб-ресурсу, використання Angular для створення
функціональності та взаємодії з серверною частиною, а також будуть представлені
результати тестування та оцінка продуктивності розробленого веб-ресурсу.
Для досягнення поставленої мети в кваліфікаційній роботі бакалавра треба
виконати наступні завдання:
 аналіз предметної області;
 огляд існуючих аналогів і їх порівняння;
 постановка задачі;
 аналіз та вибір програмних засобів;
 аналіз і вибір фреймворків;
Лист
ЧДТУ 232232.005 ПЗ
4
Зм Арк. № докум. Пiдпис. Дата
нт

 проектування структури сайту та зв’язку між сторінками;
 проектування структури та наповнення сторінок сайту;
 розробка дизайну;
 реалізація фронтенду користувацької частини;
 реалізація фронтенду адмінської частини.
Результати цієї роботи можуть бути корисними для розробників веб-додатків,
особливо тих, які працюють у сфері електронної комерції та продажу комп'ютерної
техніки. Окрім того, вони можуть використовуватися в освітніх закладах для
навчання студентів з проектування та розробки веб-додатків з використанням
Angular.
Отже, дана кваліфікаційна робота бакалавра пропонує глибоке дослідження та
практичне застосування технології Angular для проектування та розробки
користувацької частини різноманітних веб-ресурсів.

Лист
ЧДТУ 232232.005 ПЗ
5
Зм Арк. № докум. Пiдпис. Дата
нт

РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ АНАЛОГІВ

1.1 Аналіз предметної області

Проектування та розробка користувацької частини WEB-ресурсу для продажу
комп'ютерної техніки є важливим завданням, оскільки в сучасному світі електронна
комерція набуває все більшої популярності. Цей проект передбачає створення
зручного та привабливого інтерфейсу для покупців, що дозволить їм здійснювати
покупки комп'ютерної техніки з легкістю і задоволенням.
Електронна комерція, також відома як e-commerce, є процесом купівлі та
продажу товарів та послуг через Інтернет. Це широке поняття, яке охоплює
різноманітні види бізнесу, включаючи продаж комп'ютерної техніки [1].
Продаж комп'ютерної техніки через e-commerce має декілька переваг порівняно
з традиційними каналами продажу. Ось деякі з них:
− Глобальний доступ: електронна комерція дозволяє підприємствам
розширити свої ринки та досягти клієнтів по всьому світу. Вони можуть пропонувати
свою комп'ютерну техніку споживачам з будь-якого місця, де є доступ до Інтернету.
− Зручність для клієнтів: покупці можуть здійснювати покупки комп'ютерної
техніки зручно зі своєї домівки або офісу. Вони можуть шукати товари, порівнювати
ціни та здійснювати покупки в будь-який зручний для них час.
− Більший асортимент товарів: в електронній комерції компанії можуть
пропонувати широкий асортимент комп'ютерної техніки, включаючи різні бренди,
моделі та конфігурації. Клієнти мають більше варіантів вибору і можуть знайти саме
те, що вони шукають.
− Знижені витрати: для бізнесу електронна комерція може бути вигідною з
точки зору витрат. Вони можуть уникнути витрат на оренду фізичного магазину та
оплату зарплат працівникам. Крім того, вони можуть ефективно управляти запасами
та зменшити витрати на логістику.
Лист
ЧДТУ 232232.005 ПЗ
6
Зм Арк. № докум. Пiдпис. Дата
нт

− Можливість персоналізації та маркетингу: електронна комерція надає
можливості для персоналізації пропозицій та маркетингових акцій для клієнтів. За
допомогою збору даних про покупців та їхніх покупок, компанії можуть створювати
індивідуальні рекомендації та пропозиції, що сприяє збільшенню продажів.
Продаж комп'ютерної техніки в електронній комерції також пов'язаний з
викликами, з якими стикаються підприємства. Деякі з них включають:
− Конкуренція: ринок комп'ютерної техніки в електронній комерції досить
конкурентний, і компаніям потрібно залучати клієнтів та створювати конкурентні
переваги, наприклад, надання якісного обслуговування або вигідних цін.
− Безпека: оскільки в електронній комерції передаються особисті дані та
здійснюються онлайн-платежі, безпека є критичним аспектом. Підприємства повинні
забезпечити захист від шахрайства та зловмисного використання даних клієнтів.
− Служба підтримки клієнтів: ефективна підтримка клієнтів є важливою у
електронній комерції. Клієнти повинні мати можливість отримати відповіді на свої
запитання та вирішити проблеми швидко та ефективно.
Враховуючи ці фактори, підприємства, які продають комп'ютерну техніку,
повинні ретельно планувати та реалізовувати свою стратегію електронної комерції,
забезпечуючи високу якість продуктів, безпеку та задоволення клієнтів.
Для проектування та розробки користувацької частини WEB-ресурсу існує
широкий спектр технологій. Деякі з популярних технологій, що використовуються
для розробки веб-інтерфейсів, включають HTML, CSS, JavaScript, PHP, Python, Ruby,
і багато інших. Крім того, фреймворки та бібліотеки, такі як React, Angular, Vue.js,
Laravel, Django і Ruby on Rails, можуть бути використані для прискорення розробки
та покращення функціональності.
При аналізі властивостей та технічних рішень слід звернути увагу на такі
аспекти:
− Ефективність та продуктивність: обраний рішення повинно забезпечувати
швидку та ефективну роботу веб-ресурсу навіть при великому навантаженні.
− Масштабованість: система повинна бути здатна легко масштабуватися для
впорядкування зростаючого обсягу даних та користувацького трафіку.
Лист
ЧДТУ 232232.005 ПЗ
7
Зм Арк. № докум. Пiдпис. Дата
нт

− Безпека: веб-ресурс повинен мати надійні механізми захисту даних
користувачів та операцій з платежами.
− Зручність використання: інтерфейс повинен бути інтуїтивно зрозумілим,
зручним для навігації та привабливим для користувачів.
Для розробки користувацької частини WEB-ресурсу можна розглядати різні
аналоги та базові варіанти, що вже наявні на ринку. Наприклад, можна розглянути
використання готових платформ для електронної комерції, таких як Shopify,
WooCommerce, Magento або OpenCart. Ці платформи надають широкий функціонал
та можуть бути налаштовані під конкретні потреби проекту [2].
Крім цього, потрібно розглянути фреймворки для самостійного створення веб-
сайтів.
Конкретні питання, що повинні бути вирішені у кваліфікаційній роботі:
− Вибір оптимальної технології чи платформи для розробки користувацької
частини WEB-ресурсу «CompShop».
− Аналіз та вибір необхідного функціоналу, який повинен бути реалізований
на веб-ресурсі.
− Проектування зручного та привабливого інтерфейсу для покупців.
− Розробка механізмів для забезпечення безпеки та конфіденційності даних
користувачів.
− Оптимізація продуктивності та масштабованості системи.
Вирішення цих питань у цій роботі дозволить технічно обгрунтувати проект та
розробити ефективну користувацьку частину WEB-ресурсу «CompShop» для
продажу комп'ютерної техніки.

1.2 Огляд існуючих аналогів і їх порівняння

Brain.com.ua (рисунок 1.1) – відомий український інтернет-магазин, який
спеціалізується на продажу комп'ютерної техніки, електроніки та комплектуючих.
Ресурс пропонує широкий вибір товарів в таких категоріях, як ноутбуки, комп'ютери,
монітори, смартфони, планшети, принтери, аксесуари та багато іншого [3].
Лист
ЧДТУ 232232.005 ПЗ
8
Зм Арк. № докум. Пiдпис. Дата
нт

Магазин відомий своєю репутацією надійного продавця, який пропонує як
оригінальну техніку, так і відомі бренди. Вони співпрацюють з провідними
виробниками, такими як Apple, Lenovo, HP, Samsung та інші, щоб забезпечити
широкий вибір продукції для своїх клієнтів.
Сайт магазину надає користувачам зручну інтерфейс, де вони можуть легко
знайти необхідний товар, переглянути його характеристики та ціни, порівняти різні
моделі та зробити замовлення онлайн. Також ресурс надає інформацію про
гарантійний та сервісний обслуговування, а також можливість отримання
консультації від фахівців. Brain є відомим і популярним магазином серед споживачів
в Україні і надає можливість придбати якісну комп'ютерну техніку та електроніку з
доставкою по всій країні.

Рисунок 1.1 – Головна сторінка сайту «brain.com.ua»

Лист
ЧДТУ 232232.005 ПЗ
9
Зм Арк. № докум. Пiдпис. Дата
нт

Функціонал:
− Каталог товарів: користувачі можуть переглядати товари в різних
категоріях, включаючи ноутбуки, комп'ютери, монітори, смартфони, планшети та
інші.
− Для зручності покупців, сайт може мати пошукову функцію, що дозволяє
знайти конкретний товар за назвою, моделлю або характеристиками. Крім того,
можуть бути доступні фільтри, щоб обмежити результати пошуку за брендом, ціною,
рейтингом тощо.
− Кожен товар може мати свою окрему сторінку з детальною інформацією
(рисунок 1.2), включаючи фотографії, опис, технічні характеристики, відгуки
покупців та інші важливі дані.
− Користувачі можуть додавати товари до кошика, переглядати його вміст,
вибирати кількість товарів та оформляти замовлення. Веб-ресурс може надати
можливість вибору варіантів доставки, способів оплати та введення контактних даних
для оформлення замовлення.
− Можливість реєстрації та входу на сайт дозволяє користувачам зберігати
свої дані, переглядати історію замовлень, додавати відгуки та користуватися іншими
функціями.
Недоліки та переваги:
− Можливість помилок в описах товарів, неповну або некоректну інформацію
про ціни, обмежену наявність товарів на складі або можливість затримок у доставці.
− Широкий вибір товарів, конкурентоспроможні ціни, можливість отримати
гарантію та сервісне обслуговування, зручну систему пошуку та оформлення
замовлення.
Лист
ЧДТУ 232232.005 ПЗ
10
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 1.2 – Сторінка товару на сайті «brain.com.ua»

Compx.ua (рисунок 1.3) – український інтернет-магазин, спеціалізований на
продажу комп'ютерної техніки та електроніки. Сайт надає можливість клієнтам
придбати різноманітні товари, такі як ноутбуки, комп'ютери, монітори, принтери,
смартфони, планшети, аксесуари та багато іншого [4].
Веб-ресурс пропонує широкий вибір товарів у різних категоріях. Клієнти
можуть шукати продукти за брендом, типом, ціною, характеристиками тощо.
Кожен товар має окрему сторінку з фотографіями, описом, технічними
характеристиками та відгуками покупців. Це допомагає клієнтам зробити
обґрунтований вибір перед покупкою.
Користувачі можуть додавати товари до кошика, переглядати його вміст та
оформлювати замовлення онлайн. Зазвичай, сайт надає різні способи оплати та
доставки для зручності клієнтів.
Магазин має систему реєстрації та особистого облікового запису, де
користувачі можуть зберігати свої особисті дані, переглядати історію замовлень,
відстежувати статус доставки тощо.
Лист
ЧДТУ 232232.005 ПЗ
11
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 1.3 – Сторінка магазину «compx.ua»

Серед товарів, які можуть бути продаються на "Compx.ua", можна знайти:
− Ноутбуки і комп'ютери: в асортименті можуть бути різні моделі ноутбуків
та настільних комп'ютерів різних брендів і конфігурацій.
− Широкий вибір смартфонів та планшетів різних виробників, які працюють
на різних операційних системах.
− Монітори різних розмірів та характеристик, а також клавіатури, миші,
принтери, сканери та інші периферійні пристрої.
− Різноманітні комплектуючі для комп'ютерів, такі як процесори, материнські
плати, оперативна пам'ять, жорсткі диски, відеокарти та інші.
− Також доступні різні аксесуари для комп'ютерів і гаджетів, включаючи
кабелі, адаптери, чохли, наушники та інші.
Сторінка товару представлена на рисунок 1.4. Сайт практично є ідеальним.
Лист
ЧДТУ 232232.005 ПЗ
12
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 1.4 – Сторінка товару в магазині «compx.ua»

Kvshop.com.ua є веб-ресурсом, який спеціалізується на продажі комп'ютерної
техніки та електроніки. Сайт надає можливість клієнтам замовляти товари онлайн та
отримувати їх доставку [5].
Сайт пропонує широкий вибір комп'ютерної техніки, включаючи ноутбуки,
комп'ютери, планшети, монітори, принтери, периферійні пристрої та аксесуари.
Кожен товар супроводжений детальним описом, фотографіями та технічними
характеристиками, що допомагають клієнтам отримати повну інформацію про
продукт перед покупкою.
Клієнти можуть обрати бажаний товар, додати його до кошика та оформити
замовлення онлайн. Зазвичай, це включає заповнення форми з контактними даними,
вибір способу доставки та оплати.
Сайт може пропонувати різні варіанти доставки, включаючи кур'єрську
доставку або відвідування пункту самовивозу. Інформація про вартість та терміни
доставки можуть бути вказані на сайті.
Оплата: сайт може приймати різні способи оплати, такі як оплата готівкою при
отриманні, оплата банківською картою або електронними платіжними системами.
Лист
ЧДТУ 232232.005 ПЗ
13
Зм Арк. № докум. Пiдпис. Дата
нт

Служба підтримки: клієнти можуть звернутися до служби підтримки сайту,
якщо виникають питання щодо товарів, замовлень або доставки. Контактна
інформація для зв'язку може бути вказана на веб-сайті.

Рисунок 1.5 – Головна сторінка сайту «kvshop.com.ua»

Рисунок 1.6 – Сторінка товару на сайті «kvshop.com.ua»
Лист
ЧДТУ 232232.005 ПЗ
14
Зм Арк. № докум. Пiдпис. Дата
нт

Переваги:
− Широкий асортимент товарів: великий вибір товарів з різних категорій, що
дозволяє клієнтам знайти потрібний товар.
− Зручна навігація: зрозумілий та легкий у використанні інтерфейс, що
дозволяє користувачам з легкістю знаходити потрібні товари та робити покупки.
− Можливість онлайн-замовлення: можна зробити покупку онлайн без
необхідності відвідувати фізичний магазин.
Недоліки:
− Обмеженість інформації: у деяких випадках можуть бути недостатньо
детальні описи товарів або недостатня кількість фотографій, що ускладнює вибір
товару.
− Можливість помилок при оновленні інформації: застарілі або неточні дані
про наявність товарів та їх ціни можуть призводити до незручностей для клієнтів.
− Обмежена географічна доставка: обмежений перелік регіонів для доставки
товарів, що може бути невигідним для деяких покупців.

Телемагазин telemart.ua (рисунок 1.7) є одним з українських інтернет-магазинів,
спеціалізованих на продажу електроніки, побутової техніки, комп'ютерів, мобільних
телефонів, аксесуарів та інших товарів [6].
Лист
ЧДТУ 232232.005 ПЗ
15
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 1.7 – Головна сторінка сайту «telemart.ua»

Магазин пропонує широкий вибір товарів в різних категоріях, включаючи
смартфони, ноутбуки, телевізори, планшети, фото- та відеокамери, побутову техніку
та багато іншого.
Опис та технічні характеристики: кожен товар має докладний опис, в якому
можна знайти інформацію про функціональні можливості, характеристики,
комплектацію та інші деталі.
Фільтри та пошук: клієнти можуть використовувати фільтри, щоб швидко
знайти потрібний товар за такими параметрами, як бренд, ціновий діапазон,
характеристики тощо. Також є можливість використовувати пошукову рядок для
знаходження конкретного товару.
Корзина покупок та оформлення замовлення: можна додавати товари до
кошика, переглядати його зміст, редагувати кількість товарів та оформлювати
замовлення.
Лист
ЧДТУ 232232.005 ПЗ
16
Зм Арк. № докум. Пiдпис. Дата
нт

Система оплати та доставки: Telemart надає різні способи оплати, такі як готівка
при отриманні, онлайн-платежі, оплата банківською карткою. Щодо доставки,
доступні різні варіанти, включаючи кур'єрську доставку та самовивіз.
Також магазин надає підтримку клієнтів, яка може бути доступна через
телефон, електронну пошту або онлайн-чат.
Сайт також надає послуги побудови персональних комп’ютерів (рисунок 1.8).

Рисунок 1.8 – Конфігуратор ПК на сайті «telemart.ua»

В таблиці 1.1 порівняно переглянуті магазини. В результаті порівняння
виявляється, що не один магазин не є ідеальним.

Таблиця 1.1 – Порівняння аналогів (за 5-ти бальною шкалою)
Карта сайту Форма Розширене Програми
зворотнього оцінювання товару лояльності
зв'язку
Brain Доступна добре Форма дозволяє Кількість Можуть діяти
структурована зручно зв'язатися розгорнутих програми
карта сайту, яка зі службою оглядів і оцінок лояльності, але
допомагає підтримки та товарів може бути потрібно
користувачам задати будь-які додатково
Лист
ЧДТУ 232232.005 ПЗ
17
Зм Арк. № докум. Пiдпис. Дата
нт

швидко знайти питання або обмеженою або перевірити
потрібну висловити свої недостатньою. актуальну
інформацію і пропозиції. інформацію на
товари. їхньому веб-сайті.

Compx Має зручну карту Є доступна форма Може бути Діє програма
сайту, яка зворотнього обмежена кількість лояльності, яка
допомагає зв'язку, що оглядів та оцінок нагороджує
користувачам дозволяє клієнтам товарів, що постійних клієнтів
швидко зручно звертатися зменшує обсяг знижками,
орієнтуватися і до служби інформації, бонусами або
знайти потрібні підтримки та доступної для спеціальними
розділи та товари. отримувати прийняття рішення акціями, що робить
відповіді на свої про покупку. покупки ще
запитання. вигіднішими.
Kvshop Є доступна карта Присутня зручна Не завжди є Можуть діяти
сайту, яка форма зворотнього достатня кількість програми
допомагає легко зв'язку, що розгорнутих лояльності.
навігувати по дозволяє клієнтам відгуків та оцінок.
різних розділах і швидко звернутися
знаходити потрібні до служби
товари. підтримки та
отримати відповіді
на свої запитання.
Telemart Має зрозумілу Доступна зручна Обсяг розгорнутих Може мати
карту сайту, що форма зворотнього оглядів і оцінок програми
спрощує навігацію зв'язку, яка товарів може бути лояльності, але
та дозволяє з дозволяє клієнтам невеликим. варто перевіряти
легкістю знайти звертатися до останню
потрібні розділи та служби підтримки інформацію на веб-
товари. і отримувати сайті.
відповіді на свої
запитання.
CompShop Карта сайту, яка Форма Розгорнуті огляди Пишається своєю
допомагає зворотнього та оцінки товарів, програмою
клієнтам легко зв'язку, що надані лояльності, яка
орієнтуватися в дозволяє клієнтам довірливими надає клієнтам
широкому легко зв'язатися зі користувачами та багато переваг.
асортименті службою експертами.
товарів і швидко підтримки.
знайти потрібні
розділи та
продукти.

Лист
ЧДТУ 232232.005 ПЗ
18
Зм Арк. № докум. Пiдпис. Дата
нт

1.3 Постановка задачі

Задачею даної кваліфікаційної роботи є проектування та розробка
користувацької частини WEB-ресурсу з продажу комп'ютерної техніки «CompShop».
Веб-ресурс «CompShop» буде функціонувати як електронний магазин, де користувачі
зможуть переглядати, вибирати та замовляти комп'ютерну техніку та супутні товари.
Для досягнення цієї мети потрібно вирішити наступні задачі:
1. Розробити привабливий та інтуїтивно зрозумілий інтерфейс користувача.
Визначити структуру веб-ресурсу, розташування та взаємодію елементів інтерфейсу.
Розробити макети інтерфейсу, забезпечуючи зручне взаємодію користувача з
ресурсом та привабливий зовнішній вигляд.
2. Реалізувати основну функціональність веб-ресурсу «CompShop». Включити
можливість перегляду каталогу товарів з детальною інформацією, пошук та
фільтрацію товарів, додавання їх до кошика, оформлення замовлення, реєстрацію та
авторизацію користувачів, обробку платежів тощо. Забезпечити зберігання даних та
безпеку інформації користувачів.
3. Провести систематичне тестування веб-ресурсу для перевірки його
працездатності, стабільності та відповідності вимогам. Виконати валідацію коду,
перевірити коректність роботи функціональності та інтерфейсу, а також забезпечити
сумісність з різними веб-браузерами та пристроями.

Висновки до розділу 1

В рамках цього розділу проведено аналіз предметної області та огляд існуючих
аналогів, а також була поставлена задача.
Аналіз предметної області включав дослідження ринку продажу комп'ютерної
техніки та ознайомлення з основними аспектами та вимогами до користувацького
інтерфейсу WEB-ресурсу.
Розглянуто такі веб-ресурси як telemart.ua, compx.ua, brain.com.ua та
kvshop.com.ua. Порівняльний аналіз цих аналогів був проведений з метою виявлення
Лист
ЧДТУ 232232.005 ПЗ
19
Зм Арк. № докум. Пiдпис. Дата
нт

їх переваг та недоліків, а також визначення можливостей для покращення та
унікальності нового веб-ресурсу "CompShop".
Після проведення аналізу предметної області та огляду існуючих аналогів, була
поставлена задача, яка визначає мету і завдання даної роботи. Задача полягає в
розробці та проектуванні користувацької частини веб-ресурсу «CompShop» з метою
забезпечення зручного та привабливого середовища для користувачів при покупці
комп'ютерної техніки.

Лист
ЧДТУ 232232.005 ПЗ
20
Зм Арк. № докум. Пiдпис. Дата
нт

РОЗДІЛ 2. ПРОЕКТУВАННЯ FRONTEND ЧАСТИНИ ВЕБ РЕСУРСУ

2.1 Аналіз та вибір програмних засобів

Існує багато програмних засобів (Integrated Development Environments, IDE), які
допомагають розробникам створювати сайти швидше і зручніше. Вони надають набір
інструментів і функціональність для розробки, тестування та налагодження веб-
додатків.
Visual Studio Code (VS Code, рисунок 2.1) – це безкоштовний редактор коду,
розроблений компанією Microsoft. Він широко використовується веб-розробниками
завдяки своїм функціям, розширюваності і зручному інтерфейсу [7].
Ключові особливості Visual Studio Code для веб-розробки:
– Мови програмування: широкий спектр мов програмування, включаючи
HTML, CSS, JavaScript, TypeScript, Python, PHP, Ruby і багато інших. Кожна мова має
свої власні набори функцій, підказок і розширень.
– Потужний редактор коду з підсвічуванням синтаксису, автодоповненням,
перетягуванням і випадаючими списками функцій. Редактор також підтримує швидкі
вставки коду і миттєві переходи між файлами.
– Відладка: VS Code має вбудовану систему відладки, що дозволяє виконувати
крок за кроком код, встановлювати точки зупинки, спостерігати значення змінних і
відстежувати виклики функцій. Це допомагає виправляти помилки і відлагоджувати
веб-додатки.
– Розширення: широка екосистема розширень, що дозволяє розширити його
функціональність. Можна встановити розширення для підтримки конкретних
фреймворків, інструментів збирання, систем контролю версій, відформатування коду
і багато іншого.
– Інтеграція з Git, що дозволяє легко працювати з репозиторіями Git,
виконувати коміти, гілки, злиття гілок і відстежувати зміни в коді [12].
Лист
ЧДТУ 232232.005 ПЗ
21
Зм Арк. № докум. Пiдпис. Дата
нт

– Розширена робота з файлами: він надає зручні інструменти для роботи з
файлами, такі як інтегрована система дослідження файлів, переіменування файлів,
переміщення файлів, відкриття багатьох файлів в одному вікні і багато іншого.
– Має розширення під назвою Live Server, яке дозволяє запускати локальний
веб-сервер для швидкого перегляду змін в реальному часі. Це особливо корисно під
час розробки фронтенду.
Загалом, Visual Studio Code є потужним і зручним інструментом для веб-
розробки, який надає розширені можливості редагування коду, відлагодження,
інтеграцію з Git та інші функції, що допомагають зробити процес розробки більш
продуктивним та ефективним.

Рисунок 2.1 – Вигляд IDE VS Code

WebStorm (рисунок 2.2) – інтегроване середовище розробки (IDE) для веб-
розробки, розроблене компанією JetBrains. Він спеціалізується на підтримці мови
JavaScript та пов'язаних технологій і надає розширені можливості для розробки веб-
додатків. Це IDE допомагає розробникам писати високоякісний код та підвищувати
продуктивність у процесі розробки веб-додатків [8].
Лист
ЧДТУ 232232.005 ПЗ
22
Зм Арк. № докум. Пiдпис. Дата
нт

Особливості WebStorm:
– Потужні інструменти редагування коду з підсвічуванням синтаксису,
автодоповненням, перетягуванням і випадаючими списками функцій. Він також
підтримує віджети розмітки і інспекцію коду для виявлення помилок і непотрібного
коду.
– Має розширену підтримку для JavaScript, включаючи ECMAScript 6,
TypeScript, React, Angular і Node.js. Він надає інструменти для рефакторингу коду,
аналізу типів, автоматичного імпорту модулів і багато іншого.
– Вбудована система відлагодження, яка дозволяє виконувати крок за кроком
код, встановлювати точки зупинки, спостерігати значення змінних і виконувати
виклики функцій. Він також підтримує відлагодження клієнтського та серверного
JavaScript.
– Розширення і інтеграція з іншими інструментами: WebStorm має багато
розширень і плагінів, що дозволяють розширити його функціональність. Він також
інтегрується з іншими інструментами розробки, такими як системи контролю версій
(наприклад, Git), системи збирання (наприклад, webpack) і інші.
– Зручні інструменти для управління проектами, включаючи автоматичне
завантаження залежностей, виконання скриптів, роботу з пакетним менеджером і інші
функції, які полегшують розробку проектів.
– Інструменти для автоматичного тестування, такі як Jest, Mocha, Karma і інші.
Він надає можливість виконувати тести, аналізувати покриття коду тестами і робити
інші операції, пов'язані з тестуванням.
WebStorm має потужну систему автодоповнення, яка допомагає прискорити
процес написання коду. Вона пропонує можливі варіанти завершення коду,
включаючи назви змінних, методи, функції, властивості об'єктів і багато іншого. Це
полегшує написання коду і допомагає уникнути помилок.
Також це IDE надає розширені інструменти для рефакторингу коду, такі як
перейменування змінних, вилучення методів, переміщення коду, витягування
фрагментів і багато іншого. Ці інструменти допомагають поліпшити якість коду,
зробити його більш чистим і легко зрозумілим.
Лист
ЧДТУ 232232.005 ПЗ
23
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.2 – Вигляд IDE WebStorm

Postman – це популярний інструмент для тестування і розробки API (інтерфейсу
програмування додатків). Він надає можливості для відправки HTTP-запитів до веб-
серверів і отримання відповідей, що дозволяє розробникам ефективно взаємодіяти з
API, відлагоджувати, тестувати та документувати їх [9].
Postman дозволяє легко відправляти HTTP-запити, такі як GET, POST, PUT,
DELETE і багато інших. Можна налаштовувати заголовки, параметри, тіло запиту і
обробляти різні типи відповідей, такі як JSON, XML або HTML. Можна організувати
свої запити у логічні групи, створюючи колекції запитів. Це дозволяє швидко
знаходити та повторно використовувати запити, що спрощує роботу з API проектів.
Змінні та оточення: програма дозволяє використовувати змінні для динамічного
створення запитів. Можна встановлювати змінні значення, використовувати їх у URL,
заголовках або тілі запиту. Також можна налаштовувати оточення (environment) для
управління набором змінних для різних середовищ (наприклад, локальний сервер,
тестовий сервер, продуктивне середовище).
Лист
ЧДТУ 232232.005 ПЗ
24
Зм Арк. № докум. Пiдпис. Дата
нт

Тестування API: Postman дозволяє виконувати тести на основі відповідей API.
Можна налаштовувати тести, які перевіряють наявність певних даних, форматів або
статусів відповідей. Це допомагає автоматизувати тестування API і переконатися, що
вони працюють правильно.
Також Postman надає можливість створювати документацію для API,
автоматично генеруючи документаційні сторінки на основі колекцій запитів. Можна
описати різні ендпоінти, їх параметри, приклади запитів та відповідей, що спрощує
розробку і спілкування з командою.
Ця програма також дозволяє легко спілкуватися та співпрацювати з іншими
членами команди – обмінюватися колекціями запитів, оточеннями, змінними і
документацією, що спрощує спільну роботу над проектами.
Зважаючи на ці характеристики, Postman є потужним інструментом для
розробників, який спрощує тестування, взаємодію та документування API.

Рисунок 2.3 – Вигляд програми Postman
Лист
ЧДТУ 232232.005 ПЗ
25
Зм Арк. № докум. Пiдпис. Дата
нт

Google Chrome (рисунок 2.4) є одним з найпопулярніших веб-браузерів, і його
можна використовувати як у користувацькому режимі, так і у розробці веб-сайтів.
Цей браузер є потужним інструментом для розробників веб-сайтів, який надає
широкий набір функцій і можливостей для аналізу, налагодження та тестування веб-
сторінок [10].
Chrome надає інструменти розробника, які дозволяють аналізувати,
налагоджувати та відлажувати веб-сторінки. Можна відкрити ці інструменти,
натиснувши правою кнопкою миші на сторінку і вибравши "Інспектувати елемент".
Це дозволить переглядати HTML-код, CSS-стилі, виконувати JavaScript, аналізувати
мережевий трафік та багато іншого.
Тестування на різних пристроях: цей браузер має вбудовані інструменти для
емуляції різних пристроїв і розмірів екранів. Можна легко перевірити, як веб-сайт
відображається на мобільних телефонах, планшетах та інших пристроях
безпосередньо в браузері.
Дебаггер JavaScript: з використанням інструментів розробника Google Chrome
можна налагоджувати JavaScript-код веб-сайту, встановлювати точки зупинки,
стежити за значеннями змінних, аналізувати стек викликів та інші операції. Це
допомагає виправити помилки та вдосконалити функціональність веб-сайту.
Google Chrome є широко використовуваним браузером, тому важливо
перевірити, як веб-сайт відображається і працює саме в цьому браузері. Можна
використовувати Google Chrome для тестування та перевірки сумісності
розроблювального веб-сайту.
Доступні різні розширення та інструменти, що полегшують процес розробки
веб-сайтів. Наприклад, розширення для перевірки валідності HTML та CSS,
інструменти для аналізу швидкості завантаження сторінки, розширення для роботи з
кукісами та багато іншого.

Лист
ЧДТУ 232232.005 ПЗ
26
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.4 – Вигляд браузера Google Chrome

Зробивши аналіз, було вирішено застосувати таке ПЗ для розробки сайту:
– WebStorm для розробки;
– Postman – тестування API;
– Google Chrome – мануальне тестування веб-сайту.

2.2 Аналіз і вибір фреймворків

Для створення користувацької частини веб-сайтів застосовуютсья так звані
«фронтенд»-фреймворки. Frontend-фреймворк – це набір інструментів, бібліотек та
компонентів, які використовуються для розробки користувацького інтерфейсу веб-
додатків. Вони дозволяють розробникам швидко створювати ефективні та
інтерактивні веб-інтерфейси, спрощуючи багато рутинних задач [23].
Лист
ЧДТУ 232232.005 ПЗ
27
Зм Арк. № докум. Пiдпис. Дата
нт

React – це відкритий JavaScript фреймворк для розробки інтерфейсу
користувача, створений компанією Facebook. Він дозволяє побудувати ефективні
інтерактивні веб-додатки з високою продуктивністю.
Основним принципом React є розбиття користувацького інтерфейсу на
компоненти. Компоненти в React – це незалежні, повторно використовувані блоки
коду, які описують вигляд та поведінку окремих частин веб-додатку. Вони можуть
містити HTML-подібний код, а також JavaScript-логіку [11].
React використовує віртуальний DOM (Document Object Model), що дозволяє
відслідковувати зміни в компонентах та ефективно оновлювати тільки необхідні
елементи інтерфейсу без повного перерендерингу всієї сторінки. Це дозволяє досягти
високої продуктивності і швидкодії додатків.
Особливості React:
– Спеціальний синтаксис JSX, який поєднує HTML-подібний код з JavaScript.
Це дозволяє легко використовувати компоненти та їхні властивості всередині коду.
– Односторінкові додатки: React часто використовується для розробки
односторінкових додатків (SPA – Single Page Applications). Це додатки, які
загружаються один раз, а далі взаємодіють з сервером через AJAX-запити.
– Розширюваність: React дозволяє використовувати додаткові бібліотеки та
розширення для покращення функціональності та розробки додатків. Наприклад,
Redux використовується для керування станом додатку, а React Router - для навігації
між сторінками.
React використовується в багатьох веб-проектах із великим співтовариством
розробників. Він має велику кількість документації, пакетів та ресурсів, які
полегшують розробку і підтримку проектів.
Angular – відкритий фреймворк для розробки веб-додатків, створений
командою розробників Google. Він дозволяє побудувати складні односторінкові з
високою продуктивністю і масштабованістю [22].
Angular має потужне співтовариство розробників, велику кількість
документації і ресурсів, що допомагають в розробці, а також активно оновлюється
Лист
ЧДТУ 232232.005 ПЗ
28
Зм Арк. № докум. Пiдпис. Дата
нт

командою Google. Він є одним з популярних виборів для розробки складних веб-
додатків з великим функціоналом і підтримкою [13].
Основні характеристики Angular:
– використовує TypeScript як мову програмування. TypeScript – це надмножина
JavaScript, яка надає статичну типізацію, ООП-можливості, підтримку модульності і
багато інших функцій, що полегшують розробку і підтримку коду.
– Компонентна архітектура: фреймворк побудований навколо концепції
компонентів. Кожен компонент представляє собою незалежну, повторно
використовувану частину веб-інтерфейсу. Компоненти можуть містити HTML-
подібний код для відображення та TypeScript-логіку для управління поведінкою.
– Залежність відстеження: Angular використовує інжектор залежностей для
керування залежностями між компонентами, сервісами та іншими об'єктами. Це
полегшує створення, тестування і розширення додатків.
– Розширена HTML-шаблонізація: фреймфорк має свій власний шаблонний
двигун, який розширяє можливості HTML. Він дозволяє використовувати директиви,
які надають додаткову функціональність, таку як повторення, умовні оператори та
обробники подій.
– Angular має вбудовану систему маршрутизації, яка дозволяє навігувати між
різними сторінками та відображати компоненти в залежності від URL.
Vue.js – прогресивний веб-фреймворк для розробки інтерфейсу користувача,
який дозволяє побудувати ефективні односторінкові та динамічні інтерфейси.
Vue.js є гнучким і легким фреймворком, який підходить як для невеликих
проектів, так і для великих і складних додатків. Він набуває все більшої популярності
серед розробників завдяки своїй простоті та ефективності [14].
Основні характеристики Vue.js:
– Дуже простий і зрозумілий синтаксис, який легко вивчити й почати
використовувати. Він базується на прогресивному підході, тобто можна почати з
невеликих частин функціональності і поступово розширювати їх.
– Побудований навколо концепції компонентів, подібно до React. Компоненти
є незалежними, повторно використовуваними блоками коду, які мають свій власний
Лист
ЧДТУ 232232.005 ПЗ
29
Зм Арк. № докум. Пiдпис. Дата
нт

HTML-подібний шаблон, логіку та стилі. Це дозволяє легко структурувати додаток і
полегшує його розширення та підтримку.
– Використовує реактивну систему, яка автоматично відстежує залежності між
даними та шаблонами. Це означає, що якщо дані змінюються, відображення
автоматично оновлюється. Це дозволяє створювати динамічні інтерфейси без
необхідності вручну оновлювати DOM.
– Має вбудовану систему директив, які дозволяють додавати до елементів
DOM додаткову функціональність. Наприклад, директиви можуть використовуватись
для управління класами, обробки подій або зміни стилів елементів.
– Підтримує модульну структуру додатків, що дозволяє поділити його на
компоненти, модулі та маршрути. Можна використовувати розширення сторонніх
розробників або створювати свої власні модулі для розширення функціональності
додатку.
– Активне співтовариство розробників, що забезпечує велику кількість
сторонніх бібліотек, розширень та документацію. Також він має офіційні
інструменти, такі як Vue Router для маршрутизації і Vuex для управління станом
додатку.
Проаналізувавши фреймворки, було вирішено використати фреймворк angular
через його багатий функціонал та широке використання в індустрії.

2.3 Проектування структури сайту та зв’язку між сторінками

Проектування структури сайту комп'ютерної техніки та зв'язку між сторінками
є важливим етапом в процесі розробки веб-сайту. Цей процес включає в себе
планування і організацію сторінок сайту таким чином, щоб користувачам було зручно
навігувати по сайту і знаходити необхідну інформацію.
Головна сторінка сайту продажу комп'ютерної техніки – це перша сторінка, яку
відвідувачі бачать після відкриття сайту. Її основна мета – привернути увагу
користувачів і надати їм доступ до основного функціоналу сайту.
Лист
ЧДТУ 232232.005 ПЗ
30
Зм Арк. № докум. Пiдпис. Дата
нт

Побудова діаграм зв'язку між сторінками є важливим етапом при розробці веб-
сайту продажу комп'ютерної техніки. Діаграма зв'язку відображає структуру та
взаємозв'язки між різними сторінками сайту, що допомагає зрозуміти логіку навігації
та взаємодії користувача з сайтом [13]. Ось кілька причин, чому побудова діаграм
зв'язку є важливою:
Діаграма зв'язку надає графічне представлення структури сайту, включаючи
головну сторінку, підсторінки, категорії, продукти та інші важливі елементи. Це
дозволяє розробникам та дизайнерам краще розуміти загальну структуру та ієрархію
сайту. Допомагає визначити логіку навігації користувача по сайту. Вона показує
шляхи, по яких користувач може перейти з однієї сторінки на іншу та які елементи
або посилання забезпечують цю навігацію. Це дозволяє зробити навігацію інтуїтивно
зрозумілою та зручною для користувачів. Допомагає виявити прогалини або
дублювання контенту: Діаграма зв'язку допомагає виявити прогалини або
дублювання контенту між різними сторінками. Вона допомагає забезпечити, що
кожна сторінка має свою унікальну функціональність та вміщує необхідний контент.
Спроектована діаграма зв’язку сторінок наведена на рисунку 2.5.

Рисунок 2.5 – Схема зв’язку між сторінками магазину «CompShop»

Наступним елементом користувацької частини сайту є адмін-панель, що
дозволяє управляти сайтом. Діаграма цієї панелі зображена на рисунку. 2.6.
Лист
ЧДТУ 232232.005 ПЗ
31
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.6 – Схема зв’язку між сторінками адмін-панелі магазину «CompShop»

2.4 Проектування структури та наповнення сторінок сайту

Кожен інтернет-ресурс повинен бути грамотно спроектований під певні
завдання. І чим складніша структура і функціонал ресурсу, тим більш відповідальним
повинен бути підхід до проектування. Для вирішення бізнес-завдань недостатньо,
щоб сайт був зручний тільки для користувачів, хоча це обов’язкова умова [15,16].
Головна сторінка має містити:
1. Логотип та назву компанії, що продає комп'ютерну техніку. Це допомагає
користувачам впізнати бренд і встановити зв'язок з компанією.
2. Навігаційне меню з основними категоріями товарів або послуг, які доступні
на сайті. Це допомагає користувачам швидко зорієнтуватися і перейти до конкретної
категорії, яка їх цікавить.
3. Пошукове поле, де користувачі можуть ввести ключові слова для пошуку
конкретного товару або моделі.
4. Вітальний банер або слайдер: деякі сайти мають великий банер або слайдер
на головній сторінці, де рекламуються акції, нові надходження або популярні
продукти.
5. Відображення популярних товарів: можуть бути відображені популярні або
рекомендовані товари, які допомагають користувачам швидко знайти популярні
моделі або послуги.
Лист
ЧДТУ 232232.005 ПЗ
32
Зм Арк. № докум. Пiдпис. Дата
нт

6. Корзина: багато сайтів мають іконку корзини або відображають кількість
товарів у корзині на головній сторінці. Це дозволяє користувачам швидко перейти до
перегляду вмісту корзини і оформлення замовлення.
7. Інформаційні блоки про компанію, доставку, гарантію, контакти та іншу
корисну інформацію для користувачів.
8. Відгуки клієнтів: можна відображати відгуки клієнтів або рейтинги
продуктів на головній сторінці. Це допомагає користувачам отримати додаткову
інформацію про якість товарів та задоволення інших покупців.
Далі йде каталог товарів (рисунок 2.7). Це секція веб-сайту, яка містить повний
перелік товарів, які доступні для покупки. Каталог є важливою частиною сайту
продажу комп'ютерної техніки, оскільки він надає користувачам можливість
ознайомитися з асортиментом, знайти необхідні товари та дізнатися про їх
характеристики.

Рисунок 2.7 – Каталог товарів
Лист
ЧДТУ 232232.005 ПЗ
33
Зм Арк. № докум. Пiдпис. Дата
нт

Основні елементи каталогу товарів:
1. Категорії товарів: організація за категоріями товарів, наприклад, ноутбуки,
комп'ютери, монітори, аксесуари тощо. Це допомагає користувачам легко навігувати
по сайту та знаходити потрібні товари.
2. Користувачі можуть використовувати фільтри, щоб звужувати вибір товарів
за різними параметрами, такими як ціна, бренд, розмір екрану, характеристики тощо.
Це дозволяє знайти товари, які відповідають конкретним потребам користувача.
3. Кожен товар в каталозі має свою власну картку, де відображаються його
назва, зображення, опис, технічні характеристики, ціна та інша інформація.
Користувачі можуть докладніше ознайомитися з кожним товаром та прийняти
рішення щодо покупки.
4. Важливим елементом каталогу є якісні зображення товарів, що дозволяють
користувачам побачити їх зовнішній вигляд. Додатково, каталог може містити
відеоогляди або фотогалереї, що надають більше інформації про товари.
5. Кнопки додавання до корзини або купівлі, що дозволяють додавати товар
до корзини або купувати його безпосередньо зі сторінки каталогу.
6. Пагінація або безкінечна прокрутка: якщо каталог містить велику кількість
товарів, потрібно використати пагінацію (безкінечна прокрутка), щоб розділити
товари на сторінки та полегшити їх перегляд.
Кошик (рисунок 2.8) є важливою частиною сайту продажу комп'ютерної
техніки і використовується для зберігання товарів, які користувач обрав для покупки.
Основна мета кошика - дати можливість користувачам переглянути їх вибрані товари,
змінити їх кількість або характеристики і оформити замовлення.
Лист
ЧДТУ 232232.005 ПЗ
34
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 2.8 – Приклад кошика (магазин «brain.com.ua»)

Елементи кошика:
1. Список товарів, які користувач додав до нього. Кожен товар може мати
зображення, назву, ціну, кількість, сумарну вартість та можливість видалення товару
з кошика.
2. Користувач може змінити кількість товарів в кошику шляхом введення
нової кількості або за допомогою плюсового та мінусового значків.
3. Підсумкова вартість всіх товарів, які знаходяться в ньому. Це дозволяє
користувачу легко зрозуміти, скільки коштуватиме його замовлення перед
оформленням.
4. Якщо користувач має промокод або може скористатися знижкою, в кошику
може бути поле для введення коду знижки, яке зменшує загальну вартість
замовлення.
5. В багатьох кошиках є кнопка «Продовжити покупки», яка дозволяє
користувачу повернутися до каталогу товарів і додати ще товари до кошика.
6. Кнопка «Оформити замовлення» дозволяє перейти до сторінки замовлення,
де користувач може заповнити необхідну інформацію для оформлення покупки.
Лист
ЧДТУ 232232.005 ПЗ
35
Зм Арк. № докум. Пiдпис. Дата
нт

Сторінка замовлення (рисунок 2.9) є фінальним кроком процесу покупки, де
користувач заповнює необхідні дані для доставки, обирає спосіб оплати і підтверджує
своє замовлення.

Рисунок 2.9 – Приклад сторінки замовлення (магазин «brain.com.ua»)

Елементи сторінки замовлення:
1. Користувач повинен ввести свою адресу доставки, включаючи повну
адресу, контактні дані і, можливо, додаткові вказівки для кур'єра.
2. Можна обрати з різних доступних способів доставки, наприклад, кур'єрська
доставка, самовивіз або поштова служба.
3. Користувач вибирає спосіб оплати за своє замовлення, наприклад, оплата
карткою, готівкою при отриманні або онлайн-платежами.
4. Деталі замовлення, включаючи перелік товарів, їх кількість, вартість і
загальну суму.
5. Користувач може підтвердити своє замовлення, натискаючи кнопку
«Підтвердити» або «Оформити замовлення». Зазвичай ця кнопка також вимагає
прийняття умов і політики продавця.
Лист
ЧДТУ 232232.005 ПЗ
36
Зм Арк. № докум. Пiдпис. Дата
нт

6. Після підтвердження замовлення користувач отримує підтвердження, що
його замовлення отримано, і отримує інформацію про подальші кроки, такі як оплата
та доставка.
Адмін-панель (адміністративна панель) – це веб-інтерфейс, який
використовується адміністраторами або власниками сайту для керування і управління
різними аспектами сайту продажу комп'ютерної техніки. До основних функцій адмін-
панелі належить керування категоріями товарів та моніторинг продажів.
Адміністратор може керування категоріями:
– Створити нові категорії товарів, наприклад, "Ноутбуки", "Комп'ютери",
"Монітори" тощо. Для кожної категорії можна встановити назву, опис та інші
характеристики.
– Редагувати існуючі категорії, змінюючи їх назву, опис або інші атрибути.
Наприклад, можна додати нові підкатегорії або змінити послідовність відображення
категорій.
– Видалити категорії, які більше не потрібні. Важливо мати на увазі, що при
видаленні категорії також видаляються всі товари, пов'язані з нею.
Адміністратор може моніторити продажі:
– Перегляд звітів про продажі, які містять інформацію про кількість проданих
товарів, суму продажів, популярність певних товарів, замовлення користувачів тощо.
– Перегляд та керування замовленнями, включаючи їх стан (прийнято,
оплачено, відправлено тощо), доставку, відміну або повернення товару.
– Аналіз даних про продажі, використовуючи різні аналітичні інструменти,
такі як графіки, діаграми, фільтри і звіти. Це допомагає зрозуміти ефективність
рекламних кампаній, популярність товарів та інші показники.
– Контролю наявності товарів на складі, оновлювати їх кількість або
призначати товари як «розпродані» або «недоступні».

Лист
ЧДТУ 232232.005 ПЗ
37
Зм Арк. № докум. Пiдпис. Дата
нт

Висновки до розділу 2

У цьому розділі розглянуто такі інструменти, як WebStorm, Angular, Postman і
Google Chrome. В процесі дослідження були спроектовані зв'язки між сторінками та
виконано наповнення сторінок.
Вирішено використати WebStorm як інтегроване середовище розробки для
створення та редагування коду. Обрано Angular для створення динамічної та
інтерактивної користувацької частини WEB-ресурсу. Postman буде корисним
інструментом для тестування API та взаємодії з сервером. Google Chrome допоможе
з перевіркою та відладкою сторінок WEB-ресурсу.
У результаті проведеного проектування були встановлені зв'язки між різними
сторінками WEB-ресурсу, що дозволяє користувачам зручно переходити між ними та
здійснювати необхідні дії. Було також проведено проектування контенту сторінок, що
відповідає тематиці ресурсу, зокрема, інформацією про продукти комп'ютерної
техніки та процес замовлення.
Подальша робота буде спрямована на реалізацію самого сайту та тестування
розробленого ресурсу перед його впровадженням.

Лист
ЧДТУ 232232.005 ПЗ
38
Зм Арк. № докум. Пiдпис. Дата
нт

РОЗДІЛ 3. РЕАЛІЗАЦІЯ WEB-РЕСУРСУ

3.1 Розробка дизайну

Розробка дизайну веб-ресурсу з продажу комп'ютерної техніки є важливим
етапом у створенні привабливого та ефективного інтернет-магазину.
Першим кроком є ретельний аналіз та збір вимог. Розробник повинен зрозуміти
ваші потреби та цільову аудиторію. Питання, які можуть бути важливими, включають
тип комп'ютерної техніки, яку ви продаєте, ваш бренд, стиль, який ви хочете передати
через дизайн тощо.
Наступним кроком є створення структури веб-ресурсу. Це означає визначення
головних категорій продуктів, підкатегорій і сторінок. Наприклад, у можуть бути
категорії, такі як ноутбуки, настільні комп'ютери, монітори, аксесуари тощо.
UI/UX дизайн: важливим аспектом розробки дизайну є створення зручного
інтерфейсу користувача (UI) та позитивного досвіду користувача (UX). Це означає,
що дизайн повинен бути простим у використанні, інтуїтивно зрозумілим та
забезпечувати зручний пошук і навігацію по сайту. Ключовими елементами дизайну
можуть бути логотип, колірна схема, шрифти, кнопки, зображення та візуальні ефекти
[17].
При розробці дизайну необхідно враховувати розміщення контенту на
сторінках. Краще починати з головної сторінки, яка має бути привабливою та
змістовною. На головній сторінці можуть бути розміщені акційні товари, популярні
моделі, відгуки клієнтів тощо. Кожна сторінка товару повинна містити докладний
опис, технічні характеристики, фотографії та кнопку «Додати в кошик».
Після розробки дизайну важливо провести тестування для переконання, що все
працює належним чином і відповідає вашим вимогам. Також можна використовувати
аналітичні інструменти для вивчення поведінки користувачів на сайті та здійснити
оптимізацію для покращення конверсії та взаємодії.
Лист
ЧДТУ 232232.005 ПЗ
39
Зм Арк. № докум. Пiдпис. Дата
нт

Вибір шрифтів є важливою частиною дизайну, яка може суттєво впливати на
візуальний сприйняття та настрій вашого веб-ресурсу. При виборі шрифтів для
заданої теми рекомендується враховувати наступні аспекти [25]:
1. Брендовий стиль: вибрані шрифти відповідають брендовому стилю
магазину комп'ютерної техніки.
2. Читабельність: важливо, щоб обрані шрифти були легко читабельними на
екранах різних розмірів і пристроях. Потрібно звернути увагу на розмір, проміжок
між буквами та загальну зрозумілість тексту. Шрифт повинен бути достатньо чітким
і не перенавантажувати користувачів зайвими деталями.
3. Стилістична відповідність: при виборі шрифтів слід враховувати
стилістичну відповідність до теми веб-ресурсу. Наприклад, для продажу
комп'ютерної техніки можуть підійти сучасні та технологічні шрифти, які
відображають динаміку та інноваційність.
4. Комбінування шрифтів: часто використовують комбінацію шрифтів, щоб
створити візуальну різноманітність та ієрархію на сторінці. Можна використовувати
один шрифт для заголовків та інший для основного тексту.
Шрифт Roboto (рисунок 3.1) є популярним вибором для веб-дизайну, особливо
в контексті сучасних технологічних та веб-проектів [18].
Сучасність та універсальність: Roboto має сучасний і стильний вигляд, який
гармонійно поєднується з багатьма дизайнерськими стилями. Цей шрифт виглядає
свіжо та актуально, що важливо для веб-ресурсу, що пропонує комп'ютерну техніку.
Читабельність: Roboto розроблений з орієнтацією на читабельність на екранах
різних розмірів. Він має пропорційний баланс між деталізацією та чіткістю літер, що
робить його добрим вибором для тексту, заголовків та інших елементів веб-сайту.
Гнучкість: Roboto має кілька стилів та ваг, що дозволяє використовувати його
для створення ієрархії та різних типографічних акцентів. Він може бути успішно
використаний як для заголовків, так і для основного тексту.
Адаптивність: Roboto має гарну адаптивність до різних розмірів екранів і
пристроїв, що є важливою характеристикою для веб-ресурсу, який буде
переглядатися на різних пристроях, включаючи мобільні пристрої.
Лист
ЧДТУ 232232.005 ПЗ
40
Зм Арк. № докум. Пiдпис. Дата
нт

Підтримка Google: Roboto розроблений компанією Google і широко
використовується в їхніх веб-проектах. Це означає, що він має стабільну та постійну
підтримку, а також оптимізований для використання на різних платформах.
Загалом, вибір шрифту Roboto для веб-ресурсу з продажу комп'ютерної техніки
додає сучасності, читабельності та професійного вигляду дизайну, сприяючи
позитивному користувацькому досвіду.

Рисунок 3.1 – Вигляд шрифту Roboto

Вибір кольорів є важливою складовою дизайну веб-ресурсу з продажу
комп'ютерної техніки, оскільки кольори можуть впливати на настрій, сприйняття та
визначати загальний вигляд вашого сайту [19,24].
Асоціації з комп'ютерною технікою: потрібно подумати над асоціаціями, які
викликає комп'ютерна техніка. Це можуть бути кольори, що символізують
технологію, яскравість, інновацію або професіоналізм. Наприклад, використання
сірих, синіх або металевих відтінків може відображати технологічну та сучасну ауру.
Лист
ЧДТУ 232232.005 ПЗ
41
Зм Арк. № докум. Пiдпис. Дата
нт

Кольорові концепції: потрібно розглянути різні кольорові концепції, такі як
монохромна (використання відтінків одного кольору), контрастна (комбінація
протилежних кольорів), аналогічна (використання кольорів, які знаходяться поруч
один з одним на колі кольорів) або триадна (комбінація трьох кольорів, що
розташовані на рівномірній відстані один від одного на колі кольорів).
Контрастність та виділення: забезпечити достатню контрастність між фоном і
текстом, щоб текст був легко читабельним. Також можна використовувати виділення
кольором для акцентування важливих елементів, таких як кнопки «Купити» або
акційні пропозиції.
Тестування: перед використанням кольорової палітри на всьому веб-ресурсі
рекомендується провести тестування. Перевірте, як кольори виглядають на різних
пристроях та екранах, а також переконайтеся, що вони підходять для людей з різними
типами кольорового сприйняття.
Основний дизайн розроблено в графічному редакторі (рис. 3.2).

Рисунок 3.2 – Розроблений дизайн основної сторінки веб-ресурсу магазину

Лист
ЧДТУ 232232.005 ПЗ
42
Зм Арк. № докум. Пiдпис. Дата
нт

3.2 Реалізація фронтенду користувацької частини

Node.js використовується як основа проекту користувацької частини з
фреймворком Angular.
Node.js є відкритим середовищем виконання JavaScript, яке побудоване на
движку V8 (розробленому компанією Google) і призначене для серверного
використання. Воно дозволяє розробникам виконувати JavaScript поза браузером і
будувати швидкі та масштабовані мережеві додатки. Node.js є популярним
інструментом серед розробників, особливо для створення серверних додатків, веб-
сайтів, мікросервісів і інших типів додатків, які потребують швидкості,
масштабованості та ефективності [20].
Дане середовище є ідеальним вибором для створення серверних додатків. Воно
має вбудовану підтримку протоколів HTTP і WebSocket, що дозволяє легко
створювати веб-сервери, API, чат-сервери та інші мережеві додатки. Node.js
постачається з npm (Node Package Manager) – одним з найбільших репозиторіїв
пакетів з відкритим вихідним кодом. За допомогою npm ви можете легко
встановлювати, оновлювати та управляти залежностями проекту, а також
використовувати тисячі готових пакетів, які спрощують розробку .
Для розробки застосовано деякі бібліотеки (рисунок 3.3).
Лист
ЧДТУ 232232.005 ПЗ
43
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.3 – Підключені бібліотеки до розроблювального проекту

«@angular/core»: Це основна бібліотека Angular, яка містить основні класи і
функції для створення компонентів, модулів, сервісів та інших конструкцій Angular
додатків [21].
«@angular/common» містить загальні функції і директиви, які
використовуються для роботи з шаблонами, маршрутизацією, обробкою подій тощо.
«@angular/forms» надає засоби для створення та управління формами в Angular.
Вона містить директиви і сервіси, які дозволяють валідувати, зберігати стан і
відстежувати зміни введених користувачем даних.
«@angular/router» надає можливості маршрутизації в Angular додатках. Вона
дозволяє визначити маршрути і навігацію між різними компонентами додатку.
Бібліотека «rxjs» реалізує реактивне програмування в Angular. Вона надає
потужні засоби для роботи з асинхронними подіями, такими як запити до сервера,
обробка подій і т.д.
Лист
ЧДТУ 232232.005 ПЗ
44
Зм Арк. № докум. Пiдпис. Дата
нт

«zone.js»: Ця бібліотека додає зони до JavaScript, що дозволяє виконувати код в
певному контексті. Вона використовується в Angular для виявлення змін і оновлення
відображення користувацького інтерфейсу.
«@angular/material»: Ця бібліотека надає компоненти і стилізацію, що
використовуються для побудови інтерфейсу користувача. Вона містить готові
компоненти, такі як кнопки, таблиці, форми і багато іншого.
«tslib» (TypeScript library) – це невелика бібліотека, яка використовується в
TypeScript проектах, зокрема в Angular. Ця бібліотека надає деякі допоміжні функції
і класи, які полегшують роботу з генерованим кодом і дозволяють використовувати
деякі функціональності, що використовуються в JavaScript-середовищі.
Бібліотека Moment.js (просто "Moment") є популярною JavaScript-бібліотекою
для роботи з датами і часом. Moment надає простий та зручний API для розбору,
відображення, маніпулювання та форматування дат та часу в JavaScript.
Основні можливості Moment включають:
– Створення об'єктів дати і часу: можна легко створювати об'єкти дати і часу.
Ви можете передати рядок з датою чи часом у заданому форматі або використати
методи для отримання поточної дати і часу.
– Парсинг та форматування: Moment дозволяє розбирати рядки дати і часу в
певний формат і перетворювати їх у об'єкти Moment. Зворотнім процесом є
форматування дати і часу за допомогою методу format, де ви можете вказати бажаний
шаблон форматування.
– Маніпулювання датою і часом: бібліотека надає багато методів для
маніпулювання датою і часом. Ви можете додавати або віднімати дні, години,
хвилини, секунди, налаштовувати окремі компоненти дати і часу, змінювати часовий
пояс тощо.
– Обчислення різниці: Moment дозволяє обчислювати різницю між двома
датами або часами, включаючи різницю в різних одиницях (дні, години, хвилини
тощо).
Angular має компонентну структуру (рисунок 3.4).
Лист
ЧДТУ 232232.005 ПЗ
45
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.4 – Структура типічного компонента в Angular

В компоненті Angular зазвичай містяться три основних файли:
Файл компонента *.component.ts: Цей файл містить код логіки компонента на
мові програмування TypeScript. В ньому описуються клас компонента, його
властивості, методи та інші деталі, пов'язані з функціональністю компонента. Цей
файл може містити логіку обробки подій, взаємодію зі службами, маніпуляцію з
даними, підписки на Observable та багато іншого.
Файл шаблону компонента *.component.html: Цей файл містить HTML-
структуру шаблону компонента. В ньому визначаються елементи, розмітка,
директиви, прив'язки даних та інші елементи, які відображаються в компоненті на
стороні клієнта. Шаблон використовує Angular-специфічні синтаксиси, такі як
прив'язки даних {{}}, директиви *ngIf, *ngFor та інші для динамічного відображення
даних та керування UI.
Файл стилів компонента *.component.scss: Цей файл містить SCSS-стилі, які
використовуються для оформлення компонента. В ньому можуть бути визначені
стилі елементів шаблону, класів компонента, медіа-запитів, анімацій та інших
ефектів. Файл стилів може бути написаний з використанням препроцесорів, таких як
SCSS або LESS, або в звичайному CSS форматі.
Один з головних розроблених компонентів – список товарів. Дані цього
компоненту представлено на рисунках 3.5, 3.6).
Лист
ЧДТУ 232232.005 ПЗ
46
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.5 – Вигляд коду логіки компоненту списку товарів

Рисунок 3.6 – Вигляд коду розмітки списку товарів

Загальний результат розробки представлено на рисунку 3.7.
Лист
ЧДТУ 232232.005 ПЗ
47
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.7 – Вигляд розробленої основної сторінки магазину

Відповідник компонент кошика також було розроблено. Результат є на рисунку
3.8.

Рисунок 3.8 – Вигляд кошика

Сторінка оформлення замовлення вийшла надзвичайно гарною. Всі потрібні
поля представлені, поле з підрахунком суми також присутнє. Результат показано на
рисунку 3.9.
Лист
ЧДТУ 232232.005 ПЗ
48
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.9 – Вигляд сторінки оформлення замовлення

3.3 Реалізація фронтенду адмінської частини

Реалізація адмін-панелі потребує так званих «захисників» (guards). В Angular
guards є механізмом, який дозволяє контролювати навігацію в додатку та захищати
певні маршрути або компоненти в залежності від певних умов. Вони
використовуються для забезпечення автентифікації, авторизації, перевірки дозволів,
завантаження даних перед переходом на маршрут і багатьох інших сценаріїв.
Angular надає наступні типи guards:
– CanActivate: визначає, чи можна активувати деякий маршрут або компонент.
Він перевіряє, чи виконуються певні умови, наприклад, чи користувач має право
переходити на даний маршрут або чи він автентифікований.
– CanActivateChild: подібно до CanActivate, але перевіряє, чи можна
активувати дочірні маршрути деякого маршруту. Використовується для захисту
вкладених маршрутів, які залежать від умов, встановлених CanActivateChild.
Лист
ЧДТУ 232232.005 ПЗ
49
Зм Арк. № докум. Пiдпис. Дата
нт

– CanDeactivate: визначає, чи можна деактивувати поточний маршрут або
компонент. Він перевіряє, чи виконуються певні умови, наприклад, чи користувач
підтвердив виходження зі сторінки або зміни внесені до форми.
– Resolve: дозволяє завантажувати дані, необхідні для активації маршруту,
перед його активацією. Використовується для передачі даних з сервера або виконання
певної логіки, наприклад, завантаження даних з бази даних.
– CanLoad: перевіряє, чи можна завантажити модуль, пов'язаний з деяким
маршрутом. Він використовується для лінивого завантаження модулів, коли потрібно
перевірити умови перед завантаженням модуля.

Рисунок 3.10 – Код класу «AdminAuthGuard»

Реалізовані сторінки товарів та категорій показано на рисунках 3.11 та 3.12.

Рисунок 3.11 – Вигляд сторінки товарів на адмін-панелі
Лист
ЧДТУ 232232.005 ПЗ
50
Зм Арк. № докум. Пiдпис. Дата
нт

Рисунок 3.12 – Вигляд сторінки категорій на адмін-панелі

Висновки до розділу 3

Протягом даного розділу проведено розробку дизайну веб-ресурсу, а також
реалізацію фронтенду як користувацької, так і адміністративної частини. Для
розробки було використано Angular, що є потужним фреймворком для створення веб-
додатків.
Реалізація фронтенду адміністративної частини включала створення
інтерфейсу для додавання, редагування та видалення продуктів, управління
замовленнями, керування користувачами тощо.
Використання фреймворка Angular дозволило ефективно реалізувати
функціонал та забезпечити високу швидкість та розширюваність веб-додатку.
Результатом цього розділу дипломної роботи є реалізований дизайн і функціонал веб-
ресурсу з продажу комп'ютерної техніки, який задовольняє вимоги та потреби
користувачів.

Лист
ЧДТУ 232232.005 ПЗ
51
Зм Арк. № докум. Пiдпис. Дата
нт

ВИСНОВКИ

В рамках даної роботи було проведено комплексний аналіз предметної області,
огляд існуючих аналогів та встановлення задачі. За допомогою порівняльного аналізу
існуючих аналогів, були виявлені їх переваги, недоліки та визначені можливості для
покращення. На основі цього була поставлена задача розробки та проектування
користувацької частини веб-ресурсу «CompShop», спрямованої на створення
зручного та привабливого середовища для користувачів під час покупки
комп'ютерної техніки.
У другому розділі роботи були використані такі інструменти, як WebStorm,
Angular, Postman та Google Chrome. Завдяки використанню WebStorm як
інтегрованого середовища розробки, вдалому вибору Angular для створення
динамічної та інтерактивної користувацької частини, а також використанню Postman
і Google Chrome для тестування та відлагодження, вдало реалізовано зв'язки між
сторінками та наповнення сторінок веб-ресурсу. При проектуванні було враховано
тематику ресурсу, забезпечуючи інформацію про продукти комп'ютерної техніки та
процес замовлення. Після проектування функціоналу та дизайну веб-ресурсу,
подальша робота спрямована на його реалізацію та тестування перед впровадженням.
Проведено розробку дизайну та реалізацію фронтенду як користувацької, так і
адміністративної частини веб-ресурсу. Використання потужного фреймворку Angular
дозволило ефективно реалізувати функціонал та забезпечити високу швидкість та
розширюваність веб-додатку. Адміністративна частина включає інтерфейс для
управління продуктами, замовленнями та користувачами.
Результатом є реалізований дизайн і функціонал веб-ресурсу з продажу
комп'ютерної техніки, який задовольняє вимоги та потреби користувачів. Всі
поставлені задачі успішно виконані. Сама робота має потенціал для подальшого
розвитку та впровадження у реальному середовищі, сприяючи зручній та ефективній
покупці комп'ютерної техніки.
Лист
ЧДТУ 232232.005 ПЗ
52
Зм Арк. № докум. Пiдпис. Дата
нт

В ході виконання кваліфікаційної роботи бакалавра виконані наступні
завдання:
 проаналізовано предметні області;
 проаналізовано і порівняно існуючі аналоги;
 поставлено задачу;
 проаналізовано та вибрано програмні засоби;
 проаналізовано та вибрано фреймворки;
 спроектовано структуру сайту та зв’язку між сторінками;
 спроектовано структуру та наповнення сторінок сайту;
 розроблено дизайн;
 реалізовано фронтенд користувацької частини;
 реалізовано фронтенд адмінської частини.
Таким чином мета кваліфікаційної роботи бакалавра була досягнута.

Лист
ЧДТУ 232232.005 ПЗ
53
Зм Арк. № докум. Пiдпис. Дата
нт

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Smith, Rob, et al. The Complete Idiot’s Guide to e-Commerce. Que, 2000.
2. Vickler, Andy. Web Development. Ladoo Publishing LLC, 2021.
3. Brain – роздрібний інтернет-магазин. URL: https://brain.com.ua
4. CompX – Твій магазин ПК. URL: https://compx.ua
5. Компʼютерний всесвіт. URL: https://kvshop.com.ua
6. Інтернет-магазин Телемарт. URL: https://telemart.ua
7. Visual Studio Code – Code Editing Redefined. URL: https://code.visualstudio.com/
8. WebStorm – the smartest JavaScript IDE. URL: https://www.jetbrains.com/webstorm/
9. Postman API Platform. URL: https://www.postman.com/
10. Google Chrome. URL: https://www.google.com/chrome/
11. React. URL: https://react.dev/
12. Laster, Brent. Professional Git. Wrox, 2017.
13. Angular. URL: https://angular.io/
14. Vue.js – The Progressive JavaScript Framework. URL: https://vuejs.org/
15. Структура веб-сайтів, різновиди веб-сайтів. URL: http://alextexnok.blogspot.com
/p/v-behaviorurldefaultvmlo_64.html
16. ПРОЄКТУВАННЯ ІНТЕРНЕТ-МАГАЗИНУ. URL: https://avada-media.ua/ua/
services/proektirovanie-internet-magazina
17. Wiedemann, Julius. Web Design. Taschen, 2008.
18. Roboto – Google Fonts. URL: https://fonts.google.com/specimen/Roboto
19. Huddleston, Rob. Teach Yourself Visually Web Design. Wiley, 2011.
20. Flavio Copes. Node.js Handbook. URL: https://flaviocopes.com/books-dist/node-
handbook.pdf
21. Seshadri, S. (2018). Angular: UP and running: Learning angular, step by step. O’Reilly
Media.
22. Holmes, S. (2016). Getting mean with Mongo, express, angular, and node. Manning
Publications.
Лист
ЧДТУ 232232.005 ПЗ
54
Зм Арк. № докум. Пiдпис. Дата
нт

23. Розробка з боку Front end. URL: https://dan-it.com.ua/uk/blog/rozrobka-z-boku-front-
end-shho-ce-take-i-chim-vidriznjaietsja-vid-back-end/
24. Кольори для дизайну сайту та їх вплив на користувачів. URL: https://it-
kitchen.com.ua/kolory-dlja-dyzajnu-sajtu-ta-ih-vplyv-na-korystuvachiv/
25. Як обирати шрифти. URL: https://telegraf.design/yak-obyraty-shryfty-veb-dyzajn/

Лист
ЧДТУ 232232.005 ПЗ
55
Зм Арк. № докум. Пiдпис. Дата
нт

ДОДАТОК А

ДОДАТОК Б

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