Ma première application Android avec Cordova

Ayant écrit précédemment un tutoriel pour démontrer la facilité de créer une application Firefox OSArticle sur Firefox OS avec les technologies web, je vais faire de même pour Android.

Pour permettre cette prouesse technique (une application Android sans Java), nous allons utiliser l'application open source Cordova.

Dans cet article, nous allons porter mon application d'échec web sur le Play Store de Google.

Si vous vous intéressez au développement web sous Android, vous avez dû entendre parler de PhoneGap. Cordova est un projet permis grâce à Adobe qui a fourni le code source à la fondation Apache.

L'idée est simple : compiler une coquille utilisant un module « webview » chargeant notre application. C'est un peu comme si on encapsulait notre application dans un navigateur très allégé.

PhoneGap existe toujours et peut permettre via une offre « cloud » de générer ses applications pour Android mais aussi iOS, Windows Phone, BlackBerry…

Pour information, il permet également de compiler vers des plateformes desktop : Windows 8 et Ubuntu.

L'adresse : https://build.phonegap.com/

Développant sous GNU/Linux, je donnerai les instructions d'installation sur Ubuntu.

Cordova nécessite Node.js pour être installé, nous allons donc commencer par cela.

Dans un terminal :

sudo apt-get install nodejs nodejs-legacy npm

Ceci permettant d'installer le fameux Cordova :

sudo npm install -g cordova

Installons maintenant le SDK Android (qui sera nécessaire pour générer l'application finale).

Rendez-vous à l'adresse https://developer.android.com/sdk/installing/index.html?pkg=adt

Désarchivons l'archive téléchargée dans un répertoire « androidSdk » (nom à titre d'exemple) dans votre répertoire « home », ce qui donnera « /home/mika/androidSdk/adt-bundle-linux-x86_64-20140702 ».

Modifions ensuite le PATH, cette variable d'environnement.

Dans votre fichier .bashrc, ajoutons les lignes suivantes :

export ANDROID_HOME="/home/mika/androidSdk/adt-bundle-linux-x86_64-20140702/sdk" 

export PATH="$ANDROID_HOME/tools:$PATH" 
export PATH="$ANDROID_HOME/platform-tools:$PATH"

Ces lignes définissent une variable d'environnement indiquant le répertoire hébergeant le SDK Android, et ajoutent au PATH les outils d'Android.

Ajoutons maintenant le SDK qui sera utilisé (4.4.2).

Dans un terminal, lancez :

android

Lancez « SDK Manager » pour installer l'API 19 (Android 4.4.2) :

Installons ensuite l'émulateur :

Ajoutons ensuite un appareil :

Cliquez sur « Create » pour finaliser l'ajout :

Une fois validé, vous avez fini avec le SDK d'Android.

Je conseille d'avoir un serveur web, plus pratique pour déboguer.

Si ce n'est pas le cas, pour installer un serveur Apache sur Ubuntu :

sudo apt-get install apache2

Créons un répertoire Cordova dans notre arborescence web : ici /home/mika/www/cordova

Dans un terminal, rendons-nous dans celui-ci :

cd /home/mika/www/cordova

Et lançons la ligne de commande pour créer le projet :

cordova create echec com.mkdevs.echec echec
cordova platform add android

La première ligne crée le projet, la seconde ajoute la plateforme Android, car on peut également compiler vers iOS, BlackBerry, wPhone et Firefox OS…

Mais dans cet article, nous allons nous concentrer sur Android.

À la création du projet, Cordova vous crée l'arborescence suivante :

Comme vous pouvez le remarquer il y a plusieurs parties dans ce projet, celles qui vont nous intéresser ici, ce sont le fichier config.xml et l'arborescence www.

Éditons le fichier config.xml :

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.mkdevs.echec" version="0.0.5" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>echec</name>
    <description>
        Echec
    </description>
    <author email="mika@email.com" href="http://mkframework.com">
        Michael Bertocchi
    </author>
    <content src="index.html" />
    <access origin="*" />
