Share
Bine ați venit la partea a doua și ultima din această serie de tutoriale privind dezvoltarea aplicației Exercise Tracker cu PhoneGap. În acest tutorial, vom termina pagina de antrenament și vom completa aplicația creând paginile Istoric și informații despre melodie.
Când utilizatorul face clic pe Opriți urmărirea , trebuie să oprim urmărirea locației GPS și să salvăm toate punctele GPS înregistrate (tracking_data) în baza de date. De asemenea, vom reseta caseta de introducere a textului (în cazul în care doresc să înregistreze un alt antrenament imediat) și vom afișa un mesaj care ne-a oprit urmărirea locației.
PhoneGap oferă atât stocarea locală bazată pe browser, cât și o bază de date SQLite ca metode de stocare a datelor pe telefon. Baza de date SQL este mult mai puternică (datorită faptului că puteți specifica scheme de tabele), dar vine la costul complexității codului. Depozitarea locală este un magazin de chei / valoare simplu, ușor de configurat și utilizat. Datele sunt stocate utilizând setItem (cheie, valoare) , și recuperate folosind getItem (cheie) metodă.
În aplicația ExerciseTracker, trebuie să stocăm tracking_data (matricea obiectelor de poziție). Am stabilit cheia pentru a fi track_id (textul / ID-ul introdus de utilizator pentru exercițiul lor) și valoarea de reprezentare a șirului unui obiect JSON de tracking_data. Suntem obligați să convertim acest matrice la JSON, deoarece stocarea locală poate stoca numai șiruri de caractere.
Accentsconagua
$ ("# startTracking_stop") live ('click', functie () // Stop urmarirea userului navigator.geolocation.clearWatch (watch_id); // Salveaza fereastra de urmarire window.localStorage.setItem (track_id, JSON.stringify ("track_data")); // Resetați watch_id și tracking_data var watch_id = null; var tracking_data = null; // Tidy până la UI $ ("# track_id"). ") .html (" Antrenament de urmărire oprit: "+ track_id +"");); Aplicația dvs. poate urmări antrenamentele utilizatorilor și poate stoca unde au mers pe telefon!
Acum vom adăuga câteva aplicații care ajută la reducerea timpului de dezvoltare. În pagina de pornire a aplicației ExerciseTracker, vă veți aminti butoanele "Ștergeți locația locală" și "Încărcați datele GPS". În primul tutorial, am declarat doar marcajul pentru ei. Acum vom codifica funcționalitatea.
"Ștergeți stocarea locală" și "Încărcați datele GPS de însămânțare" din pagina principală.
Ca toate manipularea evenimentului în ExerciseTracker, vom folosi jQuery Trăi() funcția de a asculta pentru evenimentul clic. Dacă este declanșat butonul "Ștergeți locația locală", sunăm window.localStorage.clear () care șterge toate intrările din spațiul de stocare local. Dacă se declanșează butonul "Încărcați datele din GPS", vom introduce în baza de date câteva date GPS fictive.
$ ("# home_clearstorage_button") live ('click', function () window.localStorage.clear ();); $ "timer": 1335700802000, "coords": "heading": null, " altitudine ": null," longitudine ": 170.33488333333335" precizie ": 0" latitudine ": - 45.87475166666666," viteză ": null," altitudeAccuracy ": null, " timestamp ": 1335700803000," coords ": "rubrica": null "altitudine": null, "longitudine": 170.33481666666665 "precizie": 0 "latitudine": - 45.87465, "viteză": null, "altitudeAccuracy": null, "timestamp": 1335700804000, "coords": "rubrica": null "altitudine": null, "longitudine": 170.33426999999998 "precizie": 0 "latitudine": - 45.873708333333326, "viteză": null, "altitudeAccuracy": null , "timestamp": 1335700805000, "coords": "rubrica": nul "altitudine": null, "longitudine": 170.33318333333335, "precizie": 0 "latitudine": - 45.87178333333333 "speed": null "altitudeAccuracy": null, "timestamp": 1335700806000, "coords": "rubrica": null "altitudine": null, "longitudine": 170.33416166666666, "precizie": 0 "latitudine": - 45.871478333333336, "viteza": null, "altitudeAccuracy": null, "ti mestamp ": 1335700807000," coords ": " rubrica ": nul" altitudine ": null," longitudine ": 170.33526833333332," precizie ": 0" latitudine ": - 45.873394999999995," viteză ": null," altitudeAccuracy“ : null, "timestamp": 1335700808000, "coords": "rubrica": nul "altitudine": null, "longitudine": 170.33427333333336, "precizie": 0 "latitudine": - 45.873711666666665 "viteză ": null," altitudeAccuracy ": null, " timestamp ": 1335700809000," coords ": " rubrica ": nul" altitudine ": null," longitudine ": 170.33488333333335" precizie ": 0" latitudine ": -45.87475166666666" speed ": null," altitudeAccuracy ": null] '); ); 
Istoric completat
Pagina de istoric prezintă toate antrenamentele pe care le-a înregistrat utilizatorul. Atunci când fac clic pe un antrenament, deschidem pagina Informații despre melodie care conține informații detaliate (cum ar fi distanța parcursă, timpul petrecut și traseul trasat pe o hartă Google). Mai jos este marcajul paginii de istorie.
Istorie
- Acasă
- Urmăriți antrenamentul
- Istorie
Acum trebuie să codificăm funcționalitatea. Când utilizatorul încarcă pagina, trebuie să generăm o listă HTML care conține toate antrenamentele înregistrate. pentru că window.localStorage este doar un alt obiect Javascript, putem apela lungime() metodă pe ea pentru a afla câte antrenamente a înregistrat utilizatorul. Putem apoi să repetăm baza de date prin care sunăm window.localStorage.key () (care returnează o cheie pentru un anumit index) pentru a găsi numele tuturor antrenamentelor.
// Atunci când utilizatorul vizualizează pagina istoricului $ ('# history'). (Live) ('pageshow', funcția () // Contorizarea numărului de intrări în localStorage și afișarea acestor informații utilizatorului track_recorded = window.localStorage.length ; $ ("# tracks_recorded"); html (""+ tracks_recorded +" antrenamentul (i) înregistrate "); // Goliți lista de piste înregistrate $ (" # history_tracklist ") empty (); // Iterați peste toate pistele înregistrate, populând lista pentru (i = 0; i"+ window.localStorage.key (i) +""); // // Spuneți jQueryMobile pentru a reîmprospăta lista $ (" # history_tracklist "). Listview ('refresh');); Afișarea paginii Istoric ar trebui să afișeze acum toate antrenamentele urmărite.
Pagina Info despre melodie afișează informații despre un antrenament individual finalizat de utilizator. Vom calcula distanța pe care au călătorit-o, timpul necesar pentru finalizarea antrenamentului și traseul efectuat pe o hartă Google.
Pagina finalizată de informații despre melodie
Vizualizarea unui antrenament unic
- Acasă
- Urmăriți antrenamentul
- Istorie
Pagina Info despre melodie afișează informații dinamice, nu statice. Conținutul paginii depinde de ce antrenament a făcut clic utilizatorul de pe pagina Istoric. Așadar, avem nevoie de un mod de a comunica ce antrenament a fost făcut clic pe pagina Informații despre melodie.
Atunci când utilizatorul face clic pe un link de antrenament, setăm a track_id atribut la element. Apoi, când este încărcată pagina Info despre melodie, vom prelua acest lucru track_id și afișați informațiile despre antrenament corespunzătoare.
$ ("# history_tracklist li a") live ('click', function () $ ("# track_info"); // atunci când utilizatorul vizualizează pagina Info despre piesă $ ('# track_info') live ('pageshow', funcția () // Găsiți piesa track_id a antrenamentului pe care îl vizualizează var key = $ (this) .attr (" track_id "); // Actualizați antetul paginii Info despre piesă la track_id $ (" # track_info div [data-role = header] h1 "). = window.localStorage.getItem (cheie); // Transformați datele GPS întărite într-un obiect de date JS = JSON.parse (data); Chris Veness a scris o explicație foarte bună cu privire la modul de calcul al distanței dintre două coordonate GPS. I - am folosit codul ca bază pentru gps_distance funcţie.
funcția 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 lat2); var c = 2 * Math.atan2 (Math.sqrt (a), Math.sqrt (1-a)); var d = R * c; retur d;
Acum, că avem o funcție de a calcula distanța dintre două coordonate GPS și o matrice plină de coordonate GPS pe care utilizatorul le-a înregistrat, putem să sumăm toate distanțele individuale dintre punctele adiacente pentru a calcula distanța totală parcursă de utilizator.
// Calculați distanța totală parcursă total_km = 0; pentru (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);
Fiecare dintre GPS Poziţie obiectele au a timestamp-ul atribut. Pur și simplu scădem marcajul de timp al primei poziții GPS înregistrate de la ultima poziție GPS înregistrată pentru a ne da timpul total necesar antrenamentului în milisecunde. Apoi vom face unele conversii pentru a calcula timpul total în minute și secunde.
// Calculați timpul total pentru piesa start_time = data nouă (data [0] .timestamp) .getTime (); end_time = data nouă (date [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); // Afișați distanța și timpul total $ ("# track_info_info"). Html ('Călătorit '+ total_km_rounded +' km în '+ final_time_m +' m și '+ final_time_s +'„); În cele din urmă, trebuie să trasăm traseul de antrenament pe o hartă Google. Începem prin a seta latitudinea și longitudinea inițială pe care harta Google va fi centrat pe coordonatele primului punct GPS. Apoi declarăm obiectul de opțiuni care conține setări diferite pentru Google Map. Apoi, creăm harta, specificând că vrem elementul HTML cu ID-ul map_canvas pentru a ține harta.
// Stabiliți versiunea inițială Lat și Lungă a Google Map var myLatLng = noua google.maps.LatLng (date [0] .coords.latitude, data [0] .coords.longitude); // Opțiuni Google Map var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP; // Creați harta Google, setați opțiunile var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions); Dacă harta dvs. nu se încarcă, asigurați-vă că ați furnizat cheia API corectă în >google.maps.LatLng înlocuind valorile fiecărui punct GPS. Apoi creăm un google.maps.PolyLine bazându-se pe acele coordonate și aplicând linia pe hartă.
