Ahmed Alaydiموقع تعريفي أُعيد بناؤه ليصبح منصة أعمال.
نظام إدارة محتوى متعدد اللغات، ومتجر إلكتروني، وصندوق لإدارة طلبات العملاء، وREST API كامل داخل منصة Laravel واحدة — وواجهة Next.js تقرأ منها كل كلمة في الموقع العام.
- الدور
- مطوّر متكامل
- الجدول الزمني
- نظام فعلي
- الصناعة
- إدارة محتوى / تجارة إلكترونية / إدارة عملاء
- الحالة
- جاهز للتشغيل
ما هذا النظام
بدأت «يسر للأعمال المتقدمة» موقعًا تعريفيًا وانتهت نظامًا تُدار به الشركة. أخرجت إعادة البناء كل محتوى الموقع من الشيفرة إلى سجلات يملكها المحرّر: شريحة الهيرو، وتعريف الشركة، وكل قطاع أعمال بصفحته الخاصة، ومشروع نور، وخيارات التمويل، والخدمات، والمشاريع، وشريط التنقل، وتذييل الموقع، والصفحات الداخلية، والمدونة. وحول طبقة المحتوى هذه نما متجر، وحسابات عملاء، وصندوق للطلبات الواردة، ومركز إشعارات — فاللوحة نفسها التي تنشر عنوانًا هي التي تعالج طلبًا وتردّ على طلب تمويل. ويعرض REST API ذلك كله لواجهة Next.js، ما يعني أن الموقع العام يعرض محتوى حيًّا لا نسخة جُمّدت وقت البناء.
ما الذي احتجنا حله
كان موقع الشركة ثابتًا: كل عنوان وقطاع وخدمة وصورة يعيش داخل الشيفرة، فأصغر تعديل في المحتوى يحتاج مطوّرًا وإصدارًا جديدًا. ولم يكن هناك متجر ولا حسابات عملاء ولا مكان واحد يجمع الطلبات التي تقوم عليها الأعمال فعلًا — فرسائل التواصل وطلبات عروض الأسعار والاستشارات وطلبات التمويل والصيانة كانت تصل عبر قنوات متفرقة. وإضافة لغة أو قطاع أو خط منتجات كانت تعني إعادة بناء صفحات لا إضافة سجلات.
كيف أطلقناه
منصة Laravel بلوحة إدارة مبنية بـInertia وReact تملك كل محتوى الموقع، إضافةً إلى واجهة Next.js تقرأ منها عبر REST API. فكل كتلة محتوى سجلٌّ له ترجماته وحالة نشره ووسائطه، فيغيّر المحرّرون الموقع دون لمس الشيفرة. والمنصة نفسها تدير المتجر — المنتجات والتصنيفات والسلة والمفضلة وإتمام الشراء والطلبات — وصندوقًا لإدارة العملاء يجمع أنواع الطلبات الستة في صف واحد بحالة وإشعارات. وتُضاف الصفحات والقطاعات والمنتجات والمقالات والخدمات الجديدة كبيانات لا كمسارات جديدة في الشيفرة.
كيف يُوصل النظام
Laravel يملك البيانات والقواعد. وتُقدَّم لوحة الإدارة عبر Inertia مع React وTypeScript، فتكون شاشات الإدارة مكوّنات React دون الحاجة إلى صيانة طبقة API منفصلة للاستخدام الداخلي — ويبقى التحقق والصلاحيات وحماية CSRF داخل Laravel حيث النماذج. أما الموقع العام فواجهة Next.js منفصلة تتحدث إلى المنصة عبر REST API ولا تقرأ قاعدة البيانات مباشرة. والمحتوى والتجارة وإدارة العملاء ثلاثة مجالات فوق مخطط MySQL واحد: كل كتلة محتوى ومنتج وطلب ورسالة سجلٌّ له حالته وترجماته وصلاحياته، ولهذا صارت إضافة قطاع أو لغة عملية بيانات لا إصدارًا جديدًا.
النماذج وقواعد العمل والتحقق والصلاحيات وحماية CSRF. وكل عملية كتابة — محتوى أو طلب أو رسالة — تمر بها، فلا يوجد طريق إلى البيانات يتجاوز القواعد.
لوحة الإدارة مبنية بـReact وTypeScript وتُعرض عبر Inertia، فتعطي إحساس التطبيق أحادي الصفحة دون صيانة سطح API ثانٍ مخصص للشاشات الداخلية.
مخطط علائقي واحد يضم كتل المحتوى بترجماتها، وكتالوج المنتجات، والعملاء، والطلبات، وصف الطلبات الواردة — مترابطة لا معزولة.
العقد الذي بُني عليه الموقع العام: الصفحة الرئيسية، وشريط التنقل، والتذييل، وصفحات الشركة، والقطاعات، والتمويل، والمدونة، والمنتجات، والتصنيفات، والمصادقة، والسلة، والمفضلة، والطلبات، وطلبات الأعمال.
الموقع العام. يجلب المحتوى وبيانات المتجر من الـAPI عبر Axios، فيظهر ما يُنشر في لوحة التحكم على الموقع دون تعديل شيفرة أو إعادة بناء لمحتوى مكتوب داخلها.
اختيارات هندسية
نظام إدارة المحتوى متعدد اللغات
لوحة الإدارة التي تملك الموقع العام. كل كتلة أدناه سجلٌّ له محتواه بالعربية والإنجليزية والفرنسية، وحالة نشر خاصة به، ووسائطه — وهذا ما يجعل الموقع قابلًا للتحرير دون مطوّر.
النظام في لمحة: الطلبات والعملاء وقيمة الطلبات والمنتجات والصفحات والاستفسارات المفتوحة، مع حركة الطلبات وتوزيع حالاتها والاستفسارات الواردة خلال اثني عشر شهرًا، وأحدث الطلبات، وإجراءات سريعة لإضافة منتج أو مقال.
الواجهة ثنائية اللغة فعليًا لا مترجمة في مكانها: التبديل إلى العربية يعكس التخطيط كاملًا، وينقل القائمة الجانبية، ويعيد رسم كل تسمية ورسم بياني ورقم في الاتجاه الآخر.
لكل شريحة عنوان وعنوان فرعي وصورة، ويعرض كل صف اللغات المتوفرة له، وما إذا كان ظاهرًا، وما إذا كان منشورًا. ويمكن إعادة ترتيب الشرائح بالسحب أو بالأسهم، أو تعطيلها، أو نقلها إلى الأرشيف.
كتلة «من نحن»، تُحرَّر لكل لغة عبر تبويبات العربية / English / Français. وتُرفق الصورة الرئيسية والثانوية مع اسم الملف وأبعاده، وشريط الإحصائيات خيار قابل للتفعيل بحدّ أقصى ست إحصائيات.
عنوان القسم يُترجم لكل لغة، أما القطاعات نفسها فقائمة مرتّبة تحته — لكل قطاع صورته وشارات لغاته ومفتاح ظهوره وإجراء تعديله.
محتوى مبادرة الطاقة النظيفة وصور العارض والمزايا. والشاشة تعلن قاعدتها بنفسها: عند وجود صورة واحدة فقط يُعطَّل التشغيل التلقائي للعارض في الواجهة.
منتجات التمويل كعناصر مرتّبة بأيقونات. والشرطة بدل شارة اللغة تعني ترجمة لم تُكتب بعد، فيظهر النقص في لمحة بدل اكتشافه على الموقع الحي.
قسم التتبع وإدارة الأساطيل، مقسّمًا إلى تبويبات المحتوى والصورة والمميزات وأنظمة الأمن والسلامة. والمهم هو التنبيه: النشر محجوب حتى تكتمل العربية والإنجليزية والفرنسية، وتحمل تبويبات اللغات نقطة تشير إلى الناقص منها.
القسم الذي يغذّي عارض المشاريع في الصفحة الرئيسية، بالشرط نفسه لاكتمال الترجمة، وبحالة فارغة تخبر المحرّر بما ينبغي إضافته أولًا.
شعاران منفصلان للخلفية الفاتحة والداكنة مع معاينة حية لكليهما، إضافةً إلى اسم العلامة والعبارة التعريفية والنص البديل للشعار بكل لغة — ويعود النص البديل إلى اسم العلامة عند تركه فارغًا بدل نشر صورة بلا وصف.
العلامة التجارية والنشرة البريدية وحسابات التواصل في ثلاثة تبويبات، مع شعارَي تذييل فاتح وداكن، ومعاينة يمكن تبديلها بين الثيمين، واسم الشركة والنبذة ونص حقوق النشر بكل لغة.
الصفحة الداخلية، مفصولة عمدًا عن قسم «من نحن» في الصفحة الرئيسية: لها صورة واجهتها، وتبويب رؤيتها ومهمتها، وحالة نشرها الخاصة.
صفحة القطاعات — واجهة الصفحة، والقطاعات التي تعرضها، وتبويب القدرة التشغيلية — منفصلة أيضًا عن شريط القطاعات في الرئيسية، فيمكن لكل منهما أن يقول شيئًا مختلفًا.
لكل قطاع صفحة كاملة خاصة به، بواجهة ومحتوى وصور ومسار. وإضافة قطاع تضيف صفحة، لا تضيف مسارًا في الشيفرة.
قطاع التعليم، مبنيّ من نموذج الصفحة نفسه المستخدم في التعدين لكن بتبويباته ووسائطه الخاصة — وهو أوضح دليل على أن القطاعات الجديدة لا تتطلب قوالب جديدة.
المقالات محسوبة حسب الحالة — الكل والمنشور والمسودة والمجدول — مع بحث بالعنوان أو المعرّف وفلترة حسب الحالة والتصنيف والتمييز.
التصنيف الذي تُجمَّع وتُفلتَر به المقالات في المدونة العامة، وله أرشيفه الخاص فيُخفى التصنيف المتوقف بدل حذفه من تحت مقالاته.
المتجر وإدارة العملاء والصلاحيات
النصف الذي يتعامل مع المال والناس: كتالوج وطلباته، وحسابات العملاء خلفها، وكل طلب أو رسالة يمكن أن ينتجها الموقع العام، وحسابات الإدارة المسموح لها بالاقتراب من أي من ذلك.
الكتالوج منظّم في شجرة يسهل تصفّحها — تفصل العدادات تصنيفات المستوى الأعلى عن الإجمالي، ويعرض كل صف عدد المنتجات تحته وما إذا كان مفعّلًا.
كل ما يبيعه المتجر بكل اللغات، مع بحث بالاسم أو رمز الصنف أو المعرّف. وصف النموذج يظهر في شريط الفلاتر: التصنيف والحالة والتوفر والتسعير والتمويل وقابلية الإضافة للسلة والتمييز، وكذلك «ترجمة ناقصة». ويحمل كل صف سعره وحالة توفره (بما فيها الطلب المسبق) ومخزونه واللغات المتوفرة له.
الطلبات المُنشأة من الموقع العام، محسوبة حسب قيد المراجعة والمؤكّد والمكتمل. وحالة الطلب وحالة الدفع وحالة التجهيز ثلاثة أعمدة وثلاثة فلاتر مستقلة، لأن الطلب قد يكون مؤكّدًا وغير مدفوع وغير مُجهَّز في الوقت نفسه.
الحسابات المسجّلة في الموقع العام، محسوبة حسب النشط وبانتظار التفعيل والمحظور. مع بحث بالاسم أو البريد أو الهاتف أو الشركة أو المدينة، وفلترة حسب الحالة ونوع الحساب والجنسية والدولة وتوثيق البريد وتاريخ التسجيل.
كل ما يمكن أن ينتجه الموقع من طلبات يصل إلى صف واحد: رسائل التواصل، وطلبات عروض الأسعار، والاستشارات، وطلبات التمويل، واستفسارات تتبع الأساطيل، وطلبات الصيانة. ولكل طلب نوعه ووسيلة التواصل معه وحالته وما إذا كان مقروءًا — وهذا ما يمنع ضياع الطلبات بين قنوات متفرقة.
حسابات المسؤولين بأدوارهم وحالاتهم وآخر دخول وتاريخ الإنشاء، مع فلترة حسب الدور والحالة. وإدارة الصلاحيات قسم مستقل في اللوحة لا إعداد مدفون داخل شاشة أخرى.
الواجهات الخارجية
الصفحة الرئيسية وشريط التنقل والتذييل وصفحات الشركة وقطاعات الأعمال ومشروع نور وخيارات التمويل والمدونة — كل نصوص الموقع العام وصوره تأتي من هنا لا من ملفات داخل المستودع.
المنتجات والتصنيفات والسلة والمفضلة والطلبات، فتقرأ الواجهة الكتالوج نفسه الذي تحرّره لوحة الإدارة، دون نسخة ثانية يجب إبقاؤها متطابقة.
تسجيل العملاء ودخولهم وإدارة جلساتهم في الموقع العام، منفصلة عن مصادقة لوحة الإدارة نفسها.
كل نموذج عام — تواصل، عرض سعر، استشارة، تمويل، صيانة — يُرسَل عبر الـAPI إلى الصف نفسه، ولهذا يكون الصندوق مكتملًا بحكم البناء.
يستهلك موقع Next.js هذه النقاط عبر Axios. فيظهر المحتوى المنشور في لوحة التحكم على الموقع العام دون تعديل شيفرة — وهذا كان الهدف من إعادة البناء كلها.
ما يتحكم به المسؤولون
الطلبات والعملاء وقيمة الطلبات والمنتجات والصفحات والاستفسارات المفتوحة، مع حركة الطلبات وتوزيع حالاتها والاستفسارات الواردة على مدى اثني عشر شهرًا، وأحدث الطلبات، وإجراءات سريعة.
أقسام الصفحة الرئيسية وشريط التنقل وتذييل الموقع — الأجزاء التي تظهر في كل صفحة.
من نحن، والتمويل، وقطاعات الأعمال بصفحة لكل قطاع، والمدونة والأخبار بمقالاتها وتصنيفاتها وإعدادات صفحتها.
التصنيفات والمنتجات والطلبات، لكل منها عدّاداته وبحثه وفلاتره.
حسابات العملاء وصندوق طلبات الأعمال، مجموعان معًا لأنهما وجهان لعلاقة واحدة.
مستخدمو الإدارة بأدوارهم وحالاتهم — قسم مستقل في أعلى القائمة لا صفحة فرعية داخل الإعدادات.
مشاكل صعبة، تم التعامل معها
ثلاث لغات عبر عشرات كتل المحتوى تعني أن قسمًا قد يُنشر والعربية مكتوبة والفرنسية ناقصة، فيرتد الموقع العام بصمت — ولا تظهر الفجوة إلا لزائر فرنسي.
صار اكتمال الترجمة شرطًا للنشر لا عرفًا. فيرى المحرّر اللغات الناقصة على التبويب نفسه، ويبقى زر النشر محجوبًا حتى تُكتب الثلاث.
الموقع الأصلي كان يكتب كل قطاع وخدمة وصفحة داخل الشيفرة، فإضافة واحد منها تعني قوالب ومسارات جديدة وإصدارًا جديدًا.
نُمذجت الصفحات والأقسام كسجلات فوق نموذج صفحة مشترك. فالقطاع الجديد صفٌّ يجلب معه واجهته ومحتواه وصوره وصفحة تفاصيله — وقطاعا التعدين والتعليم هما القالب نفسه يحمل بيانات مختلفة.
كانت الطلبات تصل عبر قنوات غير مترابطة، فتُتابَع عروض الأسعار والاستشارات والتمويل والصيانة في أماكن مختلفة أو لا تُتابَع أصلًا.
صار كل نموذج عام يُرسَل عبر الـAPI إلى صف واحد بنوع وحالة ووسم قراءة. والصندوق مكتمل لأنه لا يوجد طريق آخر يدخل منه الطلب إلى النظام.
حالة طلب واحدة لم تكن تكفي للتعبير عن الواقع — فقد يكون الطلب مؤكّدًا وغير مدفوع، أو مدفوعًا وغير مُجهَّز.
فُصلت حالة الطلب وحالة الدفع وحالة التجهيز إلى ثلاثة حقول بثلاثة فلاتر مستقلة، فتتحرك كل منها بإيقاعها وتبقى القائمة صادقة عن موضع الطلب فعليًا.
واجهتان — لوحة إدارة بـInertia وموقع عام بـNext.js — كانتا مهدّدتين بأن تصبحا تطبيقين للقواعد نفسها.
بقيت القواعد في Laravel. فتصل إليها لوحة الإدارة عبر Inertia ويصل إليها الموقع العام عبر REST API، ولا تحتفظ أي منهما بنسخة ثانية من منطق التحقق أو الصلاحيات.
مبني ليظل سريعاً
التصميم والتفاعل
جاهز للإطلاق والتشغيل
ما الذي يفعله
العربية والإنجليزية والفرنسية تُحرَّر جنبًا إلى جنب في كل كتلة، مع التعامل الكامل مع RTL وLTR في لوحة الإدارة والموقع العام. والنشر مشروط بالاكتمال، فلا يصل قسم نصف مترجم إلى الإنتاج ويرتد بصمت إلى لغة أخرى.
لكل كتلة حالات مسودة ومنشور ومخفي مستقلة عن بعضها، إضافةً إلى أرشيف. فيستطيع المحرّر تجهيز قسم وإبقاءه خارج الموقع الحي ونشره لاحقًا دون حذف أو تكرار.
أقسام الصفحة الرئيسية والصفحات الداخلية سجلات منفصلة لا محتوى واحد معروض مرتين، فيمكن لشريط القطاعات في الرئيسية ولصفحة القطاعات أن يقولا أشياء مختلفة — ويظل لكل قطاع صفحته الكاملة.
تُرفق الصور بكل كتلة مع أسماء الملفات وأبعادها وإجراءات الاستبدال والإزالة، وتوجد نسختان فاتحة وداكنة أينما وجب أن يظهر الشعار على خلفيتين.
منتجات وتصنيفات هرمية، وسلة ومفضلة، وإتمام شراء وطلبات. ويحمل المنتج رمز صنفه وسعره وحالة توفره بما فيها الطلب المسبق ومخزونه وقابليته للإضافة للسلة ووسم التمييز، وبنية الدفع مهيّأة لربط مزوّد دون إعادة تشكيل نموذج الطلب.
حالة الطلب وحالة الدفع وحالة التجهيز تُتابَع منفصلة، وهذا ما يتيح للشركة أن ترى أن الطلب مؤكّد وغير مدفوع، أو مدفوع وغير مُجهَّز، بدل ضغط ذلك كله في حالة واحدة.
حسابات مسجّلة بحالتها ونوعها وتوثيق بريدها وجنسيتها وموقعها، إضافةً إلى سجل طلباتها — قابلة للبحث والفلترة لا مجرد الوصول إليها عبر الطلب الذي أنشأها.
رسائل التواصل وعروض الأسعار والاستشارات وطلبات التمويل واستفسارات تتبع الأساطيل وطلبات الصيانة تصل كلها إلى صندوق واحد بنوع وحالة ووسم قراءة، فلا يعتمد شيء على تذكّر أحدهم فحص قناة ثانية.
ترفع لوحة الإدارة إشعارات للطلبات الجديدة والرسائل الواردة ونشاط النظام، فيصبح الصف شيئًا يُبلَّغ به الموظفون لا شيئًا عليهم البحث عنه.
لماذا اخترنا ما اخترناه
Inertia للوحة الإدارة، وREST للموقع العام.
الشاشات الداخلية لا تحتاج عقدًا عامًا، ومنحها إياه يعني صيانة وتأمين سطح API ثانٍ بلا فائدة. أما الموقع العام فيحتاج عقدًا، ولذلك حصل على REST API حقيقي.
نمذجة المحتوى كسجلات لا كشيفرة.
قيد الموقع الأصلي كان أن المحتوى يعيش داخل القوالب. وجعل كل كتلة وقطاع وصفحة ومقال سجلًا له ترجماته وحالة نشره هو ما حوّل تغييرات المحتوى من إصدارات إلى تعديلات.
اشتراط اكتمال الترجمة للنشر.
الارتداد الصامت بين اللغات يخفي المشكلة عمّن يستطيع إصلاحها ويعرضها على الزائر. وحجب النشر ينقل الاكتشاف إلى المكان الصحيح.
فصل حالة الطلب عن الدفع عن التجهيز.
حقل حالة واحد يجبر الشركة على اختيار أي الحقائق تسجّل. وثلاثة حقول تسجّلها جميعًا، فتصبح الفلاتر مفيدة فعلًا.
صندوق واحد لكل أنواع الطلبات.
الطلبات التي تصل عبر قنوات مختلفة تُعالَج بطرق متفاوتة. وتمرير الأنواع الستة كلها عبر الـAPI إلى صف واحد يجعل الاكتمال بنيويًا لا مسألة انضباط.
النتائج
دراسات حالة أخرى
تبني شيئاً مشابهاً؟
هيا نحدد نطاق منصتك — لوحة تحكم وتطبيقات موبايل و APIs والمنصة كاملة.