Check out what’s new from Firebase at Google I/O 2022. Learn more

تعرف على المزيد حول الويب و Firebase

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

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

الإصداران 8 و 9 من SDK

يوفر Firebase إصدارين من SDK لتطبيقات الويب:

  • الإصدار 8. هذه هي واجهة JavaScript التي احتفظ بها Firebase لعدة سنوات وهي مألوفة لمطوري الويب مع تطبيقات Firebase الحالية. نظرًا لأن Firebase سيزيل الدعم لهذا الإصدار بعد دورة إصدار رئيسية واحدة ، يجب أن تعتمد التطبيقات الجديدة الإصدار 9 بدلاً من ذلك.
  • الإصدار المعياري 9 . يقدم SDK هذا نهجًا معياريًا يوفر حجم SDK منخفضًا وكفاءة أكبر باستخدام أدوات إنشاء JavaScript الحديثة مثل حزمة الويب أو مجموعة التحديثات .

يتكامل الإصدار 9 جيدًا مع أدوات الإنشاء التي تزيل التعليمات البرمجية التي لا يتم استخدامها في تطبيقك ، وهي عملية تُعرف باسم "اهتزاز الشجرة". تستفيد التطبيقات التي تم إنشاؤها باستخدام SDK من آثار أقدام صغيرة الحجم بشكل كبير. الإصدار 8 ، على الرغم من توفره كوحدة نمطية ، لا يحتوي على هيكل معياري صارم ولا يوفر نفس الدرجة من تقليل الحجم.

على الرغم من أن غالبية الإصدار 9 SDK يتبع نفس أنماط الإصدار 8 ، إلا أن تنظيم الكود مختلف. بشكل عام ، يتم توجيه الإصدار 8 نحو مساحة الاسم ونمط الخدمة ، بينما يتم توجيه الإصدار 9 نحو الوظائف المنفصلة. على سبيل المثال ، يتم استبدال تسلسل النقاط للإصدار 8 ، مثل firebaseApp.auth() ، في الإصدار 9 getAuth() واحدة تأخذ firebaseApp وتعيد مثيل المصادقة.

هذا يعني أن تطبيقات الويب التي تم إنشاؤها باستخدام الإصدار 8 أو إصدار أقدم تتطلب إعادة بناء ديون من أجل الاستفادة من النهج المعياري للإصدار 9. يوفر Firebase مكتبات متوافقة لتسهيل هذا الانتقال ؛ راجع دليل الترقية للحصول على مزيد من التفاصيل.

ما المدعوم؟

بينما يحتوي الإصدار 8 والإصدار 9 على أنماط تعليمات برمجية مختلفة ، إلا أنهما يوفران دعمًا مشابهًا جدًا لميزات وخيارات Firebase. كما سنشرح بالتفصيل في هذا الدليل ، يدعم كل من إصدارات SDK متغيرات JavaScript و Node.js جنبًا إلى جنب مع العديد من الخيارات لإضافة / تثبيت حزم SDK.

إضافة SDKs مع 8.0 (ذات مساحة الاسم) 9.0 (معياري)
npm
  • لجافا سكريبت
  • بالنسبة إلى Node.js
  • لجافا سكريبت
  • بالنسبة إلى Node.js
CDN (شبكة توصيل المحتوى)
  • لجافا سكريبت
  • لجافا سكريبت
استضافة المواقع
  • لجافا سكريبت
  • بالنسبة إلى Node.js

لمزيد من المعلومات ، راجع طرق إضافة Web SDKs إلى تطبيقك ومتغيرات Firebase Web SDK لاحقًا في هذه الصفحة.

الإصدار 9 للتطبيقات الجديدة

إذا كنت تبدأ في تكامل جديد مع Firebase ، فيمكنك الاشتراك في الإصدار 9 SDK عند إضافة SDK وتهيئته .

أثناء تطوير تطبيقك ، ضع في اعتبارك أنه سيتم تنظيم شفرتك بشكل أساسي حول الوظائف . في الإصدار 9 ، يتم تمرير الخدمات كوسيطة أولى ، ثم تستخدم الوظيفة تفاصيل الخدمة للقيام بالباقي. علي سبيل المثال:

import { getAuth, onAuthStateChanged } from "firebase/auth";

const auth = getAuth(firebaseApp);
onAuthStateChanged(auth, user => {
  // Check for user status
});

لمزيد من الأمثلة والتفاصيل ، راجع الأدلة الخاصة بكل مجال منتج بالإضافة إلى الوثائق المرجعية للإصدار 9 .

طرق لإضافة Web SDKs إلى تطبيقك

يوفر Firebase مكتبات JavaScript لمعظم منتجات Firebase ، بما في ذلك Remote Config و FCM والمزيد. تعتمد كيفية إضافة Firebase SDKs إلى تطبيق الويب الخاص بك على الأدوات التي تستخدمها مع تطبيقك (مثل حزمة الوحدة النمطية) ، أو إذا كان تطبيقك يعمل في بيئة غير مستعرضة مثل Node.js.

يمكنك إضافة أي من المكتبات المتاحة إلى تطبيقك عبر إحدى الطرق المدعومة:

  • npm (لحزم الوحدات و Node.js)
  • CDN (شبكة توصيل المحتوى)

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

npm

يوفر لك تنزيل حزمة Firebase npm (التي تتضمن كلاً من حزم المستعرض و Node.js) نسخة محلية من Firebase SDK ، والتي قد تكون ضرورية للتطبيقات التي لا تستخدم المتصفح مثل تطبيقات Node.js أو React Native أو Electron. يتضمن التنزيل حزم Node.js و React Native كخيار لبعض الحزم. تعد حزم Node.js ضرورية لخطوة عرض جانب الخادم (SSR) لأطر عمل SSR.

يوفر استخدام npm مع وحدة تجميع نمطية مثل webpack أو Rollup خيارات تحسين للشفرة غير المستخدمة "اهتزاز الشجرة" وتطبيق polyfills المستهدفة ، والتي يمكن أن تقلل بشكل كبير من حجم تطبيقك. قد يضيف تنفيذ هذه الميزات بعض التعقيد إلى سلسلة التكوين والبناء الخاصة بك ، ولكن يمكن أن تساعد أدوات CLI السائدة المختلفة في التخفيف من ذلك. تتضمن هذه الأدوات Angular و React و Vue و Next وغيرها.

باختصار:

  • يوفر تحسينًا قيمًا لحجم التطبيق
  • الأدوات القوية متاحة لإدارة الوحدات
  • مطلوب لـ SSR مع Node.js

CDN (شبكة توصيل المحتوى)

تعد إضافة المكتبات المخزنة على شبكة CDN الخاصة بـ Firebase طريقة إعداد SDK بسيطة قد تكون مألوفة للعديد من المطورين. باستخدام CDN لإضافة حزم SDK ، لن تحتاج إلى أداة بناء ، وقد تميل سلسلة البناء إلى أن تكون أبسط وأسهل في العمل مقارنة بمجمعات الوحدات النمطية. إذا لم تكن مهتمًا بشكل خاص بالحجم المثبت لتطبيقك ولم يكن لديك متطلبات خاصة مثل التحويل من TypeScript ، فقد يكون CDN خيارًا جيدًا.

باختصار:

  • مألوف وبسيط
  • مناسب عندما لا يكون حجم التطبيق مصدر قلق كبير
  • مناسب عندما لا يستخدم موقع الويب الخاص بك أدوات البناء.

متغيرات Firebase Web SDK

حاليًا ، يوفر Firebase نوعين مختلفين من Web SDK:

  • حزمة JavaScript تدعم جميع ميزات Firebase للاستخدام في المتصفح.
  • حزمة Node.js من جانب العميل تدعم العديد من ميزات Firebase وليس كلها. انظر قائمة البيئات المدعومة .

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

الكشف عن البيئة مع الحزم والأطر

عند تثبيت Firebase Web SDK باستخدام npm ، يتم تثبيت إصدارات JavaScript و Node.js. توفر الحزمة الكشف التفصيلي عن البيئة لتمكين الحزم المناسبة لتطبيقك.

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

تعرف على معلومات حول كائن تهيئة Firebase

لتهيئة Firebase في تطبيقك ، يلزمك تقديم تكوين مشروع Firebase لتطبيقك. يمكنك الحصول على كائن تهيئة Firebase في أي وقت.

  • لا نوصي بتحرير كائن التكوين يدويًا ، خاصةً "خيارات Firebase" المطلوبة التالية: apiKey و projectId و appID . إذا بدأت تطبيقك بقيم غير صالحة أو مفقودة لـ "خيارات Firebase" المطلوبة ، فقد يواجه مستخدمو تطبيقك مشكلات خطيرة.

  • إذا قمت بتمكين Google Analytics في مشروع Firebase الخاص بك ، فإن كائن التكوين الخاص بك يحتوي على حقل measurementId . تعرف على المزيد حول هذا الحقل في صفحة بدء Analytics .

  • إذا قمت بتمكين Google Analytics أو Realtime Database بعد إنشاء تطبيق Firebase Web ، فتأكد من تحديث كائن تكوين Firebase الذي تستخدمه في تطبيقك بقيم التكوين المرتبطة (معرف measurementId databaseURL ، على التوالي). يمكنك الحصول على كائن تهيئة Firebase في أي وقت.

فيما يلي تنسيق كائن التكوين مع تمكين جميع الخدمات (يتم ملء هذه القيم تلقائيًا):

var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  // The value of `databaseURL` depends on the location of the database
  databaseURL: "https://DATABASE_NAME.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
  measurementId: "G-MEASUREMENT_ID",
};

المكتبات المتاحة

خيارات الإعداد الإضافية

تأخير تحميل حزم Firebase SDK (من CDN)

يمكنك تأخير تضمين Firebase SDKs حتى يتم تحميل الصفحة بأكملها. إذا كنت تستخدم نصوص CDN للإصدار 9 مع <script type="module"> ، فهذا هو السلوك الافتراضي. إذا كنت تستخدم نصوص CDN للإصدار 8 كوحدة نمطية ، فأكمل هذه الخطوات لتأجيل التحميل:

  1. أضف علامة defer إلى كل علامة script لحزم Firebase SDK ، ثم قم بتأجيل تهيئة Firebase باستخدام نص برمجي ثان ، على سبيل المثال:

    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>
    
    // ...
    
    <script defer src="./init-firebase.js"></script>
    
  2. قم بإنشاء ملف init-firebase.js ، ثم قم بتضمين ما يلي في الملف:

    // TODO: Replace the following with your app's Firebase project configuration
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

استخدم العديد من مشاريع Firebase في تطبيق واحد

في معظم الحالات ، ما عليك سوى تهيئة Firebase في تطبيق افتراضي واحد. يمكنك الوصول إلى Firebase من هذا التطبيق بطريقتين مكافئتين:

Web version 9

import { initializeApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a "default" Firebase project
const defaultProject = initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = getStorage(defaultProject);
let defaultFirestore = getFirestore(defaultProject);

// Option 2: Access Firebase services using shorthand notation
defaultStorage = getStorage();
defaultFirestore = getFirestore();

Web version 8

// Initialize Firebase with a "default" Firebase project
const defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
let defaultStorage = defaultProject.storage();
let defaultFirestore = defaultProject.firestore();

// Option 2: Access Firebase services using shorthand notation
defaultStorage = firebase.storage();
defaultFirestore = firebase.firestore();

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

يسمح لك Firebase JavaScript SDK بتهيئة واستخدام مشاريع Firebase متعددة في تطبيق واحد في نفس الوقت ، مع استخدام كل مشروع لمعلومات تكوين Firebase الخاصة به.

Web version 9

import { initializeApp, getApp } from "firebase/app";
import { getStorage } from "firebase/storage";
import { getFirestore } from "firebase/firestore";

// Initialize Firebase with a default Firebase project
initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = initializeApp(otherProjectFirebaseConfig, "other");

console.log(getApp().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = getStorage();
const defaultFirestore = getFirestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = getStorage(otherProject);
const otherFirestore = getFirestore(otherProject);

Web version 8

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
const otherProject = firebase.initializeApp(otherProjectFirebaseConfig, "other");

console.log(firebase.app().name);  // "[DEFAULT]"
console.log(otherProject.name);    // "otherProject"

// Use the shorthand notation to access the default project's Firebase services
const defaultStorage = firebase.storage();
const defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
const otherStorage = otherProject.storage();
const otherFirestore = otherProject.firestore();

قم بتشغيل خادم ويب محلي للتطوير

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

إذا قمت بالفعل بإعداد Firebase Hosting لتطبيقك ، فربما تكون قد أكملت بالفعل العديد من الخطوات أدناه.

لخدمة تطبيق الويب الخاص بك ، ستستخدم Firebase CLI ، وهي أداة سطر أوامر.

  1. قم بزيارة وثائق Firebase CLI للتعرف على كيفية تثبيت CLI أو التحديث إلى أحدث إصدار .

  2. ابدأ مشروع Firebase. قم بتشغيل الأمر التالي من جذر دليل التطبيق المحلي الخاص بك:

    firebase init

  3. بدء تشغيل الخادم المحلي من أجل التنمية. قم بتشغيل الأمر التالي من جذر دليل التطبيق المحلي الخاص بك:

    firebase serve

موارد مفتوحة المصدر لحزم Firebase JavaScript SDK

يدعم Firebase تطوير المصدر المفتوح ، ونحن نشجع مساهمات المجتمع والتعليقات.

حزم SDK لجافا سكريبت Firebase

تم تطوير معظم مجموعات Firebase JavaScript SDK كمكتبات مفتوحة المصدر في مستودع Firebase GitHub العام.

عينات البدء السريع

يحتفظ Firebase بمجموعة من عينات البدء السريع لمعظم واجهات برمجة تطبيقات Firebase على الويب. ابحث عن هذه الخطوات السريعة في مستودع Firebase GitHub السريع العام. يمكنك استخدام هذه الخطوات السريعة كنموذج رمز لاستخدام حزم Firebase SDK.