KIs wie GitHub Copilot können programmieren – Ist mein Arbeitsplatz in Gefahr?

Hi! 🙂 Ich bin Ulrike, studiere Medieninformatik im Master und bin seit meinem Praktikum bei den Centigrade Engineers letzten Sommer Werkstudentin hier. Nachdem Künstliche Intelligenz (KI) spätestens seit der Freischaltung von ChatGPT inzwischen eines der aktuellen Themen überhaupt ist und einige Leute befürchten, KIs wie z. B. Midjourney (KI, die Bilder nach Anweisung generiert) oder GitHub Copilot (KI, die beim Programmieren unterstützt) könnte ihnen ihre Jobs wegnehmen, entstand die Idee, sich das ganze mal aus der Sicht einer Junior Entwicklerin anzuschauen. Sollte ich mir etwa auch Sorgen um meine berufliche Zukunft machen?
Also habe ich mich die letzten Wochen mit GitHub Copilot auseinandergesetzt und herumexperimentiert. Meine Erfahrungen möchte ich in diesem Blogartikel mit euch teilen.

Ganz kurz – was ist GitHub Copilot eigentlich?

GitHub Copilot wurde im Juni 2022 veröffentlicht und ist eine Erweiterung für Integrierte Entwicklungsumgebungen (IDE), die als KI mit englischsprachigem Text und öffentlichem Quellcode trainiert wurde, um Programmierer*innen bei ihrer Arbeit zu unterstützen. Entwickelt wurde GitHub Copilot von GitHub und OpenAI (letzteren haben wir auch ChatGPT zu verdanken), um das Prinzip der Paarprogrammierung mit künstlicher Intelligenz zu kombinieren und damit die Code-Qualität zu verbessern. Außerdem sollen Programmierer*innen mit GitHub Copilot an ihrer Seite schneller und mit weniger Aufwand programmieren können. Das funktioniert per Autovervollständigung: Basierend auf Projektstruktur und -dateien, Usereingaben wie z. B. Funktionsnamen oder durch die „Übersetzung“ von textbasierten Kommentaren in Quellcode, generiert GitHub Copilot Codevorschläge, die der/die Programmierer*in akzeptieren, ablehnen oder – wenn es mehrere Vorschläge gibt – durchschalten kann. Um die Programmierempfehlungen zu erstellen, liest GitHub Copilot allen im Projekt vorhandenen Code aus und sendet ihn an den Server, wo der Code mittels OpenAI Codex analysiert wird. Anhand dieser Analyseergebnisse werden dann Programmiervorschläge generiert und in der IDE angezeigt.
Das Ganze funktioniert für über ein Dutzend Programmiersprachen, wobei die Empfehlungen für Python und JavaScript am präzisesten sind. Grund dafür ist, dass bei diesen beiden Programmiersprachen am meisten öffentlich zugänglicher Quellcode zum Trainieren der KI zur Verfügung steht. Im folgenden Gif sieht man ganz gut, wie der Prozess ablaufen kann:

Ein Projekt, um GitHub Copilot zu testen

Bei Centigrade programmieren wir Engineers vorwiegend Webapps mit Angular, also wird sehr viel in JavaScript (TypeScript), HTML und CSS gecodet. Da ich als Frontend-Entwicklerin mit diesen „Programmiersprachen“ am meisten Erfahrung habe und GitHub Copilot für JavaScript sehr gut funktionieren soll, schien eine Angular Webapp zum Testen ideal. Leider konnte ich GitHub Copilot aufgrund von Informationsschutz und Eigentumsrechten nicht in dem Kundenprojekt einsetzen, an dem ich gerade arbeitete, also stellte ich mir die Frage, wie ich das Programmieren mit GitHub Copilot am besten ausprobieren kann.

