GitHub Copilot app paso a paso: crea, revisa y publica un cuestionario sobre el espacio

Referencia oficial: este tutorial sigue el taller Recorrido por la aplicación GitHub Copilot y la documentación de la aplicación GitHub Copilot. Guía oficial de inicio: Primeros pasos.

Descarga la app: GitHub Copilot app (macOS, Windows y Linux).

Taller creado por James Montemagno (licencia MIT). Duración aproximada: 60 a 90 minutos.

Vas a crear un Space Quiz (un solo index.html, sin dependencias) desde una carpeta vacía y recorrer todo el ciclo: primer prompt, incidencias, PR revisado y sitio publicado en GitHub Pages.

0. Requisitos previos y configuración

Necesitas:

• Cuenta de GitHub.
• Plan activo de Copilot (Free o de pago). Copilot Free no incluye la revisión de código en PRs (lección 8).

Pasos:

1. Descarga e instala la aplicación GitHub Copilot.
2. Ábrela y selecciona Sign in to GitHub.
3. Elige un tema y pulsa Finish.
4. Familiarízate con la app:
   • New: inicia una sesión o un Chat.
   • Pull requests: tus PRs de todos los repositorios.
   • Issues: incidencias asignadas, creadas por ti o donde te mencionan.
   • Automations: tareas recurrentes del agente.
   • Customize: temas, modelos y extensiones de Canvas.
   • Projects: tus repositorios y sus sesiones.
5. Prueba un chat rápido (New → Chat, sin repositorio):

¿Cómo usa la aplicación GitHub Copilot los worktrees?

1. Crea el espacio de trabajo

1. Abre la app y confirma que iniciaste sesión.
2. New → Open folder y elige una carpeta vacía llamada space-quiz (créala antes si no existe).
3. Modo de sesión: Interactive.
4. Elige tu modelo (ver lección 0).
5. Pulsa Create.

2. Crea y perfecciona el cuestionario

1. Envía este prompt en la sesión space-quiz:

Crea un cuestionario sobre exploración espacial con 10 preguntas, barra de progreso, contador de puntuación y feedback animado y colorido (verde para correcto, rojo con sacudida para incorrecto). Muestra una pantalla de resultados con una reacción en emoji al final. Centrado en una columna estrecha. Un único index.html, sin servidor ni dependencias. Con acabado cuidado, tipografía sans-serif, cuerpo de 14–16px y soporte de prefers-color-scheme. Ábrelo en el navegador integrado.

2. Responde varias preguntas y comprueba que:
   • la barra de progreso avanza,
   • la puntuación se actualiza,
   • lo correcto se ve en verde y lo incorrecto sacude en rojo,
   • aparece la pantalla de resultados al final.
3. Contrae la barra lateral izquierda y el panel del navegador para revisar index.html en el área de código ampliada. Restaura ambos paneles al terminar.
4. Activa el selector de elementos en la barra del navegador y selecciona el encabezado o el área de respuestas.
5. Envía:

Haz que el elemento seleccionado se parezca más a un panel de control de misión. Mantenlo accesible y conserva los temas claro y oscuro existentes.

Ajustes opcionales (pídeselos al agente):

• Fondo sutil de estrellas que respete prefers-reduced-motion.
• Pantalla de resultados más festiva con puntuación de 8 o más.
• Mejores estados de foco de teclado, y probar el cuestionario sin ratón.

3. Inspecciona la sesión y prueba el cuestionario

1. Haz clic en Build a space quiz en la barra de título para abrir el menú del proyecto y la sesión. Confirma que la sesión corresponde a space-quiz y revisa Path.

2. Abre el control de uso (a la izquierda del micrófono) para ver plan, créditos de la sesión, tokens y Context. Cuando el contexto se llena, es señal para iniciar una sesión nueva.

3. Lanza un smoke test antes de que Git escriba nada:

Ejecuta un smoke test a nivel de navegador del cuestionario en el navegador integrado. Comprueba la navegación con teclado, la actualización de la puntuación, el feedback correcto e incorrecto y la pantalla de resultados. Corrige cualquier fallo y después informa de lo que ha pasado.

4. Si algo falla, deja que el agente lo corrija y repita la prueba hasta que todo pase.

4. Instrucciones del proyecto con /init

1. Ejecuta el comando con texto después (sin texto puede aparecer Command input required):

/init crea reglas sencillas para el proyecto

2. Revisa el archivo de instrucciones generado antes de aceptarlo.
3. Redúcelo a lo esencial: un único archivo, sin dependencias, accesible y probado en el navegador.
4. Añade lo que no quieres repetir en cada prompt: tu estilo de código, convenciones de nombres, librerías a evitar y cuántos comentarios quieres.

5. Publica el proyecto

1. Envía:

Inicializa esta carpeta como repositorio de Git, crea un commit inicial y crea un nuevo repositorio público de GitHub llamado space-quiz en mi cuenta. Haz push de la rama actual y establécela como rama predeterminada. Actualiza el proyecto dentro de esta app para que el proyecto de GitHub quede vinculado.

2. Según tu configuración de aprobación, el agente puede pedir confirmación antes de crear el repo o hacer push. Revisa la acción y el destino antes de enviar.
3. Cuando termine: abre el repo en GitHub, confirma que index.html está y verifica en la app que el proyecto quedó vinculado.

6. Incidencias y sesiones

1. Crea un backlog:

Revisa el space quiz y sugiere tres ideas de funcionalidades concretas, cada una realizable en una sesión corta. Crea una incidencia de GitHub separada para cada idea con título claro, descripción centrada en el usuario y criterios de aceptación. No las implementes todavía.

2. Abre Issues, revisa las tres y elige una con valor claro y alcance manejable.

