حاسبة التقدم باستخدام useFormStatus في React: تقدير التقدم في الوقت الفعلي لتحسين تجربة المستخدم

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

فهم useFormStatus في React

يوفر خطاف `useFormStatus`، الذي تم تقديمه في React 18، معلومات حول حالة إرسال عنصر `

import React from 'react';
import { useFormStatus } from 'react-dom';

function MyForm() {
  const { pending } = useFormStatus();

  async function handleSubmit(formData: FormData) {
    'use server';
    // محاكاة إجراء خادم بطيء
    await new Promise(resolve => setTimeout(resolve, 2000));
    console.log('تم إرسال النموذج بنجاح!');
  }

  return (
    
      
      
        {pending ? 'جارٍ الإرسال...' : 'إرسال'}
      
    
  );
}

export default MyForm;

في هذا المثال المبسط، يتم استخدام `useFormStatus` لتعطيل زر الإرسال وعرض رسالة "جارٍ الإرسال..." أثناء انتظار النموذج. يوفر هذا ملاحظات أساسية للمستخدم.

تنفيذ حاسبة تقدم في الوقت الفعلي

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

سيناريو مثال: رفع ملف

خذ بعين الاعتبار سيناريو رفع ملف. قد تتضمن عملية الإرسال الخطوات التالية:

1. التحقق من صحة الملف.
2. تغيير حجم الصورة (إذا كان ذلك ممكنًا).
3. رفع الملف إلى الخادم.
4. تحديث قاعدة البيانات.

يمكننا تقدير التقدم بناءً على اكتمال كل من هذه الخطوات.

تنفيذ الكود مع تتبع التقدم

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

function FileUploadForm() {
  const { pending } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    // محاكاة التحقق من الصحة (20%)
    await simulateProgress(20, setProgress);
    console.log('اكتمل التحقق من صحة الملف');

    // محاكاة تغيير الحجم (30%)
    await simulateProgress(30, setProgress);
    console.log('اكتمل تغيير حجم الملف');

    // محاكاة الرفع (40%)
    await simulateProgress(40, setProgress);
    console.log('اكتمل رفع الملف');

    // محاكاة تحديث قاعدة البيانات (10%)
    await simulateProgress(10, setProgress);
    console.log('تم تحديث قاعدة البيانات');

    console.log('تم رفع الملف بنجاح!');
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'جارٍ الرفع...' : 'رفع'}
      
      {pending && (
        

          التقدم: {progress}%
          
        
      )}
    
  );
}

export default FileUploadForm;

شرح:

• نستخدم خطاف `useState` لإدارة حالة `progress`، التي تبدأ بقيمة 0.
• تقوم دالة `handleSubmit` الآن بمحاكاة مراحل مختلفة من عملية رفع الملف، حيث تقوم كل مرحلة بتحديث حالة `progress` باستخدام دالة `simulateProgress`.
• تستخدم دالة `simulateProgress` الدالة `setTimeout` لمحاكاة العمليات غير المتزامنة وتحديث النسبة المئوية للتقدم بشكل تدريجي. هذا ينشئ تمثيلًا مرئيًا للتقدم للمستخدم.
• أثناء انتظار النموذج (`pending`)، نعرض شريط تقدم باستخدام عنصر HTML5 ``، مما يعكس القيمة الحالية لـ `progress`.

تخصيص مؤشر التقدم

يمكن تخصيص التمثيل المرئي لمؤشر التقدم بطرق مختلفة:

• تنسيق شريط التقدم: استخدم CSS لتنسيق عنصر `` أو قم بإنشاء شريط تقدم مخصص باستخدام عناصر `
  ` ورسوم CSS المتحركة. ضع في اعتبارك ألوان العلامة التجارية والتصميم لتتناسب مع تصميم تطبيقك.
• تحديثات نصية: قدم تحديثات وصفية أكثر عن طريق عرض رسائل مثل "جارٍ التحقق من الملف..."، "جارٍ تغيير حجم الصورة..."، إلخ، بجانب شريط التقدم.
• ملاحظات مرئية: استخدم الرسوم المتحركة أو الأيقونات لتعزيز الملاحظات المرئية بشكل أكبر. يمكن لمؤشر تحميل دوار أو رسم متحرك لعلامة صح عند الاكتمال تحسين تجربة المستخدم.

معالجة الأخطاء والحالات الهامشية

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

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

function ErrorHandlingForm() {
  const { pending, error } = useFormStatus();
  const [progress, setProgress] = useState(0);

  async function handleSubmit(formData: FormData) {
    'use server';
    try {
      // محاكاة التحقق من الصحة (20%)
      await simulateProgress(20, setProgress);
      console.log('اكتمل التحقق من صحة الملف');

      // محاكاة خطأ أثناء الرفع (بعد 50%)
      if (progress >= 50) {
        throw new Error('فشل في رفع الملف.');
      }

      // محاكاة تغيير الحجم (30%)
      await simulateProgress(30, setProgress);
      console.log('اكتمل تغيير حجم الملف');

      // محاكاة الرفع (40%)
      await simulateProgress(40, setProgress);
      console.log('اكتمل رفع الملف');

      // محاكاة تحديث قاعدة البيانات (10%)
      await simulateProgress(10, setProgress);
      console.log('تم تحديث قاعدة البيانات');

      console.log('تم رفع الملف بنجاح!');
    } catch (err: any) {
      console.error('خطأ أثناء الرفع:', err);
      // عالج الخطأ بشكل مناسب.
      throw err;
    }
  }

  async function simulateProgress(percentage: number, setProgress: (value: ((prevState: number) => number) | number) => void) {
    return new Promise(resolve => {
      setTimeout(() => {
        setProgress(prevProgress => prevProgress + percentage);
        resolve(null);
      }, 500);
    });
  }

  return (
    

      
      
        {pending ? 'جارٍ الرفع...' : 'رفع'}
      
      {pending && (
        

          التقدم: {progress}%
          
        
      )}
      {error && 
خطأ: {error.message}
}
    
  );
}

export default ErrorHandlingForm;

اعتبارات هامة:

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

اعتبارات إمكانية الوصول

تأكد من أن مؤشر التقدم الخاص بك متاح لجميع المستخدمين، بما في ذلك ذوي الإعاقة:

• سمات ARIA: استخدم سمات ARIA مثل `aria-valuenow` و `aria-valuemin` و `aria-valuemax` لتوفير معلومات دلالية حول شريط التقدم لقارئات الشاشة.
• تباين كافٍ: تأكد من أن شريط التقدم يتمتع بتباين ألوان كافٍ للمستخدمين الذين يعانون من ضعف البصر.
• التنقل باستخدام لوحة المفاتيح: تأكد من أن النموذج وعناصره قابلة للتنقل باستخدام لوحة المفاتيح.
• إدارة التركيز (Focus Management): قم بإدارة التركيز بشكل مناسب، خاصة عند عرض رسائل الخطأ أو إكمال عملية الإرسال.

أمثلة واقعية وحالات استخدام

يعد استخدام حاسبة التقدم في الوقت الفعلي مفيدًا في سيناريوهات مختلفة:

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

على سبيل المثال، قد تستخدم خدمة تخزين سحابي شريط تقدم للإشارة إلى حالة تحميل الملفات، بينما قد يستخدم محرر صور عبر الإنترنت لإظهار تقدم تطبيق المرشحات أو التأثيرات.

أفضل الممارسات لتنفيذ حاسبات التقدم

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

بدائل لـ useFormStatus لتتبع التقدم

بينما يعد `useFormStatus` ممتازًا لتتبع إرسال النماذج الأساسية، يمكن استخدام طرق أخرى لمزيد من التحكم الدقيق في التقدم:

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

الخاتمة

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