Yahoo Pipes es un interesante servicio de mashups basado en feeds. Para los que no sepan que es un mashup, no es más que combinar uno o dos servicios y generar uno nuevo. En el caso de Yahoo Pipes, es combinar varias entradas y generar una salida, que será la combinación de dichas entradas. El servicio aún está en Beta, y cambia con regularidad una que otra cosa. Aún así, es un servicio que vale la pena explorar. Para iniciar este tutorial de Yahoo Pipes, necesitarás de una cuenta de Yahoo para poder accesar a este servicio, y FireFox 2+ o Internet Explorer 7 (no funciona con el 6).
La interfaz de Yahoo Pipes
Dirígete a la página inicial de Yahoo Pipes. Una vez ahí, dale clic al botón azul que dice Create a pipe; necesitarás una cuenta de Yahoo para poder usar el servicio Pipes. Una vez que hayas entrado con tu cuenta, se presentará la interfaz de Yahoo Pipes, la cual luce como la siguiente:
Ahora, una pequeña explicación sobre las diversas partes de esta interfaz: en la parte superior izquierda tenemos los componentes que podemos usar para crear nuestro mashup, divididos en categorías. Los más importantes son los que están en la categoría Sources, que son las fuentes de donde vamos a obtener nuestros datos iniciales para trabajar con ellos. Debajo de esa área hay un pequeño rectágulo que nos proporcionará ayuda cada vez que hagamos clic sobre un componente, y lo más importante, nos proporcionará un enlace a un ejemplo completo de cada componente. El área grande cuadriculada es nuestra área de trabajo, a la cual arrastraremos y soltaremos el componente que deseemos usar. En la parte inferior tenemos el área de salida, que es donde se mostrará la salida
de nuestro mashup. Por default, aparece un componente en la parte de abajo de nuestra área de trabajo, que se llama Pipe output, y que representa la salida de nuestro mashup.
La idea básica
Vamos a iniciar con un mashup muy simple. Parto de una situación que me pasa constantemente. Como todos ustedes saben, hay una inmensa cantidad de información en Internet, y filtrarla es complicado; a mi me pasa por lo general cuando hay una noticia importante o a la que se le da cobertura por varios días. Un ejemplo de esto fue el caso reciente de la salida del iPhone al mercado. ¡A diario salían cientos de noticias del iPhone! pero también salían cientos de otras noticias, haciendo difícil cubrir el evento principal, que era el iPhone.
Nuestro primer componente
Iniciemos pues con nuestro primer componente. Para este ejemplo, necesitamos los feeds de varios sitios. Voy a usar 5 feeds para este ejemplo, todos ellos blogs de gadgets y/o tecnología. Estos son, en ningún orden en particular:
- Engadget (http://feeds.engadget.com/weblogsinc/engadget)
- Gizmodo (http://feeds.gawker.com/gizmodo/excerpts.xml)
- Gadgets.co.uk (http://www.gadgets.co.uk/rss.xml)
- The Gadget Blog (http://feeds.b5media.com/b5media/TheGadgetBlog)
- CNet News (http://news.com.com/2547-1_3-0-20.xml)
Si no tienes claro lo que es un feed, puedes consultar este link de Wikipedia. Lo que necesitaremos es lo que está entre paréntesis. Ahora necesitamos crear un componente para accesar a esos feeds. Para crear un componente de Yahoo Pipes, tienes dos opciones: puedes arrastrar y soltar el componente que desees usar, o bien presionar el signo de más que tiene cada componente a la izquierda. Usando tu método favorito, crea un componente Fetch Feed, el cual se encuentra en la categoría Sources.
Debes de obtener algo similar a lo siguiente:
El componente Fetch Feed es muy sencillo: sólo necesita la dirección del feed, la cual debes introducir en la caja de texto que se muestra. Introduce el primer feed (el de Engadget). Debe de quedar de la siguiente forma:
Ahora veremos porqué se llama Yahoo Pipes: como puedes ver, el componente Fetch Feed tiene un círculo justo en la parte media inferior del componente. Esta es la salida del mismo, y la cual debes de conectar a otro componente. Posiciona el puntero del ratón sobre el círculo (cambiará a una mano), y haciendo clic y arrastrando moverás el puntero hacia el círculo del componente Pipe output. ¡Has conectado tus primeros componentes! debes de tener algo similar a esto:
El procedimiento para desconectar es similar: posiciona el cursor sobre el círculo, y aparecerá una tijera. Haciendo clic sobre la tijera cortarás la “tubería” que une ambos componentes, como se muestra a continuación:
Si no has cortado la tubería, hazlo ahora. En el componente Fetch Feed que tienes en tu área de trabajo, añade los cuatro feeds restantes. Para probar el resultado, conecta de nuevo el componente Fetch Feed con Pipe output. Verás que en la parte de abajo aparecen todas las entradas de todos los feeds combinadas en uno solo. Excelente, ¿verdad? ¡pues se pone mejor aún!
Filtrando los resultados
Hasta ahora tenemos un súper feed que engloba a los 5 que consultamos. Pero lo que queremos es separar la información que nos interesa. Para esto necesitamos un componente que filtre dicha información, y afortunadamente Yahoo Pipes nos proporciona uno que hace justamente eso. Haz clic en la categoría Operators, y crea un componente Filter. El componente recién creado luce como este:
Los parámetros son sencillos: el primero es el tipo de filtro, que permite (Permit) o bloquea (Block) elementos del feed; el segundo es el alcance del filtro, ya sea que se aplique a todos (All) o a cualquiera (Any) de los términos del filtro; el elemento por el cual se filtrará, el cual se escoje del desplegable que contiene todos los elementos que componen a nuestro feed; un operador, que por default es Contains (contiene), y por último, un valor que será la base del filtro. Para nuestro ejemplo, llenaremos los valores de esta forma:
Ahora conecta el componente Fetch Feed al componente Filter, y este a Pipe output. Observa la salida: ¡ahora tenemos sólo los artículos que se refieren al iPhone!
¡Excelente! ahora podemos salvar nuestro Pipe. Selecciona Save de la fila de botones en la parte superior derecha de el área de trabajo; se te pedirá un nombre para tu pipe, escoje el que tu gustes. Una vez hecho esto, haz clic sobre el link Back to my pipes, lo cual te llevará a la página inicial de Yahoo Pipes, y donde ahora aparecerá tu pipe recién creado. Para ejecutarlo, haz clic sobre el título del pipe. Te mostrará algo como esto:
¡Hemos cumplido nuestro cometido! Sin embargo…el iPhone dejará de ser noticia pronto, y entonces nos quedaremos con un pipe con funcionalidad obsoleta. Claro está, si no lo modificamos…¿que les parece si lo hacemos? ¡manos a la obra!
Extendiendo el pipe para aceptar datos del usuario
Bien, la idea básica sobre esta extensión de la funcionalidad es permitirle al Pipe que nos filtre nuestro súper feed en base a lo que nosotros indiquemos, sea iPhone, PlayStation, o lo que querramos. Para aceptar datos de los usuarios, tenemos los componentes de la categoría User inputs, y el componente que usaremos será el Text Input. ¿Notaste que en el componente Filter el campo que contiene el texto a filtrar tiene un círculo a la derecha? adivinaste, este campo también se puede conectar con otros componentes, y nos valdremos de esto para personalizar nuestro filtrado del feed.
Crea un componente Text Input en tu área de trabajo, y conéctalo con el círculo gris que se encuentra en el componente Filter. ¡Eso es todo! con sólo conectarlo, tu pipe ahora te pedirá un dato de tipo texto, y el valor de este será el filtro que se aplicará al feed maestro que creamos inicialmente.
Salva tu pipe y ejecútalo de nuevo, y verás la diferencia:
Finalizando
Como puedes ver, Yahoo Pipes es un servicio muy interesante y muy extensible. Lo que aquí te muestro es tan sólo la punta del iceberg, pues los usos que se le pueden dar son muchos. La mejor manera de sacarle jugo es viendo los cientos de ejemplos que encontrarás en la página inicial del servicio. Y con la inclusión de nuevas características recientemente, como la integración de un componente de servicios web para publicar los pipes en formato JSON, Yahoo Pipes luce mejor que nunca.
Espero te haya gustado el tutorial, ¡hasta luego!
Artículos relacionados:
- Nuevas características para Yahoo Pipes
- ¡Primer año del Consultorio!
- Internet podría llegar a su límite en el 2010
2 Respuestas a “Mashups al estilo de Yahoo Pipes”
Dejar una respuesta
Loading ...
Octubre 26th, 2007 at 9:55 pm
[...] cierto, puedes consultar el tutorial de Yahoo Pipes que publiqué no hace [...]
Abril 26th, 2008 at 10:06 am
[...] que gustaría leyera más gente: el tutorial de Yahoo Pipes, y el tutorial sobre el uso de los [...]