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

इस codelab में, आप का उपयोग करने का तरीका जानेंगे Firebase आसानी से लागू करने और Firebase उत्पादों और सेवाओं का उपयोग कर एक चैट क्लाइंट वितरित करते हुए वेब अनुप्रयोगों का निर्माण करने के लिए।

3b1284f5144b54f6.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. वेब आइकन पर क्लिक करें 58d6543a156e56f9.png एक नया फायरबेस वेब ऐप बनाने के लिए।
  2. फ्रेंडली चैट उपनाम के साथ ऐप को पंजीकृत करें, फिर इस ऐप के लिए फायरबेस होस्टिंग भी सेट करें के बगल में स्थित बॉक्स को चेक करें। रजिस्टर ऐप पर क्लिक करें।
  3. शेष चरणों के माध्यम से क्लिक करें। अब आपको निर्देशों का पालन करने की आवश्यकता नहीं है; इन्हें इस कोडलैब के बाद के चरणों में शामिल किया जाएगा।

ea9ab0db531a104c.png

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

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

  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. अपनी कमांड लाइन पर शेष निर्देशों का पालन करें।

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

  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 निर्धारित किया है।

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

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

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

चूंकि हम अपने ऐप की सेवा के लिए फायरबेस होस्टिंग का उपयोग कर रहे हैं, हम स्थानीय यूआरएल आयात करने जा रहे हैं जो फ़ाइल index.html (आपकी web-start/public/ निर्देशिका में स्थित) में हैं। इस कोडलैब के लिए, हमने आपके लिए index.html फ़ाइल के निचले भाग में पहले ही निम्नलिखित पंक्तियाँ जोड़ दी हैं, लेकिन आप दोबारा जाँच कर सकते हैं कि वे वहाँ हैं।

index.html

<script src="/__/firebase/8.6.7/firebase-app.js"></script>
<script src="/__/firebase/8.6.7/firebase-auth.js"></script>
<script src="/__/firebase/8.6.7/firebase-storage.js"></script>
<script src="/__/firebase/8.6.7/firebase-messaging.js"></script>
<script src="/__/firebase/8.6.7/firebase-firestore.js"></script>
<script src="/__/firebase/8.6.7/firebase-performance.js"></script>

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

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

हमें यह बताने के लिए Firebase SDK को भी कॉन्फ़िगर करने की आवश्यकता है कि हम किस Firebase प्रोजेक्ट का उपयोग कर रहे हैं। चूंकि हम फायरबेस होस्टिंग का उपयोग कर रहे हैं, आप एक विशेष स्क्रिप्ट आयात कर सकते हैं जो आपके लिए यह कॉन्फ़िगरेशन करेगी। फिर से, इस कोडलैब के लिए, हमने आपके लिए public/index.html फ़ाइल के निचले भाग में पहले से ही निम्न पंक्ति जोड़ दी है, लेकिन दोबारा जाँच करें कि यह वहाँ है।

index.html

<script src="/__/firebase/init.js"></script>

इस स्क्रिप्ट में फायरबेस प्रोजेक्ट के आधार पर आपका फायरबेस प्रोजेक्ट कॉन्फ़िगरेशन शामिल है जिसे आपने पहले निर्दिष्ट किया था जब आप firebase use --add

आपका प्रोजेक्ट कॉन्फ़िगरेशन कैसा दिखता है यह देखने के लिए फ़ाइल init.js का निरीक्षण करने के लिए स्वतंत्र महसूस करें। ऐसा करने के लिए, अपने ब्राउज़र में http://localhost:5000/__/firebase/init.js खोलें । आपको कुछ ऐसा दिखना चाहिए जो निम्न जैसा दिखता है:

/__/फायरबेस/init.js

if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
firebase.initializeApp({
  "apiKey": "qwertyuiop_asdfghjklzxcvbnm1234568_90",
  "databaseURL": "https://friendlychat-1234.firebaseio.com",
  "storageBucket": "friendlychat-1234.appspot.com",
  "authDomain": "friendlychat-1234.firebaseapp.com",
  "messagingSenderId": "1234567890",
  "projectId": "friendlychat-1234",
  "appId": "1:1234567890:web:123456abcdef"
});

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

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

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

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

