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

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

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

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

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

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

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

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

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

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

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

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

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 أو إنشاء التفاعل مع التطبيق تلقائيًا التعامل مع تجميع الوحدات للمكتبات التي تم تثبيتها من خلال npm واستيرادها في قاعدة التعليمات البرمجية.

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

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

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

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

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

تعرَّف على Firebase: