Beiträge von kim88 im Thema „Programmieren mit KI Unterstützung“

Herr_Berg

Entschuldige die verspätete Antwort. Ende Jahr ist beruflich bei mir immer die Hölle los - auch mit GitHub CoPilot

Mein Ursprungs-Post war ja im April und ich nutze den CoPilot auch heute noch täglich. Der hat sich so in meine Arbeitsweise integriert, dass wenn ich vor einem Texteditor ohne CoPilot sitze ihn richtig vermisse.

Ich glaube das man weder ein "besserer" noch ein "schlechterer" Programmierer wird. Es ist am Ende einfach eine Zeitersparnis für Dinge die man tun muss aber super nervend sind.

Als Beispiel von heute. Ich habe heute Nachmittag an einer SVG Animation gearbeitet. SVG sind Bilder die quasi gecodet sind. Im Grunde sind alle modernen Icons (wie z.b. hier im Texteditor im Forum für Fett, Kursiv, etc) SVG.

SVG haben viele Vorteile (z.b. das sie nie unscharf sind egal wie gross oder klein das du sie darstellst) und das du jede einzelne Linie bzw geometrische Form (SVGs bestehen nur aus Linien und geometrische Formen) animieren kannst.

Ich breche die Komplexität der Animation etwas runter. Aber in dem SVG hatte ich einen Kreis mit dem Radius von 110px, und musste den so animieren, dass der Radius 250px gross wird.

Im SVG Code wird der Radius so definiert:

<path id="circlePath" fill="none" d="M90,200a110,110 0 1,0 220,0a110,110 0 1,0 -220,0"/>

Das heisst der Bereich im "d=" definiert den Kreis. Normalerweise bearbeitet man SVGs mit Programmen wie Adobe Illustrator oder z.b. Inkscape (OpenSource und Linux) und kümmert sich nicht gross um solche Brain-Fuck Werte das man dort quasi per GUI nen Kreis erstellt und das Programm im Hintergrund diese Codes schreibt.

Wenn der Kreis aber nun auf der Webseite animiert werden muss, muss ich diese Werte im "d" dynamisch verändern können (mal grösser, mal kleiner, etc).

Das ist ein sorry den Ausdruck Brainfuck ohne Ende. Also schreibe ich GitHub Copilot schreib mir eine Funktion wo ich quasi sagen kann "mach Radius XY" und gibt mit dann das zurück was ich bei "d=" einfügen muss.

Das war die Antwort:

// Funktion zur Erzeugung von Kreis-Path-Daten
function createCirclePath(cx, cy, r) {
    return `M${cx - r},${cy} a${r},${r} 0 1,0 ${2 * r},0 a${r},${r} 0 1,0 -${2 * r},0`;
}

Eine Funktion die ich aufrufen und sagen kann ich brauch Radius 325px also z.b. so:

let d = createCirclePath(200, 200, 325);

Und e Voila bekomme ich diesen langen dummen String zurück den ich dafür brauche.

Ja, ich hätte das selber schreiben können. Hätte wohl noch einen Blick in die Dokumentation der SVGs gebraucht, da mir die Reihenfolge der Werte im d-Attribute gerade nicht geläufig sind. Das hätte mich aber viel mehr Zeit gekostet.

Ich habe das Problem in knapp 30 Sekunden mit einem Prompt gelöst und konnte weiter am Projekt arbeiten. Hätte ich es selber geschrieben wäre ich da wohl mit lesen der Doku eine Weile dran gewesen. Hätte ich es gegooglet, hätte ich wohl auch eine Pfannenfertige Funktion gefunden - hätte die aber für mein Projekt anpassen müssen. Kostet also auch mehr Zeit.

Das ist das spannende an GitHub CoPilot er schreibt die das Zeug so wie du es in deinem bestehenden Projekt benötigst, da es quasi permanent dein laufendes Projekt das du offen hast analysiert.

Klar kann man argumentieren, hätte ich es selber geschrieben und Doku gelesen wäre ich "ein besserer Programmierer" weil ich was gelernt habe. Ich arbeite nun seit über 15 Jahren mit Webseiten, seit über 7 Jahren Hauptberuflich und es ist das erste mal das ich ein Kreis innerhalb eines SVGs animieren musste (das man komplette SVGs animiert, gibt es immer wieder). Wenn ich das nun "gelernt und selber gemacht" hätte geht es min. wieder 5-6 Jahre bis so eine Aufgabe kommt - und ganz ehrlich bis dann hab ich es auch wieder vergessen und lerne es neu

Daher Nein ich glaube nicht das GitHub CoPilot oder ChatGPT mich zu einem "schlechteren Programmierer" macht. Es vereinfacht dir dumme Dinge die man hin- und wieder tun muss.

Ich bezweifle das da ChatGPT geeignet ist. Da müsstest du Funktion um Funktion rein copy&pasten damit es dem Kontext versteht.

Ich würde da eher zu GitHub Copilot greife. Eine KI die direkt in deinem Code Editor läuft z.b Visual Studio Code. Der hat dann auch integrierten Chat und dort kannst du dann 1:1 die Fragen stellen die du hier stellst - und das ding analysiert dann dein projekt und macht entsprechende Vorschläge.

@schnuppi84 genau so.

@schnuppi84 ich rendere hier nichts.

GitHub CoPilot ist bei mir in der IDE eingebunden. Und mach wenn ich irgendwas programmiere automatisch "Vervollständigungsvorschläge" mit Klick auf die "tab" Taste kann ich die akzeptieren.

CoPilot merkt dabei an was für einem Projekt ich arbeiten, kennt den Kontext der Dateien aus dem Projekt. Und schriebt so ziemlich guten Code.

CoPilot für Microsoft Office ist ja leider noch nicht öffentlich verfügbar. Gibt nur ein paar ausgewählte Firmen die das bisher testen dürfen.

Viel Erfolg!

Perval Nein. Angst ist grundsätzlich immer ein schlechter Ratgeber -> erst Recht wenn es um gesellschaftlichen Fortschritt geht.

Beim Programmieren macht man sehr oft repetitive Arbeiten bei jedem Projekt gefühlt Dinge die immer sehr ähnlich aber doch minimal anders sind. Wenn einem die KI diese Arbeit abnimmt, hat man mehr Zeit um die wirklich coole Dinge zu machen.

Kann z.b. einzelne Animationen verfeinern. Mehr Zeit ins Testing investieren, etc.

Und ja - vielleicht gibt es irgendwann den Beruf des "Web-Entwicklers" nicht mehr bzw ist hochgradig automatisiert (bzw. mehr automatisiert als er heute schon ist). Und ja vielleicht arbeite ich in 5 oder 10 Jahren dadurch nicht mehr in diesem Beruf. Aber es gibt ja noch extrem viele andere Berufe -> und gerade auch mit der KI gibt es neue Berufe.

Z.b. geistert ja bereits der Beruf "AI Prompt Engineer" herum. Weil nur weil eine KI "alles" kann muss man am Ende auch die KI dazu bringen alles was man benötigt zu machen. Die "Prompts" sind die Befehle die man einer KI gibt.

Meine Beiträge hier sind ein gutes Beispiel: Das Der Prompt "Create a Tic Tac Toe Game" nicht ausgereicht hat -> es war zwar etwas da, sah aber scheisse aus -> hat nicht gestoppt wenn jemand gewonnen hat, etc.

Erst im Beitrag danach habe ich mit 3 Prompts die jeweils aufeinander aufbauen ein wirklich "gutes" Ergebnis bekommen. Und je komplexer die Arbeit wird umso komplexer werden solche Prompts bzw die aufeinander aufbauenden Prompt-Ketten.

Ich bin Jahrgang 88. Für meinen Grossvater war die Lebensart "Wenn man mal einen Beruf erlernt hat, kann man den Rest fürs Leben in diesem Beruf arbeiten" noch richtig.

Für meine Eltern stimmte die Lebensart bereits nicht mehr -> und sind heute im Grunde die Generation an Menschen die heute zwischen Anfang 50 und 65 sind -> oft langzeitarbeitslos weil sie nie Weiterbildungen gemacht haben und man sie heute nicht mehr brauchen kann.

Für meine Generation, stimmt die Aussage definitiv gar nicht mehr. Daher die Annahme das es gut möglich ist, dass ich in sagen wir mal 20 Jahren in meinem Leben etwas komplett anderes mache? Das ist gut möglich -> aber ich habe da definitiv keine Angst davor.

Zitat von harihegen

Neben der Einheitsmeinung und durch KI festgelegte Fakten gibt es bald auch gleichmäßigen Code auf der ganzen Welt.

Schlagzeile 2025: "Weltweit alle Computer lahm gelegt durch von ChatGPT-v7 erstellten Virus"

Da sist Quatsch. So funktion GPT-Ki nicht. Die GPT-Ki macht nicht einfach "Copy & Paste" Code von irgendwelchen Codeschnipseln die sie auf Stackoverflow gefunden hat.

Sondern hat eben die Dokumentationen von z.b. PHP, JavaScript oder Python "gelesen/verarbeitet" und kann alleine dadurch schon Code schreiben - ohne jemals reale Code Beispiele gesehen zu haben.

Du bekommst, wenn du mein Beispiel oben nimmst - auch komplett unterschiedliche Ergebnisse - ob du nun z.b. sagst: "Make the Tic Tac Toe Game look Cool" oder "Make the Tic Tac Toe Game look beautiful", "Make the Tic Tac Toe Game look like a Child Game" oder "Make the Tic Tac Toe Game look good and use the colors blue, green and red", etc

Daher die Art und weisse wie man Code schriebt wird ja eh von der Programmiersprache festgelegt (Also der Syntax) klar hält sich hier auch GPT3 dran. Aber wie er etwas schreibt ist je nach Prompt völlig unterschiedlich.

Um das ganze etwas auf die Probe zu stellen habe ich nun ein komplett neues Projekt geöffnet und nur eine "index.html" mit folgendem Inhalt erstellt:

<html>
  <head>
    <title>Tic Tac Toe</title>
  </head>
  <body>
    <!-- Create a working Tic Tac Toe Game with inline JS and CSS -->
  </body>
</html>

Danach habe ich dem CoPilot gesagt er soll die Datei lesen und mir Vorschläge geben:

Der erste Vorschlag der kam war folgender:

Ich habe den Vorschlag akzeptiert und öffne die Datei nun im Browser:

Als Ergebnis bekomme ich folgendes:

Aber das geht definitiv besser. Also habe ich das Projekt wieder gelöscht und mit 3 Prompts nacheinander gearbeitet.

Als erstes habe ich der KI gesagt: "Create a Tic Tac Toe Markup":

Als Ergebnis gab es den gleichen HTML Code wie oben. Danach gab ich der KI den Befehl: "Make the Tic Tac Toe Game look Cool"

Danach wurde der HTML und CSS Code komplett überarbeitet:

Als Code habe ich folgendes bekommen:

<html>
  <head>
    <title>Tic Tac Toe</title>
    <style>
      /* Make the Tic Tac Toe Game look Cool */
      .board {
        display: flex;
        flex-direction: column;
        width: 300px;
        height: 300px;
        border: 1px solid black;
      }
      .row {
        display: flex;
        flex-direction: row;
        width: 300px;
        height: 100px;
      }
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px solid black;
        font-size: 50px;
      }
    </style>
  </head>
  <body>
    <!-- Create a Tic Tac Toe Markup -->
    <div class="board">
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
      <div class="row">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
      </div>
    </div>
  </body>
</html>

Im Browser sieht das ganze so aus:

Das ganze war natürlich noch ohne Funktion. Also gab ich der KI den letzten Befehl: "Create the Game Logic with cool Win Animation":

Danach wurde ziemlich viel JavaScript Code hinzugefügt. Und ich hatte ein funktionierendes Spiel siehe hier das YouTube Video:

Dadurch habe ich nun ein funktionierendes Tic Tac Toe Spiel im Browser "programmiert" ohne eine einzelne Zeile Code zu schreiben.

Einige von euch wissen ja, dass ich hauptberuflich programmiere. Und seit zwei Mochen mache ich das mit Hilfe einer KI. GitHub/Microsoft hat das Produkt "GitHub CoPilot" veröffentlich. Das ganze basiert auf OpenAI GPT3 Model.

Ich nutze es jetzt seit knapp 2 Wochen und am aktuellen Projekt wo ich arbeite habe ich so gut wie keine eigene Zeile Code geschrieben. Egal ob HTML, PHP, JavaScript, TypeScript, Python, CSS, SASS, etc.

Wenn ich Anfange Code zu schreiben versucht die KI direkt herauszufinden was ich machen will und gibt mir eine Option an meinen Code zu vervollständigen. Mit Druck auf die "Tabulator" Traste schreibt es dann diesen Code z.b. eine Funktion automatisch fertig.

Es kann auch selbstständig SQL Queries schreiben:

Als Beispiel:

Wenn ich an einem WordPress Projekt arbeite und in der globalen functions.php eine neue Funktion schreibe tippe ich:

function select_user_by_e

Ab diesem Zeitpunkt erkennt der CoPilot, dass ich eine Funktion haben wie der mir Benutzer anhand der E-Mail Adresse ausgibt. Er merkt auch automatisch, dass ich mit WordPress arbeite und schlägt mir eine WordPress kompatible Funktion vor die ich mit der "Tab-Taste" nur noch bestätigen muss:

Das graue ist der Vorschlag vom CoPilot

Fairerweise ist das natürlich ein einfacher Vorschlag machen wir was komplizierteres. Als Beispiel ich möchte eine Funktion, die mir ein WordPress Menü, ink. der Untermenüs als Array zurückgibt:

Ich schreibe wieder folgendes:

function get_menus_with_submenus_as_arr

Danach wird mir folgendes vorgeschlagen (wieder in grau):

In beiden Fällen ist das 100% funktionierender PHP Code der 1:1 WordPress kompatibel ist und ich auch nicht anders geschrieben hätte (evtl hätte ich die Variabeln anders genannt, aber funktional ist das genial). Und spart extrem Zeit.

Hier ein weiteres Beispiel in JavaScript:

Ich schreibe folgendes:

function check_is_mail_valid

Als Ergebnis bekomme ich folgendes:

Und nun wird es mehrfach beeindruckend. Der CoPilot gibt mir nicht nur irgendeinen Code Schnipsel aus, sondern analysiert auch das Projekt an dem ich arbeite. Und findet bisher als einziges Formular Feld vom Typ E-Mail irgendwo in einer HTML Datei das Feld "#molino_contact_mail" und arbeitet das direkt mit ein.

Gleichzeitig merkt es auch, dass ich jQuery im Projekt aktiv habe und bietet mir entsprechend keine pure JavaScript sondern eine jQuery Lösung. Wenn ich jQuery deaktiviere, bietet er mit stattdessen eine pure JavaScript Lösung an.

Ganz ehrlich die Art und weise, wie ich in den letzten 2 Wochen programmiert haben, haben sich extrem verändert. Und ich habe in viel kürzerer Zeit massiv mehr geschafft. Die Vorschläge vom CoPilot sind nicht immer 100% akkurat aber oft eine sehr gute Basis und man muss nur noch wenige Dinge verändern.

Der GitHub CoPilot gibt es für folgende IDEs jeweils als Plugin:

• Visual Studio
• Visual Studio Code
• Neovim
• und für alle IDEs von JetBrain (WebStorm, PyCharm, etc)

Man kann das ganze kostenlos in vollem Funktionsumfang für 30 Tage kostenlos testen.

Danach bezahlt man als Einzelperson entweder 10 Dollar/Monat oder 100 im Jahr.

Es gibt aber auch Pläne für Unternehmen wo man mehrere Lizenzen auf einmal erwerben kann.

Ich kann allen die regelmässig programieren nur empfehlen das mal auszuprobieren.