Рубрики
Без рубрики

Бесплатный курс: построить организатор расходов с ES6 и Dropbox

В моем предыдущем запуске мы сильно использовали API Dropbox в нашем производственном процессе. Наши продукты были детскими книгими приложениями для iPad, и каждая книга была просто коллекция папок Dropbox, содержащая все визуальные эффекты, музыку и голоса для книги. У этого было два больших преимущества: оно предоставлено

Автор оригинала: FreeCodeCamp Community Member.

В моем предыдущем запуске мы сильно использовали API Dropbox в нашем производственном процессе. Наши продукты были детскими книгими приложениями для iPad, и каждая книга была просто коллекция папок Dropbox, содержащая все визуальные эффекты, музыку и голоса для книги. У этого было два больших преимущества: он предоставил всем интерфейс, который они уже знали, как использовать, и это было дешевле, чем создание пользовательского интерфейса.

Поэтому, когда Dropbox спросил Scrimba, были ли мы заинтересованы в создании спонсируемого курса на их API, в наших умах не было никаких сомнений, как мы знали, насколько полезны их API.

Во-вторых, это спонсорство также позволяет нам создавать еще больше курсов для нашего сообщества в течение всего 2019 года. Поэтому мы очень благодарны за заинтересованность в Dropbox в поддержке Scrimba.

Теперь давайте посмотрим на фактический курс.

вступление

Инструктор этого курса – Кристиан Дженсен передний разработчик на базе в штате Юта. Некоторые из вас могут знать его от учебных пособий по реагированным крючкам, которые он создал на Scrimba в прошлом году, и которые наслаждались многими людьми.

Кристиан начинает курс, предоставив вам обзор того, что вы должны знать, прежде чем начать, и то, что вы можете ожидать, чтобы учиться на протяжении всего курса.

Как предпосылки для курса, было бы хорошо узнать, но не нужно, какой-то базовый HTML и JavaScript. Если вы не совсем знакомы с JS, вы все еще можете следовать вместе с этим курсом, так как API действительно хорошо переводит на другие языки.

Конечная цель курса состоит в том, чтобы сделать вас способным построить приложение в верхней части папок Dropbox, иллюстрированных приложением Организатора расходов, которое Christian строит на всех уроках.

Это идеальный пример чего-то, что является большим болью для многих компаний и фрилансеров, а именно отслеживание поступлений!

Настраивать

Перед тем, как мы погрузимся в код, Christian дает нам краткое, необязательно, обзор установки для тех, кто хочет запустить приложение в этом уроке самостоятельно.

Первое, что вам нужно сделать, это Голова до Dropbox. На сайте Dropbox перейдите в Мои приложения и выберите Dropbox API :

Далее мы выбираем Папка приложения Тип доступа, просто чтобы увидеть, как он работает, и, наконец, мы найменем наше приложение.

После того, как мы попали в Создать приложение Кнопка и после того, как наше приложение будет сгенерировано, мы видим экран настроек.

В настройках нам действительно нужен только ОАУТ 2 раздел и под Сгенерированный токен доступа нажмите Генерировать Кнопка, чтобы получить токен доступа, мы будем использовать в следующей части нашего учебника.

Это все!

Импортировать SDK

В этом актеры Christian показывает нам, как импортировать SDK и начать использовать его.

Быстрая сторона примечания: даже в этом курсе используется SDK SDK для Dropbox API, сам SDK в основном одинаково через языки программирования.

Давайте начнем с импорта JavaScript SDK.

// note that the import is named  
import { Dropbox } from 'dropbox';

Класс создается объектом конфигурации, которые нуждаются в Аксессуары и извлечение библиотеки. Мы будем использовать обычную извлекать В курсе, и вы можете получить свой Аксессуары Если вы хотите, в вашей учетной записи Developer Dropbox.

import { Dropbox } from 'dropbox';

const dbx = new Dropbox({  
  accessToken: 'aeOL1E1HS0AAAAAAAAAALX6z1ogWy75HGE_HBN-NNpJNfhnEa1kjF1vsJ_t7Wf8k', 
  fetch  
})

Примечание: Аксессуары Выше было отменено, поэтому не стоит использовать его в своем собственном коде.

Получить файлы

До сих пор христианин показал нам, как создать экземпляр класса.

Полный список методов в классе можно найти в Официальные документы страницы Отказ

В этом актеры мы узнаем о FileSListfolder () метод. Он принимает папку и _S_TARTS, возвращая содержимое папки.

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

// for a full console.log results, visit:  
// [https://scrimba.com/p/pnyeEhr/cGvvanuy](https://scrimba.com/p/pnyeEhr/cGvvanuy)

Есть несколько вещей, которые нужно помнить, когда мы используем FileSListfolder () :

  • Это возвращает обещание.
  • Чтобы указать корневой путь, нам нужно указать пустую строку '' И не '/'

Визуализация файлов

В этом уроке христианин покажет нам, как рендерировать файлы, которые мы получаем от FileSListfolder () от предыдущего актеров. Он предоставит нам какой-то код BoaterPlate Vanilla JS, чтобы начать нас, поэтому мы можем сосредоточиться на самой интересной части этого урока – файлов рендеринга.

Давайте напишем RenderFiles () Функция вместе с христианином.

Нам нужно добавить в filelistelem.innerhtml Все алфавитно отсортированные файлы, убедившись, что мы вставляем папки сначала. Затем мы отображаем каждую папку и файл на

  • и присоединиться к использованию Присоединиться ('') Во избежание рендеринга массива вместо строки.

    И там мы идем, наш список оказанных файлов!

    Рендеринговые миниатюры

    На этом скринкасте Cristian сосредоточен на том, чтобы оказание миниатюр, и мы рассмотрим реальные миниатюры из Dropbox в следующем уроке.

    Мы собираемся изменить наши RenderFiles () функция. В .map Часть, мы можем проверить, существует ли миниатюр для файла, а затем использовать его, в противном случае используйте по умолчанию. Имейте в виду, что папки не имеют миниатюр.

    Изображения по умолчанию будут предоставлены как строки Base64, и если вы будете следовать вместе с курсом в своем собственном редакторе, Вы можете посетить актеры, чтобы скопировать их Отказ

    Отлично, теперь у нас есть миниатюры по умолчанию.

    Получить миниатюры

    Как христианин обещал в последнем уроке, теперь мы собираемся оказывать фактические миниатюры, мы можем получить от Dropbox API для файлов, которые их имеют.

    Мы собираемся добавить, а затем создать Getthumbnails () нашему UpdateFiles () метод.

    const updateFiles = files => {  
  state.files = [...state.files, ...files]  
  renderFiles()  
  getThumbnails(files)  
}

    Чтобы получить миниатюры, мы можем использовать существующую конечную точку API:

    // [http://dropbox.github.io/dropbox-sdk-js/Dropbox.html](http://dropbox.github.io/dropbox-sdk-js/Dropbox.html)

dbx.filesGetThumbnailBatch({  
  entries: [{  
    path: '',  
    // preferred size for a thumbnail  
    size: 'w32h32'  
  }]  
})

    И это готово Getthumbnails () Функция:

    Если вы заинтересованы в подробном проходе или хотите скопировать код, не стесняйтесь прыгать в фактический листок Отказ

    Async/a ждать

    До сих пор мы использовали два API, которые возвращают обещания. Мы были разрешены их, используя .then () И на этом скринкасте христианин собирается показать нам, как мы можем ревертировать их, используя Async/await Отказ

    Использовать Async/await Мы объявляем async Перед нашей функцией и ждать перед нашим вызовом API.

    Давайте посмотрим, как мы можем ревертировать наши init () функция.

    const init = async () => {  
  const res = await dbx.filesListFolder({  
    path: '',  
    limit: 20  
  })  
  updateFiles(res.entries)  
}

    И теперь давайте рефактором Getthumbnail () :

    Курсор

    В этом литье мы собираемся узнать о концепции Dropbox курсора.

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

    Например, у вас есть 100 файлов, и вы запросили первые 20. Курсор перейдет в 21-й файл и даст вам знать, что у вас есть больше файлов для скачивания через Has_More: True поле. Чем больше файлов, которые вы запрашиваете, тем дальше курсор идет до тех пор, пока он не говорит вам, что не осталось больше файлов has_more: false Отказ

    Это то, что он будет выглядеть на самом деле.

    Вы можете использовать строку курсора, чтобы сообщить API, где курсор, поэтому вы не получаете файлы, которые у вас уже есть.

    На следующем уроке Christian покажет нам, как мы можем применить эту концепцию в наше приложение и использовать курсор, чтобы получить больше файлов.

    Получить больше файлов

    Давайте обновим init () Способ загрузить дополнительные файлы, если есть какие-либо, проверяя Has_more недвижимость на нашем ответе.

    const init = async () => {  
  const res = await dbx.filesListFolder({  
    path: '',  
    limit: 20  
  })  
  updateFiles(res.entries)  
  if (res.has_more) {  
    getMoreFiles(res.cursor, more => updateFiles(more.entries))  
  }  
}

    Мы можем улучшить пользовательский опыт, но добавление загрузки, когда необходимо загрузить больше файлов.

    const loadingElem = document.querySelector('.js-loading')

const init = async () => {  
  const res = await dbx.filesListFolder({  
    path: '',  
    limit: 20  
  })  
  updateFiles(res.entries)  
  if (res.has_more) {  
    loadingElem.classList.remove('hidden')  
    getMoreFiles(res.cursor, more => updateFiles(more.entries))  
    loadingElem.classList.add('hidden')  
  } else {  
    loadingElem.classList.add('hidden')  
  }  
}

    Теперь мы можем реализовать GetMorefiles () функция.

    const getMoreFiles = async (cursor, cb) => {  
  const res = await dbx.filesListFolderContinue({ cursor })

// we check if the callback is provided and if so - call it  
  if (cb) cb(res)

if (res.has_more) {  
    // if there are more files, call getMoreFiles recursively,  
    // providing the same callback.  
    await getMoreFiles(res.cursor, cb)  
  }  
}

    Изменить путь к файлу

    Вау, мы написали несколько действительно удивительных кода.

    Одна вещь, которая будет действительно крутой, это если бы мы не были так ограничены только корневым путем.

    Это именно мы собираемся учиться в этом актеры.

    Чтобы начать нас, Christian внес некоторые изменения в HTML и CSS в нашем приложении, и основное изменение – Путь папки поле. Именно здесь пользователь может указать папку, к которой они хотели бы пойти.

    Мы можем сделать эту работу, слушая событие «Отправить» на rootpathform , когда пользователь позволяет нам знать, где они хотят пойти. Затем мы проверяем их вход и предотвращайте базовые ошибки, такие как используя неправильный корпус для имени папки. Мы также должны хранить значение rootpathinput в нашем Государство Чтобы быть в состоянии повторно использовать его в остальной части нашего приложения.

    Переместить файлы

    В этом уроке мы собираемся реализовать основную функцию нашего приложения – возможность организовать наши файлы в папки, основанные на дате измененной.

    Во-первых, нам нужно добавить какой-то организационный код, чтобы убедиться, что наша основная функциональность чувствует себя приятно нашим пользователям, прежде чем мы реализуем MoveFileStodatedFolders () Отказ

    const organizeBtn = document.querySelector('.js-organize-btn')

organizeBtn.addEventListener('click', async e => {  
  const originalMsg = e.target.innerHTML  
  e.target.disabled = true  
  e.target.innerHTML = 'Working...'  
  await moveFilesToDatedFolders()  
  e.target.disabled = false  
  e.target.innerHTML = originalMsg  
})

    Далее, давайте реализуем MoveFileStodatedFolders () это будет использовать Dropbox’s filesmovebatchv2 () Отказ

    // Basic API implementation.   
dbx.filesMoveBatchV2({  
  entries: [{  
    from_path: 'some_folder',  
    to_path: 'some_other_folder'  
  }]  
})

    Конечно, мы не собираемся использовать жесткозедированные ценности в нашем приложении, и Christian покажет нам, как создать Записи Массив, организованный по дате модифицированное значение, поэтому имена папок будут иметь имена на основе этих дат.

    Показать перемещенные файлы

    На предыдущем скринкоре Christian показал нам, как перемещать файлы в свои собственные папки на основе модифицированной даты, и в этом актеры мы узнаем, как уточнить существующую функциональность.

    filesmovebatchv2 () Возвращает одну из двух вещей: Успех Если вызов был немедленно успешен, и это может произойти, если просим переместить один или два файла. Тем не менее, скорее всего, он собирается вернуть объект с недвижимостью async_job_id И это означает, что ваш вызов выполняется.

    В этом случае мы можем использовать filesmovebatchcheckv2 () Чтобы проверить на нашу работу до завершения, или другими словами, не In_Progress Отказ

    Вот где христианин помогает нам переписать MoveFileStodatedFolders () Использование аккуратного сделать пока Цикл, ключевая особенность которого, заключается в том, что она гарантирована как минимум один раз.

    Теперь нам нужно сделать еще одну вещь – после того, как пользователь переместится файлы, мы хотим показать им, как выглядит новое состояние, без них, без них, чтобы обновить страницу.

    Мы, по сути, хотите повторно использовать этот кусок функциональности:

    state.files = []  
loadingElem.classList.remove('hidden')  
init()

    И давайте извлечь его в новый Сброс () метод.

    Теперь мы можем увидеть функциональность, работающую. Хит «Организовать» И посмотрите все наши файлы, которые волшебны вставляют в папки. Вот гиф как это работает:

    Заключение

    Это конец курса, поэтому поздравляю с завершением его! Теперь вы должны быть знакомы с тем, как получить файлы и миниатюры и как переместить файлы с помощью API Dropbox. Кроме того, вы узнали несколько концепций ES6.

    Наконец, я хочу поблагодарить Dropbox для спонсирования и оплата за этот пост и сам курс. Это помогает Scrimba поддерживать свет, и он позволяет нам создать более бесплатный контент для нашего сообщества в течение 2019 года.

    Счастливое кодирование:)

    Читайте ещё по теме: