Tutoriel AngularJS : créer un lecteur de flux RSS

• Partie 1 : Google, Twitter, et AngularJSPartie 1t
• Partie 2 : créer un lecteur de flux RSSPartie 2
• Partie 3 : afficher le flux RSSPartie 3
• Partie 4 : gérer les flux RSSPartie 4
• Partie 5 : testsPartie 5
• Partie 6 : ajouter des dépendancesPartie 6
• Partie 7 : validation d'un formulairePartie 7
• Partie 8 : itérateurs et filtresPartie 8
• Partie 9 : installationPartie 9

Je suis allé plus en profondeur, afin de voir comment fonctionne Google Reader. ReederReeder et PressPress sont mes applications RSS préférées et que j'utilise pour organiser mes sources pour le contenu de DailyJS. On dirait que Reeder supporte FeedbinFeedbin, alors j'espère que Press et les autres applications seront aussi bien. J'ai également utilisé NewsblurNewsblur dans le passé, mais je ne sais pas si nous verrons Newsblur supporté par Reeder…

Dans cet esprit, j'ai pensé que ce serait plutôt cool d'utiliser un lecteur de flux RSS comme thème de la série de tutoriels sur AngularJS. Un lecteur de flux avec le style de Bootstrap et de AngularJS serait d'apparence ergonomique et rapide. La question principale, cependant, est comment nous devons télécharger les flux ? AtomAtom et RSSRSS ne sont pas tout à fait optimaux pour les développeurs côté client. Il nous faut JSON !

Le standard actuel pour extraire le flux dans le code côté client consiste à utiliser JSONPJSONP. C'est là où une ressource distante est récupérée, habituellement en insérant une balise script et le serveur retourne généralement du JavaScript encapsulé dans un callback que le client peut exécuter.

Je me souviens avoir lu un article de John Resig il y a de nombreuses années qui explique comment utiliser cette technique avec RSS spécifiquement : RSS to JSON ConvertorRSS to JSON Convertor. Ironie du sort, une solution commerciale populaire a été fournie pour cela en utilisant Google Reader. Heureusement, il existe une autre façon de faire, proposée cette fois par Yahoo!, le Yahoo! Query Language.

Le service YQL (conditions d'utilisationconditions d'utilisation YQL) est fondamentalement du SQL pour le Web. Il peut être utilisé pour récupérer et interpréter toutes sortes de ressources, y compris les flux. Il a des limites d'utilisationlimites d'utilisation YQL, donc si vous voulez prendre cette série de tutoriels pour construire quelque chose de plus viable commercialement, alors vous devriez les vérifier en détail. Même si les points de terminaison que nous allons utiliser sont « publics », Yahoo! va encore revoir ses conditions si on dépasse les 2 000 requêtes par heure. Pour prendre en charge les utilisateurs transférant des volumes plus élevés, des clés de l'API peuvent être créées.

Si vous visitez ce lien, vous verrez un exemple d'exécutable qui convertit le flux Atom de DailyJS en JSON, enveloppé dans un callback. Le résultat ressemble à ceci :

cb({ "query": { /* JSON! */ } });

La méthode cb sera exécutée depuis notre code du côté client (AngularJS / Bootstrap).

Dans la mesure où le traitement des flux fonctionne, YQL nous donnera le JSON. Nous devons donc faire un petit lecteur de flux RSS.

Avant de cliquer sur « les non lus » dans votre lecteur de flux RSS, nous allons lancer notre application avec YeomanYeoman. Tout d'abord, installez-le ainsi que Grunt. Je suppose que vous avez déjà une version récente de Node, sinon installez une version 0.10.x et puis exécutez ce qui suit :

npm install -g yo grunt-cli bower generator-angular generator-karma

Yeoman est basé autour de générateurs, qui sont des modules distincts que vous pouvez installer à l'aide du npm. La commande précédente installe le générateur AngularJS generator-angular.

Ensuite, vous devrez créer un répertoire pour l'application :

mkdir djsreader
cd djsreader

Vous devez également exécuter le générateur angular :

yo angular

Il va installer un tas de trucs, mais heureusement la plupart des modules sont ceux que j'utilise régulièrement donc je suis à l'aise avec eux. Répondez « Y » à chaque question, en dehors de celle concernant Compass (je ne pense pas avoir installé Compass, donc je ne voulais pas cette option).

Exécutez la commande grunt server pour voir votre nouvelle application AngularJS !

Vous avez peut-être remarqué que certains fichiers « karma » sont apparus. C'est le framework de test de AngularJS. Si vous tapez grunt test, Grunt se frayera un chemin à travers certains tests de base qui se trouvent dans le fichier test/spec/controllers/main.js.

Bienvenue dans le monde de Yeoman, AngularJS, et… Yahoo! apparemment. Le répertoire de ce projet se trouve ici : alexyoung / djsreader. La suite au prochain numéro…

Cet article a été publié avec l'aimable autorisation de Alex Young concernant l'article original AngularJS: Let's Make a Feed Reader du site DailyJS.

Je remercie également zoom61 pour sa relecture attentive et assidue.