Extraer datos de una web (Scrapping) y procesarlos con Javascript para incluirlos en una app móvil

Desde hace algún tiempo si hay algo que me llama poderosamente la atención es el manejo de datos y todo el potencial del Open Data. Durante el desarrollo del proyecto Manifestando me vi obligado a extraer datos, manipularlos y posteriormente procesarlos con javascript para mostrarlos de forma ordenada y, visualmente, atractiva. Parece que no hay muchos tutoriales en castellano que expliquen con detalle este proceso así que en este post resumiré los pasos esenciales. Es un proceso bastante largo aunque no muy complicado,  que se divide en los siguientes pasos:

  1. Extracción de datos: En este caso usaremos a función ImportHTML de Google Spreadsheet para obtener un archivo CSV con los datos que necesitamos
  2. Manipulación de los datos: para ello emplearemos Yahoo! Pipes y obtendremos un objeto Json
  3. Procesamiento y visualización de los datos. Lo que estamos desarrollando es una app móvil para Android que utiliza las tecnologías Jquery Mobile y Phonegap. De esta forma tenemos que usar HTML5, CSS3 y Javascript  para mostrar los datos.

Básicamente, en este ejemplo, extraeremos la lista de las cotizaciones de las empresas del IBEX35, crearemos un objeto Jsonp y mostraremos los datos en nuestra app para Android de forma que se actualizaran de forma dinámica.

 

Extracción de datos, la magia de importHTML en Google Spreadsheet

Por si alguien no lo conoce Google Spreadsheet es el servicio de hojas de calculo de Google Drive (el “excel de Google” por decirlo así). Este servicio dispone de una lista de funciones propias que permiten llevar a cabo  múltiples procesos con facilidad.

En este caso usaremos la función importHTML. Su sintaxis es simple:

importhtml(url; query; index)

En donde:

  • url es la dirección web desde la cual queremos extraer los datos. En nuestro caso:

http://www.bolsamania.com/bolsa-cotizaciones/acciones/espana–ibex35.html

  • query es el tipo de estructura que contiene los datos deseados. Puede ser una tabla HTML (table) o un listado (list)
  • index es el indice que identifica la tabla o lista dentro del html de la web, es decir 1 corresponde con la primera tabla o lista, dos con la segunda, etc

Tras esta breve explicación veamos como se utiliza la función. Vamos a nuestro Google Drive, creamos un archivo de hoja de calculo y ponemos la función junto con sus parámetros dentro de una de las celdas. Así:

imporhtml google

 

En segundos, y como por arte de magia, veremos como los datos de la web aparecen.

En nuestro ejemplo para tener los datos de las cotizaciones de las empresas del IBEX35 escribiríamos en una celda el siguiente código:

=importHTML(“http://www.europapress.es/valor.aspx?v=0000000006”; table; 1)

[nota] Nota: Ten en cuenta que, usando este método, puedes extraer los datos de cualquier tabla o lista de cualquier página web. Las posibilidades son infinitas.[/nota]

Ahora solo nos quedaría publicar esta hoja de cálculo en la web en un formato óptimo para su posterior lectura. Para ello pinchamos en Archivo/Publicar en la Web. En la ventana que se nos abre seleccionamos las opciones que deseamos. En este caso:

– Hojas para publicar: Hoja 1

– Clicamos en Iniciar publicación

– Como formato seleccionamos CSV (valores separados por coma)

– Copiamos el enlace que nos muestra y cerramos

https://docs.google.com/spreadsheet/pub?key=0AiePLXXXsw4odEdjczE1eTctRnZ1Y19sYU5yNXFlT1E&single=true&gid=0&output=csv

 

Si también nos interesa mostrar la tabla con los datos podemos utilizar jQuery Sheetrock.

 

Manipulación de los datos: las enormes posibilidades de Yahoo! Pipes

En este caso nuestro proyecto utiliza Javascript como único lenguaje de programación ya que nuestra app no correrá bajo un servidor. La forma más sencilla de procesar esa web en formato CSV es convertirla en un objeto Json. Para ellos usaremos Pipes. Este servicio de Yahoo nos permite crear canales de información o datos a partir de una o varias fuentes de información diferentes. Durante el proceso podemos filtrar esos datos, ordenarlos o incluso modificarlos. Las posibilidades que ofrece son inmensas. Explicarlas seria objeto de un post o quizá de un blog entero.

En este caso, simplemente renombraremos las columnas para evitar tener problemas en el Javascript con los caracteres especiales.

[nota]Nota: Es simplemente una aproximación a la aplicación. En futuros post hablaremos de Yahoo! Pipes de forma más extensa.[/nota]

Veamos como.

  1. Entramos en Yahoo! Pipes (es necesario tener una cuenta en Yahoo)
  2. Pinchamos en Create Pipe
  3. Ahí podremos ver el interfaz de la aplicación. Partimos de una web en formato CSV así que pincharemos en el modulo Fech CSV y lo arrastraremos al escritorio de la aplicación.
  4.  En URL pegaremos el enlace del documento de Google Spreadsheet y en Use the following column names escribiremos los nombres de las columnas.
  5. Uniremos el módulo Fech CSV con Pipes Output. Podemos comprobar que en el Debugger los datos se muestran como deseamos.
  6. Pinchamos en Save para guardarlo y en Run pipe para ver el resultado.
  7. Finalmente debemos convertirlo en un objeto Json  pinchando en el botón Get as Json obtiendo una página similar a esta:

http://pipes.yahoo.com/pipes/pipe.run?_id=bfa9f50cca9c1b97be417e20d5a8ecbd&_render=json

 Debería de quedar asíyahoo pipes

 

 

Procesamiento y visualización de los datos: el poderoso javascript

La idea original de este proyecto era crear una app móvil para Android que mostrará las cotizaciones del Ibex35 en tiempo casi real. Para ellos utilizamos Jquery Mobile con HTML5, CSS3, y Javascript todo compilado con Phonegap. En próximas entradas hablaremos de todas estas tecnologías. En esta ocasión, simplemente, veremos el código Javascript necesario para mostrar los datos de la tabla de cotizaciones que extrajimos de la web bolsamanía.com.

			$(document).ready(function() {
				$.ajax({
						url: "http://pipes.yahoo.com/pipes/pipe.run?_id=bfa9f50cca9c1b97be417e20d5a8ecbd&_render=json&_callback=?",
						contentType: "application/json; charset=utf-8",
						dataType: "jsonp",
						success: function(data) {
						$(data.value.items).each(
							function(){
							console.log(data.value.items);
								nombre = $(this)[0].nombre;
								cambio = $(this)[0].cambio;		
								variacionporc = $(this)[0].variacionporc;	
								variacion = $(this)[0].variacion;
								max = $(this)[0].max;
								min = $(this)[0].min;	
								volumen = $(this)[0].volumen;	
								hora = $(this)[0].hora;	

								var html ='<div class="ficha"><h2 class="titulo">' + nombre + '</h2>';
								 html += '<p><strong> Precio:</strong> ' + cambio +'</p>'; 
								 html += '<p><strong> Variación en porcentaje:</strong> ' + variacionporc +'</p>';
								 html += '<p><strong> Variación:</strong> ' + variacion +'</p>'; 
								 html += '<p><strong> Máximo:</strong> ' + max +'</p>';
								 html += '<p><strong> Mínimo:</strong> ' + min +'</p>'; 
								 html += '<p><strong> Volumen:</strong> ' + volumen +'</p>'; 
								 html += '<p><strong> Hora:</strong> ' + hora +'</p>'; 
								 html += '</div>';

								  $('#listado').append(html);
							}
						 );
					},
					error: function() { console.log('Uh Oh!'); }
				});
			});

Daremos unas breves explicaciones sobre estas líneas

  • Como hemos dicho usaremos Jquery mobile para la app de forma que deberemos incluir la librería de Jquery y , por tanto, podemos usar sus funciones y métodos sin problema. En concreto usaremos la función jquery.ajax o $.ajax para recuperar la estructura de datos del objeto JSON y tratarla como una array de datos normal.
  • Como url ponemos la generada por nuestro Pipe de Yahoo! pipes en formato Json con una salvedad importante. Es necesario añadir a la url el callback para que trate el objeto como un Jsonp. Si no lo hacemos de esta forma nos dará el típico error Cross Origin. Para ello añadimos al final de la url lo siguiente:

&_callback=?

  • Con $(data.value.items).each recorremos el objeto y, posteriormente, creamos las variables de cada uno de los campos
  • Finalmente creamos una variable html que contenga el html y las variables que nos interesan y lo añadimos (append) al elemento html cuyo id sea “listado”

Solo faltaría crear el archivo html que incluya todo lo necesario para mostrar los datos.

Para crear la app móvil tendríamos que compilar los archivos HTML, CSS y Javacript mediante Phonegap y así generar el apk. Todo eso lo veremos en una próxima entrada.