Utilizzo di ChatGPT per creare un’applicazione web full-stack in ReactJS

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

In questo tutorial dimostreremo come creare un’applicazione semplice ma funzionale per le liste ToDo con l’aiuto di ChatGPT. Utilizzeremo Back4App per il backend, React per il frontend e Material-UI per lo stile. Il nostro obiettivo principale è quello di aiutare le persone con scarse o nulle conoscenze di codifica a costruire applicazioni utilizzando le potenzialità di ChatGPT attraverso una serie di suggerimenti e indicazioni.

Panoramica delle tecnologie

  • ChatGPT: ChatGPT è un potente modello linguistico sviluppato da OpenAI. È basato sull’architettura GPT-4 e può essere utilizzato per generare codice, rispondere a domande e fornire assistenza in vari compiti.
  • Back4App: Back4App è una piattaforma di backend completamente gestita che semplifica il processo di creazione, hosting e gestione di applicazioni web e mobili. È costruita sulla base di Parse, un framework open-source che offre vari servizi come l’archiviazione dei dati, l’autenticazione degli utenti e le funzioni cloud.
  • React: React è una popolare libreria JavaScript per la costruzione di interfacce utente. Consente di creare e gestire facilmente componenti UI complessi e il loro stato.
  • Material-UI: Material-UI è una popolare libreria di componenti React che implementa i principi del Material Design di Google, fornendo componenti precostituiti e funzionalità di tematizzazione per costruire applicazioni web belle e funzionali.

Impostazione di Back4App

Per iniziare a utilizzare Back4App, è necessario creare un account e una nuova app sulla piattaforma. Seguite questi passaggi:

  1. Registrate un account gratuito su https://www.back4app.com/.
  2. Accedere al proprio account e creare una nuova applicazione.
  3. Dopo aver creato l’applicazione, navigare nella “Dashboard” e annotare l’ID dell’applicazione, la chiave JavaScript e la chiave API REST, che serviranno in seguito.

Creazione del modello di dati

Ho iniziato a fare un’introduzione a chatGPT di quello che volevo. Non gli ho fornito troppi dettagli sul modello dei dati perché ero curioso di vedere cosa avrebbe prodotto. La mia richiesta a chatGPT è stata:

Chiedete a ChatGPT: “Ho bisogno del vostro aiuto per creare un’applicazione completa per le liste ToDo con ChatGPT e Back4app. Cominciamo con la creazione del modello di dati. Potete generare il codice per creare questo modello di dati utilizzando i comandi cURL disponibili su Back4app? Utilizzare la prima richiesta di creazione di oggetti per creare l’intera classe”.

Questo era il risultato:

curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Task di esempio",
        "description": "Questa è la descrizione di un'attività di esempio",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Dopo di che ho controllato Back4app e il mio modello di dati è stato creato con successo:

Utilizzo di cURL per aggiungere dati di esempio

Ora ho chiesto una chatGPT per fornire alcuni dati di esempio per riempire la mia Classe:

Chiedete a ChatGPT: “Ora datemi 5 nuovi compiti come dati di esempio per popolare la mia classe”.

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

# Compito 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Compiti completi",
        "description": "Finisci i compiti di matematica e storia",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Compito 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Partecipa a una visita medica",
        "description": "Visita annuale di controllo dal medico di famiglia",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Compito 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Chiama la banca",
        "description": "Informarsi sulle nuove opzioni del conto di risparmio",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Compito 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Organizza una fuga per il weekend",
        "description": "Ricerca e prenotazione di alloggi per un breve viaggio",
        "dueDate": {
          "__type": "Date",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Ho eseguito i comandi sul mio terminale. Ora la mia classe è popolata su Back4app:

Costruire il front-end React

Ora che abbiamo configurato il nostro backend, creiamo un front-end per la nostra applicazione ToDo usando React. Non ero sicuro di quale libretto React usare per aiutarmi a creare una migliore interfaccia utente, quindi ho chiesto un consiglio:

Chiedete a ChatGPT: “Ora costruiamo il front-end. Ho bisogno di un front-end bello e utile in React. Mi consigliate di usare qualche libreria di componenti specifica per questo?”.

Questa è la risposta:

Ho optato per l’utilizzo di Material-UI e poi ho chiesto di creare il codice.

Poiché avevo già installato node sul mio computer, è stato facile eseguire i comandi e creare il progetto. Se non avete installato node, potete scaricarlo e installarlo qui: https://nodejs.org/en/download

Per prima cosa ho creato il progetto React:

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

e poi ho installato i componenti che mi ha consigliato sul mio progetto:

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

Si noti che se in qualsiasi momento chatGPT si ferma per scrivere la risposta, si può chiedere di continuare digitando semplicemente: “puoi continuare”.

Ora con il progetto creato ho sostituito il codice App.js come da richiesta di chatGPT e ho anche aggiornato le chiavi: AppID e JavaScript Key.

Questo è il codice completo:

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

// Inizializzare Parse con l'ID dell'app Back4App e la chiave 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(risultati);
    } catch (error) {
      console.error('Errore durante il recupero dei todos:', error);
    }
  };

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

    const todoItem = new TodoItem();
    todoItem.set('title', todoInput);
    todoItem.set('completed', false);

    try {
      await todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (error) {
      console.error('Errore durante la creazione di todo:', error);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('completed', !todo.get('completed'));
    try {
      await todo.save();
      fetchTodos();
    } catch (error) {
      console.error('Errore durante l'aggiornamento di todo:', error);
    }
  };

  const deleteTodo = async (todo) => {
    try {
      await todo.destroy();
      fetchTodo();
    } catch (error) {
      console.error('Errore durante la cancellazione di todo:', error);
    }
  };

  return (
   
     
        Elenco di cose da fare
     
       setTodoInput(e.target.value)}
        onKeyDown={(e) => {
          se (e.key === 'Enter') {
            createTodo();
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             cancellaTodo(todo)}>
             
           
         
        ))}
     
   
  );
}

export default App;

Eseguendo il codice ho potuto vedere, con mia grande sorpresa, un’applicazione funzionale completa in esecuzione sulla mia macchina locale e connessa a Back4app Backend:

Conclusione

In questo tutorial abbiamo dimostrato come sfruttare la potenza di ChatGPT per costruire una semplice applicazione per le liste ToDo utilizzando Back4App, React e Material-UI. Abbiamo affrontato la configurazione del backend con Back4App, la creazione di un modello di dati, l’aggiunta di dati di esempio con comandi cURL e la costruzione di un front-end bello e funzionale con React e Material-UI.

Interagendo con ChatGPT attraverso una serie di richieste, siamo stati in grado di generare frammenti di codice, indicazioni e istruzioni per ogni passaggio, rendendo possibile agli utenti con poche o nessuna conoscenza di codifica la costruzione di un’applicazione web.

Questo esempio mostra il potenziale di ChatGPT come strumento per assistere gli utenti in varie attività, tra cui lo sviluppo web. Con il continuo progresso delle tecnologie di intelligenza artificiale, possiamo aspettarci strumenti ancora più sofisticati e potenti, in grado di aiutare utenti con background e livelli di competenza diversi a creare e sviluppare i propri progetti con facilità.


Alysson Melo

Leave a reply

Your email address will not be published.