Wie ich KI zur Entwicklung einer modernen Web-App nutzte

Generative KI wie ChatGPT hat eine neue Ära der Softwareentwicklung eingeläutet, in der jeder mit geringen oder gar keinen Programmierkenntnissen eine nützliche, moderne Anwendung entwickeln kann. In diesem Artikel zeige ich Ihnen, wie ich mithilfe von KI ein Tool entwickelt habe, auf das ich mich jetzt jeden Tag verlasse.

Das Problem, das ich lösen wollte

Seit der Einführung von ChatGPT und anderen KI-Sprachmodellen werden bestimmte Wörter stark mit KI-generierten Inhalten assoziiert (einer der vielen Gründe, warum Sie ChatGPT nicht zum Schreiben verwenden sollten). Beispiele sind „delve“, „tapestry“ und „testament“. Als Autor habe ich immer daran geglaubt, das richtige Wort für den richtigen Kontext zu verwenden. Wenn ein Wort passt und genau ausdrückt, was ich ausdrücken möchte, habe ich das Gefühl, dass ich es verwenden dürfen sollte.

Leider sehen das viele meiner Kunden anders. Sie sind zunehmend misstrauisch gegenüber Inhalten, die wie von einer KI erstellt klingen könnten. Da ich keine KI bin (zumindest glaube ich das nicht), kann ich mir nicht alle Wörter und Ausdrücke merken, die von KI-Sprachmodellen häufig überstrapaziert werden. Daher kann es für mich schwierig sein, sie zu vermeiden.

Deshalb habe ich beschlossen, ein Tool zu erstellen, das bereitgestellten Text anhand einer Wortliste analysiert und potenziell „KI-klingende“ Wörter und Ausdrücke hervorhebt. Ein solches Tool kann mithilfe der drei wichtigsten Webtechnologien entwickelt werden: HTML (strukturiert den Inhalt einer Webseite), CSS (wird verwendet, um den Inhalt einer Webseite zu formatieren) und JavaScript (verwandelt eine statische Webseite in eine „Web-App“, die das tut, was wir wollen).

Auswahl der besten KI für die Web-App-Entwicklung

Ein Projekt wie mein „ AI Vocab Checker “ ist ein perfekter Kandidat für KI-gestützte Softwareentwicklung, da die besten KI-Modelle anhand riesiger Mengen an HTML-, CSS- und JavaScript-Code sowie Dokumentation trainiert wurden. Daher können sie Code ausgeben, Hinweise zu Best Practices geben, effiziente Implementierungen vorschlagen und sogar bei der Behebung von Problemen helfen, die während der Entwicklung auftreten können.

Alle drei besten Large Language Models (LLMs) im LMSYS Chatbot Arena Leaderboard (GPT-4o, Claude 3.5 Sonnet und Gemini Advanced) können Webentwicklungsaufgaben mit beeindruckender Kompetenz bewältigen. Ich habe mich jedoch letztendlich für Claude 3.5 Sonnet für dieses Projekt entschieden.

Claude 3.5 Sonnet war mein bevorzugter KI-Programmierassistent, vor allem dank seiner Funktion „Projekte“, mit der ich einen Arbeitsbereich erstellen konnte, der ausschließlich der Entwicklung meiner App gewidmet ist. Natürlich hilft es auch, dass Sonnet seine Konkurrenz bei Programmieraufgaben übertrifft, die im HumanEval-Benchmark enthalten sind .

Erstellen meiner Web-App mit Claude

Ich habe damit begonnen, in Claude ein neues Projekt für den AI Vocab Checker zu erstellen, indem ich im linken Bereich die Registerkarte „ Projekte“ ausgewählt habe (Sie können sie anzeigen, indem Sie in einem aktiven Chat mit der Maus über das Claude-Logo in der oberen linken Ecke fahren) und dann auf die Schaltfläche „Projekt erstellen“ geklickt habe .

Nachdem das erledigt war, musste ich Claude das Problem beschreiben. Hier ist die Aufforderung, die mir einfiel:

Im Allgemeinen sollten Sie eine allgemeine Beschreibung dessen liefern, was Sie erreichen möchten, und diese dann mit so vielen Details wie möglich ergänzen. Alles, was Sie nicht im Detail beschreiben, wird der KI zur Interpretation überlassen, die möglicherweise mit Ihrer Vision übereinstimmt, möglicherweise aber auch nicht.

Claude brauchte eine Weile, um den Code auszugeben, den ich dann mit Visual Studio Code in eine index.html-Datei einfügte. Ich konnte die index.html-Datei dann einfach in einem Webbrowser öffnen und dies war die erste Version der AI Vocab Checker-App, die Claude erstellt hatte:

Wie Sie sehen, konnte Claude mit nur einer einzigen Eingabeaufforderung eine funktionsfähige App erstellen, und die App tut tatsächlich, was sie tun soll! Es gibt jedoch einige Probleme, die bei näherer Betrachtung ziemlich offensichtlich sind:

• Die ersten beiden Textfelder sind etwas größer als das untere Textfeld.
• Der Name der App ist falsch (ich habe vergessen, ihn anzugeben).
• Die App nutzt den verfügbaren horizontalen Platz auf Desktop-Geräten nicht aus.
• Alle Wörter werden in der gleichen Farbe hervorgehoben (was die Analyse des Ergebnisses erschwert).
• Für die erkannten Wörter liegen keine Verwendungsstatistiken vor.
• Claude hat keine Bibliotheken oder Frameworks verwendet, obwohl er dazu ermutigt wurde.

Ich antwortete mit dieser Aufforderung:

Und hier ist das Ergebnis:

Das ist deutlich besser und es war nur eine zusätzliche Eingabeaufforderung erforderlich. Claude implementierte das Bootstrap-Framework, um ein modernes, ansprechendes Design zu erreichen, und die Bibliothek mark.js für eine bessere Hervorhebung. Beeindruckt davon, wie sehr ihre Einbindung die App verbesserte, fragte ich Claude, welche anderen Frameworks oder Bibliotheken wir verwenden könnten, und die KI schlug Vue.js, Chart.js, Tippy.js, Natural, FileSaver.js und einige andere vor.

Von den vorgeschlagenen Frameworks und Bibliotheken schien mir Chart.js am nützlichsten, da man damit visuelle Darstellungen von Wortverwendungsstatistiken erstellen kann, beispielsweise Balken- oder Kreisdiagramme. Ich bat Claude, es zu implementieren, und wies es außerdem an, den zu analysierenden Text durch das Ergebnis zu ersetzen, um die Benutzererfahrung zu verbessern. Nach ein paar kleinen Optimierungen und Designanpassungen kam ich zu folgendem Ergebnis:

Meine persönlichen Anforderungen werden von dieser Version meines AI Vocab Checker vollkommen erfüllt. Für die Entwicklung habe ich nur 15 Minuten gebraucht, und zwar mithilfe meiner sehr begrenzten Webentwicklungskenntnisse, die ich mir im Laufe der Jahre auf verschiedenen kostenlosen Programmier-Websites angeeignet habe.

Titelbild und Screenshot von David Morelo.