أصبح التخزين السحابي حلاً أساسيًا للشركات والمطورين والباحثين على حد سواء نظرًا لموثوقيته وقابلية التوسع والأمان. كجزء من مشروع بحثي، قمت مؤخرًا بدمج Dropbox API في أحد تطبيقات React الخاصة بي، مما أدى إلى تحسين كيفية تعاملنا مع التخزين السحابي.

في منشور المدونة هذا، سأرشدك خلال عملية التكامل، وأقدم تعليمات واضحة وأفضل الممارسات لمساعدتك على دمج Dropbox API بنجاح في تطبيقات React الخاصة بك.

إعداد بيئة Dropbox

الخطوة الأولى لاستخدام Dropbox في تطبيق React هي إعداد تطبيق Dropbox مخصص. ستمنحنا هذه العملية إمكانية وصول التطبيق إلى واجهة برمجة تطبيقات Dropbox وتسمح له بالتفاعل مع Dropbox برمجيًا.

1 - إنشاء تطبيق Dropbox

نحتاج إلى إنشاء تطبيق Dropbox من خلال Dropbox Developer Portal. وإليك الطريقة:

• إنشاء الحساب: إذا لم يكن لديك حساب بالفعل، فقم بإنشاء حساب Dropbox. ثم انتقل إلى Dropbox Developer Portal.

• إنشاء التطبيق: انقر على إنشاء تطبيق وحدد أذونات التطبيق المطلوبة. بالنسبة لمعظم حالات الاستخدام، فإن تحديد "الوصول الكامل إلى Dropbox" يسمح لتطبيقك بإدارة الملفات عبر حساب Dropbox بأكمله.

• التكوين: قم بتسمية تطبيقك وقم بتكوين الإعدادات وفقًا لاحتياجات مشروعك. يتضمن ذلك تحديد أذونات واجهة برمجة التطبيقات (API) وتحديد مستويات الوصول.

• إنشاء رمز الوصول: بعد إنشاء التطبيق، قم بإنشاء رمز وصول. سيسمح هذا الرمز المميز لتطبيق React الخاص بك بالمصادقة والتفاعل مع Dropbox دون الحاجة إلى تسجيل دخول المستخدم في كل مرة.

دمج Dropbox في تطبيق React الخاص بنا

الآن بعد أن أصبح تطبيق Dropbox جاهزًا، دعنا ننتقل إلى عملية التكامل.

2 - تثبيت Dropbox SDK

أولاً، نحتاج إلى تثبيت Dropbox SDK، الذي يوفر الأدوات اللازمة للتفاعل مع Dropbox من خلال تطبيق React الخاص بك. في دليل المشروع الخاص بك، قم بتشغيل ما يلي:

npm install dropbox

سيضيف Dropbox SDK باعتباره تبعية لمشروعك.

3 — تكوين متغيرات البيئة

لأسباب أمنية، يجب علينا تجنب المعلومات الحساسة ذات التشفير الثابت مثل رمز الوصول إلى Dropbox الخاص بك. بدلاً من ذلك، قم بتخزينه في متغير بيئة. في جذر مشروع React الخاص بك، قم بإنشاء ملف .env وأضف ما يلي:

REACT_APP_DROPBOX_ACCESS_TOKEN=your_dropbox_access_token_here

4 - إعداد عميل Dropbox في React

بمجرد تعيين متغيرات البيئة، قم بتهيئة Dropbox في تطبيق React الخاص بك عن طريق استيراد SDK وإنشاء مثيل عميل Dropbox. فيما يلي مثال لإعداد Dropbox API:

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

رفع الملفات إلى Dropbox

يمكنك الآن تحميل الملفات مباشرة من تطبيق React الخاص بك مع Dropbox المدمج. إليك كيفية تنفيذ عمليات تحميل الملفات:

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 - تنفيذ تحميل الملف في واجهة المستخدم

يمكنك الآن ربط وظيفة التحميل بإدخال ملف في تطبيق 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

كانت إحدى الميزات الرئيسية التي قمنا بدمجها هي القدرة على سرد المجلدات والملفات من أدلة 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 الخاص به؟ انشر الكلمة وشارك هذا المنشور!

؟ يساعدنا دعمك في إنشاء محتوى أكثر ثاقبة!

ادعم رؤانا التقنية