Uso de ChatGPT para crear una aplicación web completa en ReactJS

Using ChatGPT to create a full-stack web application in ReactJS

En este tutorial, vamos a demostrar cómo crear una aplicación simple pero funcional lista de tareas pendientes con la ayuda de ChatGPT. Usaremos Back4App para el backend, React para el frontend, y Material-UI para el styling. Nuestro objetivo principal es ayudar a las personas con poco o ningún conocimiento de codificación para construir aplicaciones utilizando el poder de ChatGPT a través de una serie de indicaciones y orientación.

Panorama de las tecnologías

  • ChatGPT: ChatGPT es un potente modelo de lenguaje desarrollado por OpenAI. Se basa en la arquitectura GPT-4 y puede utilizarse para generar código, responder preguntas y proporcionar asistencia en diversas tareas.
  • Back4App: Back4App es una plataforma backend totalmente gestionada que simplifica el proceso de creación, alojamiento y gestión de aplicaciones web y móviles. Está construida sobre Parse, un framework de código abierto que ofrece varios servicios como almacenamiento de datos, autenticación de usuarios y funciones en la nube.
  • React: React es una popular librería JavaScript para construir interfaces de usuario. Facilita la creación y gestión de componentes de interfaz de usuario complejos y su estado.
  • Material-UI: Material-UI es una popular biblioteca de componentes React que implementa los principios de Material Design de Google, proporcionando componentes pre-construidos y capacidades temáticas para construir aplicaciones web hermosas y funcionales.

Configuración de Back4App

Para empezar con Back4App, necesitarás crear una cuenta y una nueva app en la plataforma. Sigue estos pasos:

  1. Regístrese para obtener una cuenta gratuita en https://www.back4app.com/.
  2. Accede a tu cuenta y crea una nueva aplicación.
  3. Después de crear la aplicación, vaya al “Dashboard” y anote su App ID, JavaScript Key y REST API Key, ya que los necesitará más adelante.

Creación del modelo de datos

He empezado a hacer una introducción a chatGPT de lo que quería. No le di demasiados detalles sobre el modelo de datos porque tenía curiosidad por ver lo que produciría. Mi mensaje a chat GPT fue:

Pregunta a ChatGPT: “Necesito tu ayuda para crear una App completa de ToDo List con ChatGPT y Back4app. Empecemos por crear el modelo de datos. ¿Puedes por favor generar el código para crear este modelo de datos usando los comandos cURL disponibles en Back4app? Usa la primera petición de creación de objeto para crear la clase completa”.

Ese fue el OutPut:

curl -X POST
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Ejemplo de tarea",
        "description": "Este es un ejemplo de descripción de tarea",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Después de eso comprobé Back4app y mi modelo de datos se creó correctamente:

Uso de cURL para añadir datos de muestra

Ahora pedí un chatGPT para dar algunos datos de muestra para llenar mi Clase:

Pregunta a ChatGPT: “Ahora dame 5 nuevas tareas como datos de muestra para poblar mi clase”.

# Tarea 1
curl -X POST
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Comprar comestibles",
        "description": "Comprar comestibles para la semana",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tarea 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Tarea completa",
        "description": "Terminar las tareas de matemáticas e historia",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Tarea 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Asistir a una cita médica",
        "description": "Revisión anual en el médico de cabecera",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tarea 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Llama al banco",
        "description": "Consulta sobre nuevas opciones de cuenta de ahorro",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Tarea 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \H
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Planea una escapada de fin de semana",
        "description": "Investigar y reservar alojamiento para un viaje corto",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

He ejecutado los comandos en mi Terminal. Ahora mi clase está poblada en Back4app:

Creación de la interfaz React

Ahora que tenemos nuestro backend configurado, vamos a crear un front-end para nuestra aplicación ToDo usando React. No estaba seguro de qué librería React usar para ayudarme a crear una mejor interfaz de usuario, así que le pedí su recomendación:

Pregunta a ChatGPT: “Ahora vamos a construir el front-end. Necesito un front-end bonito y útil en React. ¿Recomiendas usar alguna librería de componentes específica para eso?”

Esa es la respuesta:

He optado por el uso de Material-UI luego pidió crear el código.

Como ya tenía node instalado en mi ordenador fue fácil ejecutar los comandos y crear el proyecto. Si no tienes node instalado, puedes descargarlo e instalarlo aquí: https://nodejs.org/en/download

Primero he creado el proyecto React:

npx create-react-app todo-app
cd todo-app

y luego instalé los componentes que me recomendó en mi proyecto:

npm install @mui/material @emotion/react @emotion/styled parse

Ten en cuenta que si en algún momento chatGPT se detiene para escribir la respuesta puedes pedir continuar simplemente tecleando: “puede continuar”.

Ahora con el proyecto creado he reemplazado el código App.js según la petición de chatGPT y también he actualizado las claves: AppID y JavaScript Key.

Este es el código completo:

import React, { useState, useEffect } from 'react';
import Parse from 'parse';
import { Container, Typography, TextField, Button, List, ListItem, ListItemText, Checkbox, IconButton } from '@mui/material';
import { Delete as DeleteIcon } from '@mui/icons-material';

// Inicializa Parse con el ID de tu aplicación Back4App y la llave Javascript
Parse.initialize('YOUR_APP_ID_HERE', 'YOUR_JAVASCRIPT_KEY_HERE');
Parse.serverURL = 'https://parseapi.back4app.com/';

const TodoItem = Parse.Object.extend('TodoItem');

function App() {
  const [todoInput, setTodoInput] = useState('');
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const query = new Parse.Query(TodoItem);
    query.descending('createdAt');
    try {
      const results = await query.find();
      setTodos(resultados);
    } catch (error) {
      console.error('Error al obtener todos:', error);
    }
  };

  const createTodo = async () => { 
    if (todoInput === '') return;

    const todoItem = nuevo TodoItem();
    todoItem.set('título', todoInput);
    todoItem.set('completado', false);

    try {
      await todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (error) {
      console.error('Error al crear todo:', error);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('completado', !todo.get('completado'));
    try {
      await todo.guardar();
      fetchTodos();
    } catch (error) {
      console.error('Error al actualizar todo:', error);
    }
  };

  const borrarTodo = async (todo) => {
    try {
      await todo.destroy();
      fetchTodos();
    } catch (error) {
      console.error('Error al borrar todo:', error);
    }
  };

  return (
   
     
        Lista de tareas
     
       setTodoInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            createTodo();
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             deleteTodo(todo)}>
             
           
         
        ))}
     
   
  );
}

export default App;

Ejecutando el código pude ver, para mi sorpresa, una App funcional completa corriendo en mi máquina local y conectada a Back4app Backend:

Conclusión

En este tutorial, demostramos cómo aprovechar el poder de ChatGPT para construir una sencilla aplicación de lista de tareas usando Back4App, React y Material-UI. Cubrimos la configuración del backend con Back4App, la creación de un modelo de datos, la adición de datos de muestra con comandos cURL, y la construcción de un front-end hermoso y funcional usando React y Material-UI.

Al interactuar con ChatGPT a través de una serie de preguntas, pudimos generar fragmentos de código, orientación e instrucciones para cada paso, haciendo posible que usuarios con poco o ningún conocimiento de programación pudieran crear una aplicación web.

Este ejemplo muestra el potencial de ChatGPT como herramienta para ayudar a los usuarios en diversas tareas, incluido el desarrollo web. Con el continuo avance de las tecnologías de IA, podemos esperar herramientas aún más sofisticadas y potentes que ayuden a usuarios de diversos orígenes y niveles de habilidad a crear y desarrollar sus propios proyectos con facilidad.


Alysson Melo

Leave a reply

Your email address will not be published.