Google 致力于为黑人社区推动种族平等。查看具体举措

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

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

आवश्यक शर्तें

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

चरण 1 : एक फायरबेस प्रोजेक्ट बनाएं

अपने JavaScript ऐप्लिकेशन में Firebase जोड़ने से पहले, आपको अपने ऐप्लिकेशन से कनेक्ट करने के लिए एक Firebase प्रोजेक्ट बनाना होगा.

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

चरण 2 : अपने ऐप को फायरबेस के साथ पंजीकृत करें

आपके पास एक Firebase प्रोजेक्ट होने के बाद, आप उसमें अपना वेब ऐप जोड़ सकते हैं।

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

  1. फायरबेस कंसोल के प्रोजेक्ट ओवरव्यू पेज के केंद्र में, सेटअप वर्कफ़्लो लॉन्च करने के लिए वेब आइकन ( ) पर क्लिक करें।

    अगर आपने पहले ही अपने Firebase प्रोजेक्ट में एक ऐप जोड़ लिया है, तो प्लेटफ़ॉर्म विकल्प प्रदर्शित करने के लिए ऐप जोड़ें पर क्लिक करें।

  2. अपने ऐप का प्रचलित नाम दर्ज करें।
    यह प्रचलित नाम एक आंतरिक, सुविधा पहचानकर्ता है और केवल Firebase कंसोल में आपको दिखाई देता है।

  3. (वैकल्पिक) अपने वेब ऐप के लिए फायरबेस होस्टिंग सेट करें।

    • आप अभी या बाद में फायरबेस होस्टिंग सेट कर सकते हैं। आप अपनी प्रोजेक्ट सेटिंग में किसी भी समय अपने Firebase वेब ऐप को किसी होस्टिंग साइट से लिंक कर सकते हैं

    • यदि आप अभी होस्टिंग सेट अप करना चुनते हैं, तो अपने फायरबेस वेब ऐप से लिंक करने के लिए ड्रॉपडाउन सूची से एक साइट चुनें।

      • यह सूची आपके प्रोजेक्ट की डिफ़ॉल्ट होस्टिंग साइट और आपके द्वारा अपने प्रोजेक्ट में सेट की गई अन्य साइटों को प्रदर्शित करती है।

      • कोई भी साइट जिसे आप पहले ही किसी Firebase वेब ऐप से लिंक कर चुके हैं, अतिरिक्त लिंकिंग के लिए उपलब्ध नहीं है। प्रत्येक होस्टिंग साइट को केवल एक फायरबेस वेब ऐप से लिंक किया जा सकता है।

  4. रजिस्टर ऐप पर क्लिक करें।

चरण 3 : फायरबेस एसडीके जोड़ें और फायरबेस को इनिशियलाइज़ करें

Firebase अधिकांश Firebase उत्पादों के लिए JavaScript लाइब्रेरी प्रदान करता है, जिसमें Remote Config, FCM, आदि शामिल हैं। आप अपने ऐप में कोई भी उपलब्ध लाइब्रेरी जोड़ सकते हैं।

आप अपने वेब ऐप में फायरबेस एसडीके कैसे जोड़ते हैं, यह इस बात पर निर्भर करता है कि आपने अपने ऐप के लिए फायरबेस होस्टिंग का उपयोग करना चुना है, आप अपने ऐप के साथ किस टूलिंग का उपयोग कर रहे हैं (जैसे मॉड्यूल बंडलर), या यदि आप नोड.जेएस को कॉन्फ़िगर कर रहे हैं ऐप. इन विकल्पों में से चुनने में अधिक सहायता के लिए, अपने ऐप में वेब एसडीके जोड़ने के तरीके देखें।

यदि आप मॉड्यूलर ऐप डेवलपमेंट के लिए अनुकूलित नए बीटा एसडीके को आज़माने में रुचि रखते हैं, तो संस्करण 9 (बीटा) के लिए विकल्प चुनें। ध्यान रखें कि बीटा रिलीज़ में कोई तकनीकी सहायता बाध्यता नहीं है।

एनपीएम . के साथ

