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

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

NativeScript ist ein Framework zum Erstellen plattformü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 kö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, zunächst eines der früheren Tutorials in NativeScript zu lesen, bevor Sie versuchen, diesem Tutorial zu folgen.

Eine Einführung in NativeScript
In diesem Artikel stelle ich Ihnen NativeScript vor, ein Open-Source-Framework zum Erstellen mobiler Apps mit JavaScript.

Wernher-Bel Ancheta
15. Juli 2016

Mobile Entwicklung
Erstellen Sie Ihre erste NativeScript-App
In diesem Tutorial zeige ich Ihnen, wie Sie mit der Entwicklung von NativeScript-Apps beginnen. Sie erfahren, wie Sie Ihre Umgebung einrichten, um mit...

Wernher-Bel Ancheta
5. August 2016

NativeScript
Erstellen Sie eine Wetter-App mit TypeScript und NativeScript
In diesem Tutorial erstellen Sie eine vollständige, plattformübergreifende Wetter-App mit TypeScript und NativeScript. Unterwegs lernen Sie wichtige NativeScript...

Wernher-Bel Ancheta
17. August 2016

Mobile App

Was Sie erstellen werden

Sie erstellen einen Walking-Tracker mit Geolokalisierung und Google Maps. Es zeigt dem Benutzer an, wie viel Distanz er zurückgelegt hat und wie viele Schritte er gemacht hat, um diese Distanz zurü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 endgültige Ausgabe aussehen wird:

Einrichten des Projekts

Beginnen Sie mit der Erstellung einer neuen NativeScript-App:

1	tns create fitApp --appid "com.yourname.fitApp"

Um das Einrichten der Benutzeroberfläche der App zu erleichtern, habe ich ein GitHub-Repository erstellt, das sowohl die Start- als auch die Endversion des Projekts enthält. Sie kö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.

Ausführen der App

Wir werden den Android-Emulator von Android Studio verwenden, um die App zu testen. Auf diese Weise kö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 ausführen, wird automatisch der Android-Emulator aufgerufen, falls dieser bereits installiert ist. Wenn es noch nicht installiert ist, können Sie es installieren, indem Sie Android Studio starten, auf Konfigurieren klicken und SDK-Manager auswählen. Dadurch werden die SDK-Plattformen standardmäßig geöffnet. Klicken Sie auf die Registerkarte SDK-Tools und stellen Sie sicher, dass Sie Android Emulator auswählen, und klicken Sie auf Übernehmen, um es zu installieren.

Um den GPS-Emulator zu verwenden, laden Sie ihn von GitHub herunter und führen Sie die ausführbare War-Datei aus:

1	java -jar android-gps-emulator-0.2.war

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 ausgefü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 möchten. Die App erkennt dies und verwendet es als aktuellen Standort.

Arbeiten mit Geolokalisierung

Die Geolokalisierung in NativeScript ähnelt der Geolocation-API in JavaScript. Der einzige Unterschied in der Funktionalität besteht in der Hinzufügung einer Funktion distance(), mit der die Entfernung zwischen zwei Standorten berechnet wird.

Installieren des Geolocation-Plugins

Um mit Geolocation arbeiten zu können, müssen Sie zuerst das Geolocation-Plugin installieren:

1	tns plugin add nativescript-geolocation

Sobald dies erledigt ist, können Sie es jetzt aus Ihren Skriptdateien einbinden:

1	var geolocation = require("nativescript-geolocation");

Abrufen des aktuellen Standorts des Benutzers

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

getCurrentLocation
watchLocation
distance

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

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

function createViewModel() {
    var viewModel = new Observable();
    var watchId; // stores the ID of the location watcher so we can stop it later
    var start_location; // stores the location of the user when they first started tracking
    var current_location; // stores the current location of the user
   
    viewModel.is_tracking = false; // whether the user's location is currently being tracked or not
    //viewModel.latitude = 15.447819409392789;
    //viewModel.longitude = 120.93888133764267;
    //viewModel.zoom = 20;

    var total_distance = 0;
    var total_steps = 0;

    var locations = []; // array which will store the locations

    //var mapView;
    //var marker = new mapsModule.Marker();

    if (!geolocation.isEnabled()) { // check if geolocation is not enabled
        geolocation.enableLocationRequest(); // request for the user to enable it
    } 

    // next: add code for getting the user's current location
}

Fügen Sie als Nächstes den Code hinzu, um den aktuellen Standort des Benutzers abzurufen. Dieser Code wird ausgeführt, wenn der Benutzer auf die Schaltflä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 können Sie die Genauigkeit in Metern angeben. Es gibt zwei mö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 übertragen ihn auf das locations-Array. Später wird dieser Standort zusammen mit dem ersten Standort verwendet, der aus der Beobachtung des aktuellen Standorts des Benutzers abgerufen wird, um die zurückgelegte Entfernung zu bestimmen.

viewModel.toggleTracking = function() {
    
    if (geolocation.isEnabled()) {

        this.set('is_tracking', !viewModel.is_tracking); // flip the toggle for tracking
        if (viewModel.is_tracking) { 
            geolocation.getCurrentLocation(
                {
                    desiredAccuracy: Accuracy.high, // 3 meter accuracy 
                    updateDistance: 5, // 5 meters
                    timeout: 2000 // 2 seconds
                }
            ).
            then(function(loc) {
                if (loc) {
                    start_location = loc;
                    locations.push(start_location);
                    
                    //viewModel.set('latitude', loc.latitude);
                    //viewModel.set('longitude', loc.longitude);
                }
            }, function(e){
                dialogs.alert(e.message);
            });  

            // next: add code for watching user's current location

        } else {
            
            // next: add code to stop watching the user's current location
        }

    } else {
        dialogs.alert("Please enable Geolocation");
    }
}

Auf den aktuellen Standort des Benutzers achten

Um den aktuellen Standort zu erhalten, verwenden wir die Funktion geolocation.watchLocation(). Diese Funktion ähnelt der setInterval()-Funktion in JavaScript, da sie auch die Callback-Funktion wiederholt ausfü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 zurückgelegt hat.

watchId = geolocation.watchLocation(
    function (loc) {
        if (loc) {
            current_location = loc;
            
            // next: add code for getting the distance between two locations
        }
    }, 
    function(e){
        dialogs.alert(e.message);
    }, 
    {
        desiredAccuracy: Accuracy.high, 
        updateDistance: 5, // 5 meters
        minimumUpdateTime : 5000 // update every 5 seconds
    }
);

Sobald der Benutzer angibt, dass er die Verfolgung beenden möchte, müssen Sie die Funktion geolocation.clearWatch() aufrufen. Sie müssen auch die restlichen Werte zurücksetzen, die bei jeder Änderung des Speicherorts aktualisiert werden.

geolocation.clearWatch(watchId); // stop watching the user's location
total_distance = 0;
total_steps = 0;
locations = [];
viewModel.set('distance', "distance travelled: " + total_distance + " meters");
viewModel.set('steps', "steps: " + total_steps);

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 zurückgelegt hat. Von dort aus können wir eine ungefähre Umrechnung von Metern in die Anzahl der Schritte verwenden – ich sage ungefähr, weil nicht alle Menschen die gleiche Entfernung in einem einzigen Schritt zurücklegen.

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

locations.push(loc);

//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); 

location_count = locations.length;

if (location_count >= 2) {
    var distance = Math.round(geolocation.distance(locations[location_count - 2], locations[location_count - 1])); // get the distance between the last two locations
    var steps = Math.round(distance * 1.3123); // determine the approximate number of steps
    
    // add the current distance to the overall distance travelled
    total_distance = total_distance + distance;
    total_steps = total_steps + steps;
    
    // update the UI
    viewModel.set('distance', "distance travelled: " + total_distance + " meters");
    viewModel.set('steps', "steps: " + total_steps);
}

An dieser Stelle können Sie nun mit dem Testen der App mit dem zuvor erwähnten GPS-Emulator beginnen. Beachten Sie, dass Sie in der Datei main-view-model.js auf Speichern klicken müssen, um ein Neuladen der App auszulösen.

Wä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 standardmäßig der Googleplex-Standort in Mountain View, Kalifornien, verwendet. Das bedeutet, dass das nächste Mal, wenn Sie einen Standort auf dem Emulator auswählen, dieser von diesem Standort zu dem von Ihnen ausgewählten Standort springt. Wenn es weit weg ist, bekommst du eine wirklich große Zahl für die Entfernung und die Schritte.

Alternativ können Sie auch auf einem echten Gerät mit aktiviertem Internet und aktiviertem GPS testen. An dieser Stelle ist nur GPS erforderlich, aber sobald wir Google Maps hinzugefügt haben, benötigt die App eine Internetverbindung.

Arbeiten mit Google Maps

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

Installieren des Google Maps-Plugins

1	tns plugin add nativescript-google-maps-sdk

Nach der Installation müssen Sie die Vorlagen-String-Ressourcendateien für Android kopieren:

1	cp -r node_modules/nativescript-google-maps-sdk/platforms/android/res/values app/App_Resources/Android/

Öffnen Sie als Nächstes die Datei app/App_Resources/Android/values/nativescript_google_maps_api.xml und fügen Sie Ihren eigenen Google Maps-API-Schlüssel (Serverschlüssel) hinzu:

1	<?xml version="1.0" encoding="utf-8"?>
2	<resources>
3	<string name="nativescript_google_maps_api_key">YOUR GOOGLE MAPS API KEY HERE</string>
4	</resources>

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

Hinzufügen der Karte

Öffnen Sie für die Karte die Datei main-page.xml und Sie sollten Folgendes sehen:

<maps:mapView 
    latitude="{{ latitude }}" 
    longitude="{{ longitude }}" 
    zoom="{{ zoom }}" 
    mapReady="{{ onMapReady }}" 
/>

Hier haben wir drei Optionen (longitude, latitude und zoom) und eine Funktion angegeben, die ausgeführt werden soll, sobald die Karte fertig ist. longitude und latitude geben den Standort an, den Sie in der Karte rendern möchten. Der zoom gibt die Zoomstufe der Karte an. mapReady ist der Ort, an dem wir die Funktion zum Hinzufü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 standardmäßig nicht, da Sie die Schemadefinition für die Karten noch nicht hinzugefügt haben. Fügen Sie also in Ihrem Page-Element die Definition für das maps-Element hinzu:

<Page 
    xmlns="http://schemas.nativescript.org/tns.xsd" 
    xmlns:maps="nativescript-google-maps-sdk"
>
</Page>

Sobald dies erledigt ist, sollte direkt unter der Schaltflä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 zurück zur Datei main-view-model.js und entfernen Sie die Kommentare für die Codezeilen für die Arbeit mit Google Maps:

// default coordinates
viewModel.latitude = 15.447819409392789;
viewModel.longitude = 120.93888133764267;
viewModel.zoom = 20; // default map zoom level

var mapView; // variable for storing the current map instance
var marker = new mapsModule.Marker(); // variable for storing the marker instance

Hinzufügen des Markers

Da wir bereits Standardkoordinaten für den Marker deklariert haben, können wir tatsächlich einen Marker zeichnen, sobald die Karte fertig ist:

viewModel.onMapReady = function(args) {
    mapView = args.object; // get the map view
    marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); // set the marker's position on the map
    mapView.addMarker(marker); // add the marker to the map
}

Als Nächstes müssen wir die Markerposition aktualisieren, sobald der Benutzer mit der Verfolgung seines Standorts beginnt. Sie können dies in der Erfolgs-Callback-Funktion für die Funktion getCurrentLocation() tun:

locations.push(start_location);

// remove the comments for these:                       
//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); 

Wir müssen es auch aktualisieren, wenn der Standort des Benutzers aktualisiert wird (innerhalb der Erfolgsrückruffunktion für watchLocation):

current_location = loc;
locations.push(loc);

// remove the comments for these:
//viewModel.set('latitude', loc.latitude);
//viewModel.set('longitude', loc.longitude);
//marker.position = mapsModule.Position.positionFromLatLng(viewModel.latitude, viewModel.longitude); 

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 zurückgelegte Strecke und die ungefähre Anzahl der Schritte, die sie zurü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 für NativeScript verwenden.

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

Sehen Sie sich in der Zwischenzeit einige unserer anderen Beiträge zu NativeScript und plattformübergreifender mobiler Codierung an.

Eine umfassende Einführung in NativeScript finden Sie in unserem Videokurs Programmieren einer mobilen App mit NativeScript. In diesem Kurs zeigt Ihnen Keyvan Kasaei Schritt fü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 für Ihr nächstes mobiles App-Projekt in Betracht ziehen sollten.