6.0 KiB
6.0 KiB
Mobile — SwiftUI
Etapa 01 - Contexto e Objetivos
O objetivo é criar uma base mínima para um aplicativo de pedidos com autenticação via login, cadastro e código OTP.
Etapa 02 — Esqueleto do Projeto e Views
- Criar projeto SwiftUI.
- Criar NavigationStack e views LoginView, RegistrationView e OtpView.
- Navegar entre telas.
Etapa 03 — LoginView
- Logo e título "Boas-vindas!".
- Descrição "Entre para continuar seu pedido.".
- Inputs para e-mail e telefone.
- Botão "Receber Código".
- Link "Crie sua conta".
Etapa 04 — RegistrationView
- Título "Crie sua conta".
- Descrição "Preencha os dados abaixo...".
- Inputs nome, e-mail e telefone.
- Termos com switch.
- Botão "Cadastrar e Receber Código".
- Link "Já tem uma conta? Entrar".
Etapa 05 — OtpView
- Título "OTP".
- Texto "Enviado para ".
- Inputs para código OTP.
- Botão para enviar código.
- Ação "Reenviar código".
Etapa 06 — View Models
- Criar view models para cada view.
- Validar campos básicos.
- Gerenciar estados de loading e erros.
Etapa 07 — Validações e Máscaras
- Validar e-mail válido.
- Máscara para telefone.
- Limitar número de dígitos do OTP.
Etapa 08 — Estados e Feedbacks
- Mostrar loading no botão.
- Desabilitar botão se inválido.
- Feedback de erros inline.
Etapa 09 — Acessibilidade
- Labels claros.
- Áreas de toque adequadas.
- Suporte a Dynamic Type.
Etapa 10 — Dark Mode
- Cores adaptadas para modo escuro.
- Testar contrastes e legibilidade.
Etapa 11 — Ajustes de UI (referencias)
- Espaçamentos consistentes.
- Tipografia alinhada ao design system.
- Botões com padding padrão.
- Estados visuais claros.
Etapa 11 — Checklist de Refinamento (Autenticação)
Itens Globais
- Espaçamentos consistentes (8 / 16 / 24) entre títulos, descrições, inputs e botões.
- Cores alinhadas ao design system (backgroundLight/dark, textPrimary, primary para links/CTAs).
- Tipografia: heading1 para títulos, body para textos e labels, botão usando componente padrão.
- Estados: carregamento, desabilitado (opacidade), erro/validação inline quando necessário.
- Acessibilidade: áreas de toque ≥ 44x44, labels claros, suporte a tamanhos dinâmicos de fonte.
Login (LoginView)
- Respiro após logo (≥ 16pt) e título “Boas‑vindas!” com heading1.
- Descrição “Entre para continuar seu pedido.” com cor secundária e bom contraste no dark mode.
- Inputs “E‑mail” e “Telefone” com
LoginFieldpadronizado; autocapitalization off (ok). - (Opcional) Validação leve: e‑mail válido e telefone numérico/máscara.
- CTA “Receber Código” com padding horizontal 24 e top 8–16; estado desabilitado se necessário.
- Texto de ajuda centralizado com padding horizontal 40.
- Link “Crie sua conta” com espaçamento 8–16 do texto anterior.
Cadastro (RegistrationView)
- Título “Crie sua conta” com heading1.
- Descrição “Preencha os dados abaixo...” com body, padding top 8 e bottom 20 (ok).
- Inputs: Nome, E‑mail, Telefone com labels; ajustar keyboardType para e‑mail/telefone.
- Termos: frase contínua sem quebras estranhas; links “Termos de Uso” e “Política de Privacidade” em primary.
- Switch dos termos posicionado à direita (ok).
- CTA “Cadastrar e Receber Código” desabilitado até Nome/E‑mail/Telefone preenchidos e switch ativado (ok); opacidade 0.5 quando desabilitado.
- Bloco “Já tem uma conta? Entrar” com espaçamento superior 16 (ok).
- Verificar contraste dos inputs e textos em dark mode.
OTP (OtpView)
- Título “OTP” com heading1 e texto “Enviado para ”.
- Inputs para 6–8 dígitos (conforme definição final); foco automático no primeiro campo.
- CTA desabilitado até todos os dígitos preenchidos.
- Ação “Reenviar código” com timeout/contador.
- Estados de erro (código inválido/expirado) e mensagens claras.
Decisões em Aberto
- Termos/Privacidade: navegação interna (views com conteúdo) ou URLs externas (Link/SFSafariView)?
- Validações: mínima (campos preenchidos) ou reforçada (formato + mensagens inline)?
- Máscara de telefone: aplicar padrão BR (ex.: (11) 98888‑7777)?
- Dark mode: paleta de cinzas/texto secundário para contraste ideal.
Progresso — Etapa 11 (Autenticação)
Data de atualização: 2026-02-05
Itens Globais
- Espaçamentos consistentes básicos nas telas de Login e Cadastro.
- Cores e tipografia aplicadas via AppColors/AppTypography.
- Revisão completa de dark mode (contraste de textos secundários).
- Estados de carregamento e mensagens de erro padronizados.
Login (LoginView)
- Estrutura com logo, título e descrição.
- Inputs padronizados (LoginField) para e‑mail e telefone.
- Validação leve (formato de e‑mail/telefone) e mensagens inline.
- Estado desabilitado do CTA quando inputs vazios (opcional nesta etapa).
Cadastro (RegistrationView)
- Título e descrição com espaçamentos ajustados.
- Inputs com labels e
LoginField. - Termos com texto contínuo; links para “Termos de Uso” e “Política de Privacidade”.
- Switch dos termos à direita.
- CTA desabilitado até Nome/E‑mail/Telefone preenchidos e switch ativado.
- Espaçamento superior 16 no bloco “Já tem uma conta? Entrar”.
- Ajustar keyboardType para e‑mail/telefone e (opcional) máscara BR.
OTP (OtpView)
- Estrutura básica com título e indicação de e‑mail.
- Campos de dígitos (6–8) com foco e validação.
- CTA desabilitado até preenchimento completo.
- Reenvio de código com contador.
Decisões em Aberto
- Termos/Privacidade: interno vs. URL externa.
- Validações: mínima vs. reforçada (com mensagens inline).
- Máscara de telefone: padrão BR.
- Dark mode: paleta de cinzas/texto secundário.