WaiterOrder Frontend

Live Demo ansehen

Eine Flutter Web-Applikation zur Bestellverwaltung in Restaurants.

---

📋 Inhaltsverzeichnis

• Tech Stack
• Abhängigkeiten
• Projekt starten
• Docker Deployment
• Tests ausführen
• Code Coverage
• Projektstruktur
• Funktionsweise der App
• CI/CD Pipeline

---

🛠️ Tech Stack

Technologie	Version	Beschreibung
Flutter	3.x (stable)	Cross-Platform UI Framework
Dart	^3.9.2	Programmiersprache
Go Router	^17.0.0	Deklaratives Routing
HTTP	^1.1.0	REST API Kommunikation
Mockito	^5.6.1	Mocking für Tests
Docker	-	Containerisierung

---

📦 Abhängigkeiten

Produktions-Abhängigkeiten

dependencies:
  flutter: sdk
  cupertino_icons: ^1.0.8    # iOS-Style Icons
  http: ^1.1.0               # HTTP Client für API Calls
  go_router: ^17.0.0         # Deklaratives Routing

Entwicklungs-Abhängigkeiten

dev_dependencies:
  flutter_test: sdk           # Flutter Test Framework
  integration_test: sdk       # Integration Tests
  flutter_launcher_icons: ^0.13.1  # App Icons generieren
  flutter_lints: ^5.0.0       # Linting Regeln
  mockito: ^5.6.1             # Mocking Library
  build_runner: ^2.10.4       # Code Generation

---

🚀 Projekt starten

Voraussetzungen

• Flutter SDK (stable channel)
• Dart SDK
• Chrome Browser (für Web-Entwicklung)
• Docker (optional)

Lokale Entwicklung

# Abhängigkeiten installieren
flutter pub get

# App im Chrome starten (Standard-Backend: olli.info)
flutter run -d chrome

# App mit lokalem Backend starten
flutter run -d chrome --dart-define=BACKEND_URL=http://localhost:16181

# App auf bestimmtem Port starten
flutter run -d chrome --web-port 8080

Code formatieren & prüfen

# Code automatisch formatieren
dart format .

# Formatierung prüfen (ohne Änderung)
dart format --set-exit-if-changed --output=none .

# Linter ausführen
flutter analyze --fatal-infos

---

🐳 Docker Deployment

Schnellstart

# Mit Standard-Backend (olli.info)
docker compose up -d

# Mit lokalem Backend
BACKEND_URL=http://localhost:16181 docker compose up -d

# Mit eigenem Backend
BACKEND_URL=https://mein-backend.example.com docker compose up -d

Frontend erreichbar unter: http://localhost:16180

Docker Compose Konfiguration

services:
  frontend:
    build:
      context: .
      args:
        BACKEND_URL: ${BACKEND_URL:-https://waiterorderbackend.olli.info}

Deployment aktualisieren

git pull
docker compose down
docker compose build --no-cache
docker compose up -d

Entwicklung mit Docker (ohne lokale Flutter-Installation)

# Code formatieren
docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && dart format -o write ."

# Linter ausführen
docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter analyze"

# Tests ausführen
docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter test"

# Web Build erstellen
docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter build web"

# Build mit lokalem Backend
docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter build web --dart-define=BACKEND_URL=http://localhost:16181"

---

🧪 Tests ausführen

Unit & Widget Tests

# Alle Tests ausführen
flutter test

# Einzelne Test-Datei ausführen
flutter test test/services/api_service_test.dart

# Tests mit Verbose-Output
flutter test --reporter expanded

Integration Tests

# Integration Tests auf macOS
flutter test integration_test/ -d macos

# Integration Tests auf Linux
flutter test integration_test/ -d linux

# Integration Tests auf Windows
flutter test integration_test/ -d windows

# Integration Tests auf Chrome (plattformübergreifend)
flutter drive \
  --driver=test_driver/integration_test.dart \
  --target=integration_test/integration_test.dart \
  -d chrome

Alle Tests (Docker)

docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter test"

---

📊 Code Coverage

Coverage generieren & im Browser anzeigen

# Coverage generieren
flutter test --coverage

# HTML-Report erstellen
genhtml coverage/lcov.info -o coverage/html

# Report im Browser öffnen (betriebssystemabhängig)
open coverage/html/index.html      # macOS
xdg-open coverage/html/index.html  # Linux
start coverage/html/index.html     # Windows

Komplett-Befehl (All-in-One)

# macOS
flutter test --coverage && \
genhtml coverage/lcov.info -o coverage/html && \
open coverage/html/index.html

# Linux
flutter test --coverage && \
genhtml coverage/lcov.info -o coverage/html && \
xdg-open coverage/html/index.html

# Windows (PowerShell)
flutter test --coverage; genhtml coverage/lcov.info -o coverage/html; start coverage/html/index.html

Coverage mit Docker

docker run --rm -v "$PWD":/app -w /app ghcr.io/cirruslabs/flutter:stable \
  sh -c "flutter pub get && flutter test --coverage && \
         apt-get update -qq && apt-get install -y -qq lcov && \
         lcov --summary coverage/lcov.info && \
         genhtml coverage/lcov.info -o coverage/html --quiet"

# Danach lokal öffnen (betriebssystemabhängig)
open coverage/html/index.html      # macOS
xdg-open coverage/html/index.html  # Linux
start coverage/html/index.html     # Windows

Coverage-Report erklärt

Farbe	Bedeutung
🟢 Grün	Zeile wurde getestet
🔴 Rot	Zeile wurde NICHT getestet
🟡 Orange	Zeile wurde teilweise getestet

---

📁 Projektstruktur

frontend/
├── lib/                          # Quellcode
│   ├── main.dart                 # App-Einstiegspunkt & Routing
│   ├── main_test.dart            # Test-Einstiegspunkt (Mock-Modus)
│   ├── config/
│   │   └── api_config.dart       # Backend-URL Konfiguration
│   ├── screens/                  # UI Screens
│   │   ├── app_home_screen.dart      # Startseite (Tischauswahl)
│   │   ├── order_screen.dart         # Bestellbildschirm
│   │   ├── app_history_screen.dart   # Kellner: Offene Bestellungen
│   │   ├── admin_menu_screen.dart    # Admin: Speisekarte verwalten
│   │   ├── admin_tables_screen.dart  # Admin: Tische verwalten
│   │   ├── admin_waiters_screen.dart # Admin: Kellner verwalten
│   │   └── admin_history_screen.dart # Admin: Alle Bestellungen
│   ├── services/
│   │   ├── api_service.dart      # REST API Client & DTOs
│   │   └── mock_api_service.dart # Mock-Daten für Tests
│   ├── utils/
│   │   └── waiter_state.dart     # Globaler Kellner-Status
│   └── widgets/
│       └── shells.dart           # Navigation Shells (App/Admin)
│
├── test/                         # Unit & Widget Tests
│   ├── config_test.dart          # API Config Tests
│   ├── services/                 # Service Tests
│   │   ├── api_service_test.dart
│   │   └── api_service_http_test.dart
│   ├── widgets/                  # Widget Tests
│   └── validation/               # Validierungs-Tests
│
├── integration_test/             # Integration Tests
│   ├── integration_test.dart     # Basis Integration Tests
│   ├── workflow_test.dart        # Komplette Workflow Tests
│   ├── order_submission_test.dart # Bestellablauf Tests
│   └── admin_crud_test.dart      # Admin CRUD Tests
│
├── web/                          # Web-spezifische Dateien
├── ui_drafts/                    # Design-Assets & Logo
├── coverage/                     # Generierte Coverage-Reports
├── Dockerfile                    # Multi-Stage Docker Build
├── docker-compose.yml            # Container Orchestrierung
└── pubspec.yaml                  # Projekt-Konfiguration

---

📱 Funktionsweise der App

Architektur-Übersicht

┌─────────────────────────────────────────────────────────────┐
│                      Flutter Web App                        │
├─────────────────────────────────────────────────────────────┤
│  Screens (UI)         │  Services          │  Config        │
│  ─────────────        │  ────────          │  ──────        │
│  • AppHomeScreen      │  • ApiService      │  • ApiConfig   │
│  • OrderScreen        │  • MockApiService  │                │
│  • AdminScreens       │                    │                │
├─────────────────────────────────────────────────────────────┤
│                       Go Router                             │
│              (Deklaratives URL-basiertes Routing)           │
├─────────────────────────────────────────────────────────────┤
│                      HTTP Package                           │
│                  (REST API Kommunikation)                   │
└─────────────────────────────────────────────────────────────┘
                              │
                              ▼
                    ┌─────────────────┐
                    │  Backend API    │
                    │  (Spring Boot)  │
                    └─────────────────┘

Benutzerfluss

1. Startseite (AppHomeScreen)

   • Kellner wählt sich aus dem Dropdown aus
   • Tischübersicht wird angezeigt
   • Kellner tippt auf einen Tisch und wählt Gruppe

2. Bestellbildschirm (OrderScreen)

   • Speisekarte wird vom Backend geladen
   • Kellner fügt Artikel zur Bestellung hinzu (+/- Buttons)
   • "Bestellen" sendet Order an das Backend

3. Offene Bestellungen (AppHistoryScreen)

   • Zeigt alle offenen Bestellungen des aktuellen Kellners
   • Bestellungen können als "bezahlt" markiert werden

4. Admin-Bereich

   • Speisekarte verwalten
   • Tische verwalten
   • Kellner verwalten
   • Alle Bestellungen einsehen

Routing (Go Router)

Route	Screen	Beschreibung
/	AppHomeScreen	Startseite mit Tischübersicht
/order/:table/:group	OrderScreen	Bestellung für Tisch/Gruppe
/history	AppHistoryScreen	Offene Bestellungen
/admin	AdminMenuScreen	Speisekarten-Verwaltung
/admin/tables	AdminTablesScreen	Tisch-Verwaltung
/admin/waiters	AdminWaitersScreen	Kellner-Verwaltung
/admin/history	AdminHistoryScreen	Alle Bestellungen

Mock-Modus

Für Tests ohne Backend kann der Mock-Modus aktiviert werden:

enableMockApi();  // Aktiviert Mock-Daten
disableMockApi(); // Nutzt echtes Backend

---

🔄 CI/CD Pipeline

Mirror Repository: https://git.olli.info/Oliver/WaiterOrder_Frontend
CI Pipeline: https://ci.olli.info/repos/2
Build Status:

Pipeline-Schritte

Schritt	Befehl	Beschreibung
1. Format	dart format --set-exit-if-changed	Prüft Code-Formatierung
2. Lint	flutter analyze --fatal-infos	Statische Code-Analyse
3. Unit Tests	flutter test	Unit & Widget Tests
4. Integration Tests	Chrome + ChromeDriver	End-to-End Tests
5. Build	flutter build web --release	Produktions-Build

---

🌐 Umgebungsvariablen

Variable	Standard	Beschreibung
BACKEND_URL	https://waiterorderbackend.olli.info	Backend API URL