113 lines
4.0 KiB
Markdown
113 lines
4.0 KiB
Markdown
# HyggeCraftery Flutter App
|
|
|
|
Eine E-Commerce Flutter-App, die mit dem WordPress/WooCommerce-Shop hyggecraftery.com verbunden ist.
|
|
|
|
## Features
|
|
|
|
- 🏠 **Homepage** mit ausgewählten Produkten zum Thema Gemütlichkeit
|
|
- 📦 **Produktliste** mit allen verfügbaren Produkten
|
|
- 🔍 **Produktdetails** mit Bildern und Beschreibungen
|
|
- 🛒 **Warenkorb** Funktionalität mit Persistenz (bleibt nach App-Neustart erhalten)
|
|
- 💳 **Checkout** über WooCommerce WebView (nutzt alle WooCommerce-Einstellungen)
|
|
- 👤 **Login/Logout** für Kunden
|
|
- 📋 **Bestellhistorie** - Kunden können ihre Bestellungen einsehen
|
|
- 💾 **Persistente Anmeldung** - bleibt nach App-Neustart eingeloggt
|
|
- 🔄 **Pull-to-Refresh** für Produktlisten
|
|
- ♾️ **Infinite Scroll** für automatisches Laden weiterer Produkte
|
|
|
|
## Setup
|
|
|
|
### 1. WooCommerce API Konfiguration
|
|
|
|
Öffne `lib/services/woocommerce_service.dart` und konfiguriere:
|
|
|
|
```dart
|
|
static const String baseUrl = 'https://hyggecraftery.com';
|
|
static const String consumerKey = 'ck_your_consumer_key';
|
|
static const String consumerSecret = 'cs_your_consumer_secret';
|
|
```
|
|
|
|
**WooCommerce REST API Keys erstellen:**
|
|
1. Gehe zu deinem WordPress Admin-Bereich
|
|
2. Navigiere zu WooCommerce → Settings → Advanced → REST API
|
|
3. Erstelle einen neuen API Key
|
|
4. Kopiere Consumer Key und Consumer Secret in die App
|
|
|
|
**Hinweis:** Wenn deine Produkte öffentlich sind, kannst du die API auch ohne Authentifizierung verwenden (die Keys können leer bleiben).
|
|
|
|
### 2. Dependencies installieren
|
|
|
|
```bash
|
|
flutter pub get
|
|
```
|
|
|
|
### 3. App starten
|
|
|
|
```bash
|
|
flutter run
|
|
```
|
|
|
|
## Projektstruktur
|
|
|
|
```
|
|
lib/
|
|
├── main.dart # App-Einstiegspunkt
|
|
├── models/
|
|
│ ├── product.dart # Produkt-Modell
|
|
│ ├── user.dart # Benutzer-Modell
|
|
│ └── order.dart # Bestellungs-Modell
|
|
├── services/
|
|
│ ├── woocommerce_service.dart # WooCommerce API Service
|
|
│ ├── woocommerce_checkout_service.dart # Checkout Service
|
|
│ ├── auth_service.dart # Authentifizierungs-Service
|
|
│ └── order_service.dart # Bestellungs-Service
|
|
├── providers/
|
|
│ ├── cart_provider.dart # Warenkorb State Management (mit Persistenz)
|
|
│ └── user_provider.dart # Benutzer State Management
|
|
├── screens/
|
|
│ ├── home_screen.dart # Homepage mit Tabs
|
|
│ ├── products_screen.dart # Alle Produkte
|
|
│ ├── product_detail_screen.dart # Produktdetails
|
|
│ ├── cart_screen.dart # Warenkorb
|
|
│ ├── checkout_screen.dart # Checkout (WebView)
|
|
│ ├── login_screen.dart # Login
|
|
│ ├── orders_screen.dart # Bestellhistorie
|
|
│ └── order_detail_screen.dart # Bestelldetails
|
|
└── widgets/
|
|
└── product_card.dart # Produktkarten-Widget
|
|
```
|
|
|
|
## Login & Authentifizierung
|
|
|
|
Die App unterstützt die Anmeldung von Kunden mit ihren WooCommerce-Konten:
|
|
|
|
1. **Login**: Kunden können sich mit ihrem Benutzernamen/E-Mail und Passwort anmelden
|
|
2. **Persistente Anmeldung**: Die Anmeldung bleibt nach App-Neustart erhalten
|
|
3. **Bestellhistorie**: Eingeloggte Kunden können alle ihre Bestellungen einsehen
|
|
4. **Account-Menü**: Über das Account-Icon in der AppBar können Kunden auf ihre Bestellungen zugreifen
|
|
|
|
### WordPress JWT Auth Plugin (Optional)
|
|
|
|
Für die beste Login-Erfahrung wird empfohlen, das **JWT Authentication for WP REST API** Plugin zu installieren:
|
|
- Plugin installieren: `https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/`
|
|
- Alternativ funktioniert die App auch ohne das Plugin (verwendet dann WooCommerce API)
|
|
|
|
## Nächste Schritte
|
|
|
|
- [x] Warenkorb-Seite implementieren
|
|
- [x] Checkout-Prozess implementieren
|
|
- [x] Benutzer-Authentifizierung
|
|
- [x] Bestellhistorie
|
|
- [ ] Produktsuche
|
|
- [ ] Kategorien-Filter
|
|
- [ ] Favoriten/Wunschliste
|
|
- [ ] Push-Benachrichtigungen für Bestellstatus
|
|
|
|
## Technologien
|
|
|
|
- Flutter 3.0+
|
|
- Provider (State Management)
|
|
- HTTP (API Calls)
|
|
- Cached Network Image (Bildladen)
|
|
|