Bienvenue à la deuxième et dernière partie de cette série de didacticiels sur le développement d’une application Exercise Tracker avec PhoneGap. Dans ce tutoriel, nous terminerons la page Suivi des séances d'entraînement et compléterons l'application en créant les pages Historique et Infos de piste..

Sauvegarde des données GPS

Lorsque l'utilisateur clique sur le Arrêter le suivi bouton, nous devons cesser de suivre leur position GPS et enregistrer tous les points GPS enregistrés (tracking_data) dans la base de données. Nous réinitialiserons également la zone de saisie de texte (au cas où ils voudraient enregistrer immédiatement un autre entraînement) et nous afficherons un message indiquant que nous avons arrêté le suivi de la position..

PhoneGap fournit à la fois un stockage local basé sur un navigateur et une base de données SQLite comme méthodes de stockage des données sur le téléphone. La base de données SQL est beaucoup plus puissante (du fait que vous puissiez spécifier des schémas de table), mais elle entraîne des coûts liés à la complexité du code. Le stockage local est un simple magasin de clés / valeurs facile à configurer et à utiliser. Les données sont stockées à l'aide du setItem (clé, valeur) méthode et récupérée à l'aide du getItem (clé) méthode.

Dans l'application ExerciseTracker, nous devons stocker tracking_data (le tableau d'objets Position). Nous mettons la clé pour être track_id (le texte / l'ID entré par l'utilisateur pour son exercice) et la valeur d'être une représentation sous forme de chaîne d'un objet JSON de tracking_data. Nous sommes obligés de convertir ce tableau en JSON car le stockage local ne peut stocker que des chaînes..

 $ ("# startTracking_stop"). live ('clic', fonction () // Arrête de suivre l'utilisateur navigator.geolocation.clearWatch (watch_id); // enregistre la fenêtre de données de suivi.localStorage.setItem (track_id, JSON.stringify (tracking_data)); // Réinitialiser watch_id et tracking_data var watch_id = null; var tracking_data = null; // Rangez l'interface utilisateur $ ("# track_id"). val (""). show (); $ ("# startTracking_status ") .html (" Arrêté l’entraînement de suivi: "+ track_id +""););

Votre application peut maintenant suivre les entraînements de l'utilisateur et enregistrer l'endroit où il est allé au téléphone.!

Raccourcis utiles au développement

Nous allons maintenant ajouter quelques fonctionnalités à l'application qui aident à réduire le temps de développement. Sur la page d'accueil d'ExerciseTracker, vous vous souviendrez des boutons "Effacer le stockage local" et "Charger les données GPS d'origine". Dans le premier tutoriel, nous leur avons uniquement déclaré le balisage. Maintenant, nous allons coder la fonctionnalité.

Boutons "Clear Local Storage" et "Load Seed GPS Data" sur la page d'accueil.

Comme toute notre gestion des événements dans ExerciseTracker, nous utilisons le jQuery vivre() fonction pour écouter l'événement click. Si le bouton "Effacer le stockage local" est activé, nous appelons le window.localStorage.clear () méthode qui supprime toutes les entrées du stockage local. Si le bouton "Charger les données GPS de la graine" est activé, nous insérons des données GPS factices dans la base de données..

 $ ("# home_clearstorage_button"). live ('click', function () window.localStorage.clear ();); $ ("# home_seedgps_button"). live ('clic', fonction () window.localStorage.setItem ('Exemple de bloc', '["horodatage": 1335700802000, "coords": "rubrique": null, " altitude ": null," longitude ": 170.33488333333335," exactitude ": 0," latitude ": - 45.87475166666666," vitesse ": null," altitudeAccuracy ": null, " horodatage ": 1335700803000," coords ":: "cap": null, "altitude": null, "longitude": 170.33481666666665, "exactitude": 0, "latitude": - 45.87465, "vitesse": zéro, "altitudeAccuracy": null, "horodatage":: 1335700804000, "coords": "cap": null, "altitude": null, "longitude": 170.33426999999998, "exactitude": 0, "latitude": - 45.873708333333326, "vitesse": null, "altitudeAccuracy": null , "timestamp": 1335700805000, "coords": "rubrique": null, "altitude": null, "longitude": 170.33318333333335, "précision": 0, "latitude": - 45.87178333333333, "vitesse": null , "altitudeAccuracy": null, "timestamp": 1335700806000, "coords": "rubrique": null, "altitude": null, "longitude": 170.33416166666666, "exactitude": 0, "latitude": - 45.871478333333336, "speed": null, "altitudeAccuracy": null, "ti mestamp ": 1335700807000," coords ": " rubrique ": null," altitude ": null," longitude ": 170.33526833333332," précision ": 0," latitude ": - 45,873394999999995," vitesse ": null," altitudeAccuracy " : null, "timestamp": 1335700808000, "coords": "rubrique": null, "altitude": null, "longitude": 170.33427333333336, "précision": 0, "latitude": - 45.873711666666665, "vitesse ": null," altitudeAccuracy ": null, " horodatage ": 1335700809000," coords ": " rubrique ": null," altitude ": null," longitude ": 170.33488333333335," exactitude ": 0," latitude ": -45.87475166666666," speed ": null," altitudeAccuracy ": null] '); );

Page d'histoire

Historique complété

La page d'historique répertorie tous les entraînements que l'utilisateur a enregistrés. Lorsqu'ils cliquent sur un entraînement, nous ouvrons la page Infos de piste qui contient des informations détaillées (telles que la distance parcourue, le temps pris et l'itinéraire tracé sur une carte Google). Ci-dessous le balisage de la page d'historique.

 
 
 
L'histoire
 
 
 
Accueil
 
Suivre l'entraînement
 
L'histoire
 
 
 
 
  
 
 
 

Nous devons maintenant coder la fonctionnalité. Lorsque l'utilisateur charge la page, nous devons générer une liste HTML contenant tous les entraînements enregistrés. Parce que window.localStorage est juste un autre objet Javascript, on peut appeler le longueur() méthode pour savoir combien d’entraînements l’utilisateur a enregistré. Nous pouvons ensuite parcourir notre base de données en appelant le window.localStorage.key () méthode (qui retourne une clé pour un index donné) pour trouver les noms de tous les entraînements.

 // Lorsque l'utilisateur visualise la page d'historique $ ('# history'). Live ('pageshow', function () // Compter le nombre d'entrées dans localStorage et afficher cette information à l'utilisateur. Tracks_recorded = window.localStorage.length ; $ ("# pistes_enregistrées"). html (""+ pistes_enregistrées +" séance (s) enregistrée (s) "); // Vide la liste des pistes enregistrées $ (" # history_tracklist "). empty (); // Itère sur toutes les pistes enregistrées, en remplissant la liste pour (i = 0; i"+ window.localStorage.key (i) +""); // Dites à jQueryMobile d'actualiser la liste $ (" # history_tracklist "). Listview ('refresh'););

L'affichage de la page Historique devrait maintenant afficher tous les entraînements suivis..

Track Info Page

La page Informations sur la piste affiche des informations sur un entraînement individuel que l'utilisateur a terminé. Nous allons calculer la distance qu'ils ont parcourue, le temps qu'il leur a fallu pour terminer leur entraînement, ainsi que l'itinéraire suivi sur une carte Google Map..

Page d'informations de piste complétée

 
 
 
Voir un seul entraînement
 
 
 
Accueil
 
Suivre l'entraînement
 
L'histoire
 
 
 
 
  
 
 

La page Informations sur la piste affiche des informations dynamiques et non statiques. Le contenu de la page dépend de l'entraînement sur lequel l'utilisateur a cliqué à partir de la page Historique. Nous avons donc besoin d’un moyen de communiquer quel entraînement a été cliqué sur la page Infos de piste..

Lorsque l'utilisateur clique sur un lien d'entraînement, nous définissons un track_id attribuer à la

 $ ("# history_tracklist li a"). live ('clic', fonction () $ ("# track_info"). attr ("track_id", $ (this) .text ()); // Lorsque l'utilisateur visualise la page d'informations sur la piste $ ('# track_info'). Live ('pageshow', function () // recherche le track_id de l'entraînement qu'il visualise var key = $ (this) .attr (" track_id "); // Met à jour l'en-tête de la page Track Info avec le track_id $ (" # track_info div [data-role = entête] h1 "). text (key); // Récupère toutes les données GPS de la donnée d'entraînement spécifique = window.localStorage.getItem (clé); // Transforme les données GPS chiffrées en données d'objet JS = JSON.parse (données);

Calcul de la distance de l'entraînement

Chris Veness a écrit une excellente explication sur la façon de calculer la distance entre deux coordonnées GPS. J'ai utilisé son code comme base pour le gps_distance une fonction.

 fonction 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; retour d; 

Maintenant que nous disposons d'une fonction permettant de calculer la distance entre deux coordonnées GPS et d'un tableau complet de coordonnées GPS enregistrées par l'utilisateur, nous pouvons additionner toutes les distances individuelles entre des points adjacents pour calculer la distance totale parcourue par l'utilisateur..

 // Calcule la distance totale parcourue total_km = 0; pour (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);

Calcul de la durée de l'entraînement

Chacun des GPS Position objets a horodatage attribut. Nous soustrayons simplement l'horodatage de la première position GPS enregistrée de la dernière position GPS enregistrée pour nous donner le temps total pris pour l'entraînement, en millisecondes. Nous faisons ensuite des conversions pour calculer le temps total en minutes et en secondes.

 // Calcule le temps total pris pour la piste start_time = new Date (data [0] .timestamp) .getTime (); heure_fin = nouvelle 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); // Affiche la distance et le temps total $ ("# track_info_info"). Html ('Voyagé '+ total_km_rounded +' km en '+ final_time_m +' m et '+ final_time_s +'');

Tracer l'itinéraire sur la carte Google

Enfin, nous devons tracer l'itinéraire d'entraînement sur une carte Google. Nous commençons par définir la latitude et la longitude initiales sur lesquelles la carte Google sera centrée en tant que coordonnées du premier point GPS. Nous déclarons ensuite l'objet options qui contient divers paramètres pour Google Map. Nous créons ensuite la carte, en spécifiant que nous voulons l'élément HTML avec l'ID map_canvas tenir la carte.

 // Définit les lat et long initiaux de la carte Google var myLatLng = new google.maps.LatLng (data [0] .coords.latitude, data [0] .coords.longitude); // Options de Google Map var myOptions = zoom: 15, center: myLatLng, mapTypeId: google.maps.MapTypeId.ROADMAP; // Créer la carte Google, définir les options var map = new google.maps.Map (document.getElementById ("map_canvas"), myOptions);

Si votre carte ne se charge pas, assurez-vous de bien fournir la clé d’API correcte dans le > de l'API Google Map dans index.html. Avec notre carte créée, nous pouvons ensuite tracer la route de l'utilisateur. Nous créons un tableau et le remplissons d'instances de google.maps.LatLng en substituant les valeurs de chacun des points GPS. Nous créons ensuite un google.maps.PolyLine basé sur ces coordonnées et appliquer la ligne à la carte.

 var trackCoords = []; // Ajoute chaque entrée GPS à un tableau pour (i = 0; i 
 
Conclusion
 
Ceci conclut le tutoriel sur la construction de l'application PhoneGap ExerciseTracker. J'espère que vous avez beaucoup appris sur les différentes technologies que nous avons utilisées. Si vous avez des questions s'il vous plaît poster dans les commentaires ci-dessous!



		
			
	   
	




Code