Cordova Phonegap – Initialiser un projet (mise à jour 16/09/2016)




 

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.

Je vous propose de découvrir cordova en adaptant le jeu Pong développé tout au long d’articles précédents. Dans ce premier article, vous allez apprendre à initialiser un projet via cordova.


 

Introduction

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

 

Apache Ant, c’est quoi ?

Apache Ant est un logiciel créé par la fondation Apache qui vise à automatiser les opérations répétitives du développement de logiciel telles que la compilation, la génération de documents (Javadoc) ou l’archivage au format JAR, à l’instar des logiciels Make (source wikipedia).

Dans le cadre de cordova, Apache Ant est utilisé pour initialiser les projets mobiles. Vous n’avez donc pas à connaitre les commandes Apache Ant.

 

Télécharger Apache Ant

Rendez vous ici pour télécharger Apache Ant.

 

Installer Apache Ant

Il suffit de décompresser l’archive téléchargée dans le dossier de votre choix puis d’ajouter la variable d’environnement ANT_HOME et d’ajouter le chemin vers le dossier bin de ANT à la variable d’environnement PATH.

Admettons que vous ayez décompressé l’archive dans le dossier C:\Tools\apache-ant-1.9.7, la variable ANT_HOME prend comme valeur dans ce cas C:\Tools\apache-ant-1.9.7.

Créez la variable ANT_HOME comme indiqué ci-dessus.

Pour configurer cette variable d’environnement, en fonction de votre version de windows ou linux référez vous à :
– l’article Configurez les variables d’environnement sous Windows 7;
– l’article Configurez les variables d’environnement sous Windows 10;
– l’article Configurez les variables d’environnement sous Linux.

Ajoutez à la variable PATH (pour Linux) ou Path (pour Windows) la valeur C:\Tools\apache-ant-1.9.7\bin. Ceci permettra d’appeler l’executable de ANT depuis toute l’arborescence du système.

Sous Windows, il suffit d’ajouter le chemin %ANT_HOME%\bin en le précédant d’un point virgule.
Sous Linux, il suffit d’ajouter le chemin (toujours à la fin du fichier .profile) %ANT_HOME%\bin comme ceci : PATH= »$ANT_HOME/bin:$PATH ».

 

Télécharger et installer node.js

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

Pour l’installation, consultez l’article Installer node.js sous windows.

 

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, vous allez créer 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 devriez voir apparaître un dossier nommé monProjet, dossier de votre projet.

Il reste à paramétrer le projet pour android en vous plaçant dans le dossier monProjet et en exécutant 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

Il ne reste plus qu’à importer le projet sous Android Studio : tout est expliqué dans l’article Importer un projet cordova android sous Android Studio

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.

Si vous constatez des imprécisions ou encore des erreurs, faites le moi savoir. Vous pouvez aussi manifester le service rendu par cet article. Les commentaires sont là pour ça.

 

Posté dans android, html5Taggé applications mobiles, cordova, phonegap, smartphone, tablette  |  1 commentaire

Une réponse à "Cordova Phonegap – Initialiser un projet (mise à jour 16/09/2016)"

Répondre

*