Wir nutzen für die Berechnung der Route einen kostenlosen Demoserver, der nicht für Production geeignet ist. Dieser ist nicht hochverfügbar und kann zeitweise ausfallen.
Entwicklung der Anwendung im Rahmen der Vorlesung Web Engineering.
Ziel der Aufgabenstellung war die Entwicklung einer Web Applikation in Form einer PWA, welche eine Karte darstellt, auf welcher der Nutzer seine Position einsehen kann. Der Nutzer kann dann Orte suchen, zu welchen er eine Navigation starten und einen Auszug des dazugehörigen Wikipedia-Artikels einsehen kann.
- React/JSX
- Framework7
- Leaflet
- Wikipedia API
- Karte im Vollbildformat mit der Möglichkeit, diese zu vergrößern/verkleinern/verschieben
- Ansicht des eigenen Standorts (bei deaktivierten Standortdiensten der Standort der DHBW)
- Anzeige des Zielstandorts mit Route (wenn angefordert)
- Zentrale Suchleiste mit Verlauf zur Suche
- nach Orten, z.B.
Berlin,Hamburg, ... - nach Adressen, z.B.
Fallenbrunnen 2, 88045 Friedrichshafen, ... - und nach Geokoordinaten, z.B.
49.79899569636492, 9.939880371093752. - Der Verlauf wird außerdem lokal gesichert und die Suche lässt sich offline wiederholen.
- nach Orten, z.B.
- Nach Eingabe einer Suche öffnet sich links eine Side-Card mit Informationen zu dem Ort und der Möglichkeit die Route dorthin zu starten oder die dazugehörige Wikipedia-Seite aufzurufen
- Starten einer Route öffnet rechte Side-Card mit einer Routen-Beschreibung
- Alle Side-Cards können durch Klicken auf die Karte verlassen werden und über folgende Buttons wieder eingeblendet werden
- Benachrichtigungen können über den "Glocke"-Button deaktiviert/aktiviert werden und erinnern den Nutzer, wenn nötig, in regelmäßigen Abständen seinen Standort dauerhaft zu aktivieren
- Folgende Funktionalitäten sind am oberen Bildschirmrand über Buttons gegeben (von links nach rechts):
- Plus/Minus-Button: Vergrößern und Verkleinern der Karte
- Lupen-Button: Suchen des eingegebenen Standortes (und Öffnen der dazugehörigen Informationen mit Anzeige auf der Karte)
- Folgende Funktionalitäten sind am unteren Bildschirmrand über Buttons gegeben (von links nach rechts):
- Info-Button: Information zum Zielstandort
- Pfeil-Button: Informationen zum aktuellen Standort
- Zentrieren-Button: Fokus der Karte auf aktuelle Position/Route und Aktualisieren des eigenen Standortes
- Glocke-Button: (De)Aktivieren von Benachrichtigungen
- Route-Button: Einblenden der aktuellen Wegbeschreibung
- Repository klonen
- Dependencies installieren
npm install - Development Server starten
npm start - Seite im Browser öffnen
STRG + F5
Alle Entwickler sind Studenten des TIT19-Kurses der DHBW Ravensburg/Campus Friedrichshafen
- Manuel Bonke (@m4nu3l-00)
- Greta Buckenmaier (@greta918)
- Jakob Däubel (@derjakob272)
- Mirijam Flüs (@miri-f-05)
- Moritz Gärtner (@Sarius32)
- Julius Henle (@JuliusH4)
- Niklas Leinz (@corusm)
- Gary Lude (@Kiodok)
- Lars Strölin (@M4RD3K)
- Finn Weiler (Scrum Master) (@finnweiler)
- Kai Weinmann (@kai66w)
- Julian Basri Yaman (Scrum Master) (@julianYaman)
- Es gibt in der Leaflet Routing Machine Bibliothek eine known Issue, die gelegentlich eine Fehlermeldung in der Konsole produziert. Das schränkt die Funktion unserer Anwendung allerdings nicht weiter ein.
- Folgende Browser unterstützen keine Web Push API:
- Safari
- Safari on iOS
- WebView Android
- Internet Explorer
- Selbige Browser unterstützen auch nicht das automatische Anpassen der aktuellen Position nach der Vergabe der Standort-Berechtigung. (Ausgenommen hiervon ist die erste Anpassung, die immer funktioniert.)