🚀finances🚀

🚧⚠️ Aplicação em fase de testes ⚠️🚧

Sumário

• Sobre a aplicação
• Guia rápido para executar o projeto
• Guia rápido de uso da aplicação
  • Tela inicial (Home)
  • Navegação
  • Categorias
  • Contas e cartões
  • Operações
  • Análises e Gráficos
  • Tela inicial com algumas operações cadastradas
  • Configurações
• Tecnologias utilizadas na aplicação
• Considerações finais
• Créditos

💡 Sobre a aplicação

Finances é um aplicativo de gerenciamento de contas onde o foco é simplificar a forma como você monta a sua planilha financeira de gastos. A ideia aqui é manter o usuário sempre informado do quanto gastou e quanto há entre seus gastos e ganhos.

O projeto foi desenvolvido com base em um protótipo que fiz no figma algumas semanas antes de iniciar o desenvolvimento. Alguns componentes da aplicação foram adaptados entre o protótipo e a versão final da aplicação, no entanto a ideia e usabilidade não foram afetadas com as mudanças.

💎 Protótipo no figma

🧪 Guia rápido para executar o projeto

Para iniciar o projeto, primeiro certifique-se de ter um ambiente android/IOS configurado em sua máquina ou um aparelho que possa ser usado via cabo.

Para o desenvolvimento desse projeto utilizei a última versão do Android Studio e segui o passo à passo do guia de instalação do mesmo, que você pode encontrar aqui:

📱 Android Studio

Tenha instalado node e de preferência tenha também o yarn (pois o projeto conta com yarn.lock).

Clone este repositório usando o comando:

git clone https://github.com/Jordaobm/finances.git

Instale as dependências necessárias usando o comando:

yarn || npm i

Para iniciar o projeto, execute:

yarn android || npm run android

O projeto conta com implementação de testes em seus componentes, para atualizar os testes, execute:

yarn coverage

Esse comando irá atualizar os testes e gerar um novo arquivo de coverage que pode ser encontrado na raiz do projeto em ./coverage. Caso queira ver a porcentagem de abragência dos testes, basta entrar na pasta ./coverage/lcov-report e abrir o arquivo index.html em seu navegador.

📝 Guia rápido de uso da aplicação

Para usar a aplicação (ainda em fase de testes), disponibilizei um APK (Android Package) dentro de src/assets/document com o nome de finances.apk. Ele pode ser facilmente instalado em celulares e emuladores Android e representa uma versão de testes da aplicação.

🔨 Versão de testes (APK) da aplicação

Tela inicial (Home)

Ao acessar a aplicação pela primeira vez, o usuário será levado à tela inicial (Home)

Na tela inicial (Home), serão exibidas informações como:

• Data atual
• Período de datas que serão listadas as operações
• Valor total das operações de entrada no período selecionado
• Valor total das operações de saída no período selecionado
• Valor total entre as operações de entrada e as operações de saída no período selecionado
• Quando houver operações de saída, a tela mostrará um gráfico das operações de saída agrupadas por categoria

Navegação

Na barra de navegação da aplicação, ordenados da esquerda para direita temos as seguintes rotas:

• Categorias
• Cartões
• Tela Inicial (Home)
• Operações
• Análises e gráficos

Categorias

Dentro da aplicação as operações serão categorizadas e cada qual terá sua especificação. As categorias são uma forma de agruparmos os gastos e os ganhos em conjuntos semelhantes para que a aplicação possa apresentar gráficos relevantes sobre as operações.

⚠️ Atenção: É necessário ter uma categoria cadastrada para então cadastrar uma operação... (Todas as operações devem estar relacionadas à uma categoria).

Para acessar as categorias, basta clicar no primeiro ícone (da esquerda para a direita) na barra de navegação.

Na tela de categorias serão exibidas informações como :

• Categorias cadastradas

Contas e cartões

Contas e cartões são a forma mais prática de armazenar dinheiro atualmente. Contas virtuais ou cartões geralmente são usados e têm seu espaço especial dentro da aplicação. Não se preocupe, nenhuma informação sensível é usada por aqui. Contas e cartões, dentro da aplicação, servem somente para dizer o quanto você tem em cada um deles, como uma forma de controlar e saber exatamente quanto você possuí disponível.

Para acessar os Contas e cartões, basta clicar no segundo ícone (da esquerda para a direita) na barra de navegação.

Na tela de cartões serão exibidas informações como:

• Carrosel horizontal que apresentará todos os cartões do usuário
• Cada cartão (quando selecionado) exibirá as operações relacionadas à ele
• Por padrão a aplicação traz a uma carteira previamente cadastrada. Essa carteira deve ser usada pelo usuário para representar o dinheiro que ele possuí em mãos mesmo (dinheiro físico)

Operações

