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

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

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

إصدارات SDK: مساحة الاسم والوحدات النمطية

يوفر Firebase سطحين لواجهة برمجة التطبيقات (API) لتطبيقات الويب:

  • جافا سكريبت - مساحة الاسم. هذه هي واجهة JavaScript التي حافظ عليها Firebase لسنوات عديدة وهي مألوفة لمطوري الويب الذين يستخدمون تطبيقات Firebase الأقدم. ونظرًا لأن واجهة برمجة التطبيقات ذات مساحة الاسم لا تستفيد من الدعم المستمر للميزات الجديدة، فيجب على معظم التطبيقات الجديدة أن تتبنى واجهة برمجة التطبيقات المعيارية بدلاً من ذلك.
  • جافا سكريبت - وحدات . يعتمد SDK هذا على أسلوب معياري يوفر حجمًا أقل لـ SDK وكفاءة أكبر باستخدام أدوات إنشاء JavaScript الحديثة مثل webpack أو Rollup .

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

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

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

JavaScript - واجهة برمجة تطبيقات معيارية للتطبيقات الجديدة

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

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

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

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

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

طرق لإضافة حزم SDK للويب إلى تطبيقك

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

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

  • npm (لمجمعات الوحدات النمطية)
  • 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 خيارات تحسين للتعليمات البرمجية غير المستخدمة "tree-shake" وتطبيق عمليات التعبئة المتعددة المستهدفة، والتي يمكن أن تقلل بشكل كبير من حجم تطبيقك. قد يؤدي تنفيذ هذه الميزات إلى إضافة بعض التعقيد إلى عملية التكوين وسلسلة البناء الخاصة بك، ولكن يمكن أن تساعد العديد من أدوات واجهة سطر الأوامر (CLI) السائدة في تخفيف ذلك. تتضمن هذه الأدوات Angular و React و Vue و Next وغيرها.

في ملخص:

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

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

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

في ملخص:

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

متغيرات Firebase Web SDK

يمكن استخدام Web SDK الخاص بـ Firebase في كل من تطبيقات المتصفح والعقدة. ومع ذلك، لا تتوفر العديد من المنتجات في بيئات العقدة. راجع قائمة البيئات المدعومة .

توفر بعض مجموعات SDK للمنتج متغيرات منفصلة للمتصفح والعقد، ويتم توفير كل منها بتنسيقي ESM وCJS، كما توفر بعض مجموعات SDK للمنتج متغيرات Cordova أو React Native. تم تكوين Web SDK لتوفير المتغير الصحيح بناءً على تكوين الأدوات أو البيئة الخاصة بك ويجب ألا يتطلب تحديدًا يدويًا في معظم الحالات. تم تصميم جميع متغيرات 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 App، فتأكد من تحديث كائن تكوين 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 SDK حتى يتم تحميل الصفحة بأكملها. إذا كنت تستخدم نصوص API CDN النمطية مع <script type="module"> ، فهذا هو السلوك الافتراضي. إذا كنت تستخدم برامج CDN النصية ذات مساحة الاسم كوحدة نمطية، فأكمل هذه الخطوات لتأجيل التحميل:

  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 modular API

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 namespaced API

// 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 modular API

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 namespaced API

// 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 للتعرف على كيفية تثبيت واجهة سطر الأوامر أو التحديث إلى أحدث إصدار لها .

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

    firebase init

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

    firebase serve

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

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

Firebase جافا سكريبت SDKs

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

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

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