Літературна онлайн-платформа для поширення вітчизняних  електроних книжок

Передеренко, Данііл Михайлович
Please use this identifier to cite or link to this item: https://er.chdtu.edu.ua/handle/ChSTU/5446
Title:	Літературна онлайн-платформа для поширення вітчизняних електроних книжок
Authors:	Тарасенко, Ярослав Володимирович Передеренко, Данііл Михайлович
Keywords:	VISUAL STUDIO CODE;JAVASCRIPT;react;buy book;онлайн платформа
Issue Date:	15-Jun-2023
Abstract:	Кваліфікаційна робота присвяченна дослідженню та розробці літературної онлайн-платформи для поширення вітчизняних електронних книжок. Робота є актуальною, оськільки існує зростаючий інтерес до електронної літератури та зручність її споживання через онлайн-платформи. Метою роботи є створення зручного та доступного сервісу, який дозволить користувачам знаходити, читати та ділитися вітчизняною літературою в електронному форматі. Об’єкт дослідження – процес розробки онлайнплатформи. Предмет дослідження – літературна онлайн-платформа для поширення вітчизняних електронних книжок. Було використано такі основні методи: аналіз літературних джерел, дослідження ринку, розробка прототипу. Практична значущість отриманих результатів полягає в наступному: Розвиток літературної онлайн-платформи, розвиток літературної онлайнплатформи, зручний доступ до літературних творів, розширення ринку для письменників та видавництв У першому розділі проведено детальний аналіз теоретичних аспектів, пов'язаних з літературними онлайн-платформами. У другому розділі проведено обґрунтування концепції нової літературної онлайн-платформи, яка має на меті забезпечити ефективний поширення вітчизняних електронних книжок. Третій розділ присвячений процесу розробки та втілення нової літературної онлайн-платформи згідно з обґрунтованою концепцією.
URI:	https://er.chdtu.edu.ua/handle/ChSTU/5446
Appears in Collections:	126 Інформаційні системи та технології (Web-технології, web-дизайн)
Files in This Item:
File	Description	Size	Format
РЕП_БАК_Передеренко_Web-1911.pdf Restricted Access	Літературна онлайн-платформа для поширення вітчизняних електроних книжок	2.24 MB	Adobe PDF	View/Open Request a copy
Show full item record
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ 
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ 
Факультет інформаційних технологій і систем 
Кафедра інформаційних технологій проектування 
 
 
ПОЯСНЮВАЛЬНА ЗАПИСКА 
до кваліфікаційної роботи 
«бакалавра» 
освітній рівень 
 
на тему:  «Літературна онлайн-платформа для поширення вітчизняних 
електроних книжок» 
 
 
Виконав: студент 4 курсу, групи Web-1911 
Спеціальності 
126 «Інформаційні системи та технології»  
(шифр і назва напряму підготовки) 
Студент Передеренко Данііл Михайлович 
 (прізвище та ініціали) 
Керівник к.т.н., доцент кафедри ІТП 
Тарасенко Ярослав 
Володиморович 
 (прізвище та ініціали) 
Рецензент Директор ТОВ Андерсонлаб 
Алесін Олег Вікторович. 
 (прізвище та ініціали) 
 
 
Черкаси 2023 
Черкаський державний технологічний університет 
Факультет інформаційних технологій і систем 
Кафедра  інформаційних технологій проектування 
Освітній рівень  бакалавр 
Спеціальність 126 «Інформаційні системи та технології» 
ЗАТВЕРДЖУЮ 
Завідувач кафедри ІТП 
___________ Тетяна ПРОКОПЕНКО 
«_____» ______________20___ року 
З А В Д А Н Н Я 
НА КВАЛІФІКАЦІЙНУ РОБОТУ СТУДЕНТУ 
                                                                         Передеренко Даніілу Михайловичу 
(прізвище, ім’я, по батькові) 
1. Тему проекту (роботи) Літературна онлайн-платформа для поширення 
вітчизняних електроних книжок   
_________________________________________________________ 
Керівник проекту (роботи)                        к.т.н. доцент кафедри ІТП Тарасенко 
Ярослав Володимирович  
(прізвище, ім’я , по батькові, науковий ступінь, вчене звання) 
Затверджені наказом Черкаського державного технологічного університету        
від «24» лютого 2023 року № 43/04 
2. Строк подання студентом проекту (роботи) 01.06.2023 
3. Вхідні дані до проекту ____________________________________________ 
______________________________________________________________________
______________________________________________________________ 
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно 
розробити) ________________________________________________________ 
  
  
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових робіт 
проекту ___________________________________________________________ 
  
  
6. Консультанти розділів проекту (роботи) 
Підпис, дата 
Прізвище, ініціали та 
Розділ Завдання 
посади консультанта Завдання видав 
прийняв 
1    
2    
7. Дата видачі завдання 27.02.2023 
 
КАЛЕНДАРНИЙ ПЛАН 
Строк 
виконання 
№ 
Назва етапів випускної роботи етапів Примітки 
п/п 
випускної 
роботи 
1 Постановка задачі 28.02.2023 виконано 
2 Підготовка завдання 07.03.2023 виконано 
3 Погодження завдання 09.03.2023 виконано 
4 Затвердження завдання 12.03.2023 виконано 
 Основна стадія   
1 Підбір матеріалів 20.03.2023 виконано 
2 Аналіз шляхів вирішення поставленої 28.03.2023 виконано 
задачі 
4 Вибір кінцевого варіанту проектного 01.04.2023 виконано 
рішення 
5 Оформлення первісної редакції роботи 14.04.2023 виконано 
 Заключна стадія   
1 Узгодження прийнятих проектних рішень 21.04.2023 виконано 
з керівником 
2 Оформлення пояснювальної записки 30.05.2023 виконано 
роботи в кінцевій редакції 
3 Попередній захист роботи 23.05.2023 виконано 
4 Затвердження роботи 01.06.2023  
5 Рецензування роботи 06.06.2023  
6 Захист роботи 14.06.2023  
 
Студент                         _____________________ Данііл ПЕРЕДЕРЕНКО 
  (підпис)   
 
Керівник проекту (роботи) ___________________ Ярослав ТАРАСЕНКО 
 
 
  
АНОТАЦІЯ 
Структура та обсяг роботи. Пояснювальна складається з 3 розділів, 
викладена на 54 сторінок, 2 таблиць, 25 рисунків,25 найменувань джерел 
використаною літератури , 2 додатків. 
Кваліфікаційна робота присвяченна дослідженню та розробці літературної 
онлайн-платформи для поширення вітчизняних електронних книжок. 
Робота є актуальною, оськільки існує зростаючий інтерес до електронної 
літератури та зручність її споживання через онлайн-платформи. 
Метою роботи є створення зручного та доступного сервісу, який дозволить 
користувачам знаходити, читати та ділитися вітчизняною літературою в 
електронному форматі. Об’єкт дослідження – процес розробки онлайн-
платформи. Предмет дослідження – літературна онлайн-платформа для 
поширення вітчизняних електронних книжок. 
Було використано такі основні методи: аналіз літературних джерел, 
дослідження ринку, розробка прототипу. 
Практична значущість отриманих результатів полягає в наступному: 
Розвиток літературної онлайн-платформи, розвиток літературної онлайн-
платформи, зручний доступ до літературних творів, розширення ринку для 
письменників та видавництв 
У першому розділі проведено детальний аналіз теоретичних аспектів, 
пов'язаних з літературними онлайн-платформами. 
У другому розділі проведено обґрунтування концепції нової літературної 
онлайн-платформи, яка має на меті забезпечити ефективний поширення 
вітчизняних електронних книжок. 
Третій розділ присвячений процесу розробки та втілення нової літературної 
онлайн-платформи згідно з обґрунтованою концепцією. 
КЛЮЧОВІ СЛОВА: BUY BOOK, JAVASCRIPT, REACT, VISUAL STUDIO 
CODE, ОНЛАЙН ПЛАТФОРМА. 
  
SUMMARY 
The structure and volume of the work. The thesis consists of 3 chapters, set out 
on 54 pages, contains 25 figures, 3 tables, 25 references, 2 appendices. 
The master's thesis is dedicated to research and development of an online literary 
platform for the distribution of domestic e-books. 
The work is relevant because there is a growing interest in e-literature and the 
convenience of consuming it through online platforms. 
The aim of the study is to create a convenient and accessible service that will 
allow users to find, read, and share Ukrainian literature in electronic format. Object –  
process of online platform development. Subject – is an online literary platform for the 
distribution of Ukrainian e-books. 
Research methods: literature analysis, market research, prototype development. 
The practical value of the results is as follows: Development of an online literary 
platform, development of an online literary platform, convenient access to literary 
works, expanding the market for writers and publishers. 
In the first chapter provides a detailed analysis of theoretical aspects related to 
online literary platforms. 
In the second chapter it is substantiated of the concept of a new online literary 
platform aimed at ensuring the effective distribution of domestic e-books. 
The third chapter is devoted to the process of developing and implementing a new 
online literary platform in accordance with a sound concept. 
Keywords: BUY BOOK, JAVASCRIPT, REACT, VISUAL STUDIO CODE, 
ONLINE PLATFORM. 
 
 
 
ЗМІСТ 
 
ВСТУП  ..................................................................................................................... 3 
РОЗДІЛ 1 ТЕОРЕТИЧНІ АСПЕКТИ ЛІТЕРАТУРНИХ ОНЛАЙН-ПЛАТФОР .. 4 
1.1Поняття та класифікація електронних книжок ............................................... 4 
1.2Особливості розповсюдження літератури через онлайн-платформи ............ 5 
1.3Огляд існуючих літературних онлайн-платформ ........................................... 7 
1.4Аналіз переваг та недоліків існуючих рішень ................................................ 8 
РОЗДІЛ 2 ПРОЕКТУВАННЯ ЛІТЕРАТУРНОЇ ОНЛАЙН-ПЛАТФОРМИ ......... 12 
2.1Визначення функціональних вимог до платформи ........................................ 12 
2.2Розробка структури бази даних ....................................................................... 13 
2.3Проектування інтерфейсу користувача........................................................... 16 
РОЗДІЛ 3 РОЗРОБКА ЛІТЕРАТУРНОЇ ОНЛАЙН-ПЛАТФОРМИ ..................... 18 
3.1Вибір технологій та інструментів для розробки платформи .........................  18 
3.1.1 Технолонії для розобки платформи ...................................................... 18 
3.1.2 Інструменти для розробки платформи ................................................. 28 
3.2Розробка та реалізація функціональності платформи .................................... 31 
3.3 Тестування онлайн-платформи «Buy-Books» ................................................ 44 
3.4Перспективи  розробки онлайн-платформи «Buy-Books» ............................. 47 
 
 
ВИСНОВКИ ............................................................................................................. 52 
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................. 54 
ДОТОК А .................................................................................................................. 56 
ДОТОК Б .................................................................................................................. 58 
 
  
 
ЧДТУ 231946.003 ПЗ 
Зм. Лист № докумемента Підпис Дата 
 
Розроб. Передеренко Д.М. «Літературна онлайн-платформа для Літ. Лист Листів 
 Перев.   Тарасенко Я.В. поширення вітчизняних електроних Н 1 55 
 Реценз..   Алесін О.В. книжок» 
 ФІТІС, 
 Н.контр.    Тарасенко Я.В. 
 Пояснювальна записка 
 кафедра ІТП, WEB- 1911 
Затв.   ПрокопенкоТ.О.. 
   
 
ВСТУП 
Актуальність теми. Літературні онлайн-платформи залишаються 
актуальними у сучасному світі , включаючи Україну. Завдяки розвитку технологій 
і поширенню смартфонів та планшетів, електронні книжки стають все 
популярнішими серед читачів. Люди все частіше вибирають зручний доступ до 
літератури через онлайн-платформи. Онлайн-платформи надають можливість 
письменникам самостійно публікувати свої твори без посередників. Це дозволяє 
авторам просувати свої книги, залучати нову аудиторію та отримувати зворотний 
зв'язок від читачів. 
Мета і завдання розробки. 
Метою розробки є: 
Створенні сучасної, швидкої вітчизняної літературної онлайн платформи 
для поширення та онлайн-читання літератури в першу чергу українською мовою, 
де вітчизняні автори зможуть публікувати свої твори. 
Завданням розробки є: 
‒ Дослідження існуючих літературних онлайн платформ. 
‒ Аналіз та порівняння ефективності різних веб-сервісів, їх функціонал.  
‒ Розробка Web-сервісу обслуговування клієнтів крафтової кав’ярні та його 
оптимізація.  
‒ Проведення досліджень розробленого веб-сервісу, щоб оцінити його 
ефективність та швидкість.  
Об’єкт розробки: Процес  розробки онлайн-плайтформи. 
Предмет розробки: Літературна онлайн-платформа поширення вітчизняної 
літератури. 
Методи розробки: Реалізація онлайн-платформи, дослідження 
літературних джерел. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
3 
Зм Арк. № докум. Пiдпис. Дата 
 
РОЗДІЛ 1 
ТЕОРЕТИЧНІ АСПЕКТИ ЛІТЕРАТУРНИХ ОНЛАЙН-ПЛАТФОРМ 
 
 
1.1 Поняття та класифікація електронних книжок 
 
Літературні онлайн-платформи в сучасній літературній сфері виконують 
важливу роль, надаючи авторам можливість публікувати свої твори у форматі 
електронних книг і читачам - отримувати доступ до широкого вибору 
літературних творів в електронному форматі. Ці платформи змінюють традиційні 
методи поширення та споживання літератури, вносячи нові можливості і переваги 
для обох сторін. 
Завдяки літературним онлайн-платформам, автори отримують можливість 
просувати свої твори, залучати нових читачів та спілкуватися з ними. Вони 
можуть публікувати свої тексти на цих платформах, отримувати зворотний зв'язок 
та взаємодіяти зі своїми читачами через коментарі, повідомлення та соціальні 
мережі. Це сприяє розвитку творчих спільнот і сприяє обміну ідеями та 
літературними досвідами. 
Читачі, у свою чергу, мають можливість мати доступ до широкого вибору 
електронних книжок з різних жанрів та авторів. Вони можуть шукати, вибирати та 
завантажувати електронні книжки на свої пристрої для читання. Це дозволяє 
зручно і мобільно насолоджуватися літературою, читати в будь-який час і місце, а 
також зберігати велику кількість книжок в електронному форматі без 
необхідності фізичного простору для зберігання. 
Усе це свідчить про значення літературних онлайн-платформ у сучасному 
літературному світі. Вони сприяють поширенню творчості, забезпечують зручний 
доступ до літератури для читачів і відкривають нові можливості для 
літературного спілкування та взаємодії. 
Поняття електронних книжок: Електронна книжка (e-book) – це 
електронний формат книги, який можна читати на електронних пристроях, таких 
     Лист 
     ЧДТУ 231945.003 ПЗ 
4 
Зм Арк. № докум. Пiдпис. Дата 
 
як комп'ютери, смартфони, планшети або спеціально розроблені електронні 
читальні пристрої. Електронні книжки зазвичай зберігаються в цифровому 
форматі, такому як EPUB, MOBI, PDF тощо, і мають різноманітні можливості, 
такі як можливість змінювати розмір шрифту, виділяти текст, робити закладки, 
шукати конкретні фрази тощо. Класифікація електронних книжок: Електронні 
книжки можна класифікувати за різними ознаками. Основні критерії класифікації 
електронних книжок включають: 
Формат: Електронні книжки можуть мати різні формати файлів, такі як 
EPUB, MOBI, PDF, TXT і т.д. Кожен формат має свої особливості і підтримується 
різними читальними пристроями. 
Вміст: Електронні книжки можуть належати до різних жанрів, таких як 
романи, наукова література, фантастика, детективи, поезія тощо. Класифікація за 
вмістом відображає жанрову приналежність та тематику книги. 
Авторство: Електронні книжки можуть бути написані різними авторами, 
включаючи відомих письменників і самопублікуючих авторів. Класифікація за 
авторством вказує на ім'я або псевдонім автора книги. 
Мова: Електронні книжки можуть бути написані різними мовами. 
Класифікація за мовою вказує на мову, на якій написано книгу. 
Рейтинг та відгуки: Електронні книжки можуть бути оцінені 
користувачами, існувати рейтинги та відгуки про книги. Цей критерій дозволяє 
класифікувати електронні книжки за популярністю та задоволенням користувачів. 
Ця класифікація допомагає організовувати електронні книжки на літературних 
онлайн-платформах, щоб користувачі могли легко знайти та обрати книги за 
своїми перевагами та інтересами. 
 
1.2 Особливості розповсюдження літератури через онлайн-платформи 
 
Розповсюдження літератури через онлайн-платформи вносить значні зміни 
в спосіб, яким люди отримують доступ до книг. Онлайн-платформи надають нові 
     Лист 
     ЧДТУ 231945.003 ПЗ 
5 
Зм Арк. № докум. Пiдпис. Дата 
 
можливості для авторів, видавців і читачів. Ось деякі особливості 
розповсюдження літератури через онлайн-платформи [1]: 
Глобальний доступ: Онлайн-платформи дозволяють авторам публікувати 
свої книги і мати доступ до світової аудиторії. Читачі з різних куточків світу 
можуть знайти і придбати книги, незалежно від їх місця проживання. Це дозволяє 
авторам отримувати більше читачів і розширювати свою аудиторію. 
Широкий вибір книг: Онлайн-платформи надають широкий вибір 
літературних творів. Читачі можуть знайти книги різних жанрів, авторів і мов. 
Вони можуть легко переглядати каталоги, використовувати фільтри та 
рекомендації, щоб знайти книги, які їх зацікавляють. Це дозволяє читачам мати 
доступ до різноманітної літератури, яка відповідає їхнім вподобанням. 
Електронний формат: Онлайн-платформи надають книги в електронному 
форматі, що дозволяє читачам читати їх на різних пристроях, таких як 
комп'ютери, смартфони, планшети або електронні читальні пристрої. Електронні 
книги зазвичай мають зручні функції, такі як можливість змінювати розмір 
шрифту, шукати конкретні фрази, робити закладки тощо. Це забезпечує більш 
комфортне читання для користувачів. 
Миттєвий доступ: Онлайн-платформи дозволяють читачам миттєво 
отримати доступ до книг. Немає потреби чекати на доставку або відвідувати 
книжкові магазини або бібліотеки. Читачі можуть зробити покупку або 
завантажити книгу в кілька кліків і почати читати миттєво. Це особливо зручно 
для тих, хто шукає конкретну книгу або хоче прочитати щось нове негайно. 
Взаємодія і спільнота: Онлайн-платформи також сприяють взаємодії між 
авторами і читачами. Читачі можуть залишати відгуки, оцінки та коментарі до 
книг. Автори можуть спілкуватися зі своїми читачами, отримувати фідбек і 
взаємодіяти з ними через форуми, блоги або соціальні медіа. Це сприяє 
створенню літературних спільнот і підтримці авторів у їхній творчості. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
6 
Зм Арк. № докум. Пiдпис. Дата 
 
1.3 Огляд існуючих літературних онлайн-платформ  
 
На сьогоднішній день існує багато літературних онлайн-платформ, які 
надають доступ до електронних книг та літературних ресурсів. Ось огляд 
декількох популярних літературних онлайн-платформ: 
Amazon Kindle є однією з найбільш відомих та популярних онлайн-
платформ для електронних книг. Вона пропонує широкий вибір електронних книг 
у форматі Kindle, які можна читати на спеціальних пристроях Kindle або за 
допомогою офіційних додатків на різних платформах. Amazon Kindle також надає 
можливість авторам самостійно публікувати свої книги за допомогою платформи 
Kindle Direct Publishing [2]. 
Project Gutenberg є найбільшою онлайн-бібліотекою, яка пропонує 
безкоштовний доступ до понад 60 тисяч електронних книг. Більшість книг в цій 
бібліотеці є класикою літератури, які стали суспільним надбанням. Project 
Gutenberg надає книги в різних форматах, включаючи EPUB, MOBI та PDF [3]. 
 Goodreads – це соціальна мережа для книголюбів, де користувачі можуть 
створювати свої профілі, додавати книги до своїх списків читання, залишати 
відгуки та оцінки. Сервіс надає рекомендації на основі літературних вподобань 
користувачів. Goodreads також пропонує можливість придбати книги через 
посилання на онлайн-магазини [4]. 
  Wattpad є платформою, де автори можуть публікувати свої твори, а читачі 
можуть безкоштовно читати ці твори онлайн. Wattpad спеціалізується на 
літературі у жанрі YA (молодіжна література) та фанфіках. Платформа надає 
можливість авторам отримувати зворотний зв'язок від читачів, коментарі та 
підтримку спільноти [5]. 
Scribd є платформою, яка пропонує необмежений доступ до електронних 
книг, аудіокниг, журналів та інших видань за фіксовану щомісячну підписку. 
Scribd має велику колекцію книг у різних жанрах, включаючи художню 
літературу, наукову літературу, бізнес-книги та багато іншого [6]. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
7 
Зм Арк. № докум. Пiдпис. Дата 
 
Google Play Книги є платформою, яка пропонує велику колекцію 
електронних книг у форматі EPUB. Користувачі можуть придбати книги або 
отримати доступ до безкоштовних видань. Google Play Книги також має 
функціонал для збереження закладок, підкреслень та синхронізації між 
пристроями [7]. 
Smashwords є платформою самоопублікації для незалежних авторів. Автори 
можуть використовувати цю платформу для публікації своїх книг у форматах 
EPUB, MOBI та інших. Smashwords надає авторам контроль над продажами та 
розповсюдженням їхніх книг [8]. 
Це лише декілька прикладів літературних онлайн-платформ, які надають 
доступ до електронних книг. Кожна з цих платформ має свої особливості та 
переваги, і вибір залежить від особистих вподобань та потреб користувача. 
Завдяки цим платформам читачі можуть насолоджуватися літературою у зручний 
для них спосіб та вибирати з безлічі доступних видань. 
 
1.4 Аналіз переваг та недоліків існуючих рішень 
 
Аналіз переваг та недоліків існуючих літературних онлайн-платформ може 
допомогти користувачам зробити обґрунтований вибір та знайти платформу, що 
найкраще відповідає їхнім потребам. Нижче представлено огляд переваг та 
недоліків декількох популярних літературних онлайн-платформ: 
Amazon Kindle: 
Переваги: 
 Широкий вибір книг у форматі Kindle з великим асортиментом літератури. 
 Легкий доступ до книг за допомогою пристроїв Kindle або офіційних 
додатків. 
 Зручна синхронізація між пристроями, що дозволяє продовжити читання з 
того місця, де ви закінчили. 
Недоліки: 
     Лист 
     ЧДТУ 231945.003 ПЗ 
8 
Зм Арк. № докум. Пiдпис. Дата 
 
 Книги в форматі Kindle неможливо читати на інших пристроях без 
підтримки Kindle. 
 Обмежена кількість безкоштовних книг, багато книг є платними. 
Project Gutenberg: 
Переваги: 
 Безкоштовний доступ до великої кількості класичних та суспільно надбаної 
літератури. 
 Книги надаються в різних форматах, що дозволяє вибрати зручний для 
читання. 
 Можливість завантаження книг на пристрій для офлайн-читання. 
Недоліки: 
 Відсутність нових та сучасних видань. 
 Відсутність можливості публікувати власні твори. 
Goodreads: 
Переваги: 
 Соціальна мережа для книголюбів з можливістю створення профілю, 
додавання книг до списку читання та взаємодії з іншими читачами. 
 Рекомендації книг на основі вподобань та рейтингів інших користувачів. 
 Можливість оцінювання книг, залишення відгуків та обговорення 
літературних творів. 
Недоліки: 
 Обмежені можливості безпосередньої покупки книг на платформі. 
 Не всі книги доступні для читання безпосередньо на Goodreads. 
Wattpad: 
Переваги: 
 Можливість читати безкоштовні твори авторів-любителів та незалежних 
авторів. 
 Спільнота читачів і авторів, де можна обговорювати твори та взаємодіяти. 
 Жанрова спеціалізація на молодіжній літературі та фанфіках. 
Недоліки: 
     Лист 
     ЧДТУ 231945.003 ПЗ 
9 
Зм Арк. № докум. Пiдпис. Дата 
 
 Відсутність широкого вибору видавничих книг або класичних творів. 
 Відсутність строго редагування та відбіркової політики, що може вплинути 
на якість деяких творів. 
Scribd: 
Переваги: 
 Необмежений доступ до великого асортименту електронних книг, аудіокниг 
та журналів за щомісячну підписку. 
 Можливість читати і слухати книги в різних форматах на різних пристроях. 
 Рекомендації та персоналізовані рекомендації на основі ваших інтересів. 
Недоліки: 
 Підписка є платною, що може бути недоцільним для тих, хто не читає 
багато книг. 
 Деякі популярні книги можуть бути обмежені або недоступні через 
ліцензійні обмеження. 
Google Play Книги: 
Переваги: 
 Широкий вибір електронних книг у форматі EPUB з можливістю читати на 
різних пристроях. 
 Зручна синхронізація між пристроями та можливість збереження закладок 
та підкреслень. 
 Легкий доступ до книг через магазин Google Play. 
Недоліки: 
 Деякі книги можуть бути платними, а безкоштовні видання можуть бути 
обмеженими. 
 Відсутність спеціалізованих функцій, які пропонують інші платформи. 
Smashwords: 
Переваги: 
 Можливість самопублікації для незалежних авторів та контроль над 
продажами та розповсюдженням. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
10 
Зм Арк. № докум. Пiдпис. Дата 
 
 Велика кількість форматів, що дозволяє публікувати книги для різних 
пристроїв та платформ. 
 Платформа спрощує процес публікації та продажу книг. 
Недоліки: 
 Обмежене відстеження рецензій та продажів, порівняно з деякими іншими 
платформами. 
 Відсутність широкого популярного контенту, що пропонується на інших 
платформах. 
Цей огляд переваг та недоліків існуючих літературних онлайн-платформ 
може допомогти користувачам зробити обґрунтований вибір, враховуючи їхні 
потреби та вимоги. Варто врахувати, що переваги та недоліки можуть 
змінюватись з часом, оскільки платформи постійно вдосконалюються та 
оновлюються. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
11 
Зм Арк. № докум. Пiдпис. Дата 
 
РОЗДІЛ 2 
ПРОЕКТУВАННЯ ЛІТЕРАТУРНОЇ ОНЛАЙН-ПЛАТФОРМИ 
 
2.1. Визначення функціональних вимог до платформи 
 
При проектуванні літературної онлайн-платформи «Buy-Books» необхідно 
враховувати різноманітні функціональні вимоги, щоб створити зручне та 
привабливе середовище для читання, обміну та взаємодії з літературою. Нижче 
наведено перелік функцій, які можуть бути вимогами до такої платформи [9]: 
1. Реєстрація та авторизація користувачів: 
 Можливість створення нового облікового запису для користувачів. 
 Авторизація користувачів, наприклад, за допомогою електронної 
пошти, соціальних мереж або інших методів. 
2. Пошук та фільтрація: 
 Можливість шукати книги за назвою, автором, жанром, ключовими 
словами тощо. 
 Фільтрація результатів пошуку за різними критеріями, наприклад, за 
автором, рейтингом, роком видання, мовою тощо. 
3. Каталог книг: 
 Відображення детальної інформації про книги, включаючи 
обкладинку, опис, автора, рейтинг, відгуки тощо. 
 Показ списків популярних книг, новинок, рекомендацій 
користувачам. 
 Можливість додавання нових книг до каталогу, наприклад, шляхом 
використання ISBN або вручну. 
4. Читання книг: 
 Можливість читати книги в електронному форматі на платформі. 
 Функції керування читанням, такі як зміна розміру шрифту, 
налаштування освітлення, створення закладок, підкреслення тексту, 
швидкий доступ до конкретної сторінки. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
12 
Зм Арк. № докум. Пiдпис. Дата 
 
5. Взаємодія та спільнота: 
 Можливість обговорювати книги, залишати коментарі та відгуки. 
 Підтримка створення профілю користувача, де можна відображати 
інформацію про себе, список прочитаних книг, вподобання, друзів 
тощо. 
 Можливість додавати друзів та підписуватися на активності інших 
користувачів. 
6. Авторські можливості: 
 Можливість авторам створювати облікові записи та публікувати свої 
власні книги на платформі. 
 Механізм контролю доступу та продажу авторських книг. 
7. Сповіщення та оновлення: 
 Можливість надсилання сповіщень користувачам про нові книги, 
оновлення авторів, коментарі та відгуки. 
8. Мобільність: 
 Підтримка мобільних пристроїв, що дозволяє користувачам читати 
книги та взаємодіяти з платформою на смартфонах і планшетах. 
9. Платіжні можливості: 
 Можливість придбання електронних книг через платформу за 
допомогою різних платіжних методів. 
Це лише загальний перелік функціональних вимог до літературної онлайн-
платформи «Buy-Books». При проектуванні платформи необхідно уважно вивчити 
потреби цільової аудиторії та додаткові вимоги, щоб створити продукт, який 
відповідає їх очікуванням та сприяє зручному та задовільному використанню 
платформи. 
 
2.2. Розробка структури бази даних 
 
Розробка структури бази даних є важливим етапом у проектуванні 
літературної онлайн-платформи «Buy-Books». База даних виконує роль 
     Лист 
     ЧДТУ 231945.003 ПЗ 
13 
Зм Арк. № докум. Пiдпис. Дата 
 
центрального сховища для всієї інформації, пов'язаної з книгами, користувачами, 
відгуками та іншими важливими елементами платформи [10]. Нижче наведено 
загальну структуру бази даних(Рис. 2.1), яка може бути використана для 
літературної онлайн-платформи: 
Таблиця «User»: 
 ID: унікальний ідентифікатор користувача. 
 userName: ім'я користувача. 
 E-mail: адреса електронної пошти користувача. 
 Password: захешований пароль користувача. 
 Date signUp: дата та час реєстрації користувача. 
Таблиця «Book»: 
 ID: унікальний ідентифікатор книги. 
 bookName: назва книги. 
 Author: ім'я автора книги. 
 Desccription: опис або синопсис книги. 
 Cover: шлях до файлу обкладинки книги. 
 filePath: шлях до файлу електронної версії книги. 
 Rating: середній рейтинг книги. 
 Genre: жанр книги. 
 Year publication: рік видання книги. 
Таблиця «Reviews»: 
 ID: унікальний ідентифікатор відгуку. 
 ID book: ідентифікатор книги, до якої відноситься відгук. 
 ID user: ідентифікатор користувача, який залишив відгук. 
 Text: текст відгуку. 
 Rate: оцінка, яку віддав користувач книзі. 
Таблиця «Bookmarks»: 
 ID: унікальний ідентифікатор закладки. 
 ID book: ідентифікатор книги, до якої відноситься закладка. 
 ID user: ідентифікатор користувача, який створив закладку. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
14 
Зм Арк. № докум. Пiдпис. Дата 
 
 Page: номер сторінки, на якій розташована закладка. 
Таблиця «Profile»: 
o ID: унікальний ідентифікатор профілю. 
o userName: наслідується із таблиці «User». 
o  firstName: ім’я користувача яке буде відображатися в профілі. 
o lasteName: прізвище користувача. 
o typeProfile: тип профілю за яким буде вирішувати чи показувати 
рекламу. 
o descriptionProfile: опис профілю який пише користувач. 
 
Рисунок 2.1 – Загальна структура бази даних 
 
Це лише загальна структура бази даних для літературної онлайн-платформи 
«Buy-Books». В реальному проекті можуть бути додаткові таблиці та поля в 
залежності від конкретних вимог та функціональності платформи. Важливо 
правильно спроектувати зв'язки між таблицями, використовувати індекси для 
оптимізації запитів та забезпечити безпеку та конфіденційність даних 
користувачів. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
15 
Зм Арк. № докум. Пiдпис. Дата 
 
2.3. Проектування інтерфейсу користувача 
 
Проектування інтерфейсу користувача є ключовим етапом у розробці 
літературної онлайн-платформи «Buy-Books». Грамотно спроектований інтерфейс 
забезпечує зручну навігацію, привабливий зовнішній вигляд та ефективну 
взаємодію користувача з платформою [11]. Нижче наведено деякі ключові 
аспекти, які слід враховувати при проектуванні інтерфейсу користувача: 
1. Простота та зрозумілість: 
 Інтерфейс повинен бути легким для розуміння та використання навіть 
для нових користувачів. 
 Важлива простота взаємодії, зрозумілість іконок, текстів та кнопок. 
2. Зручна навігація: 
 Платформа повинна мати чітку та логічну навігацію, яка дозволяє 
користувачам швидко знайти потрібну інформацію. 
 Меню, пошукова рядок, кнопки "назад" та "вперед" допоможуть 
забезпечити зручну навігацію. 
3. Привабливий дизайн: 
 Гарний дизайн інтерфейсу з привабливими кольорами, шрифтами та 
графічними елементами сприяє позитивному враженню користувача 
від платформи. 
 Важливо враховувати корпоративний стиль платформи, щоб 
забезпечити єдність в зовнішньому вигляді. 
4. Відзивчивий дизайн: 
 Платформа повинна бути адаптована до різних типів пристроїв, 
включаючи комп'ютери, планшети та смартфони. 
 Відзивчивий дизайн забезпечує оптимальне відображення та 
функціонування платформи на різних екранах. 
5. Функціональність: 
 Інтерфейс повинен відображати всі основні функції платформи, такі 
як пошук книг, перегляд деталей книги, додавання відгуків тощо. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
16 
Зм Арк. № докум. Пiдпис. Дата 
 
 Важливо забезпечити логічний розміщення елементів інтерфейсу та 
дружній для користувача досвід використання. 
6. Управління аккаунтом: 
 Користувачам повинна бути доступна функція реєстрації та входу в 
систему. 
 Меню управління аккаунтом має містити опції для зміни особистої 
інформації, налаштування приватності та безпеки, відстеження 
прочитаних книг тощо. 
7. Взаємодія з користувачами: 
 Платформа має надавати можливість коментування, відгуків та 
оцінювання книг. 
 Функції спілкування, додавання друзів та обговорення з книгових 
спільнот додадуть соціальний аспект платформи. 
Це лише загальний перелік аспектів, які слід враховувати при проектуванні 
інтерфейсу користувача літературної онлайн-платформи «Buy-Books». Важливо 
вивчити потреби цільової аудиторії, провести тестування та отримувати фідбек 
від користувачів, щоб створити зручний та привабливий інтерфейс, який 
задовольняє потреби користувачів та забезпечує приємний досвід використання 
платформи. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
17 
Зм Арк. № докум. Пiдпис. Дата 
 
РОЗДІЛ 3 
РОЗРОБКА ЛІТЕРАТУРНОЇ ОНЛАЙН-ПЛАТФОРМИ 
 
 
3.1. Вибір технологій та інструментів для розробки платформи 
3.1.1. Технолонії для розобки платформи 
 
Для розробки фронтенду літературної онлайн-платформи «Buy-Books», 
було розглянуто багато популярних технологій веб-розробки.  
Розглянемо детально такий фреймворк як React: 
React (Рис. 3.1) – це JavaScript-бібліотека для розробки користувацьких 
інтерфейсів. Основні принципи React – це компонентний підхід та віртуальний 
DOM [12]. React дозволяє розбити інтерфейс на незалежні компоненти, які можна 
повторно використовувати, і забезпечує ефективне оновлення інтерфейсу шляхом 
використання віртуального DOM. React надає простоту, швидкість та 
розширюваність, що дозволяє розробникам легко будувати складні інтерфейси. 
 
 
Рисунок 3.1 – архітектура React 
Фреймворк React має простий та логічний синтаксис, що полегшує 
     Лист 
     ЧДТУ 231945.003 ПЗ 
18 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Фреймворк React має простий та логічний синтаксис, що полегшує 
вивчення для розробників. Він використовує JSX (розширення JavaScript), що 
дозволяє розробникам описувати компоненти змішаними HTML-та JavaScript-
кодом. Це дозволяє швидко створювати компоненти та зручно керувати їх станом. 
Також React використовує віртуальний DOM, що дозволяє ефективно 
оновлювати лише необхідні частини інтерфейсу під час зміни стану додатку. Це 
призводить до покращеної продуктивності та швидкості роботи веб-платформи. 
Крім того, React має унікальний механізм під назвою «потік подій» (event 
bubbling) (Рис. 3.2), що дозволяє ефективно обробляти події та забезпечувати 
реактивну взаємодію з користувачем. 
 
 
Рисунок 3.2 – Потік подій 
 
Фреймворк має активну спільноту розробників, що призводить до наявності 
великої кількості готових бібліотек, компонентів та інструментів, які полегшують 
розробку літературної платформи. Багато розробників активно допомагають один 
одному, діляться досвідом та створюють розширення, що розширюють 
можливості фреймворку. 
React базується на концепції компонентів, де інтерфейс розбивається на 
незалежні і перевикористовувані компоненти. Це дозволяє зручно керувати 
     Лист 
     ЧДТУ 231945.003 ПЗ 
19 
Зм Арк. № докум. Пiдпис. Дата 
 
складними інтерфейсами, розділяти логіку та оформлення, а також легко 
масштабувати та розширювати функціональність платформи. Використання React 
дозволить розробникам зосередитися на створенні якісного користувацького 
досвіду та ефективному взаємодії з контентом. 
На детальний розгляд йде фреймворк Angular: 
Angular (Рис. 3.3) – це повноцінний фреймворк для розробки веб-додатків, 
створений командою Google. Він базується на мові програмування TypeScript, яка 
надає сильну типізацію та багатий набір функціональних можливостей. Основні 
принципи Angular – це компонентний підхід, залежності та декларативне 
програмування [13]. 
 
Рисунок 3.3 – архітектура Angular 
 
Цей фреймворк використовує компонентний підхід, де інтерфейс 
розбивається на компоненти. Кожен компонент містить свою логіку, шаблон та 
стилі, що полегшує організацію коду та його повторне використання. Компоненти 
можуть взаємодіяти один з одним та передавати дані через властивості та події 
[14]. Також Angular надає потужну систему шаблонів, яка дозволяє створювати 
динамічний та інтерактивний інтерфейс. Шаблони Angular використовують 
     Лист 
     ЧДТУ 231945.003 ПЗ 
20 
Зм Арк. № докум. Пiдпис. Дата 
 
спеціальні директиви, які розширюють можливості HTML, дозволяючи 
вбудовувати умови, цикли та інші конструкції. 
Angular має вбудовану систему інжекції залежностей, що дозволяє ефективно 
керувати залежностями між компонентами та сервісами. Це полегшує створення 
та тестування додатків, а також робить їх більш модульними та розширюваними. 
Тепер порівняємо Angular з React: 
1. Синтаксис та вивчення: React має простий та легкий для вивчення 
синтаксис, оснований на JavaScript та JSX. У React менше вимог до 
передварительних знань, що дозволяє швидше почати розробку. Angular 
використовує TypeScript, який має більш строгу типізацію та 
багатофункціональний синтаксис, що може потребувати більше часу для 
вивчення. 
2. Розмір та продуктивність: React має менший розмір, що сприяє швидшому 
завантаженню сторінок. Angular має більший розмір через 
багатофункціональність, але він може забезпечувати високу продуктивність 
в розробці великих додатків. 
3. Екосистема та підтримка: React має широку спільноту розробників та 
велику кількість готових бібліотек та компонентів, що допомагають 
прискорити розробку. Angular також має активну спільноту та велику 
кількість розширень, але вона менша, ніж у React. 
4. Флексібільність: React надає більшу свободу у виборі інших бібліотек та 
інструментів для розробки, оскільки він є лише бібліотекою. Angular має 
вбудовані інструменти та стандарти, які можуть обмежити свободу вибору. 
Розглянемо таку технологію веб-розробки як Next.js: 
Next.js (Рис. 3.4) – це розширення фреймворка React, яке дозволяє 
розробникам будувати високопродуктивні веб-додатки з використанням 
серверного рендерингу та статичної генерації контенту [15]. Ось кілька ключових 
особливостей та переваг Next.js: 
     Лист 
     ЧДТУ 231945.003 ПЗ 
21 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.4 – Архітектура серверного відображення Next.js 
 
Серверний рендеринг та статична генерація: Next.js дозволяє виконувати 
серверний рендеринг, що означає, що сторінки можуть бути рендеровані на 
сервері перед тим, як вони надійдуть до клієнта [16]. Це дозволяє отримати першу 
знечутливість і поліпшити швидкість завантаження сторінок. Крім того, Next.js 
підтримує статичну генерацію, де сторінки можуть бути попередньо згенеровані 
на етапі збірки, що дозволяє використовувати кешування та покращити 
продуктивність. 
Роутинг та маршрутизація: Next.js надає просту та зручну систему 
маршрутизації, яка дозволяє легко визначати шляхи та маршрути для вашого 
додатку. Це допомагає організувати навігацію в додатку та обробку запитів 
користувача. 
Гаряче перезавантаження та модульна система: Next.js має вбудовану 
підтримку гарячого перезавантаження, що дозволяє вам бачити зміни в коді без 
перезавантаження сторінки. Він також підтримує модульну систему, де ви можете 
організовувати ваш код в окремі модулі, що спрощує розробку та підтримку 
проекту. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
22 
Зм Арк. № докум. Пiдпис. Дата 
 
Підтримка API маршрутів та серверного API: Next.js дозволяє створювати 
API маршрути, які можуть бути використані для отримання або надсилання даних 
з сервера. Ви також можете створювати серверні API, які дозволяють обробляти 
запити на серверному рівні. 
Інтеграція з React та іншими технологіями: Next.js є розширенням для React, 
тому він має сильну інтеграцію з React-екосистемою. Ви можете використовувати 
всі можливості React, такі як компоненти, контекст та хуки, в рамках проекту 
Next.js. Крім того, Next.js підтримує інтеграцію з іншими технологіями, такими як 
CSS-препроцесори, бази даних та інші. 
У порівнянні з Angular, Next.js має кілька відмінностей: 
Розмір проекту: Next.js має менший розмір проекту порівняно з Angular, що 
дозволяє швидше завантаження сторінок та покращену продуктивність. 
Складність: Angular є більш масштабованим та комплексним фреймворком 
порівняно з Next.js. Angular вимагає більше вихідних зусиль для навчання та 
розробки, тоді як Next.js має більш простий синтаксис і більш природний підхід 
до розробки веб-додатків. 
Відокремленість фронтенду та бекенду: Next.js зазвичай використовується 
для фронтенду веб-додатків, тоді як Angular може використовуватись як 
повноцінний фреймворк для створення фронтенду та бекенду. Якщо у вас вже є 
розроблений бекенд або потребується більш комплексна архітектура, Angular 
може бути кращим вибором. 
Svelte (Рис. 3.5) – це модерна технологія розробки веб-інтерфейсів, яка 
відрізняється від інших фреймворків, таких як React або Angular. Ось детальніше 
про особливості та переваги Svelte [17]: 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
23 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.5 – архітектура Svelte 
 
Компіляція на етапі збирання: Одна з ключових особливостей Svelte – це те, 
що код, написаний на Svelte, компілюється на етапі збирання в стандартний 
JavaScript. Це означає, що веб-браузер не потребує додаткових бібліотек або 
фреймворків для роботи з Svelte-додатками, що зменшує розмір завантажуваного 
коду та поліпшує продуктивність [18]. 
Реактивний підхід: Svelte має вбудовану підтримку реактивного 
програмування. За допомогою ключового слова reactive, можна створювати 
залежності між даними та їх відображенням, автоматично оновлюючи 
компоненти, коли дані змінюються. Це спрощує управління станом додатка та 
забезпечує ефективне оновлення інтерфейсу. 
Компонентний підхід: Svelte побудований на компонентній архітектурі, де 
весь інтерфейс розбивається на невеликі, повторно використовувані компоненти. 
Кожен компонент має свою логіку, стиль та розмітку, що дозволяє створювати 
легко управляти та масштабувати додатки. 
Швидкість та продуктивність: Оскільки Svelte компілює код на етапі 
збирання, він може генерувати оптимізований, ефективний та швидкий JavaScript-
код. Це забезпечує хорошу продуктивність додатків, швидке реагування на дії 
користувача та зменшення завантаження сторінки. 
Легкість вивчення: Svelte має простий синтаксис та лаконічну 
документацію, що робить його легким для вивчення, навіть для початківців. Він 
не вимагає великої кількості додаткового коду або конфігурації, що полегшує 
розпочати роботу над проектом. 
У порівнянні з React і Angular, Svelte має декілька відмінностей: 
     Лист 
     ЧДТУ 231945.003 ПЗ 
24 
Зм Арк. № докум. Пiдпис. Дата 
 
Розмір коду: Svelte генерує дуже компактний код, що дозволяє зменшити 
його розмір порівняно з React або Angular. Це може мати позитивний вплив на 
швидкість завантаження сторінки та продуктивність додатка. 
Реактивність: У Svelte вбудована реактивна система, що дозволяє легко 
працювати зі змінними та оновлювати компоненти при зміні даних. У React і 
Angular також є можливості реактивного програмування, але це вимагає 
додаткового коду та конфігурації. 
Навчання: Svelte має меншу кількість концепцій та відсутність додаткових 
бібліотек порівняно з React або Angular, що робить його простішим для вивчення 
та використання. React і Angular можуть бути потужними фреймворками, але 
вони мають більше складності та вимагають більше часу для освоєння. 
Django (Рис. 3.6) – це високорівневий веб-фреймворк, розроблений на мові 
програмування Python, який дозволяє швидко та ефективно будувати веб-додатки. 
Ось детальніше про особливості та переваги Django [19]: 
 
Рисунок 3.6 – архітектура Django 
     Лист 
     ЧДТУ 231945.003 ПЗ 
25 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Модульність та повторне використання: Django використовує концепцію 
моделей, представлень (views) та шаблонів (templates), що дозволяє писати код, 
який легко відокремлюється та повторно використовується. Це полегшує 
розробку, підтримку та розширення додатків. 
Вбудована адміністративна панель: Django надає вбудовану 
адміністративну панель, яка дозволяє легко управляти та адмініструвати базу 
даних вашого додатка. Завдяки цьому, ви можете швидко створювати моделі, 
виконувати CRUD-операції та керувати даними вашого додатка. 
Розширюваність: Django надає широкі можливості для розширення 
функціональності вашого додатка за допомогою сторонніх бібліотек та плагінів. 
Існує велика спільнота розробників Django, що активно внесла свій вклад у 
створення багатьох корисних розширень. 
Безпека: Django має вбудовану систему аутентифікації та авторизації, що 
допомагає захистити ваш додаток від небажаних доступів. Він також забезпечує 
захист від таких атак, як SQL-ін'єкція та міжсайтовий скриптинг (XSS), завдяки 
вбудованим механізмам безпеки. 
Швидкість та продуктивність: Django використовує різні методи кешування 
та оптимізації, що дозволяє досягти високої продуктивності додатків. Крім того, 
Django має вбудовану систему адміністрування бази даних, яка допомагає 
покращити продуктивність запитів до бази даних. 
Підтримка баз даних: Django підтримує різні бази даних, включаючи 
SQLite, PostgreSQL, MySQL та Oracle. Це дає вам можливість вибрати найбільш 
підходящу базу даних для вашого проекту. 
У порівнянні з іншими веб-фреймворками, Django має кілька переваг: 
Простота використання: Django пропонує зрозумілий та простий синтаксис, 
що робить його привабливим для початківців та досвідчених розробників. 
Велика спільнота: Django має активну спільноту розробників, яка надає 
підтримку, розвиває нові функції та розширення, та відповідає на запитання 
користувачів. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
26 
Зм Арк. № докум. Пiдпис. Дата 
 
Гнучкість: Django дозволяє розробляти додатки різної складності – від 
простих блогів до складних веб-порталів. Ви можете вибрати лише ті компоненти, 
які потрібні для вашого проекту. 
Вибір між Django і іншими фреймворками залежить від ваших потреб, 
досвіду та вподобань. Django є потужним та популярним фреймворком для 
розробки веб-додатків, який забезпечує швидку розробку, безпеку та гнучкість. 
Таблиця 3.1  Порівняння розглянутих фреймворків 
 Простота Підтримка Суспільність Популярність 
React 5 5 4 5 
Angular 3 5 4 3 
Next.js 4 5 3 4 
Svelte 4 4 4 2 
Django 3 3 4 3 
 
Під час проектування літературної онлайн-платформи було обрано React як 
технологію розробки. React є потужним і популярним JavaScript-фреймворком, 
який має багато переваг і відповідає вимогам для створення ефективної та 
високопродуктивної онлайн-платформи. Основні переваги React включають: 
 компонентна архітектура; 
 віртуальний DOM; 
 реактивність; 
 велика спільнота; 
 широкі можливості. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
27 
Зм Арк. № докум. Пiдпис. Дата 
 
3.1.2  Інструменти для розробки платформи 
 
Для веб-розробки платформи було розглянуто два інструменти Visual Studio 
Code (VS Code) та WebStorm. Що є двома популярними інтегрованими 
середовищами розробки (IDE) для веб-розробки. Оглянемо кожен з них 
детальніше та порівняємо їх переваги. 
VS Code (Рис. 3.7) – це безкоштовний, легкий та розширюваний текстовий 
редактор, розроблений компанією Microsoft [20]. 
 
 
Рисунок 3.7  Вигляд VS Code 
 
Ось деякі переваги VS Code: 
1. Легкість використання: VS Code має простий та інтуїтивно зрозумілий 
інтерфейс, що робить його легким для вивчення та використання навіть для 
початківців. Він пропонує багато корисних функцій та скорочень клавіш, 
що полегшують розробку. 
2. Розширюваність: VS Code має велику кількість розширень, які дозволяють 
розширити його функціональність та підлаштувати його під потреби 
     Лист 
     ЧДТУ 231945.003 ПЗ 
28 
Зм Арк. № докум. Пiдпис. Дата 
 
розробника. Ви можете встановити розширення для роботи з конкретними 
мовами програмування, фреймворками, інструментами та багатьма іншими. 
3. Інтегровані інструменти: VS Code має вбудовану підтримку для роботи з 
Git, відлагодження коду, автодоповнення, вбудований термінал та інші 
корисні інструменти, що полегшують розробку. 
4. Кросплатформеність: VS Code підтримує різні операційні системи, 
включаючи Windows, macOS та Linux, що дозволяє розробляти на різних 
платформах без проблем. 
WebStorm (Рис. 3.8) – це комерційний IDE, розроблений компанією 
JetBrains [21]. 
 
Рисунок 3.8 –  Вигляд WebStorm 
 
Ось деякі переваги WebStorm: 
1. Повноцінне IDE: WebStorm надає повноцінну підтримку для розробки веб-
додатків, включаючи підтримку JavaScript, HTML, CSS, фреймворків та 
багатьох інших технологій. Він має багатий функціонал для рефакторингу, 
відлагодження, автодоповнення та аналізу коду. 
2. Інтегровані інструменти: WebStorm має багато вбудованих інструментів, 
таких як редактор макетів, налагоджувач, підтримка систем контролю 
     Лист 
     ЧДТУ 231945.003 ПЗ 
29 
Зм Арк. № докум. Пiдпис. Дата 
 
версій та інші, які допомагають розробникам писати чистий та ефективний 
код. 
3. Підтримка фреймворків: WebStorm має хорошу підтримку для популярних 
фреймворків, таких як Angular, React, Vue.js та інших. Він надає спеціальні 
функції та інструменти для розробки з використанням цих фреймворків. 
4. Інтеграція з іншими продуктами JetBrains: Як частина сімейства продуктів 
JetBrains, WebStorm інтегрується з іншими інструментами, такими як IntelliJ 
IDEA, PhpStorm та інші, що полегшує спільну роботу розробників у 
проектах. 
Sublime Text (Рис. 3.9) є одним з популярних інструментів розробки, який 
широко використовується серед програмістів і розробників. Ось деякі ключові 
особливості Sublime Text: 
 
 
Рисунок 3.9 – вигляд Subline Text 
 
Множинній вид: Sublime Text має множинний вид, що дозволяє одночасно 
редагувати декілька файлів і переглядати їх у різних вкладках або бічних панелях. 
Це полегшує організацію робочого процесу та забезпечує швидкий доступ до 
різних частин коду [22]. 
Підсвічування синтаксису: Sublime Text надає потужну підсвітку 
синтаксису для багатьох мов програмування, що полегшує розуміння коду та 
зменшує кількість синтаксичних помилок. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
30 
Зм Арк. № докум. Пiдпис. Дата 
 
Розширюваність: Sublime Text підтримує розширення за допомогою 
плагінів, які дозволяють додавати нові функціональність і налаштування до 
редактора. Існує велика спільнота розробників, яка створює плагіни та 
розширення для різних потреб. 
Швидкість та продуктивність: Sublime Text відомий своєю швидкістю та 
ефективністю. Він має оптимізовану архітектуру, що дозволяє швидко відкривати, 
редагувати та зберігати файли незалежно від їх розміру. 
Редагування на основі курсора: Sublime Text надає можливість швидкого та 
точного редагування за допомогою курсора. Ви можете використовувати 
комбінації клавіш для швидкого переміщення, копіювання, вирізання та вставки 
тексту. 
Налаштування та персоналізація: Sublime Text дозволяє користувачам 
налаштовувати різні аспекти редактора, включаючи теми оформлення, шрифти, 
плагіни, клавіатурні скорочення та багато іншого. Це дозволяє розробникам 
створювати комфортне робоче середовище, яке відповідає їхнім потребам. 
Під час розробки літературної онлайн-платформи було обрано Visual Studio 
Code (VS Code) як інструмент розробки. В цілому, Visual Studio Code є потужним 
інструментом розробки з широким спектром можливостей, зручним інтерфейсом 
та багатофункціональністю, що робить його ідеальним вибором для розробки 
літературної онлайн-платформи. 
 
3.2 Розробка функціональності платформи «Buy-Books» 
 
«Buy-Books» є віртуальною платформою для поширення вітчизняних 
книжок, яка має головну мету створити сучасне та швидкодіюче середовище для 
розповсюдження та онлайн-читання літератури, переважно на українській мові. 
Платформа дозволяє вітчизняним авторам публікувати свої твори як безкоштовно, 
так і за вартість, пропонуючи широкий спектр доступних опцій. У майбутньому, 
також планується розширення на інші ринки літератури, щоб надати можливість 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
31 
Зм Арк. № докум. Пiдпис. Дата 
 
 авторам досягти ширшої аудиторії та міжнародного розпізнання. 
Була створенна блок-схема приблизно бачання структури(Рис. 3.10) 
 
 
Рисунок 3.10 – блок-схема структури онлайн-платформи «Buy-Books» 
 
На зображеній блок-схемі можемо спостерігати «Головну сторінку сайту» із 
якої розпочинається літературна онлайн платформа «Buy-Books». Із цієї сторінки 
ми маємо доступ до ще 4 додаткових сторінок, на різних сторінках можна знайти 
корисну інформації або функціонал. 
Реалізація блок-схеми лише показує можливі варіанти та структуру онлайн 
платформи в подальшій розробці структура буде ускладнюватися як і кількість 
сторінок та його вигляд. 
Реалізація «Навігації Сайту» виконана за допогою компоненти Nav яка 
представленна на рисунку (Рис. 3.11) нижче: 
 
 
Рисунок 3.11 – Код компоненту Nav 
     Лист 
     ЧДТУ 231945.003 ПЗ 
32 
Зм Арк. № докум. Пiдпис. Дата 
 
Kомпонент у React є основною будівельною одиницею веб-інтерфейсу. Він 
представляє собою незалежну і перевикористовувану частину інтерфейсу, яка має 
власний стан та може відображатись на екрані. Компоненти можуть включати 
якісь текстові дані, зображення, кнопки, форми, таблиці і багато іншого. 
Компоненти в React можуть бути функціональними або класовими. 
Функціональні компоненти є простими функціями, які приймають вхідні 
дані, відомі як пропси (props), та повертають JSX-елемент, який відображається на 
екрані. Вони зазвичай використовуються для створення простих компонентів без 
внутрішнього стану. 
Класові компоненти є класами, які наслідуються від базового класу 
«React.Component». Вони мають спеціальний метод «render()», який повертає JSX-
елемент для відображення на екрані. Класові компоненти зазвичай 
використовуються, коли потрібно управляти внутрішнім станом компонента, 
обробляти події та виконувати складніші операції [23]. 
Компоненти можуть бути вкладеними один в одного, утворюючи ієрархію 
компонентів. Це дозволяє створювати багатошарові інтерфейси, де кожен 
компонент відповідає за свою власну функціональність. 
Компоненти також можуть мати вхідні дані (пропси) та внутрішній стан, які 
дозволяють їм змінювати свій вигляд та поведінку в залежності від зовнішніх чи 
внутрішніх змін. 
Один з ключових принципів React – це компонентний підхід до розробки 
інтерфейсу, який дозволяє створювати окремі, перевикористовувані та легко 
керовані частини інтерфейсу. Компоненти в React дозволяють розбити складний 
інтерфейс на простіші блоки, що сприяє покращенню організації коду, підтримці 
кодування та розвитку додатку. 
В коді замість тегу «a» для створення посилання на іншу сторінку 
використовується тег «Link» який підключається із бібліотеки «react-router-dom». 
Це було виконано із-за того що тег «a» повністю оновлює сторінку, а цього не 
потрібно, тому і було вирішенно використати тег «Link» який оновлює не всю 
сторінку а тільки необхідні компоненти. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
33 
Зм Арк. № докум. Пiдпис. Дата 
 
Детальніше розглянемо як працює бібліотека «react-router-dom». 
Бібліотека «react-router-dom» є однією з бліотек маршрутизації для React. 
Вона дозволяє створювати динамічні односторінкові додатки (Single Page 
Applications – SPA), де зміна URL не призводить до перезавантаження сторінки, а 
замість цього відбувається зміна компонентів, що відображаються на сторінці. 
Основним компонентом «react-router-dom» є тег «BrowserRouter» (Рис. 
3.12), 
який обгортає всю вашу додаткову структуру React. Він використовує HTML5 
History API для маніпуляції URL і забезпечує маршрутизацію на основі шляхів. 
 
Рисунок 3.11 – Код компоненту Nav 
 
Основні поняття і компоненти "react-router-dom": 
Route: Компонент, який визначає відповідність шляху URL до певного 
компонента. Він приймає два основних параметри: path – шлях URL, який 
потрібно відповідати, і component – компонент, який потрібно відображати при 
відповідності шляху. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
34 
Зм Арк. № докум. Пiдпис. Дата 
 
Switch: Компонент, який використовується для обернення Route 
компонентів. Він відображає тільки перший Route, який відповідає поточному 
URL. Це дозволяє уникнути відображення некоректних маршрутів. 
Link: Компонент, який представляє собою посилання, яке веде до певного 
шляху URL. Він замінює стандартні HTML посилання «a» і автоматично оновлює 
URL без перезавантаження сторінки. 
Redirect: Компонент, який перенаправляє користувача на інший шлях URL. 
Використовується для автоматичного перенаправлення після певних умов або для 
створення захисту маршрутів. 
useParams: Хук, який дозволяє отримувати параметри з URL. 
Використовується для отримання динамічних даних з URL. 
useHistory: Хук, який надає доступ до об'єкта історії браузера. 
Використовується для виконання навігації програмно, наприклад, після успішного 
входу в систему або виходу. 
Nested Routes: "react-router-dom" також дозволяє вкладені маршрути, де 
кожен компонент може мати свою власну вкладену структуру маршрутизації. 
Завдяки "react-router-dom" можна легко налаштувати навігацію між різними 
сторінками або розділами вашої літературної онлайн-платформи. Вона забезпечує 
плавну інтерактивну навігацію між різними компонентами без перезавантаження 
сторінки, що дозволяє створити багатоповторюваний та добре організований код 
для управління маршрутами та відображенням відповідних компонентів на основі 
URL [24]. 
Наразі розглянемо популярну бібліотеку Redux, яка використовується для 
керування станом додатка в JavaScript, яка часто використовується разом з React. 
Вона базується на концепції управління станом за допомогою одного 
централізованого об'єкта, відомого як «store» [25]. 
Основними принципами роботи Redux є: 
Стан(State): Стан додатка представляється як нещільний об'єкт, що зберігає 
всю необхідну інформацію для відображення та функціонування додатка. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
35 
Зм Арк. № докум. Пiдпис. Дата 
 
Дії (Actions): Дії є об'єктами, які описують події, що відбуваються в 
додатку. Вони містять тип дії та необов'язкові дані, які необхідно передати до 
редуктора (reducer) для оновлення стану. 
Редуктори (Reducers): Редуктори – це чисті функції, які приймають 
поточний стан і дію, і повертають новий стан. Вони виконують необхідні зміни 
стану на основі отриманих дій. 
Сховище (Store): Сховище – це централізований об'єкт, який зберігає весь 
стан додатка. Він підтримує доступ до стану, виконання дій та підписку на зміни 
стану. 
Диспетчер (Dispatcher): Диспетчер – це механізм, який дозволяє відправляти 
дії до редукторів для оновлення стану. Він забезпечує зв'язок між діями та 
редукторами. 
Підписка (Subscription): Підписка дозволяє компонентам React підписатися 
на зміни стану і автоматично оновлювати себе при зміні. 
Redux дозволяє ефективно керувати станом додатка та спрощує управління 
його складністю. Він робить стан передбачуваним та легко тестованим, що 
полегшує розробку та підтримку великих проектів. Його використання особливо 
корисне в випадках, коли стан додатка потрібно поділити між багатьма 
компонентами або коли виникає потреба в збереженні даних між сеансами 
користувача. 
Тому його використали для реалізації функції реєстрації. Першим кроком у 
процесі розробки функції було створено папку «redux», яка містить основний 
файл «store». У цьому файлі ми створюємо об'єкт «store.js» за допомогою 
спеціальної команди. Після створення "store.js" ми експортуємо його імпортуємо 
в головний файл нашого сайту «index.js» (Рис. 3.12). 
     Лист 
     ЧДТУ 231945.003 ПЗ 
36 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.12 – файл «index.js» 
 
Для кожного компонента, для якого ми хочемо зберігати, отримувати або 
змінювати стан, ми створюємо окремий файл «SignStatusReducer.js». Файл 
«SignStatusReducer.js» містить функції, які  будуть приймати поточний стан і дію 
у формі реастрації, і здійснює необхідні зміни стану. Він визначає, як повинен 
реагувати стан на різні дії. 
Другим кроком було створення скрипу «Validation.js», який буде 
відповідати за перевірку вхідних даних у полях рестрації які будуть розроблені 
згодом. Перевірку на валідацію даних буде про ходити у файлі 
«SignStatusReducer.js», де було створенно функції які будуть відповідати за 
реєстрацію. 
Першою функцією було розроблено інілізацію станів (Рис. 3.13) за назвою 
initialState яку будемо використовувати в подальшому в інших функціях які 
назвемо createUser та signIn для того щоб було можливо зайти в профіль. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
37 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.13 – інілізацію станів (initialState) 
 
Функція createUser (Рис 3.14) відповідає за створення нового користувача в 
системі. 
Розглянемо кожен крок функції: 
1. Початкові значення: Функція отримує стан (state) та дані нового 
користувача (userData). Зі стану вона витягує масив register, який 
містить інформацію про всіх зареєстрованих користувачів. 
2. Перевірка унікальності: Спочатку функція перевіряє, чи масив register 
не містить жодного користувача. Якщо так, вона додає нового 
користувача до масиву, оновлює його у localStorage та очищає поле 
content у стані. 
3. Перевірка дублікатів: Далі функція перевіряє, чи вже існує користувач 
з такою ж електронною адресою (email) у масиві register. Якщо ні, 
вона додає нового користувача до масиву, оновлює його у localStorage 
та очищає поле content у стані. 
4. Повідомлення про реєстрацію: Якщо виявлено, що користувач з 
такою електронною адресою вже зареєстрований, значення поля 
content у стані встановлюється на «Цей аккаунт вже зареєстрованно!». 
     Лист 
     ЧДТУ 231945.003 ПЗ 
38 
Зм Арк. № докум. Пiдпис. Дата 
 
5. Повернення оновленого стану: Функція повертає новий стан, 
розширивши початковий стан (state) оператором spread (розпилення). 
В цілому функція змінює стан, оновлюючи масив register і поле content 
відповідно до результатів перевірок. 
 
 
Рисунок 3.14 – код функції createUser 
 
Детальніше розгляномо розробку валідації полів. Тобто на файл 
«Validation.js» і його функції перевірки полів форми. 
Першою функцією йде функція checkEmailValidation (Рис. 3.15) для 
валідації електронної адреси, наприклад, при реєстрації користувача. Він 
перевіряє, чи введена електронна адреса відповідає вимогам формату та повертає 
відповідний стан валідації. Залежно від результату, можуть прийматися різні дії, 
типу, відображення повідомлення про помилку. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
39 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.15 – код функції checkEmailValidation 
 
Друга функція це checkFormLength (Рис. 3.16) де виконує валідацію полів 
форми, перевіряє їх заповненість та статуси валідації електронної адреси та 
пароля, і забезпечує відповідну обробку та відображення повідомлень про 
помилки або підтвердження форми. 
 
 
Рисунок 3.16 – код функції checkFormLength 
 
І остання функція checkPasswordValidation (Рис 3.17) відповідає за перевірку 
правильності введення пароля. Щоб був не менше восьми символів, а також мав 
заглавні та малі символи і обов’язково цифри. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
40 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.17 – код функції checkPasswordValidation 
 
Ось процес створення компоненти форми рестрації за назвою Signup яку 
було розбито на ще одну компоненту Formsignup в якій саме знаходиться форма 
реєстрації із полями . Цей компонент використовується для відображення і 
обробки введених даних користувача при реєстрації. 
Використовуються хук useState (Рис. 3.18) для встановлення початкових 
значень деяких змінних, таких як acceptOrder, correctField, emailValid, 
passwordValid, validContact. Ці стани використовуються для контролю і 
збереження введених даних користувача та валідації полів форми. 
Використовується хук useDispatch для отримання диспетчера Redux, щоб 
відправляти дії до Redux store. Також використовується хук useSelector, щоб 
отримати певні стани з Redux store. 
Компонент має функцію createUser, яка викликається при спробі створити 
нового користувача. Ця функція виконує валідацію полів форми за допомогою 
функцій checkFormLength та інших валідаційних функцій з файлу "Validation.js". 
Якщо всі поля форми пройшли валідацію, тоді викликається дія signUpAction за 
допомогою диспетчера Redux для реєстрації користувача. 
Компонент Signup містить розмітку HTML для відображення форми 
реєстрації. Використовуються компонент Formsignup та його властивості, такі як 
checkEmailValidation, validContact, emailValid, setValidContact, setEmailValid, 
correctField, setCorrectField, checkPasswordValidation, setPasswordValid, 
passwordValid, createUser, content, для передачі їх до компонента Formsignup. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
41 
Зм Арк. № докум. Пiдпис. Дата 
 
У загальному, цей файл відповідає за відображення та обробку форми 
реєстрації. Він використовує різні функції та стани для валідації введених даних 
та взаємодії з Redux store для збереження даних користувача. 
 
Рисунок 3.18 – код компоненти Signup 
 
У компоненті Formsignup (Рис 3.19) який відповідає за відображення форми 
реєстрації в компоненті Signup. Цей компонент приймає різні пропси (props) і 
використовує їх для валідації полів форми та обробки введених даних. 
Нижче розглянемо основні елементи коду:  
1. Компонент приймає різні пропси, які передаються з компонента 
Signup. Внутрішній код компонента містить розмітку HTML для 
форми реєстрації. 
2. Кожне поле форми має обробник подій onChange, який викликається 
при зміні значення поля. При кожній зміні значення поля 
викликаються відповідні функції для оновлення станів. 
3. компоненті використовуються функції checkEmailValidation та 
checkPasswordValidation, які передаються як пропси. Ці функції 
     Лист 
     ЧДТУ 231945.003 ПЗ 
42 
Зм Арк. № докум. Пiдпис. Дата 
 
виконують валідацію відповідних полів форми та оновлюють стани 
emailValid та passwordValid. 
4. Якщо поле форми порожнє, то відображається повідомлення про 
помилку. Також відображаються повідомлення про неправильний 
формат електронної пошти та неправильний формат пароля. 
5. При натисканні на кнопку «Sign Up» викликається функція createUser, 
яка передає введені дані для подальшої обробки у компоненті Signup. 
 
 
Рисуноук 3.20  код компоненти  Formsignup 
 
Тепер розглянемо як це виглядає у браузері, але спочатку під’єднаємо 
Signup на головну сторінку сайту. Головною сторінкою сайту і файлом є «App.js».  
     Лист 
     ЧДТУ 231945.003 ПЗ 
43 
Зм Арк. № докум. Пiдпис. Дата 
 
Налаштуємо маршрутизацію для кнопки «Sign Up» щоб переходило відразу 
на сторінку «LogIn». Було написанно стилі для форми реєстрації (Рис 3.21) і 
можна поглянути на вигляд. 
 
 
Рисунок 3.20  форма реєстрації 
 
У форму спеціально було веденно неправильні дані щоб наглядно побачити 
що валідація працює. 
Розроблений код є в Додатку Б. 
 
3.3 Тестування онлайн-платформи «Buy-Books» 
Для тестування бета версії літературної онлайн-платформи було вирішенно 
використовувати браузер «Mozila Firefox» а також браузер «Google Chrome». 
Тестування вигляду бети головної сторінки вказано на рисунку (рис. 3.21) нижче. 
Тестування бета версії головної сторінки є задовільним, відображення логотипу 
на навігаційної панелі задовільне.  
     Лист 
     ЧДТУ 231945.003 ПЗ 
44 
Зм Арк. № докум. Пiдпис. Дата 
 
 
 Рисунок 3.21  вигляд головної сторінки 
 
Відображення контенту задовільне: блоки із «Популярні книги» та інші 
відображаються коректно по середині сторінки як і планувалось. Місця зліва і 
справа від контенту залишено для інформаційних блоків та реклами. 
Футер (рис. 3.22) сайту також відображається на своєму місці і знаходиться 
в кінці сторінки і не знаходиться вище чим потрібно і не закриває контент. 
 
 
Рисунок 3.22 – Футер сайту 
 
Тепер перевіримо сторінку бета відображення «bookinfo» (рис. 3.23) більшої 
інформації про книги де знаходиться інформація про автора та анотація до книги 
та знаходяться інша інформація. Це спільна сторінка але для кожної книги 
інформація буде змінюватися. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
45 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Рисунок 3.23  відображення бета сторінки про книгу 
 
Відображення бети сторінки для відображення інформації про книгу 
коректне і відображує очікуване. Фото обложки розташоване зліва, кнопка 
«Читати онлайн» знаходиться під обложкою. А інша інформація відображається 
зліва від обложки , також справа знаходиться інформація така як назва книги, 
автор, жанр книги, статус книги і дата публікації, а також анотація. Також можна 
помітити, що футер на іншій сторінці відображений коректно. 
Був проведений аналіз літературної онлайн-платформи із трьома, які 
згадувалися вище  аналогами за допомогою «Google Chrome» інструмента  
розробника «lighthouse». 
Були розглянуті такі аналоги: Smashwords, Wattpad та Goodreads. 
Оцінювалися за такими критерія як продуктивність, доступність, кращі 
практики та SEO.Оцінювалося балами від нуля до 100. Оцінювання наведонно 
нижче в таблиці 3.2 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
46 
Зм Арк. № докум. Пiдпис. Дата 
 
 
Таблиця 3.2  аналіз «Buy-Books» із аналогами 
 Подуктивність Доступність Кращі SEO 
практики 
Buy-Books 97 100 83  100 
Smashwords 49 89 100 82 
Wattpad 84 71 67 83 
Goodreads 80 77 75 92 
  
Найбільше балів набрала онлайн-платформа. 
 
 
3.4 Перспективи розробки онлайн-платформи «Buy-Books» 
 
Онлайн-платформа «Buy-Books» є інноваційним рішенням у сфері 
електронної комерції книг. Вона надає користувачам зручну та доступну 
можливість придбання книг у електронному форматі і також онлайн читання. 
Можливість спілкуватись із автором своїх улюблених книг. У цьому пункті 
будуть розглянуті перспективи розвитку платформи «Buy-Books» і потенційні 
шляхи її вдосконалення. 
Однією з ключових перспектив розвитку платформи «Buy-Books» є 
постійне розширення асортименту доступних книг. Залучення нових видавництв 
та авторів дозволить платформі запропонувати ширший вибір літератури для 
своїх користувачів. Важливо враховувати потреби різних груп читачів, 
включаючи дитячу літературу, наукові праці, художні тексти тощо. 
Також для забезпечення задоволення користувачів та підвищення 
конкурентоспроможності платформи, важливо постійно вдосконалювати 
користувацький досвід. Це може бути досягнуто шляхом впровадження зручних 
     Лист 
     ЧДТУ 231945.003 ПЗ 
47 
Зм Арк. № докум. Пiдпис. Дата 
 
