KI-Programmierung mit 4D und VS Code: Ein praktischer Leitfaden

Wenn Sie kürzlich unser Webinar zum Thema KI-Programmierung mit 4D 21 verfolgt haben, haben Sie gesehen, wie wir eine komplette Reiseagentur-Anwendung (Datenbankstruktur, Daten, Formulare und eine KI-gestützte Funktion) fast ausschließlich mithilfe von Befehlen in natürlicher Sprache erstellt haben. In diesem Beitrag führen wir Sie durch die Einrichtung und zeigen Ihnen, wie Sie denselben Arbeitsablauf in Ihre eigenen Projekte integrieren können.

Was Sie benötigen

• 4D 21 (oder höher)
• Visual Studio Code mit aktiviertem GitHub Copilot (siehe Einrichtung unten)
• Die 4D Analyzer -Erweiterung (siehe unten)
• Eine Reihe von Anweisungsdateien, die auf die 4D-Entwicklung zugeschnitten sind (siehe unten)

Einrichtung von GitHub Copilot

Zunächst einmal: GitHub Copilot läuft über Ihr GitHub-Konto, nicht direkt über OpenAI, Anthropic oder einen anderen KI-Anbieter. Sie müssen keine Credits bei Claude oder einem anderen Dienst erwerben. Alles wird über GitHub verwaltet.

1. Erstellen Sie ein GitHub-Konto, falls Sie noch keines haben: github.com

2. Aktivieren Sie GitHub Copilot in Ihrem Konto unter github.com/features/copilot. Ein kostenloses Kontingent mit großzügigem monatlichem Limit ist enthalten, für den Start ist keine Kreditkarte erforderlich.

3. Melden Sie sich über VS Code an. Öffnen Sie VS Code, klicken Sie auf das Kontosymbol in der unteren linken Ecke und melden Sie sich mit Ihrem GitHub-Konto an. Sobald die Verbindung hergestellt ist, erscheint das Copilot-Symbol in der Statusleiste und der Chat wird verfügbar.

4. Wählen Sie Ihr Modell aus. Im Copilot-Chat-Fenster können Sie über eine Modellauswahl festlegen, welches KI-Modell Ihre Antworten generiert (GPT-4o, Claude, Gemini und andere, je nach Ihrem Tarif). Die Standardeinstellung funktioniert zunächst gut, Sie können später wechseln.

So überprüfen Sie die Nutzung und verwalten Ihren Tarif: Gehen Sie zu github.com/settings/copilot. Dort können Sie sehen, wie viele Anfragen Sie bereits genutzt haben, zu einem kostenpflichtigen Tarif wechseln und die Abrechnung verwalten, falls Sie mehr Kapazität benötigen.

Die 4D Analyzer-Erweiterung

Die 4D Analyzer-Erweiterung sorgt dafür, dass VS Code die 4D-Sprache wirklich versteht. Installieren Sie sie über den VS Code Marketplace und Sie erhalten:

• Syntaxhervorhebung für 4D-Code: Methoden, Klassen, Formularklassen usw.
• Code-Vervollständigung und Signaturhilfe
• Diagnosen (Fehler und Warnungen) in Echtzeit während der Eingabe

Dies ist besonders wichtig bei der Arbeit mit KI. Wenn GitHub Copilot 4D-Code generiert, validiert der Analyzer diesen sofort. Fehler werden direkt im Editor hervorgehoben, sodass Sie diese erkennen können, noch bevor Sie versuchen, den Code auszuführen, und sie an Copilot zurückmelden können, um eine Korrektur zu erhalten.

So installieren Sie das Tool:

1. Öffnen Sie VS Code
2. Gehen Sie zum Erweiterungsfenster (Cmd+Shift+X unter macOS, Strg+Shift+X unter Windows)
3. Suchen Sie nach „4D Analyzer“
4. Klicken Sie auf „Installieren“

Das war’s schon. Öffnen Sie einen beliebigen 4D-Projektordner, und die Erweiterung wird automatisch aktiviert.

Anleitungsdateien: Copilot beibringen, wie man 4D-Code schreibt

GitHub Copilot beherrscht standardmäßig viele Programmiersprachen, kennt jedoch weder Ihren Programmierstil noch Ihre Best Practices oder die Feinheiten der 4D-Entwicklung. Hier kommen Anweisungsdateien ins Spiel.

Anweisungsdateien sind Markdown-Dokumente, die im Ordner .github/instructions/ im Stammverzeichnis Ihres Projekts abgelegt werden. Copilot liest sie automatisch und nutzt sie als Kontext für jede Antwort. Stellen Sie sich diese als einen Styleguide vor, an den sich die KI hält.

Wo Sie sie finden

Ein gebrauchsfertiger Satz von 4D-Anweisungsdateien ist auf GitHub verfügbar:

👉 github.com/mathieu-ferry/4D-github-instructions

So richten Sie sie ein

1. Erstellen Sie im Stammverzeichnis Ihres 4D-Projekts einen Ordner .github/instructions/
2. Kopieren Sie die Anweisungsdateien aus dem oben genannten Repository in diesen Ordner
3. Öffnen Sie Copilot Chat und fragen Sie: „Was sind Ihre 4D-Codierungsstandards?“ – die Antwort sollte sich auf den Inhalt Ihrer Anweisungsdateien stützen

Wenn dies der Fall ist, können Sie loslegen. Die Anweisungen behandeln Themen wie:

• Bevorzugte Verwendung von Klassen gegenüber prozeduralen Methoden
• Konventionen für Formularklassen
• JSON-Schema-Referenzen für Formulare und Kataloge
• Namenskonventionen und Codestruktur

Tipp: Diese Dateien sind ein Ausgangspunkt. Die besten Ergebnisse erzielen Sie, wenn Sie sie an Ihre eigenen Programmiergewohnheiten und Projektkonventionen anpassen. Fügen Sie eigene Regeln hinzu, entfernen Sie Unzutreffendes und optimieren Sie das Ganze im Laufe der Zeit.

Alles zusammen: Zwei Beispiele

Beispiel 1: Aufbau einer Datenbankstruktur mit Eingabeaufforderungen

Wenn Sie mit dem Struktur-Editor arbeiten, werden Änderungen in der Datei „catalog.4DCatalog“ übernommen. Mit den Anweisungsdateien aus dem GitHub-Repository kann Copilot diese Datei sicher für Sie bearbeiten (der Schemakontext ist in diesen Anweisungen enthalten). Sie arbeiten weiterhin promptgesteuert, und nach dem Neustart sind die Strukturänderungen sofort in 4D sichtbar. Hier ist eine realistische Abfolge:

Sie: „Erstelle eine Tabelle im Katalog, in der Mitarbeiter mit ihrem Nachnamen und Vornamen aufgeführt sind.“

Copilot bearbeitet Ihre Struktur. Starten Sie 4D neu, und Sie erhalten eine Tabelle „Employee“ mit einem UUID-Primärschlüssel und den gewünschten Feldern.

Sie: „Erstellen Sie eine neue Tabelle, die die Abteilungen des Unternehmens auflistet.“

Eine weitere Tabelle erscheint.

Sie: „Fügen Sie eine Beziehung zwischen Mitarbeitern und Abteilungen hinzu, wobei jeder Mitarbeiter zu einer Abteilung gehört.“

Copilot fügt einen Fremdschlüssel und die entsprechende Beziehungsdefinition hinzu. Auf diese Weise bauen Sie Schritt für Schritt ein komplettes relationales Modell auf, indem Sie einfach mit der KI sprechen.

Die entscheidende Erkenntnis: Sie beschreiben Ihre Absicht in einfacher Sprache, und die KI kümmert sich um die Details des Katalogs. Die Anweisungsdateien sorgen dafür, dass die Ausgabe Ihren erwarteten Konventionen entspricht (UUID-Schlüssel, korrekte Attributtypen, korrekte Beziehungssyntax).

Beispiel 2: Erstellen eines Formulars und seiner Klasse

Bei Formularen wird es erst richtig interessant. Sie können ein Layout in einer einzigen Eingabeaufforderung beschreiben:

Sie: „Erstelle ein 4D-Formular, das Aufgaben auflistet. Ich möchte links ein Listenfeld mit einer Zusammenfassung, dem Nachnamen des Bearbeiters, der Abteilung, dem Fälligkeitsdatum und dem Status. Zeige rechts eine Detailansicht mit all diesen Informationen sowie der Aufgabenbeschreibung und dem Abteilungsleiter an. Verknüpfe das Formular mit einer Formularklasse.“

Copilot generiert:

• Das Formular-JSON (form.4DForm) mit dem Listenfeld, den Eingabefeldern und dem Layout
• Die Formularklasse (.4dm) mit Ereignisbehandlung und Datenbindungslogik

Das Ergebnis ist ein funktionsfähiges Formular, das Sie in 4D öffnen und sofort nutzen können. Wird es beim ersten Versuch pixelgenau sein? Wahrscheinlich nicht. Aber es bietet Ihnen eine solide Grundlage, die Sie durch weitere Eingabeaufforderungen oder manuelle Anpassungen verfeinern können.

Das Design verfeinern

Das erste generierte Formular ist eine funktionierende Grundlage, kein fertiges Produkt. Es gibt mehrere Möglichkeiten, Copilot zu einem besseren Ergebnis zu führen:

• Fügen Sie einen Screenshot als Inspiration ein. Suchen Sie eine Benutzeroberfläche, die Ihnen gefällt, fügen Sie sie in den Copilot-Chat ein und sagen Sie: „Gestalte das Formular neu und nutze dies als visuelle Vorlage.“ Copilot extrahiert Layoutmuster, Farbtöne und Abstände aus dem Bild.
• Geben Sie einen präzisen Design-Briefing. Beschreiben Sie Absicht, Stimmung und Einschränkungen: „Gestalte dieses Formular neu für ein Reisebüro, das E-Mails schnell bearbeiten muss. Priorisiere Informationsdichte, kontrastreiche Statusanzeigen und eine tastaturfreundliche Navigation.“
• Geben Sie Design-Tokens explizit an. Wenn Sie über ein Designsystem verfügen, geben Sie es direkt ein: „Verwenden Sie einen Basisabstand von 8 px, neutrale graue Hintergründe (#F5F5F5), Blau (#1A73E8) für primäre Aktionen und semantisches Rot/Orange/Grün für den Aufgabenstatus.“
• Achten Sie auf Konsistenz mit bestehenden Formularen. Anstatt jedes Mal von vorne anzufangen: „Gestalten Sie dieses Formular optisch konsistent mit dem bestehenden Mitarbeiterformular: gleicher Kopfzeilenstil, gleiche Schaltflächenhierarchie und gleiche Listenzeilendichte.“
• Kodieren Sie Ihren Stil in den Anweisungsdateien. Der nachhaltigste Ansatz. Definieren Sie Ihre Farbpalette, Abstandsregeln und Konventionen für UI-Komponenten einmalig in .github/instructions/, und jedes von Copilot generierte Formular wird diese automatisch befolgen, ohne dass Sie dazu aufgefordert werden.

Copilot-Chat-Modi: „Ask“, „Plan“ und „Agent“

Copilot Chat in VS Code verfügt über drei Modi, die über die Agentenauswahl am unteren Rand des Chat-Fensters ausgewählt werden können:

• Fragen: Nur Fragen und Antworten. Beantwortet Fragen zu Ihrer Codebasis, zu Programmierkonzepten oder zu VS Code, ohne Dateien zu verändern. Nützlich, um zu verstehen, wie etwas funktioniert, oder um Ideen zu erkunden.
• Plan: Erstellt einen strukturierten, schrittweisen Implementierungsplan anhand einer schreibgeschützten Codebasis-Analyse, bevor auch nur eine einzige Zeile Code geschrieben wird. Es deckt offene Fragen zu unklaren Anforderungen auf, sodass Sie die Absicht im Voraus klären können. Sobald Sie zufrieden sind, übergibt eine Schaltfläche „Start Implementation“ den Plan direkt an den Agent-Modus zur Ausführung.
• Agent: Das Arbeitstier der Programmierung. Bearbeitet autonom Dateien in Ihrem gesamten Projekt, führt Terminalbefehle aus, ruft Tools auf und iteriert, um Fehler zu beheben, bis die Aufgabe abgeschlossen ist.

Alle Beispiele weiter oben in diesem Beitrag wurden im Agent-Modus ausgeführt, was die richtige Standardeinstellung für jede Aufgabe ist, die Ihr Projekt tatsächlich verändert.

Wann sich der Plan-Modus lohnt

Bisher haben wir schrittweise gearbeitet: eine Eingabeaufforderung, eine Änderung, Überprüfung, Wiederholung. Für explorative Arbeiten oder schnelle Ergänzungen ist das vollkommen effizient. Bei größeren Funktionen, die mehrere Komponenten gleichzeitig betreffen, lohnt sich der zusätzliche Schritt in den Plan-Modus jedoch.

Der Plan-Modus liest Ihre Codebasis, bevor er etwas erzeugt. Die Ausgabe ist eine hochrangige Zusammenfassung, die in umsetzbare Schritte unterteilt ist, einschließlich aller Fragen, die er zu Ihren Anforderungen hat. Sie iterieren den Plan in einem einfachen Gespräch, bis er genau das widerspiegelt, was Sie wollen, und übergeben ihn dann an den Agent.

Dies ist besonders wertvoll bei 4D-Projekten, bei denen eine einzelne Funktion gleichzeitig den Katalog, eine oder mehrere Methoden oder Klassen, ein JSON-Formular, eine Formularklasse und Ressourcendateien betreffen kann. Eine falsche Annahme bereits in der Planungsphase zu erkennen, ist weitaus kostengünstiger, als eine Ausführung über mehrere Dateien hinweg zu entwirren, die in die falsche Richtung gelaufen ist.

So sieht das in der Praxis aus

Anstelle dieser schrittweisen Abfolge:

• „Füge eine E-Mail-Tabelle hinzu“
• „Erstelle ein Formular für E-Mails“
• „Füge eine Schaltfläche zum Verarbeiten von E-Mails hinzu“
• „Schreibe die KI-Verarbeitungsmethode“
• „Beispieldaten hinzufügen“

Sie können eine einzige, gut strukturierte Eingabeaufforderung schreiben, die die gesamte Funktion beschreibt, diese über Plan laufen lassen, um den Ansatz zu validieren, und sie dann von Agent in einem koordinierten Durchlauf ausführen lassen. Genau das haben wir im Webinar getan, als wir die KI-Funktion „E-Mail-zu-Aufgabe“ erstellt haben: eine große Eingabeaufforderung, die die Tabelle, das Formular, die Schaltfläche, die Verarbeitungslogik, die API-Schlüsselkonfiguration und die Beispieldaten auf einmal abdeckt.

Tipps für einen effizienten KI-Workflow

1. Passen Sie Ihren Ansatz an den Umfang der Aufgabe an. Schrittweise Eingabeaufforderungen eignen sich gut, wenn Sie sich erst orientieren oder der Umfang unklar ist, da sie eine einfache Überprüfung und Kurskorrektur ermöglichen. Bei klar definierten Funktionen ist eine einzige, umfangreichere Eingabeaufforderung im Plan-Modus effizienter. Die VS-Code-Dokumentation empfiehlt, komplexe Aufgaben aufzuteilen, weist aber auch darauf hin, dass die Angabe erwarteter Ergebnisse (welche Dateien, welches Verhalten) dem Agenten hilft, seine eigene Arbeit zu überprüfen.
2. Nennen Sie, was Sie erwarten, nicht wie es zu tun ist. Bei größeren Prompts hilft das Auflisten der Dateien, Tabellen oder Formulare, die erstellt werden sollen, dabei, das Rätselraten zu reduzieren. Vermeiden Sie es, Implementierungsdetails zu detailliert zu spezifizieren: Das ist die Aufgabe des Agenten. Das Ziel ist es, klare Grenzen zu setzen, nicht eine Spezifikation zu schreiben.
3. Halten Sie allgemeine Regeln in Anweisungsdateien fest, einmaligen Kontext in der Eingabeaufforderung. Konventionen, Namenskonventionen und architektonische Präferenzen gehören in .github/instructions/ und sollten nicht in jeder Eingabeaufforderung wiederholt werden. Laut der VS Code-Dokumentation werden Anweisungsdateien bei jeder Interaktion geladen; konzentrieren Sie sich daher darauf, was die KI nicht allein aus Ihrem Code ableiten kann.
4. Geben Sie Fehler zurück, mit Kontext für nicht offensichtliche Fehler. Das Einfügen eines Laufzeitfehlers direkt in Copilot reicht oft für isolierte Fehler aus. Bei Logik- oder Architekturproblemen verweisen Sie zusätzlich auf die relevante Datei oder erklären Sie das erwartete Verhalten; die Fehlermeldung allein liefert nicht genügend Informationen.
5. Verwenden Sie Screenshots zur visuellen Diagnose. Das Anhängen eines Screenshots ist schneller als die Beschreibung eines Layoutproblems in Worten, und die VS Code-Dokumentation listet dies als empfohlene Kontexttechnik auf. Hinweis: Je nach Ihrem Copilot-Plan und den Organisationseinstellungen muss die Bildunterstützung möglicherweise aktiviert werden.
6. Überprüfen Sie die KI-Ausgabe: Der Aufwand richtet sich nach der Bedeutung. Bei Prototypen reicht ein kurzer Blick. Bei der Produktion behandeln Sie sie wie jeden anderen beigesteuerten Code: Überprüfen Sie die Logik, Randfälle, die Eingabevalidierung und alles, was externe Dienste oder Anmeldedaten betrifft.
7. Halten Sie Anweisungsdateien schlank und aktuell. Gezieltere Anweisungen führen zu besseren Ergebnissen, aber Anweisungsdateien werden bei jeder Anfrage geladen. Die VS Code-Dokumentation rät dazu, sich auf Dinge zu konzentrieren, die die KI nicht aus dem Code ableiten kann: nicht standardmäßige Konventionen, architektonische Entscheidungen, umgebungsspezifische Details. Eine überladene Sammeldatei verwässert das Signal.

Weiterführende Informationen: Benutzerdefinierte Agenten und Skills

Alles, was wir bisher behandelt haben, nutzt die integrierten Agenten mit gemeinsamen Anweisungsdateien. VS Code ermöglicht es Ihnen nun jedoch, noch einen Schritt weiter zu gehen, indem Sie Ihre eigenen benutzerdefinierten Agenten und Skills definieren, die in Ihrem Projekt unter .github/agents/ gespeichert werden .

Ein benutzerdefinierter Agent ist eine Markdown-Datei (.agent.md), die der KI eine bestimmte Rolle zuweist, die Tools einschränkt, die sie verwenden darf, und sie optional an ein bestimmtes Modell bindet. Sie könnten beispielsweise einen speziellen 4D-Reviewer-Agenten erstellen, der sich ausschließlich auf Codequalität, Sicherheitsrisiken und Namenskonventionen für 4D-Projekte konzentriert und dabei schreibgeschützte Tools verwendet, sodass er niemals etwas ändert, es sei denn, Sie fordern dies ausdrücklich an. Oder einen 4D-Scaffolder-Agenten, der mit Ihren Formular- und Klassenvorlagen vorbeladen ist und bereit ist, bei Bedarf neue Bildschirme zu erstellen.

Skills (.skill.md-Dateien ) gehen noch einen Schritt weiter: wiederverwendbare, portable Funktionen, die Skripte enthalten und auf externe Ressourcen zugreifen können. Während eine Anweisungsdatei passive Regeln enthält, enthält ein Skill aktive Logik, die der Agent aufrufen kann. Ein praktisches 4D-Beispiel: ein Skill, der weiß, wie man die 4D-Dokumentationsseite abfragt und relevante Code-Beispiele direkt in den Chat holt.

Die VS Code-Dokumentation beschreibt auch Handoffs: verkettete Workflows, bei denen ein Agent mit einem Klick den Kontext an den nächsten weitergibt. Ein Planungsagent generiert eine Feature-Spezifikation, übergibt diese dann an einen Implementierungsagenten, der sie wiederum an einen Review-Agenten weitergibt. Jeder Schritt wird vor der Ausführung von einem Menschen genehmigt.

All dies können Sie mit KI direkt im Chat generieren: Geben Sie /create-agent oder /create-skill ein und beschreiben Sie, was Sie möchten. Sie können auf Workspace-Ebene (über die Quellcodeverwaltung für das Team freigegeben) oder in Ihrem Benutzerprofil (persönlich, für alle Projekte verfügbar) gespeichert werden.

Über die Codegenerierung hinaus: Weitere nützliche KI-Workflows

Das Erstellen von Funktionen ist nur eine der Aufgaben, die ein KI-Agent in einem Entwicklungs-Workflow gut bewältigt. Hier sind weitere Situationen, in denen Copilot eine erhebliche Arbeitslast übernehmen kann:

• Dokumentation. Bitten Sie den Agenten, technische Dokumentation aus dem Quellcode zu erstellen oder zu aktualisieren, Docstrings für Methoden und Klassen zu generieren oder bestehende Dokumentation in eine andere Sprache zu übersetzen. Speziell für 4D kann dies bedeuten, benutzerorientierte Hilfeinhalte aus der Logik von Formularklassen zu generieren oder eine strukturierte API-Referenz aus einer Reihe von Methoden zu erstellen.
• Sicherheitsüberprüfung. Bitten Sie den Agenten, eine Methode, eine Formularklasse oder eine gesamte Funktion auf häufige Schwachstellen zu analysieren: nicht validierte Eingaben, fehlende Zugriffskontrolle, SQL-Injection-Risiken, fest codierte Anmeldedaten. Ein dedizierter, schreibgeschützter Sicherheitsagent (siehe oben) ist hierfür ideal geeignet. Dies ersetzt zwar kein ordnungsgemäßes Sicherheitsaudit, ist aber ein schneller erster Durchlauf.
• Refactoring. KI-Agenten bewältigen mechanische Refactoring-Aufgaben gut: Symbole konsistent umbenennen, wiederholte Logik in gemeinsame Methoden oder Klassen extrahieren, prozeduralen Code in ORDA-Muster umwandeln oder veralteten 4D-Code nach aktuellen Best Practices modernisieren.
• Code-Erklärung und Einarbeitung. Nutzen Sie den „Ask“-Modus, um unbekannten Code zu verstehen, die Funktionsweise einer Methode nachzuvollziehen oder eine Zusammenfassung einer komplexen Logik in einfacher Sprache zu erhalten. Dies ist besonders nützlich, wenn Sie ein bestehendes Projekt übernehmen oder neue Teammitglieder einarbeiten.
• Testgenerierung. Bitten Sie den Agenten, Unit-Tests für eine bestimmte Methode oder Klasse zu schreiben, einschließlich Randfällen und Fehlerbedingungen. Copilot kann die Tests nach der Generierung auch ausführen und bei Fehlern erneut versuchen.
• Commit-Meldungen und PR-Beschreibungen. VS Code enthält integrierte intelligente Aktionen zur Generierung von Commit-Meldungen aus vorläufigen Änderungen und Pull-Request-Zusammenfassungen. Kleine Zeitersparnisse, die sich summieren.

Wie geht es weiter?

Der in diesem Beitrag beschriebene Workflow steht Ihnen ab sofort zur Verfügung. Erstellen Sie Ihre erste Tabelle und Ihr erstes Formular mithilfe von Eingabeaufforderungen, nutzen Sie den Plan-Modus, um eine vollständige Funktion zu bearbeiten, refaktorisieren Sie Legacy-Code, generieren Sie Dokumentation, führen Sie eine Sicherheitsüberprüfung durch und erstellen Sie einen benutzerdefinierten Agenten für Ihr Team. Jetzt müssen Sie es nur noch ausprobieren.

Hier finden Sie alles, was Sie für den Einstieg benötigen:

1. Laden Sie 4D 21 herunter
2. Installieren Sie VS Code mit aktiviertem GitHub Copilot
3. Fügen Sie die 4D Analyzer-Erweiterung hinzu
4. Kopieren Sie die Anleitungsdateien in Ihr Projekt

Öffnen Sie den Agent-Modus, beschreiben Sie, was Sie erstellen möchten, und sehen Sie, wie weit Sie kommen.

Wir würden uns sehr über Ihre Erfahrungen freuen. Teilen Sie Ihre Ergebnisse, Arbeitsabläufe und Fragen im 4D-Forum – die Community wartet schon!