クラウド ストレージは、その信頼性、拡張性、セキュリティにより、企業、開発者、研究者にとって同様に不可欠なソリューションとなっています。研究プロジェクトの一環として、私は最近 Dropbox API を React アプリケーションの 1 つに統合し、クラウド ストレージの処理方法を強化しました。

このブログ投稿では、統合プロセスをガイドし、Dropbox API を React アプリケーションに適切に統合するための明確な手順とベスト プラクティスを提供します。

Dropbox 環境のセットアップ

React アプリで Dropbox を使用するための最初のステップは、専用の Dropbox アプリをセットアップすることです。このプロセスにより、アプリケーションは Dropbox の API にアクセスできるようになり、プログラムで Dropbox とやり取りできるようになります。

1 — Dropbox アプリの作成

Dropbox デベロッパー ポータルから Dropbox アプリを作成する必要があります。方法は次のとおりです:

• アカウントの作成: まだ Dropbox アカウントをお持ちでない場合は、Dropbox アカウントを作成します。次に、Dropbox デベロッパー ポータルに移動します。

• アプリの作成: [アプリの作成] をクリックし、必要なアプリの権限を選択します。ほとんどのユースケースでは、「フル Dropbox」 アクセスを選択すると、アプリが Dropbox アカウント全体のファイルを管理できるようになります。

• 構成: プロジェクトのニーズに応じてアプリに名前を付け、設定を構成します。これには、API 権限の指定とアクセス レベルの定義が含まれます。

• アクセストークン生成: アプリ作成後、アクセストークンを生成します。このトークンを使用すると、毎回ユーザーがログインする必要がなく、React アプリが認証され、Dropbox とやり取りできるようになります。

Dropbox を React アプリケーションに統合する

Dropbox アプリの準備ができたので、統合プロセスに進みましょう。

2 — Dropbox SDK のインストール

まず、Dropbox SDK をインストールする必要があります。これは、React アプリを通じて Dropbox と対話するためのツールを提供します。プロジェクト ディレクトリで、次を実行します:

npm install dropbox

Dropbox SDK が依存関係としてプロジェクトに追加されます。

3 — 環境変数の構成

セキュリティ上の理由から、Dropbox アクセス トークンなどの機密情報をハードコーディングすることは避けるべきです。代わりに、環境変数に保存してください。 React プロジェクトのルートに .env ファイルを作成し、次の行を追加します:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 — React で Dropbox クライアントをセットアップする

環境変数を設定したら、SDK をインポートして Dropbox クライアント インスタンスを作成することで、React アプリで Dropbox を初期化します。 Dropbox API の設定例は次のとおりです:

import { Dropbox } from 'dropbox';
const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

Dropbox へのファイルのアップロード

Dropbox が統合された React アプリからファイルを直接アップロードできるようになりました。ファイルのアップロードを実装する方法は次のとおりです:

5 — ファイルのアップロード例

  /**
  * Uploads a file to Dropbox.
  *
  * @param {string} path - The path within Dropbox where the file should be saved.
  * @param {Blob} fileBlob - The Blob data of the file to upload.
  * @returns {Promise} A promise that resolves when the file is successfully uploaded.
  */
 const uploadFileToDropbox = async (path, fileBlob) => {
     try {
         // Append the root directory (if any) to the specified path
         const fullPath = `${REACT_APP_DROPBOX_ROOT_DIRECTORY || ""}${path}`;

         // Upload file to Dropbox
         const response = await dbx.filesUpload({
             path: fullPath,
             contents: fileBlob,
             mode: {
                 ".tag": "overwrite"
             }, // Overwrite existing files with the same name
             mute: true, // Mutes notifications for the upload
         });

         // Return a success response or handle the response as needed
         return true;
     } catch (error) {
         console.error("Error uploading file to Dropbox:", error);
         throw error; // Re-throw the error for further error handling
     }
 };

6 — UI でのファイル アップロードの実装

アップロード機能を React アプリのファイル入力に結び付けることができるようになりました:

const handleFileUpload = (event) => {
  const file = event.target.files[0];
  uploadFileToDropbox(file);
};

return (
  

    
  
);

Dropbox からファイルを取得する

Dropbox からファイルを取得して表示する必要がよくあります。ファイルを取得する方法は次のとおりです:

7 — ファイルの取得と表示

const fetchFileFromDropbox = async (filePath) => {
    try {
        const response = await dbx.filesGetTemporaryLink({
            path: filePath
        });
        return response.result.link;
    } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
    }
};

8 — Dropbox 内のファイルとフォルダーの一覧表示

私たちが統合した重要な機能の 1 つは、Dropbox ディレクトリのフォルダーとファイルを一覧表示する機能です。その方法は次のとおりです:

export const listFolders = async (path = "") => {
    try {
        const response = await dbx.filesListFolder({
            path
        });
        const folders = response.result.entries.filter(entry => entry['.tag'] === 'folder');
        return folders.map(folder => folder.name);
    } catch (error) {
        console.error('Error listing folders:', error);
    }
};

9 — React でのファイルの表示

取得したダウンロード リンクを使用して画像またはビデオを表示できます:

    import React, { useEffect, useState } from 'react';
    import { Dropbox } from 'dropbox';

    // Initialize Dropbox client
    const dbx = new Dropbox({ accessToken: process.env.REACT_APP_DROPBOX_ACCESS_TOKEN });

    /**
    * Fetches a temporary download link for a file in Dropbox.
    *
    * @param {string} path - The path to the file in Dropbox.
    * @returns {Promise} A promise that resolves with the file's download URL.
     */
     const fetchFileFromDropbox = async (path) => {
      try {
        const response = await dbx.filesGetTemporaryLink({ path });
        return response.result.link;
      } catch (error) {
        console.error('Error fetching file from Dropbox:', error);
        throw error;
      }
    };

    /**
    * DropboxMediaDisplay Component:
    * Dynamically fetches and displays a media file (e.g., image, video) from Dropbox.
    *
    * @param {string} filePath - The path to the file in Dropbox to be displayed.
    */
    const DropboxMediaDisplay = ({ filePath }) => {
      const [fileLink, setFileLink] = useState(null);

      useEffect(() => {
        const fetchLink = async () => {
          if (filePath) {
            const link = await fetchFileFromDropbox(filePath);
            setFileLink(link);
          }
        };
        fetchLink();
      }, [filePath]);

      return (
        

          {fileLink ? (
          
          ) : (
          
Loading media...
          )}
        
      );
    };

    export default DropboxMediaDisplay;

ユーザー応答の処理

Dropbox は、Huldra フレームワーク内のアンケートやフィードバック フォームからのユーザー回答を保存するためにも使用されました。ユーザーの応答の保存と管理をどのように処理したかは次のとおりです。

10 — 応答の保存

ユーザーの応答を取得して Dropbox に保存すると同時に、ディレクトリ構造が整理され、管理が容易になるようにします。

export const storeResponse = async (response, fileName) => {
    const blob = new Blob([JSON.stringify(response)], {
        type: "application/json"
    });
    const filePath = `/dev/responses/${fileName}`;

    await uploadFileToDropbox(filePath, blob);
};

11 — 分析のための応答の取得

分析のために応答を取得する必要がある場合、Dropbox API を使用して応答を一覧表示し、ダウンロードできます:

export const listResponses = async () => {
    try {
        const response = await dbx.filesListFolder({
            path: '/dev/responses'
        });
        return response.result.entries.map(entry => entry.name);
    } catch (error) {
        console.error('Error listing responses:', error);
    }
};

このコードは、/dev/responses/ ディレクトリ内のすべてのファイルをリストし、ユーザー フィードバックの取得と分析を簡単にします。

?始める前に:

? Dropbox API と React の統合に関するこのガイドは役に立ちましたか?高く評価してください!
?プロジェクトですでに Dropbox API を使用していますか?コメントであなたの経験を共有してください!
? React アプリを改善しようとしている人を知っていますか?この投稿を広めて共有してください!

?あなたのサポートは、より洞察力に富んだコンテンツの作成に役立ちます!

技術的な洞察をサポート