Join us in person and online for Firebase Summit on October 18, 2022. Learn how Firebase can help you accelerate app development, release your app with confidence, and scale with ease. Register now

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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

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

चरण 1 : एक फायरबेस प्रोजेक्ट बनाएं और अपना ऐप पंजीकृत करें

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

Firebase प्रोजेक्ट और प्रोजेक्ट में ऐप्लिकेशन जोड़ने की सर्वोत्तम प्रक्रियाओं के बारे में अधिक जानने के लिए Firebase प्रोजेक्ट्स को समझें पर जाएं.

यदि आपके पास पहले से कोई JavaScript प्रोजेक्ट नहीं है और आप केवल एक Firebase उत्पाद आज़माना चाहते हैं, तो आप हमारे त्वरित प्रारंभ नमूनों में से एक को डाउनलोड कर सकते हैं।

चरण 2 : एसडीके स्थापित करें और फायरबेस शुरू करें

यह पृष्ठ फायरबेस जेएस एसडीके के संस्करण 9 के लिए सेटअप निर्देशों का वर्णन करता है, जो एक जावास्क्रिप्ट मॉड्यूल प्रारूप का उपयोग करता है।

यह वर्कफ़्लो npm का उपयोग करता है और इसके लिए मॉड्यूल बंडलर या जावास्क्रिप्ट फ्रेमवर्क टूलिंग की आवश्यकता होती है क्योंकि v9 SDK अप्रयुक्त कोड (ट्री-शेकिंग) को खत्म करने और SDK आकार को कम करने के लिए मॉड्यूल बंडलर के साथ काम करने के लिए अनुकूलित है।

  1. npm का उपयोग करके फायरबेस स्थापित करें:

    npm install firebase

  2. अपने ऐप में फ़ायरबेस प्रारंभ करें और फ़ायरबेस ऐप ऑब्जेक्ट बनाएं:

    import { initializeApp } from 'firebase/app';

// TODO: Replace the following with your app's Firebase project configuration
const firebaseConfig = {
  //...
};

const app = initializeApp(firebaseConfig);

    एक फायरबेस ऐप एक कंटेनर जैसी वस्तु है जो सामान्य कॉन्फ़िगरेशन को स्टोर करती है और फायरबेस सेवाओं में प्रमाणीकरण साझा करती है। अपने कोड में Firebase ऐप ऑब्जेक्ट को इनिशियलाइज़ करने के बाद, आप Firebase सेवाओं को जोड़ सकते हैं और उनका उपयोग शुरू कर सकते हैं।

चरण 3 : अपने ऐप में फायरबेस एक्सेस करें

Firebase सेवाएं (जैसे Cloud Firestore, Authentication, Realtime Database, Remote Config, और बहुत कुछ) अलग-अलग उप-पैकेज में आयात करने के लिए उपलब्ध हैं।

नीचे दिया गया उदाहरण दिखाता है कि आप डेटा की सूची प्राप्त करने के लिए क्लाउड फायरस्टोर लाइट एसडीके का उपयोग कैसे कर सकते हैं।

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

चरण 4 : आकार घटाने के लिए मॉड्यूल बंडलर (वेबपैक/रोलअप) का उपयोग करें

फायरबेस वेब एसडीके को किसी भी अप्रयुक्त कोड (ट्री-शेकिंग) को हटाने के लिए मॉड्यूल बंडलर के साथ काम करने के लिए डिज़ाइन किया गया है। हम प्रोडक्शन ऐप्स के लिए इस दृष्टिकोण का उपयोग करने की दृढ़ता से अनुशंसा करते हैं। Angular CLI , Next.js , Vue CLI , या Create React App जैसे टूल स्वचालित रूप से npm के माध्यम से स्थापित पुस्तकालयों के लिए मॉड्यूल बंडलिंग को संभालते हैं और आपके कोडबेस में आयात किए जाते हैं।

अधिक जानकारी के लिए फायरबेस के साथ मॉड्यूल बंडलर का उपयोग करना हमारा गाइड देखें।

वेब के लिए उपलब्ध फायरबेस सेवाएं

अब जब आप Firebase का उपयोग करने के लिए सेटअप कर चुके हैं, तो आप अपने वेब ऐप में निम्न में से किसी भी उपलब्ध Firebase सेवाओं को जोड़ना और उनका उपयोग करना शुरू कर सकते हैं।

निम्न आदेश दिखाते हैं कि npm के साथ स्थानीय रूप से स्थापित npm पुस्तकालयों को कैसे आयात किया जाए। वैकल्पिक आयात विकल्पों के लिए, उपलब्ध पुस्तकालयों के दस्तावेज़ देखें।

अगले कदम

फायरबेस के बारे में जानें: