Votre premier projet Cordova

Posted on Août 01, 2026 by

Au cours de la leçon précédente, nous avons installé Cordova avec succès. Dans cette séance, nous allons créer un projet à l’aide des commandes de l’interface CLI.

I. Créer un projet Cordova

Ouvrez le terminal, accédez au dossier où vous souhaitez stocker votre projet et exécutez la commande de création :

cordova create hello com.foxdevelop.hello HelloWorldLangage du code : CSS (css)

Explication des paramètres :

  1. hello : nom du dossier du projet
  2. com.example.hello : nom du paquet de l’application (identifiant unique Android, à modifier obligatoirement avant une mise en ligne)
  3. HelloWorld : nom affiché de l’application

Voici un exemple concret : nous créons un répertoire sur le lecteur D puis nous générons le projet à l’intérieur.

C:\Users>d:

D:\>mkdir cordovademo

D:\>cd cordovademo

D:\cordovademo>cordova create hello com.foxdevelop.hello HelloWorld
Creating a new cordova project.Langage du code : CSS (css)

Vous pouvez ensuite voir le dossier cordovademo sur le lecteur D, contenant un sous-dossier hello.

Répertoire du code source principal : hello/www/

Page d’entrée : www/index.html

Ne modifiez aucun fichier dans le répertoire platforms : ils seront écrasés lors de la compilation !

II. Accéder au projet et ajouter des plateformes

cd hello

Ajout des plateformes

# Plateforme Android (utilisable sous Windows)
cordova platform add android

# Plateforme iOS [Impossible de compiler sous Windows ! Fonctionne uniquement sur Mac]
# cordova platform add iosLangage du code : PHP (php)

Extrait de l’exécution

D:\cordovademo>cd hello

D:\cordovademo\hello>cordova platform add android
Using cordova-fetch for cordova-android
Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: com.foxdevelop.hello
        Name: HelloWorld
        Activity: MainActivity
        Android Target SDK: android-36
        Android Compile SDK: 36
Subproject Path: CordovaLib
Subproject Path: app
Android project created with cordova-android@15.1.0

D:\cordovademo\hello>cordova platform ls
Installed platforms:
  android 15.1.0
Available platforms:
  browser
  electronLangage du code : CSS (css)

III. Vérification préalable de l’environnement (important)

cordova requirements

Cette commande vérifie si votre système dispose d’un environnement correctement configuré, notamment la présence du JDK, etc.

D:\cordovademo\hello>cordova requirements
Android SDK is missing cmdline-tools directory.

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
Command failed with exit code 1: avdmanager list target
'avdmanager' n’est pas reconnu comme commande interne ou externe, programme exécutable ou fichier de commandes.
Gradle: not installed
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android Studio
Some of requirements check failedLangage du code : PHP (php)

Résultat attendu en cas de configuration valide :

Java JDK: installed
Android SDK: installed
Gradle: installed

Ici, le système indique Gradle: not installed.

Si vous n’avez pas installé le JDK, vous devez le faire. Vous pouvez consulter nos autres tutoriels sur l’installation du JDK.

J’utilise la version 11 du JDK sur ma machine.

Voici l’erreur que j’obtiens sur mon ordinateur :

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=undefined (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Android SDK is missing cmdline-tools directory.
Using Android SDK: D:\Sortware\ADB
Could not find an installed version of Gradle either in Android Studio,
or on your system to install the gradle wrapper. Please include gradle
in your path, or install Android StudioLangage du code : JavaScript (javascript)

Il vous faut installer Android Studio, qui contient le SDK Android.

Pour en savoir plus sur Android Studio, référez-vous à nos autres cours.

Lancez Android Studio, allez dans le menu supérieur : Tools → SDK Manager puis relevez le chemin de votre SDK.

Ensuite, configurez les variables d’environnement

Nom de variable : ANDROID_HOME
Valeur : C:\Users\xxxxx\AppData\Local\Android\Sdk

Après avoir créé la variable, ajoutez ces chemins dans la variable Path :

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools\latest\bin

Installer les outils de ligne de commande dans Android Studio

Ouvrez Android Studio → Tools → SDK Manager

Passez sur l’onglet SDK Tools

Télécharger le binaire Gradle

Téléchargement sur le site officiel : https://gradle.org/releases/

Décompressez l’archive dans ce chemin : C:\gradle\gradle-8.5

Gradle by Develocity | Releases

Configurer les variables d’environnement système

Nom de variable : GRADLE_HOME
Valeur : C:\gradle-8.7

Créer une nouvelle variable système

Ajoutez-la dans la variable Path

Vérifier que l’installation fonctionne

Ouvrez une fenêtre cmd

gradle -v

Réexécutez le test ; si vous voyez le résultat ci-dessous, la configuration est opérationnelle.

D:\cordovademo\hello>cordova requirements

Requirements check results for android:
Java JDK: installed 11.0.31
Android SDK: installed true
Android target: not installed
No android targets (SDKs) installed!
Gradle: installed C:\gradle-8.7\bin\gradle.BAT
Some of requirements check failedLangage du code : CSS (css)

Problème 2 : version du JDK

Lorsque j’exécute la commande cordova run android, j’obtiens cette erreur :

D:\cordovademo\hello>cordova run android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)

BUILD SUCCESSFUL in 1sCUTING [91ms]
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

FAILURE: Build failed with an exception.

* Where:
Build file 'D:\cordovademo\hello\platforms\android\app\build.gradle' line: 20

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin 'com.android.internal.application'.
   > Android Gradle plugin requires Java 17 to run. You are currently using Java 11.
      Your current JDK is located in C:\Program Files\Zulu\zulu-11
      You can try some of the following options:
       - changing the IDE settings.
       - changing the JAVA_HOME environment variable.
       - changing `org.gradle.java.home` in `gradle.properties`.

* Try:
> Run with --stacktrace option to get the stack trace.
> Run with --info or --debug option to get more log output.
> Run with --scan to get full insights.
> Get more help at https://help.gradle.org.

Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0.

You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.

For more on this, please refer to https://docs.gradle.org/8.14.2/userguide/command_line_interface.html#sec:command_line_warnings in the Gradle documentation.

BUILD FAILED in 2s
Command failed with exit code 1: D:\cordovademo\hello\platforms\android\tools\gradlew.bat cdvBuildDebugLangage du code : JavaScript (javascript)

Mon environnement utilise actuellement le JDK11, mais l’AGP (Android Gradle Plugin) associé à la plateforme Android de Cordova impose impérativement le JDK17. La compilation échoue donc directement.

J’utilisais Zulu JDK 11, je passe donc à Zulu JDK 17.

Téléchargement ici : Java 8, 11, 17, 21, 25 Download for Linux, Windows and macOS

Le fichier téléchargé est un programme d’installation MSI. Lancez-le et cochez les options correspondantes afin que l’installeur paramètre automatiquement JAVA_HOME et Path.

Ouvrez une fenêtre CMD pour vérifier Java :

java -version

openjdk version "17.0.20" 2026-07-21 LTS
OpenJDK Runtime Environment Zulu17.68+17-CA (build 17.0.20+8-LTS)
OpenJDK 64-Bit Server VM Zulu17.68+17-CA (build 17.0.20+8-LTS, mixed mode, sharing)Langage du code : CSS (css)

Ce résultat signifie que l’installation est réussie.

IV. Compiler l’application

# Compiler toutes les plateformes (seule Android est présente ici)
cordova build

# Compiler uniquement Android
cordova build android
Langage du code : PHP (php)

Une fois la compilation achevée, l’APK se trouve dans ce chemin :

hello\platforms\android\app\build\outputs\apk\debug\app-debug.apk

Exemple d’exécution

D:\cordovademo\hello>cordova build android
Checking Java JDK and Android SDK versions
ANDROID_HOME=C:\Users\maiwu\AppData\Local\Android\Sdk (recommended setting)
ANDROID_SDK_ROOT=undefined (DEPRECATED)
Using Android SDK: C:\Users\maiwu\AppData\Local\Android\Sdk

BUILD SUCCESSFUL in 9s
1 actionable task: 1 up-to-date
Subproject Path: CordovaLib
Subproject Path: app

> Task :CordovaLib:compileDebugJavaWithJavac
Note: Some input files use or override a deprecated API.
Note: Recompile with -Xlint:deprecation for details.

[Incubating] Problems report is available at: file:///D:/cordovademo/hello/platforms/android/build/reports/problems/problems-report.html

BUILD SUCCESSFUL in 11s
50 actionable tasks: 50 executed
Built the following apk(s):
        D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\app-debug.apkLangage du code : JavaScript (javascript)

Vous trouverez le fichier APK dans le dossier D:\cordovademo\hello\platforms\android\app\build\outputs\apk\debug\

V. Lancer l’application pour les tests

Méthode 1 : lancer sur émulateur Android

cordova emulate android

Méthode 2 : tester sur appareil physique via USB (activer le débogage USB)

cordova run android

Nous allons utiliser un appareil physique pour les tests, je vous recommande de faire de même. Branchez votre téléphone Android par câble et activez le mode débogage.

Ouvrez une fenêtre cmd dans le dossier hello et exécutez la commande cordova run android

L’application va alors s’installer sur votre téléphone.

La page Cordova s’affichera sur l’écran.

VI. Installer des plugins

Accéder aux fonctionnalités natives du téléphone

Une page web Cordova ne peut pas accéder directement à la caméra, au Bluetooth, aux fichiers ou aux notifications : il faut obligatoirement installer des plugins.

Exemple : plugin caméra

cordova plugin add cordova-plugin-camera

Lister les plugins déjà installés

cordova plugin ls

Tout appel d’API native depuis le JavaScript doit attendre l’événement deviceready. Il ne faut pas appeler les plugins immédiatement après le chargement de la page !

Modèle de base (www/js/index.js)

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
    // L’appareil est prêt, vous pouvez utiliser tous les plugins Cordova
    console.log("Cordova initialisé");
}
Langage du code : JavaScript (javascript)

Exemple d’exécution

D:\cordovademo\hello>cordova plugin add cordova-plugin-camera
Installing "cordova-plugin-camera" for android
Subproject Path: CordovaLib
Subproject Path: app
Adding cordova-plugin-camera to package.json

D:\cordovademo\hello>cordova plugin ls
cordova-plugin-camera 8.0.0 "Camera"Langage du code : CSS (css)

Nous allons modifier index.html avec le code ci-dessous pour tester la fonction caméra.

Rappel de l’arborescence du projet après création :

D:\cordovademo\hello

Tout votre code sera à écrire dans le dossier www.

Remplacez le contenu de index.html par ce code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Camera Test</title>
    <script src="cordova.js"></script>
</head>
<body>
    <button id="btnTake">Prendre une photo</button>
    <br>
    <img id="imgPreview" style="width:220px;">

    <script>
        let cameraReady = false;

        document.addEventListener("deviceready", onDeviceReady, false);

        function onDeviceReady() {
            console.log("Événement deviceready déclenché, Cordova prêt");
            cameraReady = true;
        }

        // Privilégiez addEventListener (évite les conflits de timing liés à onclick)
        document.getElementById("btnTake").addEventListener("click", function(){
            if(!cameraReady){
                alert("Attendez la fin de l’initialisation de Cordova !");
                return;
            }

            navigator.camera.getPicture(
                function(imageUri) {
                    console.log("Photo prise avec succès :", imageUri);
                    document.getElementById("imgPreview").src = imageUri;
                },
                function(error) {
                    alert("Échec de la prise de vue : " + error);
                },
                {
                    destinationType: 0, // Camera.DestinationType.FILE_URI = 0, utilisation directe du nombre pour éviter l’erreur variable non définie
                    sourceType: 1,      // Camera.PictureSourceType.CAMERA = 1
                    quality: 80
                }
            );
        });
    </script>
</body>
</html>Langage du code : C# (cs)

Réexécutez ensuite la commande cordova run android

L’application s’ouvrira, vous verrez un bouton. Cliquez dessus pour activer la caméra et prendre une photo.

* VII. Dossier merges : fichiers spécifiques par plateforme

Par défaut, toutes les plateformes partagent les ressources du dossier www.

Si vous souhaitez avoir des ressources d’interface différentes entre Android et iOS, utilisez le dossier merges :

merges/
├─android/
│  └─css/overrides.css  # Fichier actif uniquement sur Android
└─ios/
Langage du code : PHP (php)

Lors de la compilation, les fichiers présents dans merges remplacent les fichiers portant le même nom dans www.

* VIII. Mettre à jour Cordova

# Mise à jour globale de l’interface de commande Cordova
npm update -g cordova

# Installer une version précise
npm install -g cordova@12.0.0

# Mettre à jour la version de la plateforme Android dans le projet
cordova platform update android --save
Langage du code : PHP (php)

Récapitulatif des commandes utiles

#1 Créer un projet
cordova create testapp com.mytest.app TestApp
cd testapp

#2 Ajouter la plateforme Android
cordova platform add android

#3 Vérifier l’environnement
cordova requirements

#4 Compiler un paquet de débogage
cordova build android

#5 Lancer sur appareil physique
cordova run android
Langage du code : CSS (css)

Votre premier projet Cordova

Posted in Tutoriel Cordova

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *