Cu câteva luni în urmă, Google a lansat un nou serviciu de tip Twitter, numit Buzz. Putem folosi acest serviciu pentru a afișa cele mai recente buzzes pe orice site. Deci, în acest tutorial, vă voi îndruma prin procesul de construire a widget-ului propriu Buzz.
Pasul 1. Citirea actualizărilor publice din Buzz
În prezent, nu există niciun API care să funcționeze cu serviciul Buzz; Google este de așteptat să furnizeze unul în următoarele câteva luni, totuși, deocamdată, actualizările publice sunt disponibile ca fluxuri Atom.
În primul rând, trebuie să obținem datele din serviciul Buzz. Pentru a face acest lucru, vom configura un script PHP care citește datele din serviciul Buzz. Acest script va fi un fel de proxy pe care îl vom folosi pentru a prelua datele. Procedând astfel, putem face o solicitare AJAX și puteți obține un document XML care conține actualizările dorite.
Iată codul inițial PHP:
header ("Tip de conținut: cerere / xml"); // Setarea tipului de conținut de răspuns la XML $ handle = fopen ($ _GET ['url'], 'r'); // Deschideți URL-ul dat dacă ($ handle) while (! Feof ($ handle)) $ buffer = fgets ($ handle, 4096); // citirea datelor ecou $ buffer; fclose ($ mâner);
Salvați acest fișier ca "readfeed.php" și amintiți-vă că acesta este doar un exemplu. Într-un proiect din lumea reală, trebuie să curățați parametrul url și să vă asigurați că utilizatorul nu deschide ceva important în sistemul dvs. de fișiere.
Pasul 2. Crearea structurii obiectului JavaScript
Odată ce putem citi aceste date, trebuie să construim un obiect care să dețină codul nostru în JavaScript. Creați un fișier nou și denumiți-l "buzz-widget.js". Pentru a extinde un obiect, trebuie să folosim proprietatea "prototip"; dacă aveți întrebări despre acest lucru ar trebui să urmăriți tutorialul în care Jeffrey ne arată cum funcționează acest lucru cu obiectele native.
Structura obiectului nostru va fi ceva de genul:
var BuzzReader = funcție (opțiuni) // Pasul 1 // codul pentru constructor; BuzzReader.prototype = // Pasul 2 renderTo: "", proxy: "readfeed.php", user: "", url: "", items: 10, onLoad: , render: funcția (element) , citiți: funcția () , parse: funcția (xml, succesul, răspunsul) ;
În primul pas, am creat funcția constructorului pentru obiectul nostru. Acum, vom verifica configurațiile necesare și vom citi actualizările de la proxy-ul nostru.
renderTo : elementul în care widgetul va fi redat; această proprietate poate fi și un selector jQuery.
împuternicit : adresa URL în care vom efectua o solicitare AJAX pentru a prelua datele noastre. Am creat deja fișierul PHP care citește informațiile din serviciul Buzz; în mod implicit este "readfeed.php".
utilizator : utilizatorul Buzz de la care vrem să obținem actualizările.
articole : numărul de actualizări pe care le vom afișa în widget.
onLoad : un eveniment pe care o vom declanșa când datele vor fi încărcate în widget; în mod implicit, aceasta este o funcție goală.
onRender : acest eveniment este declanșat când widget-ul urmează să fie redat în pagină; funcția goală implicită.
Pasul 3. Constructorul
Să lucrăm la funcția constructor a widget-ului nostru.
var BuzzReader = funcție (opțiuni) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Pasul 1 jQuery.extend (aceasta, opțiuni || ); // Pasul 2 dacă (this.user === "") arunca "Proprietatea" user "este necesară"; // Pasul 3 dacă (this.renderTo === "") throw "Proprietatea" renderTo "este necesară"; dacă (this.url === "") this.url = url.replace (/ user /g,this.user); // Pasul 4 this.read (); // Pasul 5;
În primul pas, am definit adresa URL a serviciului Buzz de la care vom prelua datele. Vom înlocui șirul "user" cu configurația utilizatorului (a se vedea pasul 4).
În pasul doi, depășim proprietățile implicite cu opțiunile date; am folosit jQuery.extend pentru a face asta.
În pasul trei, am verificat configurațiile necesare, unul dintre ele fiind "utilizatorul" și "renderTo". Dacă unul dintre acestea lipsește, aruncăm o excepție. Acest lucru va fi util pentru dezvoltatorul care folosește pluginul nostru.
În pasul patru, am căutat șirul "user" din variabila "url" și l-am înlocuit cu utilizatorul al cărui buzzer dorim să afișăm în widgetul nostru.
Ultimul pas este foarte important. Aici începem procesul de citire și afișare a informațiilor.
Pasul 4. Citirea informațiilor
Am setat scriptul PHP care trage datele pe serverul nostru. Acum, trebuie doar să facem o solicitare Ajax pentru a prelua datele cu jQuery; să ne uităm la următorul cod:
În primul pas, am adăugat un nou element containerului, informând privitorul că procesăm în prezent informații.
La pasul doi, am făcut cererea Ajax. Cel mai important lucru este proprietatea "context"; această configurație vă va permite să modificați contextul funcției care se numește atunci când serverul răspunde. În final, am setat contextul la "acest", care este obiectul BuzzReader.
Amintiți-vă că scriptul PHP așteaptă parametrul "url". așa că nu uitați să-l trimiteți; când serverul răspunde, metoda "parsează" este executată.
Pasul 5. Parsarea documentului XML
Serviciul Buzz a livrat datele într-un format de flux Atom, așa că trebuie să analizăm și să extragem informațiile de care avem nevoie.
Acesta este un exemplu de document XML returnat din serviciul Buzz:
Google Buzz2009-12-14T20: 04: 39.977Ztag-ul: google.com, 2009: Buzz-feed / public / postate / 117377434815709898403Google - Google BuzzBuzz de către A. Googler de la Mobile2009-12-14T20: 04: 39.000Z2009-12-14T20: 04: 39.977Ztag-ul: 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 de către A. Googler de la MobileBzz! Bzz!0
După ce știm răspunsul, putem analiza documentul destul de ușor cu jQuery.
parse: funcția (xml, status) var that = this; var nodes = jQuery ("intrare", xml); // Pasul 1 this.el.empty (); var info = []; (title: jQuery ("title", this) .text () () (), fișier: jQuery ("summary") .text (), fișier: jQuery (" conținut: jQuery ("conținut: prima", acest) .text (), publicat: that.format (date), actualizat: jQuery (" link [rel = răspunsuri] ", acest lucru) .attr (" href "));); this.data = info; // Pasul 3 this.onLoad.call (aceasta, info); this.render (this.renderTo); // Pasul 4,
Am primit două argumente: primul este datele, în acest caz un document XML; al doilea argument este starea textului cererii.
În primul pas, avem toate nodurile "intrare"; acesta este locul în care se află actualizările Buzz și toate informațiile de care avem nevoie. Apoi, am golit containerul widget-ului nostru și am creat o matrice goală pentru a stoca datele noastre ca obiect JavaScript pentru fiecare nod.
La pasul doi, am repetat prin nodurile "intrare" și am extras "titlul", "autorul", "conținutul" și așa mai departe. Acesta este un proces foarte simplu; tot ce trebuie să facem este să scriem selectorul și să setăm rădăcina pentru căutare, în acest caz rădăcina este nodul "entry".
Aș dori să subliniez linia în care extragem atributul "răspuns" - selectorul arată astfel:
link [rel = raspunsuri]
Am specificat că dorim ca nodul "link", care are un atribut "rel" egal cu "răspunsurile". Acest lucru este important deoarece există numeroase noduri "de legătură" în fiecare "intrare".
În pasul trei, am creat referința "this.data" la matricea care conține datele noastre. După aceasta, am executat evenimentul "onLoad" și am trecut informațiile pe care le-am extras.
În pasul patru, am executat metoda de randare.
Înainte de a continua cu metoda "render", să examinăm metodele "createData" și "format". Noi numim aceste metode pentru fiecare intrare.
În metoda "createDate", vom crea doar un nou obiect Date cu șirul dat. Șirul are formatul "2009-12-14T20: 04: 39.977Z" astfel încât să putem crea obiectul Date după cum urmează:
createDate: funcție (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)); data de întoarcere;
Sau putem folosi o regexp simplă pentru a formata șirul și a da-o constructorului de date:
În metoda de format vom folosi obiectul date pe care tocmai l-am creat și vom returna timpul care se află între data publicării și ora locală a sistemului - de exemplu "acum 11 minute" sau "acum 3 ore".
Codul anterior, deși un pic obositor, este destul de drept. În primul rând, am obținut diferența dintre ora curentă și data publicării în minute, zile și luni. După aceea, am comparat pur și simplu rezultatele și am întors un șir în formatul corect.
Acum, să examinăm metoda "renunțării".
Pasul 6. Crearea GUI
Până acum, am tras doar datele de pe serverul Buzz și am analizat documentul XML. Aceasta înseamnă că suntem gata să afișăm informațiile de pe ecran.
render: functie (element) this.onRender.call (aceasta, aceasta); // Pasul 1 var html = []; // Pasul 2 html.push ("
"); pentru (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
În primul pas, am declanșat evenimentul "onRender", acest lucru, din nou, va fi util pentru programatorul care folosește pluginul nostru.
În al doilea pas, am creat o matrice pentru stocarea codului HTML dinamic. După aceea, am creat o listă "ul" și apoi am iterat prin datele noastre, creând nodul "li" pentru fiecare element; ați observat probabil că condiția "pentru" are un "sau" operator; acest lucru ne permite să oprim iterațiile atunci când se termină matricea de date sau când indicele "i" a atins proprietatea "elemente" definite de dezvoltatorul care intenționează să utilizeze pluginul.
În ultima etapă, am inserat codul HTML în container utilizând metoda "adăugați".
Pasul 7. Utilizarea widget-ului
Pentru a folosi widget-ul nostru trebuie să creați o instanță a clasei noastre "BuzzReader", dar, înainte de a face acest lucru, să definim locul în care dorim să-l afișăm. Creați un fișier HTML și, în interiorul elementului corp, adăugați următoarele:
Vom face widget-ul nostru în div cu clasa "cititor", să creăm instanța widget-ului nostru după cum urmează:
Nu uitați să importați biblioteca jQuery și "buzz-widget.js" în fișierul HTML. Dacă totul a fost configurat și codat corect, ar trebui să vedeți ceva similar cu următoarea imagine:
Pasul 8. Modelarea widgetului
Ei bine, acum vedem actualizările, dar nu arată prea frumos; trebuie să-l insistăm puțin.
/ * pasul 1 * / corpul font-family: "Trebuchet MS", Arial, sans-serif, linia-inaltime: 24px, font-size: 14px; : 100px auto; margine: 1px solid #AFAFAF; #buzz> div culoare-fundal: # E4E4E4; graniță: 1px solid #F6F6F6; padding: 10px; #buzz .reader height: 350px; : 1px solid #F6F6F6; padding: 80px 10px 10px 10px; fundal: #fff url (title.jpg) center 0 no-repeat; / * Pasul 3 * / #buzz ul margine: 0; buzz ul li tip stil de tip: nu; culoare: # A3A3A3; margine de fund: 1px solid # E4E4E4; marginea inferioară: 5px; padding-bottom: 5px; #buzz ul li div culoare: # 777; #buzz ul li a hârtie text-decorare: subliniere; #buzz ul li span float: dreapta; / * Pasul 4 * / #buzz .buzz-loading poziție: absolută; marginea-stânga: 240px; lățimea: 16px; înălțimea: 16px;
În primele două etape, am centrat widgetul de pe ecran și stabilim dimensiunea, limitele și culorile pentru container; am adăugat și logo-ul ca antet pentru widget.
În ultimii doi pași, am setat stilurile pe lista dinamică, am schimbat culoarea fonturilor și am adăugat niște margini, margini și paddings la link-urile noastre.
Ca rezultat, avem un produs mult mai atrăgător.
Pasul 9. Crearea pluginului
Ultimul pas în acest tutorial este crearea pluginului jQuery. Să modificăm fișierul "buzz-widget.js", adăugând următorul cod la sfârșitul fișierului.
jQuery.fn.buzzReader = funcția (opțiuni) // Pasul 1 returnează acest lucru (funcție () var opts = opțiuni || ; // Pasul 2 opts.renderTo = acest; nou BuzzReader (opts); / /Pasul 3 ); ;
În primul pas, am numit pur și simplu pluginul nostru.
În pasul doi, am creat obiectul de configurare dacă argumentul "opțiuni" este gol. Apoi, am definit proprietatea "renderTo" elementului real.
La pasul trei, am creat o nouă instanță a widgetului nostru.
Acum, putem folosi plugin-ul nostru în HTML, după cum urmează:
Sper că ați învățat un pic despre cum să extrageți date din documente XML și să afișați cele mai recente Buzzes pe orice site web. Alte intrebari? Vă mulțumim pentru lectură!
Share
Accentsconagua
