Cómo crear una aplicación web usando ChatGPT

Una de las mayores afirmaciones en torno a ChatGPT es que puede ser una poderosa herramienta de programación. La idea es la siguiente: describe lo que quiere en lenguaje natural; Y el chatbot generará un código que hace exactamente eso. Pero, ¿qué tan bueno es ChatGPT para hacer esto?

¿Qué mejor manera de averiguarlo que poniéndolo a prueba? Le pedimos a ChatGPT que creara una aplicación web simple desde cero. Aquí está el resultado de la prueba y los pasos que puede seguir para crear un sitio web desde cero con ChatGPT. revisamos Maneras en que ChatGPT puede ayudarte a escribir una novela.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Paso 1: Cree un plano para la aplicación web

Al igual que lo haría al crear una aplicación web utilizando cualquier plataforma personalizada, deberá diseñar un esquema de cómo desea que se vea su aplicación y los pasos que debe seguir para crearla antes de permitir que ChatGPT ejecute la representación. .

En la primera tarea, le pedimos a ChatGPT que desarrollara un plan para una aplicación de chat simple. Para hacer esto, describimos los requisitos de la aplicación web y luego le pedimos al chatbot que prepare un plan para desarrollar la aplicación en detalle.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Después de usar el mensaje anterior, este es el resultado que obtuvimos:

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Deberá habilitar el complemento "Mostrarme" en su cuenta de ChatGPT para crear un diagrama de flujo como el que se muestra arriba. Puede instalar y utilizar Complementos de ChatGPT En tan solo unos pasos, aunque necesitarás una suscripción premium.

Sin el complemento, obtendrá un esquema de texto o diagrama de flujo de arte ASCII. que también se puede utilizar. Incluso sin el complemento, ChatGPT aún debería proporcionar un esquema claro de la aplicación como el ejemplo a continuación.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Paso 2: divide el gráfico en unidades más pequeñas

Ahora que se dibuja el panorama general, le pedimos a ChatGPT que nos ayudara a dividir la aplicación en componentes más pequeños que se pueden desarrollar por separado y luego combinar para formar finalmente la aplicación web completa. ChatGPT sugirió dividirlo en tres componentes:

  1. Componente de registro.
  2. Configurador de inicio de sesión.
  3. Configurador de chat.

Ha habido otras ideas mejores, pero el objetivo aquí es permitir que ChatGPT tome el control y administre este proyecto.

1. Crear el componente de registro

Hemos pasado directamente al desarrollo del componente de registro. Le pedimos a ChatGPT que derivara un algoritmo adecuado. Aquí intervinimos especificando que solo necesitamos el nombre de usuario, correo electrónico y avatar de usuario para registrarse. Aquí está el reclamo:

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Aquí está el resultado:

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

A continuación, le pedimos a ChatGPT que creara el componente de registro.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Aunque no incluimos el campo de contraseña como parte del proceso de registro, ChatGPT realizó la conexió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 el navegador.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

A continuación, le pedimos a ChatGPT que generara nuestro código de registro PHP. Al principio, pedimos "escribir código PHP de lógica del lado del servidor para manejar el envío de formularios". Aunque el script generado funciona bien, tiene muchas debilidades.

No hubo hash de contraseñas, ni manejo de errores, y era vulnerable a la inyección de SQL: ChatGPT solo hizo lo mínimo de lo que se necesitaba hacer. Arreglar esto fue relativamente fácil. Simplemente le pedimos a ChatGPT que "identifique todo lo que no es compatible en el código que acaba de crear y luego use los puntos identificados para mejorar el código". Con eso, el complemento de registro de PHP estaba listo para funcionar.

Consejo: La redacción de sus mensajes de texto es importante. Debe ser muy claro y específico sobre lo que quiere que haga ChatGPT. Cuando simplemente le pedimos que "arregle este código", no solucionó la mayor parte de lo que esperábamos. Para obtener más orientación sobre cómo escribir indicaciones de ChatGPT, aquí hay algunos lugares para aprender Cómo escribir reclamos efectivos.

A continuación, le pedimos a ChatGPT que "escribiera código SQL para crear una base de datos para almacenar los datos capturados en un script PHP". Aquí está el código SQL resultante:

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Y aquí está la tabla creada al ejecutar SQL:

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Con la base de datos configurada, probamos el primer proceso de registro y funcionó sin errores. Verificar Las mejores maneras fáciles de obtener experiencia en SQL antes de su primer trabajo.

2. Cree el componente de inicio de sesión

Con el componente de registro bien hecho, pasamos a crear el componente de inicio de sesión. Sorprendentemente, fue el más fácil de desarrollar a pesar de la lógica adicional de administración de sesiones.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Aquí está la página de inicio de sesión creada. Una de sus características más destacadas es que utiliza las mismas opciones de color que la página de registro.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Después de crear el archivo "server.login.php" según las instrucciones de ChatGPT y agregar el script PHP generado, hicimos nuestro primer inicio de sesión exitoso sin modificaciones ni depuración.

3. Crea el bloque de chat

Desarrollar el complemento de chat fue la última parte, y quizás la más difícil, de nuestro pequeño experimento. Al principio, simplemente le pedimos a ChatGPT que escribiera el código apropiado para nuestro complemento de chat. No hace falta decir que fue un fracaso abismal. Para poder desarrollar los componentes más complejos de cualquier cosa que desee construir, deberá dividirlo en componentes más pequeños y procesarlos uno por uno.

Le pedimos a ChatGPT sugerencias sobre cómo dividir el componente de chat y sugirió crear tres páginas:

  1. charla.php
  2. Enviar-mensajes.php
  3. Buscar-mensajes.php

Consejo: Cuando ChatGPT sugiere un nombre de archivo, usar un nombre diferente en su proyecto puede causar problemas sin darse cuenta, ya que el chatbot se referirá al mismo nombre en todo el código que genera a lo largo del proyecto. Lo descubrimos de la manera difícil. No cometas el mismo error.

Crear una página Chat.php

Para comenzar, proporcionamos instrucciones paso a paso de ChatGPT sobre cómo debería ser su interfaz de chat.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Después de ejecutar el código HTML generado, tenemos una interfaz de chat sin un cuadro de entrada de mensajes. Para solucionar esto, simplemente le pedimos a ChatGPT que "reescribiera el código para incluir un cuadro de entrada de mensaje y un botón de envío". Así es como se verá el código generado en el navegador en la segunda versión beta.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Consejo: Cuando el código generado no produce los resultados deseados o pierde un componente importante, simplemente solicite a ChatGPT que reescriba el último código. Pídale que incluya el componente o que haga algo que no se haya hecho en el código sin formato. Aquí hay algunos consejos sobre Cómo usar ChatGPT en la programación.

Crear páginas "send-messages.php" y "fetch-messages"

Después de estar satisfechos con la interfaz, procedimos a construir el script para manejar la lógica del chat. Para poder enviar y obtener mensajes de la base de datos, ChatGPT realmente destacó que necesitaríamos una tabla de "mensajes". Le pedimos al chatbot que creara la tabla de mensajes usando SQL.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

Después de generar el código SQL, le pedimos al chatbot que generara un script PHP para manejar la lógica de mensajería.

Cómo crear una aplicación web usando ChatGPT - Inteligencia Artificial

ChatGPT generó el script para las páginas "send-messages.php" y "fetch-messages.php". Al ejecutar ambos scripts, finalmente nos encontramos con el primer error (que fue extrañamente satisfactorio). Llegar tan lejos en un proyecto sin depurar una sola línea de código parece bastante bueno, a pesar de su relativa simplicidad.

Resulta que el error fue causado por ChatGPT al insertar una verificación de una variable de sesión no declarada ($_SESSION['user_id']) en el script. Sospechamos que esto se debió a que se tomó un largo descanso del proyecto, lo que provocó que ChatGPT olvidara algunos contextos y nombres de variables utilizados en el proyecto.

Consejo: Cuando use ChatGPT para crear una aplicación, asegúrese de usar el mismo hilo de chat e intente completar los componentes relevantes lo antes posible. Usar un nuevo hilo o tomar un descanso prolongado puede generar inconsistencias. ChatGPT tiende a olvidar algunos detalles del proyecto actual (como el esquema de colores) si toma largos descansos entre las sesiones de programación.

Sin embargo, arreglamos el error y publicamos 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 eran un poco inconsistentes. Sin embargo, para una aplicación que tardó 23 hora y XNUMX minutos en completarse, no la juzgaríamos con tanta dureza.

ChatGPT: un excelente ayudante para la programación

ChatGPT es claramente un poderoso asistente de programación. La capacidad del chatbot para generar un código impresionante a partir de indicaciones simples, a veces no del todo obvias, es un testimonio de su destreza en la codificación.

Por supuesto, todavía hay muchos inconvenientes. La ventana de contexto limitada y su capacidad para vincular la lógica de varios componentes creados de forma independiente es un problema importante. Sin embargo, un chatbot puede ayudarlo a crear aplicaciones web bastante complejas rápidamente si conoce el camino. Puedes ver ahora Formas en que puede usar ChatGPT como ayudante de cocina.

DzTech

Soy ingeniero estatal con amplia experiencia en los campos de programación, creación de sitios web, SEO y redacción técnica. Me apasiona la tecnología y me dedico a brindar información de calidad al público. Puedo convertirme en un recurso más valioso para los usuarios que buscan información precisa y confiable sobre reseñas de productos y aplicaciones especializadas en diversos campos. Mi compromiso inquebrantable con la calidad y la precisión garantiza que la información proporcionada sea confiable y útil para la audiencia. La búsqueda constante de conocimiento me impulsa a estar al día con los últimos avances tecnológicos, asegurando que las ideas compartidas se transmitan de forma clara y accesible.
Ir al botón superior