🇬🇧
Zurück zu Referenzen
ABL Logo

ABL Configuration App

ABL GmbH

Senior React Native Developer

ABL ist ein deutscher Hersteller von Ladeinfrastruktur für Elektroautos und produziert Wallboxen sowie Ladestationen für Zuhause und Unternehmen. Die Configuration App ermöglicht Installateuren und Endnutzern das Einrichten, Konfigurieren und Verwalten von ABL Ladestationen über WiFi und Bluetooth.

Projektüberblick

Als hauptverantwortlicher Entwickler habe ich die ABL Configuration App seit den frühen Phasen aufgebaut und weiterentwickelt. Die App kommuniziert direkt mit ABL Wallboxen über lokale WiFi-Netze und Bluetooth, ermöglicht Device Setup, Firmware Updates, Netzwerk-Konfiguration und System-Management. Über 1.300+ Commits über mehrere Jahre hinweg, inklusive React Native Upgrades und kontinuierlicher Feature-Erweiterungen.

Wichtige Beiträge

Device Communication

Die zentrale Kommunikationsschicht für die Verbindung zu ABL Wallboxen via WiFi Access Point und lokale Netzwerke implementiert. Robuste Verbindungslogik mit Auto-Reconnect, Timeout-Management und Error Recovery gebaut. Die App betreibt einen lokalen HTTP Server für die Kommunikation.

QR Code Scanning

Kamera-basiertes QR-Scanning mit Vision Camera für Device Discovery und Onboarding integriert. Barcode Detection implementiert, Device-spezifische Kamera-Issues auf Samsung Geräten behandelt und Support für Ultrawide Linsen hinzugefügt. Manual Input als Fallback für unmögliche Scans.

Firmware Updates

Firmware-Update-System gebaut, das Over-the-Air Updates ermöglicht. Update Progress Tracking, Error Handling für hängende Updates und korrektes Device State Management umgesetzt.

Netzwerk-Konfiguration

Umfassende Setup-Flows für WiFi-Konfiguration, LTE/Mobile Daten und Ethernet (LAN) entwickelt. WiFi Password Management, Netzwerkwechsel und saubere Handhabung verschiedener Szenarien (AP Mode, LAN, Extender) implementiert.

Controller & Extender Management

System für Controller Devices und deren Extender (Satellite Charging Points) gebaut. Device Grouping, Extender Discovery via mDNS und Workflow für das Hinzufügen von Extendern zu Controller-Gruppen über LAN umgesetzt.

Multi-language Support

Internationalisierung mit i18next umgesetzt, inklusive Deutsch, Englisch, Französisch, Spanisch, Italienisch und Niederländisch. Integration mit Lokalise inklusive Upload/Download Scripts für Sync der Übersetzungen.

State Management

App State Architektur mit MobX für reaktives State Management gebaut. Stores für Device State, Controller Config, Connection Status und User Preferences implementiert. React Query für Server State und Caching hinzugefügt.

UI Components

Komponentenbibliothek mit NativeWind (Tailwind CSS für React Native) entwickelt. Reusable Components wie Custom Dropdowns, Loading Overlays, Modal Dialogs und Form Inputs mit React Hook Form Integration gebaut.

Error Tracking & Analytics

Sentry für Crash Reporting und Error Tracking mit Session Replay integriert. Mixpanel für Analytics hinzugefügt, um User Behavior und Connection Attempts zu tracken. Fehlerkontext und Tagging für durchsuchbare Logs umgesetzt.

React Native Upgrades

Mehrere React Native Version Upgrades (bis RN 0.75) durchgeführt. Breaking Changes behoben, native Dependencies aktualisiert, Xcode 15 Build Issues gelöst und Kompatibilität mit aktuellen iOS/Android Anforderungen gewährleistet.

Technologie-Stack

Mobile

  • React Native 0.75
  • TypeScript
  • MobX
  • React Query
  • NativeWind
  • React Navigation

Device Integration

  • Vision Camera
  • Local HTTP Server
  • WiFi Management
  • mDNS Discovery

Services

  • Sentry
  • Mixpanel
  • i18next
  • Lokalise

DevOps

  • Fastlane
  • Lefthook
  • Jest
  • MSW
  • ESLint