Bonus-Vorlesung: Live-Coding mit einer KI
Prof. Dr. Alexandra Mikityuk | HTW Berlin | WiSe 2025/26
Das Besondere: Ich tippe Prompts in Claude und wir bauen den Code zusammen!
Du
Frage oder Aufgabe
Claude
KI-Assistent
Antwort
Code, Erklaerungen...
Claude ist ein Large Language Model (LLM)
Trainiert auf Milliarden von Texten - versteht Sprache UND Code!
Kann Code generieren, erklaeren, Fehler finden und Fragen beantworten.
Kostenlos testen: claude.ai
Goldene Regel: Claude ist ein Werkzeug, kein Ersatz fuer Verstaendnis!
Ihr muesst den Code verstehen, den Claude generiert.
Wir bauen zwei Webseiten, die miteinander kommunizieren!
Kellner
Schreibt Bestellung
localStorage
Browser-Speicher
Kueche
Liest Bestellung
// localStorage = kleiner Speicher im Browser // Kellner SPEICHERT: localStorage.setItem('bestellungen', '...'); // Kueche LIEST: let daten = localStorage.getItem('bestellungen');
Wichtig: localStorage funktioniert nur auf EINEM Computer, im gleichen Browser!
Die Struktur
Formulare, Buttons, Bereiche
Das Aussehen
Farben, Layout, Design
Die Logik
Speichern, Laden, Reagieren
Keine Vorkenntnisse noetig!
Claude erklaert alles Schritt fuer Schritt!
Ich tippe Prompts in Claude - ihr seht, wie der Code entsteht!
Prompt an Claude:
Ich baue eine einfache Restaurant-Demo fuer Studierende.
Erstelle mir HTML fuer ein Bestellformular mit:
- Dropdown fuer Tischnummer (1-6)
- Textfeld fuer das Gericht
- Button "Bestellung senden"
Nur das HTML, kein JavaScript noch. Halte es einfach.
<select> - Dropdown-Menu<input type="text"> - Eingabefeld<button> - Klickbarer ButtonPrompt an Claude:
Super! Jetzt brauche ich JavaScript damit der Button funktioniert.
Wenn man klickt:
1. Hole die Werte aus dem Formular (Tisch und Gericht)
2. Speichere als Objekt in localStorage mit: id, tisch, gericht, zeit, status
3. Zeige eine Erfolgsmeldung
Erklaere jeden Schritt mit Kommentaren.
localStorage - Browser-Speicher (ueberlebt Neuladen!)JSON.stringify() - Objekt zu TextDate.now() - Eindeutige ID erstellenMagic Moment: Die Bestellung ist gespeichert!
Prompt an Claude:
Jetzt die Kuechen-Seite. Die soll:
1. Alle 2 Sekunden localStorage auslesen (selber Key wie Kellner)
2. Jede Bestellung als Karte anzeigen mit: Tischnummer, Gericht, Uhrzeit
3. Einen "Fertig!" Button pro Bestellung
Erklaere die Schleife und setInterval mit Kommentaren.
setInterval(funktion, 2000) - Alle 2 Sekunden ausfuehrenJSON.parse() - Text zurueck zu ObjektinnerHTML - HTML dynamisch aendernPrompt an Claude:
Wenn man "Fertig!" klickt, soll die Bestellung:
1. Den Status auf 'fertig' aendern
2. Nicht mehr in der Kueche angezeigt werden
3. Aber beim Kellner erscheinen (der holt sie dann ab)
Aktualisiere die Funktionen entsprechend.
Wir aendern nur den status im Objekt.
Die Kueche zeigt nur status: 'neu'
Der Kellner zeigt nur status: 'fertig'
Bestellung eingeben und senden
Bestellung erscheint automatisch!
Die Seiten kommunizieren!
Kellner sendet → Kueche sieht → Koch klickt Fertig → Kellner holt ab
// KELLNER: Bestellung speichern function sendeBestellung() { // 1. Werte holen const tisch = document.getElementById('tisch').value; const gericht = document.getElementById('gericht').value; // 2. Bestellung als Objekt const bestellung = { id: Date.now(), tisch: tisch, gericht: gericht, status: 'neu' }; // 3. Speichern let alle = JSON.parse( localStorage.getItem('orders') || '[]' ); alle.push(bestellung); localStorage.setItem('orders', JSON.stringify(alle)); }
// KUECHE: Bestellungen anzeigen function displayOrders() { // 1. Alle laden let orders = JSON.parse( localStorage.getItem('orders') || '[]' ); // 2. Nur neue filtern let neue = orders.filter( o => o.status === 'neu' ); // 3. HTML generieren for (let order of neue) { html += `Tisch ${order.tisch}...`; } } // Alle 2 Sekunden aktualisieren setInterval(displayOrders, 2000);
Das ist der Kern! Alles andere ist nur Styling und Komfort.
Ihr habt gerade PROGRAMMIERT!
Mit KI-Hilfe, aber IHR habt es verstanden!
Den Code
Was der Code tut
Ein funktionierendes System
So funktioniert moderne Softwareentwicklung!
Antwort: Es gibt keinen! localStorage ist nur im Browser.
Das funktioniert nur auf EINEM Computer!
[Kellner] ↔ localStorage ↔ [Kueche]
Gleicher Browser, gleicher Computer
[Kellner] → Server → [Kueche]
Verschiedene Geraete, uebers Internet
Fuer echte Apps braucht ihr: Server, Datenbank, HTTPS - das lernt ihr in spaeteren Kursen!
// UNSERE DEMO (localStorage): [Kellner-Tab] ──localStorage──→ [Kuechen-Tab] (gleicher Browser) // ECHTE PRODUKTION: [Kellner-App] ──HTTPS──→ [SERVER] ←──HTTPS── [Kuechen-Display] (iPad) │ (Bildschirm) [Datenbank] │ Optional: [KI/API]
AWS, Google Cloud
~5€/Monat
MySQL, PostgreSQL
Speichert alles
Verschluesselt
Sicher uebers Internet
Ein Programm kann Claude automatisch fragen - ohne dass ihr tippt!
// Beispiel: Euer Programm fragt Claude const frage = "Tisch 3 wartet 15 Min, Tisch 5 hat Beschwerde. Was tun?"; const antwort = await claude.ask(frage); // Claude antwortet: "Prioritaet: Beschwerde! Sofort zu Tisch 5!"
Wie man Claude die richtigen Anweisungen gibt
"Mach mir eine Webseite"
Zu vage, keine Details
"Erstelle HTML fuer ein Formular mit Dropdown (1-6), Textfeld, Button. Nur HTML, einfach halten."
Konkret, begrenzt, klar!
Gleiche Frage kann verschiedene Antworten geben!
Code IMMER testen! Claude ist nicht perfekt.
Kennt nicht die neuesten Bibliotheken.
WICHTIG: KI ersetzt nicht das Verstehen!
Ihr muesst pruefen koennen, ob der Code richtig ist.
Fast alle Softwarefirmen nutzen bereits KI-Tools beim Programmieren.
KI direkt im Code-Editor
Fragen, erklaeren, debuggen
Automatisch Tests generieren
Gefragte Kombination: Programmier-Grundlagen + KI-Nutzung!
Mit Werkzeugen kommt Verantwortung!
Ihr lernt doch C - warum haben wir heute HTML/JavaScript benutzt?
Fuer: Benutzeroberflaechen
Fuer: Das "Innenleben"
Die Wahrheit: Oft arbeiten beide zusammen!
HTML zeigt an → C berechnet im Hintergrund
Android Kernel, iOS Kern - alles C!
Motor-Steuerung, ABS, Airbag - C!
PlayStation, Xbox, Nintendo - C/C++!
MRT, Herzschrittmacher - C!
Autopilot, Navigation - C!
Industrieroboter, Drohnen - C!
So koennte unser Restaurant-Roboter in echtem C aussehen:
// Roboter-Steuerung in C - das kennt ihr! int tische[10]; // Tischnummern int anzahl = 0; // Anzahl Bestellungen void fahre_zu_tisch(int tisch) { printf("🤖 Fahre zu Tisch %d...\n", tisch); motor_links(100); // Hardware-Funktion! motor_rechts(100); warte_bis_ankunft(tisch); } int main() { while(1) { // Endlosschleife - Roboter laeuft immer lese_sensoren(); if (anzahl > 0) { fahre_zu_tisch(tische[0]); anzahl--; } } }
Das kennt ihr! Arrays, Schleifen, Funktionen - alles aus dem Kurs!
In der echten Welt arbeiten C und KI zusammen:
// Roboter fragt Claude um Hilfe! int main() { char status[500]; char antwort[200]; // 1. Status sammeln (Sensoren, Kameras) sprintf(status, "Tisch 3: wartet 10min, Tisch 5: Beschwerde"); // 2. Claude fragen (HTTP-Request) frage_claude_api(status, antwort); // antwort: "FAHRE:5:Entschuldigung fuer die Unannehmlichkeiten!" // 3. Befehl ausfuehren int ziel; sscanf(antwort, "FAHRE:%d", &ziel); // String parsen! fahre_zu_tisch(ziel); return 0; }
C steuert die Hardware → KI trifft die Entscheidungen!
Mit C-Grundlagen koennt ihr:
Roboter steuern, Spiele programmieren, KI-Systeme bauen!
Fragen? Fragt mich - oder fragt Claude! 😉
Prof. Dr. Alexandra Mikityuk | HTW Berlin | WiSe 2025/26