3. Abre la incidencia elegida y selecciona New session.
4. Elige un nuevo árbol de trabajo (worktree), modo Interactive y tu modelo.
5. Envía:

Implementa esta incidencia por completo. Mantén el diseño de un solo archivo sin dependencias, prueba el comportamiento en el navegador integrado y resume los cambios al terminar.

6. Revisa tú mismo: panel derecho → pestaña Changes, lee el diff de cada archivo y prueba la funcionalidad contra los criterios de aceptación.

7. Planifica antes de editar (modo Plan)

1. Abre una segunda incidencia desde Issues y selecciona New session.
2. En la configuración de la sesión elige Plan (en lugar de Interactive o Autopilot).
3. Envía:

Planifica cómo implementar esta incidencia. Investiga el cuestionario existente, lista los archivos que cambiarías, señala los riesgos para la accesibilidad y para la restricción de un solo archivo, y detente antes de hacer cualquier edición.

4. Lee el plan y pide cambios si falta algo.
5. Aprueba el plan.
6. Cuando te lo pida, elige si la sesión continúa en Interactive o Autopilot.

Usa el modo Plan para tareas ambiguas, transversales o costosas de deshacer.

8. Completa el ciclo de revisión

Copilot Free no incluye la revisión de código de Copilot. Si no tienes acceso, haz los pasos 1 a 4, revisa el diff tú mismo (o pide a alguien que lo revise) y salta los pasos 5 a 9. Consulta la disponibilidad.

1. Panel derecho → pestaña Changes para inspeccionar los archivos modificados.
2. Pulsa Create PR en la barra de la sesión.
3. Revisa el título y la descripción generados y crea el PR.
4. Ábrelo en GitHub.
5. En Reviewers, solicita revisión de Copilot.
6. En Files changed, lee todos los comentarios.
7. Para cada comentario que requiera cambio, usa la acción Fix de Copilot en la app o hazlo tú.
8. Revisa cada cambio y vuelve a probar.
9. Responde con lo que cambió y resuelve la conversación. Si una sugerencia no aplica, explica el motivo en lugar de cambiar código innecesariamente.

Combina con Agent Merge: actívalo en el PR para que el agente atienda comentarios, corrija checks que fallen, resuelva conflictos y combine cuando todo pase. Si prefieres, combina tú mismo tras revisar el diff final y con todos los checks en verde.

9. Automatiza la clasificación de incidencias

1. Abre Automations.
2. Elige la plantilla de automatización semanal.
3. Introduce este prompt:

Revisa las incidencias de GitHub creadas en la última semana que sigan abiertas y entrégame una tabla resumen ordenada por gravedad y prioridad.

4. Modo de sesión: Autopilot.
5. Modelo: Auto.
6. Proyecto: space-quiz.
7. Menú Create → Create and run.
8. Revisa el resumen y confirma que hace referencia a las incidencias abiertas recientes.

10. Continúa de forma remota (opcional)

1. Abre una sesión con trabajo en curso.
2. Ejecuta:

/remote

3. Abre el enlace que devuelve en el navegador, o entra desde la app móvil de GitHub Copilot.
4. Sigue el progreso y revisa los cambios como en cualquier otro PR.

La sesión sigue ejecutándose en tu equipo, que debe permanecer encendido. No es delegación a la nube.

11. Explora un Canvas

1. Explora la galería de extensiones de Canvas.
2. Abre la extensión Repository Issues Kanban.
3. Selecciona Install in GitHub Copilot app y aprueba la instalación.
4. En la app: Customize → Canvas y confirma que está instalada.
5. Selecciona New session para el Canvas y elige el proyecto space-quiz.
6. Mueve una tarjeta de incidencia a la columna de trabajo activo (arrastrar y soltar).
7. Abre la sesión generada y confirma que la incidencia está como contexto.

Si no puedes usar arrastrar y soltar: anota el número de la incidencia, ábrela desde Issues y selecciona New session. Obtienes la misma sesión.

12. Publica el sitio con GitHub Pages

1. En la sesión de space-quiz, envía:

Habilita GitHub Pages para este repositorio. Crea un workflow de GitHub Actions que construya el sitio si hace falta y lo despliegue en GitHub Pages. Añade un README que describa la app y cómo ejecutarla en local si todavía no existe. Crea un pull request con estos cambios y combínalo cuando pasen los checks requeridos. Monitoriza el despliegue hasta que tenga éxito y después indícame la URL final del sitio publicado. Si no tienes permiso para habilitar Pages o combinar, dime exactamente qué debo aprobar o hacer yo; no informes de éxito hasta que el sitio esté en línea.

2. Confirma que el README se añadió solo si el repo no tenía uno.
3. Revisa los cambios del PR, incluidos los pasos de build y despliegue del workflow.
4. Combina solo cuando pasen los checks requeridos.
5. Sigue la ejecución en GitHub Actions hasta que termine con éxito.
6. Abre la URL reportada y confirma que el Space Quiz carga.

Si el agente no puede habilitar Pages o combinar, sigue sus instrucciones. No des la tarea por terminada hasta que el sitio esté en vivo.

13. Repaso y próximos pasos

Lo que has hecho: proyecto local en modo Interactive, cuestionario con prueba en navegador, /init, repo en GitHub, backlog de incidencias, worktree aislado con revisión de diff, modo Plan, PR con revisión de Copilot y Agent Merge, automatización semanal, sesión remota, Canvas Kanban y sitio en GitHub Pages.

Sigue explorando:

• Conoce la aplicación GitHub Copilot
• Guía oficial de primeros pasos
• Sesiones de agente
• Gestionar incidencias y PRs en la app
• Revisión de código de Copilot
• Extensiones de Canvas
• GitHub Pages
• Buenas prácticas para escribir prompts
• Planes de Copilot

Descarga la app aquí: GitHub Copilot app.