Share
Vous voulez apprendre à écrire une application mobile complète à l'aide de PhoneGap, mais vous ne savez pas comment vous lancer? Suivez cette série de tutoriels en deux parties et je vous montrerai comment créer une application mobile qui permet de suivre, d’enregistrer et de cartographier votre parcours d’exercice à l’aide des fonctions GPS de votre téléphone.!
Cette section est une vue d’ensemble d’ExerciseTracker, l’application que nous allons construire.
La page d'accueil vérifie que le téléphone dispose d'une connexion réseau active (nous en avons besoin pour charger
Google Maps pour tracer l'itinéraire de l'exercice). Il comporte également deux boutons utiles pour tester l'application, mais vous pouvez les supprimer facilement ultérieurement si vous le souhaitez..
La page Track Workout comporte un seul champ de saisie de texte permettant à l’utilisateur de saisir un nom ou un identifiant pour son entraînement. Quand ils cliquent sur "Démarrer le suivi", le téléphone commencera à enregistrer leur position GPS. Lorsqu'ils cliquent sur "Arrêter le suivi", les données GPS sont enregistrées sur le téléphone..
La page Historique répertorie tous les entraînements suivis que l'utilisateur a effectués..
La page Infos sur la piste présente des informations spécifiques à l'entraînement. Il affiche la distance totale parcourue en kilomètres et le temps total pris pour la séance d’entraînement, puis il trace l’itinéraire parcouru par l’utilisateur sur une carte Google..
Notre application, ExerciseTracker, va s'exécuter sur la plate-forme mobile PhoneGap. PhoneGap nous permet de créer facilement des applications mobiles utilisant des technologies Web connues telles que HTML 5, CSS et JavaScript, puis de les déployer de manière transparente en tant qu'applications natives sur des plates-formes telles qu'iOS, Android et Windows Phone..
L'application de suivi des exercices que nous allons créer utilise les technologies suivantes:
Dans cette série de tutoriels en deux parties, vous apprendrez à utiliser ce qui précède pour créer une application PhoneGap complète..
La première chose à faire est de configurer l’environnement de développement PhoneGap. PhoneGap fournit une excellente page de démarrage qui vous guide dans la configuration de l'environnement de développement PhoneGap pour chacune des différentes plates-formes mobiles. Choisissez la plate-forme pour laquelle vous souhaitez développer et suivez les instructions pour configurer l'application PhoneGap de base. Dans ce tutoriel, je développerai sur une configuration Android (Android 4.0.3 API v15), mais le code de ce tutoriel devrait fonctionner sur toutes les plateformes..
Vous devriez maintenant avoir un minimum index.html fichier que vous pouvez visualiser sur votre émulateur de périphérique.
Commençons le développement de notre application en téléchargeant et en incluant tous les fichiers JavaScript et CSS requis..
Téléchargez et copiez chacun de ces fichiers dans le même répertoire que le index.html et cordova-1.7.0.js des dossiers.
À ce stade, la structure de répertoires de mon application Android ressemble à ceci:
Votre structure de répertoire devrait ressembler à ceci.
Pour que notre application utilise Google Maps, nous devons disposer d'une clé API. Les clés d'API sont libres d'obtenir et de prendre en charge jusqu'à 25 000 requêtes par jour. Suivez le guide fourni par Google pour enregistrer votre clé API. Notez-le, car nous en aurons besoin à l'étape suivante.!
Écrivons la première version de index.html. Ceci inclura toutes les dépendances JavaScript et CSS que ExerciseTracker aura.
ExerciseTracker Bonjour le monde
Assurez-vous de remplacer VOTRE_API_KEY_HERE avec votre clé API Google Maps actuelle.
Vous devriez pouvoir lancer ceci dans votre émulateur et ne recevoir aucune erreur.
Créons maintenant la page d'accueil. jQueryMobile nous permet de définir notre interface utilisateur à l'aide de balises HTML standard. Les pages de notre application sont Bienvenue à la ExerciseTracker app. En cliquant Suivre l'entraînement vous pouvez enregistrer vos entraînements en utilisant la fonction GPS de votre téléphone. Apprenez à créer cette application en lisant mobile.tutsplus.com. jQueryMobile analyse et interprète les significations des différents Nous devons maintenant vérifier si l'utilisateur a accès à Internet. Si tel n'est pas le cas, Google Map ne se charge pas et l'application est paralysée.. Nous commençons par écouter le Suivre la page d'entraînement La page d’accueil terminée, nous pouvons maintenant commencer à créer la page Suivre un entraînement. Le code HTML / CSS des deux pages est similaire. Cependant, dans le Nous pouvons surveiller l'emplacement de l'utilisateur à l'aide de l'API PhoneGap Geolocation. Il fournit deux fonctions principales: le Chaque fois que la fonction "success" est appelée, un objet Position est transmis. Il contient des informations sur la position GPS de l'utilisateur, telles que sa latitude, sa longitude et son altitude. Chaque fois que la fonction "success" est appelée dans ExerciseTracker, nous ajoutons le dernier objet Position au tableau. Dans ce didacticiel, nous avons examiné l'aperçu de l'application ExerciseTracker, créé la page d'accueil et commencé à travailler sur la page Suivi des séances. Dans le prochain didacticiel, nous compléterons la page Suivre un entraînement et l’application ExerciseTracker en permettant à l’utilisateur de visualiser les entraînements enregistrés tracés sur une carte Google Map.. ou les éléments et les listes sont constitués de éléments. Nous décrivons des informations sémantiques sur chacun de ces éléments en définissant des attributs de données. Par exemple, le data-role attribut indique à jQueryMobile le rôle de l’élément HTML et le icône de données attribut spécifie quelle icône sera affichée à l'intérieur de l'élément. Vous pouvez voir ci-dessous comment la page d'accueil est composée d'éléments HTML avec data-role les attributs.
Accueil
data-role, transition de données, et icône de données attributs et leur applique automatiquement le formatage CSS approprié.
Vérification de l'accès au réseau
prêt événement déclenché lorsque le chargement de PhoneGap est terminé. Nous utilisons ensuite l’API de connexion PhoneGap pour savoir si nous avons accès à Internet. Si nous n'avons pas accès à Internet, nous devons mettre à jour le bouton de la page d'accueil. Nous mettons à jour le texte, définissons une nouvelle icône et appelons le bouton ('rafraîchir') méthode, qui oblige jQuery Mobile à redessiner le bouton. document.addEventListener ("deviceready", function () if (navigator.network.connection.type == Connection.NONE) $ ("# home_network_button"). text ('Aucun accès Internet') .attr ("data- icône "," supprimer ") .Bouton ('actualiser'););
Construire la page d'entraînement de piste
data-role = "content" section de la page Track Workout, nous définissons un champ de texte (pour permettre à l’utilisateur de saisir un nom pour son entraînement), ainsi que deux boutons permettant de démarrer et d’arrêter l’entraînement..
Suivre l'entraînement
Suivre les mouvements de l'utilisateur
getCurrentPosition () et watchPosition (). le getCurrentPosition () Cette fonction serait utilisée lorsque vous souhaitez obtenir un correctif ponctuel sur l'emplacement de l'utilisateur (tel que l'enregistrement de l'emplacement de l'utilisateur lorsqu'il prend une photo). Notre application va utiliser watchPosition () pour ce faire, qui interroge régulièrement la fonction GPS du téléphone et reçoit des mises à jour constantes sur la position de l'utilisateur.watchPosition () accepte trois arguments. La première est une fonction appelée à chaque fois que le téléphone renvoie avec succès une position GPS, la seconde est une fonction appelée en cas d'erreur GPS et la troisième est un objet de paramètres..tracking_data. var track_id = "; // Nom / ID de l'exercice var watch_id = null; // ID de la géolocalisation var tracking_data = []; // Tableau contenant les objets de position GPS $ (" # # startTracking_start "). live ('clic' , function () // Démarrer le suivi de l'utilisateur watch_id = navigator.geolocation.watchPosition (// Fonction réussie (position) tracking_data.push (position);, // Fonction d'erreur (erreur) console.log (erreur) ;, // Paramètres fréquence: 3000, enableHighAccuracy: true); // Ranger l'interface utilisateur track_id = $ ("# track_id"). Val (); $ ("# track_id"). Hide (); $ ("#startTracking_status"). html ("Entraînement de suivi: "+ track_id +""););
Conclusion
Accentsconagua