Accentsconagua
Share
NativeScript è un framework per la creazione di app mobili native multipiattaforma che utilizzano XML, CSS e JavaScript. In questa serie, proveremo alcune delle cose interessanti che puoi fare con un'app NativeScript: geolocalizzazione e integrazione con Google Maps, database SQLite, integrazione Firebase e notifiche push. Lungo la strada, costruiremo un'app di fitness con funzionalità in tempo reale che utilizzeranno ciascuna di queste funzionalità.
In questo tutorial, imparerai come lavorare con la geolocalizzazione e Google Maps nelle app NativeScript.
Suppongo che tu sappia già come creare app in NativeScript. Se sei nuovo su NativeScript, ti consiglio di controllare prima uno dei tutorial precedenti in NativeScript prima di provare a seguire questo tutorial.
Creerai un tracker ambulante utilizzando la geolocalizzazione e Google Maps. Mostrerà all'utente la distanza percorsa e il numero di passi compiuti per coprire quella distanza. Ci sarà anche una mappa che mostrerà la posizione attuale dell'utente.
Per darti un'idea, ecco come apparirà l'output finale:
Inizia creando una nuova app NativeScript:
tns crea fitApp --app "com.yourname.fitApp"
Per semplificare l'impostazione dell'interfaccia utente dell'app, ho creato un repository GitHub che include sia l'avvio che la versione finale del progetto. Puoi andare avanti e copiare il contenuto del App cartella per il tuo progetto App cartella. Lavoreremo solo con due file: main-page.xml e main-page.js file. Il resto è solo un file di prova dal progetto demo di NativeScript.
Utilizzeremo l'emulatore Android fornito da Android Studio per testare l'app. Questo ci consentirà di utilizzare l'emulatore GPS Android per simulare il cambio di posizione dal comfort delle nostre case. Non mi piace davvero andare in giro senza meta per testare la geolocalizzazione! Ma se è la tua cosa, allora non ti fermerò.
Se esegui tns esegue Android, chiamerà automaticamente l'emulatore Android se è già installato. Se non è ancora installato, puoi installarlo avviando Android Studio, facendo clic su configurare, e selezionando Responsabile SDK. Questo aprirà il Piattaforme SDK per impostazione predefinita. Clicca sul Strumenti SDK scheda e assicurati di selezionare Emulatore Android, e fare clic su Applicare per installarlo.
Per utilizzare l'emulatore GPS, scaricarlo da GitHub ed eseguire l'eseguibile guerra file:
java-jar android-gps-emulator-0.2.war
Una volta fatto, dovresti essere in grado di accedere http: // localhost: 8080 / gpsemulator / dal tuo browser e connettiti a localhost. Assicurati che l'emulatore Android sia già in esecuzione quando lo fai. Una volta connesso, è sufficiente ingrandire la mappa e fare clic su qualsiasi luogo che si desidera utilizzare come posizione. L'app lo rileva e lo utilizza come posizione corrente.
La geolocalizzazione in NativeScript è simile all'API di geolocalizzazione in JavaScript. L'unica differenza di funzionalità è l'aggiunta di a distanza() funzione che viene utilizzata per calcolare la distanza tra due posizioni.
Per lavorare con la geolocalizzazione, devi prima installare il plug-in di geolocalizzazione:
Il plugin tns aggiunge la geolocalizzazione nativescript
Una volta fatto, puoi ora includerlo dai tuoi file di script:
var geolocation = require ("nativescript-geolocation");Il plug-in di geolocalizzazione di NativeScript include tre funzioni che è possibile utilizzare per lavorare con la posizione corrente dell'utente. Useremo ognuno di questi in questa app:
getCurrentLocationwatchLocationdistanzaApri il main-view-model.js file e aggiungere il seguente codice all'interno del createViewModel () funzione. Qui iniziamo a inizializzare le variabili che verranno utilizzate in seguito per memorizzare i diversi valori necessari per tenere traccia della posizione dell'utente.
Ho aggiunto alcuni commenti nel codice in modo da sapere cosa sta succedendo. Ci sono anche alcune righe di codice che sono commentate; questi sono per l'integrazione di Google Maps. Li ho commentati per ora per mantenere le cose semplici. Una volta arrivati all'integrazione con Google Maps, dovrai rimuovere tali commenti.
function createViewModel () var viewModel = new Observable (); var watchId; // memorizza l'ID del watcher di posizione in modo che possiamo fermarlo in seguito var start_location; // memorizza il percorso dell'utente quando ha iniziato a monitorare var current_location; // memorizza la posizione corrente dell'utente viewModel.is_tracking = false; // se la posizione dell'utente è attualmente monitorata o non //viewModel.latitude = 15.447819409392789; //viewModel.longitude = 120.93888133764267; //viewModel.zoom = 20; var total_distance = 0; var total_steps = 0; var locations = []; // array che memorizzerà le posizioni // var mapView; // var marker = new mapsModule.Marker (); if (! geolocation.isEnabled ()) // controlla se la geolocalizzazione non è abilitata geolocation.enableLocationRequest (); // richiede all'utente di abilitarlo // next: aggiungi il codice per ottenere la posizione corrente dell'utente
Successivamente, aggiungi il codice per ottenere la posizione corrente dell'utente. Questo codice viene eseguito quando l'utente tocca il pulsante per avviare e arrestare il rilevamento della posizione. Il geolocation.getCurrentLocation () il metodo viene utilizzato per ottenere la posizione corrente.
Qui abbiamo specificato tre opzioni: desiredAccuracy, updateDistance, e tempo scaduto. desiredAccuracy ti permette di specificare la precisione in metri. Ha due valori possibili: Accuracy.high, che è di circa 3 metri, e Accuracy.any, che è di circa 300 metri. updateDistance specifica la differenza (in metri) tra la posizione precedente e la posizione corrente prima che si aggiorni. infine, tempo scaduto specifica quanti millisecondi attendono una posizione.
Una volta ricevuta la posizione, la impostiamo come START_LOCATION e spingerlo sul posizioni array. In seguito, questa posizione verrà utilizzata insieme al primo percorso che verrà recuperato dalla visualizzazione della posizione corrente dell'utente per determinare la distanza percorsa.
viewModel.toggleTracking = function () if (geolocation.isEnabled ()) this.set ('is_tracking',! viewModel.is_tracking); // capovolgi il cursore per il tracciamento se (viewModel.is_tracking) geolocation.getCurrentLocation (desiredAccuracy: Precisione.high, // 3 metri di accuratezza updateDistance: 5, // 5 metri timeout: 2000 // 2 secondi). then (function (loc) if (loc) start_location = loc; locations.push (start_location); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude', loc. longitudine);, function (e) dialogs.alert (e.message);); // successivo: aggiungi il codice per vedere la posizione corrente dell'utente else // next: aggiungi il codice per interrompere la visualizzazione della posizione corrente dell'utente else dialogs.alert ("Abilita la geolocalizzazione"); Per ottenere la posizione corrente, usiamo il geolocation.watchLocation () funzione. Questa funzione è simile a setInterval () funziona in JavaScript, perché esegue anche la funzione di callback ripetutamente finché non la interrompi con geolocation.clearWatch () funzione. La funzione di callback viene chiamata automaticamente in base a updateDistance e minimumUpdateTime.
Nel codice sottostante, la posizione verrà aggiornata se è distante almeno 5 metri dalla posizione precedente che è stata recuperata. Ma questo aggiornamento avverrà solo ogni 5 secondi. Ciò significa che se l'utente non ha camminato di 5 metri o più entro 5 secondi, la posizione non verrà aggiornata.
watchId = geolocation.watchLocation (function (loc) if (loc) current_location = loc; // next: aggiungi il codice per ottenere la distanza tra due posizioni, function (e) dialogs.alert (e.message); , desiredAccuracy: Accuracy.high, updateDistance: 5, // 5 metri minimumUpdateTime: 5000 // update ogni 5 secondi);
Una volta che l'utente indica che desidera interrompere il tracciamento, è necessario chiamare il geolocation.clearWatch () funzione. È inoltre necessario reimpostare il resto dei valori che vengono aggiornati ogni volta che viene modificata la posizione.
geolocation.clearWatch (watchId); // smettere di guardare la posizione dell'utente total_distance = 0; total_steps = 0; locations = []; viewModel.set ('distance', "distance journey:" + total_distance + "meters"); viewModel.set ('steps', "steps:" + total_steps);Ora siamo pronti per ottenere la distanza. Questo può essere fatto chiamando il geolocation.distance () funzione. Questa funzione accetta due Posizione oggetti come argomenti, quindi useremo le ultime due posizioni che sono state inviate al posizioni array per determinare la distanza (in metri) percorsa dall'utente da una posizione precedentemente registrata a quella corrente. Da lì, possiamo usare una conversione approssimativa da metri al numero di passi - dico approssimativo perché non tutte le persone percorreranno la stessa distanza in un unico passaggio.
Dopo di ciò, possiamo solo aggiungere il risultato distanza e passaggi al distanza totale e TOTAL_STEPS così possiamo tenere traccia della distanza totale e dei passi che hanno intrapreso da quando hanno iniziato a tracciare la loro posizione.
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])); // ottiene la distanza tra le ultime due posizioni var steps = Math.round (distanza * 1.3123); // determina il numero approssimativo di passi // aggiungi la distanza attuale alla distanza totale percorsa total_distance = total_distance + distance; total_steps = total_steps + steps; // aggiorna l'interfaccia utente viewModel.set ('distance', "distance journey:" + total_distance + "meters"); viewModel.set ('steps', "steps:" + total_steps); A questo punto, ora puoi iniziare a testare l'app utilizzando l'emulatore GPS che ho menzionato prima. Nota che devi colpire salvare sul main-view-model.js file per attivare l'aggiornamento di un'app.
Quindi seleziona una posizione nell'emulatore GPS in modo che una volta recuperata una nuova posizione venga recuperata dall'app. Se non lo fai, per impostazione predefinita verrà eseguito il percorso Googleplex a Mountain View, in California. Ciò significa che la prossima volta che sceglierai una posizione sull'emulatore, salterà da questa posizione alla posizione che hai scelto. Se è lontano, otterrai un numero davvero grande per la distanza e i passaggi.
In alternativa, è possibile testare su un dispositivo reale con Internet e GPS abilitati. A questo punto è richiesto solo il GPS, ma una volta aggiunto Google Maps, l'app necessita di una connessione Internet.
Ora utilizzeremo Google Maps per aggiungere una mappa che mostra la posizione corrente dell'utente.
Il plugin tns aggiunge nativescript-google-maps-sdk
Una volta installato, è necessario copiare i file di risorse stringa del modello per Android:
cp -r node_modules / nativescript-google-maps-sdk / platforms / android / res / valori app / App_Resources / Android /
Quindi, apri il app / App_Resources / Android / Valori / nativescript_google_maps_api.xml file e aggiungi la tua chiave API di Google Maps (chiave del server):
LA TUA API GOOGLE MAPS QUI
Assicurati di aver abilitato l'API di Google Maps per Android dalla Google Console prima di provare a utilizzarlo.
Per la mappa, apri il main-page.xml file e dovresti vedere quanto segue:
Qui abbiamo specificato tre opzioni (longitudine, latitudine, e zoom) e una funzione da eseguire una volta che la mappa è pronta. longitudine e latitudine specificare la posizione che si desidera visualizzare sulla mappa. Il zoom specifica il livello di zoom della mappa. mapReady è dove specifichiamo la funzione per aggiungere il marcatore sulla mappa. Questo indicatore rappresenta la posizione corrente dell'utente, quindi verrà reso al centro della mappa.
Per impostazione predefinita, questo non funzionerà poiché non hai ancora aggiunto la definizione dello schema per le mappe. Quindi nel tuo Pagina elemento, aggiungi la definizione per mappe elemento:
Una volta eseguita questa operazione, un'istanza della mappa di Google deve essere visualizzata direttamente sotto il pulsante per il rilevamento della posizione. Non avrà ancora nessuna mappa dal latitudine e longitudine non sono stati ancora specificati Per farlo, torna al main-view-model.js file e rimuovere i commenti per le linee di codice per lavorare con Google Maps:
// coordinate predefinite viewModel.latitude = 15.447819409392789; viewModel.longitude = 120.93888133764267; viewModel.zoom = 20; // livello di zoom della mappa predefinito var mapView; // variabile per la memorizzazione dell'istanza della mappa corrente var marker = new mapsModule.Marker (); // variabile per la memorizzazione dell'istanza dell'indicatore
Poiché abbiamo già dichiarato le coordinate di default per il marker, possiamo effettivamente tracciare un marker una volta che la mappa è pronta:
viewModel.onMapReady = function (args) mapView = args.object; // ottiene la vista della mappa marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); // imposta la posizione del marker sulla mappa mapView.addMarker (marker); // aggiungi l'indicatore alla mappa
Successivamente, dobbiamo aggiornare la posizione dell'indicatore una volta che l'utente inizia a tracciare la loro posizione. Puoi farlo all'interno della funzione di callback di successo per getCurrentLocation () funzione:
locations.push (START_LOCATION); // rimuove i commenti per questi: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Abbiamo anche bisogno di aggiornarlo quando la posizione dell'utente viene aggiornata (all'interno della funzione di callback di successo per watchLocation):
current_location = loc; locations.push (loc); // rimuove i commenti per questi: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Una volta fatto, una mappa che mostra la posizione predefinita deve essere mostrata nell'app.
In questa esercitazione, hai creato un'app NativeScript che consente all'utente di tenere traccia della distanza percorsa e del numero approssimativo di passaggi effettuati per coprire tale distanza. Hai anche utilizzato Google Maps per consentire all'utente di visualizzare la posizione corrente. In questo modo, hai imparato a utilizzare la geolocalizzazione e i plug-in di Google Maps per NativeScript.
Questo è solo l'inizio! Nei prossimi post di questa serie, aggiungeremo alla nostra app un database locale, notifiche push e altre fantastiche funzionalità.
Nel frattempo, controlla alcuni dei nostri altri post su NativeScript e codifica mobile multipiattaforma.
Per un'introduzione completa a NativeScript, prova il nostro corso sui video Code a Mobile App con NativeScript. In questo corso, Keyvan Kasaei ti mostrerà passo passo come costruire una semplice applicazione. Lungo la strada, imparerai come implementare un semplice flusso di lavoro dell'app con le richieste di rete, un'architettura MVVM e alcuni dei più importanti componenti dell'interfaccia utente di NativeScript. Alla fine capirai perché dovresti prendere in considerazione NativeScript per il tuo prossimo progetto di app per dispositivi mobili.
