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

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

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

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

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

  • JavaScript - नेमस्पेस. यह एक JavaScript इंटरफ़ेस है, जिसका Firebase कई सालों तक रखरखाव करता रहा है. साथ ही, पुराने Firebase ऐप्लिकेशन वाले वेब डेवलपर के लिए इसे जाना-पहचाना है. नेमस्पेस किए गए एपीआई को नई सुविधा के साथ काम करने से कोई फ़ायदा नहीं मिलता है. इसलिए, ज़्यादातर नए ऐप्लिकेशन को इसके बजाय मॉड्यूलर एपीआई का इस्तेमाल करना चाहिए.
  • JavaScript - मॉड्यूलर. यह SDK टूल, मॉड्यूलर तरीके पर आधारित है. इसमें, webpack या Rollup जैसे मॉडर्न 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 npm पैकेज (जिसमें ब्राउज़र और Node.js बंडल दोनों शामिल होते हैं) डाउनलोड करने से आपको Firebase SDK की एक लोकल कॉपी मिलती है, जिसकी ज़रूरत बिना ब्राउज़र वाले ऐप्लिकेशन, जैसे कि Node.js ऐप्लिकेशन, React Native या Electron के लिए हो सकती है. डाउनलोड में, कुछ पैकेज के लिए विकल्प के तौर पर Node.js और React Native शामिल हैं. Node.js बंडल, एसएसआर फ़्रेमवर्क के सर्वर-साइड रेंडरिंग (एसएसआर) चरण के लिए ज़रूरी होते हैं.

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

संक्षेप में:

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

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

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

संक्षेप में:

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

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

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

कुछ प्रॉडक्ट के SDK टूल, ब्राउज़र और नोड के अलग-अलग वैरिएंट उपलब्ध कराते हैं. इनमें से हर वैरिएंट को ESM और CJS फ़ॉर्मैट में उपलब्ध कराया जाता है. कुछ प्रॉडक्ट के SDK टूल, Cordava या React Native के वैरिएंट भी उपलब्ध कराते हैं. वेब 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 API के लिए क्विकस्टार्ट सैंपल का कलेक्शन बनाए रखता है. इन क्विकस्टार्ट को हमारे सार्वजनिक Firebase GitHub क्विकस्टार्ट डेटा स्टोर करने की जगह में देखें. Firebase SDK टूल इस्तेमाल करने के लिए, इन क्विकस्टार्ट कोड को उदाहरण कोड के तौर पर इस्तेमाल किया जा सकता है.