För några månader sedan släppte Google en ny Twitter-liknande tjänst, kallad Buzz. Vi kan använda den här tjänsten för att visa våra senaste buzzes på vilken sida som helst. Så, i denna handledning guidar jag dig genom processen att bygga din egen Buzz-widget.
Steg 1. Läser offentliga uppdateringar från Buzz
För närvarande finns det inget API att arbeta med Buzz-tjänsten. Google förväntas tillhandahålla en inom de närmaste månaderna, men för närvarande är de offentliga uppdateringarna tillgängliga som Atom-flöden.
Först måste vi hämta data från Buzz-tjänsten. För att göra det ska vi konfigurera ett PHP-skript som läser data från Buzz-tjänsten. Detta skript kommer att vara en typ av proxy som vi ska använda för att hämta data. Genom att göra det kan vi göra en AJAX-förfrågan och få ett XML-dokument som innehåller önskade uppdateringar.
Här är den ursprungliga PHP-koden:
rubrik ("Innehållstyp: Application / XML"); // Ställa in svarhaltstypen till XML $ handle = fopen ($ _ GET ['url'], "r"); // Öppna den angivna webbadressen om ($ handtag) medan (! Feof ($ handtag)) $ buffer = fgets ($ handtag, 4096); // läser data echo $ bufferten; fclose ($ handtag);
Spara den här filen som "readfeed.php," och kom ihåg att detta bara är ett exempel. I ett verkligt världsprojekt borde du städa url-parametern och se till att användaren inte öppnar något viktigt på ditt filsystem.
Steg 2. Skapa strukturen i vårt JavaScript-objekt
När vi kan läsa dessa data måste vi bygga ett objekt som rymmer vår kod i JavaScript. Skapa en ny fil och namnge den "buzz-widget.js". För att förlänga ett objekt måste vi använda egenskapen "prototyp" Om du har frågor om detta bör du titta på handledningen där Jeffrey visar oss hur det här fungerar med inhemska objekt.
Strukturen av vårt objekt kommer att vara något så här:
var BuzzReader = funktion (alternativ) // Steg 1 // kod för konstruktören; BuzzReader.prototype = // Steg 2 renderTo: "", proxy: "readfeed.php", användare: "", url: "", objekt: 10, onLoad: function () , onRender: function , render: funktion (element) , läs: funktion () , parse: funktion (xml, framgång, svar) , format: funktion (datum) , createDate: function (str) ;
I steg ett skapade vi konstruktörsfunktionen för vårt objekt. Nu ska vi söka efter de nödvändiga konfigurationerna och läsa uppdateringarna från vår proxy.
renderTo : det element där widgeten kommer att göras; den här egenskapen kan också vara en jQuery-väljare.
ombud : URL-adressen där vi gör ett AJAX-förfrågningssamtal för att hämta vår data. Vi har redan skapat PHP-filen som läser informationen från Buzz-tjänsten. som standard är det "readfeed.php".
användare : Buzz-användaren vi vill få uppdateringarna från.
objekt : Antalet uppdateringar vi ska visa i widgeten.
onLoad : en händelse som vi ska utlösa när data laddas in i widgeten; som standard är detta en tom funktion.
onRender : den här händelsen utlöses när widgeten ska visas på sidan; tom funktion som standard.
Steg 3. Konstruktören
Låt oss arbeta med konstruktörsfunktionen i vår widget.
var BuzzReader = funktion (alternativ) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Steg 1 jQuery.extend (detta alternativ || ); // Steg 2 om (this.user === "") kasta "Egenskapen" användaren är nödvändig "; // Steg 3 om (this.renderTo === "") kasta "Egenskapen" renderTo "krävs"; om (this.url === "") this.url = url.replace (/ user /g.this.user); // Steg 4 this.read (); // Steg 5;
I steg ett definierade vi URL-adressen till Buzz-tjänsten från vilken vi ska hämta data. Vi ersätter "user" -strängen med användarkonfigurationen (se steg 4).
I steg två överdriver vi standardegenskaperna med de givna alternativen; Vi använde jQuery.extend för att göra det.
I steg tre kontrollerade vi för nödvändiga konfigurationer, en av dem är "användaren" och "renderTo". Om någon av dessa saknas slänger vi ett undantag. Detta kommer att vara användbart för utvecklaren som använder vårt plugin.
I steg fyra sökte vi efter "user" -strängen i variabeln "url" och ersatte den med användaren vars buzzes vi vill visa i vår widget.
Det sista steget är väldigt viktigt. Här börjar vi processen att läsa och visa informationen.
Steg 4. Läser informationen
Vi har inställt PHP-skriptet som drar data till vår server. Nu behöver vi bara göra en Ajax-förfrågan för att hämta data med jQuery; låt oss titta på följande kod:
I steg ett bifogade vi ett nytt element till behållaren och informerade betraktaren om att vi för närvarande behandlar information.
I steg två gjorde vi Ajax-förfrågan. Det viktigaste är egenskapen "kontext"; Med denna konfiguration kan du ändra kontexten för den funktion som heter när servern svarar. Slutligen ställer vi sammanhanget till "detta" vilket är BuzzReader-objektet.
Kom ihåg att PHP-skriptet förväntar sig "url" -parametern. så glöm inte att skicka den; När servern svarar utförs metoden "parse".
Steg 5. Analysera XML-dokumentet
Buzz-tjänsten levererade data i ett Atom-matningsformat, så vi måste analysera och extrahera den information vi behöver.
Detta är ett exempel på XML-dokumentet som returneras från Buzz-tjänsten:
Google Buzz2009-12-14T20: 04: 39.977Ztag: google.com, 2009: Buzz-feed / public / postat / 117377434815709898403Google - Google BuzzBuzz av A. Googler från Mobile2009-12-14T20: 04: 39.000Z2009-12-14T20: 04: 39.977Ztag: google.com, 2009: surr / 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 av A. Googler från MobileBZZ! BZZ!0
När vi känner till svaret kan vi analysera dokumentet ganska enkelt med jQuery.
Vi fick två argument: den första är data, i det här fallet ett XML-dokument; Det andra argumentet är texten status för begäran.
I steg ett fick vi alla "inträde" noder; Det här är platsen där våra Buzz uppdateringar och all information vi behöver finns. Därefter tömde vi behållaren i vår widget och skapade en tom matris för att lagra våra data som ett JavaScript-objekt för varje nod.
I steg två, vi iterated genom "inträde" noder och extraherade "titel", "författare", "innehåll" och så vidare. Detta är en väldigt enkel process; allt vi behöver göra är att skriva väljaren och ställa in roten för sökningen, i så fall är roten noden "post".
Jag skulle vilja påpeka linjen där vi extraherar attributet "svar" - väljaren ser något ut så här:
länk [rel = svar]
Vi angav att vi vill ha noden "länk", som har ett attribut "rel" som motsvarar "svar". Detta är viktigt eftersom det finns många "länk" noder inom varje "post".
I steg tre skapade vi referensen "this.data" till den matris som innehåller vår data. Efter det genomförde vi händelsen "onLoad" och skickade den information vi extraherade.
I steg fyra utförde vi renderingsmetoden.
Innan vi fortsätter med "render" -metoden, låt oss granska metoderna "createData" och "format". Vi ringer dessa metoder för varje ingång.
I "createDate" -metoden kommer vi bara att skapa ett nytt Date-objekt med den angivna strängen. Strängen har formatet "2009-12-14T20: 04: 39.977Z" så vi kan skapa datumobjektet enligt följande:
createDate: function (str) var date = new Date (); 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)); Återlämningsdatum;
Eller vi kan använda en enkel regexp för att formatera strängen och ge den till Date-konstruktören:
I formatmetoden kommer vi att använda det datumobjekt vi just skapat och returnera tiden som ligger mellan publiceringsdatumet och systemets lokala tid - till exempel "11 minuter sedan" eller "3 timmar sedan".
Den tidigare koden, men lite tråkig, är ganska rakt framåt. Först uppnådde vi skillnaden mellan den aktuella tiden och publikationsdatumet i minuter, dagar och månader. Därefter jämförde vi bara resultaten och returnerade en sträng i rätt format.
Nu ska vi granska "render" -metoden.
Steg 6. Skapa GUI
Hittills har vi bara dragit data från Buzz-servern och analyserade XML-dokumentet. Det betyder att vi är redo att visa informationen på skärmen.
render: funktion (element) this.onRender.call (detta, detta); // Steg 1 var html = []; // Steg 2 html.push ("
"); för (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
I det första steget utlöste vi händelsen "onRender", det här kommer igen att vara användbart för programmeraren som använder vårt plugin.
I det andra steget skapade vi en array för att lagra vår dynamiska HTML. Därefter skapade vi en lista "ul" och sedan vi itererade genom våra data, skapa "li" noden för varje objekt; du märkte förmodligen att "för" -tillståndet har en "eller" operatör; Detta tillåter oss att stoppa iterationerna när datamängden slutar eller när indexet "jag" har nått egenskapen "objekt" som definierats av utvecklaren som ska använda pluginprogrammet.
I det sista steget införde vi HTML-filen i behållaren med hjälp av "append" -metoden.
Steg 7. Använd widgeten
För att kunna använda vår widget måste vi skapa en förekomst av vår klass "BuzzReader", men innan vi gör det, låt oss definiera var vi vill göra det. Skapa en HTML-fil och, inom kroppsdelen, och lägg till följande:
Vi ska göra vår widget inom div med klassens "läsare", låt oss skapa förekomsten av vår widget enligt följande:
Glöm inte att importera jQuery-biblioteket och "buzz-widget.js" i din HTML-fil. Om allt var konfigurerat och kodat korrekt ska du se något som liknar följande bild:
Steg 8. Styling Widget
Nåväl, vi kan nu se uppdateringarna, men det ser inte väldigt snygg ut; vi behöver stile det lite.
/ * steg 1 * / karaktär font-family: "Trebuchet MS", Arial, sans-serif; linjehöjd: 24px; fontstorlek: 14px; / * Steg 2 * / #buzz width: 300px; margin : 100px auto; border: 1px solid #AFAFAF; #buzz> div bakgrundsfärg: # E4E4E4; kant: 1px solid # F6F6F6; polstring: 10px; #buzz .reader höjd: 350px; : 1px solid # F6F6F6; vaddering: 80px 10px 10px 10px; bakgrund: #fff url (title.jpg) center 0 no-repeat; / * Steg 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 färg: # 777; #buzz ul li a färg: # 444; text-dekoration: ingen; typsnitt-vikt: normal; #buzz ul li a: svävar text-decoration: underline; #buzz ul li span float: right; / * Steg 4 * / #buzz .buzz-loading position: absolut, marginal-vänster: 240px; bredd: 16px; höjd: 16px; bakgrund: transparent url (ajax-loader.gif)
I de två första stegen fokuserade vi widgeten på skärmen och satt storlek, gränser och färger för behållaren. Vi lade också till logotypen som en rubrik för widgeten.
I de två sista stegen ställde vi in stilar på dynamisk lista, vi ändrade färgen på teckensnitt, och vi lade till några marginaler, gränser och paddningar till våra länkar.
Som ett resultat har vi en mycket mer tilltalande produkt.
Steg 9. Skapa plugin
Det sista steget i denna handledning är att skapa jQuery-plugin. Låt oss ändra filen "buzz-widget.js" och lägga till följande kod till slutet av filen.
I steg två skapade vi konfigurationsobjektet om argumentet "alternativ" är tomt. Därefter definierade vi egenskapen "renderTo" till det faktiska elementet.
I steg tre skapade vi en ny instans av vår widget.
Jag hoppas att du har lärt dig lite om hur man extraherar data från XML-dokument och visar dina senaste Buzzes på vilken som helst webbplats. Några frågor? Tack för att du läser!
Share
Accentsconagua
