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

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

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

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

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

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

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

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

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

  1. npm का इस्तेमाल करके Firebase इंस्टॉल करें:

    npm install firebase

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

    import { initializeApp } from 'firebase/app';

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

const app = initializeApp(firebaseConfig);

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

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

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

Firebase की सेवाएं (जैसे, Cloud Firestore, Authentication, Realtime Database, Remote Config वगैरह) अलग-अलग सब-पैकेज में इंपोर्ट करने के लिए उपलब्ध हैं.

यहां दिए गए उदाहरण में, डेटा की सूची पाने के लिए 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 &>#39;firebase/service';

// TODO: Replace the following with your app&#39;s Firebase 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;
}

चौथा चरण: साइज़ कम करने के लिए, webpack/Rollup जैसे मॉड्यूल बंडलर का इस्तेमाल करें

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

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

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

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

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

1 Firebase AI Logic को पहले "Vertex AI in Firebase" कहा जाता था. इसका पैकेज firebase/vertexai था.

2 Firebase SQL Connect को पहले "Firebase Data Connect" कहा जाता था.

अगले चरण

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