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

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

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

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

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

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

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

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

يستخدم سير العمل هذا 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 App هو عنصر يشبه الحاوية يخزّن الإعدادات الشائعة ويشارك المصادقة بين خدمات 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) لتقليل الحجم

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