8.9 KiB

Raw Permalink Blame History

Implementar a caixa de diálogo "Adicionar Transação"

Visão Geral

A sua aplicação bancária tem agora uma gestão de estado sólida e persistência de dados, mas falta-lhe uma funcionalidade crucial que as aplicações bancárias reais precisam: a capacidade de os utilizadores adicionarem as suas próprias transações. Neste exercício, irá implementar uma caixa de diálogo completa "Adicionar Transação" que se integra perfeitamente com o seu sistema de gestão de estado existente.

Este exercício junta tudo o que aprendeu nas quatro aulas de banca: templating HTML, gestão de formulários, integração com API e gestão de estado.

Objetivos de Aprendizagem

Ao completar este exercício, você irá:

Criar uma interface de diálogo amigável para introdução de dados
Implementar um design de formulário acessível com suporte a teclado e leitores de ecrã
Integrar novas funcionalidades com o seu sistema de gestão de estado existente
Praticar comunicação com API e gestão de erros
Aplicar padrões modernos de desenvolvimento web a uma funcionalidade do mundo real

Instruções

Passo 1: Botão "Adicionar Transação"

Crie um botão "Adicionar Transação" na sua página do dashboard que os utilizadores possam encontrar e aceder facilmente.

Requisitos:

Colocar o botão numa localização lógica no dashboard
Usar texto claro e orientado para ação no botão
Estilizar o botão para combinar com o design UI existente
Garantir que o botão é acessível através do teclado

Passo 2: Implementação da Caixa de Diálogo

Escolha uma destas duas abordagens para implementar a sua caixa de diálogo:

Opção A: Página Separada

Criar um novo template HTML para o formulário da transação
Adicionar uma nova rota ao seu sistema de routing
Implementar a navegação para dentro e fora da página do formulário

Opção B: Caixa de Diálogo Modal (Recomendado)

Usar JavaScript para mostrar/ocultar a caixa de diálogo sem sair do dashboard
Implementar usando a propriedade hidden ou classes CSS
Criar uma experiência de utilizador fluida com gestão correta do foco

Passo 3: Implementação de Acessibilidade

Garantir que a sua caixa de diálogo cumpre os padrões de acessibilidade para diálogos modais:

Navegação pelo Teclado:

Suportar a tecla Escape para fechar a caixa de diálogo
Fixar o foco dentro da caixa de diálogo enquanto estiver aberta
Retornar o foco ao botão de disparo quando fechada

Suporte a Leitores de Ecrã:

Adicionar etiquetas e papéis ARIA apropriados
Anunciar a abertura/fecho da caixa de diálogo aos leitores de ecrã
Fornecer etiquetas claras para os campos do formulário e mensagens de erro

Passo 4: Criação do Formulário

Desenhar um formulário HTML que recolha os dados da transação:

Campos Obrigatórios:

Data: Quando a transação ocorreu
Descrição: Para que foi a transação
Montante: Valor da transação (positivo para receitas, negativo para despesas)

Funcionalidades do Formulário:

Validar a entrada do utilizador antes do envio
Fornecer mensagens de erro claras para dados inválidos
Incluir texto de espaço reservado útil e etiquetas
Estilizar de forma consistente com o design existente

Passo 5: Integração com API

Ligar o seu formulário à API do backend:

Passos de Implementação:

Rever as especificações da API do servidor para o endpoint correto e formato dos dados
Criar dados JSON a partir das entradas do formulário
Enviar os dados para a API com gestão de erros apropriada
Exibir mensagens de sucesso/falha ao utilizador
Tratar erros de rede de forma apropriada

Passo 6: Integração com Gestão de Estado

Atualizar o seu dashboard com a nova transação:

Requisitos de Integração:

Atualizar os dados da conta após a adição bem-sucedida da transação
Atualizar a visualização do dashboard sem necessidade de recarregar a página
Garantir que a nova transação aparece imediatamente
Manter a consistência do estado durante todo o processo

