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

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

लक्ष्य

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

आपको क्या बनाना है

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

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

आपको इनके बारे में जानकारी मिलेगी

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

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

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

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

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

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

1. Firebase कंसोल में, प्रोजेक्ट जोड़ें पर क्लिक करें. इसके बाद, Firebase प्रोजेक्ट को FriendlyMarket नाम दें.
2. प्रोजेक्ट बनाने के विकल्पों पर क्लिक करें. Firebase की शर्तें स्वीकार करें. Google Analytics सेट अप करने की प्रक्रिया को छोड़ें, क्योंकि आपको इस ऐप्लिकेशन में Analytics का इस्तेमाल नहीं करना है.
3. प्रोजेक्ट के प्रोविज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.

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

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

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

Firebase के प्लान की कीमत अपग्रेड करना

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

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

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

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

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

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

1. Firebase कंसोल में, बाएं पैनल में डेवलप करें पर क्लिक करें.
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 सेट अप करना

यह ऐप्लिकेशन, बिक्री के लिए आइटम की इमेज सेव करने के लिए, 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. बनाएं पर क्लिक करें.

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

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

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

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

   rules_version = '2';
   service firebase.storage {
     match /b/{bucket}/o {
   
       match /{allPaths=**} {
         allow read, write: if request.auth != null;
       }
   
       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 पेज पर सबसे ऊपर, फ़ॉर्क करें पर क्लिक करें.

अब आपके पास शुरुआती कोड की कॉपी, आपके 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. एक्सटेंशन ढूंढना और इंस्टॉल करना

समस्या

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

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

समाधान

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

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

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

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

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

एक आसान तरीका

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

इसे देखें! "इमेज का साइज़ बदलें" नाम का एक एक्सटेंशन है. यह अच्छा है.

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

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

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

public, max-age=31536000

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

इंस्टॉलेशन पूरा होने का इंतज़ार करते समय...

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

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

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

Cache-Control हेडर की वैल्यू 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. सभी फ़ील्ड भरने और इमेज अपलोड करने के बाद, पोस्ट करें पर क्लिक करें. आपको Xylophone के नीचे, कॉफ़ी की लिस्टिंग दिखेगी!
8. Firebase कंसोल में फ़ंक्शन डैशबोर्ड में, लॉग टैब पर क्लिक करें. आपको फ़ंक्शन के लॉग दिखेंगे, जिनसे पता चलेगा कि वह फ़ंक्शन लागू हुआ है या नहीं.

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

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

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

समस्या

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

समाधान

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

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

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

इंस्टॉलेशन पूरा होने का इंतज़ार करते समय...

एक्सटेंशन को मॉनिटर करना

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

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

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

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

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

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

इसे इस्तेमाल करने का तरीका देखें

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

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

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

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

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

इसे इस्तेमाल करने का तरीका देखें

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

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

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

7. बधाई हो!

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

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

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

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

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

क्या आपको सर्वर साइड के लिए ज़्यादा कस्टम कोड चाहिए?

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

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

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

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

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

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