आप Firebase JavaScript SDK के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन Firebase उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। यदि आप एक बंडलर (जैसे Browserify या webpack) का उपयोग कर रहे हैं, तो आप आवश्यकता पड़ने पर अलग-अलग Firebase उत्पादों को import कर सकते हैं।

  1. फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:

    1. यदि आपके पास पहले से कोई package.json फ़ाइल नहीं है, तो अपने JavaScript प्रोजेक्ट के मूल से निम्न आदेश चलाकर एक फ़ाइल बनाएँ:

      npm init

    2. firebase npm पैकेज स्थापित करें और इसे चलाकर अपने package.json फ़ाइल में सहेजें:

      npm install --save firebase

  2. केवल विशिष्ट फायरबेस उत्पादों (जैसे प्रमाणीकरण और क्लाउड फायरस्टोर) को शामिल करने के लिए, फायरबेस मॉड्यूल import :

    // Firebase App (the core Firebase SDK) is always required and must be listed first
    import firebase from "firebase/app";
    // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import
    // import * as firebase from "firebase/app"
    
    // If you enabled Analytics in your project, add the Firebase SDK for Analytics
    import "firebase/analytics";
    
    // Add the Firebase products that you want to use
    import "firebase/auth";
    import "firebase/firestore";
    
  3. अपने ऐप्लिकेशन में Firebase प्रारंभ करें:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    const firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

सीडीएन . से

आप Firebase JavaScript SDK के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन Firebase उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। फायरबेस हमारे ग्लोबल सीडीएन (कंटेंट डिलीवरी नेटवर्क) पर फायरबेस जावास्क्रिप्ट एसडीके की प्रत्येक लाइब्रेरी को स्टोर करता है।

  1. केवल विशिष्ट Firebase उत्पादों (उदाहरण के लिए, प्रमाणीकरण और Cloud Firestore) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के निचले भाग में जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-auth.js"></script>
      <script src="https://www.gstatic.com/firebasejs/8.6.8/firebase-firestore.js"></script>
    </body>
    


  2. अपने ऐप्लिकेशन में Firebase प्रारंभ करें:

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <script>
        // TODO: Replace the following with your app's Firebase project configuration
        // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
        var firebaseConfig = {
          // ...
        };
    
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);
      </script>
    </body>
    

होस्टिंग यूआरएल से

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

इस सेटअप विकल्प के साथ, आपके द्वारा Firebase पर परिनियोजित करने के बाद, आपका ऐप स्वचालित रूप से उस Firebase प्रोजेक्ट से Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को खींच लेता है , जिस पर आपने परिनियोजित किया है। आप एक ही कोडबेस को कई Firebase प्रोजेक्ट में परिनियोजित कर सकते हैं, लेकिन आपको Firebase.initializeApp firebase.initializeApp() लिए उपयोग किए जा रहे Firebase कॉन्फ़िगरेशन को ट्रैक करने की आवश्यकता नहीं है।

यह सेटअप विकल्प स्थानीय रूप से आपके वेब ऐप के परीक्षण के लिए भी काम करता है।

  1. केवल विशिष्ट Firebase उत्पादों (उदाहरण के लिए, Analytics, प्रमाणीकरण, या Cloud Firestore) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने <body> टैग के निचले भाग में जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:

    <body>
      <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
    
      <!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
      <script src="/__/firebase/8.6.8/firebase-app.js"></script>
    
      <!-- If you enabled Analytics in your project, add the Firebase SDK for Analytics -->
      <script src="/__/firebase/8.6.8/firebase-analytics.js"></script>
    
      <!-- Add Firebase products that you want to use -->
      <script src="/__/firebase/8.6.8/firebase-auth.js"></script>
      <script src="/__/firebase/8.6.8/firebase-firestore.js"></script>
    </body>
    


  2. अपने ऐप में फ़ायरबेस प्रारंभ करें (आरक्षित होस्टिंग यूआरएल का उपयोग करते समय अपने फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं है):

    <body>
      <!-- Previously loaded Firebase SDKs -->
    
      <!-- Initialize Firebase -->
      <script src="/__/firebase/init.js"></script>
    </body>
    

Node.js ऐप्स

  1. फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:

    1. यदि आपके पास पहले से कोई package.json फ़ाइल नहीं है, तो अपने JavaScript प्रोजेक्ट के मूल से निम्न कमांड चलाकर एक फ़ाइल बनाएँ:

      npm init
    2. firebase npm पैकेज स्थापित करें और इसे चलाकर अपने package.json फ़ाइल में सहेजें:

      npm install --save firebase
  2. अपने ऐप्लिकेशन में Firebase मॉड्यूल का उपयोग करने के लिए निम्न विकल्पों में से किसी एक का उपयोग करें:

    • आपको किसी भी जावास्क्रिप्ट फ़ाइल से मॉड्यूल की require हो सकती require

      केवल विशिष्ट फायरबेस उत्पादों को शामिल करने के लिए (जैसे प्रमाणीकरण और क्लाउड फायरस्टोर):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      var firebase = require("firebase/app");
      
      // Add the Firebase products that you want to use
      require("firebase/auth");
      require("firebase/firestore");
      


    • मॉड्यूल import करने के लिए आप ES2015 का उपयोग कर सकते हैं

      केवल विशिष्ट फायरबेस उत्पादों को शामिल करने के लिए (जैसे प्रमाणीकरण और क्लाउड फायरस्टोर):

      // Firebase App (the core Firebase SDK) is always required and
      // must be listed before other Firebase SDKs
      import firebase from "firebase/app";
      
      // Add the Firebase services that you want to use
      import "firebase/auth";
      import "firebase/firestore";
      
  3. अपने ऐप्लिकेशन में Firebase प्रारंभ करें:

    // TODO: Replace the following with your app's Firebase project configuration
    // For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
    var firebaseConfig = {
      // ...
    };
    
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    

Firebase कॉन्फ़िग ऑब्जेक्ट के बारे में जानें

अपने ऐप में फायरबेस को इनिशियलाइज़ करने के लिए, आपको अपने ऐप का फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन प्रदान करना होगा। आप किसी भी समय अपना फायरबेस कॉन्फिग ऑब्जेक्ट प्राप्त कर सकते हैं।

  • यदि आप आरक्षित होस्टिंग URL का उपयोग करते हैं , तो आपका Firebase कॉन्फिगरेशन स्वचालित रूप से आपके Firebase प्रोजेक्ट से खींच लिया जाता है, इसलिए आपको अपने कोड में अपना कॉन्फिग ऑब्जेक्ट स्पष्ट रूप से प्रदान करने की आवश्यकता नहीं है।

  • हम आपके कॉन्फिग ऑब्जेक्ट को मैन्युअल रूप से संपादित करने की अनुशंसा नहीं करते हैं, विशेष रूप से निम्नलिखित आवश्यक " apiKey विकल्प": apiKey , projectId , और appID । यदि आप इन आवश्यक "Firebase विकल्पों" के लिए अमान्य या अनुपलब्ध मानों के साथ अपने ऐप को प्रारंभ करते हैं, तो आपके ऐप के उपयोगकर्ताओं को गंभीर समस्याओं का सामना करना पड़ सकता है।

  • यदि आपने अपने फायरबेस प्रोजेक्ट में Google Analytics को सक्षम किया है, तो आपके कॉन्फ़िग ऑब्जेक्ट में फ़ील्ड measurementIdAnalytics प्रारंभ करना पृष्ठ में इस फ़ील्ड के बारे में अधिक जानें।

यहां सभी सेवाओं के साथ एक कॉन्फिग ऑब्जेक्ट का प्रारूप सक्षम किया गया है (ये मान स्वचालित रूप से पॉप्युलेट हो जाते हैं):

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "PROJECT_ID.firebaseapp.com",
  databaseURL: "https://PROJECT_ID.firebaseio.com",
  projectId: "PROJECT_ID",
  storageBucket: "PROJECT_ID.appspot.com",
  messagingSenderId: "SENDER_ID",
  appId: "APP_ID",
  measurementId: "G-MEASUREMENT_ID",
};

उदाहरण मानों के साथ एक कॉन्फ़िगरेशन ऑब्जेक्ट यहां दिया गया है:

// For Firebase JavaScript SDK v7.20.0 and later, `measurementId` is an optional field
var firebaseConfig = {
  apiKey: "AIzaSyDOCAbC123dEf456GhI789jKl01-MnO",
  authDomain: "myapp-project-123.firebaseapp.com",
  databaseURL: "https://myapp-project-123.firebaseio.com",
  projectId: "myapp-project-123",
  storageBucket: "myapp-project-123.appspot.com",
  messagingSenderId: "65211879809",
  appId: "1:65211879909:web:3ae38ef1cdcb2e01fe5f0c",
  measurementId: "G-8GSGZQ44ST"
};

चरण 4 : (वैकल्पिक) सीएलआई स्थापित करें और फायरबेस होस्टिंग पर तैनात करें

यदि आपने अपने फायरबेस वेब ऐप को फायरबेस होस्टिंग साइट से लिंक किया है, तो आप अपनी साइट की सामग्री और कॉन्फ़िगरेशन को अभी (अपना वेब ऐप सेट करते समय) या बाद में कभी भी परिनियोजित कर सकते हैं।

Firebase पर परिनियोजित करने के लिए, आप Firebase CLI, एक कमांड-लाइन टूल का उपयोग करेंगे।

  1. सीएलआई को स्थापित करने या इसके नवीनतम संस्करण में अपडेट करने का तरीका जानने के लिए फायरबेस सीएलआई दस्तावेज पर जाएं।

  2. अपने फायरबेस प्रोजेक्ट को इनिशियलाइज़ करें। अपनी स्थानीय ऐप निर्देशिका की जड़ से निम्न आदेश चलाएँ:

    firebase init

  3. अपनी सामग्री और होस्टिंग कॉन्फ़िगरेशन को Firebase होस्टिंग में परिनियोजित करें।

    डिफ़ॉल्ट होस्टिंग साइट

    डिफ़ॉल्ट रूप से, प्रत्येक Firebase प्रोजेक्ट में web.app और firebaseapp.com डोमेन ( PROJECT_ID .web.app और PROJECT_ID .firebaseapp.com ) पर मुफ़्त उप डोमेन होते हैं।

    1. अपनी साइट पर तैनात करें। अपने ऐप की रूट डायरेक्टरी से निम्न कमांड चलाएँ:

      firebase deploy
    2. अपनी किसी भी डिफ़ॉल्ट साइट पर अपनी साइट देखें:

      • PROJECT_ID .web.app
      • PROJECT_ID .firebaseapp.com

    गैर-डिफ़ॉल्ट होस्टिंग साइट

    Firebase प्रोजेक्ट कई साइटों का समर्थन करते हैं (इन्हें आपकी गैर-डिफ़ॉल्ट साइट माना जाता है )। आप कंसोल के वेब ऐप सेटअप वर्कफ़्लो के दौरान या कंसोल के होस्टिंग पेज से अपने प्रोजेक्ट में अतिरिक्त साइट जोड़ सकते हैं।

    1. अपनी साइट को अपनी firebase.json फ़ाइल में जोड़ें (जिसे firebase init के दौरान बनाया गया था)।

      ध्यान दें कि यह firebase.json कॉन्फ़िगरेशन मानता है कि आपकी प्रत्येक साइट के लिए आपके पास अलग-अलग रिपॉजिटरी हैं।

      {
        "hosting": {
          "site": "SITE_ID",
          "public": "public",
      
          // ...
        }
      }
      
    2. अपनी साइट पर तैनात करें। अपने ऐप की रूट डायरेक्टरी से निम्न कमांड चलाएँ:

      firebase deploy --only hosting:SITE_ID
    3. या तो अपनी साइट देखें:

      • SITE_ID .web.app
      • SITE_ID .firebaseapp.com

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

फायरबेस जावास्क्रिप्ट एसडीके निम्नलिखित फायरबेस उत्पादों का समर्थन करता है। प्रत्येक उत्पाद वैकल्पिक है और दिखाए गए अनुसार एक्सेस किया जा सकता है।

Firebase JavaScript संदर्भ दस्तावेज़ में उपलब्ध विधियों के बारे में जानें।

फायरबेस उत्पाद नाम स्थान (v8 और निचला) वेब Node.js
एनालिटिक्स firebase.analytics()
प्रमाणीकरण firebase.auth()
क्लाउड फायरस्टोर firebase.firestore()
फायरबेस क्लाइंट एसडीके के लिए क्लाउड फ़ंक्शंस firebase.functions()
क्लाउड मैसेजिंग firebase.messaging()
बादल भंडारण firebase.storage()
प्रदर्शन निगरानी ( बीटा रिलीज) firebase.performance()
रीयलटाइम डेटाबेस firebase.database()
रिमोट कॉन्फिग ( बीटा रिलीज) firebase.remoteConfig()

उपलब्ध पुस्तकालय

अगला कदम

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

अपने ऐप्लिकेशन में Firebase सेवाएं जोड़ें: