Firebase एक्सटेंशन की मदद से, अपने वेब ऐप्लिकेशन में तुरंत नई सुविधाएं जोड़ें

1. शुरुआती जानकारी

लक्ष्य

इस कोडलैब में, Firebase एक्सटेंशन की मदद से, ऑनलाइन मार्केटप्लेस ऐप्लिकेशन में सुविधाएं जोड़ी जाएंगी. इस कोडलैब से, आपको यह समझने में मदद मिलेगी कि एक्सटेंशन की मदद से, ऐप्लिकेशन को डेवलप करने और मैनेज करने में कम समय कैसे लगता है.

आपको क्या बनाने को मिलेगा

इस कोडलैब में, आपको ऑनलाइन मार्केटप्लेस वेब ऐप्लिकेशन में ये सुविधाएं जोड़ने का तरीका बताया जाएगा:

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

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

• इस्तेमाल के सामान्य उदाहरणों के लिए एक्सटेंशन खोजने का तरीका
• अपने प्रोजेक्ट में एक्सटेंशन इंस्टॉल और कॉन्फ़िगर करने का तरीका
• अपने प्रोजेक्ट में एक्सटेंशन को मैनेज करने (मॉनिटर करने, अपडेट करने, और अनइंस्टॉल करने) का तरीका

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

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

• ऐसा कंप्यूटर जिस पर नया वेब ब्राउज़र इंस्टॉल हो. हमारा सुझाव है कि आप Chrome का इस्तेमाल करें
• Google खाता

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

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

1. अपने Google खाते का इस्तेमाल करके, Firebase कंसोल में साइन इन करें.
2. नया प्रोजेक्ट बनाने के लिए, बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, FriendlyMarket.
   
3. जारी रखें पर क्लिक करें.
4. अगर आपसे कहा जाए, तो Firebase की शर्तें पढ़ें और स्वीकार करें. इसके बाद, जारी रखें पर क्लिक करें.
5. (ज़रूरी नहीं) Firebase कंसोल में एआई की मदद पाने की सुविधा चालू करें. इसे "Firebase में Gemini" कहा जाता है.
6. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, Google Analytics के विकल्प को टॉगल करके बंद करें.
7. प्रोजेक्ट बनाएं पर क्लिक करें. इसके बाद, प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

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

• उपयोगकर्ताओं की आसानी से पहचान करने के लिए, Firebase से पुष्टि करने की सुविधा
• क्लाउड में स्ट्रक्चर्ड डेटा सेव करने के लिए Firebase रीयलटाइम डेटाबेस का इस्तेमाल करें. साथ ही, डेटा अपडेट होने पर तुरंत सूचना पाएं
• क्लाउड में इमेज सेव करने के लिए, Firebase के लिए Cloud Storage

अब Firebase कंसोल का इस्तेमाल करके, उन Firebase प्रॉडक्ट को चालू और कॉन्फ़िगर करें.

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

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

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

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

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

ईमेल से लॉगिन करने की सुविधा चालू करना

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

1. Firebase कंसोल में, बाएं पैनल में मौजूद Develop पर क्लिक करें.
2. पुष्टि पर क्लिक करें. इसके बाद, साइन-इन करने का तरीका टैब पर क्लिक करें. इसके अलावा, साइन-इन करने का तरीका टैब पर सीधे जाने के लिए, यहां क्लिक करें.
3. साइन-इन की सुविधा देने वाली कंपनियां सूची में, ईमेल/पासवर्ड पर क्लिक करें. इसके बाद, चालू करें स्विच को चालू करें और फिर सेव करें पर क्लिक करें.

रीयलटाइम डेटाबेस चालू करना

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

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

अपने डेटाबेस के लिए सुरक्षा से जुड़े नियम सेट करना

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

1. Realtime Database डैशबोर्ड में सबसे ऊपर, नियम टैब पर क्लिक करें.

2. नीचे दिए गए नियम के सेट को कॉपी करें और नियम टैब में मौजूद नियमों के फ़ील्ड में चिपकाएं:

   {
     "rules": {
       ".read": false,
       ".write": false,
         "drafts": {
           ".indexOn": "seller",
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
       "sellers": {
           ".read": "auth.uid !== null",
           ".write": "auth.uid !== null"
       },
         "forsale": {
           ".read": true,
           ".write": "auth.uid !== null"
         }
     }
   }
   

3. पब्लिश करें पर क्लिक करें.

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

यह ऐप्लिकेशन, बिक्री के लिए उपलब्ध आइटम की इमेज सेव करने के लिए Cloud Storage for Firebase का इस्तेमाल करता है.

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

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

अपनी स्टोरेज बकेट के लिए सुरक्षा नियम सेट अप करना

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

1. स्टोरेज डैशबोर्ड में सबसे ऊपर, नियम टैब पर क्लिक करें.

2. नीचे दिए गए नियम के सेट को कॉपी करें और नियम टैब में मौजूद नियमों के फ़ील्ड में चिपकाएं:

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
       match /friendlymarket/{ImageId} {
         allow read;
         allow write: if request.auth != null;
       }
     }
   }
   

3. पब्लिश करें पर क्लिक करें.

3. सैंपल ऐप्लिकेशन चलाना

StackBlitz प्रोजेक्ट को फ़ोर्क करना

इस कोडलैब में, StackBlitz का इस्तेमाल करके एक ऐप्लिकेशन बनाया और डिप्लॉय किया जाता है. यह एक ऑनलाइन एडिटर है, जिसमें Firebase के कई वर्कफ़्लो इंटिग्रेट किए गए हैं. StackBlitz का इस्तेमाल करने के लिए, किसी सॉफ़्टवेयर को इंस्टॉल करने या खास StackBlitz खाते की ज़रूरत नहीं होती.

StackBlitz की मदद से, प्रोजेक्ट को दूसरों के साथ शेयर किया जा सकता है. जिन लोगों के पास आपके StackBlitz प्रोजेक्ट का यूआरएल है वे आपका कोड देख सकते हैं और आपके प्रोजेक्ट को फ़ोर्क कर सकते हैं. हालांकि, वे आपके StackBlitz प्रोजेक्ट में बदलाव नहीं कर सकते.

1. शुरुआती कोड के लिए, इस यूआरएल पर जाएं: https://stackblitz.com/edit/friendlymarket-codelab.
2. StackBlitz पेज पर सबसे ऊपर, Fork पर क्लिक करें.

अब आपके पास शुरुआती कोड की एक कॉपी है, जो आपके StackBlitz प्रोजेक्ट के तौर पर है. आपने साइन इन नहीं किया है, इसलिए आपके "खाते" को @anonymous कहा जाता है. हालांकि, इससे कोई फ़र्क़ नहीं पड़ता. प्रोजेक्ट का नाम और यूआरएल यूनीक होना चाहिए. आपकी सभी फ़ाइलें और बदलाव, इस StackBlitz प्रोजेक्ट में सेव किए जाते हैं.

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

1. StackBlitz में, अपनी src/firebase-config.js फ़ाइल देखें. आपको Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को यहां जोड़ना होगा.
2. Firebase कंसोल में वापस जाएं. इसके बाद, सबसे ऊपर बाईं ओर मौजूद प्रोजेक्ट की खास जानकारी पर क्लिक करके, अपने प्रोजेक्ट की खास जानकारी वाले पेज पर जाएं.
3. अपने प्रोजेक्ट के खास जानकारी वाले पेज के बीच में मौजूद, वेब आइकॉन पर क्लिक करके नया Firebase वेब ऐप्लिकेशन बनाएं.
4. ऐप्लिकेशन को FriendlyMarket Codelab निकनेम से रजिस्टर करें.
5. इस कोडलैब के लिए, इस ऐप्लिकेशन के लिए Firebase होस्टिंग भी सेट अप करें के बगल में मौजूद बॉक्स को न चुनें. इसके बजाय, आपको StackBlitz के प्रीव्यू पैन का इस्तेमाल करना होगा.
6. ऐप्लिकेशन रजिस्टर करें पर क्लिक करें.
7. अपने ऐप्लिकेशन के Firebase कॉन्फ़िगरेशन ऑब्जेक्ट को क्लिपबोर्ड पर कॉपी करें. <script> टैग कॉपी न करें. ध्यान दें: अगर आपको बाद में कॉन्फ़िगरेशन ढूंढना है, तो यहां दिए गए निर्देशों का पालन करें.

8. कंसोल पर जाएं पर क्लिक करें.

अपने ऐप्लिकेशन में, प्रोजेक्ट का कॉन्फ़िगरेशन जोड़ें:

1. StackBlitz में वापस जाकर, src/firebase-config.js फ़ाइल पर जाएं.
2. कॉन्फ़िगरेशन स्निपेट को फ़ाइल में चिपकाएं. इसके बाद, यह ऐसा दिखना चाहिए. हालांकि, कॉन्फ़िगरेशन ऑब्जेक्ट में आपके प्रोजेक्ट की वैल्यू होंगी:

इस ऐप्लिकेशन को शुरू करने का तरीका क्या है?

StackBlitz की स्क्रीन के दाईं ओर मौजूद इंटरैक्टिव झलक देखें:

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

ऐप्लिकेशन आज़माएं:

1. होम स्क्रीन पर सबसे ऊपर मौजूद बटन से साइन इन करें. नकली ईमेल पते, नाम, और पासवर्ड का इस्तेमाल किया जा सकता है.
2. कोई प्रॉडक्ट बेचने के लिए, सबसे नीचे दाएं कोने में मौजूद कुछ बेचें बटन पर क्लिक करें.
3. टाइटल के लिए, Xylophone डालें.
4. मांगी गई कीमत के लिए, 50 डालें.
5. सामान का ब्यौरा के लिए, यह जानकारी डालें: This high quality xylophone can be used to play music.
6. अपने कंप्यूटर पर ज़ाइलोफ़ोन की यह इमेज डाउनलोड करें. इसके बाद, इसे अपने प्रॉडक्ट की इमेज बटन की मदद से अपलोड करें.

file_downloadइमेज डाउनलोड करें

7. सभी फ़ील्ड भरने और इमेज अपलोड करने के बाद, पोस्ट करें पर क्लिक करें.
8. अपनी नई लिस्टिंग ढूंढें. अपने आइटम पर क्लिक करके, उसकी जानकारी वाली स्क्रीन देखें. इसके बाद, सेलर की संपर्क जानकारी पैनल को बड़ा करें.
9. Firebase कंसोल पर वापस जाएं. डेटाबेस डैशबोर्ड में, अब आपको forsale नोड में पोस्ट किए गए आइटम की एंट्री दिखेगी. स्टोरेज डैशबोर्ड में, आपको friendlymarket पाथ में अपलोड की गई इमेज भी दिखेगी.

4. एक्सटेंशन ढूंढना और इंस्टॉल करना

समस्या

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

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

समाधान

इमेज को ऑप्टिमाइज़ करने के तरीके के बारे में पढ़ने के बाद, आपने इमेज लोड होने की परफ़ॉर्मेंस को बेहतर बनाने के लिए दो कदम उठाने का फ़ैसला किया:

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

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

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

ऐसा लगता है कि सर्वर-साइड का इस्तेमाल करना बेहतर होगा. हालांकि, इस तरीके में भी sample को क्लोन करना, सेटअप करने के निर्देशों का पालन करना, और फिर Firebase CLI की मदद से फ़ंक्शन को डिप्लॉय करना शामिल है. इमेज का साइज़ बदलना, एक सामान्य काम है. क्या कोई आसान तरीका नहीं है?

आसान समाधान

