Share
Dans ce didacticiel, nous allons utiliser jQuery pour appeler l'API de Twitter, puis utiliser les résultats pour créer un widget pour un blog ou un site Web personnel, indiquant le nombre d'heures pendant lesquelles nous tweetons au maximum..
L'API Twitter est basée sur HTTP et peut renvoyer des résultats au format XML ou JSON. Comme jQuery a un JSON
analyseur intégré, et a tendance à être plus léger que XML, nous allons utiliser cette.
Comme notre widget devra afficher l’utilisation horaire, nous utiliserons un plugin de cartographie jQuery appelé
Sparklines
générer un graphique des heures de tweet.
Quand tout est fini, notre widget devrait ressembler à ceci.
Pour que cela se produise, nous devrons écrire du code Javascript qui effectue les opérations suivantes:
Enfin, une fois que le code fonctionnera, nous le transformerons en un plugin jQuery pour
utilisation future facile.
Il existe de nombreux tutoriels sur Internet concernant jQuery et AJAX..
Si vous n'êtes pas familier avec AJAX, le concept est simple. Javascript va s'ouvrir
une connexion HTTP et récupérez les résultats d'une URL. Lorsque le téléchargement est terminé,
une fonction peut être appelée (rappel).
Avant de pouvoir utiliser AJAX, nous devons construire l'URL de l'API que nous appellerons..
Twitter a une API étendue que vous pouvez référencer
(Documentation API Twitter),
mais pour ce widget, nous ne ferons qu'une recherche de base.
L'URL de base de la méthode de recherche est la suivante:
http://search.twitter.com/search.json
Nous pouvons transmettre les paramètres de la même manière qu’une méthode JavaScript classique, mais nous les transmettons.
en tant que valeurs de chaîne de requête. Les paramètres qui nous intéressent sont:
En outre, puisque nous allons utiliser AJAX pour télécharger
données d'un autre domaine (twitter.com), nous aurons besoin d'utiliser JSONP, ce qui nous permet de renoncer à la sécurité
préoccupations dans le navigateur. JQuery gérera automatiquement cela pour nous, nous avons juste besoin de
attachez "callback = (nom de la fonction)" à notre URL. Puisque nous utiliserons une fonction anonyme,
cette valeur sera "?".
Notre dernière URL pour l'API Twitter
http://search.twitter.com/search.json?callback=?&rpp=50?q=from:twittername
Maintenant que nous savons où nous allons appeler, nous pouvons écrire du code Javascript pour réellement
effectuez-le. JQuery inclut une méthode qui gérera l'intégralité de l'appel AJAX.,
et analyser les résultats JSON en renvoyant des objets. Cette méthode est $ .getJSON (). Il faut deux paramètres, un pour l'URL,
et un pour la fonction de rappel.
Les résultats provenant de Twitter ressemblent à la structure suivante.
Accentsconagua
jsonp1241596748896 ("results": ["text": "" Monday Madness "chez papajohn's - pizza à 6 $", "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 ":" mar, 05 mai 2009 05:43:39 + 0000 ",… (plus d'objets tweet ici)]," Since_id ": 0," max_id ": 1714318174," refresh_url ":"? Since_id = 1714318174 & q = depuis% 3Aandstuff "," results_per_page ": 50," total ": 9, "completed_in": 0.100973, "page": 1, "query": "à partir de% 3Aandstuff"); Notez que les objets contenant les données souhaitées sont des objets enfants d'un objet enfant..
Pour notre widget, nous allons essayer de trouver l'objet de collection "results" en recherchant deux
choses: l'élément qui a une longueur (c'est un tableau) et l'élément qui a des enfants
les éléments qui ont la propriété "created_at". Une fois que nous trouvons
cet élément parent, nous pouvons le parcourir pour assembler nos données.
$ (function () var twitterName = 'nettuts'; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, fonction (données) $ .each (données, fonction (i, tweets) if (tweets.length! = indéfini) if (tweets [0] .created_at! = indéfini) // tweets [] est un tableau de tous les éléments tweet; ));); Rappelons que nous allons créer un widget qui affiche un graphique de nos tweets horaires.
Afin de créer le graphique, nous devrons assembler ces données dans un tableau. Nous pouvons le faire en
transformer la propriété "created_at" en un objet Date () puis extraire l'heure (0-24).
Nous allons garder un tableau appelé "usageData" que nous allons incrémenter pour garder une trace du nombre de tweets par heure.
Nous utiliserons une boucle for pour parcourir chaque élément et ajouterons simplement le tableau usageData
quand cette heure est trouvée.
$ (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]; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, function ( données) $ .each (données, fonction (i, tweets)) if (tweets.length! = indéfini) if (tweets [0] .created_at! = indéfini) pour (i = 0; i < tweets.length; i++) var usageHour = (new Date(tweets[i].created_at)).getHours(); usageData[usageHour]+=2; ; ) ); ); Cela devrait remplir usageData avec des valeurs telles que…
[0, 0, 6, 8, 10, 6, 4, 12, 12, 10, 8, 0, 2, 4, 2, 0, 8, 10, 0, 0, 4, 2, 0, 0]
Si vous n'avez pas encore téléchargé le plugin Sparklines, allez-y maintenant, puis déposez
la référence du fichier de script sur votre page.
Avant d'appeler le code de graphique, nous devons créer une balise de conteneur pour qu'il puisse exister.
sur votre page, ajoutez un div avec la classe «twitterUsage». Nous y accéderons à partir de jQuery dans le code
créer notre tableau.
Sparklines est très simple à utiliser. Nous avons simplement besoin d’appeler la méthode sparkline () de
jQuery wrapped set pour créer un nouveau graphique à l'intérieur de cet élément. Après avoir créé notre tableau,
nous ajouterons une courte ligne de résumé décrivant ce que les données du graphique représentent (tweets par heure).
Toute notre section de tête devrait maintenant ressembler à ceci.
Exécutez le code et vous devriez obtenir quelque chose qui ressemble à ce qui suit.
Pour ce widget, j'aimerais voir le graphique recouvrant le logo Twitter,
donc je vais définir cela comme image de fond sur la div. Je vais aussi jeter un peu de
police et couleur sur le texte de description. (Remarque: le logo Twitter
Le fichier d'arrière-plan est disponible dans les fichiers source. C'est 120px large si vous préférez
pour le créer vous-même.)
.twitterUsage width: 120px; hauteur: 40px; rembourrage en haut: 15px; fond: url transparent ('twitter-logo-bg.gif') no-repeat en haut au centre; .twitterUsage span display: block; couleur: # 0482AD; taille de police: 9px; text-align: center; font-family: Sans-Serif; Enfin, nous pouvons ajuster la méthode sparklines () pour inclure certaines options de style:
$ (". twitterUsage"). sparkline (usageData, type: 'bar', barColor: '# 4D4D4D', // hauteur gris foncé: 25); 
La dernière chose à faire est de convertir notre widget de travail en plugin..
Parce que notre widget n'est pas trop complexe, ce sera aussi simple que de copier notre code
dans un fichier externe, en définissant $ comme jQuery et en ajoutant à notre code une méthode d'extension
à l'objet jQuery. (Notez également le léger changement en .insertAfter)
Créez un nouveau fichier javascript appelé "jquery.twittergraph.js".
Collez le texte suivant dans le fichier (ou tapez vous-même les modifications si vous préférez).
(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]; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, fonction (données) $ .each (données, fonction (i, tweets)) if (tweets.length! = indéfini) if (tweets [0] .created_at! = indéfini) pour (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 par heure') .insertAfter (element.find ("canvas")); ); ; ) (jQuery); Nous pouvons maintenant appeler notre widget avec:
$ .twitterGraph ('nettuts', $ (". twitterUsage")); Le code complet de notre page HTML est le suivant.
TwitterGraph
