5 perc alatt megtanulja a Dropbox API-t

Ez a cikk megtanulja azt a minimális szintet, amelyet tudnia kell ahhoz, hogy elkezdhesse alkalmazások létrehozását a Dropbox API tetején.

Miután elolvasta, megnézheti az ingyenes tanfolyamunkat a Dropbox API-n is, ha további információkra kíváncsi. Ezen a kurzuson megtanulhatja, hogyan lehet költségszervező alkalmazást építeni a modern JavaScript használatával.

A képre kattintva eljuthat Dropbox tanfolyamunkra

Ez a cikk a JavaScript-et használja a példáihoz, azonban az SDK-k nagyon hasonlóak az egyes nyelveken, így annak ellenére, hogy Ön például Python fejlesztő, akkor is relevánsnak kell lennie.

A beállítás

A Dropbox tetejére való felépítéshez először Dropbox-fiókra van szükség. A regisztráció után lépjen a fejlesztői részre. Az irányítópult bal oldalán válassza a Saját alkalmazások lehetőséget , majd kattintson az Alkalmazás létrehozása gombra .

Válassza ki a következő beállításokat, és adjon egyedi nevet alkalmazásának.

Az oktatóanyag előnyben részesített beállításai

Az oktatóanyag előnyben részesített beállításai

Az irányítópulton lépjen az OAuth 2 szakaszhoz a Generált hozzáférési token alatt, és kattintson a Generategombra egy API beszerzéséhez accessToken, amelyet későbbre mentünk.

Telepítsük a Dropbox asztali alkalmazást. Jelentkezzen be az alkalmazásba az új fejlesztői hitelesítő adatokkal, és látnia kell egy mappát ugyanazzal a névvel, mint az újonnan létrehozott alkalmazás. Az én esetemben az LearnDbxIn5Minutes.

Dobjon be néhány fájlt és képet a mappába, így hozzáférhetünk hozzájuk az API-nkon keresztül.

Telepítés és kezdeti Dropbox osztály

Most telepítsük a Dropbox könyvtárat a projektünkbe.

npm install dropbox

vagy

yarn add dropbox

Importálja a Dropbox-ot, és hozzon létre dbxa tokenünkkel és a beolvasási könyvtárunkkal, amelyet az osztályunk példánya továbbított. Ha szeretné, axiosvagy bármilyen más beolvasott könyvtárat, nyugodtan adja át.

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

Vegye figyelembe, hogy a Dropbox egy megnevezett import. Ennek oka, hogy vannak más alkönyvtárak is 'dropbox', például DropboxTeam, de Dropboxerre csak ebben az oktatóanyagban fogunk összpontosítani .

Fájlok beszerzése

Az első módszer, amelyet megvizsgálunk, a fájlok megszerzése.

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

filesListFolder()elérési utat vezet a célmappához, és felsorolja az összes fájlt. Ez a módszer ígéretet hoz.

Érdemes azt is szem előtt tartani, hogy egy üres karakterláncot ad meg '', nem pedig perjelet '/'annak érdekében, hogy elérjük az alkalmazásunk gyökerét. Most a gyökér az alkalmazás mappánk gyökere,  nem pedig a Dropbox fióké. Ezt az opciót mindig megváltoztathatjuk az alkalmazás beállításaiban.

Amikor futtatjuk a kódunkat, a konzolnak naplóznia kell a Dropbox mappánk bejegyzéseit:

További fájlok beszerzése

Ebben a részben további fájlok betöltését fogjuk megvizsgálni, amelyekben lehetőség van oldalszámozás vagy egy végtelen görgetési funkció megvalósítására.

Erre a célra a Dropbox kapott egy a koncepciót cursor, amely jelzi a jelenlegi helyzetünket a kapott fájlok és az elküldendő fájlok között.

Például van egy mappánk 10 fájllal, és 5-öt kértünk. A kurzor közli velünk, hogy további fájlok tölthetők le a has-more: truetulajdonságon keresztül a response. Folytathatjuk a fájlok kérését az filesListFolderContinue()átadással, cursoramíg nem marad több fájl, és megkapjuk has_more: false.

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

Amikor megvizsgáljuk a konzolon kapott választ, láthatjuk has_more: true.

Frissítsük kódunkat, hogy kezeljük azokat az eseteket, amikor további fájlokat kapunk.

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

Megadjuk a kurzort, hogy az API értesítse a beérkezett bejegyzéseket, így nem kapjuk meg újra ugyanazokat a fájlokat.

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

Jegyezze fel a visszahívást, amelyet működtetni kívánunk getMoreFiles(). Nagyon ügyes trükk annak biztosítása, hogy újonnan kapott fájljaink ugyanolyan bánásmódban részesüljenek, mint elődeik.

Végül, amikor nincs több fájl megszerzésére, megkapjuk 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!

Kép jóváírások: 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.

Ha többet szeretne megtudni a Dropbox API-ról, és a tetejére egy alkalmazást épít Vanilla JavaScript használatával, feltétlenül nézze meg a Scrimba ingyenes tanfolyamunkat. A bejegyzéssel együtt a Dropbox támogatta és fizette. Ez a szponzor segíti a Scrimbát a lámpák bekapcsolásában, és lehetővé teszi számunkra, hogy 2019 folyamán folytassuk az ingyenes tartalom létrehozását a közösségünk számára. Ezért nagy köszönet a Dropboxnak!

Boldog kódolás :)