वेब और फायरबेस के बारे में और जानें

जैसे ही आप फायरबेस का उपयोग करके एक वेब ऐप विकसित कर रहे हैं, आपको अपरिचित अवधारणाओं, या ऐसे क्षेत्रों का सामना करना पड़ सकता है जहां आपको अपने प्रोजेक्ट के लिए सही निर्णय लेने के लिए अधिक जानकारी की आवश्यकता है। इस पृष्ठ का उद्देश्य उन प्रश्नों का उत्तर देना या आपको अधिक जानने के लिए संसाधनों की ओर संकेत करना है।

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

एसडीके संस्करण: नेमस्पेस्ड और मॉड्यूलर

फायरबेस वेब ऐप्स के लिए दो एपीआई सतहें प्रदान करता है:

  • जावास्क्रिप्ट - नामस्थान। यह जावास्क्रिप्ट इंटरफ़ेस है जिसे फायरबेस ने कई वर्षों तक बनाए रखा है और वेब डेवलपर्स पुराने फायरबेस ऐप्स से परिचित हैं। चूँकि नेमस्पेस्ड एपीआई को चल रहे नए फीचर समर्थन से लाभ नहीं होता है, इसलिए अधिकांश नए ऐप्स को इसके बजाय मॉड्यूलर एपीआई को अपनाना चाहिए।
  • जावास्क्रिप्ट - मॉड्यूलर । यह एसडीके एक मॉड्यूलर दृष्टिकोण पर आधारित है जो वेबपैक या रोलअप जैसे आधुनिक जावास्क्रिप्ट बिल्ड टूल के साथ कम एसडीके आकार और अधिक दक्षता प्रदान करता है।

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

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

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

जावास्क्रिप्ट - नए ऐप्स के लिए मॉड्यूलर एपीआई

यदि आप फायरबेस के साथ एक नया एकीकरण शुरू कर रहे हैं, तो आप एसडीके जोड़ते और आरंभ करते समय मॉड्यूलर एपीआई का विकल्प चुन सकते हैं।

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

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

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

अधिक उदाहरणों और विवरणों के लिए, प्रत्येक उत्पाद क्षेत्र के लिए गाइड के साथ-साथ मॉड्यूलर एपीआई संदर्भ दस्तावेज़ देखें।

अपने ऐप में वेब एसडीके जोड़ने के तरीके

फायरबेस अधिकांश फायरबेस उत्पादों के लिए जावास्क्रिप्ट लाइब्रेरी प्रदान करता है, जिसमें रिमोट कॉन्फिग, एफसीएम और बहुत कुछ शामिल हैं। आप अपने वेब ऐप में फायरबेस एसडीके कैसे जोड़ते हैं यह इस बात पर निर्भर करता है कि आप अपने ऐप के साथ किस टूलिंग का उपयोग कर रहे हैं (जैसे मॉड्यूल बंडलर)।

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

  • एनपीएम (मॉड्यूल बंडलर्स के लिए)
  • सीडीएन (सामग्री वितरण नेटवर्क)

विस्तृत सेटअप निर्देशों के लिए, अपने जावास्क्रिप्ट ऐप में फायरबेस जोड़ें देखें। इस अनुभाग के शेष भाग में उपलब्ध विकल्पों में से चुनने में आपकी सहायता के लिए जानकारी शामिल है।

NPM

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

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

सारांश:

  • मूल्यवान ऐप आकार अनुकूलन प्रदान करता है
  • मॉड्यूल को प्रबंधित करने के लिए मजबूत टूलिंग उपलब्ध है
  • Node.js के साथ SSR के लिए आवश्यक

सीडीएन (सामग्री वितरण नेटवर्क)

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

सारांश:

  • परिचित और सरल
  • उपयुक्त जब ऐप का आकार कोई बड़ी चिंता का विषय न हो
  • उपयुक्त जब आपकी वेबसाइट बिल्ड टूल्स का उपयोग नहीं करती है।

फायरबेस वेब एसडीके वेरिएंट

फायरबेस के वेब एसडीके का उपयोग ब्राउज़र और नोड एप्लिकेशन दोनों में किया जा सकता है। हालाँकि, कई उत्पाद नोड वातावरण में उपलब्ध नहीं हैं। समर्थित परिवेशों की सूची देखें.

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

बंडलर्स और फ्रेमवर्क के साथ पर्यावरण का पता लगाना

जब आप एनपीएम का उपयोग करके फायरबेस वेब एसडीके स्थापित करते हैं, तो जावास्क्रिप्ट और नोड.जेएस दोनों संस्करण स्थापित होते हैं। पैकेज आपके एप्लिकेशन के लिए सही बंडलों को सक्षम करने के लिए विस्तृत पर्यावरण पहचान प्रदान करता है।

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

फायरबेस कॉन्फिग ऑब्जेक्ट के बारे में जानें

अपने ऐप में फ़ायरबेस प्रारंभ करने के लिए, आपको अपने ऐप का फ़ायरबेस प्रोजेक्ट कॉन्फ़िगरेशन प्रदान करना होगा। आप किसी भी समय अपना फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट प्राप्त कर सकते हैं।

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

  • यदि आपने अपने फायरबेस प्रोजेक्ट में Google Analytics सक्षम किया है, तो आपके कॉन्फ़िगरेशन ऑब्जेक्ट में फ़ील्ड measurementId शामिल है। एनालिटिक्स प्रारंभ पृष्ठ में इस क्षेत्र के बारे में और जानें।

  • यदि आप अपना फ़ायरबेस वेब ऐप बनाने के बाद Google Analytics या रीयलटाइम डेटाबेस सक्षम करते हैं, तो सुनिश्चित करें कि आपके ऐप में उपयोग किया जाने वाला फ़ायरबेस कॉन्फ़िग ऑब्जेक्ट संबंधित कॉन्फ़िग मान (क्रमशः measurementId और databaseURL ) के साथ अपडेट किया गया है। आप किसी भी समय अपना फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट प्राप्त कर सकते हैं।

यहां सक्षम सभी सेवाओं के साथ कॉन्फिग ऑब्जेक्ट का प्रारूप दिया गया है (ये मान स्वचालित रूप से पॉप्युलेट हो जाते हैं):

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",
};

उपलब्ध पुस्तकालय

अतिरिक्त सेटअप विकल्प

फायरबेस एसडीके की विलंबित लोडिंग (सीडीएन से)

आप फ़ायरबेस एसडीके को शामिल करने में तब तक देरी कर सकते हैं जब तक कि पूरा पृष्ठ लोड न हो जाए। यदि आप <script type="module"> के साथ मॉड्यूलर एपीआई सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं, तो यह डिफ़ॉल्ट व्यवहार है। यदि आप मॉड्यूल के रूप में नेमस्पेस्ड सीडीएन स्क्रिप्ट का उपयोग कर रहे हैं, तो लोडिंग को स्थगित करने के लिए इन चरणों को पूरा करें:

  1. फ़ायरबेस एसडीके के लिए प्रत्येक script टैग में एक defer फ़्लैग जोड़ें, फिर दूसरी स्क्रिप्ट का उपयोग करके फ़ायरबेस के आरंभीकरण को स्थगित करें, उदाहरण के लिए:

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

एक ही ऐप में एकाधिक फायरबेस प्रोजेक्ट का उपयोग करें

ज्यादातर मामलों में, आपको केवल एक ही डिफ़ॉल्ट ऐप में फायरबेस को इनिशियलाइज़ करना होगा। आप उस ऐप से दो समान तरीकों से फायरबेस तक पहुंच सकते हैं:

Web modular API

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 namespaced API

// 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

हालाँकि, कभी-कभी, आपको एक ही समय में कई फायरबेस प्रोजेक्ट्स तक पहुँचने की आवश्यकता होती है। उदाहरण के लिए, हो सकता है कि आप एक फ़ायरबेस प्रोजेक्ट के डेटाबेस से डेटा पढ़ना चाहें लेकिन फ़ाइलों को किसी भिन्न फ़ायरबेस प्रोजेक्ट में संग्रहीत करना चाहें। या हो सकता है कि आप दूसरे प्रोजेक्ट को अप्रमाणित रखते हुए एक प्रोजेक्ट को प्रमाणित करना चाहें।

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

Web modular API

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 namespaced API

// 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

विकास के लिए एक स्थानीय वेब सर्वर चलाएँ

यदि आप एक वेब ऐप बना रहे हैं, तो फायरबेस जावास्क्रिप्ट एसडीके के कुछ हिस्सों के लिए आवश्यक है कि आप अपने वेब ऐप को स्थानीय फाइल सिस्टम के बजाय सर्वर से परोसें। आप स्थानीय सर्वर चलाने के लिए फायरबेस सीएलआई का उपयोग कर सकते हैं।

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

अपने वेब ऐप की सेवा के लिए, आप फायरबेस सीएलआई, एक कमांड-लाइन टूल का उपयोग करेंगे।

  1. सीएलआई को स्थापित करने या उसके नवीनतम संस्करण में अपडेट करने का तरीका जानने के लिए फायरबेस सीएलआई दस्तावेज़ पर जाएँ।

  2. अपना फायरबेस प्रोजेक्ट प्रारंभ करें। अपनी स्थानीय ऐप निर्देशिका के रूट से निम्नलिखित कमांड चलाएँ:

    firebase init

  3. विकास के लिए स्थानीय सर्वर प्रारंभ करें . अपनी स्थानीय ऐप निर्देशिका के रूट से निम्नलिखित कमांड चलाएँ:

    firebase serve

फायरबेस जावास्क्रिप्ट एसडीके के लिए ओपन सोर्स संसाधन

फायरबेस ओपन सोर्स विकास का समर्थन करता है, और हम सामुदायिक योगदान और प्रतिक्रिया को प्रोत्साहित करते हैं।

फायरबेस जावास्क्रिप्ट एसडीके

अधिकांश फायरबेस जावास्क्रिप्ट एसडीके हमारे सार्वजनिक फायरबेस गिटहब रिपॉजिटरी में ओपन सोर्स लाइब्रेरी के रूप में विकसित किए गए हैं।

त्वरित प्रारंभ नमूने

फायरबेस वेब पर अधिकांश फायरबेस एपीआई के लिए क्विकस्टार्ट नमूनों का संग्रह रखता है। इन क्विकस्टार्ट को हमारे सार्वजनिक फायरबेस GitHub क्विकस्टार्ट रिपॉजिटरी में खोजें। आप फायरबेस एसडीके का उपयोग करने के लिए उदाहरण कोड के रूप में इन क्विकस्टार्ट का उपयोग कर सकते हैं।