AI Tool, welches bei der GUI-Entwicklung hilft?

[16-Bit]

Hi!
Ich nutze ChatGPT sehr erfolgreich bei der Node.JS Entwicklung. Da ich wenig Erfahrung mit GUI Entwicklung habe.. gibt es ein Tool, welches einem dabei hilft eine React GUI zu bauen? Es gibt zwar ein paar WYSIWYG Editoren, die mich aber nicht überzeugt haben. Es geht mir darum, ein schnelles Mockup zu erstellen.

Ich möchte den Code dann aber in meine eigene App integrieren. Also bringt mir ein gehosteter Dienst nichts.
Hat jemand einen Tipp?

Vor allem, wie man die Oberfläche dann interativ anpasst, würde mich interessieren.

Gruß und danke!

 

[madmax2010]

Nimm doch einfach einen beliebigen React UI Bulder

 

[Domski]

@16-Bit Rein aus Interesse: Darf ich fragen, ob du from-scratch die Anwendung mit ChatGPT entwickelst? Wenn du schätzen würdest: Wie viel % des Codes ist von Chat-GPT generiert.

Bei mir im Büro bekomme ich insbesondere von den neuen Kollegen oft die Frage, ob Sie das auch mit Chat-GPT machen könnten....

 

[16-Bit]

@16-Bit Rein aus Interesse: Darf ich fragen, ob du from-scratch die Anwendung mit ChatGPT entwickelst? Wenn du schätzen würdest: Wie viel % des Codes ist von Chat-GPT generiert.

Ja bestimmt 80% hat Chatgpt gemacht. Ich hab halt überprüft hinterher. Aber ich muss sagen, dass es eine extreme Erleichterung ist. Die Recherche, warum dies und das nicht funktioniert ist keine Raketenwissenschaft. Aber es kostet halt im Zweifel Stunden. Das macht die KI dann in Sekunden.

Bei mir im Büro bekomme ich insbesondere von den neuen Kollegen oft die Frage, ob Sie das auch mit Chat-GPT machen könnten....

Ich sehe da überhaupt kein Problem, solange man keine Geschäftsgeheimnisse postet. Am Ende erleichtert es einem die Arbeit extrem. Und wenn man dabei noch was lernt umso besser.

Ich habe die folgende Erfahrung gemacht:

Oft gehen Hilfeseiten von einem bestimmten Kontext aus. Wenn ich diesen Kontext bei meinem Problem nicht kenne (Randbedingungen usw.), dann helfen mir diese Seiten einfach nicht. Und genau da füllt AI die Lücke.

Christoph

Ergänzung (13. Dezember 2023)

Nimm doch einfach einen beliebigen React UI Bulder

Danke! hat jemand einen Tipp für einen guten Builder, ohne Einschränkungen wie "nur 5 Components" usw.? Ich finds ärgerlich, dass dann auch teilweise keine Animationen usw. mit exportiert werden.

Danke!

 

[Domski]

@16-Bit Danke für die ausführliche Rückmeldung!
Bei uns in der Firma ist bisher eine Nutzung nicht ausdrücklich erlaubt. Da wir selber Produkte entwickeln, ist die Datenschutzabteilung und Geschäftsführung recht vorsichtig.

Im praktischen Arbeiten sehe ich die Nutzung ebenfalls etwas kritischer: (Neue) Kollegen (insbesondere Uni-Absolventen oder Leute mit wenig Berufserfahrungen) haben teilweise extreme Schwierigkeiten, Code zu verstehen oder gar selber vom Scratch zu entwickeln. Sich dann in komplexe Materie einzuarbeiten, ist dann nicht selten eine riesen Hürde.
Und dann komme ich noch daher und sage denen, dass Chat-GPT den hier nichts bringt, weil unsere eigens entwickelten Frameworks schlicht weg bei Chat-GPT nicht im Zugriff sind. Die Gesichter, die mich dann angestarrt habe, hätte ich festhalten müssen Panik, Verunsicherung, Überforderungen - so konnte man es das eine oder andere Mal beschreiben

 

[16-Bit]

