Share
Welkom bij het tweede en laatste deel van deze serie tutorials over het ontwikkelen van een Exercise Tracker-applicatie met PhoneGap. In deze zelfstudie voltooien we de pagina Trackworkout en vullen we de app aan door de pagina's History en Track Info te maken.
Wanneer de gebruiker op de knop klikt Stoppen met volgen knop, moeten we stoppen met het volgen van hun GPS-locatie en alle GPS-punten opslaan die werden opgenomen (tracking_data) in de database. We zullen ook het tekstinvoervak resetten (voor het geval dat ze meteen een andere training willen opnemen) en we zullen een bericht weergeven dat we locatie tracking gestopt zijn.
PhoneGap biedt zowel browsergebaseerde lokale opslag als een SQLite-database als methoden voor het opslaan van gegevens op de telefoon. De SQL-database is veel krachtiger (vanwege het feit dat u tabelschema's kunt opgeven), maar dit gaat ten koste van de complexiteit van de code. Lokale opslag is een eenvoudige sleutel / waarde-winkel die eenvoudig is in te stellen en te gebruiken. Gegevens worden opgeslagen met behulp van de setItem (sleutel, waarde) methode, en opgehaald met behulp van de getItem (sleutel) methode.
In de ExerciseTracker-app moeten we opslaan tracking_data (de reeks Positie-objecten). We stellen de sleutel om te zijn Track-id (de tekst / ID die de gebruiker heeft ingevoerd voor zijn oefening) en de waarde om een tekenreeksrepresentatie van een JSON-object te zijn tracking_data. We zijn genoodzaakt om deze array naar JSON te converteren, omdat Local Storage alleen strings kan opslaan.
Accentsconagua
$ ("# startTracking_stop"). live ('klik', functie () // stop het volgen van de gebruiker navigator.geolocation.clearWatch (watch_id); // Bewaar het trackinggegevensvenster.localStorage.setItem (track_id, JSON.stringify (tracking_data)); // Reset watch_id en tracking_data var watch_id = null; var tracking_data = null; // Ruim de UI $ op ("# track_id"). val (""). show (); $ ("# startTracking_status ") .html (" stopte het volgen van de training: "+ track_id +"");); Uw toepassing kan nu de trainingen van de gebruiker volgen en opslaan waar ze zijn gegaan op de telefoon!
Nu zullen we een paar functies aan de app toevoegen die de ontwikkelingstijd helpen verkorten. Op de startpagina van ExerciseTracker, onthoudt u de knoppen "Wis lokale GPS" en "Lading GPS-gegevens laden". In de eerste zelfstudie hebben we de opmaak alleen voor hen verklaard. Nu zullen we de functionaliteit coderen.
"Clear Local Storage" en "Load Seed GPS Data" -knoppen op de startpagina.
Zoals al onze eventafhandeling in ExerciseTracker gebruiken we de jQuery leven() functie om naar de klikgebeurtenis te luisteren. Als de knop "Lokale opslag wissen" wordt geactiveerd, bellen we de window.localStorage.clear () methode die alle vermeldingen in de lokale opslag verwijdert. Als de knop "Load Seed GPS Data" wordt geactiveerd, voegen we enkele dummy GPS-gegevens in de database in.
$ ("# home_clearstorage_button"). live ('klik', functie () window.localStorage.clear ();); $ ("# home_segps_button"). live ('klik', functie () window.localStorage.setItem ('Voorbeeldblok', '["tijdstempel": 1335700802000, "coords": "heading": null, " altitude ": null," lengte ": 170,33488333333335" nauwkeurigheid ": 0," breedte ": - 45,87475166666666," speed ": null," altitudeAccuracy ": null, " timestamp ": 1335700803000," coords ": "rubriek": null, "hoogte": null, "lengte": 170,33481666666665 "nauwkeurigheid": 0, "breedte": - 45,87465, "speed": null, "altitudeAccuracy": null, "timestamp": 1335700804000, "coords": "titel": null, "hoogte": null, "lengte": 170,33426999999998 "nauwkeurigheid": 0, "breedte": - 45,873708333333326, "speed": null, "altitudeAccuracy": null , "timestamp": 1335700805000, "coords": "titel": null, "hoogte": null, "lengte": 170,33318333333335 "nauwkeurigheid": 0, "breedte": - 45,87178333333333, "speed": null , "altitudeAccuracy": null, "timestamp": 1335700806000, "coords": "titel": null, "hoogte": null, "lengte": 170,33416166666666 "nauwkeurigheid": 0, "breedte": - 45,871478333333336, "speed" null "altitudeAccuracy" null, "ti mestamp ": 1335700807000," coords ": " titel ": null," hoogte ": null," lengte ": 170,33526833333332" nauwkeurigheid ": 0," breedte ": - 45,873394999999995," speed ": null," altitudeAccuracy" : null, "timestamp": 1335700808000, "coords": "titel": null, "hoogte": null, "lengte": 170,33427333333336 "nauwkeurigheid": 0, "breedte": - 45,873711666666665, "speed ": null," altitudeAccuracy ": null, " timestamp ": 1335700809000," coords ": " titel ": null," hoogte ": null," lengte ": 170,33488333333335" nauwkeurigheid ": 0," breedtegraad ": -45,87475166666666," speed "null" altitudeAccuracy ": null]); ); 
Voltooide geschiedenispagina
Op de geschiedenispagina staan alle trainingen die de gebruiker heeft opgenomen. Wanneer ze op een training klikken, openen we de pagina Track Info met gedetailleerde informatie (zoals afgelegde afstand, gebruikte tijd en route geplot op een Google Map). Hieronder staat de opmaak voor de geschiedenispagina.
Geschiedenis
- Huis
- Trainingen volgen
- Geschiedenis
Nu moeten we de functionaliteit coderen. Wanneer de gebruiker de pagina laadt, moeten we een HTML-lijst genereren met alle opgenomen trainingen. Omdat window.localStorage is gewoon een ander Javascript-object, we kunnen het lengte() methode om erachter te komen hoeveel trainingen de gebruiker heeft opgenomen. We kunnen dan onze database herhalen door de window.localStorage.key () methode (die een sleutel retourneert voor een bepaalde index) om de namen van alle trainingen te vinden.
// Wanneer de gebruiker de geschiedenispagina $ ('# history') bekijkt. Live ('pageshow', function () // Tel het aantal vermeldingen in localStorage en geef deze informatie weer aan de gebruiker tracks_recorded = window.localStorage.length ; $ ("# tracks_recorded"). html (""+ tracks_recorded +" workout (s) opgenomen "); // Leeg de lijst met opgenomen tracks $ (" # history_tracklist "). empty (); // Itereer over alle opgenomen tracks, vul de lijst voor (i = 0; i"+ window.localStorage.key (i) +""); // Laat jQueryMobile de lijst $ (" # history_tracklist ") .lijstview ('refresh');); Als u de pagina Geschiedenis bekijkt, worden nu alle bijgehouden trainingen weergegeven.
Op de pagina Trackinfo wordt informatie weergegeven over een individuele training die de gebruiker heeft voltooid. We berekenen de afstand die ze hebben afgelegd, de tijd die ze nodig hadden om hun training te voltooien en ook de route die werd afgelegd op een Google Map.
Voltooide trackinformatiepagina
Single Workout bekijken
- Huis
- Trainingen volgen
- Geschiedenis
De pagina Trackinfo geeft dynamische, niet statische informatie weer. De inhoud van de pagina is afhankelijk van de training waarop de gebruiker heeft geklikt op de pagina Geschiedenis. We hebben dus een manier nodig om te communiceren op welke training is geklikt naar de pagina Trackinfo.
Wanneer de gebruiker op een trainingslink klikt, stellen we een Track-id toeschrijven aan de element. Wanneer de Trackinfo-pagina is geladen, halen we dat op Track-id en toon de juiste trainingsinformatie.
$ ("# history_tracklist li a"). live ('klik', functie () $ ("# track_info"). attr ("track_id", $ (this) .text ());); // Wanneer de gebruiker de Trackinfo-pagina $ ('# track_info'). Live ('pageshow', function () bekijkt // Zoek de track_id van de workout die ze bekijken var key = $ (this) .attr (" track_id "); // Update de titelpagina van de Track Info naar de track_id $ (" # track_info div [data-role = header] h1 "). tekst (sleutel); // Krijg alle GPS-gegevens voor de specifieke workout var-gegevens = window.localStorage.getItem (key); // Verander de gestapelde GPS-gegevens in een JS-objectgegevens = JSON.parse (data); Chris Veness heeft een geweldige uitleg geschreven over het berekenen van de afstand tussen twee GPS-coördinaten. Ik gebruikte zijn code als basis voor de gps_distance functie.
functie 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; terugkeer d;
Nu we een functie hebben om de afstand tussen twee GPS-coördinaten te berekenen en een array vol met GPS-coördinaten die de gebruiker heeft geregistreerd, kunnen we alle individuele afstanden tussen aangrenzende punten optellen om de totale afstand die de gebruiker heeft afgelegd te berekenen.
// Bereken de totale afgelegde afstand total_km = 0; voor (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);
Elk van de GPS Positie objecten heeft een tijdstempel attribuut. We trekken eenvoudig de tijdstempel van de eerste geregistreerde GPS-positie af van de laatst geregistreerde GPS-positie om ons de totale tijd te geven die de training in milliseconden heeft genomen. Vervolgens voeren we enkele conversies uit om de totale tijd in minuten en seconden te berekenen.
// Bereken de totale tijd die voor de track is genomen 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); // Toon totale afstand en tijd $ ("# track_info_info"). Html ('Gereed '+ total_km_rounded +' km in '+ final_time_m +' m en '+ final_time_s +' s'); Ten slotte moeten we de trainingsroute uitzetten op een Google Map. We beginnen met het instellen van de intiale breedte- en lengtegraad waarop de Google Map gecentreerd wordt als de coördinaten van het eerste GPS-punt. Vervolgens declareren we het optie-object dat verschillende instellingen voor de Google Map bevat. Vervolgens maken we de kaart en geven we aan dat we het HTML-element met de ID willen hebben map_canvas om de kaart te houden.
// Stel de initiële Lat en Long in van de Google Map var myLatLng = new google.maps.LatLng (data [0] .coords.latitude, data [0] .coords.longitude); // Google Map-opties var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP; // Maak de Google Map, stel opties in var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions); Als uw kaart niet wordt geladen, moet u controleren of u de juiste API-sleutel verstrekt in de >google.maps.LatLng vervanging van de waarden van elk van de GPS-punten. We maken vervolgens een google.maps.PolyLine gebaseerd op die coördinaten en pas de lijn toe op de kaart.
