Wie du als Entwickler:in künstliche Intelligenz in deinem Workflow integrieren kannst

Das Thema Künstliche Intelligenz (KI oder AI, Artificial Intelligence) hat in den letzten Monaten hohe Wellen geschlagen. Besonders viel Aufmerksamkeit in der Öffentlichkeit haben zunächst Systeme wie DALL-E und Midjourney erhalten, die auf Basis von Texteingaben Bilder generieren. Das nächste große Thema wurde mit ChatGPT im November 2022 veröffentlicht, der Prototyp eines Chatbots, der nahezu in Echtzeit meist sehr präzise Antworten auf individuelle Fragen gibt. ChatGPT kann für dich als Entwickler:in ebenfalls interessant sein, weil das Modell auch in der Lage ist, Code zu schreiben. Das funktioniert in einigen Fällen sogar erstaunlich gut.

GitHub Copilot

Seit 2022 gibt es auch den GitHub Copilot, einen »AI pair programmer«. Er wurde von GitHub (Microsoft) und OpenAI entwickelt, mit dem Ziel, dich als Entwickler:in zu unterstützen. In diesem Artikel möchte ich dir einige Beispiele zeigen, wie du den GitHub Copilot als Entwickler:in in deinem Workflow nutzen kannst.

Du kannst den GitHub Copilot für 60 Tage kostenlos testen. Eine Subscription ist im monatlichen oder jährlichen Abrechnungszeitraum erhältlich. Wenn du einen monatlichen Abrechnungszeitraum auswählst, werden dir 10 USD pro Kalendermonat berechnet. Wenn du einen jährlichen Abrechnungszeitraum auswählst, werden dir 100 USD pro Jahr berechnet.

Du kannst den GitHub Copilot in deinem Code-Editor (z.B. VSCode) als Erweiterung installieren und bisher auf zwei Arten verwenden:

Variante 1: Anweisungen innerhalb von Kommentaren

Du kannst dem Copilot über Kommentare der jeweiligen Sprache Anweisungen geben, im Anschluss erhältst du in Echtzeit Vorschläge, aus denen du die passende Lösung auswählst.

Der Screenshot zeigt, wie ich einen Kommentar (add og meta tags) hinzufüge und der GitHub Copilot mir den ersten Vorschlag macht. Wenn ich diesen mit Tab akzeptiere, wird er mir weitere Vorschläge machen, um den Code zu vervollständigen.

Der GitHub Copilot beachtet dabei auch ganz automatisch, dass ich mich in einem WordPress-Projekt befinde, deshalb setzt er die Meta-Tags in eine if-Anweisung.

Variante 2: Autovervollständigung

Während du deinen Code schreibst, macht dir der Copilot Vorschläge zur automatischen Vervollständigung. Das kennst du bereits in etwa von deiner Entwicklungsumgebung, dort bekommst du Vorschläge und Erklärungen auf Basis deiner Eingabe.

Im Gegensatz dazu ist der Copilot viel umfangreicher, da er dir detailliertere Vorschläge macht, die auf deine Bedürfnisse zugeschnitten sind. Der Copilot versteht die Zusammenhänge deines Projektes zum Teil sehr gut und kann dir daher passende Vorschläge machen.

Im Screenshot siehst du, wie ich ein Favicon einbinden möchte. Der Copilot schlägt mir nach einigen Zeichen die Autovervollständigung vor. Dabei beachtet er wieder, dass ich mich in einem WordPress-Projekt befinde, also setzt er eine dynamische URL.

5 Beispiele wie der GitHub Copilot dir bei der Entwicklung helfen kann

1. CDN Files in HTML importieren

Fangen wir mit etwas ganz Einfachem an. Wenn du zu Testzwecken Dateien über ein Content Delivery Network (CDN) importieren möchtest, kannst du dies mit dem Copilot direkt in deinem Editor erledigen. Du sparst dir also die Zeit, im Browser die Docs zu öffnen und nach dem passenden Link zu suchen.

Im folgenden Beispiel importieren wir GSAP (GreenSock Animation Platform) mit folgendem HTML-Kommentar:

<!-- import greensock -->

