AngularFire वेब कोडलैब

1. खास जानकारी

इस कोडलैब में, आपको Firebase प्रॉडक्ट और सेवाओं का इस्तेमाल करके चैट क्लाइंट को लागू और डिप्लॉय करके, वेब ऐप्लिकेशन बनाने के लिए AngularFire का इस्तेमाल करने का तरीका बताया जाएगा.

एक चैट ऐप्लिकेशन, जिसमें उपयोगकर्ता Firebase पर चर्चा कर रहे हों

आपको यह जानकारी मिलेगी

  • Angular और Firebase का इस्तेमाल करके वेब ऐप्लिकेशन बनाना.
  • Cloud Firestore और Firebase के लिए Cloud Storage का इस्तेमाल करके डेटा सिंक करें.
  • Firebase Authentication का इस्तेमाल करके, अपने उपयोगकर्ताओं की पुष्टि करें.
  • अपने वेब ऐप्लिकेशन को Firebase ऐप्लिकेशन होस्टिंग पर डिप्लॉय करें.
  • Firebase Cloud Messaging की मदद से सूचनाएं भेजें.
  • अपने वेब ऐप्लिकेशन की परफ़ॉर्मेंस का डेटा इकट्ठा करें.

आपको इन चीज़ों की ज़रूरत होगी

  • GitHub खाता
  • अपने Firebase प्रोजेक्ट को Blaze कीमत वाले प्लान पर अपग्रेड करने की सुविधा
  • आपकी पसंद का आईडीई/टेक्स्ट एडिटर, जैसे कि WebStorm, Sublime या VS Code
  • पैकेज मैनेजर npm, जो आम तौर पर Node.js के साथ आता है
  • टर्मिनल/कंसोल
  • Chrome जैसा कोई ब्राउज़र
  • कोडलैब का सैंपल कोड (कोड पाने का तरीका जानने के लिए, कोडलैब का अगला चरण देखें.)

2. सैंपल कोड पाएं

GitHub पर डेटा स्टोर करने की जगह बनाना

कोडलैब का सोर्स देखने के लिए, https://github.com/firebase/codelab-friendchat-web पर जाएं. रिपॉज़िटरी में एक से ज़्यादा प्लैटफ़ॉर्म के लिए सैंपल प्रोजेक्ट शामिल होते हैं. हालांकि, यह कोडलैब सिर्फ़ angularfire-start डायरेक्ट्री का इस्तेमाल करता है.

angularfire-start फ़ोल्डर को अपनी रिपॉज़िटरी में कॉपी करें:

  1. टर्मिनल का इस्तेमाल करके, अपने कंप्यूटर पर एक नया फ़ोल्डर बनाएं और उसे नई डायरेक्ट्री में बदलें:
    mkdir codelab-friendlyeats-web

cd codelab-friendlyeats-web
  2. सिर्फ़ angularfire-start फ़ोल्डर फ़ेच करने के लिए, giget npm पैकेज का इस्तेमाल करें:
    npx giget@latest gh:firebase/codelab-friendlychat-web/angularfire-start#master . --install
  3. git की मदद से, लोकल तौर पर बदलावों को ट्रैक करना:
    git init

git add .

git commit -m "codelab starting point"

git branch -M main
  4. GitHub डेटा स्टोर करने की नई जगह बनाएं: https://github.com/new. इसे अपनी पसंद के मुताबिक कोई भी नाम दें.
    1. GitHub आपको एक नया रिपॉज़िटरी यूआरएल देगा, जो https://github.com/[user-name]/[repository-name].git या git@github.com:[user-name]/[repository-name].git जैसा दिखेगा. इस यूआरएल को कॉपी करें.
  5. स्थानीय बदलावों को GitHub डेटा स्टोर करने की नई जगह में भेजें. your-repository-url प्लेसहोल्डर के लिए अपने रिपॉज़िटरी यूआरएल को बदलकर, नीचे दिया गया निर्देश चलाएं.
    git remote add origin your-repository-url

git push -u origin main
  6. अब आपको अपने GitHub रिपॉज़िटरी में स्टार्टर कोड दिखेगा.

3. Firebase प्रोजेक्ट बनाना और उसे सेट अप करना

Firebase प्रोजेक्ट बनाना

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

आपको जो ऐप्लिकेशन बनाना है वह वेब ऐप्लिकेशन के लिए उपलब्ध Firebase प्रॉडक्ट का इस्तेमाल करता हो:

  • Firebase से पुष्टि करने की सुविधा का इस्तेमाल करके, उपयोगकर्ता आपके ऐप्लिकेशन में आसानी से साइन इन कर सकते हैं.
  • Cloud Firestore, ताकि क्लाउड पर स्ट्रक्चर्ड डेटा सेव किया जा सके और डेटा में बदलाव होने पर तुरंत सूचना मिल सके.
  • फ़ाइलों को क्लाउड में सेव करने के लिए, Firebase के लिए Cloud Storage का इस्तेमाल करें.
  • ऐप्लिकेशन बनाने, होस्ट करने, और उसे उपलब्ध कराने के लिए, Firebase App Hosting.
  • Firebase क्लाउड से मैसेज, पुश नोटिफ़िकेशन भेजने और ब्राउज़र पॉप-अप सूचनाएं दिखाने के लिए.
  • Firebase की परफ़ॉर्मेंस मॉनिटरिंग, ताकि आपके ऐप्लिकेशन के लिए उपयोगकर्ता की परफ़ॉर्मेंस का डेटा इकट्ठा किया जा सके.

इनमें से कुछ प्रॉडक्ट के लिए खास कॉन्फ़िगरेशन की ज़रूरत होती है या उन्हें Firebase कंसोल का इस्तेमाल करके चालू करना पड़ता है.

Firebase प्राइसिंग प्लान को अपग्रेड करना

'Firebase के लिए Firebase ऐप्लिकेशन होस्टिंग' और Cloud Storage का इस्तेमाल करने के लिए, आपके Firebase प्रोजेक्ट को 'इस्तेमाल के हिसाब से पैसे चुकाएं' (ब्लेज़) वाले प्राइसिंग प्लान पर सेट होना चाहिए. इसका मतलब है कि आपका Firebase प्रोजेक्ट, किसी क्लाउड बिलिंग खाते से जुड़ा होना चाहिए.

  • क्लाउड बिलिंग खाते के लिए, पेमेंट का कोई तरीका ज़रूरी है, जैसे कि क्रेडिट कार्ड.
  • अगर आपने Firebase और Google Cloud का इस्तेमाल पहले कभी नहीं किया है, तो देखें कि आपको 300 डॉलर का क्रेडिट और मुफ़्त में आज़माने वाला क्लाउड बिलिंग खाता मिल सकता है या नहीं.
  • अगर आपने किसी इवेंट के तहत यह कोडलैब किया है, तो इवेंट के आयोजक से पूछें कि क्या कोई Cloud क्रेडिट उपलब्ध है.

अपने प्रोजेक्ट को Blaze प्लान पर अपग्रेड करने के लिए, यह तरीका अपनाएं:

  1. Firebase कंसोल में, अपना प्लान अपग्रेड करें को चुनें.
  2. ब्लेज़ प्लान चुनें. अपने प्रोजेक्ट से क्लाउड बिलिंग खाता लिंक करने के लिए, स्क्रीन पर दिए गए निर्देशों का पालन करें.
    अगर आपको इस अपग्रेड के तहत क्लाउड बिलिंग खाता बनाना पड़ा है, तो अपग्रेड पूरा करने के लिए, आपको Firebase Console में अपग्रेड फ़्लो पर वापस जाना पड़ सकता है.

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

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

वेब ऐप्लिकेशन का स्क्रीनशॉट रजिस्टर करें

पुष्टि करने की सुविधा सेट अप करना

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

  1. Firebase कंसोल में, पुष्टि पर जाएं.
  2. शुरू करें पर क्लिक करें.
  3. अन्य सेवा देने वाली कंपनियां कॉलम में, Google > चालू करें पर क्लिक करें.
  4. प्रोजेक्ट के लिए सार्वजनिक नाम टेक्स्ट बॉक्स में, कोई ऐसा नाम डालें जो आपको याद रहे, जैसे कि My Next.js app.
  5. प्रोजेक्ट के लिए सहायता ईमेल ड्रॉप-डाउन से, अपना ईमेल पता चुनें.
  6. सेव करें पर क्लिक करें.

Cloud Firestore सेट अप करना

चैट मैसेज सेव करने और नए चैट मैसेज पाने के लिए वेब ऐप्लिकेशन Cloud Firestore का इस्तेमाल करता है.

अपने Firebase प्रोजेक्ट में Cloud Firestore सेट अप करने का तरीका यहां बताया गया है:

  1. Firebase कंसोल के बाएं पैनल में, बिल्ड करें को बड़ा करें. इसके बाद, Firestore डेटाबेस चुनें.
  2. डेटाबेस बनाएं पर क्लिक करें.
  3. डेटाबेस आईडी को (default) पर सेट रहने दें.
  4. अपने डेटाबेस के लिए कोई जगह चुनें, फिर आगे बढ़ें पर क्लिक करें.
    असल ऐप्लिकेशन के लिए, आपको वह जगह चुननी है जो आपके उपयोगकर्ताओं के आस-पास हो.
  5. टेस्ट मोड में चालू करें पर क्लिक करें. सुरक्षा के नियमों से जुड़ा डिसक्लेमर पढ़ें.
    इस कोडलैब में, बाद में अपने डेटा को सुरक्षित रखने के लिए आपको सुरक्षा के नियम जोड़ने होंगे. अपने डेटाबेस के लिए सुरक्षा नियम जोड़े बिना, ऐप्लिकेशन को सार्वजनिक तौर पर न डिस्ट्रिब्यूट या एक्सपोज़ करें.
  6. बनाएं पर क्लिक करें.

Firebase के लिए Cloud Storage सेट अप करना

वेब ऐप्लिकेशन में फ़ोटो सेव, अपलोड, और शेयर करने के लिए, 'Firebase के लिए Cloud Storage' का इस्तेमाल किया जाता है.

अपने Firebase प्रोजेक्ट में, Firebase के लिए Cloud Storage सेट अप करने का तरीका यहां बताया गया है:

  1. Firebase कंसोल के बाएं पैनल में, बिल्ड को बड़ा करें. इसके बाद, स्टोरेज चुनें.
  2. शुरू करें पर क्लिक करें.
  3. अपने डिफ़ॉल्ट स्टोरेज बकेट के लिए कोई जगह चुनें.
    US-WEST1, US-CENTRAL1, और US-EAST1 के बकेट Google Cloud Storage के लिए "हमेशा मुफ़्त" टियर का फ़ायदा ले सकते हैं. अन्य सभी जगहों के बकेट, Google Cloud Storage के शुल्क और उसके इस्तेमाल के हिसाब से होते हैं.
  4. टेस्ट मोड में शुरू करें पर क्लिक करें. सुरक्षा के नियमों से जुड़ा डिसक्लेमर पढ़ें.
    इस कोडलैब में, बाद में आपको अपने डेटा को सुरक्षित रखने के लिए सुरक्षा के नियम जोड़ने होंगे. अपनी स्टोरेज बकेट के लिए सुरक्षा नियम जोड़े बिना, न किसी ऐप्लिकेशन को सार्वजनिक तौर पर डिस्ट्रिब्यूट या एक्सपोज़ करें.
  5. बनाएं पर क्लिक करें.

4. Firebase का कमांड-लाइन इंटरफ़ेस इंस्टॉल करना

Firebase कमांड-लाइन इंटरफ़ेस (CLI) की मदद से, Firebase होस्टिंग का इस्तेमाल करके अपने वेब ऐप्लिकेशन को स्थानीय तौर पर उपलब्ध कराया जा सकता है. साथ ही, अपने वेब ऐप्लिकेशन को Firebase प्रोजेक्ट में डिप्लॉय भी किया जा सकता है.

  1. npm का यह कमांड चलाकर, सीएलआई इंस्टॉल करें:
npm -g install firebase-tools@latest
  1. पुष्टि करें कि सीएलआई को सही तरीके से इंस्टॉल किया गया है. इसके लिए नीचे दिए गए निर्देश का इस्तेमाल करें:
firebase --version

पक्का करें कि Firebase सीएलआई का वर्शन v13.9.0 या इसके बाद का वर्शन है.

  1. नीचे दिए गए निर्देश की मदद से, Firebase सीएलआई को अनुमति दें:
firebase login

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

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

अगर आपके पास एक से ज़्यादा एनवायरमेंट (प्रोडक्शन, स्टेजिंग वगैरह) हैं, तो उपनाम काम का होता है. हालांकि, इस कोडलैब के लिए, सिर्फ़ default के उपनाम का इस्तेमाल करें.

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

5. AngularFire इंस्टॉल करना

प्रोजेक्ट चलाने से पहले, पक्का करें कि आपने Angular CLI और AngularFire सेट अप किया हो.

  1. कंसोल में यह कमांड चलाएं:
npm install -g @angular/cli
  1. इसके बाद, angularfire-start डायरेक्ट्री के कंसोल में, Angular CLI का यह कमांड चलाएं:
ng add @angular/fire

इससे आपके प्रोजेक्ट के लिए सभी ज़रूरी डिपेंडेंसी इंस्टॉल हो जाएंगी.

  1. जब कहा जाए, तो स्पेस बार का इस्तेमाल करके ng deploy -- hosting से सही का निशान हटाएं. ऐरो बटन और स्पेस बार की मदद से, इन सुविधाओं को चुनें:
    • Authentication
    • Firestore
    • Cloud Messaging
    • Cloud Storage
  2. enter दबाएं और बाकी के निर्देशों का पालन करें.
  3. "AngularFire इंस्टॉल करें" के साथ एक तय मैसेज बनाएं और उसे GitHub रिपॉज़िटरी में भेजें.

6. ऐप्लिकेशन होस्टिंग बैकएंड बनाना

इस सेक्शन में, आपको अपनी Git रिपॉज़िटरी पर किसी शाखा को देखने के लिए, ऐप्लिकेशन होस्टिंग बैकएंड सेट अप करना होगा.

इस सेक्शन के आखिर तक, ऐप्लिकेशन होस्टिंग बैकएंड को GitHub में अपने रिपॉज़िटरी (डेटा स्टोर करने की जगह) से कनेक्ट कर दिया जाएगा. यह अपने-आप फिर से बनाकर, आपके ऐप्लिकेशन का एक नया वर्शन रोल आउट करेगा. ऐसा तब होगा, जब main की ब्रांच में कोई नया कमिटमेंट इंस्टॉल किया जाएगा.

  1. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज पर जाएं:

ऐप्लिकेशन होस्टिंग कंसोल की शुरुआती स्थिति, जिसमें 'शुरू करें' बटन है

  1. बैकएंड बनाने का फ़्लो शुरू करने के लिए, "शुरू करें" पर क्लिक करें. अपने बैकएंड को इस तरह से कॉन्फ़िगर करें:
  2. आपने पहले जो GitHub रिपॉज़िटरी बनाया था उसे कनेक्ट करने के लिए, पहले चरण में दिए गए निर्देशों का पालन करें.
  3. डिप्लॉयमेंट सेटिंग सेट करें:
    1. रूट डायरेक्ट्री को / के तौर पर रखें
    2. लाइव शाखा को main पर सेट करें
    3. अपने-आप रोल आउट होने की सुविधा चालू करना
  4. अपने बैकएंड friendlychat-codelab को नाम दें.
  5. "Firebase वेब ऐप्लिकेशन बनाएं या जोड़ें" में जाकर, "मौजूदा Firebase वेब ऐप्लिकेशन चुनें" ड्रॉप-डाउन से वह वेब ऐप्लिकेशन चुनें जिसे आपने पहले कॉन्फ़िगर किया था.
  6. "पूरा करें और डिप्लॉय करें" पर क्लिक करें. कुछ देर बाद, आपको एक नए पेज पर ले जाया जाएगा. यहां आपको ऐप्लिकेशन होस्टिंग के नए बैकएंड का स्टेटस दिखेगा!
  7. रोल आउट पूरा होने के बाद, "डोमेन" में जाकर अपने मुफ़्त डोमेन पर क्लिक करें. डीएनएस प्रोपेगेशन की वजह से, इसे काम करने में कुछ मिनट लग सकते हैं.

आपने शुरुआती वेब ऐप्लिकेशन डिप्लॉय कर लिया है! जब भी GitHub रिपॉज़िटरी की main शाखा में कोई नया कमिट पुश किया जाता है, तो आपको Firebase कंसोल में नया बिल्ड और रोल आउट शुरू होने की जानकारी दिखेगी. रोल आउट पूरा होने के बाद, आपकी साइट अपने-आप अपडेट हो जाएगी.

ऐप्लिकेशन होस्टिंग कंसोल की शुरुआती स्थिति, जिसमें 'शुरू करें' बटन है

आपको अपने फ़्रेंडली चैट ऐप्लिकेशन की साइन-इन स्क्रीन दिखेगी, जो (अभी तक!) काम नहीं कर रही है.

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

आइए, अब एक रीयल-टाइम चैट ऐप्लिकेशन बनाएं.

7. Firebase इंपोर्ट और कॉन्फ़िगर करना

Firebase को कॉन्फ़िगर करना

आपको Firebase SDK टूल कॉन्फ़िगर करना होगा, ताकि आप यह जान सकें कि किस Firebase प्रोजेक्ट का इस्तेमाल किया जा रहा है.

  1. Firebase कंसोल में प्रोजेक्ट सेटिंग पर जाएं
  2. "आपके ऐप्लिकेशन" कार्ड में, उस ऐप्लिकेशन का निकनेम चुनें जिसके लिए आपको कॉन्फ़िगरेशन ऑब्जेक्ट की ज़रूरत है.
  3. Firebase SDK टूल के स्निपेट पैनल से "कॉन्फ़िगरेशन" चुनें.

आपको पता चलेगा कि आपके लिए एनवायरमेंट फ़ाइल /angularfire-start/src/environments/environment.ts जनरेट की गई थी.

  1. कॉन्फ़िगरेशन ऑब्जेक्ट स्निपेट को कॉपी करें. इसके बाद, उसे angularfire-start/src/firebase-config.js में जोड़ें.

environment.ts

export const environment = {
  firebase: {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.firebasestorage.app",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire सेटअप देखना

आपको पता चलेगा कि आपने Console में जो सुविधाएं चुनी थीं वे /angularfire-start/src/app/app.config.ts फ़ाइल में अपने-आप जुड़ गई हैं. इससे आपके ऐप्लिकेशन को Firebase की सुविधाओं और फ़ंक्शन का इस्तेमाल करने में मदद मिलती है.

8. उपयोगकर्ता के साइन इन करने की सुविधा सेट अप करना

AngularFire अब इस्तेमाल के लिए तैयार है, क्योंकि इसे app.config.ts में इंपोर्ट किया गया है और शुरू किया गया है. अब आपको Firebase Authentication का इस्तेमाल करके, उपयोगकर्ता के साइन इन करने की सुविधा लागू करनी है.

अनुमति वाला डोमेन जोड़ना

Firebase Authentication की मदद से, सिर्फ़ उन डोमेन से साइन इन किया जा सकता है जिनका कंट्रोल आपके पास है. डोमेन की सूची में, ऐप्लिकेशन होस्टिंग के लिए इस्तेमाल किया जाने वाला मुफ़्त डोमेन जोड़ें:

  1. ऐप्लिकेशन होस्टिंग पर जाएं.
  2. अपने बैकएंड का डोमेन कॉपी करें.
  3. पुष्टि करने की सेटिंग पर जाएं.
  4. अनुमति पा चुके डोमेन टैब को चुनें.
  5. डोमेन जोड़ें पर क्लिक करें और अपने ऐप्लिकेशन होस्टिंग बैकएंड का डोमेन चिपकाएं.

Google साइन-इन की मदद से, उपयोगकर्ताओं की पहचान की पुष्टि करना

जब कोई उपयोगकर्ता ऐप्लिकेशन में Google से साइन इन करें बटन पर क्लिक करता है, तो login फ़ंक्शन ट्रिगर होता है. इस कोडलैब के लिए, आपको Firebase को पहचान की पुष्टि करने वाली सेवा के तौर पर Google का इस्तेमाल करने की अनुमति देनी होगी. आप एक पॉप-अप का इस्तेमाल करेंगे, लेकिन Firebase में कई दूसरे तरीके भी उपलब्ध हैं.

  1. सबडायरेक्ट्री /src/app/services/ में, chat.service.ts खोलें.
  2. login फ़ंक्शन ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Signs-in Friendly Chat.
login() {
    signInWithPopup(this.auth, this.provider).then((result) => {
        const credential = GoogleAuthProvider.credentialFromResult(result);
        this.router.navigate(['/', 'chat']);
        return credential;
    })
}

जब उपयोगकर्ता लॉग आउट करें बटन पर क्लिक करता है, तब logout फ़ंक्शन ट्रिगर होता है.

  1. src/app/services/chat.service.ts फ़ाइल पर वापस जाएं.
  2. logout फ़ंक्शन ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Logout of Friendly Chat.
logout() {
    signOut(this.auth).then(() => {
        this.router.navigate(['/', 'login'])
        console.log('signed out');
    }).catch((error) => {
        console.log('sign out error: ' + error);
    })
}

पुष्टि की स्थिति ट्रैक करना

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

  1. src/app/services/chat.service.ts फ़ाइल पर वापस जाएं.
  2. वैरिएबल असाइनमेंट user$ ढूंढें.

chat.service.ts

// observable that is updated when the auth state changes
user$ = user(this.auth);

ऊपर दिया गया कोड AngularFire फ़ंक्शन user को कॉल करता है. यह फ़ंक्शन, पता लगाने वाला उपयोगकर्ता दिखाता है. पुष्टि की स्थिति में बदलाव होने पर (जब उपयोगकर्ता साइन इन या साइन आउट करता है), यह हर बार ट्रिगर होगा. फ़्रेंडली चैट में ऐंग्युलर टेंप्लेट कॉम्पोनेंट, यूज़र इंटरफ़ेस (यूआई) को अपडेट करने के लिए इस ऑब्ज़र्व किए जा सकने वाले टूल का इस्तेमाल करते हैं, ताकि उपयोगकर्ता को हेडर नेविगेशन में दिखाया जा सके और इसी तरह वह अन्य काम कर सके.

ऐप्लिकेशन में लॉग इन करने की जांच करना

  1. "Google Authentication जोड़ना" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. वेब ऐप्लिकेशन में, पेज को रीफ़्रेश करें. इसके बाद, साइन इन बटन और अपने Google खाते का इस्तेमाल करके, ऐप्लिकेशन में लॉग इन करें. अगर आपको auth/operation-not-allowed वाला गड़बड़ी का मैसेज दिखता है, तो पक्का करें कि आपने Firebase कंसोल में, पुष्टि करने वाली सेवा के तौर पर 'Google साइन इन' को चालू किया हो.
  4. लॉग इन करने के बाद, आपको अपनी प्रोफ़ाइल फ़ोटो और उपयोगकर्ता नाम दिखेगा: angularfire-3.png

9. Cloud Firestore पर मैसेज लिखें

इस सेक्शन में, आपको Cloud Firestore में कुछ डेटा डालना होगा, ताकि ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) को पॉप्युलेट किया जा सके. Firebase कंसोल की मदद से, मैन्युअल तरीके से भी ऐसा किया जा सकता है. हालांकि, Cloud Firestore में डेटा डालने का बुनियादी तरीका दिखाने के लिए, आपको ऐप्लिकेशन में ही ऐसा करना होगा.

डेटा मॉडल

Cloud Firestore का डेटा, कलेक्शन, दस्तावेज़, फ़ील्ड, और सब-कलेक्शन में बांटा जाता है. चैट के हर मैसेज को दस्तावेज़ के तौर पर messages नाम के टॉप-लेवल कलेक्शन में सेव किया जाएगा.

688d7bc5fb662b57.png

Cloud Firestore में मैसेज जोड़ना

उपयोगकर्ताओं के लिखे चैट मैसेज सेव करने के लिए, आपको Cloud Firestore का इस्तेमाल करना होगा.

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

  1. src/app/services/chat.service.ts फ़ाइल पर वापस जाएं.
  2. addMessage फ़ंक्शन ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Adds a text or image message to Cloud Firestore.
addMessage = async (
  textMessage: string | null,
  imageUrl: string | null,
): Promise<void | DocumentReference<DocumentData>> => {
  // ignore empty messages
  if (!textMessage && !imageUrl) {
    console.log(
      "addMessage was called without a message",
      textMessage,
      imageUrl,
    );
    return;
  }

  if (this.currentUser === null) {
    console.log("addMessage requires a signed-in user");
    return;
  }

  const message: ChatMessage = {
    name: this.currentUser.displayName,
    profilePicUrl: this.currentUser.photoURL,
    timestamp: serverTimestamp(),
    uid: this.currentUser?.uid,
  };

  textMessage && (message.text = textMessage);
  imageUrl && (message.imageUrl = imageUrl);

  try {
    const newMessageRef = await addDoc(
      collection(this.firestore, "messages"),
      message,
    );
    return newMessageRef;
  } catch (error) {
    console.error("Error writing new message to Firebase Database", error);
    return;
  }
};

मैसेज भेजने की जांच करना

  1. " Firestore में नई चैट पोस्ट करें" के लिए तय किया गया मैसेज बनाएं और उसे अपने GitHub रिपॉज़िटरी में भेजें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. लॉग इन करने के बाद, "नमस्ते!" जैसा मैसेज लिखें. इसके बाद, भेजें पर क्लिक करें. इससे Cloud Firestore में मैसेज लिख दिया जाएगा. हालांकि, आपको अभी तक अपने असल वेब ऐप्लिकेशन में डेटा नहीं दिखेगा, क्योंकि आपको अब भी डेटा को वापस पाने की प्रोसेस लागू करनी है (कोडलैब का अगला सेक्शन).
  4. आपके पास अपने Firebase कंसोल में, हाल ही में जोड़ा गया मैसेज देखने का विकल्प है. एम्युलेटर सुइट का यूज़र इंटरफ़ेस (यूआई) खोलें. बिल्ड सेक्शन में फ़ायरस्टोर डेटाबेस पर क्लिक करें (या यहां क्लिक करें और आपको अपने जोड़े गए नए मैसेज के साथ मैसेज का कलेक्शन दिखेगा:

6812efe7da395692.png

10. मैसेज पढ़ना

मैसेज सिंक करना

ऐप्लिकेशन में मैसेज पढ़ने के लिए, आपको एक ऐसा ऑब्ज़र्वेबल जोड़ना होगा जो डेटा में बदलाव होने पर ट्रिगर होगा. इसके बाद, आपको एक यूज़र इंटरफ़ेस (यूआई) एलिमेंट बनाना होगा, जो नए मैसेज दिखाएगा.

आपको एक कोड जोड़ना होगा, जो ऐप्लिकेशन के नए जोड़े गए मैसेज को सुन सकता है. इस कोड में, आपको messages कलेक्शन का स्नैपशॉट मिलेगा. लोड होने के बाद आपको चैट का बहुत लंबा इतिहास नहीं दिखेगा. इसलिए, आपको चैट के सिर्फ़ आखिरी 12 मैसेज दिखेंगे.

  1. src/app/services/chat.service.ts फ़ाइल पर वापस जाएं.
  2. फ़ंक्शन loadMessages ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Loads chat message history and listens for upcoming ones.
loadMessages = () => {
  // Create the query to load the last 12 messages and listen for new ones.
  const recentMessagesQuery = query(collection(this.firestore, 'messages'), orderBy('timestamp', 'desc'), limit(12));
  // Start listening to the query.
  return collectionData(recentMessagesQuery);
}

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

collectionData फ़ंक्शन, स्नैपशॉट का इस्तेमाल करता है. क्वेरी से मैच करने वाले दस्तावेज़ों में कोई बदलाव होने पर, कॉलबैक फ़ंक्शन ट्रिगर हो जाएगा. ऐसा तब हो सकता है, जब किसी मैसेज को मिटाया गया हो, उसमें बदलाव किया गया हो या कोई नया मैसेज जोड़ा गया हो. इस बारे में ज़्यादा जानने के लिए, Cloud Firestore के दस्तावेज़ पढ़ें.

मैसेज सिंक करने की जांच करना

  1. "यूज़र इंटरफ़ेस में नई चैट दिखाएं" वाला तय मैसेज बनाएं और उसे GitHub रिपॉज़िटरी में भेजें.
  2. Firebase कंसोल में ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने तक इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. आपने डेटाबेस में पहले जो मैसेज बनाए थे वे FriendlyChat के यूज़र इंटरफ़ेस (यूआई) में दिखने चाहिए. इसके लिए, नीचे देखें. नए मैसेज लिखें. ये तुरंत दिखने लगेंगे.
  4. (ज़रूरी नहीं) एम्युलेटर सुइट के Firestore सेक्शन में जाकर, मैन्युअल तरीके से नए मैसेज जोड़े जा सकते हैं, उनमें बदलाव किए जा सकते हैं या उन्हें मिटाया जा सकता है. ये बदलाव, यूज़र इंटरफ़ेस (यूआई) में दिखेंगे.

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

कोणीय-2.png

11. एआई की सुविधाएं जोड़ना

चैट ऐप्लिकेशन में सहायक सुविधाओं को जोड़ने के लिए, आपको Google के एआई का इस्तेमाल करना होगा.

Google के एआई एपीआई पासकोड को पाना

  1. Google AI Studio पर जाएं और एपीआई पासकोड बनाएं पर क्लिक करें
  2. वह Firebase प्रोजेक्ट चुनें जिसे आपने इस कोडलैब के लिए बनाया है. प्रॉम्प्ट, Google Cloud प्रोजेक्ट के लिए होता है. हालांकि, हर Firebase प्रोजेक्ट, Google Cloud प्रोजेक्ट होता है.
  3. मौजूदा प्रोजेक्ट में एपीआई पासकोड बनाएं पर क्लिक करें
  4. इससे बनने वाली एपीआई कुंजी को कॉपी करें

एक्सटेंशन इंस्टॉल करना

यह एक्सटेंशन, एक क्लाउड फ़ंक्शन डिप्लॉय करेगा. यह फ़ंक्शन, Firestore में messages कलेक्शन में नया दस्तावेज़ जोड़े जाने पर ट्रिगर होगा. यह फ़ंक्शन, Gemini को कॉल करेगा और दस्तावेज़ में दिए गए response फ़ील्ड में अपना जवाब लिख देगा.

  1. Gemini API की मदद से चैटबॉट बनाएं एक्सटेंशन पेज पर, Firebase कंसोल में इंस्टॉल करें पर क्लिक करें.
  2. स्क्रीन पर दिए गए निर्देशों का पालन करें. एक्सटेंशन कॉन्फ़िगर करें चरण पर पहुंचने के बाद, पैरामीटर की इन वैल्यू को सेट करें:
    • Gemini API की सेवा देने वाली कंपनी: Google AI
    • Google एआई एपीआई पासकोड: पहले बनाई गई पासकोड चिपकाएं और सीक्रेट बनाएं पर क्लिक करें.
    • Firestore कलेक्शन का पाथ: messages
    • प्रॉम्प्ट फ़ील्ड: text
    • रिस्पॉन्स फ़ील्ड: response
    • ऑर्डर फ़ील्ड: timestamp
    • संदर्भ: Keep your answers short, informal, and helpful. Use emojis when possible.
  3. एक्सटेंशन इंस्टॉल करें पर क्लिक करें
  4. एक्सटेंशन इंस्टॉल होने का इंतज़ार करें

एआई की सुविधा को टेस्ट करें

फ़्रेंडली चैट में पहले से ही एक कोड मौजूद होता है, जो एआई एक्सटेंशन से मिलने वाले जवाबों को पढ़ता है. इसे आज़माने के लिए, आपको बस एक नया चैट मैसेज भेजना होगा!

  1. FriendlyChat खोलें और कोई मैसेज भेजें.
  2. कुछ देर बाद, आपको मैसेज के साथ जवाब पॉप-अप दिखेगा. इसके आखिर में एक ✨ ai generated नोट होता है, ताकि यह साफ़ तौर पर बताया जा सके कि इसे जनरेटिव एआई की मदद से बनाया गया है, न कि असली उपयोगकर्ता की मदद से.

12. इमेज भेजें

अब आपको इमेज शेयर करने की सुविधा जोड़नी होगी.

Cloud Firestore, स्ट्रक्चर्ड डेटा को सेव करने के लिए अच्छा है, जबकि फ़ाइलों को सेव करने के लिए Cloud Storage बेहतर है. Firebase के लिए Cloud Storage, फ़ाइल/ब्लॉब स्टोरेज सेवा है. इसका इस्तेमाल, उपयोगकर्ता के हमारे ऐप्लिकेशन का इस्तेमाल करके शेयर की गई इमेज को सेव करने के लिए किया जाता है.

Cloud Storage में इमेज सेव करें

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

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

अब आपको इमेज भेजने की सुविधा जोड़नी होगी:

  1. फ़ाइल src/chat.service.ts पर वापस जाएं.
  2. फ़ंक्शन saveImageMessage ढूंढें.
  3. पूरे फ़ंक्शन को इस कोड से बदलें.

chat.service.ts

// Saves a new message containing an image in Firestore.
// This first saves the image in Firebase storage.
saveImageMessage = async(file: any) => {
  try {
    // 1 - Add a message with a loading icon that will get updated with the shared image.
    const messageRef = await this.addMessage(null, this.LOADING_IMAGE_URL);

    // 2 - Upload the image to Cloud Storage.
    const filePath = `${this.auth.currentUser?.uid}/${file.name}`;
    const newImageRef = ref(this.storage, 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.
    messageRef ?
    await updateDoc(messageRef, {
      imageUrl: publicImageUrl,
      storageUri: fileSnapshot.metadata.fullPath
    }): null;
  } catch (error) {
    console.error('There was an error uploading a file to Cloud Storage:', error);
  }
}

इमेज भेजने की सुविधा की जांच करना

  1. "इमेज पोस्ट करने की सुविधा जोड़ें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
  3. फ़्रेंडली चैट को रीफ़्रेश करें. लॉग इन करने के बाद, सबसे नीचे बाईं ओर मौजूद, इमेज अपलोड करें बटन कोणीय-4.png पर क्लिक करें. इसके बाद, फ़ाइल पिकर का इस्तेमाल करके कोई इमेज फ़ाइल चुनें. अगर आपको कोई इमेज चाहिए, तो बेझिझक कॉफ़ी कप की इस बढ़िया तस्वीर का इस्तेमाल करें.
  4. आपकी चुनी गई इमेज के साथ, ऐप्लिकेशन के यूज़र इंटरफ़ेस (यूआई) में एक नया मैसेज दिखेगा: कोणीय-2.png

अगर साइन इन किए बिना इमेज जोड़ने की कोशिश की जाती है, तो आपको गड़बड़ी का एक मैसेज दिखेगा. इसमें आपको बताया जाएगा कि इमेज जोड़ने के लिए, आपको साइन इन करना होगा.

13. सूचनाएं दिखाओ

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

FCM सर्विस वर्कर को जोड़ना

वेब ऐप्लिकेशन के लिए किसी सर्विस वर्कर की ज़रूरत होती है, जिसे वेब सूचनाएं मिलेंगी और वह उन्हें दिखाएगा.

AngularFire को जोड़ते समय, मैसेज सेवा देने वाली कंपनी को पहले ही सेट अप करना चाहिए था. पक्का करें कि /angularfire-start/src/app/app.config.ts के इंपोर्ट सेक्शन में नीचे दिया गया कोड मौजूद हो

provideMessaging(() => {
    return getMessaging();
}),

app/app.config.ts

सर्विस वर्कर को सिर्फ़ 'Firebase क्लाउड से मैसेज' SDK टूल लोड करके शुरू करना होता है. ऐसा करने से, सूचनाएं दिखाने का काम सही तरीके से होता है.

FCM डिवाइस टोकन पाना

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

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

chat.service.ts

  1. फ़ंक्शन saveMessagingDeviceToken ढूंढें.
  2. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

// Saves the messaging device token to Cloud Firestore.
saveMessagingDeviceToken= async () => {
    try {
      const currentToken = await getToken(this.messaging);
      if (currentToken) {
        console.log('Got FCM device token:', currentToken);
        // Saving the Device Token to Cloud Firestore.
        const tokenRef = doc(this.firestore, 'fcmTokens', currentToken);
        await setDoc(tokenRef, { uid: this.auth.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(this.messaging, (message) => {
          console.log(
            'New foreground notification from Firebase Messaging!',
            message.notification
          );
        });
      } else {
        // Need to request permissions to show notifications.
        this.requestNotificationsPermissions();
      }
    } catch(error) {
      console.error('Unable to get messaging token.', error);
    };
}

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

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

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

8b9d0c66dc36153d.png

  1. फ़ाइल src/app/services/chat.service.ts पर वापस जाएं.
  2. requestNotificationsPermissions फ़ंक्शन ढूंढें.
  3. पूरे फ़ंक्शन को नीचे दिए गए कोड से बदलें.

chat.service.ts

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

अपना डिवाइस टोकन पाना

  1. "इमेज पोस्ट करने की सुविधा जोड़ें" वाला कमिट मैसेज बनाएं और उसे GitHub रिपॉज़िटरी में भेजें.
  2. Firebase कंसोल में ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने तक इंतज़ार करें.
  3. FriendlyChat को रीफ़्रेश करें. लॉग इन करने के बाद, सूचनाओं की अनुमति वाला डायलॉग बॉक्स दिखेगा: bd3454e6dbfb6723.png
  4. अनुमति दें पर क्लिक करें.
  5. अपने ब्राउज़र का JavaScript कंसोल खोलें. आपको यह मैसेज दिखेगा: Got FCM device token: cWL6w:APA91bHP...4jDPL_A-wPP06GJp1OuekTaTZI5K2Tu
  6. अपने डिवाइस का टोकन कॉपी करें. कोडलैब के अगले चरण में आपको इसकी ज़रूरत पड़ेगी.

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

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

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

अगर आपका ऐप्लिकेशन फ़ोरग्राउंड में है, तो आपको JavaScript कंसोल में सूचना दिखेगी.

अगर आपका ऐप्लिकेशन बैकग्राउंड में है, तो आपको ब्राउज़र में एक सूचना दिखेगी. यह सूचना इस उदाहरण में दिखाई गई है:

de79e8638a45864c.png

14. Cloud Firestore के सुरक्षा नियम

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

Cloud Firestore, ऐक्सेस करने के अधिकार, सुरक्षा, और डेटा की पुष्टि करने के लिए, नियमों की किसी खास भाषा का इस्तेमाल करता है.

इस कोडलैब की शुरुआत में Firebase प्रोजेक्ट सेट अप करते समय, आपने "टेस्ट मोड" के डिफ़ॉल्ट सुरक्षा नियमों को इस्तेमाल करने का विकल्प चुना, ताकि आपने डेटास्टोर के ऐक्सेस पर पाबंदी न लगाई हो. 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;
    }
  }
}

आपके एम्युलेटर सुइट पर सुरक्षा के नियम अपने-आप अपडेट हो जाएंगे.

Cloud Storage के सुरक्षा नियम देखना

ऐक्सेस के अधिकार, सुरक्षा, और डेटा की पुष्टि करने के लिए, Cloud Storage के लिए खास नियमों वाली भाषा का इस्तेमाल करता है.

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

rules_version = '2';

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

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

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

इसे लागू करने के लिए, इन नियमों का इस्तेमाल किया जा सकता है:

storage.rules

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;
    }
  }
}

