477 lines
15 KiB
Markdown
477 lines
15 KiB
Markdown
# 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!** 🚀
|