Crie um protótipo de interface de e-commerce com o GitHub Copilot

O desenvolvimento em linguagem natural ainda exige decisões de engenharia. Este exercício usa o cenário original de protótipo de compras, mas substitui a geração sem limites por um contrato pequeno, um módulo de domínio funcional e verificações observáveis da interface.

Resumo do laboratório

[!NOTE] Testes de domínio não estabelecem foco utilizável, rótulos ou comportamento de viewport.

Conceitos · Primeira tarefa · Lista de evidências · Redefinir

Objetivos de aprendizagem

• Escreva um PRD viável com exclusões e critérios de aceitação.
• Separe instruções duradouras de engenharia de requisitos de produto específicos da tarefa.
• Implemente uma interface utilizável sobre um contrato testado de carrinho.
• Use verificações de teclado, viewport e estados de erro para questionar a saída gerada.

Antes de começar

Prepare 06-prototype com o procedimento da unidade de trabalho. Node 24 é suficiente; não instale um framework de front-end ou pacote externo de imagens. Use somente os produtos sintéticos da fixture. A finalização da compra é uma simulação, não um formulário de pagamento.

Conceitos e casos de uso

Cenário do exercício

Uma pessoa compradora navega por três produtos, abre detalhes, adiciona quantidades a um carrinho e revisa um resumo simulado do pedido. Não são necessários conta, análise de uso, recursos remotos, persistência, processador de pagamentos ou dados pessoais reais.

Tarefa 1 - Estabeleça a linha de base do domínio

1. Inspecione cart.mjs, seu teste e o HTML inicial.

2. Execute:

   node --test --test-concurrency=1 cart.test.mjs
   

3. Registre que estes testes exercitam regras de domínio, não a interface inacabada.

4. Em Ask, peça uma descrição das linhas válidas do carrinho e de como os totais são representados. Verifique a resposta nas fontes: os valores monetários usam centavos inteiros.

Tarefa 2 - Escreva o PRD antes de gerar a interface

1. Use os exemplos de PRD.

2. Crie PRD.md no workspace descartável com estes critérios de aceitação:

   ID	Critério	Verificação observável
   SHOP-1	Listar todos os produtos incluídos	Nomes e preços dos produtos estão visíveis
   SHOP-2	Navegar entre lista, detalhes, carrinho e resumo	O teclado consegue acessar cada visualização e retornar
   SHOP-3	Mostrar totais do módulo de domínio	Duas maçãs e uma banana custam 330 centavos
   SHOP-4	Rejeitar quantidades inválidas	Quantidades zero, negativas, fracionárias e vazias exibem erros
   SHOP-5	Anunciar mudanças de estado	Status visível e uma região dinâmica apropriada
   SHOP-6	Mostrar somente a finalização simulada da compra	Nenhum campo de cartão, senha ou endereço real

3. Esboce uma tela para cada visualização. Um layout textual com rótulos é suficiente.

4. Escolha viewports representativos para dispositivos móveis/desktop, como 375 e 1280 pixels CSS. Não use um ponto de quebra de 300 pixels como único teste responsivo.

Tarefa 3 - Revise um plano

Use Plan:

Use PRD.md and the existing cart.mjs contract. Plan a framework-free interface.
Identify the views, DOM state, labels, focus transitions, error messages, and
keyboard/viewport checks. Keep currency arithmetic in cart.mjs. Do not implement yet.

Aprove a menor implementação. Rejeite finalização real de compras, rastreamento remoto, dependências sem relação com a tarefa ou uma nova implementação de preços que duplique o módulo testado.

Tarefa 4 - Implemente uma visualização por vez

1. Em Agent, implemente primeiro a lista de produtos e a visualização de detalhes.
2. Revise o diff e teste a navegação antes de adicionar controles do carrinho.
3. Reutilize summarizeCart para os totais; apresente strings visíveis ao usuário com APIs seguras do DOM.
4. Adicione as visualizações de carrinho e confirmação simulada. Exija nomes acessíveis e gerenciamento de foco.
5. Coloque somente convenções em .github/copilot-instructions.md; vincule PRD.md como contexto desta tarefa em vez de copiar todo o conteúdo dele para as instruções.
6. Pare após duas tentativas de correção malsucedidas para inspecionar o menor comportamento com problema.

Tarefa 5 - Observe o protótipo em execução

1. Inicie o servidor fornecido, restrito ao loopback:

   node serve.mjs
   

2. Abra a URL impressa. Ela usa uma porta atribuída pelo sistema operacional para evitar interferência em outros projetos.

3. Execute manualmente as verificações SHOP-1 a SHOP-6.

4. Repita usando somente navegação por teclado e ambos os viewports selecionados.

5. Tente deliberadamente uma quantidade zero e confirme um erro, em vez de uma redefinição silenciosa ou um total incorreto.

6. Execute novamente os testes de domínio e inspecione o console do navegador. Registre os resultados reais.

Verifique seu trabalho

• Os testes de domínio continuam passando, incluindo entradas rejeitadas.
• Cada critério de aceitação do PRD tem uma observação no navegador.
• Nenhuma transação real, credencial, rastreador ou recurso remoto foi introduzido.
• O foco do teclado permanece visível e utilizável após a navegação.
• Nenhum sucesso é alegado apenas porque a página parece plausível.

Solução de problemas

Prática independente

Adicione um filtro por nome com um estado sem resultados. Especifique se maiúsculas/minúsculas e espaços nas extremidades importam e teste esses casos. Mantenha-o somente no cliente.

Restauração

Pare serve.mjs com Ctrl+C, salve as evidências e restaure somente os arquivos de interface que você alterou na cópia descartável. Não remova nem pare o servidor de outro projeto.

Referências oficiais

• Planejamento com agentes
• Boas práticas para agentes
• Instruções personalizadas
• Testes de acessibilidade com Edge DevTools