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

अपने वेब ऐप में या अंतिम-उपयोगकर्ता पहुंच के लिए क्लाइंट के रूप में फायरबेस जावास्क्रिप्ट एसडीके का उपयोग करने के लिए इस गाइड का पालन करें, उदाहरण के लिए, Node.js डेस्कटॉप या IoT एप्लिकेशन में।

चरण 1 : एक फायरबेस प्रोजेक्ट बनाएं और अपना ऐप पंजीकृत करें

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

फायरबेस प्रोजेक्ट्स और प्रोजेक्ट्स में ऐप्स जोड़ने की सर्वोत्तम प्रथाओं के बारे में अधिक जानने के लिए फायरबेस प्रोजेक्ट्स को समझें पर जाएँ।

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

चरण 2 : एसडीके स्थापित करें और फायरबेस प्रारंभ करें

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

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

  1. एनपीएम का उपयोग करके फायरबेस स्थापित करें:

    npm install firebase

  2. अपने ऐप में फ़ायरबेस प्रारंभ करें और फ़ायरबेस ऐप ऑब्जेक्ट बनाएं:

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

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

चरण 3 : अपने ऐप में फायरबेस तक पहुंचें

फ़ायरबेस सेवाएँ (जैसे क्लाउड फ़ायरस्टोर, प्रमाणीकरण, रीयलटाइम डेटाबेस, रिमोट कॉन्फ़िग, और अधिक) व्यक्तिगत उप-पैकेजों में आयात करने के लिए उपलब्ध हैं।

नीचे दिया गया उदाहरण दिखाता है कि आप डेटा की सूची पुनर्प्राप्त करने के लिए क्लाउड फायरस्टोर लाइट एसडीके का उपयोग कैसे कर सकते हैं।

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

चरण 4 : आकार में कमी के लिए मॉड्यूल बंडलर (वेबपैक/रोलअप) का उपयोग करें

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

अधिक जानकारी के लिए फायरबेस के साथ मॉड्यूल बंडलर्स का उपयोग करने वाली हमारी मार्गदर्शिका देखें।

वेब के लिए उपलब्ध फायरबेस सेवाएँ

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

निम्नलिखित आदेश दिखाते हैं कि npm के साथ स्थानीय रूप से स्थापित फायरबेस लाइब्रेरी को कैसे आयात किया जाए। वैकल्पिक आयात विकल्पों के लिए, उपलब्ध पुस्तकालय दस्तावेज़ देखें।

अगले कदम

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