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

1. Хакатон MIFIDEV

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

2. Команда № 10

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

3. Задача

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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. Экспорт данных (в формате csv)
6. Nginx

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

3. Технологии
Языки программирования: Java, JavaScript
Базы данных: PostgreSQL
Технологии фронтенда: HTML, CSS, JavaScript
Инструменты разработки: IDE, Git, Maven
Безопасность: JWT
Аналитика и отчетность: Chart.js, JQuery
Контейнеризация: Docker Compose
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 Требования
Убедитесь, что у вас установлены следующие компоненты:
- Java (версия 11 или выше)
- Maven (для сборки проекта)
- Docker Compose (для запуска контейнеров)
- pgAdmin (для управления базой данных)
5.2 Запуск с помощью Docker Compose
Для запуска приложения, выполните следующие шаги:
- Убедитесь, что Docker установлен и запущен.
- Откройте терминал и перейдите в директорию проекта.
- Выполните команду:
docker compose up --build -d
Эта команда создаст и запустит контейнеры, включая базу данных.
5.3 Настройка базы данных
- После запуска контейнера база данных finance_db будет
автоматически создана.
- Для подключения к базе данных используйте pgAdmin или psql,
используя пользователя postgres, пароль и базу finance_db.
5.4 Заключение
После успешного запуска приложения вы сможете:
- Создавать и управлять финансовыми операциями.
- Просматривать свои финансовые данные.
- Настраивать категории и типы финансовых операций.
Теперь приложение для управления финансами
готово к использованию!

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

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