Viele Leute haben verkündet, dass ChatGPT unsere Aufsätze schreiben, unsere Bilder malen und unsere Suchanfragen beantworten kann. Aber kann es auch programmieren?

Eine der größten Behauptungen des Hypes um ChatGPT ist, dass es ein effektives Programmiertool sein kann. Die Idee lautet wie folgt: Sie beschreiben, was Sie wollen, in natürlicher Sprache; Der Chatbot generiert Code, der genau das tut. Aber wie gut ist ChatGPT tatsächlich darin?

Gibt es einen besseren Weg, dies herauszufinden, als es auf die Probe zu stellen? Wir haben ChatGPT gebeten, eine einfache Web-App von Grund auf zu erstellen. Hier ist das Ergebnis unseres Tests und die Schritte, mit denen Sie mit ChatGPT eine Website von Grund auf erstellen können.

Schritt 1: Generieren des Blueprints für Ihre Web-App

Genau wie beim Erstellen einer Web-App mit einem beliebigen Tool müssen Sie den Entwurf dafür entwerfen Sie möchten, dass Ihre App aussieht und welche Schritte Sie zum Erstellen benötigen, bevor Sie ChatGPT ausführen lassen zeigen.

instagram viewer

Für unsere erste Aufgabe haben wir ChatGPT gebeten, einen Entwurf für eine einfache Chat-App zu entwickeln. Dazu haben wir die Anforderungen an unsere Web-App beschrieben und anschließend den Chatbot gebeten, einen Plan für die Entwicklung der App zu erarbeiten.

Nachdem wir die obige Eingabeaufforderung verwendet haben, ist hier das Ergebnis, das wir erhalten haben:

Sie müssen das „Show Me“-Plugin in Ihrem ChatGPT-Konto aktiviert haben, um ein Flussdiagramm wie unseres oben zu erstellen. Du kannst Installieren und verwenden Sie ChatGPT-Plugins in nur wenigen Schritten, allerdings benötigen Sie dafür ein Premium-Abonnement.

Ohne das Plugin erhalten Sie einen textbasierten Entwurf oder ein ASCII-Flussdiagramm. Das ist immer noch in Ordnung. Auch ohne das Plugin sollte ChatGPT immer noch eine klare Blaupause der App liefern, wie im Beispiel unten.

Schritt 2: Aufteilen des Blueprints in kleinere Module

Nachdem wir nun das Gesamtbild dargelegt haben, haben wir ChatGPT um Hilfe bei der Aufteilung der App in kleinere Komponenten gebeten, die wir separat entwickeln und dann integrieren können, um die vollständige Web-App zu bilden. ChatGPT schlug vor, es in drei Komponenten zu unterteilen:

  1. Registrierungsmodul
  2. Login-Modul
  3. Chat-Modul

Wir hatten andere Ideen, aber das Ziel hier ist, ChatGPT das Sagen zu überlassen.

1. Erstellen der Registrierungskomponente

Wir haben sofort mit dem Aufbau der Registrierungskomponente begonnen. Wir haben ChatGPT gebeten, einen geeigneten Algorithmus zu entwickeln. Hier haben wir interveniert, indem wir angegeben haben, dass wir für die Registrierung nur den Benutzernamen, die E-Mail-Adresse und den Avatar des Benutzers benötigen. Hier ist die Eingabeaufforderung:

Und hier ist das Ergebnis:

Als nächstes haben wir ChatGPT aufgefordert, die Registrierungskomponente zu erstellen.

Obwohl wir das Passwortfeld nicht in den Registrierungsprozess aufgenommen haben, hat ChatGPT die richtige Entscheidung getroffen, indem es es in den generierten HTML-Code eingefügt hat. Wir haben den Code ohne Änderungen kopiert und so sieht er in einem Browser aus.

Als nächstes forderten wir ChatGPT auf, das PHP-Registrierungsskript zu generieren. Zuerst forderten wir Sie auf: „Schreiben Sie einen PHP-Code für die serverseitige Logik zur Verarbeitung der Formularübermittlung.“ Obwohl das generierte Skript gut funktionierte, wies es viele Schwachstellen auf.

Es gab kein Passwort-Hashing, keine Fehlerbehandlung und war anfällig für SQL-Injection – ChatGPT leistete nur das Nötigste. Das zu beheben war relativ einfach. Wir haben ChatGPT einfach gebeten, „alle Fehler mit dem Code, den Sie gerade generiert haben, zu identifizieren, und dann Nutzen Sie die identifizierten Punkte, um den Code zu optimieren.“ Damit war unser PHP-Registrierungsskript bereit gehen.

Der Wortlaut Ihrer Aufforderung ist wichtig. Sie müssen sehr klar und spezifisch darlegen, was ChatGPT tun soll. Als wir es einfach darum baten, „das Problem mit diesem Code zu beheben“, wurde das meiste, was wir gehofft hatten, nicht behoben. Weitere Anleitungen zum Schreiben von ChatGPT-Eingabeaufforderungen finden Sie hier Einige Orte, an denen Sie lernen können, wie man wirkungsvolle Aufforderungen schreibt.

Als nächstes haben wir ChatGPT gebeten, „Schreiben Sie einen SQL-Code, um eine Datenbank für die im PHP-Skript erfassten Daten zu erstellen.„Hier ist der resultierende SQL-Code:

Und hier ist die Tabelle, die durch die Ausführung von SQL erstellt wurde:

Nachdem die Datenbank eingerichtet war, haben wir unsere erste Registrierung versucht und sie hat ohne Fehler funktioniert.

2. Erstellen der Login-Komponente

Nachdem wir die Registrierungskomponente erledigt hatten, übernahmen wir die Login-Komponente. Überraschenderweise war es trotz der zusätzlichen Logik der Sitzungsverwaltung am einfachsten zu erstellen.

Hier ist die generierte Anmeldeseite. Ein wesentliches Highlight ist, dass die gleichen Farboptionen wie auf der Registrierungsseite verwendet werden.

Nachdem wir gemäß den Anweisungen von ChatGPT eine Datei „server.login.php“ erstellt und das generierte PHP-Skript hinzugefügt hatten, führten wir unsere erste erfolgreiche Anmeldung ohne Änderungen oder Debugging durch.

3. Erstellen der Chat-Komponente

Der Aufbau der Chat-Komponente war der letzte – und wahrscheinlich schwierigste – Teil unseres kleinen Experiments. Zuerst haben wir ChatGPT einfach gebeten, den Code für die Chat-Komponente zu schreiben. Unnötig zu erwähnen, dass es ein kolossaler Misserfolg war. Komplexere Komponenten von allem, was Sie erstellen möchten, müssen Sie in kleinere Komponenten aufteilen und diese nacheinander bearbeiten.

Wir haben ChatGPT um Vorschläge zur Aufteilung der Chat-Komponente gebeten und uns wurde vorgeschlagen, drei Seiten zu erstellen:

  1. Chat.php
  2. Send-messages.php
  3. Fetch-messages.php

Wenn ChatGPT einen Dateinamen vorschlägt, kann die Verwendung eines anderen Namens in Ihrem Projekt versehentlich zu Problemen führen Probleme, da der Chatbot im gesamten von ihm erstellten Code auf denselben Namen verweist Projekt. Wir haben es auf die harte Tour herausgefunden. Machen Sie nicht den gleichen Fehler.

Erstellen der Chat.php-Seite

Zu Beginn gaben wir ChatGPT detaillierte Anweisungen, wie die Chat-Oberfläche aussehen sollte.

Nachdem wir den generierten HTML-Code ausgeführt hatten, hatten wir eine Chat-Oberfläche ohne Nachrichteneingabefeld. Um dies zu beheben, haben wir ChatGPT einfach aufgefordert, „Schreiben Sie den Code so um, dass er ein Nachrichteneingabefeld und eine Schaltfläche zum Senden enthält.„So sieht der generierte Code im zweiten Versuch in einem Browser aus.

