Lær Dropbox API på 5 minutter

Denne artikel lærer dig det absolutte minimum, du har brug for at vide for at begynde at oprette apps oven på Dropbox API.

Når du har læst det, kan du også tjekke vores gratis kursus på Dropbox API, hvis du er interesseret i at lære mere. På dette kursus lærer du at oprette en udgiftsorganisator-app ved hjælp af moderne JavaScript.

Klik på billedet for at komme til vores Dropbox-kursus

Denne artikel bruger JavaScript til sine eksempler, men SDK'erne er meget ens på tværs af sprog, så selvom du f.eks. Er en Python-udvikler, skal den stadig være relevant.

Opsætningen

For at bygge oven på Dropbox skal du først have en Dropbox-konto. Når du har registreret dig, skal du gå over til udviklerafsnittet. Vælg Mine apps i venstre side af instrumentbrættet, og klik på Opret app .

Vælg følgende indstillinger, og giv din app et unikt navn.

Foretrukne indstillinger til denne tutorial

Foretrukne indstillinger til denne tutorial

Gå til OAuth 2- sektionen under instrumentbrættet under Genereret adgangstoken og klik på Generateknappen for at få en API accessToken, som vi gemmer til senere.

Lad os nu installere Dropbox desktop-appen. Log ind på appen med dine nye udvikleroplysninger, og du skal kunne se en mappe med samme navn som din nyoprettede app. I mit tilfælde er det LearnDbxIn5Minutes.

Slip nogle filer og billeder i mappen, så vi kan få adgang til dem via vores API.

Installation og indledende Dropbox-klasse

Lad os nu installere Dropbox-bibliotek til vores projekt.

npm install dropbox

eller

yarn add dropbox

Importer Dropbox, og opret dbxmed vores token og hentningsbibliotek, der er overført til vores klasse-instantiering. Hvis du foretrækker det axioseller et andet hentningsbibliotek, er du velkommen til at videregive det i stedet.

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

Bemærk, at Dropbox er en navngivet import. Årsagen er, at der 'dropbox'for eksempel er andre underbiblioteker inden for DropboxTeam, men vi vil kun fokusere på Dropboxi denne vejledning.

Henter filer

Den første metode, vi skal se på, er at hente filer.

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

filesListFolder()tager en sti til målmappen og viser alle filerne indeni. Denne metode giver et løfte.

Det er også værd at huske på, at du giver en tom streng ''og ikke en skråstreg '/'for at komme til roden af ​​vores app. Nu er roden roden til vores applikationsmappe  og ikke den til Dropbox-kontoen. Vi kan altid ændre denne mulighed i indstillingerne for vores app.

Når vi kører vores kode, skal konsollen logge indgangene i vores Dropbox-mappe:

Få flere filer

I denne del vil vi se på at indlæse flere filer med potentiale til at implementere pagination eller en uendelig rullefunktion.

Til dette formål har Dropbox fået et begreb a cursor, der angiver vores nuværende position mellem de filer, vi har modtaget, og dem, der skal sendes.

For eksempel har vi en mappe med 10 filer, og vi anmodede om 5. Markøren giver os besked om, at der er flere filer, der kan downloades via has-more: trueejendom på response. Vi kan fortsætte med at anmode om filer ved hjælp af filesListFolderContinue()indlevering, cursorindtil der ikke er flere filer tilbage, og vi får has_more: false.

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

Når vi undersøger svaret, vi fik i konsollen, kan vi se has_more: true.

Lad os opdatere vores kode til at håndtere sager, når vi har flere filer at modtage.

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

Vi giver markøren for at fortælle API'et, hvilke poster vi har modtaget, så vi modtager ikke de samme filer igen.

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

Bemærk tilbagekaldet, vi giver for at getMoreFiles()fungere. Det er et rigtig pænt trick for at sikre, at vores nyligt modtagne filer får samme behandling som deres forgængere.

I sidste ende, når der ikke er flere filer at hente, modtager vi has_more: false

Det er også værd at nævne, at det rekursive opkald er implementeret her for at gøre det lettere for vejledningen snarere end for funktionens udførelse. Hvis du har store mængder data at indlæse, skal du omlægge dette til en mere performant funktion.

Få miniaturer

Den tredje metode, vi skal studere, er at få miniaturer til vores filer.

For at anmode om miniaturer for de uploadede filer kan vi ringe filesGetThumbnailBatch().

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

Dette slutpunkt er optimeret til at få flere miniaturer og accepterer en række objekter, hvor hvert objekt kan have flere egenskaber specificeret.

Den væsentlige egenskab er path, der har de samme forbehold som i filesListFolder().

I vores svar kan vi få adgang til vores billeder via thumbnailegenskaberne.

Du kan se, at miniaturebillederne ikke returneres som links, men som virkelig rigtige lange strenge - dette er et base64-billede. Du kan bruge strengen i din HTML til sæt srcaf til "data:image/jpeg;base64, ${file.thumbnail}".

Og hvis jeg giver mit svar, ville jeg få disse fantastiske katte!

Billedkreditter: Max Pixel (1, 2, 3)

Billedkreditter: Max Pixel (1, 2, 3)

Flytning af filer

Endelig skal vi dække flytning af vores filer fra en mappe til en anden.

Vi kan bruge filesMoveBatchV2()til at flytte vores filer i batches fra en mappe til en anden. Denne metode fungerer bedst, når den implementeres som en del af en asyncfunktion.

Metoden accepterer entriesmatrix af objekter, der består af from_pathog to_pathegenskaber.

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.

Hvis du vil lære mere om Dropbox API og opbygge en app oven på den med Vanilla JavaScript, skal du sørge for at tjekke vores gratis kursus om Scrimba. Det er sammen med dette indlæg blevet sponsoreret og betalt af Dropbox. Dette sponsorat hjælper Scrimba med at holde lyset tændt, og det gør det muligt for os at fortsætte med at skabe gratis indhold til vores samfund i hele 2019. Så en stor tak til Dropbox for det!

Glad kodning :)