Багатоцільова платформа інтернет - продажів

Кононенко, Іван Віталійович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/6892
Title:	Багатоцільова платформа інтернет - продажів
Authors:	Катаєв, Дмитро Сергійович Кононенко, Іван Віталійович
Keywords:	інтернет-продажі;онлайн-бібліотека;книжковий контент;веб-додаток;React.js;Express.js;PostgreSQL;Back4App;Google Auth API;електронна комерція
Issue Date:	11-Jun-2024
Abstract:	Актуальність даної роботи полягає у зростаючому попиті на онлайн-платформи для продажу та розповсюдження книжкового контенту, особливо в умовах цифрової трансформації суспільства та зростання популярності електронних книг. У зв'язку з цим, розробка багатоцільової платформи інтернет-продажів, зокрема онлайн бібліотеки, має велике значення для задоволення потреб сучасних читачів та видавців. Враховуючи тенденції розвитку онлайн-торгівлі та зручності доступу до літературних ресурсів через Інтернет, створення ефективної та функціональної платформи стає актуальним завданням, яке сприятиме не лише покращенню доступу до книжкового контенту, а й розвитку культури читання в сучасному суспільстві.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/6892
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Files in This Item:
File	Description	Size	Format
РЕП_БАК_Кононенко_WEB-2011.pdf Restricted Access		1.36 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ ЧЕРКАСЬКИЙ 
ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ ФАКУЛЬТЕТ 
ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ КАФЕДРА ІНФОРМАЦІЙНИХ 
ТЕХНОЛОГІЙ ПРОЄКТУВАННЯ 
 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи бакалавра 
на тему: «Багатоцільова платформа інтернет - продажів» 
 
Виконав: здобувач першого 
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2011 
Спеціальності 126 Інформаційні системи та 
технології 
ОП «Web-технології, Web-дизайн» 
Кононенко Іван Віталійович 
 
Керівник: кандидат технічних наук, старший 
викладач кафедри інформаційних технологій 
проєктування, Катаєв Дмитро Сергійович 
Рецензент: 
 
 
 
 
 
Черкаси – 2024 року  
 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет _інформаційних технологій і систем проєктування________________________  
(повна назва) 
Кафедра_інформаційних технологій проектування__________________________________  
(повна назва) 
Освітньо-кваліфікаційний рівень_бакалавр____________________________________  
(назва) 
Спеціальність _126 Інформаційні системи та технології ОП «Web-технології, Web-дизайн»_  
(шифр і назва) 
ЗАТВЕРДЖУЮ  
Завідувач кафедри ІТП  
___________ Тетяна ПРОКОПЕНКО  
«_____» ______________20___ року  
 
ЗАВДАННЯ НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА 
_____________________________Кононенко Іван Віталійович____________________________  
(прізвище, ім’я, по батькові) 
1. Тема роботи __” Багатоцільова платформа інтернет - продажів ”_____________________  
________________________________________________________________________________  
________________________________________________________________________________  
Керівник роботи _кандидат технічних наук, старший викладач кафедри інформаційних 
технологій проєктування, Катаєв Дмитро Сергійович_  
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання) 
Затверджено наказом Черкаського державного технологічного університету від  
«26»  лютого  2024 року № _60/04_  
2. Строк подання здобувачем роботи _________________________________________ 
3. Вихідні дані до роботи _1) робота з зовнішніми API    2) широкий функціонал для 
користувача    3) швидка та безпечна обробка та збереження даних    4) привабливий зовнішній 
дизайн  
________________________________________________________________________________  
________________________________________________________________________________  
________________________________________________________________________________  
________________________________________________________________________________  
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно 
розробити) 1) постановка задачі. огляд існуючих рішень, аналогів     2) обґрунтування технічного 
завдання      3) розробка системи 
___________________________________________________________________________ 
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень, 
плакатів)_Структурна схема проєкту_Логічна схема неавторизованого користувача_Логічна схема 
авторизованого користувача_Логічна схема взаємодії елементів архітектури додатка_ 
___________________________________________________________________________ 
6. Консультанти розділів роботи   
  
 Розділ Прізвище, ініціали та посада Підпис, дата 
консультанта 
   завдання завдання прийняв 
видав 
     
     
     
     
     
 
7. Дата видачі завдання __________________________________________  
 
КАЛЕНДАРНИЙ ПЛАН 
№ з/п  Назва етапів  Строк виконання Примітка  
кваліфікаційної етапів роботи   
роботи   
1 Постановка задачі 01.03.2024р.  
2 Огляд існуючих 10.03.2024р.  
рішень, аналогів 
3 Постановка та 14.03.2024р.  
обґрунтування 
технічного 
завдання 
4 Розробка системи 20.05.2024р.  
5 Заключення 29.05.2024р.  
висновків 
6 Захист дипломної 12.06.2024р.  
роботи 
    
    
    
    
    
 
Здобувач вищої освіти _______________________ _________________________  
(підпис) (прізвище та ініціали) 
 
Керівник роботи _______________________ _________________________  
(підпис) (прізвище та ініціали) 
  
АНОТАЦІЯ 
до кваліфікаційної роботи бакалавра 
на тему «Багатоцільова платформа інтернет - продажів» 
здобувача вищої освіти Кононенка Івана Віталійовича   
 
Пояснювальна записка складається з ___ розділів, викладена на ___ сторінках, 
містить ___ рисунків, ___ таблиць, ____ джерел використаної літератури, ____ 
додатків. 
Кваліфікаційна робота присвячена розробці багатофункціонального веб-
додатку, який спрямований на продаж книг. 
Актуальність цієї теми пояснюється зростаючим попитом на електронну 
комерцію та зручність, яку вона пропонує сучасним користувачам. 
Метою даної роботи є створення веб-ресурсу, який дозволить користувачам 
здійснювати онлайн-покупки книжкового контенту. 
Об'єктом дослідження є процес інтернет-продажів книжкового контенту, 
зокрема в рамках онлайн-бібліотеки. 
Предметом дослідження виступають технології та методи, такі як React.js, 
Express.js, PostgreSQL, Back4App Service та Google Auth API. 
Основні методи включають аналіз вимог, проєктування інтерфейсу, розробку 
програмного забезпечення, тестування та оптимізацію. 
Практична значущість отриманих результатів полягає у створенні платформи 
інтернет-продажів, яка є надзвичайно корисною для читачів та видавців книг. 
Перший розділ роботи присвячений постановці задачі, огляду існуючих 
рішень та аналогів. 
Другий розділ роботи обґрунтовує технічне завдання проєкту. 
Третій розділ присвячений безпосередній розробці системи, аналізу її 
структури та логіки взаємодії основних компонентів. 
 
Ключові слова: інтернет-продажі, книжковий контент, веб-додаток, React.js, 
Express.js, PostgreSQL, Back4App, Google Auth API, електронна комерція, онлайн-
бібліотека.  
ЗМІСТ 
ПОЯСНЮВАЛЬНА ЗАПИСКА ................................................................................... 1 
ЗМІСТ ................................................................................................................................ 5 
ВСТУП ............................................................................................................................... 6 
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ ....................................................................................................................... 8 
1.1 Загальна оцінка об’єкту та предмету роботи. ..................................................... 8 
1.2 Аналіз існуючих рішень, аналогів. ....................................................................... 9 
1.3 Конкретизація предметної області. .................................................................... 10 
1.4 Переваги та недоліки існуючих рішень. ............................................................ 11 
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ .............................. 13 
2.1 Вимоги до якості розроблюваної системи, критерії якості ............................. 13 
2.2 Огляд систем проєкту .......................................................................................... 14 
Висновки до 2 розділу ............................................................................................... 15 
РОЗДІЛ 3. РОЗРОБКА СИСТЕМИ ........................................................................... 17 
3.1 Вибір засобів реалізації системи та їх обґрунтування. .................................... 17 
3.2 Опис структурної схеми. ..................................................................................... 18 
3.3 Опис логічних схем. ............................................................................................. 21 
3.3.1 Опис логічної схеми неавторизованого користувача............................... 21 
3.3.2 Опис логічної схеми авторизованого користувача. ................................. 24 
3.3.3 Опис логічної схеми взаємодії елементів архітектури додатка. ............. 27 
3.4 Розробка бази даних. ............................................................................................ 29 
3.4.1 Опис таблиць та відношень між ними. ...................................................... 32 
3.5 Розробка інтерфейсу користувача. ..................................................................... 34 
3.5.1 Навігація........................................................................................................ 35 
3.5.1.1 Кнопки кошика, списка улюблених товарів та авторизації. ........... 36 
3.5.2 Товар, як компонент .................................................................................... 38 
3.5.3 Сторінка товару та відгуки ......................................................................... 40 
3.6 Опис розробки програмних компонентів додатку. .......................................... 42 
3.6.1 Розробка навігації ........................................................................................ 42 
3.6.2 Розробка компоненту товару та його взаємодії ........................................ 44 
3.6.3 Сторінка товару та опрацювання відгуків ................................................. 47 
3.6.4 Форма замовлення ....................................................................................... 49 
Висновки до 3 розділу ............................................................................................... 51 
ВИСНОВКИ ................................................................................................................... 54 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ .................................................................. 56 
ДОДАТКИ ....................................................................................................................... 57 
 
ВСТУП 
 
Актуальність. Актуальність даної роботи полягає у зростаючому попиті на 
онлайн-платформи для продажу та розповсюдження книжкового контенту, 
особливо в умовах цифрової трансформації суспільства та зростання популярності 
електронних книг. У зв'язку з цим, розробка багатоцільової платформи інтернет-
продажів, зокрема онлайн бібліотеки, має велике значення для задоволення потреб 
сучасних читачів та видавців. Враховуючи тенденції розвитку онлайн-торгівлі та 
зручності доступу до літературних ресурсів через Інтернет, створення ефективної 
та функціональної платформи стає актуальним завданням, яке сприятиме не лише 
покращенню доступу до книжкового контенту, а й розвитку культури читання в 
сучасному суспільстві. 
Мета та задачі. Метою кваліфікаційної роботи є розробка багатоцільової 
платформи інтернет-продажів у формі онлайн бібліотеки з використанням 
технологій React.js, Express.js, PostgreSQL, Back4App Service та Google Auth API. 
Основною метою є створення веб-ресурсу, що надасть можливість користувачам 
здійснювати онлайн-покупки книжкового контенту. Задачі включають аналіз 
сучасних вимог до інтернет-продажів книжкового контенту, розробку інтерфейсу 
користувача, створення адміністративної панелі для управління контентом, 
тестування та оптимізацію системи. 
Об'єкт та предмет дослідження. Об'єктом дослідження виступає процес 
інтернет-продажів книжкового контенту, зокрема у формі онлайн бібліотеки. 
Предметом дослідження є технології та методи, які використовуються для розробки 
платформи інтернет-продажів, зокрема React.js, Express.js, PostgreSQL, Back4App 
Service та Google Auth API. 
Методи дослідження. У роботі використовуються методи аналізу вимог, 
проєктування інтерфейсу, розробки програмного забезпечення, тестування та 
оптимізації. Дослідження базується на аналізі вимог користувачів та ринку 
електронних книг, а також на використанні сучасних технологій у веб-розробці. 
Практичне значення. Розроблена платформа інтернет-продажів має велике 
практичне значення для читачів та видавців книг, надаючи зручний і швидкий спосіб 
отримання та розповсюдження літературного контенту. Висунуті рекомендації 
щодо використання системи на практиці та наведені приклади попереднього 
впровадження схожих рішень на ринку. 
Структура Роботи. Робота складається зі вступу, чотирьох розділів, 
висновків, списку використаних джерел та додатків. Загальний обсяг роботи - 50 
сторінок, у тому числі 15 рисунків та 5 таблиць. Кожен розділ присвячений 
конкретному аспекту розробки платформи інтернет-продажів: аналіз вимог, 
проєктування інтерфейсу, реалізація та тестування, оптимізація та підсумки. 
  
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ, 
АНАЛОГІВ 
 
1.1 Загальна оцінка об’єкту та предмету роботи. 
Об'єктом дослідження в даній дипломній роботі є розробка імплементації 
стеку (stack) для використання в web-розробці. Термін "стек" у контексті 
програмування використовується для позначення набору технологій, інструментів 
та фреймворків, які використовуються для розробки веб-додатків або веб-сайтів. 
Розробка імплементації стеку полягає в обранні та інтеграції певних технологій з 
метою полегшення процесу розробки та підвищення продуктивності веб-
розробників. 
Предметом роботи є аналіз існуючих технологій та систем у сфері web-
розробки, а також розробка та імплементація нового стеку з урахуванням потреб 
сучасної веб-розробки. Це включає в себе огляд та аналіз різних фреймворків, 
бібліотек, інструментів для фронтенду (клієнтської частини), бекенду (серверної 
частини) та баз даних. 
Для початку, розглянемо фронтенд. Оскільки веб-додатки стають все більш 
складними, важливо вибрати потужний та гнучкий фреймворк для їх розробки. Такі 
фреймворки, як React.js, Angular та Vue.js, є основними гравцями на ринку та 
надають широкий спектр можливостей для створення інтерактивних та ефективних 
веб-інтерфейсів. 
У сфері бекенду, важливо вибрати технологію, яка забезпечить стабільність, 
безпеку та масштабованість серверної частини веб-додатка. Фреймворки, такі як 
Express.js для Node.js, Django для Python, або Spring для Java, можуть бути 
відмінними виборами для цієї цілі. 
Окремо слід звернути увагу на систему управління базами даних (СУБД). 
Вибір СУБД також впливає на продуктивність та масштабованість додатка. 
PostgreSQL, MySQL та MongoDB - це лише деякі з популярних варіантів для 
зберігання даних. 
Розробка нового стеку включає в себе аналіз потреб веб-розробки в конкретній 
області, оцінку сильних та слабких сторін різних технологій, а також розробку плану 
інтеграції обраних компонентів. Також важливим етапом є тестування та 
оптимізація нового стеку з метою забезпечення його ефективності та надійності. 
Отже, об'єктом дослідження є розробка імплементації стеку для використання 
в web-розробці, а предметом роботи є аналіз існуючих технологій та систем та 
розробка нового стеку з урахуванням потреб сучасної web-розробки. 
 
1.2 Аналіз існуючих рішень, аналогів. 
На сьогоднішній день на ринку існує ряд відомих web-технологій, які 
використовуються для побудови стеку веб-додатків. Наприклад, популярні стеки 
такі як MERN (MongoDB, Express.js, React.js, Node.js), MEAN (MongoDB, Express.js, 
Angular.js, Node.js), LAMP (Linux, Apache, MySQL, PHP), тощо. Кожен з них має 
свої особливості, переваги та недоліки, які варто врахувати при розробці нового 
стеку. Процес інтернет-продажів книжкового контенту, зокрема у формі онлайн 
бібліотеки, став одним із найбільш актуальних напрямків розвитку книжкової 
індустрії в епоху цифрових технологій. За допомогою спеціалізованих платформ 
можна не лише придбати книги в електронному форматі, а й отримати доступ до 
широкого асортименту літературних творів через Інтернет. Цей процес необхідно не 
лише дослідити, але й ретельно розібрати технології та методи, що 
використовуються для розробки платформи інтернет-продажів. 
Процес розробки платформи інтернет-продажів книжкового контенту 
включає в себе ряд етапів. Починаючи з аналізу вимог та планування архітектури, 
розробники приступають до реалізації функціональності за допомогою обраних 
технологій. Після цього відбувається тестування та оптимізація додатку для 
забезпечення його ефективності та надійності. 
У контексті дослідження важливо розглянути не лише технічні аспекти 
розробки платформи, але й соціально-економічні та культурні впливи інтернет-
продажів книжкового контенту. Аналізуючи зміни у споживчих звичках та вплив 
цифрової технології на книжкову індустрію, можна зрозуміти динаміку розвитку 
цього сектору та виявити перспективи подальшого зростання. 
 
1.3 Конкретизація предметної області. 
Предметною областю даної роботи є розробка стеку для web-розробки з 
урахуванням потреб сучасного веб-середовища. У рамках цієї області досліджується 
оптимальний набір технологій та їх конфігурація для досягнення максимальної 
продуктивності та ефективності веб-розробки. Основною метою цієї області є 
створення оптимального стеку технологій, який забезпечує максимальну 
продуктивність, ефективність, масштабованість та безпеку процесу розробки веб-
додатків. 
Для початку, важливо проаналізувати потреби та вимоги сучасного веб-
середовища. Зокрема, це включає в себе оцінку швидкості розробки, відмінності у 
вимогах до функціональності та інтерфейсу, а також потреби у масштабованості та 
безпеці. 
Одним із ключових аспектів є вибір фронтенд технологій. Наприклад, вибір 
між популярними фреймворками, такими як React.js, Angular або Vue.js, залежить 
від вимог проєкту, навичок команди розробників та специфіки веб-додатка. 
Для бекенду також важливо обрати оптимальний стек технологій. Наприклад, 
використання Node.js разом з фреймворком Express може забезпечити швидку 
розробку та високу продуктивність. Але для більш складних проєктів може бути 
вибраний Java Spring або Python Django для стабільності та масштабованості. 
Крім того, важливим аспектом є вибір системи управління базами даних 
(СУБД). PostgreSQL, MySQL, MongoDB - це лише деякі з варіантів, які можуть бути 
використані в залежності від потреб проєкту. 
Дослідження предметної області також включає в себе аналіз сучасних 
тенденцій веб-розробки, таких як серверне рендерінг, статичне сайтогенерація, а 
також використання мікросервісної архітектури та контейнеризації для підвищення 
масштабованості та надійності додатків. 
Отже, конкретизація предметної області полягає в аналізі та виборі 
оптимального набору технологій та їх конфігурації для досягнення максимальної 
продуктивності та ефективності веб-розробки в сучасному веб-середовищі. 
 
1.4 Переваги та недоліки існуючих рішень. 
Аналізуючи існуючі web-сервіси та web-додатки, можна визначити їхні 
ключові переваги та недоліки. Наприклад, деякі стеки можуть бути більш гнучкими 
та швидкими у розробці, але при цьому мати обмежену масштабованість. Інші 
можуть бути більш потужними, але вимагати великої кількості ресурсів. Важливо 
врахувати ці фактори при розробці нового стеку. Першим ключовим аспектом є 
вибір технічних засобів для розробки платформи. У даному випадку 
використовуються різноманітні інструменти, серед яких особливе місце займають 
React.js, Express.js, PostgreSQL, Back4App Service та Google Auth API. 
React.js є одним із найпопулярніших JavaScript-фреймворків, який 
використовується для створення користувацьких інтерфейсів веб-сайтів та веб-
додатків. Він дозволяє ефективно організувати компоненти і забезпечити високу 
швидкість відображення даних. Express.js, у свою чергу, є легким та гнучким 
фреймворком для побудови серверних додатків на базі Node.js. Використання цих 
інструментів дозволяє створювати ефективні та масштабовані веб-додатки. 
Для зберігання та управління даними використовується PostgreSQL - потужна 
та надійна реляційна база даних. Вона забезпечує можливість структурування 
інформації та здійснення різноманітних операцій з даними, необхідних для 
платформи інтернет-продажів книжкового контенту. 
Back4App Service є хмарною платформою, яка надає інструменти для 
розробки та хостингу мобільних та веб-додатків. Вона дозволяє розробникам 
швидко створювати складні додатки з використанням готових рішень та інтеграції з 
різноманітними сервісами. 
Google Auth API забезпечує можливість аутентифікації користувачів за 
допомогою облікових записів Google. Це забезпечує зручний та безпечний спосіб 
входу на платформу для користувачів. 
В результаті компоновки всього описаного стеку можна визначити наступні 
особливості кожної технології. React.js забезпечує високу швидкість роботи та 
ефективне організування компонентів, але може мати великий розмір веб-додатків. 
Express.js є легким та гнучким, але може мати меншу швидкодію на великих 
проєктах. PostgreSQL є потужною реляційною базою даних, але вимагає 
додаткового часу для налаштування. Back4App Service забезпечує швидку 
розгортання, але може бути дорогим для великих обсягів трафіку. Google Auth API 
надає зручний механізм аутентифікації, але може мати обмежену функціональність 
порівняно з іншими системами. 
Отже, при виборі технологій для нового стеку важливо зважити на їхні 
переваги та недоліки, а також врахувати конкретні потреби та вимоги проєкту. 
  
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ 
 
2.1 Вимоги до якості розроблюваної системи, критерії якості 
Розробка багатоцільової платформи інтернет-продажів у формі онлайн 
бібліотеки вимагає уважного відношення до якості системи на всіх її рівнях. 
Критерії якості визначаються з огляду на потреби користувачів, технічні можливості 
та стандарти галузі. 
Одним із важливих аспектів є зручність та ергономіка користувацького 
інтерфейсу. Система повинна бути інтуїтивно зрозумілою для будь-якого 
користувача, незалежно від його рівня технічної підготовки. Це означає, що 
інтерфейс має бути легким у використанні та навігації, з мінімальною кількістю 
кроків для досягнення потрібної мети. Крім того, він повинен бути адаптивним та 
оптимізованим під різні типи пристроїв та розміри екранів. 
Надійність системи - це ключовий аспект, який вимагає уваги. Система 
повинна працювати стабільно та без збоїв, забезпечуючи безперебійну роботу для 
користувачів. Це означає, що вона повинна бути стійкою до високих навантажень, 
відмовостійкою та мати механізми резервного копіювання даних для запобігання 
втрати інформації. 
Ще однією важливою характеристикою є швидкодія системи. Користувачі 
очікують миттєвої відповіді на свої дії, тому система повинна працювати ефективно 
та максимально швидко. Мінімізація часу завантаження сторінок, виконання запитів 
та обробки даних допоможе підвищити задоволення від використання системи. 
Функціональність - це також ключовий аспект, який впливає на якість 
системи. Вона повинна відповідати всім вимогам та потребам користувачів, 
забезпечуючи повний функціонал для здійснення покупок, пошуку необхідної 
інформації та керування контентом. Додаткові функції, такі як можливість 
зберігання списків покупок, рекомендації на основі попередніх виборів, також 
можуть підвищити корисність системи для користувачів. 
На окремий уваги потребує безпека системи. Вона повинна забезпечувати 
захист персональних даних користувачів та фінансових транзакцій, 
використовуючи сучасні методи шифрування та аутентифікації. Важливо також 
мати механізми виявлення та реагування на можливі загрози безпеки. 
Узагальнюючи, вимоги до якості системи включають у себе зручність та 
ергономіку, надійність, швидкодію, функціональність та безпеку. Відповідно до цих 
вимог формуються критерії якості, які визначаються з огляду на потреби 
користувачів та вимоги до роботи системи. 
 
2.2 Огляд систем проєкту 
Система інтернет-продажів у формі онлайн бібліотеки складається з різних 
компонентів, які пов'язані між собою для забезпечення її ефективної роботи. Одним 
з головних компонентів є клієнтська частина, що включає в себе веб-інтерфейс, який 
взаємодіє з користувачем. Цей інтерфейс надає можливість користувачам шукати 
книги, переглядати їхні описи та зображення, додавати їх до кошика та оформляти 
замовлення. Крім того, він повинен бути інтуїтивно зрозумілим та легким у 
використанні, щоб забезпечити приємний досвід користувачів. 
Ще одним важливим компонентом є серверна частина системи, яка відповідає 
за обробку запитів користувачів та управління базою даних. Серверна частина 
побудована на основі технологій Express.js та PostgreSQL. Вона приймає запити від 
клієнтської частини, обробляє їх та повертає відповіді. Крім того, сервер забезпечує 
аутентифікацію користувачів за допомогою Google Auth API, що дозволяє 
забезпечити безпеку та конфіденційність даних. 
Одним з ключових компонентів системи є адміністративна панель, яка 
дозволяє адміністраторам управляти контентом і керувати роботою системи. Ця 
панель має включати в себе можливість додавання, редагування та видалення книг, 
керування замовленнями, а також перегляд аналітичної інформації про продажі. 
Вона повинна бути доступна тільки авторизованим користувачам з 
адміністративними правами. 
Однією з основних вимог до системи є забезпечення її інтеграції з зовнішніми 
інформаційними системами, зокрема з Back4App Service. Це може включати в себе 
обмін даними про замовлення та користувачів, синхронізацію даних про наявність 
книг та їх оновлення. 
У сценаріях використання системи передбачається, що користувачі зможуть 
зареєструватися в системі за допомогою Google Auth API, шукати книги за різними 
категоріями, додавати їх до кошика, оформляти замовлення та переглядати історію 
своїх покупок. Адміністратори зможуть увійти до адміністративної панелі, додавати 
нові книги, редагувати існуючі, керувати замовленнями та аналізувати дані про 
продажі. 
Загальною метою побудови системи є створення зручної та функціональної 
платформи для онлайн-продажу книг, що задовольняє потреби користувачів та 
забезпечує їхню задоволеність від використання. Для досягнення цієї мети 
необхідно грамотно розробити всі компоненти системи та забезпечити їх взаємодію 
для досягнення гармонійної та ефективної роботи. 
 
Висновки до 2 розділу 
Розробка багатоцільової платформи інтернет-продажів у формі онлайн 
бібліотеки є комплексним процесом, що вимагає дотримання ряду критеріїв якості 
для забезпечення ефективної та безперебійної роботи системи. Перш за все, важливо 
забезпечити зручність та ергономіку користувацького інтерфейсу. Інтерфейс 
повинен бути інтуїтивно зрозумілим, зручним для навігації та адаптивним під різні 
пристрої. Це дозволяє користувачам легко орієнтуватися на платформі, незалежно 
від їх технічної підготовки. 
Швидкодія також відіграє важливу роль у забезпеченні якості системи. 
Користувачі очікують швидкої реакції на свої дії, тому система повинна 
забезпечувати мінімальний час завантаження сторінок, виконання запитів та 
обробки даних. Це значно підвищує задоволення користувачів від використання 
платформи. 
Функціональність системи повинна відповідати всім потребам користувачів. 
Платформа повинна надавати можливість здійснення покупок, пошуку необхідної 
інформації та керування контентом. Додаткові функції, такі як можливість 
зберігання списків покупок і рекомендації на основі попередніх виборів, також 
сприяють підвищенню корисності системи. 
Загалом, вимоги до якості системи включають зручність, ергономіку, 
надійність, швидкодію, функціональність та безпеку. Ці критерії визначаються з 
огляду на потреби користувачів та вимоги до роботи системи, забезпечуючи її 
ефективність та задоволення користувачів. Огляд систем проєкту показує, що 
система інтернет-продажів у формі онлайн бібліотеки складається з різних 
компонентів, які забезпечують її ефективну роботу. Клієнтська частина, що включає 
веб-інтерфейс, забезпечує взаємодію з користувачем, надаючи можливість шукати 
книги, переглядати їхні описи, додавати до кошика та оформляти замовлення. 
Інтерфейс повинен бути інтуїтивно зрозумілим та легким у використанні, щоб 
забезпечити приємний досвід для користувачів. 
Серверна частина системи відповідає за обробку запитів користувачів та 
управління базою даних. Використання технологій Express.js та PostgreSQL 
дозволяє забезпечити стабільну та ефективну роботу сервера. Сервер також 
забезпечує аутентифікацію користувачів за допомогою Google Auth API, що сприяє 
безпеці та конфіденційності даних. Інтеграція з зовнішніми інформаційними 
системами, зокрема з Back4App Service, є ще однією важливою вимогою. Це 
включає обмін даними про замовлення та користувачів, синхронізацію даних про 
наявність книг та їх оновлення. Така інтеграція дозволяє забезпечити актуальність і 
точність даних, що є важливим для ефективної роботи системи. 
Сценарії використання системи передбачають реєстрацію користувачів за 
допомогою Google Auth API, пошук книг за різними категоріями, додавання до 
кошика, оформлення замовлень та перегляд історії покупок. Адміністратори 
зможуть додавати нові книги, редагувати існуючі, керувати замовленнями та 
аналізувати дані про продажі через адміністративну панель. 
Розробка даної платформи включає кілька ключових етапів, кожен з яких 
спрямований на забезпечення високої якості та функціональності системи. Таким 
чином, розробка багатоцільової платформи інтернет-продажів у формі онлайн 
бібліотеки є складним, але важливим процесом, який вимагає уваги до деталей та 
дотримання високих стандартів якості.  
РОЗДІЛ 3. РОЗРОБКА СИСТЕМИ 
 
3.1 Вибір засобів реалізації системи та їх обґрунтування. 
Для розробки системи інтернет-продажів у формі онлайн бібліотеки був 
обраний певний технологічний стек, що включає в себе редактор коду VS Code, 
графічний редактор Figma, сервіс для зберігання даних Back4App, серверну частину 
на базі Express.js, клієнтську частину на React.js та тестування серверної частини за 
допомогою Postman. 
Основними перевагами використання VS Code являються його широкі 
можливості розширення, швидкодія та відмінна підтримка різних мов 
програмування. Цей редактор є одним з найпопулярніших серед розробників 
завдяки своїй простоті та продуктивності. Figma відмінно підходить для дизайну 
інтерфейсу користувача, оскільки дозволяє спрощувати процес створення 
прототипів та макетів, а також забезпечує можливість спільної роботи над проєктом 
в реальному часі. 
Back4App вибраний як сервіс для зберігання даних через свою гнучкість та 
можливості розширення. Він базується на технології Parse Server, що дозволяє 
швидко розгортати та масштабувати додатки. Back4App надає готові шаблони для 
реалізації різних функціональних можливостей, таких як аутентифікація 
користувачів, управління даними та інші, що робить його привабливим вибором для 
створення інтернет-продажів. 
Express.js був обраний для реалізації серверної частини через свою простоту 
та широкі можливості. Він базується на Node.js та дозволяє швидко створювати 
масштабовані та ефективні веб-додатки. Express.js забезпечує можливість швидко 
налаштувати сервер, обробляти запити, працювати з базою даних та інтегруватися з 
іншими сервісами. 
React.js був обраний для клієнтської частини системи через його зручний 
компонентний підхід та велику спільноту розробників. Він дозволяє побудувати 
високопродуктивні та динамічні інтерфейси, що реагують на зміни в реальному часі. 
React.js спрощує розробку складних клієнтських додатків та забезпечує їх підтримку 
та розвиток у майбутньому. 
Postman був обраний для тестування серверної частини системи через його 
зручний інтерфейс та широкі можливості. Він дозволяє швидко створювати та 
виконувати тести API, перевіряти правильність відповідей сервера та виявляти 
можливі помилки. Postman дозволяє автоматизувати тестування та забезпечує 
зручні інструменти для аналізу результатів. 
 
3.2 Опис структурної схеми. 
У сучасному світі цифрові технології відіграють вирішальну роль у розвитку 
комерції, зокрема у книжковій індустрії. Веб-магазини книжок стали популярними 
завдяки своїй зручності, широкому асортименту та можливості робити покупки 
онлайн, не виходячи з дому. Моя дипломна робота присвячена розробці 
функціональної архітектури веб-магазину книжок, який забезпечить зручний та 
ефективний процес покупки для користувачів. 
Однією з головних переваг веб-магазинів є можливість надання користувачам 
широкого спектра функцій для пошуку, перегляду та придбання товарів. 
Користувачі можуть швидко знайти необхідну книжку, переглянути її деталі, 
прочитати відгуки інших покупців, додати товар до кошика або списку улюблених 
та оформити замовлення. Така інтеграція різних функцій створює зручний та 
інтуїтивно зрозумілий користувацький досвід, що є ключовим аспектом успішної 
електронної комерції. 
Успішний веб-магазин книжок повинен мати не лише привабливий дизайн, 
але й логічну та зрозумілу структуру. Важливо забезпечити легкий доступ до 
основних функцій, таких як пошук товарів, фільтрація результатів, перегляд 
детальної інформації про товари та процес оформлення замовлення. Користувачі 
повинні мати можливість швидко знаходити потрібні їм книжки та без зусиль 
проходити всі етапи покупки. 
Метою цієї дипломної роботи є створення структурної схеми, яка відображає 
всі основні компоненти веб-магазину книжок та їхні взаємозв’язки. Ця схема стане 
основою для подальшого розроблення повнофункціонального веб-додатку, що 
забезпечить ефективний та зручний процес покупки книжок для користувачів. У 
своїй роботі я зосереджуся на ключових функціях веб-магазину, таких як головна 
сторінка, кошик, форма замовлення, список улюблених товарів, компонент 
авторизації та пошук. 
Веб-магазини книжок є важливим інструментом для задоволення потреб 
сучасних користувачів, які цінують зручність та швидкість покупок онлайн. 
Створення структурованої архітектури є першим кроком до розробки успішного 
веб-магазину, що відповідатиме вимогам ринку та надаватиме користувачам 
приємний досвід покупок. 
Структурна схема проєкту (рис. 3.1) ілюструє функціональну архітектуру веб-
магазину книжок, яку я розробляю у рамках своєї дипломної роботи. Схема 
складається з кількох ключових компонентів, кожен з яких відіграє важливу роль у 
забезпеченні функціональності та зручності користування веб-магазином. 
 
Рисунок 3.1 – Структурна схема проєкту 
 
Почнемо з головної сторінки. Головна сторінка є відправною точкою для 
користувачів веб-магазину. На цій сторінці відображається список товарів, 
доступних для покупки. Цей список містить різні книжки, які можуть зацікавити 
покупців. Користувачі можуть переглядати цей список і вибирати конкретні книжки 
для перегляду детальнішої інформації про них. 
Коли користувач вибирає певну книжку зі списку товарів, він переходить на 
сторінку товару. На цій сторінці відображається детальна інформація про вибрану 
книжку, включаючи її опис, автора, ціну, обкладинку та відгуки інших покупців. 
Сторінка товару також містить кнопки для додавання книжки до кошика або до 
списку улюблених товарів. 
Кошик є наступним важливим компонентом веб-магазину. Користувачі 
можуть додавати книжки до свого кошика, плануючи їх покупку. Кошик відображає 
всі вибрані товари, їхню загальну вартість і дозволяє користувачам редагувати 
кількість кожної книжки або видаляти книжки з кошика. Після завершення вибору 
товарів користувачі можуть перейти до форми замовлення. 
Форма замовлення є місцем, де користувачі вводять свої дані для доставки та 
оплати. Вони повинні вказати свою адресу, контактні дані та вибрати спосіб оплати. 
Після заповнення всіх необхідних полів користувачі можуть підтвердити своє 
замовлення, і їхня покупка буде оброблена. 
Список "улюблених" товарів є додатковою функцією, яка дозволяє 
користувачам зберігати книжки, які вони хотіли б придбати в майбутньому. Ця 
функція особливо корисна для тих, хто хоче відстежувати цікаві їм книжки без 
необхідності додавати їх до кошика відразу. 
Компонент авторизації є важливою частиною веб-магазину, що забезпечує 
безпеку та персоналізацію користувацького досвіду. Користувачі можуть 
створювати облікові записи, входити до системи і зберігати свої дані, такі як адреси 
доставки та історія замовлень. Це також дозволяє користувачам швидше 
завершувати покупки, оскільки їхні дані зберігаються в системі. 
Пошук є критично важливим елементом для будь-якого веб-магазину, 
оскільки він дозволяє користувачам швидко знаходити потрібні їм товари. 
Користувачі можуть вводити ключові слова в пошуковий рядок на головній 
сторінці, після чого система відображає результати пошуку. Сторінка результату 
пошуку товарів містить всі книжки, що відповідають запиту користувача, і дозволяє 
швидко знайти потрібну книжку серед великої кількості товарів. 
Сторінка результату пошуку товарів по категорії є додатковою функцією, яка 
дозволяє користувачам фільтрувати товари за певними категоріями, такими як жанр, 
автор або ціна. Це полегшує навігацію по веб-магазину і допомагає користувачам 
знаходити книжки, що відповідають їхнім інтересам та бюджету. 
Схема також показує взаємозв'язки між різними компонентами. Наприклад, з 
головної сторінки користувач може перейти до списку товарів, а звідти – до сторінки 
товару. Користувач також може використовувати пошук, щоб потрапити на сторінку 
результату пошуку товарів або результату пошуку товарів по категорії. З кожної з 
цих сторінок користувач може додавати товари до кошика або до списку улюблених 
товарів, після чого перейти до форми замовлення для завершення покупки. 
Загалом, ця схема ілюструє, як різні частини веб-магазину книжок 
взаємодіють між собою, забезпечуючи користувачам зручний і ефективний спосіб 
пошуку, перегляду та покупки книжок. Основна мета цієї дипломної роботи – 
створити веб-магазин, що забезпечує простий і інтуїтивно зрозумілий 
користувацький досвід, водночас надаючи всі необхідні функції для успішного 
ведення електронної комерції в сфері продажу книжок. 
 
3.3 Опис логічних схем. 
У всесвіті розробки програмного забезпечення, де технології зростають з 
вражаючою швидкістю, а вимоги користувачів постійно змінюються, ключовим 
завданням стає не просто створення програм, але й забезпечення їхньої ефективності 
та функціональності. У цьому контексті логічні схеми веб-додатків стають 
невід'ємною складовою кожного інженерного процесу, що покликаний досягати цих 
цілей. Вони є інструментом, який допомагає розібратися в складних системах, 
зрозуміти їхню логіку та оптимізувати роботу. Розглядаючи їхню сутність, 
функціональність та ефективність, ми спробуємо відповісти на запитання, як вони 
сприяють вдосконаленню якості програм та забезпечують їхню стійкість у змінному 
середовищі Інтернету. 
 
3.3.1 Опис логічної схеми неавторизованого користувача. 
Дана логічна схема (рис. 3.2) ілюструє взаємодію неавторизованого 
користувача з веб-магазином книжок. Вона деталізує основні функціональні 
можливості, доступні користувачам без авторизації, а також кроки, які користувач 
повинен пройти, щоб отримати доступ до розширених функцій шляхом авторизації. 
Ця схема є ключовою для розуміння того, як забезпечити зручний користувацький 
досвід і стимулювати користувачів до авторизації для доступу до додаткових 
можливостей. 
 
Рисунок 3.2 – Логічна схема неавторизованого користувача 
 
