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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

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

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

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

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

चरण 2 : एसडीके स्थापित करें और फायरबेस को इनिशियलाइज़ करें

यह पृष्ठ Firebase JS SDK के संस्करण 9 के लिए सेटअप निर्देशों का वर्णन करता है, जो एक जावास्क्रिप्ट मॉड्यूल प्रारूप का उपयोग करता है।

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

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

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

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

Firebase सेवाएं (जैसे Cloud Firestore, Authentication, Realtime Database, Remote Config, और बहुत कुछ) व्यक्तिगत उप-पैकेजों के भीतर आयात करने के लिए उपलब्ध हैं।

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

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 : आकार घटाने के लिए एक मॉड्यूल बंडलर (वेबपैक/रोलअप) का उपयोग करें

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

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

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

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

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

अगले कदम

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