Operações são operações 😅. Operação é o nome que atribuí, dentro da aplicação, para todo o tipo de entrada/saída/transferência que existe na aplicação. Operações são o núcleo de toda a aplicação. O usuário poderá inserir operações com nome, valor, categoria à qual ela pertence, data em que a operação ocorreu e à qual carteira/conta/cartão está vinculada.

Para acessar as operações, basta clicar no quarto ícone (da esquerda para a direita) na barra de navegação.

Na tela de operações serão exibidas informações como:

• Filtro de operações
• Lista das operações filtradas

Análises e Gráficos

Análises e gráficos terão como objetivo conscientizar o usuário de seus maiores gastos, os destaques do mês e indiciar o vilão de seu orçamento.

Para acessar as operações, basta clicar no quinto ícone (da esquerda para a direita) na barra de navegação.

Na tela de Análises e Gráficos serão exibidas informações como:

• Gráficos comparativos e demonstrativos dos gastos agrupados por categoria e a listagem das categorias com seus valores
• Gráficos comparativos e demonstrativos dos gastos por cartão/carteira/conta

Tela inicial com algumas operações cadastradas

Aqui temos um demonstrativo de como fica a listagem de operações na tela inicial da aplicação.

Configurações

Na tela de configurações o usuário poderá escolher o período que deseja utilizar para listar suas operações e realizar os cálculos dos gráficos das demais áreas da aplicação.

Para acessar as operações, basta clicar no ícone de engrenagem presente na tela inicial da aplicação no canto superior direito.

A tela de configurações conta também com uma funcionalidade de importação / exportação de dados:

Como funciona o backup ❓❔

❤️ Exportar dados

Para exportar os dados da aplicação, clique em exportar dados. A aplicação irá gerar um arquivo .json com todos os dados cadastrados pelo usuário até então. Esse arquivo ficará salvo em Android/Download. Por padrão a aplicação irá realizar a ação de buscar dados assim que finalizar a exportação, mostrando ao usuário que o arquivo foi criado e já pode ser importado.

💚 Buscar dados

Ao clicar em buscar dados, a aplicação fará uma varredura pela pastaAndroid/Download em, busca de arquivos de backup e listará os arquivos que encontrar logo abaixo.

✅ Para importar os dados, basta clicar em cima do nome do arquivo que deseja importar e será exibido ao usuário um modal de confirmação da importação, caso prossiga com a importação a aplicação fará a importação e recarregará os dados da sessão.

❌ Para excluir um arquivo de backup basta clicar no ícone em vermelho que aparecerá na listagem ao lado direito do nome do arquivo. A aplicação exibirá um modal de confirmação da exclusão e caso o usuário prossiga a exclusão será executada. Assim que a exclusão for finalizada, a ação de buscar dados será disparada, listando os arquivos novamente, mostrando ao usuário que o arquivo foi excluído.

🛠 Tecnologias utilizadas na aplicação

• @react-native-picker/picker: ^2.1.0
• @react-navigation/native: ^6.0.2
• @react-navigation/native-stack: ^6.1.0
• @types/react-native-autocomplete-input: ^5.0.0
• @types/react-native-snap-carousel: ^3.8.4
• @types/react-native-svg-charts: ^5.0.9
• date-fns: ^2.23.0
• jest-coverage-badges: ^1.1.2
• react: 17.0.2
• react-native: 0.65.1
• react-native-autocomplete-input: ^5.0.2
• react-native-draggable: ^3.3.0
• react-native-fs: ^2.18.0
• react-native-linear-gradient: ^2.5.6
• react-native-masked-text: ^1.13.0
• react-native-picker-select: ^8.0.4
• react-native-safe-area-context: ^3.3.2
• react-native-screens: ^3.7.1
• react-native-snap-carousel: ^3.9.1
• react-native-splash-screen: ^3.2.0
• react-native-svg-charts: ^5.4.0
• react-native-svg: ^12.1.1
• react-native-svg-icon: ^0.10.0
• react-native-toast-message: ^1.6.0
• realm: ^10.8.0
• styled-components: ^5.3.1

👷 Considerações finais

A aplicação é fruto de um estudo e conhecimento acerca de aplicações offline-first. Essa foi minha primeira aplicação utilizando este conceito aliado ao RealmDB (banco não-relacional offline).

🗄 RealmDB

Pude aprender muito sobre o Realm e sobre o conceito com a construção dessa aplicação, além de construir uma aplicação que vai me auxiliar no dia-a-dia à manter as contas em dia e o controle total de meus ganhos e gastos.

👨‍🎓 Créditos

Durante o desenvolvimento do protótipo do projeto e da aplicação como um todo, utilizei imagens, ícones, Svgs e vetores encontrados na internet disponíveis gratuitamente pelos sites:

• Icones utilizados - Figma
• Icones utilizados - Flaticon
• Negócio vetor criado por vectorpouch - br.freepik.com
• Gold vector created by macrovector - w