Practice Log n Share

Setembro de 2026

@@ ++ [] [] @@ [] ++ [] ++ ++ ++ ++ @@ ++ ## ## ## [] [] [] [] [] [] [] [] []
## @@ [] [] @@ ++ [] ## @@ ++ ## [] ++ @@ ++ ++ @@ [] [] [] [] [] [] [] [] []
++ @@ ## [] ++ ## ## ## @@ ## ++ ## ## ## ++ @@ ## [] [] [] [] [] [] [] [] []
@@ ++ ## [] @@ ## @@ @@ ## ++ ++ ++ ++ ## [] ## ## [] [] [] [] [] [] [] [] []
## [] ++ @@ [] @@ @@ @@ @@ [] ## ++ ## ## @@ ++ [] [] [] [] [] [] [] [] [] []
++ [] ## ## @@ ## @@ @@ ## @@ [] ## ++ @@ @@ ++ [] [] [] [] [] [] [] [] [] []
++ ++ @@ @@ ++ ++ [] ## ## @@ [] [] @@ [] @@ ++ [] [] [] [] [] [] [] [] [] []

Visão geral

Registrar a prática com um toque e mostrar a mesma tela ao professor na aula. Planejei e desenhei este app para iPhone para a minha própria prática de saxofone e o implementei em colaboração com IA.

Tela de registro. Uma grade de histórico aparece acima da barra de hoje (54 minutos no total) e dos cartões de categorias. A prática de peças está sendo cronometrada há mais de 27 minutos, destacada por uma cor mais clara e um contorno branco. — Registro à esquerda, compartilhamento à direita. Toque em uma categoria para cronometrar e mostre na aula o resumo da prática entre aulas. As telas usam dados fictícios para ilustração. As capturas mostram a interface original em japonês.

Tela de compartilhamento. Do dia da aula, 17 de setembro, até o dia 24: 4 horas e 38 minutos, barras por categoria e uma tabela diária com todas as categorias sem rolagem horizontal. — Registro à esquerda, compartilhamento à direita. Toque em uma categoria para cronometrar e mostre na aula o resumo da prática entre aulas. As telas usam dados fictícios para ilustração. As capturas mostram a interface original em japonês.

Atuação: Planejamento, design UX/UI e implementação (com Claude Code e Codex)
Período: Setembro de 2026
Tecnologia: React · TypeScript; Swift (WKWebView, Live Activity, StoreKit, iCloud)

Experimentar a demonstração web (inclui meus registros de prática até 20 de setembro de 2026)

Origem — “Como vai a prática?”: eu não sabia responder

Nas aulas quinzenais, responder “principalmente escalas” não explicava o que eu havia praticado nem por quanto tempo. Escrever em um diário de papel com o saxofone pendurado no pescoço era difícil, e os apps de registro de tempo que experimentei serviam para eu mesmo rever os dados.

As barras superiores mostram a prática diária; os contornos vermelhos marcam as aulas. Na aula, mostro o resumo do intervalo. Datas e tempos são fictícios; as barras superiores e inferiores têm a mesma duração total.

Registro — Com o instrumento nas mãos, um único toque

Durante a prática, só toco nos cartões de categorias. Um toque inicia o cronômetro, outro cartão muda a categoria e um novo toque no mesmo cartão para a contagem.

Um dia — Depois de cheia, a barra continua cheia

A barra de hoje fica cheia com uma hora. Depois disso, o total atual passa a definir a borda direita, para que nenhum espaço vazio reapareça em uma barra já preenchida.

Prática de hoje — 1 h 05 min

Escolhida

Descartada

Comparação com 65 minutos de prática. Acima, a opção escolhida usa o total como borda direita, com uma escala mínima de uma hora. Abaixo, a descartada amplia a escala de 60 para 90 e 120 minutos. Ao passar de uma hora, o espaço vazio reaparece apenas na barra inferior.

Acúmulo — Tudo à vista, desde o primeiro dia

Tons de verde indicam a prática; contornos vermelhos marcam as aulas. A rolagem horizontal permite voltar ao primeiro dia registrado. Priorizei consultar anos de prática em vez de reduzir o custo de renderização.

