Haciendo un cliente de Twitter en Android.

3
18736

Haciendo un cliente de Twitter en Android

0. Índice de contenidos.

1. Entorno

Este tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 17′ (2.8 GHz Intel Core Duo, 8GB DDR3 SDRAM)
  • Sistema Operativo: Mac OS X Lion 10.8.5
  • Android Studio

2. Introducción

En este tutorial vamos a ver cómo crear un sencillo cliente de Twitter en Android con el IDE Android Studio, con la finalidad de explicar el uso de los Fragment en Android y ver las ventajas que nos proporcionan frente al desarrollo usando únicamente con Actividades.

Para realizar este tutorial usaremos el sistema de build Gradle, que viene integrado con Android Studio y usaremos dos librerías: twitter4j, que nos ayudará a conectarnos a la API de Twitter a través de un wrapper Java y Picasso, que nos permitirá descargar imágenes de una manera sencilla, además de ofrecernos un sistema de caché y evitará leaks de memoria.

3. Creando un proyecto Android con Android Studio

Android Studio es un IDE basado en IntelliJ 13 desarrollado por Google y JetBrains, que se puede obtener gratuitamente en
la página oficial
, para realizar este tutorial también necesitaremos el
SDK de Android
instalado.

Una vez tengamos todo instalado, creamos un nuevo proyecto con Android Studio y seguimos el Wizard, en la primera pantalla marcaremos la casilla Fragment en Support Mode, para que nos añada la librería support_v4 que nos permitirá trabajar con Fragment en cualquier versión de Android ( ya que los fragment no fueron añadidos a Android hasta la versión 3.0 ).

creacion_proyecto

creacion_proyecto

creacion_proyecto

Eliminamos el código que nos ha creado por defecto y dejamos únicamente el siguiente código:

Abrimos el archivo .xml que contiene la vista de la aplicación
res/layout/activity_timeline.xml
y añadimos una vista
ProgressBar
mediante el InterfaceBuilder que nos ofrece Android Studio, la barra de progreso indicará al usuario que se está cargando la información.

Ejecutamos la aplicación y el resultado debería ser el siguiente:

pantalla_loading

4. Integración con la API de Twitter

Para integrarnos con Twitter vamos a usar la fantástica librería twitter4j la cual nos ofrecerá una jerarquía de clases Java con las diferentes entidades que usa la API de Twitter, además de abstraernos de crear las conexiones y parte de la autenticación con los servicios.

Para integrarla en nuestro proyecto abrimos el archivo
build.gradle
y en la sección de dependencias de proyecto ( la parte de dependencias de abajo ) añadimos la dependencia de twitter4j

También es importante que agreguemos los permisos para conectarnos a internet en el fichero
AndroidManifest.xml
:

Para poder usar la Api de Twitter necesitaremos una Api Key y permiso del usuario para poder acceder a la información de su cuenta, de momento vamos a utilizar nuestra cuenta e inyectaremos nuestro token directamente, para ello, vamos a la sección de developers de Twitter y creamos una nueva aplicación:

api_twitter

Una vez dentro, le damos a crear nuestro Token de Acceso y copiamos los cuatro valores ( Consumer Key, Consumer Secret, Access Token, Access Token Secret ) :

api_twitter

Una vez tengamos los datos necesarios, tan solo necesitamos indicárselos a la librería para que pueda conectarse con la API de Twitter, para ello hay
varias maneras
, creo que la más fácil es hacerlo programáticamente a traves del configurationBuilder.

Vamos a crear una clase que nos permitirá obtener el Timeline del usuario con el que hayamos realizado los pasos anteriores:

El método getTimelineAsync nos devolverá de manera asincrona los últimos 20 Tweets ( clase Status en twitter4j ) pertenecientes al Timeline del usuario, al ser un método asíncrono tenemos que pasarle por parámetro la clase que manejará el Callback, las comunicaciones con servicios de Internet en Android tienen que realizarse en Threads distintos al de la UI de manera asíncrona, o sino Android lanzará una Excepción.

5. Mostrando la lista de Tweets

Una vez tengamos la lista de Tweets en memoria tenemos que mostrarla de alguna manera en pantalla, para ello vamos a usar el tipo de Fragment ListFragment el cual funciona de una manera bastante parecida a ListView, nos permitirá mostrar una lista de Vistas, las vistas pueden ser del tipo que queramos, en este caso vamos a mostrar una lista sencilla de TextViews que contendrán el texto de los Tweets.

En la clase
TimelineActivity
añadimos el siguiente código:

A continuación deberemos crear el método showTimeline, que será el encargado de insertar el ListFragment y pasarle los Tweets que deberá mostrar:

Para comunicarse entre Actividades y Fragment, Android prefiere el uso de Bundles sobre variables globales/estáticas, esto facilita el crear Actividades y Fragments reusables ya que solo usan la información que se les pasa, y no información guardada en estados globales.

Y el TimelineFragment:

Arrancamos la aplicación y ya deberíamos ver la lista de Tweets de nuestro Timeline:

timeline

Creando la vista de detalle

El siguiente paso es crear una vista de detalle de cada Tweet mostrando el usuario que lo ha publicado y el número de veces que ha sido hecho favorito y retwitteado, gracias a la librería twitter4j además de cada Tweet( Status ) tenemos un objeto User que contiene alguna la información del usuario que ha publicado el Tweet, como puede ser el nick o la url con la imagen de perfil.

Vamos a crear una clase llamada StatusFragment:

Y la vista asociada:
fragment_status.xml
, tendrá una apariencia similar a:

timeline

Se puede encontrar el código completo, incluido el del XML para crear esta vista, al final del tutorial

6. Conectando los dos Fragments

El siguiente paso es conectar el TimelineFragment con el StatusFragment, para ello vamos a modificar el TimelineFragment para que avise a la actividad que lo contiene cada vez que se hace click en un item de la lista.

Vamos a crear una interfaz que podrán implementar las actividades que contengan al TimelineFragment , además de implementar dos métodos de ListFragment que nos permitirá notificar a la actividad cuando se pulse un elemento:

Por último implementar la interfaz en la Actividad padre
TimelineActivity
:

Y el resultado:

status

7. Conclusiones:

Como hemos podido comprobar, es muy fácil crear unidades de código reusables gracias a los Fragments, esto nos permitiría usar el mismo Fragment en pantallas totalmente distintas, e incluso combinar los distintos Fragment en una misma pantalla ( veremos cómo hacer una pantalla para tablets usando ambos Fragments ).

Esto aumenta la mantenibilidad y la reutilización de código, además de ayudar a disminuir el trabajo de nuestras Actividades, y permitir liberarlas de trabajo.


Puedes descargar el código de esta aplicación
aquí
con algunas correcciones para permitir cambios de orientación.

3 Comentarios

  1. muy buen tutorial.. pero mi pregunta es como realizar el listview pero con la imagen del usuario… es decir que el timeline de los tweets tenga la imagen del usuario el nombre, favoritos y retweets

  2. Excelente tutorial mil gracias, Mi pregunta es si al cargar los Tweets puede quedar con hipervinculo los que tienen y que pueda cargarse el enlace.

  3. Cómo podria obtener mas de 20 tweets, se que son capturados por getTimelineAsync, Pero donde podria poner a capturar mas de 20. Gracias…..

Dejar respuesta

Please enter your comment!
Please enter your name here