صور المشروع
نظرة عامة
طوّرت Brmgina تطبيق الجوال الرسمي لمتجر TheOutlet.sa ليقدّم تجربة تسوّق أصلية على iOS وAndroid، مع مزامنة كاملة مع المتجر الإلكتروني المبني على WordPress وWooCommerce. التطبيق مبني بـ Flutter بنمط هجين يجمع بين واجهات أصلية (Native) وعرض صفحات المتجر عبر WebView محسّن، مع واجهات برمجية مخصصة (theoutlet/v1) وWooCommerce REST API.
نُشر التطبيق على Apple App Store وGoogle Play تحت هوية المتجر الرسمية (theoutlet.sa)، ليصل العملاء إلى نفس الكتالوج والعروض والحساب من هواتفهم مباشرة.
التحدي
كان المطلوب تحويل تجربة الموقع إلى تطبيق جوال احترافي يحافظ على محتوى المتجر وتعدد اللغات (العربية والإنجليزية)، ويضيف طبقة أصلية للتنقل والأداء والإشعارات والموقع، مع إمكانية التحديث والنشر المستمر على متاجر التطبيقات.
الحل
صممنا ونفّذنا تطبيقاً هجيناً يعتمد على:
- واجهات أصلية للتنقل والرئيسية والأقسام السريعة.
- WebView ذكي لصفحات المتجر مع إخفاء عناصر الهيدر/القائمة الخاصة بالموقع داخل التطبيق.
- تكامل خلفي مع WooCommerce وخيارات ACF عبر REST API.
- دعم WPML لتبديل اللغة وروابط الصفحات حسب اللغة الافتراضية والمسارات المعرّبة.
أبرز المميزات
تجربة مستخدم أصلية
- شريط تنقل علوي أصلي (الرئيسية، المتجر، الأقسام، العروض، الحساب).
- شريط تنقل سفلي أصلي (المفضلة، السلة، الدفع، الحساب).
- قائمة جانبية (Side Drawer) للوصول السريع.
- تنقل سياقي يُظهر/يُخفي الأيقونات حسب الصفحة (مثل إخفاء المفضلة في السلة والدفع).
- سحب للتحديث (Pull-to-Refresh) ومؤشرات تحميل واضحة.
تسوق متكامل مع WooCommerce
- استعراض المنتجات والأقسام والعلامات التجارية والعروض.
- سلة تسوق، الدفع، المفضلة، وحساب العميل.
- تكامل WooCommerce REST API للمنتجات والفئات والطلبات والعملاء.
- واجهات رئيسية أصلية تغذيها بيانات المتجر (سلايدر، أقسام مميزة، مميزات المتجر، منتجات الأسبوع).
- عرض رمز الريال وبطاقات منتجات محسّنة مع تخزين مؤقت للصور.
تعدد اللغات وRTL
- دعم العربية والإنجليزية عبر WPML.
- واجهة عربية كاملة مع اتجاه RTL.
- تبديل اللغة داخل التطبيق مع إعادة تحميل الروابط الصحيحة لكل لغة.
إشعارات وتفاعل
- إشعارات Push عبر Firebase Cloud Messaging.
- إشعارات محلية مساندة.
- مشاركة أصلية للمنتجات/الروابط (Share).
موقع ووضع غير متصل
- خدمات الموقع لعرض المتاجر القريبة.
- وضع Offline مع تخزين محلي متقدم (SQLite) وتخزين مؤقت للصفحات.
- فحص الاتصال بالإنترنت ومعالجة انقطاع الشبكة برسائل واضحة.
الأمان والأداء
- اتصالات HTTPS فقط.
- تخزين آمن للبيانات الحساسة والجلسات.
- تسجيل دخول وإدارة جلسة المستخدم.
- تخزين مؤقت للصفحات والمنتجات لتحسين السرعة.
النشر والمتاجر
- بناء وإصدار لـ iOS وAndroid.
- نشر التطبيق على App Store وGoogle Play.
- ضبط هوية التطبيق Package Name / Bundle لتتوافق مع النسخة المنشورة.
- جاهزية التحديثات المستمرة عبر مسارات البناء والإصدار.
التقنيات المستخدمة
Flutter · Dart · WebView · WooCommerce REST API · WordPress/ACF · WPML · Firebase Messaging · SQLite · Geolocator · Secure Storage · Shared Preferences · Android & iOS Native Shells
النتيجة
أصبح لدى TheOutlet.sa قناة جوال رسمية منشورة على أكبر متجرين للتطبيقات، بتجربة أقرب للتطبيق الأصلي مع الاستفادة من نفس محتوى المتجر الإلكتروني، ودعم كامل للغة العربية، وإشعارات، وموقع، ووضع غير متصل — بما يسهّل نمو المبيعات وتحسين تجربة العملاء على الجوال.