Cómo construir una aplicación web con ChatGPT

Cómo construir una aplicación web con ChatGPT
Lectores como tú ayudan a apoyar a MUO. Cuando realiza una compra utilizando enlaces en nuestro sitio, podemos ganar una comisión de afiliado. Leer más.

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





MAKEUSEOF VÍDEO DEL DÍA DESPLAZAR PARA CONTINUAR CON EL CONTENIDO

¿Qué mejor manera de averiguarlo que poniéndolo a prueba? Le pedimos a ChatGPT que creara una aplicación web simple desde cero. Este es el resultado de nuestra prueba y los pasos que puede seguir para crear un sitio web desde cero usando ChatGPT.





Paso 1: Generación del Blueprint para su aplicación web

Al igual que lo haría al crear una aplicación web con cualquier herramienta, debe diseñar el modelo de cómo desea que se vea su aplicación y los pasos que deberá seguir para crearla antes de permitir que ChatGPT ejecute el programa.





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

  Solicitud de ChatGPT para desarrollar un plan para la aplicación web

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



  Diagrama de flujo o plano de la aplicación web desarrollada por chatgpt

Necesitaría tener habilitado el complemento 'Show Me' en su cuenta de ChatGPT para generar un diagrama de flujo como el nuestro arriba. Puede 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 de arte ASCII. Eso todavía está bien. Incluso sin el complemento, ChatGPT aún debería proporcionar un modelo claro de la aplicación como el ejemplo a continuación.





¿Qué generación es el ipad más nuevo?
  desglose basado en texto de la aplicación web por ChatGPT

Paso 2: dividir el proyecto en módulos más pequeños

Ahora que tenemos el panorama completo, le pedimos ayuda a ChatGPT para dividir la aplicación en componentes más pequeños que podemos desarrollar por separado y luego integrar para formar la aplicación web completa. ChatGPT sugirió dividirlo en tres componentes:

cómo evitar que netflix se pause
  1. Módulo de registro
  2. Módulo de inicio de sesión
  3. Módulo de chat

Teníamos otras ideas, pero el objetivo aquí es dejar que ChatGPT tome las decisiones.





1. Construyendo el Componente de Registro

Saltamos directamente a la construcción del componente de registro. Le pedimos a ChatGPT que dibujara un algoritmo apropiado. Aquí intervinimos especificando que solo necesitábamos el nombre de usuario, el correo electrónico y el avatar del usuario para registrarse. Aquí está el aviso:

  Aviso para construir el componente de registro

Y aquí está el resultado:

  Algoritmo para el registro de usuarios

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

  aviso para generar 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.

  Página de registro generada por ChatGPT

A continuación, solicitamos a ChatGPT que generara el script de registro de PHP. Al principio, solicitamos 'Escriba un código PHP para la lógica del lado del servidor para manejar el envío del formulario'. Aunque el script generado funcionó bien, tenía muchas vulnerabilidades.

No hubo hash de contraseñas, ni manejo de errores, y era propenso a la inyección de SQL: ChatGPT solo hizo lo mínimo. Arreglar esto fue relativamente fácil. Simplemente le pedimos a ChatGPT que 'identifique todo lo que está mal con el código que acaba de generar y luego use los puntos identificados para optimizar el código'. Con eso, nuestro script de registro de PHP estaba listo para funcionar.