Webentwicklung mit ChatGPT und Google Bard, Teil 1 Einfache Webseiten mit generativer KI entwickeln

Generative Künstliche Intelligenz kann insbesondere Web Developern eine große Hilfe sein, um sich lästiges Coding oder die Suche nach Lösungen zu sparen. Doch wie gut eignen sich die bekannten ChatGPT und Google Bard für die Webentwicklung?

E-Book zum Thema

Das eBook „KI-Assistenten für Entwickler“ zeigt, wie KI-Werkzeuge die Entwicklungsarbeit revolutionieren, Aufgaben automatisieren, die Produktivität steigern und zur Softwarequalität beitragen.

eBook herunterladen

Das große Staunen über generative KI-Tools ist vorbei und es ist Zeit für Ernüchterung: KI ist praktisch – aber mangels originärer Kreativität und holistischem Verständnis eben auch nur ein Werkzeug.

Zwar heften sich derzeit zahllose bestehende Apps und Dienste das Label „AI“ an, während gleichzeitig neue Anwendungen in dem Bereich wie Pilze aus dem Boden schießen. Doch deren Mehrwert ist in vielen Fällen, dass sie lästige Fleißarbeit besonders schnell erledigen können.

Bildergalerie

Bildergalerie mit 5 Bildern

Aus dem KI-Sumpf stechen zwei Tools heraus: ChatGPT und Google Bard sind Allrounder, die vor allem Webentwicklern das Leben leichter machen können.

Eine neue Website muss her

Doch was kann können Bard und ChatGPT – und was nicht? Grundsätzlich sind beide Tools in der Lage, HTML-, CSS- und Javascript-Code für Websites auszugeben und sogar komplette Websites zu erstellen. Eine einfache Portfolio-Website sollte damit kein Problem sein. Für das Erstellen kommen Google Bard im Web beziehungsweise GPT-4 von OpenAI zum Einsatz, letzteres per API und dem praktischen Tool MacGPT.

Für den Funktionstest tut es jeder LAMP-Server, der Einfachheit halber verwenden wir MAMP mit Apache und PHP 8.2. Um den von den KI-Tools generierten Code auf den Server zu packen, reicht ein beliebiger Text-Editor, für den Beitrag kommt der CotEditor für MacOS zum Einsatz.

Webentwicklung mit ChatGPT und Google Bard

Sämtliche generative KI-Modelle brauchen eine möglichst präzise Beschreibung des gewünschten Inhalts. Folgende Anfrage für die Portfolio-Website dürfte genug Informationen bieten:

Anschließend geben beide Dienste Code aus, getrennt nach HTML und CSS. Beide KI-Anwendungen verstehen, dass in einer Ein-Seiten-Website nur Anchor-Links benötigt werden. Bard setzt korrekt den lang=de-Tag, worauf GPT verzichtet. Grundsätzlich ist der Code gut lesbar und gegebenenfalls sogar mit Kommentaren versehen. Konventionen werden eingehalten.

GPT-4 weist am Ende des CSS sogar darauf hin, dass die Mockup-Dateinamen der Bilder ersetzt werden sollten. Bard liefert dafür auch gleich einige Alternativvorschläge mit und erlaubt die Neugeneration des Codes per Klick, wobei allerdings jeder Versuch ein wenig anders aussieht.

In den Editor kopiert und aufgerufen, ergeben sich bei beiden KI-Tools sehr basale, aber funktionale Portfolio-Websites, die einfach per Editor an die persönlichen Bedürfnisse anpassen lassen. Hier können sogar Laien aktiv werden, denn die Code-Generierung ist gut nachvollziehbar und mit einfachen Mitteln editierbar.

Bard und GPT setzen etwa Platzhalter für Bilder, die ersetzt oder durch einfach Bilddateien dieses Namens in die Website-Ordner direkt angezeigt werden können. Die Anpassung an verschiedene Displaygrößen mittels Responsive-Design funktioniert allerdings eher schlecht als recht: Hier müssen Bard und GPT mehrfach nachbessern, die Ergebnisse allerdings sind durchwachsen.

Kurzum: Sowohl GPT-4 als auch Bard können ein solides Grundgerüst für eine einfach Website erstellen, die sich anschließend mit ein paar Handgriffen anpassen lässt. Das spart im Zweifel viel Zeit, vor allem, wenn es darum geht, einfache Webprojekte zu starten oder sich eine Website-Basis ausgeben zu lassen, wenn eine grobe Idee existiert, ohne aufwändig selbst Code zu schreiben oder lange herumprobieren zu wollen.

Einfache Slideshow-Website

E-Book zum Thema