Схема починається з питання "Авторизований користувач?". Це питання є 
центральним вузлом, від якого залежить подальший шлях користувача. Якщо 
користувач є авторизованим, він має доступ до всіх функцій, таких як публікація 
відгуків про товар та комунікація зі "Списком улюблених товарів". Якщо ж 
користувач не авторизований, його можливості обмежуються базовими функціями, 
такими як перегляд товарів, пошук товарів та комунікація з кошиком. 
Неавторизований користувач може розпочати взаємодію з веб-магазином з 
перегляду товарів. Перегляд товарів включає можливість ознайомлення з 
асортиментом книжок, їх описами, цінами та іншою доступною інформацією. 
Користувач може переглядати різні категорії товарів, фільтрувати їх за певними 
критеріями, наприклад, жанром чи автором, що дозволяє знайти потрібні книжки 
швидше і зручніше. 
Наступний крок після перегляду товарів – це пошук товарів. Функція пошуку 
дозволяє користувачам швидко знаходити конкретні книжки, використовуючи 
ключові слова або фрази. Це значно підвищує зручність користування веб-
магазином, особливо якщо асортимент товарів великий. Пошук товарів є важливою 
функцією, яка допомагає користувачам економити час і знаходити саме ті книжки, 
які вони шукають. 
Якщо неавторизований користувач знаходить цікаві книжки, він може додати 
їх до кошика. Комунікація з кошиком дозволяє користувачеві збирати обрані товари 
для подальшого оформлення замовлення. У кошику користувач може переглядати 
список вибраних книжок, редагувати їх кількість або видаляти ті, які більше не 
цікавлять. Цей процес є важливим етапом перед оформленням замовлення. 
Коли користувач готовий завершити покупку, він переходить до оформлення 
та замовлення товарів. На цьому етапі користувач вводить необхідні дані для 
доставки та оплати. Проте для неавторизованого користувача цей процес може бути 
обмеженим або включати додаткові кроки, такі як заповнення форми реєстрації або 
авторизації для завершення замовлення. Це підштовхує користувачів до створення 
облікового запису, що забезпечує зручність для подальших покупок і доступ до 
розширених можливостей веб-магазину. 
Якщо користувач не бажає авторизуватися, його взаємодія з веб-магазином 
буде обмежена базовими функціями. Важливо зазначити, що неавторизовані 
користувачі не можуть публікувати відгуки про товари, оскільки ця функція вимагає 
підтвердження особи для запобігання спаму та забезпечення автентичності відгуків. 
Крім того, неавторизовані користувачі не мають доступу до "Списку улюблених 
товарів". Цей список дозволяє авторизованим користувачам зберігати книжки, які 
вони хотіли б придбати в майбутньому, що є зручною функцією для регулярних 
покупців. 
Стимулювання користувачів до авторизації є важливою частиною стратегії 
веб-магазину. Авторизовані користувачі отримують доступ до додаткових функцій, 
що підвищують їхній користувацький досвід. Це включає можливість публікувати 
відгуки, які допомагають іншим користувачам приймати рішення щодо покупки, та 
користування "Списком улюблених товарів", який дозволяє відстежувати цікаві 
книжки. Процес авторизації передбачає створення облікового запису або вхід до 
існуючого облікового запису. Авторизація забезпечує безпеку та персоналізацію 
досвіду користувачів, зберігаючи їхні дані, такі як адреси доставки та історія 
замовлень. 
Таким чином, логічна схема описує два основні сценарії взаємодії користувача 
з веб-магазином книжок – як авторизованого, так і неавторизованого. 
Неавторизовані користувачі мають доступ до основних функцій, таких як перегляд, 
пошук та додавання товарів до кошика, що дозволяє їм ознайомитися з 
асортиментом і здійснити покупку. Проте для доступу до додаткових можливостей, 
таких як публікація відгуків та комунікація зі "Списком улюблених товарів", 
користувачі повинні пройти процес авторизації. Це забезпечує більш повний та 
зручний користувацький досвід, стимулює користувачів до реєстрації та створює 
базу лояльних клієнтів для веб-магазину. 
Загалом, ця логічна схема допомагає зрозуміти, як різні функціональні 
компоненти веб-магазину книжок взаємодіють між собою, і як забезпечити зручний 
і ефективний процес покупки для користувачів. Схема також підкреслює важливість 
авторизації для доступу до розширених функцій, що є ключовим елементом 
стратегії залучення та утримання клієнтів у сучасній електронній комерції. 
 
3.3.2 Опис логічної схеми авторизованого користувача. 
Дана логічна схема (рис. 3.3) демонструє можливості, доступні авторизованим 
користувачам веб-магазину книжок. Вона відображає, як авторизація розширює 
функціональні можливості користувача і забезпечує доступ до додаткових сервісів, 
які покращують користувацький досвід та стимулюють лояльність. Ця схема є 
ключовим елементом для розуміння взаємодії користувача з системою та 
підкреслює переваги авторизації. 
 
Рисунок 3.3 – Логічна схема авторизованого користувача 
 
Авторизація є важливим етапом, що дозволяє користувачам скористатися 
розширеними можливостями веб-магазину. Авторизований користувач має доступ 
до всіх функцій сайту, включаючи публікацію відгуків про товар, комунікацію зі 
"Списком улюблених товарів", комунікацію з кошиком, оформлення та замовлення 
товарів, перегляд товарів та їх пошук. Кожна з цих функцій детально описується 
далі, з акцентом на її значення та користь для користувача. 
Перша функція, доступна авторизованим користувачам, це публікація відгуків 
про товар. Відгуки відіграють важливу роль у формуванні думки інших покупців 
про продукт. Вони допомагають потенційним покупцям зробити обґрунтований 
вибір, спираючись на досвід інших користувачів. Авторизовані користувачі можуть 
залишати свої коментарі, оцінки та ділитися враженнями про придбані книжки. Це 
підвищує довіру до магазину та стимулює користувачів до активної участі у житті 
спільноти веб-магазину. 
Другою важливою функцією є комунікація зі "Списком улюблених товарів". 
Цей список дозволяє користувачам зберігати книжки, які вони планують придбати 
в майбутньому, або ті, що їм сподобалися під час перегляду. Наявність такого 
списку забезпечує зручність при плануванні покупок і поверненні до товарів, які вже 
привернули увагу користувача. Це також дозволяє магазину пропонувати 
персоналізовані рекомендації та спеціальні пропозиції для кожного користувача, що 
покращує користувацький досвід та підвищує лояльність клієнтів. 
 
Комунікація з кошиком є ще однією ключовою функцією для авторизованих 
користувачів. Кошик є місцем, де користувач може зберігати обрані для покупки 
товари перед оформленням замовлення. Авторизовані користувачі можуть 
переглядати вміст кошика, редагувати кількість товарів, видаляти товари або 
додавати нові. Важливою перевагою для авторизованих користувачів є те, що вміст 
кошика може зберігатися між сесіями, що дозволяє користувачам продовжувати 
покупки з того місця, де вони зупинилися, навіть якщо вони виходили з системи або 
переривали сесію. 
Оформлення та замовлення товарів є критично важливою функцією для будь-
якого веб-магазину. Авторизовані користувачі можуть легко і швидко оформлювати 
замовлення, використовуючи збережені дані для доставки та оплати. Це значно 
спрощує процес покупки, зменшуючи кількість необхідних кроків і знижуючи 
ймовірність помилок. Крім того, авторизовані користувачі можуть відстежувати 
статус своїх замовлень, отримувати повідомлення про етапи їх обробки та доставку, 
що підвищує прозорість процесу та задоволеність клієнтів. 
Перегляд товарів та їх пошук є базовими, але дуже важливими функціями для 
будь-якого користувача веб-магазину. Авторизовані користувачі мають доступ до 
розширених можливостей фільтрації та сортування товарів, що дозволяє швидко 
знаходити необхідні книжки за різними критеріями, такими як жанр, автор, ціна, 
рейтинг тощо. Пошук товарів забезпечує можливість швидко знаходити конкретні 
книжки, використовуючи ключові слова або фрази. Ці функції забезпечують 
зручність та ефективність у процесі пошуку потрібних товарів, що є важливим 
аспектом позитивного користувацького досвіду. 
Підсумовуючи, логічна схема показує, як авторизація відкриває для 
користувача доступ до розширених можливостей веб-магазину книжок. 
Авторизовані користувачі мають змогу повною мірою скористатися всіма 
функціями, що надаються магазином, що значно покращує їхній досвід взаємодії з 
платформою. Від можливості публікувати відгуки до збереження улюблених 
товарів і спрощеного процесу оформлення замовлень – всі ці функції спрямовані на 
те, щоб зробити покупки зручнішими та приємнішими. Це також стимулює 
користувачів реєструватися та авторизуватися, що в свою чергу допомагає магазину 
краще розуміти потреби своїх клієнтів та надавати їм персоналізовані пропозиції. 
Авторизація також підвищує безпеку та надійність взаємодії користувача з 
веб-магазином. Особисті дані користувачів, такі як адреси доставки та платіжна 
інформація, зберігаються у захищеній формі, що мінімізує ризики шахрайства та 
забезпечує конфіденційність інформації. Це підвищує довіру користувачів до веб-
магазину та стимулює їх робити покупки саме на цій платформі. 
Важливо також відзначити, що авторизовані користувачі можуть отримувати 
додаткові переваги, такі як участь у програмі лояльності, отримання бонусів або 
знижок, персоналізовані рекомендації та ексклюзивні пропозиції. Це створює 
додатковий стимул для користувачів проходити процес авторизації та активно 
користуватися можливостями, які надає веб-магазин. 
Таким чином, розробка логічної схеми, що описує можливості авторизованого 
користувача, є важливим кроком у створенні функціонального та зручного веб-
магазину книжок. Ця схема допомагає зрозуміти, як різні функції інтегруються між 
собою та як вони сприяють покращенню користувацького досвіду. Забезпечення 
доступу до розширених можливостей через авторизацію є ключовим елементом 
стратегії залучення та утримання клієнтів, що є критично важливим для успішної 
роботи веб-магазину в сучасному конкурентному середовищі. 
 
3.3.3 Опис логічної схеми взаємодії елементів архітектури додатка. 
Ця логічна схема (рис. 3.4) ілюструє взаємодію між клієнтською частиною, 
серверною частиною та базою даних в контексті різних функцій інтернет-магазину. 
 
Рисунок 3.4 – Логічна схема взаємодії елементів архітектури додатка 
 
На першому етапі користувач проходить авторизацію. Клієнтська частина 
надсилає запит на серверну частину для перевірки користувача. Серверна частина 
звертається до бази даних для перевірки наявності користувача в системі. Якщо 
користувач існує в базі даних, сервер видає права доступу у вигляді токена і 
повертає цей результат на клієнтську частину. У разі відсутності користувача в базі 
даних, сервер повертає помилку авторизації. 
Далі, при роботі з кошиком, клієнтська частина надсилає запит на сервер для 
додавання або видалення товару з кошика. Серверна частина перевіряє наявність 
товару в базі даних. Якщо товар в наявності, сервер виконує операцію (додає або 
видаляє товар) і повертає результат на клієнтську частину. У разі відсутності товару 
в базі даних, сервер повертає помилку про відсутність товару. 
Користувач також може працювати зі списком улюблених товарів. Для цього 
клієнтська частина надсилає запит на сервер для додавання або видалення товару зі 
списку. Сервер перевіряє, чи авторизований користувач. Якщо користувач 
авторизований, сервер виконує операцію і повертає відповідний результат на 
клієнтську частину. Якщо користувач не авторизований, сервер повертає помилку 
авторизації. 
Крім того, користувач може залишати відгуки про товари. Для цього 
клієнтська частина надсилає запит на сервер для додавання відгуку. Сервер 
перевіряє, чи авторизований користувач. Якщо користувач авторизований, сервер 
додає відгук і повертає результат на клієнтську частину. Якщо користувач не 
авторизований, сервер перенаправляє його на сторінку авторизації. 
Таким чином, вся взаємодія між клієнтською частиною, сервером та базою 
даних забезпечує функціонування інтернет-магазину, дозволяючи користувачам 
авторизуватися, керувати кошиком, працювати зі списком улюблених товарів та 
залишати відгуки про товари. 
 
