अपने 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 App जैसे टूल npm के ज़रिए इंस्टॉल की गई लाइब्रेरी के लिए मॉड्यूल बंडलिंग अपने-आप हैंडल करते हैं और आपके कोडबेस में इंपोर्ट किए जाते हैं.

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

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

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

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

अगले चरण

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