Teil III – Shop-System Web-App¶
Die EasySale Web-App ist eine Flutter-basierte Web-Anwendung, die es Endkunden ermöglicht, über einen Desktop-Browser Artikel zu durchsuchen und Bestellungen aufzugeben. Die Funktionen sind identisch mit der Mobile-App, jedoch für Desktop-Browser optimiert.
26. Übersicht Web-App¶
Navigation (Top-Bar)¶
Die Web-App verwendet eine fixierte obere Navigationsleiste mit folgender Anordnung (links → rechts):
| Position | Element | Beschreibung |
|---|---|---|
| Links | Kundenkarte (280px) | Zeigt den aktuellen Kunden an – klickbar zum Wechseln zwischen Kundenkonten (bei Multi-Kunden-Zugriff) |
| Mitte | App-Logo | Logo aus dem Web-App-Theme |
| Mitte-rechts | Liefertage-Icon | 📅 Öffnet den Liefertage-Slider |
| Mitte-rechts | Warenkorb-Icon | 🛒 Öffnet das Warenkorb-Seitenpanel (mit Badge für Artikelanzahl) |
| Mitte-rechts | Feed-Icon | 🔔 Öffnet das Feed-Seitenpanel (mit Badge für ungelesene Anzahl) |
| Rechts | Profil-Bereich | Benutzer-Avatar (Initialen) mit Dropdown-Menü |
Profil-Dropdown-Menü¶
Beim Klick auf den Profil-Avatar öffnet sich ein Dropdown mit folgenden Einträgen:
| Eintrag | Verfügbarkeit | Beschreibung |
|---|---|---|
| Profil | Alle | Profilseite öffnen |
| Kundendaten | Alle | Kundenstammdaten einsehen |
| Bestellungen | Alle | Bestellhistorie-Dialog öffnen |
| Benutzer verwalten | Nur Administratoren | Benutzerverwaltung für den aktuellen Kunden |
| Kundennummern / Konten | Alle | Zwischen Kundenkonten wechseln |
| Einkaufslisten | Nur Administratoren | Einkaufslisten verwalten |
| Lieferadressen | Nur Administratoren | Lieferadressen verwalten |
| Impressum | Alle | Rechtliche Informationen |
| Datenschutzerklärung | Alle | Datenschutzrichtlinie |
| AGB | Alle | Allgemeine Geschäftsbedingungen |
| Passwort ändern | Alle | Passwort-Änderungsdialog |
| Konto löschen | Alle | Konto-Löschung (mit Bestätigung) |
| Abmelden | Alle | Ausloggen |
Hinweis: Einträge, die als „Nur Administratoren" markiert sind, werden bei normalen Benutzern mit einem Schloss-Icon versehen und sind nicht klickbar.
Layout-Konzepte¶
| Konzept | Beschreibung |
|---|---|
| Seitenpanels | Warenkorb, Feed und Artikeldetails öffnen sich als von rechts einfliegende Overlay-Panels |
| Dialoge | Bestellungen, Profil und Einstellungen öffnen als modale Dialoge |
| Hover-Effekte | Buttons und Karten reagieren auf Mauszeiger mit Hover-Animationen |
| Responsives Gitter | Artikelgitter passt sich der Fensterbreite an (2–6 Spalten) |
| Maximale Breite | Inhaltsbereich ist auf ~1200px begrenzt für optimale Lesbarkeit |
27. Anmeldung & Registrierung (Web)¶
Anmeldeseite¶
Die Web-Anmeldeseite hat ein zweispaltiges Layout:
| Spalte | Inhalt |
|---|---|
| Links | Branding, Logo, optionaler Willkommenstext |
| Rechts | Anmeldeformular |
Formularfelder¶
Identisch mit der Mobile-App (E-Mail, Passwort mit Sichtbarkeits-Toggle, Passwort-vergessen-Link, Registrieren-Link), aber in einem größeren Layout mit mehr Weißraum dargestellt.
Registrierung & Genehmigung¶
Der Registrierungsprozess ist identisch mit der Mobile-App (siehe Kapitel 18): - Gleiche Formularfelder (Vorname, Nachname, E-Mail, Passwort, Sprache) - Gleiche Kundennummer-Zuordnung - Gleiche Warteseite mit Echtzeit-Status-Update
Passwort zurücksetzen¶
Identische Funktionalität wie in der Mobile-App, im Web-Layout dargestellt.
28. Artikelsuche & Sortiment (Web)¶
Seitenaufbau¶
Die Artikelseite im Web besteht aus:
- Obere Suchleiste (im Header integriert)
- Kategorie-Leiste (volle Breite, horizontal scrollbar)
- Liefertage-Slider (zwischen Kategorie-Leiste und Artikelgitter)
- Artikel-Gitter (Hauptinhalt, responsiv)
Liefertage-Slider¶
Ein interaktiver horizontaler Slider, der die verfügbaren Liefertage anzeigt:
| Element | Farbe | Beschreibung |
|---|---|---|
| Verfügbare Tage | 🟢 Grün | Tage, an denen geliefert wird |
| Feiertage | ⚪ Grau | Globale Feiertage (keine Lieferung) |
| Lieferpausen | 🔴 Rot | Kundenspezifische Lieferpausen (keine Lieferung) |
| Auswählbare Tage | Interaktiv | Klickbar zur Auswahl eines Liefertermins |
Der Slider berücksichtigt: - Globale Liefertage-Einstellungen (aus dem ERP) - Kunden-individuelle Liefertage - Betriebsferien und Feiertage - Kundenspezifische Lieferpausen
Responsive Artikel-Gitter¶
| Fensterbreite | Spaltenanzahl |
|---|---|
| ≥ 2000px | 6 Spalten |
| ≥ 1600px | 5 Spalten |
| ≥ 1200px | 4 Spalten |
| ≥ 900px | 3 Spalten |
| < 900px | 2 Spalten |
Artikel-Karten (Web)¶
Vertikale Karten mit: - Artikelbild (mit Hover-Effekt) - Artikelname - Kategorie-Badge - Variantenanzahl - Knappheits-Badge (falls aktiviert) - Preis (falls aktiviert)
Artikeldetail (Seitenpanel)¶
Beim Klick auf eine Artikelkarte öffnet sich ein Seitenpanel von rechts: - Identischer Inhalt wie auf der mobilen Artikeldetailseite - Bildergalerie, Variantenauswahl, Mengenauswahl, In-den-Warenkorb-Button - Panel kann geschlossen werden (X-Button oder Klick außerhalb)
29. Warenkorb & Bestellung (Web)¶
Warenkorb-Seitenpanel¶
Der Warenkorb öffnet sich als von rechts einfliegendes Seitenpanel beim Klick auf das Warenkorb-Icon.
Warenkorb-Seite (Vollansicht)¶
Die Warenkorb-Seite zeigt von oben nach unten:
1. Seitenkopf¶
| Button | Beschreibung |
|---|---|
| Bestellung laden | Dialog zum Nachbestellen einer früheren Bestellung |
| Einkaufsliste laden | Dialog zum Laden einer gespeicherten Einkaufsliste in den Warenkorb |
2. Mindestbestellwert-Fortschritt¶
- Fortschrittsbalken: Zeigt visuell an, wie weit der aktuelle Betrag vom Mindestbestellwert entfernt ist
- Wird nur angezeigt, wenn ein Mindestbestellwert konfiguriert ist und noch nicht erreicht
3. Lieferadresse¶
- Inline-Dropdown mit allen hinterlegten Lieferadressen
- Detail-Anzeige der ausgewählten Adresse unterhalb des Dropdowns
- Standard-Adresse ist vorausgewählt
4. Sonderwünsche¶
- Ausklappbare Sektion (standardmäßig eingeklappt)
- Großes Textfeld für Bestellnotizen
5. Warenkorb-Artikel¶
Horizontales Layout pro Artikel:
| Element | Beschreibung |
|---|---|
| Artikelbild | Vorschaubild |
| Artikelname | Bezeichnung inkl. Varianteninfo |
| Variante | Ausgewählte Variante |
| Mengensteuerung | Minus-Button, Eingabefeld, Plus-Button |
| Preis | Positionssumme (falls Preisanzeige aktiv) |
| Löschen | Inline-Löschbestätigung |
6. Fixierter Footer¶
| Position | Element | Beschreibung |
|---|---|---|
| Links | „Warenkorb leeren" | Alle Artikel entfernen (Bestätigungsdialog) |
| Mitte | Gesamtpreis | Summe aller Positionen |
| Rechts | „Jetzt bestellen" | Primärer Bestell-Button |
Checkout¶
Der Checkout-Ablauf ist identisch mit der Mobile-App (Validierung → Übermittlung → Bestätigung/Fehler).
30. Bestellhistorie (Web)¶
Bestellungs-Dialog¶
Bestellungen werden in einem modalen Dialog angezeigt (erreichbar über „Bestellungen" im Profil-Dropdown):
| Element | Beschreibung |
|---|---|
| Kopfzeile | „Bestellungen" mit Schließen-Button |
| Suchfeld | Suche nach Bestellnummer |
| Sortierung | Nach Datum (neueste zuerst) |
| Bestellliste | Kartenliste mit den gleichen Informationen wie in der Mobile-App |
Bestelldetails¶
Klick auf eine Bestellung zeigt die Detailansicht innerhalb des Dialogs: - Bestellnummer, Datum, Status-Badge - Positionstabelle (Artikel, Variante, Menge, Preis, Summe) - Lieferadresse - Gesamtsumme
Nachbestellung¶
- Nachbestellen-Button pro Bestellung
- Kopiert alle Artikel in den Warenkorb
- Nicht mehr verfügbare Artikel werden übersprungen
- Auch über den Warenkorb-Button „Bestellung laden" nutzbar
31. Feed & Benachrichtigungen (Web)¶
Feed-Seitenpanel¶
Der Feed öffnet sich als von rechts einfliegendes Overlay-Panel beim Klick auf das Feed-Icon in der Top-Bar.
Inhalt¶
Der Inhalt ist identisch mit der mobilen Feed-Seite: - Textsuche und Typfilter - Kartenliste mit Titel, Nachrichtenvorschau, Zeitstempel - Gelesen/Ungelesen-Indikator - Archiv-Toggle
Unterschied zur Mobile-Version¶
| Aspekt | Mobile | Web |
|---|---|---|
| Darstellung | Vollbildseite | Seitenpanel (Overlay) |
| Archivieren | Wisch-Geste | Klick auf Archiv-Button |
| Schließen | Tab-Wechsel | X-Button oder Klick außerhalb |
Browser-Benachrichtigungen¶
Die Web-App unterstützt Browser-Push-Benachrichtigungen:
- Werden über den WebBrowserNotificationService verwaltet
- Toast-artige Popups auf Desktop-Browsern
- Klick auf die Benachrichtigung öffnet den Feed
32. Profil & Einstellungen (Web)¶
Darstellung¶
Die Profileinstellungen werden im Web als Dialog mit Tabs oder zentrierter Inhaltsbereich dargestellt (erreichbar über das Profil-Dropdown).
Verfügbare Einstellungen¶
Alle Einstellungen sind identisch mit der Mobile-App (siehe Kapitel 25):
| Einstellung | Verfügbarkeit | Web-Darstellung |
|---|---|---|
| Sprache | Alle | Dropdown in Dialog |
| Kundennummern | Alle | Dialog mit Kundenliste |
| Lieferadressen | Nur Administratoren | Dialog mit Adressliste und Editor |
| Lieferpausen | Nur Administratoren | Dialog mit Kalender und Datum-Picker |
| Einkaufslisten | Nur Administratoren | Dialog mit Listenverwaltung |
| Benutzerverwaltung | Nur Administratoren | Dialog mit Benutzertabelle |
| Passwort ändern | Alle | Modal-Dialog |
| Konto löschen | Alle | Bestätigungsdialog |
| Abmelden | Alle | Sofortige Umleitung |
Kundenkarte (Top-Bar)¶
Ein Web-exklusives Feature: Die Kundenkarte in der oberen Navigationsleiste (280px breit, links): - Zeigt den Namen und die Nummer des aktuell ausgewählten Kunden - Bei Klick: Kunden-Wechsel-Dropdown (wenn der Benutzer mehreren Kunden zugeordnet ist) - Visuelles Feedback beim Hovern
33. Unterschiede Mobile vs. Web¶
Übersicht der Plattformunterschiede¶
| Aspekt | Mobile-App | Web-App |
|---|---|---|
| Navigation | Bottom-Navigation-Bar (7 Tabs) | Top-Bar mit Icons + Profil-Dropdown |
| Layout | Vollbild, eine Seite pro Tab | Inhaltsbereich mit fixiertem Header |
| Artikelgitter | 1–2 Spalten | 2–6 Spalten (responsive) |
| Artikeldetail | Vollbildseite mit einklappbarer Galerie | Seitenpanel von rechts |
| Warenkorb | Vollbildseite | Seitenpanel oder Vollseite |
| Bestellungen | Vollbildseite mit Pull-to-Refresh | Modaler Dialog |
| Feed | Vollbildseite mit Wisch-Gesten | Seitenpanel-Overlay |
| Profil | Scrollbare Seite | Dialog mit Tabs |
| Kundenwechsel | Über Profil → Kundennummern | Kundenkarte in Top-Bar (Klick) |
| Liefertage | In der Artikelübersicht integriert | Eigener Slider zwischen Kategorien und Artikeln |
| Scroll-Verhalten | Bouncing Physics (iOS-Stil) | Standard-Scrolling |
| Interaktion | Touch, Wisch-Gesten, Tippen | Maus, Hover, Klick |
| Benachrichtigungen | Native iOS/Android Push | Browser-Benachrichtigungen (Toast) |
| Seitenpanels | Bottom-Sheets (von unten) | Seitenpanels (von rechts) |
| Maximale Breite | Volle Bildschirmbreite | ~1200px begrenzt |
| Safe Area | Notch/Home-Indicator-Respektierung | Nicht erforderlich |
Identische Funktionen¶
Folgende Funktionen sind auf beiden Plattformen identisch implementiert: - Checkout-Ablauf und Server-seitige Preisvalidierung - Registrierungsprozess und Genehmigungsworkflow - Kundennummer-Zuordnung und Multi-Kunden-Management - Einkaufslisten-Verwaltung und Echtzeit-Synchronisierung - AGB-Akzeptanz und Versionierung - Passwort-Änderung und Konto-Löschung - Feed-Inhalte und Lesebestätigungen
Sicherheitsfeatures (beide Plattformen)¶
| Feature | Beschreibung |
|---|---|
| Session-Timeout | Automatische Abmeldung nach Inaktivität – der InactivityService überwacht Pointer-Events (Tippen, Ziehen, Mausbewegung) |
| Geräte-Integritätsprüfung | Prüfung auf kompromittierte/gerootete Geräte (Mobile) – bei Erkennung wird ein Warnbildschirm angezeigt |
| SSL Certificate Pinning | Schutz vor Man-in-the-Middle-Angriffen (Mobile) |
| URL-Validierung | Externe Links werden nur geöffnet, wenn sie HTTPS verwenden |
| Token-Rotation | JWT-Tokens werden automatisch erneuert |
Theme-Anpassung¶
Beide Plattformen laden ihr Theme aus den ERP-Einstellungen:
- Mobile: Über die „Mobile-App-Theme"-Einstellungen (Kapitel 11.17)
- Web: Über die „Web-App-Theme"-Einstellungen (Kapitel 11.18)
- Caching: Themes werden lokal zwischengespeichert (SharedPreferences) für sofortige Anzeige
- Stale-while-revalidate: Gespeichertes Theme wird sofort angezeigt, aktualisiertes Theme wird im Hintergrund nachgeladen
Ende des Benutzerhandbuchs
Bei Fragen oder Problemen wenden Sie sich bitte an den Systemadministrator oder nutzen Sie den SAM KI-Assistenten im ERP-System.