Was wir installieren

Unser Entwicklungs-Stack:

Tool	Zweck	Warum
Node.js 20+	JavaScript-Laufzeitumgebung	Betreibt unsere Build-Tools und Backend
npm	Paketmanager	Installiert Abhaengigkeiten
VS Code	Code-Editor	Bestes Erweiterungs-Oekosystem
Vite	Build-Tool	Sofortiges Hot-Reload, schnelle Builds
OpenCode	KI-Coding-Agent	Open-Source, Terminal-basierte KI
Git	Versionskontrolle	Aenderungen verfolgen, zusammenarbeiten

Gesamte Einrichtungszeit: 15-20 Minuten auf einem frischen System.

Node.js installieren

Node.js ist das Fundament -- die meisten KI-Tools und die moderne Webentwicklung haengen davon ab.

macOS (mit Homebrew):

brew install node

Windows (mit Installer):

• Von https://nodejs.org herunterladen (LTS-Version)
• Installer ausfuehren, Standards akzeptieren
• Terminal neu starten

Linux (mit nvm -- empfohlen):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.0/install.sh | bash
nvm install 20
nvm use 20

Installation verifizieren:

node --version   # Sollte v20.x oder hoeher anzeigen
npm --version    # Sollte 10.x oder hoeher anzeigen

Warum Node.js 20+? Es enthaelt natives Fetch, stabile ESM-Module und die Performance-Verbesserungen, die moderne Tools erwarten.

VS Code einrichten

VS Code ist der beliebteste Editor fuer KI-gestuetzte Entwicklung:

Essentielle Erweiterungen:

1. Continue (continue.dev) -- Open-Source-KI-Assistent
2. ESLint -- Code-Linting
3. Prettier -- Code-Formatierung
4. GitLens -- Erweiterte Git-Integration

Empfohlene Einstellungen (Einstellungen → JSON):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.inlineSuggest.enabled": true,
  "files.autoSave": "onFocusChange"
}

Tastenkuerzel zum Lernen:

• Ctrl+Shift+P / Cmd+Shift+P -- Befehlspalette
• Ctrl+`` -- Terminal umschalten
• Ctrl+P / Cmd+P -- Schnelles Datei-Oeffnen

Einen KI-Coding-Agenten einrichten

Fuer unsere praktischen Uebungen verwenden wir einen Terminal-basierten KI-Agenten:

Option A -- OpenCode (Open-Source, empfohlen fuer Workshops):

npm install -g opencode-ai
opencode

Option B -- Claude Code (Anthropics offizielles CLI):

npm install -g @anthropic-ai/claude-code
claude

Konfiguration -- API-Key-Einrichtung:

Die meisten KI-Tools brauchen einen API-Key eines Anbieters:

# Fuer OpenAI-Modelle:
export OPENAI_API_KEY="sk-your-key-here"

# Fuer Anthropic-Modelle:
export ANTHROPIC_API_KEY="sk-ant-your-key-here"

# Oder ein Gateway wie Model Prism verwenden:
export OPENAI_BASE_URL="https://your-prism-instance.com/api/team/v1"
export OPENAI_API_KEY="omp-your-tenant-key"

Wichtig: Niemals API-Keys in Git committen. Verwenden Sie .env-Dateien (zu .gitignore hinzugefuegt) oder Umgebungsvariablen.

Ihr erstes Vite-Projekt erstellen

Vite ist der schnellste Weg, ein modernes Webprojekt zu starten:

npm create vite@latest my-first-project -- --template vanilla
cd my-first-project
npm install
npm run dev

Was gerade passiert ist:

1. npm create vite hat ein Projekt mit HTML, CSS und JavaScript aufgesetzt
2. npm install hat Abhaengigkeiten heruntergeladen
3. npm run dev hat einen lokalen Server mit Hot-Reload gestartet

Oeffnen Sie http://localhost:5173 im Browser -- Sie sollten die Vite-Willkommensseite sehen.

Projektstruktur:

