OCTABOATS: منصة متكاملة لحجز اليخوت والرحلات الفاخرة على مستوى المؤسسات

تطبيق ويب كامل (Full-Stack SPA) بمستوى متميز، صُمم لهندسة تجربة حجز سلسة للمغامرات البحرية الفاخرة، مع نظام متطور لتنسيق المدفوعات، وإدارة التوافر في الوقت الفعلي، ولوحة تحكم إدارية متقدمة للعمليات.

القيمة التجارية

تعالج OCTABOATS سوق حجز اليخوت والتجارب الفاخرة المجزأ من خلال توفير منصة موحدة وسلسة تتيح للعملاء اكتشاف ومقارنة وحجز التجارب البحرية المتميزة. تحول المنصة تعقيدات الحجز إلى تجربة بديهية ومُحسّنة لتحقيق التحويلات - مما يولد متوسط قيمة طلب (AOV) أعلى من خلال عمليات البيع الإضافي الذكية، ومرونة العروض الترويجية، وآليات استرداد سلة التسوق الاستراتيجية. تم بناء OCTABOATS لتحقيق أداء فائق السرعة، وموثوقية مدفوعات بنسبة 99.9%، وقابلية توسع سلسة، مما يعكس ممارسات هندسية من الدرجة الإنتاجية في كل طبقة معمارية.

القيمة الجوهرية المقترحة

الأداء وقابلية التوسع

تنفيذ الاستعلامات المُحسّن: تحميل العلاقات مسبقاً (Eager-loading) مع قيود استعلام استراتيجية للقضاء على مشاكل N+1 في تدفقات سلة التسوق والدفع والتوافر
استراتيجية التخزين المؤقت الذكية: تخزين مؤقت لمدة ساعة واحدة لخصائص الصفحة الرئيسية (المدن، المراسي، كتالوجات اليخوت) مع إلغاء التخزين المؤقت عند التحديثات الحرجة، مما يقلل الحمل على قاعدة البيانات بنحو 70% في الصفحات ذات الزيارات العالية
معمارية قاعدة البيانات: علاقات متعددة الأشكال (Polymorphic) لنموذج حجز موحد (يتعامل مع كل من اليخوت والرحلات)، مما يسمح بطبقة منطق عمل واحدة لأنواع المنتجات المختلفة
التحقق من التوافر في الوقت الفعلي: التحقق من التوافر الآمن ضد ظروف السباق (Race-conditions) باستخدام معاملات قاعدة البيانات أثناء الدفع، مما يمنع الحجوزات المزدوجة والمبيعات الزائدة

تميز تجربة المستخدم (UX/UI)

تصميم فاخر ومتجاوب: معمارية React تعتمد على نهج Mobile-first مع Tailwind CSS v4، لتقديم تجارب مثالية بكسل بكسل عبر جميع الشاشات
تدفقات مُحسّنة للتحويل: عملية دفع متعددة الخطوات مع إظهار تدريجي، وحفظ حالة سلة التسوق، وقبول البيع الإضافي بنقرة واحدة
مكتبة مكونات متميزة: مكونات Radix UI غير مصممة (Headless) تضمن إمكانية الوصول (WCAG 2.1 AA) دون التضحية بأناقة التصميم
معالجة ذكية للنماذج: التحقق من جانب الخادم باستخدام Laravel Form Requests، مع توفير ملاحظات فورية من جانب العميل عبر ميزة أمان الأنواع في TypeScript
دعم الوضع المظلم: استمرارية السمة عبر localStorage، دون أي وميض محتوى غير مصمم

الأمان والموثوقية

المصادقة المحصنة: Laravel Fortify مع المصادقة الثنائية (2FA/TOTP)، وإدارة الجلسات، وتشفير آمن لكلمات المرور (bcrypt)
أمن المدفوعات: تكامل مع بوابة Kashier المتوافقة مع PCI مع مصادقة 3DS، والتحقق من المعاملات من جانب الخادم، والتحقق من توقيع الويب هوك (Webhook)
طبقة التفويض: تحكم في الوصول قائم على سياسات دقيقة (لوحة تحكم للمسؤولين فقط، وعروض حجز مخصصة للمستخدمين)
الحماية من CSRF و XSS: حماية برمجية وسيطة أصلية من Laravel لجميع العمليات التي تغير الحالة
سلامة المعاملات: تضمن معاملات قاعدة البيانات أثناء معالجة الويب هوك عدم وجود سجلات حجز دون سجلات دفع مقابلة

المعمارية التقنية والتكنولوجيا المستخدمة

┌─────────────────────────────────────────────────────────────────────┐ │ طبقة العميل (React 19) │ │ ┌─────────────┬──────────────┬──────────────┬──────────────────┐ │ │ │ الصفحات │ المكونات │ الخطافات │ الخدمات │ │ │ │ (TypeScript)│ (Radix UI) │ (Custom) │ (API Calls) │ │ │ └─────────────┴──────────────┴──────────────┴──────────────────┘ │ │ ↓ بروتوكول Inertia ↓ │ ├─────────────────────────────────────────────────────────────────────┤ │ طبقة الخادم (Laravel 12, PHP 8.2) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ وحدات التحكم (Thin) ← طلبات النموذج (التحقق) ← السياسات │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ خدمات منطق العمل │ │ │ │ • KashierPaymentService (تنسيق المدفوعات) │ │ │ │ • KashierWebhookService (معالجة المعاملات) │ │ │ │ • PageServices (تجميع البيانات الخاصة بالمجال) │ │ │ └──────────────────────────────────────────────────────────────┘ │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ نماذج وعلاقات Eloquent │ │ │ │ • الحجوزات متعددة الأشكال (يخوت/رحلات) │ │ │ │ • إدارة التوافر (التحقق في الوقت الفعلي) │ │ │ │ • نظام سلة التسوق (متعدد العناصر، مستمر) │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ طبقة قاعدة البيانات (MySQL/Postgres) │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ مخطط مُسوى: المستخدمون → الحجوزات ← (اليخوت/الرحلات) │ │ │ │ فهارس التوافر، قيود المفاتيح الخارجية، الحذف التتابعي │ │ │ └──────────────────────────────────────────────────────────────┘ │ ├─────────────────────────────────────────────────────────────────────┤ │ الخدمات الخارجية والبنية التحتية │ │ ┌──────────────────────────────────────────────────────────────┐ │ │ │ • بوابة دفع Kashier (مفعلة 3DS) │ │ │ │ • إشعارات البريد الإلكتروني (Laravel Mail) │ │ │ │ • تخزين الجلسات (متوافق مع Redis) │ │ │ │ • تخزين الملفات (محلي/S3) │ │ │ └──────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────┘

حزمة الواجهة الأمامية

الإطار: React 19 مع TypeScript صارم (tsconfig.json: تفعيل الوضع الصارم)
التقديم من جانب الخادم (SSR/Hydration): Inertia.js v2 مع تقديم خصائص الصفحة من الخادم، مما يلغي طلبات الشلال
التنسيق: Tailwind CSS v4 + إضافة Tailwind CSS Vite للبناء المُحسّن
مكونات الواجهة: Radix UI (بدون تصميم، سهلة الوصول) مغلفة في مكتبة مكونات مخصصة
إدارة النماذج: React Hook Form مع ملاحظات التحقق من جانب الخادم Laravel
التوجيه: Wayfinder v0 لتوليد مسارات آمنة من مسارات Laravel
أمان الأنواع: تغطية كاملة لـ TypeScript مع فحوصات صارمة للقيم الفارغة، واتحادات مميزة لاستجابات API
أدوات البناء: Vite مع إضافة React compiler لـ JSX مُحسّن، وTree-shaking ذكي

حزمة الواجهة الخلفية

