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

اتّبِع هذا الدليل لاستخدام حزمة تطوير برامج JavaScript لمنصّة Firebase في تطبيقك على الويب أو كبرنامج للوصول إلى المستخدِم النهائي، على سبيل المثال، في تطبيق 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: استخدام أداة حزم الوحدات (حزمة الويب/الأداة المجمّعة) لتقليل الحجم

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

راجِع دليلنا بشأن استخدام حِزم الوحدات مع Firebase لمزيد من المعلومات.

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

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

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

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

التعرّف على Firebase: