Benvenuti alla seconda e ultima parte di questa serie di tutorial sullo sviluppo di un'applicazione Exercise Tracker con PhoneGap. In questo tutorial, completeremo la pagina Track Workout e completeremo l'app creando le pagine History e Track Info.

Salvataggio dei dati GPS

Quando l'utente fa clic su Interrompi il monitoraggio pulsante, dobbiamo smettere di seguire la loro posizione GPS e salvare tutti i punti GPS che sono stati registrati (tracking_data) nel database. Reimposterà anche la casella di immissione del testo (nel caso in cui desideri registrare immediatamente un altro allenamento) e visualizzeremo un messaggio che abbiamo interrotto il rilevamento della posizione.

PhoneGap fornisce sia l'archiviazione locale basata su browser sia un database SQLite come metodi di memorizzazione dei dati sul telefono. Il database SQL è molto più potente (a causa del fatto che è possibile specificare schemi di tabelle), ma ha un costo di complessità del codice. L'archiviazione locale è un semplice archivio di chiavi / valori che è facile da configurare e utilizzare. I dati sono memorizzati usando il setItem (chiave, valore) metodo e recuperato usando il getItem (chiave) metodo.

Nell'app ExerciseTracker, dobbiamo archiviare tracking_data (la matrice di oggetti Posizione). Impostiamo la chiave per essere track_id (il testo / ID che l'utente ha inserito per il loro esercizio) e il valore da rappresentare in una stringa di un oggetto JSON di tracking_data. Siamo costretti a convertire questo array in JSON perché Storage locale può solo memorizzare stringhe.

 $ ("# startTracking_stop"). live ('click', function () // Interrompe il tracciamento dell'utente navigator.geolocation.clearWatch (watch_id); // Salva i dati di tracciamento window.localStorage.setItem (track_id, JSON.stringify (tracking_data)); // Reimposta watch_id e tracking_data var watch_id = null; var tracking_data = null; // Tidy up dell'interfaccia utente $ ("# track_id"). val (""). show (); $ ("# startTracking_status ") .html (" Allenamento tracciamento interrotto: "+ track_id +""););

La tua applicazione ora può tracciare gli allenamenti dell'utente e memorizzare dove sono andati al telefono!

Scorciatoie di sviluppo utili

Ora aggiungeremo all'app alcune funzionalità che aiutano a ridurre i tempi di sviluppo. Nella Home page di ExerciseTracker, ricorderai i pulsanti "Cancella memoria locale" e "Carica dati GPS di semi". Nel primo tutorial, abbiamo solo dichiarato il markup per loro. Ora codificheremo la funzionalità.

Pulsanti "Cancella archiviazione locale" e "Carica dati GPS di semi" nella Home page.

Come tutti i nostri eventi gestiti in ExerciseTracker, usiamo il jQuery vivere() funzione per ascoltare l'evento click. Se viene attivato il pulsante "Cancella archiviazione locale", chiamiamo il pulsante window.localStorage.clear () metodo che cancella tutte le voci nella memoria locale. Se viene attivato il pulsante "Carica dati GPS", inseriamo alcuni dati fittizi GPS nel database.

 $ ("# home_clearstorage_button"). live ('click', function () window.localStorage.clear ();); $ ("# home_seedgps_button"). live ('click', function () window.localStorage.setItem ('Sample block', '["timestamp": 1335700802000, "coords": "heading": null, " altitudine ": null," longitudine ": 170,33488333333335," accuratezza ": 0," latitudine ": - 45,87475166666666," velocità ": null," altitudeAccuracy ": null, " timestamp ": 1.335.700,803 milioni," coordinate ":  "heading": null, "quota": null, "longitudine": 170,33481666666665, "accuratezza": 0, "latitudine": - 45,87,465 mila, "velocità": null, "altitudeAccuracy": null,  "timestamp": 1335700804000, "coordinate":  "heading": null, "quota": null, "longitudine": 170,33426999999998, "accuratezza": 0, "latitudine": - 45,873708333333326, "velocità": null, "altitudeAccuracy": null ,  "timestamp": 1335700805000, "coordinate":  "heading": null, "quota": null, "longitudine": 170,33318333333335, "accuratezza": 0, "latitudine": - 45,87178333333333, "velocità": null , "altitudeAccuracy": null,  "timestamp": 1335700806000, "coordinate":  "heading": null, "quota": null, "longitudine": 170,33416166666666, "accuratezza": 0, "latitudine": - 45.871478333333336, "Speed": null, "altitudeAccuracy": null,  "ti mestamp ": 1335700807000," coordinate ": " heading ": null," quota ": null," longitudine ": 170,33526833333332," accuratezza ": 0," latitudine ": - 45,873394999999995," velocità ": null," altitudeAccuracy" : null,  "timestamp": 1335700808000, "coordinate":  "heading": null, "quota": null, "longitudine": 170,33427333333336, "accuratezza": 0, "latitudine": - velocità 45,873711666666665, " ": null," altitudeAccuracy ": null, " timestamp ": 1335700809000," coordinate ": " heading ": null," quota ": null," longitudine ": 170,33488333333335," accuratezza ": 0," di latitudine ": -45,87475166666666," velocità ": null," altitudeAccuracy ": null] '); );

Pagina di storia

Pagina Storia Completata

La pagina della cronologia elenca tutti gli allenamenti che l'utente ha registrato. Quando fanno clic su un allenamento, apriamo la pagina Info traccia che contiene informazioni dettagliate (come la distanza percorsa, il tempo impiegato e il percorso tracciato su una mappa di Google). Di seguito è riportato il markup per la pagina della cronologia.

 
 
 
Storia
 
 
 
Casa
 
Monitora l'allenamento
 
Storia
 
 
 
 
  
 
 
 

Ora abbiamo bisogno di codificare la funzionalità. Quando l'utente carica la pagina, è necessario generare un elenco HTML contenente tutti gli allenamenti registrati. Perché window.localStorage è solo un altro oggetto Javascript, possiamo chiamare il lunghezza() metodo su di esso per scoprire quanti allenamenti l'utente ha registrato. Possiamo quindi scorrere il nostro database chiamando il window.localStorage.key () metodo (che restituisce una chiave per un dato indice) per trovare i nomi di tutti gli allenamenti.

 // Quando l'utente visualizza la pagina della cronologia $ ('# cronologia'). Live ('pageshow', function () // Conta il numero di voci in localStorage e mostra queste informazioni all'utente tracks_recorded = window.localStorage.length ; $ ("# tracks_recorded"). html (""+ tracks_recorded +" allenamento (i) registrato "); // Svuota l'elenco delle tracce registrate $ (" # history_tracklist "). empty (); // Iterate su tutte le tracce registrate, popolando l'elenco per (i = 0; i"+ window.localStorage.key (i) +""); // // Indica a jQueryMobile di aggiornare l'elenco $ (" # history_tracklist "). Listview ('refresh'););

La visualizzazione della pagina Cronologia ora dovrebbe mostrare tutti gli allenamenti tracciati.

Traccia la pagina delle informazioni

La pagina Info traccia visualizza informazioni su un allenamento individuale che l'utente ha completato. Calcoleremo la distanza percorsa, il tempo impiegato per completare il loro allenamento e anche il percorso effettuato su una mappa di Google.

Pagina di informazioni sulla traccia completata

 
 
 
Visualizzazione dell'allenamento singolo
 
 
 
Casa
 
Monitora l'allenamento
 
Storia
 
 
 
 
  
 
 

La pagina Info traccia visualizza informazioni dinamiche, non statiche. Il contenuto della pagina dipende da quale allenamento l'utente ha fatto clic sulla pagina Cronologia. Quindi, abbiamo bisogno di un modo per comunicare quale allenamento è stato fatto clic sulla pagina Info traccia.

Quando l'utente fa clic su un collegamento di allenamento, impostiamo a track_id attributo al

 $ ("# history_tracklist li a"). live ('click', function () $ ("# track_info"). attr ("track_id", $ (this) .text ());); // Quando l'utente visualizza la pagina Info traccia $ ('# track_info'). Live ('pageshow', function () // Trova il track_id dell'allenamento che stanno visualizzando var key = $ (this) .attr (" track_id "); // Aggiorna l'intestazione della pagina Info traccia al track_id $ (" # track_info div [data-role = header] h1 "). text (key); // Ottieni tutti i dati GPS per i dati var specifici dell'allenamento = window.localStorage.getItem (chiave); // Trasforma i dati GPS con stringa in un oggetto JS data = JSON.parse (dati);

Calcolo della distanza dell'allenamento

Chris Veness ha scritto una grande spiegazione su come calcolare la distanza tra due coordinate GPS. Ho usato il suo codice come base per il gps_distance funzione.

 function gps_distance (lat1, lon1, lat2, lon2) // http://www.movable-type.co.uk/scripts/latlong.html var R = 6371; // km var dLat = (lat2-lat1) * (Math.PI / 180); var dLon = (lon2-lon1) * (Math.PI / 180); var lat1 = lat1 * (Math.PI / 180); var lat2 = lat2 * (Math.PI / 180); var a = Math.sin (dLat / 2) * Math.sin (dLat / 2) + Math.sin (dLon / 2) * Math.sin (dLon / 2) * Math.cos (lat1) * Math.cos ( Lat2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1-a)); var d = R * c; ritorno d; 

Ora che abbiamo una funzione per calcolare la distanza tra due coordinate GPS e un array pieno di coordinate GPS dell'utente registrato, possiamo sommare tutte le distanze individuali tra i punti adiacenti per calcolare la distanza totale percorsa dall'utente.

 // Calcola la distanza totale percorsa total_km = 0; per (i = 0; i < data.length; i++) if(i == (data.length - 1)) break;  total_km += gps_distance(data[i].coords.latitude, data[i].coords.longitude, data[i+1].coords.latitude, data[i+1].coords.longitude);  total_km_rounded = total_km.toFixed(2);

Calcolo della durata dell'allenamento

Ciascuno del GPS Posizione oggetti ha a timestamp attributo. Semplicemente sottraiamo il timestamp della prima posizione GPS registrata dall'ultima posizione GPS registrata per darci il tempo totale impiegato per l'allenamento in millisecondi. Quindi eseguiamo alcune conversioni per calcolare il tempo totale in minuti e secondi.

 // Calcola il tempo totale impiegato per la traccia start_time = new Date (data [0] .timestamp) .getTime (); end_time = new Date (data [data.length-1] .timestamp) .getTime (); total_time_ms = end_time - start_time; total_time_s = total_time_ms / 1000; final_time_m = Math.floor (total_time_s / 1000); final_time_s = total_time_s - (final_time_m * 60); // Visualizza la distanza totale e il tempo $ ("# track_info_info"). Html ('Viaggiato '+ total_km_rounded +' km in '+ final_time_m +' m e '+ final_time_s +' s');

Tracciare la rotta sulla mappa di Google

Infine, dobbiamo tracciare il percorso di allenamento su una mappa di Google. Iniziamo impostando la latitudine e la longitudine iniziale su cui verrà centrata la mappa di Google come coordinate del primo punto GPS. Dichiariamo quindi l'oggetto options che contiene varie impostazioni per la mappa di Google. Creiamo quindi la mappa, specificando che vogliamo l'elemento HTML con l'ID map_canvas per tenere la mappa.

 // Imposta il Lat iniziale e il Long della Google Map var myLatLng = new google.maps.LatLng (data [0] .coords.latitude, data [0] .coords.longitude); // Opzioni di Google Map var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP; // Crea la mappa di Google, imposta le opzioni var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

Se la tua mappa non si sta caricando, assicurati di controllare che stai fornendo la chiave API corretta in > dell'API di Google Maps in index.html. Con la nostra mappa creata, possiamo quindi tracciare il percorso dell'utente. Creiamo un array e lo riempiamo con istanze di google.maps.LatLng sostituendo i valori di ciascuno dei punti GPS. Quindi creiamo a google.maps.PolyLine basato su quelle coordinate e applica la linea alla mappa.

 var trackCoords = []; // Aggiungi ciascuna voce GPS a un array per (i = 0; i 
 
Conclusione
 
Questo conclude il tutorial sulla creazione dell'app ExerciseTracker PhoneGap. Spero che tu abbia imparato molto sulle varie tecnologie che abbiamo usato. Se avete domande per favore pubblicatele nei commenti qui sotto!



		
			
	   
	




Codice