Intercanvi de fitxers amb Dropbox: configurar l'accés i llistar arxius


En aquest apartat aprendrem a configurar una carpeta de Dropbox per apermetre-hi l'accés des d'una aplicació i llistar-ne el contingut.



Més concretament es pretén donar resposta a les preguntes següents:


  • Com configurar una carpeta de Dropbox per fer-la accessible des d'una aplicació?
  • Com accedir a una carpeta compartida de Dropbox des d'una app?
  • Com consultar al contingut d'una carpeta mitjançant les APIs de Dropbox?

Per fer-ho utilitzarem un carpeta compartida dins el servei de Dropbox. Aquesta explicació es dividirà en primer lloc en la configuració de l’espai virtual per permetre-hi l’accés i consultar-ne el contingut i en segon lloc en l’accés a aquestes dades. En aquesta segona part, ens centrarem en tres accions diferents que podem dur a terme: consultar els documents disponibles, pujar i baixar arxius.

Configurem Dropbox

Suposarem que ja disposem d’un compte a Dropbox. En cas de no disposar-ne cal que ens en creem un. El servei ofereix diferents modalitats, la més senzilla d'elles és gratuïta. Amb aquesta modalitat, limitada a un volum de 10 GB ja en tindrem suficient per provar la nostra aplicació.

Un cop disposem del compte crearem una carpeta d'accés restringit. Aquesta carpeta ens permetrà limitar l'accés tan sols a les persones que disposin de la nostra aplicació.

Una alternativa al sistema que proposem seria crear una carpeta d'accés públic i accedir-hi mitjançant l'objecte WebViewer. Tothom que disposés de l'enllaç podria accedir-hi.

Un cop tenim el compte creat entrem a https://www.dropbox.com/developers/apps i creem una carpeta que compartirem amb les aplicacions que desitgem.



Cliquem el botó Create App i anem a la següent finestra on escollirem les opcions que veiem a la imatge. Tot seguit introduirem el nom de l’app que accedirà a la carpeta compartida.



Un cop marcades les opcions, cliquem a Create app i ens envia a una nova finestra on hi tindrem l’APIkey, l’APIsecret i el botó Generate que clicarem i que ens generarà un Acces Token.



L'acces token generat l'utilitzarem més endavant per a identificar la nostra app i que Dropbox ens permeti accedir a les dades emmagatzemades en la carpeta creada.

Per poder continuar amb el següent apartat, caldrà que accedim a Dropbox amb el navegador i gravem en aquesta carpeta un parell d’arxius que continguin imatges.

Quin servei utilitzarem per accedir a les dades?

Per efectuar aquesta acció recorrerem a les APIs de Dropbox. Una API, Application Programming Interface, és una funció que podem utilitzar per dur a terme alguna tasca sense haver de programar-la.

Hi ha moltísissimes APIs, algunes de pagament i altres gratuïtes, que ofereixen gran diversitat de serveis a través d'Internet i que podem utilitzar des de les nostres apps.

Si en volem descobrir hi ha diferents pàgines web que les recullen. A tall d'exemple us facilitem el següent vincle per descobrir-ne de noves.

Dropbox en concret ofereix APIs que ens permetran efectuar operacions molt diferents amb les dades que hi tinguem emmagatzemades i que podeu consultar a través del següent enllaç.

Cada API demana una sèrie de paràmetres concrets facilitats d'una forma concreta i per tant cal documentar-se be i provar-les a fons abans de fer-ne ús. La documentació l'acostumen a facilitar els propis editors d'APIs. A Dropbox disposem d'un entorn, Dropbox API Explorer, que ens permet simular les crides a les seves APIs. Us recomanem també una extensió de Google Chrome anomenada PostMan que permet simular crides a qualsevol API.



En la imatge prèvia mostrem la simulació d'un crida a una API de Dropbox mitjançant PostMan que permet descarregar un arxiu de la carpeta compartida.

Comencem amb l’aplicació

