إضافة 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 لأنّ واجهة برمجة التطبيقات modular API تم تحسينها للعمل مع أدوات تجميع الوحدات لإزالة الرموز البرمجية غير المستخدَمة (تقنية 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 في الرمز البرمجي، يمكنك إضافة خدمات Firebase والبدء في استخدامها.

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

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

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

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

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) للإصدار JavaScript من 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.

2 كانت "Firebase SQL Connect" تُعرف سابقًا باسم "Firebase Data Connect".

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

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