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();
app_default_init_options.js

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();
firebaseapp.js

با این حال، گاهی اوقات لازم است به چندین پروژه 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);
app_multi_project_init_options.js

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();
firebaseapp.js

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

اگر در حال ساختن یک برنامه وب هستید، برخی از بخش‌های 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 استفاده کنید.