Join us for Firebase Summit on November 10, 2021. Tune in to learn how Firebase can help you accelerate app development, release with confidence, and scale with ease. Register

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

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

चरण 1: एक Firebase परियोजना बनाएँ और अपने एप्लिकेशन रजिस्टर

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

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

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

चरण 2: एसडीके स्थापित करें और प्रारंभ में Firebase

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

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

  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 अपने अनुप्रयोग में

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: उपयोग एक मॉड्यूल बंडलर (webpack / रोलअप) आकार में कमी के लिए

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

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

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

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

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

अगला कदम

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