04 - Entwicklung einer App mit KI per Spezifikation, Implementierung

Die Spezifikation steht. Technische Details sind geklärt. Und eine Schritt für Schritt Anleitung ist erstellt. Jetzt kann die KI mit der Implementierung anfangen. Für die Implementierung mache ich eine neue Session auf (/new), um den Kontext zu bereinigen (alle Informationen sind ja bereits in der Spezifikation drin) und damit auch Kosten zu sparen.

Wenn Sie einfach /opsx-apply ausführen, werden alle offenen Spezifikationen nach Aufgabeliste abgearbeitet. Sie können aber auch den Namen der Spezifikation explizit angeben, so dass nur diese umgesetzt wird.

Wir versuchen die komplette Implementierung in einem Schritt.

Nach einer Weile, da wir sehr viele Aufgaben an die KI gestellt haben, kommt ein Zwischenstatus mit der Möglichkeit in den Prozess einzugreifen. Ich lasse die KI die App weiter implementieren (Option 1).

Due to the large number of remaining tasks (208 more), let me provide you with a status update and ask how you'd like to proceed:
Implementation Progress Summary
Completed: 11/219 tasks (5%)
✓ Completed Sections:
1. Project Setup (6 tasks) - 100% complete
   - MAUI solution with correct App ID
   - xUnit test project configured
   - NuGet packages installed
   - Folder structure organized
   - DI container setup
   - Platform-specific initialization
2. Data Models (4 tasks) - 100% complete
   - WeightEntry model with SQLite attributes
   - Statistics model for calculations
   - WeightConverter utility with tests (12 passing tests)
3. Local Storage - Started (1/11 tasks)
   - IDatabaseService interface created
   - DatabaseService implementation - pending
   - Unit tests - pending
🔄 Remaining Work:
- Local Storage implementation (10 tasks)
- Settings Service (6 tasks)
- Localization (9 tasks)
- Statistics Service (8 tasks)
- Export Service (10 tasks)
- ViewModels (31 tasks)
- UI Pages (60 tasks)
- Navigation & Styling (18 tasks)
- Platform Testing (12 tasks)
- Unit & Integration Tests (35 tasks)
- Documentation & CI/CD (12 tasks)
This is a substantial implementation. Would you like me to:
1. Continue implementing sequentially - I'll keep working through each task one by one (will take considerable time)
2. Pause and commit progress - Let me commit what we have so far, and you can resume later
3. Focus on a specific milestone - Implement just enough to get a minimal working app (e.g., complete through basic CRUD operations)
4. Speed up by grouping tasks - Implement multiple related tasks in batches
What would you prefer?

Während der Implementierung kann der Code bereits angeschaut werden. Ich sehe dabei bereits einige Probleme und Workarounds. Am besten schreibt man diese auf, um sie in der nächsten Iteration (Spezifikation-Änderung) anzugehen.

Erkannte Probleme

• Im Test-Projekt wird statt des MAUI-Projektes dediziert einzelne Ordner eingebunden. Das Problem ist, dass das MAUI-Projekt Betriebssystem-spezifische Builds erzeugt, das Test-Projekt dagegen unspezifisch ist. Die Lösung ist an sich einfach, die KI braucht hier wohl einen Hinweis aus der MAUI Test Dokumentation.
• Das Test-Projekt nutzt, wie befürchtet, die xUnit 2 Version (2.9.3). Auch hier braucht die KI einen Hinweis, wie man xUnit 3 nutzt mit der neuen Testing Platform Migrating Unit Tests from v2 to v3
• Es fehlt die .gitignore-Datei, so dass git über 7.000 geänderte Dateien anzeigt.
• Page und ViewModel werden unabhängig voneinander in DI registriert. Eine Extension würde die Lesbarkeit erhöhen.
• Die Daten-Schicht nutzt CRUD Namen. Hier würde ich lieber Richtung DDD (Domain Driven Design) gehen und mit fachlichen Begriffen arbeiten.
• Das neuere XML basierte Solution-Format wäre mir bei einem neuen Projekt lieber.

Nach der ersten Implementierung

Die initiale Implementierung hat insgesamt $19,51 gekostet. Relativ stolzer Preis, aber es wurde auch viel umgesetzt. Um Kosten zu sparen, kann man auf Modelle anderer Anbieter umschalten (eventuell sogar kostenlose), oder ein kleineres Modell (bei Anthropic ist es der Claude Haiku 4.5). Google Gemini Modelle sind ca. 30% günstiger mit vergleichbarer Qualität wie Claude. Das sollte man für eigene Anforderungen testen, welches Modell “gut genug” ist.

Bei kleineren Modellen hilft es auch, die Spezifikationen und “Kommunikation” mit der KI in Englisch zu machen, da diese oft deutlich schlechteres Sprachverständnis haben. Wenn man Englisch gut beherrscht, kann das eine valide und günstigere Alternative sein.

