Vor ein paar Monaten hat Google einen neuen, Twitter-ähnlichen Dienst namens Buzz veröffentlicht. Wir können diesen Service nutzen, um unsere neuesten Buzzes auf jeder Website anzuzeigen. In diesem Tutorial führe ich Sie durch den Prozess der Erstellung Ihres eigenen Buzz-Widgets.
Schritt 1. Öffentliche Updates aus Buzz lesen
Momentan gibt es keine API, um mit dem Buzz-Dienst zu arbeiten. Es wird erwartet, dass Google in den nächsten Monaten eine solche bereitstellt. Die öffentlichen Updates sind jedoch zunächst als Atom-Feeds verfügbar.
Zuerst müssen wir die Daten vom Buzz-Dienst abrufen. Dazu richten wir ein PHP-Skript ein, das die Daten aus dem Buzz-Service liest. Dieses Skript wird eine Art Proxy sein, mit dem wir die Daten abrufen. Auf diese Weise können wir eine AJAX-Anforderung erstellen und ein XML-Dokument erhalten, das die gewünschten Aktualisierungen enthält.
Hier ist der anfängliche PHP-Code:
Header ('Inhaltstyp: Anwendung / XML'); // Einrichten des Antwortinhaltstyps für XML $ handle = fopen ($ _ GET ['url'], "r"); // Öffne die angegebene URL if ($ handle) while (! Feof ($ handle)) $ buffer = fgets ($ handle, 4096); // Lesen des Datenechos $ buffer; fclose ($ handle);
Speichern Sie diese Datei als "readfeed.php" und denken Sie daran, dass dies nur ein Beispiel ist. In einem realen Projekt sollten Sie den URL-Parameter bereinigen und sicherstellen, dass der Benutzer in Ihrem Dateisystem keine wichtigen Elemente öffnet.
Schritt 2. Erstellen Sie die Struktur unseres JavaScript-Objekts
Sobald wir diese Daten lesen können, müssen wir ein Objekt erstellen, das unseren Code in JavaScript enthält. Erstellen Sie eine neue Datei und nennen Sie sie "buzz-widget.js". Um ein Objekt zu erweitern, müssen wir die Eigenschaft "prototype" verwenden. Wenn Sie dazu Fragen haben, sollten Sie sich das Tutorial ansehen, in dem Jeffrey uns zeigt, wie dies mit nativen Objekten funktioniert.
Die Struktur unseres Objekts wird in etwa so aussehen:
Im ersten Schritt haben wir die Konstruktorfunktion für unser Objekt erstellt. Jetzt werden wir nach den erforderlichen Konfigurationen suchen und die Aktualisierungen von unserem Proxy lesen.
renderTo : das Element, in dem das Widget dargestellt wird; Diese Eigenschaft kann auch ein jQuery-Selektor sein.
Proxy : die URL, unter der wir einen AJAX-Anforderungsaufruf durchführen, um unsere Daten abzurufen. Wir haben bereits die PHP-Datei erstellt, die die Informationen aus dem Buzz-Service liest. Standardmäßig ist es "readfeed.php"..
Nutzer : der Buzz-Benutzer, von dem wir die Updates erhalten möchten.
Artikel : Die Anzahl der Updates, die im Widget angezeigt werden.
onLoad : ein Ereignis, das wir auslösen werden, wenn die Daten in das Widget geladen werden; Standardmäßig ist dies eine leere Funktion.
onRender : Dieses Ereignis wird ausgelöst, wenn das Widget auf der Seite dargestellt wird. Leere Funktion standardmäßig.
Schritt 3. Der Konstruktor
Lassen Sie uns an der Konstruktorfunktion unseres Widgets arbeiten.
var BuzzReader = Funktion (Optionen) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Schritt 1 jQuery.extend (this, options || ); // Schritt 2 if (this.user === "") throw "Die Eigenschaft 'user' ist erforderlich"; // Schritt 3 if (this.renderTo === "") throw "Die Eigenschaft 'renderTo' ist erforderlich"; if (this.url === "") this.url = url.replace (/ user /g,this.user); // Schritt 4 this.read (); // Schritt 5;
Im ersten Schritt haben wir die URL des Buzz-Service definiert, von der wir die Daten abrufen. Wir ersetzen die Zeichenfolge "user" durch die Benutzerkonfiguration (siehe Schritt 4)..
In Schritt zwei überschreiben wir die Standardeigenschaften mit den angegebenen Optionen. Dafür haben wir jQuery.extend verwendet.
In Schritt drei haben wir nach den erforderlichen Konfigurationen gesucht. Eine davon ist der "Benutzer" und der "RenderTo". Wenn einer davon fehlt, wird eine Ausnahme ausgelöst. Dies ist nützlich für den Entwickler, der unser Plugin verwendet.
In Schritt 4 haben wir nach der Zeichenfolge "user" in der Variablen "url" gesucht und diese durch den Benutzer ersetzt, dessen Summen wir in unserem Widget anzeigen möchten.
Der letzte Schritt ist sehr wichtig. Hier beginnen wir mit dem Lesen und Anzeigen der Informationen.
Schritt 4. Lesen der Informationen
Wir haben das PHP-Skript eingerichtet, das die Daten auf unseren Server zieht. Jetzt müssen wir nur noch eine Ajax-Anfrage stellen, um die Daten mit jQuery abzurufen. Schauen wir uns den folgenden Code an:
Im ersten Schritt haben wir ein neues Element an den Container angehängt und den Betrachter darüber informiert, dass wir gerade Informationen verarbeiten.
In Schritt zwei haben wir die Ajax-Anfrage gestellt. Das wichtigste ist die Eigenschaft "context"; Mit dieser Konfiguration können Sie den Kontext der Funktion ändern, die aufgerufen wird, wenn der Server antwortet. Schließlich setzen wir den Kontext auf "this", das das BuzzReader-Objekt ist.
Denken Sie daran, dass das PHP-Skript den Parameter "url" erwartet. also vergiss nicht es zu senden; Wenn der Server antwortet, wird die Methode "parse" ausgeführt.
Schritt 5. Analysieren des XML-Dokuments
Der Buzz-Service lieferte die Daten in einem Atom-Feed-Format. Daher müssen wir die benötigten Informationen analysieren und extrahieren.
Dies ist ein Beispiel für das XML-Dokument, das vom Buzz-Dienst zurückgegeben wird:
Google Buzz2009-12-14T20: 04: 39,977ZTag: google.com, 2009: Buzz-Feed / public / posted / 117377434815709898403Google - Google BuzzBuzz von A. Googler von 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 von A. Googler von MobileBzz! Bzz!0
Sobald wir die Antwort kennen, können wir das Dokument mit jQuery relativ leicht analysieren.
Wir haben zwei Argumente erhalten: Das erste sind die Daten, in diesem Fall ein XML-Dokument. Das zweite Argument ist der Textstatus der Anforderung.
Im ersten Schritt haben wir alle "Entry" -Knoten erhalten; Dies ist der Ort, an dem unser Buzz aktualisiert wird, und alle Informationen, die wir benötigen. Als Nächstes haben wir den Container unseres Widgets geleert und ein leeres Array erstellt, um unsere Daten als JavaScript-Objekt für jeden Knoten zu speichern.
In Schritt zwei wurden die Knoten "entry" durchlaufen und "title", "author", "content" usw. extrahiert. Dies ist ein wirklich einfacher Prozess. Wir müssen lediglich den Selektor schreiben und die Wurzel für die Suche festlegen. In diesem Fall ist die Wurzel der Knoten "entry".
Ich möchte auf die Zeile hinweisen, in der wir das Attribut "Reply" extrahieren. Der Selektor sieht etwa so aus:
link [rel = Antworten]
Wir haben angegeben, dass der Knoten "link", der das Attribut "rel" hat, "Antworten" entspricht. Dies ist wichtig, da es in jedem "Eintrag" viele "Verbindungsknoten" gibt.
In Schritt drei haben wir den Verweis "this.data" auf das Array erstellt, das unsere Daten enthält. Danach haben wir das Ereignis "onLoad" ausgeführt und die extrahierten Informationen übergeben.
In Schritt 4 haben wir die Render-Methode ausgeführt.
Bevor wir mit der Methode "Rendern" fortfahren, sollten wir die Methoden "createData" und "format" überprüfen. Wir rufen diese Methoden für jeden Eintrag auf.
In der Methode "createDate" erstellen wir nur ein neues Date-Objekt mit der angegebenen Zeichenfolge. Der String hat das Format "2009-12-14T20: 04: 39.977Z", sodass wir das Date-Objekt wie folgt erstellen können:
createDate: function (str) var date = neues Datum (); date.setDate (str.substring (8,10)); date.setMonth (str.substring (5,7) - 1); date.setFullYear (str.substring (0,4)); date.setUTCHours (str.substring (11,13)); date.setUTCMinutes (str.substring (14,16)); date.setUTCSeconds (str.substring (17,19)); Rückflugdatum;
Oder wir können einen einfachen regexp verwenden, um die Zeichenfolge zu formatieren und sie dem Date-Konstruktor zu übergeben:
In der Formatmethode verwenden wir das gerade erstellte Datumsobjekt und geben die Zeit zwischen dem Veröffentlichungsdatum und der Ortszeit des Systems zurück - beispielsweise "vor 11 Minuten" oder "vor 3 Stunden".
Der vorige Code ist zwar etwas langweilig, aber ziemlich geradlinig. Zunächst haben wir die Differenz zwischen der aktuellen Uhrzeit und dem Veröffentlichungsdatum in Minuten, Tagen und Monaten ermittelt. Danach haben wir einfach die Ergebnisse verglichen und eine Zeichenfolge im korrekten Format zurückgegeben.
Lassen Sie uns nun die "Render" -Methode überprüfen.
Schritt 6. Erstellen der GUI
Bis jetzt haben wir nur die Daten vom Buzz-Server abgerufen und das XML-Dokument analysiert. Das heißt, wir sind bereit, die Informationen auf dem Bildschirm anzuzeigen.
render: function (element) this.onRender.call (this, this); // Schritt 1 var html = []; // Schritt 2 html.push ("
"); für (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
Im ersten Schritt haben wir das Ereignis "onRender" ausgelöst. Dies ist wiederum für den Programmierer hilfreich, der unser Plugin verwendet.
Im zweiten Schritt haben wir ein Array erstellt, um unser dynamisches HTML zu speichern. Danach haben wir eine Liste "ul" erstellt und dann durch unsere Daten iteriert und den "li" -Knoten für jedes Element erstellt. Sie haben wahrscheinlich bemerkt, dass die Bedingung "for" einen Operator "oder" hat. Auf diese Weise können wir die Iterationen stoppen, wenn das Datenarray endet oder der Index "i" die vom Entwickler, der das Plugin verwenden wird, definierte Eigenschaft "items" erreicht hat.
Im letzten Schritt haben wir den HTML-Code mit der Methode "Anhängen" in den Container eingefügt.
Schritt 7. Verwenden des Widgets
Um unser Widget verwenden zu können, müssen wir eine Instanz unserer Klasse "BuzzReader" erstellen. Bevor wir dies tun, definieren wir, wo wir es rendern möchten. Erstellen Sie eine HTML-Datei und innerhalb des body-Elements, und fügen Sie Folgendes hinzu:
Wir werden unser Widget im div mit der Klasse "reader" rendern. Lassen Sie uns die Instanz unseres Widgets wie folgt erstellen:
Vergessen Sie nicht, die jQuery-Bibliothek und die "buzz-widget.js" in Ihre HTML-Datei zu importieren. Wenn alles korrekt konfiguriert und codiert wurde, sollte das folgende Bild ähnlich aussehen:
Schritt 8. Widget gestalten
Nun, wir können die Updates jetzt sehen, aber es sieht nicht sehr hübsch aus; wir müssen es ein bisschen stylen.
/ * step 1 * / body font-family: "Trebuchet MS", Arial, serifenlos; Zeilenhöhe: 24px; Schriftgröße: 14px; / * Schritt 2 * / #buzz width: 300px; margin : 100px auto; border: 1px solid #AFAFAF; #buzz> div Hintergrundfarbe: # E4E4E4; border: 1px solid # F6F6F6; Polsterung: 10px; #buzz .reader Höhe: 350px; Überlauf: auto; border : 1px fest # F6F6F6; Polsterung: 80px 10px 10px 10px; Hintergrund: #fff URL (title.jpg) center 0 no-repeat; / * Schritt 3 * / #buzz ul margin: 0; padding: 0; # Buzz ul li list-style-type: none; color: # A3A3A3; border-bottom: 1px solid # E4E4E4; margin-bottom: 5px; padding-bottom: 5px; #buzz ul li div color: # 777; #buzz ul li a color: # 444; text-decoration: none; font-weight: normal; #buzz ul li a: hover text-decoration: underline; #buzz ul li span float: right; / * Schritt 4 * / #buzz .buzz-loading Position: absolut; Rand links: 240px; Breite: 16px; Höhe: 16px; Hintergrund: transparente URL (ajax-loader.gif) center center no-repeat;
In den ersten beiden Schritten haben wir das Widget auf dem Bildschirm zentriert und die Größe, den Rahmen und die Farben für den Container festgelegt. Wir haben auch das Logo als Header für das Widget hinzugefügt.
In den letzten beiden Schritten haben wir die Stile auf die dynamische Liste gesetzt, die Schriftfarbe geändert und den Links einige Ränder, Ränder und Auffüllungen hinzugefügt.
Als Ergebnis haben wir ein viel ansprechenderes Produkt.
Schritt 9. Das Plugin erstellen
Der letzte Schritt in diesem Lernprogramm besteht darin, das jQuery-Plugin zu erstellen. Lassen Sie uns die Datei "buzz-widget.js" ändern und den folgenden Code am Ende der Datei hinzufügen.
Im ersten Schritt haben wir einfach unser Plugin benannt.
In Schritt zwei haben wir das Konfigurationsobjekt erstellt, wenn das Argument "options" leer ist. Als Nächstes haben wir die Eigenschaft "renderTo" für das eigentliche Element definiert.
In Schritt drei haben wir eine neue Instanz unseres Widgets erstellt.
Nun können wir unser Plugin in unserem HTML-Code verwenden:
Ich hoffe, Sie haben ein wenig gelernt, wie Sie Daten aus XML-Dokumenten extrahieren und Ihre neuesten Buzzes auf jeder Website anzeigen können. Irgendwelche Fragen? Danke fürs Lesen!
Share
Accentsconagua
