Exploramos Github Copilot en la web creando una sencilla página de preguntas y respuestas

dic. 15, 2024

Los asistentes de programación por IA están en boca de todos. Actualmente ya están alterando el flujo de trabajo de un desarrollador y, en el futuro, podrían cambiar la forma en que programamos, haciéndola irreconocible en comparación con la actual. Son multitud de empresas las que están trabajando en este campo, pero Github, con su Github Copilot, ha sido un pionero en la integración de la IA en el proceso de desarrollo. ¿Se quedará atrás? ¿Recuperará el liderazgo en este campo? Solo el tiempo lo dirá.

En este artículo, exploraremos Github Copilot creando un sencillo Trivia web utilizando únicamente HTML, CSS y JavaScript puro, dejando de lado frameworks y librerías para simplificar el ejemplo. Github Copilot ofrece múltiples formas de uso: desde plugins para integrarse en IDEs populares como Visual Studio Code o Jetbrains, hasta su versión web, que aún en fase de preview, permite realizar preguntas genéricas, indexar el código del repositorio para consultar aspectos específicos del proyecto, y hasta explorar funcionalidades de la propia interfaz de Github, como crear un nuevo repositorio, cómo hacer un Pull Request o configurar las opciones del repositorio. En este caso, utilizaremos la versión web, directamente integrada en Github.

Para utilizar esta versión, es necesario estar inscrito en el programa preview y contar con una suscripción activa a Github Copilot. Cumpliendo estos requisitos, basta con acceder a github.com, crear un nuevo repositorio o seleccionar uno existente. Encontrarás el icono de Copilot en la esquina inferior derecha. Al pulsarlo, se abrirá un chat integrado directamente en la interfaz de Github, similar al que se ofrece con el plugin en IDEs, pero diseñado para trabajar directamente desde el navegador.

Interfaz de Github mostrando un repositorio llamado 'simple-trivia', con una lista de archivos en la rama principal y un panel de chat de Copilot abierto en la esquina inferior derecha, indicando que está indexando el repositorio.

Para comenzar a interactuar con Copilot, en nuestro caso, definimos primero la lista de tareas a realizar que luego pasaremos como indicaciones para que Copilot nos ayude a completarlas. Vamos a crear de cero una sencilla aplicación web que permita a los usuarios responder preguntas recogidas de un fichero JSON. Te invito a probar Copilot interactuando con el repositorio simple-trivia que hemos creado para este ejemplo. Tras iniciar el reposiotorio se inicia la interacción con Copilot para crear el proyecto.

Se nota que está en beta, aunque en ocasiones puede modificar los archivos directamente, la mayoría de las veces se limita a proporcionar los cambios a través del chat. Sería ideal que en futuras versiones incluyera la capacidad de realizar modificaciones directamente mediante Pull Requests, una funcionalidad que probablemente esté en desarrollo. Por ahora, las modificaciones deben hacerse manualmente, lo que resulta un tanto tedioso, especialmente considerando que la interfaz de usuario y el flujo de trabajo dentro de Github no son los más cómodos para este propósito.

Las tareas definidas son las siguientes:

• Crear la estructura del proyecto con los archivos de código fuente necesarios para una aplicación web de trivia sencilla, donde el usuario pueda ver, de manera visualmente atractiva, una pregunta y tres posibles respuestas, de las cuales solo una es correcta.
• Obtener las preguntas y posibles respuestas desde un archivo JSON local con algunos ejemplos por defecto.
• Diseñar el fondo con un degradado a toda pantalla de un azul profundo a azul claro.
• Utilizar la fuente Roboto para el texto de las preguntas, estilizada en gris oscuro (#212121) para mejorar la legibilidad.
• Diseño de los botones con un color de fondo base en verde primario (#4CAF50). Efectos de hover para que el fondo transicione a un verde más claro (#66BB6A), incluyendo esquinas redondeadas, sombras sutiles y un efecto de borde brillante utilizando un resplandor verde suave (#A5D6A7) cuando sean seleccionados.
• Diseño responsivo para mantener la estructura visual en dispositivos con diferentes tamaños de pantalla, asegurándose de que el contenido sea legible y accesible en todos los dispositivos.
• Una animación de entrada utilizando un efecto de desvanecimiento para el contenedor con las preguntas y respuestas.
• Crear el fichero README con instrucciones claras sobre cómo descargar el código fuente y ejecutar la aplicación en el navegador.

Una vez definidas las tareas, simplemente le vamos indicando a Copilot lo que necesitamos y él nos va proporcionando los cambios necesarios, como decía antes, a veces los hace él directamente y otras nos proporciona el código necesario para completar la tarea. Hay que tener en cuenta que algunas de las tareas no ha podido completarlas correctamente para el resultado final, sobre todo en las relacionadas con temas de diseño, que es lo que más suele costarle, por ejemplo los botones no tienen el efecto glow que se le había indicado. En situaciones así habría que incidir más en la descripción de la tarea para que Copilot pueda entender mejor lo que queremos y ejecutarlo correctamente.

Interfaz de un juego de trivia mostrando una tarjeta con la pregunta '¿Cuál es la capital de Francia?' junto con tres botones de respuesta: 'Berlín', 'Madrid' y 'París', sobre un fondo con un degradado azul claro.

El estado actual de Github Copilot es muy prometedor, aunque todavía tiene un largo camino por recorrer. En comparación con su versión para IDEs, se siente bastante limitado, pero su potencial es evidente si se sigue mejorando con nuevas funcionalidades y características. Una de las principales carencias actuales, como decía, es la imposibilidad de modificar el código directamente en el repositorio, algo que sería extremadamente útil. Por ahora, se asemeja más a un ChatGPT integrado en una pestaña del navegador, orientado a responder consultas, que a una herramienta completa de desarrollo. Sin embargo, esto podría cambiar en el futuro. Con 2025 a la vuelta de la esquina, es muy probable que Github introduzca novedades interesantes durante el próximo año.

También es importante destacar que la funcionalidad de indexado de proyectos, que permite a Copilot acceder al código fuente del repositorio y ofrecer sugerencias más precisas, está limitada a un número específico de repositorios por usuario. Esto significa que, si tienes varios proyectos en tu cuenta de Github, es posible que no puedas utilizar esta funcionalidad en todos ellos. Para activarla, es necesario indexar manualmente cada repositorio utilizando la opción específica que ofrece Copilot.

Interfaz de Github mostrando un repositorio llamado 'particle-painter', con una estructura de directorios y archivos. En la esquina inferior derecha, el panel de Copilot sugiere indexar el repositorio para mejorar la búsqueda en lenguaje natural.

En resumen, Github Copilot es una herramienta fascinante que, aunque todavía se encuentra en una etapa temprana de desarrollo, tiene un gran potencial a futuro. Aunque sus limitaciones actuales lo hacen menos potente que su versión integrada en IDEs, sigue siendo una opción muy útil para obtener sugerencias rápidas y precisas directamente desde Github, sin necesidad de instalar software adicional.

Si te interesa probarlo, puedes consultar el código fuente generado íntegramente por Copilot y experimentar por ti mismo en el navegador a través de este enlace. Y recuerda, siempre ¡Happy Coding! Aunque, esta vez, con menos coding y más happy gracias a Github Copilot. 😉