Cordova - Construire des applications multiplateformes

1 1 1 1 1 1 1 1 1 1 Rating 4.25 (6 Votes)
Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

En 2012, j'ai réalisé mon premier tutoriel sur Phonegap Android : Installation de PhoneGap qui a été renommé depuis en Cordova. Nous allons dans ce tutoriel créer une première application multiplateforme en utilisant HTML, CSS et JavaScript. Je vais vous expliquer son installation ainsi que la création d'une application "Hello world" et une application de géolocalisation fonctionnant sous Android. Nous allons utiliser Ubuntu 14.04 pour ce tutoriel.

Apache Cordova est un projet qui permet de développer des applications Web puis de les distribuer sur différentes plateformes telles qu'Android, iOS, Windows Phone, BlackBerry, Firefox OS et Tizen par exemple. Vous trouverez la liste complète des plateformes supportées.

Liens

Installer

Dans un premier temps, il faut installer et configurer le SDK Android car nous allons réaliser une application Android à l'aide de Cordova. Vous pouvez vous aider de ce tutoriel pour installer le SDK Android : Android - Créer votre première application.

Je considère dans la suite du tutoriel que le SDK Android est bien installé et configuré.

Mantenant nous allons installer Apache Cordova, pour cela exécutez les ligne de commande suivante :

sudo apt-add-repository ppa:cordova-ubuntu/ppa
sudo apt-get update
sudo apt-get install cordova-cli

# Vérifier la version de Cordova
cordova --version

Dans mon cas la vesion de Cordova est la 4.1.2.

Créer notre première application

Initialiser le projet

Nous allons créer notre première application en ligne de commande pour initialiser le projet :

# Initialiser le projet
cordova create hello fr.erlem.blog.hello Hello

Arborescence du projet

Pour visualiser l'arborescence, il faut installer "tree" puis faire un "tree" du répertoire "hello" :

# Installer tree
sudo apt-get install tree

# Voir l'arborescence du répertoire hello
tree hello/

L'arborescence du projet "hello" est la suivante :

hello/
--- config.xml
--- hooks
-   --- README.md
--- platforms
--- plugins
--- www
    --- css
    -   --- index.css
    --- img
    -   --- logo.png
    --- index.html
    --- js
        --- index.js

Soit 7 répertoires et 6 fichiers.

On trouve le fichier config.xml qui est le fichier de configuration.

hooks

Ce répertoire peut contient des scripts utilisés pour personnaliser des commandes de Cordova. Les scripts que vous ajoutez à ces répertoires seront exécutées avant et après les commandes correspondant au nom de répertoire. Utile pour intégrer vos propres systèmes de compilation ou de l'intégration avec les systèmes de contrôle de version.

platforms

Ce répertoire contiendra les fichiers relatifs aux plateformes cibles du projet.

plugins

Contiendra les extensions permettant l'accès à des composants natifs requis par votre application (ex : GPS)

www

Contient les artefacts du projet Web, tels que les fichiers .html, .js, .css.

Définir les plateformes cibles

L'atout de Cordova est de pouvoir ajouter plusieurs type de plateformes. Nous allons dans notre exemple ajouter les plateformes Android et Firefox OS. Si vous souhaitez ajouter d'autres plateformes n'oubliez d'installer leur SDK.

Dans un premier temps, il faut aller dans le répertoire du projet puis ajouter les plateformes. Pour android vérifier que le chemin du SDK dans la variable $ANDROID_HOME est bien correct.

echo $ANDROID_HOME

# Résultat
/home/debian/Android/Sdk

# Si le chemin n'est pas correct ou vide (à modifier selon le chemin de votre SDK)
export ANDROID_HOME="/home/debian/Android/Sdk"

Mettre la variable d'environnement dans .bash_profile :

vi ~/.bash_profile

Ajouter la ligne ci-dessous :

export PATH=${PATH}:/home/debian/Android/Sdk/platform-tools:/home/debian/Android/Sdk/tools

Actualiser le fichier :

source ~/.bash_profile

Vous pouvez ajouter les plateformes :

cd hello

# Ajouter Android
cordova platform add android

# Ajouter Firefox OS
cordova platform add firefoxos

Pour lister les plateformes (le résultat dépend des SDK installés sur votre machine) :

cordova platform ls

# Résultat
Installed platforms: android 3.6.4, firefoxos 3.6.3
Available platforms: amazon-fireos, blackberry10, browser, ubuntu

Si vous souhaitez retirer le support de l'une des plateformes de votre application, il faut utiliser la commande rm :

# Supprimer le support blackberry10
cordova platform rm blackberry10

Pour voir la nouvelle arborescence :

tree ../hello/

# Résultat
112 directories, 323 files

L'application

Nous allons maintenant modifier le fichier hello/www/index.html avec la modification de la ligne 6 :

    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <div id="deviceready" class="blink">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready<br />Hello World</p>
            </div>
        </div>
        <script type="text/javascript" src="/cordova.js"></script>
        <script type="text/javascript" src="/js/index.js"></script>
    </body>

Compiler l'application

La compilation peut se faire en deux étapes, il faut préparer "prepare" et compiler "compile" :

cordova prepare
cordova compile

Note : si vous n'avez pas installé ant, Cordova va vous demander de l'installer pour cela exécutez la commande sudo apt-get install ant

Vous pouvez bien entendu effectuer la compilation en une ligne de commande à l'aide de la commande "build" :

# Construire l'application pour toutes les plateformes ajoutées (Android, Firefox OS dans mon cas)
cordova build

Vous pouvez aussi ne compiler qu'une seul plateforme comme par exemple, vous en souhaitez construire uniquement l'application Android :

# Construire uniquement l'application Android
cordova build android

Tester l'application

Pour tester l'application, il faut lancer la commande "emulate" qui lance l'émulateur par défaut de votre machine :

# Android
cordova emulate android

Si vous souhaitez spécifier un émulateur en particulier (tester avec Android Virtual Device AVD) :

cordova emulate --target=Nexus_5 android

La commande "emulate" unclus les commandes "prepare" et "compile".

Vous pouvez aussi exécuter la commande :

cordova run android --emulator

Pour mettre à jour l'application :

cordova emulate

L'application est maintenant dans votre émulateur Android :

165 cordova construire des applications multiplateformes 01

Déployer l'application sur un périphérique

Pour déployer, donc tester votre application sur un smartphone par exemple. Vous devez d'abrd relier votre smartphone à votre ordinateur via un câble USB puis vérifier que le débugage USB est activé et que la connexion se fasse bien en MTP (icône "Connecté en tant que périphérique USB" dans la barre de notification Android). Et dans "Paramètres > Sécurité" activez "Source inconnues". Si tout est correct, la commande adb devices devrait vous le signaler :

adb devices

# Résultat
List of devices attached 
emulator-5554	device
4df7f516f596bf8b	device

Pour compiler et installer l'application sur le smartphone :

cordova run android

Si tout c'est bien passé, votre application est maintenant lancé sur votre smartphone.

Les plugins

Les différentes API permettant d'accéder aux différents périphériques sont sous forme de plugins. Cela veut dire que si vous souhaitez par exemple utiliser le GPS ou internet dans vos applications il faudra les ajouter comme plugin à votre projet.

Pour rechercher les plugins, vous devez utiliser la commande cordova plugin search <plugin>, par exemple pour le GPS ou vous pouvez aller dans la partie plugins du site de Cordova http://plugins.cordova.io :

cordova plugin search gps

# Résultats
au.com.cathis.ma.gpslocation - Exposes GPS Location related values to a Cordova application.
com.contoso.gpsplugin - GpsPlugin plugin for Apache Cordova
com.dataforpeople.plugins.gpssettings - Display the location settings page
com.vitorventurin.gps - Cordova GPS plugin - iOS CoreLocation LocationService / Android LocationService GPS
de.fastr.phonegap.plugins.checkgps - check if GPS is enabled on Android and iOS
fr.louisbl.cordova.gpslocation - Android geolocation plugin using GPS provider
org.bluetooth.gps - Cordova plugin for connecting external GPS via Bluetooth
org.flybuy.nativeutils - Native Utilities For PhoneGap
sk.tamex.locationandsettings - Open WirelessSettings,WifiSettings,LocationSettings. Check if Gps or Wireless Network Location is enabled.
sk.tamex.plugins.gpssettings - Display the gps location settings

Comme vous pouvez le constater il y en a plusieurs, si vous souhaitez faire de la géocalisation, exécutez la commande ci-dessous :

cordova plugin search geolocation

# Résultats
com.cowbell.cordova.geofence - Geofence plugin
com.google.google-play-services -
    Google play service  Plugin of Admob ,base on admob ios sdk 6.10 and android google play service sdk 4.5 ,support ios and android,support all admob banner and Interstitial
    project home:https://github.com/gooogleadmob/admob-phonegap
com.infobip.push.cordova - Infobip Push Notification Plugin for Android and iOS
com.romainstrock.cordova.background-geolocation - Cordova Background GeoLocation Plugin
com.vitorventurin.gps - Cordova GPS plugin - iOS CoreLocation LocationService / Android LocationService GPS
fr.louisbl.cordova.gpslocation - Android geolocation plugin using GPS provider
fr.louisbl.cordova.locationservices - Android geolocation plugin using Google Play Services Location API.
org.apache.cordova.geolocation - Cordova Geolocation Plugin
org.transistorsoft.cordova.background-geolocation - Cordova Background GeoLocation Plugin

Nous allons utiliser le plugin org.apache.cordova.geolocation - Cordova Geolocation Plugin.

Tous les plugins commançant par org.apache.cordova sont les plugins de base du système. Vous pouvez en obtenir la liste par :

cordova plugin search org.apache.cordova

# Résultats
org.apache.cordova.battery-status - Cordova Battery Plugin
org.apache.cordova.camera - Cordova Camera Plugin
org.apache.cordova.console - Cordova Console Plugin
org.apache.cordova.contacts - Cordova Contacts Plugin
org.apache.cordova.device - Cordova Device Plugin
org.apache.cordova.device-motion - Cordova Device Motion Plugin
org.apache.cordova.device-orientation - Cordova Device Orientation Plugin
org.apache.cordova.dialogs - Cordova Notification Plugin
org.apache.cordova.file - Cordova File Plugin
org.apache.cordova.file-system-roots - org.apache.cordova.file-system-roots plugin ===========================================
org.apache.cordova.file-transfer - Cordova File Transfer Plugin
org.apache.cordova.geolocation - Cordova Geolocation Plugin
org.apache.cordova.globalization - Cordova Globalization Plugin
org.apache.cordova.inappbrowser - Cordova InAppBrowser Plugin
org.apache.cordova.media - Cordova Media Plugin
org.apache.cordova.media-capture - Cordova Media Capture Plugin
org.apache.cordova.network-information - Cordova Network Information Plugin
org.apache.cordova.plugin.softkeyboard - Controls Soft Keyboard on touch devices (so far only Android).
org.apache.cordova.speech.speechsynthesis - Cordova Speech Synthesis Plugin
org.apache.cordova.splashscreen - Cordova Splashscreen Plugin
org.apache.cordova.statusbar - Cordova StatusBar Plugin
org.apache.cordova.test-framework - Cordova Test Framework Plugin
org.apache.cordova.vibration - Cordova Vibration Plugin

Cela signifie qu'il y a des plugins de plus haut niveau permettant de faire plus de choses.

Installer un plugin

Pour ajouter un plugin, vous devez exécutez la commande cordova plugin add <plugin>, voir l'exemple ci-dessous :

# Ajouter le plugin org.apache.cordova.geolocation
cordova plugin add org.apache.cordova.geolocation

Le plugin est automatiquement installé sur chacune des plateformes déclarées et les permissions sont mises à jour automatiquement (voir le fichier platforms/android/AndroidManifest.xml pour Android).

Pour lister tous les plugins, utiliser la commande ls :

cordova plugin ls

# Résultat
org.apache.cordova.geolocation 0.3.12 "Geolocation"

Pour ajouter un plugin, vous devez exécutez la commande cordova plugin rm <plugin>, voir l'exemple ci-dessous :

# Supprimer le plugin org.apache.cordova.geolocation
cordova plugin rm org.apache.cordova.geolocation

Pour la suite du tutoriel rajouter le plugin org.apache.cordova.geolocation.

Exemple d'application avec le plugin org.apache.cordova.geolocation

Pour tester le plugin , vous pouvez consulter sa documentation : http://plugins.cordova.io/#/package/org.apache.cordova.geolocation

Nous allons à l'ouverture de l'application lancer une fenètre indiquant les coordonnées GPS ainsi que d'autres information.

Remplacer les balises body du fichier www/index.html par :

    <body>
        <div class="app">
            <h1>Apache Cordova</h1>
            <script type="text/javascript">
                // onSuccess Callback
                // This method accepts a Position object, which contains the
                // current GPS coordinates
                //
                var onSuccess = function(position) {
                    alert('Latitude: '          + position.coords.latitude          + '\n' +
                          'Longitude: '         + position.coords.longitude         + '\n' +
                          'Altitude: '          + position.coords.altitude          + '\n' +
                          'Accuracy: '          + position.coords.accuracy          + '\n' +
                          'Altitude Accuracy: ' + position.coords.altitudeAccuracy  + '\n' +
                          'Heading: '           + position.coords.heading           + '\n' +
                          'Speed: '             + position.coords.speed             + '\n' +
                          'Timestamp: '         + position.timestamp                + '\n');
                };

                // onError Callback receives a PositionError object
                //
                function onError(error) {
                    alert('code: '    + error.code    + '\n' +
                          'message: ' + error.message + '\n');
                }

                navigator.geolocation.getCurrentPosition(onSuccess, onError);            
            </script>
        </div>
        <script type="text/javascript" src="/cordova.js"></script>
        <script type="text/javascript" src="/js/index.js"></script>
    </body>

Puis lancer l'application sur votre smartphone en pensant à activer le GPS :

# Construire et déployer l'application sur un smartphone
cordova run android

La fenêtre est directement lancée, si vous cliquez sur le bouton "OK", le logo de Cordova apparaît :

165 cordova construire des applications multiplateformes 02165 cordova construire des applications multiplateformes 03

Conclusion

Environ 3 ans que je n'avez pas utilisé Cordova (Phonegap). J'ai été réellement surpris par les nombreuses améliorations. Les plugins et les hooks apportent pas mal de flexibilités et de fiabilités aux développeurs. A la fin de ce tutoriel, j'ai vraiment envie de continuer à refaire des tutoriels Cordova.

Autres articles

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn