Apprenez l'API Dropbox en 5 minutes

Cet article vous apprendra le strict minimum que vous devez savoir pour commencer à créer des applications en plus de l'API Dropbox.

Une fois que vous l'avez lu, vous pouvez également consulter notre cours gratuit sur l'API Dropbox si vous souhaitez en savoir plus. Dans ce cours, vous apprendrez à créer une application de gestion des dépenses à l'aide de JavaScript moderne.

Cliquez sur l'image pour accéder à notre cours Dropbox

Cet article utilise JavaScript pour ses exemples, cependant, les SDK sont très similaires dans tous les langages, donc même si vous êtes par exemple un développeur Python, cela devrait toujours être pertinent.

La mise en place

Pour construire sur Dropbox, vous avez d'abord besoin d'un compte Dropbox. Après vous être inscrit, rendez-vous dans la section développeur. Choisissez Mes applications sur le côté gauche du tableau de bord et cliquez sur Créer une application .

Choisissez les paramètres suivants et donnez à votre application un nom unique.

Paramètres préférés pour ce didacticiel

Paramètres préférés pour ce didacticiel

Dans le tableau de bord, accédez à la section OAuth 2 sous Jeton d'accès généré et cliquez sur le Generatebouton pour obtenir une API accessToken, que nous enregistrerons pour plus tard.

Maintenant, installons l'application de bureau Dropbox. Connectez-vous à l'application avec vos nouvelles informations d'identification de développeur et vous devriez pouvoir voir un dossier portant le même nom que votre application nouvellement créée. Dans mon cas, c'est LearnDbxIn5Minutes.

Déposez quelques fichiers et images dans le dossier, afin que nous puissions y accéder via notre API.

Installation et classe initiale de Dropbox

Maintenant, installons la bibliothèque Dropbox dans notre projet.

npm install dropbox

ou

yarn add dropbox

Importez Dropbox et créez dbxavec notre token et notre bibliothèque de récupération passés dans notre instanciation de classe. Si vous préférez axiosou toute autre bibliothèque de récupération, n'hésitez pas à la transmettre à la place.

import { Dropbox } from 'dropbox'; const accessToken = ''; const dbx = new Dropbox({ accessToken, fetch }); 

Notez que Dropbox est une importation nommée. La raison en est qu'il existe d'autres sous-bibliothèques 'dropbox', par exemple DropboxTeam, mais nous nous concentrerons uniquement sur Dropboxce didacticiel.

Obtenir des fichiers

La première méthode que nous allons examiner est d'obtenir des fichiers.

dbx.filesListFolder({ path: '' }).then(response => console.log(response)) 

filesListFolder()prend un chemin vers le dossier cible et répertorie tous les fichiers qu'il contient. Cette méthode renvoie une promesse.

En outre, il convient de garder à l'esprit que vous fournirez une chaîne vide ''et non une barre oblique '/'pour accéder à la racine de notre application. Désormais, la racine est la racine de notre dossier d'application  et non celle du compte Dropbox. Nous pouvons toujours modifier cette option dans les paramètres de notre application.

Lorsque nous exécutons notre code, la console doit enregistrer les entrées de notre dossier Dropbox:

Obtenir plus de fichiers

Dans cette partie, nous allons examiner le chargement d'autres fichiers, avec un potentiel d'implémentation de la pagination ou d'une fonction de défilement infini.

Pour cela, Dropbox a un concept de a cursor, qui indique notre position actuelle entre les fichiers que nous avons reçus et ceux qui doivent être envoyés.

Par exemple, nous avons un dossier avec 10 fichiers, et nous en avons demandé 5. Le curseur nous fera savoir qu'il y a plus de fichiers à télécharger via la has-more: truepropriété sur le response. Nous pouvons continuer à demander des fichiers en filesListFolderContinue()passant cursorjusqu'à ce qu'il ne reste plus de fichiers et que nous obtenions has_more: false.

