lucas.orth/Skrift-Kofnigurator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
s4luorth
2026-02-07 13:04:04 +01:00
commit 5e0fceab15
82 changed files with 30348 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

476
FRONTEND_BACKEND_ZUSAMMENFASSUNG.md Normal file
View File

@@ -0,0 +1,476 @@
# 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!** 🚀