15. बधाई हो!

आपने रीयल-टाइम चैट वेब ऐप्लिकेशन बनाने के लिए, Firebase का इस्तेमाल किया है!

आपने क्या कवर किया है

  • Firebase App Hosting
  • Firebase से पुष्टि करना
  • Cloud Firestore
  • Cloud Storage के लिए Firebase SDK टूल
  • Firebase क्लाउड से मैसेज
  • Firebase प्रदर्शन मॉनिटर करना

अगले चरण

ज़्यादा जानें

16. [ज़रूरी नहीं] ऐप्लिकेशन की जांच की सुविधा की मदद से लागू करना

Firebase App Check की मदद से, अपनी सेवाओं को अनचाहे ट्रैफ़िक से सुरक्षित किया जा सकता है. साथ ही, अपने बैकएंड को गलत इस्तेमाल से बचाया जा सकता है. इस चरण में, आपको क्रेडेंशियल की पुष्टि करने की सुविधा जोड़नी होगी. साथ ही, App Check और reCAPTCHA Enterprise की मदद से, बिना अनुमति वाले क्लाइंट को ब्लॉक करना होगा.

सबसे पहले, आपको ऐप्लिकेशन की जांच करने की सुविधा और reCaptcha को चालू करना होगा.

reCaptcha Enterprise को चालू करना

  1. Cloud Console में, सुरक्षा में जाकर reCaptcha Enterprise को ढूंढें और चुनें.
  2. निर्देश के मुताबिक सेवा चालू करें और कुंजी बनाएं पर क्लिक करें.
  3. प्रॉम्प्ट के मुताबिक डिसप्ले नेम डालें. साथ ही, प्लैटफ़ॉर्म टाइप के तौर पर वेबसाइट को चुनें.
  4. डिप्लॉय किए गए अपने यूआरएल डोमेन सूची में जोड़ें और पक्का करें कि "चेकबॉक्स चैलेंज का इस्तेमाल करें" विकल्प नहीं चुना गया है.
  5. कुंजी बनाएं पर क्लिक करें और जनरेट किए गए पासकोड को सुरक्षित रखने के लिए, कहीं सेव करें. आपको इस चरण में बाद में इसकी ज़रूरत पड़ेगी.

ऐप्लिकेशन की जांच करने की सुविधा चालू करना

  1. Firebase कंसोल में, बाएं पैनल में बिल्ड सेक्शन पर जाएं.
  2. ऐप्लिकेशन की जांच पर क्लिक करें. इसके बाद, ऐप्लिकेशन जांच पर जाने के लिए, साइन इन करने का तरीका टैब पर क्लिक करें.
  3. रजिस्टर करें पर क्लिक करें और पूछे जाने पर, अपनी reCaptcha Enterprise कुंजी डालें. इसके बाद, सेव करें पर क्लिक करें.
  4. API व्यू में, स्टोरेज चुनें और लागू करें पर क्लिक करें. Cloud Firestore के लिए भी ऐसा ही करें.

App Check अब लागू हो जाना चाहिए! अपने ऐप्लिकेशन को रीफ़्रेश करें और चैट मैसेज देखने या भेजने की कोशिश करें. आपको गड़बड़ी का यह मैसेज दिखेगा:

Uncaught Error in snapshot listener: FirebaseError: [code=permission-denied]: Missing or insufficient permissions.

इसका मतलब है कि App Check, पुष्टि नहीं किए गए अनुरोधों को डिफ़ॉल्ट रूप से ब्लॉक कर रहा है. अब आपके ऐप्लिकेशन में पुष्टि करने की सुविधा जोड़ते हैं.

अपनी environment.ts फ़ाइल पर जाएं और environment ऑब्जेक्ट में reCAPTCHAEnterpriseKey जोड़ें.

export const environment = {
  firebase: {
    apiKey: 'API_KEY',
    authDomain: 'PROJECT_ID.firebaseapp.com',
    databaseURL: 'https://PROJECT_ID.firebaseio.com',
    projectId: 'PROJECT_ID',
    storageBucket: 'PROJECT_ID.firebasestorage.app',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

key की वैल्यू को अपने reCaptcha Enterprise टोकन से बदलें.

इसके बाद, app.config.ts फ़ाइल पर जाएं और ये इंपोर्ट जोड़ें:

import { getApp } from '@angular/fire/app';
import {
  ReCaptchaEnterpriseProvider,
  initializeAppCheck,
  provideAppCheck,
} from '@angular/fire/app-check';

उसी app.config.ts फ़ाइल में, यह ग्लोबल वैरिएबल एलान जोड़ें:

declare global {
  var FIREBASE_APPCHECK_DEBUG_TOKEN: boolean;
}

@NgModule({ ...

इंपोर्ट में, ReCaptchaEnterpriseProvider की मदद से ऐप्लिकेशन जांचने की सुविधा को शुरू करने की सुविधा जोड़ें. साथ ही, isTokenAutoRefreshEnabled को true पर सेट करें, ताकि टोकन अपने-आप रीफ़्रेश हो सकें.

imports: [
BrowserModule,
AppRoutingModule,
CommonModule,
FormsModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideAppCheck(() => {
const appCheck = initializeAppCheck(getApp(), {
  provider: new ReCaptchaEnterpriseProvider(
  environment.reCAPTCHAEnterpriseKey.key
  ),
  isTokenAutoRefreshEnabled: true,
  });
  if (location.hostname === 'localhost') {
    self.FIREBASE_APPCHECK_DEBUG_TOKEN = true;
  }
  return appCheck;
}),

लोकल टेस्टिंग की अनुमति देने के लिए, self.FIREBASE_APPCHECK_DEBUG_TOKEN को true पर सेट करें. जब localhost में ऐप्लिकेशन को रीफ़्रेश किया जाता है, तो यह कंसोल में इस तरह का डीबग टोकन लॉग करेगा:

App Check debug token: CEFC0C76-7891-494B-B764-349BDFD00D00. You will need to add it to your app's App Check settings in the Firebase console for it to work.

अब Firebase कंसोल में, 'ऐप्लिकेशन जांच' के ऐप्लिकेशन व्यू पर जाएं.

ओवरफ़्लो मेन्यू पर क्लिक करें और डीबग टोकन मैनेज करें चुनें.

इसके बाद, डीबग टोकन जोड़ें पर क्लिक करें और दिए गए निर्देशों के मुताबिक अपने कंसोल से डीबग टोकन चिपकाएं.

chat.service.ts फ़ाइल पर जाएं और यहां दी गई इंपोर्ट की गई जानकारी जोड़ें:

import { AppCheck } from '@angular/fire/app-check';

उसी chat.service.ts फ़ाइल में, दूसरी Firebase सेवाओं के साथ-साथ ऐप्लिकेशन जांच की सुविधा भी इंजेक्ट करें.

export class ChatService {
appCheck: AppCheck = inject(AppCheck);
...
  1. &quot;बिना अनुमति वाले क्लाइंट को App Check की मदद से ब्लॉक करें&quot; कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
  2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.

बधाई हो! ऐप्लिकेशन की जांच करने की सुविधा अब आपके ऐप्लिकेशन पर काम करने लगेगी.