خوارزمية حساب التقدم في React useFormStatus: تقدير الإكمال

يوفر الخطاف useFormStatus، الذي تم تقديمه في React 18، معلومات قيمة حول حالة إرسال النموذج. ومع ذلك، فإنه لا يوفر بطبيعته نسبة مئوية للتقدم. تستكشف هذه المقالة كيفية تنفيذ خوارزمية لحساب التقدم لتقدير اكتمال عمليات إرسال النماذج غير المتزامنة باستخدام useFormStatus، مما يعزز تجربة المستخدم أثناء العمليات التي قد تكون طويلة.

فهم useFormStatus

قبل الغوص في الخوارزمية، دعنا نلخص ما يقدمه useFormStatus. فإنه يعيد كائنًا بخصائص تعكس حالة إرسال النموذج. تشمل الخصائص الرئيسية ما يلي:

• pending: قيمة منطقية (boolean) تشير إلى ما إذا كان النموذج قيد الإرسال حاليًا.
• data: البيانات التي تم تمريرها إلى إجراء النموذج.
• method: طريقة HTTP المستخدمة لإرسال النموذج (مثل 'POST'، 'GET').
• action: الدالة المرتبطة بسمة action الخاصة بالنموذج.
• error: كائن خطأ في حال فشل الإرسال.

من المهم ملاحظة أن useFormStatus نفسه لا يتتبع تقدم العملية غير المتزامنة الأساسية. إنه يخبرنا ببساطة ما إذا كان النموذج قيد الإرسال وما إذا كان قد اكتمل (بنجاح أو بخطأ).

التحدي: تقدير الإكمال

يكمن التحدي الأساسي في تقدير تقدم إرسال النموذج، خاصة عندما يتضمن الإجراء تحميل ملفات، أو معالجة مجموعات بيانات كبيرة، أو التفاعل مع واجهات برمجة تطبيقات خارجية (APIs). يمكن أن تستغرق هذه العمليات أوقاتًا متفاوتة، ويعد تزويد المستخدمين بتعليقات مرئية (مثل شريط التقدم) أمرًا بالغ الأهمية لتجربة مستخدم جيدة.

تصميم الخوارزمية: نهج خطوة بخطوة

ستقوم خوارزميتنا بتقسيم العملية غير المتزامنة إلى خطوات يمكن التحكم فيها وتتبع تقدم كل خطوة. إليك نهج عام:

1. تحديد المراحل: تحديد المراحل المتميزة داخل عملية إرسال النموذج.
2. تخصيص الأوزان: تخصيص وزن نسبي (نسبة مئوية) لكل مرحلة بناءً على مدتها المقدرة أو تعقيدها.
3. تتبع الإكمال: مراقبة اكتمال كل مرحلة.
4. حساب التقدم: حساب التقدم الإجمالي بناءً على الأوزان وحالة اكتمال كل مرحلة.
5. تحديث واجهة المستخدم: تحديث واجهة المستخدم بالتقدم المحسوب.

1. تحديد المراحل

تعتمد المراحل على النموذج المحدد والعملية غير المتزامنة الأساسية. إليك بعض الأمثلة الشائعة:

• التحقق من الصحة: التحقق من صحة بيانات النموذج قبل الإرسال.
• إعداد البيانات: إعداد البيانات للإرسال (مثل التنسيق والتشفير).
• تحميل الملف (إن وجد): تحميل الملفات إلى الخادم. قد يتم تقسيم هذه المرحلة إلى أجزاء لتتبع التقدم بشكل أفضل.
• معالجة الخادم: معالجة الخادم للبيانات المرسلة.
• معالجة الاستجابة: معالجة الاستجابة من الخادم (مثل تحليلها وعرض النتائج).

مثال: لنفترض وجود نموذج لتقديم ورقة بحثية. قد تكون المراحل كما يلي:

1. التحقق من صحة تفاصيل المؤلف والملخص.
2. تحميل الورقة (PDF).
3. فحص الانتحال من جانب الخادم.
4. فهرسة الورقة.
5. إخطار المراجعين.

2. تخصيص الأوزان

قم بتعيين وزن (نسبة مئوية) لكل مرحلة، بما يعكس أهميتها النسبية أو مدتها المقدرة. يجب أن يساوي مجموع كل الأوزان 100%. غالبًا ما يكون من المفيد بناء هذه الأوزان على بيانات التنميط أو البيانات التاريخية لضمان دقة معقولة. في غياب تلك البيانات، يمكنك البدء بتخمين مدروس وتحسين الأوزان بمرور الوقت أثناء جمع مقاييس الأداء.

