Premiers pas avec Ionic: Cordova

Dans ce dernier volet de la série Getting Started with Ionic, vous apprendrez comment tirer parti de 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 je vous montrerai comment intégrer la bibliothèque ngCordova pour terminer notre application. Vous voudrez vous assurer que vous avez configuré votre machine pour Ionic avant de commencer et vous assurer que vous avez également configuré l’outillage spécifique à votre plate-forme.

Fichiers de projet

Les fichiers de projet du didacticiel sont disponibles sur GitHub. Le principe général de l’application est qu’elle affiche des informations sur les installations près de chez vous. Dans ce didacticiel, nous ajoutons la possibilité de rechercher l’emplacement actuel et d’afficher les résultats près de chez vous. Tu peux voir le 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 de cette leçon commence là où le dernier message, Premiers pas avec Ionic: Navigation s’est arrêté. Vous pouvez aussi prévisualiser le point de départ en direct.

Configurer Cordova

Avant d’écrire du code, nous devons configurer notre projet. Ionic mettra déjà en place un projet de base Cordova, mais nous devons initialiser nous-mêmes quelques éléments supplémentaires.

Tout d’abord, nous devons installer le ngCordova bibliothèque. Il s’agit d’un module angulaire qui facilite grandement l’utilisation de certains des plugins Cordova les plus populaires. (Bien que tous les plugins ne soient pas pris en charge par ngCordova.) Tonnelle est utilisé pour installer cette dépendance.

Deuxièmement, nous devons ajouter une plate-forme à notre projet. Ce sera ios ou android (ou les deux!), selon la plateforme que vous choisissez de prendre en charge. J’ai utilisé ios dans mes exemples, mais vous pouvez le remplacer par android pour atteindre 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 (ce 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 configurer chacun d’eux.

Les commandes suivantes doivent être exécutées à partir de la racine du projet pour effectuer ces trois étapes de configuration.

Une fois que cela est terminé, nous devons ajouter ngCordova à l’application afin qu’il soit reconnu par Ionic. Ouvrez le www / index.html fichier et ajoutez la ligne suivante après le 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.

Maintenant que nous avons mis à jour nos dépendances, notre projet est prêt à utiliser le plugin de géolocalisation. La prochaine étape consiste à configurer une nouvelle vue pour commencer à l’utiliser!

Ajout de la vue de l’emplacement

Nous allons créer un nouvel écran de destination pour l’application. Cet écran affiche un message sur l’utilisation de la position actuelle de l’utilisateur pour trouver des lieux à proximité. Ils vont appuyer 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é que les applications doivent faire attention lors de la collecte, de sorte que 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 garder cela à l’esprit lorsque vous utilisez certains plugins qui nécessitent 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 de localisation. Créez 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.)

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 incluez le code suivant. Assurez-vous également de créer un lien vers ce fichier dans le www / index.html fichier.

En relation :  Comment installer Android Oreo dès maintenant

À ce stade, nous avons une nouvelle vue de l’emplacement, mais le bouton ne fonctionnera pas encore. Vous pouvez prévisualiser l’application dans votre navigateur avec ionic serve. Vous devriez pouvoir voir la vue si vous accédez à http: // localhost: 8100 / # / location.

Vous remarquerez un service appelé $cordovaGeolocation dans le constructeur du contrôleur, 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 ce qu’il faut faire avec les données de localisation.

Il y a en fait deux étapes pour obtenir l’emplacement de l’utilisateur dans cette application, la première consiste à obtenir les données de géolocalisation du plugin Cordova (qui renvoie simplement une valeur de latitude et de longitude), puis à effectuer une recherche inversée dans l’API Google Geocode pour trouver le lieu de localisation actuel (qui fonctionne bien avec nos autres appels API).

Ajoutez la méthode suivante au contrôleur et nous l’examinerons en détail ci-dessous.

La première chose est d’utiliser le $ionicLoading service pour afficher un chargeur pendant la détection de l’emplacement actuel.

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 lire sur d’autres Options getPosition dans la documentation.

le getPosition méthode renvoie une promesse, nous utilisons donc then pour gérer la réponse. En supposant que l’utilisateur accepte de partager sa position, cela nous donne un objet contenant les coordonnées de latitude et de longitude. Nous utiliserons ensuite ces valeurs pour appeler l’API afin de faire un géocode inversé pour rechercher l’endroit le plus proche. S’il échoue, le gestionnaire catch utilisera $ionicPopup pour afficher une alerte indiquant qu’il a échoué.

le $http service est utilisé pour rechercher le géocode inversé, et s’il réussit, nous devons vérifier si des résultats ont été renvoyés. Si on en trouve un, le Geolocation la valeur du service est mise à jour et l’utilisateur est redirigé vers la liste des lieux en utilisant $state.go. Sinon, il utilise $ionicPopup pour afficher une alerte indiquant qu’aucun lieu n’a été trouvé.

C’est tout ce que nous avions à faire pour activer la fonction 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.

Ouvrez d’abord le www / js / app.js fichier et mettre à jour le Geolocation service à ce qui suit. Cela est nécessaire pour effacer la valeur par défaut du service de géolocalisation que nous avions précédemment codé en dur à Chicago, et permettre au cycle de résumé de synchroniser correctement les modifications.

Modifiez ensuite la vue par défaut de l’application d’application en mettant à jour la dernière ligne de configuration comme suit. Cela fera démarrer l’application sur la vue de l’emplacement à la place.

Enfin, nous voulons modifier la vue des lieux pour ne plus mettre en cache (afin que l’emplacement mis à jour soit toujours reflété), et rediriger 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 mettez à jour le début du contrôleur pour qu’il corresponde à ce qui suit.

En relation :  Que pouvez-vous faire avec le Bixby de Samsung?

Nous faisons une vérification rapide avant que le contrôleur ne se déclenche 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 le navigateur prend en charge les fonctionnalités de géolocalisation. Dans la section suivante, nous expliquerons brièvement comment prévisualiser l’application dans un émulateur.

Aperçu dans un émulateur

L’Ionic CLI dispose d’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 ionic emulate ios, Ionic démarrera l’émulateur et chargera l’application (de même pour Android). Si vous rencontrez des erreurs, il est probable que votre ordinateur n’ait 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 appareil très réaliste. Pour quelqu’un qui n’a pas d’appareil réel à tester, c’est un excellent moyen de vérifier rapidement que différents appareils fonctionnent avec votre application.

Vous devrez peut-être réinitialiser l’émulateur parfois pour vous assurer que les modifications que vous apportez ne persistent pas. Par exemple, si vous refusez l’autorisation de l’application pour la géolocalisation, vous devrez probablement trouver les paramètres pour l’autoriser plus tard, ou vous pouvez réinitialiser l’émulateur pour supprimer tous les paramètres.

Conclusion

Dans ce didacticiel, nous avons examiné comment utiliser Cordova pour créer une application qui exploite les capacités matérielles et les capteurs. En utilisant ngCordova, il est très facile d’accéder à ces informations dans vos applications Ionic. Vous avez désormais accès aux fonctionnalités de l’appareil telles que l’appareil photo, la géolocalisation, les lecteurs d’empreintes digitales et le calendrier. Lorsque cela est possible, vous devez tirer parti de la bibliothèque ngCordova pour faciliter son intégration, mais il existe d’autres plugins Cordova non exposés par ngCordova.

Ceci conclut également la série Getting Started with Ionic. Vous devriez maintenant avoir une compréhension des bases et être capable d’aller de l’avant avec Ionic. Si vous souhaitez en savoir plus, consultez certains de nos autres cours et tutoriels sur le framework ionique.

  • Commencez avec Ionic 2

  • Utilisez l’appareil photo avec Ionic

    Mobile multiplateforme
  • Utilisez le microphone avec Ionic

  • Publier une application avec Cordova

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.