Share
In deze zelfstudie zullen we kijken naar het gebruik van jQuery om de API van Twitter te bellen en de resultaten vervolgens gebruiken om een widget voor een blog of persoonlijke website te maken die laat zien op welke uren gedurende de dag we het meest tweeten..
De Twitter API is gebaseerd op HTTP en kan resultaten als XML of JSON retourneren. Omdat jQuery een JSON heeft
parser ingebouwd, en neigt lichter te zijn dan XML, we zullen dat gebruiken.
Aangezien onze widget het uurlijks gebruik visueel moet weergeven, gebruiken we een in kaart gebrachte jQuery-plugin genaamd
sparklines
om een grafiek met tweettijden te genereren.
Als alles klaar is, ziet onze widget er als volgt uit.
Om dit mogelijk te maken, moeten we wat Javascript schrijven dat het volgende doet:
Als we de code eenmaal hebben, zullen we er uiteindelijk een jQuery-plugin voor maken
gemakkelijk toekomstig gebruik.
Er zijn nogal wat uitgebreide tutorials op het internet met betrekking tot jQuery en AJAX.
Als u echter niet bekend bent met AJAX, is het concept eenvoudig. Javascript wordt geopend
een HTTP-verbinding maken en de resultaten van een URL ophalen. Wanneer het downloaden is voltooid,
een functie kan worden aangeroepen (callback).
Voordat we AJAX kunnen gebruiken, moeten we de API-URL maken die we gaan gebruiken.
Twitter heeft een uitgebreide API die u kunt raadplegen
(Twitter API-documentatie),
maar voor deze widget voeren we alleen een basiszoekopdracht uit.
De basis-URL voor de zoekmethode is:
http://search.twitter.com/search.json
We kunnen de parameters doorgeven net zoals met een normale JavaScript-methode, maar we geven ze door
als query stringwaarden. De parameters waarin we geïnteresseerd zijn, zijn:
Ook, omdat we AJAX gaan gebruiken om te downloaden
gegevens van een ander domein (twitter.com), zullen we JSONP moeten gebruiken, waarmee we de beveiliging kunnen verlaten
bezorgdheid binnen de browser. JQuery zal dit automatisch voor ons afhandelen, we moeten het gewoon doen
voeg "callback = (functienaam)" toe aan onze URL. Omdat we een anonieme functie gebruiken,
deze waarde is "?".
Onze uiteindelijke URL voor de Twitter API
http://search.twitter.com/search.json?callback=?&rpp=50?q=from:twittername
Nu we weten waar we naartoe gaan, kunnen we wat Javascript schrijven
voer het uit. JQuery bevat een methode die de volledige AJAX-oproep voor ons afhandelt,
en analyseer de JSON-resultaten en retourneer objecten. Die methode is $ .getJSON (). Er zijn twee parameters voor nodig, één voor de URL,
en een voor de callback-functie.
De resultaten die terugkomen van Twitter lijken op de volgende structuur.
Accentsconagua
jsonp1241596748896 ("results": ["text": "" Monday Madness "bij 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 May 2009 05:43:39 + 0000 ", ... (meer tweet-objecten hier)]," since_id ": 0," max_id ": 1714318174," refresh_url ":"? Since_id = 1714318174 & q = from% 3Aandstuff "," results_per_page ": 50," total ": 9, "completed_in": 0.100973, "page": 1, "query": "from% 3Aandstuff"); Merk op dat de objecten die de gegevens bevatten die we willen, onderliggende objecten van een kindobject zijn.
Voor onze widget proberen we het verzamelobject 'resultaten' te vinden door er twee te zoeken
dingen: het item met een lengte (het is een array) en het item met kinderen
items met de eigenschap "created_at". Zodra we vinden
Dit bovenliggende item kunnen we doorlopen om onze gegevens te verzamelen.
$ (function () var twitterName = 'nettuts'; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, function (data) $ .each (data, functie (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) // tweets [] is een array van alle tweet-items; ));); Bedenk dat we een widget zullen maken die een grafiek toont van onze tweets per uur.
Om de grafiek te maken, moeten we die gegevens in een array verzamelen. We kunnen dit doen door
de eigenschap "created_at" in een Date () -object veranderen en vervolgens het uur extraheren (0-24).
We houden een array genaamd "usageData" die we zullen vergroten om bij te houden hoeveel tweets per uur.
We zullen een for-lus gebruiken om elk item te doorlopen en eenvoudig toevoegen aan de usageData-array
wanneer dat uur wordt gevonden.
$ (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, function ( data) $ .each (data, functie (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) for (i = 0; i < tweets.length; i++) var usageHour = (new Date(tweets[i].created_at)).getHours(); usageData[usageHour]+=2; ; ) ); ); Dit moet usageData vullen met waarden zoals ...
[0, 0, 6, 8, 10, 6, 4, 12, 12, 10, 8, 0, 2, 4, 2, 0, 8, 10, 0, 0, 4, 2, 0, 0]
Als je de Sparklines-plug-in nog niet hebt gedownload, ga je gang en doe je dat nu, en dan drop je
de verwijzing van het scriptbestand naar uw pagina.
Voordat we de diagramcode bellen, moeten we een containertag maken zodat deze kan voorkomen. Ergens
Voeg op uw pagina een div toe met klasse "twitterUsage". We zullen dit vanuit jQuery in de code openen naar
maak onze grafiek.
Sparklines is heel eenvoudig te gebruiken. We moeten gewoon de methode sparkline () van welke dan ook noemen
jQuery wrapped set om een nieuw diagram in dat element te maken. Nadat we onze grafiek hebben gemaakt,
we voegen een korte samenvatting toe die beschrijft wat de diagramgegevens representeren (tweets per uur).
Ons hele hoofdgedeelte zou er nu zo uit moeten zien.
Voer de code uit en u zou iets moeten krijgen dat op het volgende lijkt.
Voor deze widget zou ik graag zien dat de grafiek het Twitter-logo overlapt,
dus ik zal dat instellen als de achtergrondafbeelding op de div. Ik zal ook een beetje gooien
lettertype en kleurstyling op de beschrijvingstekst ook. (Opmerking: het twitter-logo
achtergrondbestand is beschikbaar in de bronbestanden. Het is 120px breed als je dat liever hebt
om het zelf te maken.)
.twitterUsage width: 120px; hoogte: 40px; padding-top: 15px; achtergrond: transparante URL ('twitter-logo-bg.gif') no-repeat midden boven; .twitterUsage span display: block; kleur: # 0482AD; lettergrootte: 9 px; text-align: center; lettertype-familie: Sans-Serif; Ten slotte kunnen we de methode sparklines () aanpassen om een aantal stijlopties in te voegen:
$ (". twitterUsage"). sparkline (usageData, type: 'bar', barColor: '# 4D4D4D', // Donkergrijze hoogte: 25); 
Het laatste wat we moeten doen, is onze werkende widget omzetten in een plug-in.
Omdat onze widget niet te complex is, zal dit net zo eenvoudig zijn als het kopiëren van onze code
naar een extern bestand, $ definiëren als jQuery en onze code een uitbreidingsmethode toevoegen
naar het jQuery-object. (Let ook op de kleine wijziging in .insertAfter)
Maak een nieuw javascript-bestand met de naam "jquery.twittergraph.js".
Plak het volgende in het bestand (of typ de wijzigingen zelf in als je dat liever hebt).
(functie ($) $ .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, functie (data) $ .each (data, functie (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) for (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 per uur) .InsertAfter (element.find ( "canvas")); ); ; ) (JQuery); We kunnen onze widget nu bellen met:
$ .twitterGraph ('nettuts', $ (". twitterUsage")); De volledige code voor onze HTML-pagina is als volgt.
TwitterGraph
