التحدي والسياق
احتاج العميل إلى منصة رقمية لعرض وبيع تجارب السفر المنسقة بما في ذلك منتجعات العافية وباقات المغامرات وجولات الوجهات. تضمنت المتطلبات دعماً متعدد اللغات لأسواق العربية والإنجليزية، ونظام إدارة محتوى يمكن الموظفين غير التقنيين من تحديث الباقات والأسعار، وواجهة أمامية عالية الأداء تُحمَّل بسرعة عبر ظروف الشبكة المتفاوتة في المنطقة.
كان الحل الحالي موقعاً ثابتاً يتطلب تدخل المطورين لكل تحديث محتوى. كانت فرق التسويق بحاجة إلى الاستقلالية لإضافة باقات جديدة وتحديث تفاصيل الوجهات وإدارة عروض المنتجعات دون الاعتماد على الموارد الهندسية.
بنية النظام وتصميمه
يتكون النظام من تطبيقين مترابطين. النهاية الخلفية مبنية على Laravel 12 مع PHP 8.2، وتخدم API من نمط RESTful يعرض نقاط نهاية للباقات والوجهات والمنتجعات والأسئلة الشائعة والدعم. الواجهة الأمامية هي تطبيق Next.js 15 مكتوب بلغة TypeScript، يستهلك هذه الـ APIs ويعرض صفحات من جانب الخادم لتحسين محركات البحث.
تستخدم النهاية الخلفية SQLite للتطوير مع مخطط مصمم للترحيل السهل إلى MySQL في الإنتاج. تشمل نماذج البيانات الباقة والوجهة والمنتجع والأسئلة الشائعة والدعم، مع علاقات متعدد إلى متعدد بين الباقات وكل من الوجهات والمنتجعات. بُنيت لوحة الإدارة باستخدام Filament 3، مما يوفر واجهة جاهزة لإدارة المحتوى دون تطوير مخصص.
تتبع الواجهة الأمامية نمط المستودع للاتصال بـ API، مع فئات مصنع تنشئ مثيلات المستودع المناسبة حسب اللغة. تحول مهام رسم الخرائط استجابات API إلى واجهات TypeScript، مما يضمن سلامة النوع طوال تطبيق العميل.
القرارات الهندسية الرئيسية
وفر اختيار Laravel 12 مع Filament 3 وظائف لوحة الإدارة الفورية مباشرة. يتضمن نظام Filament دعماً مدمجاً للترجمة من خلال حزمة filament-translatable-fields، والتي تم استغلالها لتمكين إدارة المحتوى بالعربية والإنجليزية دون مكونات نموذج مخصصة.
تتولى Spatie Media Library جميع أصول الصور للباقات والوجهات. يوفر هذا القرار تحسيناً تلقائياً، وتوليد صور متجاوبة، وواجهة نظيفة لربط صور متعددة بكل نوع محتوى. تُعرَّف مجموعات الوسائط في كل نموذج، مما يضمن سلوكاً متناسقاً عبر لوحة الإدارة.
تستخدم الواجهة الأمامية next-intl للتدويل، مع توجيه مهيأ لدعم عناوين URL القائمة على اللغة. تضمن البرمجية الوسيطة اكتشاف اللغة وإعادة التوجيه، بينما يمركز تكوين i18n تحميل الترجمات. تتضمن طلبات API معاملات اللغة، مما يسمح للنهاية الخلفية بإرجاع محتوى مترجم بشكل مناسب.
أوليت سلامة النوع من خلال تعريف واجهات TypeScript شاملة لجميع أنواع البيانات. تحول مهام رسم الخرائط استجابات API الأولية إلى كائنات مقيدة الكتابة، مما يكتشف عدم اتساق البيانات المحتمل أثناء التطوير بدلاً من وقت التشغيل.
تطبق النهاية الخلفية مراقبين للإبطال التلقائي للتخزين المؤقت والمهام المتعلقة بتحسين محركات البحث عند تغيير المحتوى. توفر خدمة TagParser تحليلاً متناسقاً للقيم المفصولة بفواصل إلى مصفوفات لحقول مثل الأنشطة وخيارات الإقامة وعروض المحاليل الوريدية.
التسليم والنتائج
أطلقت المنصة مع دعم كامل للعربية والإنجليزية، مما مكن العميل من خدمة سوقي اللغتين من قاعدة كود واحدة. يمكن لمديري المحتوى الآن إضافة الباقات وتحديث الوجهات وتعديل تفاصيل المنتجعات من خلال لوحة إدارة Filament دون مساعدة المطورين.
توفر واجهة Next.js الأمامية تحميلاً سريعاً للصفحات من خلال عرض الخادم، بينما تسمح البنية القائمة على API أولاً بتطبيقات محمولة مستقبلية أو تكاملات خارجية. يتيح الفصل النظيف بين إدارة المحتوى والعرض التوسع المستقل لكل طبقة.
أضيف تكامل PostHog للتحليلات، مما يوفر رؤى حول سلوك المستخدم وشعبية الباقات. يسمح الهيكل المعياري بإضافة ميزات جديدة بسهولة مثل سير عمل الحجز أو حسابات المستخدمين أو معالجة المدفوعات في مراحل لاحقة.