همانطور که در حال توسعه یک برنامه وب با استفاده از 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 با فضای نام به عنوان یک ماژول استفاده می کنید، این مراحل را برای به تعویق انداختن بارگذاری کامل کنید:
به هر تگ
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>
یک فایل
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، یک ابزار خط فرمان، استفاده خواهید کرد.
برای آشنایی با نحوه نصب CLI یا به روز رسانی به آخرین نسخه آن، از اسناد Firebase CLI دیدن کنید.
پروژه Firebase خود را راه اندازی کنید. دستور زیر را از ریشه دایرکتوری برنامه محلی خود اجرا کنید:
firebase init
دایرکتوری برنامه محلی شما را با Firebase پیوند می دهد
یک فایل
firebase.json
ایجاد می کند (فایل مورد نیاز برای Firebase Hosting )از شما میخواهد یک دایرکتوری ریشه عمومی که حاوی فایلهای استاتیک عمومی شما (HTML، CSS، JS و غیره) است را مشخص کنید.
نام پیشفرض دایرکتوری که Firebase به دنبال آن است "public" است. همچنین می توانید بعداً با تغییر مستقیم فایل
firebase.json
خود، دایرکتوری عمومی را تنظیم کنید .
سرور محلی را برای توسعه راه اندازی کنید . دستور زیر را از ریشه دایرکتوری برنامه محلی خود اجرا کنید:
firebase serve
منابع منبع باز برای Firebase JavaScript SDK
Firebase از توسعه منبع باز پشتیبانی می کند و ما مشارکت و بازخورد جامعه را تشویق می کنیم.
Firebase JavaScript SDKs
اکثر SDK های Firebase JavaScript به عنوان کتابخانه های منبع باز در مخزن عمومی Firebase GitHub ما توسعه داده شده اند.
نمونه های شروع سریع
Firebase مجموعه ای از نمونه های شروع سریع را برای اکثر API های Firebase در وب نگه می دارد. این شروعهای سریع را در مخزن عمومی Firebase GitHub ما بیابید. می توانید از این شروع سریع به عنوان کد نمونه برای استفاده از Firebase SDK استفاده کنید.