Firebase برای وب را درک کنید

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

اگر سؤالی در مورد موضوعی دارید که در این صفحه پوشش داده نشده است، به یکی از انجمن های آنلاین ما مراجعه کنید. ما همچنین این صفحه را به صورت دوره‌ای با موضوعات جدید به‌روزرسانی می‌کنیم، بنابراین دوباره بررسی کنید تا ببینید آیا موضوعی را که می‌خواهید درباره آن بیاموزید اضافه کرده‌ایم یا خیر.

نسخه های SDK: فضای نام و ماژولار

Firebase دو سطح API را برای برنامه های وب ارائه می دهد:

  • جاوا اسکریپت - فضای نام. این رابط جاوا اسکریپتی است که Firebase سال‌ها آن را حفظ کرده است و برای توسعه‌دهندگان وب با برنامه‌های Firebase قدیمی‌تر آشناست. از آنجایی که API فضای نامی از پشتیبانی مداوم از ویژگی‌های جدید بهره نمی‌برد، بیشتر برنامه‌های جدید باید در عوض از API مدولار استفاده کنند.
  • جاوا اسکریپت - مدولار . این SDK مبتنی بر یک رویکرد ماژولار است که اندازه SDK کاهش یافته و کارایی بیشتر را با ابزارهای ساخت جاوا اسکریپت مدرن مانند بسته وب یا Rollup فراهم می کند.

API ماژولار به خوبی با ابزارهای ساخت ادغام می شود که کدهایی را که در برنامه شما استفاده نمی شود حذف می کند، فرآیندی که به عنوان "درخت تکان دادن" شناخته می شود. برنامه‌هایی که با این SDK ساخته می‌شوند از ردپای بسیار کاهش یافته بهره می‌برند. API با فضای نام، اگرچه به عنوان یک ماژول در دسترس است، ساختار کاملاً ماژولار ندارد و همان درجه کاهش اندازه را ارائه نمی دهد.

اگرچه اکثر API های مدولار از الگوهای مشابه API با فضای نام پیروی می کنند، سازماندهی کد متفاوت است. به طور کلی، API فضای نام به سمت یک فضای نام و الگوی خدمات جهت‌گیری می‌کند، در حالی که API ماژولار به سمت توابع گسسته است. برای مثال، زنجیره‌ی نقطه‌ای API با فضای نام، مانند firebaseApp.auth() در API مدولار با یک تابع getAuth() که firebaseApp را می‌گیرد و یک نمونه Authentication برمی‌گرداند، جایگزین می‌شود.

این بدان معنی است که برنامه های وب ایجاد شده با API فضای نامی به منظور بهره مندی از طراحی برنامه مدولار، نیاز به بازسازی دارند. برای جزئیات بیشتر به راهنمای ارتقا مراجعه کنید.

جاوا اسکریپت - API مدولار برای برنامه های جدید

اگر ادغام جدیدی را با Firebase شروع می‌کنید، می‌توانید با افزودن و مقداردهی اولیه SDK، API مدولار را انتخاب کنید.

همانطور که برنامه خود را توسعه می دهید، به خاطر داشته باشید که کد شما عمدتاً بر اساس توابع سازماندهی می شود. در API ماژولار، سرویس ها به عنوان اولین آرگومان ارسال می شوند و سپس تابع از جزئیات سرویس برای انجام بقیه موارد استفاده می کند. به عنوان مثال:

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

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

برای مثال‌ها و جزئیات بیشتر، به راهنمای هر منطقه محصول و همچنین مستندات مرجع API مدولار مراجعه کنید.

راه‌هایی برای افزودن وب SDK به برنامه شما

Firebase کتابخانه های جاوا اسکریپت را برای اکثر محصولات Firebase، از جمله Remote Config ، FCM و غیره فراهم می کند. نحوه افزودن Firebase SDK به برنامه وب خود بستگی به ابزاری دارد که با برنامه خود استفاده می کنید (مانند یک بسته ماژول).

می توانید هر یک از کتابخانه های موجود را از طریق یکی از روش های پشتیبانی شده به برنامه خود اضافه کنید:

  • npm (برای بسته‌کننده‌های ماژول)
  • CDN (شبکه تحویل محتوا)

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

npm

دانلود بسته npm Firebase (که شامل هر دو دسته مرورگر و 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

Web SDK Firebase را می توان هم در برنامه های مرورگر و هم در برنامه های Node استفاده کرد. با این حال، چندین محصول در محیط های Node در دسترس نیستند. لیست محیط های پشتیبانی شده را ببینید.

برخی از SDK های محصول، انواع مرورگر و Node مجزا را ارائه می کنند، که هر کدام در دو فرمت ESM و CJS ارائه می شوند، و برخی از SDK های محصول حتی انواع Cordova یا React Native را ارائه می دهند. Web SDK به گونه‌ای پیکربندی شده است که نوع صحیح را بر اساس پیکربندی ابزار یا محیط شما ارائه دهد و در بیشتر موارد نیازی به انتخاب دستی ندارد. همه انواع 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» مورد نیاز، مقداردهی اولیه کنید، کاربران برنامه شما ممکن است با مشکلات جدی مواجه شوند. استثنا در این مورد authDomain است که می تواند با پیروی از بهترین شیوه ها برای استفاده از signInWithRedirect به روز شود.

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

  • اگر پس از ایجاد برنامه وب Firebase، Google Analytics یا Realtime Database را فعال کنید، مطمئن شوید که شیء پیکربندی 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",
};

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

گزینه های تنظیم اضافی

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

می‌توانید گنجاندن SDKهای Firebase را تا زمانی که کل صفحه بارگیری شود به تأخیر بیاندازید. اگر از اسکریپت های مدولار API CDN با <script type="module"> استفاده می کنید، این رفتار پیش فرض است. اگر از اسکریپت های CDN با فضای نام به عنوان یک ماژول استفاده می کنید، این مراحل را برای به تعویق انداختن بارگذاری کامل کنید:

  1. به هر تگ script برای Firebase SDK یک پرچم defer اضافه کنید، سپس با استفاده از یک اسکریپت دوم، مقداردهی اولیه 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();

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

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

Firebase JavaScript SDK به شما این امکان را می دهد که چندین پروژه 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);

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

یک وب سرور محلی را برای توسعه اجرا کنید

اگر در حال ساختن یک برنامه وب هستید، برخی از بخش‌های Firebase JavaScript SDK نیاز دارند که برنامه وب خود را از یک سرور به جای سیستم فایل محلی ارائه کنید. می توانید از Firebase CLI برای اجرای یک سرور محلی استفاده کنید.

اگر قبلاً Firebase Hosting برای برنامه خود راه اندازی کرده اید، ممکن است قبلاً چندین مرحله زیر را انجام داده باشید.

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

  1. برای آشنایی با نحوه نصب CLI یا به روز رسانی به آخرین نسخه آن، از اسناد Firebase CLI دیدن کنید.

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

    firebase init

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

    firebase serve

منابع منبع باز برای Firebase JavaScript SDK

Firebase از توسعه منبع باز پشتیبانی می کند و ما مشارکت و بازخورد جامعه را تشویق می کنیم.

Firebase JavaScript SDKs

اکثر SDK های Firebase JavaScript به عنوان کتابخانه های منبع باز در مخزن عمومی Firebase GitHub ما توسعه داده شده اند.

نمونه های شروع سریع

Firebase مجموعه ای از نمونه های شروع سریع را برای اکثر API های Firebase در وب نگه می دارد. این شروع‌های سریع را در مخزن عمومی Firebase GitHub ما بیابید. می توانید از این شروع سریع به عنوان کد نمونه برای استفاده از Firebase SDK استفاده کنید.

،

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

اگر سؤالی در مورد موضوعی دارید که در این صفحه پوشش داده نشده است، به یکی از انجمن های آنلاین ما مراجعه کنید. ما همچنین این صفحه را به صورت دوره‌ای با موضوعات جدید به‌روزرسانی می‌کنیم، بنابراین دوباره بررسی کنید تا ببینید آیا موضوعی را که می‌خواهید درباره آن بیاموزید اضافه کرده‌ایم یا خیر.

نسخه های SDK: فضای نام و ماژولار

Firebase دو سطح API را برای برنامه های وب ارائه می دهد:

  • جاوا اسکریپت - فضای نام. این رابط جاوا اسکریپتی است که Firebase سال‌ها آن را حفظ کرده است و برای توسعه‌دهندگان وب با برنامه‌های Firebase قدیمی‌تر آشناست. از آنجایی که API فضای نامی از پشتیبانی مداوم از ویژگی‌های جدید بهره نمی‌برد، بیشتر برنامه‌های جدید باید در عوض از API مدولار استفاده کنند.
  • جاوا اسکریپت - مدولار . این SDK مبتنی بر یک رویکرد ماژولار است که اندازه SDK کاهش یافته و کارایی بیشتر را با ابزارهای ساخت جاوا اسکریپت مدرن مانند بسته وب یا Rollup فراهم می کند.

API ماژولار به خوبی با ابزارهای ساخت ادغام می شود که کدهایی را که در برنامه شما استفاده نمی شود حذف می کند، فرآیندی که به عنوان "درخت تکان دادن" شناخته می شود. برنامه‌هایی که با این SDK ساخته می‌شوند از ردپای بسیار کاهش یافته بهره می‌برند. API با فضای نام، اگرچه به عنوان یک ماژول در دسترس است، ساختار کاملاً ماژولار ندارد و همان درجه کاهش اندازه را ارائه نمی دهد.

اگرچه اکثر API های مدولار از الگوهای مشابه API با فضای نام پیروی می کنند، سازماندهی کد متفاوت است. به طور کلی، API فضای نام به سمت یک فضای نام و الگوی خدمات جهت‌گیری می‌کند، در حالی که API ماژولار به سمت توابع گسسته است. برای مثال، زنجیره‌ی نقطه‌ای API با فضای نام، مانند firebaseApp.auth() در API مدولار با یک تابع getAuth() که firebaseApp را می‌گیرد و یک نمونه Authentication برمی‌گرداند، جایگزین می‌شود.

این بدان معنی است که برنامه های وب ایجاد شده با API فضای نامی به منظور بهره مندی از طراحی برنامه مدولار، نیاز به بازسازی دارند. برای جزئیات بیشتر به راهنمای ارتقا مراجعه کنید.

جاوا اسکریپت - API مدولار برای برنامه های جدید

اگر ادغام جدیدی را با Firebase شروع می‌کنید، می‌توانید با افزودن و مقداردهی اولیه SDK، API مدولار را انتخاب کنید.

همانطور که برنامه خود را توسعه می دهید، به خاطر داشته باشید که کد شما عمدتاً بر اساس توابع سازماندهی می شود. در API ماژولار، سرویس ها به عنوان اولین آرگومان ارسال می شوند و سپس تابع از جزئیات سرویس برای انجام بقیه موارد استفاده می کند. به عنوان مثال:

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

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

برای مثال‌ها و جزئیات بیشتر، به راهنمای هر منطقه محصول و همچنین مستندات مرجع API مدولار مراجعه کنید.

راه‌هایی برای افزودن وب SDK به برنامه شما

Firebase کتابخانه های جاوا اسکریپت را برای اکثر محصولات Firebase، از جمله Remote Config ، FCM و غیره فراهم می کند. نحوه افزودن Firebase SDK به برنامه وب خود بستگی به ابزاری دارد که با برنامه خود استفاده می کنید (مانند یک بسته ماژول).

می توانید هر یک از کتابخانه های موجود را از طریق یکی از روش های پشتیبانی شده به برنامه خود اضافه کنید:

  • npm (برای بسته‌کننده‌های ماژول)
  • CDN (شبکه تحویل محتوا)

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

npm

دانلود بسته npm Firebase (که شامل هر دو دسته مرورگر و 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

Web SDK Firebase را می توان هم در برنامه های مرورگر و هم در برنامه های Node استفاده کرد. با این حال، چندین محصول در محیط های Node در دسترس نیستند. لیست محیط های پشتیبانی شده را ببینید.

برخی از SDK های محصول، انواع مرورگر و Node مجزا را ارائه می کنند، که هر کدام در دو فرمت ESM و CJS ارائه می شوند، و برخی از SDK های محصول حتی انواع Cordova یا React Native را ارائه می دهند. Web SDK به گونه‌ای پیکربندی شده است که نوع صحیح را بر اساس پیکربندی ابزار یا محیط شما ارائه دهد و در بیشتر موارد نیازی به انتخاب دستی ندارد. همه انواع 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» مورد نیاز، مقداردهی اولیه کنید، کاربران برنامه شما ممکن است با مشکلات جدی مواجه شوند. استثنا در این مورد authDomain است که می تواند با پیروی از بهترین شیوه ها برای استفاده از signInWithRedirect به روز شود.

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

  • اگر پس از ایجاد برنامه وب Firebase، Google Analytics یا Realtime Database را فعال کنید، مطمئن شوید که شیء پیکربندی 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",
};

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

گزینه های تنظیم اضافی

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

می‌توانید گنجاندن SDKهای Firebase را تا زمانی که کل صفحه بارگیری شود به تأخیر بیاندازید. اگر از اسکریپت های مدولار API CDN با <script type="module"> استفاده می کنید، این رفتار پیش فرض است. اگر از اسکریپت های CDN با فضای نام به عنوان یک ماژول استفاده می کنید، این مراحل را برای به تعویق انداختن بارگذاری کامل کنید:

  1. به هر تگ script برای Firebase SDK یک پرچم defer اضافه کنید، سپس با استفاده از یک اسکریپت دوم، مقداردهی اولیه 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();

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

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