my-first-project/
  index.html      ← Einstiegspunkt Ihrer App
  style.css       ← Stile
  main.js         ← JavaScript-Logik
  package.json    ← Abhaengigkeiten und Skripte
  vite.config.js  ← Build-Konfiguration

Ihre erste KI-gestuetzte Bearbeitung

Machen wir unsere erste KI-gestuetzte Aenderung. Oeffnen Sie Ihr Projekt im Terminal:

cd my-first-project
opencode  # oder: claude

Probieren Sie diesen Prompt:

Ersetze den Vite-Willkommensseiten-Inhalt in index.html durch eine
einfache Zaehler-App. Sie soll haben:
- Eine grosse Zahlenanzeige, die bei 0 startet
- Einen "+"-Button und einen "-"-Button
- Klick auf + erhoeht, Klick auf - verringert den Wert
- Style es mit einem sauberen, modernen Look in der bestehenden style.css

Beobachten Sie, wie die KI:

1. Ihre bestehenden Dateien liest
2. index.html, main.js und style.css modifiziert
3. Eine funktionierende Zaehler-App erstellt

Aktualisieren Sie Ihren Browser -- Sie sollten den Zaehler funktionierend sehen.

Das ist die grundlegende Schleife: beschreiben was Sie wollen → KI baut es → Sie ueberpruefen und iterieren.

Fehlerbehebung haeufiger Probleme

Problem	Loesung
node: command not found	Terminal nach der Node.js-Installation neu starten
npm ERR! EACCES	Nicht sudo verwenden -- npm-Berechtigungen korrigieren oder nvm nutzen
API-Key funktioniert nicht	Auf zusaetzliche Leerzeichen pruefen, korrektes Praefix (sk- fuer OpenAI)
Vite-Dev-Server startet nicht	Pruefen ob Port 5173 bereits belegt ist: lsof -i :5173
KI-Agent kann keine Dateien lesen	Sicherstellen, dass Sie im Projektverzeichnis sind
OPENAI_BASE_URL funktioniert nicht	URL muss mit /v1 enden fuer OpenAI-kompatible APIs

Wenn gar nichts mehr geht:

# Nukleare Option -- neu starten
rm -rf node_modules package-lock.json
npm install
npm run dev

---quiz question: Warum sollten Sie niemals API-Keys in ein Git-Repository committen? options:

• { text: "Weil Git keine Sonderzeichen in Dateien unterstuetzt", correct: false }
• { text: "Weil jeder mit Zugang zum Repository Ihre Keys sehen und missbrauchen kann", correct: true }
• { text: "Weil API-Keys beim Committen ablaufen", correct: false } feedback: API-Keys, die in Git committed werden -- besonders in oeffentlichen Repositories -- koennen innerhalb von Minuten von automatisierten Scrapern gefunden und verwendet werden, um massive Kosten auf Ihrem Konto zu verursachen.

---quiz question: Was ist der Vorteil von Vite gegenueber aelteren Build-Tools? options:

• { text: "Es funktioniert nur mit React", correct: false }
• { text: "Es bietet sofortiges Hot-Reload und extrem schnelle Builds", correct: true }
• { text: "Es braucht kein Node.js", correct: false } feedback: Vite nutzt native ES-Module waehrend der Entwicklung fuer sofortiges Hot-Reload (kein Bundling-Schritt) und esbuild fuer Produktions-Builds -- was es deutlich schneller als Webpack oder Parcel macht.

---quiz question: Was ist die grundlegende Schleife der KI-gestuetzten Entwicklung? options:

• { text: "Code schreiben → kompilieren → debuggen → deployen", correct: false }
• { text: "Beschreiben was Sie wollen → KI baut es → Sie ueberpruefen und iterieren", correct: true }
• { text: "Code von Stack Overflow kopieren → einfuegen → Fehler beheben", correct: false } feedback: Die KI-gestuetzte Entwicklungsschleife verschiebt Ihre Rolle vom Code-Schreiben zum Beschreiben der Absicht, Ueberpruefen der KI-Ausgabe und Iterieren am Ergebnis, bis es Ihren Anforderungen entspricht.