إضافة الالوان للمنتج
1️⃣ تعديل الـ Model (لو لسه ما فيه ألوان) لنفرض إن عندك Product بهذا الشكل (مثال): نضيف له حقل خاص بالألوان، وليكن قائمة أرقام int تمثل ألوان ARGB: استخدمنا List<int> بدل List<Color> لأن أسهل شيء تخزن الألوان كقيمة رقمية مثل…
admin
إضافة أزرار الزيادة والنقصان للكمية
1️⃣ إضافة متغيّر الكمية في الـ State داخل _ProductDetailsPageState: 2️⃣ ويدجت لبناء زر + رقم + زر – أضِف هذه الدالة داخل نفس الكلاس: تقدر تستبدل GestureDetector + Container بـ IconButton لو تحب شكل أبسط. 3️⃣ استدعاء الودجت داخل الـ…
createAsyncThunk 2
0️⃣ أوّل شيء: مشكلة صغيرة في الـ import أنت كاتب: في react-hot-toast الصحيح هو: إذن غيّر السطر الأوّل إلى: وباقي الكود يمشي عادي مع toast.error(…). (وبرضه الجملة اللي في التوست تقول “تم جلب البيانات بنجاح” والأفضل تخليها toast.success 😉، راح…
createAsyncThunk
سأقسّم الشرح لمراحل: 1️⃣ تركيب المكتبات المطلوبة لو ما ركّبتها من قبل: 2️⃣ عمل ملف Axios مستقل (اختياري لكنه أفضل تنظيمًا) ملف: api.js الفائدة: لو بكرا غيرت الـ baseURL أو أضفت توكن، تعدّل مكان واحد فقط. 3️⃣ إنشاء Slice للتعامل…
مثال 2 عن Redux Toolkit
بس بدل “عداد” نخليه رصيد بنك فيه: بنفس نمط المثال السابق: Slice + Store + Component ❤️ 1️⃣ ملف الـ Slice: bankSlice.js لاحظ:نفس الفكرة بالضبط مثل counterSliceلكن الحقل اسمه balance بدل valueوالدوال: deposit و withdraw بدل increment و decrement. 2️⃣…
مثال عن Redux Toolkit
سأقسمه لثلاثة ملفات: 1️⃣ ملف الـ Slice: الجمع والطرح ملف: counterSlice.js شرح سريع لما حدث هنا: 2️⃣ ملف الـ Store وربطه بالـ Slice ملف: store.js ما الذي حصل هنا؟ 3️⃣ ربط الـ store مع تطبيق React عادة في ملف main.jsx…
Redux And Redux ToolKit
✅ أولاً: ما هي Redux؟ Redux هي مكتبة لإدارة الحالة (State Management) في تطبيقات JavaScript، خصوصًا React.تساعدك في حفظ البيانات المشتركة بين أجزاء التطبيق ومزامنتها بطريقة منظمة. ✔ ما الذي تقدمه Redux؟ ❗ مشكلة Redux التقليدي ✅ ثانيًا: ما هي…
HTTP
ما هو HTTP؟ HTTP اختصار لـ: HyperText Transfer Protocolبروتوكول نقل النص الفائق ببساطة: هو القواعد/اللغة اللي يتفاهم بها المتصفح أو الفرونت إند (العميل) مع السيرفر عبر الإنترنت. كل مرة: 1️⃣ من يتكلم مع من؟ في HTTP عندنا طرفين: العميل يرسل…
ما هي الـ API
أولاً: ما هي الـ API؟ API اختصار لـ:Application Programming Interfaceواجهة برمجية للتواصل بين “شيئين”: فـ API كلمة عامّة جدًا، مش مرتبطة بالويب فقط. أمثلة بسيطة: إذًا: API = أي طريقة منظمة تخليك تتواصل مع نظام/كود آخر. ثانياً: ما هي REST…
Axios Post Method
1️⃣ ما هي POST ومتى نستخدمها؟ HTTP Method: POST نستخدمها لما نحب: الفرق عن GET: 2️⃣ شكل axios.post الأساسي الصيغة العامة: مثال بسيط: هنا: 3️⃣ أنواع البيانات اللي نرسلها مع POST 🔹 (1) JSON عادي (الأكثر استخدامًا) Axios في المتصفح…