फायरबेस वेब कोडलैब

1 अवलोकन

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

आप क्या सीखेंगे

• Firebase के लिए Cloud Firestore और Cloud Storage का इस्तेमाल करके डेटा सिंक करें।
• फायरबेस प्रमाणीकरण का उपयोग करके अपने उपयोगकर्ताओं को प्रमाणित करें।
• फायरबेस होस्टिंग पर अपना वेब ऐप परिनियोजित करें।
• फायरबेस क्लाउड मैसेजिंग के साथ सूचनाएं भेजें।
• अपने वेब ऐप का प्रदर्शन डेटा एकत्र करें।

आपको किस चीज़ की ज़रूरत पड़ेगी

• आपकी पसंद का IDE/पाठ संपादक, जैसे WebStorm , Atom , Sublime , या VS Code
• पैकेज मैनेजर npm , जो आमतौर पर Node.js के साथ आता है
• एक टर्मिनल/कंसोल
• आपकी पसंद का ब्राउज़र, जैसे क्रोम
• कोडलैब का नमूना कोड (कोड कैसे प्राप्त करें इसके लिए कोडलैब का अगला चरण देखें।)

2. नमूना कोड प्राप्त करें

कमांड लाइन से कोडलैब के GitHub रिपॉजिटरी को क्लोन करें:

git clone https://github.com/firebase/codelab-friendlychat-web

वैकल्पिक रूप से, यदि आपके पास गिट स्थापित नहीं है, तो आप रिपॉजिटरी को ज़िप फ़ाइल के रूप में डाउनलोड कर सकते हैं।

स्टार्टर ऐप आयात करें

अपने आईडीई का उपयोग करते हुए, क्लोन रिपॉजिटरी से 📁 web-start डायरेक्टरी को खोलें या आयात करें। इस 📁 web-start डायरेक्टरी में कोडलैब के लिए शुरुआती कोड है, जो पूरी तरह कार्यात्मक चैट वेब ऐप होगा।

3. एक फायरबेस प्रोजेक्ट बनाएं और सेट अप करें

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

1. फायरबेस में साइन इन करें।
2. Firebase कंसोल में, Add Project पर क्लिक करें और फिर अपने Firebase प्रोजेक्ट को FriendlyChat नाम दें। अपने फायरबेस प्रोजेक्ट के लिए प्रोजेक्ट आईडी याद रखें।
3. इस प्रोजेक्ट के लिए Google Analytics सक्षम करें को अनचेक करें
4. प्रोजेक्ट बनाएं पर क्लिक करें।

हम जिस एप्लिकेशन का निर्माण करने जा रहे हैं, वह फायरबेस उत्पादों का उपयोग करता है जो वेब ऐप्स के लिए उपलब्ध हैं:

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

इनमें से कुछ उत्पादों को विशेष कॉन्फ़िगरेशन की आवश्यकता होती है या उन्हें Firebase कंसोल का उपयोग करके सक्षम करने की आवश्यकता होती है।

प्रोजेक्ट में एक फायरबेस वेब ऐप जोड़ें

1. वेब आइकन पर क्लिक करें एक नया फायरबेस वेब ऐप बनाने के लिए।
2. फ्रेंडली चैट उपनाम के साथ ऐप को पंजीकृत करें, फिर इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के बगल में स्थित बॉक्स को चेक करें। रजिस्टर ऐप पर क्लिक करें।
3. अगले चरण पर, आपको एक कॉन्फ़िगरेशन ऑब्जेक्ट दिखाई देगा। Firebase-config.js में सिर्फ JS ऑब्जेक्ट (आस-पास के HTML नहीं) को कॉपी करें

Firebase प्रमाणीकरण के लिए Google साइन-इन सक्षम करें

उपयोगकर्ताओं को अपने Google खातों से वेब ऐप में साइन इन करने की अनुमति देने के लिए, हम Google साइन-इन पद्धति का उपयोग करेंगे।

आपको Google साइन-इन सक्षम करना होगा:

1. फायरबेस कंसोल में, बाएं पैनल में बिल्ड सेक्शन का पता लगाएं।
2. प्रमाणीकरण पर क्लिक करें, फिर साइन-इन विधि टैब पर क्लिक करें (या सीधे वहां जाने के लिए यहां क्लिक करें )।
3. Google साइन-इन प्रदाता को सक्षम करें, फिर सहेजें क्लिक करें.
4. अपने ऐप का सार्वजनिक-सामना करने वाला नाम फ्रेंडली चैट पर सेट करें और ड्रॉपडाउन मेनू से एक प्रोजेक्ट सपोर्ट ईमेल चुनें।
5. Google क्लाउड कंसोल में अपनी OAuth सहमति स्क्रीन कॉन्फ़िगर करें और एक लोगो जोड़ें:

क्लाउड फायरस्टोर सक्षम करें

चैट संदेशों को सहेजने और नए चैट संदेश प्राप्त करने के लिए वेब ऐप क्लाउड फायरस्टोर का उपयोग करता है।

आपको Cloud Firestore को सक्षम करना होगा:

1. Firebase कंसोल के बिल्ड सेक्शन में, Firestore Database पर क्लिक करें।
2. Cloud Firestore पेन में डेटाबेस बनाएं पर क्लिक करें।

3. परीक्षण मोड में प्रारंभ करें विकल्प का चयन करें, फिर सुरक्षा नियमों के बारे में अस्वीकरण पढ़ने के बाद अगला क्लिक करें।

टेस्ट मोड सुनिश्चित करता है कि हम विकास के दौरान डेटाबेस को स्वतंत्र रूप से लिख सकते हैं। हम इस कोडलैब में बाद में अपने डेटाबेस को और अधिक सुरक्षित बनाएंगे।

4. वह स्थान सेट करें जहां आपका क्लाउड फायरस्टोर डेटा संग्रहीत है। आप इसे डिफ़ॉल्ट के रूप में छोड़ सकते हैं या अपने निकट का क्षेत्र चुन सकते हैं। Firestore को प्रोविजन करने के लिए Done पर क्लिक करें।

क्लाउड स्टोरेज सक्षम करें

वेब ऐप चित्रों को स्टोर करने, अपलोड करने और साझा करने के लिए फायरबेस के लिए क्लाउड स्टोरेज का उपयोग करता है।

आपको क्लाउड स्टोरेज को सक्षम करने की आवश्यकता होगी:

1. फायरबेस कंसोल के बिल्ड सेक्शन में, स्टोरेज पर क्लिक करें।
2. यदि कोई गेट स्टार्टेड बटन नहीं है, तो इसका मतलब है कि क्लाउड स्टोरेज पहले से ही सक्षम है, और आपको नीचे दिए गए चरणों का पालन करने की आवश्यकता नहीं है।
3. प्रारंभ करें क्लिक करें.
4. अपने फायरबेस प्रोजेक्ट के लिए सुरक्षा नियमों के बारे में अस्वीकरण पढ़ें, फिर अगला क्लिक करें।

डिफ़ॉल्ट सुरक्षा नियमों के साथ, कोई भी प्रमाणित उपयोगकर्ता क्लाउड स्टोरेज पर कुछ भी लिख सकता है। हम बाद में इस कोडलैब में अपने स्टोरेज को और सुरक्षित बनाएंगे।

4. आपने अपने क्लाउड फायरस्टोर डेटाबेस के लिए जिस क्षेत्र को चुना है उसी क्षेत्र के साथ क्लाउड स्टोरेज स्थान को पहले से चुना गया है। सेटअप पूरा करने के लिए संपन्न पर क्लिक करें।

4. फायरबेस कमांड-लाइन इंटरफेस स्थापित करें

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

1. निम्नलिखित एनपीएम कमांड चलाकर सीएलआई स्थापित करें:

npm -g install firebase-tools

2. सत्यापित करें कि निम्न कमांड चलाकर CLI सही तरीके से स्थापित किया गया है:

firebase --version

सुनिश्चित करें कि Firebase CLI का संस्करण v4.1.0 या बाद का है।

3. निम्नलिखित कमांड चलाकर फायरबेस सीएलआई को अधिकृत करें:

firebase login

हमने आपके ऐप की स्थानीय निर्देशिका (रिपॉजिटरी जिसे आपने कोडलैब में पहले क्लोन किया था) से फायरबेस होस्टिंग के लिए आपके ऐप के कॉन्फ़िगरेशन को खींचने के लिए वेब ऐप टेम्प्लेट सेट किया है। लेकिन कॉन्फ़िगरेशन को खींचने के लिए, हमें आपके ऐप को आपके फायरबेस प्रोजेक्ट से जोड़ना होगा।

4. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय web-start निर्देशिका तक पहुंच रही है।
5. निम्न आदेश चलाकर अपने ऐप को अपने फायरबेस प्रोजेक्ट से संबद्ध करें:

firebase use --add

6. संकेत मिलने पर, अपनी प्रोजेक्ट आईडी चुनें, फिर अपने फायरबेस प्रोजेक्ट को एक उपनाम दें।

यदि आपके पास एकाधिक परिवेश (उत्पादन, मंचन, आदि) हैं, तो उपनाम उपयोगी है। हालाँकि, इस कोडलैब के लिए, आइए केवल default के उपनाम का उपयोग करें।

7. अपनी कमांड लाइन पर शेष निर्देशों का पालन करें।

5. स्टार्टर ऐप को स्थानीय रूप से चलाएं

अब जब आपने अपना प्रोजेक्ट आयात और कॉन्फ़िगर कर लिया है, तो आप पहली बार वेब ऐप चलाने के लिए तैयार हैं।

1. web-start निर्देशिका से कंसोल में, निम्न फायरबेस सीएलआई कमांड चलाएँ:

firebase serve --only hosting

2. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:

✔  hosting: Local server: http://localhost:5000

हम अपने ऐप को स्थानीय रूप से सर्व करने के लिए फायरबेस होस्टिंग एमुलेटर का उपयोग कर रहे हैं। वेब ऐप अब http://localhost:5000 से उपलब्ध होना चाहिए। public उपनिर्देशिका के अंतर्गत स्थित सभी फ़ाइलें सर्व की जाती हैं।

3. अपने ब्राउज़र का उपयोग करके, अपना ऐप http://localhost:5000 पर खोलें।

आपको अपने फ्रेंडलीचैट ऐप के यूआई को देखना चाहिए, जो (अभी तक!) काम नहीं कर रहा है:

ऐप अभी कुछ नहीं कर सकता, लेकिन आपकी मदद से यह जल्द ही होगा! हमने अभी तक आपके लिए केवल UI निर्धारित किया है।

आइए अब रीयलटाइम चैट बनाएं!

6. फायरबेस आयात और कॉन्फ़िगर करें

फायरबेस एसडीके आयात करें

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

हम एनपीएम से फायरबेस एसडीके प्राप्त करने जा रहे हैं और हमारे कोड को बंडल करने के लिए वेबपैक का उपयोग करेंगे। हम ऐसा इसलिए कर रहे हैं ताकि वेबपैक हमारे जेएस बंडल के आकार को छोटा रखते हुए किसी भी अनावश्यक कोड को हटा सके, ताकि यह सुनिश्चित हो सके कि हमारा ऐप जल्द से जल्द लोड हो। इस कोडलैब के लिए, हमने पहले ही एक web-start/package.json फाइल बना ली है जिसमें निर्भरता के रूप में फायरबेस एसडीके शामिल है, साथ ही web-start/src/index.js के शीर्ष पर आवश्यक कार्यों को आयात किया गया है।

पैकेज.जेसन

"dependencies": {
  "firebase": "^9.0.0"
}

index.js

import { initializeApp } from 'firebase/app';
import {
  getAuth,
  onAuthStateChanged,
  GoogleAuthProvider,
  signInWithPopup,
  signOut,
} from 'firebase/auth';
import {
  getFirestore,
  collection,
  addDoc,
  query,
  orderBy,
  limit,
  onSnapshot,
  setDoc,
  updateDoc,
  doc,
  serverTimestamp,
} from 'firebase/firestore';
import {
  getStorage,
  ref,
  uploadBytesResumable,
  getDownloadURL,
} from 'firebase/storage';
import { getMessaging, getToken, onMessage } from 'firebase/messaging';
import { getPerformance } from 'firebase/performance';

इस कोडलैब के दौरान, हम फायरबेस ऑथेंटिकेशन, क्लाउड फायरस्टोर, क्लाउड स्टोरेज, क्लाउड मैसेजिंग और परफॉर्मेंस मॉनिटरिंग का उपयोग करने जा रहे हैं, इसलिए हम उनके सभी पुस्तकालयों का आयात कर रहे हैं। अपने भविष्य के ऐप्स में, सुनिश्चित करें कि आप अपने ऐप के लोड समय को कम करने के लिए केवल फायरबेस के उन हिस्सों को आयात कर रहे हैं जिनकी आपको आवश्यकता है।

