Como desenvolvi essa feature
- #Node.js
- #TypeScript
- #React
O que é isso?
Possuo uma aplicação de gerenciamento de projetos, que ajuda as pessoas a se organizarem separando suas tarefas por projeto. Nela você consegue ter uma visão geral do que precisa fazer no seu dia. Com o uso diário da ferramenta, percebi que seria interessante ter um registro de tempo em cada tarefa, assim eu conseguiria medir o meu tempo gasto em cada coisa que preciso fazer e ter uma noção melhor de como gerenciei meu tempo no final do mês.
Como foi Desenvolvido?
O primeiro passo foi entender exatamente o que eu precisava e como eu esperava que essa feature se comportasse na minha aplicação, então levantei os seguintes requisitos.
- Cada tarefa deve possuir seu cronômetro idependente.
- Tarefas concluídas devem possuir os dados do cronômetro, mas não pode ser possível inicia-lo
- As tarefas devem possuir um histórico de todas as vezes que o cronômetro foi registrado.
- O Cronometro não pode ser reiniciado caso o modal de tarefa ou a aplicação seja fechado.
- Caso a tarefa seja excluída, os dados do cronômetro também devem ser excluídos.
- Não deve ser possível iniciar dois cronômetros simultaneamente.
- Caso a tarefa seja concluída, o cronômetro deve ser concluído e registrado no histórico.
BackEnd
Como os dados do cronômetro são voláteis, optei por utilizar o mongoDB como banco responsável por guardar as informações. Crie um endPoint (rota) para cada etapa do cronômetro, assim eu conseguiria ter controle em tudo que acontecesse, por exemplo, quando um cronômetro é iniciado a rota 'start-stopwatch' é chamada, nela eu verifico se já existe outro cronômetro ativo e se sim, paro ele para iniciar o que foi solicitado.
Como registrei tudo em banco, foi fácil ter um histórico das tarefas, apenas precisei filtrar os registros pelo id da tarefa e mostrar em tela ;D
FrontEnd
Aqui precisei desenvolver a lógica do cronômetro de fato, para não ficar muito extenso, vou explicar por alto e deixar o repositório para caso queiram ver (e deixar uma estrelinha <3 kk).
Primeiro precisei desenvolver um cronometro funcional, que quanto startado começasse a contar, decidi usar como base as datas que o usuário clicou em iniciar e parar para comparar e ver quanto tempo se passou, assim tenho informações mais precisas.
Como ele não pode inicar sempre do 0, precisei fazer com que quando o modal de tarefa fosse aberto fosse verificado se já existia um histórico de cronometros ou ativos para fazer a soma e iniciar a partir dali.
Conclusão
Depois de todos os testes, subi a feature para produção e já pode ser utilizada por quem quiser. Se quiserem ver os repositórios os links vão estar abaixo, caso tenha despertado alguma dúvida, é só deixar comentado que logo respondo ;D
Link da Aplicação
https://www.dontforget.com.br/
Repositório FrontEnd:
https://github.com/JhonesJhonatas/dont-forget-web
Repositório BackEnd:
https://github.com/JhonesJhonatas/dont-forget-backend