Initialiser un projet cordova

Initialiser un projet Android Cordova

Dans ce premier article, vous allez apprendre à initialiser un projet via cordova. Cordova (anciennement phonegap) est un projet repris par la communauté Apache visant à développer des applications mobiles natives par le biais des langages html5, javascript et css. Que vous développiez pour iOS ou Android, Cordova permet de vous passer des langages Objective C pour iOS ou Java pour Android en développant en html5, javascript et css.

Introduction au projet cordova

L’utilisation de Cordova nécessite certains pré-requis pour fonctionner, notamment que :
– node.js soit installé;
– le sdk Android soit installé.

Télécharger et installer node.js

Pour savoir ce qu’est node.js, je vous invite à consulter l’article d’introduction à node.js.

Télécharger Android Studio

Pour télécharger le Android Studio, rendez-vous ici.

Installer Android Studio

Ici rien de complexe, il suffit d’exécuter le fichier pour installer Android Studio et de suivre les instructions pas à pas. L’installation intègre le téléchargement du sdk Android.

Installer cordova

L’installation de cordova passe par le biais de node.js et de son gestionnaire de package npm.

Il suffit donc d’exécuter depuis la ligne de commande, la commande suivante pour installer cordova.

npm install -g cordova

Le paramètre -g indique à npm de faire une installation globale : l’installation n’est pas limitée au dossier dans lequel la commande est exécutée.

Ce paramètre permet donc après l’installation d’invoquer la commande cordova depuis n’importe quel projet.

Lorsque l’installation est terminée, le curseur du terminal réapparaît et vous pouvez invoquer la commande cordova.

cordova

qui donne comme résultat.

You have been opted out of telemetry. To change this, run: cordova telemetry on.
Synopsis
 
cordova command [options]
 
Global Commands
    create ............................. Create a project
    help ............................... Get help for a command
    telemetry .......................... Turn telemetry collection on or off
 
Project Commands
    info ............................... Generate project information
    requirements ....................... Checks and print out all the requirements
                                            for platforms specified
 
    platform ........................... Manage project platforms
    plugin ............................. Manage project plugins
 
    prepare ............................ Copy files into platform(s) for building
    compile ............................ Build platform(s)
    clean .............................. Cleanup project from build artifacts
 
    run ................................ Run project
                                            (including prepare && compile)
    serve .............................. Run project with a local webserver
                                            (including prepare)
 
Learn more about command options using 'cordova help <command>'
 
Aliases
    build -> cordova prepare && cordova compile
    emulate -> cordova run --emulator
 
Options
    -v, --version ...................... prints out this utility's version
    -d, --verbose ...................... debug mode produces verbose log output for all activity,
    --no-update-notifier ............... disables check for CLI updates
    --nohooks .......................... suppress executing hooks
                                         (taking RegExp hook patterns as parameters)
 
Examples
    cordova create myApp org.apache.cordova.myApp myApp
    cordova plugin add cordova-plugin-camera --save
    cordova platform add android --save
    cordova requirements android
    cordova build android --verbose
    cordova run android
    cordova build android --release -- --keystore="..\android.keystore" --storePassword=android --alias=mykey

Initialiser un projet Android cordova

A partir de maintenant tout se passe en ligne de commande : ouvrez un Invite de Commandes.

Pour cet exemple, créez un projet nommé monProjet.

Dans cette fenêtre, placez vous dans le dossier dans lequel vous souhaitez placer votre projet. puis exécutez la commande.

cordova create monProjet

Cela donne à l’exécution.

Creating a new cordova project with name "HelloCordova" and id "io.cordova.hellocordova" at location "/home/......../monProjet"
Downloading cordova library for www...
Download complete

Vous devez voir apparaître un dossier nommé monProjet, dossier de votre projet.

Paramétrez le projet pour android, placez vous dans le dossier monProjet et exécutez la commande.

cordova platform add android

Qui donne à l’exécution.

Adding android project...
Creating Cordova project for the Android platform:
        Path: platforms\android
        Package: io.cordova.hellocordova
        Name: HelloCordova
        Activity: MainActivity
        Android target: android-23
Android project created with cordova-android@5.2.2
Discovered plugin "cordova-plugin-whitelist" in config.xml. Adding it to the project
Fetching plugin "cordova-plugin-whitelist@1" via npm
Installing "cordova-plugin-whitelist" for android
This plugin is only applicable for versions of cordova-android greater than 4.0.
If you have a previous platform version, you do *not* need this plugin since the whitelist will be built in.

Des erreurs peuvent apparaître.

– soit java n’est pas configuré correctement. Dans ce cas, vérifiez que les variables d’environnement relatives à java sont correctement configurées.
PATH => pointe vers le dossier bin de votre dossier d’installation de java
CLASSPATH => pointe vers le fichier tools.jar placé dans le dossier lib de votre dossier d’installation de java
JAVA_HOME => pointe vers le dossier d’installation de java

– ou encore il manque la variable d’environnement ANDROID_HOME qui doit pointer vers le dossier d’installation du sdk Android

L’initialisation est terminée. Il ne reste plus qu’à rentrer dans le vif du sujet. Intégrer le jeu Pong développé dans de précédents articles.