Skip to content

Como hacer un mashup y no morir en el intento…

Antes de ir al Google Developer Day quería jugar con la API de Google Maps para ver si era complicada de usar y ver cómo de dificil me iba a resultar el taller al que iba a asistir. Es por eso que decidí hacer un pequeño mashup que mostrase sobre un mapa de la peninsula ibérica el estado de los embalses españoles.

Lo primero que se necesita para hacer un mashup es una o varias fuentes de datos. Cada vez es más común disponer de esos datos en formatos sindicados (RSS, Atom) o incluso mediante APIs que exponen los datos en formato XML o JSON. Sin embargo, yo no encontré ningún sitio que me proporcionase esta información en un feed, así que tuve que crearmelo :)

Creación de feeds a partir de webs

Siempre queda la posibilidad de programarse en algún lenguaje un web scrapper que extraiga la información que queramos y nos la devuelva como un feed. Por suerte, existe una forma más sencilla, gráfica y alojada por terceros que nos permite hacer precisamente esto. Como no tenía ganas de ponerme a programar y quería ver cómo de complicado era de usar la solución gráfica, me decanté por usar Openkapow para crear mi feed. En un par de minutos tenía mi feed creado a partir de los datos de una página que agrega los datos de la página del Ministerio de Medio Ambiente.

Para crearlo, es necesario emplear la herramienta que se descarga de la página de openkapow. La única pega es que solo existen versiones para Windows y Linux. Podeis ver el robot que he creado descargandolo de la página de openkapow.

Una vez publicado, ya está listo para utilizarse. Le he puesto una frecuencia de actualización de 1 día para no generar tráfico inecesario al servidor del que extraigo los datos. Además, para que el feed no se cargue directamente de la página de openkapow (he tenido problemas de continuidad de servicio), utilizo FeedBurner como cache del feed.

Manipulación del feed y extracción de datos relevantes

Puesto que el feed contiene mucha información que no estoy interesado en mostrar en el mapa en una primera instancia (p.ej: datos globales y datos de cada cuenca), necesito manipular los datos del feed antes de usarlos en el mapa. Para ello utilizo otra herramienta online llamada Yahoo! Pipes que permite manipular diferentes fuentes de datos y sacar un feed en RSS, un objeto JSON, XML…

Podeis ver el pipe que me he creado. Lo bueno que tiene esta herramienta es que permite ver cómo se ha creado cada pipe, y aprender de una forma muy rápida cómo hacer cosas útiles.

A grandes rasgos el pipe lo que hace es filtrar los items que me interesan, y extraer los valores que luego utilizaré como variables (nivel de llenado, coordenadas del embalse, nombre del pantano, …) y sacarlo en el feed.

Presentación en el mapa

Una vez cargado el objeto JSON proporcionado por mi pipe, representarlo en el mapa es casi trivial. En función del nivel de llenado se pone un icono diferente al marker, y se usa un gestor de markers para su representación puesto que el número de pantanos es muy elevado. Podeis echar un vistazo al código fuente donde genero el mapa. En vez del php include, se podría haber usado la API de AJAX feed de Google, pero no tenía tiempo de ponerme a jugar con una API más :)

El resultado lo podeis ver en mi anterior entrada: “Estado de los embalses españoles

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

