Leyendo Post de Blogger (II)

Introducción

Hace unas cuantas entradas vimos las llamadas API que nos proporciona Blogger para obtener información de nuestro blog alojado en el servicio de google. También vimos una pequeña reseña de la estructura de JSon.

Ahora vamos a ver como realizar un pequeño script para obtener los titulos de todas las entradas de nuestro blog. Para ello haremos uso del API, que nos devolverá la información en formato JSon. Veremos como tratarlo. Para las llamas Ajax utilizaremos la librería de Javascript JQuery, para que sea todo sea un poco más sencillo.

Solución

Lo primero que tenemos que hacer es poner un enlace a la librería JQuery en nuestro programa. Puedes bajarte la librería desde la página principal de la misma. En los servidores de google también esta y se puede enlazar. Añadimos la referencia:

<script src="http://www.miservidor.com/js/jquery.min.js"></script>

Una vez tenemos la libreria enlazada ya estamos listos para realizar la llamada:

$(document).ready(function() {
 $.ajaxSetup({cache: false});
  $.getJSON("http://miblog.blogspot.com/feeds/posts/default", {alt: "json"}, procesar_respuesta);
}

La primera linea indica que el código se ejecute cuando el documento este totalmente cargado. Esto es imprescindible si se quiere trabajar con el DOM, ya que este sólo esta disponible una vez se ha cargado toda la página. Como nuestro script si que hará uso tiene que esperar a estar totalmente cargada.

La segunda linea indica que no queremos que nuestra llamada Ajax utilice cache. En la tercera linea realizamos la petición. Utilizamos el método $.getJSON ya que queremos que la respuesta que esperamos este en este formato. El primer parámetro de la función es la dirección de la que queremos leer la información, el segundo parámetro es las opciones que le pasamos, en este caso se convertirá en ?alt=json, que le indica al servidor el formato en que queremos la respuesta. El tercer parámetro es la función que se ejecutará cuando reciba los datos.

Como en la llamada no indicamos el número de entradas que queremos nos enviará el que tiene establecido por defecto. Podríamos indicar un número muy alto de entradas para que nos las enviará todas, pero eso se traduce en una lentitud extrema, así que no os lo aconsejo. Vamos a ver como la función procesar_respuesta obtiene todas las entradas.

 
var mydata = "";
 
function procesar_respuesta(data) {  
    var startindex = parseInt(data.feed.openSearch$startIndex.$t);
    var totalResul = parseInt(data.feed.openSearch$totalResults.$t);
    var itemsppage = parseInt(data.feed.openSearch$itemsPerPage.$t);
    var actual = startindex + itemsppage;
    
    $.each(data.feed.entry, function(i, item) {
        var titulo = item.title.$t;
        var enlace = "";
        $.each(item.link, function(i, link) {
            if (link.rel == 'alternate')
                enlace = link.href;
        });
        mydata += '<a href="http://draft.blogger.com/'%20+%20enlace%20+%20'">' + titulo + '</a>
;
    });
    
    if (actual <= totalResul) {
        $.ajaxSetup({cache: false});
        $.getJSON("http://miblog.blogspot.com/feeds/posts/default?start-index=" + actual, 
                   {alt: "json",}, procesar_respuesta);
    } else {
        $("entradas").html(mydata);
    }
  } 

Lo primero que hacemos en la función es leer los datos relativos a la información enviada. Así leemos el número de entradas enviadas, el total de entradas que hay y el indice de la primera entrada enviada. Con esto podemos llevar un control de los datos que hemos leído y si nos faltan datos por leer.

Después recorremos el vector de entradas data.feed.entry para leer el titulo y después en enlace al mismo. Creamos un enlace y lo guardamos en una variable.

Al final de la función comprobamos si hemos leído todos los datos de las entradas. Si es así las añadimos en un elemento cuyo id es entradas, si todavía nos quedan datos por procesar, volvemos a realizar una llamada, indicando esta vez el indice del primer dato que queremos recibir. No indicamos el número de registros, por lo que nos mandará el que este establecido por defecto.

Los datos que recibimos también nos devuelve parte del cuerpo de la entrada, las categorías a las que pertenece.... así que podemos realizar operaciones interesantes con estos datos. Para mejorar el código habría que añadir una indicación que se están cargando los datos para que el usuario este informado del proceso de carga.

Bibliografia

[] JQuery API (inglés)
[] API Blogger