функцій пошуку, фільтрації та сортування книг, створення персоналізованих 
рекомендацій, покращення швидкості завантаження сторінок та інтерфейсу. 
Незайвим буде ще більша інтеграція соціальних функцій у платформу «Buy-
Books» що може сприяти залученню більшої кількості користувачів та 
формуванню активної спільноти. Функції по типу обговорення книг, оцінювання, 
рецензування та підтримки авторів можуть сприяти взаємодії між користувачами 
та зростанню інтересу до платформи. 
Із-за популярності смартфонів та планшетів обов’язково потрібно наявность 
мобільних додатків для зручного доступу до платформи. Розробка мобільного 
додатку «Buy-Books» для iOS та Android дозволить користувачам купувати та 
читати книги з будь-якого місця та в будь-який час. 
Укладання партнерських угод з авторитетними видавництвами, авторами та 
іншими платформами електронної комерції може забезпечити платформі «Buy-
Books» доступ до ексклюзивного контенту та сприяти привабливості для 
користувачів. Такі партнерства можуть включати спільні маркетингові акції, 
знижки та промоційні пропозиції. 
Один зі шляхів розширення платформи «Buy-Books» полягає у виході на 
міжнародний ринок. Залучення іноземних видавництв та перекладачів дозволить 
платформі пропонувати книги різних мов та розширити свою аудиторію. 
Необхідно враховувати культурні особливості та пристосовувати платформу до 
вимог різних країн. 
Штучний інтелект може бути використаний для покращення 
рекомендаційних систем, аналізу користувацьких відгуків та попередження 
шахрайства. Використання технологій машинного навчання та аналізу даних 
може допомогти вирішити складні завдання та забезпечити більш 
персоналізований досвід користувачів. 
Крім продажу книг, платформа «Buy-Books» може розширити свої послуги 
шляхом надання доступу до ексклюзивних авторських матеріалів, аудіокниг, 
підписок на журнали та інших видів літератури. Розробка додаткових сервісів 
може забезпечити додатковий дохід та привабливість для користувачів. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
48 
Зм Арк. № докум. Пiдпис. Дата 
 
У сучасному світі захист персональних даних користувачів є важливою 
складовою будь-якої онлайн-платформи. Розвиток механізмів шифрування, 
двофакторної аутентифікації та інших заходів безпеки може допомогти зберегти 
довіру користувачів та запобігти можливим порушенням. 
Успішна онлайн-платформа повинна бути налаштована на інтеграцію з 
популярними соціальними мережами. Інтеграція з Facebook, Instagram, Twitter та 
іншими платформами дозволить користувачам спілкуватися, ділитися своїми 
улюбленими книгами, залишати відгуки та рекомендувати книги своїм друзям. Це 
сприятиме збільшенню впливу та розповсюдженню платформи «Buy-Books» в 
онлайн-середовищі. 
Створення програми лояльності для користувачів платформи «Buy-Books» 
може стати додатковим стимулом для постійних клієнтів. Це можуть бути бонусні 
бали за покупки, знижки на майбутні покупки, ексклюзивні доступи до новинок 
або можливість отримання спеціальних послуг. Програма лояльності допоможе 
зберегти і залучити нових користувачів, що позитивно вплине на дохідність 
платформи. 
Платформа «Buy-Books» може розширити свій асортимент продуктів, 
пропонуючи не тільки електронні книги, але й аудіокниги, паперові книги, 
комікси та інші види літератури. Це дозволить задовольнити потреби різних типів 
користувачів та привернути нову аудиторію. 
Співпраця зі школами та університетами може стати важливим напрямком 
розвитку платформи «Buy-Books». Забезпечення доступу до освітніх матеріалів, 
підручників та наукової літератури може зацікавити навчальні заклади та 
студентів. Така співпраця дозволить платформі отримати нових користувачів та 
розширити свою аудиторію. 
Для стимулювання активності користувачів і залучення нових клієнтів 
платформа може впровадити систему реферальних винагород. Користувачі, які 
рекомендують платформу своїм друзям та знайомим, отримують бонуси або 
знижки на покупки книг. Це сприятиме зростанню активності користувачів та 
поширенню платформи серед нових клієнтів. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
49 
Зм Арк. № докум. Пiдпис. Дата 
 
Реклама може стати одним із джерел прибутку для платформи «Buy-Books». 
Шляхи отримання прибутку від реклами можуть включати оплату за розміщення 
банерів та спонсорських матеріалів, отримання комісійних від рекламних 
партнерів за кожен клік або покупку, партнерські угоди з авторами та 
видавництвами, а також платні рекламні послуги для третіх сторін. 
Платформа може пропонувати різні розміри та місцезнаходження банерної 
реклами на своєму сайті та мобільному додатку. Розміщення банерів може бути 
оплачуваним, де рекламодавці заплачують певну суму за кожен показ або клік на 
банер. Чим більша популярність платформи, тим більше потенційних 
рекламодавців і вищі тарифи на рекламу. 
Платформа "Buy-Books" може ввести програму VIP-користувачів, що надає 
додаткові переваги та привілеї окремій групі користувачів. Це створить преміум-
сегмент користувачів, які отримають особливі пільги та персоналізований досвід 
використання платформи. Також VIP-користувачів зі спеціальми функціями. 
VIP-користувачам можуть надаватися персоналізовані рекомендації щодо 
книжок, авторів, жанрів та інших літературних матеріалів на основі їхніх 
інтересів, попередніх покупок та передпочинань. Це дозволить VIP-користувачам 
отримувати більш релевантні пропозиції та покращити їхній досвід використання 
платформи. 
VIP-користувачі можуть мати доступ до ексклюзивного контенту, такого як 
аванпрем'єри книжок, спеціальні розділи зі статтями, інтерв'ю з авторами, 
передачі, що недоступні для інших користувачів. Це додасть значення VIP-
статусу та стимулюватиме користувачів стати VIP-клієнтами. 
Платформа «Buy-Books» має значний потенціал розвитку у сфері 
електронної комерції книг. Забезпечення розширення асортименту, покращення 
користувацького досвіду, вдосконалення соціальних функцій, розвиток мобільних 
додатків, укладання партнерських відносин, розширення міжнародної присутності 
та інші заходи можуть допомогти залучити більше користувачів та забезпечити 
успіх платформи на ринку. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
50 
Зм Арк. № докум. Пiдпис. Дата 
 
Це лише деякі з перспектив розвитку, і реальні можливості можуть бути ще 
ширшими. Залежно від визначених цілей та стратегії, платформа «Buy-Books» 
може стати однією з провідних онлайн-платформ у сфері електронної комерції 
книг і задовольняти потреби широкого кола користувачів. 
 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
51 
Зм Арк. № докум. Пiдпис. Дата 
 
ВИСНОВКИ 
У даній кваліфікаційній роботі було проведено дослідження та розробка 
літературної онлайн-платформи "Buy-Books" для поширення вітчизняних 
електронних книжок. Розробка літературної онлайн-платформи "Buy-Books" 
представляє собою важливий крок у контексті сучасного цифрового світу, де 
інтернет-технології відіграють все більшу роль у розповсюдженні літератури. Ця 
платформа надає зручний доступ до електронних книжок вітчизняних авторів, 
стимулює їхню творчість і дозволяє читачам насолоджуватися кращими творами 
у цифровому форматі. 
Однією з головних переваг платформи є можливість широкого 
розповсюдження літератури. Така платформа дозволяє авторам легко 
розміщувати свої твори та отримувати зворотній зв'язок від читачів. Вона 
стимулює розвиток літературної спільноти, дозволяючи авторам і читачам 
взаємодіяти між собою та обмінюватися своїми думками та враженнями. 
Аналізуючи існуючі літературні онлайн-платформи, було виявлено їхні 
переваги та недоліки. Деякі з переваг включають великий вибір книжок, зручний 
пошук та фільтрацію, можливість відгуків та рекомендацій, а також можливість 
самопублікації для авторів. Однак, деякі недоліки, такі як обмежений вибір 
локальних авторів або складність використання інтерфейсу, також присутні. 
У процесі розробки платформи "Buy-Books" були визначені функціональні 
вимоги, що включають можливість пошуку та фільтрації книжок за різними 
параметрами, перегляду деталей про книжку та автора, оцінки та залишення 
відгуків, взаємодії між авторами та читачами, а також зручну систему оплати та 
доставки. 
Вибір React для розробки платформи є високо продуктивним, оскільки цей 
фреймворк надає широкі можливості для створення динамічних інтерфейсів та 
забезпечує хорошу швидкість роботи. Використання Visual Studio Code як 
інтегрованого середовища розробки також є раціональним вибором, оскільки воно 
надає зручні інструменти для редагування коду та підтримку різних розширень. 
     Лист 
     ЧДТУ 231945.003 ПЗ 
52 
Зм Арк. № докум. Пiдпис. Дата 
 
Після успішної реалізації функціональностей платформи "Buy-Books" і 
проведення аналізу перспектив, можна визначити потенціал для подальшого 
розвитку. Вдосконалення рекомендаційних систем та аналізу вподобань 
користувачів може покращити взаємодію з платформою і підвищити задоволення 
користувачів. Розширення колекції доступних книжок, залучення нових авторів та 
партнерство з видавництвами можуть зробити платформу більш привабливою для 
широкої аудиторії. 
Особливу увагу слід звернути на безпеку та захист особистих даних 
користувачів. Платформа "Buy-Books" повинна забезпечувати надійність і 
захищеність персональної інформації своїх користувачів, а також забезпечувати 
безпечні операції покупок та транзакцій. 
У загальному, розробка літературної онлайн-платформи "Buy-Books" 
представляє значний потенціал для популяризації вітчизняної літератури та 
стимулювання читання у форматі електронних книжок. Ця платформа може стати 
місцем спілкування для авторів та читачів, сприяти виявленню нових талантів та 
забезпечувати доступ до літературних шедеврів у зручному електронному 
форматі. 
  
     Лист 
     ЧДТУ 231945.003 ПЗ 
53 
Зм Арк. № докум. Пiдпис. Дата 
 
СПИСОК ВИКОРИСТАНОЇ ЛІТЕРАТУРИ 
 
1. СУЧАСНІ ФОРМИ РОЗПОВСЮДЖЕННЯ КНИЖКОВОЇ ПРОДУКЦІЇ. URL: 
http://oldconf.neasmo.org.ua/node/3257 
2. Kindle eBooks. URL: https://www.amazon.com/kindle-dbs/storefront 
3. Welcome to Project Gutenberg. URL: https://www.gutenberg.org/ 
4. Goodreads. URL: https://www.goodreads.com/ 
5. Wattpad. URL: https://www.wattpad.com/ 
6. Endless entertainment and knowledge. URL: https://www.scribd.com/ 
7. Books of Google Play. URL: https://play.google.com/store/books 
8. Smashwords. https://www.smashwords.com/ 
9. Л.А. Люшенко, Я.В. Хіцко. РОЗРОБКА ТА АНАЛІЗ ВИМОГ ДО 
ПРОГРАМНОГО ЗАБЕЗПЕЧЕННЯ. КОМПОНЕНТИ ПРОГРАМНОЇ 
ІНЖЕНЕРІЇ КУРСОВЕ ПРОЄКТУВАННЯ. URL: 
https://ela.kpi.ua/bitstream/123456789/38101/1/Rozrobka_ta_analiz_KP.pdf 
10. Н.Р. Балик, В.І. Мандзюк. БАЗИ ДАНИХ MySQL Навчальний посібник. URL: 
https://bohdan-
books.com/upload/iblock/ebe/ebe73ff67804bc6dc1f6f464a3ca4469.pdf 
11. ОСНОВНІ ПОНЯТТЯ ІНТЕРФЕЙСІВ КОРИСТУВАЧА ТА ЗАСОБИ ЇХ 
ПРОЕКТУВАННЯ. URL: 
http://elar.khmnu.edu.ua/jspui/bitstream/123456789/1415/2/Rozdil1.pdf 
12. Getting started with React. URL: https://developer.mozilla.org/en-
US/docs/Learn/Tools_and_testing/Client-
side_JavaScript_frameworks/React_getting_started 
13. Введение в Angular. URL: https://metanit.com/web/angular2/1.1.php 
14. Angular Components. URL: https://angular-book.dev/ch05-00-components.html 
15. Next.js Docs. URL: https://nextjs.org/docs 
16. Server-side rendering. URL: https://nextjs.org/docs/pages/building-your-
application/rendering/server-side-rendering 
17. Getting started with Svelte. URL: https://developer.mozilla.org/en-
     Лист 
     ЧДТУ 231945.003 ПЗ 
54 
Зм Арк. № докум. Пiдпис. Дата 
 
US/docs/Learn/Tools_and_testing/Client-
side_JavaScript_frameworks/Svelte_getting_started 
18. Svelte Compile. URL: https://kit-docs-demo.vercel.app/docs/compiler/compile 
19. Django. URL: https://developer.mozilla.org/en-US/docs/Learn/Server-side/Django 
20. Visual Studio Code for the Web. URL: 
https://code.visualstudio.com/docs/editor/vscode-web 
21. WebStorm. URL: https://lp.jetbrains.com/webstorm-ide/ 
22. Sublime Text - Коротке керівництво. URL: 
https://pns.hneu.edu.ua/pluginfile.php/773083/mod_resource/content/1/Sublime%20
Text%20-%20Краткое%20руководство%20-%20CoderLessons.pdf 
23. Посібник: знайомство з React. URL: 
https://uk.legacy.reactjs.org/tutorial/tutorial.html 
24. React Router. URL: https://reactrouter.com/en/main 
25. Chapter 9. React Redux. URL: https://www.oreilly.com/library/view/learning-
react/978149195461
     Лист 
     ЧДТУ 231945.003 ПЗ 
55 
Зм Арк. № докум. Пiдпис. Дата 
 
 
 
 
 
ДОДАТОК А 
 
 
                                                                    ЗАТВЕРДЖЕНО 
                                                                    Зав.кафедри ІТП 
Тетяна ПРОКОПЕНКО  
“_____” _____________2023р. 
 
 
 
 
Розробка сайту веб-сайту –  «Літературна онлайн-платформа для поширення 
вітчизняних електроних книжок» 
 
 
Спецефикація 
482 ЧДТУ 231946 – 01 
Листів 2 
 
 
Розробник                            _____________                      ПЕРЕДЕРЕНКО Данііл  
Керівник                              _____________                      ТАРАСЕНКО Ярослав 
Н. контроль                          _____________                     ТАРАСЕНКО Ярослав 
 
                                                                                                                            
Черкаси, 2023  
3 
 
57 
 
482 ЧДТУ 231946 – 01 
Позначення Найменування Примітка 
482 ЧДТУ 231946 – 01 12 01 Текст програми  
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
  
 
  
58 
 
