dropbox免费容量_免费课程：使用ES6和Dropbox构建费用管理器

dropbox免费容量

In my previous startup, we used the Dropbox API heavily in our production process. Our products were children’s book apps for iPad, and each book was simply a collection of Dropbox folders containing all the visuals, music and voice-overs for the book. This had two big benefits: it provided everyone with an interface they already knew how to use, and it was cheaper than building a custom interface.

在我之前的初创公司中，我们在生产过程中大量使用了Dropbox API。 我们的产品是iPad专用的儿童读物应用程序，每本书只是一个Dropbox文件夹的集合，其中包含该书的所有图像，音乐和旁白。 这有两个很大的好处：它为每个人提供了他们已经知道如何使用的界面，并且比构建自定义界面便宜。

So when Dropbox asked Scrimba whether we’d be interested in creating a sponsored course on their API, there was no doubt in our minds, as we knew how useful their API can be.

因此，当Dropbox询问Scrimba我们是否有兴趣在其API上开设赞助课程时，毫无疑问，因为我们知道他们的API会很有用。

Secondly, this sponsorship also allows us to create even more courses for our community throughout 2019. So we’re very thankful for Dropbox being interested in supporting Scrimba.

其次，这项赞助还使我们能够在整个2019年为社区创建更多的课程。因此，我们非常感谢Dropbox对支持Scrimba感兴趣。

Now let’s have a look at the actual course.

现在让我们看一下实际的过程。

介绍 (Intro)

The instructor of this course is Christian Jensen, a front-end developer based in Utah. Some of you might know him from the React Hooks tutorials he created on Scrimba last year, and which a lot of people enjoyed.

该课程的讲师是总部位于犹他州的前端开发人员Christian Jensen 。 你们中的一些人可能会从他去年在Scrimba上创建的React Hooks教程中认识他，并且很多人都喜欢他。

Christian starts off the course by giving you an overview of what you should know before you start, and what you can expect to learn throughout the course.

克里斯蒂安(Christian)从课程开始，向您概述了在开始之前应该了解的知识以及在整个课程中可以学到的知识。

As prerequisites for the course, it would be good to know, but not necessary, some basic HTML and JavaScript. If you’re not really familiar with JS, you can still follow along with this course, as the API translates really well into other languages.

作为本课程的先决条件，最好但不是必须了解一些基本HTML和JavaScript。 如果您不太熟悉JS，那么您仍然可以继续学习本课程，因为API可以很好地将其翻译成其他语言。

The end goal of the course is to make you capable of building an app on top of Dropbox folders, exemplified with the expense organizer app which Christian builds throughout the lessons.

本课程的最终目标是使您能够在Dropbox文件夹之上构建应用程序，例如Christian在整个课程中构建的费用管理器应用程序。

It’s a perfect example of something which is a lot of pain for many companies and freelancers, namely keeping track of receipts!

对于许多公司和自由职业者来说，这就是一个很好的例子，那就是跟踪收据！

建立 (Set Up)

Before we dive into the code, Christian gives us a brief, optional, overview of the setup for those who wish to run the app in this tutorial on their own.

在深入研究代码之前，Christian为希望自己在本教程中运行该应用程序的用户提供了简短的，可选的安装概述。

The first thing you need to do is head to Dropbox. On the Dropbox website, go to My apps and choose Dropbox API:

您需要做的第一件事是前往Dropbox。 在Dropbox网站上，转到我的应用，然后选择Dropbox API ：

Next, we choose App folder access type, just to see how it works, and lastly, we will name our app.

接下来，我们选择“ 应用程序”文件夹访问类型，以查看其工作方式，最后，我们将为应用程序命名。

After we hit the Create app button and after our app is generated, we see the settings screen.

点击创建应用程序按钮并生成应用程序后，我们会看到设置屏幕。

In the settings, we really need only the OAuth 2 section and under Generated Access Token, click Generate button to get an access token we will use in the next part of our tutorial.

在设置中，我们实际上仅需要OAuth 2部分，并在Generated Access Token下 ，单击Generate按钮以获取将在本教程的下一部分中使用的访问令牌。

That’s all!

就这样！

导入SDK (Import the SDK)

In this cast, Christian shows us how to import the SDK and start using it.

在此演员表中，Christian向我们展示了如何导入SDK并开始使用它。

A quick side note: even though in this course JavaScript SDK for Dropbox API is used, the SDK itself is basically the same across the programming languages.

快速说明：即使在本课程中使用了Dropbox APIJavaScript SDK，SDK本身在各种编程语言中也基本相同。

Let’s begin with importing the JavaScript SDK.

让我们从导入JavaScript SDK开始。

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

The class is instantiated with a configuration object, that needs accessToken and a fetching library. We will be using plain fetch in the course and you can get your accessToken, if you wish, in your Dropbox Developer Account.

该类由配置对象实例化，该对象需要accessToken和获取库。 我们将在本课程中使用普通fetch ，并且您可以在Dropbox开发人员帐户中获取accessToken (如果需要)。

import { Dropbox } from 'dropbox';

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

Note: the accessToken above has been revoked, so it’s no point trying to use it in your own code.

注意：上面的accessToken已被撤销，因此尝试在您自己的代码中使用它是没有意义的。

获取文件 (Get Files)

So far, Christian showed us how to instantiate a class.

到目前为止，克里斯汀(Christian)向我们展示了如何实例化课程。

A full list of methods on the class can be found at the official docs page.

有关该类方法的完整列表，请参见官方文档页面 。

In this cast, we will learn about the filesListFolder() method. It accepts a folder and _s_tarts returning the contents of the folder.

在此演员表中，我们将学习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)

There are a few things to keep in mind when we use filesListFolder():

当我们使用filesListFolder()时，需要牢记一些注意filesListFolder() ：

• it returns a promise.
  它返回一个承诺。

• to specify a root path we need to specify an empty string '' and not '/'

  要指定根路径，我们需要指定一个空字符串''而不是'/'

渲染文件 (Render Files)

In this lesson, Christian will show us how to render files that we get from filesListFolder() from the previous cast. He’ll provide us with some boilerplate vanilla JS code to get us started, so we can focus on the most interesting part of this lesson — rendering files.

在本课程中，Christian将向我们展示如何渲染从上一个演员表的filesListFolder()获得的文件。 他将为我们提供一些样板的原始JS代码以帮助我们入门，因此我们可以专注于本课中最有趣的部分-渲染文件。

Let’s write the renderFiles() function, together with Christian.

让我们与Christian一起编写renderFiles()函数。

We need to add to fileListElem.innerHTML all the alphabetically sorted files, making sure that we put folders first. We then map every folder and file to a <li> and join using join('') to avoid rendering an array instead of a string.

我们需要将所有按字母顺序排序的文件添加到fileListElem.innerHTML ，确保将文件夹放在首位。 然后，我们将每个文件夹和文件映射到<li>并使用join('')以避免渲染数组而不是字符串。

And there we go, our rendered files list!

然后，我们进入渲染文件列表！

渲染缩略图 (Render Thumbnails)

In this screencast, Cristian is going concentrate on rendering the thumbnails and we will look into getting actual thumbnails from Dropbox in the following lesson.

在此截屏视频中，Cristian将专注于呈现缩略图，我们将在下一课中研究如何从Dropbox获取实际的缩略图。

We’re going to modify our renderFiles() function. In the .map part, we can check if the thumbnail exists for a file and then use it, otherwise, use a default. Keep in mind that folders don’t have thumbnails.

我们将修改renderFiles()函数。 在.map部分中，我们可以检查文件是否存在缩略图，然后使用它，否则使用默认值。 请记住，文件夹没有缩略图。

The default images will be provided as base64 strings, and if you follow along with the course in your own editor, you can visit the cast to copy them.

默认图像将作为base64字符串提供，并且如果您在自己的编辑器中按照课程进行操作，则可以访问演员表进行复制 。

Great, now we have default thumbnails rendered and in the next cast Christian is going to show us how to render actual thumbnails that we can get from Dropbox API.

太好了，现在我们已经渲染了默认的缩略图，在下一个演员表中，Christian将向我们展示如何渲染可以从Dropbox API获得的实际缩略图。

获取缩略图 (Get Thumbnails)

