Научете API на Dropbox за 5 минути

Тази статия ще ви научи на минимума, който трябва да знаете, за да започнете да създавате приложения върху API на Dropbox.

След като го прочетете, можете също да проверите нашия безплатен курс по API на Dropbox, ако искате да научите повече. В този курс ще научите как да създадете приложение за организатор на разходи, използвайки съвременен JavaScript.

Кликнете върху изображението, за да стигнете до нашия курс Dropbox

Тази статия използва JavaScript за своите примери, но SDK са много сходни за различните езици, така че дори да сте например разработчик на Python, той все пак трябва да е от значение.

Конфигурацията

За да изградите върху Dropbox, първо се нуждаете от акаунт в Dropbox. След като се регистрирате, преминете към раздела за програмисти. Изберете Моите приложения от лявата страна на таблото за управление и щракнете върху Създаване на приложение .

Изберете следните настройки и дайте на приложението си уникално име.

Предпочитани настройки за този урок

Предпочитани настройки за този урок

В таблото за управление отидете на раздела OAuth 2 под Генериран маркер за достъп и щракнете върху Generateбутона, за да получите API accessToken, който ще запазим за по-късно.

Сега нека инсталираме приложението за настолни компютри Dropbox. Влезте в приложението с новите си идентификационни данни за разработчици и трябва да можете да видите папка със същото име като новосъздаденото приложение. В моя случай е така LearnDbxIn5Minutes.

Пуснете някои файлове и изображения в папката, за да имаме достъп до тях чрез нашия API.

Инсталация и първоначален клас Dropbox

Сега нека инсталираме библиотеката Dropbox в нашия проект.

npm install dropbox

или

yarn add dropbox

Импортирайте Dropbox и създайте dbxс нашата библиотека с маркери и извличане, предадени в екземпляра на нашия клас. Ако предпочитате axiosили друга библиотека за извличане, не се колебайте да я предадете.

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

Имайте предвид, че Dropbox е именован импорт. Причината е, че има и други подбиблиотеки 'dropbox', например DropboxTeam, но ние ще се съсредоточим само върху Dropboxтози урок.

Получаване на файлове

Първият метод, който ще разгледаме, е за получаване на файлове.

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

filesListFolder()отвежда път до целевата папка и изброява всички файлове вътре. Този метод връща обещание.

Също така си струва да имате предвид, че ще предоставите празен низ, ''а не наклонена черта, '/'за да стигнете до корена на нашето приложение. Сега коренът е коренът на нашата папка с приложения,  а не този на акаунта в Dropbox. Винаги можем да променим тази опция в настройките на нашето приложение.

Когато стартираме нашия код, конзолата трябва да регистрира записите в нашата папка Dropbox:

Получаване на повече файлове

В тази част ще разгледаме зареждането на други файлове с потенциал за внедряване на пагинация или функция за безкрайно превъртане.

За тази цел Dropbox има концепция за a cursor, която показва текущата ни позиция между получените от нас файлове и тези, които трябва да бъдат изпратени.

Например имаме папка с 10 файла и поискахме 5. Курсорът ще ни уведоми, че има повече файлове за изтегляне чрез has-more: trueсвойството на response. Можем да продължим да искаме файлове, като използваме filesListFolderContinue()предаване, cursorдокато не останат повече файлове и не получим has_more: false.

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

Когато разгледаме отговора, който получихме в конзолата, можем да видим has_more: true.

Нека актуализираме нашия код, за да обработва случаи, когато имаме повече файлове за получаване.

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

Предоставяме курсора, за да информираме API за записите, които сме получили, така че няма да получаваме същите файлове отново.

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

Обърнете внимание на обратното обаждане, което предоставяме, за да getMoreFiles()функционира. Това е наистина чист трик, за да се уверите, че новопостъпилите ни файлове получават същото третиране като техните предшественици.

В крайна сметка, когато няма повече файлове за получаване, ние получаваме 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!

Кредити за изображения: 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.

Ако искате да научите повече за Dropbox API и да изградите приложение върху него с Vanilla JavaScript, не забравяйте да разгледате нашия безплатен курс за Scrimba. Заедно с тази публикация тя е спонсорирана и платена от Dropbox. Това спонсорство помага на Scrimba да запали светлините и ни дава възможност да продължим да създаваме безплатно съдържание за нашата общност през 2019 г. Така че голяма благодарност на Dropbox за това!

Приятно кодиране :)