आपकी किस्मत अच्छी है. हालांकि, इसका एक आसान समाधान है: Firebase एक्सटेंशन! आइए, Firebase की वेबसाइट पर उपलब्ध एक्सटेंशन की कैटलॉग देखें.

इसे देखें! "Resize Images" नाम का एक एक्सटेंशन उपलब्ध है. यह अच्छा लग रहा है.

आइए, इस एक्सटेंशन का इस्तेमाल आपके ऐप्लिकेशन में करें!

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

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

public, max-age=31536000

6. अन्य पैरामीटर को उनकी डिफ़ॉल्ट वैल्यू पर छोड़ दें.
7. एक्सटेंशन इंस्टॉल करें पर क्लिक करें.

इंस्टॉल होने की प्रोसेस पूरी होने तक...

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

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

(ज़रूरी नहीं) कैश-कंट्रोल हेडर के बारे में ज़्यादा जानें

कैश-कंट्रोल हेडर वैल्यू public, max-age=31536000 का मतलब है कि इमेज को एक साल तक कैश मेमोरी में सेव किया जाएगा. Cache-Control हेडर के बारे में ज़्यादा जानने के लिए, यह दस्तावेज़ पढ़ें.

क्लाइंट कोड अपडेट करना

आपने जो एक्सटेंशन इंस्टॉल किया है वह बदली गई इमेज को उसी बकेट में सेव करता है जिसमें मूल इमेज सेव की गई थी. बदले गए साइज़ वाली इमेज के फ़ाइल नाम में, कॉन्फ़िगर किए गए डाइमेंशन जोड़ दिए जाते हैं. इसलिए, अगर मूल फ़ाइल पाथ friendlymarket/user1234-car.png जैसा दिखता है, तो बदली गई इमेज का फ़ाइल पाथ friendlymarket/user1234-car_200x200.png जैसा दिखेगा.

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

1. StackBlitz में, src/firebase-refs.js फ़ाइल खोलें.
2. रीसाइज़ की गई इमेज के लिए रेफ़ बनाने के लिए, मौजूदा getImageRef फ़ंक्शन को इस कोड से बदलें:

export function getImageRef(storage, imagePath) {
  const xDimension = 200;
  const yDimension = 200;

  // find the '.' in 'file.jpg', 'file.png', etc
  const fileExtensionIndex = imagePath.lastIndexOf('.');

  const pathNameWithoutExtension = imagePath.substring(0, fileExtensionIndex);
  const dimensions = `${xDimension}x${yDimension}`;
  const fileExtension = imagePath.substring(fileExtensionIndex);

  return {
    resized: storage().ref(
      `${pathNameWithoutExtension}_${dimensions}${fileExtension}`
    ),
    original: storage().ref(imagePath)
  };
}

इसे आज़माएं

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

एक्सटेंशन को काम करते हुए देखने के लिए, एक नई पोस्ट बनाएं:

1. होम स्क्रीन पर जाने के लिए, ऐप्लिकेशन के सबसे ऊपर मौजूद बार में Friendly Market पर क्लिक करें.
2. कोई प्रॉडक्ट बेचने के लिए, ऐप्लिकेशन के सबसे नीचे दाएं कोने में मौजूद कुछ बेचें बटन पर क्लिक करें.
3. टाइटल के लिए, Coffee डालें
4. मांगी गई कीमत के लिए, 1 डालें
5. सामान का ब्यौरा के लिए, यह डालें: Selling one cafe latte. It has foam art in the shape of a bear.
6. अपने कंप्यूटर पर कॉफ़ी के कप की यह इमेज डाउनलोड करें. इसके बाद, इसे अपने प्रॉडक्ट की इमेज बटन की मदद से अपलोड करें. file_downloadइमेज डाउनलोड करें
7. सभी फ़ील्ड भरने और इमेज अपलोड करने के बाद, पोस्ट करें पर क्लिक करें. आपको ज़ाइलोफ़ोन के नीचे कॉफ़ी की लिस्टिंग दिखेगी!
8. Firebase कंसोल में, Functions डैशबोर्ड में जाकर, लॉग टैब पर क्लिक करें. आपको फ़ंक्शन के लॉग दिखेंगे, जिनसे पता चलेगा कि फ़ंक्शन को लागू किया गया है.