Nachteil von dieser Variante ist, dass der Copilot nicht die aktuellste Version importiert. ChatGPT ist ein Sprachmodell, welches keinen Zugriff auf Live-Daten oder Echtzeit-Informationen hat. Das Modell ist ausschließlich auf die Texte, Daten und Informationen trainiert worden, die zum Zeitpunkt des Trainings vorlagen.

2. Farbpalette mit CSS generieren

Wenn du in CSS eine Farbpalette anlegen möchtest, kann der Copilot dir ebenfalls helfen. Via Autovervollständigung erhältst du z.B. Vorschläge für passende Farbabstufungen.

Im Video siehst du, wie ich die Farben ‚back‘, ‚front‘ und ‚accent-900‘ im Colorpicker zunächst selbst auswähle. Die weiteren Variablen (‚accent-800‘ bis ‚accent-400‘ und die zwei Linkfarben) werden vom Copilot vorgeschlagen.

3. Automatisch CSS-Themes erstellen

Wenn du mithilfe von Custom Properties verschiedene Themes anlegen möchtest, macht dir der Copilot automatisch Vorschläge für den Namen des Themes und die Farbwerte. So invertiert er die Farben eines Light-Modes, sobald du den Dark-Mode anlegst.

Im Video habe ich bereits einen Light-Mode erstellt. Sobald ich in die nächste Zeile unterhalb der schließenden geschweiften Klammer gehe, schlägt mir der Copilot vor, einen Dark-Mode zu erstellen. Dabei invertiert er automatisch die hellen Grautöne und ordnet sie richtig zu.

4. JavaScript Arrays, Loops und Funktionen in Echtzeit

In JavaScript kann der Copilot z.B. Arrays, Loops oder Funktionen erstellen. Die Möglichkeiten sind enorm. Hier ein Beispiel:

Vorher habe ich manuell über HTML/CSS ein Grid erstellt. Dann werden über JavaScript 20 Farben erzeugt und für jede Farbe wird eine Kachel im Grid erzeugt. Die Kacheln erhalten zusätzlich die jeweilige Farbe als Hintergrundfarbe. Zuletzt erhält jede Kachel die Funktion, die eigene Farbe per Klick auf den Hintergrund der Seite zu übertragen.

Diese Kommentare habe ich in die JavaScript-Datei eingefügt, falls du es selbst ausprobieren möchtest:

// array 20 color names
...

// show the color names in the div .color-names
...

// add a matching background color to each li item
...

// add function to each li item to change the background-color of the body
...

5. WordPress Themes

Auch bei spezielleren Aufgaben, wie z.B. der Erstellung von WordPress-Themes, kann der Copilot helfen. So erspart man sich z.B. den Blick in die Dokumentation.

Zunächst habe ich mir all Beiträge anzeigen lassen:

// show wp posts

Danach habe ich alle genutzten Tags integriert:

// show wp tags

Dabei hat der Copilot das schließende </div> vergessen, das musste ich manuell ergänzen. Es ist also ratsam genau drauf zu achten, was der Copilot schreibt. Das bedeutet auch, dass man den Code in einigen Fällen selbst verstehen muss, damit er funktioniert.

Zusammenfassung

Diese Beispiele sollen zunächst das Konzept hinter dem GitHub Copilot veranschaulichen und dir erste Eindrücke geben. Es gibt unzählige und sehr unterschiedliche Anwendungsfälle, die du am besten selbst für dich ausprobierst.

Meiner Meinung nach lohnt sich der Einsatz des GitHub Copilots jetzt schon, da er die Arbeit teilweise erheblich beschleunigen kann. Man sollte nicht erwarten, dass der Copilot perfekten Code für einen generiert und man ab sofort lediglich einer KI Anweisungen geben muss. Vielmehr ist der Copilot ein hilfreicher Begleiter, der beim Programmieren unterstützen kann, wenn man nicht weiter weiß. Er hilft auch, repetitive Aufgaben schneller zu erledigen, um sich komplexeren Aufgaben widmen zu können.

In meinem Workflow hat sich der CoPilot bereits gut integriert und man kann sicherlich gespannt sein, wo diese Entwicklung noch hinführt.