Golmed - Medizintechnik Shop App

Golmed GmbH ist ein spezialisierter B2B-Shop für Medizintechnik und Krankenhausbedarf. Die entwickelte App bietet ein verbessertes, cleanes Einkaufserlebnis für professionelle Kunden mit durchdachter Offline Funktionalität und intelligenter Produktsuche.

Hier gehts zum Shop: www.golmed-shop.de

Die App verbindet sich mit dem bestehenden Magento 2 Webshop und bietet eine moderne, tablet-optimierte Benutzeroberfläche für den medizinischen Fachhandel.

Die Herausforderung: Offline-First im Krankenhaus-Alltag

Die Ausgangssituation war klar definiert: Golmed Kunden, die aus Ärzte, Krankenschwestern und Pflegepersonal in ganz Deutschland bestehen, benötigten dringend eine Lösung für ein alltägliches Problem. Eine Krankenschwester steht im Gerätelager im Keller, braucht ein Ersatzkabel für ein Beatmungsgerät, aber ohne Internet ist der Webshop nicht verfügbar. Sie muss hochlaufen, anrufen und verliert dabei wertvolle Zeit.

• Untergeschosse und Kellerräume: Gerätelager und Archive, wo oft die kritischen Ersatzteile liegen, haben praktisch keinen Mobilfunkempfang
• Strahlungsgeschützte Bereiche: Räume mit spezieller Abschirmung, die jegliche Funksignale blockieren
• Überlastete Krankenhausnetze: WLAN-Infrastruktur, die unter der Last von hunderten Geräten zusammenbricht

Die Projektanforderung: Eine vollständig offline-fähige App mit dem kompletten Produktkatalog – über 900 Medizintechnik-Artikel mit hochauflösenden Bildern, technischen Spezifikationen und Verfügbarkeitsinformationen. Immer verfügbar, unabhängig von der Netzwerkverbindung, egal ob im Keller, im OP-Vorbereitungsraum oder unterwegs.

Eine technische Herausforderung, die direkt die Arbeit der Mitarbeiter und Ärzten verbessern würde.

Features

Shopping-Erlebnis

• Cleanes, modernes Design: Überarbeitete Benutzeroberfläche, die am Webshop-Design angelehnt ist
• Tablet Optimierung: Vollständig optimiert für Tablet Nutzung im professionellen Umfeld
• Produktkatalog: Kompletter Zugriff auf Medizintechnik, Krankenhausbedarf und Notfallmedizin
• QR-Code-Scanner: Schnelle Produktsuche durch Scannen von Produktcodes
• Erweiterte Suche: Intelligente Filterung nach Kategorien, Herstellern und Produkteigenschaften

Offline-Funktionalität

• Vollständiger Produktdownload: Komplette Produktpalette inklusive hochauflösender Bilder lokal verfügbar
• Download-Management: Übersicht des Download-Prozesses
• Globale Progress-Anzeige: Systemweite Fortschrittsanzeige für laufende Downloads
• Offline-Katalog: Vollständiges Browsen ohne Internetverbindung
• Sync-Management: Intelligente Synchronisierung bei Netzwerkverfügbarkeit

B2B-Features

• Schnellbestellung: Optimierte Workflows für Wiederholungsbestellungen
• Bestellhistorie: Übersicht über frühere Bestellungen
• Favoriten: Speichern häufig benötigter Produkte
• Verfügbarkeitsanzeige: Echtzeit-Lagerbestand

Technische Umsetzung

Mobile App

Die App wurde mit Flutter entwickelt, um eine konsistente Experience auf iOS und Android sowie optimale Tablet-Unterstützung zu gewährleisten.

State Management mit BLoC Pattern

Die App nutzt das BLoC (Business Logic Component) Pattern für ein strukturiertes, testbares State Management:

• BLoC Layer: Verwaltet den Anwendungszustand und Business Logic

  • Produkt-Katalog-BLoC für Navigation und Filterung
  • Download-BLoC für den globalen Download-Status
  • Cart-BLoC für Warenkorbverwaltung
  • Auth-BLoC für Authentifizierung und Session-Management
  • Offline-Sync-BLoC für Daten-Synchronisierung

• Repository Layer: Abstrahiert Datenquellen und koordiniert zwischen lokalem Cache und API

  • Entscheidet automatisch zwischen lokalen und Remote-Daten
  • Implementiert Caching-Strategien
  • Handhabt Offline/Online-Transitionen
  • Koordiniert Sync-Operationen

• Data Provider Layer: Direkte Kommunikation mit APIs und lokaler Datenbank

  • GraphQL Data Provider für Produktdaten
  • REST API Data Provider für Checkout und Bestellungen
  • Local Database Provider für Offline-Daten
  • Image Cache Provider für Produktbilder

Workflow-Beispiel: Produktliste laden

UI → ProductBloc → ProductRepository → [Online? GraphQLProvider : LocalProvider] → Repository → BLoC → UI

Dieser dreischichtige Ansatz (BLoC → Repository → Data Provider) ermöglicht:

• Testbarkeit: Jede Schicht kann unabhängig getestet werden
• Flexibilität: Einfacher Wechsel zwischen Datenquellen
• Wartbarkeit: Klare Trennung der Verantwortlichkeiten
• Offline-First: Automatisches Fallback auf lokale Daten
• Reaktive UI: Stream-basierte State-Updates für flüssige UX

Offline-First Architektur

• Lokale Datenbank für Produktinformationen
• Caching-Strategien für Bilder und Medien
• Queue-basiertes Sync-System für Bestellungen

Download-System

Das Download-System ist ein Kernfeature der App und wurde besonders sorgfältig implementiert:

• Chunked Downloads: Effizientes Herunterladen großer Produktkataloge in Segmenten
• Progress-Tracking: Detaillierte Fortschrittsinformationen mit Prozentangaben
• Globale Progress-Anzeige: Systemweite Benachrichtigung über laufende Downloads

QR-Code Integration

• Schneller Kamera basierter Scanner
• Unterstützung verschiedener Barcode und QR-Code Formate
• Direkte Produktsuche nach Scan

Backend-Integration (Magento 2)

Die App kommuniziert mit dem bestehenden Magento 2 Shop über moderne API-Standards.

GraphQL API

• Effiziente Datenabfragen mit GraphQL
• Optimierte Queries für minimalen Datentransfer
• Batch-Loading für Produktdaten

REST API

• Ergänzende REST Endpoints für spezifische Operationen
• Authentifizierung und Session-Management

Projekt-Architektur

Die App folgt einer Clean Architecture mit klarer Trennung der Verantwortlichkeiten:

1. Presentation Layer: UI-Komponenten und Screens
2. Business Logic Layer: State Management und Use Cases
3. Data Layer: API-Integration und lokale Datenhaltung

Diese Architektur ermöglicht:

• Testbare und wartbare Codebasis
• Unabhängige Entwicklung einzelner Features
• Einfache Erweiterbarkeit
• Klare Datenflüsse

Entwicklungs-Highlights

Download System mit globaler Progress-Anzeige – worauf ich besonders stolz bin

Das Download System war die größte technische Herausforderung des Projekts, und das Feature, auf das ich am meisten stolz bin. 900+ Produkte mit hochauflösenden Bildern offline verfügbar zu machen, erforderte eine durchdachte Architektur:

• Globale Sichtbarkeit: Progress-Anzeige ist von überall in der App sichtbar
• Detailliertes Tracking: Anzahl heruntergeladener Produkte, verbleibende Items
• Fehlerbehandlung: Robuste Retry-Logik bei Netzwerkproblemen

Moderne E-Commerce-Experience

• Cleanes Design mit Fokus auf Usability
• Intuitive Navigation durch große Produktkataloge
• Schnelle Produktsuche mit QR-Code
• Professionelle UX für B2B-Kunden

Cross-Platform Konsistenz

• Einheitliches Design auf iOS und Android
• Native Performance auf beiden Plattformen

Tech Stack

Mobile App:

• Flutter
• BLoC Pattern (flutter_bloc)
• GraphQL Client
• REST API Client
• QR Code Scanner
• Local Database (SQLite/Hive)

Backend:

• Magento 2
• GraphQL API
• REST API

Besonderheiten

Offline-First als kritische Anforderung

Die Offline-Funktionalität ist nicht nur ein Feature, sondern eine Notwendigkeit im Krankenhaus-Alltag:

Die Realität im Krankenhaus:

• Ärzte und Pflegepersonal arbeiten oft in Kellerräumen, Archiven und abgeschirmten Bereichen
• Strahlungsgeschützte Räume blockieren Mobilfunk- und WLAN-Signale

Die technische Lösung:

• Vollständiger Produktkatalog mit über 900 Artikeln offline verfügbar
• Hochauflösende Produktbilder für detaillierte Ansicht
• Intelligentes Download-Management mit globaler Progress-Anzeige
• Automatische Synchronisierung bei Netzwerkverfügbarkeit

Der Impact: Das medizinische Personal kann jederzeit und überall auf den kompletten Produktkatalog zugreifen – ob im OP-Vorbereitungsraum, im Gerätelager oder während der Patientenversorgung.

QR-Code-Integration

Medizintechnik-Produkte haben oft komplexe Artikelnummern. Der QR-Scanner ermöglicht schnelles Auffinden von Ersatzteilen und Zubehör direkt am Gerät.