फायरबेस एसडीके स्थापित करें और अपना वेबपैक निर्माण शुरू करें

हमारे ऐप के निर्माण को जारी रखने के लिए हमें कुछ आदेश चलाने की जरूरत है।

1. एक नई टर्मिनल विंडो खोलें
2. सुनिश्चित करें कि आप web-start निर्देशिका में हैं
3. फायरबेस एसडीके डाउनलोड करने के लिए npm install करें
4. वेबपैक शुरू करने के लिए npm run start चलाएं। वेबपैक अब बाकी कोडलैब के लिए लगातार हमारे स्रोत कोड का पुनर्निर्माण करेगा।

फायरबेस को कॉन्फ़िगर करें

हमें फायरबेस एसडीके को यह बताने के लिए कॉन्फ़िगर करने की भी आवश्यकता है कि हम किस फायरबेस प्रोजेक्ट का उपयोग कर रहे हैं।

1. Firebase कंसोल में अपनी प्रोजेक्ट सेटिंग पर जाएं
2. "आपके ऐप्स" कार्ड में, उस ऐप का उपनाम चुनें, जिसके लिए आपको कॉन्फिग ऑब्जेक्ट की आवश्यकता है।
3. Firebase SDK स्निपेट फलक से "कॉन्फ़िगरेशन" चुनें।
4. कॉन्फ़िग ऑब्जेक्ट स्निपेट को कॉपी करें, फिर इसे web-start/src/firebase-config.js में जोड़ें।

फायरबेस-config.js

const config = {
  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",
};

अब, web-start/src/index.js के नीचे जाएं और फायरबेस को इनिशियलाइज़ करें:

index.js

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

7. उपयोगकर्ता साइन-इन सेट करें

Firebase SDK को अब उपयोग के लिए तैयार होना चाहिए क्योंकि इसे आयात किया गया है और index.js में आरंभ किया गया है। अब हम फायरबेस ऑथेंटिकेशन का उपयोग करके उपयोगकर्ता साइन-इन लागू करने जा रहे हैं।

अपने उपयोगकर्ताओं को Google साइन-इन से प्रमाणित करें

ऐप में, जब कोई उपयोगकर्ता Google के साथ साइन इन बटन पर क्लिक करता है, तो signIn फ़ंक्शन चालू हो जाता है। (हम आपके लिए इसे पहले ही सेट कर चुके हैं!) इस कोडलैब के लिए, हम Firebase को पहचान प्रदाता के रूप में Google का उपयोग करने के लिए अधिकृत करना चाहते हैं। हम एक पॉपअप का उपयोग करेंगे, लेकिन फायरबेस से कई अन्य तरीके उपलब्ध हैं।

1. web-start निर्देशिका में, उपनिर्देशिका src/ में, index.js खोलें।
2. फ़ंक्शन signIn खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Signs-in Friendly Chat.
async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider);
}

जब उपयोगकर्ता साइन आउट बटन पर क्लिक करता है तो signOut फ़ंक्शन चालू हो जाता है।

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन signOutUser खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Signs-out of Friendly Chat.
function signOutUser() {
  // Sign out of Firebase.
  signOut(getAuth());
}

प्रमाणीकरण स्थिति को ट्रैक करें

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

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन initFirebaseAuth खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Initialize firebase auth
function initFirebaseAuth() {
  // Listen to auth state changes.
  onAuthStateChanged(getAuth(), authStateObserver);
}

उपरोक्त कोड authStateObserver फ़ंक्शन को प्रमाणीकरण स्थिति पर्यवेक्षक के रूप में पंजीकृत करता है। यह हर बार प्रमाणीकरण स्थिति में बदलाव (जब उपयोगकर्ता साइन इन या साइन आउट करता है) को ट्रिगर करेगा। यह इस बिंदु पर है कि हम साइन-इन बटन, साइन-आउट बटन, साइन-इन किए गए उपयोगकर्ता के प्रोफ़ाइल चित्र आदि को प्रदर्शित करने या छिपाने के लिए UI को अपडेट करेंगे। इन सभी यूआई भागों को पहले ही लागू किया जा चुका है।

साइन-इन किए गए उपयोगकर्ता की जानकारी प्रदर्शित करें

हम अपने ऐप के शीर्ष बार में साइन-इन उपयोगकर्ता की प्रोफ़ाइल तस्वीर और उपयोगकर्ता नाम प्रदर्शित करना चाहते हैं। फायरबेस में, साइन-इन किए गए उपयोगकर्ता का डेटा हमेशा currentUser ऑब्जेक्ट में उपलब्ध होता है। इससे पहले, जब उपयोगकर्ता साइन इन करता है तो ट्रिगर करने के लिए हम authStateObserver फ़ंक्शन सेट करते हैं ताकि हमारा UI तदनुसार अपडेट हो जाए। ट्रिगर होने पर यह getProfilePicUrl और getUserName कॉल करेगा।

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन खोजें getProfilePicUrl और getUserName ।
3. दोनों कार्यों को निम्नलिखित कोड से बदलें।

index.js

// Returns the signed-in user's profile Pic URL.
function getProfilePicUrl() {
  return getAuth().currentUser.photoURL || '/images/profile_placeholder.png';
}

// Returns the signed-in user's display name.
function getUserName() {
  return getAuth().currentUser.displayName;
}

यदि उपयोगकर्ता साइन इन नहीं होने पर संदेश भेजने का प्रयास करता है, तो हम एक त्रुटि संदेश प्रदर्शित करते हैं। (हालांकि, आप इसे आज़मा सकते हैं!) इसलिए, हमें यह पता लगाने की आवश्यकता है कि उपयोगकर्ता वास्तव में साइन इन है या नहीं।

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन isUserSignedIn खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Returns true if a user is signed-in.
function isUserSignedIn() {
  return !!getAuth().currentUser;
}

ऐप में साइन इन करने का परीक्षण करें

1. यदि आपका ऐप अभी भी परोसा जा रहा है, तो अपने ऐप को ब्राउज़र में रीफ्रेश करें। अन्यथा, http://localhost:5000 से ऐप की सेवा शुरू करने के लिए कमांड लाइन पर firebase serve --only hosting चलाएं, और फिर इसे अपने ब्राउज़र में खोलें।
2. साइन-इन बटन और अपने Google खाते का उपयोग करके ऐप में साइन इन करें। यदि आपको auth/operation-not-allowed बताते हुए त्रुटि संदेश दिखाई देता है, तो यह सुनिश्चित करने के लिए जांचें कि आपने Google साइन-इन को फायरबेस कंसोल में प्रमाणीकरण प्रदाता के रूप में सक्षम किया है।
3. साइन इन करने के बाद, आपका प्रोफ़ाइल चित्र और उपयोगकर्ता नाम प्रदर्शित होना चाहिए:

8. क्लाउड फायरस्टोर को संदेश लिखें

इस सेक्शन में, हम Cloud Firestore को कुछ डेटा लिखेंगे ताकि हम ऐप के UI को पॉप्युलेट कर सकें। यह फायरबेस कंसोल के साथ मैन्युअल रूप से किया जा सकता है, लेकिन हम इसे ऐप में ही एक बुनियादी क्लाउड फायरस्टोर लेखन प्रदर्शित करने के लिए करेंगे।

डेटा मॉडल

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

क्लाउड फायरस्टोर में संदेश जोड़ें

उपयोगकर्ताओं द्वारा लिखे गए चैट संदेशों को संग्रहीत करने के लिए, हम क्लाउड फायरस्टोर का उपयोग करेंगे।

इस खंड में, आप अपने डेटाबेस में नए संदेश लिखने के लिए उपयोगकर्ताओं के लिए कार्यक्षमता जोड़ेंगे। भेजें बटन पर क्लिक करने वाला उपयोगकर्ता नीचे दिए गए कोड स्निपेट को ट्रिगर करेगा। यह messages संग्रह में आपके क्लाउड फायरस्टोर उदाहरण के लिए संदेश फ़ील्ड की सामग्री के साथ एक संदेश ऑब्जेक्ट जोड़ता है। add() विधि संग्रह में स्वचालित रूप से जेनरेट की गई आईडी के साथ एक नया दस्तावेज़ जोड़ती है।

1. फ़ाइल src/index.js पर वापस जाएं।
2. समारोह saveMessage खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Saves a new message to Cloud Firestore.
async function saveMessage(messageText) {
  // Add a new message entry to the Firebase database.
  try {
    await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      text: messageText,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });
  }
  catch(error) {
    console.error('Error writing new message to Firebase Database', error);
  }
}

संदेश भेजने का परीक्षण करें

1. यदि आपका ऐप अभी भी परोसा जा रहा है, तो अपने ऐप को ब्राउज़र में रीफ्रेश करें। अन्यथा, http://localhost:5000 से ऐप की सेवा शुरू करने के लिए कमांड लाइन पर firebase serve --only hosting चलाएं, और फिर इसे अपने ब्राउज़र में खोलें।
2. साइन इन करने के बाद, "अरे!" जैसा संदेश दर्ज करें, और फिर भेजें क्लिक करें। यह संदेश को Cloud Firestore में लिख देगा। हालांकि, आप अभी भी अपने वास्तविक वेब ऐप में डेटा नहीं देख पाएंगे क्योंकि हमें अभी भी डेटा पुनर्प्राप्त करने की आवश्यकता है (कोडलैब का अगला भाग)।
3. आप अपने फायरबेस कंसोल में नए जोड़े गए संदेश को देख सकते हैं। अपना फायरबेस कंसोल खोलें। बिल्ड सेक्शन के तहत फायरस्टोर डेटाबेस पर क्लिक करें (या यहां क्लिक करें और अपना प्रोजेक्ट चुनें) और आपको अपने नए जोड़े गए संदेश के साथ संदेश संग्रह देखना चाहिए:

9. संदेश पढ़ें

संदेशों को सिंक्रनाइज़ करें

ऐप में संदेशों को पढ़ने के लिए, हमें श्रोताओं को जोड़ना होगा जो डेटा बदलने पर ट्रिगर होते हैं और फिर एक यूआई तत्व बनाते हैं जो नए संदेश दिखाता है।

हम कोड जोड़ेंगे जो ऐप से जोड़े गए नए संदेशों को सुनता है। इस कोड में, हम श्रोता को पंजीकृत करेंगे जो डेटा में किए गए परिवर्तनों को सुनता है। लोड होने पर बहुत लंबा इतिहास प्रदर्शित करने से बचने के लिए हम चैट के केवल अंतिम 12 संदेश प्रदर्शित करेंगे।

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन loadMessages खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Loads chat messages history and listens for upcoming ones.
function loadMessages() {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(getFirestore(), 'messages'), orderBy('timestamp', 'desc'), limit(12));
  
  // Start listening to the query.
  onSnapshot(recentMessagesQuery, function(snapshot) {
    snapshot.docChanges().forEach(function(change) {
      if (change.type === 'removed') {
        deleteMessage(change.doc.id);
      } else {
        var message = change.doc.data();
        displayMessage(change.doc.id, message.timestamp, message.name,
                      message.text, message.profilePicUrl, message.imageUrl);
      }
    });
  });
}

डेटाबेस में संदेशों को सुनने के लिए, हम collection फ़ंक्शन का उपयोग करके एक संग्रह पर एक क्वेरी बनाते हैं, यह निर्दिष्ट करने के लिए कि हम किस संग्रह में डेटा सुनना चाहते हैं। ऊपर दिए गए कोड में, हम messages के भीतर परिवर्तनों को सुन रहे हैं। संग्रह, जहां चैट संदेशों को संग्रहीत किया जाता है। हम .limit(12) का उपयोग करके केवल अंतिम 12 संदेशों को सुनकर और 12 नवीनतम संदेशों को प्राप्त करने के लिए orderBy('timestamp', 'desc') उपयोग करके संदेशों को क्रमबद्ध करके एक सीमा भी लागू कर रहे हैं।

onSnapshot फ़ंक्शन एक क्वेरी को इसके पहले पैरामीटर के रूप में लेता है, और कॉलबैक फ़ंक्शन को इसके दूसरे पैरामीटर के रूप में लेता है। क्वेरी से मेल खाने वाले दस्तावेज़ों में कोई परिवर्तन होने पर कॉलबैक फ़ंक्शन चालू हो जाएगा। यह तब हो सकता है जब कोई संदेश हटा दिया जाता है, संशोधित किया जाता है या जोड़ा जाता है। आप इसके बारे में Cloud Firestore दस्तावेज़ीकरण में अधिक पढ़ सकते हैं।

संदेशों को सिंक्रनाइज़ करने का परीक्षण करें

