АННОТАЦИЯ 3
Перечень условных обозначений, символов, сокращений, терминов 5
Введение 6
1 Анализ требований 7
1.1 Ролевая модель 7
1.2 Функциональные требования 7
1.2.1 Взаимодействие с организацией 7
1.2.2 Подключение интеграций 8
1.2.3 История транзакций 9
1.2.4 Отчеты дашборда 9
1.2.5 Отчет о ликвидности 13
1.2.6 Финансовый прогноз 15
1.2.7 Уведомления 17
1.2.8 Чат-бот 18
1.2.9 Требования к переопределению доступного баланса 19
1.2.10 Требования к процессу формирования отчета 19
1.2.11 Требования к обработке дат 20
1.3 Нефункциональные требования 21
1.4 Структура данных 21
1.5 Требования к технологиям разработки 22
2 Используемые технологии 23
2.1 React.js 23
2.2 Next.js 23
2.3 Vercel 24
2.4 GraphQL 25
2.5 Hasura 25
2.6 Nextjs-auth0 26
3 Проектирование клиентской части веб-приложения 27
3.1 Общая архитектура приложения 27
3.2 Особенности использования Next.js 28
3.3 Взаимодействие с серверной частью веб-приложения 28
3.3.1 Определение структуры взаимодействия 28
4 Разработка и тестирование 30
4.1.1 Общий процесс получения данных 30
4.1.2 Общий процесс изменения данных 31
4.2 Структура разрабатываемой части приложения 31
4.3 Использование API сервисов 32
4.4 Структура глобального хранилища 33
4.5 Разработка компонентов пользовательского интерфейса 34
4.5.1 Создание UI-kit 34
4.5.2 Комплексные элементы внешних библиотек 36
4.6 Интеграции 37
4.6.1 Процесс подключения 37
4.6.1 Предложение подключить банковские счета 38
4.6.2 Обработка изменения статусов и количества интеграци 39
4.6.3 Оповещение пользователя о статусах интеграций 40
4.6.4 Создание банковских счетов вручную 41
4.6.5 Редактирование данных о банковских счетах 41
4.7 Разработка модуля Дашборд 44
4.7.1 Структура модуля 44
4.7.2 Сетка дашборда 45
4.7.3 Список доступных отчетов 46
4.7.4 Применение настроек отчета 46
4.7.5 Шаблоны отчетов 48
4.7.6 Общий алгоритм получения значений 49
4.7.7 Переопределение доступного баланса 50
4.7.8 Дополнение данных транзакций 51
4.7.9 Оптимизации формирования отчетов 52
4.7.10 Оптимизация интерфейса 54
4.8 Тестирование 55
4.9 Измерение метрик производительности 56
4.9.1 Аналитика Lighthouse 56
4.9.2 Аналитика Vercel 57
Заключение 59
Список использованных источников и литературы 60
В современном мире грамотное управление финансами становится ключевым фактором успеха бизнеса. Стремясь оптимизировать свои операции и повысить эффективность, компании все больше полагаются на аналитические инструменты, которые помогают принимать обоснованные решения, выявлять тенденции и проблемные зоны, прогнозировать будущие результаты и улучшать общую финансовую устойчивость, избавляя от необходимости ручного ведения отчетов.
На рынке Соединенных Штатов Америки такие приложения уже существуют, но их целевой аудиторией являются крупные компании с доходом свыше 500 млн долларов в год, и зачастую они оказываются финансово недоступными для малых и средних предприятий. Компания Balance Cash Management Inc. приняла решение создать подобное приложение для среднего бизнеса, поставив перед собой следующие цели:
• создание централизованного источника данных о банковских счетах разных финансовых учреждений;
• предоставление настраиваемых отчетов по финансовым показателям;
• информирование при наступлении определенных пользователем событий;
• предоставление чат-бота, обрабатывающего банковские данные;
• предоставление инструментов для планирования финансовых операций.
Целью данной работы стала разработка клиентской части веб-приложения BalanceCash. Для достижения этой цели необходимо:
• проанализировать требования к клиентской части;
• спроектировать клиентскую часть приложения;
• разработать клиентскую часть приложения
В ходе работы нал проектом были выявлены и проанализированы требования, предъявляемые к клиентской стороне веб-приложения. Стоит отметить, что работа над данным стартапом предполагала регулярное изменение пожеланий к возможностям системы в связи с необходимостью удовлетворения потребностей инвесторов и потенциальных пользователей. На основе получаемых данных были спроектированы и разработаны все необходимые приложению модули.
При расширении функционала важно было поддерживать корректную работу существующего кода, что требовало написания UI, модульных и интеграционных тестов с целью своевременного обнаружения изменений поведения.
По мере привлечения более крупных клиентов, имеющих несколько сотен банковских счетов и десятки тысяч транзакций по ним, необходимой частью работ стала оптимизация кода для сокращения времени ожидания загрузки элементов интерфейса и улучшения пользовательского опыта в целом.
На данный момент приложение введено в эксплуатацию (доступно по адресу https://balancecash.io) и имеет более 100 зарегистрированных организаций от 14 постоянных компаний-клиентов. Планируется привлечение новых пользователей и введение новых возможностей - например, совместной работы над редактированием отчетов, интеграций с новыми банками и опции «Поделиться» для отдельных элементов интерфейса без необходимости получателя становиться частью организации для просмотра элемента.
