{"id":16281,"date":"2023-07-31T15:47:14","date_gmt":"2023-07-31T13:47:14","guid":{"rendered":"https:\/\/www.centigrade.de\/?post_type=blog&#038;p=16281"},"modified":"2023-08-14T11:31:19","modified_gmt":"2023-08-14T09:31:19","slug":"kis-wie-github-copilot-koennen-programmieren-ist-mein-arbeitsplatz-in-gefahr","status":"publish","type":"blog","link":"https:\/\/www.centigrade.de\/de\/blog\/kis-wie-github-copilot-koennen-programmieren-ist-mein-arbeitsplatz-in-gefahr\/","title":{"rendered":"KIs wie GitHub Copilot k\u00f6nnen programmieren \u2013 Ist mein Arbeitsplatz in Gefahr?"},"content":{"rendered":"<p>Hi! \ud83d\ude42 Ich bin Ulrike, studiere Medieninformatik im Master und bin seit meinem Praktikum bei den Centigrade Engineers letzten Sommer Werkstudentin hier. Nachdem <a href=\"https:\/\/de.wikipedia.org\/wiki\/K\u00fcnstliche_Intelligenz\">K\u00fcnstliche Intelligenz<\/a> (KI) sp\u00e4testens seit der Freischaltung von <a href=\"https:\/\/openai.com\/blog\/chatgpt\">ChatGPT<\/a> inzwischen eines <em>der<\/em> aktuellen Themen \u00fcberhaupt ist und einige Leute bef\u00fcrchten, KIs wie z. B. <a href=\"https:\/\/www.midjourney.com\/home\/\">Midjourney<\/a> (KI, die Bilder nach Anweisung generiert) oder <a href=\"https:\/\/github.com\/features\/copilot\">GitHub Copilot<\/a> (KI, die beim Programmieren unterst\u00fctzt) k\u00f6nnte 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?<br \/>\nAlso habe ich mich die letzten Wochen mit GitHub Copilot auseinandergesetzt und herumexperimentiert. Meine Erfahrungen m\u00f6chte ich in diesem Blogartikel mit euch teilen.<!--more--><\/p>\n<h2><strong>Ganz kurz \u2013 was ist GitHub Copilot eigentlich?<\/strong><\/h2>\n<p>GitHub Copilot wurde im Juni 2022 ver\u00f6ffentlicht und ist eine Erweiterung f\u00fcr <a href=\"https:\/\/de.wikipedia.org\/wiki\/Integrierte_Entwicklungsumgebung\">Integrierte Entwicklungsumgebungen<\/a> (IDE), die als KI mit englischsprachigem Text und \u00f6ffentlichem Quellcode trainiert wurde, um Programmierer*innen bei ihrer Arbeit zu unterst\u00fctzen. Entwickelt wurde GitHub Copilot von <a href=\"https:\/\/github.com\/\">GitHub<\/a> und <a href=\"https:\/\/openai.com\/\">OpenAI<\/a> (letzteren haben wir auch ChatGPT zu verdanken), um das Prinzip der <a href=\"https:\/\/de.wikipedia.org\/w\/index.php?title=Paarprogrammierung\">Paarprogrammierung<\/a> mit k\u00fcnstlicher Intelligenz zu kombinieren und damit die Code-Qualit\u00e4t zu verbessern. Au\u00dferdem sollen Programmierer*innen mit GitHub Copilot an ihrer Seite schneller und mit weniger Aufwand programmieren k\u00f6nnen. Das funktioniert per Autovervollst\u00e4ndigung: Basierend auf Projektstruktur und -dateien, Usereingaben wie z. B. Funktionsnamen oder durch die \u201e\u00dcbersetzung\u201c von textbasierten Kommentaren in Quellcode, generiert GitHub Copilot Codevorschl\u00e4ge, die der\/die Programmierer*in akzeptieren, ablehnen oder \u2013 wenn es mehrere Vorschl\u00e4ge gibt \u2013 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\u00e4ge generiert und in der IDE angezeigt.<br \/>\nDas Ganze funktioniert f\u00fcr \u00fcber ein Dutzend Programmiersprachen, wobei die Empfehlungen f\u00fcr Python und JavaScript am pr\u00e4zisesten sind. Grund daf\u00fcr ist, dass bei diesen beiden Programmiersprachen am meisten \u00f6ffentlich zug\u00e4nglicher Quellcode zum Trainieren der KI zur Verf\u00fcgung steht. Im folgenden Gif sieht man ganz gut, wie der Prozess ablaufen kann:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16284\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section1-Einleitung-Gif.gif\" alt=\"Beispiele von Texteingaben der Autorin und die Vorschl\u00e4ge, die GitHub Copilot daraufhin macht.\" width=\"734\" height=\"261\" \/><\/p>\n<h2>Ein Projekt, um GitHub Copilot zu testen<\/h2>\n<p>Bei Centigrade programmieren wir Engineers vorwiegend Webapps mit <a href=\"https:\/\/angular.io\/\">Angular<\/a>, also wird sehr viel in JavaScript (TypeScript), HTML und CSS gecodet. Da ich als Frontend-Entwicklerin mit diesen \u201eProgrammiersprachen\u201c am meisten Erfahrung habe und GitHub Copilot f\u00fcr 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.<\/p>\n<p>Eine Webapp von Grund auf neu anzulegen, erschien mir etwas zu viel Aufwand, schlie\u00dflich kann GitHub Copilot mich nur beim Programmieren unterst\u00fctzen und nicht bei der Eingabe von <a href=\"https:\/\/www.npmjs.com\/\">npm<\/a> 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 <a href=\"https:\/\/angular.io\/tutorial\">Angular Tutorials<\/a> bin ich f\u00fcndig geworden: <a href=\"https:\/\/angular.io\/tutorial\/first-app\">Angular Homes<\/a> 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.<\/p>\n<p>Nachdem den Code zum Laufen gebracht, Beispielbilder im assets Ordner hinzuf\u00fcgef\u00fcgt und die Anwendung bei mir lokal gestartet hatte, sah das Ganze so aus \u2013 links die Startseite mit einer \u00dcbersicht \u00fcber die Immobilienobjekte und rechts die Detailansicht, wenn man bei einem davon auf \u201eLearn more\u201c klickt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16328\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-2.jpg\" alt=\"Ausschnitt aus der Benutzeroberfl\u00e4che der Anwendung\" width=\"1000\" height=\"629\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-2.jpg 1000w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-2-300x189.jpg 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/2-1-2-768x483.jpg 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Im zweiten Schritt habe ich mir die App genauer angeschaut und nach zus\u00e4tzlichen Features gesucht, die ich mit GitHub Copilot einbauen k\u00f6nnte. Dabei sind folgende Tasks entstanden:<\/p>\n<ol>\n<li>Auf der Startseite sollen mehr als zehn Beispielobjekte angezeigt werden.<\/li>\n<li>Sobald man irgendwo auf das Immobilienitem klickt, soll man zur Detailansicht weitergeleitet werden.<\/li>\n<li>Jedes Immobilienobjekt soll mehrere Bilder haben, die auf der Detailseite in einem Slider dargestellt werden.<\/li>\n<li>Wenn man auf den \u201eApply now\u201c Button klickt, soll erst \u00fcberpr\u00fcft werden, ob alle Formularfelder ausgef\u00fcllt sind. Ansonsten soll an dem entsprechenden Feld eine Fehlermeldung angezeigt werden.<\/li>\n<li>Wenn man das Bewerbungsformular vollst\u00e4ndig ausgef\u00fcllt und auf den \u201eApply now\u201c Button geklickt hat, soll man auf eine neue Seite weitergeleitet werden, auf der alle Informationen zur Bewerbung angezeigt werden.<\/li>\n<\/ol>\n<p>Um sp\u00e4ter zu \u00fcberpr\u00fcfen, ob GitHub Copilot an alles \u201edenkt\u201c, 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\u00f6ffnet hatte, bekam ich bereits dort Vorschl\u00e4ge von GitHub Copilot. Die meisten davon waren wenig sinnvoll; beispielsweise hat GitHub Copilot hier einfach den ganzen Satz kopiert und nach den Pluszeichen hochgez\u00e4hlt, obwohl ich nicht programmiert habe:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16290\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild3-Code1.png\" alt=\"Eingegebener Text: typing \u201elog\u201c + tab doesn\u2019t work, but typing \u201elog.\u201c + tab does Vorschlag von GitHub Copilot: typing \u201elog.\u201c + tab + tab doesn\u2019t work, but typing \u201elog.\u201c + tab + tab + tab does\" width=\"668\" height=\"50\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild3-Code1.png 668w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild3-Code1-300x22.png 300w\" sizes=\"auto, (max-width: 668px) 100vw, 668px\" \/><\/p>\n<p><strong><em>Hinweis<\/em><\/strong><em> f\u00fcr alle Screenshots: Text oder Code in wei\u00df oder anderen Farben ist von mir eingegeben, Text oder Code in hellgrau sind von GitHub Copilot generierte Vorschl\u00e4ge.<\/em><\/p>\n<p>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\u00fcr GitHub Copilot geschrieben, die GitHub Copilot direkt \u201ebeantwortet\u201c hat:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16292\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild4-Code2.png\" alt=\"Eingegebener Text: create a divider Vorschlag von GitHub Copilot: with &#96;---&#96; and then add a title with &#96;#&#96; to create a new section\" width=\"642\" height=\"62\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild4-Code2.png 642w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild4-Code2-300x29.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16294\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild5-Code3.png\" alt=\"Eingegebener Text: create a markdown link to the angular docs Vorschlag von GitHub Copilot: [Angular Docs] (https:\/\/angular.io\/docs) \" width=\"642\" height=\"62\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild5-Code3.png 642w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild5-Code3-300x29.png 300w\" sizes=\"auto, (max-width: 642px) 100vw, 642px\" \/><\/p>\n<p>Und auch bei der Taskanalyse hat GitHub Copilot teilweise direkt verstanden, was sp\u00e4ter im Code implementiert werden muss:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16296\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild6-Code4.png\" alt=\"Eingegebener Text: entire house item should be clickable, not only \u201dlearn more\u201d Vorschlag von GitHub Copilot: einfach den link auf das ganze div legen, nicht nur auf den button\" width=\"648\" height=\"62\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild6-Code4.png 648w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section2-Projekt-Bild6-Code4-300x29.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/p>\n<p>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.<\/p>\n<h2><strong>Coden mit GitHub Copilot<\/strong><\/h2>\n<p>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.<\/p>\n<h3><u>Task 1: Mehr Mock-Daten erzeugen<\/u><\/h3>\n<p>Wer kennt es nicht \u2013 um etwas bestimmtes zu testen, egal ob die Responsivit\u00e4t einer Website oder die Pagination einer Liste, braucht man mehr Objekte. W\u00e4re eigentlich schnell mit copy paste erledigt, aber leider haben die Objekte eine Id, die man h\u00e4ndisch angleichen muss. Ob GitHub Copilot das automatisch macht?<\/p>\n<p>Ja, aber leider nicht so, wie man es sich w\u00fcnschen w\u00fcrde. In der Angular Homes App liegen die Daten f\u00fcr die Immobilienobjekte in einer JSON-Datei vor, die einen Array namens \u201elocations\u201c mit den Objekten enth\u00e4lt. Jedes Objekt hat folgende Attribute:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16330\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/angular-homes-app-json.png\" alt=\"angular homes app json\" width=\"755\" height=\"230\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/angular-homes-app-json.png 755w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/angular-homes-app-json-300x91.png 300w\" sizes=\"auto, (max-width: 755px) 100vw, 755px\" \/><\/p>\n<p>In meiner Idealvorstellung h\u00e4tte GitHub Copilot mir ein neues Objekt mit neuer Id und den gleichen oder \u00e4hnlichen Inhalten wie die der schon existierenden Objekte vorgeschlagen, sobald ich ein Komma hinter dem letzten Objekt gemacht h\u00e4tte. Leider war das nur Wunschdenken, denn um \u00fcberhaupt einen Vorschlag von GitHub Copilot zu bekommen, musste ich ein neues Objekt \u00f6ffnen und \u201cid\u201c eingeben. Der Wert wurde dann automatisch generiert, also hochgez\u00e4hlt, und das n\u00e4chste Attribut samt Wert direkt vorgeschlagen. Die Empfehlungen musste ich aber f\u00fcr jedes Attribut einzeln best\u00e4tigen, d. h. bei dieser Vorgehensweise bet\u00e4tigt man sehr oft die Tabulator-Taste, bevor ein einziges neues Objekt vollst\u00e4ndig ist. Um zu analysieren, ob GitHub Copilot auf diese Weise hilfreich sein kann, m\u00fcssen wir die beiden Abl\u00e4ufe definieren: Auf der einen Seite muss man zur Generierung von neuen Mock-Daten GitHub Copilot triggern und sehr oft Tabulator dr\u00fccken, und auf der anderen Seite h\u00e4ndisch kopieren, einf\u00fcgen und die Ids ver\u00e4ndern. Vergleicht man die beiden Vorg\u00e4nge f\u00fcr zehn Objekte, bei denen nur die Ids hochgez\u00e4hlt werden sollen und die anderen Attribute unwichtig sind, ist die h\u00e4ndische Generierung deutlich schneller. Allerdings muss man dazusagen, dass GitHub Copilot sich nicht konsistent verh\u00e4lt: Als ich sp\u00e4ter einem Kollegen genau diesen Fall demonstrieren wollte, hat die Programmierassistenz pl\u00f6tzlich ganze Objekte mit neuer Id und allen Attributwerten vorgeschlagen. Wenig sp\u00e4ter 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\u00e4tigung jedes Attribut einzeln.<\/p>\n<h3><u>Task 2: Weiterleitung zur Detailansicht<\/u><\/h3>\n<p>Die meisten Leute sind inzwischen gewohnt, dass man bei Objekten auf Websites weitere Informationen erh\u00e4lt, wenn man <em>irgendwo<\/em> auf das Objekt klickt.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16298 size-medium\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild1-281x300.png\" alt=\"Ausschnitt aus dem Men\u00fc der Centigrade Website: Drei Buttons untereinander mit Text, Icon oder Bild. Der oberste Button enth\u00e4lt ein Bild von drei Personen an einem Tisch und den Titel \u201eUX Management\u201c. Die beiden anderen Buttons enthalten ein Icon und einen Titel.\" width=\"281\" height=\"300\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild1-281x300.png 281w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild1.png 544w\" sizes=\"auto, (max-width: 281px) 100vw, 281px\" \/><\/p>\n<p>Nehmen wir als Beispiel den rechts abgebildeten Ausschnitt aus dem Menu unserer Website. Ich pers\u00f6nlich erwarte, dass ich zum Webseiteninhalt \u201eUX Management\u201c weitergeleitet werde, egal ob ich auf die Schrift oder an einen bestimmten Punkt ins Bild klicke.<br \/>\nDaher lag es f\u00fcr mich nahe, in der Angular Homes App den routerLink von dem \u201eLearn more\u201c Button auf das ganze Immobilienobjekt zu schieben. Eigentlich eine einfache Aufgabe. Doch was meint GitHub Copilot dazu?<\/p>\n<p>Zun\u00e4chst hatten wir scheinbar Verst\u00e4ndigungsprobleme, denn wenn ich meine Programmieraufforderung in einen HTML-Kommentar gepackt habe, bekam ich als Vorschlag nur Text, wie man ihn in einen Code-Kommentar \u00fcber komplizierte Stellen schreibt. Erst als ich den Befehl ohne Kommentar in meinen HTML Code geschrieben habe, bekam ich eine Empfehlung zur Implementierung:<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16300\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild2-Code1.png\" alt=\"Eingegebener Text: move the routerLink to the section tag Vorschlag von GitHub Copilot: &lt;section class=&quot;listing&quot; [routerLink]=&quot;['\/details', housingLocation.id]&quot;&gt; \" width=\"738\" height=\"157\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild2-Code1.png 738w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild2-Code1-300x64.png 300w\" sizes=\"auto, (max-width: 738px) 100vw, 738px\" \/><\/p>\n<p>Der Code, den GitHub Copilot hier vorschl\u00e4gt, 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\u00fcgt VS Code automatisch einen closing tag f\u00fcr die neue section hinzu.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16302\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild3-Code2.png\" alt=\"Ausschnitt aus dem HTML Code, der mit &lt;section class=&quot;listing&quot; [routerLink]=&quot;['\/details', housingLocation.id]&quot;&gt;&lt;section class=&quot;listing&quot;&gt; beginnt und mit &lt;\/section&gt;&lt;\/section&gt; endet. Die section Tags sind rot umrandet.\" width=\"739\" height=\"386\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild3-Code2.png 739w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild3-Code2-300x157.png 300w\" sizes=\"auto, (max-width: 739px) 100vw, 739px\" \/><\/p>\n<p>Wie man im Screenshot sieht, bekommen wir dadurch eine zus\u00e4tzliche section in der section, die eigentlich h\u00e4tte angepasst werden sollen. Diese Situation zeigt, dass man die Vorschl\u00e4ge von GitHub Copilot nicht einfach blind akzeptieren, sondern nach wie vor auch beim Programmieren mit GitHub Copilot aufmerksam bleiben sollte.<\/p>\n<p>Zus\u00e4tzlich 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:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16304\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4.png\" alt=\"Ausschnitt aus der Benutzeroberfl\u00e4che der Anwendung: Zu sehen sind drei Immobilienobjekte, \u00fcber denen jeweils der Text \u201emove the router link to the section tag\u201c steht. Der Text ist rot umrandet.\" width=\"1802\" height=\"545\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4.png 1802w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4-300x91.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4-1500x454.png 1500w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4-768x232.png 768w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild4-1536x465.png 1536w\" sizes=\"auto, (max-width: 1802px) 100vw, 1802px\" \/><\/p>\n<p>Gerade in HTML ist das gef\u00e4hrlich, weil weder GitHub Copilot noch die IDE darauf hinweisen; und vor allem kurze Eingaben schnell \u00fcbersehen werden k\u00f6nnen.<\/p>\n<p>Nachdem ich diese Probleme behoben hatte, wollte ich noch das Styling f\u00fcr den Hovereffekt anpassen, um zu testen, wie GitHub Copilot in CSS Dateien performt.<br \/>\n<em>Wenn<\/em> die Eingabeaufforderungen erkannt werden, funktionieren die Empfehlungen, wie man im folgenden Screenshot sieht, ganz gut:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16306\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild5-Code3.png\" alt=\"Eingegebener Text: change bg colour on hover of the section Vorschlag von GitHub Copilot: section.listing:hover{ background: var(--primary-color); color: var(--accent-color); } \" width=\"410\" height=\"135\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild5-Code3.png 410w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild5-Code3-300x99.png 300w\" sizes=\"auto, (max-width: 410px) 100vw, 410px\" \/><\/p>\n<p>Nat\u00fcrlich schl\u00e4gt GitHub Copilot irgendwas als Wert vor, und in dem Beispiel sogar mehr als gew\u00fcnscht (color), aber ich habe die Hintergrundfarbe ja auch nicht spezifiziert. Au\u00dferdem ist jetzt das \u201eGer\u00fcst\u201c vorhanden und ich kann die Farbe im Nachhinein anpassen.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-16308 aligncenter\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild6-Code4.png\" alt=\"Ausschnitt aus dem CSS-Code: Zu sehen ist die Klasse \u201e.data-container\u201d mit verschiedenen Eigenschaften und darunter die folgende Interaktion mit GitHub Copilot: Eingegebener Text: change background colour on hover Vorschlag von GitHub Copilot: \/* Path: src\\app\\check-application\\check-application.component.css *\/ \" width=\"691\" height=\"248\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild6-Code4.png 691w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild6-Code4-300x108.png 300w\" sizes=\"auto, (max-width: 691px) 100vw, 691px\" \/><\/p>\n<p>Dabei ist mir aufgefallen, dass die Vorschl\u00e4ge nur generiert werden, wenn man explizit die dazugeh\u00f6rige Klasse dazuschreibt. Wie man im Beispiel sieht, reicht das alleinige Platzieren der Eingabe nach der Klasse, zu der der Code geh\u00f6ren soll, nicht aus.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16310\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild7-Code5.png\" alt=\"Ausschnitt aus dem CSS-Code: Zu sehen ist die Klasse \u201e.data-container\u201d mit verschiedenen Eigenschaften und darunter die folgende Interaktion mit GitHub Copilot: Eingegebener Text: change background colour of the .data-container on hover Vorschlag von GitHub Copilot: .data-container:hover{ background-color: lightblue; cursor: pointer; } \" width=\"556\" height=\"274\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild7-Code5.png 556w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task2-Bild7-Code5-300x148.png 300w\" sizes=\"auto, (max-width: 556px) 100vw, 556px\" \/><\/p>\n<p>Stattdessen muss man bei der Aufforderung \u201echange background colour of the .data-container on hover\u201c die Klassenzugeh\u00f6rigkeit \u201e<em>of the .data-container<\/em>\u201c bewusst hinzuf\u00fcgen. Erst dann bekommt man einen sinnvollen Codevorschlag, wie man im Screenshot sehen kann.<\/p>\n<h3><u>Task 3: Immobilienbilder sollen in einem carousel slider dargestellt werden<\/u><\/h3>\n<p>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\u00fcrde. Die Textvorschl\u00e4ge von GitHub Copilot f\u00fcr 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 \u00dcbersicht, z. B. welche neuen HTML Elemente man f\u00fcr den slider braucht, war allerdings nicht funktionsf\u00e4hig.<br \/>\nAuch nach mehreren neuen Anl\u00e4ufen, 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 \u2013 teilweise sogar schlechter als zuvor. Nach einiger Zeit erfolglosen Rumprobierens habe ich schlie\u00dflich aufgegeben und aus Spa\u00df ChatGPT gefragt, wie ich gegebenen Code ver\u00e4ndern 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\u00f6sung finden (auch wenn die KI jedes Mal sehr \u00fcberzeugt von sich selbst behauptet hat, mit der neuen Antwort den Fehler behoben zu haben\u2026).<\/p>\n<h3><u>Task 4: Formular\u00fcberpr\u00fcfung<\/u><\/h3>\n<p>Und da ist sie wieder, die Berufskrankheit, Elemente einer Benutzeroberfl\u00e4che zu identifizieren, die beim User zu Frustration f\u00fchren k\u00f6nnen: Klickt man auf den \u201eApply now\u201c Button in der Detailansicht, passiert auf Benutzer*innenebene nichts \u2013 egal ob die Eingabefelder ausgef\u00fcllt sind oder nicht. Also beschloss ich, mir das zu Nutze zu machen und zun\u00e4chst eine Formular\u00fcberpr\u00fcfung einzubauen. Das hei\u00dft, wenn man auf den \u201eApply now\u201c Button klickt, soll \u00fcberpr\u00fcft werden, ob eines der Felder leer ist. Wenn das der Fall ist, soll am entsprechenden Feld eine Fehlermeldung erscheinen.<br \/>\nNach der Implementierung sah das Bewerbungsformular so aus:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16332\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Ausschnitt-Benutzeroberflache-Bewerbungsformular.png\" alt=\"Ausschnitt Benutzeroberfl\u00e4che Bewerbungsformular\" width=\"1000\" height=\"450\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Ausschnitt-Benutzeroberflache-Bewerbungsformular.png 1000w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Ausschnitt-Benutzeroberflache-Bewerbungsformular-300x135.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Ausschnitt-Benutzeroberflache-Bewerbungsformular-768x346.png 768w\" sizes=\"auto, (max-width: 1000px) 100vw, 1000px\" \/><\/p>\n<p>Bei dieser Aufgabe bin ich beim Formulieren der Eingabe das erste Mal an meine Grenzen gesto\u00dfen. Eigentlich wollte ich Folgendes ausdr\u00fccken: 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 \u00dcberpr\u00fcfung am Ende doch selbst programmiert und die entsprechenden boolean Variablen hinzugef\u00fcgt. Beim Setzen der Variablen hat sich GitHub Copilot aber wieder als sehr n\u00fctzlich erwiesen, denn sobald ich die erste Variable mit this.firstNameEmpty = false; angepasst hatte, schlug mir GitHub Copilot sofort die gleiche Anpassung f\u00fcr die anderen Formularfelder vor. Solche Vorschl\u00e4ge sind sehr hilfreich und sparen Zeit sowie Schreibarbeit.<\/p>\n<h3><u>Task 5: Bewerbung \u00fcberpr\u00fcfen<\/u><\/h3>\n<p>Nachdem man bei so wichtigen Formularen wie hier im Bewerbungsprozess f\u00fcr eine Immobilie dazu aufgefordert wird, die eingetragenen Daten noch einmal auf ihre Richtigkeit zu \u00fcberpr\u00fcfen, wollte ich das hier auch machen: Wenn man auf den \u201eApply now\u201c Button klickt, soll man zu einer neuen Ansicht weitergeleitet werden, in der die Daten der ausgew\u00e4hlten Immobilie und die eigenen Eintr\u00e4ge aus dem Bewerbungsformular angezeigt werden. Daf\u00fcr brauchte ich<\/p>\n<ul>\n<li>eine neue Angular component inclusive HTML Template und CSS Datei<\/li>\n<li>eine neue route<\/li>\n<li>eine Weiterleitung von der Detailansicht zur Bewerbungs\u00fcberpr\u00fcfung, bei der die Immobilien-Id und Bewerbungsdaten mitgegeben werden.<\/li>\n<\/ul>\n<p>Warum auch immer habe ich mich bei der Ausf\u00fchrung 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16316\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild1-Code1.png\" alt=\"Ausschnitt aus dem JavaScript Code. Zu sehen sind die erstellten Routes und darunter die Interaktion mit GitHub Copilot: Eingegebener Text: add new route to \u201ccheck-application\u201c Vorschlag von GitHub Copilot: add new route to \u201capplication-status\u201c \" width=\"318\" height=\"254\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild1-Code1.png 318w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild1-Code1-300x240.png 300w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/p>\n<p>Als ich diesen Fall sp\u00e4ter noch einmal f\u00fcr eine nicht existierende component testen wollte, ging es pl\u00f6tzlich, 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.<\/p>\n<p>Bei allen anderen Unteraufgaben konnte ich mir dann Dank GitHub Copilot sehr viel Schreibarbeit bzw. copy paste mit h\u00e4ndischen Anpassungen sparen: Alles, was beim Coden einem bestimmten Muster gefolgt ist, hat GitHub Copilot automatisch generiert und ich musste die Vorschl\u00e4ge nur noch akzeptieren \u2013 egal ob ich in JavaScript oder HTML programmiert habe.<\/p>\n<p>In den folgenden Beispielen sieht man die Ergebnisse f\u00fcr das \u00dcbergeben und Auslesen der Formulareingaben mit dazugeh\u00f6rigem Typ, so wie es von TypeScript gefordert wird:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16318\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild2-Code2.png\" alt=\"Ausschnitt aus dem JavaScript Code: this.router.navigate([ '\/check-application', this.housingId, this.applyForm.get('firstName')?.value, this.applyForm.get('lastName')?.value, this.applyForm.get('email')?.value, ]);\" width=\"418\" height=\"177\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild2-Code2.png 418w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild2-Code2-300x127.png 300w\" sizes=\"auto, (max-width: 418px) 100vw, 418px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16320\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild3-Code3.png\" alt=\"Ausschnitt aus dem JavaScript Code: applicationData: | { firstName: string; lastName: string; email: string } | undefined = undefined;\" width=\"581\" height=\"92\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild3-Code3.png 581w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild3-Code3-300x48.png 300w\" sizes=\"auto, (max-width: 581px) 100vw, 581px\" \/><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16322\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild4-Code4.png\" alt=\"Ausschnitt aus dem JavaScript Code: this.applicationData = { firstName: this.route.snapshot.params['firstName'], lastName: this.route.snapshot.params['lastName'], email: this.route.snapshot.params['email'], };\" width=\"525\" height=\"126\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild4-Code4.png 525w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild4-Code4-300x72.png 300w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<p>Auch beim Anzeigen der Informationen in HTML konnte mir GitHub Copilot unter die Arme greifen:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-16324\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild5-Code5.png\" alt=\"Ausschnitt aus dem HTML Code: In einem div werden alle Attribute des Bewerbungsformulars und des ausgew\u00e4hlten Immobilienobjekts nach folgendem Muster aufgelistet: &lt;p&gt;Attributsname in nativer Sprache: {{ applicationData?.programmatischerAttributsname }}&lt;\/p&gt;\" width=\"705\" height=\"508\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild5-Code5.png 705w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section3-Task5-Bild5-Code5-300x216.png 300w\" sizes=\"auto, (max-width: 705px) 100vw, 705px\" \/><\/p>\n<p>Dabei ist mir aufgefallen, dass man in HTML keine Objektattribute \u00fcberspringen kann. Wenn man also ein Attribut auslassen m\u00f6chte, muss man vom n\u00e4chsten gew\u00fcnschten Attribut den Beginn oder sogar den ganzen Namen neu eintippen. An dieser Stelle k\u00f6nnte man die Vorschl\u00e4ge der KI soweit optimieren, dass man durch die Attribute eines Objekts durchschalten kann, so wie es auch m\u00f6glich ist, wenn GitHub Copilot mehrere L\u00f6sungsvorschl\u00e4ge parat hat.<\/p>\n<h2><strong>Pers\u00f6nliches Fazit<\/strong><\/h2>\n<p>Wie wir gesehen haben, gibt es zwei verschiedene Ans\u00e4tze, um GitHub Copilot zu nutzen:<br \/>\nEinerseits gibt es die M\u00f6glichkeit, durch direkte Aufforderungen in nativer Sprache wie z. B. \u201echange background colour on hover\u201c 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\u00e4lt man bei dieser Methode oft auch nicht korrekte Ergebnisse. Aber wenn man sich daran gew\u00f6hnt hat, wo und wie man die Eingabe formulieren muss, schl\u00e4gt 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\u00fcr die L\u00f6sung einer Aufgabe zu entwickeln.<br \/>\nAndererseits kann man GitHub Copilot sehr gut zur Autovervollst\u00e4ndigung nutzen. Das erspart dem\/der Programmierer*in l\u00e4stige Schreibarbeit oder copy paste mit h\u00e4ndischer Nachbearbeitung, beispielsweise bei der Verwendung von Objekten, wenn GitHub Copilot automatisch fehlende Attribute erg\u00e4nzt \u2013 definitiv ein Gewinn f\u00fcr alle Programmierenden!<\/p>\n<p>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 \u2013 dann wei\u00df man wenigstens sicher, dass man z. B. alle Variablennamen angepasst hat (oder eben nicht).<br \/>\nEin weiteres Problem bei der Nutzung von GitHub Copilot ist nat\u00fcrlich auch, dass der eigene Code nicht lokal von der KI analysiert und verarbeitet, sondern daf\u00fcr an den Server geschickt wird. Das macht den Einsatz von GitHub Copilot in Unternehmen wie Centigrade, die an Kundenprojekte und die dazugeh\u00f6rigen Verschwiegenheitserkl\u00e4rungen etc. gebunden sind, unm\u00f6glich.<\/p>\n<p>Aber um zur urspr\u00fcnglichen Frage zur\u00fcckzukommen: 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\u00f6nnen, 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\u00e4hrliche Aufgaben abnehmen, auch nicht anders gelaufen. Aber am Ende steht, zumindest im Moment noch, trotzdem ein Mensch, der die geleistete Arbeit noch einmal \u00fcberpr\u00fcfen muss \u2013 egal ob in der industriellen Fertigung oder beim Programmieren. Wie lange das noch so sein wird? Wer wei\u00df.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright wp-image-16326 size-medium\" src=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section4-Fazit-Bild1-300x300.png\" alt=\"KI Elefant mit f\u00fcnf Beinen, von denen er eines in die Luft streckt, steht auf einem fliegenden Tischtuch. Sein R\u00fcssel hat einen Schlangenkopf mit Zunge und vor ihm stehen eine \u00fcbergro\u00dfe Teetasse und ein Weihrauchgef\u00e4\u00df. Das Tischtuch schwebt \u00fcber einer Wiese mit B\u00e4umen und Bergen im Hintergrund.\" width=\"300\" height=\"300\" srcset=\"https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section4-Fazit-Bild1-300x300.png 300w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section4-Fazit-Bild1-150x150.png 150w, https:\/\/www.centigrade.de\/wordpress\/wp-content\/uploads\/Section4-Fazit-Bild1.png 586w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>Aber der Weg, bis Menschen vollst\u00e4ndig durch KIs ersetzt werden, ist noch lang \u2013 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 \u201eEin Elefant, der auf einem fliegenden Teppich Tee trinkt\u201c) nicht besonders gut getroffen wurde, welche Fehler findet ihr? Solange KIs so etwas produzieren, sind auch K\u00fcnstler*innen unersetzbar.<\/p>\n<p>Also cheers auf den beruflichen Weg, der vor mir liegt! \ud83d\ude42<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"author":70,"featured_media":0,"template":"","tags":[513,992,993,839,617],"class_list":["post-16281","blog","type-blog","status-publish","hentry","tag-angular","tag-github","tag-github-copilot","tag-ki","tag-ux-engineering"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/users\/70"}],"version-history":[{"count":10,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16281\/revisions"}],"predecessor-version":[{"id":16350,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/blog\/16281\/revisions\/16350"}],"wp:attachment":[{"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/media?parent=16281"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.centigrade.de\/de\/wp-json\/wp\/v2\/tags?post=16281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}