СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ  БЮДЖЕТОМ СІМ’Ї

Шевченко, Тарас Сергійович

Будь ласка, використовуйте цей ідентифікатор, щоб цитувати або посилатися на цей матеріал: https://er.chdtu.edu.ua/handle/ChSTU/9886

Назва:	СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ БЮДЖЕТОМ СІМ’Ї
Автори:	Тесля, Юрій Миколайович Шевченко, Тарас Сергійович
Ключові слова:	web-додаток;інформаційна система;сімейний бюджет;аналітика;фінанси;React;Node.js;express;mongodb;rest api;jwt
Дата публікації:	10-чер-2026
Короткий огляд (реферат):	У сучасних умовах цифровізації суспільства та зростання ролі інформаційних технологій у повсякденному житті особливого значення набувають системи автоматизації фінансового обліку та аналізу. Значна частина домогосподарств стикається з проблемою неефективного управління фінансовими ресурсами, що зумовлено відсутністю зручних та доступних інструментів для обліку доходів і витрат. Розвиток web-технологій створює передумови для розробки інтерактивних аналітичних систем, які дозволяють не лише зберігати фінансову інформацію, але й виконувати її обробку, візуалізацію та аналіз у режимі реального часу. Такі системи сприяють підвищенню фінансової грамотності населення та забезпечують ефективне планування бюджету. Створення аналітичного web-додатку управління сімейним бюджетом має важливе практичне значення, оскільки дозволяє користувачам:  контролювати доходи та витрати;  аналізувати фінансову активність;  приймати обґрунтовані фінансові рішення. Отже, розробка сучасного web-додатку для управління бюджетом сім’ї є актуальним завданням, що поєднує технологічну доцільність, практичну цінність та соціальну значущість. Мета роботи та завдання дослідження Метою кваліфікаційної роботи є створення аналітичного web-додатку для управління сімейним бюджетом, який забезпечує облік, аналіз та візуалізацію фінансових даних користувача. Для досягнення поставленої мети необхідно вирішити такі завдання:  провести аналіз предметної області управління фінансовими ресурсами домогосподарства; дослідити існуючі програмні рішення для обліку бюджету та визначити їх переваги і недоліки;  визначити функціональні вимоги до web-додатку;  спроєктувати архітектуру інформаційної системи;  розробити клієнтську та серверну частини додатку;  реалізувати аналітичний модуль для обробки фінансових даних;  забезпечити безпеку та захист даних користувачів;  провести тестування розробленої системи. Об’єкт дослідження Об’єктом дослідження є процес управління фінансовими ресурсами домогосподарства. Предмет дослідження Предметом дослідження є методи та засоби розробки аналітичних webдодатків для обліку та аналізу сімейного бюджету.
URI (Уніфікований ідентифікатор ресурсу):	https://er.chdtu.edu.ua/handle/ChSTU/9886
Розташовується у зібраннях:	126 Інформаційні системи та технології (Web-технології, web-дизайн)

Файли цього матеріалу:

Файл	Опис	Розмір	Формат
РЕП_БАК_Шевченко _WEB-2211.pdf Restricted Access		3.69 MB	Adobe PDF	Переглянути/Відкрити Запит копії

Показати повний опис матеріалу Перегляд статистики

Усі матеріали в архіві електронних ресурсів захищено авторським правом, усі права збережено.

Extracted text

МІНІСТЕРСТВО ОСВІТИ І НАУКИ УКРАЇНИ
ЧЕРКАСЬКИЙ ДЕРЖАВНИЙ ТЕХНОЛОГІЧНИЙ УНІВЕРСИТЕТ
Факультет інформаційних технологій і систем
Кафедра інформаційних технологій проектування

Пояснювальна записка
до кваліфікаційної роботи
бакалавра
(освітньо-кваліфікаційний рівень)
на тему: «СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ
БЮДЖЕТОМ СІМ’Ї»

Виконав: студент 4 курсу, групи WEB-2211
спеціальності 126 (F) «Інформаційні системи та
технології»
(шифр і назва спеціальності)
освітня програма «Web-технології, Web-дизайн»

Шевченко Т.
Керівник___________ Тесля Ю.М.
(прізвище та ініціали)
Рецензент___________ Алесін О.В.
(прізвище та ініціали)

Черкаси 2026 року

Бланк завдання на кваліфікаційну роботу бакалавра студенту

Черкаський державний технологічний університет
Факультет Інформаційних технологій і систем
Кафедра Інформаційних технологій проектування
Освітньо-кваліфікаційний
рівень Бакалавр
Спеціальність 126 (F) «Інформаційні системи та технології»
Освітня програма Web-технології, Web-дизайн

ЗАТВЕРДЖУЮ
Завідувач кафедри ІТП
_______________ Тетяна ПРОКОПЕНКО
«____» _____________ 2026 р.

ЗАВДАННЯ
на кваліфікаційну роботу бакалавра студенту
Шевченку Т
(прізвище, ім’я, по батькові)
1. Тема роботи СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ
БЮДЖЕТОМ СІМ’Ї
Керівник роботи Тесля Ю.М., д.т.н., професор
(прізвище, ім’я, по батькові, науковий ступінь, вчене звання)
затверджені наказом університету від « 12 » березня 2026 р. № 56/03-03.
2. Строк подання студентом роботи «__» червня 2026 року
3. Вихідні дані до роботи:
Практичні навики роботи з інформаційними ресурсами. Робота з базами даних.
Звіт з виробничої практики. Звіт з переддипломної практики.
4. Зміст пояснювальної записки (перелік питань, що їх належить розробити):
Вступ
4.1. Розділ 1 Аналіз предметної області та існуючих рішень
4.2. Розділ 2 Проєктування інформаційної системи
4.3. Розділ 3 Розробка аналітичного web-додатку
4.4. Розділ 4 Тестування та оцінка ефективності системи
Висновки.
5. Перелік додатків (з точним зазначенням назв додатків):

5.1. Додаток А. Специфікація 482.ЧДТУ. 62224-01.

5.2. Додаток Б. Текст програми.

51..3 І.н Дстордуактцоікя Вк.о Ірниссттруувкацчіая користувача.
5.4. Презентація у вигляді 22 слайдів.

6. Консультанти розділів роботи
Прізвище, ініціали та Підпис, дата
Розділ посада
консультанта завдання видав завдання прийняв

7. Дата видачі завдання 15.01.2026 р.

КАЛЕНДАРНИЙ ПЛАН
Строк виконання
№ з/п Назва етапів кваліфікаційної роботи бакалавра Примітка
етапів роботи
1 Видача завдання на кваліфікаційну роботу до 15.01.2026 Виконано
бакалавра.
2 Аналіз літературних джерел, об’єкту та предмету до 12.02.2026 Виконано
дослідження.
3 Написання теоретичного розділу кваліфікаційної до 18.03.2026 Виконано
роботи бакалавра.
4 Написання аналітичного розділу (аналіз об’єкту до 01.04.2026 Виконано
й предмету дослідження).
5 Написання практичних розділів й висновків по до 01.05.2026 Виконано
роботі.
6 Передзахист кваліфікаційної роботи бакалавра до 03.06.2026 Виконано
на засіданні кафедри ІТП.
7 Подання роботи завідувачу кафедри ІТП. до 10.06. 2026 Виконано
8 Захист кваліфікаційної роботи бакалавра. 12.06.2026 Виконано

Студент _____________________________ Т ШЕВЧЕНКО
(підпис)

Керівник роботи _____________________________ Юрій ТЕСЛЯ
(підпис)

РЕФЕРАТ
Кваліфікаційна робота бакалавра містить: 85 с., 21 рис., 22 використаних
джерел, 3 додатки.
Актуальність теми
У сучасних умовах цифровізації суспільства та зростання ролі
інформаційних технологій у повсякденному житті особливого значення
набувають системи автоматизації фінансового обліку та аналізу. Значна частина
домогосподарств стикається з проблемою неефективного управління
фінансовими ресурсами, що зумовлено відсутністю зручних та доступних
інструментів для обліку доходів і витрат.
Розвиток web-технологій створює передумови для розробки інтерактивних
аналітичних систем, які дозволяють не лише зберігати фінансову інформацію,
але й виконувати її обробку, візуалізацію та аналіз у режимі реального часу. Такі
системи сприяють підвищенню фінансової грамотності населення та
забезпечують ефективне планування бюджету.
Створення аналітичного web-додатку управління сімейним бюджетом має
важливе практичне значення, оскільки дозволяє користувачам:
 контролювати доходи та витрати;
 аналізувати фінансову активність;
 приймати обґрунтовані фінансові рішення.
Отже, розробка сучасного web-додатку для управління бюджетом сім’ї є
актуальним завданням, що поєднує технологічну доцільність, практичну
цінність та соціальну значущість.
Мета роботи та завдання дослідження
Метою кваліфікаційної роботи є створення аналітичного web-додатку для
управління сімейним бюджетом, який забезпечує облік, аналіз та візуалізацію
фінансових даних користувача.
Для досягнення поставленої мети необхідно вирішити такі завдання:
 провести аналіз предметної області управління фінансовими ресурсами
домогосподарства;

 дослідити існуючі програмні рішення для обліку бюджету та визначити
їх переваги і недоліки;
 визначити функціональні вимоги до web-додатку;
 спроєктувати архітектуру інформаційної системи;
 розробити клієнтську та серверну частини додатку;
 реалізувати аналітичний модуль для обробки фінансових даних;
 забезпечити безпеку та захист даних користувачів;
 провести тестування розробленої системи.
Об’єкт дослідження
Об’єктом дослідження є процес управління фінансовими ресурсами
домогосподарства.
Предмет дослідження
Предметом дослідження є методи та засоби розробки аналітичних web-
додатків для обліку та аналізу сімейного бюджету.
Методи дослідження
Для реалізації поставленої мети та вирішення завдань у роботі використано
такі методи:
1. Аналіз програмних систем – дослідження функціональних можливостей
сучасних додатків для управління фінансами.
2. Порівняльний аналіз – визначення переваг і недоліків існуючих рішень.
3. Моделювання системи – використання UML-діаграм для проєктування
архітектури.
4. Проєктування бази даних – розробка структури зберігання інформації.
5. Програмування – реалізація web-додатку з використанням сучасних
технологій.
6. Тестування – перевірка функціональності, продуктивності та безпеки
системи.
7. Аналіз результатів – оцінка ефективності роботи програмного продукту.
Перелік ключових слів: WEB-ДОДАТОК, СІМЕЙНИЙ БЮДЖЕТ,
АНАЛІТИКА, ФІНАНСИ, REACT, NODE.JS, EXPRESS, MONGODB, REST API,
JWT, ІНФОРМАЦІЙНА СИСТЕМА.

ABSTRACT
The bachelor’s qualification thesis contains: 85 pages, 21 figures, 22 references,
3 appendices.
Relevance of the Topic
In the modern context of societal digitalization and the increasing role of
information technologies in everyday life, systems for automating financial accounting
and analysis are gaining particular importance. A significant number of households
face the problem of inefficient financial resource management, which is caused by the
lack of convenient and accessible tools for tracking income and expenses.
The development of web technologies creates the prerequisites for designing
interactive analytical systems that not only store financial data but also process,
visualize, and analyze it in real time. Such systems contribute to improving financial
literacy among the population and ensure effective budget planning.
The development of an analytical web application for family budget
management has significant practical value, as it enables users to:
 monitor income and expenses;
 analyze financial activity;
 make informed financial decisions.
Thus, the development of a modern web application for managing a family
budget is a relevant task that combines technological feasibility, practical value, and
social significance.
Purpose and Objectives of the Study
The purpose of the qualification thesis is to develop an analytical web
application for managing a family budget, which provides accounting, analysis, and
visualization of user financial data.
To achieve this goal, the following tasks must be solved:
– to analyze the subject area of household financial resource management;
– to study existing software solutions for budget accounting and determine their
advantages and disadvantages;
– to define functional requirements for the web application;
– to design the architecture of the information system;

– to develop the client-side and server-side parts of the application;
– to implement an analytical module for financial data processing;
– to ensure security and protection of user data;
– to test the developed system.
Object of Research
The object of research is the process of managing household financial resources.
Subject of Research
The subject of research is the methods and tools for developing analytical web
applications for accounting and analyzing a family budget.
Research Methods
To achieve the goal and accomplish the tasks, the following methods were used:
1. Software systems analysis – studying the functional capabilities of modern
financial management applications.
2. Comparative analysis – identifying advantages and disadvantages of existing
solutions.
3. System modeling – using UML diagrams to design system architecture.
4. Database design – developing a data storage structure.
5. Programming – implementing the web application using modern technologies.
6. Testing – verifying functionality, performance, and security of the system.
7. Results analysis – evaluating the effectiveness of the developed software
product.
Keywords WEB APPLICATION, FAMILY BUDGET, ANALYTICS,
FINANCE, REACT, NODE.JS, EXPRESS, MONGODB, REST API, JWT,
INFORMATION SYSTEM.

