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

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

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

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

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

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

दूसरा चरण: एसडीके इंस्टॉल करें और 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 की उपलब्ध सेवाओं में से किसी को भी जोड़ा और इस्तेमाल किया जा सकता है.