درباره Web و Firebase بیشتر بیاموزید

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

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

SDK نسخه 8 و 9

Firebase دو نسخه SDK را برای برنامه های وب ارائه می دهد:

  • نسخه 8. این رابط جاوا اسکریپت است که Firebase چندین سال آن را حفظ کرده است و برای توسعه دهندگان وب با برنامه های Firebase موجود آشنا است. از آنجایی که Firebase پس از یک دوره انتشار اصلی، پشتیبانی از این نسخه را حذف می کند، برنامه های جدید باید نسخه 9 را بپذیرند.
  • ماژولار نسخه 9 . این SDK یک رویکرد ماژولار را معرفی می‌کند که اندازه SDK کاهش یافته و کارایی بیشتر را با ابزارهای ساخت جاوا اسکریپت مدرن مانند بسته وب یا Rollup فراهم می‌کند.

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

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

این به این معنی است که برنامه های وب ایجاد شده با نسخه 8 یا قبل از آن به منظور استفاده از رویکرد ماژولار نسخه 9 نیاز به بازسازی دارند. Firebase کتابخانه های سازگار را برای سهولت این انتقال فراهم می کند. برای جزئیات بیشتر به راهنمای ارتقا مراجعه کنید.

چه چیزی پشتیبانی می شود؟

در حالی که نسخه 8 و نسخه 9 دارای سبک های کد متفاوتی هستند، اما پشتیبانی بسیار مشابهی از ویژگی ها و گزینه های Firebase ارائه می دهند. همانطور که در این راهنما به تفصیل توضیح خواهیم داد، هر دو نسخه SDK از انواع JavaScript و Node.js به همراه چندین گزینه برای افزودن/نصب SDK ها پشتیبانی می کنند.

افزودن SDK با 8.0 (فاصله نام) 9.0 (مژولار)
npm
  • برای جاوا اسکریپت
  • برای Node.js
  • برای جاوا اسکریپت
  • برای Node.js
CDN (شبکه تحویل محتوا)
  • برای جاوا اسکریپت
  • برای جاوا اسکریپت
میزبانی URL ها
  • برای جاوا اسکریپت
  • برای Node.js

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

نسخه 9 برای برنامه های جدید

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

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

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

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

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

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

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

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

  • npm (برای باندلرهای ماژول و Node.js)
  • 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

در حال حاضر، Firebase دو نوع Web SDK را ارائه می دهد:

  • یک بسته جاوا اسکریپت که از تمام ویژگی های Firebase برای استفاده در مرورگر پشتیبانی می کند.
  • یک بسته Node.js سمت کلاینت که از بسیاری از ویژگی‌های Firebase، اما نه همه آن‌ها، پشتیبانی می‌کند. لیست محیط های پشتیبانی شده را ببینید.

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

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

  • اگر پس از ایجاد برنامه وب Firebase، Google Analytics یا پایگاه داده بیدرنگ را فعال کنید، مطمئن شوید که شیء پیکربندی 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 نسخه 9 با <script type="module"> استفاده می کنید، این رفتار پیش فرض است. اگر از نسخه 8 اسکریپت 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 version 9

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 version 8

// 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 version 9

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 version 8

// 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 را برای برنامه خود راه اندازی کرده اید، ممکن است قبلاً چندین مرحله زیر را انجام داده باشید.

برای ارائه برنامه وب خود، از 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 نسخه 8 و 9

Firebase دو نسخه SDK را برای برنامه های وب ارائه می دهد:

  • نسخه 8. این رابط جاوا اسکریپت است که Firebase چندین سال آن را حفظ کرده است و برای توسعه دهندگان وب با برنامه های Firebase موجود آشنا است. از آنجایی که Firebase پس از یک دوره انتشار اصلی، پشتیبانی از این نسخه را حذف می کند، برنامه های جدید باید نسخه 9 را بپذیرند.
  • ماژولار نسخه 9 . این SDK یک رویکرد ماژولار را معرفی می‌کند که اندازه SDK کاهش یافته و کارایی بیشتر را با ابزارهای ساخت جاوا اسکریپت مدرن مانند بسته وب یا Rollup فراهم می‌کند.

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

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

این به این معنی است که برنامه های وب ایجاد شده با نسخه 8 یا قبل از آن به منظور استفاده از رویکرد ماژولار نسخه 9 نیاز به بازسازی دارند. Firebase کتابخانه های سازگار را برای سهولت این انتقال فراهم می کند. برای جزئیات بیشتر به راهنمای ارتقا مراجعه کنید.

چه چیزی پشتیبانی می شود؟

در حالی که نسخه 8 و نسخه 9 دارای سبک های کد متفاوتی هستند، اما پشتیبانی بسیار مشابهی از ویژگی ها و گزینه های Firebase ارائه می دهند. همانطور که در این راهنما به تفصیل توضیح خواهیم داد، هر دو نسخه SDK از انواع JavaScript و Node.js به همراه چندین گزینه برای افزودن/نصب SDK ها پشتیبانی می کنند.

افزودن SDK با 8.0 (فاصله نام) 9.0 (مژولار)
npm
  • برای جاوا اسکریپت
  • برای Node.js
  • برای جاوا اسکریپت
  • برای Node.js
CDN (شبکه تحویل محتوا)
  • برای جاوا اسکریپت
  • برای جاوا اسکریپت
میزبانی URL ها
  • برای جاوا اسکریپت
  • برای Node.js

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

نسخه 9 برای برنامه های جدید

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

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

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

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

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

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

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

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

  • npm (برای باندلرهای ماژول و Node.js)
  • 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

در حال حاضر، Firebase دو نوع Web SDK را ارائه می دهد:

  • یک بسته جاوا اسکریپت که از تمام ویژگی های Firebase برای استفاده در مرورگر پشتیبانی می کند.
  • یک بسته Node.js سمت کلاینت که از بسیاری از ویژگی‌های Firebase، اما نه همه آن‌ها، پشتیبانی می‌کند. لیست محیط های پشتیبانی شده را ببینید.

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

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

  • اگر پس از ایجاد برنامه وب Firebase، Google Analytics یا پایگاه داده بیدرنگ را فعال کنید، مطمئن شوید که شیء پیکربندی 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 نسخه 9 با <script type="module"> استفاده می کنید، این رفتار پیش فرض است. اگر از نسخه 8 اسکریپت 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 version 9

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 version 8

// 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 version 9

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 version 8

// 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 را برای برنامه خود راه اندازی کرده اید، ممکن است قبلاً چندین مرحله زیر را انجام داده باشید.

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