ЗМІСТ
ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І ТЕРМІНІВ 5
ВСТУП ........................................................................................................................ 6
РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ІСНУЮЧИХ РІШЕНЬ .......... 9
1.1 Сутність управління сімейним бюджетом ........................................................ 9
1.2 Аналіз існуючих програмних рішень ............................................................... 11
1.3 Аналіз сучасних web-технологій ...................................................................... 13
1.4 Постановка задачі ............................................................................................... 15
Висновки до розділу 1 ............................................................................................. 17
РОЗДІЛ 2 ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ .......................... 19
2.1 Загальна архітектура системи ........................................................................... 19
2.2 UML-моделювання системи ............................................................................. 24
2.3 Проєктування бази даних .................................................................................. 29
2.4 Вибір технологій реалізації ............................................................................... 32
Висновки до розділу 2 ............................................................................................. 37
РОЗДІЛ 3 РОЗРОБКА АНАЛІТИЧНОГО WEB-ДОДАТКУ .............................. 39
3.1 Загальна характеристика процесу розробки ................................................... 39
3.2 Реалізація клієнтської частини ........................................................................ 41
3.3 Реалізація серверної частини ........................................................................... 47
3.4 Реалізація аналітичного модуля ....................................................................... 51
3.5 Забезпечення безпеки системи ......................................................................... 54
Висновки до розділу 3 .............................................................................................. 55
РОЗДІЛ 4 ТЕСТУВАННЯ ТА ОЦІНКА ЕФЕКТИВНОСТІ СИСТЕМИ ............. 57
4.1 Методика тестування ......................................................................................... 57
ЧДТУ 262224.001 ПЗ
Змн. Арк. № докум. Підпис Дата
Розроб. Шевченко Т. СТВОРЕННЯ АНАЛІТИЧНОГО Літ. Арк. Акрушів
Перевір. Тесля Ю.М. WEB-ДОДАТКУ УПРАВЛІННЯ 3 91
Реценз. Алесін О.В. БЮДЖЕТОМ СІМ’Ї
Н. Контр. . Пояснювальна записка Кафедра ІТП,група WEB-2211
Затверд. Прокопенко Т.О.

4.2 Тестування аналітичного модуля ...................................................................... 59
4.3 Оцінка продуктивності системи ........................................................................ 60
4.4 Оцінка безпеки системи …………….................................................................. 60
4.5 Аналіз результатів тестування ........................................................................... 61
Висновки до розділу 4 ............................................................................................... 61
ВИСНОВКИ ............................................................................................................... 62
СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ ................................................................. 64
ДОДАТОК А СПЕЦИФІКАЦІЯ .............................................................................. 66
ДОДАТОК Б ІНТЕРФЕЙС СИСТЕМИ .................................................................. 68
ДОДАТОК В ФРАГМЕНТИ ПРОГРАМНОГО КОДУ ......................................... 76

Арк.
ЧДТУ 262224.002 ПЗ
4
Змн. Арк. № докум. Підпис Дата

ПЕРЕЛІК УМОВНИХ ПОЗНАЧЕНЬ, СИМВОЛІВ, СКОРОЧЕНЬ І
ТЕРМІНІВ
API — прикладний програмний інтерфейс (Application Programming Interface)
CRUD — базові операції роботи з даними: створення, читання, оновлення,
видалення (Create, Read, Update, Delete)
CSS — каскадні таблиці стилів (Cascading Style Sheets)
DOM — об’єктна модель документа (Document Object Model)
Express — фреймворк для розробки серверних додатків на Node.js
HTML — мова розмітки гіпертексту (HyperText Markup Language)
HTTP — протокол передачі гіпертексту (HyperText Transfer Protocol)
HTTPS — захищений протокол передачі гіпертексту (HyperText Transfer Protocol
Secure)
JSON — формат обміну даними (JavaScript Object Notation)
JWT — токен для авторизації користувача (JSON Web Token)
MongoDB — документоорієнтована система управління базами даних
Node.js — платформа для виконання JavaScript на стороні сервера
NoSQL — тип баз даних, що не використовують реляційну модель
React — JavaScript-бібліотека для створення користувацьких інтерфейсів
REST API — архітектурний стиль побудови веб-сервісів (Representational State
Transfer)
SPA — односторінковий web-додаток (Single Page Application)
UI — користувацький інтерфейс (User Interface)
UX — досвід користувача (User Experience)
Web-додаток — програмне забезпечення, що працює у веб-браузері
База даних — організована сукупність взаємопов’язаних даних
Клієнт — частина системи, що взаємодіє з користувачем
Сервер — частина системи, що обробляє запити клієнта
Транзакція — фінансова операція (дохід або витрата)
Аналітика — процес обробки та інтерпретації даних
Категорія витрат — група фінансових операцій за призначенням
Арк.
ЧДТУ 262224.002 ПЗ
5
Змн. Арк. № докум. Підпис Дата

ВСТУП
У сучасних умовах стрімкого розвитку інформаційних технологій та
цифровізації суспільства питання ефективного управління фінансовими ресурсами
домогосподарств набуває особливої актуальності. Зростання кількості фінансових
операцій, поширення безготівкових розрахунків, використання електронних
платіжних систем і банківських сервісів призводять до ускладнення процесу
контролю доходів і витрат. У таких умовах виникає потреба у застосуванні
сучасних інформаційних систем, які дозволяють автоматизувати облік фінансових
даних, аналізувати їх та підтримувати прийняття обґрунтованих рішень.
Значна частина користувачів не веде систематичного обліку власних
фінансів, що призводить до нераціонального використання коштів, відсутності
заощаджень та фінансової нестабільності. Існуючі програмні рішення для
управління бюджетом часто є або складними у використанні, або мають обмежений
функціонал у безкоштовних версіях, що знижує їх доступність для широкого кола
користувачів.
Сучасні web-технології відкривають широкі можливості для створення
інтерактивних, доступних та зручних у використанні інформаційних систем. Web-
додатки дозволяють реалізувати функціональність обліку фінансових операцій,
аналізу витрат, побудови графіків та візуалізації даних у режимі реального часу без
необхідності встановлення спеціалізованого програмного забезпечення. Це
забезпечує мобільність, універсальність та зручність використання таких систем.
Особливого значення набувають аналітичні web-додатки, які не лише
зберігають інформацію, але й виконують її обробку, класифікацію та
інтерпретацію. Використання аналітичних інструментів дозволяє виявляти
закономірності у витратах, прогнозувати фінансові показники та підвищувати
рівень фінансової грамотності користувачів.
Таким чином, розробка аналітичного web-додатку управління сімейним
бюджетом є актуальним завданням, що поєднує технологічну доцільність,
практичну значущість та соціальну важливість.
Арк.
ЧДТУ 262224.002 ПЗ
6
Змн. Арк. № докум. Підпис Дата

Метою кваліфікаційної роботи є створення аналітичного web-додатку для
управління сімейним бюджетом, який забезпечує облік, аналіз та візуалізацію
фінансових даних користувача.
Для досягнення поставленої мети необхідно вирішити такі завдання:
– провести аналіз предметної області управління фінансовими ресурсами
домогосподарства;
– дослідити існуючі програмні рішення для обліку бюджету та визначити їх
переваги і недоліки;
– визначити функціональні вимоги до web-додатку;
– спроєктувати архітектуру інформаційної системи;
– розробити клієнтську та серверну частини додатку;
– реалізувати аналітичний модуль для обробки фінансових даних;
– забезпечити безпеку та захист даних користувачів;
– провести тестування розробленої системи.
Об’єктом дослідження є процес управління фінансовими ресурсами
домогосподарства.
Предметом дослідження є методи та засоби розробки аналітичних web-
додатків для обліку та аналізу сімейного бюджету.
У процесі виконання роботи використано такі методи дослідження: аналіз
існуючих програмних систем, порівняльний аналіз, моделювання інформаційної
системи з використанням UML-діаграм, проєктування бази даних, програмування
з використанням сучасних web-технологій, тестування та аналіз результатів.
Практичне значення отриманих результатів полягає у створенні
функціонального web-додатку, який може бути використаний для обліку та аналізу
фінансових операцій користувачів у реальних умовах. Розроблена система
дозволяє підвищити ефективність управління фінансами та сприяє формуванню
навичок фінансового планування.
Структура кваліфікаційної роботи включає вступ, чотири розділи, висновки,
список використаних джерел та додатки. У першому розділі проведено аналіз
предметної області та існуючих рішень. У другому розділі виконано проєктування
Арк.
ЧДТУ 262224.002 ПЗ
7
Змн. Арк. № докум. Підпис Дата

інформаційної системи. У третьому розділі описано процес розробки web-додатку.
У четвертому розділі наведено результати тестування та оцінки ефективності
системи.

Арк.
ЧДТУ 262224.002 ПЗ
8
Змн. Арк. № докум. Підпис Дата

РОЗДІЛ 1 АНАЛІЗ ПРЕДМЕТНОЇ ОБЛАСТІ ТА ІСНУЮЧИХ
РІШЕНЬ
Ефективне управління фінансовими ресурсами домогосподарства є
важливим фактором забезпечення економічної стабільності та підвищення якості
життя населення. У сучасних умовах зростання кількості фінансових операцій та
ускладнення структури витрат виникає необхідність використання інформаційних
технологій для автоматизації процесів обліку та аналізу фінансових даних.
Розвиток цифрових технологій сприяв появі великої кількості програмних
продуктів, призначених для управління особистими фінансами. Однак існуючі
рішення не завжди повністю задовольняють потреби користувачів через обмежену
функціональність, складність використання або відсутність адаптації до
індивідуальних вимог.
У зв’язку з цим виникає необхідність детального аналізу предметної області,
дослідження сучасних підходів до управління сімейним бюджетом, а також оцінки
існуючих програмних рішень і технологій, що використовуються для створення
подібних систем.
Метою даного розділу є дослідження теоретичних основ управління
сімейним бюджетом, аналіз сучасних програмних продуктів та web-технологій, а
також формулювання задачі розробки аналітичного web-додатку.
У межах розділу розглядаються:
 сутність управління сімейним бюджетом;
 існуючі програмні рішення для обліку фінансів;
 сучасні web-технології, що застосовуються при розробці інформаційних
систем;
 постановка задачі створення аналітичного web-додатку.
1.1 Сутність управління сімейним бюджетом
Управління сімейним бюджетом є важливим аспектом фінансової діяльності
домогосподарства, який передбачає планування, облік, контроль та аналіз доходів
і витрат. Основною метою такого управління є забезпечення фінансової
стабільності, раціонального використання коштів та формування заощаджень.
Арк.
ЧДТУ 262224.002 ПЗ
9
Змн. Арк. № докум. Підпис Дата

Сімейний бюджет включає такі основні складові:
 доходи (заробітна плата, додаткові джерела доходу, соціальні виплати);
 витрати (обов’язкові, змінні та непередбачувані);
 заощадження (резервні фонди, інвестиції).
Як показано на рисунку 1.1, структура сімейного бюджету має ієрархічний
характер.

Рисунок 1.1 – Структура сімейного бюджету
Ефективне управління бюджетом передбачає:
 регулярний облік фінансових операцій;
Арк.
ЧДТУ 262224.002 ПЗ
10
Змн. Арк. № докум. Підпис Дата

 аналіз витрат;
 планування майбутніх витрат;
 оптимізацію фінансових потоків.
Однак на практиці більшість користувачів не веде систематичного обліку
фінансів, що призводить до нераціонального використання ресурсів.
1.2 Аналіз існуючих програмних рішень
Сучасний ринок програмних продуктів пропонує значну кількість рішень для
управління особистими фінансами, які реалізовані у вигляді мобільних та web-
додатків. До найбільш поширених належать системи, що забезпечують облік
доходів і витрат, категоризацію фінансових операцій, формування звітів та
візуалізацію даних. Такі додатки орієнтовані на підвищення фінансової дисципліни
користувачів та спрощення процесу контролю за витратами.
Найбільш популярними є:
 Money Lover
 Spendee
 YNAB
Основні функції таких систем:
 облік доходів і витрат;
 категоризація фінансових операцій;
 візуалізація даних;
 формування звітів.
Більшість сучасних систем управління бюджетом мають інтуїтивно
зрозумілий інтерфейс, підтримують автоматичну синхронізацію даних між
пристроями та забезпечують інтеграцію з банківськими сервісами. Важливою
перевагою таких рішень є наявність аналітичних інструментів, що дозволяють
користувачам отримувати узагальнену інформацію про структуру витрат у вигляді
графіків та діаграм.
Разом з тим, аналіз існуючих програмних рішень показав наявність певних
недоліків. Зокрема, багато додатків мають обмежений функціонал у безкоштовних
версіях, що ускладнює їх використання без додаткових витрат. Крім того, деякі
Арк.
ЧДТУ 262224.002 ПЗ
11
Змн. Арк. № докум. Підпис Дата

