~~REVEAL theme=white~~

====== KI zum Programmieren – Vibe Coding mit Cline und VS Code ======

{{background>lightblue}}

**KI-unterstütztes Programmieren in der Praxis**

//Aufbaukurs für Entwickler:innen mit ersten KI-Erfahrungen//

**vhs Worms**  
**Dozent:** Michael Wegener

<notes>
- Begrüßung, kurze Einordnung: heute geht es um KI als Coding-Partner
- Fokus: Cline als AI Coding Agent in VS Code
- Zielgruppe: Menschen, die bereits programmieren (mind. Grundkenntnisse)
</notes>

===== Ihr Dozent: Michael Wegener =====

{{background>lightgreen}}

**🎯 Rollen & Erfahrung**

<fragment>👨‍💻 **KI-Ingenieur & Entwickler** bei der satware AG</fragment>
<fragment>🧩 **Schwerpunkt:** Webanwendungen, KI-Integration, Developer-Workflows</fragment>
<fragment>🏗️ **Mitgründer** des U.10 Makerspace an der vhs Worms</fragment>
<fragment>👨‍🏫 **Dozent** für KI & digitale Themen an der vhs</fragment>
<fragment>⚡ **30 Jahre** Entwicklungserfahrung</fragment>

<notes>
- Eigene Praxis mit KI-gestütztem Programmieren kurz skizzieren
- Betonen: kein „Magic Button“, sondern Werkzeug für Profis
</notes>

===== Vorstellungsrunde: Ihr Vibe beim Programmieren =====

{{background>lightyellow}}

**👥 Wer sitzt im Raum?**

<fragment>💻 **Programmiererfahrung** – Sprachen / Frameworks (z.B. Python, JavaScript, C#, …)</fragment>
<fragment>🧰 **Tools** – Nutzen Sie bereits VS Code, Git, Tests?</fragment>
<fragment>🤖 **KI-Erfahrung** – ChatGPT, Copilot, andere Assistenten?</fragment>
<fragment>🎯 **Erwartungen** – Was soll KI Ihnen beim Coden abnehmen?</fragment>

<notes>
- Kurzhalten, aber gezielt nach Sprachen & Projekten fragen
- Notieren, welche Ökosysteme (Web, Daten, Scripting) vertreten sind
</notes>

===== Warum KI beim Programmieren? =====

{{background>lightcoral}}

**🧠 Motivation**

<fragment>⚡ **Geschwindigkeit** – Boilerplate, Routinecode, Umbauten</fragment>
<fragment>🧪 **Qualität** – Tests, Refactorings, Erklärungen zu fremdem Code</fragment>
<fragment>📚 **Lernen** – neue Frameworks & Patterns im Kontext des eigenen Projekts</fragment>
<fragment>🧱 **Fokus** – mehr Zeit für Architektur & Fachlogik, weniger Fleißarbeit</fragment>

<notes>
- Beispiele aus eigener Praxis nennen (z.B. Migrations, Tests, Docs)
- Klarstellen: KI ergänzt, ersetzt aber kein grundlegendes Verständnis
</notes>

===== Was ist Cline? =====

{{background>lightgreen}}

**🤖 Cline als AI Coding Agent**

<fragment>🧩 **VS-Code-Erweiterung** – läuft direkt im Editor</fragment>
<fragment>🔍 **Plan & Act** – erst verstehen, dann (auf Wunsch) Dateien ändern</fragment>
<fragment>📂 **Projekt-Bewusstsein** – liest & bearbeitet mehrere Dateien im Kontext</fragment>
<fragment>🌐 **Bring your own LLM** – nutzt Ihre API-Keys (z.B. Claude, GPT, Gemini, lokale Modelle)</fragment>

<notes>
- Unterschied zu „nur ChatGPT im Browser“: Dateizugriff, Terminal, Tests
- Abgrenzung zu Cursor/Copilot: Open Source, volle Kontrolle, kein Abo-Zwang
</notes>

===== LLMs kurz erklärt =====

{{background>lightsteelblue}}

**🧠 Sprachmodelle im Hintergrund**

<fragment>📚 **Large Language Models** – Musterlernen aus vielen Code- & Textbeispielen</fragment>
<fragment>🎯 **Cline als Orchestrator** – schickt Aufgaben an das gewählte Modell</fragment>
<fragment>🔑 **Provider** – z.B. Anthropic (Claude), OpenAI (GPT), OpenRouter, lokale Modelle</fragment>
<fragment>🧱 **Kosten & Latenz** – abhängig von Modellwahl & Prompt-Größe</fragment>

<notes>
- Nur so tief einsteigen, wie für Verständnis nötig
- Hinweis: Im Kurs nutzen wir ein vorbereitetes Setup / Test-Keys
</notes>

===== Architektur: Plan & Act =====

{{background>lightyellow}}

**🔄 Arbeitsweise von Cline**

<fragment>📝 **Plan-Modus (Read-only)** – Codebasis analysieren, Konzept ausarbeiten</fragment>
<fragment>🛠️ **Act-Modus (Write)** – nach Freigabe Dateien anlegen/ändern</fragment>
<fragment>💻 **Terminal & Browser** – Tests ausführen, App starten, Verhalten prüfen</fragment>
<fragment>📌 **Checkpoints & Git** – Änderungen nachvollbar & rücksetzbar</fragment>

<notes>
- Plan/Act an einem Mini-Beispiel erklären
- Betonen: Kein automatischer Write-Zugriff, immer mit Approval
</notes>

===== Voraussetzungen & Setup =====

{{background>orange}}

**🧰 Was wir im Kurs nutzen**

<fragment>🧱 **VS Code** mit Cline-Extension</fragment>
<fragment>🔑 **API-Zugänge** – vorbereitete Keys / Demo-Konfiguration</fragment>
<fragment>📂 **Beispielprojekt** – kleines Repo (z.B. Web- oder CLI-App)</fragment>
<fragment>🐧 **Terminal & Git** – grundlegende Bedienung im Kurs gezeigt</fragment>

<notes>
- Prüfen, ob bei allen VS Code & Cline laufen
- Kurz auf .clinerules (Projektregeln) hinweisen
- Optional: Hinweis auf lokale Modelle (Ollama/LM Studio) als Ausblick
</notes>

===== Live-Demo: Von Aufgabe zu Code =====

{{background>lightgreen}}

**🚀 Cline in Aktion**

<fragment>1️⃣ **User Story formulieren** – z.B. „kleiner Datei-Importer mit Log-Ausgabe“</fragment>
<fragment>2️⃣ **Plan-Modus** – Cline analysiert Projekt, schlägt Vorgehen vor</fragment>
<fragment>3️⃣ **Act-Modus** – nach Freigabe: Dateien anlegen/ändern, Tests laufen lassen</fragment>
<fragment>4️⃣ **Review** – gemeinsam Code & Testausgaben prüfen</fragment>

<notes>
- Nur ein überschaubares Beispiel wählen, Fokus auf Ablauf
- Zeigen, wie Cline mit Fehlermeldungen umgeht
</notes>

===== Praktische Übung 1: Ihr erstes Vibe Coding =====

{{background>lightyellow}}

**✋ Hands-on: Kleine Funktion mit Tests**

<fragment>🧾 **Aufgabe:** einfache Funktion (z.B. Daten filtern, Formatierung, kleine API-Abfrage)</fragment>
<fragment>🧪 **Tests:** Cline bitten, passende Unit-Tests zu erzeugen und auszuführen</fragment>
<fragment>🔁 **Iterationen:** Fehlschläge analysieren, zusammen mit Cline verbessern</fragment>
<fragment>📌 **Checkpoint:** Zwischenstand sichern, Unterschiede ansehen</fragment>

<notes>
- Teilnehmer:innen wählen Sprache nach Komfort (Python/JS/…)
- Bei Bedarf Vorlagen für Projekte/Struktur bereitstellen
</notes>

===== Praktische Übung 2: Refactoring & Debugging =====

{{background>lightyellow}}

**🧰 Bestehenden Code verbessern**

<fragment>📂 **Ausgangspunkt:** bewusst „unschöner“ Beispielcode</fragment>
<fragment>🧠 **Analyse:** Cline im Plan-Modus nach Problemen / Verbesserungen fragen</fragment>
<fragment>🛠️ **Refactoring:** gezielte Umbauten durch Cline vorschlagen & umsetzen lassen</fragment>
<fragment>🐞 **Debugging:** Fehler provozieren, Logs/Stacktraces gemeinsam mit Cline auswerten</fragment>

<notes>
- Ziel: Vertrauen in den Debug-/Refactor-Workflow mit KI aufbauen
- Wichtig: Nicht „blind übernehmen“, sondern Entscheidungen verstehen
</notes>

===== Sicherheit, Datenschutz & EU AI Act =====

{{background>lightcoral}}

**⚖️ Verantwortungsvoll mit KI coden**

<fragment>🔑 **API-Keys schützen** – nie im Code-Repo speichern</fragment>
<fragment>📤 **Daten, die gesendet werden** – Code, Prompts, ggf. Logs → Provider-Richtlinien prüfen</fragment>
<fragment>🏢 **Firmen-Policies** – Compliance, Geheimhaltung, ggf. On-Prem/Local-Modelle</fragment>
<fragment>🇪🇺 **EU AI Act & Transparenz** – Einsatz von KI im Entwicklungsprozess dokumentieren</fragment>

<notes>
- Offen über Risiken sprechen (geistiges Eigentum, sensible Daten)
- Konkrete Pragmatiktipps geben (Redlines, Projektarten, Modellwahl)
</notes>

===== Typische Stolpersteine & Best Practices =====

{{background>lightgreen}}

**🧭 Aus der Praxis**

<fragment>🧩 **Zu große Aufgaben** – lieber in kleine, klar formulierte Schritte aufteilen</fragment>
<fragment>🔍 **Vertrauen, aber prüfen** – Tests, Code-Review, Sicherheitsaspekte</fragment>
<fragment>💸 **Kosten im Blick** – Modellwahl & Kontextgröße steuern</fragment>
<fragment>🎯 **Cline „erziehen“** – .clinerules & Projektkonventionen nutzen</fragment>

<notes>
- Eigene „Fails“ und Learnings teilen
- Teilnehmer:innen ermutigen, Guidelines für ihr Team zu definieren
</notes>

===== Fragen & Diskussion =====

{{background>orange}}

**❓ Ihre Erfahrungen & Ideen**

<fragment>💭 **Fragen** zu Workflow, Setup, Modellen</fragment>
<fragment>🧩 **Use Cases** aus Ihrem Alltag – was würden Sie gern automatisieren?</fragment>
<fragment>🤝 **Erfahrungsaustausch** – Tipps, die sich in der Praxis bewährt haben</fragment>
<fragment>🚀 **Nächste Schritte** – wie es nach dem Kurs weitergehen kann</fragment>

<notes>
- Raum für konkrete Projektideen geben
- Optional: Kurz über weiterführende Ressourcen sprechen (Docs, Repos, Communities)
</notes>

===== Vielen Dank! =====

{{background>lightgreen}}

**🎓 Sie sind jetzt bereit für KI-gestütztes Programmieren:**

<fragment>✅ **Verstanden**, wie Cline & LLMs im Hintergrund arbeiten</fragment>
<fragment>🛠️ **Eigenständig genutzt**, um Code zu schreiben, zu testen & zu verbessern</fragment>
<fragment>⚖️ **Bewusstsein** für Sicherheit & Verantwortung beim KI-Einsatz</fragment>
<fragment>🚀 **Impulse** für eigene Projekte & Team-Workflows gewonnen</fragment>

**📧 Kontakt: mw@satware.com | 🌐 U.10 Makerspace**

<notes>
- Zur weiteren Vertiefung ermutigen
- Hinweis auf mögliche Folgekurse / Makerspace-Angebote
</notes>