🚧
- Sobre a aplicação
- Guia rápido para executar o projeto
- Guia rápido de uso da aplicação
- Tecnologias utilizadas na aplicação
- Considerações finais
- Créditos
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.
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:
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.
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
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
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
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.
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 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 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 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
Aqui temos um demonstrativo de como fica a listagem de operações na tela inicial da aplicação.
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 ❓❔
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.
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.
- @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
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).
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.
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 - www.freepik.com
- Business vector created by pikisuperstar - www.freepik.com
Jordão Beghetto Massariol 🚀
Feito com ❤️ por Jordão Beghetto Massariol 👋🏽 Entre em contato!
