Utiliser ChatGPT pour créer une application web complète en ReactJS

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

Dans ce tutoriel, nous allons montrer comment créer une application de liste de tâches simple mais fonctionnelle avec l’aide de ChatGPT. Nous utiliserons Back4App pour le backend, React pour le frontend et Material-UI pour le style. Notre objectif principal est d’aider les personnes ayant peu ou pas de connaissances en codage à créer des applications en utilisant la puissance de ChatGPT à travers une série d’invites et de conseils.

Aperçu des technologies

  • ChatGPT: ChatGPT est un puissant modèle de langage développé par OpenAI. Il est basé sur l’architecture GPT-4 et peut être utilisé pour générer du code, répondre à des questions et fournir une assistance dans diverses tâches.
  • Back4App: Back4App est une plateforme backend entièrement gérée qui simplifie le processus de construction, d’hébergement et de gestion des applications web et mobiles. Elle est construite au-dessus de Parse, un cadre open-source qui offre divers services tels que le stockage des données, l’authentification des utilisateurs et les fonctions cloud.
  • React: React est une bibliothèque JavaScript populaire pour la construction d’interfaces utilisateur. Elle facilite la création et la gestion de composants d’interface utilisateur complexes et de leur état.
  • Material-UI: Material-UI est une bibliothèque de composants React populaire qui met en œuvre les principes du Material Design de Google, en fournissant des composants préconstruits et des capacités de thématisation pour construire des applications web belles et fonctionnelles.

Mise en place de Back4App

Pour commencer avec Back4App, vous devez créer un compte et une nouvelle application sur la plateforme. Suivez les étapes suivantes :

  1. Ouvrez un compte gratuit sur https://www.back4app.com/.
  2. Connectez-vous à votre compte et créez une nouvelle application.
  3. Après avoir créé l’application, naviguez jusqu’au “Tableau de bord” et notez votre App ID, JavaScript Key et REST API Key, car vous en aurez besoin plus tard.

Création du modèle de données

J’ai commencé à présenter à chatGPT ce que je voulais. Je ne lui ai pas donné trop de détails sur le modèle de données car j’étais curieux de voir ce qu’il allait produire. L’invitation que j’ai faite à chat GPT était la suivante :

Ask ChatGPT : “J’ai besoin de votre aide pour créer une application complète de liste de tâches avec ChatGPT et Back4app. Commençons par créer le modèle de données. Pouvez-vous générer le code pour créer ce modèle de données en utilisant les commandes cURL disponibles sur Back4app ? Utilisez la première demande de création d’objet pour créer la classe entière.”

C’était l’OutPut :

curl -X POST \N- -H "X-Parse-Application-Id" -H "X-Parse-Application-Id
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrT
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-application-Id : zGWtprmiOpsVuCpRf9hML3ahOSf5BL5rhcaT
  -H "Content-Type : application/json" \N- -d '{{{{}}}}} \N-{{{{}}}}
  -d '{
        "title" : "Sample Task",
        "description" : "Ceci est un exemple de description de tâche",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-11T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task

Après cela, j’ai vérifié Back4app et mon modèle de données a été créé avec succès :

Utilisation de cURL pour ajouter des données échantillons

J’ai alors demandé à un chatGPT de me fournir un échantillon de données pour remplir ma classe :

Demandez à ChatGPT : “Maintenant, donnez-moi 5 nouvelles tâches comme exemples de données pour alimenter ma classe”.

# Tâche 1
curl -X POST \N- -H "X-Parse-Application-Id :".
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N-H "X-Parse-REST-API-Key : gk8Zy2uCWriTww5
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-API-Key" \N -H
  -H "Content-Type : application/json" \N
  -d '{
        "title" : "Acheter des provisions",
        "description" : "Acheter des provisions pour la semaine",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-11T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task

# Tâche 2
curl -X POST \N
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N -H "X-Parse-REST-API-Key : gk8Zy2uCWrift
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-application-Id : zGWtprmiOpsVuCpRf9hML3ahOSf5BL5rhcaT
  -H "Content-Type : application/json" \N- -d '{{{{}}}}} \N-{{{{}}}}
  -d '{
        "title" : "Devoir complet",
        "description" : "Finir les devoirs de maths et d'histoire",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-12T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task


# Tâche 3
curl -X POST \N
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N-H "X-Parse-REST-API-Key : gk8Zy2uCWriTww5
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-API-Key" \N -H
  -H "Content-Type : application/json" \N
  -d '{
        "title" : "Assister à un rendez-vous chez le médecin",
        "description" : "Contrôle annuel chez le médecin de famille",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-13T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task

# Tâche 4
curl -X POST \N
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N -H "X-Parse-REST-API-Key : gk8Zy2uCWrift
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-API-Key" \N -H
  -H "Content-Type : application/json" \N
  -d '{
        "title" : "Call the bank",
        "description" : "Se renseigner sur les nouvelles options du compte d'épargne",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-14T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task

# Tâche 5
curl -X POST \N
  -H "X-Parse-Application-Id : zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \N -H "X-Parse-REST-API-Key : gk8Zy2uCWrift
  -H "X-Parse-REST-API-Key : gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \N -H "Content-Type : application-API-Key" \N -H
  -H "Content-Type : application/json" \N
  -d '{
        "title" : "Planifier un week-end d'évasion",
        "description" : "Rechercher et réserver des hébergements pour un court voyage",
        "dueDate" : {
          "__type" : "Date",
          "iso" : "2023-04-15T00:00:00.000Z"
        },
        "completed" : faux
      }' \
  https://parseapi.back4app.com/classes/Task

J’ai exécuté les commandes sur mon Terminal. Maintenant ma classe est remplie sur Back4app :

Construire l’interface React

Maintenant que nous avons mis en place notre backend, créons un front-end pour notre application ToDo en utilisant React. Je ne savais pas quelle librairie React utiliser pour m’aider à créer une meilleure interface utilisateur, j’ai donc demandé sa recommandation :

Ask ChatGPT : “Maintenant, construisons le front-end. J’ai besoin d’un front-end beau et utile en React. Est-ce que vous recommandez d’utiliser une bibliothèque de composants spécifique pour cela ?”

C’est la réponse :

J’ai opté pour l’utilisation de Material-UI puis j’ai demandé de créer le code.

Comme j’avais déjà installé node sur mon ordinateur, il a été facile d’exécuter les commandes et de créer le projet. Si vous n’avez pas installé node, vous pouvez le télécharger et l’installer ici : https://nodejs.org/en/download

J’ai d’abord créé le projet React :

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

et j’ai ensuite installé les composants qu’il m’a recommandés sur mon projet :

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

Notez que si, à un moment donné, chatGPT s’arrête d’écrire la réponse, vous pouvez demander à continuer en tapant simplement : “vous pouvez continuer”.

Maintenant que le projet est créé, j’ai remplacé le code App.js conformément à la demande de chatGPT et j’ai également mis à jour les clés : AppID et JavaScript Key.

Voici le code complet :

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' ;

// Initialiser Parse avec votre Back4App App ID et Javascript Key
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(results) ;
    } catch (error) {
      console.error('Error while fetching 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('Error while creating todo:', error) ;
    }
  } ;

  const toggleTodo = async (todo) => {
    todo.set('completed', !todo.get('completed')) ;
    try {
      await todo.save() ;
      fetchTodos() ;
    } catch (error) {
      console.error('Error while updating todo:', error) ;
    }
  } ;

  const deleteTodo = async (todo) => {
    try {
      await todo.destroy() ;
      fetchTodos() ;
    } catch (error) {
      console.error('Error while deleting todo:', error) ;
    }
  } ;

  return (
   
     
        Liste des tâches
     
       setTodoInput(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') {
            createTodo() ;
          }
        }}
      />
     
     
        {todos.map((todo) => (
         
             toggleTodo(todo)}
            />
           
             deleteTodo(todo)}>
             
           
         
        ))}
     
   
  ) ;
}

export default App ;

En exécutant le code, j’ai pu voir, à ma grande surprise, une application fonctionnelle complète fonctionnant sur ma machine locale et connectée au Back4app Backend :

Conclusion

Dans ce tutoriel, nous avons démontré comment tirer parti de la puissance de ChatGPT pour construire une simple application de liste de tâches en utilisant Back4App, React et Material-UI. Nous avons couvert la configuration du backend avec Back4App, la création d’un modèle de données, l’ajout d’échantillons de données avec des commandes cURL, et la construction d’un front-end beau et fonctionnel en utilisant React et Material-UI.

En interagissant avec ChatGPT par le biais d’une série d’invites, nous avons pu générer des extraits de code, des conseils et des instructions pour chaque étape, ce qui a permis à des utilisateurs ayant peu ou pas de connaissances en matière de codage de créer une application web.

Cet exemple illustre le potentiel de ChatGPT en tant qu’outil d’assistance aux utilisateurs dans diverses tâches, y compris le développement web. Avec les progrès continus des technologies de l’IA, nous pouvons nous attendre à des outils encore plus sophistiqués et puissants qui aideront les utilisateurs de tous horizons et de tous niveaux de compétences à créer et à développer leurs propres projets en toute simplicité.


Alysson Melo

Leave a reply

Your email address will not be published.