Kodax

مقدمة في Firebase — Firebase

مقدمة في Firebase

Firebase منصة من Google تقدم خدمات خلفية جاهزة: Firestore (قاعدة مستندات)، Authentication، Storage، Cloud Functions، Hosting، والإشعارات والتحليلات. التطبيق يتصل بها مباشرة من الواجهة، والحماية تأتي من قواعد الأمان (الدرس الأخير).

Firestore مقابل SQL

SQL:        جدول ← صفوف ← أعمدة ثابتة
Firestore:  مجموعة (collection) ← وثائق (documents) ← حقول مرنة، ويمكن أن تحتوي مجموعات فرعية
users/{uid}/orders/{orderId}

| | SQL (PostgreSQL) | Firestore |

|---|---|---|

| المخطط | صارم | مرن (المسؤولية عليك) |

| الربط (JOIN) | ✅ | ❌ — تُكرَّر البيانات أو تُقرأ على مراحل |

| الاستعلامات | أي شرط تقريباً | محدودة وتحتاج فهارس لكل تركيبة شروط |

| الوقت الحقيقي | إضافي | مدمج |

| التسعير | حسب الخادم/الحجم | لكل عملية قراءة وكتابة — التصميم السيئ مكلف |

SDK المعياري (v9 فما فوق)

// npm install firebase
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
  authDomain: "my-app.firebaseapp.com",
  projectId: "my-app",
  storageBucket: "my-app.appspot.com",
};

export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);

الصيغة المعيارية (دوال مستقلة تُستورد) تسمح لأدوات البناء بحذف ما لا تستخدمه. الشروحات القديمة تستخدم firebase.firestore().collection(...) (v8) — لا تخلط الأسلوبين.

هل apiKey سر؟

لا: إعدادات Firebase للويب تعريفية وتصل للمتصفح بالضرورة. الحماية الحقيقية: قواعد الأمان، و App Check، وتقييد المفتاح بنطاقاتك في Google Cloud Console. لكن مفاتيح حساب الخدمة (Admin SDK) أسرار حقيقية للخادم فقط.

نمذجة البيانات: صمم حسب الشاشات

في Firestore تسأل "ماذا تعرض الشاشة؟" ثم تصمم الوثائق لتُقرأ بأقل عدد قراءات — حتى لو كررت بعض البيانات (اسم الكاتب داخل المنشور مثلاً).

تمرين

أنشئ مشروع Firebase، وفعّل Firestore في وضع الإنتاج (القواعد ترفض كل شيء افتراضياً)، واربط تطبيق ويب بالإعدادات أعلاه.

// تثبيت Firebase
// npm install firebase

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs, addDoc } from 'firebase/firestore';

// إعداد Firebase
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_PROJECT.firebaseapp.com",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_PROJECT.appspot.com",
  messagingSenderId: "123456789",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// ===== قراءة البيانات =====
const querySnapshot = await getDocs(collection(db, 'users'));
querySnapshot.forEach((doc) => {
  console.log(doc.id, '=>', doc.data());
});

// ===== إضافة بيانات =====
const docRef = await addDoc(collection(db, 'users'), {
  name: 'أحمد',
  email: 'ahmed@mail.com',
  createdAt: new Date()
});
console.log('Document ID:', docRef.id);
اختبر فهمك