ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

أضف Firebase إلى مشروع JavaScript الخاص بك

اتبع هذا الدليل لاستخدام Firebase JavaScript SDK في تطبيق الويب الخاص بك أو كعميل لوصول المستخدم النهائي ، على سبيل المثال ، في سطح مكتب Node.js أو تطبيق IoT.

المتطلبات الأساسية

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

الخطوة 1 : أنشئ مشروع Firebase

قبل أن تتمكن من إضافة Firebase إلى تطبيق JavaScript ، تحتاج إلى إنشاء مشروع Firebase للاتصال بتطبيقك.

تفضل بزيارة فهم مشاريع Firebase لمعرفة المزيد حول مشاريع Firebase وأفضل الممارسات لإضافة تطبيقات إلى المشاريع.

الخطوة 2 : تسجيل تطبيقك في Firebase

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

تفضل بزيارة فهم مشاريع Firebase لمعرفة المزيد حول أفضل الممارسات والاعتبارات لإضافة تطبيقات إلى مشروع Firebase.

  1. في وسط صفحة نظرة عامة على مشروع وحدة تحكم ، انقر فوق رمز الويب ( ) لبدء سير عمل الإعداد.

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

  2. أدخل اسم الشهرة للتطبيق الخاص بك.
    هذا الاسم المستعار هو معرف داخلي ملائم ولا يظهر إلا لك في وحدة تحكم Firebase.

  3. (اختياري) قم بإعداد Firebase Hosting لتطبيق الويب الخاص بك.

    • يمكنك إعداد Firebase Hosting الآن أو لاحقًا . يمكنك أيضًا ربط تطبيق الويب Firebase بموقع الاستضافة في أي وقت في إعدادات المشروع .

    • إذا اخترت إعداد Hosting up now ، فحدد موقعًا من القائمة المنسدلة لربطه بتطبيق Firebase Web.

      • تعرض هذه القائمة موقع الاستضافة الافتراضي لمشروعك وأي مواقع أخرى قمت بإعدادها في مشروعك.

      • أي موقع قمت بربطه بالفعل بتطبيق ويب Firebase غير متاح للارتباط الإضافي. يمكن ربط كل موقع استضافة بتطبيق ويب Firebase واحد فقط.

  4. انقر فوق تسجيل التطبيق .

الخطوة 3 : إضافة Firebase SDKs وتهيئة Firebase

يمكنك إضافة أي من منتجات Firebase المدعومة إلى تطبيقك.

تعتمد كيفية إضافة Firebase SDKs إلى تطبيقك على ما إذا كنت قد اخترت استخدام Firebase Hosting لتطبيقك ، أو ما هي الأدوات التي تستخدمها مع تطبيقك (مثل الحزم) ، أو إذا كنت تقوم بتكوين تطبيق Node.js.

من استضافة المواقع

عند استخدام استضافة Firebase ، يمكنك تهيئة تطبيقك لتحميل مكتبات Firebase JavaScript SDK ديناميكيًا من عناوين URL المحجوزة. تعرف على المزيد حول إضافة حزم SDK عبر عناوين URL للاستضافة المحجوزة .

باستخدام خيار الإعداد هذا ، بعد النشر في Firebase ، يسحب تطبيقك تلقائيًا كائن تكوين Firebase من مشروع Firebase الذي قمت بالنشر إليه. يمكنك نشر نفس قاعدة الشفرة للعديد من مشروعات Firebase ، ولكن لا يتعين عليك تتبع تكوين Firebase الذي تستخدمه لـ firebase.initializeApp() .

يعمل خيار الإعداد هذا أيضًا لاختبار تطبيق الويب محليًا .

  1. لتضمين منتجات Firebase معينة فقط (على سبيل المثال ، Analytics أو Authentication أو Cloud Firestore) ، أضف البرامج النصية التالية إلى أسفل علامة <body> ، ولكن قبل استخدام أي من خدمات Firebase:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/7.21.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/7.21.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/7.21.0/firebase-auth.js"></script>
      <script src="/__/firebase/7.21.0/firebase-firestore.js"></script>
    </body>
    


  2. ابدأ تشغيل Firebase في تطبيقك (لا داعي لتضمين كائن تهيئة Firebase عند استخدام عناوين URL للاستضافة المحجوزة):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

من CDN

يمكنك تهيئة الاستيراد الجزئي لـ Firebase JavaScript SDK وتحميل منتجات Firebase التي تحتاجها فقط. يخزن Firebase كل مكتبة من Firebase JavaScript SDK على شبكة CDN العالمية (شبكة توصيل المحتوى).

  1. لتضمين منتجات Firebase معينة فقط (على سبيل المثال ، المصادقة و Cloud Firestore) ، أضف البرامج النصية التالية إلى أسفل علامة <body> ، ولكن قبل استخدام أي من خدمات Firebase:

    دي 37a0d920


  2. ابدأ تشغيل Firebase في تطبيقك:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

استخدام وحدات التجميع

يمكنك تهيئة الاستيراد الجزئي لـ Firebase JavaScript SDK وتحميل منتجات Firebase التي تحتاجها فقط. إذا كنت تستخدم حزمة (مثل Browserify أو webpack) ، يمكنك import منتجات Firebase الفردية عندما تحتاج إليها.

  1. قم بتثبيت Firebase JavaScript SDK:

    1. إذا لم يكن لديك بالفعل ملف package.json ، فأنشئ واحدًا عن طريق تشغيل الأمر التالي من جذر مشروع JavaScript الخاص بك:

      npm init

    2. تثبيت firebase حزمة الآلية الوقائية الوطنية وحفظه إلى الخاص package.json ملف عن طريق تشغيل:

      npm install --save firebase

  2. لتضمين منتجات Firebase محددة فقط (مثل المصادقة و Cloud Firestore) ، import وحدات Firebase:

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import * as firebase from "firebase/app";
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. ابدأ تشغيل Firebase في تطبيقك:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

