Développer des applications mobiles avec jQTouch

jQTouch est un plugin jQuery, développé par David Kaneda en 2009 et est disponible en version 1.0 bêta 2 sous la licence MIT. Actuellement, il utilise la version 1.3.2 de jQuery. Il a été conçu spécialement pour iPhone et iPod Touch, et se destine plus généralement à tout appareil disposant d’un navigateur webkit (Safari, Chrome).

Dans cet article, je vais vous expliquer comment utiliser jQTouch pour développer une application Web pour mobile interactive et ayant toute l’apparence des applications natives iPhone ou Android.

Comment l’utiliser ?

jQTouch se présente sous la forme d’un fichier JavaScript compressé très léger (10k) ainsi que de feuilles de styles et d’images. Il comprend également des scripts dans le dossier extensions : « jqt.location » pour gérer la géolocalisation, « jqt.offline » pour le mode hors ligne, « jqt.floaty » permet de créer une barre d’outils flottante, et enfin « jqt.autotitles » pour modifier automatiquement le titre de la barre d’outils de la page demandée.
Pour commencer, il faut déclarer les fichiers dans la balise head de notre page HTML :

<style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
<style type="text/css" media="screen">@import "jqtouch/themes/jqt/theme.min.css";</style>
<script src="jqtouch/jquery.1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>

Vous remarquerez le fichier CSS theme.min. jQTouch utilise deux fichiers CSS, une feuille de style générale qui organise les écrans et gère les transitions et les orientations, et une deuxième pour le thème de l’application. Actuellement, il existe deux thèmes prédéfinis : apple et jqt. Le thème agit sur l’apparence de l’application : image de fond, couleurs, affichage des composants HTML… Par ailleurs, la librairie jQuery doit être déclarée avant jQTouch pour qu’il soit reconnu.
Ensuite, les panels ou écrans de l’application doivent être organisés dans des balises div. Voici un exemple de page d’accueil :

<div id="home" class="current">
	<div class="toolbar">
		<h1>My Panel</h1>
		<a class="button flip" href="#next">Next</a>
	</div>
	<!-- contenu de la page -->
</div>

Chaque écran est identifié par un id, ici « home » qu’on utilise pour naviguer entre les pages. Pour appliquer les styles de jQTouch, il suffit de les appeler dans l’attribut class. toolbar permet d’afficher une barre d’outils avec un titre et on peut y ajouter des boutons de navigation. Ainsi, le lien Next va chercher une balise HTML avec un id « next » et l’afficher sur l’écran. Pour afficher ce lien sous forme de bouton il suffit de spécifier Button dans l’attribut class. Il est également possible de spécifier une animation de transition entre les panels dans ce même attribut (ici flip), l’animation par défaut étant slide. jQTouch se charge également de mémoriser chaque panel ouvert dans un historique ce qui permet de revenir en arrière. On peut ainsi ajouter un lien avec la classe back et mettre l’attribut href à # pour naviguer à la page précédente. Par ailleurs, pour spécifier la 1ère page à afficher, on peut ajouter la classe current au div « home ». Sinon, jQTouch affichera le 1er panel défini.
Ce qu’il faut retenir avec jQTouch c’est qu’il suffit d’une page HTML pour construire son application avec tous ses écrans et c’est le framework qui se charge ensuite de les organiser et les afficher (ou les cacher).

Configuration JQTouch

Juste après avoir déclaré jQTouch dans la balise head, il faut le configurer en l’initialisant par la fonction suivante :

var jQT = new $.jQTouch({
        icon: 'jqtouch.png',
        startupScreen: 'jqt_startup.png'
        //...
});

Lors de cette initialisation on peut spécifier des paramètres de configurations, par exemple l’icone ou l’écran de démarrage de l’application. La liste de tous ces paramètres se trouve sur ce site. La variable jQT est ensuite utilisée pour appeler les fonctions du framework.

Démo

Pour illustrer cette libraire, je vous propose une petite application de démonstration. Cette application, que j’ai brièvement citée dans mon article d’introduction, est un agenda. On peut y ajouter des événements (via un formulaire HTML5), les enregistrer sur le LocalStorage du navigateur, les afficher sur une carte avec Google Maps API et proposer de tracer un chemin vers son emplacement à partir de la localisation de l’utilisateur (API Geolocation).

