216 lines
4.5 KiB
Markdown
216 lines
4.5 KiB
Markdown
# Visual Studio Code + Claude Code Setup Guide
|
|
|
|
## Für den Entwicklungsprozess mit Claude Code Plugin
|
|
|
|
### Schritt 1: Repository vorbereiten
|
|
|
|
```bash
|
|
# Repository in VS Code öffnen
|
|
cd /path/to/netbird-msp-appliance
|
|
code .
|
|
```
|
|
|
|
### Schritt 2: Claude Code Plugin installieren
|
|
|
|
1. Öffne VS Code Extensions (Ctrl+Shift+X)
|
|
2. Suche nach "Claude Code"
|
|
3. Installiere das Plugin
|
|
4. Authentifiziere dich mit deinem Anthropic Account
|
|
|
|
### Schritt 3: Claude Code verwenden
|
|
|
|
#### Hauptaufgabe an Claude geben:
|
|
|
|
Öffne Claude Code Chat und schicke folgende Nachricht:
|
|
|
|
```
|
|
Bitte lies die Datei CLAUDE_CODE_SPEC.md und implementiere das komplette NetBird MSP Appliance Projekt gemäß den Spezifikationen.
|
|
|
|
Prioritäten:
|
|
1. Erstelle zuerst die komplette Dateistruktur
|
|
2. Implementiere die Datenbank-Modelle und API-Routers
|
|
3. Baue die Services (docker_service, npm_service, netbird_service)
|
|
4. Erstelle die Jinja2 Templates
|
|
5. Baue das Frontend (HTML/CSS/JS)
|
|
6. Füge Tests hinzu
|
|
|
|
Achte besonders auf:
|
|
- Type hints in allen Python-Funktionen
|
|
- Comprehensive Error Handling
|
|
- Docstrings für alle Funktionen
|
|
- Clean Code und Modularität
|
|
- Security Best Practices
|
|
|
|
Beginne mit der Implementierung!
|
|
```
|
|
|
|
### Schritt 4: Iteratives Entwickeln
|
|
|
|
Claude Code wird Schritt für Schritt:
|
|
|
|
1. **Struktur erstellen**
|
|
- Alle Verzeichnisse anlegen
|
|
- Basis-Dateien erstellen
|
|
- Dependencies auflisten
|
|
|
|
2. **Backend implementieren**
|
|
- Database Models
|
|
- API Routers
|
|
- Services
|
|
- Utils
|
|
|
|
3. **Templates erstellen**
|
|
- docker-compose.yml.j2
|
|
- management.json.j2
|
|
- relay.env.j2
|
|
|
|
4. **Frontend bauen**
|
|
- HTML Dashboard
|
|
- CSS Styling
|
|
- JavaScript Logic
|
|
|
|
5. **Testen & Debugging**
|
|
- Unit Tests
|
|
- Integration Tests
|
|
- Manuelle Tests
|
|
|
|
### Schritt 5: Spezifische Anweisungen
|
|
|
|
Du kannst Claude Code auch spezifische Aufgaben geben:
|
|
|
|
```
|
|
"Implementiere jetzt den docker_service.py mit allen Funktionen
|
|
zum Starten, Stoppen und Überwachen von Docker-Containern"
|
|
```
|
|
|
|
```
|
|
"Erstelle das Frontend Dashboard mit Bootstrap 5 und mache es
|
|
responsive für Mobile/Tablet/Desktop"
|
|
```
|
|
|
|
```
|
|
"Füge comprehensive Error Handling zum Deployment-Prozess hinzu
|
|
mit automatischem Rollback bei Fehlern"
|
|
```
|
|
|
|
### Schritt 6: Code Review
|
|
|
|
Nach jeder größeren Implementierung:
|
|
|
|
```
|
|
"Bitte reviewe den Code in app/services/docker_service.py und
|
|
verbessere Error Handling und füge Type Hints hinzu"
|
|
```
|
|
|
|
### Schritt 7: Testing
|
|
|
|
```
|
|
"Erstelle Unit Tests für alle Services und API-Endpunkte"
|
|
```
|
|
|
|
### Schritt 8: Dokumentation
|
|
|
|
```
|
|
"Erstelle API-Dokumentation und ergänze die README mit
|
|
Deployment-Beispielen"
|
|
```
|
|
|
|
## Tipps für effektive Zusammenarbeit mit Claude Code
|
|
|
|
### ✅ Gute Anweisungen:
|
|
- "Implementiere X gemäß der Spezifikation in CLAUDE_CODE_SPEC.md"
|
|
- "Füge Error Handling für Y hinzu"
|
|
- "Refactore Z für bessere Wartbarkeit"
|
|
- "Erstelle Tests für Modul A"
|
|
|
|
### ❌ Vermeiden:
|
|
- Zu vage Anweisungen ohne Kontext
|
|
- Mehrere komplexe Aufgaben gleichzeitig
|
|
- Widersprüchliche Requirements
|
|
|
|
## Debugging mit Claude Code
|
|
|
|
```
|
|
"Der Deployment-Prozess schlägt fehl mit diesem Fehler: [Fehlermeldung].
|
|
Bitte analysiere das Problem und fixe es."
|
|
```
|
|
|
|
```
|
|
"Die NPM-Integration funktioniert nicht. Logs zeigen: [Logs].
|
|
Was ist das Problem?"
|
|
```
|
|
|
|
## Projekt-Struktur prüfen
|
|
|
|
Claude Code kann die Struktur validieren:
|
|
|
|
```
|
|
"Überprüfe, ob alle Dateien gemäß CLAUDE_CODE_SPEC.md
|
|
vorhanden und korrekt strukturiert sind"
|
|
```
|
|
|
|
## Abschließende Checks
|
|
|
|
```
|
|
"Führe folgende Checks durch:
|
|
1. Alle Dependencies in requirements.txt?
|
|
2. Docker-Compose gültig?
|
|
3. Alle Environment Variables dokumentiert?
|
|
4. README vollständig?
|
|
5. Installation Script funktional?"
|
|
```
|
|
|
|
## Deployment vorbereiten
|
|
|
|
```
|
|
"Bereite das Projekt für Production Deployment vor:
|
|
1. Sicherheits-Audit
|
|
2. Performance-Optimierungen
|
|
3. Logging verbessern
|
|
4. Monitoring Endpoints hinzufügen"
|
|
```
|
|
|
|
---
|
|
|
|
## Erwartete Entwicklungszeit mit Claude Code
|
|
|
|
- **Basis-Struktur**: 10-15 Minuten
|
|
- **Backend (APIs + Services)**: 30-45 Minuten
|
|
- **Templates**: 10-15 Minuten
|
|
- **Frontend**: 30-45 Minuten
|
|
- **Tests**: 20-30 Minuten
|
|
- **Dokumentation & Polish**: 15-20 Minuten
|
|
|
|
**Gesamt: ~2-3 Stunden** für ein vollständiges, produktionsreifes System!
|
|
|
|
---
|
|
|
|
## Nach der Entwicklung
|
|
|
|
### Lokales Testen:
|
|
|
|
```bash
|
|
# Docker Compose starten
|
|
docker compose up -d
|
|
|
|
# Logs prüfen
|
|
docker logs -f netbird-msp-appliance
|
|
|
|
# In Browser öffnen
|
|
http://localhost:8000
|
|
```
|
|
|
|
### Auf VM deployen:
|
|
|
|
```bash
|
|
# Repository auf VM clonen
|
|
git clone https://github.com/yourusername/netbird-msp-appliance.git
|
|
cd netbird-msp-appliance
|
|
|
|
# Installer ausführen
|
|
chmod +x install.sh
|
|
sudo ./install.sh
|
|
```
|
|
|
|
Viel Erfolg! 🚀
|