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

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

واجهات الضيوف الإضافة والقائمة — نظام إدارة الأعراس والمناسبات ودعوات QR | Next.js وPrisma | أديب الصلوي
وقت الدراسة
13 دقيقة

المسار: تطوير نظام إدارة الأعراس ودعوات QR الوحدة: واجهات API والبنية الخلفية

مدخل إلى الدرس: واجهات الضيوف الإضافة والقائمة

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

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

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

  • بناء POST/GET لواجهة الضيوف مع فهرس eventId.
  • توليد token وtokenHash عند إنشاء كل ضيف.
  • تبسيط إضافة المدعوين بلا أعمدة معلقة.

مثال

// lib/tsign.ts — قبض المفاتيح (سيُشرح بكامله في فصل QR)
import { createHmac, randomBytes, timingSafeEqual } from "crypto";

const SECRET = process.env.SIGNING_SECRET!;

export function makeToken() {
  return randomBytes(24).toString("base64url");
}
export function tokenHashOf(token: string) {
  return createHmac("sha256", SECRET).update(token).digest("hex");
}
export function signatureOf(token: string) {
  return createHmac("sha256", SECRET).update("guest:" + token).digest("hex");
}

مثال

// app/api/guests/route.ts
import { NextResponse } from "next/server";
import { prisma } from "@/lib/prisma";
import { makeToken, tokenHashOf } from "@/lib/tsign";

export async function POST(req: Request) {
  const { eventId, name, phone, category, tableNo } = await req.json();

  const token = makeToken();
  const guest = await prisma.guest.create({
    data: {
      eventId, name,
      phone: phone ?? null,
      category: category ?? "general",
      tableNo: tableNo ?? null,
      tokenHash: tokenHashOf(token),
    },
  });

  // الرمز الصريح يُلتقط الآن فقط ليُبنى منه الرابط/QR
  return NextResponse.json({ ok: true, data: { ...guest, token } }, { status: 201 });
}

المخطط: أين يلتقط المفضّل token؟

flowchart TD
    A["POST /api/guests"] --> T["makeToken() — token صريح (لحظة واحدة)"]
    A --> H["tokenHashOf — نخزّن في العمود UNIQUE"]
    A --> CR["إنشاء الصف"]
    A --> R["الرد: /i/TOKEN?sig=SIG
لا نخزّن TOKEN أبداً"]

الأداء + الأمان

من هنا نرى لماذا يجب أن تكون العمود tokenHash مفهرساً وفريداً: عند المسح يُشمَّس البحث بالهاش مباشرة بدل البحث بالرمز الصريح.

تمرين تطبيقي: أضف GET يعيد ضيوف مناسبة معينة عبر where { eventId } ثم عدّها بفهرس eventId وراقب خطته explain في psql.

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

  • إعادة token داخل كل استجابة لاحقة — يصبح مسرباً بلا غرض.
  • عدم إنشاء tokenHash فريد فيبطئ النظام ويسمح تضارباً.
  • تحويل phone trivially rcعند قراءته في القائمة.

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

tokenHash
هاش محفوظ بدل الرمز الصريح لضمان السرية.
findMany by eventId
استعلام قائمة ضيوف مناسبة محددة.
القراءة بعد الإنشاء
بند الأمان: لا نفضحي الرمز الصريح في قوائم لاحقة.

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

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

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

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

دروس نصية

#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

عرض الدروس كاملة تحقق من صفحة تعلم الدورة
درس نصي 3/36
أنت تشاهد
واجهات الضيوف الإضافة والقائمة