فهم Firebase للويب

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

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

إصدارات حزمة تطوير البرامج (SDK): تتضمّن مساحة اسم ووحدة

يوفّر Firebase واجهتَي عرض لواجهة برمجة التطبيقات لتطبيقات الويب، وهما:

  • JavaScript: مساحة الاسم هذه هي واجهة JavaScript التي يمكن لبرنامج Firebase لسنوات عديدة وهي على دراية بها لمطوري الويب الذين لديهم خبرة تطبيقات Firebase. نظرًا لأن واجهة برمجة التطبيقات التي تتضمن مساحة الاسم لا تستفيد من الميزات الميزات الجديدة، على معظم التطبيقات الجديدة استخدام واجهة برمجة التطبيقات modular API بدلاً من ذلك.
  • JavaScript - نمطي: وتستند حزمة تطوير البرامج (SDK) هذه إلى أسلوب تقسيمي توفير حجم أصغر لحزمة تطوير البرامج (SDK) وكفاءة أعلى باستخدام إصدار JavaScript الحديث إنشاء أدوات مثل webpack أو البيانات المجمّعة:

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

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

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

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

إذا كنت تبدأ عملية دمج جديدة مع Firebase، يمكنك تفعيل واجهة برمجة التطبيقات modular API عند إضافة حزمة SDK وإعدادها

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

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

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

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

طرق إضافة حِزم تطوير البرامج (SDK) على الويب إلى تطبيقك

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

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

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

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

دورة في الدقيقة

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

استخدام npm مع أداة تجميع الوحدات مثل webpack أو التجميع يوفّر التحسين خيارات "اهتزاز الشجرة" وغير مُستخدَم وتطبيق رموز polyfill مستهدَفة، والتي يمكن أن تقليل حجم التطبيق بشكل كبير. قد يؤدي تنفيذ هذه الميزات إلى بعض التعقيدات إلى التكوين وسلسلة الإنشاء، لكنها تختلف ويمكن أن تساعد أدوات واجهة سطر الأوامر السائدة في الحد من هذا الأمر. تتضمن هذه الأدوات Angular، التفاعل، Vue، التالي وغير ذلك.

وباختصار:

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

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

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

وباختصار:

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

صيغ Firebase Web SDK

ويمكن استخدام حزمة تطوير البرامج (SDK) للويب من Firebase في كل من تطبيقات المتصفّحات وتطبيقات العقدة. ومع ذلك، لا تتوفّر العديد من المنتجات في بيئات العُقد. راجِع قائمة البيئات المتوافقة.

توفّر بعض حِزم تطوير البرامج (SDK) للمنتجات صيغًا منفصلة لكل من المتصفح والعقدة، متوفّرة بتنسيقات ESM وCJS، حتى أنّ بعض حِزم تطوير البرامج (SDK) للمنتجات توفّر خيارات Cordova أو React من الإعلانات المدمجة مع المحتوى تم ضبط حزمة SDK للويب لتوفير الصيغة الصحيحة بناءً على تهيئة الأدوات أو البيئة لديك، وينبغي عدم اختيارًا يدويًا في معظم الحالات. تم تصميم جميع صيغ حِزم تطوير البرامج (SDK). للمساعدة في إنشاء تطبيقات الويب أو تطبيقات العميل لوصول المستخدم، كما هو الحال في تطبيق Node.js لسطح المكتب أو تطبيق إنترنت الأشياء. إذا كان الهدف هو إعداد الوصول الإداري من بيئات مميزة (مثل الخوادم) تستخدم SDK لمشرف Firebase بدلاً من ذلك.

رصد البيئة باستخدام برامج التجميع وأُطر العمل

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

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

مزيد من المعلومات عن عنصر إعدادات Firebase

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

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

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

  • في حال تفعيل "إحصاءات Google" أو قاعدة بيانات الوقت الفعلي بعد إنشاء لتطبيق الويب على Firebase، تأكّد من أنّ عنصر ضبط 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",
};

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

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

تأخير تحميل حِزم تطوير البرامج (SDK) لمنصة Firebase (من شبكة توصيل المحتوى)

يمكنك تأخير تضمين حِزم تطوير البرامج (SDK) لمنصّة Firebase إلى أن تتوفّر في الصفحة بأكملها. التحميل. إذا كنت تستخدم نصوصًا برمجية نموذجية لواجهة برمجة التطبيقات CDN مع <script type="module">، هذا هو السلوك الافتراضي. إذا كنت تستخدم نصوص CDN البرمجية ذات مساحة الاسم ، فأكمل هذه الخطوات لتأجيل التحميل:

  1. أضِف علامة defer إلى كل علامة script لحِزم تطوير البرامج (SDK) لمنصة Firebase، ثم أجِّل ذلك. تهيئة 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

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();
app_default_init_options.js

Web

// 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();
firebaseapp.js

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

تُتيح لك حزمة تطوير البرامج (SDK) لمنصّة Firebase JavaScript إعداد مشاريع متعدّدة في Firebase واستخدامها. في تطبيق واحد في الوقت نفسه، مع استخدام كل مشروع لمنصة Firebase معلومات التكوين.

Web

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);
app_multi_project_init_options.js

Web

// 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();
firebaseapp.js

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

في حال كنت تنشئ تطبيق ويب، تتطلب بعض أجزاء حزمة تطوير البرامج (SDK) لـ Firebase JavaScript ما يلي: تعرض تطبيق الويب من خادم بدلاً من نظام الملفات المحلي. إِنْتَ استخدام واجهة سطر الأوامر في Firebase لتشغيل خادم محلي.

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

لعرض تطبيق الويب، يجب استخدام واجهة سطر الأوامر في Firebase، وهي أداة سطر أوامر.

  1. يمكنك الانتقال إلى مستندات واجهة سطر الأوامر في Firebase للتعرّف على كيفية تثبيت واجهة سطر الأوامر أو التحديث إلى أحدث إصدار

  2. إعداد مشروع Firebase: شغِّل الأمر التالي من جذر دليل التطبيق المحلي:

    firebase init

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

    firebase serve

مراجع مفتوحة المصدر لحِزم تطوير البرامج (SDK) الخاصة بلغة JavaScript لمنصّة Firebase

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

حِزم تطوير البرامج (SDK) لمنصّة Firebase الخاصة بلغة JavaScript

يتم تطوير معظم حِزم تطوير البرامج (SDK) لـ Firebase لJavaScript كمكتبات مفتوحة المصدر في قسم مستودع GitHub في Firebase

نماذج البدء السريع

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