oPomodoro

Aplicacao Pomodoro feita com Angular 16 que combina controle de tempo com gerenciamento simples de metas armazenadas no navegador.

Visao geral

• Ciclo completo de Pomodoro com modos Trabalho, Pausa curta e Pausa longa.
• Controles de iniciar, pausar, reiniciar e pular o cronometro com feedback sonoro.
• Lista de metas com contagem de atos concluidos, edicao inline e filtro de concluido.
• Persistencia local usando localStorage, o que preserva dados mesmo apos recarregar.
• Interface responsiva com Tailwind CSS, icones do pacote @ng-icons e tooltips ngx-tippy.
• Empacotamento opcional em Electron para gerar uma versao desktop (Windows, macOS, Linux).

Stack principal

• Angular 16, RxJS e arquitetura baseada em servicos.
• Tailwind CSS + Tippy.js para estilizacao e dicas de interface.
• @ng-icons/bootstrap-icons para icones vetoriais.
• LocalStorage do navegador para dados de metas e Web Audio API basica para sons.
• Electron 27 para empacotar a aplicacao web em um executavel desktop.

Requisitos

• Node.js 16.14 ou superior (18 LTS recomendado).
• npm 8 ou superior.

Instalar dependencias

npm install

Executar em ambiente web de desenvolvimento

npm run start

O script executa ng serve e ng test em paralelo. Caso deseje apenas o servidor web, execute:

npx ng serve

O aplicativo ficara disponivel em http://localhost:4200/ com recarga automatica ao salvar arquivos.

Testes

npm test

Executa os testes unitarios via Karma + Jasmine em modo watch. Para um unico disparo use ng test --watch=false.

Build de producao

npm run build

Os arquivos otimizados sao gerados em dist/o-pomodoro/.

Versao desktop (Electron)

npm run electron

O comando realiza o build Angular e abre a janela Electron apontando para os arquivos de producao. O icone padrao esta em src/assets/logo.png.

Estrutura principal

src/
  app/
    pages/home/          # Layout principal com cronometro e lista de metas
    services/            # Servicos reutilizaveis (timer, tipos, metas, audio)
  assets/
    sounds/              # Efeitos sonoros de clique e alarme
  styles.sass            # Importa Tailwind e estilos globais
main.js                  # Ponto de entrada do Electron

Fluxo do cronometro

• TimerService mantem o contador em segundos, controla o estado (rodando/parado) e reinicia o ciclo.
• TimerTypeService troca entre os modos Trabalho, Pausa curta e Pausa longa a cada ciclo concluido.
• CronAreaComponent exibe o tempo restante e consome atualizacoes dos servicos.
• ToggleButtonComponent alterna manualmente o tipo de timer, enquanto TimerControlComponent oferece botoes de play, pause, reset e skip.

Lista de metas

• ListControllService grava, atualiza e remove metas no localStorage, expondo um Subject para que a interface reaja em tempo real.
• AddUpdateGoalItemComponent cria novas metas ou edita existentes, incluindo contagem de atos necessarios.
• GoalItemComponent alterna o estado de conclusao e aciona a edicao inline.
• O botao flutuante em HomeComponent remove todas as metas marcadas como concluidas.

Sons

Os sons de clique (click1-4.wav) e o alarme (ClockOver.wav) estao em src/assets/sounds/ e sao reproduzidos pelo AudioService para reforcar interacoes e avisar o fim de cada ciclo.

Observacoes e ideias futuras

• Os rotulos dos botoes em ToggleButtonComponent apresentam caracteres estranhos; revisar a codificacao do arquivo HTML pode corrigir o texto exibido.
• Validacoes de formulario podem ser expandidas (ex.: limitar numeros negativos ou zerados para atos).
• Considere adicionar notificacoes do sistema ou integracao com a API de Vibration para navegadores suportados.