إضافة Firebase إلى مشروع JavaScript

اتّبِع هذا الدليل لاستخدام حزمة تطوير البرامج (SDK) Firebase JavaScript في تطبيق الويب أو كعميل للوصول إلى المستخدم النهائي، مثلاً في تطبيق Node.js على الكمبيوتر أو تطبيق إنترنت الأشياء.

الخطوة 1: إنشاء مشروع على Firebase وتسجيل تطبيقك

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

يمكنك الانتقال إلى مقالة التعرّف على مشاريع Firebase لمعرفة المزيد من المعلومات حول مشاريع Firebase وأفضل الممارسات لإضافة تطبيقات إلى المشاريع.

  1. في Firebase وحدة التحكّم، انقر على إضافة مشروع.

    • لإضافة موارد Firebase إلى مشروع حالي، أدخِل اسم المشروع أو اختَره من القائمة المنسدلة.Google Cloud

    • لإنشاء مشروع جديد، أدخِل اسم مشروع. يمكنك أيضًا تعديل رقم تعريف المشروع المعروض أسفل اسم المشروع.

  2. راجِع بنود Firebase واقبلها إذا طُلب منك ذلك.

  3. انقر على متابعة.

  4. (اختياري) يمكنك إعداد Google Analytics لمشروعك، ما يتيح تجربة مثالية باستخدام منتجات Firebase التالية: Firebase A/B Testing وCloud Messaging وCrashlytics وIn-App Messaging وRemote Config (بما في ذلك التخصيص).

    اختَر حسابًا حاليًا Google Analytics أو أنشِئ حسابًا جديدًا. في حال إنشاء حساب جديد، اختَر Analytics الموقع الجغرافي لإعداد التقارير، ثم اقبل إعدادات مشاركة البيانات وبنود Google Analytics مشروعك.

  5. انقر على إنشاء مشروع (أو إضافة Firebase، إذا كنت تضيف Firebase إلى مشروع Google Cloud حالي).

توفّر Firebase تلقائيًا موارد لمشروعك على Firebase. عند اكتمال العملية، سيتم نقلك إلى صفحة النظرة العامة لمشروعك على Firebase في وحدة تحكّم Firebase.

بعد إنشاء مشروع على Firebase، يمكنك تسجيل تطبيق الويب الخاص بك في هذا المشروع.

  1. في وسط صفحة النظرة العامة على المشروع في "وحدة تحكّم Firebase"، انقر على رمز الويب () لبدء سير عمل الإعداد.

    إذا سبق لك إضافة تطبيق إلى مشروعك على Firebase، انقر على إضافة تطبيق لعرض خيارات المنصّة.

  2. أدخِل لقب تطبيقك.
    هذا اللقب هو معرّف داخلي مناسب ولا يظهر إلا لك في وحدة تحكّم Firebase.

  3. انقر على تسجيل التطبيق.

  4. اتّبِع التعليمات الظاهرة على الشاشة لإضافة حزمة تطوير البرامج (SDK) من Firebase وإعدادها في تطبيقك.

    يمكنك أيضًا العثور على تعليمات أكثر تفصيلاً حول إضافة حزمة تطوير البرامج (SDK) لمنصة Firebase وتهيئتها واستخدامها في الخطوات التالية من صفحة البدء هذه.

إذا لم يكن لديك مشروع JavaScript وتريد فقط تجربة أحد منتجات Firebase، يمكنك تنزيل أحد نماذج البدء السريع.

الخطوة 2: تثبيت حزمة تطوير البرامج (SDK) وإعداد Firebase

توضّح هذه الصفحة تعليمات الإعداد لواجهة برمجة التطبيقات النموذجية في حزمة تطوير البرامج (SDK) لمنصة Firebase التي تعمل بلغة JavaScript، والتي تستخدم تنسيق وحدة JavaScript.

تستخدم سير العمل هذه npm وتتطلّب أدوات تجميع الوحدات أو أدوات إطار عمل JavaScript، لأنّ واجهة برمجة التطبيقات النموذجية محسّنة للعمل مع أدوات تجميع الوحدات بهدف إزالة الرموز غير المستخدَمة (tree-shaking) وتقليل حجم حزمة تطوير البرامج (SDK).

  1. ثبِّت Firebase باستخدام npm:

    npm install firebase
  2. ابدأ Firebase في تطبيقك وأنشئ عنصر Firebase App:

    import { initializeApp } from 'firebase/app';
    
    // TODO: Replace the following with your app's Firebase configuration
    const firebaseConfig = {
      //...
    };
    
    const app = initializeApp(firebaseConfig);

    تطبيق Firebase هو عنصر يشبه الحاوية ويخزّن الإعدادات الشائعة ويشارك المصادقة في جميع خدمات Firebase. بعد إعداد عنصر Firebase App في الرمز البرمجي، يمكنك إضافة خدمات Firebase والبدء في استخدامها.

    إذا كان تطبيقك يتضمّن ميزات ديناميكية تستند إلى العرض من جهة الخادم (SSR)، عليك اتّخاذ بعض الخطوات الإضافية لضمان استمرار إعداداتك في جميع عمليات العرض من جهة الخادم ومن جهة العميل. في منطق الخادم، نفِّذ واجهة FirebaseServerApp لتحسين إدارة الجلسات في تطبيقك باستخدام عاملي الخدمة.

الخطوة 3: الوصول إلى Firebase في تطبيقك

تتوفّر خدمات Firebase (مثل Cloud Firestore وAuthentication وRealtime Database وRemote Config وغيرها) لاستيرادها ضمن حِزم فرعية فردية.

يوضّح المثال أدناه كيف يمكنك استخدام Cloud Firestore Lite SDK لاسترداد قائمة بالبيانات.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase configuration
const firebaseConfig = {
  //...
};

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

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

الخطوة 4: استخدام أداة تجميع الوحدات (webpack/Rollup) لتقليل الحجم

تم تصميم حزمة تطوير البرامج (SDK) على الويب من Firebase للعمل مع حزم الوحدات النمطية لإزالة أي رموز غير مستخدَمة (tree-shaking). ننصحك بشدة باستخدام هذا النهج للتطبيقات المتاحة للجميع. تتولّى أدوات مثل Angular CLI أو Next.js أو Vue CLI أو Create React App تلقائيًا عملية تجميع الوحدات النمطية للمكتبات المثبَّتة من خلال npm والمستورَدة إلى قاعدة الرموز البرمجية.

لمزيد من المعلومات، اطّلِع على دليلنا استخدام أدوات تجميع الوحدات مع Firebase.

خدمات Firebase المتاحة على الويب

بعد إعداد Firebase، يمكنك البدء في إضافة أي من خدمات Firebase التالية المتاحة واستخدامها في تطبيق الويب.

توضّح الأوامر التالية كيفية استيراد مكتبات Firebase المثبَّتة محليًا باستخدام npm. للاطّلاع على خيارات استيراد بديلة، يُرجى الرجوع إلى مستندات المكتبات المتاحة.

1 كان اسم Firebase AI Logic سابقًا "Vertex AI in Firebase" مع الحزمة firebase/vertexai.

الخطوات التالية

مزيد من المعلومات عن Firebase: