# Frontend-Backend Integration - Zusammenfassung

Komplette Übersicht über die Integration des WordPress Frontends mit dem Node.js Backend.

## Änderungen in diesem Chat

### ❌ Keine Frontend-Änderungen besprochen

In diesem Chat lag der Fokus komplett auf dem **Backend**:
- Backend-Entwicklung (Node.js/Express)
- Docker-Deployment
- Scriptalizer API Integration
- SVG-Generierung mit Variationen

Das Frontend (WordPress Plugin) wurde **jetzt** für das Backend angepasst.

## Neue Dateien im WordPress Plugin

### 1. `assets/js/configurator-api.js`
**Backend API Client**

Funktionen:
- `healthCheck()` - Prüft ob Backend erreichbar ist
- `generatePreviewBatch(letters)` - Generiert Preview von Briefen
- `getPreviewUrl(sessionId, index)` - Holt Preview-URL
- `finalizeOrder(sessionId, orderNumber, metadata)` - Finalisiert Order aus Preview
- `generateOrder(orderNumber, letters, envelopes, metadata)` - Erstellt Order direkt
- `generateOrderNumber()` - Generiert Bestellnummer (SK-YYYY-MM-DD-XXX)

### 2. `assets/js/configurator-backend-integration.js`
**Integration Logic**

Funktionen:
- `handleOrderSubmitWithBackend(state)` - Erweiterte Order-Submit mit Backend
- `prepareLettersForBackend(state)` - Bereitet Letter-Daten vor
- `prepareEnvelopesForBackend(state)` - Bereitet Envelope-Daten vor
- `mapFontToBackend(font)` - Mappt Frontend-Font zu Backend
- `mapFormatToBackend(format)` - Mappt Frontend-Format zu Backend

### 3. `BACKEND_INTEGRATION.md`
**Vollständige Integrations-Dokumentation**

Inhalt:
- WordPress Admin-Einstellungen Anleitung
- Backend-API Endpunkte Dokumentation
- Workflow-Beschreibungen
- Datenmapping-Tabellen
- Troubleshooting Guide
- Testing-Anleitungen

### 4. `README.md`
**Plugin-Dokumentation**

Inhalt:
- Features-Übersicht
- Installations-Anleitung
- Konfigurations-Guide
- Datei-Struktur
- API Integration
- Workflow-Diagramme
- Troubleshooting
- Changelog

## WordPress Admin-Einstellungen

### Bereits vorhanden (keine Änderung nötig!)

Die Backend-Verbindungseinstellungen waren bereits im Plugin vorbereitet:

**Einstellungen → Skrift Konfigurator → Backend-Verbindung:**

1. **API URL / Domain**
   - Beispiel: `https://backend.deine-domain.de`
   - Pflichtfeld für Backend-Integration

2. **API Token / Authentifizierung**
   - Optional (aktuell nicht genutzt)
   - Für zukünftige Erweiterungen

3. **Order Webhook URL**
   - Beispiel: `https://n8n.deine-domain.de/webhook/order`
   - Wird nach Bestellung aufgerufen

4. **Redirect URL Geschäftskunden**
   - Beispiel: `https://deine-domain.de/danke-business`
   - Wohin nach Business-Bestellung

5. **Redirect URL Privatkunden**
   - Beispiel: `https://deine-domain.de/danke-privat`
   - Wohin nach Privat-Bestellung

## Integration in bestehendes Frontend

### Wie funktioniert es?

Das neue Backend-System wird **automatisch** genutzt, wenn:
1. Backend-URL in WordPress-Einstellungen gesetzt ist
2. Backend erreichbar ist (Health-Check erfolgreich)

### Fallback-Logik

Falls Backend nicht erreichbar:
- Plugin fällt zurück auf alte Webhook-Only Logik
- Bestellung wird trotzdem durchgeführt
- Aber: Keine SVG-Generierung

### Was ändert sich für den User?

**Nichts!** Der Konfigurator funktioniert genau gleich:
1. Produkt auswählen
2. Menge eingeben
3. Format wählen
4. Versand & Umschlag
5. Inhalt eingeben
6. Kundendaten
7. Bestellen → **Jetzt mit Backend-Generierung!**

## Datenmapping

### Fonts

| WordPress | Backend | Scriptalizer |
|-----------|---------|--------------|
| tilda     | tilda   | PremiumUltra79 |
| alva      | alva    | PremiumUltra23 |
| ellie     | ellie   | PremiumUltra39 |

### Formate

| WordPress | Backend | Papier |
|-----------|---------|--------|
| a4        | A4 | 210×297mm |
| a6p       | A6_PORTRAIT | 105×148mm |
| a6l       | A6_LANDSCAPE | 148×105mm |

### Envelopes

| Brief-Format | Envelope-Format | Größe |
|--------------|-----------------|-------|
| A4           | DIN_LANG | 110×220mm |
| A6           | C6 | 114×162mm |

## Workflow-Übersicht

### Business-Kunde (B2B)

```
┌─────────────────────────────────────────────────────────┐
│ 1. Kunde füllt Konfigurator aus                         │
│    - Businessbriefe / Business Postkarten / Follow-ups  │
│    - Menge, Format, Versand, Umschlag                   │
│    - Text-Inhalt                                         │
│    - Kundendaten                                         │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 2. Klick auf "Jetzt kostenpflichtig bestellen"          │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 3. WordPress Plugin                                      │
│    - generateOrderNumber() → SK-2026-01-03-001          │
│    - prepareLettersForBackend(state)                     │
│    - prepareEnvelopesForBackend(state)                   │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 4. Backend API Call                                      │
│    POST /api/order/generate                              │
│    {                                                     │
│      orderNumber: "SK-2026-01-03-001",                   │
│      letters: [...],                                     │
│      envelopes: [...],                                   │
│      metadata: {...}                                     │
│    }                                                     │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 5. Node.js Backend                                       │
│    - Scriptalizer API Call (Batch-Processing)            │
│    - SVG-Generierung mit Variationen                     │
│    - Dateien speichern in /var/skrift-output/           │
│    - Placeholders.csv erstellen                          │
│    - order-metadata.json erstellen                       │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 6. Webhook aufrufen (optional)                           │
│    POST https://n8n.deine-domain.de/webhook/order        │
│    {                                                     │
│      orderNumber: "SK-2026-01-03-001",                   │
│      customer_data: {...},                               │
│      backend_result: {                                   │
│        path: "/var/skrift-output/SK-2026-01-03-001",     │
│        files: [...]                                      │
│      }                                                   │
│    }                                                     │
└─────────────────────────┬───────────────────────────────┘
                          │
                          ▼
┌─────────────────────────────────────────────────────────┐
│ 7. Weiterleitung                                         │
│    → https://domain.de/danke-business?orderNumber=SK-..  │
└─────────────────────────────────────────────────────────┘
```

### Privat-Kunde (B2C) - Später mit PayPal

```
1. Kunde füllt Konfigurator aus
2. Klick auf "Jetzt kostenpflichtig bestellen"
3. → PayPal Checkout
4. PayPal Zahlung erfolgreich
5. PayPal Webhook → WordPress
6. WordPress → Backend API (generateOrder)
7. Backend generiert SVG-Dateien
8. Webhook aufrufen
9. Weiterleitung zu Danke-Seite
```

## Generierte Dateien

Für jede Bestellung erstellt das Backend:

```
/var/skrift-output/SK-2026-01-03-001/
├── letter_000.svg          # Brief 1
├── letter_001.svg          # Brief 2
├── ...
├── letter_099.svg          # Brief 100
├── envelope_000.svg        # Umschlag 1 (falls gewünscht)
├── envelope_001.svg        # Umschlag 2
├── ...
├── envelope_099.svg        # Umschlag 100
├── placeholders.csv        # Platzhalter-Daten (CSV)
└── order-metadata.json     # Bestellungs-Metadaten
```

### order-metadata.json

```json
{
  "orderNumber": "SK-2026-01-03-001",
  "generatedAt": "2026-01-03T12:34:56.789Z",
  "summary": {
    "totalLetters": 100,
    "totalEnvelopes": 100,
    "fonts": ["tilda"],
    "formats": ["A4"]
  },
  "metadata": {
    "customer": {
      "type": "business",
      "firstName": "Max",
      "lastName": "Mustermann",
      "company": "Beispiel GmbH",
      "email": "max@example.com"
    },
    "product": "businessbriefe",
    "quantity": 100
  }
}
```

### placeholders.csv

```csv
PlaceholderName,Value
Anrede,Sehr geehrte Damen und Herren
Firma,Beispiel GmbH
Ansprechpartner,Max Mustermann
```

## Wichtige Konfigurationen

### WordPress Plugin

**Datei:** `WordPress Plugin/includes/admin-settings.php`

Bereits vorhanden:
- Backend-Verbindungseinstellungen
- Preiskonfiguration
- Produktverwaltung
- Gutschein-System

**Keine Änderungen nötig!**

### Node.js Backend

**Datei:** `Docker Backend/.env`

```bash
SCRIPTALIZER_LICENSE_KEY=f9918b40-d11c-11f0-b558-0800200c9a66
SCRIPTALIZER_ERR_FREQUENCY=0  # WICHTIG: Keine durchgestrichenen Wörter!
BATCH_SIZE=30
CACHE_LIFETIME_HOURS=2
RATE_LIMIT_PER_MINUTE=2
NODE_ENV=production
```

**Datei:** `Docker Backend/src/lib/svg-font-engine.js`

Handschrift-Variationen:
- **15% Wortabstand-Variation** (mit Sinuswelle)
- **±2.5° Wort-Rotation** (für natürliche Schräglage)

## Testing

### 1. Backend Health-Check

```bash
# Auf Server
curl http://localhost:4000/health

# Von außen
curl https://backend.deine-domain.de/health

# Erwartete Antwort:
{"status":"ok","timestamp":"2026-01-03T..."}
```

### 2. WordPress Browser-Console

```javascript
// Backend API testen
const api = window.SkriftBackendAPI;

// Health-Check
const healthy = await api.healthCheck();
console.log('Backend healthy:', healthy);

// Test-Order
const result = await api.generateOrder(
  api.generateOrderNumber(),
  [{
    text: 'Liebe Oma, vielen Dank für das schöne Geschenk!',
    font: 'tilda',
    format: 'A4',
    placeholders: {}
  }],
  [{
    type: 'recipient',
    recipientAddress: {
      name: 'Frau Schmidt',
      street: 'Hauptstraße 123',
      zip: '12345',
      city: 'Berlin'
    },
    font: 'tilda',
    format: 'DIN_LANG'
  }],
  {
    customer: {
      type: 'business',
      firstName: 'Test',
      lastName: 'User',
      email: 'test@example.com'
    }
  }
);

console.log('Order result:', result);
```

### 3. Vollständiger Test-Workflow

1. WordPress Konfigurator öffnen
2. Produkt wählen (z.B. Businessbriefe)
3. Menge: 5
4. Format: A4
5. Versand: Direktversand
6. Umschlag: Ja, mit Empfängeradresse
7. Text eingeben
8. Kundendaten eingeben
9. "Jetzt kostenpflichtig bestellen" klicken
10. Prüfen:
    - Browser-Console: Keine Fehler
    - Backend-Logs: `docker compose logs -f`
    - Dateien erstellt: `ls /var/skrift-output/SK-*`
    - SVGs korrekt: Keine durchgestrichenen Wörter
    - Webhook aufgerufen (falls konfiguriert)

## Deployment-Reihenfolge

### 1. Backend deployen

```bash
# Siehe: Docker Backend/DEPLOYMENT_READY/START_HIER.txt

# Upload auf Server
scp -r DEPLOYMENT_READY/* root@SERVER:/opt/skrift-backend/

# Auf Server
ssh root@SERVER
cd /opt/skrift-backend
cp .env.example .env
mkdir -p /var/skrift-output
docker compose up -d --build
```

### 2. Nginx Proxy Manager konfigurieren

- Domain: `backend.deine-domain.de`
- Forward to: `skrift-backend:4000`
- SSL: Let's Encrypt

### 3. WordPress Plugin hochladen

```bash
# Per FTP/SSH
scp -r "WordPress Plugin" root@SERVER:/var/www/html/wp-content/plugins/skrift-konfigurator/
```

### 4. WordPress Plugin aktivieren

- WordPress Admin → Plugins
- "Skrift Konfigurator" aktivieren

### 5. Einstellungen konfigurieren

- Einstellungen → Skrift Konfigurator
- Backend-Verbindung:
  - API URL: `https://backend.deine-domain.de`
  - Webhook URL: `https://n8n.deine-domain.de/webhook/order` (optional)
  - Redirect URLs setzen
- Speichern

### 6. Seite mit Konfigurator erstellen

- Neue Seite: "Konfigurator"
- Shortcode: `[skrift_konfigurator]`
- Veröffentlichen

### 7. Testen!

## Troubleshooting

Siehe:
- `WordPress Plugin/BACKEND_INTEGRATION.md`
- `Docker Backend/DEPLOYMENT_READY/SERVER_SETUP.txt`
- `Docker Backend/DEPLOYMENT_READY/CHECKLISTE.txt`

## Zusammenfassung

### ✅ Was ist fertig?

- ✅ Backend komplett entwickelt (Node.js + Docker)
- ✅ Frontend-Backend Integration implementiert
- ✅ API Client für WordPress
- ✅ Dokumentation vollständig
- ✅ Deployment-Package bereit
- ✅ Handschrift-Variationen (15% Abstand, ±2.5° Rotation)
- ✅ Keine durchgestrichenen Wörter (SCRIPTALIZER_ERR_FREQUENCY=0)

### 🚧 Was fehlt noch?

- [ ] Backend auf Server deployen
- [ ] WordPress Einstellungen konfigurieren
- [ ] Vollständigen Test-Durchlauf
- [ ] PayPal-Integration für Privatkunden
- [ ] Email-Benachrichtigungen
- [ ] N8N Workflow für Plotter-Übertragung

### 🎯 Nächste Schritte

1. **Backend deployen** (siehe `DEPLOYMENT_READY/START_HIER.txt`)
2. **WordPress-Einstellungen** konfigurieren
3. **Test-Bestellung** aufgeben
4. **Prüfen** ob SVG-Dateien korrekt generiert werden
5. **N8N Workflow** einrichten (optional)
6. **Go Live!** 🚀