Grade do histórico. Tons de verde representam a prática de junho a setembro; contornos vermelhos marcam as aulas quinzenais. — Cinco níveis: 0 minutos, menos de 30, menos de 60, menos de 90 e 90 ou mais. Esse acúmulo é a primeira coisa que se vê ao abrir o app.

Evolução — Cartões como painel de controle da prática

Construí as telas a partir de uma especificação elaborada em diálogo com IA, testando e revisando pessoalmente várias vezes. Explorei o registro e o compartilhamento numa versão web inicial antes de implementar o app para iPhone.

Versão inicial de 9 de setembro. Seis cartões pequenos e o total de hoje, 40 minutos, ficam em áreas separadas da tela de registro. — As versões inicial e web usam os mesmos dados fictícios (seis categorias, 40 minutos hoje). O iOS 1.0 usa outros dados fictícios.

Versão web de 21 de setembro. Categoria e tempo de hoje se unem em cartões grandes; a leitura de partitura em curso, com 10 minutos, aparece destacada. — As versões inicial e web usam os mesmos dados fictícios (seis categorias, 40 minutos hoje). O iOS 1.0 usa outros dados fictícios.

Nome e tempo, juntos: Destaquei o tempo de hoje em cada cartão, ligando o que pratiquei ao tempo dedicado.
O estado atual, de relance: Clareei apenas o cartão em uso e escureci os demais.
Os controles dentro da tela: Fiz a rolagem parar onde uma fileira de cartões cabe na tela.

Na etapa final, repeti cerca de 15 vezes um ciclo: Claude Code apontava possíveis problemas, Codex verificava e corrigia, e eu decidia quais mudanças aceitar.

Sensação — Escolher como parar experimentando

Só instruções verbais não produziam a sensação de “mover suavemente e parar com precisão”. Criei com IA uma ferramenta para trocar métodos e valores na hora, comparei cinco métodos num dispositivo real e escolhi o encaixe de rolagem nativo do navegador.

Modelo de corcova

Destino projetado

Nativo proximity
Escolhida

Nativo mandatory

Sem encaixe

Posições após soltar o dedo, comparadas na mesma escala. O zero pontilhado marca o encaixe. Dos registros do dispositivo, selecionei cinco gestos por método com velocidades de 0,6–1,8 px/ms, calculadas pelas posições nos 60 ms anteriores, priorizando os mais próximos de 1,2 px/ms. Configurações, posições iniciais e direções variam entre os gestos.

Ferramenta de ajuste da rolagem. Opções para alternar entre cinco métodos e seus parâmetros ao lado de uma tela de celular para experimentar a interação. — Comparei como a rolagem parava num dispositivo real, registrando distância e velocidade. Abra a imagem para ampliar.

Como produto — Além da prática

A aparência acompanha as configurações do dispositivo. Os registros ficam no aparelho e recebem backup automático no iCloud.

Modo claro. Tela de registro. Uma grade de histórico aparece acima da barra de hoje (54 minutos no total) e dos cartões de categorias. A prática de peças está sendo cronometrada há mais de 27 minutos, destacada por uma cor mais clara e um contorno branco. — A mesma tela de registro nos modos claro e escuro.

Modo escuro. Tela de registro. Uma grade de histórico aparece acima da barra de hoje (54 minutos no total) e dos cartões de categorias. A prática de peças está sendo cronometrada há mais de 27 minutos, destacada por uma cor mais clara e um contorno branco. — A mesma tela de registro nos modos claro e escuro.

O ícone do cabeçalho pode acompanhar a prática: 47 de música, 15 de exercício, 15 de idiomas e aprendizagem, 11 de arte, 14 de criação e cotidiano, e 7 de expressão. O saxofone se baseia em Qlementine Icons (licença MIT).

Em uso — A próxima pergunta: quanto detalhe registrar

Usei o app nas práticas de manhã e mostrei a tela ao professor na aula. O retorno foi que o conteúdo da prática ficava claro de imediato e que registrar os tipos de escalas seria ainda mais útil (paráfrase). Estou considerando um nível abaixo das categorias para registrar mais detalhes sem perder a simplicidade.

Materiais

A demonstração web permite experimentar o registro e o compartilhamento. Inclui meus registros de prática até 20 de setembro de 2026; as alterações ficam salvas apenas no navegador em uso.