Les panels

L’application se compose de 3 panels définis. La page d’accueil, un panel pour ajouter un évenement avec un formulaire à remplir, et une page contenant la carte Google. A chaque évènement ajouté, un panel sera crée dynamiquement en javascript avec les informations enregistrées.
La page d’accueil affiche la liste des événements enregistrés en accédant au LocalStorage. Lors de sa première utilisation, la liste est bien entendu vide. La page contient une  » toolbar  » avec le titre et un bouton permettant d’accéder à la page new pour créer un nouvel événement.

<div id="home" class="current">
	<div class="toolbar">
		<h1>My Agenda</h1>
		<a class="button slideup" href="#new">New Event</a>
	</div>
	<ul id="events" class="rounded">
	</ul>
</div>

JQTouch propose différents styles pour afficher des listes. Ici j’ai utilisé rounded qui affiche la liste dans un rectangle à bord rond pour plus de clarté. Il existe également edgetoedge, metal et plastic qui affichent la liste sur toute la largeur de l’écran avec différentes couleurs.
La page d’ajout d’un événement se présente sous la forme d’un formulaire avec des champs à remplir. Pour créer un formulaire jQTouch, il suffit d’ajouter une liste à la balise <form>, chaque champ étant encadré par une balise <li>.
J’ai choisi de mettre quelques nouveaux inputs d’HTML5 : date et email ainsi que l’attribut placeholder qui affiche un texte explicatif sur le champ.

<div id="new">
	<!-- toolbar -->
   	<form name="myform">
                 <ul class="edit rounded">
                	<li>Event : <input type="text" id="name" name="name" placeholder="Enter the event's name"/></li>
                	<li>Start Date : <input type="date" id="start" name="startD"/> Start Time : <input type="time" id="startT" name="startT"/></li>
    		        <li>Finish Date : <input type="date" id="end" name="endD" /> End Time : <input type="time" id="endT" name="endT" /></li>
    		        <li>Location : <input type="text" id="location" name="location" placeholder="Enter the adress of your event" /></li>
    		        <li><select id="daily">
                     		<option value="none">None</option>
			        <option value="daily">Daily</option>
			        <option value="weekly">Weekly</option>
			        <option value="monthly">Monthly</option>
                    	</select></li>
    		        <li>Alarm <span class="toggle"><input type="checkbox" id="alarm" name="alarm"/></span></li>
    		        <li>Email notification: <input type="email" id="email" name="email" placeholder="Enter your email adress for notification"/></li>
                 </ul>
                 <div align="center">
                        <a id="saveButton" class="whiteButton" href="home">Save Event</a>
                 </div>
	</form>
</div>

JQTouch fourni des styles pour les champs de type select, radio, ou checkbox avec notamment la classe toggle qui permet d’afficher un interupteur ON/OFF. Cependant, les types date et time n’ont pas de styles ou d’interface associés avec jQTouch. Tout dépend donc de l’implémentation du navigateur (Opéra est le seul à afficher un calendrier mais n’est pas totalement compatible avec les styles du framework).

Ensuite, je rajoute un dernier écran pour la carte Google sur laquelle sera affiché chaque évenement. Petite remarque: pour afficher la carte en plein écran il faut mettre style="width:100%; height:100%;" sur le div du panel et sur celui de
la carte (en mettant height à 85% pour voir le bouton « Go to my Event). Sinon, elle ne s’affichera pas.

<div id="map" style="width:100%; height:100%;">
         <!-- Toolbar -->
   	 <div id="map_canvas" class="fullscreen" style="width:100%; height:85%;"></div>
   	 <a href="#" id="traceButton" class="whiteButton" style="margin: 10px">Go to my Event</a>
</div>

Le boutton « Go to my Event » sera utilisé pour tracer un chemin vers l’emplacement de l’évènement à partir de la localisation de l’utilisateur. Je précise que pour utiliser l’API Google Maps, il faut d’abord ajouter cette ligne dans la balise head de la page HTML:

<script src="http://maps.google.com/maps/api/js?sensor=true"></script>

A présent que nous avons notre page HTML, passons au javascript qui va nous permettre de gérer les événements et de dynamiser notre application. Nous allons tout d’abord commencer par configurer jQTouch.

var jQT = new $.jQTouch({
    icon: 'jqtouch.png',
    addGlossToIcon: true,
    startupScreen: 'jqt_startup.png',
    statusBar: 'black',
    useAnimations: true,
    fullScreen: true
});

Ensuite, pour gérer les évènements liés au « toucher », le framework fourni des fonctions raccourcis pour éviter d’utiliser bind. Par exemple, pour un ‘tap event’ (qui remplace le « click » standard), on utilise la fonction tap sur l’élément :

$("#saveButton").tap( function(e){
	 //sauvegarde...
});

Sauvegarde des évènements

Pour sauvegarder les données, nous allons utiliser le LocalStorage du navigateur. Le localStorage est en fait une table (clé, valeur). Pour simplifier, la clé sera le nom de l’événement ajouté, et dans le champ « valeur » seront enregistrées les informations entrées sur le formulaire séparées par des points-virgules.

function saveLocalStorage(){
	var key = nameValue;
	var value = startDValue + ";" + startTValue + ";" + endDValue  + ";" + endTValue + ";" + addressValue + ";" + dailyValue + ";" + alarmValue + ";" + emailValue;
	if(key){
	    if(window.localStorage){
		window.localStorage.setItem(key, value);
            }
	}
}

L’évènement est ensuite ajouté à la l
iste de la page d’accueil et un panel est crée pour afficher ses informations et contiendra un lien pour accéder au panel de la carte

Pour en savoir plus sur le localStorage je vous invite à regarder mon billet sur le mode hors-ligne.

Géolocalisation

A présent, il ne reste plus qu’à afficher l’évènement sur une carte. Pour cela, j’utiliser le service Geocoding de Google Maps Javascript API pour localiser l’évènement à l’aide de son adresse entrée avec le formulaire.

Pour ce qui est de la localisation de l’utilisateur j’utiliser l’API Geolocation d’HTML5. Cette fonctionnalité est implémentée dans tous les navigateurs récents et plus particulièrement sur les navigateurs par défaut des derniers smartphones (Android , iphone, ipod Touch et BlackBerry 6). Ensuite nous j’utiliser le service « Direction » de l’API Google Maps pour tracer un chemin entre la position de l’utilisateur et celle de l’évènement : et voici le résultat en image :

Vous trouverez plus d’explications sur l’API et l’utilisation de Google Maps dans mon billet sur la géolocalisation d’HTML5.
Vous trouverez également le code complet de l’application en ligne sur le Github de Zenika.

Critique

J’ai testé cette application sur iPhone, Android (v2.2), iPad et même la dernière Galaxy Tab. En ce qui concerne la performance et l’interactivité, le touché est assez précis (au niveau du ‘tap’), les transitions sont cependant assez lentes et très instables sur Android. D’un point de vue richesse, le framework reste assez basique et manque en composants (au niveau des formulaires, boutons, organisation des panels), il manque également la gestion du stockage local, et les thèmes définis sont insuffisants et difficilement personnalisables. Par ailleurs, jQTouch n’est pas bien adapté aux tablettes de grande résolution comme l’iPad ou la Galaxy Tab. Le framework reste quand même relativement performant, en particulier sur iphone, très simple d’utilisation et s’ajoute facilement à une page HTML proprement construite.

Ressources

Pour en savoir plus sur JQTouch, vous pouvez vous documenter à l’aide des ressources suivantes :

• Exemples et démos de jQTouch fournis avec le framework.
• Livres : « Building iPhone Apps with HTML, CSS, and JavaScript » et « Building Android Apps with HTML, CSS, and JavaScript », par Jonathan Stark.

Les jours prochains, je poursuivrai ma série sur les frameworks mobile par un billet consacré à jQuery Mobile, la « version » mobile officielle de jQuery.

A suivre …