Especificações Técnicas

Detalhes do Endpoint da API: Consulte a documentação da API do servidor para:

Formato JSON exigido para os dados de transação
Método HTTP e URL do endpoint
Formato esperado da resposta
Tratamento de respostas de erro

Resultado Esperado: Depois de concluir este exercício, a sua aplicação bancária deve ter uma funcionalidade "Adicionar Transação" totalmente funcional, com aparência e comportamento profissionais:

Testar a Sua Implementação

Testes Funcionais:

Verificar que o botão "Adicionar Transação" está claramente visível e acessível
Testar se a caixa de diálogo abre e fecha corretamente
Confirmar que a validação do formulário funciona para todos os campos obrigatórios
Verificar que as transações bem-sucedidas aparecem imediatamente no dashboard
Garantir que a gestão de erros funciona para dados inválidos e problemas de rede

Testes de Acessibilidade:

Navegar por todo o fluxo usando apenas o teclado
Testar com um leitor de ecrã para garantir anúncios apropriados
Verificar se a gestão do foco funciona corretamente
Confirmar que todos os elementos do formulário têm etiquetas apropriadas

Rubrica de Avaliação

Critério	Exemplar	Adequado	Necessita Melhorias
Funcionalidade	A funcionalidade de adicionar transação funciona perfeitamente com excelente experiência do utilizador e segue todas as melhores práticas das lições	A funcionalidade de adicionar transação funciona corretamente mas pode não seguir algumas melhores práticas ou tem pequenos problemas de usabilidade	A funcionalidade de adicionar transação está parcialmente funcional ou tem problemas significativos de usabilidade
Qualidade do Código	Código bem organizado, segue padrões estabelecidos, inclui gestão adequada de erros, e integra-se perfeitamente com a gestão de estado existente	Código funciona mas pode apresentar alguns problemas de organização ou padrões inconsistentes com a base de código existente	Código tem problemas estruturais significativos ou não se integra bem com os padrões existentes
Acessibilidade	Suporte integral à navegação por teclado, compatibilidade com leitores de ecrã, e segue as diretrizes WCAG com excelente gestão de foco	Funcionalidades básicas de acessibilidade implementadas mas podem faltar algumas funcionalidades de navegação por teclado ou leitores de ecrã	Considerações de acessibilidade limitadas ou inexistentes
Experiência do Utilizador	Interface intuitiva e polida com feedback claro, interações fluídas, e aparência profissional	Boa experiência do utilizador com pequenas áreas a melhorar em feedback ou design visual	Experiência do utilizador pobre com interface confusa ou falta de feedback ao utilizador

Desafios Adicionais (Opcional)

Depois de concluir os requisitos básicos, considere estas melhorias:

Funcionalidades Avançadas:

Adicionar categorias de transação (alimentação, transportes, entretenimento, etc.)
Implementar validação de entrada com feedback em tempo real
Criar atalhos de teclado para utilizadores avançados
Adicionar capacidade de edição e eliminação de transações

Integração Avançada:

Implementar funcionalidade de desfazer para transações recentemente adicionadas
Adicionar importação em massa de transações a partir de ficheiros CSV
Criar funcionalidades de pesquisa e filtro de transações
Implementar funcionalidade de exportação de dados

Estas funcionalidades opcionais irão ajudá-lo a praticar conceitos mais avançados de desenvolvimento web e a criar uma aplicação bancária mais completa!

Aviso Legal:
Este documento foi traduzido utilizando o serviço de tradução por IA Co-op Translator. Embora nos esforcemos para garantir a precisão, por favor note que traduções automáticas podem conter erros ou imprecisões. O documento original na sua língua nativa deve ser considerado a fonte autorizada. Para informações críticas, recomenda-se tradução profissional humana. Não nos responsabilizamos por quaisquer mal-entendidos ou interpretações erradas decorrentes do uso desta tradução.

8.9 KiB Raw Permalink Blame History