دورة تطوير نظام إدارة الأعراس والمناسبات ودعوات QR عمليًا

تدفق الدعوة وقراءة QR من التوليد إلى الحضور

تدفق الدعوة وقراءة QR من التوليد إلى الحضور — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
وقت الدراسة
12 دقيقة

المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: التحليل والتصميم

مدخل إلى الدرس: تدفق الدعوة وقراءة QR من التوليد إلى الحضور

تدفق الدعوة وقراءة QR من التوليد إلى الحضور — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي

طريقة الدراسة: اقرأ التعريف، تتبّع المثال في الشرح، نفّذه بنفسك، ثم اختبر النتيجة والحالات الاستثنائية قبل الانتقال.

أهداف هذا الدرس

  • رسم رحلة رمز QR بالكامل: توليد → توقيع → فتح → قراءة الخطوة.
  • تمييز مكان التحقق من التوقيع ومكان منع التكرار.
  • فهم لماذا الفحص يُسجّل عبر POST وليس مجرد فتح رابط.

المخطط: مخطط تسلسل (Sequence) لرحلة الرمز من البداية إلى النهاية

sequenceDiagram
    participant Org as منظّم
    participant S as خادم Next.js
    participant DB as قاعدة البيانات
    Org->>S: إضافة مدعو
    S->>S: توليد token + توقيع HMAC
    S->>DB: جلب المخزّن: token_hash
    S-->>Org: (token, signature)
    Note over Org: بناء رابط /i/token?sig ثم طباعة QR
    participant Gst as مدعو
    Gst->>S: فتح الرابط (فحص QR)
    S->>S: تحقّق التوقيع
    S->>DB: قراءة guest عبر hash
    S-->>Gst: صفحة الدعوة + RSVP
    participant Gate as بوابة الفرزة
    Gate->>S: مسح QR / POST /api/checkin
    S->>DB: فحص حضور سابق
    S->>DB: إنشاء CheckIn (لا تكرار)
    S-->>Gate: {ok, guest name}

لماذا التوقيع وليس مجرد معرّف؟

لو حمل الرمز guestId فقط (/i/42)، فيستطيع أي زائر تخمين رقم ضيف آخر وفتح دعوته أو تسجيل الحضور بدله. التوقيع HMAC يجعل الرابط مغلقاً: تعديل المعرّف يكسر التوقيع فيُرْفض الطلب بمقارنة ثابتة الزمن (timingSafeEqual).

لماذا التسجيل عبر POST وليس فتح الرابط؟

  • فتح صفحة الدعوة مجرد قراءة — لا تغيّر حالة.
  • تسجيل الحضور تغيير حالة (إنشاء سطر) فوجب أن يكون POST صريحاً وقراراً إنسانياً من موظف الفرزة.
  • الفصل المذكور يمنع أن يُحتسب ضيف حاضراً لمجرد أنه فتح الدعوة على هاتفه.

أمان البيانات

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

الخلاصة السريعة

  • الرابط = token + توقيع HMAC، ويُخزَّن الهاش فقط.
  • صفحة الدعوة تقرأ فقط؛ التسجيل قرار POST عند البوابة.
  • منع التكرار يقع في قاعدة البيانات وفي الواجهة معاً.

تمرين تطبيقي: ارسم الخطوات 10-15 من مخطط التسلسل أعلاه (من لحظة وصول طلب checkin إلى الاستجابة) على ورقة باستخدام أسهم مسطحة.

أخطاء شائعة يجب تفاديها

  • وضع التوقيع في عنوان URL دون تحقق منقذ — استخدم المقارنة الآمنة زمنياً.
  • تسجيل الحضور من فتح بسيط للرابط.
  • تخزين الرمز الصريح في الجدول بدل الهاش.

معجم مصطلحات الدرس

توقيع HMAC
رمز تحقق يُحسب بسر الخادم من نص الرابط لمنع التلاعب.
تسلسل Sequence
مخطط يصف تبادل الرسائل بين كائنات النظام عبر الزمن.
هاش token
قيمة محسوبة من الرمز (SHA-256) تُخزَّن بدل الرمز الصريح.

مراجعة وتمرين تثبيت المهارة

اختبار سريع: اشرح بعبارتك معنى «تدفق الدعوة وقراءة QR من التوليد إلى الحضور»، ثم بيّن أين ستستخدمه داخل نظام تسجيل حضور دعوات مناسبة عبر رمز QR، وما الخطأ الذي يجب اختباره قبل الاعتماد على الحل.

تحدٍّ إضافي: غيّر شرطًا واحدًا في التطبيق، وتوقع النتيجة، ثم نفّذ الاختبار وفسّر الاختلاف.

الدرس التالي: سيناريو المشروع وقواعد العمل. من الأفضل إنهاء التجربة الحالية قبل متابعة الدرس التالي.

دروس نصية

#1

نظرة عامة على الدورة والمخرجات

#2

مقدمة إلى Next.js وأسباب اختياره

#3

أساسيات schema.prisma والنماذج

#4

مقدمة Route Handlers وبنية الاستجابة

#5

فهم Server Components والجلب الآمن

#6

تصميم الرمز Secured والتوقيع HMAC

#7

بناء الإنتاج وتجنّب أخطاء الحالة المربكة

#8

تحليل المتطلبات وتحديد الكيانات

#9

إنشاء مشروع Next.js وتجربته

#10

نموذج المناسبة Event بالعلاقات

#11

واجهة إنشاء المناسبة POST /api/events

#12

تصميم صفحة الدعوة الإلكترونية

#13

توليد صورة QR من قاعدة الدعوة

#14

نشر المشروع على Vercel

#15

تصميم قاعدة البيانات والعلاقات

#16

تجريب PostgreSQL محلياً وإنشاء قاعدة الداتا

#17

نموذج المدعو Guest مع الرمز الموقّع

#18

واجهات الضيوف الإضافة والقائمة

#19

نموذج الرد RSVP التفاعلي

#20

تجربة المسح في بوابة الحفل

#21

قاعدة بيانات إنتاج مُدارة وأمانها

#22

تدفق الدعوة وقراءة QR من التوليد إلى الحضور

#23

تثبيت Prisma والاتصال بالقاعدة

#24

نموذج الرد Rsvp ومنع التكرار

#25

واجهة تسجيل الحضور POST /api/checkin

#26

صفحة قائمة الضيوف والفرز

#27

واجهة تتفهم حالة الحضور والحصر

#28

إدارة المتغيرات السرية بيئة وواجهة

#29

سيناريو المشروع وقواعد العمل

#30

بنية مجلدات المشروع ومسارات الصفحات

#31

الاستعلام والجلب مع العلاقات

#32

التحقق من المدخلات ومعالجة الأخطاء

#33

لوحة الإحصائيات الحية

#34

تأمين الروابط والهجمات الشائعة

#35

قائمة الفحص النهائي قبل الإطلاق

#36

الترحيلات migrations والبذور seed

عرض الدروس كاملة تحقق من صفحة تعلم الدورة
درس نصي 4/36
أنت تشاهد
تدفق الدعوة وقراءة QR من التوليد إلى الحضور