Usa la API de Google para hacerte un lector de RSS

No solo de JQuery vive el programador de Javascript. Google tiene una preciosa y extraña API que sirve como catalizador y centralizador de otras APIs de Google a modo de que no tengas que “preocuparte” en tener que meter muchas lineas o incluso en las versiones de las mismas.

Esta API nos puede servir, rapidamente, para desarrollar a traves del cliente, desde la lectura de un WebService hasta, por ejemplo, hacer un lector de feeds sencillo.

Podeis encontrar la API en la siguiente URL: https://www.google.com/jsapi

En el ejemplo que os voy a hacer, consiste en 1 única página HTML donde mezclamos un poco de JQuery y esta API para jugar. La aplicación web hara lo siguiente, tendra un formulario donde le indicamos el feed (la URL) que queremos leer y el numero de elementos que nos queremos que devuelva y, simplemente la pintara.

Para ello comencemos con el fichero HTML:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("feeds", "1");</script>
<script src="lector.js"></script>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<form id="form">
<input type="text" id="form_url" name="url" value="http://ax.itunes.apple.com/WebObjects/MZStoreServices.woa/ws/RSS/topsongs/limit=10/xml"> <input type="text" size="1" id="total" value="5" maxsize="1"> - <input type="submit" onclick="javascript:envia_form()">
</form>
<hr>
<div class="rss-respuesta">
</div>
</body>
</html>

Podemos observar que en el head lo que hacemos es cargar la API de JQuery (por si acaso) del propio Google y la API de JSAPI ademas de cargar un js externo llamado lector.js donde tenemos todo el javascript que lo monta. Esto se hace por comodidad, simplemente.

Destacamos la linea:

<script type="text/javascript">google.load("feeds", "1");</script>

Con esta linea estamos indicando a la API de Google que cargue la API de Feeds, cuya información podemos encontrarla en esta URL.

Tenemos una lista de como funciona google.load en esta otra URL donde se nos indica las APIs que podemos cargar automáticamente desde el.

El fichero lector.js seria como indicamos:

// Javascript

function mostrar_ocultar(i) {
	// i = identificador del elemento
	
	// Toglemos el mostrar o no
	$(".texto_completo_"+i).toggle("slow");
	
	// Cambiamos el icono del + o el -
	if ($(".ocultar_"+i).html()=="+"){
		$(".ocultar_"+i).html("—");
	} else {
		$(".ocultar_"+i).html("+");
	}
}

function envia_form(){
	// Prevenimos el formulario y le inyectamos a la funcion la url y las cosas
	// Esto es solo para probar
	$("#form").submit(function(event){
		event.preventDefault();
		url = $("#form_url").val();
		total = $("#total").val();
		lee_rss (url, total);
	});
}

function lee_rss(url, total) {
	// url = url del feed
	// total = numero de elementos
	
	// Creamos el elemento del feed con el objeto del feed
	var feed = new google.feeds.Feed(url, total);
	
	// Le inyectamos el numero total de elementos a mostrar
	feed.setNumEntries(total);
	var texto = "";
	
	feed.load(function (data) {
		
		texto += "<h2>"+data.feed.title+"</h2>";
		texto += "<div class=\"caja_rss_respuestas\">";
		
		for (var i=0; i< data.feed.entries.length; i++) {
			var entry = data.feed.entries[i];
			texto+="<div class=\"rss_respuesta\"><strong>"+entry.title+"</strong> <a href=\""+entry.link+"\"><img src=\"img/enlace_4.png\" align=\"absmiddle\" alt=\""+entry.contentSnippet+"\"></a> <a class=\"ocultar_"+i+" glyphicon\" href=\"javascript:mostrar_ocultar("+i+");\">+</a><br>"+entry.contentSnippet+"<br><div class=\"texto_completo_"+i+"\">"+entry.content+"</div></div>";
			
			// Si queremos saber cuales son los keys del entry
			// Descomentando esta linea y sacandola
			// o mediante la consola lo tendremos 
			//var keys=Object.keys(data.feed.entries[i]);
		}
		texto += "</div>"
	$(".rss-respuesta").html(texto);
	
	for (var i=0; i< data.feed.entries.length; i++) {
		$(".texto_completo_"+i).hide();
	}
	
	});
}
Como vemos son 3 funciones. - <strong>mostrar_ocultar</strong> es una función meramente gráfica para ampliar y ocultar cierto texto que montamos en lee_rss. - <strong>envia_form</strong> como, su nombre indica es para enviar el formulario que no permitimos que haga el post y lo que hacemos es enviar el contenido a lee_rss, la función principal. - <strong>lee_rss</strong> es la función principal que crea el objeto feed, y arma el texto que muestra la pagina. En esta ultima función os he dejado un "truco" donde, de un array, podemos sacar sus indices sin saberlos. Se puede usar para saber todos los indices, en este caso de cada entrada y así sacar los que nos sea conveniente. Y luego, para finalizar, si queremos darle un poco de estilo, en nuestro caso tenemos un estilo.css que será así:
/* CSS */
body {
	font: 12px Arial;
}

