لوحة الإحصائيات الحية
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: صفحات الدعوة والواجهة الأمامية
مدخل إلى الدرس: لوحة الإحصائيات الحية
لوحة الإحصائيات الحية — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- عدّ الكل: دعوات، ردود، حضور بنبض واحد.
- بناء بطاقة نسب إنجاز لكل صنف.
- أتمتة التحديث عبر استرجاع دوري في مكوّن client.
مثال
// app/admin/page.tsx (Server Component للعدد الأولي)
export default async function DashboardPage() {
const event = await prisma.event.findUnique({
where: { slug: "wedding-2026" },
include: { _count: { select: { guests: true, rsvps: true, checkIns: true } } },
});
const progress = event
? Math.round((event._count.checkIns / Math.max(event._count.guests, 1)) * 100)
: 0;
return المخطط: دورة لوحة الإحصائيات
flowchart LR
CARD["بطاقة أولى (Server)"]
CARD <-->|"كل 15 ثانية fetch /api/admin/stats"| API["prisma._count
guests · rsvps · checkIns"]
API --> RATIO["بطاقة نسب: حاضرون ÷ مدعوون %"]
لماذا 15 ثانية؟
توازن بين حيوية العرض وضغط القاعدة. التحديث عبر polling بسيط؛ ومختص عند الحجم الضخم نستبدله بـ Server-Sent Events أو WebSocket، لكنه مثال جيد هنا.
نمط جيد للتطبيق
البنية الهجينة (Server أولاً ثم Client دورياً) تجعل أول عرض سريعاً دون فشل فارغ، ولا يضطر العميل إلا الانتظار لإعادة التعبئة كل 15 ثانية.
تمرين تطبيقي: أضف بطاقة رابعة «معدل الرد» = المقبولون ÷ الدعوات، واجعل شريط العتاد ملوناً حسب النسبة (أحمر لـ <30%).
أخطاء شائعة يجب تفاديها
- جلب الإحصائيات في كل ثانية — حمل لا داعي.
- قسمة على صفر عندما لا يوجد ضيوف (استخدم Math.max).
- تحديث stale بعد مغادرة المستخدم —نظّف بشبكة intervals.
معجم مصطلحات الدرس
- polling
- استرجاع دوري لبيانات من الخادم بفاصل زمني.
- _count
- عدّ العلاقات دون سحب صفوفها.
- هيدرة أولى
- لقطة Server للمرة الأولى ثم يتابع client.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «لوحة الإحصائيات الحية»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
