Recentemente eu comecei a criar, por conta própria, ferramentas que eu sinto falta ou que vão me ajudar no dia a dia da forma mais rápida e prática possível, foi assim da última vez quando fiz o simpletodo.online e postei aqui também. Ser programador nos dá esse super poder de criar coisas. E as vezes eu estou de saco cheio de procurar algo por aí (mesmo sabendo que existem vários) e então eu me dou 01 dia para criar uma solução do jeito que eu gostaria que fosse. Desta vez eu precisava gerir a quantidade de água ingerida no dia, e então nasceu o hidratei.online . E agora eu quero compartilhar com vocês como foi o processo disso, vamos lá.

Neste post eu gostaria de compartilhar com vocês qual foi o meu processo de criação, como eu inicio um novo projeto, organizo as ideias, etc. Até porque o prazo é muito curto, 01 dia! Vamos lá!

1 - Qual "problema" eu quero resolver?

Beber mais água.

Parece bem simples né, mas esta resposta é muito importante, pois a gente acaba se perdendo enquanto desenvolve e esquece o real motivo do pq você está fazendo aquilo. Por isso quanto mais direto e isolado for o seu problema melhor.

Eu sou um cara que simplesmente esquece de beber água. As vezes quando chega a noite e eu estou morrendo de dor de cabeça, por ter ficado o dia inteiro no computador, eu lembro que eu não tinha bebido um copo de água até então 😲 Eu sei, é um absurdo. Eu já tentei várias vezes comprar garrafinha, deixar copo do lado e nada. Então o hidratei.online me ajudou com isso e eu já vou mostrar o como agora.

2 - Como eu pretendo resolver?

Disponibilizando uma ferramenta online para cadastrar e acompanhar o nível de progresso de ingestão de água de acordo com a meta do usuário.
Progresso em porcentagem e mensagens motivacionais em cada etapa do percurso. Incentivando o usuário a querer bater a meta.
Gameficação: score incremental para cada dia que ele bater a meta (com direito a confetes e tudo mais). Caso não atinja a meta em algum dia, o score é zerado, incentivando o usuário a atingir a meta todos os dias.

❓ Curiosidade: Uma coisa interessante até aqui, olha que legal, eu falei qual o problema e como eu quero resolver. Os itens de como eu quero resolver está diretamente ligado aos problemas, Por exemplo, eu não preciso pensar aqui em tema light/dark (mesmo a aplicação possuindo) pois isso não influencia em nada na resolução do meu problema 🙂

3 - Onde?

Aqui é mais uma resposta bem simples.

Nos computadores, tablets e dispositivos móveis através de navegadores de internet, utilizando uma aplicação web.
Salvando os dados no LocalStorage do navegador do usuário, evitando Login/Senha.

Show!

Depois de definir bem esses 03 pontos eu vou fazer o que finalmente???? Não, não vou codar, eu vou definir os requisitos! Isso mesmo, começando pelos requisitos funcionais, saca só:

Requisitos Funcionais

Deve ser possível adicionar o consumo de água ingerida, em ml.
Deve ser possível editar a meta de consumo de água.
Deve ser possível limpar o consumo de água ingerida no dia.
Deve ser possível visualizar um progresso em porcentagem de cumprimento da meta.
Deve ser possível visualizar, em ml, a quantidade de água ingerida até o momento.

Bem simples não é mesmo? Isso é basicamente o que a aplicação precisa para existir. Sem alguma delas a aplicação não deve funcionar.

Requisitos Não Funcionais

SPA desenvolvida em React com Typescript
LocalStorage como local de armazenamento e persistência dos dados
Vercel como hospedagem

Bem simples também não é mesmo? Mas listando de fato estes dados agora eu sei como eu preciso desenvolver e para qual ambiente.

Agora é só codar! 😄

Codar é peculiar de cada um, mas eu tento enumerar as principais lógicas da aplicação.

