ChSTU repository
ChSTU repository preserves and enables easy and open access to all types of digital content including text, images, moving images, mpegs and data sets
Learn More
Please use this identifier to cite or link to this item:
https://er.chdtu.edu.ua/handle/ChSTU/9875| Title: | Розробка інформаційної вебсистеми для читання та керування колекціями манги» |
| Authors: | Лавданська , Ольга В’ячеславівна Томіленко, Віктор Олександрович |
| Keywords: | web-система;Vite;MangaWorld;манга;каталог;особиста бібліотека;Firebase;Google Login;Jikan API;MangaDex API;React;Tailwind CSS;frontend |
| Issue Date: | 10-Jun-2026 |
| Abstract: | Кваліфікаційна робота присвячена розробці web-системи MangaWorld для читання манги та керування особистими колекціями користувача. Ресурс призначений для перегляду каталогу манги, пошуку та фільтрації тайтлів, ознайомлення з детальною інформацією про мангу, додавання тайтлів до улюбленого, ведення особистої бібліотеки, налаштування профілю та читання розділів у web-середовищі. Актуальність роботи зумовлена розвитком цифрових сервісів для читання графічного контенту та потребою користувачів у зручних webінструментах для пошуку, перегляду, збереження й упорядкування манги. Метою роботи є розробка web-системи MangaWorld з використанням сучасних frontend-технологій, інтеграції із зовнішніми API, авторизації через Googleакаунт і збереження користувацьких даних у Firebase. Об’єкт дослідження – процес створення web-орієнтованих інформаційних систем для читання манги та керування цифровими колекціями. Предмет дослідження – структура, функціональність, інтерфейс, програмна реалізація та організація даних web-системи MangaWorld. У роботі використано методи аналізу предметної області, порівняння існуючих аналогів, проєктування структури сайту, розробки користувацького інтерфейсу, інтеграції Jikan API та MangaDex API, організації збереження даних у Firebase, реалізації авторизації через Google Login і тестування webресурсу. Практичне значення полягає у створенні функціональної web-системи, яка може бути використана як приклад сучасного ресурсу для читання манги, ведення особистої бібліотеки, збереження улюблених тайтлів і персоналізації читацького досвіду. Розроблений сайт може бути основою для подальшого розширення функціоналу, зокрема додавання push-сповіщень, розширених рекомендацій, статистики читання, покращеної соціальної взаємодії та синхронізації прогресу між пристроями. |
| URI: | https://er.chdtu.edu.ua/handle/ChSTU/9875 |
| Appears in Collections: | 126 Інформаційні системи та технології (Web-технології, web-дизайн) |
Files in This Item:
| File | Description | Size | Format | |
|---|---|---|---|---|
| РЕП_БАК_Томіленко _WEB-2211.pdf Restricted Access | 3.43 MB | Adobe PDF | View/Open Request a copy |
Items in DSpace are protected by copyright, with all rights reserved, unless otherwise indicated.
Extracted text
МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
ФАКУЛЬТЕТ ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ І СИСТЕМ
КАФЕДРА ІНФОРМАЦІЙНИХ ТЕХНОЛОГІЙ ПРОЕКТУВАННЯ
ПОЯСНЮВАЛЬНА ЗАПИСКА
до кваліфікаційної роботи бакалавра
на тему: «Розробка інформаційної вебсистеми для читання та керування
колекціями манги»
Виконав: здобувач першого
(бакалаврського) рівня вищої освіти
4 курсу, групи WEB-2211
Спеціальності 126 «Інформаційні
системи та технології»
ОП «Web-технології, Web-дизайн»
Томіленко Віктор Олександрович
Керівник: доцент кафедри
інформаційних технологій
проектування, к.т.н., доцент
Ольга ЛАВДАНСЬКА
Рецензент: доцент кафедри
інформаційної безпеки та
комп’ютерної інженерії, к.т.н., доцент
Тетяна МИРОНЮК
Черкаси – 2026 року
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
(повна назва)
Кафедра інформаційних технологій проектування
(повна назва)
Освітньо-кваліфікаційний рівень бакалаврський
(назва)
Спеціальність 126 «Інформаційні системи та технології»
(шифр і назва)
ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
Тетяна ПРОКОПЕНКО
« » 20 року
З А В Д А Н Н Я
НА КВАЛІФІКАЦІЙНУ РОБОТУ БАКАЛАВРА
Томіленка Віктора Олександровича
(прізвище, ім’я, по батькові)
1. Тема роботи «Розробка інформаційної вебсистеми для читання та керування
колекціями манги»
Керівник роботи доцент кафедри інформаційних технологій проектування, к.т.н., доцент
Ольга ЛАВДАНСЬКА
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
Затверджено наказом Черкаського державного технологічного університету від
«12» Березня 2026 року № 56/03-03
2. Строк подання здобувачем роботи _______
3. Вихідні дані до роботи Методичні рекомендації до кваліфікаційної роботи бакалавра
зі спеціальності 126 «Інформаційні системи та технології», ОП «Web-технології, Web-
дизайн»; матеріали з web-розробки, UX/UI-дизайну, адаптивної верстки та тестування web-
застосунків; офіційна документація React, Vite, Tailwind CSS, React Router, Firebase, Vercel,
JavaScript, TypeScript, Jikan API та MangaDex API; аналіз web-сервісів MangaDex,
MyAnimeList, AniList і Manga Plus.
4. Зміст розрахунково-пояснювальної записки (перелік питань, які потрібно
розробити) Постановка задачі, огляд предметної області web-систем для читання манги,
аналіз аналогів MangaWorld, обґрунтування технічного завдання, проєктування структури,
дизайну, навігації та функціональних модулів web-системи, обґрунтування вибору
інструментальних засобів розробки, реалізація головної сторінки, каталогу манги, сторінки
деталей тайтлу, улюбленого, рекомендацій, особистої бібліотеки, налаштування профілю
та сторінки читання, інтеграція Jikan API, MangaDex API, Firebase і Google Login,
тестування системи, порівняння з аналогами, висновки, додатки.
5. Перелік графічного матеріалу (з точним зазначенням обов’язкових креслень,
плакатів) Навігаційна структура web-системи MangaWorld; модель наповнення web-системи;
схема організації даних у Firebase; схема маршрутів і джерел даних; скріншоти головної
сторінки, каталогу манги, сторінки деталей тайтлу, улюбленого, рекомендацій, особистої
бібліотеки, налаштування профілю та сторінки читання; таблиця порівняння з аналогами;
таблиці тестування; ілюстрації результатів перевірки адаптивності, працездатності та
зручності використання web-системи.
6. Консультанти розділів роботи
Розділ Прізвище, ініціали та Підпис, дата
посада
консультанта
завдання видав завдання прийняв
7. Дата видачі завдання 10 Лютого 2026 року
КАЛЕНДАРНИЙ ПЛАН
Строк
№ Назва етапів кваліфікаційної роботи
виконання
з/п бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу бакалавра 10.02.2026 Виконано
Аналіз літературних джерел, об’єкта та предмета
2 12.02.2026 Виконано
дослідження
Написання теоретичного розділу кваліфікаційної роботи
3 26.02.2026 Виконано
бакалавра
Написання аналітичного розділу, аналіз існуючих
4 02.03.2026 Виконано
платформ онлайн-навчання програмуванню
5 Проєктування структури та функціоналу web-сайту 22.03.2026 Виконано
6 Практична реалізація web-сайту 02.04.2026 Виконано
7 Тестування web-сайту та підготовка висновків 07.04.2026 Виконано
Передзахист кваліфікаційної роботи бакалавра на
8 22.04.2026 Виконано
засіданні кафедри
9 Подання роботи завідувачу кафедри 26.05.2026 Виконано
10 Захист кваліфікаційної роботи бакалавра 10.06.2026 Виконано
Здобувач вищої освіти
(підпис) (прізвище та ініціали)
Керівник роботи
(підпис) (прізвище та ініціали)
АНОТАЦІЯ
Структура та обсяг роботи. Пояснювальна записка складається з трьох
розділів, викладена на 91 сторінках, містить 23 рисунків, 2 таблиці, 40 джерел
використаної літератури, 2 додатки.
Кваліфікаційна робота присвячена розробці web-системи MangaWorld
для читання манги та керування особистими колекціями користувача. Ресурс
призначений для перегляду каталогу манги, пошуку та фільтрації тайтлів,
ознайомлення з детальною інформацією про мангу, додавання тайтлів до
улюбленого, ведення особистої бібліотеки, налаштування профілю та читання
розділів у web-середовищі.
Актуальність роботи зумовлена розвитком цифрових сервісів для
читання графічного контенту та потребою користувачів у зручних web-
інструментах для пошуку, перегляду, збереження й упорядкування манги.
Метою роботи є розробка web-системи MangaWorld з використанням сучасних
frontend-технологій, інтеграції із зовнішніми API, авторизації через Google-
акаунт і збереження користувацьких даних у Firebase.
Об’єкт дослідження – процес створення web-орієнтованих
інформаційних систем для читання манги та керування цифровими
колекціями. Предмет дослідження – структура, функціональність, інтерфейс,
програмна реалізація та організація даних web-системи MangaWorld.
У роботі використано методи аналізу предметної області, порівняння
існуючих аналогів, проєктування структури сайту, розробки користувацького
інтерфейсу, інтеграції Jikan API та MangaDex API, організації збереження
даних у Firebase, реалізації авторизації через Google Login і тестування web-
ресурсу.
Практичне значення полягає у створенні функціональної web-системи,
яка може бути використана як приклад сучасного ресурсу для читання манги,
ведення особистої бібліотеки, збереження улюблених тайтлів і персоналізації
читацького досвіду. Розроблений сайт може бути основою для подальшого
розширення функціоналу, зокрема додавання push-сповіщень, розширених
рекомендацій, статистики читання, покращеної соціальної взаємодії та
синхронізації прогресу між пристроями.
Ключові слова: web-система, MangaWorld, манга, каталог, особиста
бібліотека, Firebase, Google Login, Jikan API, MangaDex API, React, Vite,
Tailwind CSS, frontend.
SUMMARY
Structure and scope of the thesis. The explanatory note consists of three
chapters, presented on 91 pages, and includes 23 figures, 2 tables, 40 references, and
2 appendices.
The bachelor’s qualification thesis is devoted to the development of the
MangaWorld web system for reading manga and managing users’ personal
collections. The resource is intended for browsing a manga catalog, searching and
filtering titles, viewing detailed information about manga, adding titles to favorites,
managing a personal library, editing a user profile, and reading manga chapters in a
web environment.
The relevance of the work is determined by the development of digital services
for reading graphic content and the growing need for convenient web tools for
searching, viewing, saving, and organizing manga. The aim of the thesis is to
develop the MangaWorld web system using modern frontend technologies, external
API integration, Google account authentication, and user data storage in Firebase.
The object of the research is the process of creating web-oriented information
systems for reading manga and managing digital collections. The subject of the
research is the structure, functionality, interface, software implementation, and data
organization of the MangaWorld web system.
The thesis uses methods of subject area analysis, comparison of existing
analogues, website structure design, user interface development, integration of Jikan
API and MangaDex API, organization of data storage in Firebase, implementation
of Google Login authentication, and web resource testing.
The practical value of the work lies in the creation of a functional web system
that can be used as an example of a modern resource for reading manga, managing
a personal library, saving favorite titles, and personalizing the reading experience.
The developed website can serve as a basis for further functional expansion,
including push notifications, advanced recommendations, reading statistics,
improved social interaction, and progress synchronization across devices.
Keywords: web system, MangaWorld, manga, catalog, personal library,
Firebase, Google Login, Jikan API, MangaDex API, React, Vite, Tailwind CSS,
frontend.
ЗМІСТ
ВСТУП ................................................................................................................. 7
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ ....................................................................................................... 14
1.1 Опис предметної області ................................................................ 14
1.2 Доцільність розробки web-системи MangaWorld ........................ 16
1.3 Чинники, які впливають на розробку web-системи MangaWorld
19
1.4 Аналітичний огляд існуючих web-сервісів для читання манги та
ведення читацьких списків ...................................................................... 21
Висновки до розділу 1 .......................................................................... 27
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ ................ 29
2.1 Призначення web-системи MangaWorld ....................................... 29
2.2 Вимоги до дизайну web-системи MangaWorld ............................ 31
2.3 Структура сторінок web-системи MangaWorld ........................... 34
2.4 Навігація web-системи MangaWorld ............................................. 37
2.5 Вимоги до прототипу web-системи MangaWorld ........................ 39
2.6 Техніко-економічне обґрунтування доцільності розробки web-
системи MangaWorld ................................................................................ 42
Висновки до розділу 2 .......................................................................... 49
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ .................................................... 51
3.1 Обґрунтування вибору інструментальних засобів розробки ..... 51
3.2 Опис програмної реалізації web-системи MangaWorld .............. 55
3.3 Організація даних і взаємодія з Firebase....................................... 63
3.4 Логіка маршрутів і обміну даними у web-системі MangaWorld 66
3.5 Тестування web-системи MangaWorld .......................................... 69
3.6 Порівняння розробленої web-системи з аналогами .................... 72
Висновки до розділу 3 .......................................................................... 74
ВИСНОВКИ ..................................................................................................... 77
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ......................................................... 80
ДОДАТОК А ..................................................................................................... 83
ДОДАТОК Б ...................................................................................................... 85
ЧДТУ 262222. 022 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Томіленко В. О. Літ. Арк. Аркушів
Перевір. Лавданська О. В. Розробка інформаційної 91
вебсистеми для читання та
Рецензент
керування колекціями манги ФІТІС,
Н. контр. Лавданська О.В.
Пояснювальна записка кафедра ІТП, WEB-2211
Затверд. Прокопенко Т.О.
ВСТУП
У сучасних умовах web-технології відіграють важливу роль у розвитку
цифрових інформаційних ресурсів, оскільки забезпечують користувачам
швидкий доступ до електронного контенту, персоналізованих сервісів,
інтерактивних інструментів та зручних засобів керування власними даними.
Особливого значення такі технології набувають у сфері онлайн-читання, де
користувачі очікують не лише можливості перегляду матеріалів, а й наявності
каталогу, пошуку, фільтрації, рекомендацій, особистої бібліотеки, збереження
улюблених тайтлів і продовження читання з потрібного місця.
Актуальність теми кваліфікаційної роботи зумовлена зростанням
популярності цифрових платформ для читання манги, коміксів та інших
візуальних історій. Манга як формат поєднує текстовий і графічний контент,
тому web-система для її перегляду повинна мати не лише інформаційний
каталог, а й спеціалізований інтерфейс читання, що забезпечує зручне
відображення сторінок, навігацію між ними та доступ до розділів. Для
користувачів важливими є швидкість завантаження, зрозуміла структура
сайту, адаптивність, персоналізація, візуальна привабливість і можливість
формувати власну колекцію прочитаних, запланованих та улюблених тайтлів.
Сучасні цифрові сервіси дедалі частіше використовують зовнішні
програмні інтерфейси для отримання актуальних даних. У межах
розроблюваної web-системи MangaWorld основним джерелом інформації про
мангу є Jikan API, який надає доступ до даних MyAnimeList і використовується
для отримання списків, детальної інформації, популярного та нового контенту
[1]. Для отримання розділів і сторінок манги застосовується MangaDex API,
що дозволяє працювати з інформацією про розділи та матеріали для читання
[2]. Використання таких API дає можливість автоматизувати наповнення
сайту, зменшити потребу в ручному внесенні даних і забезпечити користувача
актуальною інформацією про тайтли.
Арк.
ЧДТУ 262222.022 ПЗ
7
Змн. Арк. № Документа Підпис Дата
На сьогодні існує значна кількість web-ресурсів для перегляду манги та
ведення читацьких списків, серед яких MangaDex, MyAnimeList, AniList,
MangaSee та інші сервіси [2; 8; 9]. Вони надають користувачам доступ до
каталогів, рейтингів, описів, списків тайтлів, пошуку та окремих функцій
персоналізації. Водночас частина таких платформ має складну структуру,
перевантажений інтерфейс, обмежену зручність для нових користувачів або
недостатньо простий механізм формування особистої бібліотеки. Саме тому
доцільною є розробка web-системи, яка поєднує основні можливості каталогу,
персонального профілю, рекомендацій і режиму читання в межах єдиного
зручного інтерфейсу.
Розроблювана web-система MangaWorld призначена для читання манги
та керування особистими колекціями користувача. Сайт має темну
мінімалістичну тему з фіолетово-рожевими акцентами, що відповідає
стилістиці сучасних розважальних платформ і забезпечує комфортне
сприйняття інтерфейсу під час тривалого використання. Основне меню
ресурсу містить розділи «Головна», «Каталог», «Улюблене», «Рекомендації»
та «Моя бібліотека». Така структура є логічною для користувача, оскільки
забезпечує швидкий перехід до основних функцій системи.
Головна сторінка MangaWorld містить презентаційний hero-блок із
назвою платформи, короткий опис призначення ресурсу, кнопки переходу до
читання та каталогу, блок переваг платформи, добірку популярної манги, нові
оновлення, інформацію про інтеграцію з API та футер із навігаційними
посиланнями. Блок переваг відображає ключові можливості системи: зручне
читання, особисту бібліотеку, сповіщення, соціальну взаємодію, рекомендації
та відстеження прогресу. Завдяки цьому головна сторінка виконує не лише
інформаційну, а й навігаційну функцію.
Каталог манги реалізовано у вигляді сітки карток тайтлів. Користувач
може переглядати доступні тайтли, здійснювати пошук, застосовувати
фільтри та переходити до сторінки детальної інформації. Картки містять
обкладинку, назву, жанри, статус, рейтинг і кількість розділів. Наявність таких
Арк.
ЧДТУ 262222.022 ПЗ
8
Змн. Арк. № Документа Підпис Дата
елементів дає змогу швидко оцінити тайтл і прийняти рішення щодо його
перегляду. Додатково реалізовано пагінацію, що покращує зручність роботи з
великими списками контенту.
Сторінка деталей манги містить розширену інформацію про обраний
тайтл. На ній відображаються обкладинка, назва, жанри, рейтинг, кількість
розділів і томів, статус, опис, автор і тип твору. Також передбачено кнопки
додавання тайтлу до улюбленого та особистої бібліотеки. Окремими блоками
розміщено розділи манги, схожі тайтли та коментарі. Такий підхід дозволяє
об’єднати всю важливу інформацію про твір на одній сторінці та забезпечити
користувачу зручну взаємодію з контентом.
Сторінка «Улюблене» призначена для збереження та перегляду тайтлів,
які користувач додав до власної колекції. Розділ «Рекомендації» містить
персоналізовані добірки манги, сформовані на основі популярності та
користувацьких інтересів. Сторінка «Моя бібліотека» виконує функцію
особистого профілю користувача. Вона містить банер, аватар, ім’я, username,
короткий опис, статистику та категорії «Читаю», «Заплановано»,
«Прочитано», «Улюблене», «Активність», «Підписки» і «Досягнення».
Завдяки цьому користувач може впорядковувати власну читацьку активність і
контролювати стан своєї бібліотеки.
Окремо реалізовано сторінку налаштування профілю, де користувач
може редагувати ім’я, username та опис профілю, а також переглядати
електронну пошту. Сторінка читання розділу забезпечує перегляд сторінок
манги, відображення прогресу, перемикання між попередньою та наступною
сторінкою, а також доступ до списку всіх сторінок розділу. Такий інтерфейс
спрямований на комфортне читання та збереження цілісного користувацького
досвіду.
Для збереження користувацьких даних у системі використовується
Firebase. Ця платформа забезпечує можливість організації хмарного
збереження інформації, роботи з профілями користувачів, особистою
бібліотекою, списком улюбленого та іншими персоналізованими даними [3].
Арк.
ЧДТУ 262222.022 ПЗ
9
Змн. Арк. № Документа Підпис Дата
Додатково в MangaWorld реалізовано систему авторизації через Google-
акаунт, що спрощує процес входу, зменшує потребу в окремій реєстрації та
підвищує зручність взаємодії з web-системою [4]. Такий підхід є доцільним
для сучасного web-додатка, оскільки поєднує зручність авторизації та
можливість збереження даних користувача між сеансами роботи.
Для реалізації клієнтської частини web-системи доцільним є
використання сучасних frontend-технологій. React забезпечує компонентний
підхід до побудови інтерфейсу, що дозволяє створювати сторінки та елементи
сайту як незалежні й повторно використовувані частини [5]. Vite
використовується як інструмент швидкого запуску, розробки та збирання
сучасних web-додатків [6]. Tailwind CSS дає змогу формувати адаптивний,
візуально цілісний і мінімалістичний інтерфейс за допомогою утилітарних
CSS-класів [7]. Поєднання цих технологій дозволяє створити швидкий,
зручний та гнучкий інтерфейс для роботи з великим обсягом візуального
контенту.
Метою кваліфікаційної роботи є розробка web-системи MangaWorld для
читання манги та керування особистими колекціями користувача, яка
забезпечує перегляд каталогу тайтлів, пошук і фільтрацію контенту,
відображення детальної інформації про мангу, додавання тайтлів до
улюбленого та бібліотеки, формування рекомендацій, налаштування профілю,
авторизацію через Google-акаунт, збереження користувацьких даних у
Firebase, а також перегляд розділів і сторінок манги з використанням Jikan API
та MangaDex API.
Для досягнення поставленої мети необхідно вирішити такі задачі:
– проаналізувати предметну область web-систем для читання манги,
електронних коміксів і керування цифровими колекціями;
– дослідити існуючі аналоги web-сервісів для перегляду манги та
ведення читацьких списків;
– визначити переваги й недоліки аналогів та сформувати вимоги до
власної web-системи;
Арк.
ЧДТУ 262222.022 ПЗ
10
Змн. Арк. № Документа Підпис Дата
– сформувати функціональні та нефункціональні вимоги до web-
системи MangaWorld;
– спроєктувати структуру сайту, основні сторінки, логіку навігації та
користувацькі сценарії;
– обґрунтувати вибір технологій розробки, зокрема React, Vite, Tailwind
CSS, Firebase, Jikan API та MangaDex API;
– реалізувати головну сторінку, каталог манги, сторінку деталей
тайтлу, сторінку улюбленого, рекомендації, особисту бібліотеку,
налаштування профілю та сторінку читання;
– реалізувати авторизацію користувача через Google-акаунт;
– забезпечити збереження користувацьких даних, профілю, улюбленого
та бібліотеки засобами Firebase;
– реалізувати отримання інформації про мангу через Jikan API;
– реалізувати отримання розділів і сторінок манги через MangaDex API;
– виконати тестування працездатності, адаптивності, навігації,
коректності авторизації, збереження даних і зручності використання
web-системи;
– провести порівняння розробленої web-системи з існуючими
аналогами та визначити її практичні переваги.
Об’єкт дослідження – процес створення web-орієнтованих
інформаційних систем для читання манги, перегляду цифрового контенту та
керування особистими користувацькими колекціями.
Предмет дослідження – методи, засоби та технології проєктування і
розробки web-системи MangaWorld, що забезпечує каталогізацію манги,
перегляд тайтлів, читання розділів, формування особистої бібліотеки,
авторизацію користувача, збереження даних у Firebase та інтеграцію із
зовнішніми API.
Методи дослідження. У процесі виконання кваліфікаційної роботи
використано методи аналізу та узагальнення інформації для дослідження
предметної області web-сервісів для читання манги; методи порівняльного
Арк.
ЧДТУ 262222.022 ПЗ
11
Змн. Арк. № Документа Підпис Дата
аналізу для визначення переваг і недоліків існуючих аналогів; методи
структурного та функціонального проєктування для формування архітектури
сайту; методи моделювання користувацьких сценаріїв для опису взаємодії
користувача з платформою; методи компонентного проєктування для
побудови інтерфейсу засобами React; методи web-програмування для
реалізації клієнтської частини системи; методи інтеграції API для отримання
даних із Jikan API та MangaDex API; методи хмарного збереження даних для
роботи з Firebase; методи автентифікації користувачів для реалізації входу
через Google-акаунт; методи тестування програмного забезпечення для
перевірки працездатності, адаптивності, коректності навігації та зручності
використання розробленої web-системи.
Практичне значення одержаних результатів полягає у створенні web-
системи MangaWorld, яка може бути використана як приклад сучасного
цифрового ресурсу для читання манги та керування особистими колекціями.
Розроблений сайт забезпечує централізований доступ до каталогу тайтлів,
перегляд детальної інформації, пошук і фільтрацію, персональні рекомендації,
додавання манги до улюбленого, ведення особистої бібліотеки, налаштування
профілю, авторизацію через Google-акаунт і збереження даних користувача у
Firebase.
Розроблена система має практичну цінність завдяки поєднанню
інформаційного контенту, персоналізованих користувацьких функцій,
сучасного інтерфейсу та інтеграції із зовнішніми джерелами даних. Темна
мінімалістична тема з фіолетово-рожевими акцентами забезпечує візуальну
цілісність ресурсу, а карткова структура каталогу спрощує сприйняття
інформації про тайтли. Використання Jikan API та MangaDex API дозволяє
отримувати актуальні дані про мангу, а Firebase забезпечує збереження
персональної інформації користувача та підтримку авторизації через Google-
акаунт.
Структура роботи. Кваліфікаційна робота складається зі вступу, трьох
розділів, висновків, списку використаних джерел та додатків. У першому
Арк.
ЧДТУ 262222.022 ПЗ
12
Змн. Арк. № Документа Підпис Дата
розділі розглянуто предметну область web-систем для читання манги та
керування цифровими колекціями, проаналізовано сучасні аналоги, визначено
їхні переваги й недоліки, а також сформульовано постановку задачі. У другому
розділі обґрунтовано технічне завдання, визначено функціональні та
нефункціональні вимоги до web-системи, описано структуру сайту,
користувацькі сценарії, вимоги до дизайну, навігації, авторизації, збереження
даних та інтеграції із зовнішніми API. У третьому розділі описано вибір
засобів реалізації, процес розробки web-системи MangaWorld, реалізацію
основних сторінок і функціональних модулів, підключення Firebase, Google
Login, Jikan API та MangaDex API, а також результати тестування системи.
Арк.
ЧДТУ 262222.022 ПЗ
13
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 1. ПОСТАНОВКА ЗАДАЧІ. ОГЛЯД ІСНУЮЧИХ РІШЕНЬ,
АНАЛОГІВ
1.1 Опис предметної області
Web-системи для читання манги та керування цифровими колекціями є
складовою сучасного інформаційного середовища, у якому користувачі
отримують доступ до електронного графічного контенту, персональних
добірок, рекомендацій, історії перегляду та інструментів для впорядкування
власної читацької активності. Такі ресурси поєднують функції електронної
бібліотеки, каталогу, засобу пошуку, персонального профілю та
спеціалізованого інтерфейсу для перегляду сторінок манги.
Манга як формат цифрового контенту має низку особливостей, які
впливають на вимоги до web-системи. На відміну від звичайного текстового
матеріалу, манга складається з послідовності графічних сторінок, об’єднаних
у розділи, томи та окремі тайтли. Тому для зручного читання важливими є
коректне завантаження зображень, послідовна навігація між сторінками,
відображення прогресу, можливість переходу до попередньої або наступної
сторінки, а також доступ до списку всіх сторінок поточного розділу.
Предметна область web-систем для читання манги охоплює процеси
пошуку, перегляду, сортування, фільтрації, збереження та персоналізації
контенту. До таких процесів належать формування каталогу манги, отримання
інформації про тайтли, відображення обкладинок, жанрів, рейтингів, статусів,
описів, авторів, кількості розділів і томів, додавання тайтлів до улюбленого,
ведення особистої бібліотеки, формування рекомендацій та збереження
користувацьких даних.
У сучасних web-додатках важливу роль відіграє інтеграція із зовнішніми
API. Для web-системи MangaWorld основним джерелом інформації про мангу
є Jikan API, який використовується для отримання списків, деталей тайтлів,
популярного та нового контенту [10]. Для отримання розділів і сторінок манги
Арк.
ЧДТУ 262222.022 ПЗ
14
Змн. Арк. № Документа Підпис Дата
застосовується MangaDex API, що дає змогу працювати з даними, необхідними
для організації режиму читання [11]. Завдяки використанню API система може
автоматично отримувати актуальну інформацію без ручного наповнення
великого каталогу.
Важливою складовою предметної області є персоналізація
користувацького досвіду. Користувач web-системи для читання манги повинен
мати змогу створювати власну бібліотеку, додавати тайтли до категорій
«Читаю», «Заплановано», «Прочитано» та «Улюблене», переглядати
статистику, змінювати профіль і зберігати результати взаємодії із сайтом між
сеансами роботи. У web-системі MangaWorld для цього використовується
Firebase, що забезпечує збереження користувацьких даних у хмарному
середовищі [12]. Авторизація реалізована через Google-акаунт, що спрощує
вхід користувача та забезпечує зручну взаємодію з персональними функціями
системи [13].
З технічної точки зору, web-система для читання манги повинна мати
стабільну клієнтську частину, адаптивний інтерфейс і зручну структуру
компонентів. React дає змогу створювати інтерфейс на основі компонентного
підходу, що спрощує повторне використання елементів, таких як картки манги,
кнопки, навігаційні блоки, секції профілю та елементи сторінки читання [14].
Vite застосовується як інструмент швидкої розробки та збирання web-додатка
[15]. Tailwind CSS використовується для створення адаптивного інтерфейсу за
допомогою утилітарних класів, що дозволяє підтримувати єдиний стиль
оформлення сторінок [16].
Сучасна web-система для читання манги може включати такі основні
компоненти:
– головну сторінку з коротким описом платформи, перевагами,
популярною мангою та новими оновленнями;
– каталог манги з пошуком, фільтрами, картками тайтлів і пагінацією;
– сторінку детального перегляду манги з обкладинкою, описом, жанрами,
рейтингом, статусом, автором і кнопками взаємодії;
Арк.
ЧДТУ 262222.022 ПЗ
15
Змн. Арк. № Документа Підпис Дата
– сторінку улюбленого з колекцією обраних тайтлів;
– сторінку рекомендацій із персоналізованими добірками;
– особисту бібліотеку користувача з категоріями читання, статистикою,
активністю та досягненнями;
– сторінку налаштування профілю;
– сторінку читання розділу з переглядом сторінок манги та навігацією;
– систему авторизації через Google-акаунт;
– хмарне збереження користувацьких даних у Firebase.
Перевагами таких web-систем є швидкий доступ до великого обсягу
контенту, можливість персонального впорядкування тайтлів, автоматичне
отримання інформації через API, збереження читацького прогресу,
адаптивність і зручність використання на різних пристроях. Водночас під час
розробки потрібно враховувати можливі проблеми: залежність від зовнішніх
API, швидкість завантаження зображень, коректність відображення сторінок,
захист користувацьких даних, доступність інтерфейсу та стабільність
авторизації.
Отже, web-системи для читання манги є актуальним напрямом розробки
інформаційних ресурсів, оскільки поєднують каталогізацію цифрового
контенту, персоналізацію, хмарне збереження даних, авторизацію користувачів
і спеціалізований інтерфейс читання. Це створює передумови для розробки
web-системи MangaWorld, орієнтованої на зручний перегляд манги, роботу з
особистою бібліотекою та інтеграцію з Jikan API, MangaDex API і Firebase.
1.2 Доцільність розробки web-системи MangaWorld
Розробка web-системи MangaWorld є доцільною у зв’язку з потребою
користувачів у зручному, сучасному та персоналізованому ресурсі для читання
манги. Користувачеві важливо не лише знайти потрібний тайтл, а й
переглянути його опис, рейтинг, жанри, статус, кількість розділів, додати до
Арк.
ЧДТУ 262222.022 ПЗ
16
Змн. Арк. № Документа Підпис Дата
улюбленого, зберегти у власній бібліотеці та продовжити читання в зручному
форматі. Якщо такі функції розміщені в різних сервісах або подані у складному
інтерфейсі, взаємодія з контентом стає менш зручною.
Доцільність розробки MangaWorld полягає у створенні єдиної web-
системи, яка поєднує каталог манги, сторінку деталей тайтлу, рекомендації,
особисту бібліотеку, улюблене, профіль користувача, сторінку налаштувань і
режим читання. На відміну від універсальних каталогів, розроблюваний
ресурс зосереджений саме на зручному користувацькому сценарії: користувач
переходить на головну сторінку, переглядає популярні або нові тайтли,
відкриває каталог, знаходить мангу, додає її до бібліотеки та читає розділи.
До основних проблем, які можуть виникати під час використання
частини існуючих web-сервісів для читання манги, можна віднести:
– складну або перевантажену структуру інтерфейсу;
– недостатньо зручне формування особистої бібліотеки;
– відсутність цілісного україномовного опису функцій;
– обмежену персоналізацію;
– різну якість пошуку та фільтрації;
– незручне відображення контенту на окремих пристроях;
– недостатньо зрозумілу навігацію між каталогом, сторінкою тайтлу та
сторінкою читання;
– залежність від окремих джерел даних без зручного об’єднання
функцій у межах одного інтерфейсу.
Розробка MangaWorld дозволяє частково вирішити зазначені проблеми
шляхом створення структурованого та візуально цілісного ресурсу. Темна
мінімалістична тема з фіолетово-рожевими акцентами забезпечує сучасний
вигляд платформи, а карткова структура каталогу дає змогу швидко
переглядати основні характеристики тайтлів. Водночас сторінка деталей манги
надає розширену інформацію про твір і містить кнопки для додавання до
улюбленого та бібліотеки.
Арк.
ЧДТУ 262222.022 ПЗ
17
Змн. Арк. № Документа Підпис Дата
Особливо важливим є використання Firebase для збереження даних. У
межах web-системи це дозволяє зберігати персональну інформацію
користувача, стан бібліотеки, список улюбленого, налаштування профілю та
інші дані, пов’язані з взаємодією з платформою [12]. Завдяки авторизації через
Google-акаунт користувач може швидко увійти в систему без створення
окремого логіна та пароля [13]. Такий підхід підвищує зручність використання
ресурсу та робить його більш наближеним до сучасних web-застосунків.
Доцільність розробки також пояснюється необхідністю демонстрації
практичних навичок створення web-орієнтованих інформаційних систем. У
межах проєкту застосовуються React, Vite, Tailwind CSS, Firebase, Jikan API та
MangaDex API. Їх використання дозволяє реалізувати компонентну структуру
інтерфейсу, інтеграцію із зовнішніми джерелами даних, авторизацію
користувача, хмарне збереження інформації та адаптивне оформлення
сторінок.
Окремою перевагою MangaWorld є можливість подальшого розвитку. У
майбутньому систему можна доповнити розширеними алгоритмами
рекомендацій, сповіщеннями про нові розділи, детальнішою статистикою
читання, розширеним пошуком, додатковими мовними налаштуваннями та
покращеною соціальною взаємодією між користувачами. При цьому
адміністративна панель у межах поточної реалізації не передбачена, оскільки
основна увага приділена користувацькому функціоналу.
Таким чином, створення web-системи MangaWorld є актуальним і
практично доцільним рішенням. Розробка дозволяє об’єднати каталог манги,
сторінки тайтлів, персональну бібліотеку, улюблене, рекомендації, профіль
користувача, Google Login, Firebase-збереження даних та режим читання в
межах однієї web-орієнтованої системи.
Арк.
ЧДТУ 262222.022 ПЗ
18
Змн. Арк. № Документа Підпис Дата
1.3 Чинники, які впливають на розробку web-системи MangaWorld
Процес розробки web-системи MangaWorld залежить від сукупності
функціональних, технічних, інформаційних, дизайнерських та організаційних
чинників. Їх урахування дозволяє створити ресурс, який буде зручним,
стабільним, адаптивним і придатним для подальшого розвитку.
Одним із головних чинників є визначення цільової аудиторії.
MangaWorld орієнтований на користувачів, які цікавляться читанням манги,
переглядом популярних тайтлів, веденням особистої бібліотеки та отриманням
рекомендацій. До потенційної аудиторії належать читачі манги, користувачі,
які бажають упорядкувати власні списки, а також ті, хто шукає зручний ресурс
із темним інтерфейсом і зрозумілою навігацією.
Важливим чинником є структура сайту. Для MangaWorld передбачено
розділи «Головна», «Каталог», «Улюблене», «Рекомендації» та «Моя
бібліотека». Головна сторінка виконує презентаційну й навігаційну функції,
каталог забезпечує пошук тайтлів, сторінка деталей надає повну інформацію
про мангу, «Улюблене» зберігає обрані тайтли, «Рекомендації» формує
добірки, а «Моя бібліотека» забезпечує персональну взаємодію користувача із
системою.
Наступним чинником є якість користувацького інтерфейсу. Оскільки
манга є візуальним контентом, інтерфейс не повинен відволікати користувача
від обкладинок, сторінок і основної інформації. Для MangaWorld обрано темну
мінімалістичну тему з фіолетово-рожевими акцентами. Така стилістика
створює сучасний вигляд, підкреслює інтерактивні елементи й забезпечує
комфортне сприйняття сайту під час тривалого використання.
Окрему роль відіграє адаптивність. Користувачі можуть відкривати сайт
із різних пристроїв, тому сторінки повинні коректно відображатися на
комп’ютерах, ноутбуках, планшетах і смартфонах. Особливо важливою
адаптивність є для сторінки читання, оскільки саме на ній користувач
взаємодіє з графічним контентом. Для реалізації адаптивного оформлення
Арк.
ЧДТУ 262222.022 ПЗ
19
Змн. Арк. № Документа Підпис Дата
використовується Tailwind CSS, який підтримує створення гнучких макетів за
допомогою утилітарних класів [16].
Важливим технічним чинником є компонентна структура. У MangaWorld
багато повторюваних елементів: картки манги, кнопки взаємодії, навігаційні
компоненти, блоки статистики, секції профілю та елементи сторінки читання.
React дозволяє реалізувати ці елементи у вигляді окремих компонентів, що
спрощує підтримку коду й подальший розвиток системи [14].
Ще одним чинником є організація даних. У web-системі MangaWorld
інформація про мангу отримується із зовнішніх API, а користувацькі дані
зберігаються у Firebase. Jikan API застосовується для отримання списків,
деталей, популярного та нового контенту [10]. MangaDex API
використовується для отримання розділів і сторінок манги [11]. Firebase
забезпечує хмарне збереження даних користувача, що робить систему
придатною для персоналізованої роботи після входу через Google-акаунт [12;
13].
Безпека також є важливим чинником під час розробки web-системи.
Оскільки MangaWorld працює з профілем користувача та персональними
списками, необхідно забезпечити коректну автентифікацію та обмеження
доступу до особистих даних. Використання Google Login через Firebase
Authentication дозволяє застосувати готовий механізм входу, який підтримує
автентифікацію через федеративного провайдера [13].
Швидкодія web-сайту має особливе значення, оскільки ресурс працює з
великою кількістю обкладинок і сторінок манги. Надмірне навантаження на
сторінки може погіршити користувацький досвід. Тому під час розробки
потрібно враховувати оптимізацію компонентів, раціональне завантаження
зображень, обмеження кількості елементів на сторінці та використання
пагінації. Vite сприяє швидкому запуску й оптимізованому збиранню frontend-
додатка [15].
Також необхідно враховувати доступність інтерфейсу. Рекомендації
WCAG визначають загальні принципи доступності web-контенту:
Арк.
ЧДТУ 262222.022 ПЗ
20
Змн. Арк. № Документа Підпис Дата
сприйнятність, керованість, зрозумілість і надійність [17]. Для MangaWorld це
означає необхідність використання читабельних шрифтів, достатнього
контрасту, зрозумілих кнопок, передбачуваної навігації та логічної структури
сторінок.
Отже, успішна реалізація MangaWorld потребує комплексного підходу,
який враховує потреби цільової аудиторії, структуру сайту, якість інтерфейсу,
адаптивність, компонентну організацію, інтеграцію з API, хмарне збереження
даних, авторизацію, швидкодію та доступність. Урахування цих чинників
дозволяє створити web-систему, яка відповідає сучасним вимогам до
користувацьких інформаційних ресурсів.
1.4 Аналітичний огляд існуючих web-сервісів для читання манги та
ведення читацьких списків
Проведення аналітичного огляду існуючих web-сервісів дає змогу
визначити основні підходи до організації каталогів манги, перегляду тайтлів,
пошуку, фільтрації, рекомендацій і ведення персональних списків. Для аналізу
було обрано ресурси, які виконують подібні або частково подібні функції до
MangaWorld: MangaDex, MyAnimeList, AniList і Manga Plus.
Обрані аналоги відрізняються за призначенням і функціональними
можливостями. MangaDex орієнтований на перегляд манги та має розвинені
можливості роботи з тайтлами й розділами. MyAnimeList є великою базою
даних аніме та манги з рейтингами, списками й відгуками користувачів.
AniList поєднує каталог, соціальні функції та персональні списки. Manga Plus
є офіційним сервісом для читання манги від Shueisha, що надає доступ до
окремих тайтлів у легальному форматі [11; 18–20].
Під час аналізу web-сервісів доцільно використати такі об’єктивні
критерії:
– наявність каталогу манги;
Арк.
ЧДТУ 262222.022 ПЗ
21
Змн. Арк. № Документа Підпис Дата
– можливість пошуку тайтлів;
– наявність фільтрації;
– відображення карток із обкладинками;
– сторінка детального перегляду тайтлу;
– наявність рейтингу або оцінок;
– можливість читання розділів;
– наявність особистого профілю;
– можливість створення власних списків;
– наявність рекомендацій;
– адаптивність інтерфейсу;
– простота навігації;
– можливість використання API або відкритих даних;
– зручність для користувача-початківця.
MangaDex
Рисунок 1.1 – Головна сторінка сервісу MangaDex
Арк.
ЧДТУ 262222.022 ПЗ
22
Змн. Арк. № Документа Підпис Дата
MangaDex є web-сервісом, орієнтованим на перегляд манги, манхви та
маньхуа. Його важливою особливістю є наявність великої кількості тайтлів,
розділів, мовних варіантів і можливостей для пошуку. Для теми
кваліфікаційної роботи MangaDex є важливим аналогом, оскільки демонструє
підхід до організації каталогу, сторінок тайтлів і режиму читання. Також
MangaDex API використовується у розроблюваній системі MangaWorld для
отримання розділів і сторінок манги [11].
Перевагами MangaDex є широкий каталог, наявність розділів, зручна
структура тайтлів і можливість перегляду сторінок манги.
До недоліків можна віднести складність окремих елементів інтерфейсу
для нових користувачів, залежність від мовних груп і неоднорідність
наповнення. Для MangaWorld доцільно врахувати переваги MangaDex, зокрема
логіку роботи з розділами та сторінками, але реалізувати простіший і візуально
цілісний інтерфейс.
MyAnimeList
Рисунок 1.2 – Головна сторінка сервісу MyAnimeList
Арк.
ЧДТУ 262222.022 ПЗ
23
Змн. Арк. № Документа Підпис Дата
MyAnimeList є однією з найвідоміших баз даних аніме та манги. Сервіс
містить інформацію про тайтли, рейтинги, описи, жанри, авторів, відгуки та
списки користувачів [18]. Для MangaWorld цей ресурс є важливим прикладом
організації великого каталогу й рейтингової системи. Саме дані MyAnimeList
використовуються через Jikan API, що дозволяє отримувати інформацію про
мангу для розроблюваного сайту [10].
Перевагами MyAnimeList є великий обсяг даних, система оцінювання,
списки користувачів і деталізовані сторінки тайтлів.
Водночас інтерфейс сервісу може сприйматися як перевантажений, а
його структура більше орієнтована на базу даних і соціальну взаємодію, ніж на
простий режим читання. Для MangaWorld доцільно використати сильну
сторону MyAnimeList — структуровані дані про тайтли, але поєднати їх із
більш сучасним і мінімалістичним інтерфейсом.
AniList
Рисунок 1.3 – Головна сторінка сервісу AniList
Арк.
ЧДТУ 262222.022 ПЗ
24
Змн. Арк. № Документа Підпис Дата
AniList є web-сервісом для ведення списків аніме та манги, перегляду
інформації про тайтли, оцінювання, створення профілю та взаємодії з іншими
користувачами [19]. Сервіс має сучасний інтерфейс і значний акцент на
персоналізації. Для теми кваліфікаційної роботи AniList є прикладом
організації особистих списків, профілю користувача та рекомендацій.
Перевагою AniList є зручне ведення персональних списків, сучасне
оформлення, соціальні функції та візуально привабливе подання даних.
Водночас сервіс охоплює не лише мангу, а й аніме, тому не є
вузькоспеціалізованою платформою саме для читання манги. Для MangaWorld
доцільно врахувати підхід AniList до персональних списків і профілю, але
зосередити систему саме на читанні манги та роботі з бібліотекою.
Manga Plus
Рисунок 1.4 – Головна сторінка сервісу Manga Plus
Manga Plus є офіційним сервісом для читання манги, який надає доступ
до окремих тайтлів у цифровому форматі [20]. Цей ресурс є важливим
Арк.
ЧДТУ 262222.022 ПЗ
25
Змн. Арк. № Документа Підпис Дата
прикладом легального web-сервісу для перегляду манги, де основний акцент
зроблено на читанні розділів, нових випусках і доступі до популярних серій.
Перевагою Manga Plus є офіційний характер контенту, простий доступ
до окремих тайтлів і зручний режим читання.
Водночас сервіс має обмеження щодо доступного каталогу, мов, регіонів
і можливостей персонального керування бібліотекою. Для MangaWorld
доцільно врахувати простоту читання, характерну для Manga Plus, але
доповнити її ширшими функціями персоналізації, улюбленого, рекомендацій і
профілю користувача.
Web-система MangaWorld
Рисунок 1.5 – Головна сторінка web-системи MangaWorld
Арк.
ЧДТУ 262222.022 ПЗ
26
Змн. Арк. № Документа Підпис Дата
Розроблювана web-система MangaWorld орієнтована на читання манги
та керування особистими колекціями користувача. На відміну від частини
аналогів, сайт має компактну структуру та зосереджується на основних
користувацьких функціях: перегляді каталогу, пошуку, роботі з улюбленим,
рекомендаціях, особистій бібліотеці, профілі та читанні розділів.
За результатами порівняння встановлено, що кожен із розглянутих
аналогів має власні переваги. MangaDex вирізняється великим каталогом і
підтримкою читання розділів, MyAnimeList має значну базу даних і
рейтингову систему, AniList пропонує зручні персональні списки й соціальні
функції, а Manga Plus є прикладом офіційного сервісу для читання манги.
Порівняно з аналогами, MangaWorld має перевагу у поєднанні каталогу,
рекомендацій, улюбленого, особистої бібліотеки, налаштування профілю,
Google Login, Firebase-збереження даних і сторінки читання в межах одного
мінімалістичного інтерфейсу. Водночас система має користувацький характер
і не містить адміністративної панелі, що відповідає фактичній реалізації
проєкту.
Таким чином, аналіз аналогів показав, що розробка MangaWorld є
обґрунтованою. Власна система повинна поєднати сильні сторони існуючих
рішень: каталог і розділи MangaDex, інформаційність MyAnimeList,
персоналізацію AniList і зручність читання Manga Plus. При цьому
MangaWorld має зберегти просту структуру, сучасний темний дизайн, хмарне
збереження даних і зручний користувацький сценарій.
Висновки до розділу 1
У першому розділі кваліфікаційної роботи було розглянуто предметну
область web-систем для читання манги та керування цифровими колекціями.
Визначено, що такі системи поєднують функції каталогу, електронної
Арк.
ЧДТУ 262222.022 ПЗ
27
Змн. Арк. № Документа Підпис Дата
бібліотеки, персонального профілю, рекомендацій, улюбленого та
спеціалізованого інтерфейсу для перегляду сторінок манги.
Було обґрунтовано доцільність розробки web-системи MangaWorld.
Встановлено, що потреба у такій системі зумовлена популярністю цифрового
читання, необхідністю зручного каталогу манги, персоналізації
користувацького досвіду, збереження власних списків і доступу до сторінки
читання в межах одного ресурсу.
У процесі аналізу було визначено основні чинники, які впливають на
розробку MangaWorld. До них належать цільова аудиторія, структура сайту,
якість інтерфейсу, адаптивність, компонентна організація, інтеграція із
зовнішніми API, хмарне збереження даних у Firebase, авторизація через
Google-акаунт, швидкодія, безпека та доступність.
У межах аналітичного огляду було досліджено існуючі web-сервіси:
MangaDex, MyAnimeList, AniList і Manga Plus. Для порівняння було
використано об’єктивні критерії, зокрема наявність каталогу, пошуку,
фільтрації, карток тайтлів, сторінки деталей, рейтингу, режиму читання,
особистого профілю, списків, рекомендацій, адаптивності та зручності
навігації.
За результатами порівняння встановлено, що MangaWorld поєднує
ключові можливості аналогів у межах одного користувацького інтерфейсу.
Система містить головну сторінку, каталог манги, сторінку деталей тайтлу,
улюблене, рекомендації, особисту бібліотеку, налаштування профілю та
сторінку читання. Дані користувача зберігаються через Firebase, авторизація
реалізована через Google-акаунт, інформація про мангу отримується через
Jikan API, а розділи та сторінки — через MangaDex API.
Отже, результати першого розділу дозволили сформувати основні
напрями подальшої розробки web-системи MangaWorld.
Арк.
ЧДТУ 262222.022 ПЗ
28
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 2. ОБҐРУНТУВАННЯ ТЕХНІЧНОГО ЗАВДАННЯ
2.1 Призначення web-системи MangaWorld
Розробка web-системи MangaWorld спрямована на створення сучасного
інформаційного web-ресурсу для читання манги, перегляду каталогу тайтлів,
керування особистою бібліотекою користувача та збереження персональних
читацьких даних. Така система поєднує інформаційну, навігаційну,
персоналізовану та читацьку функції, що дозволяє користувачу не лише
знаходити мангу, а й формувати власні списки, переглядати рекомендації та
переходити до читання розділів.
Основне призначення MangaWorld полягає у систематизованому поданні
манги в межах єдиного web-середовища. Сайт орієнтований на користувачів,
які хочуть швидко знайти потрібний тайтл, переглянути його основні
характеристики, ознайомитися з описом, рейтингом, жанрами, статусом,
кількістю розділів і томів, додати тайтл до улюбленого або особистої
бібліотеки та перейти до читання доступних розділів.
Актуальність створення такої web-системи зумовлена розвитком
цифрових сервісів для читання графічного контенту та потребою користувачів
у зручному доступі до персоналізованих читацьких функцій. На відміну від
звичайного каталогу, web-система для читання манги повинна забезпечувати
не лише перегляд інформації про тайтли, а й спеціалізований інтерфейс
читання, можливість авторизації, збереження персональних списків і
відображення користувацької активності.
Особливістю web-системи MangaWorld є поєднання декількох
функціональних блоків у межах єдиного інтерфейсу. До них належать головна
сторінка, каталог манги, сторінка деталей тайтлу, розділ «Улюблене», сторінка
рекомендацій, особиста бібліотека користувача, сторінка налаштування
профілю та сторінка читання розділу. Головна сторінка виконує презентаційну
Арк.
ЧДТУ 262222.022 ПЗ
29
Змн. Арк. № Документа Підпис Дата
функцію, каталог забезпечує пошук і перегляд тайтлів, сторінка деталей надає
розширену інформацію про мангу, а особиста бібліотека дозволяє
користувачеві впорядковувати власну читацьку активність.
Для отримання інформації про мангу у системі використовується Jikan
API. Цей програмний інтерфейс надає доступ до даних MyAnimeList і може
застосовуватися для отримання списків, деталей, популярного та нового
контенту [21]. Для отримання розділів і сторінок манги використовується
MangaDex API, що забезпечує доступ до даних, необхідних для реалізації
режиму читання [22]. Такий підхід дозволяє автоматизувати наповнення сайту
й уникнути ручного створення великого каталогу тайтлів.
Важливою особливістю реалізації MangaWorld є використання Firebase
для збереження користувацьких даних. Firebase є платформою для розробки
web- і мобільних застосунків, яка надає хмарну інфраструктуру для створення
та підтримки сучасних програмних продуктів [23]. У межах системи
MangaWorld Firebase використовується для збереження інформації профілю,
бібліотеки користувача, улюблених тайтлів та інших персоналізованих даних.
Авторизація користувача реалізована через Google-акаунт за допомогою
Firebase Authentication, що підтримує вхід через федеративних провайдерів,
зокрема Google [24].
Цінність web-системи MangaWorld полягає в таких можливостях:
– надання доступу до каталогу манги;
– пошук і фільтрація тайтлів;
– перегляд карток манги з обкладинкою, назвою, рейтингом, жанрами,
статусом і кількістю розділів;
– перегляд детальної сторінки окремого тайтлу;
– додавання манги до улюбленого;
– додавання тайтлів до особистої бібліотеки;
– формування персоналізованих рекомендацій;
– авторизація користувача через Google-акаунт;
– збереження даних користувача у Firebase;
Арк.
ЧДТУ 262222.022 ПЗ
30
Змн. Арк. № Документа Підпис Дата
– редагування профілю користувача;
– перегляд сторінок манги у режимі читання;
– відображення прогресу читання;
– демонстрація сучасного адаптивного інтерфейсу для web-системи
цифрового читання.
Отже, web-система MangaWorld є інструментом для систематизованого
перегляду манги, персонального впорядкування тайтлів, збереження
читацьких даних і реалізації зручного режиму читання. Вона поєднує каталог,
профіль користувача, улюблене, рекомендації, бібліотеку, авторизацію через
Google та інтеграцію із зовнішніми API.
2.2 Вимоги до дизайну web-системи MangaWorld
Дизайн web-системи для читання манги має важливе значення, оскільки
саме інтерфейс формує перше враження користувача про ресурс і впливає на
зручність подальшої взаємодії з контентом. Для такого типу системи
недостатньо лише привабливого зовнішнього вигляду. Інтерфейс повинен бути
логічним, адаптивним, читабельним, не перевантаженим і орієнтованим на
комфортне сприйняття візуального контенту.
Web-система MangaWorld оформлена в темній мінімалістичній
стилістиці з фіолетово-рожевими акцентами. Такий візуальний підхід
відповідає тематиці сучасних розважальних web-сервісів і створює комфортне
середовище для перегляду обкладинок, сторінок манги та інформаційних
блоків. Темний фон дозволяє зменшити візуальне навантаження, а яскраві
акценти використовуються для виділення кнопок, активних елементів,
важливих блоків і навігації.
Основними вимогами до дизайну web-системи MangaWorld є:
Арк.
ЧДТУ 262222.022 ПЗ
31
Змн. Арк. № Документа Підпис Дата
Зрозуміла структура інтерфейсу. Користувач повинен швидко
орієнтуватися в основних розділах сайту: «Головна», «Каталог», «Улюблене»,
«Рекомендації» та «Моя бібліотека».
Єдиний візуальний стиль. Усі сторінки повинні мати узгоджене
оформлення, спільну кольорову гаму, подібний стиль кнопок, карток, форм,
блоків профілю та навігаційних елементів.
Адаптивність. Сайт повинен коректно відображатися на комп’ютерах,
ноутбуках, планшетах і смартфонах, оскільки користувачі можуть переглядати
мангу з різних пристроїв.
Читабельність тексту. Назви тайтлів, описи, характеристики, навігаційні
елементи, коментарі та дані профілю повинні бути достатньо контрастними й
зручними для сприйняття.
Візуальне виділення ключових дій. Кнопки «Читати», «Детальніше»,
«Улюблене», «У бібліотеку», «Зберегти», «Увійти через Google» мають бути
помітними та розміщеними у логічних місцях.
Зручність роботи з картками манги. Картки повинні містити коротку, але
достатню інформацію для швидкого ознайомлення з тайтлом: обкладинку,
назву, рейтинг, жанри, статус і кількість розділів.
Мінімізація зайвих елементів. Інтерфейс не повинен бути
перевантаженим декоративними блоками, оскільки основним завданням є
зручний доступ до каталогу, бібліотеки та читання.
Послідовність кольорових акцентів. Основні інтерактивні елементи
доцільно виділяти фіолетово-рожевими градієнтами, а допоміжні блоки —
нейтральними темними відтінками.
Доступність інтерфейсу. Елементи керування мають бути зрозумілими
для різних категорій користувачів, а контраст між текстом і фоном повинен
забезпечувати комфортне читання. Рекомендації WCAG визначають загальні
принципи доступності web-контенту: сприйнятність, керованість, зрозумілість
і надійність інтерфейсу [25].
Арк.
ЧДТУ 262222.022 ПЗ
32
Змн. Арк. № Документа Підпис Дата
Логічне розміщення навігації. Основне меню має бути доступним із
ключових сторінок сайту та забезпечувати швидкий перехід до каталогу,
улюбленого, рекомендацій і особистої бібліотеки.
Дизайн MangaWorld має не лише естетичне, а й функціональне значення.
Темна кольорова схема створює сучасний вигляд, карткова структура
впорядковує великий обсяг інформації про тайтли, а сторінка читання
забезпечує зручне переглядання графічного контенту. Візуальні акценти
допомагають користувачеві швидше знаходити інтерактивні елементи, а
мінімалістичний підхід зменшує навантаження на сприйняття.
Рисунок 2.1 – Головна сторінка web-системи MangaWorld
Таким чином, дизайн web-системи MangaWorld повинен забезпечувати
зручну взаємодію користувача з каталогом манги, сторінкою деталей тайтлу,
особистою бібліотекою, профілем і сторінкою читання. Основними
принципами оформлення є мінімалізм, адаптивність, читабельність, єдиний
стиль і чітке виділення ключових дій.
Арк.
ЧДТУ 262222.022 ПЗ
33
Змн. Арк. № Документа Підпис Дата
2.3 Структура сторінок web-системи MangaWorld
Структура web-сайту визначає логіку розміщення сторінок,
функціональних модулів і зв’язків між ними. Для системи читання манги
важливо, щоб користувач міг швидко перейти від загального ознайомлення з
ресурсом до каталогу, сторінки тайтлу, улюбленого, рекомендацій, особистої
бібліотеки або сторінки читання. Зручна структура скорочує кількість зайвих
дій і підвищує ефективність використання сайту.
Основна структура web-системи MangaWorld включає такі сторінки:
«Головна», «Каталог», «Деталі манги», «Улюблене», «Рекомендації», «Моя
бібліотека», «Налаштування профілю» та «Сторінка читання розділу». У
верхній частині сайту передбачено навігаційне меню з назвою MangaWorld і
пунктами переходу до основних розділів. Така структура відповідає типовій
логіці використання системи: користувач знайомиться з ресурсом, відкриває
каталог, обирає тайтл, переглядає деталі, додає мангу до бібліотеки та
переходить до читання.
Головна сторінка виконує ознайомчу та презентаційну функцію. Вона
містить hero-блок із назвою MangaWorld, короткий опис призначення ресурсу,
кнопки швидкого переходу до каталогу або читання, блок переваг платформи,
популярну мангу, нові оновлення, блок інтеграції з API та футер. Така сторінка
формує перше враження про ресурс і допомагає користувачеві зрозуміти його
основні можливості.
Сторінка «Каталог» є одним із головних функціональних розділів
системи. Вона містить список манги у вигляді карток, пошукове поле, фільтри,
пагінацію та кнопки переходу до сторінки деталей. Кожна картка відображає
обкладинку, назву, рейтинг, статус, жанри й кількість розділів. Наявність
пошуку та фільтрації дозволяє швидко знайти потрібний тайтл за назвою або
тематикою.
Сторінка детального перегляду манги призначена для розширеного
ознайомлення з обраним тайтлом. На ній розміщується обкладинка, назва,
Арк.
ЧДТУ 262222.022 ПЗ
34
Змн. Арк. № Документа Підпис Дата
жанри, рейтинг, кількість розділів і томів, статус, опис, автор, тип твору, а
також кнопки додавання до улюбленого та особистої бібліотеки. Додатково на
сторінці передбачено блок розділів, схожу мангу та коментарі.
Сторінка «Улюблене» призначена для перегляду тайтлів, які користувач
позначив як улюблені. Такий розділ спрощує повторний доступ до цікавих
творів і дозволяє зберігати мангу для подальшого перегляду.
Сторінка «Рекомендації» містить добірки манги, які можуть зацікавити
користувача. Наявність такого розділу покращує навігацію контентом і
допомагає знаходити нові тайтли без ручного пошуку в каталозі.
Сторінка «Моя бібліотека» виконує роль особистого профілю
користувача. У цьому розділі відображаються банер, аватар, ім’я користувача,
username, короткий опис, статистика та категорії «Читаю», «Заплановано»,
«Прочитано», «Улюблене», «Активність», «Підписки» і «Досягнення». Такий
розділ дозволяє користувачу контролювати власну читацьку активність і
впорядковувати тайтли за категоріями.
Сторінка налаштування профілю забезпечує редагування імені, username
та опису користувача, а також перегляд email, пов’язаного з акаунтом. Ця
сторінка робить взаємодію з web-системою більш персоналізованою.
Сторінка читання розділу призначена для перегляду сторінок манги.
Вона містить область перегляду сторінки, індикатор прогресу, кнопки
переходу до попередньої та наступної сторінки, а також список усіх сторінок
розділу. Такий інтерфейс відповідає основному призначенню MangaWorld —
зручному читанню манги у web-середовищі.
Узагальнено структура web-системи MangaWorld може бути
представлена такими сторінками та модулями:
– головна сторінка;
– каталог манги;
– сторінка детального перегляду манги;
– сторінка улюблених тайтлів;
– сторінка рекомендацій;
Арк.
ЧДТУ 262222.022 ПЗ
35
Змн. Арк. № Документа Підпис Дата
– особиста бібліотека користувача;
– сторінка налаштування профілю;
– сторінка читання розділу;
– навігаційне меню;
– футер;
– модулі пошуку та фільтрації;
– модуль авторизації через Google;
– модуль збереження даних у Firebase;
– модулі інтеграції з Jikan API та MangaDex API.
Рисунок 2.2 – Навігаційна структура web-системи MangaWorld
Арк.
ЧДТУ 262222.022 ПЗ
36
Змн. Арк. № Документа Підпис Дата
2.4 Навігація web-системи MangaWorld
Навігація є одним із ключових елементів web-системи, оскільки вона
визначає, наскільки швидко й зручно користувач може знаходити потрібну
інформацію. Для сайту читання манги це особливо важливо, адже користувач
може шукати каталог, сторінку конкретного тайтлу, улюблене, рекомендації,
особисту бібліотеку або сторінку читання. Якщо навігація побудована логічно,
користувач швидше переходить до потрібної дії та менше часу витрачає на
пошук.
У web-системі MangaWorld основна навігація реалізується через верхнє
меню. Воно містить назву платформи та пункти «Головна», «Каталог»,
«Улюблене», «Рекомендації» і «Моя бібліотека». Таке меню є компактним і не
перевантажує сторінку зайвими елементами. Основні переходи розміщені у
верхній частині сайту, що відповідає звичним сценаріям використання web-
ресурсів.
Розділ «Каталог» відкриває список манги. На цій сторінці користувач
може переглядати картки тайтлів, використовувати пошук, застосовувати
фільтри та переходити до детальної інформації про конкретну мангу. Це один
із найважливіших навігаційних напрямів, оскільки саме каталог є центральним
функціональним блоком системи.
Розділ «Улюблене» забезпечує перехід до колекції тайтлів, які
користувач додав до власного списку. Завдяки цьому користувач може швидко
повернутися до манги, яка його зацікавила.
Розділ «Рекомендації» забезпечує перехід до персоналізованих або
тематичних добірок. Такий розділ допомагає користувачеві знаходити нову
мангу без необхідності самостійно переглядати весь каталог.
Розділ «Моя бібліотека» відкриває персональну сторінку користувача.
Через нього користувач може переглянути профіль, статистику, категорії
бібліотеки, активність, підписки та досягнення. У цьому розділі також
передбачено перехід до налаштування профілю.
Арк.
ЧДТУ 262222.022 ПЗ
37
Змн. Арк. № Документа Підпис Дата
На сторінці деталей манги передбачено додаткові навігаційні елементи:
кнопки додавання до улюбленого та бібліотеки, перехід до списку розділів,
перехід до сторінки читання, блок схожої манги та коментарі. Це дозволяє
користувачеві виконати основні дії без повернення до каталогу.
На сторінці читання розділу передбачено навігацію між сторінками
манги. Користувач може переходити до попередньої або наступної сторінки,
бачити прогрес читання та відкривати список усіх сторінок. Така навігація є
важливою для зручного сприйняття графічного контенту.
Окрім основного меню, на сайті використовуються й інші навігаційні
елементи:
– пошук манги;
– фільтри за параметрами;
– кнопки «Детальніше», «Читати», «Улюблене», «У бібліотеку»,
«Зберегти»;
– посилання між каталогом, сторінкою тайтлу та сторінкою читання;
– вкладки особистої бібліотеки;
– навігація сторінками розділу;
– пагінація каталогу;
– навігація у футері.
Для реалізації переходів між сторінками у frontend-додатках може
використовуватися маршрутизація. У React-проєктах для цього часто
застосовується React Router, який дозволяє організовувати переходи між
сторінками без повного перезавантаження web-додатка [26]. Такий підхід є
зручним для односторінкових застосунків, оскільки забезпечує швидку зміну
вмісту сторінок і підтримує логіку сучасних web-інтерфейсів.
Арк.
ЧДТУ 262222.022 ПЗ
38
Змн. Арк. № Документа Підпис Дата
Рисунок 2.3 – Основне навігаційне меню web-системи MangaWorld
Грамотно побудована навігація зменшує кількість зайвих дій, покращує
зручність користування ресурсом і дозволяє користувачеві швидко перейти до
вибору манги, перегляду деталей, формування бібліотеки або читання розділу.
2.5 Вимоги до прототипу web-системи MangaWorld
Прототип web-системи є важливим етапом проєктування, оскільки
дозволяє попередньо визначити структуру сторінок, розміщення основних
елементів інтерфейсу та логіку переходів між розділами сайту. Для
MangaWorld прототип доцільно розглядати як схематичну модель майбутнього
ресурсу, яка показує розташування навігації, карток манги, профілю
користувача, кнопок взаємодії та сторінки читання.
Арк.
ЧДТУ 262222.022 ПЗ
39
Змн. Арк. № Документа Підпис Дата
На прототипі web-системи MangaWorld повинні бути відображені
основні сторінки: головна сторінка, каталог манги, сторінка деталей тайтлу,
улюблене, рекомендації, особиста бібліотека, налаштування профілю та
сторінка читання розділу. Такий підхід дозволяє оцінити загальну логіку
роботи сайту ще до етапу програмної реалізації.
Рисунок 2.13 – Прототип сторінок web-системи MangaWorld
Головна сторінка прототипу містить верхнє навігаційне меню, головний
інформаційний блок, кнопки швидкої дії, блок переваг, популярну мангу,
нові оновлення, інформацію про API та футер. Така структура дозволяє
користувачеві швидко зрозуміти призначення ресурсу й перейти до
перегляду каталогу.
Сторінка каталогу передбачає розміщення пошукового поля, фільтрів, карток
манги та пагінації. Картки містять місце для обкладинки, назви, рейтингу,
Арк.
ЧДТУ 262222.022 ПЗ
40
Змн. Арк. № Документа Підпис Дата
жанрів, статусу й кількості розділів. Це дає змогу користувачеві швидко
переглядати доступні тайтли та обирати потрібну мангу.
Сторінка окремого тайтлу містить блок із обкладинкою, назвою,
жанрами, рейтингом, статусом, описом, автором, типом, кількістю розділів і
томів, кнопками додавання до улюбленого та бібліотеки, списком розділів,
схожою мангою та коментарями. Така структура забезпечує повне
ознайомлення користувача з твором перед читанням.
Особиста бібліотека користувача у прототипі передбачає відображення
банера, аватара, імені, username, опису, статистики, категорій бібліотеки,
активності, підписок і досягнень. Це дозволяє реалізувати персоналізовану
взаємодію користувача із системою.
Сторінка налаштування профілю містить форму редагування імені,
username і опису користувача, а також відображення email. Оскільки в системі
реалізовано Google Login, email користувача пов’язується з Google-акаунтом і
використовується як частина профільної інформації.
Сторінка читання розділу містить область перегляду сторінок манги,
індикатор прогресу, кнопки переходу між сторінками та список усіх сторінок.
Цей розділ повинен бути максимально простим і не перевантаженим, оскільки
основна увага користувача має бути зосереджена на читанні.
Отже, розроблений прототип дозволяє наочно представити структуру
MangaWorld, визначити основні сторінки, розміщення функціональних
елементів і логіку переходів між ними. Він є основою для подальшої
програмної реалізації інтерфейсу, створення компонентів, налаштування
навігації та перевірки зручності користувацьких сценаріїв.
Арк.
ЧДТУ 262222.022 ПЗ
41
Змн. Арк. № Документа Підпис Дата
2.6 Техніко-економічне обґрунтування доцільності розробки web-
системи MangaWorld
Техніко-економічне обґрунтування є важливим етапом під час розробки
web-орієнтованої інформаційної системи, оскільки дозволяє оцінити
доцільність створення ресурсу з погляду технічної реалізації, трудомісткості,
очікуваної користі, витрат часу та перспектив подальшого розвитку. Для web-
системи MangaWorld таке обґрунтування має особливе значення, оскільки
система поєднує каталог манги, персоналізовані користувацькі функції,
авторизацію, хмарне збереження даних, інтеграцію з API та режим читання.
Розробка MangaWorld передбачає створення сучасного web-ресурсу,
який забезпечує користувачам доступ до каталогу манги, сторінок деталей
тайтлів, улюбленого, рекомендацій, особистої бібліотеки, налаштування
профілю та читання розділів. Саме тому під час оцінювання доцільності
розробки необхідно враховувати не лише створення інтерфейсу, а й реалізацію
окремих функціональних модулів, організацію даних, інтеграцію з Firebase,
підключення Google Login, роботу із зовнішніми API, тестування та
розгортання ресурсу.
З технічної точки зору доцільність створення MangaWorld полягає в
можливості реалізації зручного, адаптивного й швидкого frontend-додатка
засобами сучасних web-технологій. React забезпечує компонентну структуру
інтерфейсу, Vite спрощує запуск і збирання frontend-проєкту, а Tailwind CSS
дозволяє швидко формувати адаптивний дизайн. React офіційно описується як
бібліотека для створення інтерфейсів із компонентів [27], Vite — як інструмент
збирання для сучасних web-додатків [28], а Tailwind CSS — як utility-first CSS-
фреймворк для побудови сучасних інтерфейсів [29].
З економічної точки зору web-система має практичну цінність завдяки
можливості багаторазового використання, оновлення функціоналу,
підключення зовнішніх джерел даних і поступового розширення. Оскільки
дані про мангу отримуються через Jikan API та MangaDex API, немає потреби
Арк.
ЧДТУ 262222.022 ПЗ
42
Змн. Арк. № Документа Підпис Дата
вручну створювати великий каталог тайтлів. Використання Firebase дозволяє
організувати збереження користувацьких даних без розробки окремої
серверної інфраструктури на початковому етапі.
Розробка MangaWorld виконується послідовно та охоплює кілька
взаємопов’язаних етапів. На першому етапі здійснюється аналіз предметної
області, під час якого визначаються особливості web-систем для читання
манги, потреби потенційних користувачів, основні функції майбутнього сайту
та проблеми, які повинна вирішувати система.
Наступним етапом є формування функціональних і нефункціональних
вимог до системи. До функціональних вимог належать перегляд каталогу
манги, пошук і фільтрація, перегляд детальної сторінки тайтлу, додавання до
улюбленого, ведення особистої бібліотеки, авторизація через Google-акаунт,
збереження даних у Firebase, перегляд рекомендацій, налаштування профілю
та читання розділів. До нефункціональних вимог належать адаптивність,
зручність інтерфейсу, швидкодія, стабільність роботи, читабельність,
доступність і можливість подальшого розширення.
Після визначення вимог виконується проєктування структури сайту. На
цьому етапі визначаються основні сторінки ресурсу, логіка навігації та
взаємозв’язки між окремими модулями. Для MangaWorld передбачено такі
основні розділи: головна сторінка, каталог, сторінка деталей тайтлу, улюблене,
рекомендації, особиста бібліотека, налаштування профілю та сторінка
читання. Така структура дозволяє логічно розподілити інформацію та
забезпечити зручний доступ до основних функцій сайту.
Окремим етапом є розробка дизайну інтерфейсу. Для ресурсу з читання
манги важливо створити сучасний вигляд, який відповідає тематиці цифрового
графічного контенту та не відволікає користувача від читання. Під час
розробки дизайну враховуються кольорова гама, типографіка, розміщення
карток манги, вигляд кнопок, форм, навігаційних елементів, блоків профілю та
сторінки читання.
Арк.
ЧДТУ 262222.022 ПЗ
43
Змн. Арк. № Документа Підпис Дата
Після підготовки структури та дизайну виконується реалізація
користувацької частини сайту. У межах цього етапу створюються основні
сторінки web-системи, зокрема головна сторінка, каталог, сторінка деталей
тайтлу, улюблене, рекомендації, особиста бібліотека, налаштування профілю
та сторінка читання. Особлива увага приділяється каталогу, оскільки саме він
є одним із ключових функціональних розділів системи.
Важливим етапом є підключення зовнішніх API. Jikan API
використовується для отримання інформації про тайтли, списки, популярну та
нову мангу [21]. MangaDex API використовується для отримання розділів і
сторінок, що необхідні для реалізації режиму читання [22]. Завдяки цьому
MangaWorld може працювати з актуальним контентом без ручного внесення
всіх даних.
Окреме значення має інтеграція Firebase. Ця платформа
використовується для збереження персональних даних користувача,
улюбленого, бібліотеки та профільної інформації [23]. Для входу користувача
реалізовано авторизацію через Google-акаунт за допомогою Firebase
Authentication [24]. Такий підхід підвищує зручність використання системи й
дозволяє зберігати дані між сеансами роботи.
Після реалізації основних модулів проводиться тестування web-системи.
Перевіряється коректність роботи сторінок, кнопок, форм, пошуку, фільтрації,
навігації, авторизації, збереження даних у Firebase, отримання інформації з
API, адаптивність і сторінка читання. Для оцінювання якості web-сторінок
можна використовувати інструменти аудиту, зокрема Lighthouse, який дозволяє
отримувати рекомендації щодо продуктивності, доступності, SEO та
найкращих практик web-розробки [30].
Для більш повного обґрунтування доцільності розробки MangaWorld
було виконано орієнтовну оцінку трудомісткості та витрат на створення
проєкту. Оскільки система має дипломний характер і використовує
безкоштовні інструменти, основними витратами є час на аналіз предметної
області, проєктування структури сайту, розробку інтерфейсу, реалізацію
Арк.
ЧДТУ 262222.022 ПЗ
44
Змн. Арк. № Документа Підпис Дата
сторінок, підключення API, інтеграцію Firebase, налаштування Google Login,
тестування та розгортання ресурсу.
Таблиця 2.1 – Орієнтовна трудомісткість розробки web-системи MangaWorld
Орієнтовна
тривалість,
№ Етап виконання роботи год
1 Аналіз предметної області та аналогів 8
2 Формування вимог до web-системи 10
Проєктування структури сайту та
3 прототипу 12
4 Розробка дизайну інтерфейсу 16
Реалізація основних сторінок і
5 компонентів 42
6 Інтеграція Jikan API та MangaDex API 14
7 Підключення Firebase та Google Login 12
Тестування, виправлення помилок і
8 розгортання 16
Разом 130
Загальна орієнтовна трудомісткість розробки web-системи MangaWorld
становить 130 годин. Найбільше часу припадає на реалізацію основних
сторінок і компонентів, оскільки саме цей етап охоплює створення головної
сторінки, каталогу, сторінки деталей тайтлу, особистої бібліотеки,
рекомендацій, налаштування профілю, сторінки читання, карток манги,
фільтрів, кнопок і навігаційних блоків.
Для визначення приблизної вартості розробки було враховано, що проєкт
створюється в межах кваліфікаційної роботи, тому фактичні витрати на оплату
праці, хостинг та використання основних інструментів не передбачаються.
Більшість використаних технологій мають безкоштовні тарифи або відкриту
документацію, що зменшує фінансові витрати на реалізацію дипломного
проєкту.
Арк.
ЧДТУ 262222.022 ПЗ
45
Змн. Арк. № Документа Підпис Дата
Таблиця 2.2 – Орієнтовний розрахунок витрат на розробку web-системи
MangaWorld
Сума,
№ Стаття витрат грн
Оплата праці розробника за 130 годин
1 роботи 0
Додаткові витрати на організацію
2 розробки 0
3 Амортизація комп’ютерної техніки 0
4 Витрати на електроенергію 0
5 Витрати на доступ до мережі Інтернет 0
6 Використання Jikan API та MangaDex API 0
Використання Firebase у межах
7 доступного тарифу 0
8 Розгортання web-проєкту на Vercel 0
Загальна орієнтовна вартість 0
Отже, орієнтовна вартість розробки web-системи MangaWorld у межах
дипломного проєкту становить 0 грн. Це значення є умовним, оскільки
фактичні витрати можуть змінюватися залежно від тривалості розробки,
вартості робочого часу, технічного забезпечення, використаних тарифів
Firebase, умов хостингу та подальшого розвитку системи.
Важливим елементом технічного обґрунтування є визначення маршрутів
web-сайту та логіки обробки даних. У межах користувацької частини
MangaWorld передбачено такі основні сторінкові маршрути: головна сторінка
«/», сторінка каталогу «/catalog», сторінка детального перегляду манги
«/manga/», сторінка улюбленого «/favorites», сторінка рекомендацій
«/recommendations», сторінка особистої бібліотеки «/library», сторінка
налаштування профілю «/profile/settings», сторінка читання розділу «/reader/».
Такий підхід забезпечує зрозумілу структуру переходів і дозволяє
користувачам швидко знаходити потрібні розділи.
У системі також передбачено логіку роботи із зовнішніми джерелами
даних. Jikan API відповідає за отримання списків манги, детальної інформації,
популярних і нових тайтлів. MangaDex API використовується для отримання
розділів і сторінок манги. Firebase відповідає за збереження персональних
Арк.
ЧДТУ 262222.022 ПЗ
46
Змн. Арк. № Документа Підпис Дата
користувацьких даних і роботу з авторизацією через Google-акаунт. Така
архітектура дозволяє розділити інформаційні та персоналізовані функції
системи.
Рисунок 2.14 – Маршрути та джерела даних web-системи MangaWorld
Економічна доцільність розробки полягає в тому, що для створення web-
системи використано доступні інструменти: React, Vite, Tailwind CSS, Firebase,
Jikan API, MangaDex API та Vercel. Завдяки цьому не потрібно витрачати кошти
на ліцензійне програмне забезпечення або окрему серверну інфраструктуру на
етапі дипломної реалізації. Використання зовнішніх API дозволяє отримувати
інформацію про мангу без створення власної великої бази контенту.
Порівняно з розробкою повноцінної комерційної платформи з власною
серверною частиною, редакційною системою, платіжними модулями та
адміністративною панеллю, реалізація MangaWorld потребує менших витрат
часу й ресурсів. Водночас вона дозволяє показати основні принципи роботи
Арк.
ЧДТУ 262222.022 ПЗ
47
Змн. Арк. № Документа Підпис Дата
сучасної web-системи для читання манги: каталог, пошук, фільтрацію,
сторінку тайтлу, улюблене, рекомендації, особисту бібліотеку, профіль,
авторизацію, Firebase-збереження даних і режим читання.
Окремою перевагою розробленої web-системи є можливість подальшого
розвитку. У майбутньому сайт MangaWorld можна доповнити розширеними
алгоритмами рекомендацій, push-сповіщеннями про нові розділи, покращеною
статистикою читання, додатковими мовними налаштуваннями, коментарями в
реальному часі та глибшою персоналізацією читацького досвіду.
Адміністративна панель у поточній реалізації відсутня, тому в межах опису
фактичного функціоналу системи вона не розглядається.
З технічної точки зору web-система є придатною до масштабування,
оскільки її структура передбачає окремі функціональні модулі: головна
сторінка, каталог, сторінка тайтлу, улюблене, рекомендації, бібліотека
користувача, налаштування профілю, сторінка читання, авторизація та
збереження даних. Такий модульний підхід дозволяє доповнювати систему
новими можливостями без повної зміни архітектури.
З практичної точки зору розроблений ресурс може використовуватися як
демонстраційна web-система для читання манги, приклад інтеграції frontend-
додатка із зовнішніми API та Firebase або основа для подальшого розширення
до повноцінної читацької платформи. Його використання дозволяє
систематизувати інформацію про мангу, надати користувачам зручний
інтерфейс для пошуку тайтлів і продемонструвати принципи організації
персональної бібліотеки.
Отже, розробка web-системи MangaWorld є технічно можливою,
економічно обґрунтованою та практично доцільною. Створений ресурс може
використовуватися для демонстрації структури системи читання манги,
перегляду каталогу, роботи з особистою бібліотекою, збереження
користувацьких даних у Firebase, авторизації через Google і читання розділів.
Наявність каталогу, сторінок тайтлів, рекомендацій, профілю користувача й
Арк.
ЧДТУ 262222.022 ПЗ
48
Змн. Арк. № Документа Підпис Дата
адаптивного інтерфейсу забезпечує функціональну завершеність системи, а
можливість подальшого розширення підвищує її цінність і перспективність.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи було розглянуто призначення
web-системи MangaWorld, визначено її основні функції та роль у створенні
цифрового середовища для читання манги. Було встановлено, що
розроблюваний ресурс має не лише надавати користувачам доступ до каталогу
тайтлів, а й створювати зручне середовище для пошуку, фільтрації, перегляду
деталей, формування улюбленого, роботи з особистою бібліотекою,
налаштування профілю та читання розділів.
У процесі аналізу було сформовано вимоги до дизайну, структури
сторінок, навігації, наповнення та прототипу web-системи. Особливу увагу
було приділено зручності користувацького інтерфейсу, оскільки для сайту
читання манги важливо забезпечити швидкий доступ до каталогу, сторінки
тайтлу, бібліотеки користувача та режиму читання. Визначено, що дизайн
ресурсу має бути сучасним, адаптивним, візуально цілісним і не
перевантаженим зайвими елементами.
Під час розробки структури сайту було враховано фактичну реалізацію
MangaWorld, яка включає головну сторінку, каталог, сторінку деталей манги,
улюблене, рекомендації, особисту бібліотеку, налаштування профілю та
сторінку читання. Кожен із цих розділів виконує окрему функцію в межах web-
системи. Головна сторінка знайомить користувача з ресурсом, каталог
забезпечує доступ до тайтлів, сторінка деталей надає розширену інформацію,
улюблене й бібліотека відповідають за персоналізацію, а сторінка читання
забезпечує перегляд сторінок манги.
Також було описано каталог манги, який містить картки тайтлів, пошук,
фільтри та пагінацію. Наявність таких елементів значно покращує зручність
Арк.
ЧДТУ 262222.022 ПЗ
49
Змн. Арк. № Документа Підпис Дата
користування сайтом, оскільки користувач може швидко знайти мангу
відповідно до власних інтересів. Окремо було розглянуто сторінку детального
перегляду манги, де розміщується опис, характеристики, список розділів,
схожі тайтли та коментарі.
Важливою складовою web-системи є використання Firebase для
хмарного збереження користувацьких даних. Завдяки цьому система може
підтримувати персональні сценарії роботи з даними, зокрема збереження
профілю, улюбленого та бібліотеки. Авторизація через Google-акаунт спрощує
процес входу користувача та робить взаємодію із сайтом більш зручною.
Інформація про мангу отримується через Jikan API, а розділи й сторінки —
через MangaDex API.
Окрему увагу у другому розділі було приділено техніко-економічному
обґрунтуванню доцільності розробки web-системи MangaWorld. Було
визначено основні етапи створення ресурсу, орієнтовну трудомісткість,
витрати, маршрути сайту та логіку роботи з джерелами даних. Встановлено,
що використання доступних технологій і зовнішніх API дозволяє реалізувати
систему без значних фінансових витрат у межах дипломного проєкту.
Проведений аналіз дозволив сформувати основу для подальшої
реалізації web-системи MangaWorld та визначити ключові напрями її розвитку.
У межах другого розділу було уточнено призначення ресурсу, його основні
функції, вимоги до дизайну, структури сторінок, навігації, наповнення,
прототипу та техніко-економічного обґрунтування. Це дало змогу визначити
логіку побудови системи та встановити, які саме елементи необхідно
реалізувати для забезпечення зручної взаємодії користувача з каталогом,
сторінкою тайтлу, особистою бібліотекою, профілем і сторінкою читання.
У майбутньому ресурс може бути доповнений розширеними
рекомендаціями, push-сповіщеннями, покращеною статистикою читання,
додатковими налаштуваннями профілю, гнучкішою системою категорій,
коментарями в реальному часі та іншими персоналізованими можливостями.
Арк.
ЧДТУ 262222.022 ПЗ
50
Змн. Арк. № Документа Підпис Дата
РОЗДІЛ 3. РОЗРОБКА WEB-РЕСУРСУ
3.1 Обґрунтування вибору інструментальних засобів розробки
Розробка web-системи MangaWorld потребувала вибору таких
інструментальних засобів, які забезпечують зручну реалізацію
користувацького інтерфейсу, швидке завантаження сторінок, адаптивність,
стабільну роботу в браузері, інтеграцію із зовнішніми API, авторизацію
користувача та хмарне збереження персональних даних. Оскільки система
призначена для читання манги, перегляду каталогу тайтлів, ведення особистої
бібліотеки та роботи з профілем користувача, особливу увагу було приділено
frontend-технологіям, організації компонентів, підключенню Firebase,
використанню Google Login та взаємодії з Jikan API і MangaDex API.
Під час вибору технологій враховувалися такі критерії: підтримка
компонентного підходу до побудови інтерфейсу, швидкість створення
сторінок, зручність підтримки коду, можливість повторного використання
елементів, підтримка адаптивного дизайну, інтеграція із зовнішніми сервісами,
стабільність роботи в сучасних браузерах, можливість авторизації через
Google-акаунт, хмарне збереження даних і зручність публікації готового
проєкту в мережі Інтернет.
Основним середовищем розробки було обрано Visual Studio Code. Це
середовище є зручним для створення web-додатків, оскільки підтримує роботу
з HTML, CSS, JavaScript, TypeScript, JSX, сучасними frontend-бібліотеками,
терміналом і системами керування версіями. Завдяки розширенням Visual
Studio Code спрощується форматування коду, підсвічування синтаксису, пошук
помилок, організація структури проєкту та швидке переміщення між файлами
[31].
Арк.
ЧДТУ 262222.022 ПЗ
51
Змн. Арк. № Документа Підпис Дата
Рисунок 3.1 – Структура проєкту MangaWorld у середовищі Visual Studio
Code
Для реалізації інтерфейсу використано бібліотеку React. Її перевагою є
компонентний підхід, за якого сторінки web-системи формуються з окремих
незалежних елементів. У межах MangaWorld такими компонентами є
Арк.
ЧДТУ 262222.022 ПЗ
52
Змн. Арк. № Документа Підпис Дата
навігаційне меню, картки манги, блоки переваг, секції популярних тайтлів,
сторінка деталей манги, кнопки додавання до улюбленого та бібліотеки,
профіль користувача, форма налаштування профілю, блоки рекомендацій,
коментарі та елементи сторінки читання. Компонентна структура дозволяє
повторно використовувати однакові елементи на різних сторінках і спрощує
подальше розширення системи [32].
Для локальної розробки та збирання проєкту використано Vite. Цей
інструмент забезпечує швидкий запуск frontend-додатка, оперативне
оновлення змін під час редагування коду та оптимізоване формування
фінальної версії сайту. Використання Vite є доцільним для MangaWorld,
оскільки система містить декілька сторінок, велику кількість компонентів,
картки з обкладинками, сторінки профілю та модулі взаємодії з API [33].
Для стилізації інтерфейсу використано Tailwind CSS. Його перевагою є
можливість швидко створювати адаптивний дизайн за допомогою утилітарних
CSS-класів. У web-системі MangaWorld Tailwind CSS використовується для
оформлення темного фону, фіолетово-рожевих акцентів, карток манги, кнопок,
форм, контейнерів, сторінки профілю, сітки каталогу, блоків рекомендацій і
сторінки читання. Такий підхід дозволяє підтримувати єдиний стиль сайту та
швидко змінювати зовнішній вигляд окремих елементів без створення великої
кількості окремих CSS-файлів [34].
Для реалізації логіки роботи інтерфейсу використано JavaScript і
TypeScript. JavaScript є основною мовою програмування для створення
інтерактивних web-сторінок, а TypeScript дає змогу доповнити код системою
типів, що полегшує підтримку проєкту та зменшує ймовірність частини
помилок під час розробки [35; 36]. У межах MangaWorld ці засоби
застосовуються для роботи з масивами даних, обробки результатів API-
запитів, фільтрації тайтлів, керування станом компонентів, взаємодії з Firebase,
обробки подій користувача та відображення відповідних елементів інтерфейсу.
Для маршрутизації між сторінками використовується React Router. Він
дозволяє організувати переходи між головною сторінкою, каталогом,
Арк.
ЧДТУ 262222.022 ПЗ
53
Змн. Арк. № Документа Підпис Дата
сторінкою деталей манги, улюбленим, рекомендаціями, особистою
бібліотекою, налаштуваннями профілю та сторінкою читання без повного
перезавантаження web-додатка [37]. Такий підхід відповідає логіці сучасних
односторінкових застосунків, де зміна сторінки відбувається швидко, а
користувач не відчуває значних затримок під час навігації.
Для отримання інформації про мангу використовується Jikan API. Це
неофіційний API для доступу до даних MyAnimeList, який дає змогу
отримувати інформацію про тайтли, рейтинги, жанри, статуси, описи, авторів,
популярну мангу та нові оновлення [21]. У MangaWorld Jikan API
використовується як основне джерело даних для списків, деталей, пошуку
популярного та нового контенту.
Для отримання розділів і сторінок манги використовується MangaDex
API. Це джерело даних застосовується для організації режиму читання,
отримання інформації про розділи та відображення сторінок манги [22].
Використання MangaDex API є важливим для MangaWorld, оскільки саме
сторінка читання є однією з ключових функцій системи.
Для збереження користувацьких даних використовується Firebase. У
межах MangaWorld ця платформа забезпечує хмарне збереження даних
профілю, улюблених тайтлів, особистої бібліотеки, користувацьких категорій
та іншої персоналізованої інформації [23]. Завдяки цьому користувач може
увійти до системи та отримати доступ до власної бібліотеки після повторного
відкриття сайту.
Для авторизації користувача реалізовано вхід через Google-акаунт за
допомогою Firebase Authentication. Такий підхід спрощує процес входу,
оскільки користувачеві не потрібно створювати окремий логін і пароль для
MangaWorld. Firebase Authentication підтримує вхід через Google як
федеративного провайдера, що робить систему авторизації зручною для web-
додатка [24].
Для перевірки роботи сайту використовувалися браузерні інструменти
розробника, зокрема Chrome DevTools. Вони дозволяють переглядати
Арк.
ЧДТУ 262222.022 ПЗ
54
Змн. Арк. № Документа Підпис Дата
структуру HTML-елементів, перевіряти стилі, тестувати адаптивність,
аналізувати повідомлення в консолі, контролювати мережеві запити до API та
оцінювати поведінку сторінок під час взаємодії користувача із сайтом [38]. Для
додаткової оцінки якості сторінок може використовуватися Lighthouse, який
допомагає перевіряти продуктивність, доступність, SEO та відповідність web-
сторінок кращим практикам [30].
Для розміщення готового сайту в мережі Інтернет використано
платформу Vercel. Вона підтримує розгортання сучасних frontend-проєктів і
дозволяє швидко отримати публічне посилання на web-додаток [39]. Це є
зручним для дипломного проєкту, оскільки дає змогу перевіряти роботу сайту
не лише локально, а й у реальному браузерному середовищі з різних пристроїв.
Отже, обраний стек технологій є доцільним для реалізації web-системи
MangaWorld. Поєднання Visual Studio Code, React, Vite, Tailwind CSS,
JavaScript, TypeScript, React Router, Jikan API, MangaDex API, Firebase, Google
Login, Chrome DevTools, Lighthouse і Vercel дозволяє створити адаптивний,
сучасний і функціонально завершений web-ресурс для читання манги та
керування особистою бібліотекою користувача.
3.2 Опис програмної реалізації web-системи MangaWorld
Web-систему MangaWorld реалізовано як користувацький web-ресурс,
призначений для перегляду манги, пошуку тайтлів, ознайомлення з детальною
інформацією, формування улюбленого, ведення особистої бібліотеки,
редагування профілю та читання розділів. Основна ідея програмної реалізації
полягає у створенні зручного frontend-додатка, який об’єднує каталог манги,
сторінку деталей тайтлу, рекомендації, профіль користувача, авторизацію
через Google та інтеграцію із зовнішніми API.
Користувацький інтерфейс web-системи побудований за принципом
простої та зрозумілої навігації. У верхній частині сайту розміщено логотип
Арк.
ЧДТУ 262222.022 ПЗ
55
Змн. Арк. № Документа Підпис Дата
MangaWorld, посилання на розділи «Головна», «Каталог», «Улюблене»,
«Рекомендації» та «Моя бібліотека», а також сервісні іконки для пошуку,
сповіщень і виходу із системи. Така структура дозволяє швидко переходити
між основними сторінками сайту й не перевантажує інтерфейс зайвими
елементами.
Рисунок 3.2 – Основне навігаційне меню web-системи MangaWorld
Головна сторінка виконує презентаційну функцію. На ній розміщено
головний інформаційний блок із назвою MangaWorld, коротким описом
призначення ресурсу, кнопками швидкої дії, блоком переваг платформи,
популярною мангою, новими оновленнями, інформацією про інтеграцію з API
та футером. Завдяки такій структурі користувач одразу отримує загальне
уявлення про можливості ресурсу та може перейти до перегляду каталогу.
Рисунок 3.3 – Головна сторінка web-системи MangaWorld
Арк.
ЧДТУ 262222.022 ПЗ
56
Змн. Арк. № Документа Підпис Дата
Сторінка «Каталог» є одним із центральних функціональних модулів
web-системи. Вона містить каталог манги, поданий у вигляді карток. Кожна
картка тайтлу має обкладинку, назву, статус, жанри, рейтинг, кількість розділів
і кнопку переходу до детальної інформації. Такий формат подання інформації
є зручним, оскільки користувач може швидко переглянути декілька тайтлів і
обрати той, який відповідає його інтересам.
Для покращення роботи з каталогом реалізовано пошук, фільтрацію та
пагінацію. Пошук дозволяє знаходити мангу за назвою або ключовими
словами, а фільтри дають змогу відбирати тайтли за визначеними
параметрами. Пагінація потрібна для зручного перегляду великої кількості
результатів без перевантаження сторінки.
Рисунок 3.4 – Каталог манги web-системи MangaWorld
Сторінка окремої манги призначена для детального ознайомлення з
тайтлом. На ній відображається обкладинка, назва, жанри, рейтинг, кількість
розділів і томів, статус, опис, автор і тип твору. Також на сторінці передбачено
Арк.
ЧДТУ 262222.022 ПЗ
57
Змн. Арк. № Документа Підпис Дата
кнопки додавання тайтлу до улюбленого та особистої бібліотеки. Така
структура допомагає користувачеві оцінити зміст твору до початку читання.
Окремими блоками на сторінці деталей розміщено розділи манги, схожі
тайтли та коментарі. Блок розділів забезпечує перехід до читання, блок схожої
манги допомагає знайти інші тайтли, а коментарі створюють умови для
соціальної взаємодії користувачів у межах платформи.
Рисунок 3.5 – Сторінка детального перегляду манги у MangaWorld
Сторінка «Улюблене» створена для перегляду тайтлів, які користувач
позначив як улюблені. У цьому розділі відображається колекція збереженої
манги у вигляді карток. Наявність такої сторінки підвищує зручність
використання ресурсу, оскільки користувач може швидко повернутися до
творів, які його зацікавили.
Арк.
ЧДТУ 262222.022 ПЗ
58
Змн. Арк. № Документа Підпис Дата
Рисунок 3.6 – Сторінка улюблених тайтлів користувача
Сторінка «Рекомендації» призначена для відображення добірок манги,
які можуть бути цікавими користувачеві. На цій сторінці тайтли також
подаються у вигляді карток із короткою інформацією. Рекомендації спрощують
пошук нового контенту та розширюють користувацький сценарій взаємодії із
сайтом.
Арк.
ЧДТУ 262222.022 ПЗ
59
Змн. Арк. № Документа Підпис Дата
Рисунок 3.7 – Сторінка рекомендацій web-системи MangaWorld
Сторінка «Моя бібліотека» створена для персоналізованої взаємодії
користувача із сайтом. У цьому розділі відображається банер, аватар, ім’я
користувача, username, короткий опис, статистика та категорії бібліотеки. До
таких категорій належать «Читаю», «Заплановано», «Прочитано»,
«Улюблене», «Активність», «Підписки» і «Досягнення». Такий підхід дозволяє
користувачеві контролювати власну читацьку активність і впорядковувати
мангу за станом перегляду.
Арк.
ЧДТУ 262222.022 ПЗ
60
Змн. Арк. № Документа Підпис Дата
Рисунок 3.8 – Особиста бібліотека користувача MangaWorld
Сторінка налаштування профілю призначена для редагування
персональних даних користувача. На ній передбачено поля для зміни імені,
username та опису профілю. Також відображається електронна пошта,
пов’язана з Google-акаунтом користувача. Дані профілю зберігаються у
Firebase, що дозволяє відновлювати їх після повторного входу до системи.
Арк.
ЧДТУ 262222.022 ПЗ
61
Змн. Арк. № Документа Підпис Дата
Рисунок 3.9 – Сторінка налаштування профілю користувача
Сторінка читання розділу є однією з основних сторінок системи,
оскільки саме вона реалізує головне призначення MangaWorld — перегляд
сторінок манги. На цій сторінці відображається поточна сторінка розділу,
індикатор прогресу, кнопки переходу до попередньої та наступної сторінки, а
також список усіх сторінок. Така структура забезпечує зручне читання та
дозволяє користувачеві контролювати своє місце в розділі.
Арк.
ЧДТУ 262222.022 ПЗ
62
Змн. Арк. № Документа Підпис Дата
Рисунок 3.10 – Сторінка читання розділу манги
Футер сайту виконує допоміжну навігаційну функцію. Він містить назву
MangaWorld, короткий опис платформи, посилання на основні розділи,
профільні функції, підтримку та додаткову інформацію. Наявність футера
надає сайту завершеного вигляду й забезпечує доступ до допоміжних розділів.
Таким чином, розроблена web-система має кілька основних частин:
презентаційну, каталогову, персоналізовану та читацьку. Презентаційна
частина представлена головною сторінкою, каталогова — сторінкою каталогу
та деталями манги, персоналізована — улюбленим, рекомендаціями,
бібліотекою і профілем, а читацька — сторінкою перегляду розділу. Така
структура відповідає типовим сценаріям використання web-систем для
читання манги.
3.3 Організація даних і взаємодія з Firebase
У web-системі MangaWorld дані організовано з використанням зовнішніх
джерел інформації та хмарного збереження користувацьких даних. Такий
Арк.
ЧДТУ 262222.022 ПЗ
63
Змн. Арк. № Документа Підпис Дата
підхід відповідає характеру розробленої системи, оскільки сайт повинен
отримувати актуальну інформацію про мангу, забезпечувати авторизацію
користувача та зберігати персональні дані між сеансами роботи.
Інформація про мангу надходить із Jikan API та MangaDex API. Jikan API
використовується для отримання списків тайтлів, детальної інформації,
популярної манги, нових оновлень, рейтингів, жанрів, статусів, описів і даних
про авторів [21]. MangaDex API використовується для отримання розділів і
сторінок манги, що необхідно для реалізації режиму читання [22].
Користувацькі дані зберігаються у Firebase. До таких даних належать
інформація профілю, улюблені тайтли, особиста бібліотека, категорії читання,
налаштування профілю та інші персоналізовані відомості. Завдяки Firebase
дані не прив’язуються лише до одного сеансу роботи браузера, а можуть бути
доступними після повторної авторизації користувача [23].
Авторизація реалізована через Google-акаунт за допомогою Firebase
Authentication. Після входу користувач отримує доступ до персоналізованих
функцій: улюбленого, бібліотеки, профілю та налаштувань. Такий підхід є
зручним, оскільки користувачеві не потрібно створювати окремий обліковий
запис для MangaWorld [24].
У межах MangaWorld можна виділити такі основні інформаційні
сутності:
– користувач;
– профіль користувача;
– тайтл манги;
– жанр;
– рейтинг;
– розділ;
– сторінка манги;
– улюблений тайтл;
– запис у бібліотеці;
– категорія читання;
Арк.
ЧДТУ 262222.022 ПЗ
64
Змн. Арк. № Документа Підпис Дата
– коментар;
– рекомендація.
Сутність «Користувач» містить унікальний ідентифікатор, email, ім’я,
аватар і дані, отримані під час авторизації через Google-акаунт. Сутність
«Профіль користувача» може містити ім’я, username, опис, банер, аватар і
статистику активності. Сутність «Тайтл манги» містить назву, обкладинку,
жанри, рейтинг, статус, опис, автора, тип, кількість розділів і томів. Сутність
«Розділ» містить інформацію про номер або ідентифікатор розділу, а сутність
«Сторінка манги» відповідає за відображення графічних сторінок у режимі
читання.
Під час відкриття каталогу система виконує запит до Jikan API, отримує
список тайтлів і відображає їх у вигляді карток. Якщо користувач переходить
на сторінку конкретної манги, система отримує або використовує детальні дані
про тайтл і відображає їх у відповідному шаблоні. Якщо користувач відкриває
розділ для читання, система звертається до MangaDex API та отримує сторінки
поточного розділу.
Під час додавання манги до улюбленого або бібліотеки система записує
відповідні дані до Firebase. Після повторного входу користувача ці дані
зчитуються з Firebase і відображаються у розділах «Улюблене» та «Моя
бібліотека». Такий підхід забезпечує персоналізацію та збереження читацького
досвіду.
Арк.
ЧДТУ 262222.022 ПЗ
65
Змн. Арк. № Документа Підпис Дата
Рисунок 3.11 – Схема організації даних web-системи MangaWorld у Firebase
Отже, використання Firebase у MangaWorld є доцільним, оскільки
дозволяє реалізувати хмарне збереження користувацьких даних, роботу з
профілем, бібліотекою, улюбленим і авторизацією через Google. У поєднанні з
Jikan API та MangaDex API це забезпечує повноцінну взаємодію між
користувачем, каталогом манги, сторінкою читання та персональними
функціями системи.
3.4 Логіка маршрутів і обміну даними у web-системі MangaWorld
У web-системі MangaWorld взаємодія користувача із сайтом може бути
описана через логіку сторінкових маршрутів і обміну даними між інтерфейсом,
зовнішніми API та Firebase. Оскільки система має frontend-орієнтовану
структуру, основна взаємодія користувача відбувається через клієнтську
Арк.
ЧДТУ 262222.022 ПЗ
66
Змн. Арк. № Документа Підпис Дата
частину, яка відповідає за переходи між сторінками, завантаження даних,
відображення результатів і передавання персональних даних до Firebase.
У межах користувацької частини web-системи доцільно виділити такі
основні сторінкові маршрути:
– «/» — головна сторінка;
– «/catalog» — каталог манги;
– «/manga/» — сторінка детального перегляду конкретної манги;
– «/favorites» — сторінка улюблених тайтлів;
– «/recommendations» — сторінка рекомендацій;
– «/library» — особиста бібліотека користувача;
– «/profile/settings» — сторінка налаштування профілю;
– «/reader/» — сторінка читання розділу;
– «/login» — сторінка входу через Google-акаунт.
Головна сторінка є стартовою точкою взаємодії користувача із сайтом. З
неї користувач може перейти до каталогу, популярної манги, нових оновлень
або скористатися верхнім навігаційним меню для переходу до улюбленого,
рекомендацій чи особистої бібліотеки.
Маршрут «/catalog» відповідає за відображення каталогу манги. На цій
сторінці користувач може переглядати тайтли, використовувати пошук,
застосовувати фільтри та переходити до сторінки конкретної манги. Дані для
каталогу можуть отримуватися через Jikan API, який забезпечує доступ до
списків і характеристик тайтлів [21].
Маршрут «/manga/» використовується для сторінки детального
перегляду манги. Значення «id» дозволяє визначити, який саме тайтл потрібно
показати. На цій сторінці користувач може переглянути опис, жанри, рейтинг,
статус, автора, кількість розділів і томів, а також додати мангу до улюбленого
або бібліотеки.
Маршрут «/favorites» відповідає за сторінку улюблених тайтлів. Дані для
цієї сторінки зчитуються з Firebase відповідно до поточного авторизованого
Арк.
ЧДТУ 262222.022 ПЗ
67
Змн. Арк. № Документа Підпис Дата
користувача. Якщо користувач додає або видаляє тайтл з улюбленого, система
оновлює відповідний запис у Firebase.
Маршрут «/recommendations» використовується для відображення
рекомендованої манги. Рекомендації можуть формуватися на основі
популярності тайтлів, жанрів, рейтингу або користувацьких уподобань. Такий
розділ спрощує пошук нового контенту та покращує взаємодію користувача із
системою.
Маршрут «/library» відповідає за особисту бібліотеку користувача. У
цьому розділі відображаються категорії «Читаю», «Заплановано»,
«Прочитано», «Улюблене», «Активність», «Підписки» і «Досягнення». Дані
бібліотеки зберігаються у Firebase та пов’язуються з авторизованим
користувачем.
Маршрут «/profile/settings» використовується для налаштування
профілю. На цій сторінці користувач може редагувати ім’я, username та опис.
Після збереження зміни передаються до Firebase, що дозволяє відображати
оновлену інформацію під час наступного входу.
Маршрут «/reader/» відповідає за сторінку читання розділу. Значення
«chapterId» дозволяє отримати потрібний розділ через MangaDex API. Після
отримання даних система відображає сторінки манги, прогрес читання та
кнопки переходу між сторінками [22].
Узагальнено логіку обміну даними можна описати так: користувач
виконує дію в інтерфейсі, відповідний компонент обробляє цю дію, за потреби
надсилає запит до Jikan API, MangaDex API або Firebase, після чого отримані
дані відображаються на сторінці. Якщо дія стосується персональних даних
користувача, наприклад додавання манги до бібліотеки, зміна профілю або
збереження улюбленого, інформація записується до Firebase.
Арк.
ЧДТУ 262222.022 ПЗ
68
Змн. Арк. № Документа Підпис Дата
Рисунок 3.12 – Маршрути та джерела даних web-системи MangaWorld
Описана логіка маршрутів робить архітектуру web-системи зрозумілою
та підготовленою до подальшого масштабування. У майбутньому до системи
можна додати розширені рекомендації, push-сповіщення про нові розділи,
розширену статистику читання, синхронізацію прогресу між пристроями та
додаткові соціальні функції.
3.5 Тестування web-системи MangaWorld
Тестування web-системи є необхідним етапом розробки, оскільки воно
дозволяє перевірити відповідність реалізованої системи поставленим вимогам.
Для MangaWorld тестування було спрямоване на перевірку коректності роботи
сторінок, зручності навігації, відображення карток манги, роботи пошуку та
фільтрів, відкриття сторінки деталей, функціонування улюбленого, особистої
Арк.
ЧДТУ 262222.022 ПЗ
69
Змн. Арк. № Документа Підпис Дата
бібліотеки, налаштування профілю, Google Login, збереження даних у Firebase
та сторінки читання розділів.
Під час перевірки враховувалися такі напрями: тестування верстки,
функціональне тестування, UX-тестування, адаптивне тестування, перевірка
інтеграції з Jikan API і MangaDex API, перевірка Firebase, тестування
авторизації через Google, безпекова оцінка роботи з користувацькими даними
та тестування продуктивності. Такий підхід дозволяє оцінити не лише
технічну працездатність сайту, а й зручність його використання з погляду
звичайного користувача.
Тестування верстки передбачало перевірку правильності відображення
основних елементів інтерфейсу. Було перевірено наявність логотипу,
верхнього меню, кнопок, карток манги, фільтрів, блоків переваг, сторінки
деталей, особистої бібліотеки, сторінки налаштування профілю, сторінки
читання та футера. Також оцінювалося коректне розміщення блоків,
читабельність тексту, відповідність кольорів загальному стилю й відсутність
візуальних помилок.
Функціональне тестування було спрямоване на перевірку основних
можливостей сайту. Зокрема, перевірялася робота переходів між сторінками,
відкриття каталогу, пошук манги, застосування фільтрів, відкриття сторінки
деталей, додавання тайтлу до улюбленого, додавання до бібліотеки, відкриття
рекомендацій, редагування профілю, перехід до сторінки читання та робота
кнопок переходу між сторінками розділу.
UX-тестування дозволило оцінити зручність використання сайту. Було
перевірено зрозумілість назв пунктів меню, логічність структури сторінок,
помітність кнопок, зручність карток манги, простоту використання фільтрів,
зрозумілість профілю та комфортність сторінки читання. Для web-системи
читання манги це є важливим, оскільки користувач повинен швидко знайти
потрібний тайтл і не витрачати зайвий час на розуміння структури сайту.
Адаптивне тестування передбачало перевірку відображення сайту на
різних пристроях і розмірах екрана. Було оцінено роботу головної сторінки,
Арк.
ЧДТУ 262222.022 ПЗ
70
Змн. Арк. № Документа Підпис Дата
каталогу, сторінки деталей манги, улюбленого, рекомендацій, бібліотеки,
налаштування профілю та сторінки читання на екранах комп’ютера, планшета
та смартфона. Особлива увага приділялася коректному відображенню карток,
меню навігації, кнопок, форм і сторінок манги.
Окремо було виконано перевірку роботи API. Для Jikan API перевірялося
отримання списків, популярної манги, нових оновлень і детальної інформації
про тайтли. Для MangaDex API перевірялося отримання розділів і сторінок
манги. У разі відсутності відповіді або помилки запиту система повинна
коректно обробляти ситуацію та не порушувати роботу всього інтерфейсу.
Перевірка Firebase була спрямована на тестування збереження та
отримання користувацьких даних. Було перевірено збереження профілю,
улюблених тайтлів, бібліотеки та інших персональних даних. Після
повторного входу користувача перевірялося, чи відображаються раніше
збережені дані.
Тестування Google Login передбачало перевірку процесу входу через
Google-акаунт. Було оцінено, чи коректно система отримує дані користувача,
відображає email, відкриває доступ до персональних функцій і дозволяє
користувачеві працювати з бібліотекою та профілем.
Безпекова оцінка була спрямована на перевірку того, що персональні
функції доступні лише авторизованому користувачеві. Оскільки система
працює з профілем, улюбленими тайтлами та особистою бібліотекою, важливо
забезпечити коректне розмежування даних між користувачами. У межах
дипломного проєкту ця логіка реалізується засобами Firebase Authentication і
збереженням даних відповідно до облікового запису користувача.
Тестування продуктивності передбачало перевірку швидкості
завантаження основних сторінок, стабільності роботи фільтрів, реакції
інтерфейсу на дії користувача, швидкості завантаження обкладинок і сторінок
манги та відсутності критичних помилок у консолі браузера. Для цього можуть
використовуватися Chrome DevTools і Lighthouse [30; 38].
Арк.
ЧДТУ 262222.022 ПЗ
71
Змн. Арк. № Документа Підпис Дата
Рисунок 3.13 – Результати тестування web-системи MangaWorld
За результатами тестування встановлено, що web-система MangaWorld
відповідає основним вимогам до користувацького web-ресурсу для читання
манги. Основні сторінки відображаються коректно, навігація є зрозумілою,
каталог працює відповідно до призначення, пошук і фільтри спрощують вибір
тайтлів, сторінка деталей містить необхідну інформацію, а особиста бібліотека
забезпечує персоналізовану взаємодію користувача із сайтом.
3.6 Порівняння розробленої web-системи з аналогами
Порівняння розробленої web-системи з аналогічними рішеннями
дозволяє визначити її переваги та оцінити практичну значущість створеної
системи. У межах дипломної роботи доцільно порівняти MangaWorld з такими
Арк.
ЧДТУ 262222.022 ПЗ
72
Змн. Арк. № Документа Підпис Дата
web-сервісами, як MangaDex, MyAnimeList, AniList і Manga Plus. Ці ресурси
виконують подібні або частково подібні функції, оскільки надають доступ до
каталогів манги, інформації про тайтли, читацьких списків, рекомендацій або
режиму читання.
MangaDex має перевагу у вигляді великого каталогу, підтримки розділів
і можливості читання манги. Цей сервіс є важливим прикладом організації
розділів і сторінок манги. Водночас його інтерфейс може бути складнішим для
нових користувачів, а окремі функції залежать від структури контенту та
мовних варіантів. MangaWorld використовує ідею зручного доступу до
розділів, але подає її в межах більш компактного й візуально цілісного
інтерфейсу.
MyAnimeList має перевагу у вигляді великої бази даних, рейтингів,
описів, жанрів, списків користувачів і відгуків. Цей ресурс є цінним джерелом
інформації про тайтли. Водночас MyAnimeList більше орієнтований на
каталогізацію й оцінювання, ніж на зручне читання манги. MangaWorld
використовує дані, отримані через Jikan API, і поєднує інформаційну частину
з функціями читання та особистої бібліотеки.
AniList має сучасний інтерфейс, персональні списки, профіль
користувача та соціальні функції. Його перевагою є зручне ведення списків
аніме й манги. Водночас сервіс охоплює не лише мангу, а й аніме, тому не є
вузькоспеціалізованою системою саме для читання манги. MangaWorld
зосереджується на манзі та поєднує профіль, бібліотеку, рекомендації й
сторінку читання в одному ресурсі.
Manga Plus є офіційним сервісом для читання манги, який надає доступ
до окремих тайтлів у цифровому форматі. Його перевагою є легальний
характер контенту та простий режим читання. Водночас каталог і персональні
функції такого сервісу можуть бути обмеженими. MangaWorld, на відміну від
нього, робить акцент не лише на читанні, а й на персоналізації, улюбленому,
бібліотеці та рекомендаціях.
Арк.
ЧДТУ 262222.022 ПЗ
73
Змн. Арк. № Документа Підпис Дата
Перевагою web-системи MangaWorld є поєднання кількох
функціональних напрямів у межах одного компактного сайту. Користувач
може перейти з головної сторінки до каталогу, виконати пошук, застосувати
фільтри, переглянути детальну сторінку тайтлу, додати мангу до улюбленого,
зберегти її в бібліотеці, налаштувати профіль і перейти до читання розділу.
Темний мінімалістичний дизайн із фіолетово-рожевими акцентами робить
інтерфейс сучасним і візуально цілісним.
Водночас необхідно враховувати, що MangaWorld є дипломним web-
проєктом. На відміну від великих комерційних і офіційних сервісів, він не має
адміністративної панелі, власної редакційної системи контенту або платіжних
модулів. Основна увага в системі приділена користувацькому функціоналу:
каталогу, пошуку, деталям манги, рекомендаціям, улюбленому, бібліотеці,
профілю, Google Login, Firebase-збереженню даних і читанню розділів.
Отже, розроблена web-система не дублює повністю функціональність
великих сервісів, а створює компактне, зрозуміле й тематично спрямоване
середовище для читання манги. Основними перевагами MangaWorld є проста
структура, адаптивний інтерфейс, інтеграція з API, хмарне збереження
користувацьких даних, авторизація через Google, особиста бібліотека та
зручна сторінка читання.
Висновки до розділу 3
У третьому розділі було розглянуто програмну реалізацію web-системи
MangaWorld. Було обґрунтовано вибір інструментальних засобів розробки,
зокрема Visual Studio Code, React, Vite, Tailwind CSS, JavaScript, TypeScript,
React Router, Jikan API, MangaDex API, Firebase, Firebase Authentication,
Chrome DevTools, Lighthouse і Vercel. Обрані технології дозволили реалізувати
адаптивний інтерфейс, організувати компонентну структуру проєкту,
Арк.
ЧДТУ 262222.022 ПЗ
74
Змн. Арк. № Документа Підпис Дата
забезпечити інтеграцію з API, реалізувати Google Login, зберігати дані
користувача у Firebase та розгорнути сайт у мережі Інтернет.
Було описано реалізацію основних сторінок web-системи: головної
сторінки, каталогу манги, сторінки деталей тайтлу, улюбленого, рекомендацій,
особистої бібліотеки, налаштування профілю та сторінки читання розділу.
Кожен розділ виконує окрему функцію та забезпечує логічну взаємодію
користувача із сайтом. Особливу увагу приділено каталогу манги, пошуку,
фільтрації, карткам тайтлів, збереженню улюбленого, роботі з бібліотекою та
перегляду сторінок манги.
Окремо розглянуто організацію даних у Firebase. Було визначено основні
інформаційні сутності, необхідні для роботи системи: користувач, профіль
користувача, тайтл манги, розділ, сторінка манги, улюблений тайтл, запис у
бібліотеці, категорія читання, коментар і рекомендація. Така структура
дозволяє реалізувати персоналізовані сценарії роботи користувача та зберігати
дані між сеансами роботи.
Також було описано логіку сторінкових маршрутів і обміну даними. Було
показано, як користувацькі дії пов’язані з переходами між сторінками, API-
запитами до Jikan API та MangaDex API, а також записом і зчитуванням
персональних даних із Firebase. Це дає змогу краще зрозуміти архітектуру
системи та визначити напрями її подальшого масштабування.
У межах розділу було розглянуто тестування web-системи за кількома
напрямами: перевірка верстки, функціональне тестування, UX-тестування,
адаптивність, перевірка API, тестування Firebase, перевірка Google Login,
безпекова оцінка роботи з користувацькими даними та тестування
продуктивності. За результатами тестування встановлено, що сайт має логічну
структуру, коректно відображає основні сторінки, забезпечує роботу каталогу,
пошуку, фільтрів, профілю, бібліотеки, авторизації та сторінки читання.
Порівняння з аналогами показало, що web-система MangaWorld має
практичну цінність завдяки тематичній орієнтації на читання манги, простому
інтерфейсу, каталогу тайтлів, сторінці деталей, особистій бібліотеці,
Арк.
ЧДТУ 262222.022 ПЗ
75
Змн. Арк. № Документа Підпис Дата
рекомендаціям, Google Login, Firebase-збереженню даних і сучасному темному
дизайну. Таким чином, розроблений сайт можна вважати функціонально
завершеним користувацьким web-ресурсом, який відповідає поставленій меті
кваліфікаційної роботи та може бути основою для подальшого розвитку
читацької платформи.
Арк.
ЧДТУ 262222.022 ПЗ
76
Змн. Арк. № Документа Підпис Дата
ВИСНОВКИ
У кваліфікаційній роботі було розроблено web-систему MangaWorld,
призначену для читання манги, перегляду каталогу тайтлів, пошуку та
фільтрації контенту, ознайомлення з детальною інформацією про мангу,
формування списку улюбленого, ведення особистої бібліотеки користувача,
налаштування профілю та перегляду сторінок розділів у режимі читання.
Розроблений ресурс орієнтований на створення зручного цифрового
середовища для користувачів, які цікавляться мангою та потребують простого
інструменту для керування власною читацькою активністю.
У процесі виконання роботи було проаналізовано предметну область
web-систем для читання манги та керування цифровими колекціями. Було
встановлено, що такі ресурси мають поєднувати функції каталогу, пошуку,
персоналізації, особистого профілю та зручного перегляду графічного
контенту. Окрему увагу було приділено аналізу існуючих аналогів, зокрема
MangaDex, MyAnimeList, AniList і Manga Plus. На основі порівняння було
визначено їхні переваги та недоліки, а також обґрунтовано доцільність
створення власної web-системи MangaWorld, яка поєднує каталог манги,
рекомендації, улюблене, особисту бібліотеку та сторінку читання в межах
одного інтерфейсу.
Було сформовано вимоги до майбутньої системи, визначено її
призначення, структуру сторінок, логіку навігації, вимоги до дизайну,
наповнення, прототипу та функціональних можливостей. У роботі враховано
фактичну структуру сайту, яка містить головну сторінку, каталог, сторінку
деталей манги, розділ «Улюблене», сторінку рекомендацій, особисту
бібліотеку, налаштування профілю та сторінку читання розділу. Така
структура забезпечує послідовний користувацький сценарій: від пошуку
тайтлу та перегляду інформації про нього до додавання в бібліотеку й
подальшого читання.
Арк.
ЧДТУ 262222.022 ПЗ
77
Змн. Арк. № Документа Підпис Дата
Для реалізації web-системи було використано сучасні інструментальні
засоби frontend-розробки: Visual Studio Code, React, Vite, Tailwind CSS,
JavaScript, TypeScript і React Router. Обрані технології дозволили створити
компонентну структуру інтерфейсу, забезпечити адаптивність сторінок,
реалізувати маршрутизацію між основними розділами та підтримати єдиний
візуальний стиль сайту. Дизайн MangaWorld виконано в темній
мінімалістичній стилістиці з фіолетово-рожевими акцентами, що відповідає
тематиці цифрового розважального ресурсу та забезпечує комфортне
сприйняття візуального контенту.
Окрему увагу в роботі приділено організації даних та інтеграції із
зовнішніми сервісами. Для отримання списків манги, детальної інформації,
популярного та нового контенту використовується Jikan API. Для отримання
розділів і сторінок манги застосовується MangaDex API. Користувацькі дані,
зокрема профіль, улюблені тайтли, особиста бібліотека та пов’язані з ними
записи, зберігаються через Firebase. Також реалізовано авторизацію
користувача через Google-акаунт, що спрощує процес входу та забезпечує
доступ до персоналізованих можливостей системи.
У межах програмної реалізації було створено основні сторінки web-
системи MangaWorld. Головна сторінка знайомить користувача з
призначенням ресурсу, перевагами платформи, популярною мангою та
новими оновленнями. Каталог забезпечує перегляд тайтлів у вигляді карток,
пошук, фільтрацію та пагінацію. Сторінка деталей манги містить розширену
інформацію про обраний тайтл, а також елементи для додавання до
улюбленого та бібліотеки. Особиста бібліотека дозволяє користувачеві
впорядковувати мангу за категоріями, переглядати статистику й працювати з
профілем. Сторінка читання забезпечує перегляд сторінок розділу, навігацію
між ними та відображення прогресу читання.
Проведене тестування підтвердило працездатність основних функцій
web-системи. Було перевірено коректність відображення сторінок, роботу
навігації, пошуку, фільтрації, каталогу, сторінки деталей, улюбленого,
Арк.
ЧДТУ 262222.022 ПЗ
78
Змн. Арк. № Документа Підпис Дата
рекомендацій, особистої бібліотеки, налаштування профілю, авторизації через
Google, збереження даних у Firebase, взаємодії з Jikan API та MangaDex API, а
також сторінки читання. Результати тестування показали, що система працює
відповідно до поставленої мети, має зрозумілу структуру, адаптивний
інтерфейс і забезпечує основні сценарії взаємодії користувача з контентом.
Розроблена web-система MangaWorld має практичну цінність як приклад
сучасного користувацького web-ресурсу для читання манги та керування
персональними колекціями. Вона демонструє використання зовнішніх API для
отримання контенту, застосування Firebase для збереження персональних
даних, реалізацію Google Login, побудову адаптивного інтерфейсу та
організацію сторінки читання. Система не містить адміністративної панелі,
оскільки основний акцент у межах роботи зроблено саме на користувацькому
функціоналі.
У перспективі MangaWorld може бути доповнено розширеною системою
рекомендацій, push-сповіщеннями про нові розділи, детальнішою
статистикою читання, синхронізацією прогресу між пристроями,
розширеними налаштуваннями профілю, покращеною системою коментарів і
соціальною взаємодією між користувачами. Також можливим є вдосконалення
алгоритмів фільтрації та пошуку, оптимізація завантаження зображень і
розширення можливостей персональної бібліотеки.
Отже, поставлену мету кваліфікаційної роботи досягнуто. У результаті
було створено функціонально завершену web-систему MangaWorld, яка
забезпечує перегляд каталогу манги, роботу з тайтлами, персоналізовану
бібліотеку, авторизацію через Google, збереження даних у Firebase та читання
розділів із використанням MangaDex API. Розроблений ресурс відповідає
визначеним вимогам і може бути використаний як основа для подальшого
розвитку повноцінної web-платформи для читання манги.
Арк.
ЧДТУ 262222.022 ПЗ
79
Змн. Арк. № Документа Підпис Дата
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. UNESCO. Global Education Monitoring Report 2023: Technology in
education. URL: https://www.unesco.org/gem-report/en/technology (дата
звернення: 26.05.2026).
2. European Commission. Digital Education Action Plan 2021–2027. URL:
https://education.ec.europa.eu/focus-topics/digital-education/action-plan
(дата звернення: 26.05.2026).
3. MangaDex. Офіційний web-сервіс для читання манги. URL:
https://mangadex.org/ (дата звернення: 26.05.2026).
4. MyAnimeList. Manga Database. URL: https://myanimelist.net/manga.php
(дата звернення: 26.05.2026).
5. AniList. Anime and Manga Tracking Platform. URL: https://anilist.co/ (дата
звернення: 26.05.2026).
6. Manga Plus by SHUEISHA. Офіційний сервіс для читання манги. URL:
https://mangaplus.shueisha.co.jp/ (дата звернення: 26.05.2026).
7. Jikan API. Unofficial MyAnimeList API. URL: https://jikan.moe/ (дата
звернення: 26.05.2026).
8. Jikan API Documentation. Документація програмного інтерфейсу Jikan
API. URL: https://docs.api.jikan.moe/ (дата звернення: 26.05.2026).
9. MangaDex API Documentation. Документація програмного інтерфейсу
MangaDex API. URL: https://api.mangadex.org/docs/ (дата звернення:
26.05.2026).
10. Firebase. Платформа для розробки web- і мобільних застосунків. URL:
https://firebase.google.com/ (дата звернення: 26.05.2026).
11. Firebase Documentation. Офіційна документація Firebase. URL:
https://firebase.google.com/docs (дата звернення: 26.05.2026).
12. Firebase Authentication. Документація сервісу автентифікації Firebase.
URL: https://firebase.google.com/docs/auth (дата звернення: 26.05.2026).
13. Firebase Authentication. Authenticate Using Google with JavaScript. URL:
https://firebase.google.com/docs/auth/web/google-signin (дата звернення:
26.05.2026).
14. Cloud Firestore. Офіційна документація бази даних Firebase. URL:
https://firebase.google.com/docs/firestore (дата звернення: 26.05.2026).
15. Firebase Storage. Офіційна документація сервісу зберігання файлів
Firebase. URL: https://firebase.google.com/docs/storage (дата звернення:
26.05.2026).
Арк.
ЧДТУ 262222.022 ПЗ
80
Змн. Арк. № Документа Підпис Дата
16. React. Офіційна документація бібліотеки React. URL: https://react.dev/
(дата звернення: 26.05.2026).
17. React. Describing the UI. URL: https://react.dev/learn/describing-the-ui (дата
звернення: 26.05.2026).
18. React Router. Офіційна документація маршрутизації React Router. URL:
https://reactrouter.com/ (дата звернення: 26.05.2026).
19. Vite. Офіційна документація інструмента збирання frontend-додатків.
URL: https://vite.dev/ (дата звернення: 26.05.2026).
20. Tailwind CSS. Офіційна документація CSS-фреймворку. URL:
https://tailwindcss.com/docs (дата звернення: 26.05.2026).
21. Tailwind CSS. Responsive Design. URL:
https://tailwindcss.com/docs/responsive-design (дата звернення:
26.05.2026).
22. JavaScript Guide. MDN Web Docs. URL: https://developer.mozilla.org/en-
US/docs/Web/JavaScript/Guide (дата звернення: 26.05.2026).
23. TypeScript. Офіційна документація мови TypeScript. URL:
https://www.typescriptlang.org/docs/ (дата звернення: 26.05.2026).
24. Visual Studio Code Documentation. Офіційна документація середовища
розробки Visual Studio Code. URL: https://code.visualstudio.com/docs
(дата звернення: 26.05.2026).
25. Visual Studio Code. TypeScript in Visual Studio Code. URL:
https://code.visualstudio.com/docs/languages/typescript (дата звернення:
26.05.2026).
26. Chrome DevTools. Офіційна документація інструментів розробника
Chrome. URL: https://developer.chrome.com/docs/devtools (дата
звернення: 26.05.2026).
27. Lighthouse. Chrome for Developers. URL:
https://developer.chrome.com/docs/lighthouse/overview (дата звернення:
26.05.2026).
28. Web Content Accessibility Guidelines (WCAG) 2.2. W3C Recommendation.
URL: https://www.w3.org/TR/WCAG22/ (дата звернення: 26.05.2026).
29. Vercel Documentation. Офіційна документація платформи Vercel. URL:
https://vercel.com/docs (дата звернення: 26.05.2026).
30. Vercel. Frontend Cloud Platform. URL: https://vercel.com/ (дата звернення:
26.05.2026).
31. Google Developers. Sign in with Google. URL:
https://developers.google.com/identity (дата звернення: 26.05.2026).
Арк.
ЧДТУ 262222.022 ПЗ
81
Змн. Арк. № Документа Підпис Дата
32. Google Cloud. Firebase Authentication. URL:
https://cloud.google.com/identity-platform/docs (дата звернення:
26.05.2026).
33. MDN Web Docs. Web APIs. URL: https://developer.mozilla.org/en-
US/docs/Web/API (дата звернення: 26.05.2026).
34. MDN Web Docs. Fetch API. URL: https://developer.mozilla.org/en-
US/docs/Web/API/Fetch_API (дата звернення: 26.05.2026).
35. MDN Web Docs. Using Fetch. URL: https://developer.mozilla.org/en-
US/docs/Web/API/Fetch_API/Using_Fetch (дата звернення: 26.05.2026).
36. HTML Living Standard. Web Hypertext Application Technology Working
Group. URL: https://html.spec.whatwg.org/ (дата звернення: 26.05.2026).
37. CSS: Cascading Style Sheets. MDN Web Docs. URL:
https://developer.mozilla.org/en-US/docs/Web/CSS (дата звернення:
26.05.2026).
38. Web.dev. Learn Performance. URL: https://web.dev/learn/performance (дата
звернення: 26.05.2026).
39. Web.dev. Learn Accessibility. URL: https://web.dev/learn/accessibility (дата
звернення: 26.05.2026).
40. Google Fonts. Офіційний сервіс web-шрифтів. URL:
https://fonts.google.com/ (дата звернення: 26.05.2026).
Арк.
ЧДТУ 262222.022 ПЗ
82
Змн. Арк. № Документа Підпис Дата
ДОДАТОК А
ЗАТВЕРДЖУЮ
Зав. кафедри ІТП
_________________ Прокопенко Т.О.
«____» ________________ 2026 р.
«Розробка інформаційної вебсистеми для читання та керування
колекціями манги»
Специфікація
482 ЧДТУ 262222 – 01
Аркушів 2
Розробник ________________ Віктор ТОМІЛЕНКО
Керівник ________________ Ольга ЛАВДАНСЬКА
Н. контроль ________________ Ольга ЛАВДАНСЬКА
2026
Позначення Найменування Примітка
Документація
482 ЧДТУ 262222-01 12 01 Лістинг коду
ДОДАТОК Б
ПРОГРАМНЕ ЗАБЕЗПЕЧЕННЯ
«Розробка інформаційної вебсистеми для читання та керування
колекціями манги»
ТЕКСТ ПРОГРАМИ
482 ЧДТУ 262222 – 01 12 01
Аркушів 7
Розробник ________________ Віктор ТОМІЛЕНКО
Черкаси, 2026
2
482 ЧДТУ 262222 – 01 12 01
Home.tsx
import { useState, useEffect } from "react";
import { Link } from "react-router";
import { ArrowRight, BookOpen, Bell, Users, Star, TrendingUp, Clock } from "lucide-react";
import MangaCard from "../components/MangaCard";
import { mangaApi, MangaListItem } from "../services/mangaApi";
export default function Home() {
const [popularManga, setPopularManga] = useState<MangaListItem[]>([]);
const [newManga, setNewManga] = useState<MangaListItem[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchManga() {
try {
// Fetch popular manga (top rated by popularity)
const popularResponse = await mangaApi.getPopularManga(1, 6);
setPopularManga((popularResponse.data || []).slice(0, 6));
// Fetch new manga (latest releases by start date)
const newResponse = await mangaApi.getNewManga(1, 6);
setNewManga((newResponse.data || []).slice(0, 6));
} catch (error) {
console.error('Failed to fetch manga:', error);
setPopularManga([]);
setNewManga([]);
} finally {
setLoading(false);
}
}
fetchManga();
}, []);
return (
<div className="min-h-screen">
{/* Hero Section */}
<section className="relative py-20 lg:py-32 overflow-hidden">
{/* Background Gradient */}
<div className="absolute inset-0 bg-gradient-to-br from-primary/20 via-accent/10 to-
secondary/20 blur-3xl"></div>
<div className="container mx-auto px-4 relative z-10">
<div className="max-w-4xl mx-auto text-center">
<h1 className="text-4xl md:text-6xl lg:text-7xl font-bold mb-6 bg-gradient-to-r from-
primary via-accent to-secondary bg-clip-text text-transparent">
MangaWorld
</h1>
<p className="text-xl md:text-2xl text-muted-foreground mb-8">
3
482 ЧДТУ 262222 – 01 12 01
Твій простір для читання та керування колекціями манги
</p>
<p className="text-lg text-foreground/80 mb-10 max-w-2xl mx-auto">
Знаходь нові тайтли, читай у зручному форматі, створюй власну бібліотеку,
відстежуй прогрес і отримуй сповіщення про нові розділи.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link
to="/catalog"
className="px-8 py-4 rounded-xl bg-gradient-to-r from-primary to-secondary text-
white font-semibold hover:opacity-90 transition-opacity flex items-center justify-center gap-2
group"
>
Почати читати
<ArrowRight className="w-5 h-5 group-hover:translate-x-1 transition-transform" />
</Link>
<Link
to="/catalog"
className="px-8 py-4 rounded-xl bg-card border border-border hover:border-primary
transition-colors font-semibold flex items-center justify-center gap-2"
>
Перейти до каталогу
</Link>
</div>
</div>
</div>
</section>
{/* Features Section */}
<section className="py-16 bg-card/50">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12">Переваги платформи</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-
secondary/50 flex items-center justify-center mb-4">
<BookOpen className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Зручне читання</h3>
<p className="text-muted-foreground">
Читай мангу онлайн у зручному форматі з адаптивним інтерфейсом для будь-
якого пристрою.
</p>
</div>
4
482 ЧДТУ 262222 – 01 12 01
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-accent to-primary/50
flex items-center justify-center mb-4">
<Star className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Особиста бібліотека</h3>
<p className="text-muted-foreground">
Керуй власною колекцією манги, сортуй тайтли за категоріями «Читаю»,
«Заплановано», «Прочитано».
</p>
</div>
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-secondary to-accent/50
flex items-center justify-center mb-4">
<Bell className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Сповіщення</h3>
<p className="text-muted-foreground">
Не пропускай нові розділи улюбленої манги завдяки своєчасним сповіщенням
про оновлення.
</p>
</div>
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-primary to-accent/50
flex items-center justify-center mb-4">
<Users className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Соціальна взаємодія</h3>
<p className="text-muted-foreground">
Ділися враженнями, залишай коментарі та переглядай оцінки інших читачів.
</p>
</div>
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-2xl p-6 text-
white">
<div className="w-12 h-12 bg-white/20 rounded-lg flex items-center justify-center
mb-4">
<TrendingUp className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Рекомендації</h3>
<p className="text-white/90 mb-4">
5
482 ЧДТУ 262222 – 01 12 01
Отримуй персоналізовані рекомендації на основі твоїх уподобань і історії
читання.
</p>
<Link
to="/recommendations"
className="inline-flex items-center gap-2 text-white font-semibold hover:text-
white/90 transition-colors"
>
Переглянути
<ArrowRight className="w-4 h-4" />
</Link>
</div>
</div>
<div className="p-6 rounded-xl bg-card border border-border hover:border-primary/50
transition-colors">
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-secondary to-
primary/50 flex items-center justify-center mb-4">
<Clock className="w-6 h-6 text-white" />
</div>
<h3 className="text-xl font-semibold mb-2">Відстеження прогресу</h3>
<p className="text-muted-foreground">
Автоматичне збереження прогресу читання та можливість продовжити з
останнього розділу.
</p>
</div>
</div>
</div>
</section>
{/* Popular Manga */}
<section className="py-16">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between mb-8">
<div>
<h2 className="text-3xl font-bold mb-2">Популярна манга</h2>
<p className="text-muted-foreground">Обирай найрейтинговіші тайтли серед
користувачів MangaWorld</p>
</div>
<Link
to="/catalog"
className="text-primary hover:text-primary/80 transition-colors flex items-center gap-
2"
>
Дивитись все
<ArrowRight className="w-4 h-4" />
</Link>
</div>
6
482 ЧДТУ 262222 – 01 12 01
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
{loading ? (
<div className="col-span-full text-center py-12 text-muted-
foreground">Завантаження...</div>
) : (
popularManga.map((manga) => (
<MangaCard key={manga.mal_id} manga={manga} />
))
)}
</div>
</div>
</section>
{/* New Updates */}
<section className="py-16 bg-card/50">
<div className="container mx-auto px-4">
<div className="flex items-center justify-between mb-8">
<div>
<h2 className="text-3xl font-bold mb-2">Нові оновлення</h2>
<p className="text-muted-foreground">Свіжі розділи щойно доданої манги</p>
</div>
<Link
to="/catalog"
className="text-primary hover:text-primary/80 transition-colors flex items-center gap-
2"
>
Дивитись все
<ArrowRight className="w-4 h-4" />
</Link>
</div>
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
{loading ? (
<div className="col-span-full text-center py-12 text-muted-
foreground">Завантаження...</div>
) : (
newManga.map((manga) => (
<MangaCard key={manga.mal_id} manga={manga} />
))
)}
</div>
</div>
</section>
{/* API Integration Info */}
<section className="py-16">
<div className="container mx-auto px-4">
<div className="max-w-4xl mx-auto p-8 rounded-2xl bg-gradient-to-br from-primary/10
via-accent/5 to-secondary/10 border border-primary/20">
7
482 ЧДТУ 262222 – 01 12 01
<h2 className="text-2xl font-bold mb-4 text-center">Інтеграція з API</h2>
<p className="text-center text-muted-foreground mb-6">
Інтеграція з API дозволяє автоматично отримувати актуальні дані про мангу,
розділи, обкладинки, жанри та оновлення контенту.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mt-6">
<div className="text-center p-4 rounded-lg bg-card/50">
<div className="text-3xl font-bold text-primary mb-1">10,000+</div>
<div className="text-sm text-muted-foreground">Тайтлів манги</div>
</div>
<div className="text-center p-4 rounded-lg bg-card/50">
<div className="text-3xl font-bold text-secondary mb-1">50,000+</div>
<div className="text-sm text-muted-foreground">Розділів</div>
</div>
<div className="text-center p-4 rounded-lg bg-card/50">
<div className="text-3xl font-bold text-accent mb-1">24/7</div>
<div className="text-sm text-muted-foreground">Оновлення</div>
</div>
</div>
</div>
</div>
</section>
</div>
);
}