Erstellen einer App mit AI Pair Programming: Lehren aus unserem Sprint

Als Entwickler sind wir immer auf der Suche nach Möglichkeiten, unsere Produktivität zu verbessern und unsere Arbeitsabläufe zu optimieren. Angesichts der jüngsten Fortschritte in der KI (und meiner festen Überzeugung, dass diese Technologien bahnbrechend sein werden) habe ich beschlossen, diese Tools in einem realen Entwicklungsszenario zu testen.

• Mein Ziel: Erstellen Sie in nur 7 Stunden eine Full-Stack-KI-gestützte Food-Tracking-App (PoC).

• Das Ergebnis: Es hat ziemlich gut funktioniert! Aber nicht ohne Herausforderungen.

Hier ist, was ich über den Einsatz von KI als Entwicklungspartner gelernt habe.

Das Projekt

Das Ziel war ehrgeizig, aber zielgerichtet: eine mobile App zu entwickeln, mit der Benutzer ihre Lebensmittel fotografieren und diese mithilfe der KI-Erkennung automatisch in einem Lebensmittel-Tracker protokollieren können. Der Tech-Stack umfasste meine Favoriten: Quasar Framework (VueJS Framework), Google Firebase und Capacitor (Mobile Dev Framework) mit Google Gemini 2.0 Flash für KI-Inferenz.

Nichts besonders Ausgefallenes, aber mehr als genug Komplexität, um die KI-Unterstützung auf die Probe zu stellen.

Die K.I. Werkzeuge

Ich habe eine Kombination von KI-Tools verwendet, um verschiedene Aspekte des Projekts zu unterstützen:

1. ChatGPT (o1-Modell): Für umfassende Planung, Anforderungserfassung und allgemeine Anleitung
2. Claude 3.5 Sonnet über WindSurf/Cascade: Für die Codegenerierung und spezifische Entwicklungsaufgaben habe ich ein Tool namens WindSurf von Codeium verwendet. Es handelt sich im Wesentlichen um eine IDE, die auf Visual Studio Code mit einer KI basiert. Integrierter Code-Writer. Er hat direkten Zugriff auf Dateien und kann mit Versionskontrolle schnell ganze Dateien schreiben und bearbeiten.
3. Google Gemini 2.0 Flash: Zur Bilderkennung und Lebensmittelklassifizierung. Dieses Modell ist super leistungsstark und super günstig.

Der „AI as Dev Intern“-Ansatz

Eine der wertvollsten Erkenntnisse, die ich gewonnen habe, war, dass ich als Junior-Entwickler oder Praktikant über KI nachdachte. Dieses mentale Modell hat meine Herangehensweise an die Zusammenarbeit völlig verändert. So wie man einem neuen Praktikanten nicht ein ganzes Projekt auf den Schreibtisch legen und perfekte Ergebnisse erwarten würde, habe ich Folgendes gelernt:

• Seien Sie klare Anweisungen
• Teilen Sie Aufgaben in überschaubare Abschnitte auf
• Überprüfen Sie die Ausgabe und geben Sie Feedback
• Erwarten Sie nicht zu viel auf einmal
• Geben Sie bei Bedarf Führung und Anleitung

Dieser Ansatz führte zu einer besseren Auszahlung und funktionierte besser, als die KI entweder als „allwissend“ oder „völlig unzuverlässig“ zu behandeln.

Was gut funktioniert hat

Planung und Anforderungen

KI erwies sich in der Planungsphase als außerordentlich hilfreich. Ich begann mit einer groben Projektskizze und nutzte iterative Eingabeaufforderungen, um sie zu verfeinern. Eine meiner ersten Aufforderungen war zum Beispiel:

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Dies löste ein Hin und Her aus, das dazu beitrug, den Projektumfang und den Zeitplan festzulegen und zu einem realistischeren und detaillierteren Plan zu führen.

Dokumentation

Die KI-Tools zeichneten sich durch hervorragende Ergebnisse bei der Erstellung und Pflege der Dokumentation aus. Es könnte schnell umfassende Markdown-Dateien erstellen und diese im Verlauf der Projektentwicklung auf dem neuesten Stand halten. Dadurch wurde wertvolle Zeit für die eigentliche Entwicklungsarbeit frei.

Iterative Entwicklung

Die Aufteilung der Entwicklung in kleinere, fokussierte Impulse erwies sich als äußerst effektiv. Anstatt zu versuchen, ganze Komponenten auf einmal zu generieren, habe ich eine Kaskade von Eingabeaufforderungen verwendet, die jeweils auf den vorherigen aufbauen. Zum Beispiel:

1. Zuerst die Firebase-Backend-Infrastruktur einrichten
2. Dann wird das Frontend-Boilerplate erstellt
3. Es folgen spezifische Funktionen wie der Kameraaufnahmebildschirm
4. Abschließend das Hinzufügen von Datenverarbeitungs- und Anzeigefunktionen

Ein toller Trick, den ich gefunden habe, bestand darin, die K.I. Machen Sie sich Notizen über den Fortschritt und die nächsten Schritte, damit Sie zwischen den Eingabeaufforderungen auf etwas zurückgreifen können. Da ich WindSurf nutzte, konnte ich eine „Master-Eingabeaufforderung“ verwenden, um das Gespräch am Laufen zu halten. Die Master-Eingabeaufforderung würde die KI anweisen, um auf die Notizen zurückzugreifen und sie im Laufe des Schreibens des Codes zu ergänzen.

Fehlerbehebungen und Nachentwicklung

Ein weiterer Bereich, in dem WindSurf glänzte, waren Fehlerbehebungen und Aufgaben nach der Entwicklung.

Nachdem ich meine App getestet und einige Fehler festgestellt hatte, übergab ich meine Liste an WindSurf und WindSurf konnte Probleme schnell identifizieren und beheben und sogar Testfälle generieren, um sicherzustellen, dass die Korrekturen funktionierten. Das hat mir eine Menge Zeit und Mühe gespart.

Ich hatte die folgende Liste von Fehlern und musste sie nur in wenigen Fällen manuell beheben:

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

• [x] BUG>Die Kamera wird schwarz, nachdem ein Bild aufgenommen und auf „Abbrechen“ geklickt wurde (Web-Implementierung)
• [x] BUG> In der Ansicht „Erkannte Lebensmittel“ Wenn keine Lebensmittel erkannt werden, ist die Liste leer, was gut ist, aber wir sollten eine Art Symbol und Text anzeigen, um zu erklären, dass keine Lebensmittel erkannt wurden hinzugefügt oder erkannt
• [x] FEHLER> In der Ansicht „Erkannte Lebensmittel“ wäre es schön, jedes Element (Texttitel, Vertrauen, Schaltfläche „Löschen“, Dropdown-Liste „Übereinstimmendes Lebensmittel auswählen“) besser gruppieren hinzuzufügen, um dies deutlich zu machen Alle diese Elemente sind Teil derselben Lebensmittelerkennung. Dies kann über eine Q-Karte, ein besseres Styling oder was auch immer erfolgen
• [ * ] FEHLER> In der Ansicht „Erkannte Lebensmittel“ wird das Dropdown-Menü „Übereinstimmende Lebensmittel auswählen“ nicht ordnungsgemäß erneut geöffnet, wenn versucht wird, das Dropdown-Menü für etwas zu öffnen, das ausschließlich über die Suche hinzugefügt wurde (und nicht für ein über die Kamera hinzugefügtes Element). )
• [x] BUG> In der Ansicht „Erkannte Lebensmittel“ sollte die Schaltfläche „Abbrechen“ den Benutzer zum Dashboard zurückbringen debounceSearch sollte nicht ausgelöst werden, wenn die Eingabe leer ist
• [-] FEATURE> Beitragseinreichung (Backend) – Nehmen Sie IMG und ändern Sie die Größe, beschneiden Sie, komprimieren Sie usw., damit das Bild gut in ein 128*128-Quadrat passt. Erstellen Sie mehrere Größen für Bilder und fügen Sie Links zu Bildern im Datensatz zur Einreichung hinzu (neben der Bild-Url)
• [x] FEATURE> Dashboard – IMG für jeden erfassten Mahlzeiteintrag anzeigen und entsprechende Größe laden
• [x] FEATURE> Add View Meal Page -> alle Details und Diagramme und so anzeigen
• [x] FEATURE> Funktionalität zum Bearbeiten von Mahlzeiten hinzufügen -> Bringen Sie das Modal aus der Kameraseitenansicht zurück, verwenden Sie jedoch nur das Modal. Starten Sie die Kamera nicht.
• [x] FEATURE>Funktion zum Löschen von Mahlzeiten hinzufügen
• [x] FEATURE> Verlauf Mahlzeiten anzeigen: Möglichkeit, ALLE MAHLZEITEN-Einträge paginiert nach Tag anzuzeigen. Quasar-Timeline verwenden -> Klicken Sie im Menü auf die Schaltfläche „Mahlzeiten“, um zu dieser Seite zu gelangen. Auf dieser Seite sollte die gleiche Art von Karten angezeigt werden, die für Essenseinträge auf der IndexPage.vue
angezeigt wird
• [x] FEATURE> Verlaufsansicht Wasser: Möglichkeit, ALLE WASSEREinträge, paginiert, nach Tag anzuzeigen, Quasar-Zeitleiste verwenden -> Sie haben die Schaltfläche „Wasser“ im Menü, um zu dieser Seite zu gelangen. Auf dieser Seite sollte die gleiche Art von Karten angezeigt werden, die für Wassereinträge auf der IndexPage.vue
angezeigt wird
• [x] FEHLER>Wasserverlauf Bearbeiten funktioniert nicht
• [x] BUG>Wasserverlaufsdaten sind seltsam

Herausforderungen und Fallstricke

Nicht alles verlief reibungslos. Es stellten sich einige wichtige Herausforderungen heraus:

Probleme bei der Dateibearbeitung

Ich habe bei Dateiänderungen mehrere Einschränkungen festgestellt:

• Offene Dateien wurden manchmal scheinbar gesperrt / konnten von WindSurf nicht mehr bearbeitet werden
• Längere Gespräche haben die Qualität der Codebearbeitung absolut beeinträchtigt

HINWEIS: Zum Zeitpunkt des Verfassens dieses Artikels schien es, als ob der Dateisperr-/Dateibearbeitungsfehler in der neuesten Version von WindSurf behoben wurde.

Kontextmanagement

Die Qualität der KI-Unterstützung ließ bei längeren Gesprächen nach. Ich habe gelernt, neue Gespräche für neue Komponenten zu beginnen und einen komprimierten Kontext bereitzustellen, anstatt zu versuchen, eine lange Sitzung aufrechtzuerhalten.

Als der Code länger und komplexer wurde, hatte die KI Mühe, mitzuhalten. Ich musste die Aufgaben in kleinere, überschaubarere Teile aufteilen, um die Qualität aufrechtzuerhalten, oder viele Details und Kontext bereitstellen, um die KI auf Kurs zu halten.

Abweichen vom Weg würde bedeuten, dass Funktionen weggelassen, relevanter Code gelöscht oder manchmal das völlig Falsche erstellt werden muss. Das war eine große Zeitverschwendung und ich musste sehr vorsichtig sein, um die KI auf Kurs zu halten, oder mich dazu entschließen, manuell zu programmieren.

Wissen, wann man manuell programmieren muss

Manchmal geht es einfach schneller, es selbst zu machen. Zu lernen, diese Momente zu erkennen, sparte viel Zeit und Frustration. Wie in meinem Entwicklungsprotokoll vermerkt: „Wenn es funktioniert, funktioniert es gut. Wenn nicht, kann es ein Zeitfresser sein.“

Best Practices, die entstanden sind

1. Git-Commit häufig: Bevor Sie AI wesentliche Änderungen vornehmen lassen, committen Sie Ihren aktuellen Status. Dies bietet einen einfachen Rückgriff, wenn etwas schief geht.

2. Boilerplate-Code vorbereiten: Richten Sie Ihre Projektstruktur und Grundkonfigurationen ein, bevor Sie KI-Unterstützung in Anspruch nehmen. In meinem Fall bedeutete das:

   • Quasar/Vue CLI einrichten
   • Firebase CLI und Komponenten konfigurieren
   • Grundlegende Projektstruktur festlegen

3. Klare und detaillierte Aufforderung: Machen Sie Ihre Anforderungen so konkret wie möglich. Fügen Sie relevanten Kontext und Beispiele hinzu. Nehmen Sie sich in der Anforderungs- und Entwurfsphase so viel Zeit wie möglich und geben Sie so viele Details wie möglich an. Diese Hinweise und Anweisungen helfen Ihnen nicht nur dabei, Ihr Projekt besser auszuführen, sondern verbessern auch die Qualität des von der KI generierten Codes erheblich.

4. Iteratives Feedback: Zögern Sie nicht, die KI zu korrigieren oder anzuleiten. Wenn ich beispielsweise eine Ausgabe erhielt, die nicht ganz den Anforderungen entsprach, gab ich konkretes Feedback:
   

Can you help me plan out making the following app in 7 hours:

<information about the app>

Detail out how long I should spend on each section, 
and revise my overall plan as needed.

Diese Art von spezifischem Feedback führte normalerweise zu schnellen und genauen Korrekturen.

Das Urteil