الإطار: Laravel 12 مع هيكل ملفات مبسط (لا يوجد Kernel.php، البرمجيات الوسيطة في bootstrap/app.php)
ORM: Eloquent مع التحميل المسبق، والعلاقات متعددة الأشكال، وتحسين الاستعلام
المصادقة: Laravel Fortify (مصادقة بدون واجهة) مع دعم 2FA/TOTP عبر سمة TwoFactorAuthenticatable
طبقة API: نقاط نهاية RESTful تتبع اتفاقيات JSON:API، وتعيد موارد Laravel API لتنسيق استجابة ثابت
التحقق: فئات Form Request لقواعد تحقق تعريفية وقابلة لإعادة الاستخدام
التفويض: تحكم في الوصول قائم على السياسات مع Laravel Gates و Policies
التخزين المؤقت: واجهة Laravel cache مع TTL افتراضي لمدة ساعة لتجميع الصفحة الرئيسية
وظائف الخلفية: نظام طابور (مُهيأ للمزامنة في التطوير، و database/Redis في الإنتاج)
الاختبار: Pest 4 مع سمة RefreshDatabase لتنفيذ اختبار معزول

تعمقات تقنية رئيسية

1. معمارية الحجز متعددة الأشكال: نموذج واحد، أنواع منتجات متعددة

التحدي: تمثل اليخوت والرحلات أنواع منتجات مختلفة جذرياً مع نماذج تسعير وقيود توافر وقواعد عمل مختلفة. النهج التقليدي يتطلب جداول حجز منفصلة ومنطقاً مكرراً. توحد OCTABOATS هذا بأناقة باستخدام علاقات Eloquent متعددة الأشكال.

لماذا هذا مهم:

مصدر واحد للحقيقة للموافقة على الحجز، ومعالجة المدفوعات، واسترداد الأموال—بغض النظر عن نوع المنتج
لوحة تحكم إدارية مشتركة تعرض جميع الحجوزات مع تصفية موحدة وتدفق عمل للموافقة
قابلة للتوسع لـ N من أنواع المنتجات (مستقبلاً: فنادق، تجارب طعام) دون تكرار وحدات التحكم
تسوية قاعدة البيانات تضمن السلامة المرجعية؛ تمنع المفاتيح الخارجية الحجوزات اليتيمة

2. معمارية الويب هوك للمدفوعات: بناء معالجة معاملات صلبة

التحدي: بوابات الدفع (Kashier) غير موثوقة بطبيعتها—يمكن أن تصل الويب هوك بترتيب خاطئ، أو مكررة، أو لا تصل أبداً. بدون معالجة غير متكررة (Idempotent) ومعاملات ذرية، قد ينتهي الأمر بالمستخدمين بحجوزات متعددة لدفع واحد أو العكس.

لماذا هذا مهم:

دلالات "مرة واحدة فقط" عبر merchantOrderId كمفتاح غير متكرر؛ يتم تجاهل الويب هوك المُعاد تسليمها بأمان
معاملات قاعدة البيانات تضمن إنشاء سجلات الحجز والدفع معاً بشكل ذري
الحذف التتابعي لعناصر سلة التسوق فقط بعد تأكيد الدفع، مما يمنع فقدان الطلبات
مرونة الويب هوك: المدفوعات الفاشلة لا تعطل المحاولات المستقبلية؛ منطق إعادة المحاولة مدمج في تكوين Kashier

النتيجة: صفر مدفوعات مفقودة، حالة يمكن التنبؤ بها، سجل تدقيق عبر حقل JSON response_data.

3. التحقق من التوافر في الوقت الفعلي: منع الحجوزات المزدوجة

التحدي: عميلان يشاهدان نفس اليخت في نفس التاريخ ويضغطان على "احجز الآن" في نفس الوقت. بدون قفل متشائم (Pessimistic locking) أو تحقق ذكي، تنجح كلتا الحجزين، مما يؤدي إلى بيع المخزون الزائد.

لماذا هذا مهم:

التحقق الآمن من ظروف السباق يحدث ضمن نفس دورة طلب HTTP، مما يقلل نوافذ سباق وقت التحقق
تعليقات المستخدم فورية ومحددة ("بقي مكانان فقط")، مما يدفع التحويلات
عدم تكرار الويب هوك يعني أنه إذا تمت إعادة محاولة معالجة الدفع، فإن إنشاء الحجز آمن
سجل التدقيق عبر جدول yacht_availabilities يظهر تاريخ الحجز

النتيجة: صفر مبيعات زائدة، توافر شفاف، حجوزات واثقة.

4. محرك التسعير وسلة التسوق المعقد: متعدد العناصر، متعدد العملات، منطق ترويجي

التحدي: يجب أن يحسب الدفع السعر الإجمالي مع مراعاة:

عناصر سلة تسوق متعددة (يخوت + رحلات مختلطة)
عدد تذاكر البالغين/الأطفال لكل عنصر
اختلافات التسعير اليومية (توافر اليخوت)
خصومات كود ترويجي (مبلغ ثابت أو نسبة مئوية)
مبيعات إضافية (مشروبات، تأجير معدات) مع تسعير لكل مرسى
ضرائب المرسى (على أساس النسبة المئوية)

الحل الهندسي:

لماذا هذا مهم:

منطق التسعير القابل للتركيب لا يتطلب كوداً جديداً لأنواع الخصم الجديدة
نمط اللقطة (المُلتقط في الحجز) يضمن الدقة التاريخية؛ تغييرات الأسعار بعد الدفع لا تؤثر على التأكيدات
حسابات آمنة للأنواع عبر "decimal cast" في Laravel تمنع أخطاء الفاصلة العائمة
مرآة الواجهة الأمامية (مكونات React) تستخدم منطق حساب متطابق لمعاينة الدفع

5. تحسين الواجهة الأمامية: Inertia + React لتطبيقات الحالة (Stateful SPAs)

التحدي: تتطلب التطبيقات التقليدية المقدمة من الخادم إعادة تحميل كامل للصفحة؛ بينما تضخم تطبيقات SPA حزم JavaScript. يسد Inertia هذه الفجوة: يقدم الخادم الصفحات كمكونات React، مع ترطيب بالخصائص، مما يلغي تعقيد مزامنة الحالة.

لماذا هذا مهم:

أمان الأنواع عبر حدود HTTP عبر Wayfinder؛ يتم توليد معلمات المسار/الاستجابات تلقائياً من مسارات Laravel
تحسين تدريجي عبر خصائص مؤجلة؛ يتم تحميل واجهات Skeleton فوراً بينما يتم تحميل القوائم الثقيلة بشكل غير متزامن
تحديثات تفاعلية دون إعادة تحميل الصفحة؛ تغيرات سلة التسوق تؤدي إلى تحديثات واجهة فورية
صفر تضخم JavaScript لتفاعلية الصفحة؛ يتم ترطيب مكونات الواجهة الضرورية فقط

المميزات والقدرات

المميزات الموجهة للعملاء

التصفح والبحث: تصفية اليخوت والرحلات حسب المدينة، المرسى، السعة، نطاق السعر
سلة التسوق الذكية: إضافة عناصر متعددة، حفظ لوقت لاحق، تعديل الكميات/التواريخ في الوقت الفعلي
الدفع بنقرة واحدة: تدفق دفع مبسط مع Kashier 3DS
حجز مزدوج: حجز اليخوت (ساعة/يومي) أو رحلات منسقة (تسعير بالغ/طفل)
محرك العروض الترويجية: تطبيق أكواد ترويجية، خصومات محسوبة تلقائياً
مبيعات إضافية: خدمات مضافة (مشروبات، معدات) عند الدفع
روبوت المحادثة: دعم عملاء مدعوم بالذكاء الاصطناعي مع تحويل إلى نموذج الاتصال
صفحات المحتوى: معرض الصور، الأسئلة الشائعة، حول/اتصل

لوحة تحكم المسؤول

إدارة الحجوزات: عرض، الموافقة، التعديل، وتسجيل المدفوعات لجميع الحجوزات
إدارة المخزون: إنشاء/تعديل اليخوت، الرحلات، تعيين التوافر، التسعير
إدارة المعرض: تحميل وتنظيم صور المعرض حسب الفئة
الأكواد الترويجية: إنشاء/إدارة أكواد الخصم مع حدود الاستخدام
مبيعات إضافية وإضافات: تكوين خدمات إضافية وتسعير
إعدادات الموقع: إدارة الأسئلة الشائعة، إعدادات الاتصال، التكوين العام

المميزات التقنية

مصادقة 2FA: مصادقة ثنائية تعتمد على TOTP
الوصول القائم على الأدوار: سياسات المسؤول تفرض حدود الأذونات
تصميم متجاوب: Mobile-first، يعمل على جميع الأجهزة
الوضع المظلم: استمرارية السمة، كشف تفضيلات النظام التلقائي
إمكانية الوصول: امتثال WCAG 2.1 AA عبر مكونات Radix UI
جاهزية SSR: قدرة التقديم من جانب الخادم لـ SEO وتحميلات أولية أسرع

هيكل المشروع

octaboats/
├── app/
│   ├── Http/
│   │   ├── Controllers/
│   │   │   ├── Admin/              # وحدات تحكم لوحة تحكم المسؤول
│   │   │   ├── Api/                # نقاط نهاية API
│   │   │   └── *.php               # وحدات تحكم الصفحة العامة
│   │   ├── Requests/               # التحقق من طلب النموذج
│   │   ├── Resources/              # منسقات استجابة JSON
│   │   ├── Middleware/             # برمجيات وسيطة HTTP
│   │   └── Policies/               # سياسات التفويض
│   ├── Models/                     # نماذج Eloquent
│   ├── Services/                   # منطق العمل (الدفع، الويب هوك، تجميع الصفحة)
│   └── Actions/                    # فئات الإجراء الواحد (Fortify auth)
├── resources/
│   ├── js/
│   │   ├── pages/                  # مكونات صفحات React
│   │   │   ├── admin/              # صفحات لوحة تحكم المسؤول
│   │   │   ├── auth/               # تسجيل الدخول، التسجيل، إعادة تعيين كلمة المرور
│   │   │   └── *.tsx               # الصفحات العامة
│   │   ├── components/             # مكونات React قابلة لإعادة الاستخدام
│   │   ├── hooks/                  # خطافات React مخصصة
│   │   ├── services/               # عملاء API للواجهة الأمامية
│   │   ├── types/                  # واجهات TypeScript
│   │   ├── layouts/                # أغلفة التخطيط
│   │   └── app.tsx                 # إعداد Inertia
│   ├── css/
│   │   └── app.css                 # توجيهات Tailwind
│   └── views/                      # قوالب البريد الإلكتروني (Blade)
├── routes/
│   ├── web.php                     # مسارات عامة/ضيوف
│   ├── api.php                     # نقاط نهاية API
│   ├── admin.php                   # مسارات لوحة تحكم المسؤول (تتطلب مصادقة + سياسة مسؤول)
│   ├── settings.php                # مسارات إعدادات المستخدم
│   └── console.php                 # أوامر Artisan
├── database/
│   ├── migrations/                 # ترحيلات المخطط
│   ├── factories/                  # مصانع النماذج للاختبار
│   └── seeders/                    # بذور قاعدة البيانات
├── config/                         # تكوين التطبيق
├── bootstrap/
│   ├── app.php                     # إعداد التطبيق (البرمجيات الوسيطة، التوجيه)
│   └── providers.php               # تسجيل مزود الخدمة
├── tests/                          # اختبارات Pest
├── storage/                        # التحميلات، السجلات، التخزين المؤقت
├── vite.config.ts                  # تكوين بناء الواجهة الأمامية
├── composer.json                   # تبعيات PHP
├── package.json                    # تبعيات Node
└── README.md                       # هذا الملف

اعتبارات أمنية

فرض HTTPS: جميع التكاملات الخارجية تتطلب اتصالات آمنة
حماية CSRF: التحقق من الرموز المميزة في جميع طلبات POST/PUT/PATCH/DELETE
الوقاية من حقن SQL: استعلامات ذات معلمات عبر Eloquent ORM
الوقاية من XSS: React تقوم بالهروب التلقائي للمحتوى الديناميكي؛ لا يوجد dangerouslySetInnerHTML
المصادقة: دعم Fortified 2FA لمستخدمي المسؤول
أمن الدفع: تم تفعيل 3DS، امتثال PCI عبر Kashier
البيانات الحساسة: تشفير كلمات المرور (bcrypt)، الأسرار في .env، حقول two_factor_* مخفية في استجابات API
هام: لا تقم أبداً برفع ملفات .env أو *.key؛ استخدم .env.example كقالب

التقنيات والتبعيات

| الطبقة | التقنية | الإصدار | الغرض | |-------|-----------|---------|---------| | PHP | إطار عمل Laravel | 12.0 | إطار عمل الخلفية | | PHP | Laravel Fortify | 1.30 | مصادقة بدون واجهة | | PHP | Laravel Inertia | 2.0 | خصائص جانب الخادم لـ React | | PHP | Laravel Wayfinder | 0.1.9 | توليد مسارات آمنة للأنواع | | PHP | Pest | 4.4 | إطار اختبار | | الواجهة الأمامية | React | 19.2 | تقديم واجهة المستخدم | | الواجهة الأمامية | TypeScript | الأحدث | أمان الأنواع | | الواجهة الأمامية | Tailwind CSS | 4.0 | تنسيق يعتمد على الأدوات | | الواجهة الأمامية | Radix UI | الأحدث | مكونات بدون واجهة | | الواجهة الأمامية | Inertia.js | 2.3.7 | محول جانب العميل | | البناء | Vite | الأحدث | أداة بناء سريعة | | المدفوعات | Kashier | API مباشر | بوابة الدفع |

الدروس المستفادة وأفضل الممارسات الموضحة

يجسد هذا المشروع هندسة برمجيات بمستوى الإنتاج من خلال:

نظافة المعمارية: العلاقات متعددة الأشكال تقضي على تكرار الكود؛ وحدات التحكم الرقيقة تفوض المهام للخدمات؛ السياسات تفرض التفويض على مستوى النموذج
سلامة المعاملات: معاملات قاعدة البيانات تضمن ذرية الحجز+الدفع؛ عدم تكرار الويب هوك يمنع المعالجة المزدوجة
أمان الأنواع: تغطية TypeScript الكاملة تمنع أخطاء وقت التشغيل؛ Laravel Form Requests تتحقق من جانب الخادم؛ موارد API تشكل الاستجابات بشكل ثابت
تحسين الأداء: التحميل المسبق يقضي على استعلامات N+1؛ التخزين المؤقت الذكي يقلل ضغط قاعدة البيانات؛ تبني Vite يشحن فقط JavaScript الضروري
تجربة المستخدم: Inertia + React توفر استجابة SPA دون تضخم JavaScript؛ Tailwind CSS يتيح تكرار واجهة المستخدم بسرعة وثبات
قابلية الاختبار: بناء جملة Pest التعبيري يجعل نوايا الاختبار واضحة؛ سمة RefreshDatabase تعزل الاختبارات؛ المصانع توفر تركيبات واقعية
الأمان: Fortify يتعامل مع حالات المصادقة؛ السياسات تمركز التفويض؛ معالجة ويب هوك الدفع غير متكررة وذرية
تجربة المطور: Wayfinder يولد مسارات آمنة للأنواع تلقائياً؛ ESLint + Prettier تفرض نمط الكود؛ الخدمات النمطية تشجع على التركيب