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 یا برنامه اینترنت اشیا ، این راهنما را دنبال کنید.

پیش نیازها

  • ویرایشگر یا IDE مورد نظر خود را نصب کنید.

  • با استفاده از حساب Google خود وارد Firebase شوید.

اگر قبلاً پروژه JavaScript ندارید و فقط می خواهید یک محصول Firebase را امتحان کنید ، می توانید یکی از نمونه های شروع سریع ما را بارگیری کنید.

مرحله 1 : یک پروژه Firebase ایجاد کنید

قبل از اینکه بتوانید Firebase را به برنامه JavaScript خود اضافه کنید ، باید یک پروژه Firebase برای اتصال به برنامه خود ایجاد کنید.

برای کسب اطلاعات بیشتر در مورد پروژه های Firebase و بهترین روش ها برای افزودن برنامه ها به پروژه ها ، از پروژه های Firebase درک کنید.

مرحله 2 : برنامه خود را با Firebase ثبت کنید

بعد از داشتن پروژه Firebase ، می توانید برنامه وب خود را به آن اضافه کنید.

مشاهده درک پروژه فایربیس برای کسب اطلاعات بیشتر در مورد بهترین شیوه و ملاحظات برای اضافه کردن برنامه به یک پروژه فایربیس.

  1. در مرکز صفحه کنسول Firebase ، روی نماد وب ( ) کلیک کنید تا گردش کار راه اندازی شود.

    اگر قبلاً برنامه ای را به پروژه Firebase خود اضافه کرده اید ، برای نمایش گزینه های پلت فرم ، روی Add app کلیک کنید.

  2. نام مستعار برنامه خود را وارد کنید.
    این نام مستعار یک شناسه راحت داخلی است و فقط برای شما در کنسول Firebase قابل مشاهده است.

  3. (اختیاری) Firebase Hosting را برای برنامه وب خود تنظیم کنید.

    • می توانید Firebase Hosting را همین حالا یا بعداً تنظیم کنید . همچنین می توانید در هر زمان از تنظیمات پروژه Firebase Web App خود را به یک سایت میزبان پیوند دهید.

    • اگر می خواهید اکنون میزبانی را راه اندازی کنید ، از فهرست کشویی سایتی را انتخاب کنید تا به Firebase Web App شما پیوند دهد.

      • این لیست سایت میزبان پیش فرض پروژه شما و هر سایت دیگری را که در پروژه خود راه اندازی کرده اید نمایش می دهد.

      • هر سایتی که قبلاً به برنامه Firebase Web پیوند داده اید برای پیوند اضافی در دسترس نیست. هر سایت میزبانی تنها می تواند به یک برنامه وب Firebase پیوند یابد.

  4. ثبت برنامه را کلیک کنید.

مرحله 3 : SDK های Firebase را اضافه کنید و Firebase را مقداردهی اولیه کنید

می توانید هر یک از محصولات Firebase پشتیبانی شده را به برنامه خود اضافه کنید.

نحوه افزودن SDK های Firebase به برنامه شما بستگی به این دارد که انتخاب کرده اید از Firebase Hosting برای برنامه خود استفاده کنید ، از چه ابزاری با برنامه خود استفاده می کنید (مانند بسته نرم افزاری) یا اینکه در حال پیکربندی برنامه Node.js هستید.

از URL های میزبانی

هنگامی که از Firebase Hosting استفاده می کنید ، می توانید برنامه خود را پیکربندی کنید تا کتابخانه های Firebase JavaScript SDK را از طریق URL های ذخیره شده به صورت پویا بارگیری کند. درباره افزودن SDK از طریق URL های رزرو شده میزبان بیشتر بیاموزید.

با استفاده از این گزینه راه اندازی ، پس از استقرار در Firebase ، برنامه شما به طور خودکار شی conf پیکربندی 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.0.0/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.0.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.0.0/firebase-auth.js"></script>
      <script src="/__/firebase/8.0.0/firebase-firestore.js"></script>
    </body>
    


  2. Firebase را در برنامه خود شروع کنید (نیازی به درج شی object پیکربندی 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:

    <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.0.0/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.0.0/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.0.0/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 JavaScript SDK را پیکربندی کنید و فقط محصولات Firebase مورد نیاز خود را بارگیری کنید. اگر شما با استفاده از یک bundler (مانند Browserify یا webpack)، شما می توانید import محصولات فایربیس فردی وقتی که شما به آنها نیاز دارید.

  1. Firebase JavaScript SDK را نصب کنید:

    1. اگر قبلاً فایل package.json ندارید ، با اجرای دستور زیر از ریشه پروژه JavaScript خود یکی از آنها را ایجاد کنید:

      npm init

    2. بسته npm firebase را نصب کنید و با اجرای آن را در فایل package.json خود ذخیره کنید:

      npm install --save firebase

  2. برای درج فقط محصولات خاص Firebase (مانند تأیید اعتبار و Cloud Firestore) ، ماژول های Firebase را import :

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

برنامه های Node.js

  1. Firebase JavaScript SDK را نصب کنید:

    1. اگر هنوز یک فایل package.json ندارید ، با اجرای دستور زیر از ریشه پروژه JavaScript خود یکی از آنها را ایجاد کنید:

      npm init
    2. بسته npm firebase را نصب کنید و با اجرای آن را در فایل package.json خود ذخیره کنید:

      npm install --save firebase
  2. برای استفاده از ماژول Firebase در برنامه خود از یکی از گزینه های زیر استفاده کنید:

    • از هر پرونده JavaScript می توانید require ماژول ها require

      فقط شامل محصولات خاص 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");
      


    • برای import ماژول ها می توانید از ES2015 استفاده کنید

      فقط شامل محصولات خاص 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);
    

درباره شی conf پیکربندی Firebase اطلاعات کسب کنید

برای مقداردهی اولیه Firebase در برنامه خود ، باید پیکربندی پروژه Firebase برنامه خود را ارائه دهید. در هر زمان می توانید شی object پیکربندی Firebase خود را بدست آورید .

  • اگر از URL های میزبانی شده رزرو شده استفاده می کنید ، پیکربندی Firebase شما به طور خودکار از پروژه Firebase شما خارج می شود ، بنابراین نیازی نیست که به طور مشخص شی پیکربندی خود را در کد خود ارائه دهید.

  • ما توصیه نمی کنیم که به طور دستی شی object پیکربندی خود را ویرایش کنید ، خصوصاً "گزینه های Firebase" مورد نیاز: apiKey ، projectId و appID . اگر برنامه خود را با مقادیر نامعتبر یا مفقود برای این "گزینه های Firebase" مقداردهی اولیه کنید ، ممکن است کاربران برنامه شما مشکلات جدی را تجربه کنند.

  • اگر Google Analytics را در پروژه Firebase خود فعال کنید ، شی پیکربندی شما شامل فیلد measurementId . در صفحه شروع Analytics درباره این قسمت بیشتر بدانید.

در اینجا قالب یک شی conf پیکربندی با همه سرویس ها فعال است (این مقادیر به طور خودکار جمع می شوند):

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

در اینجا یک شی conf پیکربندی با مقادیر مثال آورده شده است:

// 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 Web خود را با یک سایت میزبانی Firebase مرتبط کرده اید ، می توانید محتوای و پیکربندی سایت خود را هم اکنون (هنگام راه اندازی برنامه وب خود) یا هر زمان دیگری استفاده کنید.

برای استقرار در Firebase ، از Firebase CLI ، ابزاری خط فرمان استفاده می کنید.

  1. برای یادگیری نحوه نصب CLI یا بروزرسانی به آخرین نسخه ، به اسناد Firebase 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()
Cloud Firestore firebase.firestore()
توابع Cloud برای Firebase Client SDK firebase.functions()
پیام رسانی ابری firebase.messaging()
فضای ذخیره ابری firebase.storage()
نظارت بر عملکرد ( نسخه بتا ) firebase.performance()
پایگاه داده بیدرنگ firebase.database()
پیکربندی از راه دور ( نسخه بتا ) firebase.remoteConfig()

کتابخانه های موجود

گزینه های اضافی نصب

تأخیر در بارگیری SDK های Firebase (از CDN)

می توانید درج SDK های Firebase را تا زمان بارگیری کل صفحه به تأخیر بیندازید.

  1. برای SDK های Firebase به هر برچسب script یک پرچم defer اضافه کنید ، سپس با استفاده از اسکریپت دوم مقداردهی اولیه Firebase را به تعویق بیندازید:

    <script defer src="https://www.gstatic.com/firebasejs/8.0.0/firebase-app.js"></script>
    
    <script defer src="https://www.gstatic.com/firebasejs/8.0.0/firebase-auth.js"></script>
    <script defer src="https://www.gstatic.com/firebasejs/8.0.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. برای یادگیری نحوه نصب CLI یا به روزرسانی به آخرین نسخه ، به اسناد Firebase CLI مراجعه کنید .

  2. پروژه Firebase خود را آغاز کنید. دستور زیر را از ریشه فهرست برنامه محلی خود اجرا کنید:

    firebase init

  3. سرور محلی را برای توسعه راه اندازی کنید . دستور زیر را از ریشه فهرست برنامه محلی خود اجرا کنید:

    firebase serve

مراحل بعدی

درباره Firebase بیاموزید:

خدمات Firebase را به برنامه خود اضافه کنید: