دراسة حالة · 2026

تطبيق إدارة الفنادق

فندق لوميير — نظام إدارة فندقي بواجهتين: لوحة إدارية بـ Django للموظفين، وواجهة عملاء بـ Vue 3 تستهلك REST API. يشمل حجز الغرف، الوصول والمغادرة، التسعير الديناميكي، مدفوعات Stripe، التقييمات، إدارة المهام، والإشعارات.

الدورمطوّر ويب متكامل (فردي)
السنة2026
DjangoDjango REST FrameworkVue.js 3PostgreSQLChart.jsStripe APIRenderVercel
زيارة الموقع تواصل معي
تطبيق إدارة الفنادق
2واجهتان: لوحة الموظفين وواجهة العملاء
DRFREST API يربط MVT بالواجهة
Stripeالمدفوعات في مسار الحجز
93أداء Lighthouse (جوال، أكتوبر 2026)
01

التحدي

  • المشكلة تغطية دورة حجز الفندق كاملة — لوحة إدارية بـ Django للموظفين وواجهة عملاء بـ Vue 3 — بما يضمن صحة الحجز والتسعير وحسابات المستخدمين على الجانبين.
  • القيود عمل فردي في مشروع نهاية السنة (PFA) للسنة الرابعة؛ البنية المزدوجة تعني صيانة واجهتين في مشروع واحد؛ بدون ميزانية.
  • أكبر عائق ظهور تواريخ الحجز معكوسة، وقبول حقول كلمة المرور لمسافات زائدة، وعدم تشغيل التسعير التلقائي عند اختيار غرفة في حجز جديد.
  • السبب معالجة المناطق الزمنية كانت ضمنية، والمدخلات لم تُنظَّف قبل الحفظ، ونموذج الحجز لم يكن موصولًا بواجهة التسعير.
  • الحل ضبط صريح للمناطق الزمنية في إعدادات Django، والتحقق عبر strip()، وربط نموذج الحجز بواجهة تسعير ديناميكي تعيد الحساب حسب الإشغال الفعلي.
02

المقاربة

  • البنية Django + DRF على PostgreSQL؛ بقيت لوحة الموظفين مبنية على قوالب Django (MVT) لسرعة عمليات CRUD، وتحوّل مسار حجز العميل إلى تطبيق Vue 3 أحادي الصفحة.
  • طبقة الـAPI تعريف العقود عبر DRF serializers بين اللوحة والواجهة.
  • التسعير واجهة تسعير ديناميكي تعيد حساب أسعار الغرف حسب الإشغال الفعلي وتُستدعى فور اختيار الغرفة.
  • سلامة البيانات معالجة التواريخ مع مراعاة المنطقة الزمنية وتنظيف المدخلات عند الحدود.
  • التقارير لوحات Chart.js للإشغال والإيرادات.
  • المدفوعات Stripe لمدفوعات الحجز.
  • النشر الواجهة الخلفية على Render والواجهة الأمامية على Vercel.
الأثر

أُنجز وعُرض كمشروع نهاية السنة (PFA) للسنة الرابعة — نظام واحد يغطي دورة الحجز كاملة: البحث، التسعير الديناميكي، الحجز، الدفع، والوصول والمغادرة.

03

لقطات الشاشة

تطبيق إدارة الفنادق — مسار حجز العميل — البحث عن غرفة والتسعير الفوري والدفع.
مسار حجز العميل — البحث عن غرفة والتسعير الفوري والدفع.
04

ما سأفعله بشكل مختلف

  • ظهرت تواريخ الحجز معكوسة لأن معالجة المنطقة الزمنية كانت ضمنية. أضبط الآن عقدًا صريحًا للمنطقة الزمنية في التخزين وواجهة الـAPI والعرض قبل كتابة أي منطق للتواريخ.
  • قبلت حقول كلمة المرور مسافات زائدة — أتحقق من كل مدخل وأنظّفه عند الحدود بدل الوثوق بالعميل.
  • صيانة لوحة بـ Django MVT وتطبيق Vue في مشروع واحد تعني واجهتين. في المرة القادمة سأختار استراتيجية عرض واحدة وأوفّر API واحدًا للاثنين.