</widget>

Ici on a un simple fichier XML décrivant l'application.

En éditant le fichier index.html pour y intégrer notre application :

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Hello World</title>
    </head>
    <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</p>
            </div>
        </div>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

Pour migrer, j'ai juste enlevé le code :

        <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</p>
            </div>
        </div>

Pour y insérer l'HTML de notre application.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Echec</title>
        
        <script src="js/main.js"></script>    
        <script src="js/canvas.js"></script>   
    </head>
    <body> 

        <div id="tour"></div>
        <div id="jeu"></div>
        <div id="tourcolor"></div>
        <div id="content"></div>
        <div id="content2"> </div>
        
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        
        <script src="js/echec.js"></script>
    </body>
</html>

Il n'y a pas de modification particulière à apporter à votre application web existante. J'ai juste respecté l'arborescence : les fichiers JavaScript dans le répertoire « js ».

Une autre chose toute bête que j'ai faite afin de rendre l'application compatible sur l'ensemble des formats de mobile : privilégiez les tailles en pourcentages plutôt qu'en pixels.

En ouvrant votre navigateur à l'adresse web de votre application, on a donc :

Vous pouvez donc ici facilement déboguer dans votre navigateur habituel votre application (Firebug et compagnie).

C'est maintenant la partie qui nous intéresse : la transformation d'une application web en application Android.

Rendez-vous dans le répertoire de votre application et, dans un terminal lancez :

cordova build --release

Cordova génère les fichiers de notre application dans le répertoire platforms/android/ant-build/

Comme vous pouvez le remarquer, il y a un fichier APK de release « non signé ».

Pour pouvoir télécharger un APK sur le magasin d'application, il faut d'abord le signer puis « l'aligner ».

Pour cela, créons d'abord une clé privée, rendez-vous dans votre répertoire « maison », nous créons un répertoire « androidKey ».

Lancez la commande :

keytool -genkey -v -keystore mika.keystore -alias alias_name -keyalg RSA -keysize 2048 -validity 10000

Cette étape vous demandera de renseigner des informations sur le développeur (nom, prénom, ville…) et vous générera un fichier .keystore nécessaire à la signature de votre application.

Signons maintenant notre fichier .apk avec la commande suivante (dans le répertoire platforms/android/ant-build/) :

jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore /home/mika/androidKey/mika.keystore CordovaApp-release-unsigned.apk alias_name

Et enfin, alignons le zip avec la commande suivante :

zipalign -v 4 CordovaApp-release-unsigned.apk cordova-release.apk

Je vous invite à créer un script Shell pour automatiser ces trois actions : compilation, signature et alignement.

Avant de soumettre une application au Play Store de Google, il faut commencer par s'y inscrire.

Rendez-vous à l'adresse : https://support.google.com/googleplay/android-developer/#topic=3450769

Vous pouvez soit créer un compte, soit utiliser un compte Google existant.

Vous avez quelques formulaires à remplir sur votre application ainsi que des images à télécharger représentant celle-ci ainsi que son interface.

IX-A. Comment se passe le stockage de données ?▲

Vous avez pu voir ici qu'il était très simple de développer pour Android même si vous ne connaissez pas Java. Cela ouvre des possibilités à beaucoup de développeurs web qui peuvent utiliser simplement les technologies qu'ils maîtrisent déjà.

Cordova permet également aux développeurs en herbe de développer sur d'autres plateformes mobiles sans devoir apprendre des langages comme Java, C# et objective C.

Note : Cordova propose aussi des plugins pour enrichir les possibilités déjà disponibles via la technologie web.

L'adresse du gestionnaire de plugins : http://plugins.cordova.io/#/viewAll

Vous trouverez l'application développée sur le Play Store de Google à cette adresse : https://play.google.com/store/apps/details?id=com.mkdevs.echec&hl=fr_FR

Je souhaiterais remercier chrtophe et Feanorin pour leur relecture technique et f-leb pour sa correction orthographique