Дізнайтеся 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.

Якщо ви хочете дізнатись більше про API Dropbox і створити на ньому додаток із використанням Vanilla JavaScript, перегляньте наш безкоштовний курс на Scrimba. Разом з цим повідомленням його спонсорує та оплачує Dropbox. Це спонсорство допомагає Scrimba утримувати світло, і це дозволяє нам продовжувати створювати безкоштовний контент для нашої спільноти протягом 2019 року. Тож велика подяка Dropbox за це!

Щасливого кодування :)