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:
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:
- Gehe zu deinem WordPress Admin-Bereich
- Navigiere zu WooCommerce → Settings → Advanced → REST API
- Erstelle einen neuen API Key
- 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
flutter pub get
3. App starten
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:
- Login: Kunden können sich mit ihrem Benutzernamen/E-Mail und Passwort anmelden
- Persistente Anmeldung: Die Anmeldung bleibt nach App-Neustart erhalten
- Bestellhistorie: Eingeloggte Kunden können alle ihre Bestellungen einsehen
- 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
- Warenkorb-Seite implementieren
- Checkout-Prozess implementieren
- Benutzer-Authentifizierung
- 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)
Description
Languages
JavaScript
92.9%
Dart
6.4%
Shell
0.3%