Fahrplan App mit Node.js und electron

von Lucas Zingerli für das Modul BUUx562

transport.opendata.ch

Auf transport.opendata.ch wird eine API zur Verfügung gestellt, welche Entwicklern Zugriff auf den Schweizer öV-Fahrplan in Echtzeit (sprich mit aktuellen Verspätungen, Gleisänderungen etc.) ermöglicht.

Die Daten werden per GET Befehl angefordert und werden vom Server als JSON File zurückgegeben.

GET http://transport.opendata.ch/v1/locations?query=Zug

Die obenstehende anfrage gibt folgendes zurück:

{
  "stations": [
    {
      "id": "8502204",
      "name": "Zug",
      "score": null,
      "coordinate": {
        "type": "WGS84",
        "x": 47.173702,
        "y": 8.515047
      },
      "distance": null,
      "icon": "train"
    }
  ]
}

Man erhält nun folgende Informationen: ID -> Eindeutige Nummer einer öV Haltestelle in der Schweiz, NAME -> Offizieller Name der Haltestelle, COORDINATE -> Weltkoordinaten der Haltestelle, ICON -> Art der Haltestelle (Bahnhof, Bushaltestelle etc.).

Nebst Informationen zu einer Haltestelle, kann man Abfahrtstafeln einer Haltestelle und Verbindungen zwischen zwei Haltestellen abfragen. Die Abfragen lassen sich mit diversen Parameter anpassen.

Fahrplan Applikation

Sequenzdiagramm

Nun zur Applikation: Mein Ziel war es mit Node.js, Socket.io und electron eine .exe Applikation zu erstellen, mit welcher ich eine simple Von-Nach anfrage zu einem gewünschten Zeitpunkt machen kann.

GUI der Applikation

Das Formular stellt drei Eingabefelder zur Verfügung. Von, Nach und die gewünschte Uhrzeit. Die Uhrzeit hat als type=“time“, damit der User nichts Falsches eingeben kann. Die rote Schaltfläche mit dem Doppelpfeil, welche zwischen dem Von und Nach Feld liegt dient dazu, die beiden Stationen umzukehren, wenn man den Rückweg suchen will. Die Anfrage wird mit dem Suchen Button gestartet. Nun erscheint unterhalb des Formulars ein grauer Text „Suchen…“ und der Mausanzeiger wird auf beschäftigt gesetzt. Im Hintergrund sendet der Client nun eine Anfrage an den Node.Js Server mit den Angaben aus der Suchmaske:

{ from: 'Zug', to: 'Bern', time: '12:59' }

Der Server setzt nun aus diesen Informationen die Abfrage zusammen, welche er an transport.opendata.ch sendet:

GET transport.opendata.ch/v1/connections?from=Zug&to=Bern&time=12:59

Der Server sendet nun sämtliche Informationen zu den nächsten vier Verbindungen ab dem gewünschten Zeitpunkt:

JSON Antwort

Viele Informationen werden für die Applikation nicht benötigt. Es werden unteranderem alle Informationen zu sämtlichen Umsteige- und Halteorte geliefert, wann der Zug erwartet wird (Verspätungen), Belegung der ersten und zweiten Klasse und vieles mehr. Für die Applikation werden nur folgende Daten benötigt: Abfahrt, Ankunft, Dauer und Anzal Umsteigen. Da alle Zeitpunkte im Format „2020-02-13T13:29:00+0100“ an. Da dies unbequem zu lesen ist, ändert der lokale Server die Zeiten ins Format HH:MM -> „13:29“. Die nun aufbereiteten Daten sendet der Server nun an den Client. Dieser Wechselt die graue anzeige „Suchen“ nun auf Schwarz und zeigt die beiden Stationen an. Darunter werden die nächsten Vier Verbindungen zwischen den Stationen angezeigt.

Fahrplananzeige Zug – Bern

Schwierigkeiten

Bei der Entwicklung waren die beiden grössten Stolpersteine die Mischung aus synchronen und asynchronen Aufrufen zum einen und zum anderen das erstellen der .exe Datei.

Asynchron: Daten werden übermittelt, wenn sie bereit sind und es wird auf keine Antwort gewartet. -> z.B. E-Mail
Synchron: auf jeden Aufruf folgt eine Antwort. Der Aufrufer wartet auf die Antwort und macht in der Zwischenzeit nichts anderes. -> z.B. Anruf
Während die Kommunikation zwischen dem lokalen Server und dem Client aus asynchronen Aufrufen besteht, findet die Kommunikation zu den Fahrplandaten Synchron statt. Mit einer Callback Funktion konnte da ein Turnaround geschaffen werden.

Das Problem mit der .exe Datei bestand darin, dass sowohl für die Server-Client Kommunikation (Express) und für die Desktop Applikation (Electron) ein Framework verwendet werden. Dies kann man sich in etwa so vorstellen, wie wenn man mit einem Kaffee-Pad in einer Kapselmaschine Kaffee machen möchte. Man muss sozusagen den Inhalt des Pads nehmen, es mit einer Kapsel umgeben und kann es dann verwenden.

Erweiterungsmöglichkeiten

Da die API von opendata sehr viele Informationen liefert, kann man die App noch um all diese erweitern. Beispiele:

  • Anzeige von Verspätungen und Gleiswechsel
  • Auslastung der 1. und 2. Klasse
  • Via Station hinzufügen
  • Datum hinzufügen
  • Detaillierte Reiseroute anzeigen
  • Stationen auf einer Karte (map.geo.admin.ch, Google Maps…) anzeigen

Sources

Code ohne .exe Datei -> Entpacken und Node Starten (npm start) http://bfh.lzingerli.ch/html/fahplan/fahrplan.zip

App als .exe Datei -> Entpacken und fahrplan.exe ausführen
http://bfh.lzingerli.ch/html/fahplan/fahrplan_exe.zip

Code mit Generierung als .exe Datei. -> Entpacken, yarn und electrons mit npm install installiere (im Zip wurde aus Platzgründen darauf verzichtet).
http://bfh.lzingerli.ch/html/fahplan/fahrplan_electron_ohne_electrons_yarn.zip

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.