Creando una App de Cuenta Regresiva con GitHub Copilot: Lecciones de un Desarrollador

En el mundo del desarrollo de software, la inteligencia artificial (IA) se está convirtiendo en un aliado cada vez más importante. Un claro ejemplo de esto es GitHub Copilot, una herramienta que asiste a los desarrolladores en la creación de código de manera más eficiente. En este artículo, exploraremos cómo un desarrollador utilizó GitHub Copilot para construir una aplicación de cuenta regresiva, y las valiosas lecciones que aprendió en el proceso.

Desarrollo impulsado por especificaciones

El desarrollo impulsado por especificaciones (spec-driven development) es una metodología que prioriza la definición de un contrato o especificación clara antes de escribir una sola línea de código. Este contrato describe cómo debe comportarse el código y se convierte en la fuente de verdad para las herramientas y agentes de IA utilizados en el proceso. Al comenzar con una especificación detallada, se reduce la incertidumbre, se minimizan las sorpresas y se mejora la calidad del código final.

En el caso de la aplicación de cuenta regresiva, el desarrollador comenzó generando un nuevo espacio de trabajo con GitHub Copilot, proporcionando un prompt específico que detallaba los requisitos de la aplicación: uso de Vite, TypeScript y Tailwind CSS v4, un tema oscuro por defecto, un diseño centrado y la funcionalidad de cuenta regresiva hacia la medianoche del 1 de enero de 2026.

#new

1. Create a new workspace for a New Year countdown app using Vite, TypeScript, and Tailwind CSS v4.

**Setup requirements:**
- Use the @tailwindcss/vite plugin (Tailwind v4 style)
- Dark theme by default (zinc-900 background)
- Centered layout with the countdown as the hero element

**Countdown functionality:**
Create a `countdown.ts` module with:
- A `CountdownTarget` type that has `{ name: string, date: Date }` so we can later customize what we're counting down to
- A `getTimeRemaining(target: Date)` function returning `{ days, hours, minutes, seconds, total }`
- A `formatTimeUnit(n: number)` helper that zero-pads to 2 digits
- Default target: midnight on January 1st of NEXT year (calculate dynamically from current date)

**Display:**
- Large, bold countdown digits (use tabular-nums for stable width)
- Labels under each unit (Days, Hours, Minutes, Seconds)
- Subtle animation when digits change (CSS transition)
- Below the countdown, show: "until [target.name]" (e.g., "until 2026")

**Architecture:**
- `src/countdown.ts` - pure logic, no DOM
- `src/main.ts` - sets up the interval and updates the DOM
- Use `requestAnimationFrame` or `setInterval` at 1 second intervals
- Export types so they're reusable

Keep it simple and clean—this is the foundation we'll build themes on top of.

En cuestión de minutos, el desarrollador tenía una versión funcional de la aplicación de cuenta regresiva. Sin embargo, para mejorarla visualmente, recurrió a la comunidad y al agente de planificación (Plan agent) de Copilot.

El Agente de Planificación y la Importancia de las Preguntas Claras

El Plan agent es una herramienta valiosa para refinar los requisitos de un proyecto. En lugar de simplemente generar un plan basado en un prompt inicial, el Plan agent formula preguntas aclaratorias que pueden revelar casos límite y consideraciones importantes que el desarrollador podría haber pasado por alto.

Por ejemplo, al proponer la idea de un selector de zona horaria interactivo con un tema de viaje en el tiempo, el Plan agent planteó preguntas como:

• ¿Debería el dial circular ser primario con el mapa mundial como secundario, o viceversa?
• ¿Qué sucede en dispositivos móviles: un menú desplegable o un scroll táctil?
• Cuando una zona horaria pasa la medianoche, ¿se muestra un mensaje de “ya celebrando” con confeti, o un temporizador que indica cuánto tiempo ha pasado desde la medianoche?

Estas preguntas obligaron al desarrollador a reflexionar sobre aspectos que no había considerado inicialmente, lo que llevó a una mejor definición de los requisitos y a una aplicación más completa.

Gestión de la Ventana de Contexto

La ventana de contexto en las herramientas de IA como Copilot es un recurso valioso, pero limitado. Para evitar conversaciones confusas y mantener el enfoque, es importante gestionar esta ventana de manera eficiente. El desarrollador optó por iniciar una nueva sesión de chat antes de implementar la función de selección de zona horaria, ya que el contexto de la conversación anterior (creación del espacio de trabajo y lógica básica de la cuenta regresiva) ya no era relevante.

Además, reutilizó archivos de instrucciones personalizadas y agentes de otro proyecto para guiar a Copilot en la dirección correcta, incluyendo un agente especializado en rendimiento de la interfaz de usuario (UI Performance Specialist agent).

Desarrollo Guiado por Pruebas (TDD) con Copilot

Uno de los aspectos más interesantes de este proyecto fue la implementación del desarrollo guiado por pruebas (TDD) con la ayuda de Copilot. El desarrollador solicitó al agente especializado en rendimiento de la interfaz de usuario que revisara el plan y sugiriera detalles de implementación, incluyendo la creación de pruebas antes de escribir el código.

Copilot generó archivos de prueba para las utilidades de zona horaria, la gestión de ciudades y estados, y la lógica de la cuenta regresiva. Inicialmente, todas las pruebas fallaron (estado rojo), lo cual era lo esperado. Luego, Copilot implementó las funcionalidades necesarias para que las pruebas pasaran (estado verde).

Este proceso de TDD permitió identificar y corregir errores importantes, como un problema con la lógica que determinaba si la celebración se activaba correctamente durante el cambio de año. Este error, de no haber sido detectado por las pruebas, podría haber causado un fallo embarazoso el 31 de diciembre.

Lecciones Aprendidas

Este proyecto de creación de una aplicación de cuenta regresiva con GitHub Copilot dejó una serie de valiosas lecciones:

• La gestión de la ventana de contexto es crucial. Inicia nuevas sesiones de chat cuando el contexto anterior no sea relevante.
• El Plan agent ayuda a identificar casos límite. Utilízalo cuando los requisitos no estén bien definidos.
• Los agentes personalizados son ayudantes especializados. Aprovecha su experiencia en áreas específicas.
• El TDD con Copilot funciona. Escribe las pruebas primero, déjalas fallar y luego implementa para que pasen.
• Las cosas no siempre salen bien a la primera. Aprende de los errores y no te frustres.
• Define un alcance ambicioso e implementa de forma iterativa. No es necesario tener todo listo desde el principio.

Conclusión

La inteligencia artificial está transformando el panorama del desarrollo de software, y herramientas como GitHub Copilot están permitiendo a los desarrolladores ser más eficientes y creativos. Al aplicar patrones como el desarrollo impulsado por especificaciones, la gestión eficiente de la ventana de contexto y el desarrollo guiado por pruebas, se pueden construir aplicaciones de alta calidad con la ayuda de la IA.

Fuente: GitHub Blog