Wenn der generierte Code nicht die gewünschten Ergebnisse liefert oder eine wichtige Komponente auslässt, fordern Sie ChatGPT einfach auf, den letzten Code neu zu schreiben. Weisen Sie es an, die Komponente einzuschließen oder das zu tun, was im ursprünglichen Code nicht getan wurde. Hier sind einige Tipps zur Verwendung von ChatGPT zum Programmieren.

Erstellen der Seiten „send-messages.php“ und „Fetch-messages“.

Nachdem wir mit der Benutzeroberfläche zufrieden waren, begannen wir mit der Erstellung des Skripts zur Handhabung der Chat-Logik. Um Nachrichten aus der Datenbank senden und abrufen zu können, hat ChatGPT zu Recht hervorgehoben, dass wir eine „Nachrichten“-Tabelle benötigen. Wir haben den Chatbot gebeten, eine SQL für die Nachrichtentabelle zu erstellen.

Nachdem wir einen SQL-Code generiert hatten, baten wir den Chatbot, ein PHP-Skript zu generieren, um die Nachrichtenlogik zu verwalten.

ChatGPT hat das Skript sowohl für die Seiten „send-messages.php“ als auch „fetch-messages.php“ generiert. Beim Ausführen beider Skripte hatten wir schließlich unseren allerersten Fehler (der seltsamerweise zufriedenstellend war). Es schien trotz seiner relativen Einfachheit etwas zu schön, um wahr zu sein, so weit in das Projekt vorzudringen, ohne eine einzige Codezeile zu debuggen.

Es stellte sich heraus, dass der Fehler dadurch verursacht wurde, dass ChatGPT eine Prüfung auf eine nicht deklarierte Sitzungsvariable einführte ($_SESSION['user_id']) in unser Skript. Wir vermuten, dass dies auf eine längere Projektpause zurückzuführen ist, die dazu geführt hat, dass ChatGPT einige Kontexte und Namen der im Projekt verwendeten Variablen vergessen hat.

Wenn Sie ChatGPT zum Erstellen einer App verwenden, stellen Sie sicher, dass Sie denselben Chat-Thread verwenden und versuchen Sie, verwandte Komponenten so schnell wie möglich abzuschließen. Die Verwendung eines neuen Chat-Threads oder eine längere Pause kann zu Inkonsistenzen führen. ChatGPT neigt dazu, einige Details des aktuellen Projekts (z. B. das Farbschema) zu vergessen, wenn Sie zwischen den Codierungssitzungen lange Pausen einlegen.

Dennoch haben wir den Fehler behoben und den Code bereitgestellt. Wir haben uns registriert, angemeldet und die Chat-Funktion ausprobiert. Obwohl wir Nachrichten von einem registrierten Benutzer an einen anderen senden konnten, waren die Farbe und die Anordnung der Nachrichtenblasen etwas anders. Für eine App, deren Fertigstellung eine Stunde und 23 Minuten gedauert hat, werden wir sie jedoch nicht allzu streng beurteilen.

ChatGPT: Ein ausgezeichneter Codierungsassistent

ChatGPT ist eindeutig ein leistungsstarker Codierungsassistent. Dass der Chatbot aus einfachen und manchmal nicht so klaren Anweisungen beeindruckenden Code hervorbringen kann, ist ein Beweis für seine Programmierfähigkeiten.

Sicher, es hat immer noch viele Mängel. Das Problem mit einem begrenzten Kontextfenster und seiner Fähigkeit, die Logik aus mehreren unabhängig erstellten Komponenten zusammenzuführen, ist ein großes Problem. Allerdings kann der Chatbot Ihnen dabei helfen, schnell ziemlich komplexe Web-Apps zu erstellen, wenn Sie sich damit auskennen.