системи характеризуються перевантаженим інтерфейсом або недостатньою
гнучкістю налаштувань, що не дозволяє адаптувати їх під індивідуальні потреби
користувачів. Також слід відзначити залежність від мобільних платформ або
необхідність постійного підключення до мережі Інтернет.
Таким чином, незважаючи на значну кількість існуючих рішень, залишається
актуальною задача розробки аналітичного web-додатку, який поєднує зручність
використання, достатній функціонал та доступність для широкого кола
користувачів.
Сучасний ринок програмного забезпечення пропонує значну кількість
інструментів для управління фінансами.
Як показано на рисунку 1.2, інтерфейси сучасних фінансових додатків
орієнтовані на зручність користувача.

Рисунок 1.2 – Інтерфейси сучасних систем управління бюджетом
Незважаючи на широкий функціонал, існуючі рішення мають ряд недоліків:
Арк.
ЧДТУ 262224.002 ПЗ
12
Змн. Арк. № докум. Підпис Дата

 обмежений функціонал у безкоштовних версіях;
 складність інтерфейсу;
 відсутність гнучкої кастомізації;
 залежність від мобільних платформ.
Це зумовлює необхідність створення власного web-рішення.
1.3 Аналіз сучасних web-технологій
Сучасні web-технології є основою для розробки інтерактивних
інформаційних систем, що функціонують у мережі Інтернет. Вони забезпечують
створення масштабованих, зручних у використанні та доступних програмних
продуктів, які можуть працювати на різних пристроях без необхідності
встановлення додаткового програмного забезпечення.
Розробка сучасних web-додатків ґрунтується на використанні клієнт-
серверної архітектури, яка передбачає розподіл системи на кілька логічних рівнів:
клієнтський інтерфейс (frontend), серверну частину (backend) та рівень зберігання
даних. Такий підхід дозволяє забезпечити гнучкість, масштабованість та ефективне
управління ресурсами системи. Взаємодія між компонентами здійснюється за
допомогою протоколів HTTP/HTTPS із використанням форматів обміну даними,
зокрема JSON.
Клієнтська частина web-додатків реалізується за допомогою мов HTML, CSS
та JavaScript. Для побудови сучасних користувацьких інтерфейсів широко
використовуються бібліотеки та фреймворки, зокрема React, Angular та Vue.js.
Вони дозволяють створювати односторінкові додатки (SPA), які забезпечують
швидку взаємодію з користувачем без повного перезавантаження сторінки. Це
значно покращує продуктивність та зручність використання системи.
Серверна частина забезпечує обробку запитів користувача, виконання бізнес-
логіки та взаємодію з базою даних. Для реалізації backend широко застосовуються
платформи Node.js, Python (Django, Flask), PHP та Java. У даній роботі доцільним є
використання Node.js разом із фреймворком Express, що дозволяє ефективно
створювати REST API та обробляти асинхронні запити.
Арк.
ЧДТУ 262224.002 ПЗ
13
Змн. Арк. № докум. Підпис Дата

Для зберігання даних використовуються як реляційні (MySQL, PostgreSQL),
так і нереляційні (MongoDB) системи управління базами даних. Вибір типу бази
даних залежить від структури даних та вимог до продуктивності системи. У
випадку web-додатку управління бюджетом сім’ї доцільним є використання
MongoDB, що забезпечує гнучке зберігання даних у форматі документів.
Важливим аспектом сучасних web-технологій є забезпечення безпеки даних.
Для цього використовуються механізми автентифікації та авторизації, зокрема
JWT-токени, шифрування даних, а також захист від типових атак, таких як XSS,
CSRF та SQL-ін’єкції. Крім того, застосування протоколу HTTPS забезпечує
безпечну передачу даних між клієнтом і сервером.
Таким чином, аналіз сучасних web-технологій показує, що їх використання
дозволяє створити ефективний, масштабований та безпечний аналітичний web-
додаток для управління сімейним бюджетом, який відповідає сучасним вимогам до
інформаційних систем.
Сучасні web-додатки розробляються із використанням клієнт-серверної
архітектури. Основними технологіями є:
 HTML, CSS — для створення інтерфейсу;
 JavaScript — для логіки взаємодії;
 React — для побудови UI;
 Node.js, Express — для серверної частини;
 MongoDB — для зберігання даних.
Як показано на рисунку 1.3, архітектура web-додатку включає кілька рівнів.

Арк.
ЧДТУ 262224.002 ПЗ
14
Змн. Арк. № докум. Підпис Дата

Рисунок 1.3 – Архітектура сучасного web-додатку
Основними перевагами web-технологій є:
 доступність з будь-якого пристрою;
 відсутність необхідності встановлення;
 централізоване зберігання даних;
 масштабованість.
1.4 Постановка задачі
На основі проведеного аналізу предметної області та існуючих програмних
рішень встановлено, що ефективне управління сімейним бюджетом потребує
використання сучасних інформаційних систем, які забезпечують не лише облік
фінансових операцій, але й їх аналітичну обробку та візуалізацію.
Аналіз сучасних програмних продуктів показав, що, незважаючи на широкий
функціонал, більшість із них мають ряд недоліків, зокрема обмежений
безкоштовний функціонал, складність інтерфейсу та недостатню адаптацію до
індивідуальних потреб користувачів. Крім того, значна частина рішень орієнтована
переважно на мобільні платформи або потребує постійного підключення до
зовнішніх сервісів.
У зв’язку з цим виникає необхідність розробки власного аналітичного web-
додатку, який поєднує простоту використання, достатній функціонал та
можливості для гнучкого налаштування.
Таким чином, метою розробки є створення інформаційної системи, що
забезпечує автоматизацію процесів обліку, аналізу та візуалізації фінансових даних
користувача.
Арк.
ЧДТУ 262224.002 ПЗ
15
Змн. Арк. № докум. Підпис Дата

Для досягнення поставленої мети необхідно реалізувати такі функціональні
можливості системи:
 провести аналіз предметної області управління фінансовими ресурсами
домогосподарства;
 дослідити існуючі програмні рішення для обліку бюджету та визначити їх
переваги і недоліки;
 визначити функціональні вимоги до web-додатку;
 спроєктувати архітектуру інформаційної системи;
 розробити клієнтську та серверну частини додатку;
 реалізувати аналітичний модуль для обробки фінансових даних;
 забезпечити безпеку та захист даних користувачів;
 провести тестування розробленої системи.
Як показано на рисунку 1.4, функціональна структура системи включає
модулі введення даних, обробки, зберігання, аналітики та візуалізації результатів.
До нефункціональних вимог системи належать:
 зручність користувацького інтерфейсу;
 швидкодія та стабільність роботи;
 безпека та захист персональних даних;
 масштабованість системи;
 доступність через web-браузер.
Для реалізації системи доцільно використати сучасні web-технології,
зокрема:
React — для створення клієнтської частини;
Node.js та Express — для реалізації серверної логіки;
MongoDB — для зберігання даних;
REST API — для взаємодії між компонентами системи.
Отже, постановка задачі полягає у розробці аналітичного web-додатку
управління сімейним бюджетом, який відповідає сучасним вимогам до
Арк.
ЧДТУ 262224.002 ПЗ
16
Змн. Арк. № докум. Підпис Дата

інформаційних систем та забезпечує ефективну обробку фінансових даних
користувача.

Рисунок 1.4 – Функціональна структура системи
Висновки до розділу 1
У першому розділі кваліфікаційної роботи було проведено аналіз предметної
області управління сімейним бюджетом, а також досліджено існуючі програмні
рішення та сучасні web-технології, що застосовуються для створення
інформаційних систем даного типу.
У результаті аналізу встановлено, що управління фінансовими ресурсами
домогосподарства є складним процесом, який включає облік, контроль та аналіз
доходів і витрат. Визначено основні складові сімейного бюджету та окреслено
проблеми, пов’язані з відсутністю систематичного підходу до ведення фінансового
обліку.
Дослідження існуючих програмних продуктів показало, що, незважаючи на
широкий функціонал сучасних додатків, вони мають певні обмеження, зокрема
недостатню гнучкість, складність інтерфейсу або обмежений доступ до функцій у
Арк.
ЧДТУ 262224.002 ПЗ
17
Змн. Арк. № докум. Підпис Дата

безкоштовних версіях. Це зумовлює необхідність розробки альтернативного
рішення, яке буде більш адаптованим до потреб користувачів.
Аналіз сучасних web-технологій підтвердив доцільність використання
клієнт-серверної архітектури та таких інструментів, як React, Node.js та MongoDB,
що дозволяють створити ефективний, масштабований та зручний у використанні
web-додаток.
На основі проведеного аналізу було сформульовано постановку задачі
розробки аналітичного web-додатку управління сімейним бюджетом, який
забезпечує облік, аналіз та візуалізацію фінансових даних.
Таким чином, результати першого розділу створюють теоретичну та
практичну основу для подальшого проєктування інформаційної системи, що буде
розглянуто у наступному розділі.

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

РОЗДІЛ 2 ПРОЄКТУВАННЯ ІНФОРМАЦІЙНОЇ СИСТЕМИ
Веб-додаток є локальною інформаційною системою. Тому будемо підходити
до проєктування архітектури, функцій, бази даних та технології реалізації у
відповідності з вимогами до створення інформаційних систем.
На основі результатів аналізу предметної області та постановки задачі,
виконаних у попередньому розділі, наступним етапом є проєктування
інформаційної системи аналітичного web-додатку управління сімейним бюджетом.
Проєктування є одним із ключових етапів розробки програмного
забезпечення, оскільки саме на цьому етапі визначається структура системи, її
компоненти, взаємодія між ними, а також логіка обробки даних. Якісно виконане
проєктування дозволяє забезпечити ефективність, масштабованість та надійність
майбутньої системи.
Метою даного розділу є розробка архітектури інформаційної системи,
моделювання її функціонування за допомогою UML-діаграм, проєктування бази
даних та обґрунтування вибору технологій реалізації.
2.1 Загальна архітектура системи
Розроблювана система будується на основі клієнт-серверної архітектури, яка
є стандартом для сучасних web-додатків. Такий підхід передбачає розподіл
функціональності між клієнтською частиною (frontend), серверною частиною
(backend) та базою даних.
Архітектура інформаційної системи є одним із найважливіших етапів
проєктування програмного забезпечення, оскільки саме вона визначає структуру
системи, спосіб взаємодії її компонентів, механізми обробки даних та загальні
принципи функціонування програмного продукту. Правильно побудована
архітектура забезпечує ефективність роботи системи, її масштабованість,
надійність та зручність подальшої підтримки.
Для реалізації аналітичного web-додатку управління сімейним бюджетом
обрано багаторівневу клієнт-серверну архітектуру, яка є стандартом для сучасних
web-систем. Такий підхід дозволяє розділити систему на окремі логічні рівні,
кожен із яких виконує власний набір функцій.
Арк.
ЧДТУ 262224.002 ПЗ
19
Змн. Арк. № докум. Підпис Дата

Основними рівнями архітектури системи є:
 клієнтський рівень (Frontend);
 серверний рівень (Backend);
 рівень зберігання даних (Database).
Як показано на рисунку 2.1, усі компоненти системи взаємодіють між собою
через REST API.
Клієнтський рівень системи. Клієнтський рівень відповідає за взаємодію
користувача із системою та реалізацію графічного інтерфейсу. Саме цей рівень
забезпечує введення фінансових даних, відображення результатів аналітики та
взаємодію з серверною частиною.
Клієнтська частина реалізована з використанням бібліотеки React, яка
дозволяє створювати сучасні односторінкові web-додатки (SPA). Використання
React забезпечує:
 швидке оновлення інтерфейсу без перезавантаження сторінки;
 компонентний підхід до розробки;
 повторне використання елементів інтерфейсу;
 ефективне управління станом додатку.
Основними функціями клієнтського рівня є:
 авторизація користувача;
 введення доходів та витрат;
 перегляд історії транзакцій;
 фільтрація даних;
 відображення статистики та графіків.
Для побудови інтерфейсу використовуються HTML, CSS та JavaScript, а
також бібліотеки для побудови діаграм і графіків.
Серверний рівень системи. Серверний рівень виконує обробку запитів
користувача, реалізує бізнес-логіку системи та забезпечує взаємодію з базою даних.
Серверна частина реалізована на платформі Node.js із використанням фреймворку
Express.
Основними перевагами використання Node.js є:
Арк.
ЧДТУ 262224.002 ПЗ
20
Змн. Арк. № докум. Підпис Дата

 асинхронна обробка запитів;
 висока продуктивність;
 ефективна робота з API;
 можливість використання JavaScript на всіх рівнях системи.
Серверний рівень включає:
 модуль авторизації;
 модуль роботи з транзакціями;
 аналітичний модуль;
 систему обробки HTTP-запитів;
 модуль взаємодії з базою даних.
Взаємодія між клієнтською та серверною частинами здійснюється через
REST API із використанням HTTP-запитів та JSON-формату даних.
Рівень зберігання даних. Для зберігання інформації у системі
використовується MongoDB — документоорієнтована система керування базами
даних. Вибір MongoDB обумовлений її гнучкістю, масштабованістю та
ефективною інтеграцією з Node.js.
База даних забезпечує:
 зберігання інформації про користувачів;
 зберігання фінансових операцій;
 роботу з категоріями доходів і витрат;
 збереження аналітичних даних.
