Tutoriel : application Android avec PhoneGap

Ecrire une application et la faire tourner sur les ténors des OS mobiles comme Android, iOS, Windows Phone ou même encore WIndows 8, est-ce un rêve ? Non, il s’agit maintenant d’une réalité grâce à de nombreux Framework. Celui qui nous intéresse aujourd’hui n’est autre que PhoneGap. L’idée de ce framework est de développer une webApp en HTML 5 et CSS 3 et en utilisant le Javascript pour ce connecté aux différentes API des OS pour utiliser par exemple, l’appareil photo ou le GPS. Ce système permet ainsi d’écrire une application avec presque autant de possibilité qu’en code natif.

Nous allons voir via ce tutoriel comment créer une application PhoneGap que l’on développe spécifiquement pour Android. En récupérant les sources web, on pourra en quelques cliques et réglages adapter cette application à tout les autres OS. Alors pourquoi commencer avec Android ? Tout simplement, la programmation pour Android se fait via des permissions, que l’on détermine via le AndroidManifest.xml. Pour cela, il faut passer par une version de l’application sous forme de projet Android.

A télécharger :

Installation :

Il est important de savoir où vous installez votre JDK et Android SDK Manager. En effet, une fois la procédure faite, il vous faudra ajouter une variable d’environnement :

  • Nom de la variable : JAVA_HOME
  • Valeur de la variable : C:\Program Files (x86)\Java\jdk1.7.0_17\bin

Il vous faudra aussi agrandir la variable PATH en rajoutant ceci à la fin : ;C:\Program Files (x86)\Java\jre7\bin;C:\Program Files (x86)\Java\jdk1.7.0_17\bin. Attention à mettre les chemins d’installation de votre propre JDK.

xpath.png.pagespeed.ic.n1tnOftWc0

Démarrer ensuite le SDK Manager pour télécharger l’API niveau 7 et le dernier niveau disponible. Ces deux SDK vous permettront de compilé votre projet pour qu’il fonctionne à partir d’Android 2.2 jusqu’à la dernière version. Il vous faudra ensuite ajouter « ;C:\Apps\android-sdk-windows\platform-tools;C:\Apps\android-sdk-windows\tools » qui est l’endroit où vous avez installez vos SDK dans la variable d’environnement PATH.

Il ne vous reste plus qu’à installer Android Studio et à dézipper votre version de phonegap dans un dossier pratique (exemple ‘C:\App\’). Vous voilà prêt pour commencer la grande aventure.

Création de l’application

Ouvrez l’invite de commandes en tant qu’administrateur et saisissez la commande suivante : « cd C:\Apps\phonegap-2.9.0\lib\android\bin » (adaptez si besoin à vos répertoires).

Ensuite vous pouvez saisir cette nouvelle commande qui vous permettra de générer le squelette de votre première application : « create MonAppli fr.company.monappli MonAppli ». On appelle donc le binaire create avec 3 paramètres : le répertoire à créer, l’ID de l’application suivant la convention de nommage fr.company.xxx et le nom de l’application.

Si tout ce passe bien, vous devez avoir ce rapport :

Creating new android project...
Copying template files...
Copying js, jar & config.xml files...
Copying cordova command tools...
Updating AndroidManifest.xml and Main Activity...

Ouverture avec Android Studio

Ouvrez votre nouvel IDE, Android Studio. SI jamais il ne se lance pas, c’est que le JAVA_HOME n’est pas mis (variable d’environnement). Choisissez d’importer un projet existant et n’oubliez pas de le lié aux bonnes SDK et c’est gagné, vous pouvez maintenant modifié votre projet tranquillement et le compiler avec Android Studio tout en utilisant PhoneGap !  Les pages HTML, fichiers CSS et JS se trouvent dans le répertoire « MonAppli/assets/www ». Bon amusement !

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :