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

1 अवलोकन

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

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

प्रोजेक्ट में Firebase वेब ऐप्लिकेशन जोड़ें

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

वेब ऐप स्क्रीनशॉट पंजीकृत करें

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

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

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

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

d89fb3873b5d36ae.png

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

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

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

  1. फायरबेस कंसोल के बिल्ड सेक्शन में, फायरस्टोर डेटाबेस पर क्लिक करें।
  2. क्लाउड फायरस्टोर फलक में डेटाबेस बनाएं पर क्लिक करें।

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

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

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

62f1afdcd1260127.png

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

1d7f49ebaddb32fc.png

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

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

  1. निम्नलिखित npm कमांड चलाकर CLI स्थापित करें:
npm -g install firebase-tools
  1. सत्यापित करें कि निम्न आदेश चलाकर सीएलआई सही ढंग से स्थापित किया गया है:
firebase --version

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

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

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

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

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

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

5. स्थानीय स्तर पर स्टार्टर ऐप चलाएँ

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

  1. web-start निर्देशिका से कंसोल में, निम्न फायरबेस सीएलआई कमांड चलाएँ:
firebase serve --only hosting
  1. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:
✔  hosting: Local server: http://localhost:5000

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

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

आपको अपने FriendlyChat ऐप का UI देखना चाहिए, जो (अभी तक!) काम नहीं कर रहा है:

4c23f9475228cef4.png

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

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

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

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

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

हम एनपीएम से फायरबेस एसडीके प्राप्त करने जा रहे हैं और हमारे कोड को बंडल करने के लिए वेबपैक का उपयोग करेंगे। हम ऐसा इसलिए कर रहे हैं ताकि वेबपैक हमारे JS बंडल के आकार को छोटा रखते हुए किसी भी अनुपयोगी कोड को हटा सके ताकि यह सुनिश्चित हो सके कि हमारा ऐप जल्द से जल्द लोड हो। इस कोडलैब के लिए, हमने पहले ही एक web-start/package.json फ़ाइल बना ली है जिसमें निर्भरता के रूप में Firebase SDK शामिल है, साथ ही 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';

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

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

हमें अपने ऐप के निर्माण के लिए कुछ कमांड चलाने की जरूरत है।

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

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

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

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

firebase-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 के नीचे जाएं और Firebase को इनिशियलाइज़ करें:

index.js

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

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

Firebase SDK अब उपयोग के लिए तैयार होना चाहिए क्योंकि यह index.html में इंपोर्ट और इनिशियलाइज़ किया गया है। अब हम Firebase प्रमाणीकरण का उपयोग करके उपयोगकर्ता साइन-इन लागू करने जा रहे हैं।

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 को अपडेट करेंगे। इन सभी UI भागों को पहले ही लागू किया जा चुका है।

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

हम अपने ऐप के शीर्ष बार में साइन-इन किए गए उपयोगकर्ता का प्रोफ़ाइल चित्र और उपयोगकर्ता नाम प्रदर्शित करना चाहते हैं। Firebase में, साइन-इन किए गए उपयोगकर्ता का डेटा हमेशा 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 साइन-इन को Firebase कंसोल में प्रमाणीकरण प्रदाता के रूप में सक्षम किया है।
  3. साइन इन करने के बाद, आपका प्रोफ़ाइल चित्र और उपयोगकर्ता नाम प्रदर्शित होना चाहिए: c7401b3d44d0d78b.png

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

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

डेटा मॉडल

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

688d7bc5fb662b57.png

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

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

इस खंड में, आप अपने डेटाबेस में नए संदेश लिखने के लिए उपयोगकर्ताओं के लिए कार्यक्षमता जोड़ेंगे। भेजें बटन पर क्लिक करने वाला उपयोगकर्ता नीचे दिए गए कोड स्निपेट को ट्रिगर करेगा। यह 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. साइन इन करने के बाद, "अरे वहाँ!" जैसे संदेश दर्ज करें, और फिर भेजें पर क्लिक करें। यह क्लाउड फायरस्टोर में संदेश लिखेगा। हालांकि, आपको अभी तक अपने वास्तविक वेब ऐप में डेटा दिखाई नहीं देगा क्योंकि हमें अभी भी डेटा पुनर्प्राप्त करना (कोडलैब का अगला भाग) लागू करने की आवश्यकता है।
  3. आप अपने Firebase कंसोल में नया जोड़ा गया संदेश देख सकते हैं। अपना फायरबेस कंसोल खोलें। बिल्ड सेक्शन के तहत फायरस्टोर डेटाबेस पर क्लिक करें (या यहां क्लिक करें और अपनी परियोजना का चयन करें) और आपको अपने नए जोड़े गए संदेश के साथ संदेश संग्रह देखना चाहिए:

6812efe7da395692.png

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

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

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

