Vibe Coding Mendix Widgets | Mendix

Direkt zum Inhalt

Vibe Coding Mendix Widgets 

Die zentralen Thesen

  • KI-gestützte Tools wie Copilot, Cursor und Warp können die Beschleunigung drastisch erhöhen. Mendix Widget-Entwicklung durch Generierung von vollständigem Funktionscode mit minimalem manuellem Programmieraufwand.
  • Diese Tools schließen die Wissenslücke für Low-Code-Entwickler, indem sie komplexe JavaScript/TypeScript-Implementierungen übernehmen und dabei lediglich klare Anweisungen und Feedback benötigen.
  • Der KI-gestützte Ansatz wandelt die Widget-Entwicklung von einem mehrstufigen technischen Prozess in einen dialogorientierten Workflow um, bei dem die Entwickler die Anforderungen beschreiben und iterativ Tests durchführen.
  • Obwohl KI-generierter Code leistungsstark ist, erfordert er eine sorgfältige Überprüfung auf Sicherheits-, Leistungs- und Codequalitätsprobleme, weshalb Versionskontrolle und professionelle Code-Reviews unerlässlich sind.

Aufladung Mendix Widget-Entwicklung mit Tools wie Copilot, Warp und Cursor! So hat diese leistungsstarke Kombination meine Art, individuelle Widgets zu erstellen, revolutioniert. Mendix Widgets und High-Code-Komponenten mit beispielloser Geschwindigkeit und Effizienz.

Die Widget-Herausforderung

Als Mendix Entwickler mit wenig oder keiner Erfahrung im fortgeschrittenen Programmieren, der kundenspezifische Lösungen entwickelt Mendix Komponenten wie Widgets und JavaScript-Aktionen können zunächst etwas (oder sogar sehr) einschüchternd wirken. Traditionell beinhaltet dies Terminalbefehle, die Verwaltung mehrerer Entwicklungsumgebungen und die Navigation zwischen verschiedenen Tools, vorausgesetzt, man verfügt bereits über grundlegende JavaScript-/TypeScript-Kenntnisse.

Der bahnbrechende Workflow für Vibe Coding

Ich habe einen bahnbrechenden Arbeitsablauf entdeckt, der Folgendes kombiniert: Microsoft Copilot, Verziehen or Cursor Das hat meinen Widget-Entwicklungsprozess grundlegend verändert und die Abläufe um ein Vielfaches beschleunigt!

Traditioneller Widget-Entwicklungsprozess

So funktioniert die Widget-Entwicklung traditionell:

  • Installieren Sie Abhängigkeiten wie Node, npm usw., falls diese fehlen.Hier ist eine Liste.)
  • Verwenden Sie den Terminalbefehl, um ein leeres Widget zu erstellen.
  • Öffne dieses Projekt in einem Editor wie VS Code.
  • Widget-Eigenschaften hinzufügen
  • Code hinzufügen
  • Untersuchen
  • Beheben von Problemen
  • Erstellen, testen in einem Mendix App, wiederholen

Der KI-gestützte Ansatz

Wie Tools wie Copilot, Cursor und Warp die Dinge mit agentenbasierter KI beschleunigen:

  • Verwenden Sie den Terminalbefehl, um ein leeres Widget zu erstellen (genau wie zuvor).
  • Sagen Sie dem Agenten, was das Widget leisten soll.
  • Der Agent im Tool schreibt den Code für Sie.
  • Der Agent erstellt den Code, und falls Fehler auftreten, versucht der Agent, diese zu beheben.
  • Sobald es fertig ist, zeigt es Ihnen an, welche Änderungen vorgenommen wurden.
  • Testen Sie es in einer App, geben Sie dem Agenten Feedback und wiederholen Sie den Vorgang.

Hier ist ein Video, das zeigt, wie ich mit Copilot ein Aufgabenlisten-Widget erstelle und es in die Anwendung integriere. Mendix App.

Hier sehen Sie:

  1. Erstellung eines leeren Widget-Projekts
  2. KI nutzt einen Agenten, um das Projekt zu analysieren und zu verstehen, dass es sich um ein Mendix Widget-Projekt
  3. Ich erkläre, was das Widget tun soll.
  4. Der KI-Agent generiert Code, der meinen Anforderungen entspricht, und erstellt das Widget.
  5. Beim Importieren des Widgets in meine App erhalte ich eine Fehlermeldung.
  6. Dem KI-Agenten eine Rückmeldung geben, dass ein Fehler aufgetreten ist
  7. KI löst dieses Problem
  8. Ich importiere das Widget erneut und konfiguriere es auf einer Seite.
  9. Das Projekt wird ausgeführt und das Widget getestet.

Am Ende des Videos werden Sie feststellen, dass die Aufgaben zwar funktionieren, aber nicht mit der von mir konfigurierten Datenquelle verknüpft sind (einige Einstellungen waren zudem etwas merkwürdig und unnötig). Nach einigem Hin und Her, in dem ich meine Anforderungen verfeinert, Fehlerdetails und Feedback gegeben, Fragen zur Implementierung gestellt und nur mit Hilfe von Eingabeaufforderungen oder unliebsamen Elementen debuggt habe, funktioniert es nun so, wie ich es wollte. Glauben Sie mir, ich habe in diesem Widget keine einzige Zeile Code geschrieben. Siehe unten. Den vollständigen Widget-Code können Sie hier einsehen.

Was wir gewinnen können

• Blitzschnelle Entwicklung mit KI-Agenten.
• Keine Einarbeitungszeit. Nur klare Anweisungen und Feedback sind erforderlich.
• Auswahl an KI-Modellen (abhängig von Ihrem Abonnement). Auch die kostenlose Version bietet Optionen!
• Die Erstellung im Projektkontext bedeutet, dass der Agent Ihren bestehenden Code lesen kann, bevor er neue Änderungen vornimmt.
• Dieser Prozess ist nicht auf neue Widgets beschränkt, sondern kann auch zur Überarbeitung und Fehlerbehebung bestehender Widgets verwendet werden.
• Dies ist nicht nur auf Widgets oder JS-Aktionen beschränkt, sondern kann auch für die Java-Entwicklung, das Styling usw. verwendet werden.
• Automatische Kommentare, Readme-Dateien, Erklärungsdokumente usw.
• Überbrückung von Wissenslücken – unterstützt Entwickler, die mit High-Code-Ansätzen nicht vertraut sind.
• Gleichbleibende Codequalität über verschiedene Widgets hinweg.
• Lernmöglichkeit – das Studium von KI-generierten Code-Mustern verbessert Ihre Fähigkeiten.
• Schnelles Prototyping – einfaches Experimentieren mit verschiedenen Widget-Ansätzen.
• Bereits etablierte Entwickler von High-Code-Software können solche Tools tatsächlich nutzen, um die Dinge um ein Vielfaches zu beschleunigen.

Achten Sie auf diese Herausforderungen

Natürlich ist nicht alles Gold, was glänzt. Hier sind einige Punkte, auf die Sie achten sollten:

  • Die KI halluziniert (nicht mehr so ​​stark wie früher, aber immer noch). Klares Feedback hilft.
  • Sie können in Schleifen gefangen sein. Identifizieren Sie diese und melden Sie sie dem Agenten – wenn er Sie in Schleifen bringt, kann er Ihnen auch wieder heraushelfen.
  • Manche Fehler sind irreführend und stellen möglicherweise nicht die eigentliche Ursache dar. KI erkennt dies unter Umständen nicht.
  • Code-Brei (oder Spaghetti, wenn Sie so wollen). Man vergisst leicht bereits vorhandenen Code im Projekt oder Funktionen, die einmal verwendet wurden, aber nicht mehr benötigt werden. Auch KI kann das tun und Aufräumarbeiten vergessen oder Dinge unnötig verkomplizieren. Sie können den Agenten jedoch anweisen, seinen Code selbst zu überprüfen und nach einfacheren Lösungen zu suchen.
  • Sie können die Entscheidungen des Agenten hinterfragen! Wenn der Code/die Funktion/die Fehlerbehebung/die Logik zu kompliziert oder seltsam erscheint, bitten Sie ihn, sich selbst zu überprüfen und die Dinge zu vereinfachen.
  • Verwenden Sie Versionskontrolle! Nutzen Sie GitHub oder weisen Sie den Agenten an, ein Git-Repository anzulegen und nach jeder getesteten stabilen Version einen Commit durchzuführen. So lassen sich Änderungen rückgängig machen, falls etwas schiefgeht (und das kann vorkommen).
  • Lassen Sie die Dinge nach Möglichkeit von einem Fachmann überprüfen (sehr empfehlenswert).
  • Leistungsaspekte – KI generiert möglicherweise nicht immer den optimalen Code. Hinterfragen Sie dies! Bitten Sie um Kommentare, Erläuterungen zum generierten Code und zum Ausführungsablauf.
  • Sicherheitswache – den generierten Code stets auf Sicherheitslücken überprüfen.
  • Abhängigkeit von spezifischen LLM-Versionen – die Ergebnisse können je nach Modell oder Version variieren.

Ein paar letzte Gedanken

Ich entwickle seit einiger Zeit benutzerdefinierte Widgets, Java- und JavaScript-Komponenten für Mendix Ich arbeite schon seit Jahren mit Apps, daher war das für mich eine bahnbrechende Erfahrung. Als erfahrener Entwickler konnte ich sehen, wie der Agent innerhalb von Minuten Code generierte, wofür ich Stunden oder sogar Tage gebraucht hätte. Immer wenn der Ansatz oder die Logik nicht meinen Vorstellungen entsprach oder die Dinge zu kompliziert wurden, konnte ich gezieltes Feedback zu einem bestimmten Problem geben, es beheben und weitermachen. Ich werde diesen Dienst definitiv auch in Zukunft nutzen!

Also… Wird das die Entwickler ersetzen? Ich glaube nicht.

Dies ist kein Ersatz für Entwickler, sondern eine grundlegende Umwälzung. KI-Tools entwickeln sich zu kompetenten Mitarbeitern, die repetitive Programmieraufgaben und Implementierungsdetails übernehmen, während sich menschliche Entwickler auf Architekturentscheidungen, Geschäftslogik und Innovation konzentrieren. Ich bin überzeugt, dass die erfolgreichsten Entwickler diejenigen sein werden, die lernen, effektiv mit KI zusammenzuarbeiten – indem sie die richtige Unterstützung bieten und wissen, wann sie manuell eingreifen müssen. Anstatt Stunden mit der Implementierung von Widget-Funktionen zu verbringen, können Entwickler ihre Expertise nun auf das Wesentliche konzentrieren: Lernen, Innovation und Wertschöpfung! Mendix Insbesondere für Entwickler wird dies nur einen Kern stärken. Mendix Stärke: rasante Entwicklung.

Häufig gestellte Fragen

Wählen Sie Ihre Sprache