Projeto simples que tem como objetivo o controle das suas despesas de forma organizada!
- Typescript
- Adição de despesas/receitas;
- Alteração dinâmica de saldo atual;
- Alteração dinâmica das despesas/receitas;
- Botões para visualizar despesas;
- Armazenamento de dados no localStorage;
Este é um projeto cujo o template foi disponibilizado pelo Roger Melo como forma de exercício javascript. Porém, por mais que seja um exercício focado mais na lógica do que na linguagem em si, aproveitei para usa-lo como meio para treinar o TypeScript.
A princípio eu apenas peguei o template do projeto e tentei fazer seguindo a propósta do exercício.
Por mais que eu tenha conseguido fazer o código de primeira, confesso que demorei mais do que gostaria e senti que ele ficou um pouco confuso. Então para o segundo round, decidi dar uma espiadinha em qual lógica o Roger tinha seguido...
... E lá estava ela! A linha que mudou tudo.
let globalTransactions :Array<transaction> = JSON.parse(localStorage.getItem('transactions')!) || [];Minha maior dificuldade inicialmente tinha sido em relação a como guardar as variáveis no localStorage. A princípio, toda vez que eu precisasse atualizar o localStorage, eu colocava os valores em uma variavel local, alterava conforme preciso, e salvava novamente.
Porém, por mais que meu código original tenha ficado do mesmo tamanho que o do Roger, eu senti que isso era algo trabalhoso de ficar fazendo o tempo todo.A sacada do roger foi criar uma variavel global que recebia o valor do localStorage, e sempre que precisasse alterar esse valor, ele chamava essa variavel e depois atribuia o valor dela no localStorage novamente, mantendo assim ela sempre atualizada.
Para não ser injusto, confesso que também tiveram algumas outras sacadas que foram bastante inteligentes. Como, por exemplo, o fato de que antes eu usava 4 variaveis no localStorage para armazenar os meus dados.
Uma para cada informação na tela. Mas isso não era muito confiável considerando que eu poderia alterar o valor do saldo sem afetar a receita ou as despesas. Já na segunda versão, invés de ter 4 variaveis, existe apenas uma onde ficam guardados os dados das transações e esses dados são usados para calcular todos as outras informações necessárias na tela.
Olhando para trás agora, por mais que a princípio eu tenha feito várias variaveis para que não precisasse recalcular todos os valores todas as vezes que houvesse uma atualização eu não acho que isso teria realmente alguma significância que vá gerar um real problema quesito desempenho.
E finalmente chegamos ao fim 😁!. Espero que se tenha lido tudo, tenha gostado e conseguido entender tudo o que eu tinha em mente.
Como eu disse antes, por mais que eu tenha levado amis tempo que o esperado no projeto (e muito, muito mais tempo na documentação), eu me diverti bastante e não me arrependo nem um pouquinho! Seguirei fazendo mais alguns projetos do Roger e nas próximas vezes não vai ter pra ninguém 😎
Felipe Fuckner Clariano
Entre em contato! 💌
