إنشاء مشروع Firebase وربطه بتطبيقك

في الدرس الأول تعرفت على Firebase وخدماته. الآن سننتقل للتطبيق العملي: ستنشئ مشروعك الأول، وتربطه بتطبيق ويب، وتجهّز أدواتك. هذه الخطوات تُنفَّذ مرة واحدة في بداية كل مشروع، وبعدها يصبح بإمكانك استخدام قاعدة البيانات وتسجيل الدخول والاستضافة كما سترى في الدروس القادمة.

الخطوة 1: إنشاء المشروع

1. ادخل console.firebase.google.com بحساب Google. (راجع شروط العمر لحسابات Google في بلدك، وقد تحتاج حساباً عائلياً أو موافقة ولي الأمر.)
2. اضغط Create a project (إنشاء مشروع).
3. اكتب اسم المشروع، مثل school-app. سيقترح Firebase معرّف مشروع (Project ID) فريداً عالمياً، مثل school-app-4f2a1.
4. اختر هل تريد تفعيل Google Analytics. للتعلم يمكنك إيقافه.
5. انتظر لحظات حتى يجهز المشروع.

معرّف المشروع مهم

معرّف المشروع لا يمكن تغييره بعد الإنشاء، وسيظهر في روابط موقعك مثل school-app-4f2a1.web.app. اختر اسماً واضحاً ومناسباً من البداية.

تخيّل مشروع Firebase مثل مبنى إداري تستأجره: فيه غرفة لقاعدة البيانات، وغرفة لتسجيل الدخول، وغرفة للملفات، وكلها تحت عنوان واحد، والتطبيقات التي تسجلها هي الموظفون الذين يحملون مفاتيح الدخول.

الخطوة 2: تسجيل تطبيق ويب

المشروع الواحد يمكن أن يخدم عدة تطبيقات: موقع ويب، وتطبيق أندرويد، وتطبيق iPhone، وكلها تتشارك نفس البيانات. لنسجل تطبيق ويب:

1. في الصفحة الرئيسية للمشروع، اضغط أيقونة الويب </>.
2. اكتب اسماً للتطبيق، مثل «موقع المدرسة».
3. سيعرض لك Firebase كائن الإعدادات:

const firebaseConfig = {
  apiKey: "AIzaSy...",
  authDomain: "school-app-4f2a1.firebaseapp.com",
  projectId: "school-app-4f2a1",
  storageBucket: "school-app-4f2a1.firebasestorage.app",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};

هذه البيانات تخبر مكتبة Firebase بأي مشروع تتصل. انسخها، فستحتاجها في الكود.

هل apiKey سر؟

سؤال يقلق كل مبتدئ: «الكائن فيه apiKey، ألا يجب إخفاؤه؟». الإجابة المفاجئة: لا. في Firebase، هذا المفتاح ليس سراً: هو مجرد معرّف لمشروعك، وسيظهر حتماً في كود أي موقع يستخدم Firebase، ويستطيع أي زائر رؤيته.

إذن ما الذي يحمي بياناتك؟ قواعد الأمان (Security Rules) التي ستكتبها في درس Firestore ودرس المصادقة. هي التي تقرر من يقرأ ماذا ومن يكتب ماذا.

الأسرار الحقيقية

بعض المفاتيح الأخرى أسرار فعلاً، مثل ملفات حسابات الخدمة (Service Account) التي تعطي صلاحيات كاملة على المشروع. هذه لا توضع أبداً في كود الواجهة ولا تُرفع على GitHub.

الخطوة 3: تثبيت المكتبة

في مشروع ويب حديث يستخدم npm:

npm install firebase

ثم في ملف JavaScript، تهيئ Firebase مرة واحدة:

firebase.js

import { initializeApp } from 'firebase/app';
import { getFirestore } from 'firebase/firestore';
import { getAuth } from 'firebase/auth';

const firebaseConfig = {
  // الإعدادات التي نسختها من Firebase Console
};

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

• initializeApp: يربط تطبيقك بالمشروع.
• getFirestore و getAuth: يجهزان خدمتي قاعدة البيانات وتسجيل الدخول.
• لاحظ أسلوب الاستيراد: تستورد كل دالة تحتاجها فقط. هذا الأسلوب اسمه المكتبة المعيارية (Modular SDK)، ويجعل حجم موقعك أصغر، لأن الأدوات التي لا تستخدمها لا تُحمَّل.

وفي Flutter تستخدم حزمة رسمية اسمها FlutterFire، والأداة flutterfire configure تجهّز الإعدادات تلقائياً لأندرويد و iOS معاً.

الخطوة 4: أداة Firebase CLI

بعض المهام، مثل رفع الموقع ونشر قواعد الأمان، تحتاج أداة سطر الأوامر:

npm install -g firebase-tools
firebase login
firebase --version

• firebase login: يفتح المتصفح لتسجل الدخول بحساب Google.
• firebase --version: يتأكد من التثبيت.

ستستخدمها كثيراً في درس الاستضافة.

المحاكي المحلي: جرّب بلا خوف

Firebase يوفر مجموعة المحاكيات (Local Emulator Suite): نسخة من خدماته تعمل على جهازك. تجرّب فيها قاعدة البيانات وتسجيل الدخول وقواعد الأمان دون أن تلمس المشروع الحقيقي، ودون أي تكلفة.

firebase emulators:start

وفي الكود، تخبر المكتبة أن تتصل بالمحاكي بدلاً من الخوادم الحقيقية:

import { connectFirestoreEmulator } from 'firebase/firestore';
connectFirestoreEmulator(db, '127.0.0.1', 8080);

كل أمثلة هذا الكورس مجربة فعلاً على هذه المحاكيات. (محاكي Firestore يحتاج تثبيت Java على جهازك.)

مشروع تجريبي بلا حساب

إذا استخدمت معرّف مشروع يبدأ بـ demo- مثل demo-school مع المحاكيات، تستطيع التجربة بالكامل دون إنشاء مشروع حقيقي أصلاً، ودون أي اتصال بخوادم Google.

جرّب بنفسك

1. أنشئ مشروعاً في Firebase Console، وسجّل فيه تطبيق ويب.
2. افتح الإعدادات وابحث عن معرّف المشروع، واكتبه.
3. ثبّت Firebase CLI، وسجّل الدخول، وتأكد بـ firebase --version.
4. أنشئ مجلداً لمشروع ويب، وثبّت المكتبة بـ npm install firebase، وأنشئ ملف firebase.js بالتهيئة.
5. استكشف القائمة الجانبية في Console: أين تجد Firestore و Authentication و Hosting؟

أخطاء شائعة

• تهيئة Firebase أكثر من مرة: استدعاء initializeApp في كل ملف يسبب خطأ. هيئه في ملف واحد وصدّر db و auth منه.
• الخلط بين اسم المشروع ومعرّفه: الكود يستخدم المعرّف projectId، وليس الاسم المعروض.
• رفع ملفات حسابات الخدمة: ملف JSON الخاص بـ Service Account سر حقيقي، أضفه لـ .gitignore.

اختبر نفسك

سؤال

هل يجب إخفاء apiKey الموجود في firebaseConfig لتطبيق ويب؟

نعم، وإلا يستطيع أي شخص سرقة كل البياناتنعم، ويجب تغييره كل يوملا، هو معرّف للمشروع وليس سراً، والحماية الحقيقية بقواعد الأمان

سؤال

ما فائدة محاكيات Firebase المحلية؟

تسريع الموقع المنشورتجربة الخدمات وقواعد الأمان على جهازك دون لمس المشروع الحقيقيرفع الموقع على الإنترنت

الخلاصة

• أنشئ المشروع من Firebase Console، واختر معرّف المشروع بعناية لأنه لا يتغير.
• سجّل تطبيقاً لكل منصة، وانسخ firebaseConfig لتطبيق الويب.
• apiKey ليس سراً، والحماية الحقيقية في قواعد الأمان.
• npm install firebase ثم initializeApp في ملف واحد، و FlutterFire لتطبيقات Flutter.
• Firebase CLI لرفع الموقع والقواعد، والمحاكيات للتجربة الآمنة على جهازك.