مشروع تطبيق الكوبونات والخصومات والكاش باك 1) مقدمة المشروع تطبيق الموبايل هو الواجهة الرئيسية للمستخدم النهائي، ويهدف إلى: عرض الكوبونات والخصومات عرض المتاجر والعروض دعم الكاش باك حفظ المفضلة إدارة حساب المستخدم استقبال الإشعارات دعم اللغة العربية والإنجليزية دعم أكثر من دولة التطبيق سيكون مبني باستخدام: React Native TypeScript React Navigation Axios Zustand أو Redux Toolkit AsyncStorage Firebase Notifications 2) الهدف من التطبيق التطبيق يجب أن يوفّر تجربة سهلة وسريعة للمستخدم بحيث يستطيع: تصفح المتاجر الوصول للكوبونات بسرعة نسخ الأكواد الانتقال إلى المتجر تفعيل الكاش باك حفظ المفضلة تعديل بياناته استقبال العروض الجديدة عبر الإشعارات 3) التقنية المعتمدة 3.1 Framework React Native 3.2 Language TypeScript 3.3 Navigation React Navigation 3.4 State Management Zustand أو Redux Toolkit 3.5 API Calls Axios 3.6 Local Storage AsyncStorage 3.7 Notifications Firebase Cloud Messaging 3.8 UI Library اختياري: React Native Paper NativeBase أو Custom UI 4) هيكل المشروع mobile-app/ │ ├── src/ │ ├── assets/ │ │ ├── images/ │ │ ├── icons/ │ │ └── fonts/ │ │ │ ├── components/ │ │ ├── common/ │ │ ├── cards/ │ │ ├── buttons/ │ │ ├── inputs/ │ │ └── modals/ │ │ │ ├── screens/ │ │ ├── splash/ │ │ ├── onboarding/ │ │ ├── auth/ │ │ ├── home/ │ │ ├── discover/ │ │ ├── stores/ │ │ ├── coupons/ │ │ ├── cashback/ │ │ ├── favorites/ │ │ ├── notifications/ │ │ ├── profile/ │ │ └── settings/ │ │ │ ├── navigation/ │ │ ├── RootNavigator.tsx │ │ ├── AuthNavigator.tsx │ │ ├── MainTabNavigator.tsx │ │ └── AppStackNavigator.tsx │ │ │ ├── services/ │ │ ├── api.ts │ │ ├── auth.service.ts │ │ ├── home.service.ts │ │ ├── stores.service.ts │ │ ├── coupons.service.ts │ │ ├── cashback.service.ts │ │ ├── favorites.service.ts │ │ ├── notifications.service.ts │ │ └── profile.service.ts │ │ │ ├── store/ │ │ ├── auth.store.ts │ │ ├── app.store.ts │ │ ├── favorites.store.ts │ │ ├── home.store.ts │ │ └── notification.store.ts │ │ │ ├── hooks/ │ ├── utils/ │ ├── constants/ │ ├── types/ │ └── localization/ │ ├── App.tsx └── package.json 5) أنواع المستخدمين داخل التطبيق 5.1 زائر يستطيع: تصفح الصفحة الرئيسية عرض المتاجر عرض الكوبونات البحث تصفح التصنيفات 5.2 مستخدم مسجل يستطيع: حفظ المفضلة تفعيل الكاش باك تعديل الحساب استقبال الإشعارات الشخصية متابعة سجل الاستخدام 6) تدفق التطبيق 6.1 أول دخول Splash Screen Onboarding اختيار اللغة اختيار الدولة دخول / تسجيل / تخطي 6.2 بعد الدخول الانتقال إلى Main Tabs: الرئيسية اكتشف الكاش باك الحساب 7) Navigation Structure 7.1 Root Navigator يتحقق من: هل المستخدم فتح التطبيق أول مرة؟ هل المستخدم مسجل دخول؟ هل اللغة والدولة محفوظة؟ 7.2 Auth Navigator يشمل: Login Register Forgot Password OTP Verification 7.3 Main Tab Navigator التبويبات الرئيسية: Home Discover Cashback Account 7.4 App Stack شاشات إضافية: Store Details Coupon Details Favorites Notifications Search FAQ Terms Privacy Contact Us 8) الشاشات الأساسية 8.1 Splash Screen الهدف عرض الشعار تحميل الإعدادات الأساسية التحقق من حالة المستخدم الوظائف قراءة token قراءة language قراءة country التوجيه المناسب 8.2 Onboarding Screen الهدف شرح فكرة التطبيق للمستخدم المحتوى شاشة 1: كوبونات وخصومات شاشة 2: متاجر وعروض شاشة 3: كاش باك ومفضلة الأزرار التالي تخطي ابدأ الآن 8.3 اختيار اللغة العناصر قائمة اللغات زر حفظ المطلوب من API GET /languages 8.4 اختيار الدولة العناصر قائمة الدول علم الدولة زر حفظ المطلوب من API GET /countries 8.5 Login Screen العناصر Email / Phone Password زر دخول نسيت كلمة المرور إنشاء حساب المطلوب POST /auth/login 8.6 Register Screen العناصر الاسم الإيميل رقم الهاتف كلمة المرور تأكيد كلمة المرور كود الإحالة اختياري المطلوب POST /auth/register 8.7 Home Screen الهدف عرض أهم محتويات التطبيق الأقسام Header Search Bar Banner Slider Categories Featured Stores Featured Coupons Cashback Stores Latest Offers المطلوب من API GET /home البيانات المطلوبة banners categories featuredStores featuredCoupons cashbackStores 8.8 Discover Screen الهدف عرض جميع العروض والمتاجر العناصر Tabs أو Segments: الكل الكوبونات المتاجر فلترة ترتيب Grid / List View المطلوب من API GET /stores GET /coupons الفلاتر category_id search featured sort 8.9 Store Details Screen الهدف عرض تفاصيل متجر محدد العناصر Logo اسم المتجر وصف المتجر زر مفضلة زر مشاركة زر تسوق الآن قائمة الكوبونات قسم الكاش باك إن وجد المطلوب من API GET /stores/{id} GET /stores/{id}/coupons GET /stores/{id}/cashback 8.10 Coupon Details Screen الهدف عرض تفاصيل كوبون أو عرض العناصر اسم المتجر اللوجو الكود نسبة الخصم الوصف شروط الاستخدام زر نسخ الكود زر تسوق الآن المطلوب من API GET /coupons/{id} POST /coupons/{id}/copy POST /coupons/{id}/click 8.11 Cashback Screen الهدف عرض متاجر الكاش باك العناصر Banner توضيحي قائمة المتاجر نسبة الكاش باك الشروط زر تفعيل المطلوب من API GET /cashback/stores GET /cashback/offers POST /cashback/activate/{store_id} 8.12 Favorites Screen الهدف عرض العناصر المحفوظة العناصر Stores Favorites Coupons Favorites زر إزالة المطلوب من API GET /favorites POST /favorites/toggle 8.13 Notifications Screen الهدف عرض الإشعارات للمستخدم العناصر عنوان الإشعار محتوى مختصر تاريخ حالة القراءة المطلوب من API GET /notifications POST /notifications/read/{id} 8.14 Account Screen الهدف إدارة الحساب والإعدادات العناصر بيانات المستخدم اللغة الدولة المفضلة سجل الكاش باك الأسئلة الشائعة الشروط الخصوصية تواصل معنا تسجيل الخروج المطلوب من API GET /profile PUT /profile PUT /profile/language PUT /profile/country 8.15 Search Screen الهدف البحث في المتاجر والكوبونات العناصر Input search نتائج البحث فلترة حسب النوع المطلوب من API GET /stores?search= GET /coupons?search= 9) المكونات المشتركة 9.1 AppHeader يستخدم في أغلب الشاشات ويشمل: عنوان الصفحة زر رجوع زر إشعارات زر مشاركة حسب الحاجة 9.2 StoreCard يعرض: لوجو اسم المتجر وصف مختصر نسبة خصم أو كاش باك 9.3 CouponCard يعرض: اسم المتجر الكود نسبة الخصم الوصف زر نسخ 9.4 CashbackCard يعرض: المتجر نسبة الكاش باك زر تفعيل 9.5 BannerCarousel يعرض البنرات الرئيسية 9.6 FavoriteButton يعمل toggle للمفضلة 9.7 FilterModal يعرض خيارات: الترتيب التصنيفات نوع العروض 9.8 SearchInput بحث عام داخل التطبيق 10) إدارة الحالة State Management 10.1 authStore يحتفظ بـ: user token isAuthenticated 10.2 appStore يحتفظ بـ: language country theme isFirstLaunch 10.3 homeStore يحتفظ بـ: banners categories featuredStores featuredCoupons 10.4 favoritesStore يحتفظ بـ: favoriteStores favoriteCoupons 10.5 notificationsStore يحتفظ بـ: notifications unreadCount 11) التخزين المحلي AsyncStorage يتم حفظ: access_token refresh_token إن وجد user_data selected_language selected_country onboarding_done app_settings 12) الاتصال بالـ API 12.1 ملف api.ts يحتوي على: baseURL headers token interceptor error handling مثال هيكل: import axios from 'axios'; const api = axios.create({ baseURL: 'http://localhost:8000/api/v1', timeout: 15000, }); api.interceptors.request.use(async config => { return config; }); export default api; 12.2 Services Layer كل موديول له service مستقل: auth.service.ts stores.service.ts coupons.service.ts cashback.service.ts 13) نماذج البيانات Types User export interface User { id: number; name: string; email: string; phone?: string; language_id?: number; country_id?: number; } Store export interface Store { id: number; name: string; logo: string; description?: string; cashback_rate?: number; is_featured?: boolean; } Coupon export interface Coupon { id: number; store_id: number; title: string; code?: string; type: 'code' | 'deal'; discount_value?: string | number; description?: string; } 14) Authentication Flow عند تسجيل الدخول استدعاء API تخزين token جلب بيانات المستخدم التحويل إلى Main Tabs عند تسجيل الخروج حذف token حذف بيانات المستخدم العودة إلى شاشة Login 15) Favorites Flow عند الضغط على زر المفضلة إذا المستخدم غير مسجل: يفتح Login إذا مسجل: إرسال toggle إلى API تحديث local state مباشرة 16) Coupon Copy Flow عند الضغط على زر نسخ: نسخ الكود إلى Clipboard إرسال POST /coupons/{id}/copy إظهار Toast: تم نسخ الكود 17) Store Redirect Flow عند الضغط على تسوق الآن: إرسال POST /coupons/{id}/click أو store click فتح الرابط الخارجي داخل Browser 18) Notifications Flow تسجيل FCM Token إرسال التوكن إلى الباك إند استقبال الإشعارات عند الضغط على الإشعار يتم فتح الشاشة المناسبة 19) التعدد اللغوي i18n يجب دعم: العربية RTL الإنجليزية LTR المطلوب ملفات ترجمة: ar.json en.json تغيير الاتجاه تلقائيًا كل النصوص من ملفات الترجمة وليس hardcoded 20) UI/UX Requirements تصميم بسيط وسريع ألوان واضحة أزرار كبيرة تجربة نسخ الكوبون سهلة دعم الشاشات الصغيرة والكبيرة Skeleton Loading Empty States Error States 21) الحماية والأمان حفظ التوكن بشكل آمن حماية الشاشات الخاصة منع الوصول للمفضلة والحساب بدون تسجيل التحقق من صلاحية الجلسة التعامل مع 401 تلقائيًا 22) التعامل مع الأخطاء أمثلة فشل الإنترنت خطأ في السيرفر بيانات دخول خاطئة كوبون غير متاح متجر غير موجود واجهة الاستخدام Toast / Alert Retry Button رسائل واضحة للمستخدم 23) الأداء Performance Pagination للقوائم Lazy Loading للصور FlatList بدل ScrollView للقوائم الطويلة Cache للبيانات الأساسية تقليل إعادة الرسم 24) الاختبارات المطلوبة Functional Testing Login/Register Copy Coupon Favorite Toggle Cashback Activate Search Notifications UI Testing توافق على Android توافق على iPhone RTL/LTR أحجام شاشات مختلفة 25) MVP Version أول نسخة من التطبيق يفضل تشمل: Splash Login / Register Home Discover Store Details Coupon Details Cashback Favorites Account Notifications Language / Country 26) خطة التنفيذ المرحلة 1 إعداد المشروع Navigation Theme Localization API setup المرحلة 2 Auth Home Discover Store Details Coupon Details المرحلة 3 Favorites Cashback Profile Notifications المرحلة 4 تحسين الأداء الاختبارات التجهيز للنشر 27) Dependencies مقترحة npm install @react-navigation/native npm install @react-navigation/native-stack npm install @react-navigation/bottom-tabs npm install react-native-screens react-native-safe-area-context npm install axios npm install zustand npm install @react-native-async-storage/async-storage npm install react-native-vector-icons npm install react-native-toast-message npm install i18next react-i18next npm install @react-native-clipboard/clipboard ولو Expo نضيف حسب الحاجة: npx expo install expo-localization npx expo install expo-notifications 28) تسمية الملفات المقترحة HomeScreen.tsx DiscoverScreen.tsx StoreDetailsScreen.tsx CouponDetailsScreen.tsx CashbackScreen.tsx FavoritesScreen.tsx AccountScreen.tsx NotificationsScreen.tsx 29) المخرجات النهائية المطلوبة من فريق الموبايل React Native App كامل TypeScript clean structure Reusable components API integration RTL support Android build iOS build 30) ملاحظات مهمة للمشروع التطبيق والويب يجب يشتركان في نفس الـ API كل تعديل من الداشبورد يظهر مباشرة بالموبايل الكوبونات لازم تدعم نوعين: Code Deal الكاش باك لازم يكون قابل للتفعيل والتتبع المفضلة لا تعمل إلا بعد تسجيل الدخول