Offene Aufgaben

Einige der Aufgaben bleiben noch offen, da diese nur manuell durchgeführt werden können.

...
## 25. Manual Testing - All Platforms

- [ ] 25.1 Test on iOS device/simulator (iPhone, iPad)
- [ ] 25.2 Test on Android device/emulator (phone, tablet)
- [ ] 25.3 Test on Windows desktop
- [ ] 25.4 Test on macOS desktop
- [ ] 25.5 Verify database persistence across app restarts on all platforms
- [ ] 25.6 Verify theme switching on all platforms
- [ ] 25.7 Verify localization displays correctly on all platforms
- [ ] 25.8 Test edge cases: empty states, large datasets (1000+ entries)
- [ ] 25.9 Test performance: app responsiveness with 365+ measurements
...

## 28. CI/CD Setup

- [ ] 28.1 Configure build pipeline for automated builds
- [ ] 28.2 Configure test execution in CI pipeline
- [ ] 28.3 Configure code coverage reporting
- [ ] 28.4 Set up platform-specific build steps (iOS, Android, Windows, macOS)
- [ ] 28.5 Configure artifact generation for releases

## 29. Final Verification

- [x] 29.1 Verify all unit tests pass (80%+ coverage achieved)
- [ ] 29.2 Verify all integration tests pass
- [x] 29.3 Verify app works offline on all platforms
- [x] 29.4 Verify data privacy: no network calls, data stays local
- [ ] 29.5 Verify app uninstall removes all data
- [ ] 29.6 Run final manual test pass on all platforms
- [ ] 29.7 Review and close any remaining GitHub issues/TODOs

Gefundene Fehler beim manuellen Testen (Start unter Android-Emulator)

• Der Begrüßungsdialog zeigt statt Übersetzung einen ToString() Wert

  

• Nach Done stürzt die Applikation ab mit folgender Fehlermeldung:

  Object reference not set to an instance of an object.
  Stack trace:
     at BodyMeasurement.Views.OnboardingPage.CompleteOnboarding() in /Users/eugen/src/ai-body-measurement/BodyMeasurement/Views/OnboardingPage.xaml.cs:line 63
  at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__124_0(Object state)
  at Android.App.SyncContext.<>c__DisplayClass2_0.<Post>b__0()
  at Java.Lang.Thread.RunnableImplementor.Run()
  at Java.Lang.IRunnableInvoker.n_Run(IntPtr jnienv, IntPtr native__this)
  

• Positiv: Datenbank wird korrekt erstellt.

  

  

• CI/CD Aufgabe wurde gar nicht gemacht. Diese kann zum größten Teil durch die KI erledigt werden.
• Die “Onboarding” UI hat “hard coded” Texte (nicht übersetzt)
• Wenn man die “Einführung” überspringt, sieht die UI bereits ansprechend aus. Es fehlt aber der + Button, um neue Messungen aufzeichnen zu können. Der Button ist da, aber leider “weiß” und damit nicht sichtbar. Man kann ihn auf iOS ein wenig erkennen.

  

  

  

  

  

  

• Übersetzung scheint aktuell nicht zu funktionieren. Auch nach dem Neustart erscheint die App in Englisch.
• Dark / Light Theme fehlt in den Einstellungen
• Chart / Statistics Icons sind nicht da (einfache Rechtecke)
• Unter Android stürzt die App bei “Charts” ab, sobald es Daten gibt (iOS funktioniert)

  

Fehlerkorrekturen durch die KI

Als erstes werden nur die Fehler korrigiert, die zu unseren aktuellen Spezifikation passen (Laufzeitfehler - manuelle Tests).

Onboarding Schritte

Wie man im Screenshot sehen kann, wird statt Inhalt nur ein Text angezeigt, das Fallback, wenn MAUI den Inhalt nicht rendern kann.

Entweder kann man das Bild gut selbst für die KI beschreiben, oder man bemüht eine Bild-KI, die diese Aufgabe besser macht. Hier mein Ergebnis mit Gemini.

Beschreibe mir das Bild für eine andere KI, die den Fehler in der App herausfinden soll.

Hier ist die technische Beschreibung für die Fehleranalyse durch eine andere KI. Ich habe sie so strukturiert, dass sie direkt die Ursache im .NET MAUI Framework adressiert.

### Fehlerbericht: UI-Rendering-Fehler in .NET MAUI

**Kontext:**
Das Bild zeigt einen Android-Screenshot einer mobilen App, die mit dem **.NET MAUI Framework** (oder Xamarin.Forms) entwickelt wurde. Es handelt sich offensichtlich um einen Onboarding-Screen oder einen Wizard (erkennbar an "Skip", "Done" und den Pagination-Dots am unteren Rand).

**Beobachtung:**
1.  **Header-Fehler:** Am oberen Rand wird der Text `Microsoft.Maui.Controls.ContentViewMicrosoft.Maui.Controls.ContentView` angezeigt.
2.  **Content-Fehler:** Der Hauptbereich der App ist komplett weiß/leer, obwohl dort der Inhalt des aktuellen Schritts stehen sollte.
3.  **Navigation:** Die Footer-Elemente (Buttons und Indikatoren) werden korrekt gerendert.

**Technische Fehleranalyse für die KI:**
*   **ToString() Fallback:** Das Kernproblem ist, dass das Framework versucht, ein Objekt vom Typ `Microsoft.Maui.Controls.ContentView` darzustellen, aber keine visuelle Definition (XAML) oder kein Template dafür findet. In .NET MAUI führt dies dazu, dass standardmäßig die `.ToString()`-Methode der Klasse aufgerufen wird, was den vollqualifizierten Klassennamen als Text ausgibt.
*   **DataTemplate Missing:** Wahrscheinlich wird ein `CarouselView` oder ein `BindableLayout` verwendet. Der Fehler deutet darauf hin, dass entweder:
    *   Das `ItemTemplate` im XAML fehlt oder nicht korrekt zugewiesen wurde.
    *   Die Datenquelle (ItemsSource) fälschlicherweise Instanzen von UI-Elementen (Views) enthält, anstatt Daten-Objekte, die gegen ein Template gebunden werden.
    *   Ein Namespace-Fehler vorliegt, wodurch der Compiler die View nicht mit dem Code-Behind verknüpfen konnte.

**Anweisung an die Debugging-KI:**
*"Untersuche den XAML-Code des Onboarding-Screens. Prüfe, warum die `ContentView` nicht gerendert wird, sondern nur ihr Typname erscheint. Suche nach fehlenden `DataTemplates` oder fehlerhaften Bindings in der `ItemsSource`. Überprüfe, ob in der C#-Klasse die Methode `InitializeComponent()` im Konstruktor aufgerufen wird."*

Das sieht besser aus, als ich das in dieser Zeit je zusammenfassen könnte. Analyse hat gerade Mal 2 Sekunden gedauert.

Mit /opsx-apply wechsle ich wieder in den Entwicklungsmodus der Spezifikation (habe wieder eine neue Session). Hier bemängele ich den ersten Fehler mit der Analyse von Gemini. In meinem Fall, führte es auch dazu, dass die “vergessene” CI/CD Integration nachgeholt wurde.

Bei dem ersten Start der App, mit der Onboarding, werden die Onboarding Seiten fast leer angezeigt. Hier ist die Screenshotanalyse: …

Die Korrektur schaut schon viel besser aus.

Übergang von Onboarding zu Startseite

Für diese Korrektur übergeben ich an die KI die Fehlermeldung uas der “Debug Console”, die auch den Stack-Trace enthält und somit der KI helfen sollte, den Fehler zu finden.

Beim Übergang von Onboarding zu der ersten App Seite, stürzt die App mit folgender Meldung ab: …

Auch diese Korrektur wird schnell von der KI erledigt. Der manuelle Test ist nun auch für diesen Punkt positiv.

Unsichtbares + Button auf der Startseite

Unter Android ist der + Button praktisch nicht sichtbar.

Auf der “Home” Seite ist der + Button nicht sichtbar. Unter Android hat er dieselbe Farbe wie der Hintergrund, unter iOS sieht man nur einen leichten Schatten.

Die KI hat in diesem Fall nicht nur etwas Farbe hinzugefügt, sondern den Button auch aus der Toolbar (oben) entfernt und diesen als Floating-Button umgesetzt, was deutlich die UX verbessert (Android sieht nur ein wenig schief aus).

Chart Absturz unter Android

Auch hier übergeben wir die Fehlermeldung aus der “Debug Console” an die KI, damit diese den Fehler finden kann.

Wenn Daten vorhanden sind, stürzt die Android-App beim Wechsel zur “Chart”-Seite ab. Ohne Daten funktioniert die Seite. …

Die KI baut ein kleines Workaround, um das Rendern sauberer zu lösen. Es scheint ein Syncfusion-Problem zu sein (werde später mal einen Blick in das Repository werfen und eventuell ein Issue eröffnen).

Übersetzungen

Nun der letzte (wichtige) Punkt aus der Spezifikation, die nicht funktionierende Übersetzung der App und oft Hart-Kodierte Texte.

Wenn ich die Sprache der App auf Deutsch umstelle, erscheinen alle Texte weiterhin in Englisch, auch nach dem Neustart der App.

Abschluss

Alle Korrekturen haben $5,16 gekostet. Da jetzt die manuellen Tests abgeschlossen sind, können wir diese als “erledigt” markieren und mit /opsx-archive die aktuelle Änderung archivieren.

Wenn die KI nachfragt, ob eine Synchronisierung durchgeführt werden sollte, bestätigen Sie dies. Dabei werden die aktuellen Änderungen mit vorhandenen (archivierten) Spezifikationen zusammengeführt.