Uno de los servicios de almacenamiento mas populares y por lo mismo, interesante es Dropbox el cual nos permite “subir” nuestros archivos a su servicio, sin la necesidad de acceder a su sitio web; basta instalarlo y copiar nuestros archivos a las carpetas que nos crea dentro de Mis Documentos y así obtener un url para compartir nuestros archivos con quien queramos.

En este tutorial aprenderemos a desarrollar aplicaciones Flex que se comuniquen con el servicio de Dropbox. Para esto necesitaremos acceder a nuestra cuenta e ir a la sección Aplicaciones dentro de Developers.

Instrucciones

1.- Crearemos una nueva aplicación para obtener así nuestro API Key y nuestro Secret, con los cuales comenzaremos esta integración.

2.- Ahora descargaremos los SWC’s con las librerías que vamos a utilizar. Descargaremos el SWC de Dropbox aquí, y también descargaremos el SWC de as3crypto aquí.

3.- Crearemos nuestro nuevo proyecto en Flash Builder que sera de escritorio al cual también añadiremos los SWC’s que acabamos de descargar.

4.- El creador del API que usaremos nos provee ademas de una clase (que podemos tomar desde donde descargamos el SWC), la cual nos ayudara a obtener nuestro Access Token y Authorization Key, los cuales necesitaremos para crear la conexión con el servicio.
De modo que antes de agregar nuestros componentes a nuestro proyecto, crearemos una nueva clase de ActionScript la cual nombraremos DropboxAPI dentro de la cual pegaremos el siguiente código, solo el código de AS3.

5.- En nuestro proyecto crearemos un bloque de Script sin contenido, solo le agregaremos la propiedad source con la cual definiremos que las clases a utilizar se encuentran en nuestra clase de AS3.

6.- En la vista de diseño arrastraremos los componentes necesarios para crear nuestra interfaz, serán un Panel, 3 Botones, 5 TextInput, y 4 Labels, de modo que nuestra interfaz quede como se muestra a continuación.

7.- Los ID’s para cada uno de estos TextInput serán los siguientes, ID 1 reqTokenKeyLabel, ID 2 reqTokenSecretLabel, ID 3 accTokenKeyLabel, ID 4 accTokenSecretLabel e ID 5 uploadFileLabel.
También agregaremos a nuestros botones las funciones necesarias para el acceso a Dropbox. El botón Access Token ejecutara getRequestToken(), Authorization ejecutara getAccessToken(), y Upload File ejecutara uploadFile(). Hay funciones que no necesitaremos así que podemos comentarlas sin problemas.

8.- Crearemos un nuevo componente Window de nombre Ventana con Width de 800px y Height de 600px, en el cual visualizaremos la pagina web de Dropbox, puesto que debemos autorizar a la aplicación para que acceda a nuestra cuenta. Dentro de este componente tendremos un contenedor HTML con un Width y Height de 100% y como ID le pondremos page. Ademas dentro de un bloque de Script definiremos una variable del tipo String llamada link la cual almacenara la url desde la cual debemos hacer dicha autorización; nuestra ventana tendrá ademas un Creation Complete con una función que pase este url como la locación que debemos visualizar en nuestro contenedor HTML.

9.- En nuestra aplicación crearemos otro bloque de Script, dentro del cual crearemos una función llamada autorizar, la cual recibe un valor del tipo String.
En nuestra clase de AS3 definiremos una variable del tipo String llamada link y buscaremos la función getRequestToken que a su vez contiene otra funcion. Dentro de dicha funcion hay un Alert cuya función es mostrarnos una url; asignaremos esta url a nuestra variable link.
Después de haber asignado esta url dentro de nuestra variable, ejecutaremos la función autorizar y le enviaremos nuestra variable.

10.- Cuando creamos nuestra aplicación obtuvimos un Key y un Secret, los cuales usaremos ahora. Dentro del apartado Developers encontraremos el apartado My Apps, en las opciones de nuestra aplicación, hasta abajo encontraremos dichos códigos.
En la primer funcion dentro de nuestra clase, definimos un nuevo objeto del tipo DropboxConfig al cual asignaremos nuestro key y nuestro secret (en ese orden).

Con esto debemos habernos desecho de los errores en nuestra aplicación. Debajo de donde introdujimos nuestro key y nuestro secret hay ademas unas cuentas lineas comentadas, las cuales explican que datos debemos introducir.

11.- Para finalizar con este tutorial ejecutaremos nuestra aplicación y obtendremos nuestros Token Key y Token Secret, los cuales incluiremos nuestro código. Se abrirá ademas una nueva ventana con la pagina de logeo de Dropbox, al iniciar sesión nos preguntara si deseamos permitirle a la aplicación acceder a nuestra cuenta.
Después de esto nos habrá devuelto a nuestra aplicación nuestro Authotization Key y nuestro Authorization Secret, los cuales también incluiremos en nuestro código. La primer linea de estas que se encuentran comentadas se quedara igual.

Ahora al ejecutar nuestra aplicación podremos dar clic en Upload File para seleccionar un archivo y esperar a que sea subido a nuestra cuenta en Dropbox, al ir al servicio podremos comprobarlo.