Share
In questo tutorial, vedremo l'uso di jQuery per chiamare l'API di Twitter e quindi utilizzare i risultati per creare un widget per un blog o un sito web personale che mostri in quali ore del giorno twittiamo al massimo.
L'API di Twitter è basata su HTTP e può restituire risultati come XML o JSON. Come jQuery ha un JSON
parser integrato e tende ad essere più leggero di XML, lo useremo.
Dal momento che il nostro widget dovrà mostrare visivamente l'utilizzo orario, utilizzeremo un plug-in jQuery per la creazione di grafici chiamato
Sparklines
per generare un grafico delle ore di tweeting.
Quando tutto è fatto, il nostro widget dovrebbe assomigliare a questo.
Per far sì che ciò accada, dovremo scrivere alcuni Javascript che eseguono le seguenti operazioni:
Infine, una volta che il codice funzionerà, lo trasformeremo in un plugin jQuery per
facile utilizzo futuro.
Ci sono parecchi tutorial su internet su jQuery e AJAX.
Tuttavia, se non hai familiarità con AJAX, il concetto è semplice. Javascript si aprirà
una connessione HTTP e recupera i risultati di un URL. Al termine del download,
una funzione può essere chiamata (callback).
Prima di poter utilizzare AJAX, dobbiamo costruire l'URL dell'API che chiameremo.
Twitter ha un'estesa API a cui puoi fare riferimento
(Documentazione API Twitter),
ma per questo widget eseguiremo solo una ricerca di base.
L'URL di base per il metodo di ricerca è:
http://search.twitter.com/search.json
Possiamo passare i parametri proprio come faremmo con un normale metodo JavaScript, ma li passiamo
come valori di stringa di query. I parametri che ci interessano sono:
Inoltre, dal momento che stiamo per utilizzare AJAX per il download
dati da un altro dominio (twitter.com), avremo bisogno di usare JSONP che ci permette di rinunciare alla sicurezza
preoccupazioni all'interno del browser. JQuery gestirà automaticamente questo per noi, abbiamo solo bisogno di
allegare "callback = (nome funzione)" al nostro URL. Dato che useremo una funzione anonima,
questo valore sarà "?".
Il nostro URL finale per l'API di Twitter
http://search.twitter.com/search.json?callback=?&rpp=50?q=from:twittername
Ora che sappiamo dove stiamo andando a fare la chiamata, possiamo scrivere qualche Javascript in realtà
eseguirlo. JQuery include un metodo che gestirà l'intera chiamata AJAX per noi,
e analizza i risultati JSON, restituendo oggetti. Questo metodo è $ .getJSON (). Richiede due parametri, uno per l'URL,
e uno per la funzione di callback.
I risultati che tornano da Twitter ricordano la seguente struttura.
Accentsconagua
jsonp1241596748896 ("results": ["text": "" Monday Madness "presso papajohn's - $ 6 pizza", "to_user_id": null, "from_user": "andstuff", "id": 1703714190, "from_user_id": 85548, "iso_language_code": "en", "source": "Spaz<\/a>"," profile_image_url ":" http: \ / \ / s3.amazonaws.com \ / twitter_production \ / profile_images \ / 52440056 \ /lttwitter_normal.jpg "," created_at ":" Tue, 05 maggio 2009 05:43:39 + 0000 ", ... (più oggetti tweet qui)]," since_id ": 0," max_id ": 1714318174," refresh_url ":"? Since_id = 1714318174 & q = da% 3Andstuff "," results_per_page ": 50," total ": 9, "completed_in": 0.100973, "pagina": 1, "query": "da% 3Andstuff"); Si noti che gli oggetti che contengono i dati desiderati sono oggetti figlio di un oggetto figlio.
Per il nostro widget cercheremo di trovare l'oggetto di raccolta "risultati" cercando due
cose: l'oggetto che ha una lunghezza (è un array) e l'oggetto che ha bambini
elementi che hanno la proprietà "created_at". Una volta trovato
questo articolo genitore, possiamo passarci sopra per assemblare i nostri dati.
$ (function () var twitterName = 'nettuts'; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, function (data) $ .each (data, function (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) // tweets [] è una matrice di tutti gli articoli tweet; ));); Ricordiamo che creeremo un widget che mostra una tabella dei nostri tweet orari.
Per creare il grafico, dovremo assemblare quei dati in un array. Possiamo farlo da
trasformare la proprietà "created_at" in un oggetto Date (), quindi estrarre l'ora (0-24).
Manterremo un array chiamato "usageData" che incrementeremo per tenere traccia di quanti tweets all'ora.
Useremo un ciclo for per esaminare ciascun elemento e aggiungere semplicemente all'array useData
quando viene trovata quell'ora.
$ (function () var twitterName = 'nettuts'; var usageData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0]; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, funzione ( data) $ .each (data, function (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) per (i = 0; i < tweets.length; i++) var usageHour = (new Date(tweets[i].created_at)).getHours(); usageData[usageHour]+=2; ; ) ); ); Questo dovrebbe riempire useData con valori come ...
[0, 0, 6, 8, 10, 6, 4, 12, 12, 10, 8, 0, 2, 4, 2, 0, 8, 10, 0, 0, 4, 2, 0, 0]
Se non hai ancora scaricato il plug-in Sparklines, vai avanti e fallo ora, e poi rilascia
il riferimento al file di script sulla tua pagina.
Prima di chiamare il codice del grafico, dobbiamo creare un tag contenitore in modo che esista in. Da qualche parte
sulla tua pagina, aggiungi un div con la classe "twitterUsage". Accederemo da jQuery nel codice a
crea il nostro grafico.
Sparklines è molto semplice da usare. Abbiamo semplicemente bisogno di chiamare il metodo sparkline () su qualsiasi
jQuery wrapped set per creare un nuovo grafico all'interno di quell'elemento. Dopo aver creato il nostro grafico,
aggiungeremo una breve riga di riepilogo che descrive cosa rappresentano i dati del grafico (tweet all'ora).
La nostra intera sezione della testa dovrebbe ora assomigliare a questo.
Esegui il codice e dovresti ottenere qualcosa che assomigli al seguente.
Per questo widget, mi piacerebbe vedere il grafico sovrapponendo il logo di Twitter,
quindi lo imposterò come immagine di sfondo sul div. Getterò anche un po 'di
stile dei caratteri e dei colori anche sul testo della descrizione. (Nota: il logo di Twitter
il file di sfondo è disponibile nei file di origine. Se preferisci, è largo 120 px
per crearlo da solo.)
.twitterUsage width: 120px; altezza: 40px; padding-top: 15px; background: url trasparente ('twitter-logo-bg.gif') no-repeat top center; .twitterUsage span display: block; colore: # 0482AD; font-size: 9px; allineamento del testo: centro; font-family: Sans-Serif; Infine, possiamo adattare il metodo sparklines () per includere alcune opzioni di stile:
$ (". twitterUsage"). sparkline (usageData, type: 'bar', barColor: '# 4D4D4D', // Altezza grigio scuro: 25); 
L'ultima cosa che dobbiamo fare è convertire il nostro widget di lavoro in un plugin.
Poiché il nostro widget non è troppo complesso, sarà semplice come copiare il nostro codice
in un file esterno, definendo $ come jQuery e aggiungendo il nostro codice come metodo di estensione
all'oggetto jQuery. (Nota anche la leggera modifica a .insertAfter)
Crea un nuovo file javascript chiamato "jquery.twittergraph.js".
Incolla quanto segue nel file (o digita tu stesso le modifiche se preferisci).
(function ($) $ .twitterGraph = function (twitterName, element) var usageData = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 , 0, 0, 0, 0, 0, 0, 0, 0, 0]; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, function (data) $ .each (data, function (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) per (i = 0; i < tweets.length; i++) var usageHour = (new Date(tweets[i].created_at)).getHours(); usageData[usageHour] += 2; ; ) element.sparkline(usageData, type: 'bar', barColor: '#4D4D4D', height: 25 ); $(''+ twitterName +': tweets all'ora') .InsertAfter (element.find ( "tela")); ); ; ) (JQuery); Possiamo ora chiamare il nostro widget con:
$ .twitterGraph ('nettuts', $ (". twitterUsage")); Il codice completo per la nostra pagina HTML è il seguente.
TwitterGraph
