Tutorial

Eine Web-App mit dem AI Unified Process bauen

Book Library — von der leeren Leinwand zur getesteten Anwendung.
Durchlaufen Sie den AI Unified Process von Anfang bis Ende, indem Sie die Skills der Plugins aiup-core und aiup-vaadin-jooq in Claude Code verketten. Jeder Schritt produziert ein konkretes Artefakt — eine Markdown-Spezifikation, ein Diagramm, ein SQL-Skript, Java-Code oder eine Testklasse — auf dem der nächste Schritt aufbaut.
Warum überhaupt ein Prozess?

Struktur schlägt Improvisation

KI-Agenten sind gut darin, Code zu erzeugen, aber ohne Struktur neigen sie zur Improvisation. AIUP gibt der KI eine vordefinierte Kette von Artefakten vor, die jeweils den Lösungsraum für den nächsten Schritt einengen.

Die Kette

Wenn Sie bei /implement ankommen, hat die KI bereits eine Vision, eine Use-Case-Spezifikation, ein Entitätsmodell und ein Datenbankschema, an denen sie sich orientieren kann — der erzeugte Code wurzelt in Ihrer Domäne, nicht in einer generischen Vorlage.

vision.md → /requirements → /entity-model
  → /use-case-diagram → /use-case-spec
  → /flyway-migration → /implement
  → /browserless-test → /e2e-test

Voraussetzungen

Was Sie brauchen, bevor Sie die Kette starten:

Schritt für Schritt

Die neun Schritte zur lauffähigen App

Jeder Schritt entspricht einem Slash-Befehl in Claude Code. Führen Sie sie der Reihe nach aus — jeder Schritt baut auf den Artefakten des vorherigen auf.

  1. Die Vision prüfen

    Die Vision ist das einzige Artefakt, das Sie selbst schreiben. Alles Weitere wird daraus generiert.

    Für dieses Tutorial liegt die Vision bereits unter docs/vision.md bereit — öffnen Sie sie und lesen Sie sie, bevor Sie weitermachen. Sie ist die Quelle der Wahrheit für jeden folgenden Schritt. Halten Sie sie kurz — eine Seite reicht: das Problem, die Lösung, die Zielnutzer, die Ziele und die Nicht-Ziele.

    Tipp. Seien Sie explizit bei den Nicht-Zielen. Wer klar formuliert, was nicht zum Umfang gehört (keine Bezahlung, keine Reservierungen, keine Selbstregistrierung), verhindert, dass die KI unnötige Features einbaut.
    Vorbereitete Sicherheit. Das Starterprojekt bringt Spring Security, eine app_user-Tabelle (nur Identität), eine Login-View und zwei vorbefüllte Accounts mit. Authentifizierung ist daher kein Thema dieses Tutorials — Ihre generierten Views benötigen nur @RolesAllowed("MEMBER") oder @RolesAllowed("LIBRARIAN").
  2. Anforderungskatalog generieren

    /requirements

    Dieser Skill liest docs/vision.md und produziert einen strukturierten Anforderungskatalog in docs/requirements.md mit:

    • Funktionale Anforderungen als User Stories (Als Mitglied möchte ich den Katalog durchsuchen, damit ich schnell ein Buch finde).
    • Nicht-funktionale Anforderungen (Performance, Usability, Wartbarkeit).
    • Rahmenbedingungen (der Tech-Stack aus der README, die Nicht-Ziele aus der Vision, ...).

    Prüfen Sie den Katalog, bevor Sie weitermachen — das ist Ihre letzte Gelegenheit, kostengünstig nachzusteuern. Jeder spätere Schritt baut auf dieser Liste auf.

  3. Entitätsmodell aufbauen

    /entity-model

    Aus den Anforderungen identifiziert der Skill die Domänenentitäten und erzeugt ein Mermaid-ER-Diagramm in docs/architecture/entity-model.md mit Entitäten und Attributen samt Typen, Beziehungen und Kardinalitäten sowie Validierungsregeln (Pflichtfelder, Längen, Eindeutigkeit).

    Für die Book Library erwartet Sie etwa Folgendes:

    • Book (id, title, author, isbn, copies)
    • Member (id, user_id, name, email) — ein Bibliothekskunde, 1:1 mit einer bestehenden app_user-Zeile verknüpft.
    • Loan (id, book_id, member_id, borrowed_at, returned_at)

    Die Entität AppUser (id, username, password_hash, role) gehört zum Starterprojekt und muss nicht im Entitätsmodell auftauchen — behandeln Sie sie als externe Grenze.

  4. Use-Case-Diagramm zeichnen

    /use-case-diagram

    Der Skill erzeugt aus den Anforderungen ein PlantUML-Use-Case-Diagramm unter docs/architecture/use-case-diagram.puml. Es zeigt die beiden Akteure (Member, Librarian) und die Use Cases, an denen sie beteiligt sind:

    UC-001Katalog durchsuchen
    UC-002Buch ausleihen
    UC-003Buch zurückgeben
    UC-004Aktive Ausleihen ansehen (Librarian)
    UC-005Katalog verwalten (Librarian)

    Nutzen Sie das Diagramm zur Abdeckungsprüfung: Jede Anforderung sollte mindestens einem Use Case zugeordnet sein, und jeder Use Case sollte auf eine Anforderung zurückführbar sein.

  5. Erste Use-Case-Spezifikation schreiben

    /use-case-spec UC-001

    Wählen Sie den Use Case, der die anderen freischaltet, zuerst. Für die Book Library ist das UC-001 Katalog durchsuchen — er hat keine Vorbedingungen, gibt dem Mitglied sofort etwas zu tun und liefert die Datenstrukturen, die UC-002 braucht.

    Der Skill schreibt docs/use_cases/UC-001-search-catalog.md mit Akteuren und Stakeholdern, Vor- und Nachbedingungen, dem Hauptablauf als nummerierte Schritte, Alternativabläufen und Akzeptanzkriterien.

    Konkret bleiben. Ein Schritt wie "das System zeigt die Bücher" reicht nicht — "das System zeigt ein Grid mit den Spalten Titel, Autor, ISBN und verfügbare Exemplare, sortiert aufsteigend nach Titel" reicht.
  6. Flyway-Migration generieren

    /flyway-migration

    Der Skill liest das Entitätsmodell und die Use-Case-Spezifikation und erzeugt ein versioniertes Flyway-Skript unter src/main/resources/db/migration/. Da das Starterprojekt bereits V001__create_app_user.sql enthält, produziert der Skill eine neue Version (z. B. V002__create_member_book_loan.sql) für die fehlenden Tabellen mit:

    • CREATE-TABLE-Anweisungen für member, book und loan
    • Primär- und Fremdschlüssel inklusive member.user_id → app_user.id
    • NOT-NULL-Constraints basierend auf den Validierungsregeln des Entitätsmodells
    • Sinnvolle Indizes z. B. auf loan.book_id und loan.member_id
    • Seed-Daten verknüpft den vorinstallierten Benutzer alice mit einer neu eingefügten member-Zeile

    Führen Sie nach diesem Schritt einmal ./mvnw compile aus — das startet ein Testcontainers-Postgres, wendet die Migration an und regeneriert das jOOQ-Metamodell, sodass der nächste Schritt typsichere Referenzen auf Ihre neuen Tabellen hat.

  7. Use Case implementieren

    /implement UC-001

    Hier zahlt sich die Kette aus. Der Skill liest die Use-Case-Spezifikation, das Entitätsmodell und die generierten jOOQ-Klassen und erzeugt:

    • Ein jOOQ-basiertes Repository (BookRepository) im domain-Paket
    • Eine Service-Schicht falls der Ablauf Geschäftslogik enthält
    • Eine Vaadin-View (SearchCatalogView) im ui-Paket, an MainLayout angebunden
    • DTOs / Records für die Daten zwischen den Schichten

    Starten Sie die App über TestApplication aus Ihrer IDE und klicken Sie durch den Ablauf. Sie sollten eine Suchanfrage eingeben können, die Filterung des Grids sehen und die Ergebnisse so sortiert vorfinden, wie es die Spezifikation verlangt.

  8. Browserless-UI-Tests schreiben

    /browserless-test UC-001

    Der Skill erstellt einen UI-Unit-Test unter src/test/java/.../SearchCatalogViewTest.java, der AbstractBrowserlessTest erweitert. Er testet die View ohne Browser, indem er den Vaadin-Komponentenbaum direkt steuert: zur View navigieren, Suchfeld und Grid finden, eine Anfrage eintippen, prüfen dass das Grid die erwarteten Zeilen zeigt und die Alternativabläufe der Spezifikation abdecken.

    Ausführen mit ./mvnw test. Diese Tests sind schnell — unter einer Sekunde pro Test — und bilden die innere Feedback-Schleife beim Iterieren an der View.

  9. End-to-End-Test schreiben

    /e2e-test UC-001

    Der letzte Skill erzeugt einen Playwright + Mopo E2E-Test unter src/test/java/.../SearchCatalogIT.java, der PlaywrightIT erweitert. Er bootet die komplette Spring-Boot-App auf einem zufälligen Port und steuert einen echten Browser durch den Use Case: App mit frischer Datenbank starten, Katalogseite öffnen, Suchanfrage eintippen und prüfen, dass die sichtbaren Zeilen der Spezifikation entsprechen.

    Ausführen mit ./mvnw verify zum Starten der Integrationstests. Das ist Ihre äussere Feedback-Schleife — langsamer als die Browserless-Tests, beweist aber, dass JavaScript, CSS, Routing und Datenbank zusammenspielen.

Abschluss

Was Sie am Ende haben

Nach dem vollständigen Durchlauf für UC-001 haben Sie eine dokumentierte Vision und einen Anforderungskatalog, ein Entitätsmodell und ein Use-Case-Diagramm für die ganze App sowie eine Spezifikation, eine Migration, eine Implementierung und zwei Testebenen für den ersten Use Case.

Nächsten Use Case ergänzen

Für einen neuen Use Case benötigen Sie nur die Schritte 5, 7, 8, 9 — Anforderungen, Entitätsmodell und Diagramm decken die ganze App ab und müssen nicht neu erzeugt werden. Use Cases mit neuen Tabellen oder Spalten lösen zusätzlich Schritt 6 mit einer neuen V003__...-Migration aus.

Wie es weitergeht

  • Lassen Sie die Kette erneut für UC-002 Buch ausleihen laufen — sie wird Book und Member wiederverwenden und Zeilen zu Loan hinzufügen.
  • Weiter mit UC-003 Buch zurückgeben, um den Lebenszyklus zu schliessen.
  • Ergänzen Sie den Librarian-Use-Case UC-004 Aktive Ausleihen ansehen für die operative Sicht.
  • Sobald einige Use Cases existieren, lohnt es sich, die Testing-Skills von aiup-vaadin-jooq für eine bessere Abdeckung zu erkunden.
Kontakt

Lust auf einen Hands-on-Walkthrough?

Workshops und massgeschneiderte Einführungen des AI Unified Process für Ihr Team und Ihren Stack. Vereinbaren Sie einen Termin, um zu besprechen, wie AIUP zu Ihrem Projekt passt.