अपने JavaScript प्रोजेक्ट में Firebase जोड़ना

अपने वेब ऐप्लिकेशन में Firebase JavaScript SDK का इस्तेमाल करने या असली उपयोगकर्ता के ऐक्सेस के लिए क्लाइंट के तौर पर इस्तेमाल करने के लिए, इस गाइड का पालन करें. उदाहरण के लिए, Node.js डेस्कटॉप या IoT ऐप्लिकेशन में.

पहला चरण: Firebase प्रोजेक्ट बनाना और अपने ऐप्लिकेशन को रजिस्टर करना

Firebase को अपने JavaScript ऐप्लिकेशन में जोड़ने से पहले, आपको एक Firebase प्रोजेक्ट बनाना होगा और अपने ऐप्लिकेशन को उस प्रोजेक्ट के साथ रजिस्टर करना होगा. अपने ऐप्लिकेशन को Firebase के साथ रजिस्टर करने पर, आपको एक Firebase कॉन्फ़िगरेशन ऑब्जेक्ट मिलेगा. इसका इस्तेमाल करके, अपने ऐप्लिकेशन को Firebase प्रोजेक्ट के संसाधनों से कनेक्ट किया जा सकेगा.

Firebase प्रोजेक्ट और प्रोजेक्ट में ऐप्लिकेशन जोड़ने के सबसे सही तरीकों के बारे में ज़्यादा जानने के लिए, Firebase प्रोजेक्ट के बारे में जानकारी पर जाएं.

अगर आपके पास पहले से कोई JavaScript प्रोजेक्ट नहीं है और आपको सिर्फ़ Firebase प्रॉडक्ट आज़माना है, तो हमारे क्विकस्टार्ट सैंपल में से कोई एक डाउनलोड किया जा सकता है.

दूसरा चरण: SDK टूल इंस्टॉल करें और Firebase शुरू करें

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

यह वर्कफ़्लो एनपीएम का इस्तेमाल करता है और इसके लिए मॉड्यूल बंडलर या JavaScript फ़्रेमवर्क टूल की ज़रूरत होती है. इसकी वजह यह है कि मॉड्यूलर एपीआई को मॉड्यूल बंडलर के साथ काम करने के लिए ऑप्टिमाइज़ किया गया है. इससे, इस्तेमाल न होने वाले कोड (पेड़ के झटकों) को हटाने और SDK टूल का साइज़ कम करने में मदद मिलती है.

  1. एनपीएम का इस्तेमाल करके Firebase इंस्टॉल करें:

    npm install firebase

  2. अपने ऐप्लिकेशन में Firebase शुरू करें और Firebase ऐप्लिकेशन ऑब्जेक्ट बनाएं:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

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

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

तीसरा चरण: अपने ऐप्लिकेशन में Firebase को ऐक्सेस करना

Firebase की सेवाएं (जैसे, Cloud Firestore, पुष्टि, रीयलटाइम डेटाबेस, रिमोट कॉन्फ़िगरेशन वगैरह), अलग-अलग सब-पैकेज में इंपोर्ट की जा सकती हैं.

नीचे दिया गया उदाहरण दिखाता है कि डेटा की सूची पाने के लिए, Cloud Firestore Lite SDK का इस्तेमाल कैसे किया जा सकता है.

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// Get a list of cities from your database
async function getCities(db) {
  const citiesCol = collection(db, 'cities');
  const citySnapshot = await getDocs(citiesCol);
  const cityList = citySnapshot.docs.map(doc => doc.data());
  return cityList;
}

चौथा चरण: साइज़ कम करने के लिए, मॉड्यूल बंडलर (वेबपैक/रोलअप) का इस्तेमाल करना

Firebase वेब SDK टूल को इस तरह से डिज़ाइन किया गया है कि यह मॉड्यूल बंडलर के साथ काम करके, इस्तेमाल न किए गए किसी भी कोड (पेड़-कांपने) को हटा सके. हमारा सुझाव है कि प्रोडक्शन ऐप्लिकेशन के लिए, यह तरीका अपनाएं. Angular CLI, Next.js, Vue CLI या Create React ऐप्लिकेशन जैसे टूल, एनपीएम से इंस्टॉल की गई लाइब्रेरी के लिए, मॉड्यूल बंडलिंग को अपने-आप मैनेज करते हैं. साथ ही, आपके कोड बेस में इंपोर्ट किए जाते हैं.

ज़्यादा जानकारी के लिए, हमारी गाइड Firebase के साथ मॉड्यूल बंडलर का इस्तेमाल करना पढ़ें.

वेब के लिए उपलब्ध Firebase सेवाएं

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

यहां दिए गए निर्देश, npm के साथ स्थानीय तौर पर इंस्टॉल की गई Firebase लाइब्रेरी को इंपोर्ट करने का तरीका दिखाते हैं. इंपोर्ट करने के अन्य विकल्पों के लिए, उपलब्ध लाइब्रेरी से जुड़े दस्तावेज़ देखें.

अगले चरण

Firebase के बारे में जानें: