شاشات الانطلاق والتسجيل
أول ما يراه المستخدم عند فتح التطبيق – من الشاشة الافتتاحية إلى التحقق من الهاتف.
NAFELPay
ادفع وقودك بذكاء
بدون نقود – بدون انتظار
بدون نقود – بدون انتظار
لديك حساب؟ سجّل دخولك
شاشة البداية
←
إنشاء حساب
أدخل بياناتك للبدء
الاسم الكامل
أحمد محمد
رقم الجوال
05XXXXXXXX
كلمة المرور
••••••••
تأكيد كلمة المرور
••••••••
لديك حساب؟ سجّل دخولك
التسجيل
📲
تحقق من هاتفك
أرسلنا كود إلى
05XX XXX XX34
05XX XXX XX34
7
4
3
_
لم يصلك الكود؟ أعد الإرسال (58)
التحقق OTP
الرئيسية والمحفظة
لوحة التحكم الرئيسية للمستخدم – رصيده وآخر معاملاته وأزرار العمليات السريعة.
مرحباً 👋
أحمد محمد
🧑
رصيدك الحالي
350.00 ر.س
الإجراءات السريعة
ادفع بـ QR
محطة قريبة
المعاملات
الإعدادات
آخر المعاملات
⛽
محطة الفهد – الرياض
اليوم، 10:24 ص
-150 ر.س
⬆
شحن رصيد – بطاقة مدى
أمس، 7:00 م
+300 ر.س
⛽
محطة النور – جدة
15 يناير
-85 ر.س
الرئيسية
المعاملات
تصدير PDF
الكل
دفع وقود
شحن رصيد
يناير 2025
⛽
محطة الفهد
15 يناير – 10:24 ص
-150 ر.س
⬆
شحن – مدى
14 يناير – 7:00 م
+300 ر.س
⛽
محطة النور
10 يناير – 2:15 م
-85 ر.س
⬆
شحن – بطاقة VISA
5 يناير – 11:00 ص
+200 ر.س
⛽
محطة الأمين
2 يناير – 8:50 ص
-60 ر.س
سجل المعاملات
شحن الرصيد
المستخدم يختار المبلغ وطريقة الدفع لتعبئة محفظته الرقمية.
←
شحن الرصيد
اختر المبلغ وطريقة الدفع
المبلغ المراد شحنه
200 ر.س
رصيدك بعد الشحن: 550 ر.س
50
100
200
500
طريقة الدفع
بطاقة VISA
**** **** **** 4821
بطاقة مدى
**** **** **** 7320
تحويل بنكي
آيبان SA...
اختيار المبلغ
✅
تم الشحن بنجاح!
+200 ر.س
رصيدك الجديد
550 ر.س
طريقة الدفع
VISA ****4821
رقم العملية
#TXN-2025-0441
التاريخ
15 يناير، 10:25 ص
تأكيد الشحن
الدفع بـ QR Code
المستخدم يولّد رمز QR ديناميكي مؤقت – العامل يمسحه فيتم الخصم فوراً.
ادفع الآن
⏱ 02:47
المبلغ المطلوب
150.00 ر.س
📍 محطة الفهد – الرياض
اطلب من عامل المحطة
مسح هذا الرمز
مسح هذا الرمز
🔒 مدفوعة آمنة ومشفرة
QR Code للمستخدم
⛽
تم الدفع بنجاح!
-150 ر.س
المحطة
محطة الفهد
الرصيد المتبقي
200 ر.س
رقم العملية
#PAY-20250115
الوقت
10:27 ص
تأكيد الدفع
تطبيق محطة الوقود
واجهة خاصة بعمال المحطة – إدخال المبلغ، مسح QR، تأكيد الاستلام.
⛽
محطة الفهد
📍 شارع التحلية، الرياض
عامل: محمد
أدخل المبلغ المستحق
150.00
ريال سعودي
1
2
3
4
5
6
7
8
9
.
0
⌫
تأكيد وعرض QR Scanner ✓
إدخال المبلغ
مسح QR
✅
تمت العملية بنجاح!
+150 ر.س
العميل
أحمد م.
المبلغ المحصّل
150 ر.س
رقم العملية
#PAY-20250115
الوقت
10:27 ص
إجمالي اليوم
1,240 ر.س
تأكيد الاستلام
تدفق عملية الدفع الكاملة
خطوة بخطوة – من لحظة طلب الوقود حتى تأكيد النجاح لكلا الطرفين.
المستخدم (تطبيق العميل)
العامل (تطبيق المحطة)
الخادم (PHP API)
1
يملأ العامل خزان الوقود
بعد انتهاء التزويد يفتح تطبيق المحطة
تطبيق المحطة
2
إدخال المبلغ المستحق
يكتب العامل المبلغ مثلاً: 150 ريال ثم يضغط "تأكيد"
تطبيق المحطة
3
تفتح شاشة QR Scanner
الكاميرا تنشط تلقائياً في وضع المسح
تطبيق المحطة
4
المستخدم يفتح تطبيقه ويضغط "ادفع"
يرى الرصيد المتاح ويطلب توليد QR Code
تطبيق المستخدم
5
الخادم يولّد جلسة QR مشفرة
يُنشأ token فريد صالح لمدة 3 دقائق فقط ويُشفَّر بـ AES-256
PHP API + Redis
6
QR Code يظهر على شاشة المستخدم
رمز ديناميكي مع عداد تنازلي 3:00 دقائق
تطبيق المستخدم
7
العامل يمسح الـ QR Code
الكاميرا تقرأ الرمز وترسل الطلب للخادم مع المبلغ
تطبيق المحطة
8
الخادم يتحقق وينفذ التحويل
يتحقق من: صحة الـ token، صلاحيته الزمنية، عدم إعادة استخدامه، كفاية الرصيد – ثم يُنفّذ Atomic Transaction
MySQL + Redis
9
إشعار نجاح للمستخدم
Push notification + شاشة تأكيد مع تفاصيل العملية والرصيد المتبقي
FCM + Flutter
10
إشعار نجاح للعامل
شاشة "تمت العملية بنجاح" مع إيصال وإجمالي اليوم
تطبيق المحطة
المعمارية التقنية
كيف تتواصل مكونات النظام مع بعضها – Flutter ↔ PHP API ↔ Database.
📱 التطبيقات
👤
تطبيق المستخدم
Flutter 3.x · Riverpod
⛽
تطبيق المحطة
Flutter 3.x · BLoC
🔌
HTTP Client
Dio 5.x · Interceptors
📸
QR Scanner
mobile_scanner
🔔
الإشعارات
firebase_messaging
⚙️ الخادم
🐘
API Server
PHP 8.2 · Laravel 11
🔐
المصادقة
JWT · Laravel Sanctum
📨
Queue Worker
Laravel Queue · Redis
💳
بوابة الدفع
Paymob / Stripe API
🗺
الخرائط
Google Maps API
🗄️ البيانات
🐬
قاعدة البيانات
MySQL 8.0 · Replication
⚡
Cache / Sessions
Redis 7 · QR Tokens
☁️
Cloud Storage
AWS S3 / DO Spaces
📊
Monitoring
Laravel Telescope
🐳
Deployment
Docker · Nginx
تدفق البيانات عند الدفع
Flutter
تطبيق المستخدم
تطبيق المستخدم
→
HTTPS API
PHP Laravel
PHP Laravel
→
Redis
QR Token Check
QR Token Check
→
MySQL
Atomic Transfer
Atomic Transfer
→
FCM
Push Notify
Push Notify
→
Flutter x2
تأكيد الطرفين
تأكيد الطرفين