Der Einsatz von KI hat die Entwicklung absolut beschleunigt. Obwohl es Anleitung und gelegentliche Korrekturen erforderte, ermöglichte mir die Kombination von ChatGPT und Claude zusammen mit WindSurf, viel weiter voranzukommen, als ich es alleine im gleichen Zeitraum geschafft hätte.

Der Erfolg erforderte jedoch ein Verständnis sowohl der Fähigkeiten als auch der Grenzen dieser Tools. Der Schlüssel bestand darin, die richtige Balance zwischen KI-Unterstützung und menschlichem Fachwissen zu finden und beides dort einzusetzen, wo es sich auszeichnet.

Ich freue mich auf

Dieses Experiment deutet auf eine Zukunft hin, in der KI-Tools ein integraler Bestandteil des Entwicklungsworkflows werden – vorerst nicht, um Entwickler zu ersetzen, sondern ihre Fähigkeiten zu erweitern. Der Schlüssel liegt darin, zu lernen, effektiv mit diesen Tools zu arbeiten, ihre Stärken und Grenzen zu verstehen und Arbeitsabläufe zu entwickeln, die ihre Vorteile maximieren und gleichzeitig ihre Nachteile minimieren.

Für Entwickler, die daran interessiert sind, KI in ihren Workflow zu integrieren, empfehle ich, klein anzufangen, klare Interaktionsmuster zu etablieren und die Rolle der KI schrittweise zu erweitern, wenn Sie mit ihren Fähigkeiten und Einschränkungen vertrauter werden.

Die Tools entsprechen dem Niveau eines Junior-Entwicklers, und mit genügend Trainingsdaten und Iterationen werden sie bald in der Lage sein, viel mehr zu tun. Ich kann mir vorstellen, dass diese Tools letztendlich ganze Anwendungen schreiben und den Großteil des Entwicklungsprozesses übernehmen. Bis die Modelle einen leitenden Entwickler simulieren können, benötigen wir weiterhin menschliche Aufsicht und Anleitung.

Stärken:

• Dokumentation: Erstellung und Pflege der Dokumentation
• Kleinere Fehlerbehebungen/Fehlerbehebung: Identifizieren und Beheben von Fehlern
• Unit Testing: Testfälle generieren und Codequalität sicherstellen
• Codegenerierung / kleine Komponenten: Schreiben von Standardcode und Basiskomponenten für den Einstieg
• Planung und Anforderungserfassung: Projektumfang und Zeitplan skizzieren
• Infrastruktur-Setup: Konfigurieren der grundlegenden Projektstruktur und -konfiguration mit Terraform, Dockerfiles usw.
• Schnelles Lernen und Prototypengenerierung: Schnelles Erlernen neuer Frameworks und Generieren von Prototypen

Schwächen:

• Komplexe Logik: Umgang mit komplizierter Geschäftslogik oder komplexen Algorithmen
• Design und UX: Erstellen optisch ansprechender Schnittstellen oder Benutzererlebnisse
• Größere Komponenten schreiben: Komplexe Module oder größere Komponenten durchgängig schreiben
• Kontext/Gedächtnis: Beibehalten des Kontexts über lange Gespräche oder über mehrere Komponenten hinweg
• Komplexes Debuggen: Die Fehlerbehebung bei komplexen Problemen oder Randfällen erfordert oft eine hilfreiche Anleitung
• Auf dem neuesten Stand der Technik: Bleiben Sie mit den neuesten Frameworks, Bibliotheken und Best Practices auf dem Laufenden

Ich bin gespannt, wohin diese Technologie führt und wie sie die Zukunft der Softwareentwicklung prägen wird.

Die Bilder!!!

Hier sind einige kurze Screenshots der App, die ich in 7 Stunden erstellen konnte. Es ist nicht perfekt, aber es ist ein solider Anfang!

(Mit der Kamera Essen aufnehmen)

(Bild zur Lebensmittelerkennung an KI senden)

(Ergebnisse anzeigen – Lebensmittel zum Tracker hinzufügen)

(Bestätigung der Lebensmitteleingabe)

(Dashboard-Ansicht)

(Ansicht des Lebensmitteleintrags)

Schamloser, aber relevanter Plug:

Während ich noch an der in diesem Beitrag erwähnten Food-App arbeite, konnte ich mithilfe von WindSurf und A.I. ziemlich schnell ein weiteres Projekt abschließen.

Wenn Sie an einem KI-gestützten Git-CLI-Helfer interessiert sind, der die Pflege von Commit-Nachrichten und Versionshinweisen erleichtert, schauen Sie sich eGit an

Das obige ist der detaillierte Inhalt vonErstellen einer App mit AI Pair Programming: Lehren aus unserem Sprint. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!