DropboxAPIを5分で学ぶ

この記事では、DropboxAPI上でアプリの作成を開始するために知っておく必要のある最低限のことを説明します。

読んだら、さらに詳しく知りたい場合は、DropboxAPIの無料コースをチェックすることもできます。そのコースでは、最新のJavaScriptを使用して経費オーガナイザーアプリを構築する方法を学習します。

画像をクリックして、Dropboxコースにアクセスしてください

この記事では例としてJavaScriptを使用していますが、SDKは言語間で非常に類似しているため、たとえばPython開発者であっても、関連性があるはずです。

セットアップ

Dropboxの上に構築するには、最初にDropboxアカウントが必要です。登録したら、開発者セクションに進んでください。ダッシュボードの左側にある[マイアプリ]を選択し、[アプリの作成]をクリックします

次の設定を選択し、アプリに一意の名前を付けます。

このチュートリアルの推奨設定

このチュートリアルの推奨設定

ダッシュボードで、[生成されたアクセストークン]の下の[ OAuth 2]セクションに移動し、ボタンをクリックしてAPIを取得します。これは後で保存します。GenerateaccessToken

それでは、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'たとえば、内に他のサブライブラリがあるためですが、このチュートリアルDropboxTeamDropboxはのみ焦点を当てます。

ファイルの取得

これから説明する最初の方法は、ファイルを取得することです。

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

filesListFolder()ターゲットフォルダへのパスを取り、その中のすべてのファイルを一覧表示します。このメソッドはpromiseを返します。

また、アプリのルートに到達するために''、スラッシュ'/'ではなく空の文字列を指定することを覚えておく価値があります。これで、ルートはアプリケーションフォルダーのルートで  あり、Dropboxアカウントのルートではありません。このオプションは、アプリの設定でいつでも変更できます。

コードを実行すると、コンソールはDropboxフォルダーのエントリをログに記録する必要があります。

より多くのファイルを取得する

このパートでは、ページネーションまたは無限スクロール機能を実装する可能性のある、さらにファイルをロードする方法について説明します。

この目的のために、Dropboxには、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!

画像クレジット:最大ピクセル(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に感謝します。

ハッピーコーディング:)