Vos recrutements informatiques

700 000 développeurs, chefs de projets, ingénieurs, informaticiens...

Contactez notre équipe spécialiste en recrutement

Ma première application Android avec Cordova

Dans ce tutoriel, je vous explique comment migrer une application JavaScript vers le Google Play Store d'Android. Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

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.

II. Parenthèse sur Cordova

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/

III. Installation

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 :

 
Sélectionnez
sudo apt-get install nodejs nodejs-legacy npm

Ceci permettant d'installer le fameux Cordova :

 
Sélectionnez
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 :

 
Sélectionnez
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 :

 
Sélectionnez
android
Image non disponible

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

Image non disponible

Installons ensuite l'émulateur :

Image non disponible

Ajoutons ensuite un appareil :

Cliquez sur « Create » pour finaliser l'ajout :

Image non disponible

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

IV. Créons notre projet

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 :

 
Sélectionnez
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 :

 
Sélectionnez
cd /home/mika/www/cordova

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

 
Sélectionnez
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 :

Image non disponible

V. Paramétrons notre projet

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 :

 
Sélectionnez
<?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.

VI. Migrons notre application web vers ce template

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

 
Sélectionnez
<!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 :

 
Sélectionnez

        <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.

 
Sélectionnez
<!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 :

Image non disponible

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

VII. Compilons pour Android

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 :

 
Sélectionnez
cordova build --release

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

Image non disponible

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 :

 
Sélectionnez
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/) :

 
Sélectionnez
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 :

 
Sélectionnez
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.

VIII. Ajoutez l'application au Play Store

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.

Image non disponible

IX. FAQ : Foire Aux Questions 

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

Vous avez à votre disposition trois modes de stockage : LocalStorage, WebSQL et IndexedDB.

Plus d'informations ici : http://cordova.apache.org/docs/en/4.0.0/cordova_storage_storage.md.html#Storage

IX-A-1. LocalStorage

Cette solution permet un stockage synchrone clé/valeur.

Plus d'informations ici : http://www.w3.org/TR/webstorage/

IX-A-2. WebSQL

Ici, on se rapproche plus d'une base de données traditionnelle avec un mode d'interaction utilisant le langage SQL.

Supporté par Android, BlackBerry 10, iOS et Tizen.

Plus d'informations ici : http://dev.w3.org/html5/webdatabase/

IX-A-3. IndexDB

Cette troisième alternative à mi-chemin entre LocalStorage et WebSQL n'est prise en charge que par BlackBerry 10 et Windows Phone 8.

X. Conclusion

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

XI. Remerciements

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

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2014 Michael Bertocchi. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.