{ 15 } Comments

  1. David | 02/06/2007 at 17:56 | Permalink

    Muy bueno el articulo no conocia nada de eso, muchas gracias!!

  2. trefeater | 02/06/2007 at 21:41 | Permalink

    Genial! Gracias por la info! voy a aplicarla ahora mismo para un par de cosillas que me incordia que no tengan rss

  3. jose | 03/06/2007 at 02:01 | Permalink

    Sólo una pregunta…
    ¿Por qué no usaste la API de mapas de Yahoo?

  4. admin | 03/06/2007 at 10:48 | Permalink

    Porque iba a ir al Google Developer Day y quería hacer una prueba con la API de mapas de Google para irme familiarizando.

    También se podían haber hecho más virguerías como el no cargar todos los embalses de golpe, y hacerlo en función del nivel de zoom que tuvieses seleccionado. Pero como la intención era probar la API y hacer algo que mostrase cosas y no el mashup más optimizado quedó así. :)

  5. Mario | 03/06/2007 at 20:01 | Permalink

    Tio, excelente trabajo, digno de una clase magistral

  6. Canos | 05/06/2007 at 08:42 | Permalink

    Me encanta este material que has hecho :)
    el otro día en una lista de correo sobre j2ee di el enlace y ha tenido buena acogida. Me han pedido si puedo obtener una traducción al ingles.
    Te animas? no me importaría en absoluto echarte un cable.
    Saludos

  7. admin | 05/06/2007 at 10:32 | Permalink

    Hola Canos,
    ya tienes la traducción en http://franchu.net/2007/06/05/how-to-create-a-mashup-and-not-die-trying/

    Espero que la gente del curso de Sang Shin lo disfrute ;)

  8. Embalses.net | 06/06/2007 at 14:49 | Permalink

    Solo comentarte como en el articulo inicial que si no te importa voy a incorporar en Embalses.net tu idea para las pagina principal, cuenca y provincia.

    Un saludo.

  9. admin | 06/06/2007 at 15:28 | Permalink

    Perfecto :)

    Si pudieses publicar también un feed con GeoRSS de los datos seguro que mucha gente lo agradecería. Además, usando un servicio como feedburner para hacerte de caché del feed no debería de suponer un impacto en el tráfico de tu página.

    Un saludo!

  10. aitiba | 11/06/2007 at 18:19 | Permalink

    Buenas tardes,

    Un gran articulo. Felicidades!

    Quiero hacer un feed RSS de una pagina la cual no tiene RSS para poder sacar unos datos de ella en mi web. Para eso, me he descargado el RoboMaker y he empezado a crear mi robot pero tengo dos duditas que me gustaria poder consultarte para ver si me puedes ayudar (o alguien que lea este blog):

    1. Tengo que hacer un bucle (foreach) porque los datos del RSS son variables y generalmente hay mas de uno. Para ello al principio del robot he puesto un “foreach” con un “action” que va al texto que tiene que salir en cada iteracion. Luego hago un “tag finder” con el mismo tag que puse en el “action” pero siempre me dice que “Error from the For Each Tag Action. No tags to loop through”. Se queja del tag echo “action” pero por muchos que pongo me sigue saliendo el mismo error. ¿Alguna idea?

    2. Mandarle un especie de argumento para poder sacar el RSS segun la fecha dada. He estado investigando pero tampoco encontre la opcion. ¿Se puede hacer? ¿como?

    p.d: he escrito esto como comentario, ya que, no he encontrado una direccion de e-mail donde mandartelo en ningun sitio del blog.

    Gracias. Un saludo. aitiba.

  11. Franchu | 13/06/2007 at 01:28 | Permalink

    Hola aitiba,
    gracias por el comentario :)

    Con respecto al primer punto ya me he puesto en contacto contigo para que me pases el robot y echarle un vistazo a ver si entre los dos sacamos algo más en claro.

    Con respecto al segundo punto… Yo también intenté usar párametros y no conseguí hacerlo. Parece ser que esta versión de openkapow no permite esta funcionalidad para la
    generación de feeds RSS. Hay una opción de aceptar parámetros si lo que creas es un servicio REST, pero desde mi punto de vista tampoco permite la suficiente flexibilidad. De hecho, la razón para no sacar los datos para mi mashup directamente de la página del ministerio de medio ambiente es porque hay que acceder a la página fijando la fecha
    de la semana actual, y sin la posibilidad de meter parámetros de entrada se me complicada un poco.

  12. Miguel A Manrique | 14/07/2007 at 23:25 | Permalink

    Estupendo articulo, sencillo, rápido y revelador. Había hecho mis pinitos con el pipe de yahoo, feedburner y twitter, usando feeds para ello; pero teniendo en cuenta que no tengo ni idea de programación (chapurreo nada mas..) este material es excelente. Lo voy a usar si no te importa en un curso sobre Redes Sociales y Web2.0 en la Universidad de Cantabria. Supongo que no haya problema no??

    http://www.unican.es/WebUC/cverano/Cursos/Sedes/det_curso.asp?p_anualidad=2007&p_id=1207

  13. Vanessa Torres | 09/10/2009 at 00:36 | Permalink

    Excelente artículo, realmente se aprende al ponerlo en práctica.

  14. Franchu | 14/12/2009 at 19:50 | Permalink

    Acabo de recibir un correo de OpenKapow informándome de que el servicio deja de funcionar. Aunque este servicio en concreto deje de existir, los conceptos siguen siendo válidos.

    Dear openkapow user,

    The free openkapow servers has now been stopped and instead we have
    launched the new openkapow discussion forum on openkapow.com.

    At the same time we have lowered the cost for running robots on the
    new pay-as-you-go StrikeIron service on
    http://cts.vresp.com/c/?KapowTechnologies/d2e6342b3a/c5c156124f/b4af4c0fa2
    and we hope these new prices will be attractive and cost-effective for
    most of you. We have at the same time upgraded StrikeIron to run our
    latest release 7.1 with improved usability and support for flash and
    complex Web sites based on Google Web Toolkit and other AJAX toolkits.

    We encourage you to sign up for a free trial and receive 1000 free
    StrikeIron hits to start with. Sign up for your free trial now at
    http://cts.vresp.com/c/?KapowTechnologies/d2e6342b3a/c5c156124f/25de14810c.

    Best regards

    Stefan Andreasen
    CTO & Founder
    Kapow Technologies

  15. Milciades | 01/09/2010 at 21:53 | Permalink

    He visitado el sitio web me pareció muy interesante, como tema de tesis quiero enfocar a Google Maps sobre las utilidades que se le puede dar, y las ventajas que tiene, ya que en mi pais no se tiene mucho conocimiento sobre esta herramienta, y quiero demostrarlo a través de una aplicación web de consultas de tarifas de taxi en Asuncion que es la capital de Paraguay.

    a lo que quiero llegar es si me pueden dar una pauta como puedo personalizar el google maps en qué parte tengo que poner mis códigos (que lenguaje tengo que usar) o funciones para calcular la distancia el tiempo y el monto a pagar estimativo… La aplicación será para los usuarios que van a tener la facilidad de conocer una tarifa estimativa del viaje de un punto a otro punto, y eso le tiene que mostrar el google maps el camino a recorrer… si me pueden ayudar les voy a agradecer

    Otro punto cómo Google puedo personalizar para que muestre en la pantalla más de una opción para llegar al destino

{ 13 } Trackbacks

  1. meneame.net | 02/06/2007 at 17:34 | Permalink

    Como hacer un mashup y no morir en el intento…

    Explicación de cómo hacer un mashup desde que se sacan los datos de una web si no tiene feed RSS hasta que se procesan en el cliente. En este caso se extraen los datos de una web, se procesa el feed RSS y se representan sobre un mapa….

  2. [...] 4 – Como hacer un mashup y no morir en el intento… Franchu’s lair [...]

  3. [...] Franchu’s lair » Como hacer un mashup y no morir en el intento… [...]

  4. [...] post is an english translation of my previous post Como hacer un mashup y no morir en el intento… as kindly requested by D. Canos y T. Forza on behalf of the other students of the J2EE programming [...]

  5. Week-log.228 | Denken Über | 09/06/2007 at 19:11 | Permalink

    [...] – blogpocket 6.0 y un link genial a otras ilustraciones de Alicia en el País de las Maravillas – Franchu explica, genialmente, como hacer un mashup y no morir en el intento… – Jorge Telerman, un Jefe de [...]

  6. [...] Cómo hacer un mash up y no morir en el intento… [...]

  7. [...] Cómo hacer un mashup y no morir en el intento… [...]

  8. [...] que fue llevado al cine por Ana Belen como directora, (Como ser mujer y no morir en el intento). El articulo a que nos referimos cuenta en como en poco tiempo consigue  una representación geográfica y [...]

  9. [...] particular a otro como el que se ha hecho para representar en internet de una manera gráfica y muy visible el estado de los pantanos [...]

  10. [...] estás relacionado con el mundo de la programación al ver la palabra “mashup“, te vendrá a la cabeza un refrito de API’s de google, amazon, ficheros xml, rss, [...]

  11. » Como hacer un mashup | 01/10/2009 at 01:37 | Permalink

    [...] Franchu’s lair » Como hacer un mashup y no morir en el intento… [...]

  12. [...] Aquí  debajo pueden ver algunos ejemplos de  mis  mapas interactivos favoritos o tambien conocidos como mashups. [...]

  13. [...] A través de una interfaz pública o un sencillo API podemos obtener una base de datos considerable para crear ¡nuestro propio mashup! [...]

Post a Comment

Your email is never published nor shared. Required fields are marked *