lucas.orth/Skrift-Kofnigurator

Fork 0

Files

s4luorth 5e0fceab15 Initial commit

2026-02-07 13:04:04 +01:00

15 KiB

Raw Permalink Blame History

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:

API URL / Domain
- Beispiel: https://backend.deine-domain.de
- Pflichtfeld für Backend-Integration
API Token / Authentifizierung
- Optional (aktuell nicht genutzt)
- Für zukünftige Erweiterungen
Order Webhook URL
- Beispiel: https://n8n.deine-domain.de/webhook/order
- Wird nach Bestellung aufgerufen
Redirect URL Geschäftskunden
- Beispiel: https://deine-domain.de/danke-business
- Wohin nach Business-Bestellung
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:

Backend-URL in WordPress-Einstellungen gesetzt ist
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:

Produkt auswählen
Menge eingeben
Format wählen
Versand & Umschlag
Inhalt eingeben
Kundendaten
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

{
  "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

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

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

# 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

// 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

WordPress Konfigurator öffnen
Produkt wählen (z.B. Businessbriefe)
Menge: 5
Format: A4
Versand: Direktversand
Umschlag: Ja, mit Empfängeradresse
Text eingeben
Kundendaten eingeben
"Jetzt kostenpflichtig bestellen" klicken
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

# 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

# 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

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

15 KiB Raw Permalink Blame History Unescape Escape