Основними перевагами MongoDB є:
 гнучка структура документів;
 висока швидкість роботи;
 підтримка великих обсягів даних;
 можливість масштабування системи.
Взаємодія компонентів системи. Процес взаємодії між компонентами
системи відбувається у кілька етапів:
1. Користувач виконує дію через web-інтерфейс.
2. Клієнтська частина формує HTTP-запит.
Арк.
ЧДТУ 262224.002 ПЗ
21
Змн. Арк. № докум. Підпис Дата

3. Сервер обробляє запит та виконує необхідну бізнес-логіку.
4. За необхідності сервер звертається до бази даних.
5. Отримані результати повертаються клієнту у форматі JSON.
6. Клієнтська частина відображає результат користувачу.
Такий підхід забезпечує чітке розмежування функціональності між
компонентами системи та спрощує підтримку програмного забезпечення.
Безпека архітектури системи
При проєктуванні архітектури системи особлива увага приділена питанням
безпеки. Для цього реалізовано:
 JWT-автентифікацію;
 захист API-маршрутів;
 хешування паролів;
 контроль доступу до ресурсів системи.
Передача даних між клієнтом і сервером здійснюється через HTTP/HTTPS-
запити, що забезпечує безпечний обмін інформацією.
Переваги обраної архітектури. Обрана архітектура системи має такі
переваги:
 масштабованість;
 модульність;
 зручність підтримки;
 висока продуктивність;
 гнучкість розробки;
 можливість подальшого розширення функціоналу.
Таким чином, багаторівнева клієнт-серверна архітектура забезпечує
ефективну роботу аналітичного web-додатку управління сімейним бюджетом,
дозволяє реалізувати сучасний користувацький інтерфейс, забезпечує надійне
зберігання даних та підтримує ефективну обробку фінансової інформації.
Як показано на рисунку 2.1, архітектура системи включає три основні рівні:
клієнтський рівень, серверний рівень, рівень зберігання даних.
Арк.
ЧДТУ 262224.002 ПЗ
22
Змн. Арк. № докум. Підпис Дата

Рисунок 2.1 – Загальна архітектура інформаційної системи
Арк.
ЧДТУ 262224.002 ПЗ
23
Змн. Арк. № докум. Підпис Дата

Клієнтський рівень відповідає за взаємодію з користувачем та відображення
інформації. Він реалізується за допомогою бібліотеки React та забезпечує введення
даних, перегляд транзакцій і відображення аналітики.
Серверний рівень виконує обробку запитів, реалізує бізнес-логіку та
забезпечує взаємодію з базою даних. Для його реалізації використовується Node.js
та фреймворк Express.
Рівень зберігання даних представлений базою даних MongoDB, яка
забезпечує зберігання інформації про користувачів, транзакції та категорії.
2.2 UML-моделювання системи
Для формалізованого опису структури та поведінки інформаційної системи
використано мову UML (Unified Modeling Language), яка є загальноприйнятим
стандартом у сфері проєктування програмного забезпечення. UML дозволяє наочно
представити функціональні можливості системи, взаємодію її компонентів та
логіку обробки даних, що значно спрощує процес розробки та подальшого
супроводу програмного продукту.
У межах даної роботи UML-моделювання використовується для
відображення основних аспектів функціонування аналітичного web-додатку
управління сімейним бюджетом. Зокрема, застосовано такі типи діаграм: Use Case
діаграма – для опису взаємодії користувача із системою та визначення її
функціональних можливостей; Component діаграма – для відображення структури
системи та взаємозв’язків між її складовими; а також ER-діаграма, яка
використовується для моделювання структури бази даних.
Застосування UML дозволяє систематизувати процес проєктування,
підвищити зрозумілість архітектури системи та забезпечити узгодженість між
різними етапами розробки. Крім того, UML-діаграми є важливим інструментом
документування, що використовується при презентації та захисті кваліфікаційної
роботи.
Use Case діаграма. Use Case діаграма відображає взаємодію користувача із
системою. Особливу увагу при UML-моделюванні приділено узгодженості між
функціональними вимогами та структурою системи. Використання діаграм
Арк.
ЧДТУ 262224.002 ПЗ
24
Змн. Арк. № докум. Підпис Дата

дозволяє не лише відобразити статичну структуру компонентів, але й описати
динаміку їх взаємодії у процесі виконання основних операцій, таких як введення
фінансових даних, їх обробка та формування аналітичних результатів. Це
забезпечує цілісне бачення системи, дозволяє виявити потенційні недоліки на етапі
проєктування та оптимізувати архітектурні рішення до початку реалізації
програмного продукту.

Рисунок 2.2 – Use Case діаграма системи
Арк.
ЧДТУ 262224.002 ПЗ
25
Змн. Арк. № докум. Підпис Дата

Use Case діаграма є одним із основних інструментів UML-моделювання, який
використовується для опису функціональних можливостей системи з точки зору
кінцевого користувача. Вона дозволяє визначити перелік дій, які може виконувати
користувач у межах системи, а також встановити взаємозв’язки між акторами та
варіантами використання.
У розроблюваній системі аналітичного web-додатку управління сімейним
бюджетом основним актором є користувач, який взаємодіє із системою через web-
інтерфейс. Його дії спрямовані на введення, обробку та аналіз фінансових даних.
Як показано на рисунку 2.2, система передбачає реалізацію таких основних
варіантів використання:
 реєстрація нового користувача;
 авторизація в системі;
 додавання фінансових операцій (доходів і витрат);
 редагування та видалення транзакцій;
 перегляд історії фінансових операцій;
 аналіз витрат і доходів;
 перегляд аналітичних звітів і графіків.
Кожен із зазначених варіантів використання відповідає окремій
функціональній можливості системи та реалізується через відповідні програмні
модулі. Наприклад, функція додавання транзакцій передбачає введення даних
користувачем, їх перевірку, обробку сервером та збереження у базі даних.
Use Case діаграма також дозволяє визначити залежності між окремими
варіантами використання. Зокрема, виконання більшості функцій системи можливе
лише після проходження процедури авторизації, що забезпечує захист
персональних даних користувача. Крім того, функції аналізу та формування звітів
базуються на даних, отриманих у результаті введення транзакцій.
Таким чином, Use Case діаграма відображає повний перелік функціональних
можливостей системи, забезпечує їх структуроване представлення та є основою для
подальшого проєктування програмної реалізації аналітичного web-додатку.
Арк.
ЧДТУ 262224.002 ПЗ
26
Змн. Арк. № докум. Підпис Дата

Component діаграма. Component-діаграма використовується для
відображення структурної організації інформаційної системи та взаємозв’язків між
її основними програмними компонентами. Вона дозволяє представити систему як
сукупність взаємодіючих модулів, кожен з яких виконує визначені функції та
взаємодіє з іншими через чітко визначені інтерфейси.
У розроблюваному аналітичному web-додатку управління сімейним
бюджетом система побудована за принципом багаторівневої архітектури, яка
включає клієнтський рівень, серверний рівень та рівень зберігання даних. Як
показано на рисунку 2.3, ці рівні реалізовані у вигляді окремих компонентів, що
взаємодіють між собою через API.
Основними компонентами системи є:
Клієнтський компонент (Frontend) – відповідає за відображення інтерфейсу
користувача та обробку його дій. Реалізується з використанням бібліотеки React і
включає такі підмодулі:
 інтерфейс введення даних;
 відображення списку транзакцій;
 модуль візуалізації (графіки та діаграми);
 модуль навігації.
Серверний компонент (Backend) – реалізує бізнес-логіку системи, обробляє
запити клієнта та взаємодіє з базою даних. Реалізується за допомогою Node.js та
Express і включає:
 контролери обробки запитів;
 модуль авторизації та автентифікації;
 модуль обробки транзакцій;
 аналітичний модуль.
API-компонент (REST API) – виступає проміжним рівнем взаємодії між
клієнтом і сервером. Забезпечує передачу даних у форматі JSON через HTTP-
запити (GET, POST, PUT, DELETE).
Арк.
ЧДТУ 262224.002 ПЗ
27
Змн. Арк. № докум. Підпис Дата

Компонент бази даних (Database) – відповідає за зберігання та обробку даних.
У даній системі використовується MongoDB, яка забезпечує зберігання інформації
у вигляді документів.
Взаємодія між компонентами відбувається наступним чином: клієнтський
компонент формує HTTP-запит, який передається до серверного компонента через
API. Сервер обробляє запит, виконує необхідні операції над даними та повертає
результат клієнту у вигляді відповіді. У разі необхідності сервер звертається до
бази даних для отримання або збереження інформації.
Як видно з рисунка 2.3, компонентна структура системи забезпечує чітке
розмежування функцій між окремими модулями, що підвищує масштабованість,
спрощує підтримку та дозволяє модифікувати окремі частини системи без впливу
на інші.

Рисунок 2.3 – Component-діаграма системи
Таким чином, використання компонентного підходу до проєктування
дозволяє створити гнучку, надійну та ефективну архітектуру аналітичного web-
додатку управління сімейним бюджетом.
Арк.
ЧДТУ 262224.002 ПЗ
28
Змн. Арк. № докум. Підпис Дата

Component-діаграма відображає структуру системи та взаємозв’язки між її
компонентами.
2.3 Проєктування бази даних
База даних є важливим елементом системи, оскільки забезпечує зберігання та
обробку інформації.
База даних є ключовим компонентом інформаційної системи, оскільки
забезпечує зберігання, обробку та доступ до фінансових даних користувача. Якісне
проєктування структури бази даних є необхідною умовою для забезпечення
ефективності, надійності та масштабованості системи.
У розроблюваному аналітичному web-додатку управління сімейним
бюджетом для зберігання даних використовується документоорієнтована система
керування базами даних MongoDB. Вибір саме цього типу СУБД обумовлений
необхідністю гнучкого представлення даних, можливістю швидкого
масштабування та ефективної роботи з неструктурованою або
напівструктурованою інформацією.
Основні сутності бази даних. У результаті аналізу предметної області було
виділено основні сутності, які формують структуру бази даних:
 User (Користувач) – містить інформацію про зареєстрованих користувачів
системи;
 Transaction (Транзакція) – зберігає дані про фінансові операції (доходи та
витрати);
 Category (Категорія) – використовується для класифікації фінансових
операцій;
 Budget (Бюджет) – містить інформацію про фінансові плани користувача.
Як показано на рисунку 2.4, між цими сутностями встановлено логічні
зв’язки.
Структура колекцій. Кожна сутність реалізується у вигляді окремої колекції
MongoDB.
Колекція User:
 _id – унікальний ідентифікатор;
Арк.
ЧДТУ 262224.002 ПЗ
29
Змн. Арк. № докум. Підпис Дата

 email – електронна адреса;
 password – зашифрований пароль;
 createdAt – дата реєстрації.
Колекція Transaction:
 _id – ідентифікатор транзакції;
 userId – посилання на користувача;
 amount – сума операції;
 type – тип (дохід або витрата);
 categoryId – посилання на категорію;
 date – дата операції;
 description – коментар.
Колекція Category:
 _id – ідентифікатор категорії;
 name – назва категорії;
 type – тип (дохід/витрата).
Колекція Budget:
 _id – ідентифікатор бюджету;
 userId – власник бюджету;
 monthlyLimit – місячний ліміт витрат;
 currentBalance – поточний баланс.
Зв’язки між сутностями. У системі реалізовано такі типи зв’язків:
 User → Transaction (один до багатьох): один користувач може мати
багато транзакцій;
 Transaction → Category (багато до одного): кожна транзакція належить
до однієї категорії;
 User → Budget (один до одного): кожен користувач має один бюджет.
Зв’язки реалізуються за допомогою ідентифікаторів (ObjectId), що
зберігаються у відповідних полях документів.
Особливості проєктування. При проєктуванні бази даних враховано такі
принципи:
Арк.
ЧДТУ 262224.002 ПЗ
30
Змн. Арк. № докум. Підпис Дата

 нормалізація даних – уникнення дублювання інформації;
 гнучкість структури – можливість додавання нових полів без зміни
схеми;
 швидкодія – оптимізація запитів;
 безпека – захист персональних даних.
Для підвищення продуктивності передбачено використання індексів, зокрема
для полів userId, date та categoryId.
ER-модель бази даних. Для наочного представлення структури бази даних
використано ER-діаграму (рисунок 2.4), яка відображає сутності системи та зв’язки
між ними.
ER-модель дозволяє чітко визначити структуру даних, їх взаємозв’язки та
забезпечити правильну реалізацію бази даних у процесі розробки.
Як показано на рисунку 2.4, структура бази даних включає основні сутності.

Рисунок 2.4 – ER-діаграма бази даних
Арк.
ЧДТУ 262224.002 ПЗ
31
Змн. Арк. № докум. Підпис Дата

Основні сутності:
User – користувач системи;
Transaction – фінансова операція;
Category – категорія витрат або доходів.
Зв’язки:
 один користувач може мати багато транзакцій;
 кожна транзакція належить до певної категорії.
