Aplicación de JSONP. Cliente en jQuery que muestra TimeLine de Twitter

En otro post se explicó en qué consistía JSONP y cómo crear un cliente y un servidor que se comunicaran utilizando este intercambio de datos. La característica de JSONP es que permite salvar el problema que supone no poder usar el objeto XHR (XMLHttpRequest – de AJAX) para recuperar datos de un servicio que se encuentre en otro servidor diferente al de la página.

En este ejemplo vamos a ver cómo podemos, mediante JSONP, podemos recuperar el timeline público de un usuario de Twitter, utilizando la API de Twitter expuesta con REST. No se utilizarán plugins especiales de jQuery para Twitter como (http://plugins.jquery.com/project/jtwitter) con el fin de mostrar explícitamente el proceso de conexión JSONP a Twitter.

En el sitio de desarrollo de Twitter se puede encontrar documentación acerca de los modos que existen para utilizar la API de Twitter: http://dev.twitter.com/doc.

En el menú de la derecha se pueden acceder directamente a los métodos que necesitamos, publicados en forma de servicios REST, que al invocar cierta URL devuelven la información en formatos abiertos como atom,RSS, XML o JSONP. Para nuestro problema nos interesa recoger el timeline público de un usuario: http://dev.twitter.com/doc/get/statuses/public_timeline

Básicamente consiste en invocar el servicio a través de la URL correspondiente con los parámetros adecuados. Pulsa el siguiente enlace para ver la respuesta en formato JSONP de mi timeline:

http://twitter.com/status/user_timeline/4lberto.json?count=10&callback=?

Como habrás podido deducir, si cambias 4lberto.json por tu usuario o cualquiera, obtendrás el timeline público de ese usuario.

Otra cosa que necesitamos saber es qué hacer con toda esa información en formato JSON que parece tan complicada de manejar. Realmente lo que tenemos que hacer es dar unos cuantos intros y enteder su estructura para ver qué métodos del array de objetos podemos necesitar.

Afortundamente en la página de ayuda http://dev.twitter.com/doc/get/statuses/public_timeline podemos ver, si bajamos abajo la salida en formato JSON, viendo que lo que necesitamos al menos es el atributo “text”.

Llegados a este punto ya sabemos qué necesitamos: usar jQuery para llamar a la URL, que al ser externa necesitará JSONP para saltar el problema del XHR en cross-scripting, y recibir un array con los tweets del timeline. También sabemos que de cada tweet nos interesa solamente el atributo “text”.

En primer lugar necesitamos construir la URL, que variará el nombre de usuario dependiendo de una caja de texto en el HTML, cuyo id es “usuario”:

var usuario = $("#usuario").val().trim();   //Nombre del usuario
var url = "http://twitter.com/status/user_timeline/"+ usuario + ".json?count=10&callback=?";

Nótese que la función de callback es “?” para indicarle a jQuery que debe meter el nombre de la función de callback que él desee.

Una vez tenemos la URL preparada, podemos llamar al método $.getJSON:

$.getJSON(url,function(response){....}

Ahora esperamos recibir la respuesta en la variable “response” de la función de callback que está como parámetro del getJSON. Implementamos la función inline:

$.getJSON(url,
function(response){
	$("#titulo").text("Timeline del usuario " + usuario + ". " + response.length + " tweets.");
	$("#timeline").append("<ul>");
	for (var i=0;i<response.length;i++)
	{
		$("#timeline").append("<li>" +response[i].text + "</li>");
	}
	$("#timeline").append("</ul>");
	$("#timeline").show("slow");    //Muestra el cuadro con un fadein
});

Como se puede ver, en primer lugar se coge el número de Tweets que hay en el array para poder indicarlo dentro de un título en el HTML cuyo id es “titulo”.

El resultado del timeline irá en un div cuyo id es “timeline”. Pintaremos en ese div con append una lista sin ordenar, de ahí los ul y los il.

Mediante el bucle correspondiente, accedemos a los elementos del array con response[i] y luego invocamos su propiedad “text”, que como se ha visto en la ayuda de Twitter es la que nos intersaba. Obviamente se pueden coger otras, combinarlas, etcétera.

Finalmente se cierra el UL y se muestra la capa mediante el método “show” de jQuery. No tiene mayor importancia que la de dejarlo vistoso.

Como se ha podido ver JSONP es una utilidad muy potente en los días de la Web 2.0, donde las aplicaciones más populares están en la Web y ponen a disposición de los desarrolladores facilidades para poder interactuar con sus servidores. El límite lo pone la imaginación 🙂

Dejo aquí el código fuente de la página entera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style>
            #timeline{background-color: #bce9ea;
                      border:2px solid #85aaaa;
                      font-family: sans-serif;
                      padding: 1em;
            }

            .boton{background-color: #bce9ea;
                   border:2px solid #85aaaa;
                   text-decoration: none;
                   color:black
            }
        </style>
        <script language="javascript" src="jquery/jquery.js"></script>

        <script language="javascript">
            $(document).ready(function() {

                $("#timeline").hide();  //Ocuta el cuadro en el que se pintará
                
                $("#envioPeticion").click(function(e){
                    e.preventDefault();
                    $("#timeline").empty();
                    $("#timeline").hide();  

                    var usuario = $("#usuario").val().trim();   //Nombre del usuario
                    var url = "http://twitter.com/status/user_timeline/"+ usuario + ".json?count=10&callback=?";

                    $.getJSON(url,
                    function(response){
                        $("#titulo").text("Timeline del usuario " + usuario + ". " + response.length + " tweets.");
                        $("#timeline").append("<ul>");
                        for (var i=0;i<response.length;i++)
                        {
                            console.log("Valor de i:" + i);
                            //console.log(response[i].text);
                            $("#timeline").append("<li>" +response[i].text + "</li>");
                        }
                        $("#timeline").append("</ul>");
                        $("#timeline").show("slow");    //Muestra el cuadro con un fadein
                    });
                });
            });
        </script>
    </head>
    <body>

        <h1>Prueba de JSONP con Twitter</h1>
        <p>Devuelve los Timeline del usuario indicado</p>
        <form>
            @<input type ="text" id ="usuario" value ="4lberto" />
            <a href="#" id="envioPeticion" class="boton">Ejecuta</a>
        </form>
        <h2 id ="titulo"></h2>
        <div id ="timeline">
        </div>
    </body>
</html>
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s