Verwendung von ChatGPT zur Erstellung einer vollständigen Webanwendung in ReactJS

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

In diesem Tutorial zeigen wir, wie man mit Hilfe von ChatGPT eine einfache und dennoch funktionale ToDo-Listen-App erstellt. Wir werden Back4App für das Backend, React für das Frontend und Material-UI für das Styling verwenden. Unser Hauptziel ist es, Menschen mit wenig oder gar keinen Programmierkenntnissen durch eine Reihe von Hinweisen und Anleitungen zu helfen, Anwendungen mit Hilfe von ChatGPT zu erstellen.

Überblick über die Technologien

  • ChatGPT: ChatGPT ist ein leistungsstarkes Sprachmodell, das von OpenAI entwickelt wurde. Es basiert auf der GPT-4-Architektur und kann verwendet werden, um Code zu generieren, Fragen zu beantworten und bei verschiedenen Aufgaben zu helfen.
  • Back4App: Back4App ist eine vollständig verwaltete Backend-Plattform, die den Prozess der Erstellung, des Hostings und der Verwaltung von Web- und Mobilanwendungen vereinfacht. Sie baut auf Parse auf, einem Open-Source-Framework, das verschiedene Dienste wie Datenspeicherung, Benutzerauthentifizierung und Cloud-Funktionen bietet.
  • React: React ist eine beliebte JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen. Sie erleichtert die Erstellung und Verwaltung komplexer UI-Komponenten und ihres Zustands.
  • Material-UI: Material-UI ist eine beliebte React-Komponentenbibliothek, die die Material-Design-Prinzipien von Google umsetzt und vorgefertigte Komponenten und Theming-Funktionen zur Erstellung schöner und funktionaler Webanwendungen bietet.

Back4App einrichten

Um mit Back4App zu beginnen, müssen Sie ein Konto und eine neue App auf der Plattform erstellen. Folgen Sie diesen Schritten:

  1. Melden Sie sich für ein kostenloses Konto bei https://www.back4app.com/ an.
  2. Melden Sie sich bei Ihrem Konto an und erstellen Sie eine neue App.
  3. Nachdem Sie die App erstellt haben, navigieren Sie zum “Dashboard” und notieren Sie sich Ihre App-ID, Ihren JavaScript-Schlüssel und Ihren REST-API-Schlüssel, da Sie diese später benötigen.

Erstellen des Datenmodells

Ich habe begonnen, chatGPT eine Einführung in das zu geben, was ich wollte. Ich habe ihm nicht zu viele Details über das Datenmodell gegeben, weil ich neugierig war, was er produzieren würde. Meine Aufforderung an chatGPT war:

Fragen Sie ChatGPT: “Ich brauche Ihre Hilfe, um eine komplette ToDo-Listen-App mit ChatGPT und Back4app zu erstellen. Lassen Sie uns mit der Erstellung des Datenmodells beginnen. Können Sie bitte den Code für die Erstellung dieses Datenmodells mit Hilfe der cURL-Befehle, die auf Back4app verfügbar sind, generieren? Verwenden Sie die erste Anfrage zur Objekterstellung, um die gesamte Klasse zu erstellen.”

Das war der OutPut:

curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Sample Task",
        "description": "Dies ist eine Beispiel-Aufgabenbeschreibung.",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Danach habe ich Back4app überprüft und mein Datenmodell wurde erfolgreich erstellt:

cURL verwenden, um Beispieldaten hinzuzufügen

Nun bat ich um ein chatGPT, um einige Beispieldaten für meine Klasse zu erhalten:

Fragen Sie ChatGPT: “Geben Sie mir jetzt 5 neue Aufgaben als Beispieldaten, um meine Klasse aufzufüllen.”

# Aufgabe 1
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Buy groceries",
        "description": "Einkauf von Lebensmitteln für die Woche",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-11T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Aufgabe 2
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Complete homework",
        "description": "Beende Mathe- und Geschichtsaufgaben",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-12T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task


# Aufgabe 3
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Einen Arzttermin wahrnehmen",
        "description": "Jährliche Kontrolluntersuchung beim Hausarzt",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-13T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Aufgabe 4
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Call the bank",
        "description": "Erkundigen Sie sich nach neuen Sparkonto-Optionen",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-14T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

# Aufgabe 5
curl -X POST \
  -H "X-Parse-Application-Id: zGWtprmiOpsVuVCpRfT9hmyML3ahOSf5BL5rhcaT" \
  -H "X-Parse-REST-API-Key: gk8Zy2uCWriTwmYrtFCe7oobLDTKBihF0wMlFFnu" \
  -H "Content-Type: application/json" \
  -d '{
        "title": "Plan a weekend getaway",
        "description": "Recherche und Buchung von Unterkünften für einen Kurztrip",
        "dueDate": {
          "__type": "Datum",
          "iso": "2023-04-15T00:00:00.000Z"
        },
        "completed": false
      }' \
  https://parseapi.back4app.com/classes/Task

Ich habe die Befehle in meinem Terminal ausgeführt. Jetzt ist meine Klasse auf Back4app aufgefüllt:

Aufbau des React-Frontends

Nachdem wir nun unser Backend eingerichtet haben, wollen wir mit React ein Frontend für unsere ToDo-App erstellen. Ich war mir nicht sicher, welche React-Lib ich verwenden sollte, um eine bessere Benutzeroberfläche zu erstellen, also habe ich ihn um eine Empfehlung gebeten:

Fragen Sie ChatGPT: “Jetzt lassen Sie uns das Frontend bauen. Ich brauche ein schönes und nützliches Frontend in React. Empfiehlst du, dafür eine bestimmte Komponentenbibliothek zu verwenden?”

Das ist die Antwort:

Ich habe mich für die Verwendung von Material-UI entschieden und dann gebeten, den Code zu erstellen.

Da ich Node bereits auf meinem Computer installiert hatte, war es einfach, die Befehle auszuführen und das Projekt zu erstellen. Wenn Sie Node noch nicht installiert haben, können Sie es hier herunterladen und installieren: https://nodejs.org/en/download

Zuerst habe ich das React-Projekt erstellt:

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

und installierte dann die Komponenten, die er mir für mein Projekt empfahl:

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

Beachten Sie, dass, wenn chatGPT in irgendeinem Moment aufhört, die Antwort zu schreiben, Sie darum bitten können, fortzufahren, indem Sie einfach tippen: “Sie können fortfahren”.

Jetzt, wo das Projekt erstellt ist, habe ich den App.js-Code gemäß der chatGPT-Anfrage ersetzt und auch die Schlüssel aktualisiert: AppID und JavaScript-Schlüssel.

Dies ist der vollständige Code:

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

// Initialisieren Sie Parse mit Ihrer Back4App App ID und Ihrem Javascript Key
Parse.initialize('IHRE_APP_ID_HERE', 'IHR_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 (Fehler) {
      console.error('Fehler beim Abrufen von ToDos:', error);
    }
  };

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

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

    try {
      await todoItem.save();
      setTodoInput('');
      fetchTodos();
    } catch (Fehler) {
      console.error('Fehler beim Erstellen von todo:', error);
    }
  };

  const toggleTodo = async (todo) => {
    todo.set('abgeschlossen', !todo.get('abgeschlossen'));
    try {
      await todo.save();
      fetchTodos();
    } catch (Fehler) {
      console.error('Fehler beim Aktualisieren von todo:', error);
    }
  };

  const deleteTodo = async (todo) => {
    try {
      await todo.destroy();
      fetchTodos();
    } catch (error) {
      console.error('Fehler beim Löschen von todo:', error);
    }
  };

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

export default App;

Als ich den Code ausführte, konnte ich zu meiner Überraschung sehen, dass eine vollständig funktionierende App auf meinem lokalen Rechner lief und mit dem Back4app Backend verbunden war:

Schlussfolgerung

In diesem Tutorial haben wir gezeigt, wie man die Leistungsfähigkeit von ChatGPT nutzen kann, um eine einfache ToDo-Listen-App mit Back4App, React und Material-UI zu erstellen. Wir haben das Einrichten des Backends mit Back4App, das Erstellen eines Datenmodells, das Hinzufügen von Beispieldaten mit cURL-Befehlen und das Erstellen eines schönen und funktionalen Frontends mit React und Material-UI behandelt.

Durch die Interaktion mit ChatGPT über eine Reihe von Eingabeaufforderungen konnten wir für jeden Schritt Codeschnipsel, Anleitungen und Anweisungen generieren, so dass auch Benutzer mit geringen oder gar keinen Programmierkenntnissen eine Webanwendung erstellen können.

Dieses Beispiel zeigt das Potenzial von ChatGPT als Werkzeug zur Unterstützung von Benutzern bei verschiedenen Aufgaben, einschließlich der Webentwicklung. Mit der kontinuierlichen Weiterentwicklung von KI-Technologien können wir noch ausgefeiltere und leistungsfähigere Tools erwarten, die Nutzern mit unterschiedlichem Hintergrund und Qualifikationsniveau helfen, ihre eigenen Projekte mit Leichtigkeit zu erstellen und zu entwickeln.


Alysson Melo

Leave a reply

Your email address will not be published.