For noen måneder siden ga Google ut en ny Twitter-lignende tjeneste, kalt Buzz. Vi kan bruke denne tjenesten til å vise våre nyeste buzzes på et hvilket som helst nettsted. Så i denne veiledningen vil jeg veilede deg gjennom prosessen med å bygge din egen Buzz-widget.
Trinn 1. Leser offentlige oppdateringer fra Buzz
For øyeblikket er det ingen API for å jobbe med Buzz-tjenesten; Google forventes å levere en innen de neste månedene, men for nå er de offentlige oppdateringene tilgjengelige som Atom-feeds.
Først må vi hente dataene fra Buzz-tjenesten. For å gjøre det, vil vi sette opp et PHP-skript som leser dataene fra Buzz-tjenesten. Dette skriptet vil være en slags proxy som vi skal bruke for å hente dataene. Ved å gjøre dette kan vi lage en AJAX-forespørsel, og få et XML-dokument som inneholder ønskede oppdateringer.
Her er den første PHP-koden:
header ('Content-type: application / xml'); // Sette opp svarinnholdstypen til XML $ handle = fopen ($ _ GET ['url'], "r"); // Åpne den oppgitte URLen hvis ($ handle) while (feof ($ handle)) $ buffer = fgets ($ handle, 4096); // leser data echo $ buffer; fclose ($ handle);
Lagre denne filen som "readfeed.php," og husk at dette bare er et eksempel. I et ekte verdensprosjekt bør du rydde url-parameteren, og sørg for at brukeren ikke åpner noe viktig på filsystemet.
Trinn 2. Opprette strukturen til vårt JavaScript-objekt
Når vi kan lese disse dataene, må vi bygge et objekt som inneholder vår kode i JavaScript. Opprett en ny fil og gi den navnet "buzz-widget.js". For å utvide et objekt må vi bruke egenskapen "prototype"; Hvis du har spørsmål om dette, bør du se veiledningen der Jeffrey viser oss hvordan dette fungerer med innfødte objekter.
I trinn ett skapte vi konstruktørfunksjonen for objektet vårt. Nå skal vi se etter de nødvendige konfigurasjonene, og les oppdateringene fra proxyen vår.
renderTo : elementet der widgeten blir gjengitt Denne egenskapen kan også være en jQuery-velger.
proxy : URL-adressen der vi skal ringe en AJAX-forespørsel for å hente dataene våre. Vi har allerede opprettet PHP-filen som leser informasjonen fra Buzz-tjenesten; som standard er det "readfeed.php".
bruker : Buzz-brukeren vi ønsker å få oppdateringene fra.
elementer : Antall oppdateringer vi skal vise i widgeten.
på Last : En hendelse vi skal utløse når dataene lastes inn i widgeten; Som standard er dette en tom funksjon.
onRender : Denne hendelsen utløses når widgeten er i ferd med å bli gjengitt på siden; tom funksjon som standard.
Trinn 3. Konstruktøren
La oss jobbe med konstruktørfunksjonen til vår widget.
var BuzzReader = funksjon (alternativer) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Trinn 1 jQuery.extend (dette alternativene || ); // Trinn 2 hvis (this.user === "") kaste "Egenskapen" er nødvendig "; // Trinn 3 hvis (this.renderTo === "") kaste "The 'renderTo' -egenskapen er nødvendig"; hvis (this.url === "") this.url = url.replace (/ user /g,this.user); // Trinn 4 this.read (); // trinn 5;
I trinn ett definerte vi nettadressen til Buzz-tjenesten der vi skal hente dataene. Vi erstatter "user" -strengen med brukerkonfigurasjonen (se trinn 4).
I trinn to overstyrer vi standardegenskapene med de angitte alternativene; vi brukte jQuery.extend å gjøre det.
I trinn tre, sjekket vi for de nødvendige konfigurasjonene, en av dem er "brukeren" og "renderTo". Hvis en av disse mangler, kaster vi et unntak. Dette vil være nyttig for utvikleren som bruker pluginet vårt.
I trinn fire søkte vi etter "user" -strengen i variabelen "url", og erstattet den med brukeren hvis buzzes vi ønsker å vise i vår widget.
Det siste trinnet er veldig viktig. Her starter vi prosessen med å lese og vise informasjonen.
Trinn 4. Leser informasjonen
Vi har satt opp PHP-skriptet som trekker dataene til serveren vår. Nå trenger vi bare å lage en Ajax-forespørsel for å hente dataene med jQuery; la oss se på følgende kode:
I trinn ett føyte vi et nytt element til containeren, og informerte betrakteren om at vi for tiden behandler informasjon.
I trinn to gjorde vi Ajax-forespørselen. Det viktigste er "kontekst" -egenskapen; Denne konfigurasjonen lar deg endre konteksten til funksjonen som kalles når serveren reagerer. Til slutt bestemmer vi konteksten for "dette" som er BuzzReader-objektet.
Husk at PHP-skriptet forventer parameteren "url". så ikke glem å sende den; Når serveren reagerer, utføres metoden "parse".
Trinn 5. Parsing XML-dokumentet
Buzz-tjenesten leverte dataene i et Atom-feedformat, så vi må analysere og trekke ut den informasjonen vi trenger.
Dette er et eksempel på XML-dokumentet som returneres fra Buzz-tjenesten:
Google Buzz2009-12-14T20: 04: 39.977Ztag: google.com, 2009: buzz-feed / offentlig / postet / 117377434815709898403Google - Google BuzzBuzz av A. Googler fra 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 av A. Googler fra MobileBzz! bzz!0
Når vi kjenner svaret, kan vi analysere dokumentet ganske enkelt med jQuery.
Vi mottok to argumenter: Den første er dataene, i dette tilfellet et XML-dokument; Det andre argumentet er tekststatusen til forespørselen.
I trinn ett fikk vi alle "inngang" noder; Dette er stedet der Buzz oppdateres, og all informasjon vi trenger er lokalisert. Deretter tømte vi beholderen i vår widget og opprettet et tomt utvalg for å lagre dataene våre som et JavaScript-objekt for hver knute.
I trinn to, itererte vi gjennom "entry" noder og hentet "tittel", "forfatter", "innhold" og så videre. Dette er en veldig enkel prosess; alt vi trenger å gjøre er å skrive selgeren og sette roten for søket, i dette tilfellet er roten noden "oppføring".
Jeg vil gjerne påpeke linjen der vi trekker ut svaret-attributtet - selgeren ser noe ut som dette:
link [rel = svar]
Vi angav at vi vil ha noden "link", som har en attributt "rel" lik "svar". Dette er viktig fordi det er mange "link" noder innenfor hver "oppføring".
I trinn tre, opprettet vi referansen "this.data" til gruppen som inneholder våre data. Deretter utførte vi arrangementet "onLoad" og passerte informasjonen vi hentet ut.
I trinn fire utførte vi gjengivelsesmetoden.
Før vi fortsetter med "ren" -metoden, la oss se gjennom "createData" og "format" -metodene. Vi kaller disse metodene for hver oppføring.
I "createDate" -metoden skal vi bare lage et nytt Date-objekt med den angitte strengen. Strengen har formatet "2009-12-14T20: 04: 39.977Z" slik at vi kan opprette Date-objektet som følger:
createDate: funksjon (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)); returdato;
Eller vi kan bruke en enkel regexp til å formatere strengen og gi den til Date-konstruktøren:
I formatmetoden skal vi bruke datobjektet vi nettopp har opprettet, og returnere tiden som er mellom publiseringsdatoen og systemets lokale tid - for eksempel "11 minutter siden" eller "3 timer siden."
Den forrige koden, men litt kjedelig, er ganske rett frem. Først oppnådde vi forskjellen mellom nåværende tid og publikasjonsdato i minutter, dager og måneder. Etter det sammenlignet vi bare resultatene, og returnerte en streng i riktig format.
La oss nå gjennomgå "gjengis" -metoden.
Trinn 6. Opprette GUI
Inntil nå har vi bare trukket dataene fra Buzz-serveren, og analysert XML-dokumentet. Det betyr at vi er klare til å vise informasjonen på skjermen.
gjengi: funksjon (element) this.onRender.call (dette, dette); // Trinn 1 var html = []; // Trinn 2 html.push ("
"); for (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
I det første trinnet utløste vi hendelsen "onRender", dette vil igjen være nyttig for programmøren som bruker pluginet vårt.
I det andre trinnet opprettet vi en matrise for å lagre vår dynamiske HTML. Deretter opprettet vi en liste "ul", og deretter ble det lurt gjennom våre data, og skapte "li" node for hvert element; du har sikkert lagt merke til at "for" tilstanden har en "eller" operatør; Dette tillater oss å stoppe iterasjonene når mengden data avsluttes, eller når indeksen "jeg" har nådd egenskapen "elementer" som er definert av utvikleren som skal bruke plugin.
I det siste trinnet satte vi HTML inn i containeren ved hjelp av "append" -metoden.
Trinn 7. Bruke Widget
For å kunne bruke vår widget må vi opprette en forekomst av klassen "BuzzReader", men før vi gjør det, la oss definere hvor vi vil gjengi det. Opprett en HTML-fil, og innenfor kroppselementet, og legg til følgende:
Vi skal gjengi vår widget i div med klassen "leser", la oss lage forekomsten av widgeten vår som følger:
Ikke glem å importere jQuery-biblioteket og "buzz-widget.js" til HTML-filen din. Hvis alt ble konfigurert og kodet riktig, bør du se noe som ligner på følgende bilde:
Trinn 8. Styling Widget
Vel, vi kan nå se oppdateringene, men det ser ikke veldig pent ut; vi må stilte det litt.
I de to første trinnene senterte vi widgeten på skjermen, og angir størrelsen, grensene og fargerne for containeren. Vi har også lagt til logoen som en header for widgeten.
I de to siste trinnene har vi satt stilene til den dynamiske listen, vi har endret fargen på skrifttypene, og vi har lagt til noen marginer, grenser og paddinger til våre lenker.
Som et resultat har vi et mye mer tiltalende produkt.
Trinn 9. Opprette plugin
Det siste trinnet i denne opplæringen er å opprette jQuery-plugin. La oss endre filen "buzz-widget.js", og legg til følgende kode til slutten av filen.
I trinn to, opprettet vi konfigurasjonsobjektet hvis argumentet "alternativer" er tomt. Deretter definerte vi egenskapen "renderTo" til selve elementet.
I trinn tre skapte vi en ny forekomst av vår widget.
Jeg håper du har lært litt om hvordan å pakke ut data fra XML-dokumenter, og vise de nyeste Buzzene på et hvilket som helst nettsted. Noen spørsmål? Takk for at du leste!
Share
Accentsconagua
