12 mars 2013 | par Marc Akoley dans Un commentaire

Lorsqu’il faut développer pour le mobile,  le choix est souvent difficile. Surtout lorsqu’on tient compte des contraintes financières et de temps. Les différentes contraintes ont favorisé l’émergence d’un grand nombre de solutions qui ont permis de réduire les coûts de productions et de se passer dans certains cas, des applications dans les langages natifs des systèmes d’exploitations mobile.

Dans une série de tutoriels, nous allons voir les différentes approches pour réaliser des applications à destination du mobile, leurs avantages et leurs inconvénients, ce qui vous permettra de prendre une décision quant à la stratégie à adopter pour la mise en place de votre communication mobile.

Dans ce premier tutoriel, nous allons voir comment développer un lecteur de flux RSS avec le Framework Jquery Mobile, ce qui sera l’occasion d’expliquer le fonctionnement des WebApps.

 

[column col= »1/2″ ]

Webapps : Définition

Les applications web ou WebApps sont des applicatifs qui fonctionnent à l’aide d’un navigateur  web. Contrairement aux applications dites stand alone, les WebApps ne nécessitent pas d’installation. Il suffit d’ouvrir son navigateur web et de se rendre à URL de l’application. Les applications de types WebApps fonctionnent en communiquant avec des serveurs pour récupérer les données.

Une WebApp très connue est le WebMail du géant Google Gmail qui est assez évoluée au point d’être aussi performante que des applications de gestions de courrier comme Outlook ou Thunderbird

Dans quel cas l’utiliser? Les WebApps sont indiqués dans le cadre d’une application de présentation d’entreprise avec la possibilité d’utiliser certaines fonctionnalités avancées d’un service existant.

[/column]

[column col= »2/2″]

Avantages

  • Rapide à développer
  • Basées sur des technologies web (HTML, CSS Javascript)
  • Cross-plateform
  • Facile à mettre à jour et à déployer

Inconvénients

  • Impossibilité de faire tourner l’application en tâches de fond
  • Gestion du matériel du téléphone limitée (appareil photo, accéléromètre, accélération graphique)
  • Ergonomie pas adaptée aux systèmes d’exploitation

[/column]

Prérequis

 
 

Elaborer la base de l’application : La structure HTML

structure du lecteur de flux RSS

Arborescence du projet Jquery Mobile

Avant toutes choses, nous allons créer la structure de dossier correspondant à l’image de droite pour notre projet et y ajouter les librairies Jquery et Jquery mobile téléchargées plus haut.

Ensuite nous allons créer un fichier index.html à la racine de notre dossier de projet.

Il vous suffira par la suite d’insérer dans notre document, les lignes d’inclusion des différents fichiers de Jquery comme suit :

Jquery Mobile offre aux applications mobiles, deux façons de gérer les écrans d’application. Il y a le mode multipages, qui fonctionne comme pour un site web classique pour chaque écran de l’application, une page html spécifique et le mode page unique qui regroupe tous les écrans de l’application dans une même page.

Un balisage spécifique permet à Jquery Mobile de se balader dans le DOM et comprendre la structure de l’application mobile.

Dans ce tutoriel, nous allons adopter le mode page unique dont la structure de base est la suivante :

Dans la structure précédente, l’attribut data-role= ‘page’ définit une page ou un écran de notre application. L’attribut data-role=’header’ lui correspond comme son nom l’indique, à l’entête de l’application. Il est possible d’insérer un menu et des boutons. Le dernier attribut présent est le data-role=’content’ et comme vous le devinez, il représente la zone de contenu de l’application.

Pour plus d’information sur les attributs Jquery Mobile, n’hésitez pas à faire un tour sur le site Jquery Mobile dans la section documentation.

Pour notre application, nous aurons besoin de deux pages. Une première page pour afficher l’ensemble des articles du flux, et une seconde pour afficher le détail du flux.

La structure suivante nous permet de mettre en place ces deux pages de façon simple.

Comme vous pouvez le constater, il n’y a quasiment aucun contenu dans la structure puisque tout le contenu sera extirpé du flux RSS.

Détaillons un peu cette structure. Nous avons ajouté à la structure de base, la ligne suivante :

C’est cette ligne qui contiendra tous les titres en provenance des flux RSS.

Ensuite dans une seconde page, nous avons ajouté dans l’entête, la ligne suivante :

Sur cette ligne nous avons un lien vers la page d’accueil, ainsi que des attributs data-role=’button’ qui génère des boutons automatiquement sous Jquery Mobile, ce qui nous permet d’avoir un aspect visuellement plus intéressant pour notre application.

L’attribut data-icon=’home’ fait afficher la petite maison dans le bouton préalablement mis en place. Jquery mobile propose une variété d’icônes de ce type qu’il est possible de consulter sur leur site.

Pour finir l’attribut data-iconpos=’notext’ permet de masquer le texte présent dans les boutons mais aussi de positionner les boutons à gauche ou à droite de l’application avec les valeurs right ou left.

Vous constaterez aussi l’ajout de l’identifiant id=’contenu’ à la page des contenus du flux, ainsi que l’identifiant id=’contenuRSS’  à la balise div du conteneur.

L’ajout de ces identifiants nous permettra de faire nos appels Jquery depuis le code de l’application.

Avec ces quelques lignes de code, nous avons défini la structure de notre lecteur de flux RSS. Le prochain article expliquera comment récupérer les informations du flux XML via Jquery.

Si vous avez aimé cet article n’hésitez pas à le partager sur les réseaux sociaux et à laisser des commentaires.

Articles sur la même thématique

Partager :

Passionné de nouvelles technologies et de logiciels Open Source, je suis chargé de référencement et de développement mobile au sein de l’Agence Publika. Vous pouvez me suivre sur Twitter et LinkedIn

Un commentaire

Laisser un commentaire

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