Хакатон MIFIDEV. Команда №10. Партнер - Globus IT, разработка веб-приложения для учёта финансов

1. Хакатон MIFIDEV

Итоговая
презентация

2. Команда № 10

• Руслан Магай
• Александра Калашникова
• Маргарита Кучерова
• Анастасия Чиркова
• Сергей Киевский

3. Задача

Бриф: партнер - Globus IT, разработка веб-приложения для учёта финансов
Стэк проекта:
Frontend
Backend
База данных
Логирование
Экспорт данных
Развертывание
HTML, CSS, JavaScript (с использованием AJAX и JWT)
Java HTTP Server
PostgreSQL
SLF4J, Logback
Библиотеки для работы с PDF / Excel
Docker
Задачи: Создание веб-приложения для мониторинга финансовых
показателей: пользователи смогут не только отслеживать свои
доходы и расходы, но и получать аналитические отчеты, что
ведет к повышению финансовой грамотности и удобству в
управлении финансами

4. Исследования и анализ требований

Целевая аудитория:
- индивидуальные предприниматели
- малые и средние предприятия
- фрилансеры
- частные лица
Методы сбора информации, которые
позволили определить ключевые требования
к нашему приложению:
• Анкетирование – опросный лист с перечнем
вопросов открытого и закрытого типа
• Интервью, работа с фокус-группами
определение детальных потребностей и
предпочтений, выявление неявных
требований для получения более широкого
спектра мнений

5. Основные функции приложения

Функции
Аутентификация пользователей
Создание и редактирование финансовых операций
Фильтрация и поиск финансовых операций
Важность ключевых функций для пользователя
Аналитика и отчеты
Безопасность и защита данных
Работа с транзакциями
Основной
Анализ рисков
Основной
Финансовая отчетность
Основной
Интерфейс и пользовательский опыт
Обучающие материалы и
поддержка
Основной
Аналитика данных
Основной
Основной
Дашборды и визуализация
данных
Интерфейс
Совместимость в работе с
различными браузерами
Безопасность и контроль доступа
Экспорт данных

6. Базы данных. Логическая схема.

Табличная структура описывает то, как данные
будут организованы в базе данных:
- person_types содержит информацию о типах
лиц (физическое/юридическое лицо);
- transaction_types содержит информацию о
типах транзакций;
- transaction_statuses содержит информацию
о статусах транзакций;
- categories содержит информацию о категориях
транзакций;
- transactions - основная таблица, которая
хранит информацию об операциях;
- users содержит информацию о пользователях
системы.

7. Базы данных. ER-диаграмма.

Графическое представление нашей БД, отражающее сущности, их атрибуты и связи между ними:

8. Архитектура проекта

Архитектура приложения построена на основе
клиент-серверной модели и включает в себя:
1. Клиентская часть (технологии: HTML, CSS, JavaScript)
- Интерфейс пользователя для взаимодействия с приложением
- Реализация аутентификации с использованием JSON Web Tokens (JWT)
для безопасного доступа к API
- Динамическое обновление страницы с использованием AJAX для улучшения
пользовательского опыта
2. Серверная часть (технология: Java HTTP Server)
- Обработка HTTP-запросов от клиента.
- Реализация логики бизнес-процессов и взаимодействия с базой данных
- Генерация и отправка ответов клиенту в формате JSON
- Документация API с использованием Swagger для упрощения интеграции и тестирования
3. База данных (система управления базами данных: PostgreSQL)
- Хранение информации о пользователях, транзакциях, категориях и типах транзакций
- Обеспечение целостности данных и выполнение запросов к базе данных
- Поддержка сложных запросов для генерации отчетов и аналитики
4. Логирование (библиотеки: SLF4J, Logback)
- Логирование действий пользователей и системных событий для мониторинга и отладки
5. Экспорт данных
- Генерация отчетов и экспорт данных в форматах PDF и Excel для удобства
анализа и хранения

9. Прототипы интерфейсов (Wireframes)

Для визуализации структуры и функционирования разработаны следующие прототипы интерфейсов:
Для новых пользователей – регистрация
и вход в систему
Для зарегистрированных пользователей – вход в систему,
отображение экрана главной страницы
Меню с выбором действий
Создание новой операции и просмотр
уже имеющихся транзакций

10. Прототипы интерфейсов (Wireframes)

Просмотр транзакций пользователя
Поиск транзакций по различным
критериям фильтрации
Редактирование и удаление
финансовых операций
Выбор формы отчета для
просмотра данных и визуализации

11. Прототипы интерфейсов (Wireframes)

Дашборды по видам отчета

12. Пользовательское взаимодействие

Примеры взаимодействия пользователя и приложения, где user stories - функционирование приложения в целом с
точки зрения конечного пользователя, а use cases - взаимодействие с системой для выполнения конкретных задач:

13. Пользовательское взаимодействие

14. Пользовательское взаимодействие

