Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

HTML5 Grundkurs

Positionsbestimmung (Geolocation)

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
"Location Based Services" bieten Dienstleistungen an, die sich an der aktuellen Position des Benutzers orientieren. Wichtiger Bestandteil im Webumfeld ist eine JavaScript-Schnittstelle, die unter anderem Zugriff auf den aktuellen Längen- und Breitengrad bietet, sofern das Gerät das unterstützt.
08:20

Transkript

Ein gewisser Trend für Webanwendungen, gerade für mobile Webanwendungen, das sind Webanwendungen, die auf mobilen Endgeräten aufgerufen werden, sind LBS (Location Based Services), also irgendwelche Dienste oder auch Dienstleistungen, die abhängen von dem Ordner, in dem sich Benutzer gerade befinden, beispielsweise, dass eine Anwendung bei einer Firma, die mehrere Filialen hat, anzeigt, wo die nächste Filiale ist, sich vielleicht sogar mit dem roten Plan des Geräts verbindet, oder allgemeine Informationen in der Nähe sucht - Restaurants in der Nähe bei einer Bewertungsplattform beispielsweise etc. Und dieses Feature gibt es jetzt auch rund um HTML5. Es ist eine eigene Spezifikation, hat also mit HTML5 per Sehen nichts zu tun. Das schöne daran ist aber, die Spezifikation ist bereits final, fertig und damit stabil. Also erzeugen wir eine neue Datei, und ich nenne sie "Geolocation", weil weil dieses Feature heißt auch "Geolocation". Und wir arbeiten jetzt mit JavaScript und rufen entsprechend das Feature auf. Wir schauen uns an, wie das Feature funktioniert, und ich erläutere dann, woher also sozusagen diese Informationen kommen, also wieso das auch tatsächlich funktioniert. Und zwar gibt es ja das Navigator-Objekt (navigator) in JavaScript, und dort gibt es jetzt Geolocation (geolocation), also Unterpunkt sozusagen, und drei Methoden. watchPosition sorgt dafür, dass eine Position permanent überwachtet, so ähnlich wie setInterval in JavaScripts, clearWatch löscht das dann so, wie clearInterval. Ich arbeite aber mit getCurrentPosition. getCurrentPosition hat dieselbe Schnittstelle, wie watchPosition, aber ruft sozusagen die Position nur einmal auf, und das genügt in unserem Fall. Ich setze, ja, in einem stationären System, ich werde nicht herumwandeln, also getCurrentPosition, und diese Methode erwartet drei Parameter, mindestens einen, nun sollte aber alle drei angeben, und zwar ist der erste Parameter eine ananyme Funktion. Man kann sie direkt reinschreiben oder auch entsprechend referenzieren, die aufgerufen wird, wenn die aktuelle Position ermitteln werden kann. Die zweite Funktion wird aufgerufen, wenn es einen Fehler gibt. Und der dritte Parameter ist einfach ein Hashtable. Das ist ein Konfigurationsobjekt. Da kann man Zusatzinformationen über die Ermittelung der Position angeben, etwa, ob eine hohe Genauigkeit verwendet werden soll, oder ob bestimmte Time-out-Werte zum Einsatz kommen sollen, also das vielleicht eine gekäschte Position verwendet werden darf, wenn es nicht so lange hier ist. Ich gehe jetzt zunächst vom Volksfall aus, ja, also davon aus, dass diese erste coords Funktion aufgerufen wird, und tatsächlich wird es dann ein Ergebnis geben, und ich würde sagen das Ergebnis. Schauen wir uns mal an und zwar in der JavaScript-Consolle des Browsers, das heißt, ich logge das Ergebnis einfach, dann sehen wir,was das für ein Objekt ist. Ich starte wieder mein Chrome-Browser, mache schon mal die F2-Tools, damit die Consolle sichtbar ist, gehe dann auf geolocation.html, und bekomme diese Anzeige: " Localhost möchte den Standort meines Computers nutzen". Wenn ich jetzt sage "Ablehnen", lande ich im Fehlerfall. Bei Zulassen, na ja, versucht er zumindest, die Position zu ermitteln, und in der Tat, es kam etwas zurück- ein Geoposition-Objekt, das hat das Unterelement coords, also Koordinaten, und dort gibt es einige Angaben, zum einen die Genauigkeit - accurancy, die ist in Metern, also auf 25000 km genau, wo die meine Position ermittelt. Na ja, immerhin. Es gäbe eine Höhe und eine Genauigkeit für die Höhe. Beides nicht besetzt. Ich habe auch keinen Höhenmesser hier im System und es gibt doch keine andere Möglichkeit, meine aktuelle Höhe herauszufinden, beispielsweise in welchem Stockwerk ich bin. Heading - die Richtung - passt auch nicht auch die Geschwindigkeit passt nicht, aber der Längen- und Breitengrad, das ist sehr interessant. Wir haben hier latitude und longitude Eigenschaften, und diese Eigenschaften wollen wir uns jetzt mal genauer anschauen, um zu sehen, wie genau diese Ermittelung jetzt vonstattengegangen ist. Ich kopiere dazu die Koordinaten mal in Zwischenablage und gehe zu openstreepmap.org - ein Mapping-Dienst, und füge das wieder ein, kopiere es also aus der Zwischenablage in dieses Textfeld und suche zumal danach und bekomme dann zu diesen Koordinaten eine Position, Aha! Graz, Österreich [unverständlich] Und, na ja, also deutlich besser, als 25 km entfernt. Diese Position hier ist ungefähr nur ein, zwei Kilometer enfernt. Ich bin ungefähr in dem Bereich. Funktioniert also schon relativ gut. Ich setze ja in einem System, das per LAN-Kabel an einen Router und dann ans Internet angeschlossen ist. Hätte ich ein System mit WLAN, dann wäre die Position wahrscheinlich deutlich genauer. Der Hintergrund ist nämlich folgendes: Die Spezifikation sagt: "Der Browser soll halt irgendwie herausfinden, wo die Position des Benutzers ist", darf sich dabei aber sozusagen jedes Mittels bedienen. Das ist nicht vorgeschriebene Spezifikation. Jetzt haben die Entwickler von relevanten Browsern jeweils eine Möglichkeit, serverseitig auf Basis verschiedener Informationen, die Position zu ermitteln, die haben alle Dienste, die sie per verschlüsselten Tunnel dann anzapfen. Microsoft hat ein, es gibt ein von Google, auf den greifen noch andere Browser zu. Apple hat auch einen. Dieser Dienst bekommt eine Reihe von Informationen geliefert, zum Beispiel, jetzt in dem Fall dieses per LAN angeschlossenen Systems vermutlich die IP-Adresse. Hätte ich jetzt aber etwas mit WLAN, dann würde ich noch andere Informationen erhalten, beispielsweise eine Liste aller WLAN-Netzwerke, also nicht die aktuelle IP-Adresse, sondern gehen Sie an, wenn Sie per WLAN verbinden, Sie sehen vielleicht 10 Netzwerke, verbinden sich mit einem. Und diese Liste der 10 Netzwerke wird auch an diesem Dienst geschickt oder kann auch an diesem Dienst geschickt werden, denn dieser Dienst hat vielleicht eine Liste von WLAN-Netzwerken und auf Basis dieser Liste kann dann versucht werden, die Position zu ermitteln. Na, also wenn Sie ein paar Netzwerke haben, einige davon haben Sie im vollen Ausschlag, einige davon empfangen Sie noch ganz schwach, dann kann so trianguliert werden und die Position relativ genau ermittelt werden. Mit aktivierten WLAN ist also diese Erkennung sehr, sehr häufig, sehr, sehr genau, bei einem LAN-Anschluss kann es auch schon ziemlich schief gehen. Das ist also ein wichtiger Aspekt. Interessant wird es auch gerade auf mobilen Endgeräten, denn auf einem mobilen Endgerät ist es ja so, da gibt es also umzustellen ein GPS-Chip, und GPS ist vielleicht noch an, dann haben Sie möglicherweise eine besonders genaue Ermittelung der aktuellen Position, eben weil das angezapft werden kann, und das ist eigentlich das Spannendste an diesem ganzen Geolocation-Feature. Die API, wie gesagt, ist sehr, sehr einfach. Wir schauen uns noch mal den zugehörigen Code kurz an. Also, getCurrentPosition heißt die Methode, bekommt entsprechend ein Ergebnis, gibt auch noch ein Fehlerfall, kann man den Fehler mal anschauen, und dazu gibt es noch die Möglichkeit, eben weiter die Konfigurationsoption anzugeben, was wir jetzt hier an dieser Stelle nicht brauchen. Und das ist eben eine sehr, sehr einfache API, mit der man mit sehr, sehr wenig Arbeit an die Position haben kommt, zumindest, wenn die Benutzer dem auch zustimmen, deswegen wird nachgefragt. Diese Nachfrage kann man auch als Entwickler nicht abschalten, nur als Nutzer könnte man das. Probieren wir mal das Ganze zum Beipiel im Internet Explorer, der unterstützt dieses Feature natürlich auch. Ich will auch die F12-Tools aktivieren, mir die JavaScript-Consolle anschauen, und jetzt wieder geolocation.html aufrufen. Da sieht die Meldung anders aus. Ihr Browser hat es eine eigene Art und Weise, diese Rückfrage darzustellen. Und ich sage jetzt statt "Einmal zulassen", eher "Immer verweigern", also ich sage jetzt "Nein." Und dann tatsächlich bekomme ich ein Fehlerobjekt, und das Fehlerobjekt wird die Fehlerinfo, ist jetzt in diesem Fall "Diese Website verfügt nicht über die Berechtigung zur Verwendung der Geolocation-API". Das heißt, wir landen dann in diesem Fehlerfall, können dann den Fehlerstatus ermitteln, gibt eben mehrere Varianten, am häufigsten ist es natürlich, dass wir als Webanwendung die Erlaubnis nicht haben, kann aber auch sein, dass einfach die Position nicht ermitteln werden kann, beispielsweise, weil wir vielleicht in dem Internetnetz weg sind, keine nach außen verfügbare IP haben oder wir den Tunnel nicht aufbauen können, als Browser mit dem serverseitigen Dienst an die Positionen ermittelt und dann haben wir einfach keine Möglichkeit, das zu ermitteln, und geben deswegen auf. Kann also sozusagen alles passieren, deswegen ist ihm das Fehler-Heading ziemlich wichtig, ansonsten aber ein Feature, was wirklich einfach einzusetzen ist, und sehr, sehr spannende Anwendungsmöglichkeiten bietet.

HTML5 Grundkurs

Machen Sie sich mit HTML5 fit für das Webdesign von morgen, angefangen vom Erstellen einfacher HTML-Dokumente bis hin zur Gestaltung anspruchsvoller Layouts.

3 Std. 11 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!