Una de las mayores afirmaciones que se han generado en torno a ChatGPT es que puede ser una herramienta de programación eficaz. La idea es la siguiente: tú describes lo que quieres en lenguaje natural y el chatbot genera un código que hace exactamente eso. Pero, ¿qué tan bueno es ChatGPT en esto?
¿Qué mejor forma de comprobarlo que poniéndolo a prueba? Le pedimos a ChatGPT que creara una aplicación web sencilla desde cero. Aquí tienes el resultado de nuestra prueba y los pasos que puedes seguir para crear un sitio web desde cero con ChatGPT.
Paso 1: Generar el modelo para su aplicación web
Al igual que harías al crear una aplicación web con cualquier herramienta, necesitarás diseñar el plano de cómo quieres que se vea tu aplicación y los pasos que necesitarás para crearla antes de dejar que ChatGPT se encargue.
Para nuestra primera tarea, le pedimos a ChatGPT que desarrollara un plan para una aplicación de chat simple. Para ello, describimos los requisitos de nuestra aplicación web y luego le pedimos al chatbot que detallara un plan para desarrollar la aplicación.
Después de usar el mensaje anterior, este es el resultado que obtuvimos:
Necesitarás tener habilitado el complemento “Show Me” en tu cuenta de ChatGPT para generar un diagrama de flujo como el que mostramos arriba. Puedes instalar y usar los complementos de ChatGPT en tan solo unos pasos, aunque necesitarás una suscripción premium.
Sin el complemento, obtendrá un plano basado en texto o un diagrama de flujo en formato ASCII. No hay problema. Incluso sin el complemento, ChatGPT debería proporcionar un plano claro de la aplicación como el ejemplo que se muestra a continuación.
Paso 2: Dividir el plan en módulos más pequeños
Ahora que tenemos el panorama general definido, le pedimos a ChatGPT que nos ayudara a dividir la aplicación en componentes más pequeños que pudiéramos desarrollar por separado y luego integrar para formar la aplicación web completa. ChatGPT sugirió dividirla en tres componentes:
- Módulo de registro
- Módulo de inicio de sesión
- Módulo de chat
Teníamos otras ideas, pero el objetivo aquí es dejar que ChatGPT tome las decisiones.
1. Creación del componente de registro
Nos pusimos manos a la obra para crear el componente de registro. Le pedimos a ChatGPT que diseñara un algoritmo adecuado. En este caso, intervenimos especificando que solo necesitábamos el nombre de usuario, el correo electrónico y el avatar del usuario para el registro. Este es el mensaje:
Y aquí está el resultado:
A continuación, solicitamos a ChatGPT que cree el componente de registro.
Aunque no incluimos el campo de contraseña como parte del proceso de registro, ChatGPT tomó la decisión correcta al incluirlo en el código HTML generado. Copiamos el código sin ninguna modificación y así es como se ve en un navegador.
A continuación, solicitamos a ChatGPT que generara el script de registro PHP. Al principio, solicitamos que se escribiera el código PHP para la lógica del lado del servidor que se utilizará para gestionar el envío del formulario. Aunque el script generado funcionaba bien, tenía muchas vulnerabilidades.
No había hash de contraseñas, ni manejo de errores y era propenso a la inyección SQL: ChatGPT solo hacía lo mínimo indispensable. Resolver este problema fue relativamente fácil. Simplemente le pedimos a ChatGPT que “identificara todo lo que estuviera mal en el código que acababa de generar y luego usara los puntos identificados para optimizar el código”. Con eso, nuestro script de registro PHP estaba listo para funcionar.
La redacción de su mensaje es importante. Debe ser muy claro y específico con lo que necesita que ChatGPT haga. Cuando simplemente le pedimos que «arregle el problema con este código», no solucionó la mayor parte de lo que esperábamos que solucionara. Para obtener más orientación sobre cómo escribir mensajes para ChatGPT, aquí hay algunos lugares donde aprender a escribir mensajes efectivos.
A continuación, le pedimos a ChatGPT que “Escriba un código SQL para crear una base de datos para los datos capturados en el script PHP.«Aquí está el código SQL resultante:
Y aquí está la tabla creada al ejecutar el SQL:
Con la base de datos configurada, probamos nuestro primer registro y funcionó sin errores.
2. Creación del componente de inicio de sesión
Una vez que nos ocupamos del componente de registro, nos ocupamos del componente de inicio de sesión. Sorprendentemente, fue el más fácil de crear a pesar de la lógica adicional de la gestión de sesiones.
Aquí se muestra la página de inicio de sesión generada. Un aspecto destacado es que utiliza las mismas opciones de color que la página de registro.
Después de crear un archivo “server.login.php” según las instrucciones de ChatGPT y agregar el script PHP generado, realizamos nuestro primer inicio de sesión exitoso sin ninguna modificación ni depuración.
3. Creación del componente de chat
La creación del componente de chat fue la parte final (y probablemente la más difícil) de nuestro pequeño experimento. Al principio, simplemente le pedimos a ChatGPT que escribiera el código para el componente de chat. No hace falta decir que fue un fracaso colosal. Para los componentes más complejos de cualquier cosa que quieras crear, tendrás que dividirla en componentes más pequeños y abordarlos uno tras otro.
Le pedimos a ChatGPT sugerencias sobre cómo dividir el componente de chat y nos sugirió crear tres páginas:
- Chat.php
- Enviar-mensajes.php
- Obtener mensajes.php
Cuando ChatGPT sugiere un nombre de archivo, usar un nombre diferente en tu proyecto puede causar problemas sin darte cuenta, ya que el chatbot hará referencia al mismo nombre en todo el código que crea a lo largo del proyecto. Lo descubrimos de la peor manera. No cometas el mismo error.
Creando la página Chat.php
Para comenzar, le dimos a ChatGPT instrucciones detalladas sobre cómo queríamos que se viera la interfaz de chat.
Después de ejecutar el código HTML generado, teníamos una interfaz de chat sin un cuadro de entrada de mensajes. Para solucionar esto, simplemente le pedimos a ChatGPT que «Reescriba el código para incluir un cuadro de entrada de mensaje y un botón de envío.Así es como se ve el código generado en un navegador en la segunda prueba.
Siempre que el código generado no proporcione los resultados deseados u omita un componente importante, simplemente solicite a ChatGPT que reescriba el último código. Indíquele que incluya el componente o que haga lo que no se hizo en el código inicial. A continuación, se ofrecen algunos consejos sobre cómo usar ChatGPT para programar.
Creación de las páginas “send-messages.php” y “Fetch-messages”
Satisfechos con la interfaz, procedimos a crear el script para manejar la lógica de chat. Para poder enviar y obtener mensajes de la base de datos, ChatGPT destacó correctamente que necesitaremos una tabla de «mensajes». Le pedimos al chatbot que creara un SQL para la tabla de mensajes.
Después de generar un código SQL, le pedimos al chatbot que generara un script PHP para manejar la lógica de mensajería.
ChatGPT generó el script para las páginas “send-messages.php” y “fetch-messages.php”. Al ejecutar ambos scripts, finalmente tuvimos nuestro primer error (lo cual fue extrañamente satisfactorio). Llegar tan lejos en el proyecto sin depurar una sola línea de código parecía demasiado bueno para ser verdad, a pesar de su relativa simplicidad.
Resulta que el error fue causado por ChatGPT al introducir una comprobación de una variable de sesión no declarada ($_SESIÓN[‘user_id’]) en nuestro script. Sospechamos que esto fue el resultado de una pausa bastante prolongada en el proyecto, lo que provocó que ChatGPT olvidara algunos de los contextos y nombres de las variables utilizadas en el proyecto.
Al usar ChatGPT para crear una aplicación, asegúrese de usar el mismo hilo de chat e intente completar los componentes relacionados lo antes posible. Usar un nuevo hilo de chat o tomarse un descanso prolongado puede generar inconsistencias. ChatGPT tiende a olvidar algunos detalles del proyecto actual (por ejemplo, el esquema de colores) si toma descansos prolongados entre sesiones de codificación.
Dicho esto, arreglamos el error e implementamos el código. Nos registramos, iniciamos sesión y probamos la función de chat. Si bien pudimos enviar mensajes de un usuario registrado a otro, el color y la disposición de las burbujas de mensajes no eran del todo correctos. Sin embargo, para una aplicación que tardó una hora y 23 minutos en completarse, no la juzgaremos con demasiada dureza.
ChatGPT: un excelente asistente de codificación
ChatGPT es claramente un potente asistente de codificación. El hecho de que el chatbot pueda generar códigos impresionantes a partir de instrucciones simples y, a veces, no tan claras, es un testimonio de su destreza en la codificación.
Claro, todavía tiene muchos defectos. El problema con una ventana de contexto limitada y su capacidad para unir la lógica de múltiples componentes creados de forma independiente es un problema importante. Sin embargo, el chatbot puede ayudarte a crear aplicaciones web bastante complejas rápidamente si sabes cómo hacerlo.
Apoya nuestro trabajo ❤️
Si te ha gustado este artículo, considera dejar una propina para ayudarnos a seguir publicando contenido de calidad.
