Plugins

Tirer parti des capacités des smartphones

Depuis quelques années, les smartphones sont présents dans pratiquement toutes les poches. Au départ réservés à un public de technophiles, leur ergonomie s’est de plus en plus simplifiée et a rendu ces objets accessibles à la plupart des utilisateurs. Mais ce qui explique leur réel succès est leur capacité à concentrer (et remplacer) plusieurs outils en un seul appareil : appareil photo, GPS, thermomètre, boussole, etc., et à les combiner pour créer de nouveaux usages. Les smartphones ne sont pas de simples téléphones dotés d’un accès Internet, mais sont de véritables concentrés de technologie. Ils abritent une voire plusieurs caméras, un gyroscope et un accéléromètre, une puce GPS et bien d’autres composants électroniques de pointe.

Aujourd’hui, la plupart des applications se doivent de tirer parti de ces fonctionnalités poussées afin d’offrir un véritable plus à l’utilisateur. Par exemple, une simple application de prise de photos se trouve transformée si elle retient l’emplacement où la photo a été prise et si elle se sert du gyroscope pour créer un panorama à 360°. Les souvenirs de vacances sont maintenant dotés d’une...

Fonctionnement du système de plugins

L’une des grandes forces de Cordova est son écosystème de plugins très développé. La fondation Apache développe et entretient elle-même plusieurs dizaines de plugins au rôle fondamental (permettant entre autres l’utilisation du gyroscope, du GPS, des boutons matériels, etc.), mais ce sont également des centaines de dépôts GIT qui proposent librement et gratuitement des plugins pour étendre les possibilités de Cordova et tirer parti d’un nombre toujours plus important de fonctionnalités natives.

L’objet de ce chapitre n’est pas de passer en revue l’ensemble de ces plugins mais plutôt de présenter les fonctionnalités natives essentielles qui sont le plus souvent ajoutées à des projets hybrides, et ce, afin de démontrer la puissance de ce mécanisme et sa facilité de mise en œuvre.

Social : partager sur les réseaux sociaux

Une application mobile est de plus en plus rarement isolée du reste du monde. Elle doit permettre de se connecter à l’aide d’un compte Google ou Facebook, partager des liens et des photos à travers les réseaux sociaux ou encore s’alimenter auprès d’API publiques, telles que par exemple OMDb.

Les développeurs des systèmes d’exploitation mobiles ont bien compris cette problématique et proposent désormais à toute application mobile dite « sociale » de se manifester auprès du système mobile et de respecter une API standard pour partager du contenu. Il n’est donc plus nécessaire pour les développeurs d’applications mobiles d’embarquer et d’implémenter toutes les librairies pour partager des données sur les réseaux sociaux car le système propose une interface unifiée pour le faire. Il est désormais simplement nécessaire d’indiquer quel est le contenu à partager, pour que le système mobile propose à l’utilisateur de choisir l’application sociale à exécuter parmi celles qui sont installées pour mettre en ligne les données.

Pour aller plus loin encore dans cette démarche et permettre son utilisation dans un contexte multiplateforme, il existe un plugin populaire (mais non officiel) qui exploite cette fonctionnalité native de partage social. Ce plugin supporte iOS, Android et Windows Phone et est approuvé par Cordova.

Installation

ionic plugin add cordova-plugin-x-socialsharing 

Comme pour tous les plugins, il n’est pas nécessaire d’ajouter de nouveaux liens dans le fichier index.html ou de nouveaux modules dans AngularJS car Cordova s’en charge lui-même. Les ressources nécessaires à l’exécution du plugin seront embarquées dans le package et les fichiers JS chargés au démarrage de Cordova.

Les fonctions...

Camera : prendre des photos

Il y a quelques années, l’appareil photo numérique faisait son apparition et révolutionnait l’approche de la photographie personnelle. Fini la dépendance à la pellicule et au développement coûteux, l’appui sur le déclencheur est désormais gratuit et illimité. Le problème majeur était alors d’avoir l’un de ces appareils à portée de main et rares sont les personnes qui en portaient un en permanence sur eux. L’avantage des smartphones modernes est qu’ils se retrouvent dans de très nombreuses poches et qu’ils embarquent un capteur photo de qualité. Ils se sont d’ailleurs appropriés les places autrefois réservées aux appareils photo numériques dans les rayons des vendeurs spécialisés. L’ultime argument pour délaisser son appareil photo numérique au bénéfice d’un smartphone : ils sont connectés à Internet et permettent ainsi de partager instantanément et avec le monde entier n’importe quelle photo du quotidien.

En tant que développeur, ajouter une fonctionnalité de prise de photos permet de donner une nouvelle dimension à une application mobile : personnalisation du profil, enregistrement de souvenirs, ajout de filtres, etc. Les SDK natifs se sont d’ailleurs affinés au cours des années pour permettre d’ajouter très facilement et en peu de temps des fonctions de prises de vues dans une application. Il ne s’agit pas de prendre la main sur tout le processus de prise de photos, mais simplement de demander au système d’ouvrir l’interface native de prise de vues et de renvoyer une image à l’application une fois la photo enregistrée.

Le plugin officiel cordova-plugin-camera propose le même niveau de simplicité et d’intégration pour le développeur d’application multiplateforme que ce qui est proposé en natif. Ce plugin est compatible avec les trois principales plateformes du marché et ne nécessite l’appel que d’une seule méthode pour réaliser l’intégralité du processus de prise de vues : ouverture de la vue native de l’appareil photo, prise de vue, confirmation...

Geolocation : géolocaliser l’utilisateur

Les services web et mobiles tentent de plus en plus de fournir un service entièrement personnalisé à leurs utilisateurs. Cette personnalisation des services et des données passe très souvent par la géolocalisation : trouver le restaurant le plus proche, éviter de saisir une adresse pour commander un taxi, centrer la carte sur la position actuelle de l’utilisateur, etc. Cette tendance a même envahi le web puisque les navigateurs supportent désormais des fonctions de géolocalisation pour permettre aux moteurs de recherche ou annuaires d’utiliser les mêmes mécanismes de localisation que sur mobile (avec une précision moindre).

L’avantage des smartphones est qu’ils disposent de plusieurs outils pour déterminer, avec plus ou moins de précisions, leur position. Le GPS est le plus précis d’entre eux, suivi du Wi-Fi, du Bluetooth, de l’adresse IP du point d’accès Internet, et pour finir du réseau GSM. En fonction de la métrique disponible à un instant T, le smartphone va pouvoir évaluer sa position et mettre cette information à disposition des applications. En résumé, une application ne se connecte pas directement au GPS ou au GSM pour déterminer la position de l’utilisateur, mais demande au système de lui donner la position avec la meilleure précision possible et la meilleure fraîcheur possible.

Le plugin officiel cordova-plugin-geolocation permet d’interroger simplement l’API native de géolocalisation afin de demander ponctuellement la position de l’utilisateur ou de suivre son évolution en temps réel.

Installation

ionic plugin add cordova-plugin-geolocation
 

Les fonctions du plugin sont désormais accessibles à travers l’objet JavaScript suivant :

navigator.geolocation
 

LocalStorage : stocker des données

Il existe trois façons principales de stocker des données dans une application mobile multiplateforme.

La première est de se servir des services natifs du navigateur web qui exécute l’application. Ce dernier propose des mécanismes simples d’accès pour stocker des informations utilisateurs.

La deuxième méthode consiste à utiliser le système de fichiers à travers un plugin dédié. Cela peut être indispensable pour stocker une quantité importante de données ou des fichiers binaires. Elle est néanmoins complexe à mettre en œuvre et demande beaucoup de développement (gestion d’erreur poussée, prise en compte des caractéristiques des diverses plateformes, etc.).

La troisième méthode utilise elle aussi un plugin mais se positionne comme un intermédiaire entre les deux stratégies précédentes. Il s’agit d’utiliser une base de données embarquée pour stocker et rechercher des données. L’avantage de cette méthode est qu’elle utilise le langage SQL pour exécuter des requêtes complexes sur les données. Le développeur n’a pas à se soucier du stockage des données qui est réalisé directement par le plugin.

NgCordova : utiliser les plugins à la manière d’AngularJS

La problématique des plugins Cordova est qu’ils sont écrits en pur JavaScript. La liberté étant laissée au développeur de choisir quel framework il désire utiliser dans son application mobile, les plugins se doivent d’être le plus générique possible. Néanmoins, avec Ionic, le choix d’AngularJS est imposé et il est dommage de perdre en maintenabilité et en lisibilité en utilisant du pur JavaScript au milieu de contrôleurs, de services et de directives bénéficiant de mécanismes puissants comme l’injection de dépendances.

Pour apporter une réponse à cette problématique et proposer une utilisation « à la sauce AngularJS » des plugins les plus populaires, le projet ngCordova est né. La promesse est simple : offrir pour plus de 70 plugins une intégration totale à l’écosystème AngularJS.

Installation

L’installation de ngCordova se fait très simplement en utilisant le gestionnaire de dépendances Bower, utilisé par Ionic pour résoudre les dépendances web :

bower install ngCordova
 

Une fois ngCordova installé, il faut référencer le fichier ng-cordova.js (ajouté dans le dossier lib/ngCordova/dist)...