جاري التحميل...
جاري التحميل...
بناء Dashboard للمحررين
لوحة التحكم هي مركز التحكم لإدارة محتوى المدونة. في هذا الدرس، نبني لوحة تحكم كاملة مع إدارة المقالات وإدارة التصنيفات ورفع الصور.
💡 ما سنبنيه:
الصفحة الرئيسية للوحة التحكم مع الإحصائيات، إدارة المقالات بعمليات CRUD، إدارة التصنيفات، رفع الصور باستخدام Supabase Storage، التقسيم لمجموعات البيانات الكبيرة.
تعرض لوحة التحكم الإحصائيات (إجمالي المقالات والتصنيفات والمستخدمين) والمقالات الأخيرة. استخدم Promise.all لجلب عدادات متعددة بالتوازي.
💡 نصيحة الأداء:
Promise.all ينفذ استعلامات قاعدة البيانات المتعددة في نفس الوقت بدلاً من التسلسلية، مما يحسن أوقات التحميل بشكل كبير.
إدارة جميع المقالات بعرض جدول يعرض العنوان والتصنيف والحالة والتاريخ وأزرار الإجراءات للتعديل وتبديل النشر والحذف.
💡 إجراءات المقالات:
التعديل يفتح نموذج التعديل، تبديل النشر يغير الحالة بين المسودة والمنشور، الحذف يزيل المقال مع التأكيد.
ارفع الصور إلى Supabase Storage مع التحقق من نوع الملف وحدود الحجم وتوليد رابط تلقائي.
💡 أفضل ممارسات الرفع:
تحقق من أنواع الملفات (JPEG، PNG، WebP)، فرض حدود الحجم (5 ميجابايت)، توليد أسماء ملفات فريدة، تقديم معاينة الرفع.
إنشاء وتعديل وحذف التصنيفات. عرض عدد المقالات لكل تصنيف.
💡 عمليات التصنيفات:
نموذج مضمن للإنشاء/التعديل، الحذف مع التأكيد، عرض عدد المقالات لكل تصنيف.
يقسم التقسيم مجموعات البيانات الكبيرة إلى صفحات لأفضل أداء وتجربة مستخدم.
💡 تنفيذ التقسيم:
احسب الإزاحة من الصفحة الحالية، استخدم Supabase .range() لتحديد النتائج، اعرض أرقام الصفحات معنقطة للكثير من الصفحات.
لماذا نستخدم Promise.all لجلب إحصائيات لوحة التحكم؟
ما هو الهدف من التقسيم؟
أضف حقل بحث إلى صفحة إدارة المقالات. أنشئ مكون SearchInput مع debounce، استخدم معلمات URL لاستعلام البحث، نفذ تصفية Supabase باستخدام .ilike().
Supabase Storage:
.from('bucket').upload(path, file) - رفع ملف.getPublicUrl(path) - الحصول على رابط عام.from('bucket').remove([path]) - حذف ملفالمفاهيم الرئيسية:
.range(start, end) - نطاق التقسيمكيف تدير أخطاء المشروع؟
الإجابة:
اكتب اختبارات، استخدم linting، و راجع الكود باستمرار.
كيف تُحسّن أداء المشروع؟
الإجابة:
قلل الـ bundle size، استخدم lazy loading، وحسّن الصور.
استخدم Git branches
افصل كل ميزة في branch منفصل
اكتب tests
لا تنشر ميزة بدون اختبارات