Uno de los servicios mas populares de internet, el cual no solo ha acaparado la de jóvenes, sino también de muchos adultos, nos permite también hacer uso de su API. En este tutorial aprenderemos a realizar la autenticacion básica dentro de Twitter haciendo uso de los datos obtenidos al registrar una nueva aplicación.

Para registrar una aplicación en twitter basta con entrar a esta pagina, e ingresar datos requeridos. De modo que obtengamos nuestro Consumer key y nuestro Consumer secret los que nos permitirán realizar la conexión al servicio.


1.- Crearemos nuestra interfaz en Flash Catalyst, lo cual nos permitirá estilizar nuestra aplicación tanto cuanto queramos; ademas de que podremos utilizar los efectos de transición que queramos entre estados. Nuestra aplicación tendrá un width de 400 por un height de 600 y deberá constar de dos estados, el primero llamado inicio, y el otro se llamara segundo.

Crearemos dos rectángulos, el primero con un width de 400 y un heigth de 50, su posición de 0 en X y en Y. El segundo tendrá un width de 400 y un heigth de 25, su posición en X sera de 0 y en Y de 575.

2.- Importaremos una imagen de fondo dividida en dos, la cual nos permitirá un efecto visual muy agradable al usuario. Su width sera de 400 y un heigth de 200 cada una.

3.- Crearemos un cuadrado de 75 por 75 de color gris y el cual tendrá una posición en X de 163 por una posición de 193 en Y. Sobre este cuadrado colocaremos un Avatar desde el panel components. Su width y su heigth serán de 61, con una posición en X de 170 por 200 en Y. Debajo de estos colocaremos un boton, seguido de un TextInput y otro botón. El estado inicio deberá verse así:

4.- A nuestro segundo estado le agregaremos un TextInput con una posición en X de 55 y en Y de 60, ademas de un width de 265 por un heigth de 60.
Agregaremos dos botones a nuestra interfaz, el primero llamado Logout, y el segundo Tweet.

El primero tendrá una posición en X de 327 y 52 en Y, mientras que el segundo estará en 325 de X y 95 en Y. Crearemos un rectángulo con un width de 393 por un heigth de 446, el cual tendrá encima una lista con un width de 385 y un heigth de 433, con una posición en X de 8 y en Y de 134.

Nuestro Avatar y el cuadrado que esta detrás de el, cambiaran de tamaño y de posición, ahora el cuadrado tendrá un width y un heigth de 34, y una posición en X de 14 por 57 de Y. El avatar tendra un width y un heigth de 31, mientras que su posición en X sera de 15 y en Y de 58.

El segundo estado deberá verse así:

5.- A nuestras imágenes de fondo les cambiaremos la posición en nuestro segundo estado. La de la izquierda tendrá una posición en X de -201 y la segunda 401 en X, esto nos permitirá tener un efecto de movimiento al cambiar de estado.

Descargar la GUI.

6.- Exportaremos nuestro proyecto a Flash Builder Burrito y crearemos un nuevo proyecto en AIR, al cual copearemos las carpetas assets y components desde el proyecto exportado a nuestro nuevo proyecto. De este modo pasaremos nuestro proyecto de una aplicación web a una aplicación de escritorio.

Descargaremos y añadiremos a nuestro proyecto dos librerías SWC las cuales utilizaremos para acceder al servicio de Twitter.
Primer SWC, y segundo SWC.

7.- Realizaremos dos cambios a nuestra interfaz. Primero cambiaremos el TextInput que tenemos en el segundo estado, y lo sustituiremos por un TextArea, y cambiaremos la lista por un DataGrid. Al cambiar ambos componentes en Flash Builder, podemos aprovechar los efectos agregados en Flash Catalyst.

8.- Importaremos las librerías necesarias para nuestro proyecto y agregaremos un CreationComplete a nuestra aplicación.

Definiremos tres variables privadas. La primera se llamara Servicio, la cual creara la conexión a Twitter, la segunda se llamara oauth y se encargara de almacenar nuestras credenciales, y por ultimo definiremos una variable llamada servicioHost, la cual contendrá una url hacia la proxy que nos permitirá acceder al servicio. Para mas información acerca del proxy y su instalación, aquí.

9.- Renombraremos nuestra función CreationComplete como Start. Dentro de nuestra función inicializaremos nuestras variables Servicio y oauth, ademas de que a ambos les agregaremos dos EventListeners, los cuales evaluaran el resultado de la conexión y asignaremos a nuestra variable oauth, nuestras credenciales obtenidas al registrar nuestra aplicación en Twitter.

10.- Crearemos nuestras funciones que se ejecutaran por cada EventListener definido en nuestra función Start. La primera se llama conexionCompleta y la segunda oauthCompleto.

Ambas funciones contendrán un Switch el cual evaluara el tipo de evento que nos devuelva la función, y dependiendo de cada función y de cada resultado, sera lo que nuestra aplicación haga.

Hasta ahora tenemos la interfaz y la función que efectuara la conexión hacia el servicio de Twitter. En la segunda parte continuaremos con la evaluación de los eventos y revisaremos mas funciones del servicio.