Tutoriel AngularJS : créer un lecteur de flux RSS

Alex Young

Traducteur

vermine

Cet article est la traduction de AngularJS: Let's Make a Feed Reader publié sur DailyJS.

Commentez

- Titre : Tutoriel AngularJS : créer un lecteur de flux RSS

- Auteur : Alex Young

- Traducteur : vermine

- Parution : 23 mai 2013

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 2013 Alex Young. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Avant-propos

- II. JSONP

- III. YQL

- IV. Yo !

- V. Résumé

- VI. Remerciements

I - Avant-propos

- Partie 1 : Google, Twitter, et AngularJS

- Partie 2 : créer un lecteur de flux RSS

- Partie 3 : afficher le flux RSS

- Partie 4 : gérer les flux RSS

- Partie 5 : tests

- Partie 6 : ajouter des dépendances

- Partie 7 : validation d'un formulaire

- Partie 8 : itérateurs et filtres

- Partie 9 : installation

Je suis allé plus en profondeur, afin de voir comment fonctionne Google Reader. Reeder et Press 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 Feedbin, alors j'espère que Press et les autres applications seront aussi bien. J'ai également utilisé Newsblur 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 ? Atom et RSS ne sont pas tout à fait optimaux pour les développeurs côté client. Il nous faut JSON !

II - JSONP

Le standard actuel pour extraire le flux dans le code côté client consiste à utiliser JSONP. 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 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.

III - YQL

Le service YQL (conditions d'utilisation) 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'utilisation, 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.

IV - Yo !

Avant de cliquer sur « les non lus » dans votre lecteur de flux RSS, nous allons lancer notre application avec Yeoman. 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.

V - Résumé

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…

VI - Remerciements

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.