Advertisement
  1. Code
  2. NativeScript

Programmieren Sie eine Echtzeit-NativeScript-App: Geolocation und Google Maps

by
Read Time:12 minsLanguages:
This post is part of a series called Code a Real-Time NativeScript App.
Code a Real-Time NativeScript App: SQLite

German (Deutsch) translation by Nikol Angelowa (you can also view the original English article)

NativeScript ist ein Framework zum Erstellen plattformübergreifender nativer mobiler Apps mit XML, CSS und JavaScript. In dieser Serie probieren wir einige der coolen Dinge aus, die Sie mit einer NativeScript-App machen können: Geolokalisierung und Google Maps-Integration, SQLite-Datenbank, Firebase-Integration und Push-Benachrichtigungen. Auf dem Weg werden wir eine Fitness-App mit Echtzeitfunktionen erstellen, die jede dieser Funktionen nutzt.

In diesem Tutorial erfahren Sie, wie Sie in NativeScript-Apps mit Geolocation und Google Maps arbeiten.

Ich gehe davon aus, dass Sie bereits wissen, wie man Apps in NativeScript erstellt. Wenn Sie mit NativeScript noch nicht vertraut sind, empfehlen wir Ihnen, zunächst eines der früheren Tutorials in NativeScript zu lesen, bevor Sie versuchen, diesem Tutorial zu folgen.

Was Sie erstellen werden

Sie erstellen einen Walking-Tracker mit Geolokalisierung und Google Maps. Es zeigt dem Benutzer an, wie viel Distanz er zurückgelegt hat und wie viele Schritte er gemacht hat, um diese Distanz zurückzulegen. Es wird auch eine Karte geben, die den aktuellen Standort des Benutzers anzeigt.

Um Ihnen eine Vorstellung zu geben, sehen Sie hier, wie die endgültige Ausgabe aussehen wird:

app finalapp finalapp final

Einrichten des Projekts

Beginnen Sie mit der Erstellung einer neuen NativeScript-App:

Um das Einrichten der Benutzeroberfläche der App zu erleichtern, habe ich ein GitHub-Repository erstellt, das sowohl die Start- als auch die Endversion des Projekts enthält. Sie können fortfahren und den Inhalt des App-Ordners in den App-Ordner Ihres Projekts kopieren. Wir werden nur mit zwei Dateien arbeiten: main-page.xml und main-page.js-Datei. Der Rest ist nur ein Boilerplate aus dem NativeScript-Demo-Projekt.

Ausführen der App

Wir werden den Android-Emulator von Android Studio verwenden, um die App zu testen. Auf diese Weise können wir den Android GPS Emulator verwenden, um den Standortwechsel bequem von zu Hause aus zu simulieren. Ich mag es auch nicht wirklich, ziellos draußen herumzulaufen, um die Geolokalisierung zu testen! Aber wenn das dein Ding ist, werde ich dich nicht aufhalten.

Wenn Sie tns run android ausführen, wird automatisch der Android-Emulator aufgerufen, falls dieser bereits installiert ist. Wenn es noch nicht installiert ist, können Sie es installieren, indem Sie Android Studio starten, auf Konfigurieren klicken und SDK-Manager auswählen. Dadurch werden die SDK-Plattformen standardmäßig geöffnet. Klicken Sie auf die Registerkarte SDK-Tools und stellen Sie sicher, dass Sie Android Emulator auswählen, und klicken Sie auf Übernehmen, um es zu installieren.

Um den GPS-Emulator zu verwenden, laden Sie ihn von GitHub herunter und führen Sie die ausführbare War-Datei aus:

Sobald dies erledigt ist, sollten Sie in der Lage sein, von Ihrem Browser aus auf http://localhost:8080/gpsemulator/ zuzugreifen und eine Verbindung zu localhost herzustellen. Stellen Sie sicher, dass der Android-Emulator bereits ausgeführt wird, wenn Sie dies tun. Sobald Sie verbunden sind, zoomen Sie einfach in die Karte hinein und klicken Sie auf einen beliebigen Ort, den Sie als Standort verwenden möchten. Die App erkennt dies und verwendet es als aktuellen Standort.

GPS EmulatorGPS EmulatorGPS Emulator

Arbeiten mit Geolokalisierung

Die Geolokalisierung in NativeScript ähnelt der Geolocation-API in JavaScript. Der einzige Unterschied in der Funktionalität besteht in der Hinzufügung einer Funktion distance(), mit der die Entfernung zwischen zwei Standorten berechnet wird.

Installieren des Geolocation-Plugins

Um mit Geolocation arbeiten zu können, müssen Sie zuerst das Geolocation-Plugin installieren:

Sobald dies erledigt ist, können Sie es jetzt aus Ihren Skriptdateien einbinden:

Abrufen des aktuellen Standorts des Benutzers

Das Geolocation-Plugin von NativeScript enthält drei Funktionen, die Sie verwenden können, um mit dem aktuellen Standort des Benutzers zu arbeiten. Wir werden jedes davon in dieser App verwenden:

  • getCurrentLocation
  • watchLocation
  • distance

Öffnen Sie die Datei main-view-model.js und fügen Sie den folgenden Code in die Funktion createViewModel() ein. Hier initialisieren wir die Variablen, die wir später zum Speichern der verschiedenen Werte verwenden werden, die zum Verfolgen des Standortes des Benutzers erforderlich sind.

Ich habe dem Code einige Kommentare hinzugefügt, damit Sie wissen, was los ist. Es gibt auch einige Codezeilen, die auskommentiert sind; diese sind für die Google Maps-Integration. Ich habe sie vorerst auskommentiert, um die Dinge einfach zu halten. Sobald wir die Google Maps-Integration erreicht haben, müssen Sie diese Kommentare entfernen.

Fügen Sie als Nächstes den Code hinzu, um den aktuellen Standort des Benutzers abzurufen. Dieser Code wird ausgeführt, wenn der Benutzer auf die Schaltfläche zum Starten und Stoppen der Standortverfolgung tippt. Die Methode geolocation.getCurrentLocation() wird verwendet, um den aktuellen Standort abzurufen.

Hier haben wir drei Optionen angegeben: desiredAccuracy, updateDistance und timeout. Mit desiredAccuracy können Sie die Genauigkeit in Metern angeben. Es gibt zwei mögliche Werte: Accuracy.high (etwa 3 Meter) und Accuracy.any (etwa 300 Meter). updateDistance gibt an, wie viel Unterschied (in Metern) zwischen dem vorherigen Standort und dem aktuellen Standort bestehen muss, bevor aktualisiert wird. Schließlich gibt timeout an, wie viele Millisekunden auf einen Standort gewartet werden soll.

Sobald ein Standort empfangen wurde, legen wir ihn als start_location fest und übertragen ihn auf das locations-Array. Später wird dieser Standort zusammen mit dem ersten Standort verwendet, der aus der Beobachtung des aktuellen Standorts des Benutzers abgerufen wird, um die zurückgelegte Entfernung zu bestimmen.

Auf den aktuellen Standort des Benutzers achten

Um den aktuellen Standort zu erhalten, verwenden wir die Funktion geolocation.watchLocation(). Diese Funktion ähnelt der setInterval()-Funktion in JavaScript, da sie auch die Callback-Funktion wiederholt ausführt, bis Sie sie mit der geolocation.clearWatch()-Funktion stoppen. Die Callback-Funktion wird automatisch basierend auf updateDistance und minimumUpdateTime aufgerufen.

Im folgenden Code wird der Standort aktualisiert, wenn er sich mindestens 5 Meter von dem zuvor abgerufenen Standort unterscheidet. Dieses Update wird jedoch nur alle 5 Sekunden erfolgen. Dies bedeutet, dass der Standort nicht aktualisiert wird, wenn der Benutzer innerhalb von 5 Sekunden keine 5 Meter oder mehr zurückgelegt hat.

Sobald der Benutzer angibt, dass er die Verfolgung beenden möchte, müssen Sie die Funktion geolocation.clearWatch() aufrufen. Sie müssen auch die restlichen Werte zurücksetzen, die bei jeder Änderung des Speicherorts aktualisiert werden.

Die Entfernung zwischen zwei Standorten ermitteln

Jetzt sind wir bereit, die Distanz zu gewinnen. Dies kann durch Aufrufen der Funktion geolocation.distance() erfolgen. Diese Funktion akzeptiert zwei location-Objekte als Argumente, daher verwenden wir die letzten beiden Standorte, die an das locations-Array gepusht wurden, um die Entfernung (in Metern) zu bestimmen, die der Benutzer von einem zuvor aufgezeichneten Standort zum aktuellen zurückgelegt hat. Von dort aus können wir eine ungefähre Umrechnung von Metern in die Anzahl der Schritte verwenden – ich sage ungefähr, weil nicht alle Menschen die gleiche Entfernung in einem einzigen Schritt zurücklegen.

Danach können wir einfach die resultierende distance und steps zu total_distance und total_steps addieren, damit wir die Gesamtdistanz und die Schritte verfolgen können, die sie seit Beginn der Verfolgung ihres Standorts zurückgelegt haben.

An dieser Stelle können Sie nun mit dem Testen der App mit dem zuvor erwähnten GPS-Emulator beginnen. Beachten Sie, dass Sie in der Datei main-view-model.js auf Speichern klicken müssen, um ein Neuladen der App auszulösen.

Wählen Sie dann einen Standort im GPS-Emulator aus, damit nach dem Laden der App ein neuer Standort abgerufen wird. Wenn Sie dies nicht tun, wird standardmäßig der Googleplex-Standort in Mountain View, Kalifornien, verwendet. Das bedeutet, dass das nächste Mal, wenn Sie einen Standort auf dem Emulator auswählen, dieser von diesem Standort zu dem von Ihnen ausgewählten Standort springt. Wenn es weit weg ist, bekommst du eine wirklich große Zahl für die Entfernung und die Schritte.

Alternativ können Sie auch auf einem echten Gerät mit aktiviertem Internet und aktiviertem GPS testen. An dieser Stelle ist nur GPS erforderlich, aber sobald wir Google Maps hinzugefügt haben, benötigt die App eine Internetverbindung.

Arbeiten mit Google Maps

Wir verwenden jetzt Google Maps, um eine Karte hinzuzufügen, die den aktuellen Standort des Benutzers zeigt.

Installieren des Google Maps-Plugins

Nach der Installation müssen Sie die Vorlagen-String-Ressourcendateien für Android kopieren:

Öffnen Sie als Nächstes die Datei app/App_Resources/Android/values/nativescript_google_maps_api.xml und fügen Sie Ihren eigenen Google Maps-API-Schlüssel (Serverschlüssel) hinzu:

Stellen Sie sicher, dass Sie die Google Maps Android API über die Google Console aktiviert haben, bevor Sie versuchen, sie zu verwenden.

Hinzufügen der Karte

Öffnen Sie für die Karte die Datei main-page.xml und Sie sollten Folgendes sehen:

Hier haben wir drei Optionen (longitude, latitude und zoom) und eine Funktion angegeben, die ausgeführt werden soll, sobald die Karte fertig ist. longitude und latitude geben den Standort an, den Sie in der Karte rendern möchten. Der zoom gibt die Zoomstufe der Karte an. mapReady ist der Ort, an dem wir die Funktion zum Hinzufügen des Markers auf der Karte angeben. Diese Markierung stellt den aktuellen Standort des Benutzers dar und wird daher in der Mitte der Karte gerendert.

Dies funktioniert standardmäßig nicht, da Sie die Schemadefinition für die Karten noch nicht hinzugefügt haben. Fügen Sie also in Ihrem Page-Element die Definition für das maps-Element hinzu:

Sobald dies erledigt ist, sollte direkt unter der Schaltfläche zum Verfolgen des Standorts eine Google-Karteninstanz gerendert werden. Es wird noch keine Karten haben, da der latitude und longitude noch nicht angegeben wurden. Gehen Sie dazu zurück zur Datei main-view-model.js und entfernen Sie die Kommentare für die Codezeilen für die Arbeit mit Google Maps:

Hinzufügen des Markers

Da wir bereits Standardkoordinaten für den Marker deklariert haben, können wir tatsächlich einen Marker zeichnen, sobald die Karte fertig ist:

Als Nächstes müssen wir die Markerposition aktualisieren, sobald der Benutzer mit der Verfolgung seines Standorts beginnt. Sie können dies in der Erfolgs-Callback-Funktion für die Funktion getCurrentLocation() tun:

Wir müssen es auch aktualisieren, wenn der Standort des Benutzers aktualisiert wird (innerhalb der Erfolgsrückruffunktion für watchLocation):

Sobald dies erledigt ist, sollte eine Karte, die den Standardstandort rendert, in der App angezeigt werden.

Abschluss

In diesem Tutorial haben Sie eine NativeScript-App erstellt, mit der der Benutzer die zurückgelegte Strecke und die ungefähre Anzahl der Schritte, die sie zurückgelegt haben, nachverfolgen kann. Sie haben Google Maps auch verwendet, damit der Benutzer seinen aktuellen Standort sehen kann. Auf diese Weise haben Sie gelernt, wie Sie die Geolocation- und Google Maps-Plugins für NativeScript verwenden.

Dies ist nur der Anfang! In den nächsten Posts dieser Serie werden wir unserer App eine lokale Datenbank, Push-Benachrichtigungen und andere coole Funktionen hinzufügen.

Sehen Sie sich in der Zwischenzeit einige unserer anderen Beiträge zu NativeScript und plattformübergreifender mobiler Codierung an.

Eine umfassende Einführung in NativeScript finden Sie in unserem Videokurs Programmieren einer mobilen App mit NativeScript. In diesem Kurs zeigt Ihnen Keyvan Kasaei Schritt für Schritt, wie Sie eine einfache Anwendung erstellen. Nebenbei lernen Sie, wie Sie einen einfachen App-Workflow mit Netzwerkanforderungen, einer MVVM-Architektur und einigen der wichtigsten NativeScript-UI-Komponenten implementieren. Am Ende werden Sie verstehen, warum Sie NativeScript für Ihr nächstes mobiles App-Projekt in Betracht ziehen sollten.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.