Créer une application mobile : Tutoriel avec PhoneGap et SenchaTouch

Créer une application mobile : Tutoriel avec PhoneGap et SenchaTouch

Les plateformes open source se sont beaucoup développées ces dernières années. Il s’agit de plateformes « libres de droits » qui permettent à tous les utilisateurs d’accéder à l’intégralité du code source. L’avantage majeur de ces plateformes est de pouvoir évoluer grâce aux actions de la communauté. Chacun peut apporter ses modifications afin de rendre la plateforme meilleure pour tous les utilisateurs.

Parmi ces plateformes, certaines sont dédiées à la création d’applications mobiles comme l’explique le tutoriel ci-dessous pour les plateformes PhoneGap et SenchaTouch.

Le marché des applications mobiles est un marché très récent. Il débute en 2007 avec la démocratisation des smartphones, et n’a depuis cessé de croître.

En 2009 sort Android 2, cela permet à Google de percer sur le marché des OS mobiles et de démultiplier ses parts de marché en 3 ans : 2% de parts de marché en 2009 contre 46% en 2012 (pour le marché français).

2010 sera l’année de la popularisation des tablettes tactiles avec la sortie de l’iPad.

En 2013, la vente de périphériques mobiles (smartphones et tablettes) s’apprête à dépasser celle des PC.

Le marché des applications n’a cessé d’évoluer, fin 2009 l’Android Market comptabilisait 20 000 applications et fin 2012… déjà plus de 700 000 applications !

Aujourd’hui, il existe une dizaine de systèmes d’exploitation pour mobile (iOS, Android, Windows Phone, BlackBerry OS, Symbian, Bada…), les deux principaux étant iOS et Android.

Avec le développement de toutes ces plateformes, les développeurs n’ont pas forcément les moyens de fabriquer des applications natives pour chaque OS. Pour pallier à ce problème, des solutions de développement multiplateformes se sont créées.

Ce tutoriel a pour objectif de vous présenter deux d’entre elles : PhoneGap et SenchaTouch, des plateformes complémentaires.

PhoneGap est un framework permettant de développer une application mobile à partir de langage web (HTML, Javascript…) et d’accéder aux fonctionnalités du mobile (géolocalisation, stockage, notifications…).

Sencha Touch est une interface utilisateur entièrement modifiable basée sur des bibliothèques JavaScript (il est à noter que l’on peut créer une application mobile en se basant uniquement sur Sencha Touch, mais dans ce cas on aura accès à moins de fonctionnalités propres au mobile que si l’on utilisait également PhoneGap).

 

Logiciels et matériels utilisés :

  • Fonctionnement sous Windows 7 32bits
  • Téléphone Android 2.3.7 (HTC Desire avec rom Oxygen)
  • Création du tutoriel : janvier 2013
  • Android Developer Tools (ADT) Build: v21.0.1-543035
  • PhoneGrap : phonegap-2.3.0
  • JDK : jdk-7u10-windows-i586
  • Sencha Touch 2.1.0

 

Installation d’Eclipse + Android SDK (= Android Developer Tools)

Commencez par télécharger le pack Eclipse + Android SDK : http://developer.android.com/sdk/index.html

Vous avez un fichier compressé nommé : « adt-bundle-windows-x86.zip »

Décompressez le fichier à la racine du disque « C : »

Renommez le répertoire extrait par « eclipse_android »

Installation du JDK

Téléchargez le JDK de Java (il contient le JRE) :

http://www.oracle.com/technetwork/java/javase/downloads/index.html

Installez le JDK

Modification de la variable d’environnement ‘PATH’ :

  1. Allez dans : « Panneau de configuration\Système et sécurité\Système »
  2. Cliquez sur « Paramètres système avancés »
  3. Dans l’onglet « Paramètres système avancée » cliquez sur « Variables d’environnement.. »
  4. Dans « Variables système », sélectionnez ou créez la ligne « Path », puis modifiez-la
  5. Rajoutez cette ligne en début de  « Valeur de variable » : « C:\Program Files\Java\jdk1.7.0_10\bin; »
  6. Fermez les fenêtres en cliquant sur OK.

 

Configuration de l’ADT

Exécutez le SDK Manager situé dans : « C:\eclipse_android »

Installez le « SDK Platform » pour « Android 4.2 » et « Android 2.3.3 »

Installez le « Google USB Driver » situé dans « Extras »

Cliquez sur « Install packages… » et validez les conditions d’utilisation

Ma Première Application Android

Allez dans le répertoire « C:\eclipse_android\eclipse » et exécutez « eclipse.exe »

Définir l’espace de travail (workspace) dans « C:\Users\Kevin\android_workspace »

Créez un projet Android : File -> New -> Android Application Project

Application Name : MaPremiereAppli

Suivre les étapes suivantes :

  • On définit le nom de l’Application (Application Name)
  • Minimum Required SDK : la version la plus basse d’Android qui sera supportée
  • Target SDK : la version la plus haute d’Android qui sera supportée
  • Compile With : pour quelle version le programme sera compilé (choisir la version de son téléphone)
  • Thème : attention, limite le choix de la version minimum supportée !

 

Rien à modifier

 

Ici,  on peut définir l’icône utilisée par l’application.

 

Attention, le choix de l’activité nous limite dans la version minimum d’Android supportée !

  • Activity Name : laissez par défaut
  • Layout Name : laissez par défaut
  • Navigation Type : nous limite dans le choix de la version minimum d’Android

 

On passe à PhoneGap !

Téléchargez PhoneGap :

http://phonegap.com/download

Dans le projet, faire un clic droit sur assets -> New -> Folder et nommez le répertoire : « www »

Créez deux répertoires à  la racine de votre projet :

  • libs/ (normalement déjà existant)
  • assets/www/

Extraire le contenu du fichier phonegap-2.3.0.zip que l’on vient de télécharger.

Dans « phonegap-2.3.0\lib\android », récupérez les fichiers phonegap.jsphonegap.jar et le répertoire xml.

  • Copiez phonegap.jar dans libs/
  • Copiez phonegap.js dans assets/www/
  • Copiez le répertoire XML dans res/

 

Configurez le Build Path de “cordova-2.3.0.jar” :

  • Clic droit -> Build Path -> Add to Build Path

Dans « MainActivity.java » situé dans le répertoire « src » :

  • Ajoutez la ressource : « import org.apache.cordova.DroidGap; » (ou  « import com.phonegap.*; »)
  • Changez la classe parente « Activity » de l’Activity principale par « DroidGap »
  • Supprimez ou mette en commentaire le code inutile
  • Passez la méthode « onCreate » en public
  • Saisir la ligne : « super.loadUrl(« file:///android_asset/www/index.html »); »
  • Supprimez ou mettre en commentaire les imports inutiles

 

Ce que contiennent les dossiers :

  • res
    • Les éléments graphiques codés en XML
    • Les images de l’application
    • Les variables globales (chaînes de caractère, dimension…)
  • src
    • Contient toutes les classes JAVA gérant l’application.
    • Ces classes contrôlent chaque élément et événement.

Passons maintenant à notre fichier index.html, vous pourrez manipuler ce fichier de la même façon si vous avez des compétences dans le développement web.

Et Sencha Touch

Dans le répertoire  « assets->www » on va créer un dossier « lib ».  Dans ce répertoire, on crée le dossier touch, ce qui nous donne « assets/www/lib/touch ».

Dans ce répertoire « touch » on va copier le contenu du SDK de Sencha Touch :

 

Pour finir, il faut créer un lien HTML dans le fichier index.html appelé par l’application au démarrage, et le faire pointer vers le fichier index.html situé dans le répertoire « examples » :

<html manifest= » » lang= »en-US »><head><meta charset= »UTF-8″><title>Kitchen Sink</title></head><body><h2><a href= »lib/touch/examples/index.html »>Exemples d’utilisation de Sencha Touch</a></h2></body></html>

 

L’alliance de ces deux plateformes opensource vous permettra de développer vos propres applications mobiles. En effet, le framwork de PhoneGap et l’interface utilisateur pour SenchaTouch sont très pratiques à utiliser ensemble pour un meilleur développement.

 

Sources:

Android :

http://android-domicile.blogspot.fr/

 

Android + PhoneGap :

http://webcache.googleusercontent.com/search?q=cache:t0ahFJUUwBYJ:www.tunandroid.com/content/2012/08/31/votre-premiere-application-avec-phonegap/+&cd=1&hl=fr&ct=clnk&gl=fr&client=firefox-a

http://coenraets.org/blog/phonegap-tutorial/

http://preprod-orange-dev-tn.makina-corpus.net/developper-ensemble/tutoriel/premiere-application-avec-phonegap

 

SenchaTouch :

http://blog.zenika.com/index.php?post/2011/04/06/Sencha-Touch-%3A-un-framework-HTML5-pour-Mobile

http://docs.sencha.com/touch/2-0/#!/guide/first_app

http://www.sencha.com/learn/getting-started-with-sencha-touch-2/

 

 

1 Commentaire
  1. Merci pour ce tuto bien utile, il m’a bien aidé pour commencer sur de bonnes bases.

    Répondre

Répondre à Pierre Pellegrini Annuler la réponse.

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>