Eine Webapp von Grund auf neu anzulegen, erschien mir etwas zu viel Aufwand, schließlich kann GitHub Copilot mich nur beim Programmieren unterstützen und nicht bei der Eingabe von npm Befehlen und der Projektorganisation. Daher habe ich eine simple Webapp gesucht, die ich mithilfe von GitHub Copilot um einige Features erweitern kann. Bei den offiziellen Angular Tutorials bin ich fündig geworden: Angular Homes ist eine einfache Angular App, die auf der Startseite eine Liste von Immobilien anzeigt und zu jedem Objekt auf einer Detail-Seite mehr Informationen bereitstellt.

Nachdem den Code zum Laufen gebracht, Beispielbilder im assets Ordner hinzufügefügt und die Anwendung bei mir lokal gestartet hatte, sah das Ganze so aus – links die Startseite mit einer Übersicht über die Immobilienobjekte und rechts die Detailansicht, wenn man bei einem davon auf „Learn more“ klickt:

Im zweiten Schritt habe ich mir die App genauer angeschaut und nach zusätzlichen Features gesucht, die ich mit GitHub Copilot einbauen könnte. Dabei sind folgende Tasks entstanden:

1. Auf der Startseite sollen mehr als zehn Beispielobjekte angezeigt werden.
2. Sobald man irgendwo auf das Immobilienitem klickt, soll man zur Detailansicht weitergeleitet werden.
3. Jedes Immobilienobjekt soll mehrere Bilder haben, die auf der Detailseite in einem Slider dargestellt werden.
4. Wenn man auf den „Apply now“ Button klickt, soll erst überprüft werden, ob alle Formularfelder ausgefüllt sind. Ansonsten soll an dem entsprechenden Feld eine Fehlermeldung angezeigt werden.
5. Wenn man das Bewerbungsformular vollständig ausgefüllt und auf den „Apply now“ Button geklickt hat, soll man auf eine neue Seite weitergeleitet werden, auf der alle Informationen zur Bewerbung angezeigt werden.

Um später zu überprüfen, ob GitHub Copilot an alles „denkt“, habe ich mir zu jeder Aufgabe in Stichpunkten dazugeschrieben, was der Task beinhaltet. Da ich meine Stichpunkte in einer markdown-Datei notiert und diese in VS Code geöffnet hatte, bekam ich bereits dort Vorschläge von GitHub Copilot. Die meisten davon waren wenig sinnvoll; beispielsweise hat GitHub Copilot hier einfach den ganzen Satz kopiert und nach den Pluszeichen hochgezählt, obwohl ich nicht programmiert habe:

Hinweis für alle Screenshots: Text oder Code in weiß oder anderen Farben ist von mir eingegeben, Text oder Code in hellgrau sind von GitHub Copilot generierte Vorschläge.

Aber GitHub Copilot konnte mir auch weiterhelfen, als ich mir mit den Formatierungsbefehlen nicht mehr sicher war. In den folgenden Beispielen wusste ich nicht mehr genau, wie man einen Divider anlegt oder einen Link einbindet. Also habe ich zum Testen eine Aufforderung für GitHub Copilot geschrieben, die GitHub Copilot direkt „beantwortet“ hat:

Und auch bei der Taskanalyse hat GitHub Copilot teilweise direkt verstanden, was später im Code implementiert werden muss:

Es war wirklich interessant zu beobachten, was GitHub Copilot alles an nativer Sprache versteht und wie GitHub Copilot zwischen Deutsch (Notizen) und Englisch (Taskanalyse) wechselt oder wie im Screenshot beides vermischt.

Coden mit GitHub Copilot

Nach der Taskanalyse habe ich mich ans Coden gemacht. Im folgenden Abschnitt werde ich die Tasks und ihre Unterpunkte kurz auflisten und kommentieren, wie es mir beim Programmieren mit GitHub Copilot ergangen ist.

Task 1: Mehr Mock-Daten erzeugen

Wer kennt es nicht – um etwas bestimmtes zu testen, egal ob die Responsivität einer Website oder die Pagination einer Liste, braucht man mehr Objekte. Wäre eigentlich schnell mit copy paste erledigt, aber leider haben die Objekte eine Id, die man händisch angleichen muss. Ob GitHub Copilot das automatisch macht?

Ja, aber leider nicht so, wie man es sich wünschen würde. In der Angular Homes App liegen die Daten für die Immobilienobjekte in einer JSON-Datei vor, die einen Array namens „locations“ mit den Objekten enthält. Jedes Objekt hat folgende Attribute:

In meiner Idealvorstellung hätte GitHub Copilot mir ein neues Objekt mit neuer Id und den gleichen oder ähnlichen Inhalten wie die der schon existierenden Objekte vorgeschlagen, sobald ich ein Komma hinter dem letzten Objekt gemacht hätte. Leider war das nur Wunschdenken, denn um überhaupt einen Vorschlag von GitHub Copilot zu bekommen, musste ich ein neues Objekt öffnen und “id“ eingeben. Der Wert wurde dann automatisch generiert, also hochgezählt, und das nächste Attribut samt Wert direkt vorgeschlagen. Die Empfehlungen musste ich aber für jedes Attribut einzeln bestätigen, d. h. bei dieser Vorgehensweise betätigt man sehr oft die Tabulator-Taste, bevor ein einziges neues Objekt vollständig ist. Um zu analysieren, ob GitHub Copilot auf diese Weise hilfreich sein kann, müssen wir die beiden Abläufe definieren: Auf der einen Seite muss man zur Generierung von neuen Mock-Daten GitHub Copilot triggern und sehr oft Tabulator drücken, und auf der anderen Seite händisch kopieren, einfügen und die Ids verändern. Vergleicht man die beiden Vorgänge für zehn Objekte, bei denen nur die Ids hochgezählt werden sollen und die anderen Attribute unwichtig sind, ist die händische Generierung deutlich schneller. Allerdings muss man dazusagen, dass GitHub Copilot sich nicht konsistent verhält: Als ich später einem Kollegen genau diesen Fall demonstrieren wollte, hat die Programmierassistenz plötzlich ganze Objekte mit neuer Id und allen Attributwerten vorgeschlagen. Wenig später wollte ich den gleichen Fall noch einmal testen und da ging es dann nicht mehr; GitHub Copilot generierte wie zuvor nur die Id und nach Bestätigung jedes Attribut einzeln.

Task 2: Weiterleitung zur Detailansicht

Die meisten Leute sind inzwischen gewohnt, dass man bei Objekten auf Websites weitere Informationen erhält, wenn man irgendwo auf das Objekt klickt.

Nehmen wir als Beispiel den rechts abgebildeten Ausschnitt aus dem Menu unserer Website. Ich persönlich erwarte, dass ich zum Webseiteninhalt „UX Management“ weitergeleitet werde, egal ob ich auf die Schrift oder an einen bestimmten Punkt ins Bild klicke.
Daher lag es für mich nahe, in der Angular Homes App den routerLink von dem „Learn more“ Button auf das ganze Immobilienobjekt zu schieben. Eigentlich eine einfache Aufgabe. Doch was meint GitHub Copilot dazu?

Zunächst hatten wir scheinbar Verständigungsprobleme, denn wenn ich meine Programmieraufforderung in einen HTML-Kommentar gepackt habe, bekam ich als Vorschlag nur Text, wie man ihn in einen Code-Kommentar über komplizierte Stellen schreibt. Erst als ich den Befehl ohne Kommentar in meinen HTML Code geschrieben habe, bekam ich eine Empfehlung zur Implementierung:

Der Code, den GitHub Copilot hier vorschlägt, ist zwar korrekt, aber die KI gibt keinen Hinweis, dass die darunterliegende Zeile durch die Programmierempfehlung ersetzt werden soll. Wenn man also den Vorschlag akzeptiert und dann speichert, fügt VS Code automatisch einen closing tag für die neue section hinzu.

Wie man im Screenshot sieht, bekommen wir dadurch eine zusätzliche section in der section, die eigentlich hätte angepasst werden sollen. Diese Situation zeigt, dass man die Vorschläge von GitHub Copilot nicht einfach blind akzeptieren, sondern nach wie vor auch beim Programmieren mit GitHub Copilot aufmerksam bleiben sollte.

Zusätzlich muss man daran denken, die Programmieraufforderung an GitHub Copilot auch wieder zu entfernen, sonst wird der Text an der entsprechenden Stelle nach dem Kompilieren auch im User Interface angezeigt:

Gerade in HTML ist das gefährlich, weil weder GitHub Copilot noch die IDE darauf hinweisen; und vor allem kurze Eingaben schnell übersehen werden können.

Nachdem ich diese Probleme behoben hatte, wollte ich noch das Styling für den Hovereffekt anpassen, um zu testen, wie GitHub Copilot in CSS Dateien performt.
Wenn die Eingabeaufforderungen erkannt werden, funktionieren die Empfehlungen, wie man im folgenden Screenshot sieht, ganz gut:

Natürlich schlägt GitHub Copilot irgendwas als Wert vor, und in dem Beispiel sogar mehr als gewünscht (color), aber ich habe die Hintergrundfarbe ja auch nicht spezifiziert. Außerdem ist jetzt das „Gerüst“ vorhanden und ich kann die Farbe im Nachhinein anpassen.

Dabei ist mir aufgefallen, dass die Vorschläge nur generiert werden, wenn man explizit die dazugehörige Klasse dazuschreibt. Wie man im Beispiel sieht, reicht das alleinige Platzieren der Eingabe nach der Klasse, zu der der Code gehören soll, nicht aus.

Stattdessen muss man bei der Aufforderung „change background colour of the .data-container on hover“ die Klassenzugehörigkeit „of the .data-container“ bewusst hinzufügen. Erst dann bekommt man einen sinnvollen Codevorschlag, wie man im Screenshot sehen kann.

Task 3: Immobilienbilder sollen in einem carousel slider dargestellt werden

Wenn man sich Immobilien auf einer klassischen Vermarktungsplattform anschaut, gibt es im Idealfall zu jedem Objekt mehrere Bilder, die in einem carousel slider angezeigt werden. Das wollte ich bei Angular Homes ebenfalls einbauen, auch wenn jede Immobilie die gleichen Beispielbilder haben würde. Die Textvorschläge von GitHub Copilot für die Eingabe zur Codegenerierung waren sehr gut; beispielsweise wurde direkt empfohlen, dass der slider Pfeile haben soll, um durch die Bilder zu navigieren. Der darauf basierend erzeugte HTML Code half zwar bei der Übersicht, z. B. welche neuen HTML Elemente man für den slider braucht, war allerdings nicht funktionsfähig.
Auch nach mehreren neuen Anläufen, bei denen ich z. B. die Eingabe umformuliert oder zuerst die Mock-Daten und das Interface von einem String zu einem Array von Strings angepasst habe, bekam ich keinen funktionierenden Code vorgeschlagen – teilweise sogar schlechter als zuvor. Nach einiger Zeit erfolglosen Rumprobierens habe ich schließlich aufgegeben und aus Spaß ChatGPT gefragt, wie ich gegebenen Code verändern muss, um einen carousel slider zu bekommen. Interessanterweise hatte ChatGPT die gleiche Herangehensweise wie GitHub Copilot, aber auch dieser Code hat nicht funktioniert und selbst ChatGPT konnte keine Lösung finden (auch wenn die KI jedes Mal sehr überzeugt von sich selbst behauptet hat, mit der neuen Antwort den Fehler behoben zu haben…).

Task 4: Formularüberprüfung

Und da ist sie wieder, die Berufskrankheit, Elemente einer Benutzeroberfläche zu identifizieren, die beim User zu Frustration führen können: Klickt man auf den „Apply now“ Button in der Detailansicht, passiert auf Benutzer*innenebene nichts – egal ob die Eingabefelder ausgefüllt sind oder nicht. Also beschloss ich, mir das zu Nutze zu machen und zunächst eine Formularüberprüfung einzubauen. Das heißt, wenn man auf den „Apply now“ Button klickt, soll überprüft werden, ob eines der Felder leer ist. Wenn das der Fall ist, soll am entsprechenden Feld eine Fehlermeldung erscheinen.
Nach der Implementierung sah das Bewerbungsformular so aus:

Bei dieser Aufgabe bin ich beim Formulieren der Eingabe das erste Mal an meine Grenzen gestoßen. Eigentlich wollte ich Folgendes ausdrücken: Wenn keins der Eingabefelder einen leeren oder undefined Wert hat, soll die Bewerbung abgeschickt werden. Egal wie und in welcher Sprache (Deutsch und Englisch) ich diese Aussage formuliert habe, GitHub Copilot hat nicht verstanden, was ich von der KI wollte. Also habe ich diese Überprüfung am Ende doch selbst programmiert und die entsprechenden boolean Variablen hinzugefügt. Beim Setzen der Variablen hat sich GitHub Copilot aber wieder als sehr nützlich erwiesen, denn sobald ich die erste Variable mit this.firstNameEmpty = false; angepasst hatte, schlug mir GitHub Copilot sofort die gleiche Anpassung für die anderen Formularfelder vor. Solche Vorschläge sind sehr hilfreich und sparen Zeit sowie Schreibarbeit.

Task 5: Bewerbung überprüfen

Nachdem man bei so wichtigen Formularen wie hier im Bewerbungsprozess für eine Immobilie dazu aufgefordert wird, die eingetragenen Daten noch einmal auf ihre Richtigkeit zu überprüfen, wollte ich das hier auch machen: Wenn man auf den „Apply now“ Button klickt, soll man zu einer neuen Ansicht weitergeleitet werden, in der die Daten der ausgewählten Immobilie und die eigenen Einträge aus dem Bewerbungsformular angezeigt werden. Dafür brauchte ich

• eine neue Angular component inclusive HTML Template und CSS Datei
• eine neue route
• eine Weiterleitung von der Detailansicht zur Bewerbungsüberprüfung, bei der die Immobilien-Id und Bewerbungsdaten mitgegeben werden.

Warum auch immer habe ich mich bei der Ausführung der oben genannten Punkte nicht an die aufgestellte Reihenfolge gehalten, sondern wollte in der Datei routes.ts eine neue route anlegen, bevor ich die neue Angular component erstellt hatte. Vielleicht lag es auch an etwas anderem, aber wie man im Screenshot sieht, konnte mir GitHub Copilot zu dem Zeitpunkt nur Text statt konkretem Code generieren.

Als ich diesen Fall später noch einmal für eine nicht existierende component testen wollte, ging es plötzlich, und GitHub Copilot hat mir direkt eine neue route mit path, component und title passend zum angegebenen Namen vorgeschlagen. Scheinbar lernt die KI stetig dazu.

Bei allen anderen Unteraufgaben konnte ich mir dann Dank GitHub Copilot sehr viel Schreibarbeit bzw. copy paste mit händischen Anpassungen sparen: Alles, was beim Coden einem bestimmten Muster gefolgt ist, hat GitHub Copilot automatisch generiert und ich musste die Vorschläge nur noch akzeptieren – egal ob ich in JavaScript oder HTML programmiert habe.

In den folgenden Beispielen sieht man die Ergebnisse für das Übergeben und Auslesen der Formulareingaben mit dazugehörigem Typ, so wie es von TypeScript gefordert wird:

Auch beim Anzeigen der Informationen in HTML konnte mir GitHub Copilot unter die Arme greifen:

Dabei ist mir aufgefallen, dass man in HTML keine Objektattribute überspringen kann. Wenn man also ein Attribut auslassen möchte, muss man vom nächsten gewünschten Attribut den Beginn oder sogar den ganzen Namen neu eintippen. An dieser Stelle könnte man die Vorschläge der KI soweit optimieren, dass man durch die Attribute eines Objekts durchschalten kann, so wie es auch möglich ist, wenn GitHub Copilot mehrere Lösungsvorschläge parat hat.

Persönliches Fazit

Wie wir gesehen haben, gibt es zwei verschiedene Ansätze, um GitHub Copilot zu nutzen:
Einerseits gibt es die Möglichkeit, durch direkte Aufforderungen in nativer Sprache wie z. B. „change background colour on hover“ GitHub Copilot sozusagen Fragen zu stellen, auf die man eine Antwort bekommt. Da GitHub Copilot als Programmierassistenz entwickelt wurde und nicht wie ChatGPT als Frage-Antwort-KI, erhält man bei dieser Methode oft auch nicht korrekte Ergebnisse. Aber wenn man sich daran gewöhnt hat, wo und wie man die Eingabe formulieren muss, schlägt GitHub Copilot meistens sinnvollen Code vor. Wahrscheinlich nicht immer genau das, was man sucht, und auch oft in veralteter Schreibweise (in JavaScript z. B. var vs. let), aber selbst das reicht meistens schon aus, um eine Idee für die Lösung einer Aufgabe zu entwickeln.
Andererseits kann man GitHub Copilot sehr gut zur Autovervollständigung nutzen. Das erspart dem/der Programmierer*in lästige Schreibarbeit oder copy paste mit händischer Nachbearbeitung, beispielsweise bei der Verwendung von Objekten, wenn GitHub Copilot automatisch fehlende Attribute ergänzt – definitiv ein Gewinn für alle Programmierenden!

Trotzdem muss man bei der Verwendung von GitHub Copilot nach wie vor aufpassen und am besten alles noch einmal manuell Korrektur lesen. Bei manchen Tasks kann es dann doch schneller gehen, die Aufgabe selbst zu programmieren oder zu copy pasten – dann weiß man wenigstens sicher, dass man z. B. alle Variablennamen angepasst hat (oder eben nicht).
Ein weiteres Problem bei der Nutzung von GitHub Copilot ist natürlich auch, dass der eigene Code nicht lokal von der KI analysiert und verarbeitet, sondern dafür an den Server geschickt wird. Das macht den Einsatz von GitHub Copilot in Unternehmen wie Centigrade, die an Kundenprojekte und die dazugehörigen Verschwiegenheitserklärungen etc. gebunden sind, unmöglich.

Aber um zur ursprünglichen Frage zurückzukommen: Sollte ich mir wegen programmierender KIs Sorgen um meine berufliche Zukunft machen? Bei dem aktuellen Entwicklungsstand der KIs ganz klar nein! Solange KIs von fehlerhaftem Code lernen und beschriebene Tasks nicht 100% korrekt umsetzen können, werden wir Informatiker*innen sicher nicht ersetzt werden. Ich kann mir gut vorstellen, dass repetitive Aufgaben wie z. B. Unit Testing oder andere Tasks, die einem exakten Muster folgen, irgendwann nicht mehr von uns programmiert werden. In der Industrie ist es beim Einsatz von Industrierobotern, die den Menschen repetitive oder gefährliche Aufgaben abnehmen, auch nicht anders gelaufen. Aber am Ende steht, zumindest im Moment noch, trotzdem ein Mensch, der die geleistete Arbeit noch einmal überprüfen muss – egal ob in der industriellen Fertigung oder beim Programmieren. Wie lange das noch so sein wird? Wer weiß.

Aber der Weg, bis Menschen vollständig durch KIs ersetzt werden, ist noch lang – sowohl in der Informatik als auch in der Kunst. Schaut euch zum Beispiel dieses von midjourney generierte Bild an. Abgesehen davon, dass die Eingabe (in etwa „Ein Elefant, der auf einem fliegenden Teppich Tee trinkt“) nicht besonders gut getroffen wurde, welche Fehler findet ihr? Solange KIs so etwas produzieren, sind auch Künstler*innen unersetzbar.

Also cheers auf den beruflichen Weg, der vor mir liegt! 🙂