Die Erstellung einer Transportanwendung in nur zwei Stunden widerspricht den üblichen Konventionen der Softwareentwicklung. *Das Aufkommen der Methode des Vibe-Codings* verändert die technologische Landschaft und macht die Prozesse zugänglicher und schneller. *Künstliche Intelligenz* erweist sich als revolutionäres Werkzeug, das die zeitlichen und technischen Hindernisse beseitigt, mit denen Entwickler oft konfrontiert sind.
Ein visuelles Überwachungs- und Alarmsystem für die Linie P des Transilien zu imaginieren, bedeutet, das Wesen dieses innovativen Ansatzes zu erfassen. Es sind keine tiefgreifenden Programmierkenntnisse erforderlich, um solch eine Leistung zu erbringen.
Die Wahl der idealen IDE
Der Entwicklungsprozess begann mit der Auswahl der integrierten Entwicklungsumgebung (IDE). Cursor setzte sich als bevorzugte Wahl durch. Diese Software, bekannt für ihre Leistung, nutzt das aktuelle Modell des Software Engineering: Claude 4. Im Gegensatz zu Windsurf, dem Eigentum von OpenAI, bietet Cursor unvergleichliche Codierungsfähigkeiten.
Erstellung der ersten Codebasis
Bevor wir weiter in Cursor eintauchten, wurde eine erste Version der Benutzeroberfläche über den Chatbot von Anthropic erstellt, der Claude 4 Opus verwendet. Dieser erste Schritt schuf eine solide Codebasis für die folgenden Operationen. Der Code wurde auf einem Remote-Server gehostet, was Aktualisierungen und Änderungen in Echtzeit über einen Webbrowser ermöglichte.
Der für Claude 4 verwendete Hinweis war präzise und detailliert. Es ging darum, eine responsive Weboberfläche für eine digitale Anzeigetafel für die Abfahrten der Züge der Linie P zu entwerfen. Diese Tafel sollte essentielle Informationen anzeigen, einschließlich Abfahrtszeit, Ziel, Zugnummer und andere Echtzeitdetails. Die Spezifikationen verlangten außerdem ein sauberes Design mit einer Farbcodefunktion, um den Status der Züge anzuzeigen.
Verbesserungen mit Cursor
Sobald die erste Version erstellt war, wurde der Cursor-Assistent genutzt, um die Oberfläche zu verfeinern. Der „Agent“-Modus des Tools ermöglichte es der KI, autonom zu agieren, den Code anzupassen und Dateien hinzuzufügen. Diese Autonomie erleichterte die Installation der erforderlichen Abhängigkeiten, insbesondere durch Unix-Installationsbefehle.
Effektive Nutzung von LLM-Modellen
Für das Backend der Anwendung wurde die PRIM-API von Île-de-France Mobilités integriert. Diese API stellt eine wertvolle Quelle essenzieller Informationen für das ordnungsgemäße Funktionieren der Anwendung dar. Die vorübergehende Deaktivierung der automatischen Modellauswahl durch Cursor ermöglichte es, angepasste und wirtschaftlichere Modelle zu verwenden, was die Effizienz der Entwicklung weiter steigerte.
Einige Funktionen wurden mithilfe von Claude 4 Sonnet Thinking für die komplexen Backend-Aufgaben realisiert. Die einfachen Codierungsoperationen wurden mit Claude 4 Sonnet ausgeführt. Die Dokumentation wurde durch Gemini 2.5 Flash erleichtert, das eine Abfrage ohne Verbrauch von Credits ermöglicht und sich somit als sehr nützlich erweist, um die Verbindungen zwischen den verschiedenen Dateien zu verstehen.
Test- und Debugging-Phase
Das Testing erlaubte die Validierung der ordnungsgemäßen Funktionsweise der Funktionen. Mit der Unterstützung von Cursor wurden Korrekturen bezüglich der Datenfilterung aus der API vorgenommen. Der gesamte Code wurde anschließend refaktorisiert und Unit-Tests wurden erstellt, um die Robustheit der Anwendung zu gewährleisten.
Ein funktionales und visuell ansprechendes Ergebnis wurde erreicht. Die Benutzeroberfläche zeigt die nächsten Züge der Linie P an und informiert die Nutzer über Verspätungen oder Ausfälle über ein leistungsfähiges Alarmsystem. Die Warnungen werden direkt per SMS und per E-Mail übermittelt, was eine schnelle und effektive Informationsübermittlung gewährleistet.
Grenzen und Herausforderungen des Vibe-Codings
Die Erstellung dieser Benutzeroberfläche erfolgte in nur zwei Stunden, einer erheblich verkürzten Zeit. Ohne die Unterstützung von Cursor hätte dieses Projekt mehrere Tage, wenn nicht sogar länger, in Anspruch genommen. Diese erhebliche Zeitersparnis zeigt die Vorteile des Vibe-Codings auf.
Dennoch hat diese Erfahrung die Begrenzungen des Modells aufgezeigt. Codefehler können auftreten, die ein gutes Verständnis der zugrunde liegenden Struktur erfordern, um angemessene Änderungen vorzunehmen. Trotz dieser Herausforderungen verändert die Nutzung von nativen KI-IDEs wie Cursor die Dynamik der Entwicklung und verlagert die Rolle des Entwicklers vom Ausführenden zum Orchestrator des gesamten Prozesses.
Häufig gestellte Fragen
Was ist die Methode des Vibe-Codings und wie wurde sie angewendet, um die Transportanwendung zu erstellen?
Die Methode des Vibe-Codings nutzt KI-Tools, um schnell Code zu generieren, wodurch Anwendungen in wenigen Stunden anstelle von mehreren Tagen erstellt werden können. In unserem Fall verwendeten wir Cursor und Claude 4, um ein Überwachungs- und Alarmsystem für eine Pariser Transportlinie zu entwickeln.
Welche spezifischen Werkzeuge wurden für die Entwicklung der Transportanwendung verwendet?
Wir haben Cursor als IDE und Claude 4 zur Generierung der ersten Codeversion verwendet. Für den Backend-Bereich haben wir die PRIM-API von Île-de-France Mobilités integriert, um Echtzeitdaten zu den Transportmitteln zu erhalten.
Wie lange hat es gedauert, die Anwendung zu erstellen, und was war das Hauptziel?
Die Erstellung der Anwendung dauerte ungefähr zwei Stunden. Das Hauptziel war es, ein benutzerfreundliches und individuelles Überwachungs- und Alarmsystem zu entwickeln, um die Benutzererfahrung im Vergleich zu bestehenden Transportanwendungen zu verbessern.
Wie passt sich die Benutzeroberfläche der Anwendung an verschiedene Geräte an?
Die Benutzeroberfläche wurde responsive gestaltet, mit zwei Spalten auf Desktop- und Tablet-Bildschirmen und einer einzigen Spalte auf mobilen Geräten. Dadurch wird eine optimale Nutzung auf allen Gerätestypen gewährleistet.
Welche Arten von Warnungen bietet die Anwendung den Nutzern?
Die Anwendung sendet Warnungen bezüglich der Ausfälle von Zügen oder Verspätungen in bestimmten Zeitfenstern. Die Benachrichtigungen können per SMS über die API von Free Mobile und per E-Mail unter Verwendung von PHPMailer gesendet werden.
Welche Herausforderungen traten bei der Entwicklung der Anwendung mit KI auf?
Trotz des erheblichen Zeitgewinns traten einige Probleme wie Fehler im von der KI generierten Code auf. Es war notwendig, die Struktur des Codes zu verstehen, um diese Fehler zu beheben und angemessene Änderungen vorzunehmen.
Wie sieht der Test- und Debugging-Prozess der Anwendung nach ihrer Erstellung aus?
Nach der Erstellung des Codes haben wir den Cursor-Agenten verwendet, um Tests durchzuführen und die Anwendung zu debuggen. Außerdem haben wir Unit-Tests erstellt, um die allgemeine Funktionsfähigkeit des Codes zu validieren.
Ist es möglich, komplexere Anwendungen nur mit KI-Tools wie Cursor zu erstellen?
Obwohl KI-Tools wie Cursor die Entwicklungszeit erheblich verkürzen, ist ein grundlegendes Verständnis des Codes auch für komplexere Anwendungen erforderlich. Die Entwickler müssen eine aktive Rolle bei der Interpretation und Modifikation des generierten Codes spielen.
