Naučite Dropbox API za 5 minuta

Ovaj članak naučit će vas minimumu koji trebate znati da biste započeli s izradom aplikacija na vrhu Dropbox API-ja.

Nakon što ga pročitate, možete pogledati i naš besplatni tečaj o Dropbox API-ju ako želite saznati više. Na tom ćete tečaju naučiti kako izraditi aplikaciju organizatora troškova pomoću modernog JavaScript-a.

Kliknite na sliku da biste došli do našeg tečaja Dropbox

Ovaj članak koristi JavaScript za primjere, međutim, SDK-ovi su vrlo slični među jezicima, pa čak i ako ste, na primjer, programer Python, to bi i dalje trebalo biti relevantno.

Postava

Da biste mogli graditi na vrhu Dropboxa, prvo trebate Dropbox račun. Nakon što se registrirate, prijeđite na odjeljak za programere. Odaberite Moje aplikacije s lijeve strane nadzorne ploče i kliknite Stvori aplikaciju .

Odaberite sljedeće postavke i aplikaciji dajte jedinstveno ime.

Preferirane postavke za ovaj vodič

Preferirane postavke za ovaj vodič

Na nadzornoj ploči idite na odjeljak OAuth 2 u odjeljku Generirani pristupni token i kliknite Generategumb da biste dobili API accessTokenkoji ćemo spremiti za kasnije.

Sada, instalirajmo aplikaciju Dropbox za stolna računala. Prijavite se u aplikaciju s novim vjerodajnicama za razvojne programere i trebali biste moći vidjeti mapu s istim imenom kao i vaša novostvorena aplikacija. U mom slučaju jest LearnDbxIn5Minutes.

Bacite neke datoteke i slike u mapu kako bismo im mogli pristupiti putem našeg API-ja.

Instalacija i početna klasa Dropbox

Sada instalirajmo Dropbox knjižnicu u naš projekt.

npm install dropbox

ili

yarn add dropbox

Uvezite Dropbox i izradite dbxpomoću naše knjižnice tokena i preuzimanja proslijeđenih u instanciju klase. Ako vam je draža axiosili bilo koja druga knjižnica za dohvaćanje, slobodno je dodajte.

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

Imajte na umu da je Dropbox imenovani uvoz. Razlog je taj što u 'dropbox', na primjer, postoje i druge podknjižnice DropboxTeam, ali mi ćemo se usredotočiti samo na Dropboxovo uputstvo.

Dobivanje datoteka

Prva metoda koju ćemo razmotriti je dobivanje datoteka.

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

filesListFolder()vodi put do ciljne mape i navodi sve datoteke unutar. Ova metoda vraća obećanje.

Također, imajte na umu da ćete unijeti prazan niz, ''a ne kosu crtu '/'kako biste došli do korijena naše aplikacije. Sada je korijen korijen mape naše aplikacije,  a ne Dropbox računa. Tu opciju uvijek možemo promijeniti u postavkama naše aplikacije.

Kada pokrenemo naš kod, konzola bi trebala evidentirati unose u našu mapu Dropbox:

Dohvaćanje više datoteka

U ovom ćemo dijelu pogledati učitavanje daljnjih datoteka s potencijalom za implementaciju paginacije ili značajke beskonačnog pomicanja.

U tu svrhu Dropbox ima koncept a cursorkoji pokazuje naš trenutni položaj između datoteka koje smo dobili i onih koje treba poslati.

Na primjer, imamo mapu s 10 datoteka, a zatražili smo 5. Kursor će nas obavijestiti da postoji još datoteka za preuzimanje putem has-more: truesvojstva na response. Možemo i dalje tražiti datoteke koristeći se filesListFolderContinue()prosljeđivanjem cursordok više ne ostane datoteka i ne dobijemo has_more: false.

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

Kad ispitamo odgovor koji smo dobili u konzoli, možemo vidjeti has_more: true.

Ažurirajmo naš kôd da obrađuje slučajeve kada imamo više datoteka za primanje.

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() 

Pružamo kursor da API obavijesti o unosima koje smo primili, tako da više nećemo primati iste datoteke.

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) } } 

Obratite pažnju na povratni poziv koji pružamo da getMoreFiles()funkcionira. Stvarno je zgodan trik osigurati da naše novoprimljene datoteke dobiju jednak tretman kao i njihovi prethodnici.

Na kraju, kad više nema datoteka za dobivanje, primamo has_more: false

Također je vrijedno spomenuti da je rekurzivni poziv ovdje implementiran radi jednostavnosti vodiča, a ne zbog izvedbe funkcije. Ako imate velike količine podataka za učitavanje, preuredite ih u učinkovitiju funkciju.

Dobivanje sličica

Treća metoda koju ćemo proučiti je dobivanje sličica za naše datoteke.

Da bismo zatražili sličice za učitane datoteke, možemo nazvati filesGetThumbnailBatch().

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

Ova je krajnja točka optimizirana za dobivanje više sličica i prihvaća niz objekata, pri čemu svaki objekt može imati navedena više svojstava.

Bitno svojstvo je path, koje ima ista upozorenja kao i u filesListFolder().

Kao odgovor, našim slikama možemo pristupiti putem thumbnailsvojstava.

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!

Zasluge na slici: 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.

Ako želite saznati više o Dropbox API-ju i na njemu izraditi aplikaciju s Vanilla JavaScript-om, provjerite naš besplatni tečaj o Scrimbi. Uz ovaj post sponzorirao ga je i platio Dropbox. Ovo sponzorstvo pomaže Scrimbi da zadrži svjetla i omogućuje nam da nastavimo stvarati besplatni sadržaj za našu zajednicu tijekom cijele 2019. Veliko hvala Dropboxu na tome!

Sretno kodiranje :)