Ma première application Android avec Cordova
Table des matières
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
Dans ce tutoriel, je vous explique comment migrer une application JavaScript vers le Google Play Store d'Android. Commentez
Article lu 69571 fois.
I . Introduction
Ayant écrit précédemment un tutoriel pour démontrer la facilité de créer une application
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 nod
Ceci permettant d'installer le fameux Cordova :
sudo npm install -g cord
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 ="/ho
export PATH="$ANDROID_HO export PATH="$ANDROID_HO
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 apa
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/cordov
Et lançons la ligne de commande pour créer le projet :
cordova create echec com cordova platform add and
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' enco
<widget id = "com.mkdevs.e
<name> echec</name>
<description>
Echec
</description>
<author email ="mika@
Michael Bertocch
</author>
<content src ="index.
<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 ="u
<meta name="form
<meta name="msap
<!-- WARNING: fo
<meta name="view
<link rel ="style
<title> Hello Wor
</head>
<body>
<div class= "app"
<h1> Apache C
<div id ="dev
<p class
<p class
</div>
</div>
<script type= "te
<script type= "te
</body>
</html>
Pour migrer, j'ai juste enlevé le code :
<div class= "app"
<h1> Apache C
<div id ="dev
<p class
<p class
</div>
</div>
Pour y insérer l'HTML de notre application.
<!DOCTYPE html>
<html>
<head>
<meta charset ="u
<meta name="form
<meta name="msap
<!-- WARNING: fo
<meta name="view
<link rel ="style
<title> Echec</ti
<script src ="js/
<script src ="js/
</head>
<body>
<div id ="tour" ><
<div id ="jeu" ></
<div id ="tourcol
<div id ="content
<div id ="content
<script type= "te
<script type= "te
<script src ="js/
</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 -keys
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 -siga
Et enfin, alignons le zip avec la commande suivante :
zipalign -v 4 CordovaApp
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
Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants :
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.
Copyright © 2000-2018 - www.developpez.c
Commentaires
Enregistrer un commentaire