N’hésitez pas à me contacter sur twitter (@emargraff) pour échanger à propos de cet article

Il y a quelque temps, je vous donnais mon point de vue quant aux différentes possibilités qui s’offrent à vous pour créer une application multi-plateformes. Dans cet article, je vous propose de creuser un peu l’approche web avec Apache Cordova.

Je ne vais pas revenir en détails sur ce qu’est Cordova. Je vous invite à lire l’article que je cite plus haut pour en comprendre les tenants et aboutissants. Pour le décrire en une phrase, il s’agit d’un framework qui vous permet d’utiliser les technologies web HTML5 et Javascript pour :

  • Créer une application mobile (i.e. packager un ensemble de pages html dans une application native grâce à un composant de type WebView)
  • Donner accès au développeur aux fonctionnalités du téléphone à l’aide d’une librairie Javascript commune à toutes les plateformes

 

Cordova : fonctionnement standard.

Comme je l’explique dans mon précédent article concernant la création de jeux avec WebGL, BabylonJS et Cordova (en anglais) : il y a un certain nombre d’étapes à réaliser pour configurer une plateforme qui permettra de compiler des applications Windows, Android et iOS avec Cordova. Il faut installer Android SDK, les outils iOS sur Mac, le JDK Java, les émulateurs, Cordova lui même avec NodeJS par exemple. Bref, c’est complexe et long. Une fois que c’est fait cependant, Cordova est relativement simple à utiliser. Quelques lignes de commandes permettent de réaliser les opérations classiques.

cordova create myprojet

Créé un projet Cordova.

cordova platform add windows

Ajoute la plateforme Windows.

cordova platform add android

Ajoute la plateforme Android.

cordova build windows

Build la version windows

cordova run windows

Exécute la version Windows sur un périphérique connecté.

C’est simple, n’est-ce pas ? Simple oui: mais naviguer entre l’éditeur de code et la ligne de commande ne plait pas à tout le monde. Et surtout: comment faire pour déboguer l’application? Comment faire pour la tester sur iOS alors qu’on est sur Windows et qu’il faut le faire sur un Mac? Même si on a un mac à côté de soi, il faut transférer le code, relancer les lignes de commandes, et même là: comment déboguer ? Et le débug sur Android se fait systématiquement sur un vrai téléphone car l’émulateur est tellement lent…

Des outils pour Cordova dans Visual Studio 2015?

Les outils pour Cordova ne sont pas neufs dans Visual Studio. Il existe une extension qui s’appelle Multi Devices Hybrid Apps disponible depuis quelques temps pour la version 2013. La version 2015 apporte un grand nombre de nouveautés pour le développement dans l’univers Windows, notamment pour .NET. Mais ce n’est pas tout puisqu’un effort considérable est fait pour rendre les développeurs multi-plateformes plus productifs, notamment dans le cas de Cordova.

L’outil Multi Device Hybrid apps est renommé en Cordova Tools for Visual Studio. Il est téléchargeable en tant qu’extension pour Visual Studio 2013 et inclus en standard pour Visual Studio 2015. Parmi la longue liste d’intérêts que vous allez découvrir dans cet article, le premier n’est pas le moindre: l’installation de tous les éléments nécessaires au développement et à la compilation de projets avec Cordova.

Voici une capture d’écran de l’installeur qui vous donne une idée des outils automatiquement téléchargés et configurés pour vous :

Capture

Raison 1. Les fonctionnalités d’un éditeur de logiciels moderne

Une fois les outils installés, Visual Studio vous permet de créer un nouveau projet de type Apache Cordova Apps.

image

Ce template est disponible en deux langages:

  • Javascript: pour les personnes qui souhaitent rester avec un langage familier et qui maîtrise déjà
  • TypeScript: pour les personnes qui veulent conserver une syntaxe d’un langage typé tout en créant du Javascript standard et propre

TypeScript n’est pas le sujet de cet article. Si vous voulez comprendre les avantages de ce langage, je vous invite à lire l’article de David Catuhe : http://blogs.msdn.com/b/eternalcoding/archive/2014/04/28/why-we-decided-to-move-from-plain-javascript-to-typescript-for-babylon-js.aspx

Une fois le projet créé, vous disposez d’une arborescence de fichiers claire et de la puissance de Visual Studio pour l’édition avec l’intelliSense dans le code CSS, Javascript et HTML.

image

Raison 2. Compiler pour la plateforme qu’on veut, rapidement

Le contenu du projet correspond grosso modo à ce que vous retrouvez normalement dans le répertoire www d’un projet Cordova. Le fichier index.html est le fichier principal qui sera exécuté au lancement de l’application.

Pour compiler vers la plateforme de notre choix, plus de lignes de commandes mais un choix dans une simple liste déroulante:

image

Dès lors qu’on compile, la plateforme est ajoutée, préparée et compilée. Rien de magique là dedans, tout est disponible dans le répertoire bldDebug (où ‘debug’ est à remplacer par la cible de compilation).

image

Dans le cas d’une application Windows, il est possible de choisir Windows Phone (Universal). Ce qui génère une application universelle Windows Javascript. Ceci signifie que dans le cas de la plateforme Windows, l’application générée tourne directement dans le téléphone et non pas dans une WebView. Javascript et HTML sont compris par le système comme langages “natifs”. Les applications Cordova sont donc plus rapides par définition sur ces environnements.

Raison 3. Un émulateur Android ultra performant est disponible par défaut

Et quand je dis ultra performant, je pèse mes mots. Il boot en quelques secondes, comme c’est le cas pour celui de Windows Phone depuis plusieurs années. La principale raison de cette rapidité c’est qu’il tourne sous Hyper-V.

image

Il permet entre autres de simuler un mouvement du téléphone pour tester l’usage de l’accéléromètre :

image

Si vous travaillez sur une application qui utilise la géolocalisation, vous pouvez facilement changer celle de l’émulateur :

image

Raison 4. Les outils de débogage

Un des points cruciaux quand on fait du développement c’est de pouvoir comprendre les problèmes qui surviennent lors de l’exécution de son code. Cela évite de faire des suppositions fausses, ou d’ajouter de la trace inutile partout dans son code au risque de créer un bruit inutile.

Pour pouvoir déboguer, on attache un débogueur à son code de manière à être prévenu quand une erreur survient, de faire du pas à pas, ou encore de positionner des points d’arrêt pour inspecter certaines variables.

Dans le cas du développement Web, on utilise l’explorateur de Dom et le débogueur de son navigateur préféré. Par exemple les outils accessibles en appuyant sur F12 dans IE 11 permettent de parcourir l’arborescence HTML, de visualiser le code Javascript, et comprendre les problèmes de performance, de tester en simulant un autre navigateur, etc.

image

Les outils de Visual Studio 2015 pour Cordova offrent la même expérience dans le cas d’une application qui tourne dans un émulateur ou sur un périphérique physique.

Quand on lance l’application par défaut dans l’émulateur Android, deux outils sont utilisables :

  • Le débogueur Javascript qui permet de positionner des points d’arrêt et voir l’état des variables

 

image

  • Le DOM explorer qui permet de visualiser le code HTML, de comprendre les styles CSS qui s’appliquent à chaque balise et de modifier le code et les styles CSS avec un aperçu en direct sans avoir besoin de relancer l’application

 

image

Pour avoir un bon exemple pour tester les outils, vous pouvez télécharger les samples officiels avec 3 versions proposées:

Raison 5. La gestion simplifiée des paramètres et des plugins

Visual Studio 2015 propose un fichier config.xml qui contient la liste des paramètres de configuration de l’application en cours de développement et la liste des plugins à installer à chaque fois que le développeur demande de compiler pour une plateforme donnée.

Les paramètres sont notamment : le nom de l’application, la page de démarrage (pour changer si vous ne voulez pas que ce soit index.html), la version de l’application, l’orientation possible, etc. Quand on ouvre le fichier config.xml, c’est un éditeur graphique qui est proposé par défaut, pour simplifier notre vie 🙂

image

Certains paramètres sont également disponibles par plateforme pour Windows, Android et iOS. Il est possible par exemple d’indiquer la version de Windows à cibler :

image

la version minimum et maximum du SDK android supportée:

image

ou encore les informations relatives à iOS  (type d’application, version de l’OS, etc.):

image

Le fonctionnement classique de Cordova pour donner accès aux fonctionnalités du téléphone est de proposer d’ajouter le plugin correspondant. Il existe un plugin pour l’accéléromètre, un pour la géolocalisation, un autre pour l’accès à l’appareil photo, un pour les contacts du téléphone, etc.

La liste complète des plugins officiels est disponible ici : http://plugins.cordova.io/

Il est possible d’ajouter des plugins officiels ou à partir de git avec la ligne de commande:

cordova plugin add {nom du plugin ou url git}

Cela demande de connaître les noms des plugins et surtout de les ajouter manuellement, chacun en ligne de commande.

Visual Studio 2015 permet de modifier cette liste de plugins à partir du fichier de configuration, à l’aide de l’éditeur graphique. On a accès à la liste complète des plugins standards, à l’ajout de plugins personnalisés stockés localement ou à partir de Git et à la liste des plugins déjà installés dans le projet:

image

image

Raison 6. Le débogage iOS à partir de Visual Studio

Rien de tel pour un développeur que de tout faire à partir de son poste et à partir de son éditeur de code préféré. Avec Visual Studio, c’était déjà possible pour les plateformes Android et Windows. Depuis Visual Studio 2015, c’est possible pour iOS également.

Le principe est très simple : il faut installer sur votre Mac le logiciel vs-mda-remote développé par l’équipe qui créé les outils Cordova pour Visual Studio. Il est disponible sur NPM donc l’installation se fait avec une seule ligne de commande :

sudo npm install –g vs-mda-remote

Une fois que c’est fait, vous avez besoin de configurer Visual Studio pour indiquer le service auquel se connecter. Cela se passe dans les Options (Tools > Options).

image

Et voilà ! Vous n’avez plus qu’à lancer en débug, en choisissant l’émulateur cible :

image

Raison 7. Visual Studio 2013 Community Edition est gratuit !

Si vous êtes développeur Open Source ou étudiant, la version Community Edition est gratuite pour vous ! C’est également le cas si vous travaillez dans une société de moins de 250 personnes, 5 licences sont offertes. (plus d’infos : http://www.microsoft.com/fr-fr/download/details.aspx?id=13350)

Vous pouvez installer les outils pour Cordova aussi sur cette version 2013 : http://www.visualstudio.com/en-us/explore/cordova-vs.aspx

Pour Visual Studio 2015, pour l’instant c’est en preview, donc gratuit. Aucune raison de ne pas essayer 🙂

A télécharger ici : http://www.visualstudio.com/news/vs2015-preview-vs

Visual Studio 2013 community edition: http://www.visualstudio.com/news/vs2013-community-vs

N’hésitez pas à me contacter sur twitter (@emargraff) pour échanger à propos de cet article