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

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

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

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

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

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

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

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

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

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

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

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

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 (मॉड्यूल बंडलर के लिए)
  • सीडीएन (कॉन्टेंट डिलीवरी नेटवर्क)

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

एनपीएम

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

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

सारांश में:

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

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

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

सारांश में:

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

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 का शुरुआती पेज.

  • अगर आपने रिपोर्ट बनाने के बाद Google Analytics या रीयलटाइम डेटाबेस चालू किया है, तो Firebase वेब ऐप्लिकेशन का इस्तेमाल करके, पक्का करें कि जिस 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 होस्टिंग सेट अप किया हुआ है, तो हो सकता है कि ने नीचे दिए गए कई चरणों को पूरा किया.

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