Accueil Le blog ebiznext
Développer une application mobile hybride Cordova avec Visual Studio

Aujourd’hui, pour développer une application mobile multiplateforme, plusieurs solutions existent sur le marché:

  • Natif par plateforme
  • Natif multiplateforme
  • Hybride

Cet article s’intéresse aux fonctionnalités de Visual Studio qui permettent le développement d’applications mobiles hybrides.

La première solution est de réaliser une application par plateforme avec l’environnement de développement dédié : il s’agit de l’approche en silo. Cela impose donc de connaître les différents environnements de développement. La seconde solution consiste à utiliser un Framework ou un environnement de développement pour adresser plusieurs plateformes. Cette solution offre la possibilité de partager le même code source pour l’ensemble des plateformes et repose sur le même langage de développement. Cette approche permet de limiter le coût du projet et les compétences de l’équipe de développement. Aujourd’hui, Xamarin et Cordova permettent de fournir ces avantages. Xamarin propose de développer une seule application en C# qui sera transpilée vers les 3 plateformes supportées : Android, iOS, et Windows Phone 8. De son côté, Cordova repose sur le concept d’application hybride, c’est-à-dire, une application native dans laquelle s’exécute une application Web. Cet article présente l’approche hybride avec Apache Corodva, HTML5 et Visual Studio.

Quelles différences entre une Web App et une application hybride HTML5 ?

Toutes les deux sont développées avec les mêmes langages, potentiellement les mêmes Frameworks (angularjs, bootstrap, ionic, etc.), s’appuient sur les mêmes concepts d’application responsive pour adresser les multiples résolutions des mobiles du marché. La première différence est la localisation de l’application Web. Dans une application hybride, l’application Web est installée sur le mobile. Cela facilite l’intégration d’un mode offline et cela permet d’améliorer les performances au démarrage. Mais la différence majeure vient de la capacité à interagir avec les fonctionnalités matérielles du mobile. Dans le cas de la Web App, l’interaction est très limitée. Les seules interactions se font au travers des schémas d’url permettant de lancer des applications installées sur le téléphone à partir d’hyperlien. Mais ces schémas d’URL ne couvrent pas tous les besoins et surtout permettent uniquement le lancement d’une application tierce sans retour possible. Accéder à l’appareil photo ou capter les mouvements du mobile nécessite un pont entre notre navigateur et le mobile. C’est ce que nous permet l’environnement de développement Apache Cordova.

Principes de fonctionnement de Cordova

Le schéma ci-dessous illustre le fonctionnement d’une application hybride HTML5/Javascript avec le framework Cordova.

SchemaHybride

Une application Cordova est une application native dans laquelle un navigateur web exécute du contenu HTML5/Javascript local. Dès lors que l’application a besoin d’accéder à la caméra du mobile, elle effectue un appel JavaScript qui sera interprété et relayé par le Framework Cordova à son implémentation native en charge de la gestion de la caméra. Une fois l’interaction avec la caméra terminée, le plugin retourne le résultat à l’application web.

L’écosystème de Cordova

L’écosystème de Cordova se compose de plusieurs briques:

  • Une ligne de commande pour créer, construire, déployer l’application
  • Des plateformes qui composent le socle natif de l’application pour chaque système d’exploitation
  • Des plugins qui permettent d’interagir avec les fonctionnalités natives du mobile

Structure cordova

A ce jour, Cordova supporte plus de 10 plateformes, des plus importantes aux plus exotiques, et offre une base de plus de 700 plugins dont 20 « core plugins » (plugins qui étaient fournis avec les plateformes avant la version 3.0 de Cordova).

Pourquoi utiliser Visual Studio Tools for Apache Cordova ?

Si Cordova permet de créer, construire et déployer notre application mobile sur une large palette de mobile, il n’en reste pas moins que l’installation des SDKs et outils pour chaque plateforme doit être faite manuellement. De plus Cordova n’adresse pas les problématiques de débogage qui doivent se faire dans chaque environnement de développement natif. Visual Studio Tools for Apache Cordova permet de combler ces lacunes, en fournissant une expérience unique de développement. En effet, l’extension prend en charge l’installation et la configuration des SDKs et outils nécessaires au développement, mais aussi le débogage sur Android, iOS et Windows Phone.

L’extension apporte les bénéfices suivants :

  • Installation et configuration des SDKs et outils
  • Compilation, Déploiement, et Débogage depuis Visual Studio sur environnement Windows
  • Compilation, Déploiement et Débogage des applications iOS depuis Visual Studio avec l’agent distant
  • 2 templates de projets: un template TypeScript, et un template Javascript.
  • Une interface de configuration et de gestion des plugins
  • Un ensemble d’émulateurs dont un émulateur Android sur Hyper-V, et Ripple JS permettant d’émuler différentes plateformes dans le navigateur Chrome
  • Web Inspector depuis Visual Studio pour analyser les CSS et HTML depuis l’émulateur ou le mobile
  • Une console Javascript permettant de déboguer, accessible depuis l’émulateur ou le mobile

Créer une application Cordova avec Visual Studio

L’application que nous allons créer permet de retrouver l’emplacement de sa voiture. Elle prend en charge les fonctionnalités suivantes:

  • De sauvegarder la position de notre voiture
  • D’afficher sa position par rapport à notre position actuelle
  • De lancer une application de navigation afin de retourner à notre voiture

La 1ère étape consiste à créer un projet Cordova dans Visual Studio 2015 preview qui intègre nativement l’extension. Il suffit de rechercher le terme « Cordova » pour avoir accès aux 2 templates de projet :

  • Un projet Cordova utilisant TypeScript
  • Un projet Cordova utilisant Javascript

Visual Studio Cordova Project

Le projet créé ressemble à un projet Web à quelques différences près. Il intègre les ressources spécifiques à chaque plateforme dans le dossier « merges », un dossier de ressources pour le packaging de l’application, les plugins que l’application utilisera, et un fichier de configuration.

VsCordovaProjectStructure

A ce stade, l’application est composée de 2 fichiers: indx.html et index.js. index.html est le point de démarrage de l’application. C’est cette page qui sera appelée lorsque l’application démarrera. Le contenu de ce fichier est très simple et référence 2 fichiers JavaScript spécifiques aux plateformes ciblées qui sont Cordova.js et PlatformOverride.js.

indexhtml

Cordova.js fait office de pont entre l’application web qui s’exécute dans le navigateur et les composants natifs du mobile. Plus particulièrement, il offre aussi  l’interface nécessaire aux plugins pour communiquer à partir de leur API JavaScript vers leur implémentation native. Ce fichier est ajouté automatiquement lors du build d’une plateforme.

platformOverride.js permet d’ajouter des surcharges ou des hacks en fonction de la plateforme ciblée. Ce fichier est ajouté au travers de la fonctionnalité de « merge ».

Le fichier index.html référence aussi un fichier index.js qui est le point d’entrée de l’application web et qui expose 3 événements relatifs au cycle de vie d’une application mobile.

indexjs

Ce fichier est utile dans le cas où l’application fait appel à Cordova au démarrage de l’application. Si tel est le cas, il faudra attendre que l’événement « deviceready » soit levé pour commencer à utiliser l’API de Cordova.

Ajout des plugins

Afin d’obtenir les coordonnées GPS de notre voiture, l’application utilise le plugin de géolocalisation. Pour l’ajouter, il suffit d’ouvrir le fichier config.xml qui affiche une interface graphique de configuration dans laquelle se trouve un onglet « plugins ». Installer un plugin revient alors à sélectionner le plugin souhaité, et à cliquer sur « Install ». Une fois le plugin installé, un nouveau répertoire est ajouté dans l’arborescence du projet contenant les plugins référencés. Cette interface de gestion des plugins propose 3 onglets. Le premier contient les plugins « core ». Le second permet d’installer des plugins à partir d’un répertoire local ou d’un repository git. Le dernier liste les plugins installés dans le projet. A noter que l’interface ne propose aucun moyen de mettre à jour les plugins. Pour cela, il suffit d’ouvrir le fichier config.xml en mode editeur xml, et changer la version du plugin directement dans le fichier.

pluginCordova
L’application utilisera les coordonnées GPS du téléphone. Pour cela, le plugin de geolocation sera installé. Ce plugin expose 3 méthodes :

  • navigator.geolocation.getCurrentPosition
  • navigator.geolocation.watchPosition
  • navigator.geolocation.clearWatch

L’application utilise uniquement la méthode « getCurrentPosition » qui permet de récupérer les coordonnées GPS du mobile. Toute la documentation du plugin se trouve à l’adresse suivante :

http://plugins.cordova.io/#/package/org.apache.cordova.geolocation

Utilisation des plugins

Pour développer l’application, nous utilisons les frameworks AngularJS, Angular-google-Maps, Bootstrap, JQuery qui seront installés via Nuget.

L’application comprend 2 pages, une page permettant d’enregistrer sa position, et une page permettant de localiser sa voiture. Le code de l’application est regroupé dans un module AngularJS comme illustré ci-dessous :

angularjsApp

L’application est démarrée à partir de l’événement « deviceready » afin d’éviter d’accéder à la géolocalisation avant que Cordova ait fini de charger. Le fichier index.js est donc modifié comme suit :

bootstrapAngular

Sur la première page de l’application, l’utilisateur enregistre la position de sa voiture en récupérant les coordonnées GPS du mobile. L’application va s’appuyer sur le plugin de géolocalisation afin de récupérer ces informations et les stocker dans le localStorage. L’API du plugin expose la méthode « getCurrentPosition » qui prend en paramètres 2 callbacks : la première appelée lorsque la géolocalisation a réussi, et la seconde lors d’un échec.

controllerAngular

Grâce aux plugins de Cordova, l’utilisation de fonctionnalités natives devient extrêmement simple.

Lancer une application externe

Une fois la position de la voiture enregistrée, il est possible de demander à l’application de placer la voiture sur une carte, et de démarrer l’application de navigation afin de revenir à la voiture. Pour démarrer la navigation, on utilise les schémas d’URL spécifiques à chaque plateforme :

  • Android : “http://maps.google.com/maps?saddr=<latitude>,<longitude>&daddr=<latitude>,<longitude>”
  • iOS : “maps://?saddr=<latitude>,<longitude>&daddr=<latitude>,<longitude>”
  • wp8 : “ms-walk-to:?destination.latitude=<latitude>&destination.longitude=<longitude>”

Comment faire pour que l’application utilise la bonne url en fonction du mobile sur lequel elle est installée ? Cordova fournit un plugin permettant de récupérer diverses informations du mobile sur lequel s’exécute l’application. Le plugin Device (information disponible ici : http://plugins.cordova.io/#/package/org.apache.cordova.device ) permet d’obtenir les informations suivantes :

  • device.cordova
  • device.model
  • device.platform
  • device.uuid
  • device.version

La propriété device.platform permet de connaitre le nom de la plateforme, et ainsi de choisir la bonne url à présenter à l’utilisateur final.

devicePlugin

L’application est maintenant prête à être tester, et c’est sur cette phase que l’extension de Visual Studio prend tout son sens.

Compilation et débogage dans Visual Studio

L’un des plus importants bénéfices de Visual Studio Tools for Apache Cordova est d’offrir la possibilité au développeur de déboguer son code. Il est en effet possible de déboguer dans le navigateur avec l’émulateur Web RippleJS, mais aussi dans de véritables émulateurs, comme celui d’iOS, ou d’Android, et même sur le mobile.

DebugVSCordova

Lorsque l’on lance l’application, Visual Studio passe en mode Web Development Tools avec une console JavaScript et un explorateur de DOM et de CSS. Si un point d’arrêt a été placé dans le code JavaScript, Visual Studio s’arrêtera dessus pour fournir toutes les informations dont on dispose habituellement lorsque l’on débogue une application Web.

VSCordovaDebugging-1VSCordovaDebugging-2

Il est donc possible de déboguer notre application dans Ripple, dans un émulateur Android ou Windows Phone, mais qu’en est-il avec iOS ? Le développement d’application pour iOS impose l’environnement de développement xCode, et un système d’exploitation OSX. Pour éviter de devoir passer sur un environnement Apple, l’extension fonctionne avec une partie distante à installer sur le Mac et qui permet de contrôler la compilation, le débogage et le déploiement depuis Visual Studio sur le Mac.

Installation de l’agent distant pour iOS

Pour compiler et déployer une application sur iOS, vous aurez besoin d’un compte développeur Apple. Ensuite il faudra installer les outils nécessaires à la compilation et déploiement comme décrit dans la documentation mise à disposition sur la MSDN (http://msdn.microsoft.com/en-us/library/dn771551.aspx ). Voici les outils à installer :

  • xCode
  • NodeJs
  • vs-mda-remote (l’agent distant)

La fenêtre d’option de l’extension permet de configurer la connexion entre les deux machines.

iosSettings

Il est possible de sécuriser la connexion entre le Mac et le pc Windows en utilisant un code PIN. Pour lancer le serveur de build, il suffit d’exécuter les commandes suivantes :

vs-mda-remote generateClientCert
vs-mda-remote

iosBuildServer

Pour déployer sur un mobile iOS, il faut brancher le mobile sur le Mac, démarrer le serveur de build, puis dans Visual Studio lancer le débogage en spécifiant Remote Device. L’application sera alors déployée sur le mobile et Visual Studio ouvrira la console de débogage exactement de la même manière qu’avec RippleJS.

Conclusion

L’extension Visual Studio Tools for Apache Cordova est un excellent outil permettant de développer des applications mobiles hybrides facilement avec le Framework Apache Cordova. Elle comble les lacunes de ce Framework en offrant de nouvelles capacités telles que le débogage, et le déploiement à partir d’un seul et même environnement de développement qu’est Visual Studio.

Aujourd’hui, l’extension est en CTP3.1, et sa version finale sortira en même temps de Visual Studio 2015. Il est possible d’installer cette extension à partir de Visual Studio 2013 Update 4, ou de l’utiliser directement dans Visual Studio 2015 CTP6. A noter que seule la version Visual Studio 2015 permet d’obtenir l’émulateur Android Hyper-V.