As Christian promised in the last lesson, we’re now going to render actual thumbnails we can get from Dropbox API for the files that have them.

正如克里斯蒂安在上一课中所承诺的那样，我们现在将渲染实际的缩略图，这些缩略图可以从Dropbox API获得，用于包含缩略图的文件。

We’re going to add and then create getThumbnails() to our updateFiles()method.

我们将向我们的updateFiles()方法添加并创建getThumbnails() 。

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

To get thumbnails we can use an existing API endpoint:

要获取缩略图，我们可以使用现有的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'  
  }]  
})

And this is the finished getThumbnails() function:

这是完成的getThumbnails()函数：

If you’re interested in a detailed walkthrough or wish to copy the code, feel free to jump into the actual cast.

如果您对详细的演练感兴趣或希望复制代码，请随时进入实际的演员表 。

异步/等待 (Async / Await)

So far we’ve used two API calls that return promises. We’ve been resolving them using .then() and in this screencast, Christian is going to show us how we can refactor them using async/await.

到目前为止，我们已经使用了两个返回诺言的API调用。 我们一直使用.then()解决它们.then()在此截屏视频中，Christian将向我们展示如何使用async/await重构它们。

To use async/await we declare async in front of our function and await before our API call.

要使用async/await我们在函数前声明async并在API调用之前await 。

Let’s look at how we can refactor our init() function.

让我们看看如何重构init()函数。

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

And now let’s refactor getThumbnail():

现在让我们重构getThumbnail() ：

游标 (The Cursor)

In this cast, we’re going to learn about Dropbox’s concept of the cursor.

在此演员表中，我们将学习Dropbox的游标概念。

In plain API terms, the cursor is an indication of where we are among our files.

用简单的API术语来说，光标表示我们在文件中的位置。

For example, you have 100 files, and you requested the first 20. The cursor will move to the 21st file and will let you know that you have more files to download via has_more: true field. The more files you request, the further the cursor goes until it tells you that there are no more files left by has_more: false.

例如，您有100个文件，而您请求的前20个文件。光标将移至第21个文件，并告知您还有更多文件可通过has_more: true字段下载。 您请求的文件越多，光标就会越远，直到它告诉您has_more: false不再剩余文件。

This is what it would look like in reality.

这就是现实中的样子。

You can use the cursor string to let the API know where the cursor is, so you don’t receive the files that you already have.

您可以使用游标字符串来使API知道游标在哪里，因此您不会收到已经拥有的文件。

In the next lesson, Christian will show us how we can apply this concept to our app and use the cursor to get more files.

在下一课中，Christian将向我们展示如何将该概念应用于我们的应用程序并使用光标获取更多文件。

获取更多文件 (Get More Files)

Let’s update init() method to load further files if there are any, by checking has_more property on our response.

通过检查响应中的has_more属性，让我们更新init()方法以加载更多文件(如果有)。

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

We can improve the user experience, but adding a loading message when more files need to be loaded.

我们可以改善用户体验，但是在需要加载更多文件时添加加载消息。

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

Now we can implement getMoreFiles() function.

现在我们可以实现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)  
  }  
}

更改文件路径 (Change the File Path)

Wow, we’ve written some really amazing code so far.

哇，到目前为止，我们已经编写了一些非常出色的代码。

One thing that would be really cool is if we weren’t so restricted to just the root path all the time.

一件很酷的事情是，如果我们不一直都局限于根路径。

This is exactly we are going to learn in this cast.

这正是我们将在本次演练中学习的内容。

To get us started, Christian made some changes to HTML and CSS in our app and the main change is Folder Path field. This is where the user could specify the folder that they would like to go to.

为了让我们入门，Christian在我们的应用程序中对HTML和CSS进行了一些更改，主要更改是“ Folder Path字段。 用户可以在此处指定他们要转到的文件夹。

We can make this work by listening to the submit event on rootPathForm, when the user lets us know where they want to go. We then verify their input and prevent basic errors, like using the wrong casing for a name of a folder. We should also store the value of the rootPathInput in our state to be able to reuse it in the rest of our application.

当用户让我们知道他们想去哪里时，我们可以通过监听rootPathForm上的rootPathForm事件来完成这项工作。 然后，我们验证其输入并防止出现基本错误，例如为文件夹名称使用错误的大小写。 我们还应该在state存储rootPathInput的值，以便能够在我们的其他应用程序中重用它。

移动文件 (Move Files)

In this lesson, we’re going to implement the main function of our app — the ability to organize our files into folders, based on the date modified.

在本课程中，我们将实现应用程序的主要功能-根据修改日期将文件组织到文件夹中的功能。

First, we need to add some organizational code, to make sure that our core functionality feels nice to our users before we implement moveFilesToDatedFolders().

首先，我们需要添加一些组织代码，以确保在实现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  
})

Next, let’s implement moveFilesToDatedFolders() that will use Dropbox’s filesMoveBatchV2().

接下来，让我们实现moveFilesToDatedFolders() ，它将使用Dropbox的filesMoveBatchV2() 。

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

Of course, we’re not going to use hardcoded values in our app and Christian will show us how to generate entries array, organized by date modified value, so the folder names are going to have names based on these dates.

当然，我们不会在应用程序中使用硬编码的值，Christian将向我们展示如何根据日期修改后的值组织entries数组，因此文件夹名称将具有基于这些日期的名称。

显示移动的文件 (Show Moved Files)

In the previous screencast, Christian showed us how to move files into their own folders based on modified date and in this cast we learn how to refine the existing functionality.

在上一个截屏视频中，克里斯蒂安(Christian)向我们展示了如何根据修改后的日期将文件移动到它们自己的文件夹中，并且在本次演员表中，我们学习了如何完善现有功能。

filesMoveBatchV2() returns one of two things: success if the call was immediately successful, and it might happen if we ask to move one or two files. However, most likely it’s going to return an object with a property async_job_id, and that means that your call is being executed.

filesMoveBatchV2()返回的两件事情： success如果调用是立即成功，如果我们问到将一个或两个文件可能会发生。 但是，很可能它将返回一个具有async_job_id属性的对象，这意味着您的调用正在执行。

In this case, we can use filesMoveBatchCheckV2() to check for completion of our job until it’s complete, or in other words, is not in_progress.

在这种情况下，我们可以使用filesMoveBatchCheckV2()来检查工作是否完成，直到完成为止，或者说不是in_progress 。

That’s where Christian helps us to rewrite the moveFilesToDatedFolders()using a neat do while loop, the key feature of which, is that it’s guaranteed to be executed at least once.

这就是Christian帮助我们使用整洁的do while循环重写moveFilesToDatedFolders()的地方，该循环的主要功能是保证至少执行一次。

There is now one more thing we need to do — after the user moves the files, we want to show them what a new state looks like, without them having to refresh the page.

现在，我们还需要做另一件事-用户移动文件后，我们希望向他们显示新状态，而无需刷新页面。

We essentially want to reuse this piece of functionality:

我们本质上是想重用此功能：

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

And let’s extract it into a new reset() method.

然后将其提取到新的reset()方法中。

We can now see the functionality working. Hit ‘Organise’ and watch all of our files getting magically put into folders. Here’s a gif of how it works:

现在，我们可以看到该功能正在运行。 点击“组织” ，查看我们所有的文件都神奇地放入了文件夹。 这是它的工作方式的图像：

结论 (Conclusion)

This is the end of the course, so congratulations on completing it! You should now be familiar with how to get files and thumbnails, and how to move files using the Dropbox API. Plus, you’ll have learned several ES6 concepts.

这是课程的结尾，恭喜您完成！ 现在，您应该熟悉如何获取文件和缩略图，以及如何使用Dropbox API移动文件。 另外，您还将学到一些ES6概念。

Finally, I want to thank Dropbox for sponsoring and paying for this post and the course itself. It helps Scrimba keep the lights on and it enables us to create more free content for our community throughout 2019.

最后，我要感谢Dropbox赞助和为此文章以及课程本身付费。 它有助于Scrimba保持亮灯状态，并使我们能够在整个2019年为社区创建更多免费内容。

Happy coding :)

快乐的编码:)

翻译自: https://www.freecodecamp.org/news/free-course-build-an-expense-organizer-with-es6-and-dropbox-4ec7cd1048ef/

dropbox免费容量