Curso de Programación con ChatGPT

Explicamos el enfoque y objetivos de este curso de modo que puedas saber exactamente lo que vas a encontrar a lo largo de los destinos proyectos que desarrollaremos con la ayuda de las herramientas de inteligencia artificial de OpenAI.

Vamos a pedirle a ChatGPT que construya un selector de color, una herramienta que nos permita seleccionar un color entre varias posibilidades. Veremos que las primeras soluciones son básicas y continuaremos solicitando cambios para mejorar su reutilización. Además luego le solicitaremos que lo convierta en un Custom Element del estándar de Web Components, para mejorar su modularización y encapsulación.

El selector de color realizado en el proceso anterior tiene un problema y es que no se podrá enviar a través de un formulario, algo básico si lo queremos usar en una aplicación web que envíe datos por POST, por ejemplo a otra página desarrollada con PHP. Es por ello que vamos a implementar algunas mejoras con la ayuda de la IA.

ChatGPT no nos ofreció una solución optimizada en la anterior etapa. Por ello le vamos a solicitar que cambie su propuesta para usar Form Associated, un API reciente en el estándar Javascript que nos permite implementar campos nativos de formulario que funcionan encapsulados con shadow DOM.

Ahora vamos a ver cómo mejorar la reutilización del componente, pudiendo definir los colores que permite seleccionar, mediante un atributo. Esta parametrización nos permitirá usar este componente en otros proyectos de una manera cómoda.

Ahora realizaremos unas mejoras en el formulario para personalizar el aspecto del componente por medio de variables CSS (custom properties), lo que nos permitirá usar el selector de color en diseños con distinto look & feel.

Para que podamos reutilizar este componente en distintos proyectos, incluso para liberarlo como software libre y que otros desarrolladores lo puedan usar, vamos a pedirle a ChatGPT que nos ayude a publicarlo en npm, creando las páginas de documentación, demos del proyecto, el package.json y otra serie de cosas que necesitaremos.

Para terminar este módulo vamos a ver cómo lo podríamos usar en otros proyectos, solicitando ayuda a ChatGPT para poder instalarlo y probarlo de diversas maneras.

En este vídeo hacemos el enunciado de esta práctica de desarrollo con ChatGPT. Es un organizador de archivos que nos puede ahorrar muchas horas al gestionar una biblioteca de archivos mp3. Además en este vídeo hacemos un script con el código necesario para generar carpetas con archivos .mp3 (fake) que luego podremos ordenar con nuestro gestor de archivos.

Hacemos una primera versión de nuestro organizador de archivos. No hace todo lo que vamos a querer hacer pero ya nos permite comenzar a obtener resultados y vislumbrar algunos retos a los que nos vamos a enfrentar.

Ahora le pedimos a ChatGPT que nos haga algunos cambios en el script de organización de archivos en NodeJS para conseguir controlar un par de aspectos, como la gestión de archivos repetidos y que los archivos que ha conseguido organizar se muevan en lugar de copiarse.

Ahora queremos que nuestro organizador de archivos funcione desde cualquier ruta de nuestro terminal, de modo que sea como cualquier otro comando de consola, como cp, mv, mkdir, etc. Para eso vamos a usar una librería de Node que se llama Commander que nos permite una mejor interfaz para el desarrollo de comandos y la lectura de parámetros de entrada.

En este vídeo simplemente probamos si nuestro sistema será capaz de interpretar y ordenar correctamente archivos que tienen nombres de artistas o canciones que a priori podrían plantear problemas de reconocimiento.

Detectamos y solucionamos algunos detalles menores en la definición del archivo package.json de este programa Node.

Para sacar un poco más de provecho de la librería Commander que hemos implementado en este proyecto, vamos a ver cómo podríamos gestionar flags de configuración del comando, de modo que podamos personalizar su funcionamiento para diferentes necesidades de organización.

Conocemos la funcionalidad de proyectos de ChatGPT con la que podemos agrupar varios chats y definir información que permita a la IA guiar las conversaciones en torno a diferentes preferencias que tengamos para un trabajo en particular.

Le pedimos a ChatGPT que nos ayude a crear un proyecto Laravel desde cero, aunque en este caso no nos ayuda demasiado porque sus soluciones no están suficientemente actualizadas, por lo que será más recomendable acudir a la documentación del framework.

ChatGPT nos ayuda a crear los controladores para el sistema de autenticación basado en tokens de API.

Le pedimos a ChatGPT que cree los test para probar el controlador de registro de usuarios. Aunque el test que nos entrega está técnicamente correcto, veremos que tenemos que adaptar bastante el modo de trabajo de ChatGPT a nuestras preferencias

En este vídeo veremos cómo solucionar nuestras necesidades de personalización del estilo preferido para nuestros test de features y cómo cambiar el scaffolding de Artisan para facilitar la tarea a lo largo del proyecto. Además veremos la realización de otros test para cubrir de pruebas el sistema de autenticación basado en tokens de API.

Vamos a mejorar la salida de las respuestas JSON del API para conseguir dos objetivos distintos. Por un lado, ahorrar código cada vez que tengamos que enviar respuestas en el API. Por otro lado, asegurarnos de homogeneizar las respuestas, para que el API sea muy consistente y ayudar así a las personas que vayan a usarlo.

Vamos a comenzar a crear el primer recurso de nuestro modelo de negocio. Vamos a partir de aquí a pedirle a ChatGPT que use el enfoque de TDD, entregando siempre primero los test y luego el código de la aplicación.

La primera solución que nos entregó ChatGPT no incluía la asociación de los usuarios a los timetables. Pero esto es importante para nuestro modelo de negocio, así que le solicitamos a ChatGPT que modifique el controlador y las pruebas aportadas en el vídeo anterior.

Veremos el desarrollo de otras acciones para este recurso. Pero además mejoraremos el diseño de la aplicación mediante la creación de nuevos artefactos como los policies de Laravel para gestionar la autorización.

Vamos a extender las funcionalidades del API con un nuevo recurso. Vamos a pedirle a ChatGPT que empiece poco a poco, entregando de momento solamente el modelo y las migraciones.

En este video vamos a comenzar a desarrollar la acción de creación del recurso de activities, aplicando el flujo de desarrollo de TDD, pidiendo que primero nos entregue las pruebas y luego los controladores.

Vemos el desarrollo de la funcionalidad de mostrar una actividad.

En este vídeo comenzamos a desarrollar la siguiente acción de una activity pero una vez que hemos desarrollado el nuevo endpoint para el recurso, a fin de solucionar una duplicación de código que estábamos detectando, acabamos desarrollando una nueva mejora al diseño de la aplicación por medio de las clases form request que nos aporta Laravel.

En este punto del proyecto detectamos que no nos gusta cómo se han desarrollado los endpoints del API para el recurso de Activities. Queremos cambiar la estructura para hacerla más jerárquica y para ello solicitamos ayuda a ChatGPT para cambiar rutas, controladores y actualizar el código de las pruebas.

En este vídeo veremos cómo desarrollar las acciones que nos quedan del recurso, con la nueva estructura jerárquica de los endpoints y siempre bajo el flujo del TDD.

Cambiar el show del timetable para adaptarlo a previsiones de uso que vamos a tener en el frontend, de modo que veamos el timetable con todos los activity asociados. Por supuesto, actualizaremos tanto el controlador como las pruebas.

Cómo realizar la documentación de los endpoints del API, a partir de OpenAPI (antes Swagger) y los paquetes que existen en Laravel para poder realizar esta documentación de una manera sencilla. ChatGPT nos ayudará a seleccionar el paquete adecuado y nos permitirá aplicarlo a nuestro proyecto guiado por sus instrucciones. Al final usamos un proyecto llamado Scribe que no habíamos visto en el curso de desarrollo de API con Laravel, lo que nos permitirá aprender nuevas cosas. Veremos que Scribe permite generar la documentación a partir del código de las pruebas y las anotaciones que generaremos en los controladores.

En este vídeo vamos a ver cómo realizar anotaciones en los controladores mediante los cuales podemos mejorar la documentación del servicio web. Le pediremos a ChatGPT que nos ayude con los controladores del proyecto, proponiendo los decoradores oportunos.

Cómo configurar Scribe para que el sitio de la documentación especifique correctamente cómo autenticarse en el proyecto usando tokens de API estilo "token bearer" y además nos permita usar esos token para probar los endpoints que requieren usuarios autenticados directamente desde la página de la documentación.

Vemos que las guías que nos ofreció hasta este momento ChatGPT para crear el sitio de la documentación del API no nos han permitido llegar a una solución clara y consistente con lo que hace realmente nuestro API. Así que vamos a ponernos a depurar el site y para ello tendremos que apoyarnos no solo en ChatGPT sino también en la documentación de la propia librería Scribe, ya que hay cosas que no resultan del todo claras en su funcionamiento con las soluciones que nos ha aportado la IA.

Le pedimos a ChatGPT que nos siga ayudando para crear el sitio de la documentación y veremos que hay muchas cosas adicionales que podemos hacer a través del archivo de configuración y que nos pueden ayudar a mejorar cosas como la presentación del sitio y la gestión de los token de autenticación, para facilitar el uso de las funcionalidades de prueba de los endpoints del API.

Después de documentar el proyecto y desplegar el sitio de la documentación queremos compartir algunos detalles importantes que hemos podido aprender y que no estaban del todo claros sobre el package Scribe. Son notas útiles para cualquiera que quiera usar esta biblioteca de generación de docs en sus propias API.

En este vídeo daremos unas conclusiones finales sobre el curso de desarrollo apoyados por la IA y ChatGPT. Analizaremos los distintos tipos de uso que hemos ido aplicando a la IA, los distintos tipos de proyectos, el grado de confiabilidad que hemos ido apreciando, las facilidades que nos ha aportado el conocimiento de la tecnología, que nos han permitido sacarle un mayor partido de la inteligencia artificial y la obtención de soluciones más optimizadas. Además también analizaremos las mejoras que hemos conseguido realizar a partir de las sugerencias que nos aportó ChatGPT, que nos han permitido aprender más cosas que no dominábamos y así mejorar el diseño y características de nuestro software gracias a su ayuda.

En esta clase vamos a ver en vivo cómo podríamos construir un proyecto frontend que nos permita usar el API que hemos realizado durante el curso.