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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

npm

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

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

सारांश में:

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

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

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

सारांश में:

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

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

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

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

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

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

अगर आपके कोड में Node.js require स्टेटमेंट का इस्तेमाल किया गया है, तो SDK टूल, Node के हिसाब से बंडल ढूंढता है. अगर ऐसा नहीं है, तो आपकी 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 या 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",
};

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

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

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 को दो तरीकों से ऐक्सेस किया जा सकता है:

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 प्रोजेक्ट में सेव करना हो. इसके अलावा, हो सकता है कि आपको एक प्रोजेक्ट की पुष्टि करनी हो और दूसरे प्रोजेक्ट की पुष्टि न करनी हो.

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);
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

डेवलपमेंट के लिए लोकल वेब सर्वर चलाना

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

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

अपने वेब ऐप्लिकेशन को दिखाने के लिए, आपको 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 टूल का इस्तेमाल करने के लिए, इन क्विकस्टार्ट को उदाहरण के तौर पर दिए गए कोड के तौर पर इस्तेमाल किया जा सकता है.