Do not speak Spanish? Read this post in English.

Miércoles, 03 d noviembre d 2010.

Tutorial de YQL con Jquery

Hace ya mucho tiempo que me debía una revisión de la gran API de YQL, un sistema amigable montado por yahoo y destinado a rescatar mediante peticiones muy parecidas a las queries de cualquier sistema SQL muchas de las informaciones más comunes que solemos necesitar en nuestros desarrollos web actuales: Rss, Twiiter, Facebook, Flickr, Búsquedas, etc...

Después de probarlo puedo decir que se trata de una API muy cómoda y versatil, que aglutina y simplifca multitud de servicios web. Además dispone de un gran añadido que hará las delicias de cualquier amante de javascript: devuelve las peticiones tanto en XML como en jsonp. Recordemos que este último nos permite hacer el famoso ajax crossdomain y por lo tanto nos va a permitir mostrar en nuestras web todos estos datos solo usando javascript.

YQL puede llamarse desde cualquier lenguaje servidor e incluso el propio yahoo nos informa de como hacer llamadas a YQL mediante CURL en PHP, pero en esta primera aproximación trabajaremos exclusivamente con javascript bajo el framework jquery.

La llamada pública a YQL

YQL tiene dos entornos en los que usarase: público y privado -dentro del privado hay varios niveles pero de momento nos vale así-. Cuando usamos llamadas públicas no necesitamos identificarnos y las llamadas son tan simples como cargar una url con variables informadas. Sin embargo de esta forma no podemos acceder a datos privados de los distintos servicios, por lo tanto estamos limitados mucho más en cantidad de opciones. De momento trabajaremos solo con esto, pero si queremos sacarle partido de verdad a la API de YQL deberemos echarle algún día un vistazo a como identificarnos en los servicios.

La llamada a YQL pública se forma de esta manera:

Para llamadas XML:

http://query.yahooapis.com/v1/public/yql?q=[[Query Buscada]]&format=xml&env=http%3A%2F%2Fdatatables.org%2Falltables.env

Para llamadas jsonp:

http://query.yahooapis.com/v1/public/yql?q=[[Query Buscada]]&format=json&callback=[[Funcion de Callback del json]]&env=http%3A%2F%2Fdatatables.org%2Falltables.env

Esto significa que en Jquery podemos hacer llamadas a YQL con un código como el que sigue:

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=[[Query Buscada]]&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(jsonData){
  //Acciones con el objeto jsonData que contendrá los datos solicitados
})

Sencillo, ¿no? Solo nos quedará entonces aprender a hacer las queries y sabertodo lo que podemos llegar a sacar con esta API.

Las Queries de YQL

Las Queries de YQL son realmente muy parecidas a las de SQL. Como estamos trabajando con la forma pública tan solo tenemos que preocuparnos de los selects (no vamos a conseguir hacer Inserts, Updates o Deletes por esta vía). Así que nada tan simple como sentencias de este tipo:

SELECT * FROM [[Nombre Tabla]] WHERE [[Campo]] = '[[Valor]]'

Así que tan solo nos falta conocer las distintas tablas que existen en este sistema y por que campos podemos igualar el WHERE de la Query.

Yahoo ha habilitado el dominio datatables.org donde se tratan las distintas tablas existentes al tiempo que se aporta un sistema con el que la comunidad puede ir creando las suyas. Así que no hay un número de tablas fijas, estas son cada vez más a medida que los distintos sistemas van entrando en datatables.

También han habilitado una consola para desarrolladores de YQL en la que podemos ir lanzando directamente ahí nuestras queries hasta que encontremos lo que deseemos.

Al entrar la consola se abre directamente con la orden "show tables" que nos permitirá ver todas las tablas públicas actualmente. Son realmente muchísimas. Algunas son bastante inútiles pero al mirarlas enseguida empezaremos a encontrar cosas conocidas como: Flickr, Facebook, Foursquare, Twitter, Friendfeed, thumblr, Imdb, LastFM, Seomoz, Slideshare, Vimeo, Youtube, etc. Además, sorprendentemente, también encontramos como tabla servicios del propio Google como Search, Picasa, Analytics, Stock, Translate, Reader, Etc. y Otro tanto con los servicios de Microsoft, incluido Bing.

Todos estos servicios pueden accederse con YQL -y si trabajasemos identificados con muchos se puede también interactuar-, ¿no es impresionante?

Ahora solo tenemos que escoger el servicio que más nos guste y lanzar queries hasta encontrar la información que busquemos. Para saber con que campos jugar para hacer la query podes lanzar la orden "desc [[Nombre de tabla]]" para ver todos sus campos o usar el bloque de la esquina inferior derecha de la consola, buscar nuestra tabla y clickar en "desc".

Seguidamente incluyo algunas de las queries más interesantes que he encontrado en un primer recorrido rápido. Eres libre de incluir las tuyas en los comentarios.



Para disponer del RSS de este blog:

SELECT * 
FROM rss 
WHERE url = 'http://feeds2.feedburner.com/ikhuerta'

Lo que en jquery nos quedaría:

$(".yql-feed").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM rss WHERE url = 'http://feeds2.feedburner.com/ikhuerta'&format=json&callback=?",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li><a href='" + data.query.results.item[0].link + "'>" + data.query.results.item[0].title + "</a></li>";
	html += "<li><a href='" + data.query.results.item[1].link + "'>" + data.query.results.item[1].title + "</a></li>";
	html += "<li><a href='" + data.query.results.item[2].link + "'>" + data.query.results.item[2].title + "</a></li>";
	html += "</div>"
	$(html).dialog({title : "Rss de ikhuerta"});
  }); 
  return false
});

Ejecutar este código

Para hacer una búsqueda en Google:

SELECT *
FROM google.search 
WHERE 
q = "ikhuerta" 
and hl = "es" 
and gl = "es"

En Jquery:

$(".yql-googlesearch").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM google.search WHERE q = 'ikhuerta' AND hl = 'es' AND gl = 'es'&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li><a href='" + data.query.results.results[0].url + "'>" + data.query.results.results[0].title + "</a></li>";
	html += "<li><a href='" + data.query.results.results[1].url + "'>" + data.query.results.results[1].title + "</a></li>";
	html += "<li><a href='" + data.query.results.results[2].url + "'>" + data.query.results.results[2].title + "</a></li>";
	html += "</div>"
	$(html).dialog({title : "Buscando 'ikhuerta' en Google"});
  }); 
  return false
});

Ejecutar este código

Traducir un texto de español a inglés:

SELECT * 
FROM google.translate
WHERE q="YQL no está mal"
AND source="es"
AND target="en"

En Jquery:

$(".yql-googletranslate").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM google.translate WHERE q='YQL no está mal'AND source='es' AND target='en'&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li>" + data.query.results.translatedText + "</li>";
	html += "</div>"
	$(html).dialog({title : "Traduciendo de español a inglés"});
  }); 
  return false
});

Ejecutar este código

Buscando pisos en venta en Barcelona por menos de 250.000€

SELECT * 
FROM nestoria.search
WHERE country = 'es'
AND place_name="Barcelona" 
AND price_max = '250000'

En Jquery:

$(".yql-nestoria").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM nestoria.search WHERE country = 'es' AND place_name='Barcelona' AND price_max = '250000'&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li><a href='" + data.query.results.listings[0].lister_url + "'><img src='" + data.query.results.listings[0].thumb_url + "'/> " + data.query.results.listings[0].title + "</a></li>";
	html += "<li><a href='" + data.query.results.listings[1].lister_url + "'><img src='" + data.query.results.listings[1].thumb_url + "'/> " + data.query.results.listings[1].title + "</a></li>";
	html += "<li><a href='" + data.query.results.listings[2].lister_url + "'><img src='" + data.query.results.listings[2].thumb_url + "'/> " + data.query.results.listings[2].title + "</a></li>";
	html += "</div>"
	$(html).dialog({title : "Resultados Nestoria"});
  }); 
  return false
});

Ejecutar este código

Recoger el timeline de un usuario de twitter:

SELECT *
FROM twitter.user.timeline
WHERE screen_name='@ikhuerta'

En Jquery

$(".yql-twitter").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM twitter.user.timeline WHERE screen_name='@ikhuerta'&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li><strong>ikhuerta:</strong> " + data.query.results.statuses.status[0].text + "</li>";
	html += "<li><strong>ikhuerta:</strong> " + data.query.results.statuses.status[1].text + "</li>";
	html += "<li><strong>ikhuerta:</strong> " + data.query.results.statuses.status[2].text + "</li>";
	html += "</div>"
	$(html).dialog({title : "Twitter @ikhuerta"});
  }); 
  return false
});

Buscar el vídeo del kakapo en youtube:

SELECT *
FROM youtube.search
WHERE query='kakapo'

En Jquery:

$(".yql-youtube").click(function(){
  $.getJSON("http://query.yahooapis.com/v1/public/yql?q=SELECT * FROM youtube.search WHERE query='kakapo'&format=json&callback=?&env=http%3A%2F%2Fdatatables.org%2Falltables.env",function(data){
	var html = "<div><ul class='dialog-list'>";
	html += "<li><a href='" + data.query.results.video[0].url + "'><img src='" + data.query.results.video[0].thumbnails.thumbnail[0].content + "' /> " + data.query.results.video[0].title + "</a></li>";
	html += "<li><a href='" + data.query.results.video[1].url + "'><img src='" + data.query.results.video[1].thumbnails.thumbnail[0].content + "' /> " + data.query.results.video[1].title + "</a></li>";
	html += "<li><a href='" + data.query.results.video[2].url + "'><img src='" + data.query.results.video[2].thumbnails.thumbnail[0].content + "' /> " + data.query.results.video[2].title + "</a></li>";
	html += "</div>"
	$(html).dialog({title : "Búsqueda en Youtube"});
  }); 
  return false
});

Ejecutar este código

Y bueno, creo que ya son suficientes ejemplos, ¿no? Simplemente terminar indicando el código jquery completo que se ha usado para hacer este post. Notese que para mostrar las ventanas de dialogo hay que incluir también jquery UI. Mira el código jquery para usar YQL en este link.

Temas Relacionados: jquery programacion tutoriales

Autor:

4 Comentarios para “Tutorial de YQL con Jquery”

  1. manelgarcia dice:

    esto es buenissimo!

    que buena pinta tiene! hay que probarlo

    muchas gracias!

  2. Simon dice:

    Hola que tal, disculpa he visto tu tutorial de yql, pero me he kedado con una duda, como le podria hacer para saber las tablas de una pagina cualquiera???, ya que he visto muchos manuales y solo ponen de ejemplo tablas que ya estan predefinidas. gracias de antemano

  3. ikhuerta dice:

    Buenas SImon,

    Para poder definir nuevas tablas tienes que mirar la doc de datatables.org no es un tema sencillo, tendrás que dedicarle algo de tiempo.

    Un saludo.

  4. Luis dice:

    Hola Iñaki, muy bueno el tutorial. La verdad que YQL es un gran desconocido a pesar de lo buenísimo que es. Y Yahoo Pipes también está muy chulo. No sé por qué está tan infravalorado, quizá por la decadencia de Yahoo.

    En fin, gracias por compartir estos ejemplos, es una muy buena introducción a esta potente herramienta/librería.

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title