const getFiles = async () => { const response = await dbx.filesListFolder({ path: '', limit: 5 }) console.log(response) } getFiles() 

Lorsque nous examinons la réponse obtenue dans la console, nous pouvons voir has_more: true.

Mettons à jour notre code pour gérer les cas où nous avons plus de fichiers à recevoir.

const getFiles = async () => { const response = await dbx.filesListFolder({ path: '', limit: 5 }) // We can perform a custom action with received files processFiles(response.entries) if (response.has_more) { // provide a callback for the newly received entries // to be processed getMoreFiles(response.cursor, more => processFiles(more.entries)) } } getFiles() 

Nous fournissons le curseur pour informer l'API des entrées que nous avons reçues, afin que nous ne recevions plus les mêmes fichiers.

const getMoreFiles = async (cursor, callback) => { // request further files from where the previous call finished const response = await dbx.filesListFolderContinue({ cursor }) // if a callback is provided we call it if (callback) callback(response) if (response.has_more) { // if there are more files, call getMoreFiles recursively, // providing the same callback. await getMoreFiles(response.cursor, callback) } } 

Notez le rappel que nous fournissons pour getMoreFiles()fonctionner. C'est une astuce vraiment intéressante pour s'assurer que nos fichiers nouvellement reçus reçoivent le même traitement que leurs prédécesseurs.

Au final, quand il n'y a plus de fichiers à récupérer, nous recevons has_more: false

It’s also worth mentioning that the recursive call is implemented here for simplicity of the tutorial, rather than for the performance of the function. If you have large amounts of data to load, please refactor this out into a more performant function.

Getting thumbnails

The third method we’re going to study is for getting thumbnails for our files.

In order to request thumbnails for the uploaded files, we can call filesGetThumbnailBatch().

dbx.filesGetThumbnailBatch({ entries: [{ path: '', size: 'w32h32', format: 'png', }] }); 

This endpoint is optimized for getting multiple thumbnails and it accepts an array of objects, where each object can have multiple properties specified.

The essential property is path, which holds the same caveats as in filesListFolder().

In our response, we can access our images via the thumbnail properties.

You can see that the thumbnails are not returned as links, but as really really long strings — this is a base64 image. You could use the string in your HTML to set src of to "data:image/jpeg;base64, ${file.thumbnail}".

And if I render my response, I would get these amazing cats!

Crédits image: Max Pixel (1, 2, 3)

Image credits: Max Pixel (1, 2, 3)

Moving files

Lastly, we’re going to cover moving our files from one folder to another.

We can use filesMoveBatchV2() for moving our files in batches from one folder to another. This method works best when implemented as a part of an async function.

The method accepts entries array of objects, that consist of from_path and to_path properties.

filesMoveBatchV2() returns either success if the call was immediately successful, in case there are only a few files to process. However, for bigger workloads, it’s going to return an object with a property async_job_id, and that means that your call is being executed and we will need to check up on it at a later stage.

We can use filesMoveBatchCheckV2() to keep checking for completion of our job until it’s complete and is not in_progress any more.

const entries = { from_path: 'origin_folder', to_path: 'destination_folder } const moveFiles = async () => { let response = await dbx.filesMoveBatchV2({ entries }) const { async_job_id } = response if (async_job_id) { do { response = await dbx.filesMoveBatchCheckV2({ async_job_id }) // This where we perform state update or any other action. console.log(res) } while (response['.tag'] === 'in_progress') } } 

Wrap up

Congratulations! You now have a very basic understanding of Dropbox API and its JavaScript SDK.

Si vous souhaitez en savoir plus sur l'API Dropbox et créer une application avec Vanilla JavaScript, n'oubliez pas de consulter notre cours gratuit sur Scrimba. Il a, avec ce post, été sponsorisé et payé par Dropbox. Ce parrainage aide Scrimba à garder les lumières allumées et nous permet de continuer à créer du contenu gratuit pour notre communauté tout au long de 2019. Un grand merci à Dropbox pour cela!

Bon codage :)