العميل: Petroapp (بتروآب)
القطاع: نظام تقني لإدارة أساطيل المركبات والوقود للشركات — يعتمد على شريحة NFC ذكية لضبط الاستهلاك ومنع التلاعب
ما التحدي الذي واجهته Petroapp؟
Petroapp منصة تقنية سعودية تربط الشركات بمحطات الوقود ومراكز الخدمة عبر شريحة ذكية تُركّب في المركبة، لتتيح لها ضبط ميزانية الوقود ومنع الغش والتلاعب في الاستهلاك. المنصة تتوسع فعليًا في أكثر من سوق إقليمي، وكان لازم يكون للموقع بنية تقنية قادرة على استيعاب هذا التوسع دون تعقيد إداري أو تقني.المشاكل التي كانت تواجه المشروع قبل البداية
- تصميم Figma جاهز، لكن يحتاج تنفيذ تقني دقيق يراعي أن الموقع لن يخدم دولة واحدة بل 4 دول بخصائص مختلفة
- كل دولة تحتاج محتوى، باقات أسعار، وبيانات تواصل مستقلة تمامًا عن باقي الدول
- تعقيد إضافي في اللغات: بعض الدول تحتاج لغتين (عربي/إنجليزي)، ودولة واحدة تحتاج إنجليزي فقط، ودولة أخرى تحتاج إنجليزي وتايلاندي معًا
- خطر واضح في هذا النوع من المواقع: تداخل المحتوى بين نسخ الدول المختلفة إذا لم تُبنَ البنية بشكل صحيح من البداية
- ضرورة أن يعمل الموقع بسلاسة كاملة على كل الأجهزة، لأن جزءًا كبيرًا من عملاء الشركات يتصفحون العروض من الموبايل
كيف فكرنا في الحل؟
قبل أي تنفيذ، رسمنا خريطة كاملة لكل دولة على حدة: ما اللغة أو اللغتين المطلوبتين، ما بنية الروابط الصحيحة لكل نسخة، وكيف نمنع أي تداخل أو تكرار في المحتوى بين الأسواق الأربعة.المحور الأول — تحويل دقيق من Figma إلى WordPress
نفّذنا كل تفاصيل تصميم Figma — الألوان، الخطوط، المسافات، وحالات التفاعل — داخل بيئة WordPress بأمانة كاملة، مع الحفاظ على هوية Petroapp البصرية موحّدة عبر كل نسخ الدول.المحور الثاني — بنية دول مستقلة بروابط منظّمة
كل دولة أخذت مسارها الخاص ضمن هيكل روابط واضح: السعودية على الرابط الرئيسي، ومصر ونيجيريا وتايلاند كل واحدة في مسارها المستقل — بحيث تدير كل نسخة محتواها وباقاتها وبيانات تواصلها دون أي تعارض مع باقي الدول.المحور الثالث — نظام لغوي مرن حسب كل سوق
بدل تطبيق نموذج لغة واحد على كل الدول، بنينا نظامًا مرنًا يراعي طبيعة كل سوق:- السعودية ومصر: عربي وإنجليزي بالكامل
- نيجيريا: إنجليزي فقط
- تايلاند: إنجليزي وتايلاندي
التنفيذ — قائمة كاملة بما أنجزناه
أولاً — الموقع والبنية التقنية
- تحويل تصميم Figma الكامل إلى موقع WordPress حي متعدد النسخ
- بناء هيكل روابط منفصل ونظيف لكل دولة من الدول الأربع
- تصميم Mobile-First لكل نسخة دولة على حدة
- بناء صفحات الخدمات الفرعية: فليت آب، إدارة الوقود، الزيوت، الغسيل
ثانياً — البنية متعددة الدول
- نسخة السعودية: الموقع الرئيسي بكامل الخدمات والباقات
- نسخة مصر: نسخة مستقلة بمحتوى وباقات خاصة بالسوق المصري
- نسخة نيجيريا: نسخة إنجليزية مستقلة تمامًا
- نسخة تايلاند: نسخة ثنائية اللغة (إنجليزي / تايلاندي)
ثالثاً — النظام اللغوي
- تفعيل التبديل بين العربي والإنجليزي في السعودية ومصر
- تفعيل التبديل بين الإنجليزي والتايلاندي في نسخة تايلاند
- الإبقاء على نيجيريا بالإنجليزية فقط دون تعقيد لغوي غير ضروري
- ضبط اتجاه الصفحة (RTL/LTR) بشكل صحيح في كل نسخة لغوية
رابعاً — التجاوب مع الأجهزة
- اختبار كل نسخة دولة عبر جميع أحجام الشاشات (Desktop / Tablet / Mobile)
- تحسين نماذج الاشتراك في الباقات لتكون سهلة الاستخدام من الموبايل
- الحفاظ على تسلسل بصري واضح لبطاقات الباقات (ذهبية، فضية، برونزية) عند تصغير الشاشة
- موقع واحد بهوية موحدة يخدم 4 أسواق مختلفة دون أي تداخل في المحتوى
- تجربة مستخدم متجاوبة بالكامل عبر كل الأجهزة في كل نسخ الدول
- نظام لغوي مرن يراعي احتياج كل سوق دون تعقيد إضافي
- بنية قابلة للتوسع تسمح لـ Petroapp بإضافة دول جديدة مستقبلاً بسهولة