ДОДАТОК Б 
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ «Літературна онлайн-платформа для поширення 
вітчизняних електроних книжок» 
 
 
 
 
 
 
 
ТЕКСТ ПРОГРАМИ 
 
 
482 ЧДТУ 231946 – 01 12 01 
Листів 28 
 
 
Розробник                            _____________                      ПЕРЕДЕРЕНКО Данііл  
 
                                                                                                                            
 
 
 
 
 
 
 
 
 
Черкаси, 2023  
59 
 
482 ЧДТУ 231946 – 01 12 01 
Index.js 
import React from 'react'; 
import ReactDOM from 'react-dom/client'; 
import './index.css'; 
import App from './App'; 
import reportWebVitals from './reportWebVitals'; 
import { BrowserRouter } from 'react-router-dom'; 
import { Provider } from 'react-redux'; 
import store from './redux/store'; 
 
const root = ReactDOM.createRoot(document.getElementById('root')); 
root.render( 
  <React.StrictMode> 
    <Provider store={store}> 
    <App /> 
    </Provider> 
  </React.StrictMode> 
); 
 
reportWebVitals(); 
 
App.js 
import Header from './components/header/Header.jsx'; 
import Main from './components/main/Main.jsx'; 
import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom'; 
import Login from './components/login/Login'; 
import Signup from './components/signup/Signup'; 
import { Profile } from './components/Profile/Profile'; 
import { Footer } from './components/Footer/Footer'; 
import { BookInfo } from './components/BookInfo/BookInfo.jsx'; 
import './App.css'; 
import Forum from './components/Forum/Forum.jsx'; 
 
const App = () => { 
60 
 
  return ( 
    <div className='tes'> 
      <BrowserRouter> 
        <Header /> 
        <Routes> 
          <Route path='/main' element={<Main />} /> 
          <Route path='/' element={(<Main />)} /> 
          <Route path='/login' element={<Login />} /> 
          <Route path='/signup' element={<Signup />} /> 
          <Route path='/profile' element={<Profile />} /> 
482 ЧДТУ 231946 – 01 12 01 
          <Route path='/bookinfo' element={<BookInfo />} /> 
          <Route path='/forum' element={<Forum />} /> 
        </Routes> 
      </BrowserRouter> 
      <div style={{flex: 1}}/> 
      <Footer /> 
    </div> 
  ); 
} 
 
export default App; 
 
App.css 
* { 
  margin: 0; 
  padding: 0; 
} 
 
a { 
  text-decoration: none; 
} 
.tes{ 
  display: flex; 
  flex-direction: column; 
61 
 
  min-height: 100vh;} 
store.js 
import { combineReducers, createStore } from 'redux'; 
import { SignStatusReducer } from './SignStatusReducer'; 
let reducers = combineReducers({ 
    signStatus: SignStatusReducer, }) 
const store = createStore(reducers); 
export default store; 
 
SignStatusReducer.js 
import { SIGN_IN, SIGN_UP, LOG_OUT } from './actions/signAction'; 
const initialState = { 
    userLog: JSON.parse(localStorage.getItem('userLog')) || [], 
    userLogStatus: false, 
    userLogError: { 
        email: { 
            errorMessage: '', 
            errorStatus: false,}, 
        password: { 
482 ЧДТУ 231946 – 01 12 01 
            errorMessage: '', 
            errorStatus: false,}}, 
    content: '', 
    register: JSON.parse(localStorage.getItem('userData')) || []} 
const createUser = (state, userData) => { 
    const { register } = state; 
    if (register.length <= 0) { 
      register.push(userData) 
      localStorage.setItem('userData', JSON.stringify([...register])) 
      state.content = '';} 
    if (!register.find((el) => el.email === userData.email)) { 
      register.push(userData) 
      localStorage.setItem('userData', JSON.stringify([...register])) 
      state.content = '';} else { 
      state.content = 'Цей аккаунт вже зареєстрованно!';} 
62 
 
    return { 
      ...state,}} 
const signIn = (state, userData) => { 
    const { register, userLog } = state; 
 
    if (register.length <= 0) { 
        state.userLogError.email.errorMessage = 'This email does not exist!'; 
        state.userLogError.email.errorStatus = true; 
        state.userLogError.password.errorMessage = 'This password is incorrect!'; 
        state.userLogError.password.errorStatus = true; 
    } else { 
        state.userLogError.email.errorMessage = ''; 
        state.userLogError.email.errorStatus = false; 
        state.userLogError.password.errorMessage = ''; 
        state.userLogError.password.errorStatus = false; 
    } 
 
    register.map((el) => { 
        if ((el.email === userData.email) && (el.password === userData.password) && 
(userLog.length < 1)) { 
            state.content = '' 
            state.userLogStatus = true; 
            userLog.push({ 
                name: el.name, 
                surname: el.surname, 
                email: el.email, 
                password: el.password, }) 
            localStorage.setItem('userLog', JSON.stringify([...userLog])) } 
482 ЧДТУ 231946 – 01 12 01 
        if (el.email !== userData.email) { 
            state.userLogError.email.errorMessage = 'This email does not exist!'; 
            state.userLogError.email.errorStatus = true; 
            state.userLogStatus = false; } 
        if (el.password !== userData.password) { 
            state.userLogError.password.errorMessage = 'This password is incorrect!'; 
63 
 
            state.userLogError.password.errorStatus = true; 
            state.userLogStatus = false; }}) 
    return { 
        ...state,}} 
const logOut = (state, userData) => { 
    userData.splice(0, 1) 
    localStorage.setItem('UserLog', JSON.stringify(...userData)) 
    state.userLogStatus = false; 
    return { 
        ...state,}} 
export const SignStatusReducer = (state = initialState, action) => { 
    switch (action.type) { 
        case SIGN_UP: 
            return createUser(state, action.payload.userData) 
        case SIGN_IN: 
            return signIn(state, action.payload.userData) 
        case LOG_OUT: 
            return logOut(state, action.payload) 
      default: 
            return state}} 
 
signAction.js 
export const SIGN_UP = 'SIGN_UP'; 
export const SIGN_IN = 'SIGN_IN' 
export const LOG_OUT = 'LOG_OUT' 
export const TEST = 'TEST' 
const signUpAction = (userData) => { 
  return ({ 
    type: SIGN_UP, 
    payload: { 
      userData,}})} 
const signInAction = (userData) => { 
  return ({ 
    type: SIGN_IN, 
    payload: { 
64 
 
      userData,}})} 
const logOutAction = (userData) => { 
  return ({ 
    type: LOG_OUT, 
482 ЧДТУ 231946 – 01 12 01 
    payload: userData})} 
const test = () => { 
  return ({ 
    type: TEST})} 
export default { 
  signUpAction, 
  signInAction, 
  logOutAction, 
  test} 
 
Main.jsx 
import MainPanel from './MainPanel/MainPanel' 
const Main = () => { 
    return ( 
        <MainPanel />           )} 
export default Main 
 
Image.jsx 
import expml from './../../pngs/exmpl.png' 
 
export const Image = () => { 
    return <img src={expml} alt="" width={150} height={200} />} 
 
Main.jsx 
import NewBooks from '../NewBooks/NewBooks' 
import RecommendedBooks from '../RecommendedBooks/RecommendedBooks' 
import Trend from './../TrendingBooks/TrendingBooks' 
import styles from './MainPanel.module.css' 
const MainPanel = () => { 
    return ( 
65 
 
        <div className={styles['main-panel']}> 
            <Trend /> 
            <RecommendedBooks /> 
            <NewBooks /> 
        </div>)} 
export default MainPanel 
 
MainPanel.module.css 
.main-panel { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding-top: 15px; 
    width: 100%;} 
 
482 ЧДТУ 231946 – 01 12 01 
BookItem.jsx 
import { Image } from "../Image" 
import  styles from './BookItem.module.css' 
const BookItem = ({ name }) => { 
    return ( 
        <div className={styles['bookItem']}> 
            <Image /> 
            <div>{name}</div> 
        </div>)} 
export default BookItem 
 
BookItem.css 
.bookItem { 
    width: 150px; 
    padding-left: 10px;} 
NewBooks 
import BookItem from '../BookItem/BookItem' 
import styles from './NewBooks.module.css' 
export default function NewBooks() { 
66 
 
    return ( 
        <div className={styles.newBooks}> 
            <div> 
                <h2>Нові книги</h2> 
            </div> 
            <div className={styles['newBooks-item']}> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
            </div> 
        </div>)} 
 
NewBooks.module.css 
.newBooks { 
    text-align: center; 
    background-color: whitesmoke; 
    width: fit-content; 
    margin-bottom: 30px;} 
.newBooks-item{ 
    display: flex;} 
 
482 ЧДТУ 231946 – 01 12 01 
RecommendedBooks 
import BookItem from '../BookItem/BookItem' 
import styles from './RecommendedBooks.module.css' 
 
export default function RecommendedBooks() { 
    return ( 
        <div className={styles.RecommendedBooks}> 
            <div> 
                <h2>Рекомендованні книги</h2> 
            </div> 
            <div className={styles['RecommendedBooks-item']}> 
67 
 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
            </div> 
        </div>)} 
 
RecommendedBooks.module.css 
.RecommendedBooks { 
    text-align: center; 
    background-color: whitesmoke; 
    width: fit-content; 
    margin-bottom: 30px;} 
.RecommendedBooks-item{ 
    display: flex;} 
 
TrendingBooks.jsx 
import BookItem from './../BookItem/BookItem' 
import styles from './TrendingBooks.module.css' 
export default function TrendingBooks() { 
    return ( 
        <div className={styles.trendingBooks}> 
            <div> 
                <h2>Популярні книги</h2> 
            </div> 
            <div className={styles['trendingBooks-item']}> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
482 ЧДТУ 231946 – 01 12 01 
                <BookItem name="Example book" /> 
                <BookItem name="Example book" /> 
            </div> 
        </div>)} 
68 
 
Header.jsx 
import Nav from './Nav/Nav' 
import LoginButton from './LoginButton/LoginButton' 
import LogoItem from './LogoItem/LogoItem' 
import style from'./Header.module.css' 
import { useState } from 'react' 
const Header = () => { 
    const [isAuthorized, setIsAuthorized] = useState(false) 
    return ( 
        <header> 
            <LogoItem /> 
            <Nav /> 
            <LoginButton isAuthorized={isAuthorized} /> 
        </header>)} 
export default Header 
LoginButton.jsx 
import { Link } from 'react-router-dom' 
import style from './LoginButton.module.css' 
export default function LoginButton({ isAuthorized }) { 
    return ( 
        <div className={style.reg}> 
            <Link to="/signup">Sign Up</Link> 
            <Link to="/login">Log in</Link> 
            {isAuthorized && <Link to="/profile">Профіль</Link>} 
        </div>)} 
LoginButton.module.css 
.reg { 
    margin-left: auto; 
    margin-right: 10px;} 
a { 
    margin-left: 10px; 
    color: white;} 
LogoItem.jsx 
import { Link } from 'react-router-dom' 
import style from './LogoItem.module.css' 
69 
 
482 ЧДТУ 231946 – 01 12 01 
export default function LogoItem() { 
    return ( 
        <div className={style.logo}> 
            <h3><Link to='/'>Buy-Books</Link></h3> 
        </div>)} 
Nav.jsx 
import { Link } from 'react-router-dom' 
import style from './Nav.module.css' 
export default function Nav() { 
    return ( 
        <nav> 
            <div className={style.links}> 
                <Link to="/forum">Форум</Link> 
                <Link to="/community">Про нас</Link> 
                <Link to="/genre">Жанри</Link> 
            </div> 
        </nav>)} 
Nav.module.css 
nav { 
    display: flex; 
    align-items: center;} 
nav div a, .links{ 
    font-size: 16px; 
    font-family: Georgia, 'Times New Roman', Times, serif; 
    color: white;} 
nav div { 
    list-style-type: none; 
    padding-left: 10px; 
    padding-top: 10px; 
    padding-bottom: 10px;} 
nav { 
    margin-left: auto;} 
nav div:last-child { 
    margin-left: auto;} 
70 
 
.links { 
    display: flex; 
    width: 200px; 
    justify-content: space-between;} 
 
Footer.jsx 
import React from 'react' 
482 ЧДТУ 231946 – 01 12 01 
import styles from './Footer.module.css' 
export const Footer = () => { 
    return ( 
        <div className={styles['footer']}> 
            <p>© 2023 BuyBook. Усі права захищені.</p> 
        </div>)} 
 
Footer.module.css 
.footer { 
    background-color: #333; 
    color: #fff; 
    padding: 20px; 
    text-align: center; 
    font-family: Georgia, 'Times New Roman', Times, serif; 
    left: 0; 
    bottom: 0; 
    right: 0;} 
 
Login.jsx 
import React, { useEffect, useState } from 'react'; 
import { Formlogin } from "./Form/Formlogin"; 
import signAction from '../../redux/actions/signAction' 
import { useDispatch, useSelector } from 'react-redux'; 
import { useNavigate } from 'react-router-dom'; 
import { checkEmailValidation, checkPasswordValidation, checkFormLength } from 
'../common/validation/Validation'; 
import style from './Login.module.css' 
71 
 
const Login = () => { 
    const [acceptOrder, setAcceptOrder] = useState(false); 
    const [correctField, setCorrectField] = useState(''); 
    const [emailValid, setEmailValid] = useState({ 
        content: '', 
        status: false, 
    }); 
    const [passwordValid, setPasswordValid] = useState({ 
        content: '', 
        status: false, 
    }); 
    const [validContact, setValidContact] = useState({ 
        email: '', 
        password: '', 
    }) 
    const state = useSelector((state) => state); 
482 ЧДТУ 231946 – 01 12 01 
    const { userLog, userLogError, userLogStatus } = state.signStatus; 
    const dispatch = useDispatch() 
    const signIn = () => { 
        setAcceptOrder(checkFormLength(setAcceptOrder, setCorrectField, emailValid.status, 
validContact, passwordValid.status)) 
    } 
    useEffect(() => { 
        if (acceptOrder) { 
            dispatch(signAction.signInAction(validContact)) 
        } 
        setAcceptOrder(false) 
    }, [acceptOrder]) 
    const navigate = useNavigate(); 
    useEffect(() => { 
        if (userLogStatus) { 
            navigate("/"); 
        } 
    }, [userLog.length]); 
72 
 
    return ( 
        <div className={style.login}> 
            <h2>Login</h2> 
            <Formlogin 
                signIn={signIn} 
                validContact={validContact} 
                setValidContact={setValidContact} 
                checkEmailValidation={checkEmailValidation} 
                checkPasswordValidation={checkPasswordValidation} 
                emailValid={emailValid} 
                correctField={correctField} 
                setEmailValid={setEmailValid} 
                passwordValid={passwordValid} 
                setPasswordValid={setPasswordValid} 
                emailError={userLogError.email} 
                passwordError={userLogError.password} 
                userLogStatus={userLogStatus} 
            /> 
        </div>)} 
export default Login; 
 
Login.module.css 
.login { 
    background-color: #fff; 
    border-radius: 5px; 
    box-shadow: 0px 0px 5px #888; 
    margin: 100px auto; 
482 ЧДТУ 231946 – 01 12 01 
    max-width: 500px; 
    width: 400px; 
    padding: 50px;} 
h2{ 
    text-align: center; 
    padding-bottom: 20px;} 
 
73 
 
Formlogin.jsx 
import React from 'react'; 
import style from "./Form.module.css" 
export const Formlogin = ({ 
    signIn, checkEmailValidation, validContact, setValidContact, setEmailValid, emailValid, 
    correctField, checkPasswordValidation, setPasswordValid, passwordValid, emailError, 
passwordError 
}) => { 
    return ( 
        <form method="post" action=""> 
            <div> 
                <input type="text" name="email" placeholder="Please enter your email addres"  
                onChange={(event) => ( 
                    setValidContact({email: event.target.value, password: validContact.password}), 
                    checkEmailValidation(setValidContact, setEmailValid, validContact) 
                )} 
                /> 
                <p>{emailError.errorStatus && emailError.errorMessage}</p> 
                {validContact.email.length <= 0 && <p>{correctField}</p>} 
                <p>{validContact.email.length > 0 && emailValid.content}</p> 
            </div> 
            <div> 
                <input type="password" name="password" placeholder="Password"  
                onChange={(event) => ( 
                    setValidContact({email: validContact.email, password: event.target.value}), 
                    checkPasswordValidation(setPasswordValid, validContact.password) 
                )} 
                /> 
                <p>{passwordError.errorStatus && passwordError.errorMessage}</p> 
                {validContact.password.length <= 0 && <p>{correctField}</p>} 
                <p>{passwordValid.content}</p> 
            </div> 
            <div> 
            <button 
            onClick={signIn}  
74 
 
            type="submit" 
            content='login' 
            >Log In</button> 
482 ЧДТУ 231946 – 01 12 01 
            </div> 
        </form>)} 
 
Form.module.css 
input[type="text"], 
input[type="password"] { 
    border-radius: 3px; 
    border: none; 
    box-shadow: 0px 0px 5px #ccc; 
    display: block; 
    font-size: 16px; 
    margin-bottom: 20px; 
    padding: 10px; 
    width: 100%; 
} 
button[type="submit"] { 
    background-color: #4CAF50; 
    border: none; 
    border-radius: 3px; 
    color: #fff; 
    cursor: pointer; 
    font-size: 16px; 
    padding: 10px; 
    width: 100%;} 
button[type="submit"]:hover { 
    background-color: #3e8e41;} 
 
Signup.jsx 
import React, { useState, useEffect } from 'react'; 
import { Formsignup } from './Formsignup/Formsignup' 
import signAction from '../../redux/actions/signAction' 
75 
 
import { useDispatch, useSelector } from 'react-redux'; 
import { checkEmailValidation, checkPasswordValidation, checkFormLength } from 
'../common/validation/Validation'; 
import style from './Signup.module.css' 
const Signup = () => { 
    const [acceptOrder, setAcceptOrder] = useState(false); 
    const [correctField, setCorrectField] = useState(''); 
    const [emailValid, setEmailValid] = useState({ 
        content: '', 
        status: false, 
    }); 
    const [passwordValid, setPasswordValid] = useState({ 
482 ЧДТУ 231946 – 01 12 01 
        content: '', 
        status: false, 
    }); 
    const [validContact, setValidContact] = useState({ 
        firstname: '', 
        lastname: '', 
        email: '', 
        password: '', 
    }) 
    const dispatch = useDispatch() 
    const state = useSelector((state) => state); 
    const { content } = state.signStatus; 
    const createUser = () => { 
        setAcceptOrder(checkFormLength(setAcceptOrder, setCorrectField, emailValid.status, 
validContact, passwordValid.status)) 
    } 
     
    useEffect(() => { 
        if (acceptOrder) { 
            dispatch(signAction.signUpAction(validContact)) 
        } 
        setAcceptOrder(false) 
76 
 
    }, [acceptOrder]) 
    return ( 
        <div className={style['signup']}> 
            <h2>Sign Up</h2> 
            <Formsignup 
                checkEmailValidation={checkEmailValidation} 
                validContact={validContact} 
                emailValid={emailValid} 
                setValidContact={setValidContact} 
                setEmailValid={setEmailValid} 
                correctField={correctField} 
                setCorrectField={setCorrectField} 
                checkPasswordValidation={checkPasswordValidation} 
                setPasswordValid={setPasswordValid} 
                passwordValid={passwordValid} 
                createUser={createUser} 
                content={content} 
            /> 
        </div> 
    ) 
} 
export default Signup 
 
482 ЧДТУ 231946 – 01 12 01 
Signup.module.css 
.signup { 
    background-color: #fff; 
    border-radius: 5px; 
    box-shadow: 0px 0px 5px #888; 
    margin: 100px auto; 
    max-width: 400px; 
    width: 400px; 
    padding: 20px;} 
Formsignup.jsx 
import React from 'react'; 
77 
 
import { Link } from 'react-router-dom'; 
import style from "./Formsignup.module.css" 
export const Formsignup = ({ 
    checkEmailValidation, validContact, setValidContact, setEmailValid, emailValid, createUser, 
    correctField, checkPasswordValidation, setPasswordValid, passwordValid, content }) => { 
    return ( 
        <div> 
            <div> 
                <input onChange={(event) => setValidContact({ firstname: event.target.value, 
lastname: validContact.lastname,  
                email: validContact.email, password: validContact.password })} 
                    type="text" name="firstname" placeholder="First Name" /> 
                {validContact.firstname.length <= 0 && <p>{correctField}</p>} 
            </div> 
            <div> 
                <input onChange={(event) => setValidContact({ firstname: validContact.firstname, 
lastname: event.target.value,  
                email: validContact.email, password: validContact.password })} 
                    type="text" name="lastname" placeholder="Last Name" /> 
                {validContact.lastname.length <= 0 && <p>{correctField}</p>} 
            </div> 
            <div> 
                <input onChange={(event) => ( 
                    setValidContact({ firstname: validContact.firstname, lastname: validContact.lastname,  
                        email: event.target.value, password: validContact.password }), 
                    checkEmailValidation(setValidContact, setEmailValid, validContact) 
                )} 
                    type="text" name="email" placeholder="Email" /> 
                {validContact.email.length <= 0 && <p>{correctField}</p>} 
                <p>{emailValid.content}</p> 
            </div> 
482 ЧДТУ 231946 – 01 12 01 
            <div> 
                <input onChange={(event) => ( 
78 
 
                    setValidContact({ firstname: validContact.firstname, lastname: 
validContact.lastname,  
                        email: validContact.email, password: event.target.value }), 
                    checkPasswordValidation(setPasswordValid, validContact.password) 
                )} 
                    type="password" name="password" placeholder="Password" /> 
                {validContact.password.length <= 0 && <p>{correctField}</p>} 
                <p>{passwordValid.content}</p> 
            </div> 
            <div> 
                    <button onClick={createUser} 
                        content='Sign Up' type="submit"> Sign Up</button> 
            </div> 
        </div>)} 
Formsignup.module.css 
input[type="text"], 
input[type="password"] { 
    border-radius: 3px; 
    border: none; 
    box-shadow: 0px 0px 5px #ccc; 
    display: block; 
    font-size: 16px; 
    margin-bottom: 20px; 
    padding: 10px; 
    width: 95%;} 
button[type="submit"] { 
    background-color: #4CAF50; 
    border: none; 
    border-radius: 3px; 
    color: #fff; 
    cursor: pointer; 
    font-size: 16px; 
    padding: 10px; 
    width: 100%;} 
button[type="submit"]:hover { 
79 
 
    background-color: #3e8e41;} 
Profile.jsx 
import { Link } from 'react-router-dom' 
import { useDispatch } from 'react-redux' 
import LogOutBtn from './LogOutBtn/LogOutBtn' 
482 ЧДТУ 231946 – 01 12 01 
import style from './profile.module.css'  
import { useState } from 'react' 
export const Profile = () => { 
    let nameuser = '' 
    let mail = '' 
    let town 
    const [] = useState() 
    return ( 
        <div className={style.profile}> 
            <h1>Профіль</h1> 
            <img src={''} alt="Фото профілю" /> 
            <div class={style.info}> 
                <p><strong>Ім'я:</strong> {nameuser}</p> 
                <p><strong>Email:</strong> {mail}</p> 
                <p><strong>Місто:</strong> {town}</p> 
            </div> 
            <div class={style.homeLink}> 
                <LogOutBtn /> 
                <Link to="/saved">Збережене</Link> 
            </div> 
        </div>) 
Profile.module.css 
body { 
    margin: 0; 
    padding: 0; 
    font-family: Arial, sans-serif; 
  } 
   
.profile { 
80 
 
    max-width: 600px; 
    margin: 0 auto; 
    padding: 50px; 
    background-color: #f5f5f5; 
    text-align: center; 
    width: 400px; 
  } 
   
.profile h1 { 
    margin-bottom: 20px; 
  } 
   
.profile img { 
    width: 150px; 
482 ЧДТУ 231946 – 01 12 01 
    height: 150px; 
    border-radius: 50%; 
    object-fit: cover; 
    margin-bottom: 20px; 
  } 
   
.profile .info { 
    text-align: left; 
    margin-bottom: 20px; 
  } 
   
.profile .info p { 
    margin: 10px 0; 
  } 
   
.profile .info a { 
    display: inline-block; 
    padding: 10px 20px; 
    background-color: #333; 
    color: #fff; 
81 
 
    text-decoration: none; 
    border-radius: 5px; 
    margin-top: 20px; 
  } 
   
.profile .homeLink { 
    display: inline-block; 
    margin-top: 20px; 
  } 
   
.profile .homeLink a { 
    color: #333; 
    text-decoration: underline; 
  } 
   
.profile .homeLink { 
    margin-top: 20px; 
  } 
   
.profile .homeLink a { 
    display: inline-block; 
    padding: 10px 20px; 
    background-color: #333; 
    color: #fff; 
    text-decoration: none; 
482 ЧДТУ 231946 – 01 12 01 
    border-radius: 5px; 
    margin-right: 10px; 
    transition: background-color 0.3s ease; 
  } 
   
.profile .homeLink a:hover { 
    background-color: #555; 
  } 
BookInfo.jsx 
82 
 
import React from 'react' 
import { ImageBook } from './ImageBook/ImageBook' 
import { TextInfo } from './TextInfo/TextInfo' 
import styles from './BookInfo.module.css' 
export const BookInfo = () => { 
    return ( 
        <div className={styles['main']}> 
            <ImageBook /> 
            <TextInfo /> 
        </div> 
    ) 
} 
BookInfo.module.css 
.main { 
    display: flex; 
    text-decoration: none; 
    margin-left: 40px; 
    margin-top: 40px; 
} 
ImageBook.jsx 
import React, { useState } from 'react' 
import { BuyBookBtn } from '../BuyBookBtn/BuyBookBtn' 
import { ReadOnlineBtn } from '../ReadOnlineBtn/ReadOnlineBtn' 
import exmpl from '../../../pngs/exmpl.png' 
import style from './ImageBook.module.css' 
export const ImageBook = () => { 
    const [checkBoughtBook, setCheckBoughtBook] = useState(false) 
    return ( 
        <div className={style['img-book']}> 
            <img src={exmpl} alt="book image" /> 
            <ReadOnlineBtn /> 
            {/* <BuyBookBtn checkBoughtBook ={checkBoughtBook}/> */} 
        </div> 
    ) 
} 
83 
 
 
482 ЧДТУ 231946 – 01 12 01 
ImageBook.module.css 
.img-book { 
    text-align: center; 
} 
.img-book img { 
    width: 237px; 
    height: 364px; 
} 
 
ReadOnlineBtn.jsx 
import React from 'react' 
import { Link } from 'react-router-dom' 
import style from './ReadOnlineBtn.module.css' 
 
export const ReadOnlineBtn = () => { 
    return ( 
        <div className={style['button']}> 
            <Link to={'#'}>Читати онлайн</Link> 
        </div> 
    ) 
} 
ReadOnlineBtn.module.css 
.button { 
    margin-top: 10px; 
    padding: 10px 20px; 
    background-color: #333; 
    text-decoration: none; 
    border-radius: 5px; 
    cursor: pointer; 
} 
.button a { 
    color: #fff; 
} 
84 
 
.button:hover { 
    background-color: gray; 
} 
BuyBookBtn.jsx 
import React from 'react'; 
import { Link } from 'react-router-dom'; 
import style from './BuyBookBtn.module.css' 
 
export const BuyBookBtn = ({ checkBoughtBook }) => { 
    return ( 
        <div className={style['button']}> 
        {checkBoughtBook && <Link to={'#'}>Купити</Link>} 
482 ЧДТУ 231946 – 01 12 01 
        </div> 
    ) 
} 
BuyBookBtn.module.css 
.button { 
    margin-top: 10px; 
    padding: 10px 20px; 
    background-color: #333; 
    text-decoration: none; 
    border-radius: 5px; 
    cursor: pointer; 
} 
 
.button a { 
    color: #fff; 
} 
 
.button:hover { 
    background-color: gray; 
} 
 
TextInfo.jsx 
85 
 
import React from 'react'; 
import { Annotation } from '../Annotation/Annotation'; 
import style from './TextInfo.module.css' 
 
export const TextInfo = () => { 
    return ( 
        <div className={style['text-overview']}> 
            <h3 className='name-book'>{'nameBook'}</h3> 
            <p>{'Автор'}</p> 
            <p>{'Жанр'}</p> 
            <div className={style['status-date']}> 
                <p>{'Status'}</p> 
                <p>{'Date print'}</p> 
            </div> 
            <Annotation /> 
        </div>)} 
TextInfo.module.css 
.text-overview { 
    margin-left: 20px; 
    display: flex; 
    flex-direction: column;} 
.text-overview p { 
    padding-top: 5px; 
482 ЧДТУ 231946 – 01 12 01 
    padding-bottom: 25px;} 
Annotation.jsx 
import React from 'react'; 
import style from './Annotation.module.css' 
export const Annotation = () => { 
    return ( 
        <div className={style['annotation']}> 
            <h4>Анотація</h4> 
            <p> Анотація Анотація Анотація Анотація Анотація Анотація Анотація Анотація 
Анотація Анотація <br /> 
86 
 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /> 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /> 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /> 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /> 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /> 
                АнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаціяАнотаці
яАнотаціяАнотація <br /></p> 
        </div>)} 
Annotation.module.css 
.annotation h4 { 
    padding-bottom: 20px;}
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