تطبيقات Node.js

  1. ثبِّت Firebase JavaScript SDK:

    1. إذا لم يكن لديك ملف package.json بالفعل ، فأنشئ واحدًا عن طريق تشغيل الأمر التالي من جذر مشروع JavaScript الخاص بك:

      npm init
    2. تثبيت firebase حزمة الآلية الوقائية الوطنية وحفظه إلى الخاص package.json ملف عن طريق تشغيل:

      npm install --save firebase
  2. استخدم أحد الخيارات التالية لاستخدام وحدة Firebase في تطبيقك:

    • يمكنك require وحدات من أي ملف JavaScript

      لتضمين منتجات Firebase محددة فقط (مثل المصادقة و Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • يمكنك استخدام ES2015 import الوحدات

      لتضمين منتجات Firebase محددة فقط (مثل المصادقة و Cloud Firestore):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import * as firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. ابدأ تشغيل Firebase في تطبيقك:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

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

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

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

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

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

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

// 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",
};

إليك كائن التكوين بقيم المثال :

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

الخطوة 4 : (اختياري) قم بتثبيت CLI ونشره في Firebase Hosting

إذا ربطت تطبيق الويب Firebase بموقع استضافة Firebase ، فيمكنك نشر محتوى موقعك وتكوينه الآن (عند إعداد تطبيق الويب) أو في أي وقت لاحق.

للنشر في Firebase ، ستستخدم Firebase CLI ، وهي أداة سطر أوامر.

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

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

    firebase init

  3. انشر المحتوى الخاص بك وتهيئة الاستضافة إلى Firebase Hosting.

    موقع الاستضافة الافتراضي

    افتراضيا، كل مشروع Firebase ديه المجالات الفرعية الحرة على web.app و firebaseapp.com المجالات ( project-id .web.app و project-id .firebaseapp.com ).

    1. انشر على موقعك. قم بتشغيل الأمر التالي من الدليل الجذر لتطبيقك:

      firebase deploy
    2. اعرض موقعك على أي من مواقعك الافتراضية:

      • project-id .web.app
      • project-id .firebaseapp.com

    موقع استضافة غير افتراضي

    تدعم مشاريع Firebase مواقع متعددة (تعتبر هذه مواقع غير افتراضية ). يمكنك إضافة مواقع إضافية إلى مشروعك إما أثناء سير عمل إعداد تطبيق الويب لوحدة التحكم أو من صفحة استضافة وحدة التحكم.

    1. أضف موقعك إلى ملف firebase.json (الذي تم إنشاؤه أثناء firebase init ).

      لاحظ أن تكوين firebase.json يفترض أن لديك مستودعات منفصلة لكل موقع من مواقعك.

      {
        "hosting": {
          "site": "site-name>",
          "public": "public",
      
          // ...
        }
      }
      
    2. انشر على موقعك. قم بتشغيل الأمر التالي من الدليل الجذر لتطبيقك:

      firebase deploy --only hosting:site-name
    3. عرض موقعك على إما:

      • site-name .web.app
      • site-name .firebaseapp.com

الخطوة 5 : الوصول إلى Firebase في تطبيقك

تدعم حزمة Firebase JavaScript SDK منتجات Firebase التالية. كل منتج اختياري ويمكن الوصول إليه من مساحة اسم firebase .

تعرف على الطرق المتاحة في الوثائق المرجعية لـ Firebase JavaScript .

منتج Firebase مساحة الاسم الويب Node.js
تحليلات firebase.analytics()
المصادقة firebase.auth()
سحابة Firestore firebase.firestore()
وظائف السحابة لـ Firebase Client SDK firebase.functions()
المراسلة السحابية firebase.messaging()
سحابة التخزين firebase.storage()
مراقبة الأداء (إصدار بيتا ) firebase.performance()
قاعدة بيانات الوقت الحقيقي firebase.database()
التكوين عن بعد (إصدار بيتا ) firebase.remoteConfig()

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

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

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

يمكنك تأخير تضمين Firebase SDKs حتى يتم تحميل الصفحة بأكملها.

  1. أضف علامة defer إلى كل علامة script لحزم Firebase SDK ، ثم قم بتأجيل تهيئة Firebase باستخدام نص برمجي ثانٍ ، على سبيل المثال:

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

// Initialize Firebase with a "default" Firebase project
var defaultProject = firebase.initializeApp(firebaseConfig);

console.log(defaultProject.name);  // "[DEFAULT]"

// Option 1: Access Firebase services via the defaultProject variable
var defaultStorage = defaultProject.storage();
var 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 الخاصة به.

// Initialize Firebase with a default Firebase project
firebase.initializeApp(firebaseConfig);

// Initialize Firebase with a second Firebase project
var 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
var defaultStorage = firebase.storage();
var defaultFirestore = firebase.firestore();

// Use the otherProject variable to access the second project's Firebase services
var otherStorage = otherProject.storage();
var otherFirestore = otherProject.firestore();

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

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

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

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

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

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

    firebase init

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

    firebase serve

الخطوات التالية

تعرف على Firebase:

أضف خدمات Firebase إلى تطبيقك: