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

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

3b1284f5144b54f6.png

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

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

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

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

क्लोन codelab के GitHub भंडार कमांड लाइन से:

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

वैकल्पिक रूप से, आप Git स्थापित नहीं है, तो आप कर सकते हैं एक ज़िप फ़ाइल के रूप में भंडार डाउनलोड

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

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

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

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

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

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

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

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

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

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

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

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

आप गूगल साइन-इन सक्षम करने की आवश्यकता होगी:

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

d89fb3873b5d36ae.png

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

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

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

  1. Firebase कंसोल की बिल्ड अनुभाग में, इस firestore डाटाबेस पर क्लिक करें।
  2. बादल Firestore फलक में डेटाबेस बनाएँ क्लिक करें।

729991a081e7cd5.png

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

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

77e4986cbeaf9dee.png

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

9f2bb0d4e7ca49c7.png

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

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

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

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

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

62f1afdcd1260127.png

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

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. संकेत मिलने पर, अपने प्रोजेक्ट ID चयन करें, फिर अपने Firebase परियोजना एक उपनाम दे।

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

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

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

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

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

  1. आपके ब्राउज़र का उपयोग करना, पर आपका ऐप्लिकेशन खोलने // स्थानीय होस्ट: 5000 http

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

4c23f9475228cef4.png

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

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

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

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

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

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

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

  1. अपने पर जाएं Firebase कंसोल में परियोजना सेटिंग्स
  2. "आपके ऐप्स" कार्ड में, उस ऐप का प्रचलित नाम चुनें जिसके लिए आपको कॉन्फ़िग ऑब्जेक्ट की आवश्यकता है।
  3. फायरबेस एसडीके स्निपेट फलक से "कॉन्फ़िगर करें" चुनें।
  4. Config वस्तु स्निपेट की प्रतिलिपि है, तो के लिए इसे जोड़ने 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);

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

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

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

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

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

डेटा मॉडल

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

688d7bc5fb662b57.png

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

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

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

6812efe7da395692.png

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

ऐप में संदेशों को पढ़ने के लिए, हमें श्रोताओं को जोड़ना होगा जो डेटा बदलने पर ट्रिगर करते हैं और फिर एक 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 संग्रह, जहां चैट संदेशों को संग्रहीत किया जाता है। हम यह भी केवल का उपयोग कर पिछले 12 संदेशों को सुन द्वारा एक सीमा लागू कर रहे हैं .limit(12) और का उपयोग कर दिनांक के आधार पर संदेशों आदेश देने orderBy('timestamp', 'desc') 12 नवीनतम संदेश प्राप्त करने के।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

de79e8638a45864c.png

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

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

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

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

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

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

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

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

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

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

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

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

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

  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>

पहला इनपुट देरी polyfill के बारे में अधिक पढ़ने के लिए, पर एक नज़र डालें प्रलेखन

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

चूंकि आपने अभी तक अपनी साइट को परिनियोजित नहीं किया है (आप इसे अगले चरण में परिनियोजित करेंगे), यहां पृष्ठ लोड प्रदर्शन के बारे में मीट्रिक दिखाने वाला एक स्क्रीनशॉट है जो आपको उपयोगकर्ताओं द्वारा आपकी परिनियोजित साइट से इंटरैक्ट करने के 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"
  }
}

ये सेटिंग्स CLI बताते हैं कि हम में सभी फाइलों को तैनात करना चाहते हैं ./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 होस्टिंग काम करता है

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

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

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

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

अगला कदम

और अधिक जानें