2.4 Вибір технологій реалізації
Для реалізації системи обрано сучасний технологічний стек:
 React – для створення інтерфейсу користувача;
 Node.js – для серверної частини;
 Express – для створення rest api;
 Mongodb – для зберігання даних;
 Jwt – для авторизації користувачів.
Для реалізації аналітичного web-додатку управління сімейним бюджетом
обрано сучасний технологічний стек, який забезпечує високу продуктивність,
масштабованість та ефективну взаємодію між компонентами системи. До складу
обраних технологій входять React, Node.js, Express, MongoDB та JWT.
React
React – це JavaScript-бібліотека для створення користувацьких інтерфейсів,
розроблена компанією Meta. Вона використовується для реалізації клієнтської
частини web-додатку та дозволяє створювати динамічні односторінкові додатки
(SPA).
Основною особливістю React є компонентний підхід до розробки, за якого
інтерфейс складається з окремих незалежних компонентів. Це дозволяє повторно
використовувати елементи інтерфейсу, спрощує підтримку коду та забезпечує
масштабованість системи.
Для підвищення продуктивності React використовує Virtual DOM –
віртуальне представлення структури сторінки, що дозволяє оновлювати лише
Арк.
ЧДТУ 262224.002 ПЗ
32
Змн. Арк. № докум. Підпис Дата

змінені елементи без повного перезавантаження сторінки. Завдяки цьому
забезпечується швидка взаємодія користувача із системою.
У межах даної роботи React використовується для:
 створення інтерфейсу користувача;
 реалізації навігації між сторінками;
 відображення списків транзакцій;
 побудови аналітичних графіків;
 взаємодії із серверною частиною через API.
Node.js
Node.js – це серверне середовище виконання JavaScript, побудоване на основі
рушія V8. Воно дозволяє виконувати JavaScript-код поза браузером та
використовується для реалізації серверної частини системи.
Однією з головних переваг Node.js є асинхронна модель обробки запитів, що
забезпечує ефективну роботу системи при великій кількості одночасних
користувачів. Node.js використовує неблокуючий ввід-вивід, завдяки чому сервер
може обробляти багато запитів без втрати продуктивності.
Використання Node.js у даному проєкті дозволяє:
 реалізувати серверну логіку системи;
 обробляти HTTP-запити;
 працювати з базою даних MongoDB;
 реалізувати REST API;
 забезпечити взаємодію між клієнтом та сервером.
Додатковою перевагою є можливість використання однієї мови
програмування (JavaScript) як для frontend, так і для backend частини системи.
Express
Express – це мінімалістичний web-фреймворк для Node.js, який
використовується для створення REST API та організації серверної архітектури.
Express значно спрощує процес розробки серверної частини, забезпечуючи:
 систему маршрутизації;
 обробку HTTP-запитів;
Арк.
ЧДТУ 262224.002 ПЗ
33
Змн. Арк. № докум. Підпис Дата

 підтримку middleware;
 зручну організацію API.
У межах даної системи Express використовується для:
 створення API-маршрутів;
 обробки запитів від клієнтської частини;
 реалізації авторизації користувачів;
 обробки фінансових операцій;
 передачі даних у форматі JSON.
Завдяки гнучкій структурі Express дозволяє будувати масштабовану серверну
архітектуру та легко інтегрувати додаткові модулі.
MongoDB
MongoDB – це документоорієнтована система управління базами даних типу
NoSQL, яка використовується для зберігання інформації у форматі BSON-
документів.
На відміну від реляційних СУБД, MongoDB не потребує жорстко визначеної
структури таблиць, що забезпечує гнучкість при роботі з даними та спрощує
масштабування системи.
У даному проєкті MongoDB використовується для:
 зберігання інформації про користувачів;
 зберігання фінансових транзакцій;
 роботи з категоріями доходів та витрат;
 формування аналітичних даних.
Основними перевагами MongoDB є:
 висока швидкість роботи;
 гнучка структура документів;
 ефективна інтеграція з Node.js;
 підтримка масштабування;
 зручна робота з JSON-подібними структурами.
Для взаємодії з MongoDB використовується бібліотека Mongoose, яка
забезпечує об’єктно-орієнтований підхід до роботи з даними.
Арк.
ЧДТУ 262224.002 ПЗ
34
Змн. Арк. № докум. Підпис Дата

JWT (JSON Web Token)
JWT (JSON Web Token) — це стандарт передачі даних між клієнтом та
сервером у вигляді цифрового токена. JWT використовується для реалізації
механізму автентифікації та авторизації користувачів.
Після успішного входу в систему сервер генерує токен, який містить
інформацію про користувача та його права доступу. Отриманий токен передається
клієнту та використовується для доступу до захищених ресурсів системи.
Основними перевагами JWT є:
 безпечна передача інформації;
 підтримка безстанної авторизації;
 висока швидкість перевірки доступу;
 можливість використання у REST API.
У межах даного проєкту JWT використовується для:
 авторизації користувачів;
 перевірки доступу до API;
 захисту персональних даних;
 обмеження доступу до окремих функцій системи.
Використання JWT дозволяє забезпечити безпечну роботу web-додатку та
захистити інформацію користувачів від несанкціонованого доступу.
Вибір обумовлений такими перевагами:
 Висока продуктивність;
 Масштабованість;
 Велика кількість готових бібліотек;
 Підтримка асинхронних операцій.
Вибір технологій реалізації є одним із ключових етапів проєктування
інформаційної системи, оскільки саме від нього залежить ефективність,
продуктивність, масштабованість та зручність подальшої підтримки програмного
продукту. При виборі технологічного стеку для розробки аналітичного web-
додатку управління сімейним бюджетом було враховано вимоги до
Арк.
ЧДТУ 262224.002 ПЗ
35
Змн. Арк. № докум. Підпис Дата

функціональності системи, швидкодії, безпеки та зручності користувацького
інтерфейсу.
Для реалізації клієнтської частини системи обрано бібліотеку react, яка
дозволяє створювати динамічні користувацькі інтерфейси на основі
компонентного підходу. Використання react забезпечує високу продуктивність
завдяки застосуванню віртуального dom, а також дозволяє будувати масштабовану
структуру додатку шляхом повторного використання компонентів. Крім того, react
має широку екосистему бібліотек для роботи зі станом, маршрутизацією та
візуалізацією даних.
Серверна частина системи реалізується на платформі node.js із
використанням фреймворку express. Такий вибір обумовлений можливістю
використання єдиної мови програмування (javascript) як на клієнтській, так і на
серверній стороні, що спрощує розробку та підтримку системи. Express дозволяє
швидко створювати rest api, обробляти http-запити та реалізовувати бізнес-логіку
додатку.
Для зберігання даних використовується mongodb — документоорієнтована
система управління базами даних. Вона забезпечує гнучкість структури даних, що
є важливим для систем, де можливе розширення функціоналу. Mongodb дозволяє
зберігати дані у форматі bson, що добре узгоджується з javascript-об’єктами, і
забезпечує високу продуктивність при роботі з великими обсягами даних.
Взаємодія між клієнтською та серверною частинами системи реалізується за
допомогою rest api, що використовує протоколи http/https та формат обміну даними
json. Такий підхід забезпечує стандартизовану та зручну передачу даних між
компонентами системи.
Для забезпечення безпеки доступу до системи використовується механізм
автентифікації на основі jwt (json web token). Це дозволяє реалізувати безпечну
авторизацію користувачів, контролювати доступ до ресурсів та забезпечити захист
персональних даних.
Окрім основних технологій, у процесі розробки можуть використовуватись
допоміжні інструменти:
Арк.
ЧДТУ 262224.002 ПЗ
36
Змн. Арк. № докум. Підпис Дата

 Бібліотеки для побудови графіків (chart.js, recharts);
 Системи керування версіями (git);
 Середовища розробки (visual studio code);
 Інструменти тестування api (postman).
Таким чином, обраний технологічний стек (react, node.js, express, mongodb)
відповідає сучасним вимогам до розробки web-додатків, забезпечує високу
продуктивність, масштабованість та зручність використання, а також дозволяє
ефективно реалізувати функціональні можливості аналітичного web-додатку
управління сімейним бюджетом.
Висновки до розділу 2
У другому розділі кваліфікаційної роботи було виконано проєктування
інформаційної системи аналітичного web-додатку управління сімейним бюджетом.
У процесі проєктування розроблено загальну архітектуру системи, яка
базується на клієнт-серверному підході та передбачає розподіл функціональності
між клієнтським рівнем, серверною частиною та базою даних. Така структура
забезпечує гнучкість, масштабованість та ефективну взаємодію компонентів
системи.
За допомогою UML-моделювання було формалізовано структуру та
поведінку системи. Зокрема, Use Case діаграма дозволила визначити основні
функціональні можливості системи та взаємодію користувача з нею, а Component-
діаграма — відобразити склад системи та зв’язки між її компонентами. Також було
проаналізовано динаміку взаємодії елементів системи у процесі виконання
основних операцій.
У рамках проєктування бази даних визначено основні сутності системи, їх
атрибути та зв’язки. Обрана модель з використанням MongoDB забезпечує гнучке
зберігання даних, високу продуктивність та можливість подальшого розширення
системи.
Обґрунтовано вибір технологій реалізації, зокрема використання React для
клієнтської частини, Node.js та Express для серверної логіки, MongoDB для
зберігання даних, а також REST API для взаємодії між компонентами системи.
Арк.
ЧДТУ 262224.002 ПЗ
37
Змн. Арк. № докум. Підпис Дата

Застосування зазначених технологій дозволяє створити сучасний, ефективний та
масштабований web-додаток.
Таким чином, результати другого розділу формують основу для практичної
реалізації аналітичного web-додатку, що буде розглянуто у наступному розділі.

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

РОЗДІЛ 3 РОЗРОБКА АНАЛІТИЧНОГО WEB-ДОДАТКУ
3.1 Загальна характеристика процесу розробки
Розробка аналітичного web-додатку управління сімейним бюджетом
здійснюється з використанням сучасних підходів до створення програмного
забезпечення, що передбачають поетапну реалізацію функціональних можливостей
системи, тестування та подальшу інтеграцію її компонентів. Такий підхід дозволяє
забезпечити високу якість програмного продукту, його відповідність поставленим
вимогам та можливість подальшого розширення.
Процес розробки системи базується на принципах модульності, повторного
використання компонентів та розподілу функціональності між клієнтською та
серверною частинами. Це дозволяє паралельно виконувати розробку окремих
модулів системи та спрощує їх подальшу інтеграцію.
Розробка здійснюється у кілька основних етапів:
Аналіз вимог. На даному етапі визначаються функціональні та
нефункціональні вимоги до системи, формується перелік основних функцій, які має
виконувати web-додаток. Результати цього етапу були сформульовані у попередніх
розділах.
Проєктування системи. Включає розробку архітектури, UML-моделювання
та проєктування бази даних. На цьому етапі визначаються основні компоненти
системи, їх взаємодія та структура даних.
Реалізація клієнтської частини. Розробка інтерфейсу користувача із
використанням бібліотеки React. Створюються компоненти для введення даних,
відображення списків транзакцій та візуалізації фінансової інформації.
Реалізація серверної частини. Створення REST API із використанням Node.js
та Express. Реалізується бізнес-логіка, обробка запитів та взаємодія з базою даних.
Інтеграція компонентів системи. Забезпечується взаємодія між клієнтською
та серверною частинами, налагоджується обмін даними через API.
Тестування системи. Перевіряється коректність роботи функцій, стабільність
системи та її продуктивність.
Арк.
ЧДТУ 262224.002 ПЗ
39
Змн. Арк. № докум. Підпис Дата

Як показано на рисунку 3.1, процес розробки має ітераційний характер.

Рисунок 3.1 – Процес розробки web-додатку
Особливістю процесу розробки є використання сучасних інструментів та
технологій, що забезпечують ефективну організацію роботи. Зокрема, для
керування версіями коду використовується система Git, яка дозволяє відстежувати
зміни, працювати з різними версіями проєкту та забезпечує командну взаємодію.
Для тестування API застосовується інструмент Postman, що дозволяє перевіряти
коректність запитів і відповідей.
Арк.
ЧДТУ 262224.002 ПЗ
40
Змн. Арк. № докум. Підпис Дата

Також важливим аспектом є використання компонентного підходу при
розробці клієнтської частини, що дозволяє повторно використовувати окремі
елементи інтерфейсу та спрощує підтримку системи. На серверному рівні
застосовується модульна структура коду, яка передбачає розділення логіки на
окремі файли та сервіси.
Таким чином, процес розробки аналітичного web-додатку управління
сімейним бюджетом є структурованим, поетапним та базується на сучасних
підходах до створення програмного забезпечення. Це дозволяє забезпечити високу
якість системи, її надійність та відповідність сучасним вимогам до web-додатків.
Основні етапи розробки:
 проєктування інтерфейсу користувача;
 реалізація клієнтської частини;
 розробка серверної логіки;
 інтеграція з базою даних;
 тестування та оптимізація.
Як видно з рисунка 3.1, кожен етап супроводжується перевіркою та
вдосконаленням функціоналу.
3.2 Реалізація клієнтської частини
Клієнтська частина додатку реалізована з використанням бібліотеки React,
що дозволяє створювати динамічні інтерфейси користувача.
Основні компоненти:
 форма додавання транзакцій;
 список витрат;
 модуль аналітики;
 панель навігації.
Як видно з рисунка 3.2, основний акцент зроблено на зручності введення
даних та візуалізації фінансової інформації.

Арк.
ЧДТУ 262224.002 ПЗ
41
Змн. Арк. № докум. Підпис Дата

Рисунок 3.2 – Інтерфейс користувача web-додатку
Приклад реалізації компонента
import React, { useState } from "react";

function AddTransaction({ onAdd }) {
const [amount, setAmount] = useState("");

Клієнтська частина аналітичного web-додатку управління сімейним
бюджетом реалізована із використанням бібліотеки React, яка забезпечує створення
динамічних користувацьких інтерфейсів на основі компонентного підходу.
Використання React дозволяє ефективно організувати структуру додатку,
спростити повторне використання елементів інтерфейсу та забезпечити швидке
оновлення даних без перезавантаження сторінки.
Основним завданням клієнтської частини є забезпечення взаємодії
користувача із системою, введення та відображення фінансових даних, а також
візуалізація результатів аналітичної обробки.
Структура клієнтської частини. Клієнтська частина побудована за
компонентною архітектурою, що передбачає розподіл інтерфейсу на окремі
незалежні модулі. Кожен компонент виконує визначену функцію та може повторно
використовуватись у різних частинах системи.
Основними компонентами системи є:
 компонент авторизації;
 компонент навігації;
 компонент введення транзакцій;
 компонент списку операцій;
 компонент аналітики;
 компонент відображення графіків.
Як показано на рисунку 3.3, структура клієнтської частини має ієрархічний
характер.
Арк.
ЧДТУ 262224.002 ПЗ
43
Змн. Арк. № докум. Підпис Дата

Рисунок 3.3 – Структура клієнтської частини системи
Головним компонентом системи є компонент App, який забезпечує
маршрутизацію та взаємодію між іншими компонентами. Для організації навігації
використовується бібліотека React Router.
Арк.
ЧДТУ 262224.002 ПЗ
44
Змн. Арк. № докум. Підпис Дата

Реалізація інтерфейсу користувача. Інтерфейс користувача реалізований із
використанням HTML, CSS та React-компонентів. Основна увага приділена
простоті використання, адаптивності та швидкості взаємодії із системою.
Головна сторінка системи містить:
 меню навігації;
 форму додавання транзакцій;
 таблицю фінансових операцій;
 блок аналітики;
 графіки та діаграми.
Реалізований інтерфейс користувача забезпечує швидкий доступ до основних
функцій системи: перегляду фінансової статистики, додавання транзакцій, аналізу
доходів і витрат та перегляду історії операцій. Завдяки використанню React-
компонентів інтерфейс має модульну структуру, що спрощує подальше
розширення функціональних можливостей web-додатку.
Як показано на рисунку 3.4, інтерфейс системи забезпечує швидкий доступ
до основних функцій.

Рисунок 3.4 – Інтерфейс клієнтської частини системи
Для стилізації інтерфейсу використовується CSS із застосуванням Flexbox та
Grid Layout, що забезпечує адаптивне розташування елементів на різних пристроях.
Арк.
ЧДТУ 262224.002 ПЗ
45
Змн. Арк. № докум. Підпис Дата

Робота зі станом додатку. Однією з важливих складових клієнтської частини
є управління станом додатку. Стан використовується для зберігання:
 інформації про користувача;
 списку транзакцій;
 результатів аналітики;
 параметрів фільтрації.
Для роботи зі станом застосовуються React Hooks:
 useState;
 useEffect;
 useContext.
Приклад використання стану для зберігання списку транзакцій наведено
нижче:
const [transactions, setTransactions] = useState([]);
Завантаження даних із сервера виконується після завантаження компонента:
useEffect(() => {
fetchTransactions();
}, []);
Взаємодія з серверною частиною. Клієнтська частина взаємодіє із сервером
через REST API. Для надсилання HTTP-запитів використовується бібліотека Axios.
Приклад отримання списку транзакцій:
const fetchTransactions = async () => {
const response = await axios.get('/api/transactions');
setTransactions(response.data);
};
Передача даних здійснюється у форматі JSON, що забезпечує
стандартизований обмін інформацією між клієнтом і сервером.
Візуалізація даних
Для побудови графіків та діаграм використовуються бібліотеки Recharts або
Chart.js. Це дозволяє реалізувати:
 кругові діаграми структури витрат;
 графіки динаміки витрат;
Арк.
ЧДТУ 262224.002 ПЗ
46
Змн. Арк. № докум. Підпис Дата

 порівняльні діаграми доходів і витрат.
Візуалізація даних значно покращує сприйняття фінансової інформації
користувачем та спрощує аналіз бюджету.
Особливості реалізації
При реалізації клієнтської частини враховано такі вимоги:
 адаптивність інтерфейсу;
 швидкість оновлення даних;
 зручність навігації;
 безпечне зберігання токенів авторизації.
Також реалізовано обробку помилок введення даних та повідомлення
користувача про результати виконання операцій.
3.3 Реалізація серверної частини
Серверна частина аналітичного web-додатку управління сімейним бюджетом
реалізована на платформі Node.js із використанням фреймворку Express. Основним
призначенням серверного рівня є обробка запитів клієнта, реалізація бізнес-логіки
системи, взаємодія з базою даних та забезпечення безпеки доступу до інформації.
Використання Node.js дозволяє реалізувати асинхронну модель обробки
запитів, що забезпечує високу продуктивність системи та ефективну роботу з
великою кількістю одночасних користувачів. Express, у свою чергу, спрощує
створення REST API та організацію маршрутизації запитів.
Архітектура серверної частини. Серверна частина побудована за
модульним принципом, що забезпечує розділення функціональності на окремі
компоненти. Основними модулями системи є: модуль маршрутизації; контролери
обробки запитів; сервісний рівень; модуль взаємодії з базою даних; модуль
авторизації.
Серверна архітектура побудована таким чином, щоб забезпечити
незалежність окремих компонентів системи та спростити подальше розширення
функціональності додатку. Кожен модуль виконує окрему функцію, що дозволяє
мінімізувати взаємозалежність між компонентами та підвищує зручність
підтримки програмного коду. Наприклад, модуль авторизації відповідає виключно
Арк.
ЧДТУ 262224.002 ПЗ
47
Змн. Арк. № докум. Підпис Дата

за перевірку користувача та генерацію JWT-токенів, тоді як модуль роботи з
транзакціями забезпечує обробку фінансових операцій та взаємодію з базою даних.
Такий підхід дозволяє ефективно організувати структуру серверної частини,
забезпечити повторне використання коду та спростити тестування окремих модулів
системи. Як показано на рисунку 3.5, серверна частина має багаторівневу
структуру.

Рисунок 3.5 – Архітектура серверної частини системи
Маршрутизація запитів реалізована за допомогою Express Router. Кожен
маршрут відповідає окремій функціональній можливості системи.
Приклад створення маршруту:
router.get('/transactions', transactionController.getAll);
Реалізація REST API
Арк.
ЧДТУ 262224.002 ПЗ
48
Змн. Арк. № докум. Підпис Дата

Для взаємодії між клієнтською та серверною частинами використовується
REST API. Основними HTTP-методами є:
GET – отримання даних;
POST – створення записів;
PUT – оновлення інформації;
DELETE – видалення даних.
API забезпечує обмін інформацією у форматі JSON.
Приклад відповіді сервера:
res.json({
success: true,
data: transactions
});
Робота з базою даних. Для взаємодії з MongoDB використовується
бібліотека Mongoose, яка забезпечує об’єктно-орієнтований підхід до роботи з
даними.
Модель транзакції реалізується наступним чином:
const transactionSchema = new mongoose.Schema({
amount: Number,
type: String,
category: String,
date: Date,
description: String
});
На основі схеми створюється модель:
module.exports = mongoose.model('Transaction', transactionSchema);
Реалізація авторизації. Для забезпечення безпеки доступу до системи
реалізовано механізм авторизації користувачів із використанням JWT-токенів.
Після успішної авторизації сервер генерує токен:
const token = jwt.sign(
{ id: user._id },
Арк.
ЧДТУ 262224.002 ПЗ
49
Змн. Арк. № докум. Підпис Дата

process.env.JWT_SECRET,
{ expiresIn: '7d' }
);
Отриманий токен використовується для доступу до захищених маршрутів
системи.
Для захисту паролів застосовується бібліотека bcrypt:
const hashedPassword = await bcrypt.hash(password, 10);
Обробка помилок. Серверна частина системи реалізує механізми обробки
помилок, що дозволяє забезпечити стабільність роботи додатку.
Приклад обробки винятків:
try {
const transactions = await Transaction.find();
res.json(transactions);
} catch (error) {
res.status(500).json({
message: 'Server error'
});
}
Обробка помилок дозволяє уникнути аварійного завершення роботи системи
та забезпечує коректне інформування користувача.
Особливості реалізації серверної частини. При реалізації серверного рівня
враховано такі вимоги:
 масштабованість системи;
 безпечна передача даних;
 розмежування доступу;
 оптимізація запитів до бази даних;
 підтримка REST-архітектури.
Також реалізовано механізм перевірки валідності вхідних даних та контроль
доступу до ресурсів системи.
Арк.
ЧДТУ 262224.002 ПЗ
50
Змн. Арк. № докум. Підпис Дата

Таким чином, серверна частина забезпечує ефективну обробку запитів,
взаємодію з базою даних та реалізацію бізнес-логіки аналітичного web-додатку
управління сімейним бюджетом.
3.4 Реалізація аналітичного модуля
Аналітичний модуль є однією з ключових складових розроблюваного web-
додатку, оскільки забезпечує обробку фінансових даних користувача, формування
статистичних показників та візуалізацію результатів аналізу. Основною метою
аналітичного модуля є надання користувачу зрозумілої та структурованої
інформації про стан сімейного бюджету.
Реалізація аналітичного модуля базується на обробці даних про доходи та
витрати, які зберігаються у базі даних. Отримані результати використовуються для
побудови графіків, діаграм та формування узагальнених фінансових показників.
Основні функції аналітичного модуля. Аналітичний модуль реалізує такі
функції:
 обчислення загальної суми доходів;
 обчислення загальної суми витрат;
 визначення поточного балансу;
 аналіз витрат за категоріями;
 аналіз динаміки фінансових операцій;
 формування статистичних звітів.
Як показано на рисунку 3.6, аналітичний модуль взаємодіє з базою даних та
модулем візуалізації.
Арк.
ЧДТУ 262224.002 ПЗ
51
Змн. Арк. № докум. Підпис Дата

Рисунок 3.6 – Структура аналітичного модуля
Обробка фінансових даних. Основою роботи аналітичного модуля є
агрегація фінансових даних користувача. Для цього серверна частина системи
виконує обробку масиву транзакцій та обчислення необхідних показників.
Приклад обчислення загальної суми витрат:
const totalExpenses = transactions
.filter(item => item.type === 'expense')
.reduce((sum, item) => sum + item.amount, 0);
Аналогічно виконується обчислення доходів та балансу користувача.
Поточний баланс визначається за формулою:
Баланс = Доходи − Витрати Баланс = Доходи – Витрати Баланс = Доходи −
Витрати
Аналіз витрат за категоріями. Для підвищення інформативності системи
реалізовано аналіз витрат за категоріями. Це дозволяє визначити, на які потреби
користувач витрачає найбільшу частину коштів.
Обробка даних виконується шляхом групування транзакцій за категоріями:
const grouped = {};
transactions.forEach(item => {
if(item.type === 'expense') {
grouped[item.category] =
Арк.
ЧДТУ 262224.002 ПЗ
52
Змн. Арк. № докум. Підпис Дата

(grouped[item.category] || 0) + item.amount;
}
});
Результати аналізу використовуються для побудови кругових діаграм та
графіків.
Як показано на рисунку 3.7, система дозволяє візуально оцінити структуру
витрат.

Рисунок 3.7 – Аналіз витрат за категоріями
Побудова графіків та діаграм. Для візуалізації даних використовуються
бібліотеки Recharts або Chart.js. Вони забезпечують побудову:
 кругових діаграм;
 стовпчикових графіків;
 лінійних графіків динаміки витрат.
Приклад побудови графіка за допомогою Recharts:
<BarChart width={500} height={300} data={data}>
<XAxis dataKey="name" />
<YAxis />
<Tooltip />
<Bar dataKey="amount" fill="#8884d8" />
</BarChart>
Арк.
ЧДТУ 262224.002 ПЗ
53
Змн. Арк. № докум. Підпис Дата

Використання графічного представлення даних дозволяє значно спростити
сприйняття фінансової інформації та підвищує зручність користування системою.
Формування звітів. Аналітичний модуль також забезпечує формування
звітів за певний період часу. Користувач може отримувати:
 щоденні звіти;
 місячні звіти;
 статистику доходів та витрат;
 інформацію про залишок коштів.
Звіти формуються на основі даних, що зберігаються у базі даних, та можуть
бути відображені у вигляді таблиць або графічних елементів.
Особливості реалізації аналітичного модуля. При реалізації аналітичного
модуля враховано такі вимоги:
 швидка обробка великих обсягів даних;
 коректність фінансових обчислень;
 зручність візуального представлення інформації;
 масштабованість функціоналу.
Також реалізовано механізми фільтрації даних за датою, категорією та типом
фінансової операції.
Таким чином, аналітичний модуль забезпечує ефективну обробку фінансової
інформації, формування статистичних показників та візуалізацію результатів, що
значно підвищує функціональні можливості web-додатку управління сімейним
бюджетом.
3.5 Забезпечення безпеки системи
У системі реалізовано:
 хешування паролів (bcrypt);
 JWT-авторизація;
 валідація даних;
 захист від XSS та CSRF атак.
Як показано на рисунку 3.8, механізм авторизації базується на токенах.
Арк.
ЧДТУ 262224.002 ПЗ
54
Змн. Арк. № докум. Підпис Дата

Рисунок 3.8 – Схема авторизації користувача
Висновки до розділу 3
У третьому розділі кваліфікаційної роботи було розглянуто процес
практичної реалізації аналітичного web-додатку управління сімейним бюджетом.
Описано основні етапи розробки системи, структуру клієнтської та серверної
частин, а також принципи реалізації аналітичного модуля.
У процесі розробки клієнтської частини було реалізовано користувацький
інтерфейс із використанням бібліотеки React. Створено компоненти для введення
фінансових операцій, відображення списку транзакцій, перегляду аналітичної
інформації та візуалізації результатів обробки даних. Використання компонентного
підходу та React Hooks дозволило забезпечити гнучкість структури додатку та
ефективне управління станом системи.
Під час реалізації серверної частини було створено REST API на основі
Node.js та Express. Реалізовано маршрутизацію запитів, механізми обробки даних,
взаємодію з базою даних MongoDB та систему авторизації користувачів із
використанням JWT-токенів. Для забезпечення безпеки даних також застосовано
механізми хешування паролів та перевірки доступу до ресурсів системи.
Окрему увагу приділено реалізації аналітичного модуля, який забезпечує
обробку фінансових даних, обчислення основних показників бюджету, аналіз
витрат за категоріями та формування графіків і діаграм. Реалізовані засоби
візуалізації дозволяють користувачу отримувати наочне представлення фінансової
інформації та ефективно аналізувати власний бюджет.
Арк.
ЧДТУ 262224.002 ПЗ
55
Змн. Арк. № докум. Підпис Дата

Таким чином, у результаті виконання третього розділу було реалізовано
основні функціональні компоненти аналітичного web-додатку управління
сімейним бюджетом, що забезпечують коректну роботу системи, зручність
використання та ефективну обробку фінансових даних користувача.

Арк.
ЧДТУ 262224.002 ПЗ
56
Змн. Арк. № докум. Підпис Дата

РОЗДІЛ 4 ТЕСТУВАННЯ ТА ОЦІНКА ЕФЕКТИВНОСТІ СИСТЕМИ
Після завершення етапу реалізації інформаційної системи важливим етапом
є проведення тестування та оцінювання ефективності її роботи. Тестування
дозволяє перевірити коректність функціонування програмного продукту, виявити
можливі помилки та забезпечити відповідність системи поставленим вимогам.
Для аналітичного web-додатку управління сімейним бюджетом особливого
значення набуває перевірка стабільності роботи, правильності обробки фінансових
даних, безпеки доступу та швидкодії системи. Крім того, необхідно оцінити
зручність використання додатку та ефективність реалізованих засобів аналітики.
Метою даного розділу є проведення тестування функціональних
можливостей системи, аналіз результатів її роботи та оцінка ефективності
реалізованого програмного рішення.
4.1 Тестування функціональних можливостей системи.
Функціональне тестування проводиться для перевірки коректності роботи
основних модулів системи та відповідності реалізованих функцій поставленим
вимогам.
Основними об’єктами тестування є:
 модуль авторизації;
 модуль роботи з транзакціями;
 аналітичний модуль;
 система взаємодії з базою даних;
 модуль візуалізації даних.
Як показано на рисунку 4.1, процес тестування включає кілька етапів.

Арк.
ЧДТУ 262224.002 ПЗ
57
Змн. Арк. № докум. Підпис Дата

Рисунок 4.1 – Процес тестування системи
У ході тестування перевірялися:
 коректність реєстрації користувача;
 правильність авторизації;
 додавання та видалення транзакцій;
 відображення аналітичних даних;
 побудова графіків та діаграм.
Тестування модуля авторизації. Перевірка модуля авторизації
здійснювалася шляхом введення коректних та некоректних облікових даних.
Під час тестування було встановлено:
 успішна авторизація відбувається при введенні правильних даних;
 система коректно обробляє помилки введення;
 JWT-токен генерується та передається клієнту.
Приклад перевірки маршруту авторизації:
POST /api/auth/login
Результат успішного запиту:
{
"success": true,
"token": "jwt_token"
}
Арк.
ЧДТУ 262224.002 ПЗ
58
Змн. Арк. № докум. Підпис Дата

Тестування модуля транзакцій
Тестування модуля транзакцій включало:
 створення записів;
 редагування даних;
 видалення транзакцій;
 фільтрацію інформації.
Було перевірено правильність збереження даних у базі MongoDB та
коректність їх відображення у клієнтській частині системи.
4.2 Тестування аналітичного модуля.
Аналітичний модуль тестувався з метою перевірки правильності обчислень
та формування статистичних даних.
Основними перевірками були:
 коректність підрахунку доходів;
 коректність підрахунку витрат;
 правильність формування балансу;
 побудова графіків.
Розрахунок балансу виконується за формулою:
Баланс=∑Доходів−∑ВитратБаланс = \sum Доходів - \sum
ВитратБаланс=∑Доходів−∑Витрат
Під час тестування встановлено, що система коректно виконує фінансові
обчислення та формує результати аналізу.
Перевірка візуалізації даних. Для перевірки модуля візуалізації
аналізувалась правильність побудови:
 кругових діаграм;
 стовпчикових графіків;
 лінійних графіків.
Як показано на рисунку 4.2, результати аналітики відображаються у
наочному графічному вигляді.
Арк.
ЧДТУ 262224.002 ПЗ
59
Змн. Арк. № докум. Підпис Дата

Рисунок 4.2 – Візуалізація результатів аналізу
4.3 Оцінка продуктивності системи
Оцінка продуктивності проводилася з метою визначення швидкодії системи
та стабільності її роботи.
Основними критеріями оцінювання були:
 час відповіді сервера;
 швидкість обробки запитів;
 стабільність роботи при навантаженні;
 швидкість завантаження інтерфейсу.
У результаті тестування встановлено:
 середній час відповіді API не перевищує 200 мс;
 система коректно працює при одночасній роботі кількох користувачів;
 завантаження інтерфейсу відбувається без суттєвих затримок.
4.4 Оцінка безпеки системи
Для забезпечення безпеки даних користувачів у системі реалізовано:
 JWT-автентифікацію;
 хешування паролів;
 перевірку доступу до API;
 захист від несанкціонованого доступу.
Арк.
ЧДТУ 262224.002 ПЗ
60
Змн. Арк. № докум. Підпис Дата

Під час тестування перевірялась:
 коректність авторизації;
 захист закритих маршрутів;
 відсутність доступу без токена;
 стійкість до некоректних запитів.
Результати тестування показали, що система забезпечує базовий рівень
захисту персональних даних користувача.
4.5 Аналіз результатів тестування
За результатами проведеного тестування встановлено, що розроблений web-
додаток:
 коректно виконує поставлені функції;
 забезпечує стабільну роботу;
 має зручний користувацький інтерфейс;
 забезпечує швидку обробку даних;
 дозволяє ефективно аналізувати сімейний бюджет.
Система успішно пройшла функціональне тестування та може бути
використана як основа для подальшого розвитку та вдосконалення.
Висновки до розділу 4
У четвертому розділі було проведено тестування та оцінку ефективності
аналітичного web-додатку управління сімейним бюджетом.
У процесі тестування перевірено роботу основних модулів системи, зокрема
авторизації, обробки транзакцій, аналітики та візуалізації даних. Результати
тестування показали коректність функціонування системи, стабільність її роботи
та відповідність поставленим вимогам.
Проведена оцінка продуктивності підтвердила ефективність обраної
архітектури та технологій реалізації. Також встановлено, що система забезпечує
належний рівень безпеки даних користувачів.
Таким чином, розроблений web-додаток є працездатною інформаційною
системою, яка може бути використана для управління та аналізу сімейного
бюджету.
Арк.
ЧДТУ 262224.002 ПЗ
61
Змн. Арк. № докум. Підпис Дата

ВИСНОВКИ
У результаті виконання кваліфікаційної роботи бакалавра було розроблено
аналітичний web-додаток управління сімейним бюджетом, призначений для
автоматизації процесів обліку, аналізу та візуалізації фінансових даних
користувача.
У ході виконання роботи було проведено аналіз предметної області
управління фінансовими ресурсами домогосподарства та досліджено існуючі
програмні рішення для ведення сімейного бюджету. Аналіз показав, що сучасні
системи мають певні недоліки, серед яких обмежений функціонал безкоштовних
версій, складність інтерфейсу або недостатня адаптація до потреб користувачів. Це
підтвердило актуальність розробки власного web-додатку для управління
фінансами.
У процесі проєктування системи було розроблено архітектуру інформаційної
системи, виконано UML-моделювання та спроєктовано структуру бази даних. Для
реалізації системи обрано сучасний технологічний стек, який включає React,
Node.js, Express та MongoDB. Обрані технології забезпечують масштабованість,
продуктивність та ефективну взаємодію між компонентами системи.
У практичній частині роботи було реалізовано клієнтську та серверну
частини web-додатку. Створено інтерфейс користувача для введення та перегляду
фінансових операцій, реалізовано REST API для обробки запитів та забезпечено
взаємодію з базою даних. Також було впроваджено механізми авторизації
користувачів із використанням JWT-токенів та засоби захисту персональних даних.
Особливу увагу приділено реалізації аналітичного модуля, який забезпечує:
 обчислення доходів та витрат;
 аналіз структури витрат;
 формування статистичних показників;
 побудову графіків та діаграм;
 візуалізацію фінансової інформації.
Проведене тестування системи підтвердило коректність роботи основних
функціональних модулів, стабільність роботи додатку та правильність обробки
Арк.
ЧДТУ 262224.002 ПЗ
62
Змн. Арк. № докум. Підпис Дата

фінансових даних. Результати оцінки продуктивності показали ефективність
обраної архітектури та технологій реалізації.
Практичне значення роботи полягає у можливості використання
розробленого web-додатку для ведення сімейного бюджету, контролю доходів і
витрат, а також підвищення рівня фінансової грамотності користувачів.
Отже, поставлену мету кваліфікаційної роботи досягнуто, а всі визначені
завдання успішно виконано. Розроблений аналітичний web-додаток є
працездатною інформаційною системою, яка може бути використана як основа для
подальшого розвитку та розширення функціональних можливостей у майбутньому.
Арк.
ЧДТУ 262224.002 ПЗ
63
Змн. Арк. № докум. Підпис Дата

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ
1. Пасічник В. В. Основи інформаційних систем / В. В. Пасічник, Н. Б.
Шаховська. – Львів: Новий Світ – 2000, 2021. – 390 с.
2. Семеріков С. О. Інформаційні технології та web-програмування / С. О.
Семеріков. – Кривий Ріг : КНУ, 2020. – 412 с.
3. Морзе Н. В. Проєктування інформаційних систем : навчальний посібник / Н.
В. Морзе, О. Г. Кузьмінська. – Київ : Ліра-К, 2021. – 368 с.
4. Завадський І. О. Основи баз даних : навчальний посібник / І. О. Завадський.
– Київ: Видавнича група BHV, 2020. – 288 с.
5. Глинський Я. М. Практикум з web-програмування / Я. М. Глинський. – Львів:
СПД Глинський, 2021. – 304 с.
6. Таненбаум Е. С. Комп’ютерні мережі / Е. С. Таненбаум, Д. Везеролл. – 6-те
вид. – Київ : Вільямс, 2020. – 960 с.
7. Кормен Т. Алгоритми. Побудова та аналіз / Т. Кормен, Ч. Лейзерсон, Р.
Рівест, К. Штайн. – Київ : К.І.С., 2021. – 1296 с.
8. JavaScript: The Definitive Guide / David Flanagan. – 7th ed. – Sebastopol :
O’Reilly Media, 2020. – 706 p.
9. Learning React / Alex Banks, Eve Porcello. – 2nd ed. – Sebastopol : O’Reilly
Media, 2020. – 310 p.
10. Node.js Design Patterns / Mario Casciaro, Luciano Mammino. – 3rd ed. –
Birmingham : Packt Publishing, 2020. – 661 p.
11. MongoDB: The Definitive Guide / Kristina Chodorow. – 3rd ed. – Sebastopol :
O’Reilly Media, 2019. – 514 p.
12. Web Development with Node and Express / Ethan Brown. – 2nd ed. – Sebastopol
: O’Reilly Media, 2019. – 338 p.
13. Берко А. Ю. Моделі баз даних та знань : навчальний посібник / А. Ю. Берко,
О. М. Верес, В. В. Пасічник. – Львів : Магнолія-2006, 2024. – 440 с. ISBN 978-
617-574-295-2.
14. Азарова А. О. Інформаційні системи і технології. Частина 1 : навчальний
посібник / А. О. Азарова, Н. П. Юрчук, О. Г. Муращенко. – Вінниця : ВНТУ,
Арк.
ЧДТУ 262224.002 ПЗ
64
Змн. Арк. № докум. Підпис Дата

2024. – 152 с.
15. Анісімов А. В. Інформаційні системи та бази даних. Частина 1 : навчальний
посібник / А. В. Анісімов, П. П. Кулябко. – Київ : Київський національний
університет імені Тараса Шевченка, 2022. – 110 с.
16. Баран С. В. Основи web-програмування : навчальний посібник / С. В. Баран.
– Львів, 2021. – 320 с.
17. Омельчук Л. Л. Об’єктно-орієнтоване програмування. Лабораторний
практикум : навчальний посібник / Л. Л. Омельчук, А. О. Свистунов. – Київ,
2023. – 326 с.
18. Верес М. М. Програмування мовою Python : навчальний посібник / М. М.
Верес, Л. О. Катеринич, О. О. Супрун. – Київ, 2023. – 362 с.
19. Пашко А. О. Інтелектуальний аналіз фінансових даних : навчальний посібник
/ А. О. Пашко. – Київ, 2024. – 113 с.
20. Завадський І. О. Бази даних та інформаційні системи : навчальний посібник /
І. О. Завадський. – Київ : Видавнича група BHV, 2022. – 384 с.
21. Морзе Н. В. Інформаційні системи : навчальний посібник / Н. В. Морзе, О. Г.
Кузьмінська. – Київ : Ліра-К, 2022. – 420 с.
22. Пасічник В. В. Організація баз даних та знань : підручник / В. В. Пасічник. –
Львів : Новий Світ – 2000, 2023. – 560 с.

Арк.
ЧДТУ 262224.002 ПЗ
65
Змн. Арк. № докум. Підпис Дата

ДОДАТОК А

Затверджую
Зав. кафедри ІТП,
_________ Т. ПРОКОПЕНКО
«____»____________2026 р.

СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ
БЮДЖЕТОМ СІМ’Ї

Специфікація
482.ЧДТУ.62224-01

Листів 2

Розробник ____________________ Шевченко Т.

Керівник ____________________ Тесля Ю.М.

Черкаси – 2026
Арк.
ЧДТУ 262224.002 ПЗ
66
Змн. Арк. № докум. Підпис Дата

482.ЧДТУ. 62224-01
Позначення Найменування Примітка

Документація

482.ЧДТУ. 62224-01 12 01 Лістинг коду програми
482.ЧДТУ. 62224-01 34 01 Інструкція користувача

Арк.
ЧДТУ 262224.002 ПЗ
67
Змн. Арк. № докум. Підпис Дата

ДОДАТОК Б

СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ
БЮДЖЕТОМ СІМ’Ї

Текст програми
482.ЧДТУ. 62224-02 12 01
Листів 7

Розробник _____________ Т ШЕВЧЕНКО

Черкаси – 2026
Арк.
ЧДТУ 262224.002 ПЗ
68
Змн. Арк. № докум. Підпис Дата

import React, { useState } from "react";
import "./App.css";

function App() {
const [transactions, setTransactions] = useState([
{
id: 1,
type: "Дохід",
category: "Заробітна плата",
amount: 25000,
date: "2026-04-01",
},
{
id: 2,
type: "Витрата",
category: "Продукти",
amount: 3200,
date: "2026-04-03",
},
{
id: 3,
type: "Витрата",
category: "Комунальні послуги",
amount: 2800,
date: "2026-04-05",
},
]);

Арк.
ЧДТУ 262224.002 ПЗ
69
Змн. Арк. № докум. Підпис Дата

const [form, setForm] = useState({
type: "Витрата",
category: "",
amount: "",
date: "",
});

const totalIncome = transactions
.filter((item) => item.type === "Дохід")
.reduce((sum, item) => sum + item.amount, 0);

const totalExpense = transactions
.filter((item) => item.type === "Витрата")
.reduce((sum, item) => sum + item.amount, 0);

const balance = totalIncome - totalExpense;

const handleSubmit = (e) => {
e.preventDefault();

const newTransaction = {
id: Date.now(),
type: form.type,
category: form.category,
amount: Number(form.amount),
date: form.date,
};

Арк.
ЧДТУ 262224.002 ПЗ
70
Змн. Арк. № докум. Підпис Дата

setTransactions([...transactions, newTransaction]);

setForm({
type: "Витрата",
category: "",
amount: "",
date: "",
});
};

return (
<div className="app">
<header className="header">
<h1>Сімейний бюджет</h1>
<p>Аналітичний web-додаток управління фінансами</p>
</header>

<main className="container">
<section className="cards">
<div className="card">
<h3>Доходи</h3>
<p>{totalIncome} грн</p>
</div>

<div className="card">
<h3>Витрати</h3>
<p>{totalExpense} грн</p>
</div>
Арк.
ЧДТУ 262224.002 ПЗ
71
Змн. Арк. № докум. Підпис Дата

<div className="card">
<h3>Баланс</h3>
<p>{balance} грн</p>
</div>
</section>

<section className="content">
<div className="form-block">
<h2>Додати операцію</h2>

<form onSubmit={handleSubmit}>
<label>Тип операції</label>
<select
value={form.type}
onChange={(e) =>
setForm({ ...form, type: e.target.value })
}
>
<option>Дохід</option>
<option>Витрата</option>
</select>

<label>Категорія</label>
<input
type="text"
placeholder="Наприклад: продукти"
value={form.category}
Арк.
ЧДТУ 262224.002 ПЗ
72
Змн. Арк. № докум. Підпис Дата

onChange={(e) =>
setForm({ ...form, category: e.target.value })
}
required
/>

<label>Сума</label>
<input
type="number"
placeholder="Введіть суму"
value={form.amount}
onChange={(e) =>
setForm({ ...form, amount: e.target.value })
}
required
/>

<label>Дата</label>
<input
type="date"
value={form.date}
onChange={(e) =>
setForm({ ...form, date: e.target.value })
}
required
/>

<button type="submit">Додати</button>
Арк.
ЧДТУ 262224.002 ПЗ
73
Змн. Арк. № докум. Підпис Дата

</form>
</div>

<div className="table-block">
<h2>Фінансові операції</h2>

<table>
<thead>
<tr>
<th>Дата</th>
<th>Тип</th>
<th>Категорія</th>
<th>Сума</th>
</tr>
</thead>
<tbody>
{transactions.map((item) => (
<tr key={item.id}>
<td>{item.date}</td>
<td>{item.type}</td>
<td>{item.category}</td>
<td>{item.amount} грн</td>
</tr>
))}
</tbody>
</table>
</div>
</section>
Арк.
ЧДТУ 262224.002 ПЗ
74
Змн. Арк. № докум. Підпис Дата

<section className="analytics">
<h2>Аналітика бюджету</h2>
<p>
Загальний фінансовий стан користувача визначається на основі
співвідношення доходів і витрат. Поточний баланс становить{" "}
<strong>{balance} грн</strong>.
</p>
</section>
</main>
</div>
);
}

export default App;

Арк.
ЧДТУ 262224.002 ПЗ
75
Змн. Арк. № докум. Підпис Дата

ДОДАТОК Б

СТВОРЕННЯ АНАЛІТИЧНОГО WEB-ДОДАТКУ УПРАВЛІННЯ
БЮДЖЕТОМ СІМ’Ї

Інструкція користувача
482.ЧДТУ. 262224-01 34 01
Листів 4

Розробник _____________ Т ШЕВЧЕНКО

Черкаси – 2026
Арк.
ЧДТУ 262224.002 ПЗ
76
Змн. Арк. № докум. Підпис Дата

В.1 Загальна інформація про систему
Аналітичний web-додаток управління сімейним бюджетом призначений для
автоматизації процесів обліку доходів та витрат користувача, аналізу фінансової
активності та візуалізації статистичних даних.
Система дозволяє:
 виконувати реєстрацію та авторизацію користувачів;
 додавати та редагувати фінансові операції;
 переглядати історію транзакцій;
 аналізувати доходи та витрати;
 формувати графіки та діаграми;
 контролювати поточний стан бюджету.
Доступ до системи здійснюється через web-браузер.
В.2 Головна сторінка системи
Після успішної авторизації користувач переходить на головну сторінку
системи, яка містить основні елементи управління фінансами, статистичні
показники та аналітичні графіки.

Арк.
ЧДТУ 262224.002 ПЗ
77
Змн. Арк. № докум. Підпис Дата

Рисунок В.1 – Головна сторінка web-додатку
В.3 Реєстрація користувача
Для початку роботи із системою користувач повинен пройти процедуру
реєстрації.
Для цього необхідно:
1. Відкрити сторінку реєстрації.
2. Ввести:
o електронну адресу;
o пароль;
o підтвердження пароля.
3. Натиснути кнопку «Зареєструватися».
Після успішної реєстрації користувач отримує доступ до системи.

Арк.
ЧДТУ 262224.002 ПЗ
78
Змн. Арк. № докум. Підпис Дата

Рисунок В.2 – Сторінка реєстрації користувача
В.4 Авторизація користувача
Для входу в систему необхідно:
1. Відкрити сторінку авторизації.
2. Ввести:
o email;
o пароль.
3. Натиснути кнопку «Увійти».
Після успішної авторизації система відкриває головну сторінку додатку.

Арк.
ЧДТУ 262224.002 ПЗ
79
Змн. Арк. № докум. Підпис Дата

Рисунок В.3 – Сторінка авторизації користувача
В.5 Робота з фінансовими операціями
В.5.1 Додавання транзакції
Для додавання фінансової операції необхідно:
1. Відкрити форму додавання операції.
2. Обрати тип операції:
o дохід;
o витрата.
3. Вказати:
o категорію;
o суму;
o дату;
o опис.
4. Натиснути кнопку «Додати».
Після цього операція буде збережена у базі даних та відображена у таблиці
транзакцій.

Арк.
ЧДТУ 262224.002 ПЗ
80
Змн. Арк. № докум. Підпис Дата

Рисунок В.4 – Форма додавання фінансової операції
В.5.2 Перегляд історії транзакцій
Система дозволяє переглядати всі фінансові операції у вигляді таблиці.
Користувач може:
 редагувати записи;
 видаляти транзакції;
 фільтрувати дані;
 виконувати пошук операцій.
Арк.
ЧДТУ 262224.002 ПЗ
81
Змн. Арк. № докум. Підпис Дата

Рисунок В.5 – Таблиця фінансових операцій
В.6 Перегляд аналітики
Аналітичний модуль дозволяє аналізувати фінансові дані користувача у
вигляді графіків та діаграм.
Користувач може:
 переглядати структуру витрат;
 аналізувати динаміку доходів;
 контролювати поточний баланс;
 отримувати статистичні показники.
Арк.
ЧДТУ 262224.002 ПЗ
82
Змн. Арк. № докум. Підпис Дата

Рисунок В.6 – Візуалізація аналітичних даних
В.7 Робота з фільтрами
Для зручності аналізу інформації реалізовано систему фільтрації даних.
Користувач може виконувати фільтрацію:
 за датою;
 за категорією;
 за типом операції;
 за періодом часу.
Арк.
ЧДТУ 262224.002 ПЗ
83
Змн. Арк. № докум. Підпис Дата

Рисунок В.7 – Панель фільтрації даних
В.8 Адаптивний інтерфейс системи
Інтерфейс системи адаптований для роботи на різних типах пристроїв,
зокрема персональних комп’ютерах, планшетах та смартфонах.
Адаптивність реалізована за допомогою CSS Flexbox та Grid Layout.

Рисунок В.8 – Адаптивний інтерфейс web-додатку
В.9 Захист даних користувача
Для забезпечення безпеки інформації у системі реалізовано:
 JWT-автентифікацію;
 захист API;
 хешування паролів;
 контроль доступу до даних.
Усі персональні дані користувача зберігаються у захищеному вигляді.

Рисунок В.9 – Захист та авторизація користувача
В.10 Завершення роботи із системою
Для завершення роботи користувачу необхідно:
Арк.
ЧДТУ 262224.002 ПЗ
84
Змн. Арк. № докум. Підпис Дата

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

Арк.
ЧДТУ 262224.002 ПЗ
85
Змн. Арк. № докум. Підпис Дата

Репозиторій ЧДТУ