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

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

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

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

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

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

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

اگرچه اکثر APIهای ماژولار از الگوهای مشابه APIهای namespaced پیروی می‌کنند، اما سازماندهی کد متفاوت است. به‌طورکلی، APIهای namespaced به سمت الگوی namespace و سرویس گرایش دارند، در حالی که APIهای ماژولار به سمت توابع گسسته گرایش دارند. به‌عنوان مثال، زنجیره‌سازی نقطه‌ای APIهای namespaced، مانند 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های وب به برنامه شما

فایربیس کتابخانه‌های جاوااسکریپت را برای اکثر محصولات فایربیس، از جمله Remote Config ، FCM و موارد دیگر، فراهم می‌کند. نحوه اضافه کردن SDK های فایربیس به برنامه وب شما بستگی به ابزاری دارد که با برنامه خود استفاده می‌کنید (مانند یک module bundler).

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

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

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

ان‌پی‌ام

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

استفاده از npm به همراه یک module bundler مانند webpack یا Rollup گزینه‌های بهینه‌سازی برای «tree-shake» کردن کدهای بلااستفاده و اعمال polyfillهای هدفمند را فراهم می‌کند که می‌تواند حجم برنامه شما را تا حد زیادی کاهش دهد. پیاده‌سازی این ویژگی‌ها ممکن است پیچیدگی‌هایی را به پیکربندی و زنجیره ساخت شما اضافه کند، اما ابزارهای مختلف CLI اصلی می‌توانند به کاهش این پیچیدگی کمک کنند. این ابزارها شامل Angular ، React ، Vue ، Next و موارد دیگر هستند.

به طور خلاصه:

  • بهینه‌سازی حجم برنامه ارزشمندی را ارائه می‌دهد
  • ابزارهای قدرتمندی برای مدیریت ماژول‌ها در دسترس است
  • برای SSR با Node.js مورد نیاز است

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

اضافه کردن کتابخانه‌هایی که در CDN فایربیس ذخیره شده‌اند، یک روش ساده برای راه‌اندازی SDK است که ممکن است برای بسیاری از توسعه‌دهندگان آشنا باشد. با استفاده از CDN برای اضافه کردن SDKها، به ابزار ساخت نیاز نخواهید داشت و زنجیره ساخت شما ممکن است در مقایسه با بسته‌های ماژول، ساده‌تر و آسان‌تر باشد. اگر به طور خاص نگران حجم نصب شده برنامه خود نیستید و الزامات خاصی مانند transpiling از TypeScript ندارید، CDN می‌تواند انتخاب خوبی باشد.

به طور خلاصه:

  • آشنا و ساده
  • مناسب زمانی که حجم برنامه نگرانی اصلی نیست
  • مناسب زمانی که وب‌سایت شما از ابزارهای ساخت استفاده نمی‌کند.

انواع SDK وب فایربیس

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

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

تشخیص محیط با bundlerها و فریم‌ورک‌ها

وقتی SDK وب فایربیس را با استفاده از npm نصب می‌کنید، نسخه‌های جاوا اسکریپت و Node.js هر دو نصب می‌شوند. این بسته، تشخیص دقیق محیط را برای فعال کردن بسته‌های مناسب برای برنامه شما فراهم می‌کند.

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

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

برای مقداردهی اولیه Firebase در برنامه خود، باید پیکربندی Firebase برنامه خود را ارائه دهید. می‌توانید شیء پیکربندی Firebase خود را در هر زمانی دریافت کنید .

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

  • اگر Google Analytics در پروژه فایربیس خود فعال کرده باشید، شیء پیکربندی شما حاوی فیلد 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",
  // The value of `storageBucket` depends on when you provisioned your default bucket (learn more)
  storageBucket: "PROJECT_ID.firebasestorage.app",
  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. یک پرچم 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 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 دیگر ذخیره کنید. یا ممکن است بخواهید یک پروژه را احراز هویت کنید در حالی که پروژه دوم را احراز هویت نکنید.

کیت توسعه JavaScript Firebase JavaScript SDK) به شما امکان می‌دهد چندین پروژه فایربیس را در یک برنامه واحد به طور همزمان راه‌اندازی و استفاده کنید، به طوری که هر پروژه از اطلاعات پیکربندی فایربیس مخصوص به خود استفاده کند.

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

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

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

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

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

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

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

    firebase init

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

    firebase serve

منابع متن‌باز برای SDKهای جاوااسکریپت فایربیس

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

SDK های جاوا اسکریپت فایربیس

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

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

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