شاورما المعلومة

المشروع

Shawarma Lma3louma هو موقع إلكتروني متجاوب تم تطويره لتجميع قائمة المطعم ومواقعه وتقييماته ومعلوماته الأساسية في تجربة رقمية واحدة.

الموقع متوفر بثلاث لغات:

• الفرنسية؛
• الإنجليزية؛
• العربية.

كما تدعم النسخة العربية واجهة RTL بشكل كامل.

تم أيضاً تطوير لوحة تحكم تسمح لفريق المطعم بإدارة محتوى الموقع دون الحاجة إلى تعديل الكود.

التحدي

كان على المشروع معالجة عدة احتياجات في الوقت نفسه:

• تنظيم قائمة كبيرة من المنتجات؛
• دعم ثلاث لغات؛
• دعم RTL للعربية؛
• إدارة المحتوى بشكل ديناميكي؛
• السماح للزوار بإرسال تقييماتهم؛
• حماية نظام التقييمات من الاستخدام الآلي والمسيء؛
• توفير لوحة إدارة آمنة؛
• المحافظة على أداء جيد على الهواتف.

كان من المهم أيضاً الاندماج مع نظام الطلب الحالي للمطعم بدل إنشاء Checkout غير حقيقي داخل الموقع.

تجربة متعددة اللغات

واجهة الموقع متوفرة بالفرنسية والإنجليزية والعربية.

يتم حفظ اللغة التي يختارها المستخدم.

كما تستخدم النسخة العربية تصميماً كاملاً من اليمين إلى اليسار.

يمكن كذلك البحث داخل قائمة المنتجات باستخدام اللغات الثلاث.

قائمة المنتجات

تم تصميم قائمة المنتجات لتبقى سهلة الاستخدام حتى مع زيادة عدد العناصر.

يمكن للزوار استخدام:

• البحث؛
• فلاتر الفئات؛
• الترتيب حسب السعر؛
• اختيار نوع الوجبة؛
• خيارات وأسعار مختلفة للمنتجات.

عند ربط Supabase يصبح هو المصدر الرئيسي لبيانات المنتجات والفئات ومواقع المطعم.

الطلب عبر Glovo

لا يحتوي الموقع على Checkout وهمي.

عندما يريد العميل تقديم طلب، يتم توجيهه مباشرة إلى صفحة Lma3louma على Glovo.

تتكلف Glovo بالتغطية الجغرافية، واختيار الفرع، والأسعار الحالية، وتوفر المنتجات، والدفع والتوصيل.

المواقع وتخطيط الزيارة

يعرض الموقع مواقع فروع المطعم في الدار البيضاء مع روابط Google Maps.

كما يمكن للمستخدم تخطيط زيارة للمطعم.

يقوم الموقع بإنشاء ملف تقويم .ics يمكن إضافته إلى تطبيق التقويم الخاص بالمستخدم.

تقييمات العملاء

يمكن للزوار إضافة تقييم من الموقع دون إنشاء حساب.

يمكن أن يحتوي التقييم على:

• تقييم من نجمة إلى خمس نجوم؛
• عنوان؛
• وصف اختياري؛
• صورة اختيارية.

يتم إنشاء جميع التقييمات بحالة pending.

ولا تظهر للعموم إلا بعد موافقة الإدارة عليها.

حماية نظام التقييمات

تم تطوير عدة طبقات لحماية عملية إرسال التقييمات.

يستخدم المشروع Cloudflare Turnstile للحد من عمليات الإرسال الآلية.

كما يتم تطبيق حدود يومية على مستوى الخادم.

يتم تخزين الصور المرفقة بالتقييمات داخل Storage خاص.

وتقوم سياسات Row Level Security بمنع الوصول إلى الصور الخاصة بالتقييمات التي لم تتم الموافقة عليها.

لوحة الإدارة

توفر صفحة /admin أدوات مخصصة لفريق المطعم.

يمكن للإدارة التحكم في:

• الفئات؛
• المنتجات؛
• المواقع؛
• التقييمات؛
• روابط شبكات التواصل؛
• روابط Glovo وKlit.

واجهة الإدارة نفسها متوفرة أيضاً باللغات الثلاث.

المصادقة والصلاحيات

يستخدم المشروع Supabase Authentication.

لا توجد عملية تسجيل عامة للحصول على صلاحيات الإدارة.

يتم منح صلاحية المسؤول بشكل صريح من خلال قاعدة البيانات.

كما تحمي Row Level Security عمليات الكتابة الحساسة.

عند إزالة مستخدم من قائمة المسؤولين يتم إلغاء صلاحيات الكتابة الخاصة به مباشرة.

الأداء

تم الاهتمام بأداء المشروع منذ مرحلة التطوير.

يستخدم الموقع:

• صور WebP متجاوبة؛
• خطوط WOFF2 محلية؛
• تخزيناً مؤقتاً طويل المدى للملفات الثابتة؛
• تحميل بعض الخدمات عند الحاجة فقط؛
• إيقاف الأنيميشن عندما تصبح العناصر خارج الشاشة.

كما يتم تحميل نموذج التقييم وCAPTCHA فقط عند الحاجة إليهما.

إمكانية الوصول

تم تصميم المكونات التفاعلية باستخدام ممارسات تراعي إمكانية الوصول.

يمكن إغلاق النوافذ المنبثقة باستخدام لوحة المفاتيح ويتم إعادة التركيز إلى العنصر الصحيح بعد إغلاقها.

كما يدعم الموقع إعداد تقليل الحركة الموجود في نظام المستخدم.

الاختبارات

يحتوي المشروع على مجموعة واسعة من الاختبارات الآلية باستخدام Playwright واختبارات PostgreSQL.

تشمل الاختبارات:

• البحث والفلاتر؛
• تغيير الأسعار؛
• خيارات المنتجات؛
• روابط Glovo؛
• حفظ اللغة؛
• RTL؛
• التنقل على الهاتف؛
• إنشاء ملفات التقويم؛
• إرسال التقييمات؛
• CAPTCHA؛
• إدارة المحتوى؛
• رفع الملفات؛
• مراجعة التقييمات؛
• الصلاحيات؛
• عدة أحجام مختلفة للشاشات.

التقنيات المستخدمة

• React 19
• TypeScript
• Vite
• Supabase
• PostgreSQL
• Vercel
• Playwright
• Cloudflare Turnstile
• Row Level Security
• Supabase Storage

النتيجة

النتيجة هي منصة رقمية متكاملة وليست مجرد موقع تعريفي للمطعم.

يجمع Lma3louma بين عرض العلامة التجارية، واستكشاف قائمة الطعام، ومواقع الفروع، وتقييمات العملاء وإدارة المحتوى.

يحصل الزائر على تجربة سريعة ومتجاوبة ومتعددة اللغات، بينما يمكن لفريق المطعم إدارة المحتوى بشكل مستقل من خلال لوحة التحكم.