Als Uni Absolvent bin ich es gewohnt, mich stundenlang durch komplexe Materie durchzukämpfen. Aber wie schon gesagt - gerade sowas wie node.js ist ja keine Raketenwissenschaft. Und wenn ich ChatGPT frage:

Was macht diese oder diese Zeile...

Und ich bekomme die perfekte Erklärung.. Ja dann wäre ich ja eigentlich als Firma schön blöd, wenn ich die Zeitersparnis nicht mitnehmen würde. Ich würde es aber immer mit der Bitte an denjenigen Verknüpfen, dass er das auch als Lernen begreift.

 

[[ChAoZ]]

Die Frage ist, wenn du 6/12 Monate später die gleiche Zeile an anderer Stelle im Code siehst, wirst du diese nun verstehen oder wieder die AI fragen was dort gemacht wird?

Sich in komplexen Code einzuarbeiten gehört für mich, zu einem Dev dazu. Natürlich ist es am Anfang schwer aber mit jedem Projekt, mit jedem Jahr wird es einfacher und irgendwann ließt du den Code nur noch, er wird "sprechend" für dich. Ich weiß ehrlich gesagt nicht ob man sich mit Hilfe der AI selbst so weit entwickelt, da die AI einem viel Arbeit abnimmt und man selbst nie dazu "gezwungen" wird. Ich weiß es nicht, könnte es mir aber gut vorstellen.

Eine andere Sache sind Bugs. Du baust eine App mit Hilfe der AI und plötzlich geht ein Feature nicht. Wie kann dir da die AI helfen ohne vollständigen Zugriff auf den Code? Viele Bugs sind logische Fehler, keine Syntax Fehler usw. die der Compiler/Parser mitbekommt.

 

[CyborgBeta]

@16-Bit

Edit: Sorry, das war der falsche Link gewesen...

https://codeium.com/

 

[CyborgBeta]

Sorry, ich hatte CodiumAI mit Codeium verwechselt...

Codeium nutze ich auch und es ist free.

Du kannst sagen, welche Funktion(en) generiert werden soll oder welche Funktionsweise erklärt werden soll.

Oft gibt es auch alternative Implementierungsvorschläge.

Codeium gibt es als Erweiterung/Plugin für viele IDEs. Es kennt damit also die gesamte Codebasis.

Aber du müsstest dich natürlich etwas damit auskennen, um beurteilen zu können, ob der generierte Code deinen Anforderungen entspricht.

Hier mal ein Beispiel für generierten Code in JS:

      function leastCommonMultiple(a, b) {
        return (a * b) / greatestCommonDivisor(a, b);
      }

      function greatestCommonDivisor(a, b) {
        if (b == 0) {
          return a;
        }
        return greatestCommonDivisor(b, a % b);
      }

      function pad(num, size) {
        num = num.toString();
        while (num.length < size) num = " " + num;
        return num;
      }

//...

Ergänzung (17. Dezember 2023)

Ich nutze es seit Oktober schon...

 

[dms]

function pad(num, size) { num = num.toString(); while (num.length < size) num = " " + num; return num; }

und das ist wirklich ein sinnvolle Lösung?
Best Practise - also nicht nur "ja macht was es soll"?

ich mach im wesenlichen nur mit SQL und PLSQL .. aber werfe das mal einfach in den Raum (ohne es gemessen zu haben)
function pad2(num, size) { return String(num).padStart(size, ' ') }

 

[CyborgBeta]

und das ist wirklich ein sinnvolle Lösung?

Für meinen speziellen Anwendungsfall (und privat) genügt es...

Wenn es eine Utility-Funktion sein soll, dann fehlt natürlich die Fehlerbehandlung usw.

padStart scheint recht "neu" zu sein, ca. erst seit 2017: https://developer.mozilla.org/en-US...obal_Objects/String/padStart?retiredLocale=de

Aber sieht gut aus.

 

[dms]

scheint recht "neu" zu sein, ca. erst seit 2017

und das habe ich mir in 4 Minuten "erarbeitet" .. und genau das macht mich nachdenklich welche Codequalität man so rausbekommt und welche Fähigkeiten dabei unbemerkt verkümmern