3.4 Розробка бази даних. 
Перед тим як працювати над розробкою клієнтської та серверної частин, 
необхідно спочатку ретельно спроєктувати та створити таблиці в базі даних, а також 
встановити відношення між ними. Це є фундаментальним кроком, оскільки база 
даних є основою, на якій будується вся система. Належне проєктування бази даних 
забезпечує ефективність, продуктивність та зручність у подальшому використанні 
системи. Коли таблиці спроєктовані неправильно, це може призвести до проблем з 
продуктивністю, труднощів з масштабуванням, а також складнощів у підтримці та 
розширенні функціональності системи. 
Для цього процесу був обраний сервіс Back4App, який є потужним 
інструментом для роботи з базами даних. Back4App надає доступ до своїх 
можливостей оперування базою даних та дозволяє комунікувати з нею в коді через 
вбудовану ORM (Об'єктно-реляційну проєкцію). Використання Back4App полегшує 
роботу розробників, оскільки вони можуть швидко та ефективно створювати, 
змінювати та видаляти таблиці, а також встановлювати відношення між ними. 
Проєктування бази даних починається з визначення основних сутностей, які 
будуть зберігатися в базі даних. Кожна сутність відповідає певному аспекту або 
об'єкту системи, наприклад, користувачі, товари, замовлення та відгуки. Для кожної 
сутності необхідно визначити атрибути, які будуть зберігатися. Наприклад, сутність 
користувача може мати атрибути, такі як ім'я, прізвище, електронна пошта та 
пароль. Сутність товару може мати атрибути, такі як назва, опис, ціна та кількість 
на складі. 
Після визначення сутностей і їх атрибутів необхідно встановити відношення 
між ними. Відношення визначають, як сутності пов'язані одна з одною. Існують різні 
типи відношень, такі як один-до-одного, один-до-багатьох та багато-до-багатьох. 
Наприклад, відношення між користувачами та замовленнями може бути один-до-
багатьох, оскільки один користувач може робити багато замовлень, але кожне 
замовлення належить лише одному користувачеві. Відношення між товарами та 
замовленнями може бути багато-до-багатьох, оскільки одне замовлення може 
включати багато товарів, а один товар може бути включений у багато замовлень. 
Коли сутності та відношення між ними визначені, можна перейти до 
створення таблиць у базі даних. Таблиці створюються відповідно до сутностей, де 
кожен атрибут сутності стає колонкою таблиці. Відношення між сутностями 
реалізуються за допомогою зовнішніх ключів. Наприклад, у таблиці замовлень може 
бути зовнішній ключ, який посилається на таблицю користувачів, що вказує, який 
користувач зробив певне замовлення. 
Back4App спрощує цей процес, надаючи інтуїтивно зрозумілий інтерфейс для 
створення та управління таблицями. Розробники можуть створювати таблиці, 
додавати колонки та встановлювати відношення між таблицями за допомогою 
декількох кліків. Крім того, Back4App підтримує автоматичне створення індексів 
для колонок, що часто використовуються в запитах, що покращує продуктивність 
бази даних. 
Крім створення таблиць і встановлення відношень, важливо також розглянути 
питання безпеки бази даних. Back4App надає інструменти для управління доступом 
до даних, дозволяючи налаштовувати права доступу на рівні таблиць та колонок. Це 
забезпечує захист конфіденційних даних і гарантує, що тільки авторизовані 
користувачі можуть отримувати доступ до певних даних. 
Однією з ключових переваг використання Back4App є підтримка ORM 
(Об'єктно-реляційної проєкції). ORM дозволяє розробникам працювати з базою 
даних, використовуючи об'єктно-орієнтовані концепції. Це означає, що розробники 
можуть маніпулювати даними в базі даних, використовуючи об'єкти та їх методи, 
замість написання складних SQL-запитів. ORM автоматично переводить об'єктно-
орієнтований код у відповідні SQL-запити, що спрощує розробку та знижує ризик 
помилок. 
Крім того, використання ORM полегшує підтримку та розширення коду. 
Замість того, щоб вручну писати SQL-запити для кожної операції з базою даних, 
розробники можуть використовувати методи об'єктів, що значно зменшує обсяг 
коду і покращує його читабельність. Це особливо важливо при роботі з великими 
проєктами, де зміни в структурі бази даних можуть вимагати оновлення багатьох 
SQL-запитів. Завдяки ORM, ці зміни можна зробити більш ефективно і з меншими 
витратами часу. 
Back4App також надає можливості для масштабування бази даних. Коли 
кількість даних у базі збільшується або коли збільшується навантаження на систему, 
важливо, щоб база даних могла масштабуватися відповідно до потреб. Back4App 
підтримує автоматичне масштабування бази даних, що забезпечує стабільну роботу 
системи навіть при значних навантаженнях. Це особливо важливо для інтернет-
магазинів та інших систем з великою кількістю користувачів і даних. 
Ще однією важливою перевагою Back4App є підтримка резервного 
копіювання даних. Резервне копіювання є критично важливим аспектом управління 
базою даних, оскільки воно забезпечує захист від втрати даних у випадку збою 
системи або інших непередбачених обставин. Back4App автоматично створює 
резервні копії даних і дозволяє розробникам відновлювати дані з резервних копій у 
разі потреби. 
У підсумку, проєктування та створення таблиць в базі даних є ключовим 
етапом у розробці системи. Використання сервісу Back4App значно спрощує цей 
процес, надаючи потужні інструменти для управління базою даних, встановлення 
відношень між таблицями, забезпечення безпеки даних, підтримки ORM, 
масштабування та резервного копіювання. Це дозволяє розробникам зосередитися 
на створенні функціональності системи, не витрачаючи багато часу на управління 
базою даних. Завдяки цьому підходу можна створювати ефективні, масштабовані та 
надійні системи, які задовольняють потреби користувачів і забезпечують стабільну 
роботу в умовах високих навантажень. 
 
3.4.1 Опис таблиць та відношень між ними. 
Основними таблицями в базі даних стали такі: користувач, кошик, товари, 
список улюблених, автори книг, категорії товарів і відгуки про товари. Кожна з цих 
таблиць має свої унікальні поля, які відіграють важливу роль у функціонуванні 
системи. 
Таблиця користувача включає в себе поля, необхідні для відображення його 
даних. Це поля, такі як ім'я користувача, пароль, електронна пошта, номер телефону 
та токен авторизації. Ім'я користувача є ключовим ідентифікатором, який дозволяє 
розрізняти одного користувача від іншого. Пароль необхідний для захисту 
облікового запису користувача, забезпечуючи доступ до системи лише 
авторизованим особам. Електронна пошта є важливим полем, оскільки 
використовується для підтвердження облікового запису, відновлення пароля та 
комунікації з користувачем. Номер телефону може бути корисним для додаткової 
аутентифікації та комунікації з користувачем, наприклад, для надсилання 
повідомлень про статус замовлення. Токен авторизації використовується для 
підтримки сесії користувача, дозволяючи йому залишатися авторизованим протягом 
певного періоду часу без необхідності повторного введення пароля. 
Таблиця відгуків містить поля, які дозволяють відстежувати відгуки 
користувачів про товари. Поля включають ідентифікатор книги, до якої відгук 
відноситься, ідентифікатор користувача, який зробив цей відгук, текст відгуку, що 
користувач вписав, та рейтинг. Ідентифікатор книги дозволяє точно визначити, до 
якого товару відноситься відгук, що є важливим для зв'язування відгуків з 
конкретними товарами. Ідентифікатор користувача дозволяє визначити, хто 
залишив відгук, що може бути корисним для відстеження активності користувачів 
та забезпечення автентичності відгуків. Текст відгуку є основною частиною, в якій 
користувач висловлює свою думку про товар. Рейтинг, що є числовим значенням, 
допомагає кількісно оцінити товар, дозволяючи іншим користувачам бачити 
середню оцінку товару. 
Таблиця товарів включає поля, що містять інформацію про кожен товар. Це 
такі поля, як назва книги, її опис, доповнена інформація, ідентифікатор автора, 
рейтинг книги та інші поля, що доповнюють інформацію про книгу. Назва книги є 
основним ідентифікатором товару, що дозволяє користувачам швидко знаходити 
потрібний товар. Опис книги надає користувачам детальну інформацію про товар, 
допомагаючи їм прийняти рішення про покупку. Доповнена інформація може 
включати додаткові деталі, такі як кількість сторінок, дата випуску, мова видання та 
інші характеристики, що допомагають користувачам краще зрозуміти товар. 
Ідентифікатор автора зв'язує книгу з її автором, що є важливим для відстеження 
творів конкретного автора. Рейтинг книги обчислюється як середнє значення всіх 
рейтингів, залишених користувачами у відгуках. Це поле допомагає користувачам 
швидко оцінити якість товару на основі відгуків інших користувачів. 
Таблиця авторів містить поля, що описують авторів книг. Вона включає поля, 
такі як ім'я автора та ідентифікатор книги, до якої цей автор прив'язаний. Ім'я автора 
дозволяє користувачам ідентифікувати автора, а ідентифікатор книги забезпечує 
зв'язок між автором та його творами, що дозволяє легко знайти всі книги певного 
автора. 
Таблиця категорій товарів включає поля, що допомагають організувати товари 
за категоріями. Поля включають назву категорії та ідентифікатор книги, до якої ця 
категорія прив'язана. Назва категорії дозволяє організувати товари в логічні групи, 
що полегшує навігацію та пошук для користувачів. Ідентифікатор книги забезпечує 
зв'язок між товаром і його категорією, що дозволяє швидко визначити, до якої 
категорії належить конкретний товар. 
Таблиці кошика та списку улюблених товарів дуже схожі за своєю 
структурою. Обидві таблиці містять поля, такі як ідентифікатор книги та 
ідентифікатор користувача для зв'язку. Ідентифікатор книги дозволяє визначити, які 
товари знаходяться в кошику або списку улюблених конкретного користувача, а 
ідентифікатор користувача зв'язує ці товари з конкретним користувачем. Однак, 
таблиця кошика додатково містить поле, яке визначає, чи купив користувач цей 
товар чи ні. Це поле є важливим для майбутнього відображення товарів у списку 
куплених на сторінці користувача, що дозволяє користувачам легко переглядати 
історію своїх покупок. 
Таким чином, структура бази даних охоплює всі основні аспекти 
функціонування інтернет-магазину. Таблиця користувача забезпечує зберігання та 
управління даними користувачів, включаючи їхні облікові записи та інформацію для 
авторизації. Таблиця відгуків дозволяє відстежувати відгуки користувачів про 
товари, забезпечуючи зворотний зв'язок та оцінку товарів. Таблиця товарів містить 
детальну інформацію про кожен товар, включаючи назву, опис, додаткові 
характеристики, ідентифікатор автора та рейтинг. Таблиця авторів дозволяє 
відстежувати авторів книг та зв'язувати їхні твори з товарами в системі. Таблиця 
категорій товарів організовує товари за категоріями, полегшуючи навігацію та 
пошук для користувачів. Таблиці кошика та списку улюблених товарів 
забезпечують зберігання інформації про товари, які користувачі додали до своїх 
кошиків або списків улюблених, дозволяючи легко керувати покупками та 
бажаними товарами. 
 
3.5 Розробка інтерфейсу користувача. 
Для розробки інтерфейсу користувача була використана програма Figma. Це 
потужний інструмент, який дозволяє дизайнерам створювати, тестувати та 
оптимізувати візуальні компоненти інтерфейсу. Використання Figma значно 
спрощує процес розробки, забезпечуючи можливість створювати інтерактивні 
прототипи, які допомагають краще зрозуміти, як користувачі взаємодіють з 
системою. Скріншот головної сторінки, на якій розміщені основні компоненти, що 
будуть описуватись нижче, наведено в додатку А.  
Одним з ключових компонентів, є навігація. Навігація відіграє важливу роль 
у забезпеченні зручності використання, дозволяючи користувачам легко переходити 
між різними розділами та функціями системи. У межах навігаційної системи були 
створені кнопки кошика, списку улюблених товарів та авторизації. Кнопка кошика 
дозволяє користувачам швидко переглядати та керувати своїми покупками, 
додаючи або видаляючи товари з кошика. Кнопка списку улюблених товарів надає 
можливість зберігати товари, які користувачі планують придбати в майбутньому або 
які їм просто подобаються. Кнопка авторизації дозволяє користувачам увійти в 
систему або створити новий обліковий запис, забезпечуючи доступ до 
персоналізованих функцій і налаштувань. 
Інші важливі компоненти інтерфейсу, створені за допомогою Figma, 
включають список товарів та сам товар як підкомпонент. Список товарів є основним 
елементом, що відображає всі доступні товари для користувачів. Він дозволяє 
користувачам швидко переглядати різні товари, порівнювати їх і приймати рішення 
про покупку. Кожен товар у списку товарів є підкомпонентом, який містить 
детальну інформацію про конкретний товар, включаючи назву, опис, ціну, рейтинг 
та інші характеристики. Це дозволяє користувачам отримати всю необхідну 
інформацію про товар без необхідності переходити на окрему сторінку. 
Ще одним важливим компонентом інтерфейсу є відгуки. Відгуки дозволяють 
користувачам ділитися своєю думкою про товари, залишаючи коментарі та оцінки. 
Це створює зворотний зв'язок, який допомагає іншим користувачам приймати 
обґрунтовані рішення про покупку. Відгуки також дозволяють продавцям 
отримувати цінні відгуки про свої товари, що може допомогти покращити якість 
товарів і обслуговування. 
Далі, буде наведено опис основних компонентів зазначених вище. 
 
3.5.1 Навігація. 
На навігації розміщено декілька елементів, які буде бачити користувач на будь 
якій сторінці, для того щоб він міг ефективно взаємодіяти з тими функціями, які 
навігація має. 
Логотип розміщений у верхньому лівому куті навігаційної панелі, що 
відповідає звичкам користувачів та загальноприйнятим стандартам веб-дизайну. 
Крім того, логотип часто слугує посиланням на головну сторінку, що дозволяє 
користувачам швидко повернутися до основного екрану з будь-якої точки сайту. 
Наступним важливим елементом навігації є кнопка з категоріями товарів. Ця 
кнопка надає користувачам доступ до різних категорій товарів, що дозволяє їм 
швидко знайти потрібні продукти. Коли користувач натискає на цю кнопку, 
відкривається випадаючий список, що містить всі доступні категорії. Це дозволяє 
користувачам швидко перемикатися між різними розділами сайту, полегшуючи 
процес пошуку та вибору товарів. 
Поле пошуку є ще одним ключовим елементом навігаційної панелі. Воно 
дозволяє користувачам швидко знайти конкретні товари або інформацію, ввівши 
відповідні ключові слова. Поле пошуку розміщується в центрі навігаційної панелі, 
щоб бути легко доступним для користувачів. Коли користувач вводить пошуковий 
запит, система пропонує варіанти автозаповнення або відображає список 
відповідних результатів у реальному часі. Це значно полегшує процес пошуку, 
дозволяючи користувачам знаходити потрібні товари без необхідності переглядати 
всі сторінки сайту. Крім того, поле пошуку має додаткові фільтри, що дозволяють 
уточнити результати пошуку. 
Кнопки кошика, списку улюблених товарів та авторизації також є важливими 
елементами навігаційної панелі. Кнопка кошика дозволяє користувачам 
переглядати та керувати своїми покупками. Натиснувши на цю кнопку, користувачі 
можуть побачити список товарів, які вони додали до кошика, переглянути загальну 
суму замовлення та перейти до оформлення покупки. Це забезпечує зручний доступ 
до інформації про покупки та полегшує процес оформлення замовлення. 
 
3.5.1.1 Кнопки кошика, списка улюблених товарів та авторизації. 
Кнопки кошика, списку улюблених товарів та авторизації є ключовими 
елементами навігації веб-додатку, забезпечуючи користувачам зручний доступ до 
важливих функцій. Кнопка кошика надає можливість користувачам вибрати ті 
книги, які вони хочуть замовити. Вона візуально показує кількість товарів, що 
знаходяться в кошику, дозволяючи користувачам швидко оцінити обсяг своїх 
покупок. Натиснувши на цю кнопку, користувач потрапляє на сторінку кошика, де 
може видалити товари, які він передумав замовляти, змінити кількість примірників 
кожного товару або, якщо він впевнений у своєму виборі, завершити замовлення, 
натиснувши на відповідну кнопку для оформлення замовлення. 
На сторінці оформлення замовлення користувачеві потрібно ввести необхідні 
дані, такі як особисті дані, адреса доставки та спосіб оплати. Якщо користувач 
зареєстрований і авторизований, поля, що відповідають за його особисту 
інформацію, автоматично заповнюються даними з його профілю, що значно 
спрощує процес оформлення замовлення. Це підвищує зручність користування, 
дозволяючи уникнути зайвих кроків і зосередитися на основних діях. Кнопка 
кошика відіграє важливу роль у забезпеченні ефективності та зручності процесу 
покупки, роблячи його швидким і інтуїтивно зрозумілим. 
Кнопка списку улюблених товарів дозволяє користувачам зберігати товари, 
які їм подобаються, але які вони поки що не планують замовляти. У цьому списку 
користувач може переглядати товари, додані до улюблених, і видаляти ті, які більше 
не викликають його інтерес. Список улюблених товарів забезпечує користувачам 
можливість зберігати цікаві для них товари та повертатися до них у будь-який 
зручний час. Це корисно для користувачів, які хочуть зберегти певні товари для 
майбутніх покупок або просто слідкувати за змінами в ціні або наявності товарів. 
Список улюблених товарів доступний тільки авторизованим користувачам, що 
забезпечує збереження персональної інформації та налаштувань. 
Якщо неавторизований користувач натискає на кнопку списку улюблених 
товарів, його перенаправляє на модальне вікно з авторизацією. Це вікно містить 
форму для введення облікових даних або реєстрації нового облікового запису. 
Процес авторизації або реєстрації дозволяє користувачам отримати доступ до 
персоналізованих функцій веб-додатку, включаючи список улюблених товарів. Це 
забезпечує захист особистих даних і дозволяє зберігати налаштування користувача 
навіть після виходу з системи. 
Кнопка авторизації відкриває модальне вікно з формою для авторизації або 
реєстрації. Це вікно дозволяє користувачам увійти до свого облікового запису або 
створити новий, вводячи відповідні дані. Процес авторизації є простим і зрозумілим, 
що дозволяє користувачам швидко отримати доступ до свого облікового запису та 
персоналізованих налаштувань. На сайті також доступна функція авторизації через 
Google акаунт, що дозволяє користувачам входити до системи за допомогою своїх 
облікових даних Google. Це значно спрощує процес авторизації, оскільки 
користувачам не потрібно створювати новий обліковий запис, а достатньо 
використовувати існуючий акаунт Google. 
Функція авторизації через Google акаунт забезпечує додатковий рівень 
зручності та безпеки. Вона дозволяє уникнути введення додаткових даних і скорочує 
час на реєстрацію. Крім того, це підвищує безпеку облікових записів, оскільки 
користувачі можуть використовувати багатофакторну автентифікацію Google для 
додаткового захисту свого облікового запису. Це забезпечує користувачам 
впевненість у безпеці своїх даних та персоналізованого досвіду. 
Загалом, кнопки кошика, списку улюблених товарів та авторизації є 
важливими елементами, що забезпечують зручність та ефективність використання 
веб-додатку. Вони дозволяють користувачам легко керувати своїми покупками, 
зберігати цікаві товари для майбутнього та отримувати доступ до персоналізованих 
функцій, що значно покращує загальний досвід використання. Кожна з цих кнопок 
виконує свою унікальну функцію, сприяючи зручності та інтуїтивності веб-додатку, 
забезпечуючи користувачам легкий доступ до всіх необхідних функцій та 
інформації. 
 
 
3.5.2 Товар, як компонент 
У цьому проєкті товар виступає основним компонентом, навколо якого 
здійснюються всі ключові дії. Через це він інтегрований у безліч інших компонентів 
системи. Картка товару є основним елементом, що представляє коротку інформацію 
про кожен товар і вбудована у список разом з іншими картками. Ця картка має 
декілька важливих елементів, що забезпечують користувачеві швидкий доступ до 
необхідної інформації та можливостей взаємодії. 
По-перше, картка товару містить зображення книги, яке є візуальним 
представленням товару та допомагає користувачам швидко ідентифікувати книгу. 
Це зображення виконує важливу роль у залученні уваги користувачів та створенні 
візуального контексту для подальшої взаємодії. Зображення допомагає створити 
перше враження та стимулює інтерес до товару. 
По-друге, картка включає назву книги, що є одним із ключових інформаційних 
елементів. Назва книги дозволяє користувачам легко ідентифікувати товар та 
зрозуміти, про що йдеться. Назва також відіграє важливу роль у пошуку та 
сортуванні товарів, дозволяючи користувачам швидко знайти потрібний товар серед 
інших. 
Крім того, картка містить ім'я автора книги, що є важливим для користувачів, 
які цікавляться певними авторами або шукають нові книги від своїх улюблених 
письменників. Ім'я автора додає цінності інформації про товар та допомагає 
користувачам зробити більш обґрунтований вибір. 
Ціна книги є ще одним важливим елементом картки товару. Вона дозволяє 
користувачам швидко оцінити вартість товару та прийняти рішення щодо його 
придбання. Ціна є одним із ключових факторів, що впливають на рішення про 
покупку, тому її відображення на картці є необхідним для забезпечення зручності 
користувачів. 
Картка товару також містить кілька кнопок, з якими користувачі можуть 
взаємодіяти. Однією з таких кнопок є кнопка додавання до кошика. Ця кнопка 
дозволяє користувачам швидко додати обраний товар до свого кошика, що полегшує 
процес покупки. Взаємодія з цією кнопкою аналогічна до взаємодії з відповідною 
кнопкою у навігації. Неавторизовані користувачі можуть додавати товар до кошика, 
що дозволяє їм збирати товари для майбутньої покупки без необхідності авторизації. 
Іншою важливою кнопкою є кнопка додавання до списку улюблених товарів. 
Вона дозволяє авторизованим користувачам зберігати обрані товари у списку для 
майбутнього перегляду або покупки. Це забезпечує зручність для користувачів, які 
хочуть відстежувати цікаві для них товари та мати можливість швидко до них 
повертатися. Оскільки список улюблених товарів доступний лише авторизованим 
користувачам, ця функція сприяє підвищенню рівня залученості та утримання 
користувачів. 
Якщо користувач натисне на зображення або назву товару, він буде 
перенаправлений на сторінку товару, де розташована повна інформація про книгу. 
На цій сторінці користувач може знайти більш детальний опис товару, включаючи 
його характеристики, відгуки інших користувачів та додаткову інформацію. 
Сторінка товару також може містити більше зображень, оглядові відео, інформацію 
про автора та категорії, до яких належить книга. Це дозволяє користувачам отримати 
повне уявлення про товар та прийняти обґрунтоване рішення щодо його придбання. 
Інформація про товар на сторінці включає також рейтинг книги, що 
формується на основі відгуків інших користувачів. Рейтинг дозволяє користувачам 
швидко оцінити популярність та якість товару. Це важливий елемент, що допомагає 
користувачам орієнтуватися серед великої кількості товарів та вибирати найбільш 
відповідні їхнім потребам. 
Таким чином, товар, як компонент, є центральним елементом проєкту, 
навколо якого здійснюються всі основні дії. Картка товару забезпечує користувачів 
необхідною інформацією та можливостями для взаємодії, роблячи процес вибору та 
покупки зручним і інтуїтивно зрозумілим. Завдяки карткам товарів користувачі 
можуть швидко знайти потрібну інформацію, додати товари до кошика або списку 
улюблених, а також перейти на сторінку товару для отримання більш детальної 
інформації. Це робить картку товару важливим інструментом для покращення 
користувацького досвіду та ефективності веб-додатку. 
 
3.5.3 Сторінка товару та відгуки 
Зразок сторінки товару наведено в додатку Б. 
На сторінці товару розташовані кілька важливих елементів, які допомагають 
користувачам отримати повну уяву про книгу. Першим таким елементом є рейтинг 
книги. Рейтинг базується на відгуках інших користувачів і дозволяє швидко оцінити 
популярність та якість книги. Це особливо корисно для тих, хто хоче швидко 
зрозуміти, чи варто придбати цей товар, спираючись на досвід інших читачів. 
Додаткова інформація на сторінці товару може включати дані про автора, рік 
видання, жанр, видавництво, кількість сторінок та інші характеристики, що 
допомагають користувачам скласти повніше уявлення про книгу. Ця інформація є 
критично важливою, оскільки вона дозволяє потенційним покупцям дізнатися 
більше про товар, який їх цікавить, і прийняти більш обґрунтоване рішення. 
Опис книги є одним з центральних елементів сторінки товару. Він надає 
користувачам можливість дізнатися про сюжет, основні теми та особливості книги. 
Опис допомагає користувачам зрозуміти, чи відповідає книга їхнім інтересам та 
очікуванням. Детальний і добре написаний опис може значно підвищити 
ймовірність покупки, оскільки він дає уявлення про зміст книги та її основні 
переваги. 
Список відгуків є ще одним важливим елементом сторінки товару. Відгуки 
інших користувачів дозволяють потенційним покупцям дізнатися про реальні 
враження від книги. Відгуки можуть містити як позитивні, так і негативні коментарі, 
що допомагає створити об'єктивне уявлення про товар. Користувачі можуть 
повністю прочитати всі відгуки, щоб впевнитися, чи потрібна їм ця книга для 
замовлення. Відгуки також можуть містити деталі, які не включені в офіційний опис 
книги, що робить їх ще більш цінними для потенційних покупців. 
Якщо користувач вирішує, що він хоче придбати книгу, на сторінці товару є 
відповідні кнопки для додавання в кошик та список улюблених товарів. Кнопка 
додавання в кошик дозволяє користувачам швидко включити книгу до свого 
замовлення, а кнопка додавання до списку улюблених дає можливість зберегти 
товар для майбутнього перегляду або покупки. Ці функції роблять процес покупки 
більш зручним та ефективним, дозволяючи користувачам легко керувати своїм 
списком покупок та збереженими товарами. 
Якщо користувач вже знайомий з книгою, він може залишити відгук та 
виставити оцінку, яка потім врахується у загальному рейтингу книги. Можливість 
залишати відгуки є важливою складовою взаємодії користувачів з веб-додатком. Це 
дозволяє їм поділитися своїм досвідом та допомогти іншим користувачам зробити 
правильний вибір. Відгуки також є корисними для власників веб-додатку, оскільки 
вони надають зворотній зв'язок про товар та можуть використовуватися для його 
поліпшення. 
Для того щоб мати можливість опублікувати свій відгук, користувачеві 
потрібно авторизуватися. Це забезпечує захист від спаму та неякісних відгуків, а 
також дозволяє зберігати всі залишені відгуки у профілі користувача. Авторизація 
робить процес залишення відгуків більш відповідальним та надійним, оскільки 
користувачі знають, що їхні коментарі будуть пов'язані з їхнім обліковим записом. 
Таким чином, сторінка товару є центральним елементом, що надає 
користувачам всебічну інформацію про книгу та можливості для взаємодії. Від 
рейтингу та додаткової інформації до опису книги та відгуків – всі ці елементи 
допомагають користувачам зробити обґрунтоване рішення про покупку. Наявність 
кнопок для додавання товарів у кошик та список улюблених робить процес покупки 
зручним і швидким, а можливість залишати відгуки додає елемент соціальної 
взаємодії, що підвищує залученість користувачів і сприяє формуванню спільноти 
навколо веб-додатку. 
 
3.6 Опис розробки програмних компонентів додатку. 
У даному підрозділі буде технічний опис всіх компонентів зазначених вище. 
 
3.6.1 Розробка навігації 
Навігація веб-додатку є критичним компонентом, що забезпечує 
користувачам зручний доступ до різних розділів і функцій сайту. Для належного 
функціонування навігації, необхідно правильно налаштувати кореневий файл 
проєкту. У даному випадку це файл index.jsx, який містить компонент 
<BrowserRouter>. Цей компонент є обгорткою для всього додатку і забезпечує 
можливість використання роутінгу в React додатках. Вкладений у <BrowserRouter> 
компонент <App /> є основною складовою веб-сайту, що містить всі необхідні роути 
та логіку навігації. Зразок коду роутингу навігації наведено в додатку В. 
В компоненті <App /> роути розміщені за допомогою компонентів <Routes> 
та <Route>. Компонент <Routes> є контейнером для усіх маршрутів, а <Route> 
визначає конкретні маршрути. Кожен маршрут має свій шлях, що визначає, який 
компонент або сторінка буде відрендерена, коли користувач перейде за відповідним 
URL. Наприклад, якщо користувач переходить на шлях "/home", компонент <Route 
path="/home" element={<Home />} /> забезпечує рендеринг компоненту Home. Це 
дозволяє гнучко і динамічно керувати навігацією всередині веб-додатку, 
забезпечуючи користувачам зручний доступ до різних розділів. 
Сам компонент навігації складається з кореневого HTML тега <nav>, який 
містить декілька дочірніх елементів. Перший елемент – це логотип, який 
представлений у вигляді простого посилання на головну сторінку через тег <a>. 
Користувач може натиснути на логотип, щоб повернутися на головну сторінку 
сайту. Це стандартний і звичний для користувачів елемент навігації, який забезпечує 
легкий доступ до основної сторінки додатку. 
Кнопка категорій є наступним важливим елементом навігації. Вона має 
атрибут onClick, який приймає функцію, що рендерить список категорій. Це 
дозволяє користувачам легко переглядати різні категорії товарів, представлені на 
сайті. Коли користувач натискає на цю кнопку, викликається відповідна функція, 
яка оновлює інтерфейс для відображення списку категорій. Це може бути корисним 
для швидкого знаходження товарів, що належать до певної категорії, без 
необхідності вручну перегортати весь асортимент. 
Поле пошуку збудоване через тег <input>. Воно має атрибут onChange, який 
при зміні значення цього тега записує його в спеціальну змінну. Ця змінна потім 
використовується для пошуку товарів. Коли користувач вводить текст у поле 
пошуку, функція onChange фіксує введене значення і оновлює стан компонента, 
зберігаючи його у змінній. Це дозволяє виконувати пошук товарів у реальному часі, 
надаючи користувачам можливість швидко знаходити потрібні товари на основі 
введеного тексту. 
Наступні елементи навігації – це кнопки кошика, списку улюблених книг та 
авторизації. В залежності від того, по якій кнопці клікне користувач, відкриється 
відповідне модальне вікно. За це відповідає функція openModal, яка приймає тип 
модального вікна як аргумент. Наприклад, якщо користувач натисне на кнопку 
"Кошик", у функцію openModal буде переданий аргумент "cart", що означає, що 
потрібно відрендерити модальне вікно кошика. Ця функція забезпечує динамічне 
відкриття різних модальних вікон залежно від дій користувача, що робить інтерфейс 
гнучким і зручним у використанні. 
Коли викликається функція openModal, вона ініціює рендеринг компонента 
Modal.jsx. Цей компонент приймає переданий тип модального вікна і рендерить 
відповідний контент. Якщо був переданий аргумент "cart", рендериться модальне 
вікно кошика. Якщо аргумент "favorites", рендериться вікно списку улюблених книг, 
а якщо "login", то вікно авторизації. Це дозволяє легко керувати різними типами 
модальних вікон з одного місця, спрощуючи логіку навігації та взаємодії з 
користувачем. Зразок коду функції openModal наведено в додатку Г. 
Крім того, у додатку передбачена перевірка на авторизованого користувача, за 
яку відповідає модуль AuthProvider. Цей модуль виконується відразу після того, як 
користувач заходить на веб-сайт. Він перевіряє, чи є користувач авторизованим, і 
надає ці дані кожному компоненту, який використовує цей провайдер. Це дозволяє 
забезпечити безпеку та персоналізацію користувацького досвіду. Наприклад, якщо 
в openModal був переданий аргумент "favorites", провайдер AuthProvider перевіряє, 
чи авторизований користувач. Якщо так, то відкривається відповідне вікно списку 
улюблених книг. Якщо ні, то рендериться вікно авторизації, запрошуючи 
користувача увійти в свій обліковий запис. 
Таким чином, навігація веб-додатку є комплексною системою, яка забезпечує 
користувачам доступ до різних функцій і розділів сайту. Використання компонентів 
<BrowserRouter>, <Routes>, та <Route> дозволяє легко налаштовувати маршрути і 
динамічно керувати переходами між сторінками. Компонент навігації, побудований 
на основі HTML тега <nav>, містить всі необхідні елементи для зручного 
користування сайтом: логотип, кнопку категорій, поле пошуку та кнопки кошика, 
списку улюблених книг та авторизації. Взаємодія з цими елементами забезпечується 
через функції onClick та onChange, а також через модальне вікно, яке динамічно 
рендериться залежно від дій користувача. Модуль AuthProvider забезпечує 
перевірку авторизації користувачів, що додає рівень безпеки і персоналізації. Ця 
система робить веб-додаток зручним і інтуїтивно зрозумілим для користувачів, 
забезпечуючи легкий доступ до всіх необхідних функцій і розділів. 
 
3.6.2 Розробка компоненту товару та його взаємодії 
Розробка компоненту товару та його взаємодія з іншими компонентами є 
ключовим аспектом цього веб-додатку. Компонент товару включає всю необхідну 
інформацію про товар, а також функції для взаємодії користувача з цим товаром. 
Основний елемент, який представляє товар у додатку, - це карточка товару. Вона 
містить такі елементи, як зображення книги, назву, автора, опис та рейтинг. Крім 
того, на карточці товару розміщені кнопки для додавання товару в кошик та до 
списку улюблених. Ці кнопки є інтерактивними елементами, які при натисканні 
ініціюють відповідні дії та взаємодію з сервером. 
Кнопки для замовлення та занесення в список улюблених виконують важливі 
функції. Коли користувач натискає на кнопку "Додати в кошик", відбувається 
перевірка його автентифікації за допомогою провайдера AuthProvider. Цей 
провайдер визначає, чи авторизований користувач. Якщо користувач 
авторизований, товар додається до бази даних в таблицю cart. Якщо ж користувач 
не авторизований, дані про товар зберігаються в LocalStorage браузера. Це дозволяє 
користувачу продовжувати перегляд сайту та додавати товари до кошика, навіть 
якщо він ще не ввійшов у свій акаунт. LocalStorage зберігає дані на стороні клієнта, 
що робить процес додавання товарів швидким і зручним. Скріншот коду провайдера 
AuthProvider наведено в додатку Д. 
Кнопка для додавання товару до списку улюблених працює аналогічним 
чином. При натисканні на цю кнопку провайдер AuthProvider також перевіряє стан 
автентифікації користувача. Якщо користувач авторизований, товар додається до 
списку улюблених в базі даних. Якщо користувач не авторизований, система може 
або запросити його увійти, або зберегти дані про улюблені товари в LocalStorage, 
залежно від конкретної реалізації функціоналу. 
Окрім кнопок для взаємодії з товаром, карточка товару має ще одну важливу 
функцію – вона дозволяє користувачу перейти до детальної сторінки товару. Це 
відбувається при натисканні на зображення товару або його назву. У цей момент 
змінюється роут на '/books/', де bookId є унікальним ідентифікатором товару. Цей 
ідентифікатор передається як атрибут компонента <BookPreview /> при рендері 
списку товарів. Коли користувач переходить на сторінку товару, він може 
переглянути детальну інформацію про нього, включаючи повний опис, відгуки 
інших користувачів, рейтинг та інші додаткові дані. 
Сторінка товару, на яку потрапляє користувач, містить кілька важливих 
компонентів. По-перше, це детальна інформація про товар, включаючи його 
рейтинг, додаткову інформацію та опис. По-друге, на цій сторінці розміщений 
список відгуків. Користувач може повністю ознайомитися з усіма відгуками про 
товар, що допоможе йому прийняти рішення про покупку. Якщо користувач вже 
знайомий з книгою, він може залишити свій власний відгук та виставити бал, який 
буде врахований у загальному рейтингу книги. Відгуки і рейтинг є важливими 
елементами, оскільки вони впливають на рішення інших користувачів про покупку. 
Для того, щоб мати можливість залишати відгуки, користувач повинен бути 
авторизованим. Це забезпечує достовірність відгуків та запобігає спаму. Механізм 
авторизації також забезпечує можливість користувачам редагувати або видаляти 
свої відгуки, якщо вони змінять свою думку про товар. Крім того, авторизація 
дозволяє системі відслідковувати активність користувачів і створювати 
персоналізовані рекомендації на основі їх попередніх дій. 
Інтеграція компоненту товару з іншими частинами веб-додатку здійснюється 
за допомогою різних методів. Наприклад, коли товар додається до кошика або 
списку улюблених, відповідні компоненти оновлюються автоматично, 
відображаючи новий стан. Це може бути реалізовано через контекст або 
використання глобального стану (наприклад, за допомогою бібліотеки Redux). Таке 
рішення дозволяє синхронізувати дані між різними компонентами додатку, 
забезпечуючи користувачам безшовний досвід взаємодії. 
Крім того, розробка компоненту товару передбачає врахування оптимізації 
продуктивності. Наприклад, для рендерингу великої кількості товарів у списку 
можна використовувати техніки віртуалізації, щоб зменшити навантаження на 
браузер і покращити швидкість відображення контенту. Це особливо важливо для 
інтернет-магазинів, де на одній сторінці може бути представлено багато товарів. 
З точки зору дизайну, карточка товару повинна бути привабливою і інтуїтивно 
зрозумілою для користувача. Вона повинна чітко відображати основну інформацію 
про товар і надавати користувачу можливість швидко взаємодіяти з ним. Наприклад, 
кнопки додавання в кошик та до списку улюблених повинні бути легко помітними і 
доступними. Використання зображень високої якості також може сприяти 
покращенню користувацького досвіду. 
Загалом, розробка компоненту товару і його інтеграція з іншими 
компонентами веб-додатку є складним процесом, який вимагає уваги до деталей і 
врахування багатьох аспектів, включаючи аутентифікацію користувачів, зберігання 
даних, взаємодію з сервером, рендеринг контенту і оптимізацію продуктивності. 
Товар є центральним елементом інтернет-магазину, тому його реалізація повинна 
бути якісною і добре продуманою, щоб забезпечити зручність і задоволення 
користувачів при користуванні веб-додатком. 
 
3.6.3 Сторінка товару та опрацювання відгуків 
Сторінка товару в веб-додатку є ключовою частиною для взаємодії 
користувача з конкретною книгою. На цій сторінці відображається детальна 
інформація про книгу, включаючи її опис, рейтинг, додаткову інформацію про 
автора і категорії, а також список відгуків від інших користувачів. Користувач має 
можливість замовити книгу або додати її до списку улюблених, причому логіка 
обробки цих дій така ж сама, як і в попередньому підрозділі. 
Коли користувач натискає кнопку для додавання книги в кошик або в список 
улюблених, система перевіряє, чи він авторизований. Якщо користувач не 
авторизований, його перенаправляють на сторінку авторизації. Якщо користувач 
вже увійшов у систему, його дія обробляється негайно: книга додається до кошика 
або до списку улюблених, і відповідна інформація оновлюється в базі даних або в 
LocalStorage. 
Однак, новою і важливою функцією на сторінці товару є можливість 
перегляду та публікації відгуків. Відгуки відіграють значну роль у прийнятті 
рішення користувачем щодо покупки книги. Неавторизовані користувачі можуть 
лише переглядати відгуки інших, але не можуть залишати свої власні. Якщо такий 
користувач спробує залишити відгук, система автоматично перенаправляє його на 
форму авторизації, подібно до того, як це відбувається при спробі додати книгу до 
списку улюблених. 
Для авторизованих користувачів доступна можливість публікації власних 
відгуків. При натисканні на кнопку для написання відгуку з'являється модальне 
вікно з формою, де користувач може виставити рейтинг для книги і написати 
текстовий відгук. Модальне вікно включає поле для введення тексту відгуку і вибір 
рейтингу, який зазвичай представляється у вигляді зірок або іншої візуальної 
метрики. Скріншот форми публікації відгука наведено в додатку Ж. 
Після того, як користувач заповнив всі поля і натиснув кнопку "Публікувати", 
відбувається надсилання запиту на сервер. Сервер виконує валідацію введеного 
тексту, щоб переконатися, що відгук відповідає встановленим правилам (наприклад, 
не містить ненормативної лексики або спаму). Якщо валідація пройшла успішно, 
відгук зберігається в базі даних, і при наступному оновленні сторінки або 
автоматичному оновленні даних, новий відгук з'являється у списку відгуків для 
цього товару. 
Список відгуків відображається на сторінці товару у вигляді блоку, де кожен 
відгук представлений з інформацією про користувача, який його залишив, 
рейтингом і текстом відгуку. Це дозволяє іншим користувачам переглядати думки 
інших покупців і приймати більш обґрунтовані рішення про покупку книги. Відгуки 
можуть сортуватися за різними критеріями, такими як дата публікації або рейтинг, 
що забезпечує зручність їх перегляду. 
Крім того, система може надавати можливість користувачам редагувати або 
видаляти свої відгуки. Це важлива функція, яка дозволяє користувачам оновлювати 
свою думку про книгу або видаляти відгук, якщо вони більше не хочуть, щоб він був 
публічним. Такі дії також проходять через сервер, де знову виконується валідація і 
оновлення даних у базі. 
Рейтинг книги, який відображається на сторінці товару, є середнім значенням 
усіх рейтингів, залишених користувачами у своїх відгуках. Це значення 
обчислюється автоматично і оновлюється кожного разу, коли додається новий 
відгук з рейтингом. Таким чином, рейтинг книги надає актуальну і достовірну 
інформацію про її популярність і якість з точки зору інших користувачів. 
Інтеграція відгуків з іншими компонентами веб-додатку є важливим аспектом 
для забезпечення цілісного користувацького досвіду. Наприклад, на головній 
сторінці або в списку товарів може відображатися середній рейтинг книги, що 
допомагає користувачам швидко оцінити її популярність. Крім того, відгуки можуть 
бути використані для створення персоналізованих рекомендацій, надаючи 
користувачам рекомендації на основі їхніх попередніх переглядів і відгуків. 
З технічної точки зору, реалізація функціоналу відгуків може вимагати 
створення спеціальних API для обробки запитів на публікацію, редагування і 
видалення відгуків. Ці API повинні бути захищені, щоб запобігти 
несанкціонованому доступу і забезпечити безпеку даних користувачів. Валідація 
даних на сервері є критично важливою для підтримки якості і достовірності відгуків, 
а також для запобігання зловживанням і спаму. 
Загалом, сторінка товару і функціонал відгуків є важливими елементами веб-
додатку, що забезпечують взаємодію користувачів з товарами і один з одним. Вони 
дозволяють користувачам отримувати повну інформацію про книгу, приймати 
обґрунтовані рішення про покупку, а також ділитися своїм досвідом і думками з 
іншими. Добре продумана і реалізована система відгуків може значно підвищити 
задоволеність користувачів і успішність веб-додатку в цілому. 
 
3.6.4 Форма замовлення 
Форма замовлення є ключовим елементом веб-додатку, який дозволяє 
користувачам завершити процес покупки обраних товарів. Для того, щоб відкрити 
цю форму, користувач повинен перейти до модального вікна кошика і натиснути 
відповідну кнопку для оформлення замовлення. Після цього користувач 
автоматично перенаправляється на маршрут '/order', де відкривається сторінка з 
формою замовлення. Скріншот форми наведено в додатку И. 
Важливою частиною цього процесу є використання провайдера, який не 
тільки перевіряє статус аутентифікації користувача, але й надає доступ до його 
даних. Завдяки цьому провайдеру, коли користувач переходить на сторінку 
оформлення замовлення, його особисті дані, такі як ім'я, прізвище, електронна 
пошта та номер телефону, автоматично заповнюються у відповідних полях форми. 
Це значно спрощує процес заповнення форми, зменшуючи кількість необхідних дій 
з боку користувача та підвищуючи зручність використання веб-додатку. 
На сторінці замовлення користувачеві залишається лише заповнити секції з 
полями для введення адреси доставки та вибору способу оплати. У розділі 
"Доставка" користувач вводить адресу, за якою він бажає отримати замовлення. Це 
може бути домашня адреса, адреса офісу або будь-яке інше місце, куди зручно 
отримати посилку. Оскільки цей веб-додаток є лише імітацією реального інтернет-
магазину, фактична доставка книг не здійснюється. Тому валідація адреси 
обмежується перевіркою на наявність зайвих пробілів та інших базових помилок 
введення. Це дозволяє уникнути технічних проблем і забезпечити, що введені дані 
виглядають коректно. 
Розділ "Спосіб оплати" дозволяє користувачеві вибрати між кількома 
варіантами оплати. Оскільки веб-додаток є симуляцією, будь-які введені дані будуть 
прийняті як валідні, за винятком довжини полів для введення даних картки, яка 
повинна відповідати стандартним форматам. Користувач може ввести довільні дані 
у поля для номера картки, дати закінчення строку дії та коду CVV. Головне, щоб 
довжина введених значень відповідала очікуваним форматам для кожного поля. Цей 
підхід дозволяє користувачам завершити процес оформлення замовлення, не 
переймаючись реальними платіжними даними. 
Після того, як користувач заповнив усі необхідні поля та натиснув кнопку для 
завершення замовлення, дані надсилаються на сервер. Сервер виконує мінімальну 
валідацію, щоб переконатися у відсутності базових помилок, таких як занадто 
короткі або занадто довгі значення у полях форми. Після успішної валідації сервер 
генерує підтвердження замовлення і надсилає його на електронну пошту 
користувача. 
Підтвердження замовлення, надіслане електронною поштою, містить усю 
необхідну інформацію про замовлення. Це включає в себе адресу доставки, яку ввів 
користувач, список товарів, що були замовлені, та загальну суму оплати. Такий 
підхід дозволяє користувачеві мати підтвердження своїх дій і бачити деталі 
замовлення у своїй поштовій скриньці. Скріншот відповіді електронною поштою на 
замовлення користувача наведено в додатку Л. 
Форма замовлення є важливим інструментом для завершення процесу 
покупки і повинна бути розроблена таким чином, щоб забезпечити максимальну 
зручність і зрозумілість для користувачів. Автоматичне заповнення полів особистої 
інформації зменшує кількість кроків, які потрібно зробити користувачеві, а 
використання провайдера для перевірки статусу аутентифікації і забезпечення 
доступу до даних користувача підвищує загальну ефективність процесу. 
Хоча цей веб-додаток є лише імітацією реального інтернет-магазину, він 
демонструє основні принципи роботи таких систем і може бути легко адаптований 
для використання у справжньому комерційному проєкті. Додавання реальної 
платіжної системи та логістики для доставки товарів може зробити цей веб-додаток 
повноцінним інструментом для електронної комерції. Важливою частиною буде 
інтеграція з платіжними шлюзами, які забезпечать безпечні транзакції, і з 
логістичними службами, які зможуть доставляти замовлення до клієнтів. 
Загалом, форма замовлення є критичним компонентом веб-додатку, який 
забезпечує завершення процесу покупки і дає користувачам змогу отримати 
підтвердження своїх дій. Вона повинна бути розроблена з урахуванням зручності 
використання і забезпечення максимальної простоти процесу, щоб користувачі 
могли швидко і безпроблемно завершувати свої замовлення. Такий підхід сприяє 
підвищенню задоволеності користувачів і загальної ефективності веб-додатку, 
роблячи його корисним і зручним інструментом для електронної комерції. 
 
Висновки до 3 розділу 
У процесі розробки системи веб-додатку було застосовано комплексний 
підхід, що охоплював всі етапи створення продукту - від дизайну інтерфейсу до 
розгортання серверної частини та бази даних. Ключовим аспектом цього проєкту 
стало використання компонентів React, які дозволили створити динамічний та 
ефективний користувацький інтерфейс. 
React-компоненти були основою побудови інтерфейсу веб-додатку. Кожен 
компонент відповідав за певну функціональність та був розроблений з урахуванням 
можливих взаємодій користувача. Наприклад, компонент навігації містив елементи, 
такі як логотип, кнопка категорій, поле пошуку та інші інтерактивні кнопки. 
Використання React забезпечило розділення логіки та презентаційного шару, що 
спростило розробку та підтримку коду. Кожен компонент був незалежним модулем, 
який можна було легко модифікувати та тестувати окремо. Одним з важливих 
аспектів була реалізація логіки опрацювання дій користувача, таких як додавання 
товарів до кошика чи списку улюблених, а також обробка запитів на сервер. 
Використання хуків React дозволило керувати станом компонентів ефективно та 
зручно. Наприклад, при натисканні на кнопку "Додати в кошик" компонент 
виконував відповідний запит до серверу, який оброблявся залежно від статусу 
аутентифікації користувача, визначеного за допомогою AuthProvider. Це дозволило 
забезпечити захист даних та належний рівень безпеки. 
Щодо серверної частини, система була побудована на основі технологій 
Express.js для обробки запитів та PostgreSQL для управління базою даних. Express.js 
забезпечував швидку та надійну обробку запитів від клієнтської частини, 
забезпечуючи відповідну взаємодію між фронтендом та бекендом. Було розроблено 
різні маршрути, які відповідали за отримання та обробку даних, необхідних для 
функціонування веб-додатку. Наприклад, маршрути для отримання інформації про 
книги, обробки замовлень та управління списком улюблених товарів. Важливою 
частиною системи була інтеграція з сервісом Back4App, який надав зручний 
інтерфейс для зберігання та обробки даних у реальному часі. Це дозволило 
зменшити навантаження на власний сервер та забезпечити стабільну роботу системи 
навіть при високих навантаженнях. 
Розробка інтерфейсу користувача включала використання сучасних 
технологій та методів для забезпечення високої якості та зручності використання. За 
допомогою програми Figma був створений детальний дизайн всіх сторінок та 
компонентів, що дозволило забезпечити єдину візуальну мову для всього додатку. 
Це сприяло кращому сприйняттю інтерфейсу користувачами та забезпечило 
інтуїтивність у його використанні. Після розробки дизайну, код був написаний у 
редакторі VS Code, що забезпечило ефективну роботу з проєктом. 
Розробка системи веб-додатку включала всі етапи, необхідні для створення 
якісного продукту - від планування та дизайну до написання коду та тестування. 
Використання сучасних інструментів та технологій, таких як React, Express.js, 
PostgreSQL та Back4App, забезпечило високу продуктивність та надійність системи. 
Інтеграція з зовнішніми сервісами дозволила оптимізувати роботу додатку та 
забезпечити ефективне управління даними. Загалом, розробка системи веб-додатку 
виявилася успішною завдяки комплексному підходу та використанню сучасних 
технологій. Усі етапи розробки були ретельно опрацьовані, що дозволило створити 
зручний, надійний та функціональний продукт, який відповідає всім сучасним 
вимогам та стандартам. Кінцевий продукт забезпечує приємний та ефективний 
досвід взаємодії з веб-додатком, задовольняючи потреби користувачів та 
забезпечуючи їхню задоволеність від використання системи. 
  
ВИСНОВКИ 
 
Отже, при розробці системи веб-додатку було враховано всі можливі взаємодії 
користувача з інтерфейсом, що дозволило створити зручний та функціональний 
інструмент для роботи з веб-сайтом. Початковим етапом стала розробка дизайну, 
яка виконувалася за допомогою програми Figma. Цей інструмент надав можливість 
створити візуально привабливий та інтуїтивно зрозумілий інтерфейс, що відповідає 
всім сучасним вимогам до ергономіки та зручності використання. 
Після завершення розробки дизайну, наступним кроком стало написання коду 
в редакторі VS Code. Цей редактор надав усі необхідні інструменти для ефективної 
роботи з кодом, включаючи підтримку різних мов програмування, інтеграцію з 
системами контролю версій та численні розширення для підвищення 
продуктивності. Використання VS Code дозволило створити чистий та 
організований код, який легко підтримувати та розширювати. 
Для забезпечення стабільної та ефективної роботи веб-додатку був обраний 
сервіс Back4App, який став комфортним рішенням для збереження даних та 
взаємодії з ними. Back4App надав можливість зберігати та обробляти дані у 
реальному часі, забезпечуючи високу продуктивність та надійність системи. 
Використання цього сервісу дозволило скоротити час розробки та зосередитися на 
інших важливих аспектах проєкту. 
Загалом, розробка системи веб-додатку включала кілька ключових етапів, 
кожен з яких був ретельно опрацьований для досягнення високої якості кінцевого 
продукту. Розробка дизайну у Figma дозволила створити привабливий та зручний 
інтерфейс, а написання коду у VS Code забезпечило його ефективну реалізацію. 
Використання Back4App для збереження даних забезпечило стабільну та надійну 
роботу системи. 
Окрім технічних аспектів, важливу роль відіграли також зворотний зв'язок від 
користувачів та тестування системи. Протягом усього процесу розробки 
проводилися регулярні тестування, які дозволили виявити та виправити помилки на 
ранніх етапах, забезпечуючи таким чином високу якість кінцевого продукту. 
Зворотний зв'язок від користувачів допоміг виявити слабкі місця в дизайні та 
функціональності, що дозволило внести необхідні корективи та покращення. 
У процесі розробки системи було враховано всі аспекти взаємодії 
користувачів з інтерфейсом, що дозволило створити зручний та функціональний 
веб-додаток. Завдяки використанню сучасних інструментів та технологій, таких як 
Figma, VS Code та Back4App, вдалося забезпечити високу якість та продуктивність 
системи. Кінцевий продукт відповідає всім сучасним вимогам та стандартам, 
забезпечуючи приємний та ефективний досвід для користувачів. 
Таким чином, розробка системи веб-додатку виявилася успішною завдяки 
комплексному підходу та використанню сучасних інструментів і технологій. Процес 
розробки включав детальне планування, тестування та врахування зворотного 
зв'язку від користувачів, що дозволило створити зручний, надійний та 
функціональний продукт. Всі ці фактори сприяли досягненню головної мети - 
створення високоякісної системи, яка задовольняє потреби користувачів та 
забезпечує приємний досвід взаємодії з веб-додатком. 
  
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ 
 
1. React: Швидкий старт. URL: https://uk.react.dev/learn (дата звернення: 
31.05.2024). 
2. Express. API Reference. URL: https://expressjs.com/en/4x/api.html (дата 
звернення: 31.05.2024) 
3. Back4App. Documentation and learning content. URL: 
https://www.back4app.com/docs (дата звернення: 31.05.2024) 
4. Using OAuth 2.0 to Access Google APIs . URL:  
https://developers.google.com/identity/protocols/oauth2 (дата звернення: 
31.05.2024) 
5. JWT Authentication in Node.js: A Practical Guide. URL: 
https://dvmhn07.medium.com/jwt-authentication-in-node-js-a-practical-guide-
c8ab1b432a49 (дата звернення: 31.05.2024) 
6. Nodemailder. Usage. URL: https://nodemailer.com/usage/ (дата звернення: 
31.05.2024) 
7. Built-in React Hooks. URL: https://react.dev/reference/react/hooks (дата 
звернення: 31.05.2024) 
8. MVC Pattern in NodeJS and express, old but gold. URL: 
https://medium.com/@jonoyanguren/mvc-pattern-in-nodejs-and-express-old-but-
gold-46c21bee365a (дата звернення: 31.05.2024) 
 
 
  
ДОДАТКИ 
Додаток А 
Скріншот головної сторінки 
 
 
  
Додаток Б 
Зразок сторінки товару 
 
 
  
Додаток В 
Зразок коду роутингу навігації 
 
 
  
Додаток Г 
Зразок коду функції openModal 
 
 
  
Додаток Д 
Скріншот коду провайдера AuthProvider 
 
 
  
Додаток Ж 
Скріншот форми публікації відгука 
 
 
  
Додаток И 
Скріншот форми замовлення 
 
 
  
Додаток Л 
Скріншот відповіді електронною поштою на замовлення користувача
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