main.js

// Signs-in Friendly Chat.
function signIn() {
  // Sign into Firebase using popup auth & Google as the identity provider.
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth().signInWithPopup(provider);
}

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

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

main.js

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

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

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

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

main.js

// Initiate Firebase Auth.
function initFirebaseAuth() {
  // Listen to auth state changes.
  firebase.auth().onAuthStateChanged(authStateObserver);
}

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

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

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

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

main.js

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

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

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

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

main.js

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

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

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

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

डेटा मॉडल

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

688d7bc5fb662b57.png

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

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

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

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

main.js

// Saves a new message to your Cloud Firestore database.
function saveMessage(messageText) {
  // Add a new message entry to the database.
  return firebase.firestore().collection('messages').add({
    name: getUserName(),
    text: messageText,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).catch(function(error) {
    console.error('Error writing new message to database', error);
  });
}

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

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

6812efe7da395692.png

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

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

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

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

main.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.
  var query = firebase.firestore()
                  .collection('messages')
                  .orderBy('timestamp', 'desc')
                  .limit(12);
  
  // Start listening to the query.
  query.onSnapshot(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 संदेशों को .limit(12) और .orderBy('timestamp', 'desc') का उपयोग करके 12 नए संदेशों को प्राप्त करने के लिए संदेशों को ऑर्डर करके एक सीमा लागू कर रहे हैं।

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

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

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

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

२१६८दिसंबर७९बी५७३डी०७.png

अब हम एक ऐसी सुविधा जोड़ेंगे जो छवियों को साझा करती है।

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

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

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

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

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

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

main.js

// Saves a new message containing an image in Firebase.
// This first saves the image in Firebase storage.
function saveImageMessage(file) {
  // 1 - We add a message with a loading icon that will get updated with the shared image.
  firebase.firestore().collection('messages').add({
    name: getUserName(),
    imageUrl: LOADING_IMAGE_URL,
    profilePicUrl: getProfilePicUrl(),
    timestamp: firebase.firestore.FieldValue.serverTimestamp()
  }).then(function(messageRef) {
    // 2 - Upload the image to Cloud Storage.
    var filePath = firebase.auth().currentUser.uid + '/' + messageRef.id + '/' + file.name;
    return firebase.storage().ref(filePath).put(file).then(function(fileSnapshot) {
      // 3 - Generate a public URL for the file.
      return fileSnapshot.ref.getDownloadURL().then((url) => {
        // 4 - Update the chat message placeholder with the image's URL.
        return messageRef.update({
          imageUrl: url,
          storageUri: fileSnapshot.metadata.fullPath
        });
      });
    });
  }).catch(function(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

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

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

GCM प्रेषक आईडी को श्वेतसूची में डालें

वेब ऐप मेनिफेस्ट में , आपको gcm_sender_id निर्दिष्ट करना gcm_sender_id , जो एक हार्ड-कोडेड मान है जो दर्शाता है कि FCM इस ऐप को संदेश भेजने के लिए अधिकृत है।

  1. web-start निर्देशिका से, public निर्देशिका में, manifest.json खोलें।
  2. gcm_sender_id विशेषता में ब्राउज़र प्रेषक आईडी मान बिल्कुल नीचे दिखाए अनुसार जोड़ें। जो नीचे दिखाया गया है उससे मान न बदलें।

मेनिफेस्ट.जेसन

{
  "name": "Friendly Chat",
  "short_name": "Friendly Chat",
  "start_url": "/index.html",
  "display": "standalone",
  "orientation": "portrait",
  "gcm_sender_id": "103953800507"
}

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

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

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

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

importScripts('/__/firebase/6.0.4/firebase-app.js');
importScripts('/__/firebase/6.0.4/firebase-messaging.js');
importScripts('/__/firebase/init.js');

firebase.messaging();

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

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

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

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

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

main.js

// Saves the messaging device token to the datastore.
function saveMessagingDeviceToken() {
  firebase.messaging().getToken().then(function(currentToken) {
    if (currentToken) {
      console.log('Got FCM device token:', currentToken);
      // Saving the Device Token to the datastore.
      firebase.firestore().collection('fcmTokens').doc(currentToken)
          .set({uid: firebase.auth().currentUser.uid});
    } else {
      // Need to request permissions to show notifications.
      requestNotificationsPermissions();
    }
  }).catch(function(error){
    console.error('Unable to get messaging token.', error);
  });
}

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

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

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

8b9d0c66dc36153d.png

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

main.js

// Requests permission to show notifications.
function requestNotificationsPermissions() {
  console.log('Requesting notifications permission...');
  firebase.messaging().requestPermission().then(function() {
    // Notification permission granted.
    saveMessagingDeviceToken();
  }).catch(function(error) {
    console.error('Unable to get permission to notify.', error);
  });
}

अपना उपकरण टोकन प्राप्त करें

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

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

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

  1. डिवाइस टोकन के अलावा, आपको अपने फायरबेस ऐप की सर्वर कुंजी की भी आवश्यकता होगी। इस कुंजी को प्राप्त करने के लिए, फायरबेस कंसोल > प्रोजेक्ट सेटिंग्स > क्लाउड मैसेजिंग पर जाएं , फिर सर्वर कुंजी को कॉपी करें।

सूचना भेजने के लिए, आपको निम्न HTTP अनुरोध भेजना होगा:

POST /fcm/send HTTP/1.1
Host: fcm.googleapis.com
Content-Type: application/json
Authorization: key=YOUR_SERVER_KEY

{
  "notification": {
    "title": "New chat message!",
    "body": "There is a new message in FriendlyChat",
    "icon": "/images/profile_placeholder.png",
    "click_action": "http://localhost:5000"
  },
  "to":"YOUR_DEVICE_TOKEN"
}
  1. कमांड लाइन पर, निम्न कर्ल कमांड चलाएँ।
curl -H "Content-Type: application/json" \
     -H "Authorization: key=YOUR_SERVER_KEY" \
     -d '{
           "notification": {
             "title": "New chat message!",
             "body": "There is a new message in FriendlyChat",
             "icon": "/images/profile_placeholder.png",
             "click_action": "http://localhost:5000"
           },
           "to": "YOUR_DEVICE_TOKEN"
         }' \
     https://fcm.googleapis.com/fcm/send

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

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

de79e8638a45864c.png

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

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

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

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

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

०५३०५२२बी४०
  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

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

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

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

rules_version = '2';

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

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

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

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

भंडारण नियमr

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

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

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

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

चूंकि हमने init.js पहले चरण में firebase-performance.js और init.js को शामिल किया था, इसलिए जब उपयोगकर्ता आपकी परिनियोजित साइट पर जाते हैं, तो हमें आपके लिए स्वचालित रूप से पृष्ठ लोड और नेटवर्क अनुरोध मीट्रिक एकत्र करने के लिए प्रदर्शन निगरानी को बताने के लिए एक पंक्ति जोड़ने की आवश्यकता होती है!

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

main.js

// TODO: Enable Firebase Performance Monitoring.
firebase.performance();

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

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

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

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

  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 पहले कंटेंटफुल पेंट, उपयोगकर्ताओं के लिए आपके ऐप के साथ इंटरैक्ट करने की क्षमता, और बहुत कुछ जैसे पहलुओं को लॉग करता है।

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

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. The console should display the following:
=== 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. Visit your web app that's now fully hosted using Firebase Hosting at two of your very own Firebase subdomains:
  • https://<firebase-projectId>.firebaseapp.com
  • https://<firebase-projectId>.web.app .

Alternatively, you can run firebase open hosting:site in the command line.

Visit the documentation to learn more about how Firebase Hosting works .

Go to your project's Firebase console Hosting section to view useful hosting information and tools, including the history of your deploys, the functionality to roll back to previous versions of your app, and the workflow to set up a custom domain.

You've used Firebase to build a real-time chat web application!

What we've covered

  • Firebase Authentication
  • Cloud Firestore
  • Firebase SDK for Cloud Storage
  • Firebase Cloud Messaging
  • Firebase Performance Monitoring
  • Firebase Hosting

अगला कदम

Learn more