5 sept 2012

Android + Servicios Web: REST API Twitter

En esta entrada veremos cómo interactuar, de forma sencilla, con una de las redes sociales más importantes del momento a través del desarrollo en Android. Aprovechando esta interacción, podremos ver cómo tratar en Android servicios web REST.

¿Qué es un Servicio Web?

Aunque la mayoría de la gente que consulta a diario este blog sabrá de sobra qué son los Servicios Web, siempre me gusta empezar con una pequeña introducción. Hace mucho tiempo, los únicos usuarios que consultaban las páginas web eran las personas. Esto, como todos sabemos, ha cambiado radicalmente y actualmente las webs pueden ser consultadas por programas que buscan y clasifican la información. Antes, la información que ofrecían las páginas web estaba representada únicamente en lenguaje HTML. Esta representación resulta tediosa a la hora de realizar una aplicación que lea páginas web HTML y obtenga información de ellas ya que HTML mezcla la información con la representación gráfica de la web.Actualmente los servidores ofrecen Servicios Web que pueden devolver la información de la web en formato HTML, para ser visualizada directamente por navegadores web, y en formato XML o JSON para ser interpretada y clasificada por una aplicación.

¿Qué es un Servicio Web REST?

REST (Representational State Transfer) es un estilo arquitectónico de Servicio Web orientado a construir aplicaciones distribuidas y basado en las características de la web. REST funciona sobre HTTP y estructura la información en XML o en JSON. Un servidor REST tiene todos sus recursos informativos direccionados por URLs accesibles mediante peticiones HTTP. De esta forma, el servidor que implemente REST (servidores RESTful) devuelve la información solicitada por el cliente mediante una petición GET en formato XML o JSON.

REST API Twitter

La red social Twitter implementa un REST API que permite al desarrollador realizar cualquier operación, que se pueda llevar a cabo desde la web de Twitter, en la aplicación que esté desarrollando (https://dev.twitter.com/docs/api) . En este caso utilizaremos la funcionalidad del API que permite obtener todos los tweets que contengan un determinado parámetro.

¿Qué se va a realizar?

A continuación, se explica cómo realizar una aplicación en Android muy sencilla que busca un parámetro, indicado por el usuario, y devuelve una lista con los tweets que lo contienen. Los pasos que se van a seguir son los siguientes:

· Diseño de la interfaz de usuario.

· Peticion Get a Twitter, interpretación de JSON y parseo de la información.

· Visualización de tweets en forma de lista.

1. Diseño de la interfaz de usuario

La aplicación que se propone tiene una interfaz de usuario muy simple que nos sirve de apoyo para enseñar una pequeña parte de la funcionalidad que se puede obtener mediante el API REST de Twitter.

La aplicación consta de dos Activities (pantallas). La primera Activity Main.java contiene una caja de texto donde el usuario puede indicar el parámetro a buscar en Twitter y un botón de acción. El XML main.xml de diseño de la Activity es el siguiente:

clip_image002

La segunda Activity ActivityTweets.java contiene una lista con los tweets resultados de la petición GET realizada. El fichero de diseño XML activitytweets.xml de dicha Activity es el siguiente:

clip_image004

La lista utilizada se apoya en un fichero de diseño XML llamado tweet.xml. Cada elemento de la lista tendrá un título, que se corresponde con el nombre del usuario que creó el tweet, y un subtítulo que se corresponde con el texto del tweet. El fichero de diseño de la lista de tweets tiene esta apariencia:

clip_image0062. Petición GET a Twitter:

Una vez tenemos el diseño de la interfaz de la aplicación seguimos con la lógica. Empezamos con la activity Main.java. Esta activity se encarga de recoger el parámetro que introduce el usuario en la caja de texto y de realizar la petición GET a Twitter cuando el usuario pulse el botón "Ver Tweets". El fichero Main.java tiene este aspecto:

clip_image008

1. Se carga el fichero de interfaz main.xml y todos sus componentes (Button y EditText). Posteriormente se pone al botón a escuchar eventos de click.

2. Se forma la URL de la petición GET. Esta URL tendrá dos parámetros fijos: rpp que limita el número de resultados y q que contiene el parámetro a buscar. Como se puede observar, el parámetro q contendrá el valor indicado por el usuario en la caja de texto. Por último, para realizar la petición GET, se realiza una instancia de la clase ProgressTask y se le pasa la URL formada y el contexto de la aplicación.

3. Se declara una variable global a la aplicación que contendrá un array con todos los tweets obtenidos en la petición GET. Este array contiene objetos de la clase propia Tweet. Esta clase es muy sencilla, contiene dos atributos que hacen referencia al autor del tweet y al texto del tweet (user y tweet), y métodos get y set para cada atributo.

La clase ProgressTask hereda de la clase AsyncTask que permite realizar operaciones asíncronas en Android y manejar los diferentes estados por los que pasa. En esta aplicación usaremos esta clase para realizar la petición GET al servidor de Twitter. Una tarea asíncrona tiene tres estados diferenciados que la clase AsyncTask maneja:

· Estado de pre-ejecución: La clase AsyncTask maneja este estado mediante el método onPreExecute(). Dentro de este método sacaremos por pantalla un Dialog para que el usuario sepa que la petición se está realizando y que debe esperar a que termine.

· Estado de ejecución en segundo plano: Es manejado mediante el método doInBackground(). En este método aprovecharemos para realizar la petición GET , parsear el JSON devuelto por el servidor y llenar nuestro array de tweets tweets.

· Estado de post-ejecución: Es manejado mediante el método onPostExecute(). Dentro de este método aprovecharemos para finalizar el Dialog de espera y para iniciar la actividad ActivityTweets.java donde se mostrara el listado de los tweets devueltos.

La clase ProgressTask tiene la siguiente apariencia:

clip_image010

Para obtener el JSON en forma de String se llama al método privado readTwitterFeed que realiza la petición GET al servidor. Una vez realizada la petición tendremos un JSON con la estructura que se detalla a continuación:

clip_image012

En esta imagen se ha probado con una petición GET con el parámetro "fluproject". Como se observa en la imagen, el JSON devuelto nos da información de sobra de la petición y de cada uno de los resultados. De toda esa información solo necesitamos filtrar la parte de resultados de la petición y coger, de cada uno, su campo from_user_name y su campo text. Esto se consigue fácilmente instanciando la clase JSONObject pasándole el resultado de la petición GET obtenido en formato String. Dicha clase estructura el String pasado en forma de JSON y permite acceder a los distintos campos mediante sus métodos get. A través del método getString() obtenemos primero todos los tweets resultados y los disponemos en forma de array de objetos JSON instanciando a la clase JSONArray. Una vez tengamos el array de objetos JSON vamos iterando sobre cada uno de ellos mediante el método getJSONObjetc(), quedándonos con el valor de los campos from_user_name y text mediante el método getString(), creando una instancia de la clase Tweet y guardándolas en nuestro array global de tweets. Una vez terminado el proceso, sólo queda mostrar los resultados en forma de lista.

3. Visualización de tweets en forma de lista:

La actividad ActivityTweets.java es la encargada de mostrar una lista con todos los tweets contenidos en el array global tweets. Dicho array será acoplado al adaptador de la lista tal y como se muestra a continuación:

clip_image014Para comprender en profundidad cómo se realiza una lista personalizada en Android recomiendo que consultéis la siguiente entrada: http://www.flu-project.com/curso-de-introduccion-a-android-iii-escaner-de-redes-wifi-2.htmlAquí os dejo un ejemplo de ejecución de nuestra aplicación y os adjunto el código. Un saludo!!clip_image016clip_image018clip_image020Descarga el código fuente de la app desde aquí.

1 comentario:

  1. Muy buen post, me fue de gran ayuda... sigue así con tu colaboración me guie en mi proyecto

    ResponderEliminar