1. यदि आपका ऐप अभी भी परोसा जा रहा है, तो अपने ऐप को ब्राउज़र में रीफ्रेश करें। अन्यथा, http://localhost:5000 से ऐप की सेवा शुरू करने के लिए कमांड लाइन पर firebase serve --only hosting चलाएं, और फिर इसे अपने ब्राउज़र में खोलें।
2. आपके द्वारा डेटाबेस में पहले बनाए गए संदेशों को फ्रेंडलीचैट यूआई (नीचे देखें) में प्रदर्शित किया जाना चाहिए। बेझिझक नए संदेश लिखें; उन्हें तुरन्त प्रकट होना चाहिए।
3. (वैकल्पिक) आप सीधे Firebase कंसोल के डेटाबेस अनुभाग में नए संदेशों को मैन्युअल रूप से हटाने, संशोधित करने या जोड़ने का प्रयास कर सकते हैं; यूआई में कोई भी बदलाव दिखाई देना चाहिए।

बधाई हो! आप अपने ऐप्लिकेशन में Cloud Firestore दस्तावेज़ पढ़ रहे हैं!

10. चित्र भेजें

अब हम छवियों को साझा करने वाली एक विशेषता जोड़ेंगे।

जबकि क्लाउड फायरस्टार संरचित डेटा को संग्रहीत करने के लिए अच्छा है, क्लाउड स्टोरेज फ़ाइलों को संग्रहीत करने के लिए बेहतर अनुकूल है। फायरबेस के लिए क्लाउड स्टोरेज एक फ़ाइल/ब्लॉब स्टोरेज सेवा है, और हम इसका उपयोग ऐसी किसी भी छवि को स्टोर करने के लिए करेंगे जिसे उपयोगकर्ता हमारे ऐप का उपयोग करके साझा करता है।

छवियों को क्लाउड स्टोरेज में सहेजें

इस कोडलैब के लिए, हम आपके लिए पहले ही एक बटन जोड़ चुके हैं जो फ़ाइल पिकर डायलॉग को ट्रिगर करता है। फ़ाइल का चयन करने के बाद, saveImageMessage फ़ंक्शन को कॉल किया जाता है, और आप चयनित फ़ाइल का संदर्भ प्राप्त कर सकते हैं। saveImageMessage फ़ंक्शन निम्न को पूरा करता है:

1. चैट फ़ीड में एक "प्लेसहोल्डर" चैट संदेश बनाता है, ताकि जब हम छवि अपलोड करें तो उपयोगकर्ताओं को "लोडिंग" एनीमेशन दिखाई दे।
2. छवि फ़ाइल को क्लाउड स्टोरेज में इस पथ पर अपलोड करता है: /<uid>/<messageId>/<file_name>
3. छवि फ़ाइल के लिए एक सार्वजनिक रूप से पठनीय URL बनाता है।
4. अस्थायी रूप से लोड हो रही छवि के स्थान पर नई अपलोड की गई छवि फ़ाइल के URL के साथ चैट संदेश को अपडेट करता है।

अब आप छवि भेजने के लिए कार्यक्षमता जोड़ेंगे:

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन saveImageMessage खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
async function saveImageMessage(file) {
  try {
    // 1 - We add a message with a loading icon that will get updated with the shared image.
    const messageRef = await addDoc(collection(getFirestore(), 'messages'), {
      name: getUserName(),
      imageUrl: LOADING_IMAGE_URL,
      profilePicUrl: getProfilePicUrl(),
      timestamp: serverTimestamp()
    });

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${getAuth().currentUser.uid}/${messageRef.id}/${file.name}`;
    const newImageRef = ref(getStorage(), filePath);
    const fileSnapshot = await uploadBytesResumable(newImageRef, file);
    
    // 3 - Generate a public URL for the file.
    const publicImageUrl = await getDownloadURL(newImageRef);

    // 4 - Update the chat message placeholder with the image's URL.
    await updateDoc(messageRef,{
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    });
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

चित्र भेजने का परीक्षण करें

1. यदि आपका ऐप अभी भी परोसा जा रहा है, तो अपने ऐप को ब्राउज़र में रीफ्रेश करें। अन्यथा, http://localhost:5000 से ऐप की सेवा शुरू करने के लिए कमांड लाइन पर firebase serve --only hosting चलाएं, और फिर इसे अपने ब्राउज़र में खोलें।
2. साइन इन करने के बाद इमेज अपलोड बटन पर क्लिक करें और फ़ाइल पिकर का उपयोग करके छवि फ़ाइल का चयन करें। यदि आप एक छवि की तलाश कर रहे हैं, तो कॉफी कप की इस अच्छी तस्वीर का बेझिझक उपयोग करें।
3. आपकी चयनित छवि के साथ ऐप के UI में एक नया संदेश दिखाई देना चाहिए:

यदि आप साइन इन नहीं होने पर एक छवि जोड़ने का प्रयास करते हैं, तो आपको एक टोस्ट सूचना दिखाई देनी चाहिए जो आपको बताती है कि छवियों को जोड़ने के लिए आपको साइन इन करना होगा।

11. सूचनाएं दिखाएं

अब हम ब्राउज़र सूचनाओं के लिए समर्थन जोड़ेंगे। चैट में नए संदेश पोस्ट किए जाने पर ऐप उपयोगकर्ताओं को सूचित करेगा। फायरबेस क्लाउड मैसेजिंग (FCM) एक क्रॉस-प्लेटफ़ॉर्म मैसेजिंग समाधान है जो आपको बिना किसी लागत के संदेशों और सूचनाओं को मज़बूती से वितरित करने देता है।

FCM सेवा कार्यकर्ता जोड़ें

वेब ऐप को एक सेवा कार्यकर्ता की आवश्यकता होती है जो वेब सूचनाएं प्राप्त और प्रदर्शित करेगा।

1. web-start निर्देशिका से, src निर्देशिका में, firebase-messaging-sw.js खोलें।
2. उस फ़ाइल में निम्न सामग्री जोड़ें।

फायरबेस-मैसेजिंग-sw.js

// Import and configure the Firebase SDK
import { initializeApp } from 'firebase/app';
import { getMessaging } from 'firebase/messaging/sw';
import { getFirebaseConfig } from './firebase-config';

const firebaseApp = initializeApp(getFirebaseConfig());
getMessaging(firebaseApp);
console.info('Firebase messaging service worker is set up');

सेवा कार्यकर्ता को केवल फायरबेस क्लाउड मैसेजिंग एसडीके को लोड और इनिशियलाइज़ करने की आवश्यकता होती है, जो सूचनाओं को प्रदर्शित करने का ध्यान रखेगा।

FCM डिवाइस टोकन प्राप्त करें

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

जब उपयोगकर्ता साइन-इन करता है, तो हम saveMessagingDeviceToken फ़ंक्शन को कॉल करते हैं। यहीं से हमें ब्राउज़र से FCM डिवाइस टोकन मिलेगा और उसे Cloud Firestore में सेव कर लेंगे।

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन saveMessagingDeviceToken खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Saves the messaging device token to Cloud Firestore.
async function saveMessagingDeviceToken() {
  try {
    const currentToken = await getToken(getMessaging());
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to Cloud Firestore.
      const tokenRef = doc(getFirestore(), 'fcmTokens', currentToken);
      await setDoc(tokenRef, { uid: getAuth().currentUser.uid });

      // This will fire when a message is received while the app is in the foreground.
      // When the app is in the background, firebase-messaging-sw.js will receive the message instead.
      onMessage(getMessaging(), (message) => {
        console.log(
          'New foreground notification from Firebase Messaging!',
          message.notification
        );
      });
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  } catch(error) {
    console.error('Unable to get messaging token.', error);
  };
}

हालांकि, यह कोड प्रारंभ में काम नहीं करेगा। आपके ऐप के लिए डिवाइस टोकन को पुनः प्राप्त करने में सक्षम होने के लिए, उपयोगकर्ता को आपके ऐप को सूचनाएं दिखाने की अनुमति देने की आवश्यकता है (कोडलैब का अगला चरण)।

सूचनाएं दिखाने के लिए अनुमतियों का अनुरोध करें

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

1. फ़ाइल src/index.js पर वापस जाएं।
2. फ़ंक्शन requestNotificationsPermissions खोजें।
3. पूरे फ़ंक्शन को निम्न कोड से बदलें।

index.js

// Requests permissions to show notifications.
async function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  const permission = await Notification.requestPermission();
  
  if (permission === 'granted') {
    console.log('Notification permission granted.');
    // Notification permission granted.
    await saveMessagingDeviceToken();
  } else {
    console.log('Unable to get permission to notify.');
  }
}

अपना डिवाइस टोकन प्राप्त करें

1. यदि आपका ऐप अभी भी परोसा जा रहा है, तो अपने ऐप को ब्राउज़र में रीफ्रेश करें। अन्यथा, http://localhost:5000 से ऐप की सेवा शुरू करने के लिए कमांड लाइन पर firebase serve --only hosting चलाएं, और फिर इसे अपने ब्राउज़र में खोलें।
2. साइन इन करने के बाद, अधिसूचना अनुमति संवाद प्रकट होना चाहिए:
3. अनुमति दें पर क्लिक करें।
4. अपने ब्राउज़र का जावास्क्रिप्ट कंसोल खोलें। आपको निम्न संदेश देखना चाहिए: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
5. अपने डिवाइस टोकन की प्रतिलिपि बनाएँ। आपको कोडलैब के अगले चरण के लिए इसकी आवश्यकता होगी।

अपने डिवाइस पर एक सूचना भेजें

अब जब आपके पास आपका डिवाइस टोकन है, तो आप एक सूचना भेज सकते हैं।

1. फायरबेस कंसोल का क्लाउड मैसेजिंग टैब खोलें।
2. "नई अधिसूचना" पर क्लिक करें
3. एक अधिसूचना शीर्षक और अधिसूचना पाठ दर्ज करें।
4. स्क्रीन के दाईं ओर, "एक परीक्षण संदेश भेजें" पर क्लिक करें।
5. अपने ब्राउज़र के जावास्क्रिप्ट कंसोल से आपके द्वारा कॉपी किए गए डिवाइस टोकन को दर्ज करें, फिर प्लस ("+") चिह्न पर क्लिक करें
6. "परीक्षण" पर क्लिक करें

यदि आपका ऐप अग्रभूमि में है, तो आपको जावास्क्रिप्ट कंसोल में सूचना दिखाई देगी।

यदि आपका ऐप पृष्ठभूमि में है, तो आपके ब्राउज़र में एक सूचना दिखाई देनी चाहिए, जैसा कि इस उदाहरण में है:

12. क्लाउड फायरस्टार सुरक्षा नियम

डेटाबेस सुरक्षा नियम देखें

क्लाउड फायरस्टोर एक्सेस अधिकारों, सुरक्षा और डेटा सत्यापन को परिभाषित करने के लिए एक विशिष्ट नियम भाषा का उपयोग करता है।

इस कोडलैब की शुरुआत में फायरबेस प्रोजेक्ट सेट करते समय, हमने "टेस्ट मोड" डिफ़ॉल्ट सुरक्षा नियमों का उपयोग करना चुना ताकि हम डेटास्टोर तक पहुंच को प्रतिबंधित न करें। Firebase कंसोल में, डेटाबेस अनुभाग के नियम टैब में, आप इन नियमों को देख और संशोधित कर सकते हैं।

अभी, आपको डिफ़ॉल्ट नियम देखने चाहिए, जो डेटास्टोर तक पहुंच को प्रतिबंधित नहीं करते हैं। इसका मतलब है कि कोई भी उपयोगकर्ता आपके डेटास्टोर में किसी भी संग्रह को पढ़ और लिख सकता है।

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

हम निम्न नियमों का उपयोग करके चीज़ों को प्रतिबंधित करने के लिए नियमों को अपडेट करेंगे:

firestore.rules

rules_version = '2';

service cloud.firestore {
  match /databases/{database}/documents {
    // Messages:
    //   - Anyone can read.
    //   - Authenticated users can add and edit messages.
    //   - Validation: Check name is same as auth token and text length below 300 char or that imageUrl is a URL.
    //   - Deletes are not allowed.
    match /messages/{messageId} {
      allow read;
      allow create, update: if request.auth != null
                    && request.resource.data.name == request.auth.token.name
                    && (request.resource.data.text is string
                      && request.resource.data.text.size() <= 300
                      || request.resource.data.imageUrl is string
                      && request.resource.data.imageUrl.matches('https?://.*'));
      allow delete: if false;
    }
    // FCM Tokens:
    //   - Anyone can write their token.
    //   - Reading list of tokens is not allowed.
    match /fcmTokens/{token} {
      allow read: if false;
      allow write;
    }
  }
}

डेटाबेस सुरक्षा नियम अपडेट करें

आपके डेटाबेस सुरक्षा नियमों को संपादित करने के दो तरीके हैं, या तो फायरबेस कंसोल में या फायरबेस सीएलआई का उपयोग करके तैनात स्थानीय नियम फ़ाइल से।

Firebase कंसोल में सुरक्षा नियम अपडेट करने के लिए:

1. बाएँ फलक से डेटाबेस अनुभाग पर जाएँ और फिर नियम टैब पर क्लिक करें।
2. कंसोल में पहले से मौजूद डिफ़ॉल्ट नियमों को ऊपर दिखाए गए नियमों से बदलें।
3. प्रकाशित करें पर क्लिक करें।

किसी स्थानीय फ़ाइल से सुरक्षा नियम अपडेट करने के लिए:

1. web-start निर्देशिका से, firestore.rules खोलें।
2. फ़ाइल में पहले से मौजूद डिफ़ॉल्ट नियमों को ऊपर दिखाए गए नियमों से बदलें।
3. web-start निर्देशिका से, firebase.json खोलें।
4. जैसा कि नीचे दिखाया गया है, firestore.rules विशेषता को firestore.rules की ओर इशारा करते हुए जोड़ें। ( hosting विशेषता पहले से ही फ़ाइल में होनी चाहिए।)

firebase.json

{
  // Add this!
  "firestore": {
    "rules": "firestore.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

5. निम्न आदेश चलाकर फायरबेस सीएलआई का उपयोग करके सुरक्षा नियमों को तैनात करें:

firebase deploy --only firestore

6. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  firestore: uploading rules firestore.rules...
✔  firestore: released rules firestore.rules to cloud.firestore

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

13. क्लाउड स्टोरेज सुरक्षा नियम

क्लाउड स्टोरेज सुरक्षा नियम देखें

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

इस कोडलैब की शुरुआत में फायरबेस प्रोजेक्ट सेट करते समय, हमने डिफ़ॉल्ट क्लाउड स्टोरेज सुरक्षा नियम का उपयोग करना चुना जो केवल प्रमाणित उपयोगकर्ताओं को क्लाउड स्टोरेज का उपयोग करने की अनुमति देता है। फायरबेस कंसोल में, संग्रहण अनुभाग के नियम टैब में, आप नियमों को देख और संशोधित कर सकते हैं। आपको डिफ़ॉल्ट नियम देखना चाहिए जो किसी भी साइन-इन उपयोगकर्ता को आपके स्टोरेज बकेट में किसी भी फाइल को पढ़ने और लिखने की अनुमति देता है।

rules_version = '2';

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

हम निम्न कार्य करने के लिए नियमों को अपडेट करेंगे:

• प्रत्येक उपयोगकर्ता को केवल अपने स्वयं के विशिष्ट फ़ोल्डरों में लिखने की अनुमति दें
• किसी को भी क्लाउड स्टोरेज से पढ़ने की अनुमति दें
• पक्का करें कि अपलोड की गई फ़ाइलें इमेज हैं
• छवियों के आकार को अधिकतम 5 एमबी तक सीमित करें जिन्हें अपलोड किया जा सकता है

इसे निम्नलिखित नियमों का उपयोग करके कार्यान्वित किया जा सकता है:

भंडारण। नियम

rules_version = '2';

// Returns true if the uploaded file is an image and its size is below the given number of MB.
function isImageBelowMaxSize(maxSizeMB) {
  return request.resource.size < maxSizeMB * 1024 * 1024
      && request.resource.contentType.matches('image/.*');
}

service firebase.storage {
  match /b/{bucket}/o {
    match /{userId}/{messageId}/{fileName} {
      allow write: if request.auth != null && request.auth.uid == userId && isImageBelowMaxSize(5);
      allow read;
    }
  }
}

क्लाउड स्टोरेज सुरक्षा नियम अपडेट करें

आपके भंडारण सुरक्षा नियमों को संपादित करने के दो तरीके हैं: या तो फायरबेस कंसोल में या फायरबेस सीएलआई का उपयोग करके तैनात स्थानीय नियम फ़ाइल से।

Firebase कंसोल में सुरक्षा नियम अपडेट करने के लिए:

1. बाएँ फलक से संग्रहण अनुभाग पर जाएँ और फिर नियम टैब पर क्लिक करें।
2. कंसोल में पहले से मौजूद डिफ़ॉल्ट नियम को ऊपर दिखाए गए नियमों से बदलें।
3. प्रकाशित करें पर क्लिक करें।

किसी स्थानीय फ़ाइल से सुरक्षा नियम अपडेट करने के लिए:

1. web-start डायरेक्टरी से, storage.rules खोलें।
2. फ़ाइल में पहले से मौजूद डिफ़ॉल्ट नियमों को ऊपर दिखाए गए नियमों से बदलें।
3. web-start निर्देशिका से, firebase.json खोलें।
4. storage.rules विशेषता को storage.rules फ़ाइल की ओर इशारा करते हुए जोड़ें, जैसा कि नीचे दिखाया गया है। ( hosting और database विशेषता पहले से ही फ़ाइल में होनी चाहिए।)

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // Add this!
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

6. निम्न आदेश चलाकर फायरबेस सीएलआई का उपयोग करके सुरक्षा नियमों को तैनात करें:

firebase deploy --only storage

7. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:

=== Deploying to 'friendlychat-1234'...

i  deploying storage
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  storage: uploading rules storage.rules...
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview

14. प्रदर्शन डेटा एकत्र करें

आप अपने ऐप से वास्तविक दुनिया का प्रदर्शन डेटा एकत्र करने के लिए प्रदर्शन निगरानी एसडीके का उपयोग कर सकते हैं और फिर फायरबेस कंसोल में उस डेटा की समीक्षा और विश्लेषण कर सकते हैं। प्रदर्शन निगरानी आपको यह समझने में मदद करती है कि आपके ऐप के प्रदर्शन को कब और कहाँ बेहतर किया जा सकता है ताकि आप उस जानकारी का उपयोग प्रदर्शन समस्याओं को ठीक करने के लिए कर सकें।

फायरबेस परफॉर्मेंस मॉनिटरिंग जावास्क्रिप्ट एसडीके के साथ एकीकृत करने के कई तरीके हैं। इस कोडलैब में, हमने होस्टिंग यूआरएल से परफॉर्मेंस मॉनिटरिंग को सक्षम किया है। SDK को सक्षम करने के अन्य तरीकों को देखने के लिए दस्तावेज़ देखें।

स्वचालित निशान

चूंकि हम पहले से ही web-start/src/index.js के शीर्ष पर getPerformance आयात करते हैं, इसलिए जब उपयोगकर्ता आपकी परिनियोजित साइट पर जाते हैं, तो हमें आपके लिए स्वचालित रूप से पेज लोड और नेटवर्क अनुरोध मेट्रिक्स एकत्र करने के लिए प्रदर्शन मॉनिटरिंग को बताने के लिए केवल एक पंक्ति जोड़ने की आवश्यकता होती है!

1. web-start/src/index.js में, प्रदर्शन निगरानी आरंभ करने के लिए मौजूदा TODO के नीचे निम्न पंक्ति जोड़ें।

index.js

// TODO: Enable Firebase Performance Monitoring.
getPerformance();

पहले इनपुट विलंब को मापें (वैकल्पिक)

पहला इनपुट विलंब उपयोगी है क्योंकि ब्राउज़र किसी उपयोगकर्ता के साथ बातचीत का जवाब देता है, जिससे आपके उपयोगकर्ताओं को आपके ऐप की जवाबदेही के बारे में पहली छाप मिलती है।

पहला इनपुट विलंब तब शुरू होता है जब उपयोगकर्ता पहली बार पृष्ठ पर किसी तत्व के साथ इंटरैक्ट करता है, जैसे बटन या हाइपरलिंक पर क्लिक करना। ब्राउज़र द्वारा इनपुट का जवाब देने में सक्षम होने के तुरंत बाद यह बंद हो जाता है, जिसका अर्थ है कि ब्राउज़र आपके पृष्ठ की सामग्री को लोड करने या पार्स करने में व्यस्त नहीं है।

यदि आप पहले इनपुट विलंब को मापना चाहते हैं, तो आपको निम्नलिखित कोड को सीधे शामिल करना होगा।

1. public/index.html खोलें।
2. निम्न पंक्ति पर script टैग को अनकमेंट करें।

index.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

पहले इनपुट विलंब पॉलीफ़िल के बारे में अधिक पढ़ने के लिए, दस्तावेज़ीकरण पर एक नज़र डालें।

प्रदर्शन डेटा देखें

चूंकि आपने अभी तक अपनी साइट को परिनियोजित नहीं किया है (आप इसे अगले चरण में परिनियोजित करेंगे), यहां पृष्ठ लोड प्रदर्शन के बारे में मेट्रिक्स दिखाने वाला एक स्क्रीनशॉट है जिसे आप उपयोगकर्ताओं द्वारा आपकी परिनियोजित साइट के साथ इंटरैक्ट करने के 30 मिनट के भीतर Firebase कंसोल में देखेंगे :

जब आप प्रदर्शन मॉनिटरिंग SDK को अपने ऐप में एकीकृत करते हैं, तो इससे पहले कि आपका ऐप प्रदर्शन के कई महत्वपूर्ण पहलुओं की स्वचालित रूप से निगरानी करना शुरू करे, आपको कोई अन्य कोड लिखने की आवश्यकता नहीं है। वेब ऐप्स के लिए, SDK पहले कंटेंटफुल पेंट, उपयोगकर्ताओं के लिए आपके ऐप के साथ इंटरैक्ट करने की क्षमता, और बहुत कुछ जैसे पहलुओं को लॉग करता है।

आप अपने ऐप के विशिष्ट पहलुओं को मापने के लिए कस्टम ट्रेस, मेट्रिक्स और विशेषताएँ भी सेट कर सकते हैं। कस्टम ट्रेस और मेट्रिक्स और कस्टम विशेषताओं के बारे में अधिक जानने के लिए दस्तावेज़ीकरण पर जाएं।

15. फायरबेस होस्टिंग का उपयोग करके अपने ऐप को परिनियोजित करें

Firebase आपकी संपत्तियों और वेब ऐप्स की सेवा के लिए एक होस्टिंग सेवा प्रदान करता है। आप Firebase CLI का उपयोग करके अपनी फ़ाइलों को Firebase होस्टिंग में परिनियोजित कर सकते हैं। परिनियोजित करने से पहले, आपको अपनी firebase.json फ़ाइल में निर्दिष्ट करना होगा कि कौन सी स्थानीय फ़ाइलें परिनियोजित की जानी चाहिए। इस कोडलैब के लिए, हमने आपके लिए यह पहले ही कर दिया है क्योंकि इस कोडलैब के दौरान हमारी फाइलों को प्रस्तुत करने के लिए इस चरण की आवश्यकता थी। hosting विशेषता के तहत होस्टिंग सेटिंग्स निर्दिष्ट हैं:

firebase.json

{
  // If you went through the "Cloud Firestore Security Rules" step.
  "firestore": {
    "rules": "firestore.rules"
  },
  // If you went through the "Storage Security Rules" step.
  "storage": {
    "rules": "storage.rules"
  },
  "hosting": {
    "public": "./public"
  }
}

ये सेटिंग्स सीएलआई को बताती हैं कि हम सभी फाइलों को ./public निर्देशिका ( "public": "./public" ) में तैनात करना चाहते हैं।

1. सुनिश्चित करें कि आपकी कमांड लाइन आपके ऐप की स्थानीय web-start निर्देशिका तक पहुंच रही है।
2. निम्न कमांड चलाकर अपनी फ़ाइलों को अपने फायरबेस प्रोजेक्ट में तैनात करें:

firebase deploy --except functions

3. कंसोल को निम्नलिखित प्रदर्शित करना चाहिए:

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. अपने वेब ऐप पर जाएं जो अब आपके दो बहुत ही फायरबेस सबडोमेन पर फायरबेस होस्टिंग का उपयोग करके वैश्विक सीडीएन पर पूरी तरह से होस्ट किया गया है:

• https://<firebase-projectId>.firebaseapp.com
• https://<firebase-projectId>.web.app

वैकल्पिक रूप से, आप कमांड लाइन में firebase open hosting:site ।

Firebase होस्टिंग कैसे काम करती है, इस बारे में अधिक जानने के लिए दस्तावेज़ देखें।

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

16. बधाई हो!

आपने रीयल-टाइम चैट वेब एप्लिकेशन बनाने के लिए Firebase का उपयोग किया है!

हमने क्या कवर किया है

• फायरबेस प्रमाणीकरण
• क्लाउड फायरस्टोर
• क्लाउड स्टोरेज के लिए फायरबेस एसडीके
• फायरबेस क्लाउड मैसेजिंग
• फायरबेस प्रदर्शन निगरानी
• फायरबेस होस्टिंग

अगले कदम

Learn more

• firebase.google.com