فهم Firebase للويب

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

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

إصدارات حزمة تطوير البرامج (SDK): مُنشَأة باستخدام مساحة اسم ومكوّنة من وحدات

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

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

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

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

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

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 والمزيد. تعتمد طريقة إضافة حِزم تطوير البرامج (SDK) لمنصّة Firebase إلى تطبيقك على الأدوات التي تستخدمها مع تطبيقك (مثل أداة تجميع الوحدات).

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

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

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

npm

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

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

وباختصار:

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

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

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

وباختصار:

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

أنواع حزمة تطوير البرامج (SDK) على الويب من Firebase

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

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

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

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

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

التعرّف على عنصر إعدادات Firebase

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

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

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

  • في حال تفعيل Google Analytics أو Realtime Database بعد إنشاء تطبيقك على الويب في 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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 Hosting لتطبيقك، من المحتمل أنّك اكتملت العديد من الخطوات أدناه.

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

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

  2. ابدأ مشروعك على Firebase. نفِّذ الأمر التالي من جذر دليل التطبيق على الجهاز:

    firebase init

  3. شغِّل الخادم المحلي لعملية التطوير. نفِّذ الطرة التالية من جذر دليل التطبيق على الجهاز:

    firebase serve

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

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

حِزم تطوير البرامج (SDK) لبرنامج Firebase JavaScript

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

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

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