Catch up on everthing we announced at this year's Firebase Summit. Learn more

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

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

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

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

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

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

يتكامل الإصدار 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

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

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

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

npm

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

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

في تلخيص:

  • يوفر تحسينًا قيمًا لحجم التطبيق
  • الأدوات القوية متاحة لإدارة الوحدات
  • مطلوب لـ 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 الادارية SDK بدلا من ذلك.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.10.0/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 من هذا التطبيق بطريقتين مكافئتين:

إصدار الويب 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();

إصدار الويب 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 الخاصة به.

إصدار الويب 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);

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

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

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