हम कोड जोड़ेंगे जो ऐप से नए जोड़े गए संदेशों को सुनता है। इस कोड में, हम उस श्रोता को पंजीकृत करेंगे जो डेटा में किए गए परिवर्तनों को सुनता है। लोड होने पर बहुत लंबा इतिहास प्रदर्शित करने से बचने के लिए हम केवल चैट के अंतिम 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 फ़ंक्शन एक क्वेरी को इसके पहले पैरामीटर के रूप में लेता है, और कॉलबैक फ़ंक्शन इसके दूसरे के रूप में। क्वेरी से मेल खाने वाले दस्तावेज़ों में कोई भी परिवर्तन होने पर कॉलबैक फ़ंक्शन चालू हो जाएगा। यह तब हो सकता है जब कोई संदेश हटा दिया जाता है, संशोधित किया जाता है या जोड़ा जाता है। आप इसके बारे में क्लाउड फायरस्टोर दस्तावेज़ीकरण में अधिक पढ़ सकते हैं।

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

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

बधाई हो! आप अपने ऐप में क्लाउड फायरस्टोर दस्तावेज़ पढ़ रहे हैं!

2168दिसंबर79बी573डी07.png

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. साइन इन करने के बाद इमेज अपलोड बटन पर क्लिक करें 13734cb66773e5a3.png और फ़ाइल पिकर का उपयोग करके एक छवि फ़ाइल का चयन करें। यदि आप एक छवि की तलाश में हैं, तो बेझिझक कॉफी कप की इस अच्छी तस्वीर का उपयोग करें।
  3. आपकी चयनित छवि के साथ ऐप के UI में एक नया संदेश दिखाई देना चाहिए: 3b1284f5144b54f6.png

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

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

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

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() विधि को कॉल करते हैं, जो इस अनुमति के लिए पूछने वाला एक ब्राउज़र संवाद प्रदर्शित करेगा ( समर्थित ब्राउज़रों में )।

8b9d0c66dc36153d.png

  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. साइन इन करने के बाद, सूचना अनुमति संवाद प्रकट होना चाहिए: bd3454e6dbfb6723.png
  3. अनुमति दें पर क्लिक करें।
  4. अपने ब्राउज़र का जावास्क्रिप्ट कंसोल खोलें। आपको निम्न संदेश देखना चाहिए: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  5. अपने डिवाइस टोकन को कॉपी करें। कोडलैब के अगले चरण के लिए आपको इसकी आवश्यकता होगी।

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

अब जब आपके पास अपना उपकरण टोकन है, तो आप एक सूचना भेज सकते हैं।

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

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

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

de79e8638a45864c.png

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

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

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

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

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

rules_version = '2';

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

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

आग की दुकान.नियम

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"
  }
}
  1. निम्नलिखित आदेश चलाकर फायरबेस सीएलआई का उपयोग करके सुरक्षा नियमों को लागू करें:
firebase deploy --only firestore
  1. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:
=== 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;
    }
  }
}

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

  • प्रत्येक उपयोगकर्ता को केवल अपने विशिष्ट फ़ोल्डर में लिखने की अनुमति दें
  • Cloud Storage से किसी को भी पढ़ने दें
  • सुनिश्चित करें कि अपलोड की गई फ़ाइलें छवियां हैं
  • उन छवियों के आकार को सीमित करें जिन्हें अधिकतम 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"
  }
}
  1. निम्नलिखित आदेश चलाकर फायरबेस सीएलआई का उपयोग करके सुरक्षा नियमों को लागू करें:
firebase deploy --only storage
  1. आपकी कमांड लाइन को निम्नलिखित प्रतिक्रिया प्रदर्शित करनी चाहिए:
=== 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. प्रदर्शन डेटा एकत्र करें

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

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

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

चूंकि हम पहले से ही 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 कंसोल में दिखाई देगा :

29389131150f33d7.png

जब आप अपने ऐप में प्रदर्शन निगरानी एसडीके को एकीकृत करते हैं, तो आपके ऐप द्वारा प्रदर्शन के कई महत्वपूर्ण पहलुओं की स्वचालित रूप से निगरानी शुरू करने से पहले आपको कोई अन्य कोड लिखने की आवश्यकता नहीं होती है। वेब ऐप्स के लिए, 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 प्रोजेक्ट में परिनियोजित करें:
firebase deploy --except functions
  1. कंसोल को निम्नलिखित प्रदर्शित करना चाहिए:
=== 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
  1. अपने स्वयं के दो Firebase उप डोमेन पर Firebase होस्टिंग का उपयोग करके अपने वेब ऐप पर जाएं जो अब पूरी तरह से एक वैश्विक सीडीएन पर होस्ट किया गया है:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app

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

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

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

16. बधाई!

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

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

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

अगले कदम

Learn more