تم تصميم سلة التسوق كجزء منفصل من موقع e-commerce من الصفر و القابلة للتكوين حسب الرغبة بنسبة 100% والتي تتميز بالآتي:
Front-End: تم التصميم بلغة ReactJs و Tailwind CSS
Back-end: يعتمد التواصل على Laravel Rest API، الذي يستند إلى لغة PHP الشهيرة، مع استخدام تقنية التوثيق (Authentication) المدمجة في Laravel وإرسالها للتحقق والأمان (Authentication token) لكل طلب باستخدام axios. قاعدة البيانات المستخدمة هي MySQL.
______________________________________
محتويات الفيديو مع توضيح المميزات والنهج المتبع والتقنيات المستخدمة لحل المشاكل:
________________________________________________
1- الاستجابة (Responsivity):
تم تصميم هذه سلة التسوق لتكون متجاوبة مع جميع الشاشات، حيث قمنا بتجربتها على العديد من الأجهزة مثل اللابتوب، والتابلت، والهاتف الذكي مثل iPhone أو أي جهاز آخر بحجم مشابه.
التقنيات المستخدمة :material-tailwind، Tailwind CSS، mui، و Tailwind CSS لتخصيص الشكل.
2- الإشعارات:
تمت إضافة نافذة منبثقة للإشعارات و التي يمكن تكوينها، والتحكم بسهولة متى تظهر أو تختفي. في هذا السياق تظهر عندما يتم الوصول إلى الحد الأقصى للمخزون، وتمت إضافتها أيضًا لعمليات الحذف وترك العربة.
التقنيات المستخدمة : React-Toastify .
3- الـ Debounce والـ Throttling:
(الـDebounce هو ببساطة منع الطلبات المتكررة في مدة زمنية قابلة للتكوين و ذلك لتقليل الأحمال على السيرفر و توفير الوقت و المال و ليكون موقعك بأفضل سرعة ممكنة.)
تم استخدام مزيج متعدد من leading debounce الرائد وtrailing debounce الذيلي لجلب العربة بسرعة فور الضغط على الأيكونة، مع منع أو تقليل تكرار الطلبات بعد فتح العربة. كما تم استخدام Debouncing بفترة زمنية قدرها 1500 مللي ثانية للسماح للمستخدم بالنقر في تحديث الكمية بزيادة أو نقصان خلال فترة زمنية محددة وإرسال الطلب النهائي عندما ينتهي وذلك لتحديث العربة في Laravel.
لتحقيق أقصى أداء، يمكنك أيضًا ملاحظة أنه في حالة وجود تحديث أو تلاعب بالعربة، يتم إلغاء وإلغاء (Abort) جميع طلبات "cart" لجلب معلومات العربةالتي لم تتم بعد لعدم الحاجة إليها لتوفير الوقت والموارد.
التقنيات المستخدمة: Lodash.
4- إشعارات مخصصة لحالة السلة:
تم تصميم نظام لحالة السلة قابل للتخصيص بشكل كبير. في هذا المثال، قمنا باستخدام علامة "x" لجميع طلبات axios التي تفشل وصولها أو استلامها على حد سواء، (باستثناء تلك التي تكون معطيات التوثيق غير صالحة والتي في هذه الحالة يتم تسجيل الخروج وتوجيه المستخدم إلى صفحة الدخول، وأيضًا تلك التي تم إلغاؤها (Aborted).
في هذا المثال التوضيحي، قمنا بإيقاف تشغيل خادم موقع Laravel API، ثم قمنا بتجربة حالة الخطأ عند جلب السلة أو تحديثها. بمجرد إعادة تشغيل الخادم باستخدام "php artisan serve"، يمكن لعلامة التحميل (Syncing) و الانتهاء(Synced) للظهور .