Das eBook „KI-Assistenten für Entwickler“ zeigt, wie KI-Werkzeuge die Entwicklungsarbeit revolutionieren, Aufgaben automatisieren, die Produktivität steigern und zur Softwarequalität beitragen.

eBook herunterladen

Ein weiteres Szenario: Für eine Firmenpräsentation im Eingangsbereich soll einfach eine simple Website erstellt werden, die Bilder in einem Ordner zufällig wiedergibt. Das funktioniert nicht direkt per HTML, vielmehr ermahnt GPT-4, dass PHP verwendet werden sollte.

Anschließend gibt das Tool drei Code-Blöcke aus. Einen für das zu verwendende Javascript, eines für das CSS und ein einfaches PHP-Skript. Nach dem Kopieren der Schnipsel in die von GPT-4 vorgegebenen Dateinamen funktioniert genau das: Bilder in dem Ordner werden zufällig ausgelesen und wiedergegeben.

Was noch fehlt, ist eine Vollbild-Funktion: Diese baut GPT-4 auf Wunsch auch in den Code ein, verändert aber das eben ausgegebene Original, womit Chaos entsteht. Erst durch die Bitte, den Code aller drei Dateien noch einmal vollständig auszugeben, wird der korrekte Code angezeigt, inklusive des gewünschten Vollbild-Schalters – und siehe da, es funktioniert.

Damit hat GPT-4 mit wenigen Prompt-Eingaben eine attraktive, basale Slideshow „entwickelt“, die einfach die Bilder aus einem Unterordner „images“ wiedergibt und die per Klick auf dem Rechner im Vollbild angezeigt wird. Bard liefert mit optimiertem Prompt ähnlich brauchbare Ergebnisse.

Was nicht wirklich klappt

Insgesamt schlagen sich die generellen KIs ganz gut bei der Erstellung einfacher Website-Projekte. Problematisch wird es immer dann, wenn es darum geht, die KI zu bitten, dieses oder jenes am bereits ausgegebenen Code zu ändern oder zu ergänzen. Sowohl Bard als auch GPT-4 tun sich hier schwer: Es entsteht Code-Kuddelmuddel, weil der Generator sich nicht klar ausdrückt.

Obendrein basteln die KIs wieder und wieder am eigenen Code herum, werfen ihn sogar komplett um und verschlimmbessern ihn nach und nach. Hier hilft es aber, die KI noch einmal um den vollständigen Code der Website zu bitten. Erstaunlich ist allerdings, dass sich solche Probleme bereits bei solch kleinen Anfragen zeigen.

Webentwicklung mit ChatGPT und Google Bard

Der Hype um die KI-Systeme lässt bessere Ergebnisse erwarten. Doch schon in diesem kleinen Experiment zeigt sich recht deutlich ein Kernproblem generativer KI-Systeme: Sie liefern Inhalte, ohne deren Inhalt zu verstehen. Auch wenn kluge Programmierung der Dienste den Anschein erweckt, sind sie nicht in der Lage, zu begreifen, was der Mensch am Rechner eigentlich von ihnen möchte; die Metaebene fehlt.

Die Ergebnisse sind zudem oft sehr zufällig und nicht selten unnötig umständlich. Es ist so gut wie unmöglich, zweimal den gleichen Code-Schnipsel zu generieren, die KI bietet jedes Mal andere Lösungsansätze. Die Qualität der Ausgabe steigt aber grundsätzlich deutlich mit der Qualität der Eingabe,

Fazit: Keine Sorge

KI kann Entwicklerinnen und Entwickler also allein deshalb nicht ersetzen, weil das Verständnis für die Inhalte fehlt. Developer können sich generative KI aber zunutze machen, um lästige Coding-Arbeit zu sparen. Allerdings wird diese zumindest Teilweise durch redaktionellen Aufwand ersetzt. Der Code will im Zweifel gesichtet, gekürzt, optimiert und an den individuellen Stil angepasst sein. Dennoch: Um schnell und einfach eine einfache Website zusammenzubauen, ist sind GPT-4 und Bard gute und praktische Helferlein.

E-Book zum Thema

KI-Assistenten für Entwickler

Dieses eBook zeigt, wie KI-Werkzeuge die Entwicklungsarbeit revolutionieren, Aufgaben automatisieren, die Produktivität steigern und zur Softwarequalität beitragen. Außerdem beleuchtet es den verantwortungsvollen Einsatz von KI in der Entwicklung.

Folgende drei Kapitel umfasst das eBook:

• Der Megatrend Künstliche Intelligenz
• Die KI zähmen: Nutzungsszenarien und Stolperfallen
• Die besten KI-gestützten Developer-Assistenten

eBook „KI-Assistenten für Entwickler“ herunterladen

(ID:49705226)