Проєктування та розробка вебдодатку з обліку особистих доходів та витрат

Abstract

UA : Кваліфікаційна робота: 46 сторінок, 13 рисунків, 1 таблиця, 12 джерел. Об’єкт дослідження – процес автоматизації обліку персональних фінансів користувачів за допомогою кросплатформених інформаційних систем. Предмет дослідження – архітектура, функціональні можливості та UX/UI-принципи проєктування спрощеного вебзастосунку для мануального моніторингу доходів і витрат та інтерактивного керування балансом. Мета роботи – скорочення часу на ведення персонального фінансового обліку та зменшення кількості помилок при фіксації транзакцій шляхом створення вебсервісу з інтуїтивним інтерфейсом, що забезпечує введення, збереження та перегляд фінансових операцій у структурованому вигляді. Метод дослідження – аналітичний, експериментальний, порівняльний аналіз. У кваліфікаційній роботі був спроєктований та розроблений вебдодаток, який має назву «MoneySpace» персональний фінансовий трекер із клієнт-серверною архітектурою та системою авторизації користувачів. Застосунок реалізує повний цикл роботи з фінансовими операціями: введення доходів і витрат, збереження у базі даних, перегляд історії транзакцій та автоматичний перерахунок балансу в режимі реального часу. Клієнтська частина розроблена засобами HTML5, CSS3 та JavaScript без використання зовнішніх фреймворків. Інтерфейс побудовано на основі адаптивної сітки CSS Grid з підтримкою мобільних пристроїв. Серверна частина реалізована на платформі Node.js з використанням фреймворку Express.js та забезпечує обробку HTTP-запитів, маршрутизацію та взаємодію з базою даних. Для зберігання даних використано БД MongoDB у поєднанні з ODM-бібліотекою Mongoose, що дозволяє описувати схеми документів та виконувати валідацію даних. Безпека застосунку забезпечується системою автентифікації на основі JSON Web Token (JWT) та хешуванням паролів за допомогою бібліотеки bcryptjs. Кожен користувач має доступ виключно до власних фінансових даних завдяки прив'язці транзакцій до ідентифікатора облікового запису. Конфіденційні параметри конфігурації винесено у змінні середовища за допомогою бібліотеки dotenv. Розроблений застосунок пройшов тестування у локальному середовищі з використанням інструментів браузерного відлагодження DevTools. Вихідний код проєкту опубліковано у репозиторії GitHub. Для спрощення розгортання на сторонніх пристроях реалізовано підтримку контейнеризації засобами Docker та Docker Compose, що дозволяє запустити повноцінний застосунок єдиною командою без необхідності окремого налаштування середовища.EN : Qualification work: 46 pages, 13 figures, 1 table, 12 sources. Object of research: the process of automating the accounting of users' personal finances using cross-platform information systems. Subject of research: architecture, functionality and UX/UI principles of designing a simplified web application for manual monitoring of income and expenses and interactive balance management. Purpose of work: reducing the time for maintaining personal financial accounting and reducing the number of errors when recording transactions by creating a web service with an intuitive interface that provides input, storage and viewing of financial transactions in a structured form. Research method: analytical, experimental, comparative analysis. In the qualification work, a web application called "MoneySpace" was designed and developed, a personal financial tracker with a client-server architecture and a user authorization system. The application implements a full cycle of work with financial transactions: entering income and expenses, saving in the database, viewing transaction history and automatic recalculation of the balance in real time. The client part is developed using HTML5, CSS3 and JavaScript without using external frameworks. The interface is built on the basis of the adaptive CSS Grid grid with support for mobile devices. The server part is implemented on the Node.js platform using the Express.js framework and provides HTTP request processing, routing and interaction with the database. The MongoDB database is used to store data in combination with the Mongoose ODM library, which allows you to describe document schemas and perform data validation. The application security is provided by an authentication system based on JSON Web Token (JWT) and password hashing using the bcryptjs library. Each user has access exclusively to their own financial data by linking transactions to the account identifier. Confidential configuration parameters were transferred to environment variables using the dotenv library. The developed application was tested in a local environment using the DevTools browser debugging tools. The project source code was published in the GitHub repository. To simplify deployment on third-party devices, containerization support was implemented using Docker and Docker Compose, which allows you to run a full-fledged application with a single command without the need for separate environment configuration.