Aquesta aplicació ens permetrà dur a terme tres operacions:

  • Consultar els arxius que tenim a la carpeta compartida.
  • Baixar-ne arxius.
  • Pujar-hi arxius que tinguem al dispositiu mòbil.

L'aspecte de la interfície serà el que segueix:



Hem dissenyat una interfície molt senzilla en la qual disposem de tres botons per llistar els arxius de la carpeta de Dropbox, baixar un arxiu de la carpeta o pujar un arxiu del dispositiu mòbil a la carpeta. L’objecte que porta per títol Llistat, es un ListPicker on guardarem la llista d’arxius de la carpeta de Dropbox.

A més dels objectes visibles utilitzarem tres objectes Web que ens permetran fer peticions a tres APIs diferents. El fet d’utilitzar tres objectes de tipus Web diferents ens permetrà simplificar el codi mitjançant el qual gestionem les respostes de les crides a aquests objectes.

Consultem els arxius que tenim disponibles a la nostra carpeta.

Comencem l’aplicació desenvolupant la funcionalitat d’explorar els arxius que tenim penjats a Dropbox.

Per fer-ho utilitzarem un dels objectes Web, que ens permetrà fer peticions HTTP. Habitualment hem utilitzat aquest objecte per visualitzar el contingut d'alguna pàgina Web, però ens permet també fer peticions a APIs que ens permetran obtenir altres serveis utilitzant els verbs següents: GET, POST, PUT, DELETE,… En aquest enllaç podeu consultar quina funció té cadascun dels verbs anteriors.

En el cas amb el que comencem farem una petició de tipus POSTTEXT que ens retornarà un llistat dels arxius que tenim en la carpeta compartida.

Utilitzarem diferents camps de l'objecte Web per configurar correctament la crida a l'API. En el cas que ens ocupa definirem els camps tal com segueix:

  • URL: Amb aquest camp determinem quina API volem utilitzar. En el cas que ens ocupa, volem accedir al llistat d'arxius de la carpeta compartida i per fer-ho utilitzarem l'API anomenada list_folder.



  • Request Headers: En aquest camp facilitarem a l'API paràmetres com la clau identificativa que ens ha de permetre accedir a la carpeta compartida entre d'altres.



La informació que intercanviem amb l'API anirà codificada en format JSON, JavaScript Open Notation. És un format lleuger per intercanviar dades de fàcil lectura per part de les persones i fàcilment interpretable per les màquines.

Per enviar la consulta que ens ha de retornar el llistat d’arxius que hi ha a la carpeta compartida hem de fer una crida a l’objecte Web tal com mostra la següent impressió de pantalla:

A part dels camps de configuració de l'objecte Web, cal destacar també els següents aspectes:

  • A la variable global AccessToken i ha el Token que hem generat a Dropbox prèviament i que ens donarà permís per accedir a la carpeta compartida.

  • Donat que la crida la fem amb una capçalera, la fem com a PostText.

En aquest enllaç hi ha informació més detallada sobre el format en el qual s’ha de fer la crida i explicació de més paràmetres per si ens ens interessa modificar la consulta.

L’objecte Web ens retornarà el resultat de la crida al cap d’una estona. Estarem atents a la resposta mitjançant l’esdeveniment when Web.GotText. que ens retornarà la resposta en 4 variables locals al procediment. La que realment ens interessa és la variable responseContent, que és on hi ha el llistat dels arxius de la nostra carpeta. És un text en format JSON amb la següent estructura:

El paràmetre entries és una llista on cada element correspon a un dels arxius. Cada arxiu té un paràmetre anomenat name el valor del qual és el nom de l'arxiu.

Posarem els noms dels arxius en un ListPicker:

Un cop fet això, ja podem cridar al procediment LPllistat_arxius.Open per tal que ens mostri el llistat dels arxius de la carpeta. Quan l'usuari hagi seleccionat un arxiu en concret el mostrarem al quadre de text. Aquesta acció ens permetrà actuar sobre aquest arxiu per descarregar-lo de Dropbox en el següent apartat.