Crear un prototipo de interfaz de comercio electrónico con GitHub Copilot

El desarrollo en lenguaje natural sigue requiriendo decisiones de ingeniería. Este ejercicio usa el escenario original del prototipo de compras, pero sustituye la generación abierta por un contrato pequeño, un módulo de dominio funcional y comprobaciones observables de la interfaz.

Resumen del laboratorio

[!NOTE] Los tests de dominio no establecen foco utilizable, etiquetas ni comportamiento de ventana gráfica.

Conceptos · Primera tarea · Lista de evidencias · Restablecer

Objetivos de aprendizaje

• Escribe un PRD realizable con exclusiones y criterios de aceptación.
• Separa las instrucciones duraderas de ingeniería de los requisitos de producto específicos de la tarea.
• Implementa una interfaz utilizable sobre un contrato de carrito probado.
• Usa comprobaciones de teclado, ventana gráfica y estados de error para cuestionar los resultados generados.

Antes de empezar

Prepara 06-prototype con el procedimiento de la unidad de trabajo. Node 24 es suficiente; no instales un framework de interfaz ni un paquete externo de imágenes. Usa únicamente los productos sintéticos del fixture. La finalización de compra es una simulación, no un formulario de pago.

Conceptos y casos de uso

Escenario del ejercicio

Un comprador explora tres productos, abre sus detalles, añade cantidades a un carrito y revisa un resumen de pedido simulado. No se requieren cuentas, analítica, recursos remotos, persistencia, procesadores de pago ni datos personales reales.

Tarea 1 - Establecer la línea base del dominio

1. Inspecciona cart.mjs, su prueba y el HTML inicial.

2. Ejecuta:

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

3. Registra que estas pruebas ejercitan reglas de dominio, no la interfaz inacabada.

4. En Ask, solicita una descripción de las líneas válidas del carrito y de cómo se representan los totales. Verifica la respuesta con el código fuente: los importes usan centavos enteros.

Tarea 2 - Escribir el PRD antes de generar la interfaz

1. Usa los ejemplos de PRD.

2. Crea PRD.md en el espacio de trabajo desechable con estos criterios de aceptación:

   ID	Criterio	Comprobación observable
   SHOP-1	Listar todos los productos incluidos	Los nombres y precios de los productos son visibles
   SHOP-2	Navegar por lista, detalles, carrito y resumen	El teclado permite llegar a cada vista y volver
   SHOP-3	Mostrar los totales del módulo de dominio	Dos manzanas y un plátano cuestan 330 centavos
   SHOP-4	Rechazar cantidades no válidas	Las cantidades cero, negativas, fraccionarias y vacías muestran errores
   SHOP-5	Anunciar cambios de estado	Estado visible y una región dinámica apropiada
   SHOP-6	Mostrar solo una finalización de compra simulada	Sin campos de tarjeta, contraseña ni dirección real

3. Esboza una pantalla por vista. Basta con una disposición de texto etiquetada.

4. Elige ventanas gráficas representativas de móvil y escritorio, como 375 y 1280 píxeles CSS. No uses un punto de interrupción de 300 píxeles como única prueba adaptable.

Tarea 3 - Revisar un plan

Usa 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.

Aprueba la implementación más pequeña. Rechaza la finalización real de compras, el seguimiento remoto, las dependencias ajenas al alcance o una nueva implementación de precios que duplique el módulo probado.

Tarea 4 - Implementar una vista a la vez

1. En Agent, implementa primero la lista de productos y la vista de detalles.
2. Revisa el diff y prueba la navegación antes de añadir controles del carrito.
3. Reutiliza summarizeCart para los totales; presenta las cadenas visibles al usuario con API seguras del DOM.
4. Añade las vistas del carrito y de confirmación simulada. Exige nombres accesibles y gestión del foco.
5. Incluye solo convenciones en .github/copilot-instructions.md; enlaza PRD.md como contexto de esta tarea en lugar de copiar todo su contenido en las instrucciones.
6. Detente tras dos reparaciones fallidas para inspeccionar el comportamiento averiado más pequeño.

Tarea 5 - Observar el prototipo en ejecución

1. Inicia el servidor proporcionado, limitado a la interfaz de bucle local:

   node serve.mjs
   

2. Abre la URL mostrada. Usa un puerto asignado por el sistema operativo para evitar conflictos con otros proyectos.

3. Realiza manualmente las comprobaciones de SHOP-1 a SHOP-6.

4. Repite usando únicamente navegación con teclado y las dos ventanas gráficas seleccionadas.

5. Prueba deliberadamente una cantidad de cero y confirma que aparezca un error en lugar de un restablecimiento silencioso o un total incorrecto.

6. Vuelve a ejecutar las pruebas de dominio e inspecciona la consola del navegador. Registra los resultados reales.

Verifica tu trabajo

• Las pruebas de dominio siguen pasando, incluidas las entradas rechazadas.
• Cada criterio de aceptación del PRD tiene una observación en el navegador.
• No se introdujo ninguna transacción real, credencial, rastreador ni recurso remoto.
• El foco del teclado sigue siendo visible y utilizable tras la navegación.
• No se afirma éxito únicamente porque la página parezca plausible.

Solución de problemas

Práctica independiente

Añade un filtro de nombre con un estado sin resultados. Especifica si importan las mayúsculas y los espacios en los extremos y después prueba esos casos. Mantén todo en el cliente.

Restablecimiento

Detén serve.mjs con Ctrl+C, guarda la evidencia y restaura únicamente los archivos de interfaz que modificaste en la copia desechable. No elimines ni detengas el servidor de otro proyecto.

Referencias oficiales

• Planificar con agentes
• Buenas prácticas para agentes
• Instrucciones personalizadas
• Pruebas de accesibilidad con Edge DevTools