EDITH GPS-S Web App

Über EDITH GPS-S

Der Eisenbahndienstleister EDITH GmbH & Co. KG ist seit 2014 in der Eisenbahnbranche und bietet Eisenbahnverkehrsunternehmen in Deutschland sowie im europäischen Ausland seine Expertise an.

Mit der Digitalen Strecken­kenntnis (GPS-S) App haben Sie eine einfache und komfortable Lösung zur Verwaltung der Streckenkenntnis parat. Die App kann die Streckenkenntnis in Karten- oder detaillierter Tabellenansicht darstellen. Neue Fahrten können mit Hilfe der neuen App einfach und schnell eingegeben werden. Die Fahrten können somit leicht dokumentiert und die Streckenkenntnis der einzelnen Streckenabschnitte automatisch aktualisiert werden. Die Eingabe erfolgt entweder mit Hilfe einer interaktiven Karte, anhand vordefinierter Relationen oder der Aufzeichnung von GPS-Koordinaten.

Aufgabe

Die Neuentwicklung der App war Budget bedingt auf 3 Monate beschränkt. Neben einen Ansprechpartner beim Kunden, war ich der einzige in dem Team und war verantwortlich für das den grundlegenden Aufbau, das UI Design und die Frontend Umsetzung.

Zu Beginn hab ich mit einer Experten Befragung angefangen um wichtige Einblicke in die Denk- und Bedienweise der User der App zu erhalten. Danach wurden klickbare Mockups in Figma erstellt, um das grobe Layout und die Navigationswege zu verdeutlichen.

Es existierte schon eine rudimentäre Web App auf Vue.js 3 Basis, dennoch musste die ganze App grundlegend umgekrempelt werden um eine bessere Struktur und gute Code Qualität zu erhalten. Es wurden Anfangs das Tooling von vue-cli auf vite umgestellt und kritische Sicherheitslücken bei den verwendeten npm Paketen geschlossen. Außerdem wurde ESLint und Prettier eingebunden um einen einheitlichen Coding Style zu gewährleisten.

Für das Grafische Oberfläche wurde die UI Library PrimeVue eingebunden. Damit konnte eine schnelle Entwicklung und ein konsistentes UI sichergestellt werden. Außerdem wurden für die Speicherung von Daten ein Pinia Store inkl. aller notwendigen Actions implementiert.

Folgende Seiten bzw. Views wurden umgesetzt: Login, Dashboard, Overview, Detail, Info und Fehler Seiten.
Die einzelne Views und deren Dialoge (Create, Edit/Update, Delete) etc. wurden implementiert und während der Umsetzung-Phase sukzessive verbessert, um eine elegante, übersichtliche und leicht zu bedienende Anwendung zu erhalten.