NahdaAIنهضة
Firebase & Supabase • المستوى الأول • الدرس 4

التصفية المتقدمة والاستعلامات (query, where & orderBy)

العودة لفهرس المستوى

أهداف الدرس العلمية

  • بناء الاستعلامات الفعالة بـ query والشرط where.
  • ترتيب النتائج بـ orderBy والحد من عدد السجلات بـ limit.
  • دمج عدة شروط معاً (Compound Queries) باستخدام where متعددة.
  • تطبيق Pagination عبر startAfter لجلب الصفحات التالية.

1. استعلامات Firestore المركبة

تسمح دالة query بربط عدة شروط معاً، مع مراعاة إنشاء الفهارس المركبة (Composite Indexes) تلقائياً عند الجمع بين where و orderBy على حقول مختلفة.

javascript
// بناء استعلام متدرج خطوة بخطوة
const q = query(
  collection(db, "products"),      // المجموعة
  where("status", "==", "active"), // الشرط الأول
  where("price", ">=", 100),       // الشرط الثاني
  orderBy("createdAt", "desc"),    // الترتيب
  limit(10)                        // الحد الأقصى
);

const snapshot = await getDocs(q);
const results = snapshot.docs.map(d => ({ id: d.id, ...d.data() }));

2. عوامل المقارنة (Where Operators)

المقارنة الأساسية
  • == — يساوي
  • != — لا يساوي
  • > — أكبر من
  • >= — أكبر أو يساوي
  • < — أصغر من
  • <= — أصغر أو يساوي
العمليات المتقدمة
  • in — قيمة داخل مصفوفة
  • not-in — قيمة خارج مصفوفة
  • array-contains — يحوي عنصراً
  • array-contains-any — يحوي أي عنصر

3. Pagination — جلب الصفحات التالية

1. الصفحة الأولى
const q1 = query(
  collection(db, 'products'),
  limit(5)
);
2. آخر مستند
const lastDoc =
  snapshot.docs[snapshot.docs.length - 1];
3. الصفحة التالية
const q2 = query(
  collection(db, 'products'),
  startAfter(lastDoc),
  limit(5)
);
التطبيق العملي المباشر

تحدي الدرس الرابع: بناء استعلامات متقدمة

قم بالتعديل على الكود بداخل المحرر أدناه لتطبيق المتطلبات التالية:

  1. غيّر قيمة limit في الدالة الأصلية إلى 10 (بدل 5).
  2. أنشئ دالة getProductsByPriceRange(minPrice, maxPrice) مع شرطي where لفلترة السعر.
  3. أنشئ دالة getProductsByCategories(categoryIds) تستخدم عامل where("categoryId", "in", categoryIds).
  4. أنشئ دالة getFeaturedInStock() بـ where("featured", "==", true) و where("stock", ">", 0).
  5. أضف startAfter إلى imports وأنشئ دالة getNextPage(lastDocSnapshot).
  6. اضغط "تشغيل الكود" لرؤية نتائج الاستعلامات.
⏳ جارٍ تحميل المحرر التفاعلي...