Apache Cordova est un framework de développement mobile open source. Les développeurs peuvent créer des applications multiplateformes à l’aide des technologies web standards : HTML5, CSS3 et JavaScript. L’application s’exécute dans un conteneur encapsulé pour chaque plateforme et accède aux fonctionnalités de l’appareil via des liaisons d’API conformes aux standards, comme les capteurs, les données locales ou l’état du réseau.
Une seule base de code compatible avec de multiples plateformes, le tout gratuit et open source.
Apache Cordova peut être un bon choix si vous êtes dans l’un des cas suivants :
- Vous êtes développeur mobile et souhaitez déployer une même application sur plusieurs plateformes sans avoir à recoder séparément pour chaque langage et chaîne d’outils propres à chaque plateforme ;
- Vous êtes développeur web et voulez empaqueter une application web pour la publier sur les principales boutiques d’applications ;
- Vous êtes développeur mobile ayant besoin de combiner des composants natifs et une WebView (fenêtre navigateur dédiée) afin de permettre au code web d’accéder aux API de bas niveau de l’appareil. Vous pouvez aussi développer des plugins pour établir la communication entre le code natif et la WebView.
Une application Cordova est composée de plusieurs composants. L’illustration ci-dessous donne une vue d’ensemble de haut niveau de son architecture.
WebView (vue web)
La WebView dotée des fonctionnalités Cordova peut afficher l’intégralité de l’interface de l’application. Sur certaines plateformes, elle peut également être intégrée en tant que composant au sein d’une application hybride et fonctionner aux côtés des contrôles natifs.
Web App (application web)
C’est ici que réside votre code métier. L’application est réalisée sous forme de page web, dont le point d’entrée par défaut est le fichier local index.html. Cette page charge les ressources nécessaires : CSS, JavaScript, images, contenus multimédias et autres fichiers. L’ensemble de l’application s’exécute dans la WebView du conteneur natif, puis est empaquetée pour être distribuée sur les différentes boutiques d’applications.
Le conteneur contient un fichier essentiel : config.xml. Il enregistre les informations de base de l’application et définit tous les paramètres d’exécution, par exemple si l’application autorise le basculement entre mode portrait et paysage.
Plugins
Les plugins sont un élément central de l’écosystème Cordova. Ils servent de passerelle pour permettre la communication entre Cordova et le code natif, encapsulent les différentes API standards de l’appareil et autorisent JavaScript à appeler le code natif.
L’équipe Apache Cordova maintient un ensemble de plugins de base qui offrent des interfaces pour accéder aux fonctionnalités fondamentales de l’appareil : état de la batterie, appareil photo, carnet de contacts, etc.
Outre les plugins officiels de base, de nombreux plugins tiers encapsulent des fonctionnalités étendues qui ne fonctionnent pas sur toutes les plateformes. Vous pouvez rechercher des plugins Cordova sur des plateformes dédiées ou via npm. Vous pouvez également développer vos propres plugins en suivant le guide de développement. Cas d’usage typique : mettre en place une communication entre Cordova et des composants natifs personnalisés.
Attention : les nouveaux projets Cordova ne disposent d’aucun plugin par défaut, c’est la règle appliquée dans les versions récentes. Qu’il s’agisse des plugins de base ou des plugins tiers, vous devez les installer manuellement et explicitement.
Cordova ne fournit pas de contrôles d’interface ni de frameworks frontaux MV. Il propose uniquement un environnement d’exécution pour héberger votre code web. Si vous avez besoin de composants d’interface ou d’un framework d’architecture frontal, vous devrez choisir et intégrer vous-même la solution à votre projet.
Deux modes de développement
Cordova propose deux flux de travail principaux pour concevoir des applications mobiles. Dans bien des situations, les deux approches permettent d’atteindre l’objectif, mais chacune possède ses avantages :
Flux multiplateforme (outil en ligne de commande CLI)
Convient aux projets ciblant de nombreuses plateformes et nécessitant très peu de développements spécifiques à chaque plateforme. L’outil principal est cordova CLI. La CLI est un outil de haut niveau capable de construire le projet pour plusieurs plateformes en une seule fois et masquant les détails des scripts sous-jacents. Elle copie les ressources web communes dans les sous-dossiers de chaque plateforme, configure automatiquement les environnements, exécute les scripts de compilation pour générer les paquets d’installation et propose une interface de commande unifiée pour gérer les plugins.
Flux spécifique à une plateforme
Convient aux développements concentrés sur une unique plateforme, lorsque des modifications profondes au niveau du projet sont nécessaires
Cas d’usage typique : mélanger des composants natifs personnalisés et une WebView Cordova dans une application
Choisissez ce flux si vous devez modifier directement les fichiers du projet au sein du SDK de la plateforme cible.
Ce flux repose sur les scripts basiques propres à chaque plateforme, associés à l’outil indépendant Plugman pour la gestion des plugins. Même s’il est possible de réaliser des développements multiplateformes avec cette méthode, le coût est plus élevé : sans outil de haut niveau pour centraliser la gestion, chaque plateforme doit être compilée et configurée séparément pour les plugins.
Lorsque vous passez du mode CLI au mode SDK plateforme + scripts basiques, il est impossible de revenir en arrière.
La CLI conserve une source de code multiplateforme commune et écrase le code des dossiers de plateforme à chaque compilation. Si vous souhaitez conserver vos modifications sur les fichiers des dossiers de plateforme, vous devez passer au mode des scripts basiques. Ce mode ne lit plus la source web commune et utilise directement le code indépendant stocké dans les dossiers de chaque plateforme.
Installation de Cordova
La méthode d’installation dépend du flux de développement que vous choisissez :
Nous prendrons l’exemple du flux multiplateforme avec la CLI.
L’outil en ligne de commande Cordova (CLI) est distribué sous forme de paquet npm.
Suivez ces étapes pour installer la CLI cordova :
- Téléchargez et installez Node.js. Une fois l’installation terminée, vous devez pouvoir appeler les commandes
nodeetnpmdirectement dans votre terminal. - (Facultatif) Si Git n’est pas encore installé, téléchargez et installez le client Git. Après installation, vous pourrez exécuter la commande
gitdans votre terminal. La CLI Cordova et npm font appel à Git lorsqu’ils doivent récupérer des ressources depuis un dépôt Git. - Installez le module cordova à l’aide de l’outil npm fourni avec Node.js ; npm réalisera automatiquement le téléchargement.
Installer Node.js
L’installation de Node.js est simple. Téléchargez le fichier msi (pour Windows) et lancez simplement l’installation en suivant les étapes par défaut. Une fois l’installation achevée
Ouvrez un terminal CMD pour vérifier que l’installation a réussi
Saisissez ces deux commandes. L’installation est valide uniquement si les deux affichent un numéro de version (voir l’exemple sur l’image ci-dessous)
node -v
npm -v
Après avoir installé Node.js avec succès, nous pouvons procéder à l’installation de Cordova
Systèmes macOS / Linux :
npm install -g cordovaUtilisateurs macOS et Linux : si vous installez des outils dans des répertoires à accès restreint comme /usr/local/share, vous devrez peut-être ajouter sudo devant la commande npm.
Cependant, si vous utilisez un gestionnaire de versions tel que nvm ou nave, ou si le dossier courant dispose des droits d’écriture, sudo n’est pas nécessaire.
Il est recommandé d’éviter autant que possible d’utiliser npm avec sudo, afin de prévenir les problèmes de permissions et d’installation des paquets.
Optez pour un gestionnaire de versions Node.js tel que nvm (Node Version Manager) ou nave ; vous n’aurez généralement pas besoin de sudo lors de l’installation des paquets.
Système Windows :
C:\>npm install -g cordovaLe paramètre -g signifie que Cordova sera installé globalement. Sans ce paramètre, le paquet ne sera installé que dans le sous-dossier node_modules du répertoire courant.
Une fois l’installation terminée, exécutez simplement cordova (sans argument) dans votre terminal. Si les informations d’aide s’affichent normalement, l’installation est réussie.
Pendant l’installation, vous devriez voir s’afficher le message « added 217 packages in 14s »
Vérifier l’installation
cordova -vL’affichage d’un numéro de version (par exemple 13.0.0) signifie que Cordova est prêt à être utilisé.
Conditions système et prise en charge des versions
| Version de Cordova CLI | Version minimale de Node.js prise en charge |
|---|---|
| 13.x | >=20.17.0 |
| 12.x | >=16.13.0 |
| 11.x | >=12.0.0 |
| 10.x | >=10.0.0 |
| 9.x | >=6.0.0 |
L’installation est terminée. Nous pouvons désormais commencer à apprendre Cordova.
Présentation et installation