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

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

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

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

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

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

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

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

यह वर्कफ़्लो एनपीएम का इस्तेमाल करता है. इसके लिए, मॉड्यूल बंडलर या JavaScript फ़्रेमवर्क की ज़रूरत होती है टूल का इस्तेमाल किया जा सकता है, क्योंकि मॉड्यूलर एपीआई को मॉड्यूल बंडलर का इस्तेमाल किया जा सकता है.

  1. एनपीएम का इस्तेमाल करके 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;
}

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

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

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

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

अब जब आपने Firebase का इस्तेमाल करने के लिए सेटअप कर लिया है, तो आप को अपडेट करने के बारे में ज़्यादा जानें.

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

अगले चरण

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