Blibla

Wandle deine Idee mit Hilfe von KI in eine komplette API um

November 28, 2023

Heute werden wir das Potenzial eines KI-gestützten Entwicklungsprozesses erkunden. Unser Ziel ist es, ein handgezeichnetes Feature-Konzept in funktionierenden Code umzuwandeln, komplett mit End-to-End-Tests, Datenbankschema, Dokumentation und einem UML-Diagramm. Für diese Aufgabe verwenden wir ChatGPT-4 von OpenAI, das sich als unschätzbares Werkzeug erwiesen hat.

Voraussetzungen

Skizzieren der neuen Funktion

Unsere Webanwendung, die derzeit auf Next.js, React, TypeScript und Prisma basiert (obwohl auch auf andere Stacks anpassbar), soll ein neues Feature erhalten. Wir führen eine Möglichkeit für Nutzer ein, Feedback zu einzelnen Seiten zu geben, in der Hoffnung, herauszufinden, welche Seiten bei unserem Publikum wirklich gut ankommen und welche verbessert werden müssen.

Zunächst haben wir mit einer einfachen Papierskizze begonnen, um die Grundidee zu entwerfen. Dieser Prozess ist jedoch flexibel - jede Methode, die hilft, das Kernkonzept zu festigen, kann verwendet werden.

Onboarding unseres KI-Assistenten

Banner für 'Blibla NextJS Developer' mit den Stichworten Next.js, React, TypeScript, Prisma und dem Autor Tim Pietrusky, mit einem Computer-Emblem mit Code als Avatar
Wir haben den OpenAI GPT-Builder benutzt, um unsere KI-Expertin zu erstellen

Das Pair Programming mit Kolleg*innen beginnt mit einem gemeinsamen Verständnis der firmeninternen Programmierpraktiken. Wir wollten eine ähnliche Erfahrung mit KI erreichen. Daher haben wir mit dem GPT Builder von OpenAI unsere Version von ChatGPT erschaffen: Blibla NextJS Developer, unsere KI-Expertin in Next.js, React, TypeScript und Prisma. Wir haben sie mit Beispielen aus unserer Codebasis gefüttert und damit sichergestellt, dass sie mit unseren Standards und Praktiken übereinstimmt. Dieser Ansatz ist vergleichbar mit dem Onboarding eines neuen Teammitglieds.

Von der Skizze zur kompletten API

Wir haben den Prozess mit diesem Prompt eingeleitet:

Ich möchte meine App um die Funktion "Page Feedback" erweitern. Ich habe dieses Scribble erstellt, um die Funktion zu visualisieren. Kannst du mir bitte dabei helfen?

Mithilfe von GPT-Vision interpretierte unsere KI-Assistentin den Inhalt des hochgeladenen Scribbles und verband diese visuellen Informationen mit unserem Prompt. Von hier aus wurde ein konkretes Konzept entwickelt, das sich mit der Benutzererfahrung, der Datenvalidierung, der Speicherung und der Fehlerbehandlung befasste und die Idee mit einem Mermaid-Sequenzdiagramm anreicherte, um die Benutzerinteraktionen zu veranschaulichen.

Sequenzdiagramm was die Interaktion vom User mit der Feedback-API zeigt
UML Sequenzdiagramm was zeigt, wie die Feedback-API funktionieren soll

Entwicklung des API-Handlers

Das von der KI erstellte Konzept diente uns als Leitfaden für die Entwicklung des API-Handlers. Wir verwendeten Blibla Nextjs Developer, um den Basiscode zu generieren, den wir dann verfeinerten. Das Ergebnis dieses gemeinschaftlichen Prozesses ist ein voll funktionsfähiger API-Endpunkt, der sich nahtlos in unsere bestehende Webanwendung einfügt.

Integration in das Datenbankschema

Ein entscheidender Schritt war der Abgleich der neuen Funktion mit unserem Datenbankschema. Wir lieferten Blibla Nextjs Developer Details über unser aktuelles Schema, insbesondere das Benutzermodell, da die Rückmeldungen einem bestimmten Benutzer zugeordnet werden sollten. Die KI schlug eine Schema-Erweiterung für die Feedbackdaten vor, die wir sorgfältig prüften und erfolgreich auf unsere Datenbank anwendeten.

Generierung von End-to-End-Tests

Unsere KI-Assistentin half dann bei der Erstellung von End-to-End-Tests, die auf unser Test-Framework zugeschnitten waren, das Jest und supertest für HTTP-Aufrufe verwendet. Dieser Schritt war nahtlos und trug erheblich zu unserer Produktivität bei.

Dokumentation schreiben

Die Dokumentation der neuen Funktion war ein Klacks, denn Blibla Nextjs Developer hat TSDocs für den API-Handler erstellt und eine umfassende OpenAPI-Spezifikation generiert und damit unsere Dokumentationsstandards eingehalten.

Fazit

Diese Fallstudie ist eine praktische Demonstration der Leistungsfähigkeit von KI in der Softwareentwicklung. Die Funktion "Page-Feedback" dient zwar als einfaches Beispiel, zeigt aber das Potenzial der KI-gestützten Entwicklung in einer Vielzahl von Projekten.

Blibla Nextjs Developer ist zu einem unverzichtbaren Werkzeug in unserem Arbeitsablauf geworden, mit dem wir die Effizienz steigern und die Einhaltung unserer spezifischen Programmierstandards einhalten können.

Wie lässt sich ein KI-gestützter Entwicklungs-Workflow in dein Team integrieren?

Wir helfen euch gerne dabei, gemeinsam eine Lösung zu finden.