Codez une application NativeScript en temps réel: géolocalisation et Google Maps

NativeScript est un framework permettant de créer des applications mobiles natives multiplateformes à l’aide de 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 Google Maps, base de données SQLite, intégration Firebase et notifications push. En cours de route, nous créerons une application de fitness avec des capacités en temps réel qui utilisera chacune de ces fonctionnalités.

Dans ce didacticiel, vous apprendrez à utiliser la géolocalisation et Google Maps dans les applications NativeScript.

Je suppose que vous savez déjà comment créer des applications dans NativeScript. Si vous êtes nouveau dans NativeScript, je vous recommande de commencer par consulter l’un des didacticiels précédents de NativeScript avant d’essayer de suivre ce didacticiel.

  • Une introduction à NativeScript

  • Créez votre première application NativeScript

  • Créer une application météo avec TypeScript et NativeScript

    Application mobile

Ce que vous allez créer

Vous allez créer un tracker de marche à l’aide de la géolocalisation et de Google Maps. Il montrera à l’utilisateur la distance qu’il a parcourue et le nombre de pas qu’il a effectués pour couvrir cette distance. Il y aura également une carte qui montrera l’emplacement actuel de l’utilisateur.

Pour vous donner une idée, voici à quoi ressemblera la sortie finale:

finale de l'application

Mise en place du projet

Commencez par créer une nouvelle application NativeScript:

Pour faciliter la configuration de l’interface utilisateur de l’application, j’ai créé un dépôt GitHub qui comprend à la fois la version de démarrage et la version finale du projet. Vous pouvez continuer et copier le contenu du app dossier à votre projet app dossier. Nous ne travaillerons qu’avec deux fichiers: main-page.xml et main-page.js fichier. Le reste n’est que des exemples du projet de démonstration NativeScript.

Lancer l’application

Nous utiliserons l’émulateur Android fourni par Android Studio pour tester l’application. Cela nous permettra d’utiliser le Émulateur GPS Android pour simuler le changement de lieu dans le confort de notre foyer. Je n’aime pas non plus me promener sans but à l’extérieur pour tester la géolocalisation! Mais si c’est ton truc, je ne t’arrêterai pas.

Si vous exécutez tns run 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 configureret en sélectionnant Gestionnaire SDK. Cela ouvrira le Plates-formes SDK par défaut. Clique sur le Outils SDK et assurez-vous de sélectionner Émulateur Android, et cliquez sur Appliquer pour l’installer.

Pour utiliser l’émulateur GPS, téléchargez-le sur GitHub et exécutez l’exécutable guerre fichier:

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 faites cela. Une fois que vous êtes connecté, il vous suffit de zoomer sur la carte et de cliquer sur n’importe quel endroit que vous souhaitez utiliser comme emplacement. L’application le détectera et l’utilisera comme emplacement actuel.

Émulateur GPS

Travailler avec la géolocalisation

La géolocalisation dans NativeScript est similaire à la API de géolocalisation en JavaScript. La seule différence de fonctionnalité est l’ajout d’un distance() fonction qui est utilisée pour calculer la distance entre deux emplacements.

Installation du plug-in de géolocalisation

Pour travailler avec la géolocalisation, vous devez d’abord installer le plugin de géolocalisation:

Une fois cela fait, vous pouvez désormais l’inclure à partir de vos fichiers de script:

Obtenir l’emplacement actuel de l’utilisateur

Le plugin de géolocalisation NativeScript comprend trois fonctions que vous pouvez utiliser pour travailler avec l’emplacement actuel de l’utilisateur. Nous utiliserons chacun de ces éléments dans cette application:

  • getCurrentLocation
  • watchLocation
  • distance

Ouvrez le main-view-model.js et ajoutez le code suivant dans le createViewModel() 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 garder les choses simples. Une fois que nous serons arrivés à l’intégration de Google Maps, vous devrez supprimer ces commentaires.

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() méthode est utilisée pour obtenir l’emplacement actuel.

Ici, nous avons spécifié trois options: desiredAccuracy, updateDistance, et timeout. desiredAccuracy vous permet de spécifier la précision en mètres. Il a deux valeurs possibles: Accuracy.high, qui mesure environ 3 mètres, et Accuracy.any, soit 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, timeout spécifie le nombre de millisecondes à attendre pour un emplacement.

Une fois qu’un emplacement est reçu, nous le définissons comme start_location et poussez-le sur le locations tableau. Plus tard, cet emplacement sera utilisé avec le premier emplacement qui sera récupéré en regardant l’emplacement actuel de l’utilisateur pour déterminer la distance parcourue.

Surveiller l’emplacement actuel de l’utilisateur

Pour obtenir l’emplacement actuel, nous utilisons le geolocation.watchLocation() 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() 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 au moins 5 mètres différent de l’emplacement précédent qui a été récupéré. Mais cette mise à jour ne se produira que toutes les 5 secondes. Cela signifie que si l’utilisateur n’a pas marché 5 mètres ou plus dans les 5 secondes, l’emplacement ne sera pas mis à jour.

Une fois que l’utilisateur indique qu’il souhaite arrêter le suivi, vous devez appeler le geolocation.clearWatch() fonction. Vous devez également réinitialiser le reste des valeurs qui sont mises à jour chaque fois que l’emplacement est modifié.

Obtenir la distance entre deux emplacements

Nous sommes maintenant prêts à prendre la distance. Cela peut être fait en appelant le geolocation.distance() fonction. Cette fonction accepte deux location objets comme arguments, nous allons donc utiliser les deux derniers emplacements qui ont été poussés vers le locations tableau pour déterminer la distance (en mètres) parcourue par l’utilisateur d’un emplacement précédemment enregistré à l’emplacement actuel. De là, nous pouvons utiliser un conversion approximative des mètres au nombre de pas – je dis approximatif car tout le monde ne parcourra pas la même distance en un seul pas.

Après cela, nous pouvons simplement ajouter le résultat distance et steps à la total_distance et total_steps afin que nous puissions garder une trace de la distance totale et des mesures qu’ils ont prises depuis qu’ils ont commencé à suivre leur emplacement.

À ce stade, vous pouvez maintenant commencer à tester l’application à l’aide de l’émulateur GPS que j’ai mentionné plus tôt. Notez que vous devez frapper enregistrer sur le main-view-model.js fichier pour déclencher le rechargement d’une 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 se charge. Si vous ne le faites pas, il sera par défaut à l’emplacement Googleplex à Mountain View, Californie. Cela signifie que la prochaine fois que vous choisirez un emplacement sur l’émulateur, il passera de cet emplacement à l’emplacement que vous avez choisi. Si c’est loin, vous obtiendrez un très grand nombre pour la distance et les marches.

Vous pouvez également tester sur un appareil réel avec Internet et le GPS activés. Seul le GPS est requis à ce stade, mais une fois que nous ajoutons Google Maps, l’application aura besoin d’une connexion Internet.

Travailler avec Google Maps

Nous allons maintenant utiliser Google Maps pour ajouter une carte indiquant la position actuelle de l’utilisateur.

Installation du plug-in Google Maps

Une fois installé, vous devez copier les fichiers de ressources de chaîne de modèle pour 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):

Assurez-vous que vous avez activé l’API Google Maps Android à partir du Google Console avant d’essayer de l’utiliser.

Ajout de la carte

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 rendre sur la carte. le zoom spécifie le niveau de zoom de la carte. mapReady est l’endroit 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 rendu 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 de maps élément:

Une fois que cela est fait, une instance de carte Google devrait être rendue juste en dessous du bouton de suivi de l’emplacement. Il n’aura pas encore de cartes depuis le latitude et longitude n’ont pas encore été spécifiés. Pour ce faire, revenez à la main-view-model.js fichier et supprimez les commentaires pour les lignes de code pour travailler avec Google Maps:

Ajout du marqueur

Puisque nous avons déjà déclaré les coordonnées par défaut du marqueur, nous pouvons en fait tracer un marqueur une fois que la carte est prête:

Ensuite, nous devons mettre à jour la position du marqueur une fois que l’utilisateur commence à suivre sa position. Vous pouvez le faire dans la fonction de rappel de succès pour le getCurrentLocation() fonction:

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):

Une fois cela fait, une carte qui rend l’emplacement par défaut devrait s’afficher dans l’application.

Conclusion

Dans ce didacticiel, vous avez créé une application NativeScript qui permet à l’utilisateur de suivre la distance parcourue et le nombre approximatif de pas qu’il a effectués pour couvrir cette distance. Vous avez également utilisé Google Maps pour permettre à l’utilisateur de voir sa position actuelle. Ce faisant, vous avez appris à utiliser les plugins 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 multiplateforme.

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 à implémenter un flux de travail d’application simple avec des requêtes réseau, une architecture MVVM et certains des composants d’interface utilisateur NativeScript les plus importants. À la fin, vous comprendrez pourquoi vous devriez envisager NativeScript pour votre prochain projet d’application mobile.

En relation :  Construisez une console de jeu rétro Raspberry Pi avec cet ebook GRATUIT!
Moyens Staff
Moyens I/O Staff vous a motivé, donner des conseils sur la technologie, le développement personnel, le style de vie et des stratégies qui vous aider.