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

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

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

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

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

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

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

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

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

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

    npm install firebase

  2. إعداد Firebase في تطبيقك وإنشاء عنصر تطبيق Firebase:

    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 وغيرها) لاستيرادها ضمن حِزم فرعية فردية.

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

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 JavaScript للعمل مع حزم الوحدات من أجل إزالة أي رمز غير مستخدَم (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.

2 كان اسم Firebase SQL Connect في السابق "Firebase Data Connect".

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

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