إنتقل إلى المحتوى الرئيسي

آلية الحفظ التلقائي والتحذير قبل مغادرة الصفحة (Autosave & Unload Guard)

الهدف​

فهم البنية البرمجية لحفظ بيانات التحضير لضمان عدم ضياع التعديلات، وحماية البيانات أثناء التنقل أو ضعف الاتصال بالشبكة.

1. كيف يعمل الحفظ التلقائي الذكي (Debounced Autosave)؟​

تجنباً لمطالبة المدرب بالضغط على زر "حفظ" بعد كل اسم مما يعطل العملية التعليمية، أو وضع زر حفظ نهائي قد ينسى المشغل ضغطه مما يضيع البيانات، طُورت آلية حفظ تلقائي ذكية تعمل كالتالي:

[رصد حالة الطالب] ──> [الانتظار 700ms (تجميع التعديلات)] ──> [إرسال الحزمة المحدثة فقط للخادم]
                                                                     │
                                                    ┌────────────────┴────────────────┐
                                                    ▼                                 ▼
                                            [نجاح - حالة Saved]              [فشل - حالة Error]
  1. التجميع الذكي (Debounce): بمجرد نقر المدرب على خيار حاضر أو غائب لطالب، لا يتم إرسال طلب سري للشبكة فوراً، بل ينتظر النظام مهلة قصيرة قدرها 700 مللي ثانية.
  2. تجميع التعديلات: إذا قام المدرب برصد 5 طلاب آخرين خلال هذه الـ 700 مللي ثانية، يقوم النظام بضمهم جميعاً في حزمة تعديل واحدة وإرسالها معاً للخادم لتقليل الضغط على قاعدة البيانات ورفع الأداء البصري للتطبيق.
  3. حصر التحديثات: يرسل النظام فقط أسطر الطلاب الذين تغيرت حالاتهم بالفعل، متجنباً إعادة إرسال كشف الفصل بالكامل لتقليل حجم البيانات المستهلكة في الشبكة.

2. التحذير قبل مغادرة الصفحة (BeforeUnload Guard)​

لحماية عملك من الضياع عند الخطأ في إغلاق المتصفح:

  • المراقبة المستمرة: يستمع النظام لأي محاولة إغلاق للتبويب أو تنقل للخارج طالما هناك تعديلات قيد الانتظار لم تُحفظ بعد في الخادم أو قيد الحفظ الحالي.
  • تنبيه المتصفح: سيظهر لك المتصفح رسالة تحذيرية منبثقة تفيد بوجود بيانات غير محفوظة وتسألك للتأكيد: Are you sure you want to leave? Changes you made may not be saved.
  • الأمان التشغيلي: لا يزول هذا التحذير إلا بعد اكتمال وصول الحزمة للخادم وظهور حالة الحفظ الأخضر [Saved] في الشاشة.

3. التعامل مع ضعف وانقطاع الإنترنت (Error & Retry State)​

في حال كان المدرب يحضر الطلاب في ملعب رياضي خارجي وواجه انقطاعاً في التغطية:

  • تحول حالة الحفظ: ستتحول أيقونة المزامنة في الأعلى لرمز الخطأ الأحمر [Error].
  • المرونة والمحاولة مجدداً: لا تتأثر واجهة الرصد بالانقطاع، ويمكن للمدرب الاستمرار في تحديد بقية الطلاب وتغيير الحالات؛ حيث يقوم النظام بالاحتفاظ بالتعديلات الجارية محلياً وتجميعها.
  • زر إعادة المحاولة: بمجرد عودة الاتصال، يظهر للمسؤول زر إعادة المحاولة [Retry Save]. بالضغط عليه، يتم إرسال كافة التعديلات المتراكمة محلياً دفعة واحدة للخادم وتثبيتها.