WebApp: Train Time Tracker

Mit meinem Weekend-Projekt Train Time Tracker beantworte ich mir ab sofort selber die Frage: „Wann kommt die nächste Bahn?

Oberflächendesign: Simple and Clean

Auf nur einer Bildschirmseite wird angezeigt, welche Bahn in wieviel Minuten nach Altona oder zur Sternschanze von meiner Station Hamburg-Langenfelde abfährt. Meine These ist, dass man in der Stadt immer wieder die selben Strecken fährt. Also zum Beispiel von der Arbeit nach Hause oder von zu Hause zum Einkaufen usw.

Für das Interface habe ich so die sichtbaren Informationen so lange reduziert, bis mein Testumfeld die Visualisierung noch verstanden hat. Verspätungen sofort in die Zeiten rein gerechnet und nicht mit „+2“ oder „+1“ dargestellt. Ich will mir die Fahrpläne nicht merken müssen und mit der App spielt das nun auch keine Rolle mehr für mich.

Der kleine Pfeil von der Linie zum Stationsnamen hat dafür gesorgt, dass klar ist, was die Elemente bedeuten. Das Wort „Minuten“ hinter dem Countdown hat auch klarer gemacht, das dies die Abfahrtszeit ist. Die Überschrift macht nun auch klar, dass die Web-App (noch) nicht weiß, wo sie gerade ist und die Ergebnisse nur für diesen einen Ort gelten.

Wichtig war mir, dass ich ohne Scrollen alle Informationen direkt auf dem Bildschirm des iPhone 7 unterbringen kann.

Die Daten werden von bahn.de geholt und neu visualisiert
Die Daten werden von bahn.de geholt und neu visualisiert

Woher kommen die Daten?

Ich habe es nicht hinbekommen, eine API zu finden, welche mir Echtzeitdaten zur Verfügung stellt. Deswegen scrape ich einfach die mobile.bahn.de Seite.

Mein Script macht also nicht viel mehr als das Formular auf mobile.bahn.de auszufüllen, abzusenden und die Daten dann visuell etwas anders darzustellen.

Performance: instantaneously

Durch das Scrapen ist der Vorgang sehr  langsam und dauert bis zu 20 Sekunden. Deswegen aggregiere ich die Daten vor und das Frontend liest direkt die fertige json-Datei ein. Dadurch wird die Web-App extrem schnell geladen.

Ich will das auch!

Ihr findet das „Wann kommt die Bahn„-Projekt auf GitHub.
Die von mir verwendete Live-Version liegt hier.

8 Antworten auf „WebApp: Train Time Tracker“

  1. Sehr schöne Idee, vor allem die Möglichkeit, für bestimmte Stationen Links auf dem Homescreen zu erstellen. Nicht ganz so minimalistisch, aber ein bisschen in dieselbe Richtung geht die Navigations-App Transit. Dort werden zum aktuellen Standort die Abfahrtszeiten aller sich in der Nähe befindenden Stationen dargestellt.

    Screenshot (ich hoffe, Bilder funktionieren hier :D):




    0
    1. Ja, kenne ich und habe ich auch genutzt. Meine Webapp geht aber noch einen Schritt weiter: Ich lege Start und Ziel schon fest. Denn hier in Hamburg fahren an Stationen wie Sternschanze teilweise über 10 verschiedene Bahnen los. Ich weiß dann aber nicht, ob sie über mein Ziel fahren.

      Ich habe nun drei Instanzen der Webapp bei mir auf dem Homescreen vom iPhone mit fest definierten Routen. Siehe Video oben im Artikel.




      0
    1. Nein ich fragte mich nur, ob die ÖV Anbieter bzg. Apps nicht froh sein sollten um ein breites Angebot um ihre Dienste. Ich finde es bei meinem Nexus 6P immer sehr nützlich dass mir Google gleich vor Ort über Verspätungen und Anschlüsse informiert, weshalb ich gar nie den Bedarf für so eine App hatte. Dort ist meines Erachtens Google sowieso Apple um Welten voraus, weshalb es mich erstaunt, dass du als solche Google Fan immer noch in iPhone hast. Denn die Google Dienste sind auf dem Android der Hammer. Er merkt sich auch wo ich mein Auto parkiert habe usw. Bzg. Ortsgebundene Informationen macht niemand Google etwas vor. Und das ganze musste ich nicht konfigurieren, es ist einfach ab Werk schon auf meine Bedürfnisse eingestellt.




      0
    2. Vielleicht habe ich schlecht erklärt was diese App macht: sie zeigt von einem festen Abfahrtsort die nächsten Bahnen zu einem anderen festen Ort an. Man muss nicht einstellen wo man hin will weil das fest drin ist.




      0

Schreibe einen Kommentar

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

Diese Website zeigt Benutzerbilder über gravatar.com an.