Delivery-App

تطبيق توصيل الطعام

تم بناء تطبيق توصيل الطعام باستخدام React Native لتقديم تجربة سلسة للمستخدمين على منصات Android وiOS. يعتمد التطبيق على Supabase لإدارة تسجيل الدخول وتخزين البيانات المتعلقة بالحسابات والطلبات. يُسهِّل التطبيق على المستخدمين تصفح المطاعم، إضافة الأطباق إلى السلة، وتقديم الطلبات بطريقة سلسة ومريحة. يتضمن التطبيق أيضًا خاصية الخرائط لتوضيح موقع المستخدم والمطاعم لتسهيل عملية التوصيل.

المراحل التنفيذية:

مرحلة التصميم والتخطيط:

تم تصميم واجهات المستخدم باستخدام Figma لإنشاء تصميمات جذابة وسهلة الاستخدام، تشمل شاشة تسجيل الدخول، شاشة المطاعم، شاشة السلة، وخدمة الخرائط.

تم التخطيط لتجربة المستخدم بحيث تكون بسيطة وسريعة، من تسجيل الدخول إلى إتمام الطلب، مع التركيز على سهولة الاستخدام.

تسجيل الدخول وإنشاء حساب:

تعتمد عملية تسجيل الدخول وإنشاء الحساب على Supabase Authentication. يمكن للمستخدمين تسجيل الدخول باستخدام بريدهم الإلكتروني وكلمة المرور.

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

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

عرض المطاعم:

بعد تسجيل الدخول، يتم عرض مجموعة من المطاعم المتاحة على الشاشة الرئيسية. تم بناء هذه الشاشة باستخدام مكونات FlatList لعرض قائمة المطاعم بشكل منظم وسلس.

يتم جلب بيانات المطاعم من قاعدة بيانات Supabase وتحديثها في الوقت الفعلي، مما يتيح عرض معلومات دقيقة ومحدثة عن المطاعم.

عند الضغط على أي مطعم، يتم عرض قائمة الأطباق المتاحة في المطعم، مع تفاصيل مثل السعر والوصف.

إضافة الأطعمة إلى السلة:

يمكن للمستخدم اختيار الأطباق من قائمة المطعم وإضافتها إلى السلة.

عند الضغط على أي طبق، يتم عرض تفاصيله، مثل المكونات والسعر.

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

يتم حفظ الطلبات مؤقتًا في حالة التطبيق (State) حتى يتم تأكيد الطلب.

خدمة الخرائط:

يعتمد التطبيق على Google Maps API لتوفير خدمة الخرائط، حيث يتم عرض موقع المطعم على الخريطة بالإضافة إلى موقع المستخدم.

يساعد هذا المستخدم على تحديد موقع المطعم بدقة ومعرفة المسافة التقديرية لعملية التوصيل.

تم استخدام مكون React Native Maps لدمج الخرائط داخل التطبيق وعرض المسارات بطريقة واضحة وسلسة.

إتمام الطلب:

بعد اختيار الأطعمة وإضافتها إلى السلة، يمكن للمستخدم مراجعة الطلب وإتمام عملية الشراء.

يتم إرسال بيانات الطلب إلى قاعدة بيانات Supabase لحفظها وتنسيق عملية التوصيل مع المطعم.

يتم عرض إشعار تأكيد عند نجاح عملية تقديم الطلب.

الميزات الرئيسية:

نظام تسجيل الدخول وإنشاء الحساب: يسمح للمستخدمين بإنشاء حسابات جديدة أو تسجيل الدخول باستخدام البريد الإلكتروني وكلمة المرور.

عرض المطاعم وقائمة الأطباق: يتم عرض جميع المطاعم المتاحة مع قوائم الأطباق بشكل منظم وسهل التصفح.

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

خدمة الخرائط: توفر الخريطة معلومات حول موقع المطعم والمستخدم لتسهيل عملية التوصيل.

إشعار تأكيد الطلب: يتم إرسال تأكيد عند إتمام الطلب لضمان متابعة التوصيل.

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

React Native: لتطوير التطبيق على كل من Android وiOS.

Supabase Authentication: لتسجيل الدخول وإنشاء الحسابات.

Supabase Database: لتخزين بيانات المطاعم، الأطباق، والطلبات.

Google Maps API وReact Native Maps: لتوفير خاصية الخرائط وتحديد المواقع.

Figma: لتصميم الواجهات وتجربة المستخدم.