Автор оригинала: Per Harald Borgen.
Эта статья научит вам голый минимум, вам нужно знать, чтобы начать создавать приложения в верхней части API Dropbox.
Как только вы прочитали его, вы также можете проверить наш Бесплатный курс на Dropbox API Если вы заинтересованы в обучении больше. В этом курсе вы узнаете, как построить приложение Организатор расходов, используя современный JavaScript.
Эта статья использует JavaScript для своих примеров, однако, SDK очень похожи на языки, поэтому, даже если вы, например, разработчик Python, он все еще должен быть актуален.
Настройка
Для того, чтобы построить на вершине Dropbox, вам сначала нужна Dropbox учетная запись . После того, как вы зарегистрировались, отправляйтесь на Раздел разработчика. Выберите Мои приложения на левой стороне приборной панели и нажмите Создать приложение Отказ
Выберите следующие параметры и дайте свое приложение уникальное имя.
Предпочтительные настройки для этого учебника
На приборной панели перейдите в ОАУТ 2 Раздел под Сгенерированный токен доступа и нажмите на Генерация кнопка, чтобы получить API AccessToken. , что мы будем сэкономить на потом.
Теперь давайте установим Dropbox Desktop App Отказ Войдите в приложение с вашими новыми учетными данными разработчика, и вы сможете увидеть папку с тем же именем, что и в недавно созданном приложении. В моем случае это Deancuredbxin5minutes Отказ
Снимите несколько файлов и изображений в папку, чтобы мы могли получить доступ к ним через нашу API.
Установка и начальный класс Dropbox
Теперь давайте установим библиотеку Dropbox в наш проект.
NPM установить Dropbox
пряжа Добавить Drowbox
Импортировать Dropbox и создать DBX С нашей библиотекой Token и Fetching вступили в нашу классную атмосферу. Если вы предпочитаете 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:
Получить больше файлов
В этой части мы собираемся посмотреть на загрузку дополнительных файлов, причем потенциал для реализации Paginate или функции бесконечного прокрутки.
Для этого Dropbox получил концепцию Курсор , что указывает на нашу текущую позицию между файлами, которые мы получили, и те, которые необходимо отправить.
Например, у нас есть папка с 10 файлами, и мы запросили 5. Курсор даст нам знать, что есть больше файлов для скачивания через Имеет больше: правда Недвижимость на отклик . Мы можем продолжать запрашивать файлы, используя FileSListLastFolderTinue () прохождение в Курсор пока не осталось больше файлов, и мы получаем 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 () функция. Это действительно аккуратный трюк, чтобы убедиться, что наши недавно полученные файлы получают такое же лечение, как их предшественники.
В конце, когда нет больше файлов, чтобы получить, мы получаем имеет больше: ложный
Также стоит отметить, что рекурсивный вызов реализован здесь для простоты учебника, а не для выполнения функции. Если у вас есть большое количество данных для загрузки, пожалуйста, обратитесь к этому в более эффективную функцию.
Получение миниатюр
Третий метод, который мы собираемся учиться, предназначено для получения миниатюр для наших файлов.
Для запроса миниатюр для загруженных файлов мы можем позвонить filegetthumbnailbatch () Отказ
dbx.filesGetThumbnailBatch({
entries: [{
path: '',
size: 'w32h32',
format: 'png',
}]
});
Эта конечная точка оптимизирована для получения нескольких миниатюр, и он принимает массив объектов, где каждый объект может иметь несколько не свойств.
Основное свойство – путь , который держит те же оговорки, что и в FileSListfolder () Отказ
В нашем ответе мы можем получить доступ к нашим изображениям через Миниатюра характеристики.
Вы можете увидеть, что миниатюры не возвращаются в виде ссылок, а как действительно действительно длинные строки – это изображение Base64. Вы можете использовать строку в вашем HTML для установки SRC «Данные: изображение/JPEG; Base64, $ {file.thumbnail}» Отказ
И если я оказываю свой ответ, я бы взял этих удивительных кошек!
Кредиты изображений: Max Pixel ( 1 1 , 2 , 3
Перемещение файлов
Наконец, мы собираемся покрыть перемещение наших файлов из одной папки в другую.
Мы можем использовать filesmovebatchv2 () Для перемещения наших файлов в партиях из одной папки в другую. Этот метод работает лучше всего, когда это реализуется как часть async функция.
Метод принимает Записи Массив объектов, которые состоят из from_path и to_path характеристики.
filesmovebatchv2 () Возвращает либо успех Если вызов был немедленно успешным, в случае, если есть только несколько файлов для обработки. Однако для больших рабочих нагрузок, он собирается вернуть объект с собственностью async_job_id И это означает, что ваш вызов выполняется, и нам нужно будет проверить на нем на более позднем этапе.
Мы можем использовать filesmovebatchcheckv2 () Чтобы продолжать проверять на нашу работу, пока он не будет завершен и не является не In_Progress больше.
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')
}
}
Заворачивать
Поздравляю! Теперь у вас очень простое понимание API Dropbox и его JavaScript SDK.
Если вы хотите узнать больше о API Dropbox и постройте приложение поверх него с помощью Vanilla JavaScript, обязательно проверим наш Бесплатный курс на Scrimba. Он наряду с этим постом был спонсирован и оплачен за Dropbox. Это спонсорство помогает Scrimba поддерживать свет, и он позволяет нам продолжать создавать бесплатный контент для нашего сообщества в течение 2019 года. Так что большое спасибо Dropbox для этого!
Счастливое кодирование:)
Оригинал: “https://www.freecodecamp.org/news/learn-the-dropbox-api-in-5-minutes-fd4626a0df18/”