9. friendlymarket पाथ में, कॉफ़ी की ओरिजनल इमेज और बदले गए साइज़ वाली इमेज, दोनों को देखने के लिए स्टोरेज डैशबोर्ड पर जाएं.
10. StackBlitz के झलक वाले पैनल में, अपने ऐप्लिकेशन की होम स्क्रीन को दो बार रीलोड करें. आपको दिखेगा कि ज़ाइलोफ़ोन की इमेज के मुकाबले कॉफ़ी की इमेज बहुत तेज़ी से लोड हो रही है.

पहली बार पेज लोड होने पर इमेज तेज़ी से लोड होती है, क्योंकि इसका साइज़ छोटा होता है. इसके बाद, पेज को रीफ़्रेश करने पर, यह नेटवर्क अनुरोध ट्रिगर करने के बजाय ब्राउज़र की कैश मेमोरी से लोड होती है.

5. एक्सटेंशन को फिर से कॉन्फ़िगर करना

समस्या

आपका ऐप्लिकेशन, सेलर की लिस्टिंग के ड्राफ़्ट वर्शन को अपने-आप सेव करता है. आपके उपयोगकर्ताओं को यह सुविधा पसंद है, लेकिन आपके आंकड़े थोड़े चिंताजनक हैं. आपकी रिपोर्ट से पता चलता है कि सिर्फ़ 10% ड्राफ़्ट ही पोस्ट किए जाते हैं. बाकी 90% ड्राफ़्ट, आपके डेटाबेस में जगह घेर रहे हैं.

समाधान

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

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

1. एक्सटेंशन की ज़्यादा जानकारी वाले पेज पर, इंस्टॉल करें बटन पर क्लिक करें.
2. वह Firebase प्रोजेक्ट चुनें जिसका इस्तेमाल, मार्केटप्लेस के वेब ऐप्लिकेशन के लिए किया जा रहा है.
3. एक्सटेंशन कॉन्फ़िगर करें चरण पर पहुंचने तक, स्क्रीन पर दिए गए निर्देशों का पालन करें.
4. रीयलटाइम डेटाबेस पाथ के लिए, drafts डालें. यह डेटाबेस में वह पाथ है जहां ड्राफ़्ट सेव किए जाते हैं.
5. रखे जाने वाले नोड की ज़्यादा से ज़्यादा गिनती के लिए, 5 डालें. इसका मतलब है कि हर आइटम की लिस्टिंग के लिए पांच ड्राफ़्ट सेव किए जाएंगे. अगर कोई और ड्राफ़्ट जोड़ा जाता है, तो सबसे पुराना ड्राफ़्ट अपने-आप मिट जाएगा.
6. एक्सटेंशन इंस्टॉल करें पर क्लिक करें.

इंस्टॉल होने तक...

एक्सटेंशन की परफ़ॉर्मेंस मॉनिटर करना

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

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

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

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

एक प्रोजेक्ट में किसी एक्सटेंशन की कई कॉपी इंस्टॉल करना

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

इसे चलाकर देखें

1. पक्का करें कि आपने उसी खाते से लॉग इन किया हो जिसका इस्तेमाल आपने ज़ाइलोफ़ोन या लैट्टे पोस्ट करने के लिए किया था
2. कुछ ड्राफ़्ट जनरेट करें:
3. ऐप्लिकेशन में सबसे नीचे दाएं कोने में मौजूद, कुछ बेचें बटन पर क्लिक करें
4. टाइटल में बदलाव करके, उसे "ड्राफ़्ट 1" के तौर पर सेव करें.
5. नीचे की ओर स्क्रोल करके, ड्राफ़्ट सेक्शन पर जाएं और ड्राफ़्ट की संख्या देखें. कम से कम दो होने चाहिए.
6. सबसे ऊपर मौजूद ऐप्लिकेशन बार में, FRIENDLY MARKET बटन पर क्लिक करें. इस तरह, आपके पास एक सेव किया गया ड्राफ़्ट होगा, लेकिन आपको इसे पोस्ट करने की ज़रूरत नहीं होगी.
7. "ड्राफ़्ट 2", "ड्राफ़्ट 3" वगैरह से लेकर "ड्राफ़्ट 6" तक के लिए इस प्रोसेस को दोहराएं.
8. "ड्राफ़्ट 6" बनाने पर, ध्यान दें कि "ड्राफ़्ट 1" आपके ड्राफ़्ट सेक्शन से हट जाता है.
9. आपने Resize Images एक्सटेंशन के साथ जो किया था उसी तरह, फ़ंक्शन लॉग की जांच करके यह देखा जा सकता है कि कौनसे फ़ंक्शन ट्रिगर हुए.

ओह, ड्राफ़्ट सेव करने की सीमा बहुत कम है

आपकी ग्राहक सहायता टीम आपसे संपर्क करती है और आपको बताती है कि आपके कुछ सबसे ज़्यादा कमाई करने वाले सेलर शिकायत कर रहे हैं कि उनके ड्राफ़्ट किए गए प्रॉडक्ट, पोस्ट करने से पहले ही मिटा दिए जा रहे हैं. आपने अपने साथी की मदद से, गणित के सवालों को हल किया. इससे आपको पता चला कि आपके जवाब में 10,000 का अंतर है!

इसे कैसे ठीक किया जा सकता है? चलिए, इंस्टॉल किए गए एक्सटेंशन को फिर से कॉन्फ़िगर करते हैं!

1. Firebase कंसोल के बाएं पैनल में, एक्सटेंशन पर क्लिक करें.
2. इंस्टॉल किए गए एक्सटेंशन के कार्ड पर, मैनेज करें पर क्लिक करें.
3. ऊपर दाएं कोने में मौजूद, एक्सटेंशन को फिर से कॉन्फ़िगर करें पर क्लिक करें.
4. रखे जाने वाले नोड की ज़्यादा से ज़्यादा गिनती को 50000 पर सेट करें.
5. सेव करें पर क्लिक करें.

आपको बस इतना ही करना है! एक्सटेंशन को अपडेट होने में जितना समय लगता है उतने समय में, सहायता टीम से बात करें और उन्हें बताएं कि समस्या को ठीक करने के लिए पहले ही कार्रवाई की जा रही है.

6. उपयोगकर्ता का डेटा अपने-आप मिटने की सुविधा

समस्या

आपकी ग्राहक सहायता टीम ने आपसे फिर से संपर्क किया है. जिन सेलर ने अपने खाते मिटा दिए हैं उन्हें अब भी दूसरे उपयोगकर्ताओं से ईमेल मिल रहे हैं. इससे वे काफ़ी नाराज़ हैं! इन सेलर को उम्मीद थी कि जब वे अपने खाते मिटाएंगे, तब आपके सिस्टम से उनके ईमेल पते भी मिट जाएंगे.

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

समाधान

आपको उपयोगकर्ता का डेटा मिटाएं एक्सटेंशन को कॉन्फ़िगर करना होगा, ताकि जब कोई उपयोगकर्ता अपना खाता मिटाए, तो डेटाबेस में मौजूद users/uid नोड अपने-आप मिट जाए.

1. एक्सटेंशन की ज़्यादा जानकारी वाले पेज पर, इंस्टॉल करें बटन पर क्लिक करें.
2. वह Firebase प्रोजेक्ट चुनें जिसका इस्तेमाल, मार्केटप्लेस के वेब ऐप्लिकेशन के लिए किया जा रहा है.
3. एक्सटेंशन कॉन्फ़िगर करें चरण पर पहुंचने तक, स्क्रीन पर दिए गए निर्देशों का पालन करें.
4. रीयलटाइम डेटाबेस पाथ के लिए, sellers/{UID} डालें. sellers वह नोड है जिसके चाइल्ड नोड में उपयोगकर्ता के ईमेल पते शामिल हैं. वहीं, {UID} एक वाइल्डकार्ड है. इस कॉन्फ़िगरेशन से, एक्सटेंशन को यह पता चल जाएगा कि जब यूआईडी 1234 वाला उपयोगकर्ता अपना खाता मिटाता है, तो एक्सटेंशन को डेटाबेस से sellers/1234 मिटाना चाहिए.
5. एक्सटेंशन इंस्टॉल करें पर क्लिक करें.

इंस्टॉल होने तक...

आइए, अब कस्टमाइज़ेशन के बारे में बात करते हैं

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

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

एक्सटेंशन और बिलिंग

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

उदाहरण के लिए, यूआरएल छोटे किए जा सकते हैं, ईमेल ट्रिगर किए जा सकते हैं, कलेक्शन को BigQuery में एक्सपोर्ट किया जा सकता है. इसके अलावा, और भी कई काम किए जा सकते हैं! एक्सटेंशन का पूरा कैटलॉग यहां देखें.

अगर आपको कोई ऐसा एक्सटेंशन चाहिए जो फ़िलहाल उपलब्ध नहीं है, तो हमें बताएं! नया एक्सटेंशन सुझाने के लिए, Firebase सहायता टीम को सुविधा अनुरोध भेजें.

इसे चलाकर देखें

एक्सटेंशन इंस्टॉल होने के बाद, किसी उपयोगकर्ता को मिटाएं और देखें कि क्या होता है:

1. Firebase कंसोल में, अपने रीयलटाइम डेटाबेस डैशबोर्ड पर जाएं.
2. sellers नोड को बड़ा करें.
3. हर सेलर की जानकारी, उसके उपयोगकर्ता यूआईडी पर आधारित होती है. किसी उपयोगकर्ता का यूआईडी चुनें.
4. Firebase कंसोल में, अपने Authentication डैशबोर्ड पर जाएं और उस उपयोगकर्ता का यूआईडी ढूंढें.
5. यूआईडी के दाईं ओर मौजूद मेन्यू को बड़ा करें और खाता मिटाएं को चुनें.

6. अपने Realtime Database डैशबोर्ड पर वापस जाएं. सेलर की जानकारी मिट जाएगी!

7. बधाई हो!

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

आपने एक्सटेंशन ढूंढने, कॉन्फ़िगर करने, इंस्टॉल करने, और फिर से कॉन्फ़िगर करने का तरीका सीखा. इसके अलावा, आपने इंस्टॉल किए गए एक्सटेंशन को मॉनिटर करने और ज़रूरत पड़ने पर उन्हें अनइंस्टॉल करने के तरीके के बारे में भी जाना.

आगे क्या करना है?

इनमें से कुछ अन्य एक्सटेंशन देखें:

• Cloud Firestore में टेक्स्ट स्ट्रिंग का अनुवाद करना (बिलिंग खाता ज़रूरी है)
• Mailchimp की ईमेल सूचियों में नए उपयोगकर्ताओं को जोड़ना (बिलिंग खाता ज़रूरी है)
• यूआरएल छोटे करें. इसके लिए, बिलिंग खाता होना ज़रूरी है.

क्या आपको सर्वर-साइड पर काम करने वाले ज़्यादा कस्टम कोड की ज़रूरत है?

• Cloud Functions for Firebase के लिए कोडलैब देखें

अन्य काम के दस्तावेज़

एक्सटेंशन मैनेज करना:

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

एक्सटेंशन के बारे में ज़्यादा जानकारी:

• हर एक्सटेंशन के सोर्स कोड और दस्तावेज़ GitHub पर देखें
• किसी एक्सटेंशन को दी गई अनुमतियों और ऐक्सेस के बारे में जानें