Uzziniet Dropbox API 5 minūtēs

Šis raksts iemācīs minimālo, kas jums jāzina, lai sāktu veidot lietotnes virs Dropbox API.

Kad esat to izlasījis, varat arī apskatīt mūsu bezmaksas kursu Dropbox API, ja vēlaties uzzināt vairāk. Šajā kursā jūs uzzināsiet, kā izveidot izdevumu organizētāja lietotni, izmantojot moderno JavaScript.

Noklikšķiniet uz attēla, lai nokļūtu mūsu Dropbox kursā

Šajā rakstā piemēriem tiek izmantots JavaScript, tomēr SDK dažādās valodās ir ļoti līdzīgi, tāpēc, pat ja esat, piemēram, Python izstrādātājs, tam joprojām vajadzētu būt atbilstošam.

Iestatīšana

Lai izveidotu virs Dropbox, vispirms ir nepieciešams Dropbox konts. Pēc reģistrēšanās dodieties uz izstrādātāja sadaļu. Informācijas paneļa kreisajā pusē izvēlieties Manas lietotnes un noklikšķiniet uz Izveidot lietotni .

Izvēlieties šādus iestatījumus un piešķiriet savai lietotnei unikālu nosaukumu.

Šīs apmācības vēlamie iestatījumi

Šīs apmācības vēlamie iestatījumi

Informācijas panelī dodieties uz sadaļu OAuth 2 sadaļā Generated access token un noklikšķiniet uz Generatepogas, lai iegūtu API accessToken, kuru mēs saglabāsim vēlāk.

Tagad instalēsim Dropbox darbvirsmas lietotni. Piesakieties lietotnē, izmantojot savus jaunos izstrādātāja akreditācijas datus, un jums vajadzētu redzēt mapi ar tādu pašu nosaukumu kā jaunizveidotajai lietotnei. Manā gadījumā tā ir LearnDbxIn5Minutes.

Nometiet dažus failus un attēlus mapē, lai mēs tiem varētu piekļūt, izmantojot mūsu API.

Instalācija un sākotnējā Dropbox klase

Tagad instalēsim Dropbox bibliotēku savam projektam.

npm install dropbox

vai

yarn add dropbox

Importējiet Dropbox un izveidojiet, dbxizmantojot mūsu marķieri un ielādes bibliotēku, kas nodota mūsu klases instantiation. Ja vēlaties axiosvai kādu citu ielādējamo bibliotēku, nekautrējieties to nodot.

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

Ņemiet vērā, ka Dropbox ir nosaukts imports. Iemesls ir tas, ka ir arī citas apakšprogrammas bibliotēkas ietvaros 'dropbox', piemēram, DropboxTeam, bet mēs koncentrēsies tikai uz Dropboxšo pamācību.

Notiek failu iegūšana

Pirmā metode, kuru mēs izskatīsim, ir failu iegūšana.

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

filesListFolder()paņem ceļu uz mērķa mapi un uzskaita visus tajā esošos failus. Šī metode dod solījumu.

Tāpat ir vērts paturēt prātā, ka , lai nokļūtu mūsu lietotnes saknē, jūs norādīsit tukšu virkni, ''nevis slīpsvītru '/'. Tagad sakne ir mūsu lietojumprogrammu mapes sakne,  nevis Dropbox konts. Mēs vienmēr varam mainīt šo opciju mūsu lietotnes iestatījumos.

Kad palaidīsim kodu, konsolei vajadzētu reģistrēt mūsu Dropbox mapes ierakstus:

Iegūstiet vairāk failu

Šajā daļā mēs aplūkosim citu failu ielādi ar iespējām ieviest pagināciju vai bezgalīgas ritināšanas funkciju.

Šim nolūkam Dropbox ir izveidojis jēdzienu a cursor, kas norāda mūsu pašreizējo pozīciju starp saņemtajiem failiem un tiem, kas jānosūta.

Piemēram, mums ir mape ar 10 failiem, un mēs pieprasījām 5. Kursors mums paziņos, ka vietnē ir vairāk lejupielādējamu failu, izmantojot has-more: trueīpašumu response. Mēs varam turpināt pieprasīt failus, izmantojot filesListFolderContinue()pārsūtīšanu, cursorlīdz vairs nav failu, un mēs to saņemsim has_more: false.

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

Kad mēs pārbaudām atbildi, ko saņēmām konsolē, kuru mēs varam redzēt has_more: true.

Atjaunināsim savu kodu, lai rīkotos gadījumos, kad mums ir jāsaņem vairāk failu.

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

Mēs nodrošinām kursoru, lai informētu API par saņemtajiem ierakstiem, tāpēc tos pašus failus mēs vairs nesaņemsim.

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

Ievērojiet atzvanīšanas getMoreFiles()funkciju, kuru mēs nodrošinām . Tas ir patiešām veikls triks, lai pārliecinātos, ka mūsu nesen saņemtie faili izturas tāpat kā pret viņu priekšgājējiem.

Galu galā, kad vairs nav failu, ko iegūt, mēs saņemam has_more: false

Ir arī vērts pieminēt, ka rekursīvais izsaukums šeit tiek ieviests apmācības vienkāršībai, nevis funkcijas veikšanai. Ja jums ir jāielādē liels datu apjoms, lūdzu, pārveidojiet to efektīvākai funkcijai.

Notiek sīktēlu iegūšana

Trešā metode, kuru mēs pētīsim, ir mūsu failu sīktēlu iegūšana.

Lai pieprasītu augšupielādēto failu sīktēlus, mēs varam piezvanīt filesGetThumbnailBatch().

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

Šis galapunkts ir optimizēts, lai iegūtu vairākus sīktēlus, un tas pieņem objektu masīvu, kur katram objektam var norādīt vairākas īpašības.

Būtiskais īpašums ir tas path, kam ir tādas pašas atrunas kā filesListFolder().

Atbildot uz to, mēs varam piekļūt saviem attēliem, izmantojot thumbnailīpašumus.

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!

Attēlu kredīti: 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.

Ja vēlaties uzzināt vairāk par Dropbox API un izveidot virs tā lietotni ar Vanilla JavaScript, noteikti pārbaudiet mūsu bezmaksas kursu Scrimba. Kopā ar šo ziņu to sponsorēja un apmaksāja Dropbox. Šī sponsorēšana palīdz Scrimba uzturēt apgaismojumu un ļauj mums turpināt veidot bezmaksas saturu mūsu kopienai visu 2019. gadu. Tāpēc liels paldies Dropbox par to!

Priecīgu kodēšanu :)