Share
En este tutorial, analizaremos el uso de jQuery para llamar a la API de Twitter y luego usaremos los resultados para crear un widget para un blog o sitio web personal que muestre qué horas durante el día más twitteamos..
La API de Twitter está basada en HTTP y puede devolver resultados como XML o JSON. Como jQuery tiene un JSON
analizador incorporado, y tiende a ser más liviano que XML, lo usaremos.
Dado que nuestro widget deberá mostrar el uso por hora visualmente, usaremos un complemento de jQuery de creación de gráficos llamado
Sparklines
Para generar un gráfico de horas de tweeting..
Cuando todo esté hecho, nuestro widget debería verse así..
Para que esto suceda, tendremos que escribir un Javascript que realice lo siguiente:
Por último, una vez que tengamos el código en funcionamiento, lo convertiremos en un complemento de jQuery para
uso futuro fácil.
Hay bastantes tutoriales extensos en Internet sobre jQuery y AJAX..
Sin embargo, si no está familiarizado con AJAX, el concepto es simple. Javascript se abrirá
una conexión HTTP y obtenga los resultados de una URL. Cuando se complete la descarga,
una función puede ser llamada (callback).
Antes de que podamos usar AJAX, necesitamos construir la URL de la API a la que llamaremos.
Twitter tiene una API extensa que puedes consultar
(Documentación API de Twitter),
pero para este widget, solo estaremos realizando una búsqueda básica..
La URL base para el método de búsqueda es:
http://search.twitter.com/search.json
Podemos pasar los parámetros como lo haríamos con un método JavaScript normal, pero los pasamos
como valores de cadena de consulta. Los parámetros que nos interesan son:
Además, ya que vamos a utilizar AJAX para descargar
datos de otro dominio (twitter.com), necesitaremos usar JSONP que nos permite renunciar a la seguridad
Preocupaciones dentro del navegador. JQuery manejará esto automáticamente por nosotros, solo necesitamos
adjuntar "callback = (nombre de la función)" a nuestra URL. Ya que estaremos usando una función anónima,
este valor será "?".
Nuestra URL final para la API de Twitter
http://search.twitter.com/search.json?callback=?&rpp=50?q=from:twittername
Ahora que sabemos dónde vamos a hacer la llamada, podemos escribir algo de Javascript para realmente
ejecutalo JQuery incluye un método que manejará toda la llamada AJAX para nosotros,
y analizar los resultados de JSON, devolviendo objetos. Ese método es $ .getJSON (). Se necesitan dos parámetros, uno para la URL,
y uno para la función de devolución de llamada.
Los resultados que vienen de Twitter se parecen a la siguiente estructura.
Accentsconagua
jsonp1241596748896 ("results": ["text": "" Monday Madness "en 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 ", ... (más objetos tweet aquí)]," 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"); Observe que los objetos que contienen los datos que queremos son objetos secundarios de un objeto secundario.
Para nuestro widget intentaremos encontrar el objeto de colección "resultados" buscando dos
cosas: el elemento que tiene una longitud (es una matriz) y el elemento que tiene hijos
Elementos que tienen la propiedad "created_at". Una vez que encontremos
Este elemento principal, podemos recorrerlo para reunir nuestros datos..
$ (function () var twitterName = 'nettuts'; $ .getJSON ('http://search.twitter.com/search.json?callback=?&rpp=50&q=from:' + twitterName, function (data) $ .each (datos, función (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) // tweets [] es una matriz de todos los elementos del tweet; ));); Recuerde que vamos a crear un widget que muestra un gráfico de nuestros tweets por hora.
Para crear el gráfico, necesitaremos ensamblar esos datos en una matriz. Podemos hacer esto por
convirtiendo la propiedad "created_at" en un objeto Date () y extrayendo la hora (0-24).
Mantendremos una matriz llamada "useData" que iremos incrementando para hacer un seguimiento de cuántos tweets por hora.
Usaremos un bucle for para recorrer cada elemento, y simplemente agregaremos a la matriz de datos de uso
cuando se encuentra esa hora.
$ (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, function (i, tweets) if (tweets.length! = undefined) if (tweets [0] .created_at! = undefined) para (i = 0; i < tweets.length; i++) var usageHour = (new Date(tweets[i].created_at)).getHours(); usageData[usageHour]+=2; ; ) ); ); Esto debería llenar useData con valores como ...
[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 aún no ha descargado el complemento Sparklines, continúe y haga eso ahora, y luego suelte
la referencia del archivo de script en su página.
Antes de llamar al código del gráfico, debemos crear una etiqueta de contenedor para que exista. En algún lugar
en su página, agregue un div con la clase "twitterUsage". Accederemos a esto desde jQuery en el código para
crea nuestra carta.
Sparklines es muy simple de usar. Simplemente necesitamos desactivar el método sparkline () de cualquier
jQuery envolvió el conjunto para crear un nuevo gráfico dentro de ese elemento. Después de que hemos creado nuestro gráfico,
agregaremos una breve línea de resumen que describe lo que representan los datos del cuadro (tweets por hora).
Toda nuestra sección de cabeza ahora debería verse así.
Ejecuta el código y obtendrás algo que se parece a lo siguiente.
Para este widget, me gustaría ver el gráfico sobre el logo de Twitter,
así que lo estableceré como la imagen de fondo en el div. También voy a lanzar un poco de
Fuente y estilo de color en el texto de la descripción también. (Nota: el logo de twitter
archivo de fondo está disponible en los archivos de origen. Es de 120px de ancho si lo prefieres
para crearlo usted mismo.)
.twitterUsage width: 120px; altura: 40px; acolchado superior: 15px; fondo: url transparente ('twitter-logo-bg.gif') no-repetir centro superior; .twitterUsage span display: block; color: # 0482AD; tamaño de fuente: 9px; text-align: center; Familia tipográfica: Sans-Serif; Por último, podemos ajustar el método de sparklines () para incluir algunas opciones de estilo:
$ (". twitterUsage"). sparkline (usageData, type: 'bar', barColor: '# 4D4D4D', // Dark grey height: 25); 
Lo último que debemos hacer es convertir nuestro widget de trabajo en un complemento.
Debido a que nuestro widget no es demasiado complejo, esto será tan simple como copiar nuestro código
a un archivo externo, definiendo $ como jQuery y agregando nuestro código como método de extensión
al objeto jQuery. (Nótese también el ligero cambio a .insertAfter)
Crea un nuevo archivo javascript llamado "jquery.twittergraph.js".
Pegue lo siguiente en el archivo (o escriba los cambios si lo prefiere).
(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:' + Nombre de Twitter, función (datos) $ .each (datos, función (i, tweets) si (tweets.length! = indefinido) if (tweets [0] .created_at! = undefined) para (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 por hora') .insertAfter (element.find ("canvas")); ); ; ) (jQuery); Ahora podemos llamar a nuestro widget con:
$ .twitterGraph ('nettuts', $ (". twitterUsage")); El código completo para nuestra página HTML es el siguiente.
TwitterGraph
