Un paio di mesi fa, Google ha rilasciato un nuovo servizio simile a Twitter, chiamato Buzz. Possiamo utilizzare questo servizio per mostrare i nostri ultimi ronzii su qualsiasi sito. Quindi, in questo tutorial, ti guiderò attraverso il processo di creazione del tuo widget Buzz.
Passaggio 1. Leggere gli aggiornamenti pubblici da Buzz
Al momento, non ci sono API per lavorare con il servizio Buzz; Google dovrebbe fornirne uno entro i prossimi mesi, tuttavia, per ora, gli aggiornamenti pubblici sono disponibili come feed Atom.
Per prima cosa, dobbiamo ottenere i dati dal servizio Buzz. Per fare ciò, configureremo uno script PHP che legge i dati dal servizio Buzz. Questo script sarà una specie di proxy che utilizzeremo per recuperare i dati. In questo modo, possiamo fare una richiesta AJAX e ottenere un documento XML che contenga gli aggiornamenti desiderati.
Ecco il codice PHP iniziale:
intestazione ('Content-type: application / xml'); // Impostazione del tipo di contenuto della risposta su $ $ handle = fopen ($ _ GET ['url'], "r"); // Apri l'URL specificato if ($ handle) while (! Feof ($ handle)) $ buffer = fgets ($ handle, 4096); // lettura dei dati echo $ buffer; fclose ($ handle);
Salva questo file come "readfeed.php" e ricorda che questo è solo un esempio. In un progetto del mondo reale, è necessario pulire il parametro url e assicurarsi che l'utente non stia aprendo qualcosa di importante sul proprio file system.
Passaggio 2. Creazione della struttura del nostro oggetto JavaScript
Una volta che possiamo leggere questi dati, abbiamo bisogno di costruire un oggetto che trattiene il nostro codice in JavaScript. Crea un nuovo file e chiamalo "buzz-widget.js". Per estendere un oggetto, dobbiamo usare la proprietà "prototype"; se hai domande a riguardo, dovresti guardare il tutorial in cui Jeffrey ci mostra come funziona con gli oggetti nativi.
La struttura del nostro oggetto sarà qualcosa del genere:
var BuzzReader = function (options) // Step 1 // codice per il costruttore; BuzzReader.prototype = // Step 2 renderTo: "", proxy: "readfeed.php", utente: "", url: "", articoli: 10, onLoad: function () , onRender: function () , render: function (element) , read: function () , parse: function (xml, success, response) , format: function (date) , createDate: function (str) ;
Nel primo passaggio, abbiamo creato la funzione di costruzione per il nostro oggetto. Ora, controlleremo le configurazioni richieste e leggeremo gli aggiornamenti dal nostro proxy.
renderTo : l'elemento in cui verrà reso il widget; questa proprietà può anche essere un selettore jQuery.
delega : l'URL in cui faremo una richiesta di chiamata AJAX per recuperare i nostri dati. Abbiamo già creato il file PHP che legge le informazioni dal servizio Buzz; di default è "readfeed.php".
utente : l'utente Buzz di cui vogliamo ricevere gli aggiornamenti.
elementi : il numero di aggiornamenti che verranno visualizzati nel widget.
onLoad : un evento che verrà attivato quando i dati vengono caricati nel widget; per impostazione predefinita, questa è una funzione vuota.
onRender : questo evento viene attivato quando il widget sta per essere visualizzato nella pagina; funzione vuota per impostazione predefinita.
Passaggio 3. Il costruttore
Lavoriamo sulla funzione di costruzione del nostro widget.
var BuzzReader = function (options) var url = "http://buzz.googleapis.com/feeds/user/public/posted"; // Step 1 jQuery.extend (this, options || ); // Passaggio 2 if (this.user === "") throw "La proprietà 'user' è richiesta"; // Passaggio 3 if (this.renderTo === "") throw "La proprietà 'renderTo' è richiesta"; if (this.url === "") this.url = url.replace (/ user /g,this.user); // Passaggio 4 this.read (); // Passaggio 5;
Nel primo passaggio, abbiamo definito l'URL del servizio Buzz da cui recupereremo i dati. Sostituiremo la stringa "utente" con la configurazione utente (vedi il passaggio 4).
Nel secondo passaggio, abbiamo annullato le proprietà predefinite con le opzioni specificate; abbiamo usato jQuery.extend per farlo.
Nel terzo passaggio, abbiamo controllato le configurazioni richieste, una di queste è "user" e "renderTo". Se manca uno di questi, facciamo un'eccezione. Questo sarà utile per lo sviluppatore che usa il nostro plugin.
Nel passaggio quattro, abbiamo cercato la stringa "user" nella variabile "url" e l'abbiamo sostituita con l'utente di cui vogliamo visualizzare i buzz nel nostro widget.
L'ultimo passaggio è molto importante. Qui, iniziamo il processo di lettura e visualizzazione delle informazioni.
Passaggio 4. Lettura delle informazioni
Abbiamo impostato lo script PHP che estrae i dati sul nostro server. Ora, abbiamo solo bisogno di fare una richiesta Ajax per recuperare i dati con jQuery; diamo un'occhiata al seguente codice:
Nel primo passaggio, abbiamo aggiunto un nuovo elemento al contenitore, informando il visualizzatore che stiamo attualmente elaborando le informazioni.
Nel secondo passaggio, abbiamo fatto la richiesta Ajax. La cosa più importante è la proprietà "context"; questa configurazione ti permetterà di cambiare il contesto della funzione che viene chiamata quando il server risponde. Infine, impostiamo il contesto su "questo" che è l'oggetto BuzzReader.
Ricorda che lo script PHP si aspetta il parametro "url". quindi non dimenticare di inviarlo; quando il server risponde, viene eseguito il metodo "parse".
Passaggio 5. Analisi del documento XML
Il servizio Buzz ha consegnato i dati in un formato di feed Atom, quindi è necessario analizzare ed estrarre le informazioni di cui abbiamo bisogno.
Questo è un esempio del documento XML restituito dal servizio Buzz:
Google Buzz2009-12-14T20: 04: 39.977Ztag: google.com 2009: buzz-alimentazione / public / pubblicato / 117377434815709898403Google - Google BuzzBuzz di A. Googler di 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 di A. Googler di MobileBzz! Bzz!0
Una volta che conosciamo la risposta, possiamo analizzare il documento abbastanza facilmente con jQuery.
Abbiamo ricevuto due argomenti: il primo è i dati, in questo caso un documento XML; il secondo argomento è lo stato del testo della richiesta.
Nel primo passo abbiamo ottenuto tutti i nodi di "entrata"; questo è il luogo in cui si trovano i nostri aggiornamenti Buzz e tutte le informazioni di cui abbiamo bisogno. Successivamente, abbiamo svuotato il contenitore del nostro widget e creato una matrice vuota per archiviare i nostri dati come oggetto JavaScript per ogni nodo.
Nel secondo passo, abbiamo iterato attraverso i nodi "entry" ed estratto "title", "author", "content" e così via. Questo è un processo davvero semplice; tutto ciò che dobbiamo fare è scrivere il selettore e impostare la radice per la ricerca, in questo caso la radice è il nodo "voce".
Vorrei sottolineare la linea in cui stiamo estraendo l'attributo "reply": il selettore assomiglia a questo:
link [rel = risposte]
Abbiamo specificato che vogliamo il nodo "link", che ha un attributo "rel" uguale a "risposte". Questo è importante perché ci sono molti nodi "link" all'interno di ciascuna "voce".
Nel terzo passaggio, abbiamo creato il riferimento "this.data" alla matrice che contiene i nostri dati. Successivamente, abbiamo eseguito l'evento "onLoad" e passato le informazioni che abbiamo estratto.
Nel passaggio quattro, abbiamo eseguito il metodo di rendering.
Prima di continuare con il metodo "render", esaminiamo i metodi "createData" e "format". Chiamiamo questi metodi per ogni voce.
Nel metodo "createDate", creeremo solo un nuovo oggetto Date con la stringa data. La stringa ha il formato "2009-12-14T20: 04: 39.977Z" in modo che possiamo creare l'oggetto Date come segue:
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)); data di ritorno;
Oppure possiamo usare una semplice espressione regolare per formattare la stringa e assegnarla al costruttore Date:
Nel metodo format useremo l'oggetto data appena creato e restituiamo il tempo che intercorre tra la data di pubblicazione e l'ora locale del sistema, ad esempio "11 minuti fa" o "3 ore fa".
Il codice precedente, anche se un po 'noioso, è abbastanza semplice. Innanzitutto, abbiamo ottenuto la differenza tra l'ora corrente e la data delle pubblicazioni in minuti, giorni e mesi. Successivamente, abbiamo semplicemente confrontato i risultati e abbiamo restituito una stringa nel formato corretto.
Ora esaminiamo il metodo "render".
Passaggio 6. Creazione della GUI
Fino ad ora, abbiamo solo estratto i dati dal server Buzz e analizzato il documento XML. Ciò significa che siamo pronti a visualizzare le informazioni sullo schermo.
render: function (element) this.onRender.call (this, this); // Step 1 var html = []; // Passaggio 2 html.push ("
"); per (var i = 0; i < this.items || i < this.data.lenght;i++) html.push("
Nel primo passaggio, abbiamo attivato l'evento "onRender", questo, ancora una volta, sarà utile per il programmatore che usa il nostro plugin.
Nella seconda fase, abbiamo creato una matrice per archiviare il nostro HTML dinamico. Successivamente, abbiamo creato una lista "ul" e poi abbiamo ripetuto i nostri dati, creando il nodo "li" per ciascun elemento; probabilmente hai notato che la condizione "for" ha un "o" operatore; questo ci permette di fermare le iterazioni quando finisce la matrice di dati, o quando l'indice "i" ha raggiunto la proprietà "items" definita dallo sviluppatore che sta per usare il plugin.
Nell'ultimo passaggio, abbiamo inserito l'HTML nel contenitore utilizzando il metodo "append".
Passaggio 7. Utilizzo del widget
Per utilizzare il nostro widget dobbiamo creare un'istanza della nostra classe "BuzzReader", ma, prima di farlo, definiamo dove vogliamo renderizzarlo. Creare un file HTML e, all'interno dell'elemento body, e aggiungere quanto segue:
Stiamo andando a rendere il nostro widget all'interno del div con il "lettore" di classe, creiamo l'istanza del nostro widget come segue:
Non dimenticare di importare la libreria jQuery e "buzz-widget.js" nel tuo file HTML. Se tutto è stato configurato e codificato correttamente, dovresti vedere qualcosa di simile alla seguente immagine:
Passaggio 8. Modifica del widget
Bene, ora possiamo vedere gli aggiornamenti, ma non sembra molto carino; dobbiamo modellarlo un po '.
/ * passaggio 1 * / body famiglia di caratteri: "Trebuchet MS", Arial, sans-serif; altezza della riga: 24px; dimensione carattere: 14px; / * Passaggio 2 * / #buzz larghezza: 300px; margine : 100px auto; border: 1px solid #AFAFAF; #buzz> div background-color: # E4E4E4; border: 1px solid # F6F6F6; padding: 10px; #buzz .reader height: 350px; overflow: auto; border : 1px solid # F6F6F6; padding: 80px 10px 10px 10px; background: #fff url (title.jpg) center 0 nessuna ripetizione; / * Passaggio 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; / * Passaggio 4 * / #buzz .buzz-loading position: absolute; margin-left: 240px; width: 16px; height: 16px; background: transparent url (ajax-loader.gif) center center no-repeat;
Nei primi due passaggi, abbiamo centrato il widget sullo schermo e impostato la dimensione, i bordi e i colori del contenitore; abbiamo anche aggiunto il logo come intestazione per il widget.
Negli ultimi due passaggi, abbiamo impostato gli stili nell'elenco dinamico, abbiamo cambiato il colore dei caratteri e abbiamo aggiunto alcuni margini, bordi e paddings ai nostri collegamenti.
Di conseguenza abbiamo un prodotto molto più attraente.
Passaggio 9. Creazione del plugin
L'ultimo passaggio in questo tutorial è creare il plugin jQuery. Modifichiamo il file "buzz-widget.js", aggiungendo il seguente codice alla fine del file.
Nel primo passaggio, abbiamo semplicemente chiamato il nostro plugin.
Nel secondo passaggio, abbiamo creato l'oggetto di configurazione se l'argomento "opzioni" è vuoto. Successivamente, abbiamo definito la proprietà "renderTo" all'elemento attuale.
Nel terzo passaggio, abbiamo creato una nuova istanza del nostro widget.
Ora, possiamo usare il nostro plugin nel nostro HTML, come questo:
Spero che tu abbia imparato qualcosa su come estrarre dati da documenti XML e mostrare i tuoi ultimi Buzz su qualsiasi sito web. Qualsiasi domanda? Grazie per aver letto!
Share
Accentsconagua
