Google is committed to advancing racial equity for Black communities. See how.
ترجمت واجهة Cloud Translation API‏ هذه الصفحة.
Switch to English

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

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

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

إذا لم يكن لديك بالفعل مشروع JavaScript وترغب فقط في تجربة أحد منتجات 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 مكتبات JavaScript لمعظم منتجات Firebase ، بما في ذلك Remote Config و FCM والمزيد. يمكنك إضافة أي من المكتبات المتاحة إلى تطبيقك.

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

إذا كنت مهتمًا بتجربة Beta SDK الجديدة المحسّنة لتطوير التطبيقات المعيارية ، فحدد خيار الإصدار 9 (Beta). ضع في اعتبارك أنه لا توجد التزامات دعم فني في إصدار بيتا.

مع npm

يمكنك تهيئة الاستيراد الجزئي لـ 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 firebase from "firebase/app";
// If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
// 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);

من CDN

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

  1. لتضمين منتجات Firebase محددة فقط (على سبيل المثال ، المصادقة و 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="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>
</body>


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

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

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

  1. لتضمين منتجات Firebase محددة فقط (على سبيل المثال ، التحليلات أو المصادقة أو 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/8.4.1/firebase-app.js"></script>

  <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
  <script src="/__/firebase/8.4.1/firebase-analytics.js"></script>

  <!-- Add Firebase products that you want to use -->
  <script src="/__/firebase/8.4.1/firebase-auth.js"></script>
  <script src="/__/firebase/8.4.1/firebase-firestore.js"></script>
</body>


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

    <body>
  <!-- Previously loaded Firebase SDKs -->

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

تطبيقات 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 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_ID",
    "public": "public",

    // ...
  }
}

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

      firebase deploy --only hosting:SITE_ID

    3. عرض موقعك على إما:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

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

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

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

منتج Firebase Namespace (v8 وأقل) الويب 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:

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