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

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

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

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

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

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

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

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

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

ما المدعوم؟

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

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

جافا سكريبت - API معياري للتطبيقات الجديدة

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

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

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

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

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

طرق لإضافة 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",
};

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

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-analytics.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-app-check.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-auth.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-firestore.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-functions.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-installations.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-messaging.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-storage.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-performance.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js"></script>

<script src="https://www.gstatic.com/firebasejs/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase-app.js"></script>

<script src="/__/firebase/8.10.1/firebase-analytics.js"></script>

<script src="/__/firebase/8.10.1/firebase-app-check.js"></script>

<script src="/__/firebase/8.10.1/firebase-auth.js"></script>

<script src="/__/firebase/8.10.1/firebase-firestore.js"></script>

<script src="/__/firebase/8.10.1/firebase-functions.js"></script>

<script src="/__/firebase/8.10.1/firebase-installations.js"></script>

<script src="/__/firebase/8.10.1/firebase-messaging.js"></script>

<script src="/__/firebase/8.10.1/firebase-storage.js"></script>

<script src="/__/firebase/8.10.1/firebase-performance.js"></script>

<script src="/__/firebase/8.10.1/firebase-database.js"></script>

<script src="/__/firebase/8.10.1/firebase-remote-config.js"></script>

<script src="/__/firebase/8.10.1/firebase.js"></script>

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

تأخير تحميل حزم 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 من هذا التطبيق بطريقتين مكافئتين:

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

// 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 مختلف. أو قد ترغب في مصادقة مشروع واحد مع الإبقاء على مشروع ثانٍ غير مصدق.

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

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

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

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

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

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

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

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

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

   firebase init

   ماذا يفعل أمر التهيئة هذا؟

   • اربط دليل التطبيق المحلي بـ Firebase

   • يولد ملف firebase.json (ملف مطلوب لاستضافة Firebase)

   • يطلب منك تحديد دليل جذر عام يحتوي على ملفاتك الثابتة العامة (HTML ، CSS ، JS ، إلخ.)

     الاسم الافتراضي للدليل الذي يبحث عنه Firebase هو "عام". يمكنك أيضًا تعيين الدليل العام لاحقًا عن طريق تعديل ملف firebase.json مباشرةً.

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

   firebase serve

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

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

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

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

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

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