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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

अगले चरण

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