15. Пользовательское взаимодействие

16. Описание логики выполнения бизнес-процессов. BPMN.

Условные обозначения:
- события - круги, которые представляют начало или окончание процесса;
- действия (или задачи) - прямоугольники, которые представляют действия, выполняемые в процессе;
- сетевые соединения - стрелки, которые показывают направление потока процесса;
- условия - ромбы, которые представляют решения или условия, влияющие на поток процесса.

17. Проведение пользовательского тестирования

Целями пользовательского тестирования являются:
- проверка функциональности нашего приложения по управлению финансами
- выявление ошибок и несоответствий требованиям
- оценка пользовательского интерфейса и удобства использования
Среда тестирования:
Операционная система: Windows 10
Браузер: Yandex, Microsoft Edge, Google Chrome
Методология тестирования:
- ручное тестирование с использованием тест-кейсов
- тестирование функциональности, производительности
и безопасности приложения

18. Проведение пользовательского тестирования

19. Проведение пользовательского тестирования

Итоги тестирования:
Тестирование проведено успешно.
Приложение работает корректно.

20. Техническая документация

Краткий обзор ключевых аспектов технической документации:
1. Введение
1.1 Общее описание и назначение
Система "Финансовый мониторинг" — это веб-приложение, разработанное для индивидуальных пользователей и малых предприятий,
которое позволяет эффективно управлять личными и бизнес-финансами. Приложение предоставляет пользователям инструменты для
отслеживания доходов и расходов, анализа финансовых данных и генерации отчетов.
1.2 Целевая аудитория
Индивидуальные предприниматели, малые и средние предприятия, фрилансеры, частные лица
1.3 Основные функции системы
• Управление транзакциями
• Аналитика и отчеты
• Аутентификация и безопасность
• Экспорт данных
2. Архитектура системы
2.1 Описание архитектуры приложения
Архитектура приложения построена на основе клиент-серверной модели и включает в себя:
1. Клиентская часть (HTML, CSS, JavaScript, аутентификация - JWT)
2. Серверная часть (Java HTTP Server)
3. База данных (PostgreSQL)
4. Логирование (SLF4J, Logback)
5. Экспорт данных

21. Техническая документация

3. Технологии
Языки программирования: Java, JavaScript
Базы данных: PostgreSQL
Технологии фронтенда: HTML, CSS, React: JavaScript
Инструменты разработки: IDE, Git, Maven
Безопасность: JWT
Аналитика и отчетность: Chart.js , JQuery
Контейнеризация: Docker
4. Системные требования
4.1 Аппаратные требования:
Процессор: минимум 2 ГГц (двухъядерный)
Оперативная память: минимум 4 ГБ (рекомендуется 8 ГБ)
Свободное место на диске: минимум 500 МБ для установки приложения и базы данных
4.2 Программные требования:
Операционная система:
Windows 10 или новее
macOS 10.14 или новее
Linux (с поддержкой Java, такие как Ubuntu, CentOS и др.)
Серверное ПО: Java Runtime Environment (JRE) 11 или новее.
База данных: PostgreSQL 12 или новее, или другая поддерживаемая СУБД.
4.3 Браузеры
Поддержка последних версий: Google Chrome, Mozilla Firefox, Safari, Microsoft Edge, Яндекс

22. Техническая документация

5. Сборка и запуск приложения
5.1 Установка и запуск
Сборка приложения
- Откройте терминал
- Перейдите в директорию проекта
- Выполните команду для сборки приложения:
mvn package -DskipTests
- Эта команда соберет проект, пропуская тесты
5.2 Запуск приложения
После успешной сборки выполните команду для запуска
приложения: java -jar target/app.jar
Теперь приложение запущено и готово к использованию.
5.3 Запуск с помощью Docker
Если вы предпочитаете использовать Docker для запуска
приложения, выполните следующие шаги:
- Убедитесь, что Docker установлен и запущен
- Откройте терминал и перейдите в директорию проекта
- Выполните команду: docker compose up --build -d
Эта команда создаст и запустит контейнеры, включая базу
данных.
5.4 Настройка базы данных
После запуска контейнера база данных finance_db будет
автоматически создана.
Для доступа к базе данных используйте pgAdmin:
- Откройте браузер и перейдите по адресу:
http://localhost:5050
- Создайте новый сервер с следующими параметрами:
Имя сервера: Finance Monitoring
Хост: pg_db
Порт: 5432
Имя базы данных: finance_db
Пользователь: admin
Пароль: admin
5.5 Использование приложения
После успешного запуска приложения
вы сможете:
- Создавать и управлять финансовыми
операциями
- Просматривать свои данные
- Настраивать категории и типы
финансовых операций

23. Ссылки на проект и материалы

GitHub – https://github.com/Jezza010/finance-monitoring
Видео питча –
Материалы –

24. Спасибо за внимание!

Команда хакатона № 10