# Deine Entwicklungsumgebung: Terminal, Editor, Git

Jeder Handwerker braucht Werkzeuge. Ein Schreiner hat Saege, Hammer und Massstab. Ein Vibe Coder hat ein Terminal, einen Code-Editor und Versionskontrolle. Heute richten wir alle drei ein.

## Das Terminal ist nicht beaengstigend

Das Terminal ist einfach eine textbasierte Art, mit deinem Computer zu sprechen. Statt auf Icons zu klicken, tippst du Befehle ein. Das war's.

<div class="concept-box">
<h4>Konzept</h4>
Stell dir das Terminal als ein direktes Gespraech mit deinem Computer vor. Anstatt durch Menues und Fenster zu navigieren, tippst du genau ein, was du willst. Es ist tatsaechlich schneller, wenn man sich daran gewoehnt hat -- und es ist unverzichtbar fuer die Arbeit mit Claude Code.
</div>

**So oeffnest du es:**
- **macOS:** Oeffne die Terminal-App (suche nach "Terminal" in Spotlight mit Cmd+Space)
- **Windows:** Oeffne PowerShell (suche nach "PowerShell" im Startmenue)
- **Linux:** Oeffne einen beliebigen Terminal-Emulator (normalerweise Ctrl+Alt+T)

**Deine ersten Befehle:**

| Befehl | Was er tut | macOS/Linux | Windows |
|--------|-----------|-------------|---------|
| Wo bin ich? | Zeigt deinen aktuellen Ordner | `pwd` | `cd` |
| Was ist hier? | Listet Dateien im aktuellen Ordner | `ls` | `dir` |
| In einen Ordner wechseln | Verzeichnis wechseln | `cd ordnername` | `cd ordnername` |
| Einen Ordner erstellen | Neues Verzeichnis anlegen | `mkdir ordnername` | `mkdir ordnername` |

<div class="try-it">
<h4>Probier es aus</h4>
Oeffne dein Terminal und erstelle deinen Projektordner:
<br><br>
<code>mkdir waitlist-wizard</code><br>
<code>cd waitlist-wizard</code>
</div>

## Node.js installieren

Node.js ermoeglicht es dir, JavaScript ausserhalb eines Webbrowsers auszufuehren. Unser Projekt wird es verwenden, um den Entwicklungsserver zu starten und die Anwendung zu bauen.

**Installationsschritte:**
1. Gehe zu **nodejs.org**
2. Lade die **LTS**-Version herunter (Long Term Support -- die stabile Version)
3. Fuehre den Installer aus und akzeptiere alle Standardeinstellungen
4. Ueberprüfe, ob es funktioniert hat, indem du im Terminal eingibst:

```
node --version
npm --version
```

Du solltest Versionsnummern sehen. Wenn "command not found" erscheint, schliesse dein Terminal und oeffne es neu.

<div class="pro-tip">
<h4>Pro-Tipp</h4>
Installiere immer die LTS-Version (Long Term Support) von Node.js, nicht die "Current"-Version. LTS ist stabil und gut getestet. Die "Current"-Version kann Bugs oder Breaking Changes enthalten.
</div>

## VS Code: Dein Code-Editor

VS Code (Visual Studio Code) ist ein kostenloser Code-Editor von Microsoft. Er wird von Millionen von Entwicklern weltweit genutzt und ist die beste Umgebung fuer die Arbeit mit KI.

**Installationsschritte:**
1. Gehe zu **code.visualstudio.com**
2. Lade die Version fuer dein Betriebssystem herunter
3. Installiere und oeffne es

**Wichtige Dinge:**
- **Datei-Explorer** (linke Seitenleiste) -- zeigt deine Projektdateien
- **Integriertes Terminal** (unteres Panel) -- ein Terminal direkt in VS Code (oeffnen mit Ctrl+\` oder Ansicht > Terminal)
- **Dateien speichern** -- Ctrl+S (Windows/Linux) oder Cmd+S (Mac)

<div class="try-it">
<h4>Probier es aus</h4>
Oeffne VS Code, dann nutze <strong>Datei > Ordner oeffnen</strong>, um deinen <code>waitlist-wizard</code>-Ordner zu oeffnen. Du solltest ein leeres Projekt im Datei-Explorer sehen.
</div>

**Empfohlene Erweiterungen** (installiere vorerst 2):
- **Prettier** -- formatiert deinen Code automatisch sauber
- **ESLint** -- hebt potenzielle Fehler beim Schreiben hervor

Zum Installieren: Klicke auf das Extensions-Icon in der linken Seitenleiste (oder Ctrl+Shift+X) und suche nach jeder einzelnen.

## Git: Dein Sicherheitsnetz

Git ist Versionskontrolle -- es erstellt "Speicherpunkte" fuer deinen Code. Stell es dir wie Speicherstaende in einem Videospiel vor. Wenn etwas kaputt geht, kannst du immer zu einem vorherigen Stand zurueckkehren.

<div class="concept-box">
<h4>Konzept</h4>
Git verfolgt Aenderungen an deinen Dateien ueber die Zeit. Jedes Mal, wenn du einen "Commit" machst, erstellst du einen Snapshot deines gesamten Projekts zu diesem Zeitpunkt. Wenn KI Code generiert, der etwas kaputt macht, kannst du zur letzten funktionierenden Version zurueckrollen.
</div>

**Installation:**
- **macOS:** Git ist vorinstalliert. Tippe `git --version` zur Ueberpruefung.
- **Windows:** Lade von **git-scm.com** herunter und fuehre den Installer aus (akzeptiere alle Standardeinstellungen).
- **Linux:** Fuehre `sudo apt install git` (Ubuntu/Debian) oder `sudo dnf install git` (Fedora) aus.

**Konfiguriere deine Identitaet:**
```
git config --global user.name "Dein Name"
git config --global user.email "deine@email.com"
```

**Initialisiere dein Projekt:**
```
cd waitlist-wizard
git init
```

**Dein erster Commit:**
1. Erstelle eine Datei namens `README.md` in deinem `waitlist-wizard`-Ordner. Du kannst das in VS Code oder ueber das Terminal machen:
```
echo "# Waitlist Wizard" > README.md
```
2. Stage und committe:
```
git add .
git commit -m "first commit"
```

<div class="try-it">
<h4>Probier es aus</h4>
Fuehre <code>git log</code> in deinem Terminal aus. Du solltest deinen ersten Commit mit der Nachricht "first commit" sehen. Du hast jetzt Versionskontrolle eingerichtet.
</div>

## GitHub-Konto (Optional, aber empfohlen)

GitHub ist der Ort, an dem Entwickler Code speichern und teilen. Wir nutzen es in Lektion 10, um deine App zu deployen.

1. Gehe zu **github.com** und erstelle ein kostenloses Konto
2. Du musst noch keine Repositories anlegen -- das machen wir spaeter

<div class="honest-note">
<h4>Ehrlicher Hinweis</h4>
Diese Tools fuehlen sich vielleicht ungewohnt und einschuechternd an. Das ist voellig normal. Du musst sie nur einmal lernen. Ab Lektion 3 hilft dir Claude Code bei der Nutzung -- du beschreibst einfach, was du willst, und es erledigt die Terminal-Befehle.
</div>

## Wichtigste Erkenntnis

Du hast jetzt die drei grundlegenden Tools, die jeder Entwickler nutzt: ein Terminal, einen Code-Editor und Versionskontrolle. Diese Tools fuehlen sich vielleicht ungewohnt an, aber du musst sie nur einmal lernen. Ab jetzt hilft dir Claude Code bei der Nutzung.

<div class="checkpoint">
<h4>Checkpoint</h4>
Dein Terminal ist offen, Node.js ist installiert, VS Code hat deinen Projektordner und Git hat seinen ersten Commit. Als Naechstes: Claude Code kennenlernen, deinen KI-Coding-Partner.
</div>