Accentsconagua
Share
NativeScript est un cadre permettant de créer des applications mobiles natives multiplates-formes utilisant XML, CSS et JavaScript. Dans cette série, nous allons essayer certaines des choses intéressantes que vous pouvez faire avec une application NativeScript: géolocalisation et intégration de Google Maps, base de données SQLite, intégration de Firebase et notifications push. En cours de route, nous construirons une application de mise en forme avec des fonctionnalités en temps réel utilisant chacune de ces fonctionnalités..
Dans ce didacticiel, vous apprendrez à utiliser la géolocalisation et Google Maps dans des applications NativeScript..
Je suppose que vous savez déjà comment créer des applications dans NativeScript. Si vous débutez dans NativeScript, je vous recommande de consulter au préalable l'un des didacticiels précédents dans NativeScript avant d'essayer de suivre ce didacticiel..
Vous allez créer un suivi de la marche en utilisant la géolocalisation et Google Maps. Il montrera à l'utilisateur la distance parcourue et le nombre de pas effectués pour couvrir cette distance. Il y aura aussi une carte qui montrera l'emplacement actuel de l'utilisateur.
Pour vous donner une idée, voici à quoi ressemblera le résultat final:
Commencez par créer une nouvelle application NativeScript:
tns create fitApp --appid "com.yourname.fitApp"
Pour faciliter la configuration de l'interface utilisateur de l'application, j'ai créé un référentiel GitHub qui inclut à la fois la version initiale et la version finale du projet. Vous pouvez aller de l'avant et copier le contenu de la app dossier de votre projet app dossier. Nous ne travaillerons qu'avec deux fichiers: main-page.xml et main-page.js fichier. Le reste ne fait que s'aplatir à partir du projet de démonstration NativeScript.
Nous allons utiliser l'émulateur Android fourni par Android Studio pour tester l'application. Cela nous permettra d’utiliser l’émulateur GPS Android pour simuler le changement d’emplacement dans le confort de notre foyer. Je n'aime pas trop me promener à l’extérieur pour tester la géolocalisation! Mais si c'est ton truc, je ne t'en empêcherai pas.
Si vous exécutez tns courir android, il appellera automatiquement l'émulateur Android s'il est déjà installé. S'il n'est pas encore installé, vous pouvez l'installer en lançant Android Studio, en cliquant sur configurer, et en sélectionnant Gestionnaire de SDK. Cela ouvrira la Plateformes SDK par défaut. Clique sur le Outils SDK onglet et assurez-vous de sélectionner Emulateur Android, et cliquez sur Appliquer pour l'installer.
Pour utiliser l’émulateur GPS, téléchargez-le à partir de GitHub et lancez l’exécutable. guerre fichier:
java -jar android-gps-emulator-0.2.war
Une fois que cela est fait, vous devriez pouvoir accéder http: // localhost: 8080 / gpsemulator / depuis votre navigateur et connectez-vous à localhost. Assurez-vous que l'émulateur Android est déjà en cours d'exécution lorsque vous effectuez cette opération. Une fois que vous êtes connecté, zoomez simplement sur la carte et cliquez sur l’endroit que vous souhaitez utiliser. L'application détectera cela et l'utilisera comme emplacement actuel.
La géolocalisation dans NativeScript est similaire à l'API de géolocalisation en JavaScript. La seule différence de fonctionnalité est l’ajout d’un distance() fonction utilisée pour calculer la distance entre deux emplacements.
Pour travailler avec la géolocalisation, vous devez d’abord installer le plugin de géolocalisation:
tns plugin ajoute nativescript-géolocalisation
Une fois cela fait, vous pouvez maintenant l'inclure à partir de vos fichiers de script:
var geolocation = require ("nativescript-geolocation");Le plug-in de géolocalisation NativeScript comprend trois fonctions que vous pouvez utiliser pour travailler avec l'emplacement actuel de l'utilisateur. Nous allons utiliser chacun de ces éléments dans cette application:
getCurrentLocationwatchLocationdistanceOuvrez le main-view-model.js fichier et ajouter le code suivant à l'intérieur du createViewModel () une fonction. Ici, nous initialisons les variables que nous utiliserons plus tard pour stocker les différentes valeurs nécessaires au suivi de l'emplacement de l'utilisateur..
J'ai ajouté quelques commentaires dans le code pour que vous sachiez ce qui se passe. Il y a aussi quelques lignes de code qui sont commentées; Ce sont pour l'intégration de Google Maps. Je les ai commentés pour le moment pour que les choses restent simples. Une fois l'intégration de Google Maps terminée, vous devrez supprimer ces commentaires..
function createViewModel () var viewModel = new Observable (); var watchId; // stocke l'ID de l'observateur d'emplacement afin que nous puissions l'arrêter plus tard var start_location; // stocke l'emplacement de l'utilisateur au début du suivi de var var current_location; // stocke l'emplacement actuel de l'utilisateur viewModel.is_tracking = false; // si l'emplacement de l'utilisateur est actuellement suivi ou non //viewModel.latitude = 15.447819409392789; //viewModel.longitude = 120.93888133764267; //viewModel.zoom = 20; var total_distance = 0; var total_steps = 0; var locations = []; // tableau qui stockera les emplacements // var mapView; // var marker = new mapsModule.Marker (); if (! geolocation.isEnabled ()) // vérifie si la géolocalisation n'est pas activée geolocation.enableLocationRequest (); // demande à l'utilisateur de l'activer // suivant: ajouter du code pour obtenir l'emplacement actuel de l'utilisateur
Ensuite, ajoutez le code pour obtenir l'emplacement actuel de l'utilisateur. Ce code est exécuté lorsque l'utilisateur appuie sur le bouton pour démarrer et arrêter le suivi de localisation. le geolocation.getCurrentLocation () la méthode est utilisée pour obtenir l'emplacement actuel.
Ici, nous avons spécifié trois options: Précision souhaitée, updateDistance, et temps libre. Précision souhaitée vous permet de spécifier la précision en mètres. Il a deux valeurs possibles: Précision.high, qui est d'environ 3 mètres, et Précision., qui est d'environ 300 mètres. updateDistance spécifie la différence (en mètres) entre l'emplacement précédent et l'emplacement actuel avant la mise à jour. enfin, temps libre spécifie le nombre de millisecondes d'attente d'un emplacement.
Une fois qu'un emplacement est reçu, nous le définissons comme start_location et poussez sur le Emplacements tableau. Plus tard, cet emplacement sera utilisé avec le premier emplacement extrait de l'observation de l'emplacement actuel de l'utilisateur pour déterminer la distance parcourue..
viewModel.toggleTracking = function () if (geolocation.isEnabled ()) this.set ('is_tracking',! viewModel.is_tracking); // retourne la bascule pour suivre si (viewModel.is_tracking) geolocation.getCurrentLocation (désiréeAccuracy: précision.high, // précision de 3 mètres updateDistance: 5, // délai de 5 mètres: 2000 // 2 secondes). then (function (loc) if (loc) start_location = loc; locations.push (start_location); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude', loc. longitude);, fonction (e) dialogue.alert (e.message);); // next: ajoute du code pour surveiller la position actuelle de l'utilisateur else // next: ajoute du code pour cesser de surveiller la position actuelle de l'utilisateur else dialogs.alert ("Please enable Geolocation"); Pour obtenir la position actuelle, nous utilisons le geolocation.watchLocation () une fonction. Cette fonction est similaire à la setInterval () fonction en JavaScript, car il exécute également la fonction de rappel à plusieurs reprises jusqu'à ce que vous l'arrêtiez avec le geolocation.clearWatch () une fonction. La fonction de rappel est automatiquement appelée en fonction du updateDistance et minimumUpdateTime.
Dans le code ci-dessous, l'emplacement sera mis à jour s'il est différent d'au moins 5 mètres de l'emplacement précédent récupéré. Mais cette mise à jour ne se produira que toutes les 5 secondes. Cela signifie que si l'utilisateur n'a pas parcouru 5 mètres ou plus dans les 5 secondes, l'emplacement ne sera pas mis à jour..
watchId = geolocation.watchLocation (function (loc) if (loc) current_location = loc; // next: ajouter du code pour obtenir la distance entre deux emplacements, function (e) dialogs.alert (e.message); , désiréeAccuracy: Accuracy.high, updateDistance: 5, // 5 mètres minimumUpdateTime: 5000 // mise à jour toutes les 5 secondes);
Une fois que l'utilisateur a indiqué qu'il souhaitait arrêter le suivi, vous devez appeler le geolocation.clearWatch () une fonction. Vous devez également réinitialiser le reste des valeurs mises à jour chaque fois que l'emplacement est modifié..
geolocation.clearWatch (watchId); // arrête de regarder l'emplacement de l'utilisateur total_distance = 0; total_steps = 0; emplacements = []; viewModel.set ('distance', "distance parcourue:" + distance totale + "mètres"); viewModel.set ('steps', "steps:" + total_steps);Nous sommes maintenant prêts à prendre de la distance. Cela peut être fait en appelant le geolocation.distance () une fonction. Cette fonction accepte deux emplacement objets comme ses arguments, nous allons donc utiliser les deux derniers emplacements qui ont été poussés vers le Emplacements tableau pour déterminer la distance (en mètres) parcourue par l’utilisateur entre un emplacement précédemment enregistré et l’emplacement actuel. À partir de là, nous pouvons utiliser une conversion approximative des compteurs en nombre d'étapes. Je dis approximativement, car toutes les personnes ne parcourront pas la même distance en une seule étape..
Après cela, nous pouvons simplement ajouter le résultat distance et pas au distance totale et total_steps afin que nous puissions garder une trace de la distance totale et des pas qu'ils ont fait depuis qu'ils ont commencé à suivre leur position.
locations.push (loc); //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); location_count = locations.length; if (location_count> = 2) var distance = Math.round (geolocation.distance (locations [location_count - 2], localisations [location_count - 1])); // récupère la distance entre les deux derniers emplacements var steps = Math.round (distance * 1.3123); // détermine le nombre approximatif d'étapes // ajoute la distance actuelle à la distance totale parcourue total_distance = total_distance + distance; total_steps = total_steps + steps; // met à jour l'interface utilisateur viewModel.set ('distance', "distance parcourue:" + distance_ totale + "mètres"); viewModel.set ('steps', "steps:" + total_steps); À ce stade, vous pouvez maintenant commencer à tester l'application à l'aide de l'émulateur GPS que j'ai mentionné précédemment. Notez que vous devez frapper enregistrer sur le main-view-model.js fichier pour déclencher un rechargement d'application.
Ensuite, choisissez un emplacement dans l'émulateur GPS afin qu'un nouvel emplacement soit récupéré par l'application une fois qu'elle sera chargée. Si vous ne le faites pas, l'emplacement par défaut du Googleplex à Mountain View, en Californie, sera défini par défaut. Cela signifie que la prochaine fois que vous sélectionnerez un emplacement sur l'émulateur, il passera de cet emplacement à l'emplacement que vous avez choisi. Si c'est loin alors vous aurez un très grand nombre pour la distance et les étapes.
Alternativement, vous pouvez tester sur un appareil réel avec Internet et le GPS activé. Seul le GPS est requis à ce stade, mais une fois que nous avons ajouté Google Maps, l'application aura besoin d'une connexion Internet..
Nous allons maintenant utiliser Google Maps pour ajouter une carte indiquant l'emplacement actuel de l'utilisateur..
tns plugin ajoute nativescript-google-maps-sdk
Une fois installé, vous devez copier les fichiers de ressources de chaîne de modèle pour Android:
cp -r node_modules / nativescript-google-maps-sdk / plates-formes / android / res / values app / App_Resources / Android /
Ensuite, ouvrez le app / App_Resources / Android / values / nativescript_google_maps_api.xml fichier et ajoutez votre propre clé API Google Maps (clé de serveur):
VOTRE CLE D'API GOOGLE MAPS ICI
Assurez-vous d'avoir activé l'API Google Maps Android à partir de la console Google avant de l'utiliser..
Pour la carte, ouvrez le main-page.xml fichier et vous devriez voir ce qui suit:
Ici, nous avons spécifié trois options (longitude, latitude, et Zoom) et une fonction à exécuter une fois la carte prête. longitude et latitude spécifiez l'emplacement que vous souhaitez afficher sur la carte. le Zoom spécifie le niveau de zoom de la carte. mapReady est où nous spécifions la fonction pour ajouter le marqueur sur la carte. Ce marqueur représente l'emplacement actuel de l'utilisateur, il sera donc affiché au centre de la carte..
Par défaut, cela ne fonctionnera pas car vous n'avez pas encore ajouté la définition de schéma pour les cartes. Donc dans votre Page élément, ajoutez la définition du Plans élément:
Une fois que cela est fait, une instance de carte Google doit être rendue juste en dessous du bouton pour le suivi de la localisation. Il n’aura pas encore de carte depuis le latitude et longitude n'a pas encore été spécifié. Pour ce faire, retournez à la main-view-model.js Fichier et supprimer les commentaires pour les lignes de code pour travailler avec Google Maps:
// coordonnées par défaut viewModel.latitude = 15.447819409392789; viewModel.longitude = 120,93888133764267; viewModel.zoom = 20; // niveau de zoom de la carte par défaut var mapView; // variable pour stocker l'instance de carte actuelle var marker = new mapsModule.Marker (); // variable pour stocker l'instance de marqueur
Comme nous avons déjà déclaré les coordonnées par défaut du marqueur, nous pouvons tracer un marqueur une fois la carte prête:
viewModel.onMapReady = function (args) mapView = args.object; // obtient la vue de la carte marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); // définit la position du marqueur sur la carte mapView.addMarker (marker); // ajoute le marqueur à la carte
Ensuite, nous devons mettre à jour la position du marqueur une fois que l'utilisateur commence à suivre leur emplacement. Vous pouvez le faire dans la fonction de rappel de succès pour le getCurrentLocation () une fonction:
locations.push (start_location); // supprime les commentaires pour ceux-ci: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Nous devons également le mettre à jour lorsque l’emplacement de l’utilisateur est mis à jour (dans la fonction de rappel de succès pour watchLocation):
current_location = loc; locations.push (loc); // supprime les commentaires pour ceux-ci: //viewModel.set('latitude ', loc.latitude); //viewModel.set('longitude ', loc.longitude); //marker.position = mapsModule.Position.positionFromLatLng (viewModel.latitude, viewModel.longitude); Une fois que cela est fait, une carte qui rend l'emplacement par défaut devrait apparaître dans l'application..
Dans ce didacticiel, vous avez créé une application NativeScript qui permet à l'utilisateur de suivre la distance parcourue et le nombre approximatif de pas effectués pour couvrir cette distance. Vous avez également utilisé Google Maps pour permettre à l'utilisateur de voir son emplacement actuel. Ce faisant, vous avez appris à utiliser les plug-ins de géolocalisation et Google Maps pour NativeScript..
Ce n'est que le début! Dans les prochains articles de cette série, nous ajouterons une base de données locale, des notifications push et d'autres fonctionnalités intéressantes à notre application..
En attendant, consultez certains de nos autres articles sur NativeScript et le codage mobile multiplate-forme..
Pour une introduction complète à NativeScript, essayez notre cours vidéo Coder une application mobile avec NativeScript. Dans ce cours, Keyvan Kasaei vous montrera, étape par étape, comment créer une application simple. En cours de route, vous apprendrez à mettre en œuvre un flux de travail d'application simple avec des requêtes réseau, une architecture MVVM et certains des composants les plus importants de l'interface utilisateur NativeScript. À la fin, vous comprendrez pourquoi vous devriez envisager NativeScript pour votre prochain projet d'application mobile..
