# Verbindungstest für Frontend-Backend Integration

## Übersicht

Anleitung zum Testen der Verbindung zwischen Frontend und Backend auf dem separaten Server `https://192.168.0.105:443`.

## 🔍 Schnelltest

### 1. Backend-Erreichbarkeit prüfen

```bash
# Basis-Verbindung testen
ping 192.168.0.105

# HTTPS-Port testen
telnet 192.168.0.105 443

# SSL-Verbindung testen (ignoriert Zertifikatsfehler)
curl -k https://192.168.0.105:443/health
```

### 2. API-Endpunkte testen

```bash
# Health Check
curl -k https://192.168.0.105:443/health

# Drucker abrufen
curl -k https://192.168.0.105:443/api/printers

# Jobs abrufen  
curl -k https://192.168.0.105:443/api/jobs

# Mit formatierter Ausgabe
curl -k https://192.168.0.105:443/api/printers | jq .
```

### 3. Frontend-Verbindung testen

```bash
# Frontend starten
cd frontend
pnpm dev

# In Browser öffnen
http://localhost:3000

# Browser-Konsole prüfen (F12)
fetch('/api/health').then(r => r.json()).then(console.log)
```

## 🔧 Fehlerbehebung

### SSL-Zertifikat-Probleme

**Problem**: `SSL_ERROR_SELF_SIGNED_CERT`

**Lösung**:
1. Backend direkt im Browser öffnen: `https://192.168.0.105:443`
2. Zertifikat manuell akzeptieren
3. "Erweitert" → "Weiter zu 192.168.0.105"

**Alternative**: 
```bash
# curl mit ignoriertem SSL
curl -k https://192.168.0.105:443/health
```

### Netzwerk-Verbindungsprobleme

**Problem**: `Connection refused` oder `Network unreachable`

**Diagnose**:
```bash
# 1. IP-Erreichbarkeit prüfen
ping 192.168.0.105

# 2. Port-Verfügbarkeit prüfen
nmap -p 443 192.168.0.105

# 3. Firewall-Status prüfen (auf Backend-Server)
sudo ufw status
```

**Lösung**:
```bash
# Auf Backend-Server (192.168.0.105):
sudo ufw allow 443/tcp
sudo ufw allow from 192.168.0.0/24 to any port 443
```

### CORS-Probleme

**Problem**: `Access-Control-Allow-Origin` Fehler

**Diagnose**:
```bash
# CORS-Header prüfen
curl -k -H "Origin: http://localhost:3000" \
     -H "Access-Control-Request-Method: GET" \
     -H "Access-Control-Request-Headers: Content-Type" \
     -X OPTIONS \
     https://192.168.0.105:443/api/printers
```

**Lösung**: Backend-CORS-Konfiguration prüfen
```python
# Auf Backend-Server: app.py
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=['http://localhost:3000', 'http://192.168.0.*'])
```

### Backend-Service-Probleme

**Problem**: Backend antwortet nicht

**Diagnose**:
```bash
# Auf Backend-Server (192.168.0.105):
sudo systemctl status myp-backend
sudo journalctl -u myp-backend -f
```

**Lösung**:
```bash
# Service neu starten
sudo systemctl restart myp-backend

# Oder manuell starten
cd /path/to/backend
python app.py --host 0.0.0.0 --port 443
```

## 📊 Monitoring

### Real-time Verbindungsüberwachung

```bash
# Kontinuierlicher Health Check
watch -n 5 'curl -k -s https://192.168.0.105:443/health | jq .'

# Netzwerk-Latenz überwachen
ping -c 10 192.168.0.105

# Port-Monitoring
nmap -p 443 192.168.0.105
```

### Frontend-Logs überwachen

```bash
# Frontend-Logs in Echtzeit
cd frontend
pnpm dev

# Browser-Konsole (F12) überwachen:
console.log('Backend URL:', API_BASE_URL);
```

### Backend-Logs überwachen

```bash
# Auf Backend-Server:
tail -f /var/log/myp-backend.log
sudo journalctl -u myp-backend -f
```

## 🧪 Automatisierte Tests

### Frontend-Test-Script erstellen

```javascript
// test-backend-connection.js
const API_BASE_URL = 'https://192.168.0.105:443';

async function testConnection() {
  try {
    // Health Check
    const health = await fetch(`${API_BASE_URL}/health`, {
      method: 'GET',
    });
    console.log('✅ Health Check:', await health.json());

    // Printers API  
    const printers = await fetch(`${API_BASE_URL}/api/printers`);
    console.log('✅ Printers API:', await printers.json());

    // Jobs API
    const jobs = await fetch(`${API_BASE_URL}/api/jobs`);
    console.log('✅ Jobs API:', await jobs.json());

  } catch (error) {
    console.error('❌ Verbindungsfehler:', error);
  }
}

testConnection();
```

```bash
# Test ausführen
node test-backend-connection.js
```

### Backend-Test-Script

```bash
#!/bin/bash
# test-backend.sh

echo "🔍 Backend-Verbindungstest"
echo "=========================="

# 1. Ping-Test
echo "1. Ping-Test..."
if ping -c 1 192.168.0.105 > /dev/null; then
    echo "✅ Server erreichbar"
else
    echo "❌ Server nicht erreichbar"
    exit 1
fi

# 2. Port-Test  
echo "2. Port 443 Test..."
if nc -z 192.168.0.105 443; then
    echo "✅ Port 443 offen"
else
    echo "❌ Port 443 nicht erreichbar"
    exit 1
fi

# 3. SSL-Test
echo "3. SSL-Verbindungstest..."
if curl -k -s https://192.168.0.105:443/health > /dev/null; then
    echo "✅ SSL-Verbindung erfolgreich"
else
    echo "❌ SSL-Verbindung fehlgeschlagen"
    exit 1
fi

# 4. API-Tests
echo "4. API-Endpunkt-Tests..."
if curl -k -s https://192.168.0.105:443/api/printers > /dev/null; then
    echo "✅ Drucker-API verfügbar"
else
    echo "❌ Drucker-API nicht verfügbar"
fi

if curl -k -s https://192.168.0.105:443/api/jobs > /dev/null; then
    echo "✅ Jobs-API verfügbar"
else
    echo "❌ Jobs-API nicht verfügbar"
fi

echo ""
echo "🎉 Verbindungstest abgeschlossen!"
```

```bash
# Test ausführen
chmod +x test-backend.sh
./test-backend.sh
```

## 📋 Checkliste

### Vor dem ersten Start

- [ ] Backend-Server unter `192.168.0.105` läuft
- [ ] Port 443 ist geöffnet und erreichbar
- [ ] SSL-Zertifikat ist konfiguriert (selbstsigniert OK)
- [ ] CORS ist für Frontend-Domain konfiguriert
- [ ] API-Endpunkte sind verfügbar

### Bei Problemen prüfen

- [ ] Netzwerk-Konnektivität (`ping 192.168.0.105`)
- [ ] Port-Verfügbarkeit (`telnet 192.168.0.105 443`)
- [ ] SSL-Zertifikat manuell akzeptiert
- [ ] Backend-Service läuft (`systemctl status myp-backend`)
- [ ] Firewall-Regeln korrekt konfiguriert
- [ ] Frontend-Konfiguration korrekt (`API_BASE_URL`)

### Bei erfolgreicher Verbindung

- [ ] Health Check gibt Status zurück
- [ ] Drucker-API gibt Daten zurück  
- [ ] Jobs-API ist funktional
- [ ] Frontend kann Backend-Daten anzeigen
- [ ] Keine CORS-Fehler in Browser-Konsole

---

**Ziel**: Nahtlose Kommunikation zwischen Frontend (`localhost:3000`) und Backend (`https://192.168.0.105:443`)  
**Status**: Bereit für Integration  
**Support**: Siehe Browser-Konsole und Backend-Logs bei Problemen