Teil II – Shop-System Mobile-App¶
Die EasySale Mobile-App ist eine native Flutter-Anwendung für iOS und Android, die es Endkunden ermöglicht, Artikel zu durchsuchen, Bestellungen aufzugeben und ihren Kunden-Bereich zu verwalten.
17. Übersicht Mobile-App¶
Navigation¶
Die Mobile-App verwendet eine Bottom-Navigation-Bar mit folgenden Hauptbereichen:
| Position | Bereich | Icon | Beschreibung |
|---|---|---|---|
| 1 | Übersicht | 🏠 | Artikelsuche und Sortiment-Browsing |
| 2 | Warenkorb | 🛒 | Aktueller Warenkorb mit Badge (Artikelanzahl) |
| 3 | Bestellungen | 📋 | Bestellhistorie und -details |
| 4 | Bestelllisten | 📝 | Gespeicherte Einkaufslisten (nur für Administratoren) |
| 5 | Feed | 🔔 | Benachrichtigungen und Systemmeldungen mit Badge (ungelesene Anzahl) |
| 6 | Profil | 👤 | Einstellungen, Adressen, Account |
| 7 | Benutzer | 👥 | Benutzerverwaltung (nur für Administratoren sichtbar) |
Besonderheiten der Navigation¶
- Badges: Warenkorb und Feed zeigen Zähler-Badges an
- Plugin-System: Die Navigation unterstützt Plugins, die an verschiedenen Positionen eingefügt werden können (nach Startseite, nach Warenkorb, nach Bestellungen, nach Feed, am Ende)
- Seitenerhaltung: Beim Tab-Wechsel bleiben Scroll-Position, geladene Bilder und Zustand erhalten (
IndexedStack) - Rollenbasiert: Die Tabs „Bestelllisten" und „Benutzer" sind nur für Shop-Administratoren sichtbar
Allgemeine UI-Konzepte¶
| Konzept | Beschreibung |
|---|---|
| Collapsing Header | Die meisten Seiten haben einen einklappbaren Kopfbereich (218–270px), der beim Scrollen zusammenfällt und die Suchleiste fixiert |
| Pull-to-Refresh | Inhalte können durch Herunterziehen aktualisiert werden |
| Bouncing Scroll | iOS-typisches Scroll-Verhalten mit Federbewegung |
| Touch-Optimiert | Große Tipp-Bereiche, Ripple-Effekte bei Berührung |
| Safe Area | Respektiert Notches, Home-Indikatoren und Displayaussparungen |
18. Anmeldung & Registrierung (Mobile)¶
Anmeldeseite¶
Die Anmeldeseite zeigt das konfigurierte App-Logo und folgende Elemente:
| Element | Beschreibung |
|---|---|
| Logo/Branding | Aus dem Mobile-App-Theme geladen (oder Standard-Logo) |
| Titel | „Anmelden" |
| E-Mail-Feld | E-Mail-Eingabe mit Validierung und Mail-Icon |
| Passwort-Feld | Verdeckte Eingabe mit Sichtbarkeits-Toggle (Augen-Icon) |
| „Passwort vergessen"-Link | Rechtsbündig, öffnet die Passwort-Zurücksetzen-Seite |
| Anmelden-Button | Primäre Aktion mit Ladezustand während der Authentifizierung |
| Registrieren-Link | „Noch kein Konto? Hier registrieren" – navigiert zur Registrierungsseite |
Registrierungsseite¶
Neue Benutzer füllen folgende Felder aus:
| Feld | Beschreibung | Pflicht |
|---|---|---|
| Vorname | Vorname des Benutzers | ✅ |
| Nachname | Nachname des Benutzers | ✅ |
| E-Mail-Adresse (wird als Login verwendet) | ✅ | |
| Passwort | Passwort mit Stärke-Indikator und Sichtbarkeits-Toggle | ✅ |
| Passwort bestätigen | Muss mit dem Passwort übereinstimmen | ✅ |
| Sprache | Dropdown-Auswahl der bevorzugten Sprache (Standard: Deutsch) | ✅ |
Nach der Registrierung wird ein Firebase-Benutzerkonto erstellt.
Kundennummer-Zuordnung¶
Nach erfolgreicher Registrierung muss der Benutzer seine Kundennummer eingeben:
- Kundennummer-Eingabeseite wird angezeigt
- Benutzer gibt die Kundennummer ein (wird gegen die Kundenstammdaten im ERP validiert)
- Bei gültiger Nummer: Zugangsanfrage wird erstellt mit Status „Ausstehend"
- Bei ungültiger Nummer: Fehlermeldung wird angezeigt
Warteseite (Genehmigung ausstehend)¶
Nach dem Absenden der Zugangsanfrage sieht der Benutzer eine Warteseite:
- Hinweistext: „Warten auf Genehmigung durch den Shop-Administrator"
- Pulsierende Animation: Visuelles Feedback, dass die Anfrage bearbeitet wird
- Echtzeit-Status-Listener: Die Seite lauscht auf Statusänderungen in Firebase
- Automatische Weiterleitung: Sobald die Anfrage genehmigt wird, wird die App automatisch neu geladen und der Benutzer erhält Zugang
Passwort zurücksetzen¶
| Element | Beschreibung |
|---|---|
| Titel | „Passwort zurücksetzen" |
| Beschreibung | Erklärt den Ablauf |
| E-Mail-Feld | E-Mail-Eingabe mit Validierung |
| Link-senden-Button | Löst den Passwort-Reset über Firebase aus |
| Bestätigungsmeldung | Snackbar: „Prüfen Sie Ihre E-Mails" |
| Zurück-Link | Zurück zur Anmeldeseite |
19. Artikelsuche & Sortiment (Mobile)¶
Seitenaufbau¶
Die Artikelseite ist die Startseite der App und besteht aus:
- Einklappbarer Header (218–270px Höhe)
- Logo-Bereich (44px, falls konfiguriert)
- Suchleiste (wird beim Scrollen fixiert)
- Kategorie-Leiste (horizontale Scroll-Liste)
- Liefertage-Anzeige (falls aktiviert)
- Artikel-Gitter (Hauptinhalt)
Suche¶
- Echtzeit-Suche: Eingabe wird mit Debounce verarbeitet (max. 100 Zeichen)
- Suchfelder: Titel und Beschreibung der Artikel
- N-Gram-Matching: Serverseitige Suche über den N-Gram-Suchindex
- Ergebnisse: Werden sofort in der Artikelliste aktualisiert
Kategoriefilter¶
- Horizontale, scrollbare Kategorieliste unterhalb der Suchleiste
- Tippen auf eine Kategorie filtert die Artikel
- Farbige Kategorie-Chips (Farbe aus ERP-Einstellungen)
- Automatisches Scrollen zum Seitenanfang bei Kategorie-Wechsel
- „Alle"-Option zum Zurücksetzen des Filters
Artikel-Gitter¶
Artikel werden als Karten im Gitterformat angezeigt (1–2 Spalten):
| Element | Beschreibung |
|---|---|
| Artikelbild | Vorschaubild oder Platzhalter |
| Artikelname | Hauptbezeichnung |
| Kategorie-Chip | Farbiger Chip mit Kategoriename |
| Variantenanzahl | Badge mit Anzahl verfügbarer Varianten |
| Knappheits-Badge | Wird angezeigt, wenn „Künstliche Knappheit" für den Artikel aktiviert ist (z. B. „Nur noch 5 verfügbar!") |
| Preis | Standardpreis (wird nur angezeigt, wenn die Preisanzeige für diesen Kunden aktiviert ist) |
Klick auf eine Artikelkarte öffnet die Artikeldetailseite.
Preisanzeige-Steuerung¶
Die Sichtbarkeit von Preisen wird auf zwei Ebenen gesteuert:
1. Globale Einstellung: showPricesInMobileApp (systemweit)
2. Kundenspezifisch: customer.showPriceInMobileApp (überschreibt die globale Einstellung)
Wenn Preise deaktiviert sind, werden keine Preisangaben in der Artikelübersicht, Artikeldetailseite, im Warenkorb und in der Bestellhistorie angezeigt.
20. Artikeldetailseite (Mobile)¶
Seitenaufbau¶
Die Artikeldetailseite öffnet sich als Vollbildansicht mit folgenden Bereichen:
Bildergalerie (Header)¶
- Erweiterbare Galerie: 320px Höhe im erweiterten Zustand, einklappbar beim Scrollen
- Wisch-Galerie: Mehrere Bilder per Wisch-Geste durchblättern
- Variantenspezifische Bilder: Beim Wechsel der Variante werden die Bilder automatisch aktualisiert
- Bildindikator: Punkte unterhalb der Galerie zeigen die Position an
Inhalt¶
| Bereich | Beschreibung |
|---|---|
| Artikelname | Große Überschrift |
| Artikelbeschreibung | Ausklappbarer Beschreibungstext (in der Sprache des Benutzers) |
| Variantenauswahl | Dropdown oder Button-Leiste zur Auswahl der Variante (Größe, Farbe usw.) – nur sichtbar, wenn der Artikel mehrere Varianten hat |
| Mengenauswahl | Increment/Decrement-Buttons (- / +) sowie direktes Textfeld zur Eingabe der Menge |
| Preis | Variantenspezifischer Preis (falls Preisanzeige aktiviert) |
| Verfügbarkeitsstatus | Lagerbestand-Anzeige oder Nachbestellungshinweis |
| In den Warenkorb | Großer primärfarbiger Button am unteren Rand |
| Dokumente | Liste angehängter Dokumente (PDFs, Datenblätter) mit sprachspezifischen Varianten und Download-Links |
Variantenauswahl im Detail¶
- Standard-Variante wird automatisch vorausgewählt
- Beim Wechsel der Variante werden aktualisiert: Preis, Bilder, Verfügbarkeit, Lagerbestand
- Nicht verfügbare Varianten werden ausgegraut
Plugin-Support¶
Die Artikeldetailseite unterstützt Plugin-Slots für kundenspezifische Zusatzinhalte, die oberhalb oder unterhalb des Standardinhalts eingefügt werden können.
21. Warenkorb & Bestellung (Mobile)¶
Warenkorb-Seite¶
Header¶
- Einklappbarer Header mit Warenkorb-Icon und Artikelanzahl
Leerer Zustand¶
- Icon + Hinweismeldung „Ihr Warenkorb ist leer"
- Handlungsaufforderung zum Artikelstöbern
Warenkorb-Artikel¶
Jeder Artikel im Warenkorb wird als Karte dargestellt:
| Element | Beschreibung |
|---|---|
| Artikelbild | Kleines Vorschaubild |
| Artikelname | Name inkl. Varianteinformation |
| Ausgewählte Variante | z. B. „Rot, Größe L" |
| Mengensteuerung | Minus-Button, Mengenfeld, Plus-Button |
| Einzelpreis | Pro Einheit (falls Preisanzeige aktiv) |
| Entfernen | Wischen oder Löschen-Button |
Lieferadresse¶
- Dropdown-Auswahl aller hinterlegten Lieferadressen
- Standard-Adresse ist vorausgewählt
- Adressen werden aus dem
CustomerDeliveryAddressBlocgeladen - Falls keine Lieferadresse vorhanden: Firmenadresse des Kunden wird verwendet
Sonderwünsche / Bestellnotizen¶
- Ausklappbares Textfeld für Kommentare und spezielle Anweisungen
- Wird als Bestellnotiz zur Bestellung gespeichert
Mindestbestellwert¶
Wenn ein Mindestbestellwert konfiguriert ist: - Fortschrittsanzeige: Zeigt, wie weit der aktuelle Betrag vom Mindestbestellwert entfernt ist - Warnung: Button ist deaktiviert, bis der Mindestbestellwert erreicht ist
Checkout-Ablauf¶
- Validierung: System prüft, ob alle Artikel noch verfügbar sind
- Prüfung nicht verfügbarer Artikel: Bei nicht mehr verfügbaren Artikeln wird eine Warnung angezeigt
- Bestellübermittlung: Bei Erfolg → automatische Weiterleitung zur Bestellhistorie
- Ladeoverlay: Während der Übermittlung wird ein Lade-Bildschirm angezeigt
- Erfolg: Bestätigungsmeldung, Warenkorb wird geleert
- Fehler: Snackbar mit Fehlermeldung wird angezeigt
Server-seitige Validierung¶
Alle Preise werden bei der Bestellerstellung serverseitig neu berechnet. Eine Manipulation der Preise auf Client-Seite wird erkannt und die Bestellung wird abgelehnt.
22. Bestellhistorie (Mobile)¶
Seitenaufbau¶
- Einklappbarer Header mit Bestellungs-Icon und Gesamtanzahl der Bestellungen
- Suchfeld: Echtzeit-Suche nach Bestellnummer
- Pull-to-Refresh: Herunterziehen zum Aktualisieren der Bestellliste
Bestellliste¶
Jede Bestellung wird als Karte dargestellt:
| Element | Beschreibung |
|---|---|
| Bestellnummer | z. B. „#12345" |
| Bestelldatum | Formatiertes Datum |
| Status-Badge | Farbkodiert: Ausstehend (🟠), Bestätigt (🔵), Versendet (🟢), Geliefert (🟢 dunkel), Storniert (🔴) |
| Gesamtbetrag | Bestellsumme (falls Preisanzeige aktiv) |
| Hervorhebung | Gerade aufgegebene Bestellungen werden ~2,5 Sekunden farblich hervorgehoben |
Bestelldetails¶
Beim Tippen auf eine Bestellung öffnet sich die Detailansicht:
| Bereich | Beschreibung |
|---|---|
| Bestellnummer | Große Überschrift |
| Kunde | Kundenname und -nummer |
| Lieferadresse | Vollständig formatierte Adresse |
| Bestellpositionen | Tabelle: Artikelname, Variante, Menge, Einzelpreis, Positionssumme |
| Bestellsumme | Zwischensumme, Rabatt, Versandkosten, Gesamtbetrag |
| Status | Aktueller Bestellstatus |
Nachbestellung¶
- Nachbestellen-Button: Kopiert alle Artikel der Bestellung in den aktuellen Warenkorb
- Mengen und Varianten werden übernommen
- Nicht mehr verfügbare Artikel werden übersprungen
23. Feed & Benachrichtigungen (Mobile)¶
Feed-Seite¶
- Einklappbarer Header mit Feed-Icon
- Badge: Zeigt die Anzahl ungelesener Einträge in der Navigation
Suche & Filter¶
| Filter | Beschreibung |
|---|---|
| Textsuche | Durchsucht Titel und Nachrichteninhalt |
| Typfilter-Chips | Filterung nach Feed-Eintragstyp (Push, In-App, Dokument, System) |
| Archiv-Toggle | Archivierte Einträge ein-/ausblenden |
Feed-Karten¶
Jede Benachrichtigung wird als Karte dargestellt:
| Element | Beschreibung |
|---|---|
| Typ-Icon | Kanalspezifisches Symbol (Glocke, Sprechblase, Dokument, System) |
| Titel | Fettgedruckt |
| Nachrichtentext | Vorschau des Inhalts |
| Zeitstempel | Relative oder absolute Zeitangabe |
| Gelesen/Ungelesen | Visueller Punkt-Indikator für ungelesene Einträge |
Aktionen¶
| Aktion | Beschreibung |
|---|---|
| Tippen | Markiert den Eintrag als gelesen und zeigt den vollständigen Inhalt |
| Wischen (rechts → links) | Archiviert den Eintrag (animierter Hintergrund mit Icon) |
| Automatisches Lesen | Beim Verlassen der Feed-Seite werden alle sichtbaren Einträge als gelesen markiert |
Push-Benachrichtigungen¶
- Vom ERP gesendete Push-Benachrichtigungen erscheinen als native iOS/Android-Benachrichtigungen
- Tippen auf die Benachrichtigung öffnet die App direkt im Feed
24. Einkaufslisten (Mobile)¶
Nur für Shop-Administratoren verfügbar (siehe Kapitel 2: Rollen & Berechtigungen)
Übersicht¶
Die Einkaufslisten-Seite zeigt alle gespeicherten Listen des aktuellen Kunden.
Funktionen¶
| Funktion | Beschreibung |
|---|---|
| Liste erstellen | Neue Einkaufsliste mit Name anlegen |
| Listendetails anzeigen | Tippen auf eine Liste zeigt alle enthaltenen Artikel |
| Aus Liste bestellen | Alle Artikel einer Liste in den Warenkorb laden |
| Artikel zur Liste hinzufügen | Aus dem Artikelkatalog Artikel auswählen |
| Artikel entfernen | Einzelne Positionen aus der Liste löschen |
| Mengen anpassen | Bestellmengen pro Position ändern |
| Liste bearbeiten | Name und Beschreibung ändern |
| Liste löschen | Gesamte Liste entfernen (Bestätigungsdialog) |
Einkaufslisten-Detail¶
Jede Position zeigt: - Artikelname und -nummer - Ausgewählte Variante - Menge - Kommentar (editierbar)
Hinweis: Einkaufslisten werden zwischen Mobile-App und ERP in Echtzeit synchronisiert. Änderungen, die im ERP vorgenommen werden, sind sofort in der App sichtbar und umgekehrt.
25. Profil & Einstellungen (Mobile)¶
Seitenaufbau¶
- Einklappbarer Header mit Profil-Icon und Benutzerinitialen
- Scrollbarer Inhalt mit mehreren Sektionen
Sektion 1: Einstellungen¶
Sprache¶
- Dropdown-Auswahl der Sprache (Deutsch, Englisch und weitere)
- Ändert die gesamte App-Oberfläche und die Artikelbeschreibungen
- Wird im Benutzerprofil gespeichert
Kundennummern (Multi-Kunden-Zugriff)¶
Benutzer, die mehreren Kundenkonten zugeordnet sind, können hier zwischen Konten wechseln:
| Element | Beschreibung |
|---|---|
| Genehmigte Kunden | Liste aller Kundenkonten, zu denen der Benutzer Zugang hat |
| Aktiver Kunde | Hervorgehobener aktueller Kunde |
| Ausstehende Anfragen | Anfragen, die noch auf Genehmigung warten (mit Status-Anzeige) |
| Neuen Zugang anfragen | Button zum Eingeben einer weiteren Kundennummer |
| Anfrage abbrechen | Ausstehende Anfrage zurückziehen |
Lieferadressen (nur für Administratoren)¶
- Liste aller hinterlegten Lieferadressen mit Standard-Markierung
- Neue Adresse anlegen: Formular mit Straße, Hausnummer, PLZ, Ort, Land, Standard-Toggle
- Adresse bearbeiten: Bestehende Adresse ändern
- Adresse löschen: Adresse entfernen (Bestätigung)
- Als Standard setzen: Radio-Button zur Auswahl der primären Lieferadresse
Lieferpausen (nur für Administratoren)¶
- Kalenderansicht: Zeigt Zeiträume, in denen keine Lieferung gewünscht ist
- Lieferpause hinzufügen: Datumsbereichsauswahl (Von–Bis)
- Lieferpause bearbeiten / löschen: Management bestehender Pausen
- Berücksichtigt globale Feiertage aus den Systemeinstellungen
Benutzerverwaltung (nur für Administratoren)¶
- Aktuelle Rolle des angemeldeten Benutzers anzeigen
- Ausstehende Registrierungen genehmigen oder ablehnen
- Benutzer entfernen aus dem Kundenkonto
Sektion 2: Rechtliches¶
Links zu den rechtlichen Seiten (werden aus den Systemeinstellungen geladen und im Browser geöffnet):
| Eintrag | Beschreibung |
|---|---|
| Impressum | Impressumsseite des Betreibers |
| Datenschutzerklärung | Datenschutzrichtlinie |
| AGB | Allgemeine Geschäftsbedingungen |
Sektion 3: Account¶
| Aktion | Beschreibung |
|---|---|
| Passwort ändern | Bottom-Sheet mit: Aktuelles Passwort, Neues Passwort (mit Stärke-Indikator), Passwort bestätigen |
| Konto löschen | Bestätigungsdialog mit Warnhinweis → Löscht das Firebase-Konto und alle zugehörigen Daten |
| Abmelden | Sofortige Abmeldung → Zurück zur Anmeldeseite |
Plugin-Support¶
Die Profilseite unterstützt Plugin-Sektionen, die von kundenspezifischen Erweiterungen eingefügt werden können. Plugins können gruppiert werden (mit eigenen Sektionsüberschriften).