इस पेज का अनुवाद Cloud Translation API से किया गया है.

AngularFire वेब कोडलैब

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

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

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

आपको क्या सीखने को मिलेगा

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

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

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

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

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

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

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

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

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

git add .

git commit -m "codelab starting point"

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

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

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

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

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

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

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

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

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

ऐप्लिकेशन होस्टिंग का इस्तेमाल करने के लिए, आपका Firebase प्रोजेक्ट Blaze प्राइसिंग प्लान पर होना चाहिए. इसका मतलब है कि यह किसी क्लाउड बिलिंग खाते से जुड़ा है.

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

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

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

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

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

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

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

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

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

Cloud Firestore को चालू करना

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

आपको Cloud Firestore को चालू करना होगा:

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

Cloud Storage चालू करना

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

आपको Cloud Storage को चालू करना होगा:

Firebase कंसोल में, स्टोरेज पर जाएं.
शुरू करें > टेस्ट मोड में शुरू करें > आगे बढ़ें पर क्लिक करें.
इस कोडलैब में बाद में, आपको डेटा सुरक्षित करने के लिए सुरक्षा के नियम जोड़ने होंगे. अपनी स्टोरेज बकेट के लिए सुरक्षा नियम जोड़े बिना, किसी ऐप्लिकेशन को सार्वजनिक तौर पर उपलब्ध न करें या उसे सार्वजनिक तौर पर न दिखाएं.
बकेट की जगह पहले से चुनी जानी चाहिए (पिछले चरण में Firestore सेट अप करने की वजह से).
हो गया पर क्लिक करें.

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

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

नीचे दिए गए npm कमांड की मदद से सीएलआई इंस्टॉल करें:

npm -g install firebase-tools@latest

नीचे दिए गए निर्देश का इस्तेमाल करके पुष्टि करें कि सीएलआई को सही तरीके से इंस्टॉल किया गया है:

firebase --version

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

नीचे दिए गए कमांड की मदद से, Firebase सीएलआई को अनुमति दें:

firebase login

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

यह पक्का करें कि आपकी कमांड लाइन, आपके ऐप्लिकेशन की लोकल angularfire-start डायरेक्ट्री को ऐक्सेस कर रही हो.
नीचे दिए गए कमांड की मदद से, अपने ऐप्लिकेशन को अपने Firebase प्रोजेक्ट से जोड़ें:

firebase use --add

जब कहा जाए, तब अपना प्रोजेक्ट आईडी चुनें. इसके बाद, अपने Firebase प्रोजेक्ट को एक उपनाम दें.

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

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

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

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

कंसोल में, ये कमांड चलाएं:

npm install -g @angular/cli

इसके बाद, angularfire-start डायरेक्ट्री के कंसोल में, नीचे दिया गया Angular CLI कमांड चलाएं:

ng add @angular/fire

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

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

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

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

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

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

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

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

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

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

आपको अपने फ़्रेंडलीChat ऐप्लिकेशन की साइन इन स्क्रीन दिखनी चाहिए. यह अब तक काम नहीं कर रही है.

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

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

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

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

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

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

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

कॉन्फ़िगरेशन ऑब्जेक्ट स्निपेट कॉपी करें, फिर उसे 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.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
  },
};

AngularFire सेटअप देखें

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

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

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

कोई अधिकृत डोमेन जोड़ें

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

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

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

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

`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 फ़ंक्शन ट्रिगर होता है.

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

`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 एक फ़ंक्शन उपलब्ध कराता है, जिससे वह निगरानी की जा सकती है जो हर बार पुष्टि करने की स्थिति बदलने पर अपडेट हो जाता है. इसे पहले ही लागू किया जा चुका है, लेकिन इस पर एक नज़र डालना ज़रूरी है.

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

`chat.service.ts`

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

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

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

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

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

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

डेटा मॉडल

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

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

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

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

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

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

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

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

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

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

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

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

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

`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 मैसेज को सुनने के लिए भी एक सीमा लागू की जा रही है. साथ ही, 12 सबसे नए मैसेज पाने के लिए, orderBy('timestamp', 'desc') का इस्तेमाल करके मैसेज को तारीख के हिसाब से क्रम में लगाया जा रहा है.

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

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

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

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

एंगुलरफ़ायर-2.png

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

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

Google AI API कुंजी पाएं

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

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

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

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

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

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

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

12. इमेज भेजें

अब इमेज शेयर करने वाली सुविधा जोड़ी जा सकती है.

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

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

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

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

अब इमेज भेजने के लिए, यह सुविधा जोड़ी जा सकती है:

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

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

इमेज भेजने की प्रोसेस की जांच करना

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

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

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

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

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

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

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

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

`app/app.module.ts`

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

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

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

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

`chat.service.ts`

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

`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() वाले तरीके को कॉल किया जाता है. इस तरीके में एक ब्राउज़र डायलॉग दिखेगा, जिसमें इस अनुमति ( इस्तेमाल किए जा सकने वाले ब्राउज़र में) के लिए अनुमति मांगी जाएगी.

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

`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.');
    }
}

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

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

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

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

Firebase कंसोल का क्लाउड से मैसेज टैब खोलें.
"नई सूचना" पर क्लिक करें
सूचना का शीर्षक और सूचना टेक्स्ट डालें.
स्क्रीन की दाईं ओर, "टेस्ट मैसेज भेजें" पर क्लिक करें
अपने ब्राउज़र के JavaScript कंसोल से कॉपी किया गया डिवाइस टोकन डालें. इसके बाद, प्लस ("+") साइन पर क्लिक करें
"जांच करें" पर क्लिक करें

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

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

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

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

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

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

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

rules_version = '2';

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

चीज़ों पर पाबंदी लगाने के लिए, आपको इन नियमों का इस्तेमाल करके नियमों को अपडेट करना होगा:

firestore.rules

rules_version = '2';

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

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

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

Firebase के लिए 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 से पढ़ने की अनुमति दें
पक्का करें कि अपलोड की गई फ़ाइलें इमेज हों
अपलोड की जा सकने वाली इमेज का साइज़ 5 एमबी से ज़्यादा न रखें

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

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 प्रदर्शन मॉनिटर करना

अगले चरण

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

firebase.google.com

16. [ज़रूरी नहीं] ऐप्लिकेशन की जांच करके लागू करें

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

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

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

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

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

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

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

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

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

अपनी 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.appspot.com',
    messagingSenderId: 'SENDER_ID',
    appId: 'APP_ID',
    measurementId: 'G-MEASUREMENT_ID',
  },
  reCAPTCHAEnterpriseKey: {
    key: "Replace with your recaptcha enterprise site key"
  },
};

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

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

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

उसी app.module.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);
...

"ऐप्लिकेशन की जांच की मदद से, बिना अनुमति वाले क्लाइंट को ब्लॉक करें" मैसेज के साथ एक प्रतिबद्धता बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें.
Firebase कंसोल में ऐप्लिकेशन होस्टिंग पेज खोलें और अपने नए रोल आउट के पूरा होने तक इंतज़ार करें.

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

AngularFire वेब कोडलैब

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

आपको क्या सीखने को मिलेगा

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

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

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

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

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

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

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

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

Cloud Firestore को चालू करना

Cloud Storage चालू करना

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

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

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

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

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

AngularFire सेटअप देखें

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

कोई अधिकृत डोमेन जोड़ें

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

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

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

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

डेटा मॉडल

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

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

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

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

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

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

Google AI API कुंजी पाएं

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

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

12. इमेज भेजें

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

इमेज भेजने की प्रोसेस की जांच करना

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

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

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

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

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

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

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

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

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

15. बधाई हो!

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

अगले चरण

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

16. [ज़रूरी नहीं] ऐप्लिकेशन की जांच करके लागू करें