Firebase JavaScript SDK به شما این امکان را می دهد که چندین پروژه 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);

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

یک وب سرور محلی را برای توسعه اجرا کنید

اگر در حال ساختن یک برنامه وب هستید، برخی از بخش‌های Firebase JavaScript SDK نیاز دارند که برنامه وب خود را از یک سرور به جای سیستم فایل محلی ارائه کنید. می توانید از Firebase CLI برای اجرای یک سرور محلی استفاده کنید.

اگر قبلاً Firebase Hosting برای برنامه خود راه اندازی کرده اید، ممکن است قبلاً چندین مرحله زیر را انجام داده باشید.

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

  1. برای آشنایی با نحوه نصب CLI یا به روز رسانی به آخرین نسخه آن، از اسناد Firebase CLI دیدن کنید.

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

    firebase init

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

    firebase serve

منابع منبع باز برای Firebase JavaScript SDK

Firebase از توسعه منبع باز پشتیبانی می کند و ما مشارکت و بازخورد جامعه را تشویق می کنیم.

Firebase JavaScript SDKs

اکثر SDK های Firebase JavaScript به عنوان کتابخانه های منبع باز در مخزن عمومی Firebase GitHub ما توسعه یافته اند.

نمونه های شروع سریع

Firebase مجموعه ای از نمونه های شروع سریع را برای اکثر API های Firebase در وب نگه می دارد. این شروع‌های سریع را در مخزن عمومی Firebase GitHub ما پیدا کنید. می توانید از این شروع سریع به عنوان کد نمونه برای استفاده از Firebase SDK استفاده کنید.

،

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

اگر سؤالی در مورد موضوعی دارید که در این صفحه پوشش داده نشده است، به یکی از انجمن های آنلاین ما مراجعه کنید. ما همچنین این صفحه را به صورت دوره‌ای با موضوعات جدید به‌روزرسانی می‌کنیم، بنابراین دوباره بررسی کنید تا ببینید آیا موضوعی را که می‌خواهید درباره آن بیاموزید اضافه کرده‌ایم یا خیر.

نسخه های SDK: فضای نام و ماژولار

Firebase دو سطح API را برای برنامه های وب ارائه می دهد:

  • جاوا اسکریپت - فضای نام. این رابط جاوا اسکریپتی است که Firebase سال‌ها آن را حفظ کرده است و برای توسعه‌دهندگان وب با برنامه‌های Firebase قدیمی‌تر آشناست. از آنجایی که API فضای نامی از پشتیبانی مداوم از ویژگی‌های جدید بهره نمی‌برد، بیشتر برنامه‌های جدید باید در عوض از API مدولار استفاده کنند.
  • جاوا اسکریپت - مدولار . این SDK مبتنی بر یک رویکرد ماژولار است که اندازه SDK کاهش یافته و کارایی بیشتر را با ابزارهای ساخت جاوا اسکریپت مدرن مانند بسته وب یا Rollup فراهم می کند.

API ماژولار به خوبی با ابزارهای ساخت ادغام می شود که کدهایی را که در برنامه شما استفاده نمی شود حذف می کند، فرآیندی که به عنوان "درخت تکان دادن" شناخته می شود. برنامه‌هایی که با این SDK ساخته می‌شوند از ردپای بسیار کاهش یافته بهره می‌برند. API با فضای نام، اگرچه به عنوان یک ماژول در دسترس است، ساختار کاملاً ماژولار ندارد و همان درجه کاهش اندازه را ارائه نمی دهد.

اگرچه اکثر APIهای مدولار از الگوهای مشابه API با فضای نام پیروی می کنند، سازماندهی کد متفاوت است. به طور کلی، API فضای نام به سمت یک فضای نام و الگوی خدمات جهت‌گیری می‌کند، در حالی که API ماژولار به سمت توابع گسسته است. برای مثال، زنجیره‌ی نقطه‌ای API با فضای نام، مانند firebaseApp.auth() در API مدولار با یک تابع getAuth() که firebaseApp را می‌گیرد و یک نمونه Authentication برمی‌گرداند، جایگزین می‌شود.

این بدان معنی است که برنامه های وب ایجاد شده با API فضای نامی به منظور بهره مندی از طراحی برنامه مدولار، نیاز به بازسازی دارند. برای جزئیات بیشتر به راهنمای ارتقا مراجعه کنید.

جاوا اسکریپت - API مدولار برای برنامه های جدید

اگر ادغام جدیدی را با Firebase شروع می‌کنید، می‌توانید با افزودن و مقداردهی اولیه SDK، API مدولار را انتخاب کنید.

همانطور که برنامه خود را توسعه می دهید، به خاطر داشته باشید که کد شما عمدتاً بر اساس توابع سازماندهی می شود. در API ماژولار، سرویس ها به عنوان اولین آرگومان ارسال می شوند و سپس تابع از جزئیات سرویس برای انجام بقیه موارد استفاده می کند. به عنوان مثال:

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

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

برای مثال‌ها و جزئیات بیشتر، به راهنمای هر منطقه محصول و همچنین مستندات مرجع API مدولار مراجعه کنید.

راه‌هایی برای افزودن وب SDK به برنامه شما

Firebase کتابخانه های جاوا اسکریپت را برای اکثر محصولات Firebase، از جمله Remote Config ، FCM و غیره فراهم می کند. نحوه افزودن Firebase SDK به برنامه وب خود بستگی به ابزاری دارد که با برنامه خود استفاده می کنید (مانند یک بسته ماژول).

می توانید هر یک از کتابخانه های موجود را از طریق یکی از روش های پشتیبانی شده به برنامه خود اضافه کنید:

  • npm (برای بسته‌کننده‌های ماژول)
  • CDN (شبکه تحویل محتوا)

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

npm

دانلود بسته npm Firebase (که شامل هر دو دسته مرورگر و 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 ها ، شما به یک ابزار ساخت نیاز ندارید ، و زنجیره ساخت شما ممکن است ساده تر و آسان تر کار در مقایسه با Bundlers ماژول باشد. اگر به خصوص در مورد اندازه نصب شده برنامه خود نگران نیستید و الزامات خاصی مانند انتقال از TypeScript ندارید ، پس CDN می تواند انتخاب خوبی باشد.

به طور خلاصه:

  • آشنا و ساده
  • مناسب است که اندازه برنامه یک نگرانی عمده نیست
  • مناسب وقتی وب سایت شما از ابزارهای ساخت استفاده نمی کند.

Firebase Web SDK انواع

وب SDK Firebase می تواند در هر دو برنامه مرورگر و گره استفاده شود. با این حال ، چندین محصول در محیط های گره در دسترس نیستند. لیست محیط های پشتیبانی شده را مشاهده کنید.

برخی از SDK های محصول انواع مرورگر و گره جداگانه را ارائه می دهند که هر یک از آنها در هر دو قالب ESM و CJS ارائه شده است ، و برخی از SDK های محصول حتی انواع Cordova یا React را ارائه می دهند. وب SDK پیکربندی شده است تا نوع صحیح را بر اساس پیکربندی ابزار یا محیط شما ارائه دهد و در بیشتر موارد نیازی به انتخاب دستی ندارد. تمام انواع SDK برای کمک به ساخت برنامه های وب یا برنامه های مشتری برای دسترسی به کاربر نهایی ، مانند یک برنامه دسک تاپ Node.js یا برنامه IoT طراحی شده است. اگر هدف شما تنظیم دسترسی اداری از محیط های ممتاز (مانند سرورها) به جای آن از Firebase Admin SDK استفاده کنید.

تشخیص محیط با دسته ها و چارچوب ها

هنگام نصب Firebase Web SDK با استفاده از NPM ، نسخه های JavaScript و Node.js هر دو نصب می شوند. این بسته تشخیص دقیق محیط را برای فعال کردن بسته های مناسب برای برنامه شما فراهم می کند.

اگر کد شما از node.js به اظهارات require ، SDK بسته نرم افزاری خاص گره را پیدا می کند. در غیر این صورت ، تنظیمات Bundler شما باید به درستی مشخص شود تا قسمت ورودی مناسب را در پرونده package.json خود تشخیص دهید (به عنوان مثال ، main ، browser یا module ). اگر خطاهای زمان اجرا را با SDK تجربه کرده اید ، بررسی کنید که بسته بندی شما برای اولویت بندی نوع صحیح بسته نرم افزاری برای محیط خود تنظیم شده است.

در مورد شیء پیکربندی Firebase بیاموزید

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

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

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

  • اگر پس از ایجاد برنامه وب Firebase خود ، Google Analytics یا Realtime Database را فعال کنید ، مطمئن شوید که شیء پیکربندی 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",
};

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

گزینه های تنظیم اضافی

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

