Elektrotechnik Jerabek
Digitale Dienst­planung mit Vue

Die Ausgangs­situation

Die Elektrotechnik Jerabek GmbH stand vor einer typischen Heraus­forderung vieler Hand­werks­betriebe: Die Mit­arbeiter­einteilung erfolgte manuell auf einem White­board in der Firma. Was zunächst über­sichtlich erscheint, führt in der Praxis zu zahl­reichen Problemen:

• Mit­arbeiter*innen müssen physisch ins Büro kommen, um ihre Ein­teilung zu sehen
• Kurz­fristige Än­derungen erreichen nicht alle Betei­ligten recht­zeitig
• Die Plan­barkeit für private Ter­mine ist ein­geschränkt
• Kein digitales Archiv ver­gangener Ein­teilungen
• Zeit­aufwändige manu­elle Nach­bearbeitung und Doku­mentation

Gesucht wurde eine flexible, digitale Dienst­plan-Lösung, die sowohl für die Dis­position als auch für alle Mit­arbeiter*innen ein­fach zu­gänglich ist. Die Anfor­derung: Eine Web­anwendung ohne Installation, mit Echt­zeit-Syn­chroni­sation und mini­malem War­tungs­aufwand.

Die Lösung

Moderne Single Page Application

Wir haben für ETJ eine schlanke Web­applikation entwickelt, die auf Vue 3 und Type­Script basiert. Die moderne Frontend-Entwicklung mit Vue 3 ermöglicht eine reaktive, responsive Benutzer­ober­fläche, die sich automatisch an verschiedene End­geräte anpasst – vom Desktop-PC bis zum Tablet.

Für die State Management-Lösung haben wir auf Pinia gesetzt, um eine zen­trale Daten­ver­waltung zu gewähr­leisten. Das Ergebnis: Alle Änderungen werden sofort sicht­bar, ohne dass die Seite neu geladen werden muss. Mit­arbeiter*innen können ihre Ein­teilung jeder­zeit von zu Hause oder unter­wegs ein­sehen.

Schlankes Backend mit PHP

Das Backend wurde als REST API mit PHP entwickelt. Besonderheit: Statt einer traditionellen Daten­bank kommt eine JSON-basierte Daten­speicherung zum Ein­satz. Diese Architektur­­entscheidung sorgt für maximale Flexibi­lität und vereinfacht die War­tung erheb­lich.

Um Daten­konflikte bei gleich­zeitigen Zu­griffen mehrerer Nutzer*innen zu ver­meiden, haben wir ein eigenes File-Locking-System implementiert. Dieses verhindert, dass konkurrierende Schreib­vorgänge die Daten­integrität gefährden.

Intelligentes Polling-System

Ein besonderes Feature ist das effi­ziente Polling-System: Die Anwendung prüft alle 30 Sekunden, ob sich Daten geändert haben – ohne dabei un­nötig Server­ressourcen zu ver­brauchen. Mit einem inte­grierten Circuit-Breaker-Pattern werden Fehler­situationen ab­gefangen und das System bleibt auch bei tempo­rären Netz­werk­problemen stabil.

Technische Highlights

KI-unterstützte Entwicklung

Das gesamte Projekt wurde mit Unter­stützung modernster KI-Tools entwickelt. GitHub Copilot und andere KI-Assistenten haben nicht nur die Ent­wicklungs­­geschwindigkeit erhöht, sondern auch zu einem saubereren, besser dokumentierten Code beigetragen. Die KI-Unter­stützung ermöglichte es, Best Practices konse­quent umzu­setzen und kom­plexe Patterns wie das Circuit-Breaker-Pattern oder die sequenzielle Task-Update-Queue effizient zu implementieren.

Performance-Optimierung

Besonderes Augenmerk wurde auf die Per­formance gelegt:

• Responsive Kalender mit dynami­scher Größen­anpassung durch Custom Composables
• Effi­ziente Daten­synchronisation durch HEAD-Requests statt voll­ständiger Daten­abfragen
• Optimierte Build-Prozesse mit Vite für mini­male Lade­zeiten
• Vermeidung von Race Conditions durch sequen­zielle Update-Queues

Datensynchronisation ohne Datenbank

Der Ver­zicht auf eine tradi­tionelle MySQL-Daten­bank mag unge­wöhnlich erscheinen, bietet in diesem Anwendungs­fall aber ent­scheidende Vor­teile: Die gesamte Daten­struktur ist transparent in einer JSON-Datei ab­gebildet, Back­ups sind trivial und die War­tung extrem ver­einfacht. Das implementierte Locking-System garan­tiert dabei die Daten­konsistenz.

Offline-fähige Session­verwaltung

Durch die intelligente Nutzung von Session­Storage bleibt die Benutzer*innen-Sitzung auch bei kurz­zeitigen Verbindungs­abbrüchen erhalten. Die Anwendung kann so nahtlos weiter­genutzt werden.

Member Task Ownership Tracking

Ein durch­dachtes Ownership-Konzept unter­scheidet zwischen dem/der Auf­gaben­eigentümer*in und der Person, die die Auf­gabe erstellt hat. Diese Trennung ermög­licht es, auch nach dem Aus­scheiden von Mit­arbeiter*innen nach­voll­ziehen zu können, wer welche Ein­teilung vor­genommen hat.

Fazit & Ausblick

Mit dem ETJ Einteilungs-System wurde die Elektro­technik Jerabek vom White­board ins digitale Zeit­alter gebracht. Die Zeit­ersparnis ist erheb­lich: Was früher mit manu­ellem Ein­tragen, Tele­fonaten bei Än­derungen und Nach­bearbeitung verbunden war, läuft jetzt voll­ständig digital ab. Mit­arbeiter*innen haben jeder­zeit Zugriff auf ihre aktu­elle Ein­teilung, Dis­ponenten können flexibel um­planen und alle Betei­ligten sind sofort infor­miert.

Die Kombi­nation aus modernen Frontend-Techno­logien, einem schlanken Backend und durch­dachten UX-Patterns führt zu einer Anwendung, die intuitiv zu bedienen ist und gleich­zeitig alle Anfor­derungen an Zuver­lässigkeit und Daten­sicherheit erfüllt.

Die KI-unter­stützte Ent­wicklung hat gezeigt, wie moderne Entwicklungs­werk­zeuge die Effi­zienz steigern und gleich­zeitig die Code-Qualität ver­bessern können. Das Projekt dient als Best-Practice-Beispiel für den Ein­satz von Vue 3, Type­Script und KI-Tools in der modernen Web­entwicklung.

Durch die modu­lare Archi­tektur ist das System problem­los erweiter­bar – sei es durch zusätz­liche Funktionen wie Push-Benach­richtigungen, Mobile Apps, erweiterte Report­ing-Funktionen oder die Integration von Zeit­erfassungs­systemen via Schnittstellen.