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

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

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

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

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

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

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

इस पेज पर, Firebase JavaScript 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 JavaScript 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 के बारे में जानें: