वेब के लिए Firebase को समझना

Firebase का इस्तेमाल करके वेब ऐप्लिकेशन डेवलप करते समय, आपको अनजान कॉन्सेप्ट या ऐसे पहलुओं का सामना करना पड़ सकता है जहां आपको अपने प्रोजेक्ट के लिए सही फ़ैसले लेने के लिए ज़्यादा जानकारी की ज़रूरत होती है. इस पेज का मकसद इन सवालों के जवाब देना है या ज़्यादा जानकारी के लिए आपको संसाधनों पर ले जाना है.

अगर आपके पास किसी ऐसे विषय के बारे में सवाल हैं जिसके बारे में इस पेज पर नहीं बताया गया है, तो हमारे ऑनलाइन समुदायों में से किसी एक पर जाएं. हम समय-समय पर इस पेज को नए विषयों के साथ अपडेट भी करेंगे, इसलिए वापस आकर देखें कि क्या हमने वह विषय जोड़ा है जिसके बारे में आप जानना चाहते हैं.

SDK टूल के वर्शन: नेमस्पेस और मॉड्यूलर

Firebase, वेब ऐप्लिकेशन के लिए दो एपीआई प्लैटफ़ॉर्म उपलब्ध कराता है:

  • JavaScript - नेमस्पेस किया गया. यह एक JavaScript इंटरफ़ेस है, जिसका इस्तेमाल कई सालों से किया जा रहा है. इसे ऐसे वेब डेवलपर भी जानते हैं जिनके पास पुराने Firebase ऐप्लिकेशन हैं. नेमस्पेस किए गए एपीआई को मौजूदा नई सुविधा का फ़ायदा नहीं मिलता, इसलिए ज़्यादातर नए ऐप्लिकेशन को मॉड्यूलर एपीआई का इस्तेमाल करना चाहिए.
  • JavaScript - मॉड्यूलर. यह SDK टूल, मॉड्यूलर तरीके पर आधारित है. इसमें वेबपैक या रोलअप जैसे आधुनिक JavaScript बिल्ड टूल का इस्तेमाल करने पर, SDK टूल का साइज़ कम होता है और क्षमता भी ज़्यादा होती है.

मॉड्यूलर एपीआई, बिल्ड टूल के साथ बेहतर तरीके से इंटिग्रेट हो जाता है. इससे, उस कोड को हटा दिया जाता है जिसका इस्तेमाल आपके ऐप्लिकेशन में नहीं किया जा रहा है. इस प्रोसेस को "ट्री-शेकिंग" कहते हैं. इस SDK टूल का इस्तेमाल करके बनाए गए ऐप्लिकेशन को, बहुत कम साइज़ वाले फ़ुटप्रिंट का फ़ायदा मिलता है. नेमस्पेस वाला एपीआई, मॉड्यूल के तौर पर उपलब्ध है, लेकिन इसमें पूरी तरह से मॉड्यूलर स्ट्रक्चर नहीं होता. साथ ही, इसमें साइज़ को कम करने की प्रोसेस एक जैसी नहीं होती.

ज़्यादातर मॉड्यूलर एपीआई का पैटर्न, नेमस्पेस किए गए एपीआई के पैटर्न जैसा ही होता है. हालांकि, कोड का संगठन अलग-अलग होता है. आम तौर पर, नेमस्पेस वाले एपीआई को नेमस्पेस और सर्विस पैटर्न की ओर फ़ोकस किया जाता है, जबकि मॉड्यूलर एपीआई का फ़ोकस अलग-अलग फ़ंक्शन की ओर होता है. उदाहरण के लिए, नेमस्पेस किए गए एपीआई की डॉट चेन की वैल्यू, जैसे कि firebaseApp.auth() को मॉड्यूलर एपीआई में, एक getAuth() फ़ंक्शन से बदला जाता है. यह फ़ंक्शन firebaseApp का इस्तेमाल करता है और पुष्टि करने वाला एक इंस्टेंस दिखाता है.

इसका मतलब है कि नेमस्पेस किए गए एपीआई का इस्तेमाल करके बनाए गए वेब ऐप्लिकेशन को मॉड्यूलर ऐप्लिकेशन डिज़ाइन का फ़ायदा पाने के लिए, रीफ़ैक्टरिंग की ज़रूरत होती है. ज़्यादा जानकारी के लिए, अपग्रेड करने से जुड़ी गाइड देखें.

JavaScript - नए ऐप्लिकेशन के लिए मॉड्यूलर एपीआई

अगर Firebase के साथ नया इंटिग्रेशन शुरू किया जा रहा है, तो SDK टूल को जोड़ते और शुरू करते समय, मॉड्यूलर एपीआई में ऑप्ट इन किया जा सकता है.

अपना ऐप्लिकेशन डेवलप करते समय, ध्यान रखें कि आपका कोड मुख्य रूप से फ़ंक्शन के हिसाब से व्यवस्थित किया जाएगा. मॉड्यूलर एपीआई में, सेवाओं को पहले तर्क के तौर पर पास किया जाता है. इसके बाद, फ़ंक्शन बाकी काम के लिए, सेवा की जानकारी का इस्तेमाल करता है. उदाहरण के लिए:

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

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

ज़्यादा उदाहरणों और जानकारी के लिए, हर प्रॉडक्ट एरिया (पीए) से जुड़ी गाइड देखें. साथ ही, मॉड्यूलर एपीआई के बारे में जानकारी देने वाले दस्तावेज़ देखें.

अपने ऐप्लिकेशन में वेब SDK टूल जोड़ने के तरीके

Firebase ज़्यादातर Firebase प्रॉडक्ट के लिए JavaScript लाइब्रेरी उपलब्ध कराता है. इनमें रिमोट कॉन्फ़िगरेशन, FCM वगैरह शामिल हैं. वेब ऐप्लिकेशन में Firebase SDK टूल जोड़ने का तरीका इस बात पर निर्भर करता है कि ऐप्लिकेशन के साथ किस टूल का इस्तेमाल किया जा रहा है (जैसे कि मॉड्यूल बंडलर).

अपने ऐप्लिकेशन में कोई भी उपलब्ध लाइब्रेरी जोड़ी जा सकती है. इसके लिए, यहां दिए गए तरीकों में से किसी एक का इस्तेमाल किया जा सकता है:

  • npm (मॉड्यूल बंडलर के लिए)
  • सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क)

सेटअप करने के बारे में ज़्यादा जानकारी के लिए, Firebase को अपने JavaScript ऐप्लिकेशन में जोड़ना लेख पढ़ें. इस सेक्शन के बाकी हिस्से में, आपको अपनी ज़रूरत के हिसाब से जानकारी उपलब्ध कराने के लिए उपलब्ध विकल्पों में से चुनने का विकल्प मिलेगा.

एनपीएम

Firebase एनपीएम पैकेज (जिसमें ब्राउज़र और Node.js बंडल दोनों शामिल हैं) डाउनलोड करने पर, आपको Firebase SDK टूल की लोकल कॉपी मिल जाती है. इस कॉपी की ज़रूरत Node.js ऐप्लिकेशन, React Native या Electron जैसे ब्राउज़र न करने वाले ऐप्लिकेशन को हो सकती है. डाउनलोड में कुछ पैकेज के विकल्प के तौर पर Node.js और React Native के बंडल शामिल हैं. SSR फ़्रेमवर्क के सर्वर-साइड रेंडरिंग (SSR) चरण के लिए Node.js बंडल ज़रूरी हैं.

webpack या Rollup जैसे मॉड्यूल बंडलर के साथ एनपीएम का इस्तेमाल करने से, इस्तेमाल न होने वाले कोड "ट्री-शेक" के लिए ऑप्टिमाइज़ेशन के विकल्प मिलते हैं. साथ ही, टारगेट किए गए पॉलीफ़िल लागू किए जा सकते हैं. इनसे ऐप्लिकेशन के साइज़ फ़ुटप्रिंट को काफ़ी कम किया जा सकता है. इन सुविधाओं को लागू करने से, आपके कॉन्फ़िगरेशन और बिल्ड चेन में कुछ समस्याएं आ सकती हैं. हालांकि, अलग-अलग मैनस्ट्रीम सीएलआई टूल से इन्हें कम करने में मदद मिल सकती है. इन टूल में Angular, React, Vue, Next, और अन्य टूल शामिल हैं.

संक्षेप में:

  • इससे ऐप्लिकेशन के साइज़ का ज़रूरी ऑप्टिमाइज़ेशन होता है
  • मॉड्यूल मैनेज करने के लिए बेहतर टूल उपलब्ध है
  • Node.js वाले SSR के लिए ज़रूरी है

सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क)

Firebase के सीडीएन पर सेव की गई लाइब्रेरी को जोड़ना, SDK टूल को सेटअप करने का एक आसान तरीका है. कई डेवलपर इस तरीके के बारे में जानते होंगे. SDK टूल जोड़ने के लिए सीडीएन का इस्तेमाल करने पर, आपको किसी बिल्ड टूल की ज़रूरत नहीं होगी. साथ ही, आपकी बिल्ड चेन, मॉड्यूल बंडलर की तुलना में आसान और आसान हो सकती है. अगर आपको अपने ऐप्लिकेशन के इंस्टॉल किए गए साइज़ को लेकर कोई चिंता नहीं है और आपकी TypeScript से ट्रांसपाइलिंग जैसी कोई खास शर्त नहीं है, तो सीडीएन एक अच्छा विकल्प हो सकता है.

संक्षेप में:

  • जाना-पहचाना और आसान
  • यह तब सही होगा, जब ऐप्लिकेशन के साइज़ से जुड़ी ज़्यादा जानकारी को लेकर समस्या न हो
  • यह तब सही है, जब आपकी वेबसाइट बिल्ड टूल का इस्तेमाल न करती हो.

Firebase वेब SDK टूल के वैरिएंट

Firebase के वेब SDK टूल का इस्तेमाल, ब्राउज़र और नोड ऐप्लिकेशन, दोनों में किया जा सकता है. हालांकि, नोड एनवायरमेंट में कई प्रॉडक्ट उपलब्ध नहीं हैं. साथ काम करने वाले एनवायरमेंट की सूची देखें.

कुछ प्रॉडक्ट SDK टूल, ब्राउज़र और नोड के अलग-अलग वैरिएंट उपलब्ध कराते हैं. इनमें से हर वैरिएंट, ESM और CJS दोनों फ़ॉर्मैट में उपलब्ध होता है. कुछ प्रॉडक्ट SDK टूल, कॉर्डोवा या रिऐक्ट नेटिव वैरिएंट भी उपलब्ध कराते हैं. वेब SDK टूल को आपके टूल कॉन्फ़िगरेशन या एनवायरमेंट के आधार पर, सही वैरिएंट देने के लिए कॉन्फ़िगर किया गया है. ज़्यादातर मामलों में, इस टूल को मैन्युअल तरीके से चुनने की ज़रूरत नहीं होती. SDK टूल के सभी वैरिएंट इस तरह से डिज़ाइन किए गए हैं कि असली उपयोगकर्ता को ऐक्सेस देने के लिए वेब ऐप्लिकेशन या क्लाइंट ऐप्लिकेशन बनाए जा सकें, जैसे कि Node.js डेस्कटॉप या IoT ऐप्लिकेशन. अगर आपका लक्ष्य खास अधिकारों वाले एनवायरमेंट (जैसे कि सर्वर) से एडमिन ऐक्सेस सेट अप करना है, तो Firebase एडमिन SDK का इस्तेमाल करें.

बंडलर और फ़्रेमवर्क की मदद से एनवायरमेंट की पहचान करना

जब एनपीएम का इस्तेमाल करके Firebase वेब SDK टूल इंस्टॉल किया जाता है, तब JavaScript और Node.js वर्शन, दोनों इंस्टॉल हो जाते हैं. इस पैकेज से आपके ऐप्लिकेशन के लिए सही बंडल चालू करने के लिए, एनवायरमेंट का पूरी जानकारी का पता लगाने की सुविधा मिलती है.

अगर आपके कोड में Node.js require स्टेटमेंट का इस्तेमाल किया गया है, तो SDK टूल को नोड के लिए खास बंडल मिल जाता है. अगर ऐसा नहीं है, तो आपकी package.json फ़ाइल (उदाहरण के लिए, main, browser या module) में सही एंट्री पॉइंट फ़ील्ड का पता लगाने के लिए, आपके बंडलर की सेटिंग सही होनी चाहिए. अगर SDK टूल में रनटाइम से जुड़ी गड़बड़ियां दिखती हैं, तो पक्का करें कि बंडलर को आपके एनवायरमेंट के लिए सही तरह के बंडल को प्राथमिकता देने के लिए कॉन्फ़िगर किया गया हो.

Firebase कॉन्फ़िगरेशन ऑब्जेक्ट के बारे में जानें

अपने ऐप्लिकेशन में Firebase शुरू करने के लिए, आपको अपने ऐप्लिकेशन का Firebase प्रोजेक्ट कॉन्फ़िगरेशन उपलब्ध कराना होगा. आपके पास किसी भी समय Firebase कॉन्फ़िगरेशन ऑब्जेक्ट पाने का विकल्प है.

  • हम अपने कॉन्फ़िगरेशन ऑब्जेक्ट में मैन्युअल तरीके से बदलाव करने का सुझाव नहीं देते. खास तौर पर, इन ज़रूरी "Firebase विकल्पों" में ये बदलाव करें: apiKey, projectId, और appID. अगर ऐप्लिकेशन को शुरू करते समय, इन ज़रूरी "Firebase विकल्पों" के लिए अमान्य या मौजूद वैल्यू नहीं दी गई हैं, तो आपके ऐप्लिकेशन के उपयोगकर्ताओं को गंभीर समस्याएं आ सकती हैं. authDomain, अपवाद के तौर पर लागू होता है. इसे SignInWithredirect का इस्तेमाल करने के सबसे सही तरीके के हिसाब से अपडेट किया जा सकता है.

  • अगर आपने अपने Firebase प्रोजेक्ट में Google Analytics को चालू किया है, तो आपके कॉन्फ़िगरेशन ऑब्जेक्ट में 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",
};

उपलब्ध लाइब्रेरी

सेटअप करने के अन्य विकल्प

Firebase SDK टूल (सीडीएन से) को लोड होने में देरी

पूरा पेज लोड होने तक, Firebase SDK टूल शामिल करने की प्रोसेस रोकी जा सकती है. अगर <script type="module"> के साथ मॉड्यूलर एपीआई सीडीएन स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो यह डिफ़ॉल्ट तरीका है. अगर नेमस्पेस के तौर पर नेमस्पेस वाली सीडीएन स्क्रिप्ट का इस्तेमाल किया जा रहा है, तो लोड होने से रोकने के लिए यह तरीका अपनाएं:

  1. Firebase SDK टूल के हर script टैग में 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 को उस ऐप्लिकेशन से दो मिलते-जुलते तरीकों से ऐक्सेस कर सकते हैं:

वेब मॉड्यूलर एपीआई

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

वेब नेमस्पेस किया गया एपीआई

// 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 कॉन्फ़िगरेशन जानकारी का इस्तेमाल होता है.

वेब मॉड्यूलर एपीआई

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

वेब नेमस्पेस किया गया एपीआई

// 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 सीएलआई का इस्तेमाल किया जा सकता है.

अगर आपने अपने ऐप्लिकेशन के लिए पहले से ही Firebase होस्टिंग को सेट अप कर लिया है, तो हो सकता है कि आपने नीचे दिए गए कई चरणों को पहले ही पूरा कर लिया हो.

अपने वेब ऐप्लिकेशन को दिखाने के लिए, आपको Firebase सीएलआई, एक कमांड-लाइन टूल का इस्तेमाल करने की ज़रूरत है.

  1. सीएलआई को इंस्टॉल करने या इसके नए वर्शन पर अपडेट करने का तरीका जानने के लिए, Firebase सीएलआई दस्तावेज़ देखें.

  2. अपना Firebase प्रोजेक्ट शुरू करें. अपनी लोकल ऐप्लिकेशन डायरेक्ट्री के रूट से यह कमांड चलाएं:

    firebase init

  3. डेवलपमेंट के लिए लोकल सर्वर शुरू करें. अपनी लोकल ऐप्लिकेशन डायरेक्ट्री के रूट से, इस कमांड को चलाएं:

    firebase serve

Firebase JavaScript SDK टूल के लिए ओपन सोर्स संसाधन

Firebase, ओपन सोर्स डेवलपमेंट में मदद करता है. साथ ही, हम समुदाय में योगदान देने और सुझाव देने को बढ़ावा देते हैं.

Firebase JavaScript SDK टूल

ज़्यादातर Firebase JavaScript SDK टूल को, हमारे सार्वजनिक Firebase GitHub रिपॉज़िटरी में ओपन सोर्स लाइब्रेरी के तौर पर डेवलप किया गया है.

क्विकस्टार्ट सैंपल

Firebase, वेब पर ज़्यादातर Firebase एपीआई के लिए क्विकस्टार्ट सैंपल का संग्रह बनाता है. इन क्विकस्टार्ट को हमारी सार्वजनिक Firebase GitHub की क्विकस्टार्ट रिपॉज़िटरी में खोजें. Firebase SDK टूल इस्तेमाल करने के लिए, इन क्विकस्टार्ट कोड को उदाहरण के तौर पर इस्तेमाल किया जा सकता है.