.rss-respuesta {
	width: 320px;
	height: 325px;
	border: 1px solid #005d8c;
}

.rss-respuesta h2 {
	background-color: #005d8c;
	color: white;
	margin: 0;
	padding: 2px 5px;
	box-shadow: 0px 0px 2px #292929;
}

.caja_rss_respuestas {
	height: 300px;
	overflow: auto;
}

.rss_respuesta {
	margin-bottom: 5px;
	padding-top: 2px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 2px;
}

.rss_respuesta:nth-child(even) {
	background-color: #f4f3f5;
}

.rss_respuesta a {
	text-decoration: none;
	color: #005d8c;
}

El resultado, sin tocarlo mucho, sera algo como esto:

Captura de pantalla 2015-02-19 a las 7.47.55

Este post esta muy mal explicado y si tenéis alguna duda, preguntadmela.

tuti

Técnico en Comunicación Interna de la UVa

4 comentarios en “Usa la API de Google para hacerte un lector de RSS”

  1. Hola, primero de todo muchas gracias por el artículo. Lo he probado y funciona a la perfección con el feed de mi sitio web.

    Mi duda es la siguiente: Tengo un sitio web que aloja un podcast y quiero utilizar esto para mostrar el fichero de audio en el documento html aprovechando las posibilidades de HTML5. Sé lo que tengo que modificar y dónde, lo que no encuentro es qué dato tengo que usar en la función. ¿Tal vez no lo permite?

    El motivo por el que quiero hacer esto es crear una app móvil usando HTML5 y Javascript para portarla a diversos dispositivos. He logrado hacer una, pero lo único que hace es sacar al usuario al navegador y llevarle a la web. Prefiero insertar el reproductor en la app. Si pudiera hacer esto con vuestro código sería estupendo, pero no he conseguido averiguar si es posible.

    Un saludo y gracias de nuevo.

    1. Hola,

      En principio esta API no lee tags “especificos”, es decir, los podcast, el audio, esta almacenado, metido en algunas etiquetas que difieren del cliente. No es lo mismo un RSS para iTunes que uno “estandar” y la API no lee esa “variable”. Lo siento. Te va a tocar hacer un intermediario en PHP que lea el FEED (recuerda que es un XML) y lo despiece, tome el dato del audio y lo inyecte en el reproductor (o en el tag HTML5). Por desgracia esto no lo hara cliente sino el servidor, con lo que supone.

  2. Hola! Muy bueno el post. Me gustaría saber si es posible realizar esta misma función pero desde php. Me explico: Tengo una aplicacion llamada tioconejo.net desarrollada en php. Es un servicio de análisis de contenidos que recurre a un servicio de web crawling. Los textos (noticias) se capturan cada tanto tiempo y se almacenan en una bandeja de entrada para que el usuario decida si incluirlos en sus proyectos de investigación. La idea es independizarme del servicio de web crawling empleando google alerts. Para ello necesito capturar los items del feed y almacenarlos en mi bd para que estén disponibles. Alternativamente podría incluirse alguna función que almacene los textos desde js, pero la verdad no soy ducho en ese lenguaje… Gracias de antemano por la ayuda.

    Igor Collazos
    [ELIMINADO POR SEGURIDAD]
    Caracas, Venezuela.

    1. En principio, el Javascript, al ser ejecutado en el cliente local y no en el servidor no almacenaria en base de datos “nada”. Es decir, no podras almacenar en el servidor directamente nada. Puedes hacer, mediante REST, llamadas a tu servidor desde el propio JS para que lo almacene en la base de datos en el servidor… es un poco ñorder, pero funcional. Tambien, puedes almacenarlo en una base de datos local del cliente (en el cliente) a traves de webSQL (https://en.wikipedia.org/wiki/Web_SQL_Databasehttps://en.wikipedia.org/wiki/Web_SQL_Database) o en IndexDatabase (https://developer.mozilla.org/es/docs/IndexedDB) a sabiendas que segun que cliente tendra mejor interpretación y será mas compatible que el otro.

      Tambien, segun las ganas que tengas, puedes pasarlo todo al lado del servidor (como te he dicho antes) y usar el metodo del lenguaje que mejor te venga en tu servidor para hacer las transacciones.

      La ventaja de tener la BD en el cliente es que sera más rapido y no te ocupara a ti a cambio de que si limpia algo el navegador, perdera todo (la base de datos en el cliente puede ser persistente si se quiere, pero si elimina el navegador o lo “vacia” la BD se borra), la ventaja de tenerlo en el servidor es que es independiente del cliente pero es “mas lenta” y te ocupa espacio. Estas cosas tendras que medirlas y ver que te viene mejor.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *