chore: Docs umstrukturiert, Client-Updates, Scripts nach scripts/
This commit is contained in:
111
docs/setup/APPWRITE_CORS_SETUP.md
Normal file
111
docs/setup/APPWRITE_CORS_SETUP.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# Appwrite CORS Setup - Schritt für Schritt
|
||||
|
||||
## Problem
|
||||
Appwrite blockiert Requests von `https://emailsorter.webklar.com` weil nur `https://localhost` als Origin erlaubt ist.
|
||||
|
||||
## Lösung: Platform in Appwrite hinzufügen
|
||||
|
||||
### Schritt 1: Appwrite-Konsole öffnen
|
||||
1. Gehe zu: **https://appwrite.webklar.com**
|
||||
2. Logge dich ein
|
||||
|
||||
### Schritt 2: Projekt öffnen
|
||||
1. Klicke auf dein **EmailSorter Projekt** (oder das Projekt, das du verwendest)
|
||||
|
||||
### Schritt 3: Settings öffnen
|
||||
1. Klicke auf **Settings** im linken Menü
|
||||
2. Oder suche nach **"Platforms"** oder **"Web"** in den Einstellungen
|
||||
|
||||
### Schritt 4: Platform hinzufügen
|
||||
1. Klicke auf **"Add Platform"** oder **"Create Platform"**
|
||||
2. Wähle **"Web"** als Platform-Typ
|
||||
|
||||
### Schritt 5: Platform konfigurieren
|
||||
Fülle die Felder aus:
|
||||
|
||||
- **Name:** `Production` (oder ein anderer Name)
|
||||
- **Hostname:** `emailsorter.webklar.com`
|
||||
- **Origin:** `https://emailsorter.webklar.com`
|
||||
|
||||
**WICHTIG:**
|
||||
- Verwende **https://** (nicht http://)
|
||||
- Kein Slash am Ende
|
||||
- Genau so wie oben geschrieben
|
||||
|
||||
### Schritt 6: Speichern
|
||||
1. Klicke auf **"Create"** oder **"Save"**
|
||||
2. Warte 1-2 Minuten (Cache)
|
||||
|
||||
### Schritt 7: Testen
|
||||
1. Gehe zu https://emailsorter.webklar.com
|
||||
2. Versuche dich einzuloggen
|
||||
3. Prüfe die Browser-Konsole (F12) - sollte keine CORS-Fehler mehr geben
|
||||
|
||||
---
|
||||
|
||||
## Alternative: Mehrere Origins
|
||||
|
||||
Falls du mehrere Domains brauchst (z.B. localhost für Development und Production):
|
||||
|
||||
1. Erstelle **zwei separate Platforms:**
|
||||
- **Development:** Hostname: `localhost`, Origin: `http://localhost:5173`
|
||||
- **Production:** Hostname: `emailsorter.webklar.com`, Origin: `https://emailsorter.webklar.com`
|
||||
|
||||
2. Oder verwende **Wildcard** (falls von Appwrite unterstützt):
|
||||
- Origin: `https://*.webklar.com`
|
||||
|
||||
---
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
### CORS-Fehler bleibt bestehen
|
||||
1. **Cache leeren:** Warte 2-3 Minuten nach dem Speichern
|
||||
2. **Browser-Cache:** Strg+Shift+R (Hard Refresh)
|
||||
3. **Prüfe Origin:** Muss **genau** `https://emailsorter.webklar.com` sein (kein Slash, kein Port)
|
||||
4. **Prüfe Appwrite-Version:** Manche Versionen haben die Platform-Einstellungen an einem anderen Ort
|
||||
|
||||
### Platform-Option nicht sichtbar
|
||||
- In manchen Appwrite-Versionen heißt es **"Web"** statt "Platforms"
|
||||
- Suche nach **"Client"** oder **"SDK"** in den Settings
|
||||
- Prüfe die Appwrite-Dokumentation für deine Version
|
||||
|
||||
### 404 oder 403 Fehler
|
||||
- Prüfe, ob die Appwrite-URL korrekt ist: `https://appwrite.webklar.com`
|
||||
- Prüfe, ob du die richtigen Berechtigungen hast
|
||||
- Prüfe, ob das Projekt existiert und aktiv ist
|
||||
|
||||
---
|
||||
|
||||
## Screenshots (Beispiel)
|
||||
|
||||
Die Platform-Einstellungen sollten etwa so aussehen:
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Add Platform │
|
||||
├─────────────────────────────────────┤
|
||||
│ Type: [Web ▼] │
|
||||
│ │
|
||||
│ Name: Production │
|
||||
│ Hostname: emailsorter.webklar.com │
|
||||
│ Origin: https://emailsorter.webklar │
|
||||
│ .com │
|
||||
│ │
|
||||
│ [Cancel] [Create] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Nach dem Setup
|
||||
|
||||
Nachdem du die Platform hinzugefügt hast:
|
||||
|
||||
1. ✅ CORS-Fehler sollten verschwinden
|
||||
2. ✅ Login/Register sollte funktionieren
|
||||
3. ✅ API-Calls sollten durchgehen
|
||||
|
||||
**Falls es immer noch nicht funktioniert:**
|
||||
- Prüfe die Browser-Konsole für genaue Fehlermeldungen
|
||||
- Prüfe die Appwrite-Logs (falls verfügbar)
|
||||
- Stelle sicher, dass der Backend-Server läuft (502-Fehler beheben)
|
||||
97
docs/setup/APPWRITE_SETUP.md
Normal file
97
docs/setup/APPWRITE_SETUP.md
Normal file
@@ -0,0 +1,97 @@
|
||||
# Appwrite Neu-Einrichtung - Schritt für Schritt
|
||||
|
||||
## Schritt 1: Neues Projekt in Appwrite erstellen
|
||||
|
||||
1. **Gehe zu Appwrite Dashboard:**
|
||||
- Falls du cloud.appwrite.io nutzt: https://cloud.appwrite.io
|
||||
- Falls du webklar.com nutzt: https://appwrite.webklar.com
|
||||
|
||||
2. **Erstelle ein neues Projekt:**
|
||||
- Klicke auf "Create Project"
|
||||
- Name: `EmailSorter` (oder ein anderer Name)
|
||||
- Kopiere die **Project ID** (wird angezeigt)
|
||||
|
||||
## Schritt 2: API Key erstellen
|
||||
|
||||
1. **Gehe zu Settings → API Credentials**
|
||||
2. **Klicke auf "Create API Key"**
|
||||
3. **Konfiguration:**
|
||||
- Name: `EmailSorter Backend`
|
||||
- Scopes: Wähle **alle Berechtigungen** (Full Access)
|
||||
- Expiration: Optional (oder leer lassen für kein Ablaufdatum)
|
||||
4. **Kopiere den API Key** (wird nur einmal angezeigt!)
|
||||
|
||||
## Schritt 3: Datenbank erstellen
|
||||
|
||||
1. **Gehe zu Databases**
|
||||
2. **Klicke auf "Create Database"**
|
||||
3. **Konfiguration:**
|
||||
- Database ID: `email_sorter_db` (oder ein anderer Name)
|
||||
- Name: `EmailSorter Database`
|
||||
4. **Kopiere die Database ID**
|
||||
|
||||
## Schritt 4: .env Dateien aktualisieren
|
||||
|
||||
### server/.env aktualisieren:
|
||||
|
||||
```env
|
||||
APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
|
||||
# ODER falls cloud.appwrite.io:
|
||||
# APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
|
||||
APPWRITE_PROJECT_ID=DEINE_NEW_PROJECT_ID_HIER
|
||||
APPWRITE_API_KEY=DEIN_NEW_API_KEY_HIER
|
||||
APPWRITE_DATABASE_ID=email_sorter_db
|
||||
```
|
||||
|
||||
### client/.env aktualisieren:
|
||||
|
||||
```env
|
||||
VITE_APPWRITE_ENDPOINT=https://appwrite.webklar.com/v1
|
||||
# ODER falls cloud.appwrite.io:
|
||||
# VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
|
||||
VITE_APPWRITE_PROJECT_ID=DEINE_NEW_PROJECT_ID_HIER
|
||||
```
|
||||
|
||||
## Schritt 5: Bootstrap ausführen
|
||||
|
||||
Nachdem du die .env Dateien aktualisiert hast:
|
||||
|
||||
```powershell
|
||||
cd server
|
||||
npm run bootstrap:v2
|
||||
```
|
||||
|
||||
Dies erstellt automatisch alle benötigten Collections:
|
||||
- `products`
|
||||
- `questions`
|
||||
- `submissions`
|
||||
- `answers`
|
||||
- `orders`
|
||||
- `email_accounts`
|
||||
- `email_stats`
|
||||
- `subscriptions`
|
||||
- `user_preferences`
|
||||
- `email_digests`
|
||||
|
||||
## Schritt 6: Verifizierung
|
||||
|
||||
Nach erfolgreichem Bootstrap solltest du sehen:
|
||||
- ✓ Database created/exists
|
||||
- ✓ Alle Collections wurden erstellt
|
||||
- ✓ Alle Attribute wurden hinzugefügt
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Fehler: "Project not found"**
|
||||
- Prüfe, ob die PROJECT_ID korrekt ist
|
||||
- Prüfe, ob du den richtigen Endpoint verwendest
|
||||
|
||||
**Fehler: "Unauthorized"**
|
||||
- Prüfe, ob der API_KEY korrekt ist
|
||||
- Stelle sicher, dass der API Key alle Berechtigungen hat
|
||||
|
||||
**Fehler: "Database not found"**
|
||||
- Stelle sicher, dass die DATABASE_ID korrekt ist
|
||||
- Das Bootstrap-Skript erstellt die Datenbank automatisch, wenn sie nicht existiert
|
||||
105
docs/setup/FAVICON_SETUP.md
Normal file
105
docs/setup/FAVICON_SETUP.md
Normal file
@@ -0,0 +1,105 @@
|
||||
# Favicon Setup Anleitung
|
||||
|
||||
Die Favicon-Dateien wurden erstellt. Um alle Formate zu generieren, folge diesen Schritten:
|
||||
|
||||
## Erstellte Dateien
|
||||
|
||||
✅ `favicon.svg` - Modernes SVG Favicon (bereits erstellt)
|
||||
✅ `apple-touch-icon.svg` - SVG für Apple Touch Icon (bereits erstellt)
|
||||
✅ `site.webmanifest` - Web App Manifest (bereits erstellt)
|
||||
|
||||
## Noch zu erstellen (PNG/ICO)
|
||||
|
||||
Du musst die folgenden PNG/ICO-Dateien aus dem SVG erstellen:
|
||||
|
||||
### Option 1: Online Converter verwenden
|
||||
|
||||
1. Gehe zu einem dieser Tools:
|
||||
- https://realfavicongenerator.net/ (Empfohlen - generiert alle Formate)
|
||||
- https://www.zenlytools.com/svg-to-ico
|
||||
- https://svg-to-ico.org/
|
||||
|
||||
2. Lade `favicon.svg` hoch
|
||||
|
||||
3. Generiere folgende Dateien:
|
||||
- `favicon.ico` (16x16, 32x32, 48x48)
|
||||
- `favicon-16x16.png`
|
||||
- `favicon-32x32.png`
|
||||
- `apple-touch-icon.png` (180x180)
|
||||
- `favicon-192x192.png` (für Web Manifest)
|
||||
- `favicon-512x512.png` (für Web Manifest)
|
||||
|
||||
4. Speichere alle generierten Dateien im `client/public/` Ordner
|
||||
|
||||
### Option 2: Mit ImageMagick (Command Line)
|
||||
|
||||
```bash
|
||||
# Installiere ImageMagick (falls nicht vorhanden)
|
||||
# Windows: choco install imagemagick
|
||||
# Mac: brew install imagemagick
|
||||
# Linux: sudo apt-get install imagemagick
|
||||
|
||||
cd client/public
|
||||
|
||||
# Erstelle PNG-Varianten
|
||||
magick favicon.svg -resize 16x16 favicon-16x16.png
|
||||
magick favicon.svg -resize 32x32 favicon-32x32.png
|
||||
magick apple-touch-icon.svg -resize 180x180 apple-touch-icon.png
|
||||
magick favicon.svg -resize 192x192 favicon-192x192.png
|
||||
magick favicon.svg -resize 512x512 favicon-512x512.png
|
||||
|
||||
# Erstelle ICO (mehrere Größen)
|
||||
magick favicon.svg -define icon:auto-resize=16,32,48 favicon.ico
|
||||
```
|
||||
|
||||
### Option 3: Mit Online Favicon Generator (Empfohlen)
|
||||
|
||||
1. Gehe zu: https://realfavicongenerator.net/
|
||||
2. Klicke auf "Select your Favicon image"
|
||||
3. Lade `favicon.svg` hoch
|
||||
4. Konfiguriere die Optionen:
|
||||
- iOS: Apple Touch Icon aktivieren
|
||||
- Android Chrome: Manifest aktivieren
|
||||
- Windows Metro: Optional
|
||||
5. Klicke auf "Generate your Favicons and HTML code"
|
||||
6. Lade das ZIP herunter
|
||||
7. Extrahiere alle Dateien in `client/public/`
|
||||
8. Kopiere die generierten `<link>` Tags in `index.html` (falls nötig)
|
||||
|
||||
## Verifizierung
|
||||
|
||||
Nach dem Erstellen aller Dateien:
|
||||
|
||||
1. Starte den Dev-Server: `npm run dev`
|
||||
2. Öffne die Seite im Browser
|
||||
3. Prüfe den Browser-Tab - das Favicon sollte angezeigt werden
|
||||
4. Teste auf Mobile:
|
||||
- iOS Safari: Zum Home-Bildschirm hinzufügen → Icon sollte erscheinen
|
||||
- Android Chrome: Installiere als PWA → Icon sollte erscheinen
|
||||
|
||||
## Dateien im public/ Ordner
|
||||
|
||||
Nach Abschluss sollten folgende Dateien vorhanden sein:
|
||||
|
||||
```
|
||||
client/public/
|
||||
├── favicon.svg ✅
|
||||
├── favicon.ico (zu erstellen)
|
||||
├── favicon-16x16.png (zu erstellen)
|
||||
├── favicon-32x32.png (zu erstellen)
|
||||
├── apple-touch-icon.png (zu erstellen)
|
||||
├── favicon-192x192.png (zu erstellen)
|
||||
├── favicon-512x512.png (zu erstellen)
|
||||
├── apple-touch-icon.svg ✅
|
||||
└── site.webmanifest ✅
|
||||
```
|
||||
|
||||
## Browser-Kompatibilität
|
||||
|
||||
- **Chrome/Edge**: Verwendet `favicon.svg` oder `favicon.ico`
|
||||
- **Firefox**: Verwendet `favicon.svg` oder `favicon.ico`
|
||||
- **Safari (Desktop)**: Verwendet `favicon.ico` oder PNG
|
||||
- **Safari (iOS)**: Verwendet `apple-touch-icon.png`
|
||||
- **Android Chrome**: Verwendet Icons aus `site.webmanifest`
|
||||
|
||||
Die aktuelle Konfiguration in `index.html` unterstützt alle modernen Browser!
|
||||
75
docs/setup/GOOGLE_OAUTH_SETUP.md
Normal file
75
docs/setup/GOOGLE_OAUTH_SETUP.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# Google OAuth Setup - Test Users hinzufügen
|
||||
|
||||
## Problem
|
||||
Wenn du Google OAuth für Gmail verwendest, musst du während der Entwicklung **Test Users** hinzufügen, damit diese die App verwenden können.
|
||||
|
||||
## Lösung: Test Users hinzufügen
|
||||
|
||||
### Schritt 1: Google Cloud Console öffnen
|
||||
1. Gehe zu [console.cloud.google.com](https://console.cloud.google.com)
|
||||
2. Wähle dein Projekt aus
|
||||
|
||||
### Schritt 2: OAuth Consent Screen öffnen
|
||||
1. Gehe zu **APIs & Services** → **OAuth consent screen**
|
||||
2. Scroll nach unten zu **Test users**
|
||||
|
||||
### Schritt 3: Test Users hinzufügen
|
||||
1. Klicke auf **+ ADD USERS**
|
||||
2. Füge die E-Mail-Adressen hinzu, die die App verwenden sollen:
|
||||
- Deine eigene E-Mail-Adresse
|
||||
- E-Mail-Adressen von anderen Entwicklern/Test-Usern
|
||||
3. Klicke auf **ADD**
|
||||
|
||||
### Schritt 4: Wichtig!
|
||||
- **Jede E-Mail-Adresse**, die Gmail verbinden möchte, **muss** als Test User hinzugefügt sein
|
||||
- Ohne Test User bekommst du den Fehler: `access_denied` oder `invalid_grant`
|
||||
|
||||
## App veröffentlichen (für Produktion) ✅
|
||||
|
||||
**Sobald die App veröffentlicht ist, müssen KEINE User mehr manuell hinzugefügt werden!**
|
||||
|
||||
### Veröffentlichungsschritte:
|
||||
|
||||
1. **Gehe zu OAuth consent screen**
|
||||
- APIs & Services → OAuth consent screen
|
||||
|
||||
2. **Klicke auf "PUBLISH APP"**
|
||||
- Die App wechselt von "Testing" zu "In production"
|
||||
|
||||
3. **Verifizierung (falls erforderlich)**
|
||||
- Google kann zusätzliche Informationen anfordern
|
||||
- Meist nur bei bestimmten Scopes oder vielen Nutzern nötig
|
||||
|
||||
4. **Fertig!**
|
||||
- ✅ Alle Google-Nutzer können die App jetzt verwenden
|
||||
- ✅ Keine Test Users mehr nötig
|
||||
- ✅ Keine manuelle E-Mail-Eingabe mehr erforderlich
|
||||
|
||||
### Wichtig:
|
||||
|
||||
- **Während der Entwicklung:** Test Users müssen manuell hinzugefügt werden
|
||||
- **Nach Veröffentlichung:** Alle können die App verwenden, keine manuelle Eingabe nötig!
|
||||
|
||||
**⚠️ Hinweis:** Wenn du die App wieder auf "Testing" zurücksetzt, müssen wieder Test Users hinzugefügt werden.
|
||||
|
||||
## Aktuelle Konfiguration prüfen
|
||||
|
||||
Deine Redirect URI sollte sein:
|
||||
- Entwicklung: `http://localhost:3000/api/oauth/gmail/callback`
|
||||
- Produktion: `https://deine-domain.de/api/oauth/gmail/callback`
|
||||
|
||||
Diese muss in **Credentials** → **OAuth 2.0 Client IDs** → **Authorized redirect URIs** eingetragen sein.
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
**Fehler: "access_denied"**
|
||||
- → Test User nicht hinzugefügt
|
||||
- → Lösung: E-Mail als Test User hinzufügen
|
||||
|
||||
**Fehler: "invalid_grant"**
|
||||
- → Redirect URI stimmt nicht überein
|
||||
- → Lösung: Redirect URI in Google Cloud Console prüfen
|
||||
|
||||
**Fehler: "redirect_uri_mismatch"**
|
||||
- → Redirect URI in .env stimmt nicht mit Google Cloud Console überein
|
||||
- → Lösung: Beide prüfen und angleichen
|
||||
373
docs/setup/SETUP_GUIDE.md
Normal file
373
docs/setup/SETUP_GUIDE.md
Normal file
@@ -0,0 +1,373 @@
|
||||
# EmailSorter - Einrichtungsanleitung
|
||||
|
||||
Diese Anleitung führt dich durch die komplette Einrichtung von EmailSorter.
|
||||
|
||||
---
|
||||
|
||||
## Inhaltsverzeichnis
|
||||
|
||||
1. [Voraussetzungen](#voraussetzungen)
|
||||
2. [Appwrite einrichten](#1-appwrite-einrichten)
|
||||
3. [Stripe einrichten](#2-stripe-einrichten)
|
||||
4. [Google OAuth einrichten](#3-google-oauth-einrichten-gmail)
|
||||
5. [Microsoft OAuth einrichten](#4-microsoft-oauth-einrichten-outlook)
|
||||
6. [Mistral AI einrichten](#5-mistral-ai-einrichten)
|
||||
7. [Projekt starten](#6-projekt-starten)
|
||||
8. [Fehlerbehebung](#fehlerbehebung)
|
||||
|
||||
---
|
||||
|
||||
## Voraussetzungen
|
||||
|
||||
- Node.js 18+ installiert
|
||||
- npm oder yarn
|
||||
- Git
|
||||
|
||||
---
|
||||
|
||||
## 1. Appwrite einrichten
|
||||
|
||||
### 1.1 Account erstellen
|
||||
|
||||
1. Gehe zu [cloud.appwrite.io](https://cloud.appwrite.io)
|
||||
2. Erstelle einen kostenlosen Account
|
||||
3. Erstelle ein neues Projekt (z.B. "EmailSorter")
|
||||
|
||||
### 1.2 API Key erstellen
|
||||
|
||||
1. Gehe zu **Settings** → **API Credentials**
|
||||
2. Klicke auf **Create API Key**
|
||||
3. Name: `EmailSorter Backend`
|
||||
4. Wähle **alle Berechtigungen** aus (Full Access)
|
||||
5. Kopiere den API Key
|
||||
|
||||
### 1.3 Datenbank erstellen
|
||||
|
||||
1. Gehe zu **Databases**
|
||||
2. Klicke auf **Create Database**
|
||||
3. Name: `email_sorter_db`
|
||||
4. Kopiere die **Database ID**
|
||||
|
||||
### 1.4 Bootstrap ausführen
|
||||
|
||||
```bash
|
||||
cd server
|
||||
npm run bootstrap:v2
|
||||
```
|
||||
|
||||
Dies erstellt automatisch alle benötigten Collections:
|
||||
- `products`
|
||||
- `questions`
|
||||
- `submissions`
|
||||
- `answers`
|
||||
- `orders`
|
||||
- `email_accounts`
|
||||
- `email_stats`
|
||||
- `subscriptions`
|
||||
- `user_preferences`
|
||||
|
||||
### 1.5 .env konfigurieren
|
||||
|
||||
```env
|
||||
# server/.env
|
||||
APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
APPWRITE_PROJECT_ID=deine_projekt_id
|
||||
APPWRITE_API_KEY=dein_api_key
|
||||
APPWRITE_DATABASE_ID=email_sorter_db
|
||||
```
|
||||
|
||||
```env
|
||||
# client/.env
|
||||
VITE_APPWRITE_ENDPOINT=https://cloud.appwrite.io/v1
|
||||
VITE_APPWRITE_PROJECT_ID=deine_projekt_id
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 2. Stripe einrichten
|
||||
|
||||
### 2.1 Account erstellen
|
||||
|
||||
1. Gehe zu [dashboard.stripe.com](https://dashboard.stripe.com)
|
||||
2. Erstelle einen Account
|
||||
3. Wechsle in den **Test Mode** (Toggle oben rechts)
|
||||
|
||||
### 2.2 API Keys kopieren
|
||||
|
||||
1. Gehe zu **Developers** → **API keys**
|
||||
2. Kopiere den **Secret key** (beginnt mit `sk_test_`)
|
||||
|
||||
### 2.3 Produkte erstellen
|
||||
|
||||
Gehe zu **Products** → **Add product**:
|
||||
|
||||
#### Basic Plan
|
||||
- Name: `EmailSorter Basic`
|
||||
- Preis: `9.00 EUR` / Monat
|
||||
- Kopiere die **Price ID** (beginnt mit `price_`)
|
||||
|
||||
#### Pro Plan
|
||||
- Name: `EmailSorter Pro`
|
||||
- Preis: `19.00 EUR` / Monat
|
||||
- Kopiere die **Price ID**
|
||||
|
||||
#### Business Plan
|
||||
- Name: `EmailSorter Business`
|
||||
- Preis: `49.00 EUR` / Monat
|
||||
- Kopiere die **Price ID**
|
||||
|
||||
### 2.4 Webhook einrichten
|
||||
|
||||
1. Gehe zu **Developers** → **Webhooks**
|
||||
2. Klicke auf **Add endpoint**
|
||||
3. URL: `https://deine-domain.de/api/subscription/webhook`
|
||||
- Für lokale Tests: Nutze [Stripe CLI](https://stripe.com/docs/stripe-cli)
|
||||
4. Events auswählen:
|
||||
- `checkout.session.completed`
|
||||
- `customer.subscription.updated`
|
||||
- `customer.subscription.deleted`
|
||||
- `invoice.payment_failed`
|
||||
- `invoice.payment_succeeded`
|
||||
5. Kopiere das **Signing Secret** (beginnt mit `whsec_`)
|
||||
|
||||
### 2.5 Lokaler Webhook-Test mit Stripe CLI
|
||||
|
||||
```bash
|
||||
# Installieren
|
||||
# Windows: scoop install stripe
|
||||
# Mac: brew install stripe/stripe-cli/stripe
|
||||
|
||||
# Login
|
||||
stripe login
|
||||
|
||||
# Webhook forwarden
|
||||
stripe listen --forward-to localhost:3000/api/subscription/webhook
|
||||
```
|
||||
|
||||
### 2.6 .env konfigurieren
|
||||
|
||||
```env
|
||||
# server/.env
|
||||
STRIPE_SECRET_KEY=sk_test_...
|
||||
STRIPE_WEBHOOK_SECRET=whsec_...
|
||||
STRIPE_PRICE_BASIC=price_...
|
||||
STRIPE_PRICE_PRO=price_...
|
||||
STRIPE_PRICE_BUSINESS=price_...
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 3. Google OAuth einrichten (Gmail)
|
||||
|
||||
### 3.1 Google Cloud Projekt erstellen
|
||||
|
||||
1. Gehe zu [console.cloud.google.com](https://console.cloud.google.com)
|
||||
2. Erstelle ein neues Projekt (oder wähle ein bestehendes)
|
||||
|
||||
### 3.2 Gmail API aktivieren
|
||||
|
||||
1. Gehe zu **APIs & Services** → **Library**
|
||||
2. Suche nach "Gmail API"
|
||||
3. Klicke auf **Enable**
|
||||
|
||||
### 3.3 OAuth Consent Screen
|
||||
|
||||
1. Gehe zu **APIs & Services** → **OAuth consent screen**
|
||||
2. Wähle **External**
|
||||
3. Fülle aus:
|
||||
- App name: `EmailSorter`
|
||||
- User support email: Deine E-Mail
|
||||
- Developer contact: Deine E-Mail
|
||||
4. **Scopes** hinzufügen:
|
||||
- `https://www.googleapis.com/auth/gmail.modify`
|
||||
- `https://www.googleapis.com/auth/gmail.labels`
|
||||
- `https://www.googleapis.com/auth/userinfo.email`
|
||||
5. **Test users** hinzufügen (während der Entwicklung)
|
||||
|
||||
### 3.4 OAuth Credentials erstellen
|
||||
|
||||
1. Gehe zu **APIs & Services** → **Credentials**
|
||||
2. Klicke auf **Create Credentials** → **OAuth client ID**
|
||||
3. Typ: **Web application**
|
||||
4. Name: `EmailSorter Web`
|
||||
5. **Authorized redirect URIs**:
|
||||
- `http://localhost:3000/api/oauth/gmail/callback` (Entwicklung)
|
||||
- `https://deine-domain.de/api/oauth/gmail/callback` (Produktion)
|
||||
6. Kopiere **Client ID** und **Client Secret**
|
||||
|
||||
### 3.5 .env konfigurieren
|
||||
|
||||
```env
|
||||
# server/.env
|
||||
GOOGLE_CLIENT_ID=xxx.apps.googleusercontent.com
|
||||
GOOGLE_CLIENT_SECRET=GOCSPX-xxx
|
||||
GOOGLE_REDIRECT_URI=http://localhost:3000/api/oauth/gmail/callback
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 4. Microsoft OAuth einrichten (Outlook)
|
||||
|
||||
### 4.1 Azure App Registration
|
||||
|
||||
1. Gehe zu [portal.azure.com](https://portal.azure.com)
|
||||
2. Suche nach "App registrations"
|
||||
3. Klicke auf **New registration**
|
||||
4. Name: `EmailSorter`
|
||||
5. Supported account types: **Accounts in any organizational directory and personal Microsoft accounts**
|
||||
6. Redirect URI: `Web` → `http://localhost:3000/api/oauth/outlook/callback`
|
||||
|
||||
### 4.2 Client Secret erstellen
|
||||
|
||||
1. Gehe zu **Certificates & secrets**
|
||||
2. Klicke auf **New client secret**
|
||||
3. Description: `EmailSorter Backend`
|
||||
4. Expires: `24 months`
|
||||
5. Kopiere den **Value** (wird nur einmal angezeigt!)
|
||||
|
||||
### 4.3 API Permissions
|
||||
|
||||
1. Gehe zu **API permissions**
|
||||
2. Klicke auf **Add a permission** → **Microsoft Graph** → **Delegated permissions**
|
||||
3. Füge hinzu:
|
||||
- `Mail.ReadWrite`
|
||||
- `User.Read`
|
||||
- `offline_access`
|
||||
4. Klicke auf **Grant admin consent** (falls möglich)
|
||||
|
||||
### 4.4 .env konfigurieren
|
||||
|
||||
```env
|
||||
# server/.env
|
||||
MICROSOFT_CLIENT_ID=xxx-xxx-xxx
|
||||
MICROSOFT_CLIENT_SECRET=xxx
|
||||
MICROSOFT_REDIRECT_URI=http://localhost:3000/api/oauth/outlook/callback
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 5. Mistral AI einrichten
|
||||
|
||||
### 5.1 Account erstellen
|
||||
|
||||
1. Gehe zu [console.mistral.ai](https://console.mistral.ai)
|
||||
2. Erstelle einen Account
|
||||
3. Gehe zu **API Keys**
|
||||
4. Klicke auf **Create new key**
|
||||
5. Kopiere den API Key
|
||||
|
||||
### 5.2 .env konfigurieren
|
||||
|
||||
```env
|
||||
# server/.env
|
||||
MISTRAL_API_KEY=dein_mistral_api_key
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 6. Projekt starten
|
||||
|
||||
### 6.1 Dependencies installieren
|
||||
|
||||
```bash
|
||||
# Backend
|
||||
cd server
|
||||
npm install
|
||||
|
||||
# Frontend
|
||||
cd ../client
|
||||
npm install
|
||||
```
|
||||
|
||||
### 6.2 Environment Files erstellen
|
||||
|
||||
```bash
|
||||
# Server
|
||||
cp server/env.example server/.env
|
||||
# Fülle die Werte aus!
|
||||
|
||||
# Client
|
||||
cp client/env.example client/.env
|
||||
# Fülle die Werte aus!
|
||||
```
|
||||
|
||||
### 6.3 Datenbank initialisieren
|
||||
|
||||
```bash
|
||||
cd server
|
||||
npm run bootstrap:v2
|
||||
```
|
||||
|
||||
### 6.4 Server starten
|
||||
|
||||
```bash
|
||||
# Terminal 1 - Backend
|
||||
cd server
|
||||
npm run dev
|
||||
|
||||
# Terminal 2 - Frontend
|
||||
cd client
|
||||
npm run dev
|
||||
```
|
||||
|
||||
### 6.5 Öffnen
|
||||
|
||||
- **Frontend**: http://localhost:5173
|
||||
- **Backend API**: http://localhost:3000
|
||||
- **API Docs**: http://localhost:3000
|
||||
|
||||
---
|
||||
|
||||
## Fehlerbehebung
|
||||
|
||||
### "APPWRITE_PROJECT_ID is not defined"
|
||||
|
||||
Stelle sicher, dass die `.env` Datei existiert und die Variablen gesetzt sind.
|
||||
|
||||
### "Invalid OAuth redirect URI"
|
||||
|
||||
Die Redirect URI in der OAuth-Konfiguration muss **exakt** mit der in der `.env` übereinstimmen.
|
||||
|
||||
### "Rate limit exceeded"
|
||||
|
||||
- Gmail: Max 10.000 Requests/Tag
|
||||
- Outlook: Max 10.000 Requests/App/Tag
|
||||
|
||||
### "Mistral AI: Model not found"
|
||||
|
||||
Prüfe, ob der API Key gültig ist und das Guthaben ausreicht.
|
||||
|
||||
### "Stripe webhook signature invalid"
|
||||
|
||||
- Nutze das korrekte Webhook Secret (`whsec_...`)
|
||||
- Bei lokalem Test: Nutze die Stripe CLI
|
||||
|
||||
### Microsoft OAuth: "Client credential must not be empty"
|
||||
|
||||
Stelle sicher, dass `MICROSOFT_CLIENT_ID` und `MICROSOFT_CLIENT_SECRET` gesetzt sind. Falls du Outlook nicht nutzen möchtest, kannst du diese leer lassen - der Server startet trotzdem.
|
||||
|
||||
---
|
||||
|
||||
## Checkliste
|
||||
|
||||
- [ ] Appwrite Projekt erstellt
|
||||
- [ ] Appwrite API Key erstellt
|
||||
- [ ] Appwrite Database erstellt
|
||||
- [ ] Bootstrap ausgeführt (`npm run bootstrap:v2`)
|
||||
- [ ] Stripe Account erstellt
|
||||
- [ ] Stripe Produkte erstellt (Basic, Pro, Business)
|
||||
- [ ] Stripe Webhook eingerichtet
|
||||
- [ ] Google OAuth Credentials erstellt (optional)
|
||||
- [ ] Microsoft App Registration erstellt (optional)
|
||||
- [ ] Mistral AI API Key erstellt
|
||||
- [ ] Alle `.env` Dateien konfiguriert
|
||||
- [ ] Server startet ohne Fehler
|
||||
- [ ] Frontend startet ohne Fehler
|
||||
|
||||
---
|
||||
|
||||
## Support
|
||||
|
||||
Bei Fragen oder Problemen:
|
||||
- GitHub Issues
|
||||
- support@emailsorter.de
|
||||
Reference in New Issue
Block a user