مثال (تقديم ورقة بحثية):

• التحقق من الصحة: 5%
• تحميل الورقة: 40%
• فحص الانتحال: 30%
• الفهرسة: 15%
• الإخطار: 10%

ملاحظة: مرحلة تحميل الورقة لها الوزن الأعلى لأنها تتضمن نقل ملفات كبيرة محتملة، مما يجعلها العملية الأكثر استهلاكًا للوقت. كما أن فحص الانتحال مهم أيضًا لأنه من المحتمل أن يتضمن معالجة معقدة من جانب الخادم.

3. تتبع الإكمال

هنا تقوم بمراقبة اكتمال كل مرحلة. ستعتمد طريقة تتبع الإكمال على طبيعة كل مرحلة.

• العمليات من جانب العميل (التحقق من الصحة، إعداد البيانات): استخدم الأعلام أو متغيرات الحالة للإشارة إلى اكتمال المرحلة.
• تحميل الملف: استخدم كائن XMLHttpRequest أو مستمع حدث upload.onprogress الخاص بواجهة برمجة تطبيقات fetch لتتبع تقدم تحميل كل جزء. احسب النسبة المئوية بناءً على البايتات المنقولة مقابل إجمالي البايتات.
• معالجة الخادم: غالبًا ما يكون هذا هو الجزء الأكثر تحديًا. إذا كان الخادم يوفر تحديثات للتقدم (على سبيل المثال، عبر WebSockets، أو Server-Sent Events، أو آلية استقصاء)، فاستخدم هذه التحديثات لتتبع التقدم. إذا لم يكن الأمر كذلك، فقد تضطر إلى الاعتماد على الاستدلال أو افتراض مدة ثابتة.

هام: عند التعامل مع المعالجة من جانب الخادم، فكر في تنفيذ آلية للخادم لإرسال تحديثات التقدم. سيؤدي هذا إلى تحسين دقة تقدير التقدم بشكل كبير. على سبيل المثال، إذا كان الخادم يعالج مقطع فيديو، فيمكنه إرسال تحديثات بعد معالجة كل إطار.

4. حساب التقدم

احسب التقدم الإجمالي بجمع النسب المئوية الموزونة لاكتمال كل مرحلة.

التقدم_الإجمالي = (الوزن1 * الإكمال1) + (الوزن2 * الإكمال2) + ... + (الوزنN * الإكمالN)

حيث:

• الوزنN هو وزن المرحلة N (كرقم عشري، على سبيل المثال، 0.40 لـ 40%).
• الإكمالN هو النسبة المئوية لاكتمال المرحلة N (كرقم عشري، على سبيل المثال، 0.75 لـ 75%).

مثال (بافتراض أن الورقة تم تحميلها بنسبة 50%، وفحص الانتحال تم بنسبة 25% واكتملت جميع المراحل السابقة):

التقدم_الإجمالي = (0.05 * 1.00) + (0.40 * 0.50) + (0.30 * 0.25) + (0.15 * 0.00) + (0.10 * 0.00) = 0.05 + 0.20 + 0.075 + 0 + 0 = 0.325

لذلك، فإن التقدم الإجمالي المقدر هو 32.5%.

5. تحديث واجهة المستخدم

قم بتحديث واجهة المستخدم بالتقدم المحسوب. يتم ذلك عادةً باستخدام شريط تقدم، أو عرض نسبة مئوية، أو مزيج من كليهما. تأكد من أن واجهة المستخدم متجاوبة وتوفر ملاحظات واضحة للمستخدم.

التنفيذ في React باستخدام useFormStatus

إليك كيفية دمج هذه الخوارزمية مع useFormStatus في مكون React:

            import React, { useState, useTransition } from 'react';
import { useFormStatus } from 'react-dom';

async function submitForm(data) {
  // Simulate asynchronous operation with progress updates
  let progress = 0;
  const totalSteps = 100; // Replace with actual stages

  for (let i = 0; i < totalSteps; i++) {
    await new Promise(resolve => setTimeout(resolve, 50)); // Simulate work
    progress = (i + 1) / totalSteps;
    console.log(`Progress: ${progress * 100}%`);
    // Ideally, send progress updates back to the client here
  }

  console.log("Form submitted successfully!");
  return { success: true };
}

function MyForm() {
  const [overallProgress, setOverallProgress] = useState(0);
  const [isPending, startTransition] = useTransition();
  const formStatus = useFormStatus();

  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData(event.target);

    startTransition(async () => {
      // Simulate asynchronous submission with progress
      let progress = 0;
      const totalSteps = 5;
      const weights = [0.1, 0.2, 0.3, 0.2, 0.2]; // Example weights for each stage
      const stageNames = ["Validation", "Upload", "Processing", "Indexing", "Notification"];
      
      for (let i = 0; i < totalSteps; i++) {
        // Simulate stage completion
        let stageCompletion = 0;
        const stageDuration = 1000; //ms

        for (let j = 0; j < 10; j++) {
            await new Promise(resolve => setTimeout(resolve, stageDuration/10)); // Simulate work
            stageCompletion = (j + 1) / 10; //Progress within the stage

            let calculatedProgress = 0;
            for (let k = 0; k <= i; k++) { // Loop through completed stages
                calculatedProgress += weights[k];
            }

            calculatedProgress -= (1-stageCompletion) * weights[i]; // subtract the percentage remaining in current stage

            setOverallProgress(calculatedProgress * 100);
            console.log(`Stage: ${stageNames[i]}, progress: ${stageCompletion * 100}% Overall Progress: ${calculatedProgress * 100}%`);

            //if you had server updates, this would be where you would receive them
        }
      }

      await submitForm(formData); // Simulate form submission

      // Update UI after submission is complete
      setOverallProgress(100);
    });
  };

  return (
    

      Name:
      



      Email:
      



      
        Submit
      

      {isPending && (
        <>
          
Submitting...
          
          
{overallProgress.toFixed(2)}%
        
      )}
    
  );
}

export default MyForm;

            

              
                Copy
              
            
          

الشرح:

• تقوم دالة handleSubmit الآن بمحاكاة عملية غير متزامنة متعددة المراحل باستخدام setTimeout.
• نستخدم useState لتخزين وتحديث overallProgress.
• يعرض عنصر progress التقدم الحالي للمستخدم.
• تحاكي الحلقة التقدم عبر أوزان كل مرحلة ونسب الإكمال داخل المرحلة.
• تقوم دالة submitForm() البسيطة بمحاكاة دالة من شأنها أن تجري طلبًا فعليًا للخادم.

اعتبارات متقدمة

تحديثات التقدم من جانب الخادم

النهج الأكثر دقة هو جعل الخادم يرسل تحديثات التقدم إلى العميل. يمكن تحقيق ذلك باستخدام تقنيات مثل:

• WebSockets: اتصال دائم يسمح بالاتصال ثنائي الاتجاه في الوقت الفعلي.
• Server-Sent Events (SSE): بروتوكول أحادي الاتجاه حيث يدفع الخادم التحديثات إلى العميل.
• الاستقصاء (Polling): يطلب العميل بشكل دوري التقدم من الخادم. هذا هو الأقل كفاءة ولكنه الأبسط في التنفيذ.

عند استخدام تحديثات التقدم من جانب الخادم، يتلقى العميل النسبة المئوية للتقدم من الخادم ويقوم بتحديث واجهة المستخدم وفقًا لذلك. هذا يزيل الحاجة إلى التقدير من جانب العميل ويوفر تمثيلًا أكثر دقة للمعالجة من جانب الخادم.

معالجة الأخطاء

من الضروري معالجة الأخطاء بأمان أثناء عملية إرسال النموذج. في حالة حدوث خطأ، اعرض رسالة خطأ مناسبة للمستخدم وأعد تعيين شريط التقدم. يوفر الخطاف useFormStatus خاصية error، والتي يمكنك استخدامها لاكتشاف الأخطاء ومعالجتها.

التحديثات المتفائلة (Optimistic Updates)

في بعض الحالات، قد تختار تنفيذ التحديثات المتفائلة. هذا يعني تحديث واجهة المستخدم كما لو كانت العملية ناجحة قبل أن يؤكد الخادم ذلك. يمكن أن يحسن هذا من الاستجابة المتصورة للتطبيق، ولكنه يتطلب معالجة دقيقة للأخطاء المحتملة أو عمليات التراجع.

التدويل والتعريب (i18n and l10n)

عند التطوير لجمهور عالمي، ضع في اعتبارك التدويل والتعريب. تأكد من ترجمة رسائل التقدم ورسائل الخطأ إلى اللغة المفضلة للمستخدم. استخدم مكتبات i18n وخدمات الترجمة لإدارة الترجمات بكفاءة. انتبه أيضًا إلى اتفاقيات تنسيق الأرقام المختلفة عند عرض النسب المئوية للتقدم.

إمكانية الوصول (a11y)

تأكد من أن مؤشر التقدم الخاص بك متاح للمستخدمين ذوي الإعاقة. قدم أوصافًا نصية بديلة لأشرطة التقدم، واستخدم سمات ARIA لنقل حالة التقدم إلى التقنيات المساعدة.

الحالات الخاصة واستراتيجيات التخفيف

يمكن أن تؤثر العديد من الحالات الخاصة على دقة حساب التقدم. إليك بعض السيناريوهات الشائعة واستراتيجيات التخفيف:

• عدم استقرار الشبكة: يمكن أن تسبب التقلبات في سرعة الشبكة تأخيرات غير متوقعة في تحميل الملفات أو استجابات واجهة برمجة التطبيقات. فكر في تنفيذ آليات إعادة المحاولة وتعديل تقدير التقدم بناءً على ظروف الشبكة المرصودة.
• تفاوت حمل الخادم: يمكن أن يؤثر حمل الخادم على وقت معالجة البيانات المرسلة. إذا أمكن، راقب أداء الخادم واضبط تقدير التقدم وفقًا لذلك.
• أخطاء غير متوقعة: يمكن أن تحدث أخطاء غير متوقعة أثناء عملية إرسال النموذج. قم بتنفيذ معالجة قوية للأخطاء وقدم رسائل خطأ مفيدة للمستخدم.
• تحميل الملفات الكبيرة: يمكن أن يستغرق تحميل الملفات الكبيرة جدًا وقتًا طويلاً. فكر في استخدام تقنيات مثل التحميلات القابلة للاستئناف للسماح للمستخدمين بإيقاف التحميلات واستئنافها. قد تحتاج أيضًا إلى ضبط الأوزان المخصصة لمرحلة التحميل بناءً على حجم الملف.
• تحديد معدل واجهة برمجة التطبيقات (API Rate Limiting): إذا كان إرسال النموذج الخاص بك يتفاعل مع واجهات برمجة تطبيقات خارجية، فكن على دراية بحدود المعدل. قم بتنفيذ استراتيجيات للتعامل مع تحديد المعدل، مثل تأخير الطلبات أو استخدام التراجع الأسي (exponential backoff).

بدائل لحساب التقدم المخصص

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

• المكتبات: توفر مكتبات مثل axios أو uppy تتبعًا مدمجًا للتقدم لتحميل الملفات.
• خدمات التخزين السحابي: تقدم خدمات مثل AWS S3 و Google Cloud Storage و Azure Blob Storage ميزات مثل التحميلات القابلة للاستئناف وإشعارات التقدم.
• واجهات برمجة التطبيقات التابعة لجهات خارجية: توفر بعض واجهات برمجة التطبيقات التابعة لجهات خارجية تحديثات للتقدم كجزء من استجابات واجهة برمجة التطبيقات الخاصة بها.

فكر في استخدام هذه البدائل إذا كانت تلبي متطلباتك. ومع ذلك، لا يزال فهم المبادئ الأساسية لحساب التقدم ذا قيمة، حتى عند استخدام هذه الأدوات.

الخاتمة

يعد تقدير اكتمال عمليات إرسال النماذج غير المتزامنة أمرًا بالغ الأهمية لتوفير تجربة مستخدم جيدة. من خلال تقسيم العملية إلى مراحل، وتخصيص الأوزان، وتتبع الإكمال، وحساب التقدم الإجمالي، يمكنك إنشاء واجهة مستخدم متجاوبة وغنية بالمعلومات. بينما يوفر useFormStatus معلومات قيمة حول حالة إرسال النموذج، فإن الأمر متروك لك لتنفيذ خوارزمية حساب التقدم. تذكر أن تأخذ في الاعتبار الحالات الخاصة، ومعالجة الأخطاء بأمان، واستكشاف الحلول البديلة لتبسيط العملية.

من خلال تنفيذ هذه التقنيات، يمكنك تحسين تجربة المستخدم لتطبيقات React الخاصة بك وتوفير ملاحظات قيمة للمستخدمين أثناء عمليات إرسال النماذج التي قد تكون طويلة.