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 project 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 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;
}

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

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

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

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

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

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

अगले चरण

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