Accentsconagua
Share
Ce que vous allez créerDans ce dernier volet de la série Premiers pas avec Ionic, vous apprendrez à utiliser Cordova pour ajouter des capacités matérielles de périphérique à votre application. Nous verrons comment utiliser des fonctionnalités telles que la géolocalisation et nous vous montrerons comment intégrer la bibliothèque ngCordova pour terminer notre application. Avant de commencer, assurez-vous d’avoir configuré votre machine pour Ionic et d’avoir également configuré votre outillage spécifique à la plate-forme..
Les fichiers de projet du tutoriel sont disponibles sur GitHub. Le principe général de l'application est qu'il affiche des informations sur les établissements proches de chez vous. Dans ce tutoriel, nous ajoutons la possibilité de rechercher l'emplacement actuel et d'afficher les résultats près de chez vous. Vous pouvez voir l'exemple de travail ici.
Si vous clonez le projet, vous pouvez également coder en utilisant Git et en exécutant git checkout -b start. Ce codage pour cette leçon commence là où le dernier message, intitulé Getting Started with Ionic: Navigation, a été laissé. Vous pouvez également prévisualiser le point de départ en direct.
Avant d'écrire un code, nous devons configurer notre projet. Ionic va déjà mettre en place un projet de base sur Cordova, mais nous devons initialiser nous-mêmes quelques éléments supplémentaires..
Premièrement, nous devons installer la bibliothèque ngCordova. C'est un module angulaire qui facilite beaucoup l'utilisation des plugins Cordova les plus populaires. (Bien que tous les plugins ne soient pas supportés par ngCordova.) Bower est utilisé pour installer cette dépendance..
Deuxièmement, nous devons ajouter une plateforme à notre projet. Ce sera iOS ou Android (ou les deux!), selon la plate-forme que vous choisissez de prendre en charge. J'ai utilisé iOS dans mes exemples, mais vous pouvez le remplacer par Android pour obtenir la même chose pour cette plate-forme.
Troisièmement, nous installerons le plugin de géolocalisation pour Cordova. Cela améliore votre application avec la possibilité d'obtenir l'emplacement actuel d'un utilisateur (qui nécessite une autorisation). Vous pouvez voir une liste de tous les plugins sur https://cordova.apache.org/plugins/ avec des détails sur la façon de les configurer..
Les commandes suivantes doivent être exécutées à partir de la racine du projet pour effectuer ces trois étapes de configuration..
node_modules / .bin / bower installer la plate-forme ionique ngCordova add ios # ou le plug-in ionique android ajouter cordova-plugin-geolocation
Une fois que cela est terminé, nous devons ajouter ngCordova à l’application pour qu’elle soit reconnue par Ionic. Ouvrez le www / index.html déposer et ajouter la ligne suivante après la ionic.bundle.js fichier.
Ensuite, nous devons mettre à jour le www / js / app.js fichier pour inclure le module ngCordova. La première ligne doit être mise à jour pour apparaître comme suit.
angular.module ('App', ['ionic', 'ngCordova'])Maintenant que nos dépendances ont été mises à jour, notre projet est prêt à utiliser le plugin de géolocalisation. L'étape suivante consiste à configurer une nouvelle vue pour commencer à l'utiliser.!
Nous allons créer un nouvel écran de destination pour l'application. Cet écran affiche un message sur l'utilisation de l'emplacement actuel de l'utilisateur pour rechercher des lieux à proximité. Ils appuieront sur un bouton pour confirmer qu'ils souhaitent que l'application accède à leur emplacement, puis voir la liste des lieux qui reflète leur emplacement actuel..
Les données de localisation des utilisateurs sont un problème de confidentialité. Les applications doivent donc être prudentes lors de la collecte. Par conséquent, les appareils mobiles ne permettent pas aux applications d'accéder automatiquement aux données de géolocalisation. Les applications doivent demander une autorisation (qui peut être refusée ou révoquée à tout moment). Vous devez donc en tenir compte lorsque vous utilisez certains plug-ins nécessitant des autorisations. (Utilisez ces données avec précaution et évitez de violer la vie privée de vos utilisateurs!)
Tout d'abord, nous allons créer le modèle pour notre vue d'emplacement. Créer un nouveau fichier à www / views / location / location.html et inclure les éléments suivants. (Tout cela devrait être familier avec les tutoriels précédents, mais cela crée essentiellement une nouvelle vue avec un bouton qui appellera une méthode dans notre contrôleur, que nous définirons ensuite.)
Définissez votre position actuelle, vous ne pourrez y accéder qu'en appuyant sur le bouton ci-dessous..
Nous allons maintenant créer le shell du contrôleur, puis ajouter une méthode pour gérer l'obtention de l'emplacement d'un utilisateur. Créez un autre nouveau fichier à www / views / location / location.js et inclure le code suivant. Assurez-vous également de créer un lien vers ce fichier dans le dossier www / index.html fichier.
angular.module ('App') .config (function ($ stateProvider) $ stateProvider.state ('location', url: '/ location', contrôleur: 'LocationController as vm', templateUrl: 'vues / location / location .html ');) .controller (' LocationController ', fonction ($ ionicLoading, $ http, $ état, géolocalisation, $ cordovaGeolocation, $ ionicPopup) var vm = this;);À ce stade, nous avons une nouvelle vue d’emplacement, mais le bouton ne fonctionnera pas encore. Vous pouvez prévisualiser l'application dans votre navigateur avec service ionique. Vous devriez pouvoir voir la vue si vous allez à http: // localhost: 8100 / # / location.
$ cordovaGéolocalisation dans le constructeur du contrôleur, ce qui va nous fournir l'accès aux données de localisation de l'utilisateur. Le reste des services injectés est nécessaire uniquement pour gérer la logique métier de l'utilisation des données de localisation..Obtenir l'emplacement de l'utilisateur dans cette application implique deux étapes: obtenir les données de géolocalisation à partir du plug-in Cordova (qui ne retourne qu'une valeur de latitude et de longitude), puis effectuer une recherche inversée dans l'API Google Geocode pour trouver le emplacement actuel (qui fonctionne bien avec nos autres appels d'API).
Ajoutez la méthode suivante au contrôleur, et nous le détaillerons ci-dessous.
vm.useGeolocation = function () $ ionicLoading.show (); $ cordovaGeolocation.getCurrentPosition (timeout: 10000, enableHighAccuracy: false). then (function (position) var lat = position.coords.latitude; var lng = position.coords.longitude; var url = 'https: // civinfo -apis.herokuapp.com/civic/geolocation?latlng= '+ lat +', '+ lng; $ http.get (url) .then (function (réponse) $ ionicLoading.hide (); if (response.data .results.length) Geolocation.data = response.data.results [0]; $ state.go ('places'); else $ ionicPopup.alert (titre: 'Emplacement inconnu', modèle: 'Veuillez essayer à nouveau ou déplacez-vous vers un autre emplacement. ');)) .catch (function (error) $ ionicLoading.hide (); $ ionicPopup.alert (title:' Impossible d'obtenir l'emplacement ', template:' Veuillez réessayer ou déplacez-vous vers un autre endroit. '););); ;La première chose est d'utiliser le $ ionicLoading service pour afficher un chargeur pendant que l'emplacement actuel est détecté.
Ensuite, nous utilisons le $ cordovaGeoposition service, qui a une méthode appelée getPosition pour obtenir la position actuelle. Nous spécifions les options, qui sont des valeurs par défaut raisonnables. Vous pouvez en savoir plus sur les autres options de getPosition dans la documentation..
le getPosition méthode retourne une promesse, nous utilisons donc puis pour gérer la réponse. En supposant que l'utilisateur accepte de partager sa position, il nous donne un objet contenant les coordonnées de latitude et de longitude. Nous utiliserons ensuite ces valeurs pour appeler l'API afin d'effectuer un géocodage inversé afin de rechercher l'emplacement le plus proche. Si cela échoue, le gestionnaire de captures utilisera $ ionicPopup pour montrer une alerte qu'il a échoué.
le $ http le service est utilisé pour rechercher le géocode inverse, et s'il réussit, nous devons vérifier si des résultats ont été renvoyés. Si un a été trouvé, le Géolocalisation la valeur du service est mise à jour et l'utilisateur est redirigé vers la liste des lieux à l'aide de $ state.go. Sinon, il utilise $ ionicPopup pour signaler une alerte indiquant qu'aucun lieu n'a été trouvé.
C'est tout ce que nous avions à faire pour activer la fonctionnalité de géolocalisation de l'appareil dans notre application. Cependant, nous devons encore apporter quelques modifications mineures à la vue des lieux et à la app.js fichier.
D'abord ouvrir le www / js / app.js déposer et mettre à jour le Géolocalisation service aux suivants. Ceci est nécessaire pour effacer la valeur par défaut du service de géolocalisation que nous avions précédemment codé en dur pour Chicago et permettre au cycle de digestion de synchroniser correctement les modifications..
.factory ('Géolocalisation', function () return data: ;)Modifiez ensuite la vue par défaut de l'application en mettant à jour la dernière ligne de configuration. Cela fera que l'application démarre sur la vue de l'emplacement à la place.
.config (function ($ urlRouterProvider) $ urlRouterProvider.otherwise ('/ location');)Enfin, nous souhaitons modifier la vue des lieux pour qu'elle ne soit plus mise en cache (afin que l'emplacement mis à jour soit toujours reflétée) et pour être redirigée vers la vue de l'emplacement si aucun emplacement n'est trouvé. Ouvrez le www / views / places / places.html et mettez à jour la première ligne comme suit.
Puis ouvrez le www / views / places / places.js et mettre à jour le début du contrôleur pour correspondre à la suivante.
.controller ('PlacesController', fonction ($ http, $ scope, $ ionicLoading, $ ionicHistory, $ state, Géolocalisation, Types) var vm = this; if (! Geolocation.data.geometry ||! Géolocation.data.geometry. emplacement) $ state.go ('emplacement'); return; var base = 'https://civinfo-apis.herokuapp.com/civic/places?location=' + Geolocation.data.geometry.location.lat + ',' + Geolocation.data.geometry.location.lng;Nous effectuons une vérification rapide avant le déclenchement du contrôleur pour détecter si la géolocalisation a été trouvée, sinon nous redirigeons vers l'emplacement pour le réinitialiser..
Cela fonctionnera également dans votre navigateur, car celui-ci prend en charge les fonctionnalités de géolocalisation. Dans la section suivante, nous verrons brièvement comment prévisualiser l'application dans un émulateur..
L'Ionic CLI a une commande qui vous permet d'émuler facilement l'application dans une version logicielle d'un appareil. Toutes les fonctionnalités matérielles ne sont pas disponibles, mais beaucoup sont émulées, y compris la géolocalisation..
En utilisant émulation ionique ios, Ionic démarrera l'émulateur et chargera l'application (de même pour Android). Si vous avez des erreurs, il est probable que votre ordinateur n’a pas été entièrement configuré pour la plate-forme que vous essayez d’émuler..
Cette commande démarrera une version réelle du système d'exploitation de la plate-forme et simulera un périphérique très réaliste. Pour ceux qui ne disposent pas d'un appareil à tester, c'est un excellent moyen de vérifier rapidement que différents appareils fonctionnent avec votre application..
Vous devrez peut-être parfois réinitialiser l'émulateur pour vous assurer que les modifications que vous apportez ne persistent pas. Par exemple, si vous refusez l'autorisation de géolocalisation dans l'application, vous devrez probablement rechercher les paramètres pour l'autoriser ultérieurement ou vous pouvez réinitialiser l'émulateur pour supprimer tous les paramètres..
Dans ce didacticiel, nous avons expliqué comment utiliser Cordova pour créer une application utilisant les capacités matérielles et les capteurs. Avec ngCordova, il est très facile d'accéder à ces informations dans vos applications Ionic. Vous avez maintenant accès aux fonctionnalités de l'appareil telles que l'appareil photo, la géolocalisation, les lecteurs d'empreintes digitales et le calendrier. Si possible, vous devez exploiter la bibliothèque ngCordova pour faciliter son intégration, mais d’autres plug-ins Cordova ne sont pas exposés par ngCordova..
Ceci conclut également la série Getting Started with Ionic. Vous devez maintenant maîtriser les bases et pouvoir aller de l'avant avec Ionic. Si vous souhaitez en savoir plus, consultez certains de nos autres cours et tutoriels sur le cadre ionique..
