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

  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 'firebase/<service>';

// TODO: Replace the following with your app'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 की उपलब्ध सेवाओं में से किसी को भी जोड़ा और इस्तेमाल किया जा सकता है.

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

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

अगले चरण

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