Por mais que seja uma aplicação simples, tem alguns blocos de código que se a gnt não pensar antes a gnt acaba fazendo um monte de trabalho desnecessário. Eu vou tentar listar aqui qual foi minha linha lógica de raciocínio para o desenvolvimento.

Lógica da persistência dos dados

SE um usuário abrir a aplicação pela primeira vez ENTÃO um dado default deve ser criado em seu Local Storage similar a estrutura abaixo:

{
            day: new Date(),
            goal: 2000,
            consumed: 0,
            score: 0,
            reachedGoalToday: false,
          }

Ou seja, será gravado a data de hoje, 02 Litros de meta, 0 de consumo e uma informação de que ele não cumpriu a meta hoje ainda.

SE um usuário abrir a aplicação e já estiver algum dado salvo em seu Local Storage ENTÃO mostre os dados salvos.

Lógica de progresso

SE um usuário inserir um consumo que seja IGUAL ou SUPERIOR a meta ENTÃO ele cumpriu a meta e a propriedade reachedGoalToday deverá ser marcada como true.
ENQUANTO o usuário estiver progredindo, deverá ser mostradas mensagens de acordo com os níveis de progresso (de 0 a 20, de 21 a 50, de 51 a 80, 81+).
SE o cadastro do consumo for inexistente ou menor que 100ML, aborte a ação.
SE a data registrada no Local Storage for diferente da data atual ENTÃO zere o valor de "consumed”.
- Isso significa que o usuário está em um novo dia e eu não quero que ele fique limpando o consumo para começar um novo.

Lógica do Score

SE reachedGoalToday for true ENTÃO adicione +1.
- Se liga aqui. Você poderia pensar de primeira que se o usuário atingir a meta (os 100%) eu poderia somar o score e pronto não é mesmo? Não. Em nossos requisitos a gente fala que "deve ser possível” o usuário deletar o consumo. Isso significa que ele poderá cadastrar novamente, e se ele chegasse a 100% de novo o que iria acontecer? +1 no score, aí ferrou. A flag reachedGoalToday sendo marcada como true, o usuário pode atingir a meta várias vezes no mesmo dia que o score só vai aumentar 01x*.*
SE a data atual menos (-) a data registrada no Local Storage for diferente (≠) de 01 ENTÃO zere o score.
- Isso significa que ele não registrou nada ontem, ou seja não bateu a meta, ou seja zerou o score. Legal? Bora:
SE a data registrada no Local Storage for IGUAL a data atual menos (-) 01 E reachedGoalToday for false ENTÃO zere o score.
- Isso significa que ontem ele não atingiu a meta, então zere todo o score que ele já tinha e comece hoje com zero.

Agora, E SÓ AGORA, é partir pro código 😃 🚀

Não sei se vocês já tiveram essa sensação mas, as vezes programar somente por causa do trabalho e das tarefas do dia a dia do mundo corporativo me cansa. E são projetinhos assim que você pode fazer bem rapidinho e já dá aquela revitalizada, você experimenta coisas novas, aproveita para usar tecnologia da moda e treinar alguns conceitos. Pode parece um um projeto bem simples mas nele trabalhei bastante conceitos de estados da aplicação com o Context API, operações matemáticas, design, dentre outras. Com certeza deve ter bugs ou precisar de melhorias, etc. Justamente pq foi feito em 01 dia. E é justamente isso, entregar o melhor que eu puder em um prazo determinado mas principalmente entregar.

🔗 Se você ficou curioso para conhecer o projeto, ele está publicado e você pode usar à vontade através do link: https://hidratei.online

🚀 Se você quiser visualizar o código, toma: https://github.com/devalexsantos/hidratei.online

Conheça também o: https://simpletodo.online

Curiosidade: Agora eu e minha mulher estamos disputando para ver quem consegue manter o maior número de score 🤣

Larga esse comentário aí, tamo junto.

[PITCH] - hidratei.online | agora sim eu bebo água