Il y a quelques mois, Google a publié un nouveau service similaire à Twitter, appelé Buzz. Nous pouvons utiliser ce service pour afficher nos dernières alertes sur n’importe quel site. Donc, dans ce tutoriel, je vais vous guider dans le processus de construction de votre propre widget Buzz.
Étape 1. Lecture des mises à jour publiques de Buzz
Pour le moment, il n'y a pas d'API pour travailler avec le service Buzz; Google devrait en proposer une dans les prochains mois. Cependant, pour le moment, les mises à jour publiques sont disponibles sous forme de flux Atom..
Premièrement, nous devons obtenir les données du service Buzz. Pour ce faire, nous allons configurer un script PHP qui lit les données du service Buzz. Ce script sera une sorte de proxy que nous utiliserons pour récupérer les données. En faisant cela, nous pouvons faire une demande AJAX et obtenir un document XML contenant les mises à jour souhaitées..
Voici le code PHP initial:
en-tête ('Type de contenu: application / xml'); // Configuration du type de contenu de réponse en XML $ handle = fopen ($ _ GET ['url'], "r"); // Ouvre l'URL donnée si ($ handle) while (! Feof ($ handle)) $ buffer = fgets ($ handle, 4096); // lecture des données echo $ buffer; fclose ($ handle);
Enregistrez ce fichier sous le nom "readfeed.php" et rappelez-vous qu'il ne s'agit que d'un exemple. Dans un projet réel, vous devez nettoyer le paramètre url et vous assurer que l'utilisateur n'ouvre pas quelque chose d'important sur votre système de fichiers..
Étape 2. Création de la structure de notre objet JavaScript
Une fois que nous pouvons lire ces données, nous devons créer un objet qui contient notre code en JavaScript. Créez un nouveau fichier et nommez-le "buzz-widget.js". Pour étendre un objet, nous devons utiliser la propriété "prototype"; Si vous avez des questions à ce sujet, vous devriez regarder le tutoriel où Jeffrey nous montre comment cela fonctionne avec les objets natifs..
La structure de notre objet ressemblera à ceci:
var BuzzReader = function (options) // Step 1 // code pour le constructeur; BuzzReader.prototype = // Étape 2 renderTo: "", proxy: "readfeed.php", utilisateur: "", url: "", éléments: 10, onLoad: function () , onRender: function () , rendu: fonction (élément) , lecture: fonction () , analyse: fonction (xml, succès, réponse) , format: fonction (date) , createDate: fonction (str) ;
Au cours de la première étape, nous avons créé la fonction constructeur pour notre objet. Maintenant, nous allons vérifier les configurations requises et lire les mises à jour à partir de notre proxy..
rendrePour : l'élément où le widget sera rendu; cette propriété peut aussi être un sélecteur jQuery.
Procuration : l'URL où nous ferons un appel de requête AJAX pour récupérer nos données. Nous avons déjà créé le fichier PHP qui lit les informations du service Buzz; par défaut c'est "readfeed.php".
utilisateur : l'utilisateur Buzz dont nous voulons obtenir les mises à jour.
articles : le nombre de mises à jour que nous allons afficher dans le widget.
en charge : un événement que nous allons déclencher lorsque les données sont chargées dans le widget; par défaut, c'est une fonction vide.
onRender : cet événement est déclenché lorsque le widget est sur le point d'être rendu dans la page. fonction vide par défaut.
Étape 3. Le constructeur
Travaillons sur la fonction constructeur de notre widget.
var BuzzReader = fonction (options) var url = "http://buzz.googleapis.com/feeds/userBuch/public/posted"; // Étape 1 jQuery.extend (this, options || ); // Étape 2 if (this.user === "") renvoie "La propriété" utilisateur "est requise"; // Étape 3 if (this.renderTo === "") lance "La propriété 'renderTo' est requise"; if (this.url === "") this.url = url.replace (/ utilisateur /g,this.user); // étape 4 this.read (); // étape 5;
Dans la première étape, nous avons défini l'URL du service Buzz à partir duquel nous allons récupérer les données. Nous allons remplacer la chaîne "utilisateur" par la configuration de l'utilisateur (voir l'étape 4).
À la deuxième étape, nous avons remplacé les propriétés par défaut avec les options données. nous avons utilisé jQuery.extend pour le faire.
À l'étape trois, nous avons vérifié les configurations requises, l'une d'elles étant "l'utilisateur" et le "renderTo". S'il en manque un, nous lançons une exception. Cela sera utile pour le développeur qui utilise notre plugin.
À la quatrième étape, nous avons recherché la chaîne "utilisateur" dans la variable "url" et l'avons remplacée par l'utilisateur dont nous souhaitons afficher les buzz dans notre widget..
La dernière étape est très importante. Ici, nous commençons le processus de lecture et d’affichage des informations.
Étape 4. Lecture de l'information
Nous avons configuré le script PHP qui extrait les données sur notre serveur. Maintenant, il suffit de faire une requête Ajax pour récupérer les données avec jQuery; regardons le code suivant:
À la première étape, nous avons ajouté un nouvel élément au conteneur, informant le spectateur que nous sommes en train de traiter des informations..
Dans la deuxième étape, nous avons fait la demande Ajax. La chose la plus importante est la propriété "context"; cette configuration vous permettra de changer le contexte de la fonction appelée lorsque le serveur répond. Enfin, nous définissons le contexte sur "this", qui est l'objet BuzzReader..
Rappelez-vous que le script PHP attend le paramètre "url". alors n'oubliez pas de l'envoyer; lorsque le serveur répond, la méthode "parse" est exécutée.
Étape 5. Analyser le document XML
Le service Buzz a fourni les données dans un format de flux Atom. Nous devons donc analyser et extraire les informations dont nous avons besoin..
Voici un exemple de document XML renvoyé par le service Buzz:
Google Buzz2009-12-14T20: 04: 39.977Ztag: google.com, 2009: buzz-feed / public / posted / 117377434815709898403Google - Google BuzzBuzz par A. Googler de Mobile2009-12-14T20: 04: 39.000Z2009-12-14T20: 04: 39.977Ztag: google.com, 2009: buzz / z12bx5v5hljywtfug23wtrrpklnhf3gd3A. Googlerhttp://www.google.com/profiles/a.googlerBzz! Bzz!http://activitystrea.ms/schema/1.0/posthttp://activitystrea.ms/schema/1.0/notewebupdates: [email protected]Buzz par A. Googler de MobileBzz! Bzz!0
Une fois que nous connaissons la réponse, nous pouvons analyser le document assez facilement avec jQuery.
parse: function (xml, status) var que = ceci; var nodes = jQuery ("entry", xml); // Étape 1 this.el.empty (); var info = []; node.each (function () // Étape 2 var date = that.createDate (jQuery ("publié", ceci) .text ()); info.push (titre: jQuery ("titre", ceci) .text (), auteur: jQuery ("auteur> nom", ceci) .text (), uri: jQuery ("auteur> uri", ceci) .text (), résumé: jQuery ("résumé") .text (), contenu: jQuery ("contenu: premier", ceci) .text (), publié: que.format (date), mis à jour: jQuery ("mis à jour", cela) .text (), date: date, réponse: jQuery (" link [rel = replies] ", this) .attr (" href "));); this.data = info; // Étape 3 this.onLoad.call (this, info); this.render (this.renderTo); //Étape 4 ,
Nous avons reçu deux arguments: le premier concerne les données, dans ce cas un document XML; le second argument est le statut du texte de la requête.
À la première étape, nous avons obtenu tous les nœuds "d'entrée"; C’est ici que se trouvent nos mises à jour Buzz et toutes les informations dont nous avons besoin. Ensuite, nous avons vidé le conteneur de notre widget et créé un tableau vide pour stocker nos données sous forme d'objet JavaScript pour chaque nœud..
Dans la deuxième étape, nous avons itéré à travers les nœuds "entrée" et extrait le "titre", "auteur", "contenu" et ainsi de suite. C'est un processus très simple. tout ce que nous avons à faire est d'écrire le sélecteur et de définir la racine de la recherche. Dans ce cas, la racine est le nœud "entrée".
Je voudrais souligner la ligne où nous extrayons l'attribut "réponse" - le sélecteur ressemble à ceci:
lien [rel = réponses]
Nous avons spécifié que nous voulons le noeud "link", qui a un attribut "rel" égal à "replies". Ceci est important car il existe de nombreux nœuds "lien" dans chaque "entrée".
À l'étape trois, nous avons créé la référence "this.data" au tableau contenant nos données. Après cela, nous avons exécuté l'événement "onLoad" et transmis les informations extraites.
À la quatrième étape, nous avons exécuté la méthode de rendu..
Avant de continuer avec la méthode "render", passons en revue les méthodes "createData" et "format". Nous appelons ces méthodes pour chaque entrée.
Dans la méthode "createDate", nous allons seulement créer un nouvel objet Date avec la chaîne donnée. La chaîne a le format "2009-12-14T20: 04: 39.977Z" afin que nous puissions créer l'objet Date comme suit:
createDate: function (str) var date = new Date (); date.setDate (strString (8,10)); date.setMonth (strSubstring (5,7) - 1); date.setFullYear (strSubstring (0,4)); date.setUTCHours (str_strstr (11,13)); date.setUTCMinutes (strSubstring (14, 16)); date.setUTCSeconds (strSubstring (17,19)); date de retour;
Ou nous pouvons utiliser une simple expression rationnelle pour formater la chaîne et la donner au constructeur Date:
Dans la méthode de formatage, nous allons utiliser l'objet date que nous venons de créer et renvoyer l'heure située entre la date de publication et l'heure locale du système, par exemple "il y a 11 minutes" ou "il y a 3 heures".
Le code précédent, bien qu'un peu fastidieux, est assez simple. Tout d'abord, nous avons obtenu la différence entre l'heure actuelle et la date de publication en minutes, jours et mois. Après cela, nous avons simplement comparé les résultats et renvoyé une chaîne au format correct.
Passons maintenant à la méthode "render".
Étape 6. Création de l'interface graphique
Jusqu'à présent, nous avons uniquement extrait les données du serveur Buzz et analysé le document XML. Cela signifie que nous sommes prêts à afficher les informations à l'écran.
render: function (element) this.onRender.call (this, this); // Étape 1 var html = []; // étape 2 html.push ("
"); pour (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
Dans un premier temps, nous avons déclenché l'événement "onRender", ce qui, encore une fois, sera utile au programmeur qui utilise notre plugin..
Dans un deuxième temps, nous avons créé un tableau pour stocker notre code HTML dynamique. Après cela, nous avons créé une liste "ul" puis nous avons itéré dans nos données, créant ainsi le nœud "li" pour chaque élément; vous avez probablement remarqué que la condition "pour" a un opérateur "ou"; cela nous permet d'arrêter les itérations lorsque le tableau de données se termine ou lorsque l'index "i" a atteint la propriété "items" définie par le développeur qui va utiliser le plugin..
Dans la dernière étape, nous avons inséré le code HTML dans le conteneur en utilisant la méthode "append".
Étape 7. Utiliser le widget
Pour utiliser notre widget, nous devons créer une instance de notre classe "BuzzReader", mais avant cela, définissons où nous voulons le rendre. Créez un fichier HTML et, dans l'élément body, ajoutez les éléments suivants:
Nous allons rendre notre widget à l'intérieur de la div avec la classe "reader", créons l'instance de notre widget comme suit:
N'oubliez pas d'importer la bibliothèque jQuery et le "buzz-widget.js" dans votre fichier HTML. Si tout a été configuré et codé correctement, vous devriez voir quelque chose de similaire à l'image suivante:
Étape 8. Styliser le widget
Nous pouvons maintenant voir les mises à jour, mais cela n’est pas très joli; nous devons le coiffer un peu.
/ * step 1 * / body font-family: "Trébuchet MS", Arial, sans-serif; hauteur de trait: 24px; taille de la police: 14px; / * Step 2 * / #buzz width: 300px; margin : 100px auto; border: 1px solid #AFAFAF; #buzz> div background-color: # E4E4E4; border: 1px solid # F6F6F6; padding: 10px; #buzz .reader height: 350px; débordement: auto; border : 1px solid # F6F6F6; padding: 80px 10px 10px 10px; background: #fff url (title.jpg) center 0 no-repeat; / * Étape 3 * / #buzz ul margin: 0; padding: 0; # buzz ul li type-style-liste: aucun; couleur: # A3A3A3; bordure-bas: 1px solide # E4E4E4; marge-bas: 5px; padding-bas: 5px; #buzz ul li div couleur: # 777; #buzz ul li a color: # 444; décoration de texte: aucune; police-poids: normal; #buzz ul de liaison: hover text-decoration: underline; #buzz ul de durée float: right; / * Étape 4 * / #buzz .buzz-loading position: absolute; marge-gauche: 240px; largeur: 16px; hauteur: 16px; fond: url transparente (ajax-loader.gif) centre non répété;
Au cours des deux premières étapes, nous avons centré le widget sur l'écran et défini la taille, les bordures et les couleurs du conteneur. nous avons également ajouté le logo comme en-tête pour le widget.
Au cours des deux dernières étapes, nous avons défini les styles dans la liste dynamique, modifié la couleur des polices et ajouté des marges, des bordures et des marges à nos liens..
En conséquence, nous avons un produit beaucoup plus attrayant.
Étape 9. Création du plugin
La dernière étape de ce didacticiel consiste à créer le plug-in jQuery. Modifions le fichier "buzz-widget.js" en ajoutant le code suivant à la fin du fichier..
jQuery.fn.buzzReader = function (options) // La 1ère étape renvoie this.each (function () var opts = options || ; // La 2ème étape opts.renderTo = cette nouvelle BuzzReader (opté); / /Étape 3 ); ;
Dans un premier temps, nous avons simplement nommé notre plugin.
À l'étape deux, nous avons créé l'objet de configuration si l'argument "options" est vide. Ensuite, nous avons défini la propriété "renderTo" à l'élément réel.
À la troisième étape, nous avons créé une nouvelle instance de notre widget..
Maintenant, nous pouvons utiliser notre plugin dans notre code HTML, comme ceci:
J'espère que vous avez appris comment extraire des données de documents XML et afficher vos derniers Buzz sur n'importe quel site Web. Des questions? Merci d'avoir lu!
Share
Accentsconagua
