واجهة تتفهم حالة الحضور والحصر
المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: توليد وقراءة رموز QR
مدخل إلى الدرس: واجهة تتفهم حالة الحضور والحصر
واجهة تتفهم حالة الحضور والحصر — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.
أهداف هذا الدرس
- تغيير مظهر الدعوة بعد التسجيل أو انتهاء الحدث.
- إدارة حدّ القبول/الحضور (MaxGuests) بصفحة المنظّم.
- وعرض نافذة «اكتمل الحضور» للمدعوين المتأخرين.
مثال
// حقل جلسة: عدد مقاعد مبدئياً في Event
// prisma/schema.prisma:
model Event {
...
maxGuests Int @default(0) // 0 = بلا حد
}
// في API checkin:
const capacity = event.maxGuests;
if (capacity > 0) {
const used = await prisma.checkIn.count({ where: { eventId } });
if (used >= capacity) {
return NextResponse.json(
{ ok: false, error: "اكتمل العدد المُستوعب، لا مقاعد إضافية" },
{ status: 409 }
);
}
}المخطط: قرار واجهة التأكيد حسب حالة الضيف
flowchart TD
A["حالة الضيف"] --> P1["لم يرد بعد
بطاقة دعوة + زر RSVP"]
A --> P2["ردّ بقبول
دعوة + شريط بانتظار الحضور"]
A --> P3["سجّل حضوره
تأكيد — أهلاً بكم"]
A --> P4["بعد موعد الحدث
نافذة — انتهت المناسبة"]
A --> P5["بلوغ maxGuests
اكتمل الحضور + اتصال بالمنظّم"]
أين يُوضع العداد الحدّ؟
يعتمد الاستعلام على count مباشر: لا نسمح بكتابة CheckIn بعد بلوغ range. بديل أخف: يرقم جدول Reservations بحجز صف أول، لكن بساطتنا تكفي المشروع. من يرفض بعد امتلاء يبقى في حالة 'انتظار' تُراقب بالداشبورد.
سلوك بعد الامتلاء
الأهم عند إتمام المقاعد: اعرض في الدعوة نافذة نهائية بدل أزرار RSVP — لأن القرار اتُّخذ بعد الامتلاء ينبغي أن يكون خبراً مقروطاً للضيف وليس زراً قابلاً للنقر.
تمرين تطبيقي: أضف شريط تقدم في الدعوة يعرض (الحاضر/الكل) ويغيّر لونه عند 80% إلى برتقالي لتلميح نفاد المقاعد — وتحقق data لا ترهق load.
أخطاء شائعة يجب تفاديها
- تفسير Count>0 وحده ونسيان maxGuests==0 بلا حد.
- ترك زر RSVP نشطاً حتى بعد تسجيل حضور — بيانات مضطربة.
- الاعتماد على عرض 409 الخام بدل واجهة عربية جاهزة للمسح.
معجم مصطلحات الدرس
- سقف مقاعد
- عدد أقصى للحضور يمكن حجزه قبل الرفض.
- تدرّجي التأهيل
- تحويل أغوار الواجهة حسب state ضمن state machines.
- count(where)
- استعلام خفيف يعرف الرقم بدل سحب صفوف.
مراجعة وتمرين تثبيت المهارة
اختبار سريع: اشرح بعبارتك معنى «واجهة تتفهم حالة الحضور والحصر»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.
تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.
الدرس التالي: تأمين الروابط والهجمات الشائعة. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.
