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

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

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

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

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

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

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

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

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

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

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

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

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

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

تتوفر خدمات Firebase (مثل Cloud Firestore والمصادقة وقاعدة بيانات الوقت الفعلي والإعداد عن بُعد وغيرها) للاستيراد ضمن حزم فرعية فردية.

يوضّح المثال أدناه كيف يمكنك استخدام حزمة 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 project 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 للعمل مع وحدات تجميع الوحدات لإزالة أي رموز غير مُستخدَمة (هزة الشجرة). نوصي بشدة باستخدام هذا النهج في تطبيقات الإنتاج. وتعالج أدوات مثل Angular CLI أو Next.js أو Vue CLI أو Create React App تلقائيًا تجميع الوحدات للمكتبات التي تم تثبيتها من خلال npm ويتم استيرادها إلى قاعدة الرموز البرمجية.

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

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

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

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

الخطوات اللاحقة

تعرَّف على Firebase: