Meine ersten Erfahrungen mit der Erstellung einer benutzerdefinierten Qodly-Komponente mithilfe von KI

In diesem Blogbeitrag erzähle ich, wie ich damit begonnen habe, meine erste benutzerdefinierte Komponente für Qodly zu entwickeln, ohne auch nur eine einzige Zeile Code zu schreiben oder etwas selbst zu programmieren. Die ganze Arbeit wurde von einer KI erledigt, die sich an klaren Vorgaben orientierte.

Mit nur wenigen passenden Anweisungen habe ich mithilfe von VSCode und GitHub Copilot meine erste benutzerdefinierte Komponente erstellt. Dank der KI kannst du dich ganz darauf konzentrieren, deine Anforderungen zu spezifizieren und zu definieren, was du willst – und komplexe technische Entwicklungsfragen getrost außer Acht lassen.

Lies weiter, um mehr zu erfahren.

Bevor es losgeht

Wie in der Dokumentation erläutert, ist eine benutzerdefinierte Komponente eine flexible Lösung, wenn du eine Komponente benötigst, die 4D Qodly Pro nicht standardmäßig bereitstellt.

Sie kann projektübergreifend oder innerhalb der Qodly-Community geteilt werden. Sobald sie verfügbar ist, wird sie wie jede native Qodly-Komponente verwendet.

Zunächst habe ich mir diese vollständige Demo angesehen. Nachdem ich die Grundidee verstanden hatte, bin ich wie folgt vorgegangen.

Die beiden Voraussetzungen

Laden Sie die Skills herunter

Damit KI ordnungsgemäß funktioniert, benötigt sie eine Reihe von Skills. Skills sind die Richtlinien, denen die KI als Methode folgen muss. Dank dieser Skills weiß die KI, wie eine benutzerdefinierte Komponente (Framework, Architektur usw.) implementiert wird und wie automatisierte Tests geschrieben werden.

Ich habe diese Skills aus diesem GitHub-Repository heruntergeladen.

In VS Code habe ich einen leeren Ordner erstellt und darin den Ordner „.github/skills“ angelegt, in den ich die Skills kopiert habe.

Dann war ich an der Reihe

Meine Aufgabe bestand darin, den Vertrag der Komponente zu beschreiben: ihre Eingaben, die zu überwachenden Ereignisse, ihr Verhalten usw.

Anhand dieser kurzen Spezifikation und der Skills implementiert die KI die benutzerdefinierte Komponente selbstständig.

Folgende Informationen müssen bereitgestellt werden:

– der Name und der Zweck der Komponente

– Eigenschaften: die Eigenschaften, die das Verhalten der Komponente steuern

– Darstellung: Wie die Komponente im Entwurfs- und im Rendering-Modus aussieht

– Ereignisse: die Benutzeraktionen, auf die die Komponente reagieren muss

– Verhalten: Wie sich die Komponente in Abhängigkeit von den Ereignissen und ihren Eigenschaften verhält

All dies wird der KI in natürlicher Sprache mitgeteilt.

Beispiel: Eine benutzerdefinierte Komponente „In die Zwischenablage kopieren“

Mein Ziel war es, eine sehr einfache Komponente zu erstellen, die in der Lage ist, eine Qodly-Zeichenfolgen-Datenquelle in die Zwischenablage (des Computers, auf dem der Klick erfolgt) zu kopieren. Diese Komponente ist in 4D Qodly Pro nicht standardmäßig vorhanden.

Erste Hauptanweisung

Zeit, die KI anzusteuern. Wie im Video erläutert, basiert die Eingabeaufforderung auf einer Art Mini-Spezifikation: einem Vertrag aus drei Hauptteilen, wie oben beschrieben.

Nach der Installation der Skills habe ich meine erste Eingabe gesendet:

Hier ist der Prompt-Text zum Kopieren und Einfügen:

Wir befinden uns in einem leeren Ordner.

Wir haben lediglich im Ordner „.gihub“ einige Skills.

Diese Skills dienen dazu, benutzerdefinierte Komponenten für Qodly zu erstellen.

Wir werden nun mit der Erstellung einer benutzerdefinierten Komponente beginnen.

Verwenden Sie das „qodly-custom-component“-Skill.

Erstellen Sie mit @qodly/cli ein Scaffold und implementieren Sie die Komponente anschließend unter Verwendung der Standardstruktur „Build / Render / Config / Settings“.

Erstelle eine Komponente für Qodly von Grund auf neu. Die Komponente muss einen dreiteiligen Vertrag verwenden: Props, Events und Behavior.

Bitten Sie mich bei Bedarf, den Komponentennamen, die Version und andere erforderliche Informationen einzugeben.

Hier sind die Details:

„Props“ definieren, welche Daten in die Komponente einfließen:
• datasource: erforderliche Qodly-Zeichenkette als Datenquelle
• Darstellung der Komponente im Design-Modus und beim Rendern: ein gängiges Kopiersymbol

Ereignisse definieren, was ausgegeben wird:
• onClick: wird ausgelöst, wenn auf die Komponente geklickt wird

Verhalten:
• Wenn auf die Komponente geklickt wird, wird der Inhalt der verknüpften Datenquelle in die lokale Zwischenablage (die Zwischenablage des Computers, auf dem der Klick erfolgte) kopiert.
• Ist die Datenquelle leer oder null, wird nichts kopiert und die lokale Zwischenablage des Computers, auf dem der Klick erfolgte, bleibt unverändert.
• Ist die Komponente nicht an eine Qodly-Datenquelle vom Typ „String“ gebunden, wird nichts kopiert und die lokale Zwischenablage des Computers, auf dem der Klick erfolgte, bleibt unverändert.

Die Antwort der KI

Hier ist die Antwort, die ich erhalten habe:

Und meine benutzerdefinierte Komponente „copyclipboard“ war erstellt worden

Testen meiner Arbeit

Dann fragte ich, wie ich die Komponente lokal testen könne. Copilot riet mir, folgenden Befehl auszuführen:

Die benutzerdefinierte Komponente lässt sich dann lokal testen, indem man http://localhost:5001/ in einem Browser öffnet

Dazu muss eine 4D-Instanz ausgeführt werden

http://localhost:5001/ ist die lokale URL des Vite-Servers. Er stellt lediglich eine lokale Entwicklungsumgebung bereit, die die benutzerdefinierte Komponente enthält. Um alle Funktionen von Qodly Studio nutzen zu können, wie z. B. Qodly-Quellen und verfügbare ORDA-Funktionen, müssen Sie sicherstellen, dass die Qodly Studio-Instanz eines 4D-Projekts über den HTTPS-Port 7443 bereitgestellt wird.

Daher habe ich ein leeres 4D-Projekt mit den folgenden Webeinstellungen erstellt und geöffnet:

Und die Web-Verwaltungseinstellungen der 4D-Instanz lauten:

Auf diese Weise wird die Qodly Studio-Instanz meines 4D-Projekts unter https://localhost:7443/studio bereitgestellt. Sie wird von der lokalen Entwicklungsumgebung genutzt, während http://localhost:5001/ ausgeführt wird.

Und hier ist das Ergebnis!

Erstellen und Veröffentlichen

Um die endgültige Version meiner benutzerdefinierten Komponente zu erstellen und zu veröffentlichen, habe ich Copilot einfach gebeten, sie so zu erstellen, wie es bereits bei anderen vorhandenen benutzerdefinierten Komponenten geschehen ist. Ich habe Copilot ein Beispiel gegeben (z. B. https://github.com/b-fadwa/Qodly-file-download).

Außerdem habe ich Copilot gebeten, die Komponente in einem bestimmten GitHub-Repository zu veröffentlichen, und zwar sowohl den Quellcode als auch die Releases.

Und das war’s schon.

Welche Möglichkeiten sich daraus ergeben

Diese erste Erfahrung zeigt, dass KI die Hürde für die Erweiterung von Qodly Studio erheblich senkt. Wenn Sie beschreiben können, was eine Komponente leisten soll (ihre Eigenschaften, ihre Ereignisse und ihr Verhalten), kann die KI sie für Sie erstellen.

Die Möglichkeiten zur Anpassung von Qodly Studio sind daher sehr vielfältig: heute eine Schaltfläche „In die Zwischenablage kopieren“, morgen jede beliebige Komponente, die Ihre Anwendungen benötigen – ohne dass Sie ein Frontend-Experte sein müssen. Die einzige wirkliche Grenze ist die Klarheit Ihrer Spezifikation.