21 mars 2013 | par Marc Akoley dans Pas de commentaire

Dans le précédent article dédié aux webapps, nous avions vu comment développer un lecteur de flux RSS en utilisant le Framework Jquery Mobile. Dans cette première partie, nous avons surtout réalisé l’interface de l’application. Cette seconde partie de l’article mettra l’accent sur le coeur même du lecteur RSS. En détaillant chaque partie du code qui permet de récupérer et parser notre flux RSS.

Sans plus tarder, attaquons nous au coeur du problème.

Le cœur du lecteur de flux RSS Jquery en action

Ce qu’il y a d’intéressant dans l’utilisation du Framework Jquery Mobile c’est que toutes vos connaissances en Jquery vous seront utiles. Jquery Mobile possède certes des fonctionnalités spécialement mises en place pour s’adapter au mobile, comme les events swipe, tap etc… mais le cœur de ce Framework mobile reste Jquery.

Sans plus tarder, ouvrez un fichier que vous nommerez lecteurRSS.js et qui sera contenu dans le dossier  où résident tous vos fichiers JavaScript. Pensez à bien faire l’inclusion de ce fichier dans l’entête de votre fichier index.html de la façon suivante juste en dessous de l’inclusion Jquery et Jquery Mobile:

Même si Jquery mobile ne nécessite pas d’initialisation, Jquery, lui, requière toujours la ligne suivante :

Nous allons donc saisir cette ligne en premier dans notre fichier lecteurRSS.js

Ensuite nous créons les variables suivantes, qui seront utilisées plus bas dans le code

La première variable fluxRSS, nous servira à stocker l’URL du flux RSS à parser.  La seconde variable stockFluxRSS est un tableau qui contiendra toutes les occurrences d’articles présents dans notre flux.

La troisième variable retourHtml, contiendra elle,  la structure HTML des flux à insérer dans notre page index.html.

Note : Google Chrome ne permet pas les appels Ajax Cross-Domain. Nous allons donc exécuter tous le programme sous Firefox à partir d’un flux RSS stocké en local à la racine de notre projet.

Mettons un peu d’Ajax dans notre code.

Jquery propose plusieurs façon de faire des appels Ajax, notamment avec la méthode $.get(), mais nous allons plutôt utiliser la méthode $.ajax({}), c’est juste une question de goût.

Pour faire appel à notre fichier XML contenant le flux RSS de l’agence Publika (le vilain réflexe du référenceur qui revient ;p ) nous utilisons donc la méthode $.ajax() en entrant les ligne ci-dessus :

Avec la méthode $.ajax(), nous utilisons les options suivantes :

  • type : qui définit le type d’envoi effectué. Comme pour vos formulaires web, ce type peut être en POST ou en GET
  • url : Correspond à l’URL du flux RSS que nous avons défini dans la variable fluxRSS
  • datatype : correspond au type de retour attendu par notre appel Ajax. Il peut être XML, HTML , json etc…
  • succes : défini une fonction à exécuter lorsque l’appel Ajax à fonctionné
  • error : défini une fonction à exécuter si notre appel Ajax n’a pas abouti.

 

Ajax ça marche, que fait-on ensuite ?

Si vous avez tous bien suivi jusque-là vous avez votre appel Ajax qui marche. Maintenant, qu’allons-nous en faire ? Comme nous l’avons signalé dans la section précédente, notre appel Ajax va nous retourner une structure XML. C’est cette structure que nous allons parser  pour en tirer les informations contenues dans le flux RSS.

Pour se faire, nous allons utiliser la méthode find() qui permet de retrouver des balises dans un fichier XML. Mais pour savoir quoi extraire du fichier du flux, nous observons un peu sa structure de base.

En regardant de près la structure d’un article dans notre flux d’actualités, nous constatons, après éliminations des éléments qui ne nous intéressent pas bien sûr que chaque article est compris dans une balise   qui elle-même contient une balise pour le titre de l’article, sa description, sa date de publication.

Avec la méthode find() et une boucle sur tous les éléments du flux, nous allons récupérer tous les articles et les stocker dans un notre tableau d’articles stockFluxRSS.

Ci-dessous, le code correspondant à la récupération des articles du flux.

Ceci fait, nous allons parcourir tout notre tableau d’articles et l’insérer dans notre fichier index.html. Cette manipulation nous permet de récupérer le titre ainsi que la date de l’article. Afin de pouvoir accéder au contenu des articles, nous passons l’identifiant de chaque article dans le tableau comme un id, grâce à cette petite manipulation, nous obtenons des identifiants unique pour chaque lien d’article.

Vous noterez aussi que nous avons ajoutez à chaque lien la classe lienContenu que nous utiliserons pour accéder par click à la page des descriptions d’articles.

Ensuite avec la méthode append() nous insérons tout notre contenu dans la page index.html.

Interface du lecteur de flux RSS en Jquery Mobile

Liste des articles du flux

Pour faire afficher le contenu descriptif de chaque article,  nous allons ajouter un déclencheur au clic sur chacun de nos titres d’article. Grâce à la méthode Jquery parseInt() nous allons récupérer l’attribut du titre qui a reçu le clic et le transformer en entier, ce qui nous permet de faire la correspondance avec les identifiant de notre tableau qui stocke tous les articles.

Avec le code qui suit, nous pouvons déjà voir à quoi ressemble notre lecteur de flux RSS avec les titres de chaque article ainsi que la date de publication.

Dans notre ficher index.html, nous avions déjà créé la page qui va contenir notre description avec  la méthode changePage() de Jquery Mobile, nous pouvons automatiquement basculer vers celle-ci et y inclure notre contenu. Nous pouvons définir un nouveau type de transition comme slide, flip etc qui sera interprété par Jquery Mobile.

Il ne nous reste plus qu’à insérer tout ça dans notre page HTML et le tour est joué.

Interface webapp lecteur de flux RSS Publika en Jquery Mobile

Affichage d’un article

Nous n’allons pas réaliser de fonction spéciale pour le cas où nous avons un retour Ajax erroné, puisqu’en faisant appel à status, nous avons l’information sur l’état de la transaction.

Voilà vous avez un lecteur de flux RSS en Jquery Mobile et avez pu voir un aperçu du fonctionnement des WebApps et de leurs limites, notamment en ce qui concerne les appels cross-Domain. Cependant notez bien qu’il existe de nombreuses façons de contourner ce problème.Nous n’allons pas aborder ici ces différentes techniques qui feront sûrement l’objet d’autres tutoriels sur le blog actus.publika.fr. En attendant n’hésitez pas à laisser vos commentaires et vos difficultés. Pour les experts, vos astuces en commentaires seront les bienvenus.

Téléchargez l'application sur Github

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

Laisser un commentaire

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