SESSION 05 / 06
„Mach das einfach irgendwie“
funktioniert nicht
Begriffe · CLI · Eine 30-Sekunden-Aufgabe
Jee Jun Young
BWL statt Informatik → Journalismus · Auslandsvertrieb → Wechsel in die Entwicklung
iOS · Android · Frontend Etwa 5½ Jahre (im sechsten Jahr)
Entwicklung von iOS-/macOS-Apps für ein Kollaborationstool eines Großunternehmens
Seit 2026 Web- und Serverentwicklung sowie Vermarktung als Einzelentwickler mit Vibe Coding
TODAY · 5 PARTS
Heute — von wo bis wohin
Die TEIL-Nummer bleibt links sichtbar, damit Sie die Orientierung behalten.
TEIL 1 — Rückblick auf Termin 4
Sie haben F12 ausprobiert, oder?
Das ist Grundsatz #8.
pk_* · anon) gegenüber geheim (sk-* · service_role) — Was wird beim Diebstahl getroffen: Rechnung oder Datenbank?Heute gehen wir weiter: Präzision der Sprache.
Die Bestellzettel-Analogie aus Termin 2 — Rückblick
„Mach irgendwie“ liefert nur halbherzige Ergebnisse.
🎨 Eine Designeranalogie — dasselbe Problem: „Modern und traditionell, futuristisch wie im 23. Jahrhundert“ vorgeben → Das gewünschte Kundenergebnis kommt nicht heraus.
Für eine detaillierte Bestellung brauchen Sie Wörter.
Diese Wörter sind technische Fachbegriffe.
CASE
Dasselbe Projekt, unterschiedliche Ergebnisse
HttpOnly-Cookie-Sitzungen,
Nutzertrennung mit RLS,
Passwörter auf dem Server hashen.
Mehrfachklicks durch eine bildschirmfüllende Ladeebene verhindern,
mit Material-Design-Animation.“
Der Unterschied: B kannte die Begriffe.
Den Code schreibt Claude.
YOU ALREADY KNOW THESE
Begriffe aus den letzten vier Terminen
+ Neue Begriffe heute (Termin 5) — angekündigt auf Folie 40 von Termin 4
Clean ArchitectureMVVMFSDEntwurfsmuster„Ach, das gab es ja.“ · „Wie hieß das noch?“
„Sollte ich noch nach etwas anderem fragen?“
— Allein darüber nachzudenken bedeutet,
dass Sie weiter sind als jemand, der noch nicht angefangen hat.
Sie müssen nicht alles auswendig lernen.
Aber Sie müssen wissen: „Diesen Begriff gibt es.“
Erst mit dem Wort können Sie die KI fragen: „Was ist das?“
Unwissen ist kein Grund, nicht anzufangen.
Wer etwas nicht weiß, fragt. Man muss aber wissen, wonach man fragen sollte.
WARUM · CONTEXT ROT (Kontextverfall)
Warum Entwurfsmuster, Architektur und Fachbegriffe
direkt mit Geld zu tun haben
Im Schlafzimmer liegen Snacktüten, Computer, Gasherd, Eierschalen und Fertigreis herum.
Die Reinigungskraft kommt herein und kalkuliert: Hunderttausende Won? Eine Million? Vielleicht geht sie einfach wieder.
Ein ordentliches Zimmer nur zum Schlafen und Ausruhen dagegen: in zwei Stunden fertig, günstig.
Diese Reinigungskraft ist KI.
Der Kostenvoranschlag sind die Tokens, die Sie bezahlen.
Je unordentlicher das Zimmer, desto mehr Geld kostet die KI.
Bei extremem Chaos haut sie während der Arbeit ab oder macht vier Stunden Pause. Weil sie den Verstand verliert.
Der Forschungsbegriff heißt Context Rot, wörtlich „Kontextverfall“, wie in Termin 3.
Beim Lesen langer Dateien und Dokumente vergisst KI die Mitte und verliert sich (Liu et al., 2023, Lost in the Middle).
Deshalb sind Entwurfsmuster und Architektur keine Angeberei von Entwicklern,
sondern zentral für geringere Kosten und stabile KI-Zusammenarbeit beim Vibe Coding.
BIG PICTURE
Entwurfsmuster und Architektur — auf einen Blick
Vergleich: Rezepte im Kochbuch.
Für dasselbe Problem dasselbe Muster.
Beispiele: Singleton · Factory · Observer · Repository · Adapter
Quelle: GoF (Gang of Four), 23 Muster, 1994
Vergleich: Stadtplanung (Straßen, Viertel, Strom).
Große Entscheidungen, die sich später schwer ändern lassen.
Beispiele: MVC · MVVM · Clean · Hexagonal · FSD
Typische Architekturen — Vergleiche in einem Satz
Ein Verkaufsautomat. Oberfläche und Daten trennen.
→ Erklärung auf der nächsten Folie
Konzentrische Kreise wie eine Zwiebel.
Innen: Kernlogik. Außen: Ergänzungen (DB, Ansichten, APIs).
Das Innere funktioniert ohne Kenntnis des Äußeren. Ein DB-Wechsel ändert den Kern nicht.
Café-Zentrale und Franchisefilialen.
Zentrale (Domäne): nur Menü und Handbücher.
Filialen (Adapter): Kunden, Zutaten, Zahlungen. Filialen austauschen, Zentrale behalten.
Doppelte Trennung: sechs vertikale Schichten und Geschäfte je Domäne. Nur fürs Frontend.
→ Auf der nächsten Folie am Kaufhaus erklärt
All das sind über Jahrzehnte bewährte Methoden.
MVC 1979 · Hexagonal und MVVM 2005 · Clean 2012 · FSD seit 2018
Deshalb sind sie in KI-Trainingsdaten reichlich vertreten.
Ein einziges Wort genügt, und Claude versteht es genau. Darum behandeln wir heute Begriffe.
INSTRUCTOR CASE · GRIMOIRE
Eigenes Beispiel des Dozenten — Hexagonal + vereinfachtes FSD
Zuerst: Selbsteinschätzung, nicht blinde Einführung
Ich ließ Claude meinen gesamten iOS-App-Code lesen und fragte dann:
„Könnte ich bei diesem Codeniveau Web-FSD und einen hexagonalen Server warten? Beurteile es.“
Claudes Antwort zu 100 % vertrauen? Nein. Ich fragte auch andere KIs dasselbe, um es einzuschätzen.
Ergebnis ① — Server (grimoire-server)
Hexagonale Architektur (Ports & Adapters) eingeführt.
Domäne im Zentrum; Datenbank, externe APIs und HTTP-Router als Adapter getrennt.
Codestruktur: domain / application / adapter / infrastructure
Ergebnis ② — Web (grimoire-web)
Vereinfachtes FSD: keine strengen sechs Schichten,
nur die Kern-Slices (features/auth · features/payment · features/works) nach Domänen aufgeteilt.
Die Botschaft: Architektur nicht auswendig lernen.
„Passt die Einführung zu meinem Niveau?“ — Die KI um eine Diagnose bitten.
VOCABULARY VIA ANALOGY
Fachbegriffe mit Alltagsvergleichen erklären
Entwurfsmuster, Architektur, Algorithmen: ständig neue, unbekannte Wörter.
Jeden Buchstaben auswendig lernen zu wollen macht es schwer.
Ein Tipp: Dieselben Muster gibt es im Alltag. Eine Schicht Softwarelogik darüber ergibt Entwurfsmuster, Architektur und Algorithmen. Mit dieser Sicht sinkt der Widerstand.
Vorführung: drei Datenstrukturen im Alltag
Ein Getränkeregal im Laden.
Die Aushilfe füllt hinten auf, Kunden nehmen vorne heraus. Was zuerst hineinkam, geht zuerst heraus.
Ein Bücherstapel auf dem Schreibtisch.
Neue Bücher kommen oben drauf, oben nimmt man sie weg. Zuletzt hinein, zuerst heraus — auch Strg+Z nutzt einen Stack.
Schulspinde.
Mit der Schülernummer (Schlüssel) erreicht man direkt sein Fach (Wert). Kein Suchen Fach für Fach nötig.
Bei einem neuen Begriff fragen: „Was ähnelt dem im Alltag?“
MVVM, FSD, Clean und SOLID erklären wir mit Verkaufsautomat, Kaufhaus, Zwiebel und Sushi-Küche.
MVVM
Was ist MVVM? — Ein Getränkeautomat
Vergleich — ein Getränkeautomat
View = Tasten und Anzeige (was Nutzer sehen)
ViewModel = interne Schaltung (verarbeitet den Tastendruck)
Model = Getränkebestand und Preise
Tastendruck → die Schaltung (VM) gibt ein Getränk aus.
Nutzer müssen nicht wissen, wie.
Der Vorteil: View und Daten sind getrennt.
Ändert sich nur das Aussehen einer Taste (Farbe oder Anordnung), bleibt die Schaltung (VM) gleich.
Ändert sich ihre Funktion (Verzweigung oder neue Aktion), muss auch die Schaltung angepasst werden.
iOS · Android · Vue · WPF — ein weit verbreitetes Muster.
Quelle — John Gossman, Microsoft, 2005.
Zwischen „Bildschirm“ und „Daten“ liegt eine Schaltung, die die Arbeit übernimmt (ViewModel).
Quelle: John Gossman, Microsoft, 2005 (für WPF vorgestellt).
FSD · FEATURE-SLICED DESIGN
Was ist FSD? — Abteilungen im Kaufhaus
Vergleich — ein Kaufhaus (horizontal: fachliche Abteilungen)
Bereich 1 Kosmetik · Bereich 2 Damenmode · Bereich 3 Herrenmode · Bereich 4 Lebensmittel
Eigene Abteilungen (Slices) je Domäne.
Eine Lebensmittelabteilung mitten in der Kosmetik? Kunden sind verwirrt, der Umsatz sinkt.
FSD trennt Domänen genauso horizontal in Abteilungen (Slices).
Die sechs offiziellen FSD-Layer (vertikale Hierarchie und Abhängigkeitsregeln)
Obere Layer dürfen nur untere verwenden, nie umgekehrt. Jeder Layer enthält wiederum Slices (fachliche Einheiten), etwa `features/auth` und `features/payment`.
Ich nutze eine vereinfachte Form mit wenigen Konzepten.
Entscheidend ist: nach Zweck ordnen und Regeln festlegen.
Ohne die vollständige strenge Hierarchie mit sechs Layern → ① Ordner nach Funktion (Slice) (`features/auth`, `features/payment` …) ② nur obere Layer rufen untere auf (Abhängigkeitsrichtung) ③ einheitliche Namen und Importregeln.
Quelle: entstanden 2018–2020, offizielle Website feature-sliced.design. Für Frontends (React/Vue).
⚠ Ein häufiges Muster in Webprojekten
In einer Datei: Tastenfarben / Preisberechnung / Server-API-Aufrufe / Aufrufe von Claude und GPT
— alles an einem Ort.
Was folgt? Der erwähnte Context Rot und Aufmerksamkeitsverlust.
Wie die Reinigungskraft, die aufgibt und wegläuft, verliert Claude den Überblick und macht Unsinn.
CLEAN ARCHITECTURE · UNCLE BOB
Was ist Clean Architecture? — Die Ringe einer Zwiebel
Vergleich — eine Zwiebel
Denken Sie an eine Zwiebel. Innen liegt der Kern, außen die Schale.
Innen = Domäne (das eigentliche Ziel — zentrale Geschäftslogik)
Außen = DB, Oberfläche, externe APIs, Frameworks (Zusätze und Schale)
Eine Regel
Das Innere funktioniert, ohne das Äußere zu kennen.
„Der Domänencode weiß nicht, ob ich PostgreSQL oder MySQL verwende.“
→ Ein Datenbankwechsel nach einem Jahr verändert den Kerncode nicht. Auch beim Wechsel vom Web zur mobilen App bleibt die Geschäftslogik gleich.
Den Kern nach innen legen, das Äußere austauschbar machen.
Quelle — Robert C. Martin (Uncle Bob), Blogbeitrag 2012 → Buch Clean Architecture, 2017.
DESIGN PATTERNS
Entwurfsmuster — gut zu kennen
Der Kunde bestellt „Bulgogi-Pizza“. Teig und Ofentemperatur regelt die Pizzeria. — Kapselt die Objekterzeugung
Kanal abonnieren und bei neuen Videos automatisch benachrichtigt werden. Kein tägliches Nachsehen. — Pub/Sub-Muster
Karte, Überweisung, Payco, Kakao Pay — die Zahlungsschnittstelle bleibt gleich. — Algorithmen austauschen
Ein koreanisches Gerät an einer US-Steckdose — ein 110V↔220V-Adapter. — Schnittstellen umwandeln
⚠️ Singleton — das am häufigsten missbrauchte Muster der Menschheitsgeschichte
Vergleich — ein Präsident pro Land. Zwei Menschen mit dem Anspruch „Ich bin der Präsident“ würden das Land erschüttern.
Missbrauch — der Präsident entscheidet alles allein. Die Zentralisierung lähmt das Land.
Im Code: schwer zu mocken, gestörte Dependency Injection, Wettlaufsituationen zwischen Threads. Leicht einzuführen → später nur schwer zu entfernen.
Singletons nur, wenn wirklich genau eine Instanz nötig ist (DB-Verbindungspool, Logger).
Sonst: nicht aus Gewohnheit verwenden.
SOLID · 5 PRINCIPLES
Die fünf SOLID-Prinzipien — mit Alltagsvergleichen
Arbeitsteilung in der Küche — eine Person schneidet Fisch, eine kocht Nudeln, eine kassiert.
Soll eine Person alles gleichzeitig tun, geht alles schief.
Steckdose und Stecker — die Steckdose bleibt. Das neue Gerät wird eingesteckt.
Niemand zerlegt für jedes Gerät die Steckdose. = Bestehenden Code erweitern, ohne ihn zu ändern.
Eine Aushilfe — wenn Inhaber Kim Urlaub macht, muss Park dieselbe Arbeit erledigen.
„Ich koche keinen Kimchi-Eintopf“ würde die Gäste irritieren. = Eine Unterklasse muss ihre Oberklasse ersetzen können.
Speisekarten — bei einer gemeinsamen Karte mit 30 Seiten bedeutet eine geänderte koreanische Speise: alles neu drucken, alle Gäste lesen erneut. Bei vier Kategorien bleibt eine solche Änderung für Gäste mit westlichen Gerichten ohne Folgen.
Gäste sehen nur ihre Kategorie. = Clients hängen nicht von ungenutzten Methoden ab.
Geldautomat — akzeptiert er nur Shinhan-Karten, muss für jeden neuen Anbieter (KB, Woori) der Automatencode geändert werden. Eine einmal definierte „Kartenschnittstelle“ nimmt auch neue Anbieter auf.
Der Automat (hohe Ebene) hängt nicht direkt vom Anbieter (niedrige Ebene) ab; beide hängen von der Kartenschnittstelle (Abstraktion) ab. Die Abhängigkeit kehrt sich um. = Von Abstraktionen statt konkreten Implementierungen abhängen.
Quelle: Anfang der 2000er von Robert C. Martin (Uncle Bob) zusammengeführt.
L stellte Barbara Liskov 1987 vor (zurück zu Dijkstra und Liskov aus Sitzung 3).
SOLID × CLAUDE
Warum auch Claude SOLID-Code mag
Fünf Prinzipien gegen Context Rot
↪ Fischrestaurant — Fisch, Nudeln und Kasse getrennt
Eine Datei, eine Verantwortung → Claude verfolgt eine Verantwortung. Vermischte Aufgaben erhöhen das Rätselraten → Context Rot nimmt zu.
↪ Steckdose und Stecker — Steckdose behalten, Stecker wechseln
Neue Funktionen ohne Änderungen am bestehenden Code → verhindert direkt Claudes Muster „beim Überarbeiten kaputtmachen“.
↪ Aushilfe — Park erledigt dieselbe Arbeit, während Kim Urlaub hat
Die Signatur der Oberklasse lässt das Verhalten der Unterklasse vorhersagen → Claude kann das Funktionsverhalten sicher annehmen.
↪ Speisekarten — vier Kategorien statt 30 gemeinsamer Seiten
Kleine Schnittstellen → nur das, was die Klasse nutzt, kommt in Claudes Kontext. Vermeidet große Dumps.
↪ Geldautomat — jede Anbieterkarte funktioniert (nur die „Kartenschnittstelle“ zählt)
Die Domäne hängt von Abstraktionen ab → DB- und API-Wechsel lassen den Domänencode unverändert → direkte Verbindung zur hexagonalen Architektur.
In einer Zeile: SOLID = Context Rot vorbeugen + sicherere Codeänderungen durch Claude.
Die Trennung von Belangen (SoC) aus Sitzung 3 ist tatsächlich das S in SOLID.
PART 2
Die Tiefe der CLI
CLI · COMMAND LINE INTERFACE
CLI = eine Oberfläche für Textbefehle
Warum Entwickler CLIs nutzen — schneller als GUIs.
Der eigentliche Grund: ideal, um Claude Aufgaben zu geben.
Browser-GUIs zu bedienen ist ineffizient: Die Ansicht kostet viele Tokens, und auf wenig vertrauten Seiten findet das Modell vielleicht nicht die richtige Klickposition. Textbefehle vermeiden diese Unklarheit.
CLI · der Weg eines Befehls
Mensch → Claude → CLI → externer Dienst — sechs Schritte
→ Die CLI ist Claudes Hände und Füße. GUI-Bedienung ist schwierig, Befehle lassen sich direkt eingeben.
GitHub-Repository“
CLI-Befehl
gh repo
create ...gh · HTTPSOAuth Token
api.
github.com→ Claude → Mensch
Gleiches Muster, andere CLI
gh (GitHub) · wrangler (Cloudflare) · supabase (Supabase) · gcloud (GCP) · az (Azure) · vercel (Vercel) — dieselbe Struktur mit sechs Schritten. Nur der Dienst wechselt.
Der Mensch nennt die Absicht. Claude übersetzt sie in einen Befehl, führt ihn aus und deutet das Ergebnis.
Vollständige Delegation — in Claude Code bedient Claude das Terminal direkt.
Sie müssen die Befehle nicht selbst tippen.
10 Minuten Pause
Danach: „Wie Sie bei unbekannten Wörtern weiterkommen.“
PART 3
Bei unbekannten Wörtern
weiterkommen
Was Sie tun sollten,
wenn Claude vier neue Begriffe auf einmal nennt.
Die Zeit, in der Sie Bücher brauchen, kommt noch. Deshalb jetzt nichts zu tun, passt aber nicht zur Entwicklung.
Eine Buchseite = 3 Minuten. Ein Prompt an Claude = 30 Sekunden.
Sechsmal schneller.
Die heutigen Begriffe sind genau diese Werkzeuge.
Wer nie fragt, erfährt es nie.
5 SESSIONS — CUMULATIVE
Was Sie in fünf Sitzungen aufgebaut haben
Sie sind bereits weiter als alle, die mit Vibe Coding
noch gar nicht begonnen haben.
BONUS · neue Kriterien für die Technologiewahl
Entwurfsmuster und SOLID sind behandelt. Welche Technologie wählen Sie nun?
Früher (bis 2024)
Entwickler wählten Technologien, indem sie Dokumentation durchforsteten und die Branche untersuchten.
Heute (ab 2026) — zwei neue Kriterien für Vibe Coder
① Hat die KI viel dazu gelernt? Sind Referenzen leicht zu finden?
② Ist der Dienst für KI leicht zugänglich und bedienbar? Wie gut sind CLI und API gestaltet?
Neben Ihrem eigenen Aufwand beim Aufbau eines Dienstes müssen Sie heute überlegen:
„Kann KI in diesem System gut selbstständig arbeiten?“
Kriterium ① · Umfang der KI-Trainingsdaten
Eine Technologie, zu der KI viel gelernt hat = eine sichere Wahl
Beispiel 1 — Frontend: React oder Vue
React: etwa 100 Millionen npm-Downloads pro Woche
Vue: etwa 10 Millionen
→ Ungefähr Faktor 10 (Mai 2026, npm trends). KI-Trainingsmaterial (GitHub, Stack-Overflow-Antworten) unterscheidet sich ähnlich.
Bei den Trainingsdaten dominiert React. Für Vibe Coding ist React sicherer.
Beispiel 2 — mobil: Flutter
Flutters Stärke: eine Codebasis für iOS, Android, Web und Desktop.
Die KI muss nur eine Codebasis lesen, ohne getrennten iOS- und Android-Code.
→ Eine für KI leicht handhabbare Struktur.
Kriterium ① — „Hat die KI ausreichend zu dieser Technologie gelernt?“
Neue Technologien mit wenig Trainingsmaterial mögen attraktiv sein, sind für Vibe Coding aber riskant.
Kriterium ② · Zugriff für KI
Kann KI mit diesem Dienst gut automatisch arbeiten?
Hosting — Cloudflare und andere
Cloudflare (Wrangler CLI) und Vercel (auf Next.js spezialisiert) kann Claude am leichtesten bedienen.
Einfache CLIs, RESTful APIs und umfangreiche Dokumentation.
Die CLI entscheidet über Claudes Automatisierung
CLI vorhanden → Claude automatisiert mit einer Befehlszeile.
Keine CLI / nur GUI → für Claude ineffizient direkt zu bedienen. Klicken und Nachverfolgen mit Chrome MCP geht, kostet aber viele Tokens und kann auf wenig vertrauten Seiten scheitern.
→ GCP (gcloud) ≈ Azure (az): Beide haben CLIs. GCP ist etwas einfacher.
Die Entscheidung beim Vibe Coding — „Kann KI in diesem System gut selbstständig arbeiten?“
TODAY'S KEY TAKEAWAY
PART 5
Die heutige
Hausaufgabe
Eine 30-Sekunden-Aufgabe für zu Hause.
Vertrauen Sie einem Modell nicht zu 100%. Fragen Sie eine weitere KI nach ihrer Einschätzung.
▸ Kleines Projekt (privat oder MVP) → „Geht das mit Vercel und Supabase? Gibt es CLIs, und wie richte ich sie ein?“ Oder: „Wäre Firebase besser? Hat es eine CLI?“
▸ Hosting oder Produktionsserver nötig → „Ist Cloudflare besser oder ein koreanischer Dienst wie Toast oder NCP? Warum, und wie gut ist die CLI?“
▸ Produktionsserver einrichten → „Was passt zu meinen Bedingungen: Azure, GCP oder AWS?“
▸ Letztlich diese Frage → „Welcher Anbieter und welche Lösung lassen sich für Claude am leichtesten bedienen und einrichten?“
BEFORE WE CLOSE — META
Warum wir diese Begriffe behandelt haben
MVVM, FSD, Clean, SOLID, Context Rot — zunächst klingt das langweilig und nutzlos.
Der Grund liegt in der menschlichen Wahrnehmung. Menschen brauchen Wörter, um Phänomene zu benennen. LLMs sind grobe Nachbildungen dieser Wahrnehmung. Auch Claude erweitert seinen Arbeitsbereich erst, wenn Sie die Begriffe ausdrücklich nennen.
— Wittgenstein · Tractatus Logico-Philosophicus (1922), Satz 5.6
„Die Grenzen meiner Sprache
bedeuten die Grenzen meiner Welt.“
Ohne Begriff lässt sich das Phänomen nicht benennen.
„Warum fasst Claude immer andere Dinge an und macht sie kaputt?“ Das kann täglich passieren. Ohne einen Begriff dafür bleibt am Ende nur, „KI ist dumm“ zu schimpfen.
Wer die Begriffe kennt,
kann KI steuern.
SESSION 05 / 06
Vielen Dank
für heute.
Nächstes Mal — die sechste und letzte Sitzung.
„Jetzt geht es auch allein“ · Remote-Umgebung und weitere Schritte.
OPEN CHAT
Bei Fragen
nutzen Sie den offenen KakaoTalk-Chat.