Vertiefung · Deine eigene Web-App · Lektion W.4 · 20 Min.

Die erste Version: bauen, ansehen, verbessern

Danach läuft die erste Version deiner App auf deinem Rechner – noch ohne gemeinsame Datenbank – und du weißt, wie du sie mit Claude Schritt für Schritt verbesserst.

Stand 23. Oktober 2026 · Wir prüfen die Inhalte regelmäßig gegen die aktuellen Programme. Was ist neu?

Jetzt wird gebaut. Claude setzt die Oberfläche aus deinem Plan um, und du siehst das Ergebnis sofort in der Vorschau. In dieser ersten Version speichert die App ihre Daten nur in deinem Browser. Das ist Absicht: So probierst du in Ruhe aus, ob Seiten und Abläufe stimmen, ohne dass schon echte Daten irgendwo liegen. Die gemeinsame Datenbank für alle Nutzer kommt in Lektion W.5.

Schritt für Schritt

Lass Claude die erste Version bauen. Schalt den Plan-Modus aus (normaler Modus, Nachfragen auf „Manual“ wie in Lektion 3.3).

Claude legt Dateien an und fragt bei Befehlen nach deiner Freigabe. Lies jede Frage kurz – bei „npm install“ lädt er die Bausteine herunter, die die App braucht. Das ist normal.

Sag Claude:Bau Version 1 nach PLAN.md. Speicher die Daten vorerst nur im Browser, ohne Datenbank und ohne Anmeldung. Nimm eine einfache, verbreitete Technik, die du gut kennst, und erklär mir in drei Sätzen, was du gewählt hast und warum. Zeig mir die App danach in der Vorschau.

Schau dir die App an. In der Vorschau probierst du alles aus: Dienst anlegen, eintragen, austragen. Notiere, was dich stört.

Verbessere in kleinen Schritten. Eine Änderung pro Nachricht, nicht zehn auf einmal:

Hast du ein Bildschirmfoto von etwas, das dir gefällt? Gib es Claude: „Mach es ungefähr so.“

Sag Claude:Zeig bei jedem Dienst, wie viele Helfer noch fehlen.
Sag Claude:Die Knöpfe sind am Handy zu klein. Mach sie größer.

Prüf die Handy-Ansicht.

Sag Claude:Zeig mir die App so, wie sie auf einem Handy aussieht, und behebe, was dort nicht passt.

Sichere jeden guten Stand.

Geht beim nächsten Schritt etwas schief: „Geh zurück zum letzten gesicherten Stand.“

Sag Claude:Das funktioniert. Sichere den Stand im Sicherungsbuch.

Versteh die Grenze dieser Version. Die Daten liegen nur in deinem Browser. Öffnest du die App auf einem anderen Gerät oder in einem anderen Browser, ist die Liste leer. Für eine Helferliste, die alle sehen, braucht es eine gemeinsame Datenbank – das ist die nächste Lektion.

Hängst du irgendwo fest? Frag deinen Claude – so oft du willst, auch zu jedem einzelnen Schritt.
Sag Claude:Ich mache gerade die Lektion „W.4 Die erste Version: bauen, ansehen, verbessern“ im AWA Campus und hänge bei diesem Schritt: … Erklär ihn mir bitte einfacher, Schritt für Schritt. Ich bin Anfänger.
Geschafft, wenn …
  • die erste Version in der Vorschau läuft und alle Seiten aus deinem Plan da sind,
  • du mindestens drei Verbesserungen in kleinen Schritten gemacht hast,
  • die App auf dem Handy brauchbar aussieht,
  • ein guter Stand im Sicherungsbuch gesichert ist.
Wörter erklärt
  • npm install: lädt die Programmbausteine herunter, die eine App braucht. Sie landen im Ordner node_modules.
  • Im Browser speichern: Daten bleiben auf diesem einen Gerät in diesem einen Browser.
  • Version: ein gesicherter Stand, zu dem du zurückkehren kannst.