می توانید تا زمانی که کل صفحه بارگیری شود ، گنجاندن SDK های Firebase را به تأخیر بیندازید. اگر از اسکریپت های CDN Modular API با <script type="module"> استفاده می کنید ، این رفتار پیش فرض است. اگر از اسکریپت های CDN با نام 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();

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

با این حال ، گاهی اوقات ، شما باید به طور همزمان به چندین پروژه Firebase دسترسی پیدا کنید. به عنوان مثال ، شما ممکن است بخواهید داده ها را از پایگاه داده یک پروژه Firebase بخوانید اما پرونده ها را در یک پروژه Firebase متفاوت ذخیره کنید. یا ممکن است بخواهید ضمن نگه داشتن یک پروژه دوم غیرمجاز ، یک پروژه را تأیید کنید.

Firebase JavaScript SDK به شما امکان می دهد تا به طور همزمان پروژه های مختلف 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);

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

یک سرور وب محلی برای توسعه اجرا کنید

اگر در حال ساخت یک برنامه وب هستید ، برخی از قسمت های Firebase JavaScript SDK نیاز دارند که به جای آن از سیستم فایل محلی ، برنامه وب خود را از یک سرور ارائه دهید. برای اجرای یک سرور محلی می توانید از Firebase CLI استفاده کنید.

اگر قبلاً Firebase Hosting برای برنامه خود تنظیم کرده اید ، ممکن است قبلاً چندین مرحله از زیر را انجام داده باشید.

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

  1. برای یادگیری نحوه نصب CLI یا به روزرسانی در آخرین نسخه آن ، از اسناد Firebase CLI بازدید کنید.

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

    firebase init

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

    firebase serve

منابع منبع باز برای SDK های Firebase JavaScript

Firebase از توسعه منبع باز پشتیبانی می کند ، و ما کمک ها و بازخورد جامعه را تشویق می کنیم.

SDK های JavaScript Firebase

بیشتر SDK های JavaScript Firebase به عنوان کتابخانه های منبع باز در مخزن عمومی GitHub ما ساخته شده اند.

نمونه های Quickstart

Firebase مجموعه ای از نمونه های Quickstart را برای اکثر API های Firebase در وب حفظ می کند. این موارد سریع را در مخزن Quickstart Firebase Github ما پیدا کنید. می توانید از این QuickStarts به عنوان مثال برای استفاده از SDK های Firebase استفاده کنید.

،

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

اگر در مورد موضوعی که در این صفحه ارائه نشده است ، سؤالی دارید ، به یکی از جوامع آنلاین ما مراجعه کنید. ما همچنین این صفحه را با مباحث جدید به صورت دوره ای به روز خواهیم کرد ، بنابراین دوباره بررسی کنیم تا ببینیم آیا موضوعی را که می خواهید در مورد آن بیاموزیم اضافه کرده ایم.

نسخه های SDK: نامگذاری شده و مدولار

Firebase دو سطح API را برای برنامه های وب فراهم می کند:

  • JavaScript - نام. این رابط JavaScript است که Firebase سالهاست که آن را حفظ می کند و برای توسعه دهندگان وب با برنامه های قدیمی Firebase آشنا است. از آنجا که API نامگذاری شده از پشتیبانی جدید ویژگی های جدید بهره نمی برد ، بیشتر برنامه های جدید باید در عوض API مدولار را اتخاذ کنند.
  • JavaScript - مدولار . این SDK مبتنی بر یک رویکرد مدولار است که کاهش اندازه SDK و راندمان بیشتر با ابزارهای مدرن JavaScript Build مانند Webpack یا Rollup را فراهم می کند.

API مدولار به خوبی با ابزارهای ساخت که کد هایی را که در برنامه شما استفاده نمی شود ، ادغام می کند ، فرایندی که به عنوان "لرزش درخت" شناخته می شود. برنامه های ساخته شده با این SDK از ردپاهای اندازه بسیار کاهش یافته بهره مند می شوند. API نامگذاری شده ، گرچه به عنوان یک ماژول در دسترس است ، اما ساختار کاملاً مدولار ندارد و همان درجه کاهش اندازه را ارائه نمی دهد.

اگرچه اکثر API مدولار از الگوهای مشابه API نامگذاری شده پیروی می کنند ، اما سازمان کد متفاوت است. به طور کلی ، API نامگذاری شده به سمت یک فضای نام و الگوی سرویس گرایش دارد ، در حالی که API مدولار به سمت توابع گسسته گرایش دارد. به عنوان مثال ، زنجیره نقطه API نامگذاری شده ، مانند firebaseApp.auth() ، در API ماژولار توسط یک عملکرد getAuth() که firebaseApp را می گیرد جایگزین می شود و یک نمونه Authentication برمی گرداند.

این بدان معنی است که برنامه های وب ایجاد شده با API نامگذاری شده برای استفاده از طراحی برنامه های مدولار نیاز به تغییر مجدد دارند. برای جزئیات بیشتر به راهنمای ارتقاء مراجعه کنید.

JavaScript - API مدولار برای برنامه های جدید

اگر شروع به ادغام جدید با Firebase می کنید ، می توانید هنگام اضافه کردن و ابتدای SDK ، API مدولار را انتخاب کنید.

با توسعه برنامه خود ، به خاطر داشته باشید که کد شما به طور عمده در مورد توابع سازماندهی می شود. در API مدولار ، خدمات به عنوان اولین آرگومان منتقل می شوند و عملکرد سپس از جزئیات سرویس برای انجام بقیه استفاده می کند. به عنوان مثال:

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

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

برای مثال ها و جزئیات بیشتر ، به راهنماهای مربوط به هر منطقه محصول و همچنین مستندات مرجع API مدولار مراجعه کنید.

راه های افزودن SDK های وب به برنامه شما

Firebase کتابخانه های JavaScript را برای بیشتر محصولات Firebase ، از جمله Remote Config ، FCM و موارد دیگر فراهم می کند. نحوه اضافه کردن SDK های Firebase به برنامه وب خود بستگی به این دارد که از چه ابزاری با برنامه خود استفاده می کنید (مانند یک دسته ماژول).

می توانید از طریق یکی از روشهای پشتیبانی شده ، هر یک از کتابخانه های موجود را به برنامه خود اضافه کنید:

  • NPM (برای bundlers ماژول)
  • CDN (شبکه تحویل محتوا)

برای دستورالعمل های دقیق تنظیم ، به برنامه JavaScript خود اضافه کنید . بقیه این بخش شامل اطلاعاتی برای کمک به شما در انتخاب گزینه های موجود است.

NPM

بارگیری بسته Firebase NPM (که شامل بسته های مرورگر و Node.js است) یک کپی محلی از Firebase SDK را برای شما فراهم می کند ، که ممکن است برای برنامه های غیر نوزری مانند برنامه های Node.js ، React Native یا Electron مورد نیاز باشد. این بارگیری شامل Node.js و بسته های بومی React به عنوان گزینه ای برای برخی از بسته ها است. بسته های Node.js برای مرحله ارائه سمت سرور (SSR) از چارچوب های SSR ضروری است.

استفاده از NPM با یک دسته ماژول مانند Webpack یا Rollup گزینه های بهینه سازی را برای "لرزش درخت" برای کد استفاده نشده و استفاده از پلی پلی های هدفمند فراهم می کند ، که می تواند ردپای اندازه برنامه شما را به شدت کاهش دهد. اجرای این ویژگی ها ممکن است پیچیدگی را به پیکربندی و زنجیره ساخت شما اضافه کند ، اما ابزارهای مختلف CLI اصلی می توانند به کاهش آن کمک کنند. این ابزارها شامل Angular ، React ، Vue ، Next و سایر موارد هستند.

به طور خلاصه:

  • بهینه سازی اندازه برنامه ارزشمند را فراهم می کند
  • ابزار قوی برای مدیریت ماژول ها در دسترس است
  • مورد نیاز SSR با node.js

CDN (شبکه تحویل محتوا)

اضافه کردن کتابخانه هایی که در CDN Firebase ذخیره می شوند ، یک روش ساده تنظیم SDK است که ممکن است برای بسیاری از توسعه دهندگان آشنا باشد. با استفاده از CDN برای اضافه کردن SDK ها ، شما به یک ابزار ساخت نیاز ندارید ، و زنجیره ساخت شما ممکن است ساده تر و آسان تر کار در مقایسه با Bundlers ماژول باشد. اگر به خصوص در مورد اندازه نصب شده برنامه خود نگران نیستید و الزامات خاصی مانند انتقال از TypeScript ندارید ، پس CDN می تواند انتخاب خوبی باشد.

به طور خلاصه:

  • آشنا و ساده
  • مناسب است که اندازه برنامه یک نگرانی عمده نیست
  • مناسب وقتی وب سایت شما از ابزارهای ساخت استفاده نمی کند.

Firebase Web SDK انواع

وب SDK Firebase می تواند در هر دو برنامه مرورگر و گره استفاده شود. با این حال ، چندین محصول در محیط های گره در دسترس نیستند. لیست محیط های پشتیبانی شده را مشاهده کنید.

برخی از SDK های محصول انواع مرورگر و گره جداگانه را ارائه می دهند که هر یک از آنها در هر دو قالب ESM و CJS ارائه شده است ، و برخی از SDK های محصول حتی انواع Cordova یا React را ارائه می دهند. وب SDK پیکربندی شده است تا نوع صحیح را بر اساس پیکربندی ابزار یا محیط شما ارائه دهد و در بیشتر موارد نیازی به انتخاب دستی ندارد. تمام انواع SDK برای کمک به ساخت برنامه های وب یا برنامه های مشتری برای دسترسی به کاربر نهایی ، مانند یک برنامه دسک تاپ Node.js یا برنامه IoT طراحی شده است. اگر هدف شما تنظیم دسترسی اداری از محیط های ممتاز (مانند سرورها) به جای آن از Firebase Admin SDK استفاده کنید.

تشخیص محیط با دسته ها و چارچوب ها

هنگام نصب Firebase Web SDK با استفاده از NPM ، نسخه های JavaScript و Node.js هر دو نصب می شوند. این بسته تشخیص دقیق محیط را برای فعال کردن بسته های مناسب برای برنامه شما فراهم می کند.

اگر کد شما از node.js به اظهارات require ، SDK بسته نرم افزاری خاص گره را پیدا می کند. در غیر این صورت ، تنظیمات Bundler شما باید به درستی مشخص شود تا قسمت ورودی مناسب را در پرونده package.json خود تشخیص دهید (به عنوان مثال ، main ، browser یا module ). اگر خطاهای زمان اجرا را با SDK تجربه کرده اید ، بررسی کنید که بسته بندی شما برای اولویت بندی نوع صحیح بسته نرم افزاری برای محیط خود تنظیم شده است.

در مورد شیء پیکربندی Firebase بیاموزید

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

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

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

  • اگر پس از ایجاد برنامه وب Firebase خود ، Google Analytics یا Realtime Database را فعال کنید ، مطمئن شوید که شیء پیکربندی 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",
};

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

گزینه های تنظیم اضافی

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

می توانید تا زمانی که کل صفحه بارگیری شود ، گنجاندن SDK های Firebase را به تأخیر بیندازید. اگر از اسکریپت های CDN Modular API با <script type="module"> استفاده می کنید ، این رفتار پیش فرض است. اگر از اسکریپت های CDN با نام 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();

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

با این حال ، گاهی اوقات ، شما باید به طور همزمان به چندین پروژه Firebase دسترسی پیدا کنید. به عنوان مثال ، شما ممکن است بخواهید داده ها را از پایگاه داده یک پروژه Firebase بخوانید اما پرونده ها را در یک پروژه Firebase متفاوت ذخیره کنید. یا ممکن است بخواهید ضمن نگه داشتن یک پروژه دوم غیرمجاز ، یک پروژه را تأیید کنید.

Firebase JavaScript SDK به شما امکان می دهد تا به طور همزمان پروژه های مختلف 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);

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

یک سرور وب محلی برای توسعه اجرا کنید

اگر در حال ساخت یک برنامه وب هستید ، برخی از قسمت های Firebase JavaScript SDK نیاز دارند که به جای آن از سیستم فایل محلی ، برنامه وب خود را از یک سرور ارائه دهید. برای اجرای یک سرور محلی می توانید از Firebase CLI استفاده کنید.

اگر قبلاً Firebase Hosting برای برنامه خود تنظیم کرده اید ، ممکن است قبلاً چندین مرحله از زیر را انجام داده باشید.

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

  1. برای یادگیری نحوه نصب CLI یا به روزرسانی در آخرین نسخه آن ، از اسناد Firebase CLI بازدید کنید.

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

    firebase init

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

    firebase serve

منابع منبع باز برای SDK های Firebase JavaScript

Firebase از توسعه منبع باز پشتیبانی می کند ، و ما کمک ها و بازخورد جامعه را تشویق می کنیم.

SDK های JavaScript Firebase

بیشتر SDK های JavaScript Firebase به عنوان کتابخانه های منبع باز در مخزن عمومی GitHub ما ساخته شده اند.

نمونه های Quickstart

Firebase مجموعه ای از نمونه های Quickstart را برای اکثر API های Firebase در وب حفظ می کند. این موارد سریع را در مخزن Quickstart Firebase Github ما پیدا کنید. می توانید از این QuickStarts به عنوان مثال برای استفاده از SDK های Firebase استفاده کنید.