أضف Firebase إلى مشروع JavaScript الخاص بك

تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

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

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

الخطوة 2 : قم بتثبيت SDK وتهيئة Firebase

تصف هذه الصفحة تعليمات الإعداد للإصدار 9 من Firebase JS SDK ، والذي يستخدم تنسيق وحدة JavaScript .

يستخدم سير العمل هذا npm ويتطلب حزم الوحدات النمطية أو أدوات إطار عمل JavaScript لأن الإصدار 9 SDK مُحسَّن للعمل مع حزم الوحدات النمطية للتخلص من التعليمات البرمجية غير المستخدمة (اهتزاز الشجرة) وتقليل حجم 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 والبدء في استخدامها.

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

راجع دليلنا استخدام حِزم الوحدات مع Firebase للحصول على مزيد من المعلومات.

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

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

توضح الأوامر التالية كيفية استيراد مكتبات Firebase المثبتة محليًا باستخدام npm . للحصول على خيارات الاستيراد البديلة ، راجع وثائق المكتبات المتاحة .

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

تعرف على Firebase:

و

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

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

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

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

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

الخطوة 2 : قم بتثبيت SDK وتهيئة Firebase

تصف هذه الصفحة تعليمات الإعداد للإصدار 9 من Firebase JS SDK ، والذي يستخدم تنسيق وحدة JavaScript .

يستخدم سير العمل هذا npm ويتطلب حزم الوحدات النمطية أو أدوات إطار عمل JavaScript لأن الإصدار 9 SDK مُحسَّن للعمل مع حزم الوحدات النمطية للتخلص من التعليمات البرمجية غير المستخدمة (اهتزاز الشجرة) وتقليل حجم 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 والبدء في استخدامها.

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

راجع دليلنا استخدام حِزم الوحدات مع Firebase للحصول على مزيد من المعلومات.

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

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

توضح الأوامر التالية كيفية استيراد مكتبات Firebase المثبتة محليًا باستخدام npm . للحصول على خيارات الاستيراد البديلة ، راجع وثائق المكتبات المتاحة .

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

تعرف على Firebase: