Ma première application Android avec Cordova

Michael Bertocchi

Dans ce tutoriel, je vous explique comment migrer une application JavaScript vers le Google Play Store d'Android. Commentez

- Titre : Ma première application Android avec Cordova

- Auteur : Michael Bertocchi

- Parution : 13 février 2015

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

Sommaire

- I. Introduction

- II. Parenthèse sur Cordova

- III. Installation

- IV. Créons notre projet

- V. Paramétrons notre projet

- VI. Migrons notre application web vers ce template

- VII. Compilons pour Android

- VIII. Ajoutez l'application au Play Store

- IX. FAQ : Foire Aux Questions

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

- IX-A-1. LocalStorage

- IX-A-2. WebSQL

- IX-A-3. IndexDB

- X. Conclusion

- XI. Remerciements

I - Introduction

Ayant écrit précédemment un tutoriel pour démontrer la facilité de créer une application 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 :

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.

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 :

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 :

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 :

<?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 :

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

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 :

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.

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.

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