Qu'est-ce que Cordova ?

Les applications mobiles ont désormais une place prépondérante dans la vie de la plupart des gens. D'après le portail de la transformation numérique des entreprises, les applications mobiles représenteraient 89% du temps passé par les français sur un smartphone, soit près de 2 à 4 heures par jour. Il peut être tentant d'intégrer ce gigantesque marché pesant près de 36 milliards d'euros. Cependant, la difficulté technique de mise en œuvre d'une application mobile, du fait de la multiplicité des langages natifs (Swift, Java, Kotlin, C#, ...), peut occasionner un coût important.

Pour cela, il existe une solution en vogue aujourd'hui : faire une application "hybride" sur une technologie Cross-Platform ! Plus concrètement, cela veut dire : ne développer l'application qu'une seule fois sur une technologie robuste et intéropérable. Par exemple, cela permet de faire fonctionner votre application à la fois sur Android et iOS avec le même code source. C'est une économie de coût et de temps considérable ! Attention, il ne faut pas confondre une app hybride avec une webapp, qui, elle, ne permet pas l'accès aux fonctions du téléphone.

Il existe de nombreuses solutions cross-plaform, React Native, Xamarin ou plus récemment Flutter développé par Google. C'est la solution Cordova que j'ai choisi de présenter dans cet article. Nous reviendrons plus loin sur ses avantages et ses (rares) inconvénients. Mais avant, une présentation rapide de cette merveilleuse solution.

Cordova, anciennement nommé PhoneGap, est un framework permettant de créer des applications dites "hybrides". Née en 2011, cette solution est issue de la reprise du projet PhoneGap par la fondation Apache. Son nom complet est d'ailleurs Apache Cordova, elle est, au moment de l'écriture de cet article, en version 10.0.0. Le framework Cordova exploite des technologies web classiques telles que le HTML5, le CSS3 et le Javascript. Une fois compilée, l'application s'exécute dans des wrappers (WebView) propres à chaque plateforme en s'appuyant sur des API JS conformes au standard (cf schéma ci-desous).

De nombreux plugins sont disponibles pour pouvoir manipuler les fonctionnalités natives du téléphone.

Pourquoi Cordova ?

Ce n'était pas le cas il y a quelques années, mais à l'heure où j'écris ces lignes, les solutions permettant de faire du cross-plaform ne manquent pas ! Alors, pourquoi utiliser Cordova ?

D'abord, il faut préciser que Cordova est un projet open-source, c'est à dire que son code-source est totalement libre et disponible sur Github. Bénéficiant d'une forte communauté, le projet est régulièrement mis à jour et des évolutions sont apportées rapidement quand c'est nécessaire (ex. quand Apple a interdit l'usage de UIWebView dans les applications sur son store).

Ensuite, son avantage principal pour les développeurs pratiquant déjà les langages web HTML/CSS/JS est qu'il n'y a pas de nouveau langage à apprendre ! Contrairement à Flutter par exemple qui impose le Dart, toute la logique métier est ici codée en Javascript ! En outre, vous pouvez tout à fait utiliser le langage que vous souhaitez dans votre projet Cordova, et même un autre framework tel que VueJS ou Angular.

Contrairement à React Native, Flutter ou Ionic, qui offrent toutes une panoplie d'éléments UI pré-définis, il n'y a malheureusement pas de template par défaut pour Cordova… Mais cet inconvénient est également un avantage : la liberté concernant l'UI est totale ici, là où elle est parfois restreinte ailleurs.

L'autre gros point fort de Cordova est sa bibliothèque de plugins extrêmement fournie ! Il existe des plugins pour piloter toutes les fonctionnalités natives du téléphone (géolocalisation, appareil photo, notifications, bluetooth,...) mais aussi énormément de plugins fonctionnels très aboutis (pour gérer les tâches de fond, la persistance des données, le transfert de fichiers, etc...).La majeure partie est maintenue à jour en suivant l'évolution des versions d'Android/iOS/WindowsPhone, et la plupart de ces plugins sont plutôt simples d'utilisation, en plus d'être de qualité.

Enfin, comme exposé quelques lignes plus loin, Cordova en lui-même est plutôt simple d'utilisation. Installé en 22 caractères avec le gestionnaire de package NPM, il suffit de connaître quelques lignes de commande pour commencer à l'utiliser. La courbe d'apprentissage est nettement moins longue que pour React Native par exemple.

Les partisans des langages natifs, Swift, Objective-C et autre Java rétorqueront sans doute que les performances sont bien moindres qu'en utilisant un langage natif. Par définition, comme le code compilé par Cordova n'est pas natif mais interprété, il n'est pas mensonger de dire que le temps d'exécution de ce code est légèrement supérieur à celui d'un code natif. Mais aujourd'hui, au niveau d'aboutissement des frameworks cross-platform tels que Cordova, et vu la puissance des terminaux actuels, la différence de performance est MINIME, il n'y en a pratiquement plus.

Comment cela se traduit-il techniquement ?

Pour installer Cordova, il faut d'abord installer NodeJS (pour utiliser le gestionnaire de package NPM). Par la suite, dans votre terminal, exécutez la commande suivante :

npm install -g cordova

Cordova est alors installé.

Ensuite, pour créer un projet Cordova : "cordova create MonProjet net.netnco.app NomDeVotreAppli". MonProjet étant le nom que va prendre votre dossier, net.netnco.app étant le nom du package de l'application (facultatif), NomDeVotreAppli étant le nom (facultatif) que prendra votre application lorsqu'elle sera compilée ou déployée. Ces valeurs sont modifiables à tout instant dans le fichier config.xml qui va être créé dans votre dossier.

Une fois dans votre projet, vous remarquerez les dossiers suivants :

• hooks/ : ce dossier n'existe plus dans les versions > 10.0
• node_modules/ : ce dossier contient les modules NodeJS
• platforms/ : ce dossier est celui dans lequel sera compilé l'application, contenant plus tard des dossiers au nom des plateformes concernées comme "ios" ou "android"
• plugins/ : c'est ce dossier qui contiendra les plugins Cordova
• www/ : c'est ici que se trouveront les fichiers de développement, càd là où nous coderons l'application à proprement parlé.
• Le fichier config.xml permet notamment de modifier le nom de l'application, sa description, le nom du package et de l'auteur (utiles lors de l'ajout de l'app sur un Store).
• Le fichier package.json contient, lui, la liste des plugins et dépendances du projet.

Dans la version 10.0+ de Cordova, les dossiers node_modules, platforms et plugins sont créés seulement après l'ajout d'une plateforme ou après le premier déploiement du projet.

Dans les versions antérieures, ces dossiers seront créés à l'initialisation du projet mais vous devrez ajouter la première plateforme manuellement.

Pour avoir un exemple concret, lancez l'application dans l'invite de commande avec "cordova serve". Cela a pour effet, d'une part de vous créer les fameux dossiers manquants ainsi que de vous ajouter la plateforme "android", d'autre part de déployer l'application dans le navigateur web par défaut.

Vous pouvez y accéder depuis l'adresse affichée dans votre invite de commande, classiquement http://localhost:8000. Selon votre version, soit il vous faut cliquer sur le nom de la plateforme sur laquelle vous souhaitez simuler le lancement du projet, soit l'affichage est générique.

A l'initialisation, Cordova vous propose la structure suivante : un fichier index.html à la racine de www/ ainsi que les dossiers css/ img/ js/. index.html est pré-rempli avec un micro-template affichant l'écran ci-dessous :

Pour changer le texte "Apache Cordova" par exemple, modifiez la ligne 42 de l'index.html.

Pour ajouter une plateforme : cordova platform add [platform]:

cordova platform add ios

Un dossier "ios" est alors créé dans "platforms/".

Cela vous servira à dire à Cordova quelle(s) plateforme(s) doive(nt) être prise(s) en charge. Lors de l'ajout d'une plateforme, Cordova créera un dossier au nom de la plateforme dans platforms/, avec toute la structure nécessaire pour compiler votre application.

Pour générer l'application : cordova build [platform] :

cordova build android

Si vous avez installé le SDK Android, un fichier APK (extension des applications Android -en passe d'être remplacée par AAB) sera alors généré.

Pour déployer l'application directement sur un téléphone :

cordova run android

Cela nécessite d'avoir un téléphone branché à votre machine et opérationnel (débogage USB activé). Sinon, l'application sera déployée sur le simulateur. La bonne manière de faire lors du développement est évidemment de déployer l'application SUR le téléphone (ou un simulateur, si vous voulez tester l'application sur un OS que vous ne possédez pas ou une autre version.) et non dans le navigateur web. Deux raisons à cela : d'abord, il se peut que votre navigateur ne reproduise pas fidèlement certains comportements graphiques et fonctionnels qui se produiraient sur un véritable appareil Android/iOS/Windows, etc... D'autre part, dès que l'on commence à utiliser des plugins pour accéder aux fonctionnalités du téléphone, il devient compliqué, voire impossible, de tester le code produit ailleurs que sur un téléphone.

Bien entendu, cet exemple est simplifié à l'extrême. Tout l'intérêt est évidemment, dans ce dossier www/, de pouvoir inclure des projets web complexes, à partir de frameworks tels que VueJS et autres. Cordova servira alors à "encapsuler" notre application, et à faire la "passerelle" entre notre code web et le téléphone.

Pour conclure, rappelons qu'en terme de performances, Cordova fait face à des concurrents sérieux tels que Flutter ou React Native. Mais de par la grande liberté et les nombreuses possibilités qu'il offre, le doyen des technologies cross-plaform pour le web et les mobiles reste aujourd'hui l'une des meilleures solutions du marché, aisément abordable techniquement.

Nous verrons plus en détail dans un article ultérieur l'ajout et l'utilisation de plugins, ainsi que le déploiement et le débogage sur un appareil.