अपने वेब ऐप में फायरबेस जावास्क्रिप्ट एसडीके का उपयोग करने के लिए या एंड-यूज़र एक्सेस के लिए क्लाइंट के रूप में, उदाहरण के लिए, Node.js डेस्कटॉप या IoT एप्लिकेशन में इस गाइड का पालन करें।
आवश्यक शर्तें
अपना पसंदीदा संपादक या आईडीई स्थापित करें।
अपने Google खाते का उपयोग करके Firebase में साइन इन करें ।
यदि आपके पास पहले से कोई JavaScript प्रोजेक्ट नहीं है और आप केवल Firebase उत्पाद आज़माना चाहते हैं, तो आप हमारे क्विकस्टार्ट नमूनों में से एक डाउनलोड कर सकते हैं ।
चरण 1 : एक फायरबेस प्रोजेक्ट बनाएं
इससे पहले कि आप अपने जावास्क्रिप्ट ऐप में फायरबेस को जोड़ सकें, आपको अपने ऐप से कनेक्ट करने के लिए फायरबेस प्रोजेक्ट बनाना होगा।
फायरबेस प्रोजेक्ट्स के बारे में अधिक जानें और प्रोजेक्ट्स में एप्स जोड़ने के लिए फायरबेस प्रोजेक्ट्स और बेस्ट प्रैक्टिस के बारे में अधिक जानें।
चरण 2 : अपने ऐप को फायरबेस के साथ पंजीकृत करें
आपके पास फायरबेस प्रोजेक्ट होने के बाद, आप इसमें अपना वेब ऐप जोड़ सकते हैं।
Firebase प्रोजेक्ट में एप्लिकेशन जोड़ने के लिए सर्वोत्तम प्रथाओं और विचारों के बारे में अधिक जानने के लिए Firebase प्रोजेक्ट्स पर जाएं।
फायरबेस कंसोल के प्रोजेक्ट अवलोकन पृष्ठ के केंद्र में, सेटअप वर्कफ़्लो को लॉन्च करने के लिए वेब आइकन ( ) पर क्लिक करें।
यदि आपने पहले ही अपने फायरबेस प्रोजेक्ट में एक ऐप जोड़ लिया है, तो प्लेटफ़ॉर्म विकल्पों को प्रदर्शित करने के लिए ऐप जोड़ें पर क्लिक करें।
अपने ऐप का उपनाम दर्ज करें।
यह उपनाम एक आंतरिक, सुविधा पहचानकर्ता है और आपको केवल Firebase कंसोल में दिखाई देता है।(वैकल्पिक) अपने वेब ऐप के लिए फायरबेस होस्टिंग सेट करें।
आप अभी या बाद में Firebase Hosting सेट कर सकते हैं। आप अपने प्रोजेक्ट सेटिंग्स में किसी भी समय अपने फायरबेस वेब ऐप को होस्टिंग साइट से लिंक कर सकते हैं ।
यदि आप अभी होस्टिंग स्थापित करना चुनते हैं, तो अपने फायरबेस वेब ऐप से लिंक करने के लिए ड्रॉपडाउन सूची से एक साइट चुनें।
यह सूची आपके प्रोजेक्ट की डिफ़ॉल्ट होस्टिंग साइट और उन अन्य साइटों को प्रदर्शित करती है, जिन्हें आपने अपनी परियोजना में स्थापित किया है।
कोई भी साइट जो आप पहले से ही Firebase Web App से लिंक कर चुके हैं, अतिरिक्त लिंकिंग के लिए उपलब्ध नहीं है। प्रत्येक होस्टिंग साइट को केवल सिंगल फायरबेस वेब ऐप से जोड़ा जा सकता है।
रजिस्टर एप पर क्लिक करें।
चरण 3 : Firebase SDKs जोड़ें और Firebase को इनिशियलाइज़ करें
फायरबैस अधिकांश फायरबस उत्पादों के लिए जावास्क्रिप्ट लाइब्रेरी प्रदान करता है, जिसमें रिमोट कॉन्फ़िगरेशन, एफसीएम, और बहुत कुछ शामिल हैं। आप अपने ऐप में किसी भी उपलब्ध लाइब्रेरी को जोड़ सकते हैं।
आप अपने वेब ऐप में फायरबेस एसडीके कैसे जोड़ते हैं, यह इस बात पर निर्भर करता है कि आपने अपने ऐप के लिए फायरबेस होस्टिंग का उपयोग करने के लिए चुना है, आप अपने ऐप के साथ किस टूलिंग का उपयोग कर रहे हैं (जैसे मॉड्यूल बंडलर), या यदि आप Node.js को कॉन्फ़िगर कर रहे हैं ऐप। इन विकल्पों के बीच चयन करने में अधिक सहायता के लिए, वेब एसडीके को अपने ऐप में जोड़ने के तरीके देखें।
मॉड्यूल बंडलों का उपयोग करना
आप फायरबेस जावास्क्रिप्ट एसडीके के आंशिक आयात को कॉन्फ़िगर कर सकते हैं और केवल उन फायरबेस उत्पादों को लोड कर सकते हैं जिनकी आपको आवश्यकता है। यदि आप एक बंडलर (जैसे ब्राउज़र ब्राउज़र या वेबपैक) का उपयोग कर रहे हैं, तो आप जरूरत पड़ने पर अलग-अलग फायरबेस उत्पादों का import कर सकते हैं।
फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:
यदि आपके पास पहले से एक
package.jsonनहीं हैpackage.jsonफाइल फ़ाइल, अपने जावास्क्रिप्ट प्रोजेक्ट के रूट से निम्न कमांड चलाकर एक बनाएं:npm init
firebaseएनपीएम पैकेज को स्थापित करें और इसे अपनेpackage.jsonसहेजेंpackage.jsonरनिंग फ़ाइल:npm install --save firebase
केवल विशिष्ट Firebase उत्पादों (जैसे प्रमाणीकरण और क्लाउड फायरस्टोर) को शामिल करने के लिए, Firebase मॉड्यूल
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";अपने ऐप में फायरबेस को आरम्भ करें:
// 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 उत्पादों (उदाहरण के लिए, प्रमाणीकरण और क्लाउड फायरस्टोर) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने
<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.2.9/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.2.9/firebase-analytics.js"></script> <!-- Add Firebase products that you want to use --> <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-auth.js"></script> <script src="https://www.gstatic.com/firebasejs/8.2.9/firebase-firestore.js"></script> </body>अपने ऐप में फायरबेस को आरम्भ करें:
<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>
होस्टिंग URL से
जब आप Firebase Hosting का उपयोग करते हैं, तो आप आरक्षित URL से गतिशील रूप से Firebase JavaScript SDK पुस्तकालयों को लोड करने के लिए अपने ऐप को कॉन्फ़िगर कर सकते हैं। आरक्षित होस्टिंग URL के माध्यम से एसडीके को जोड़ने के बारे में अधिक जानें।
इस सेटअप विकल्प के साथ, आप फायरबेस में तैनात होने के बाद, आपका ऐप फायरबेस प्रोजेक्ट से फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को स्वचालित रूप से खींचता है, जिस पर आपने तैनाती की है। आप कई फायरबेस परियोजनाओं के लिए एक ही कोडबेस को तैनात कर सकते हैं, लेकिन आपको फायरबेस कॉन्फ़िगरेशन को ट्रैक करने की आवश्यकता नहीं है जिसका उपयोग आप firebase.initializeApp() लिए कर रहे हैं।
यह सेटअप विकल्प स्थानीय रूप से आपके वेब ऐप के परीक्षण के लिए भी काम करता है।
केवल विशिष्ट Firebase उत्पादों (उदाहरण के लिए, Analytics, प्रमाणीकरण या क्लाउड फायरस्टोर) को शामिल करने के लिए, निम्न स्क्रिप्ट को अपने
0715b7878b0<body>टैग के नीचे जोड़ें, लेकिन इससे पहले कि आप किसी भी Firebase सेवाओं का उपयोग करें:अपने ऐप में फायरबेस को आरम्भ करें (आरक्षित होस्टिंग URL का उपयोग करते समय अपनी फायरबेस कॉन्फ़िगरेशन ऑब्जेक्ट को शामिल करने की आवश्यकता नहीं):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> </body>
Node.js ऐप्स
फायरबेस जावास्क्रिप्ट एसडीके स्थापित करें:
यदि आपके पास पहले से एक
package.jsonनहीं हैpackage.jsonफाइल फ़ाइल, अपने जावास्क्रिप्ट प्रोजेक्ट के रूट से निम्न कमांड चलाकर एक बनाएं:npm init
firebasenpm पैकेज स्थापित करें और इसे अपनेpackage.jsonसहेजेंpackage.jsonफ़ाइल को चलाकर:npm install --save 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";
अपने ऐप में फायरबेस को आरम्भ करें:
// 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 config ऑब्जेक्ट के बारे में जानें
अपने ऐप में Firebase को इनिशियलाइज़ करने के लिए, आपको अपने ऐप के Firebase प्रोजेक्ट कॉन्फ़िगरेशन को प्रदान करना होगा। आप किसी भी समय अपने फायरबेस विन्यास वस्तु प्राप्त कर सकते हैं।
यदि आप आरक्षित होस्टिंग URL का उपयोग करते हैं , तो आपका Firebase config स्वचालित रूप से आपके Firebase प्रोजेक्ट से खींच लिया जाता है, इसलिए आपको अपने कोड में स्पष्ट रूप से अपनी config ऑब्जेक्ट प्रदान करने की आवश्यकता नहीं है।
हम विशेष रूप से निम्नलिखित "
apiKeyविकल्प":apiKey,projectId, औरappIDऑब्जेक्ट को मैन्युअल रूप से संपादित करने की अनुशंसा नहीं करते हैं। यदि आप अपने एप्लिकेशन को इन आवश्यक "फायरबेस विकल्प" के लिए अमान्य या लापता मानों के साथ आरंभ करते हैं, तो आपके ऐप के उपयोगकर्ता गंभीर मुद्दों का अनुभव कर सकते हैं।यदि आपने Google Analytics को अपने Firebase प्रोजेक्ट में सक्षम किया है, तो आपकी कॉन्फिग ऑब्जेक्ट में फ़ील्ड
measurementId। प्रारंभ पृष्ठ में Analytics के इस क्षेत्र के बारे में अधिक जानें।
यहां सक्षम सभी सेवाओं के साथ एक कॉन्फ़िगर ऑब्जेक्ट का प्रारूप है (ये मान स्वचालित रूप से आबादी वाले हैं):
// 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 Web App को Firebase Hosting साइट के साथ लिंक किया है, तो आप अपनी साइट की सामग्री और कॉन्फ़िगरेशन अब (जब आपका वेब ऐप सेट कर रहे हों) या कभी भी पोस्ट कर सकते हैं।
फायरबेस को तैनात करने के लिए, आप फायरबेस सीएलआई, एक कमांड-लाइन टूल का उपयोग करेंगे।
सीएलआई स्थापित करने या इसके नवीनतम संस्करण को अपडेट करने के तरीके जानने के लिए फायरबेस सीएलआई प्रलेखन पर जाएं।
अपने फायरबेस प्रोजेक्ट को आरम्भ करें। अपने स्थानीय एप्लिकेशन निर्देशिका की जड़ से निम्नलिखित कमांड चलाएँ:
firebase init
Firebase के साथ अपने स्थानीय ऐप निर्देशिका को लिंक करें
एक उत्पन्न करता है
firebase.jsonफ़ाइल (Firebase होस्टिंग के लिए एक आवश्यक फाइल)आपको एक सार्वजनिक रूट निर्देशिका निर्दिष्ट करने का संकेत देता है जिसमें आपकी सार्वजनिक स्थिर फाइलें (HTML, CSS, JS, आदि) हैं।
जिस निर्देशिका के लिए Firebase दिखता है उसका डिफ़ॉल्ट नाम "सार्वजनिक" है। आप सार्वजनिक निर्देशिका को बाद में सीधे अपने
firebase.jsonफ़ाइल को संशोधित करके भी सेट कर सकते हैं।
अपनी सामग्री और होस्टिंग कॉन्फ़िगरेशन को फायरबेस होस्टिंग पर नियोजित करें।
डिफ़ॉल्ट होस्टिंग साइट
डिफ़ॉल्ट रूप से, हर फायरबेस प्रोजेक्ट में
web.appऔरfirebaseapp.comडोमेन (project-id .web.appऔरproject-id .firebaseapp.com) पर मुफ्त उप डोमेन हैं।अपनी साइट पर तैनात करें। अपने ऐप के रूट डायरेक्टरी से निम्न कमांड चलाएँ:
firebase deploy
अपनी साइट को अपनी डिफ़ॉल्ट साइटों में से किसी एक पर देखें:
-
project-id .web.app -
project-id .firebaseapp.com
-
गैर-डिफ़ॉल्ट होस्टिंग साइट
फायरबेस परियोजनाएं कई साइटों का समर्थन करती हैं (इन्हें आपकी गैर-डिफ़ॉल्ट साइट माना जाता है )। आप कंसोल के वेब ऐप सेटअप वर्कफ़्लो के दौरान या कंसोल के होस्टिंग पृष्ठ से अपनी परियोजना में अतिरिक्त साइटें जोड़ सकते हैं।
अपनी साइट को अपनी
firebase.jsonफ़ाइल में जोड़ें (जोfirebase initके दौरान बनाई गई थी)।ध्यान दें कि यह
firebase.jsonकॉन्फ़िगरेशन मानता है कि आपकी प्रत्येक साइट के लिए अलग-अलग रिपॉजिटरी हैं।{ "hosting": { "site": "site-name>", "public": "public", // ... } }अपनी साइट पर तैनात करें। अपने ऐप के रूट डायरेक्टरी से निम्न कमांड चलाएँ:
firebase deploy --only hosting:site-name
हैया तो अपनी साइट देखें:
-
site-name .web.app -
site-name .firebaseapp.com
-
चरण 5 : अपने ऐप में फायरबेस को एक्सेस करें
फायरबेस जावास्क्रिप्ट एसडीके निम्नलिखित फायरबेस उत्पादों का समर्थन करता है। प्रत्येक उत्पाद वैकल्पिक है और इसे firebase नेमस्पेस से एक्सेस किया जा सकता है।
फायरबेस जावास्क्रिप्ट संदर्भ प्रलेखन में उपलब्ध तरीकों के बारे में जानें।
| फायरबेस उत्पाद | नाम स्थान | वेब | Node.js |
|---|---|---|---|
| एनालिटिक्स | firebase.analytics() | ||
| प्रमाणीकरण | firebase.auth() | ||
| क्लाउड फायरस्टार | firebase.firestore() | ||
| फायरबेस क्लाइंट एसडीके के लिए क्लाउड फ़ंक्शंस | firebase.functions() | ||
| क्लाउड मैसेजिंग | firebase.messaging() | ||
| घन संग्रहण | firebase.storage() | ||
| प्रदर्शन की निगरानी ( बीटा रिलीज़) | firebase.performance() | ||
| रियलटाइम डेटाबेस | firebase.database() | ||
| रिमोट कॉन्फ़िगरेशन ( बीटा रिलीज़) | firebase.remoteConfig() |
उपलब्ध पुस्तकालय
अगले कदम
Firebase के बारे में जानें:
नमूना Firebase एप्लिकेशन का अन्वेषण करें।
फायरबेस वेब कोडेलैब के साथ हाथों पर अनुभव प्राप्त करें।
GitHub में खुले स्रोत कोड का अन्वेषण करें।
फायरबेस जावास्क्रिप्ट एसडीके के लिए समर्थित वातावरण की समीक्षा करें।
वेब के लिए AngularFire , RxFire , और FirebaseUI जैसे अतिरिक्त Firebase- अनुरक्षित ओपन सोर्स लाइब्रेरी के साथ अपने विकास को गति दें।
अपना ऐप लॉन्च करने की तैयारी करें:
- Google क्लाउड कंसोल में अपनी परियोजना के लिए बजट अलर्ट सेट करें।
- फायरबेस कंसोल में अपने उपयोग और बिलिंग डैशबोर्ड की निगरानी करें।
- फायरबेस लॉन्च चेकलिस्ट की समीक्षा करें।
अपने ऐप में फायरबेस सेवाएं जोड़ें:
Firebase Hosting के साथ अपने ऐप को होस्ट करें।
के साथ एक उपयोगकर्ता प्रमाणीकरण प्रवाह सेट करें प्रमाणीकरण ।
क्लाउड फायरस्टार या रियलटाइम डेटाबेस के साथ, उपयोगकर्ता की जानकारी की तरह स्टोर डेटा।
क्लाउड स्टोरेज के साथ फोटो और वीडियो की तरह फाइल स्टोर करें।
प्रदर्शन निगरानी के साथ अपने ऐप के प्रदर्शन मुद्दों में अंतर्दृष्टि प्राप्त करें।
ट्रिगर बैकेंड कोड जो क्लाउड फ़ंक्शंस के साथ सुरक्षित वातावरण में चलता है।
क्लाउड मैसेजिंग के साथ सूचनाएं भेजें।