Firebase को Next.js ऐप्लिकेशन के साथ इंटिग्रेट करना

1. शुरू करने से पहले

इस कोडलैब में, आपको Firebase को Friendly Eats नाम के Next.js वेब ऐप्लिकेशन के साथ इंटिग्रेट करने का तरीका पता चलेगा. यह रेस्टोरेंट की समीक्षाओं वाली वेबसाइट है.

पूरा किया गया वेब ऐप्लिकेशन, काम की सुविधाएं देता है. इनसे पता चलता है कि Firebase, Next.js ऐप्लिकेशन बनाने में आपकी मदद कैसे कर सकता है. इन सुविधाओं में ये शामिल हैं:

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

ज़रूरी शर्तें

• GitHub खाता
• Next.js और JavaScript के बारे में जानकारी

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

• Next.js ऐप्लिकेशन राउटर और सर्वर साइड रेंडरिंग के साथ Firebase का इस्तेमाल करने का तरीका.
• Firebase के लिए Cloud Storage में इमेज को सेव करने का तरीका.
• Cloud Firestore डेटाबेस में डेटा पढ़ने और उसमें बदलाव करने का तरीका.
• Firebase JavaScript SDK टूल के साथ, 'Google से साइन इन करें' सुविधा इस्तेमाल करने का तरीका.

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

• Git
• Node.js का नया स्टेबल वर्शन
• Google Chrome जैसा कोई ब्राउज़र
• कोड एडिटर और टर्मिनल वाला डेवलपमेंट एनवायरमेंट
• Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता
• अपने Firebase प्रोजेक्ट को Blaze कीमत वाले प्लान पर अपग्रेड करने की सुविधा

2. अपना डेवलपमेंट एनवायरमेंट और GitHub का डेटा स्टोर करने की जगह सेट अप करना

इस कोडलैब में, ऐप्लिकेशन का स्टार्टर कोडबेस दिया गया है. साथ ही, यह Firebase CLI पर निर्भर करता है.

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

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

* `nextjs-start`: contains the starter code upon which you build.
* `nextjs-end`: contains the solution code for the finished web app.

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

1. टर्मिनल का इस्तेमाल करके, अपने कंप्यूटर पर नया फ़ोल्डर बनाएं और नई डायरेक्ट्री पर जाएं:

   mkdir codelab-friendlyeats-web
   
   cd codelab-friendlyeats-web
   

2. सिर्फ़ nextjs-start फ़ोल्डर को फ़ेच करने के लिए, giget एनपीएम पैकेज का इस्तेमाल करें:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install
   

3. git की मदद से, स्थानीय तौर पर बदलावों को ट्रैक करना:

   git init
   
   git commit -a -m "codelab starting point"
   
   git branch -M main
   

4. GitHub पर नया डेटा स्टोर करने की जगह बनाएं: https://github.com/new. इसे अपनी पसंद के मुताबिक कोई भी नाम दें.
   1. GitHub आपको एक नया रिपॉज़िटरी यूआरएल देगा, जो https://github.com//.git या [e-mail]:/.git जैसा दिखेगा. इस यूआरएल को कॉपी करें.
5. स्थानीय बदलावों को अपने नए GitHub रिपॉज़िटरी में पुश करें. प्लेसहोल्डर की जगह अपने रिपॉज़िटरी का यूआरएल डालकर, यह कमांड चलाएं.

   git remote add origin <your-repository-url>
   
   git push -u origin main
   

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

Firebase CLI इंस्टॉल या अपडेट करना

Firebase CLI इंस्टॉल है और उसका वर्शन 13.9.0 या उसके बाद का है, इसकी पुष्टि करने के लिए यह निर्देश चलाएं:

firebase --version

अगर आपको कोई पुराना वर्शन दिखता है या आपने Firebase CLI इंस्टॉल नहीं किया है, तो इंस्टॉल करने का निर्देश चलाएं:

npm install -g firebase-tools@latest

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

Firebase में लॉग इन करना

1. Firebase CLI में लॉग इन करने के लिए, यह कमांड चलाएं:

   firebase login
   

2. Firebase को डेटा इकट्ठा करने की अनुमति है या नहीं, इसके आधार पर Y या N डालें.
3. अपने ब्राउज़र में, अपना Google खाता चुनें. इसके बाद, अनुमति दें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

ध्यान दें: इस कोडलैब को पूरा करने के बाद, अपने प्रोजेक्ट को बिना किसी शुल्क वाले (Spark) प्लान पर डाउनग्रेड किया जा सकता है.

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

1. अपने Firebase प्रोजेक्ट में, प्रोजेक्ट की खास जानकारी पर जाएं. इसके बाद, वेब पर क्लिक करें.
   
   अगर आपके प्रोजेक्ट में पहले से ही ऐप्लिकेशन रजिस्टर हैं, तो वेब आइकॉन देखने के लिए ऐप्लिकेशन जोड़ें पर क्लिक करें.
2. ऐप्लिकेशन का कोई दूसरा नाम टेक्स्ट बॉक्स में, ऐप्लिकेशन का कोई ऐसा दूसरा नाम डालें जिसे याद रखना आसान हो. जैसे, My Next.js app.
3. इस ऐप्लिकेशन के लिए Firebase होस्टिंग भी सेट अप करें चेकबॉक्स से सही का निशान हटाएं.
4. ऐप्लिकेशन रजिस्टर करें > अगला > अगला > Console पर जाएं पर क्लिक करें.
   

Firebase कंसोल में Firebase की सेवाएं सेट अप करना

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

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

Cloud Firestore सेट अप करना

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

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

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

4. स्टार्टर कोडबेस की समीक्षा करना

इस सेक्शन में, आपको ऐप्लिकेशन के स्टार्टर कोडबेस के कुछ हिस्सों की समीक्षा करनी होगी. इस कोडलैब में, आपको इन हिस्सों में फ़ंक्शन जोड़ने होंगे.

फ़ोल्डर और फ़ाइल का स्ट्रक्चर

नीचे दी गई टेबल में, ऐप्लिकेशन के फ़ोल्डर और फ़ाइल स्ट्रक्चर की खास जानकारी दी गई है:

फ़ोल्डर और फ़ाइलें	जानकारी
src/components	फ़िल्टर, हेडर, रेस्टोरेंट की जानकारी, और समीक्षाओं के लिए React कॉम्पोनेंट
src/lib	ऐसे यूटिलिटी फ़ंक्शन जो ज़रूरी नहीं है कि React या Next.js के लिए ही इस्तेमाल किए जाएं
src/lib/firebase	Firebase से जुड़ा कोड और Firebase कॉन्फ़िगरेशन
public	वेब ऐप्लिकेशन में मौजूद आइकॉन जैसी स्टैटिक ऐसेट
src/app	Next.js ऐप्लिकेशन राऊटर की मदद से रूटिंग
src/app/restaurant	एपीआई रूट हैंडलर
package.json और package-lock.json	npm के साथ प्रोजेक्ट डिपेंडेंसी
next.config.js	Next.js के हिसाब से कॉन्फ़िगरेशन (सर्वर ऐक्शन चालू हैं)
jsconfig.json	JavaScript भाषा-सेवा का कॉन्फ़िगरेशन

सर्वर और क्लाइंट कॉम्पोनेंट

यह ऐप्लिकेशन, Next.js वेब ऐप्लिकेशन है, जो ऐप्लिकेशन राउटर का इस्तेमाल करता है. सर्वर साइड रेंडरिंग का इस्तेमाल पूरे ऐप्लिकेशन में किया जाता है. उदाहरण के लिए, src/app/page.js फ़ाइल एक सर्वर कॉम्पोनेंट है, जो मुख्य पेज के लिए ज़िम्मेदार है. src/components/RestaurantListings.jsx फ़ाइल एक क्लाइंट कॉम्पोनेंट है, जिसे फ़ाइल की शुरुआत में "use client" डायरेक्टिव से दिखाया जाता है.

स्टेटमेंट इंपोर्ट करना

आपको इस तरह के इंपोर्ट स्टेटमेंट दिख सकते हैं:

import RatingPicker from "@/src/components/RatingPicker.jsx";

ऐप्लिकेशन, @ सिंबल का इस्तेमाल करता है, ताकि इंपोर्ट के लिए इस्तेमाल होने वाले रिलेटिव पाथ को आसानी से समझा जा सके. ऐसा पाथ के दूसरे नाम की मदद से किया जाता है.

Firebase के लिए खास तौर पर बनाए गए API

Firebase API का सारा कोड, src/lib/firebase डायरेक्ट्री में रखा जाता है. इसके बाद, अलग-अलग React कॉम्पोनेंट, Firebase फ़ंक्शन को सीधे इंपोर्ट करने के बजाय, src/lib/firebase डायरेक्ट्री से रैप किए गए फ़ंक्शन इंपोर्ट करते हैं.

मॉक डेटा

src/lib/randomData.js फ़ाइल में, मॉक रेस्टोरेंट और समीक्षा का डेटा शामिल होता है. उस फ़ाइल का डेटा, src/lib/fakeRestaurants.js फ़ाइल के कोड में इकट्ठा किया जाता है.

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

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

ध्यान दें: Firebase App Hosting, सार्वजनिक तौर पर प्रीव्यू में उपलब्ध है.

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

सुरक्षा नियमों को डिप्लॉय करना

कोड में, Firestore और Firebase के लिए Cloud Storage के सुरक्षा नियमों के सेट पहले से मौजूद हैं. सुरक्षा नियमों को लागू करने के बाद, आपके डेटाबेस और बकेट में मौजूद डेटा का गलत इस्तेमाल होने से बचा जा सकता है.

1. अपने टर्मिनल में, पहले बनाए गए Firebase प्रोजेक्ट का इस्तेमाल करने के लिए, CLI को कॉन्फ़िगर करें:

   firebase use --add
   

   अन्य नाम डालने के लिए कहा जाने पर, friendlyeats-codelab डालें.
2. इन सुरक्षा नियमों को डिप्लॉय करने के लिए, अपने टर्मिनल में यह कमांड चलाएं:

   firebase deploy --only firestore:rules,storage
   

3. अगर आपसे पूछा जाए: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", तो हां चुनने के लिए Enter दबाएं.

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

1. Firebase कंसोल में, प्रोजेक्ट सेटिंग पर जाएं.
2. नया वेब ऐप्लिकेशन रजिस्टर करने के लिए, SDK टूल का सेटअप और कॉन्फ़िगरेशन पैनल में, "ऐप्लिकेशन जोड़ें" पर क्लिक करें. इसके बाद, कोड ब्रैकेट आइकॉन पर क्लिक करें.
3. वेब ऐप्लिकेशन बनाने के फ़्लो के आखिर में, firebaseConfig वैरिएबल को कॉपी करें. साथ ही, इसकी प्रॉपर्टी और उनकी वैल्यू भी कॉपी करें.
4. अपने कोड एडिटर में apphosting.yaml फ़ाइल खोलें और Firebase कंसोल से कॉन्फ़िगरेशन वैल्यू की मदद से, एनवायरमेंट वैरिएबल की वैल्यू भरें.
5. फ़ाइल में, मौजूदा प्रॉपर्टी को उन प्रॉपर्टी से बदलें जिन्हें आपने कॉपी किया है.
6. फ़ाइल सेव करें.

बैकएंड बनाना

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

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

   ध्यान दें: कंसोल में दिए गए लिंक पर जाकर, ऐप्लिकेशन होस्टिंग के बैकएंड के लिए Google Cloud की सेवाओं को मॉनिटर किया जा सकता है. ज़्यादा जानने के लिए, लॉग और मेट्रिक देखें लेख पढ़ें.

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

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

6. वेब ऐप्लिकेशन में पुष्टि करने की सुविधा जोड़ना

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

ध्यान दें: इस सेक्शन में, Firebase Authentication का इस्तेमाल शुरू करने के लिए ज़रूरी कम से कम कोड पर ध्यान दें. यह पुष्टि करने की सुविधा देने वाली कई सेवाओं के साथ काम करता है. हालांकि, इस कोडलैब में एक ही प्रोवाइडर का इस्तेमाल किया गया है, जो Google साइन-इन है.

साइन इन और साइन आउट करने की सुविधाएं लागू करना

1. src/lib/firebase/auth.js फ़ाइल में, onAuthStateChanged, signInWithGoogle, और signOut फ़ंक्शन को इस कोड से बदलें:

export function onAuthStateChanged(cb) {
	return _onAuthStateChanged(auth, cb);
}

export async function signInWithGoogle() {
  const provider = new GoogleAuthProvider();

  try {
    await signInWithPopup(auth, provider);
  } catch (error) {
    console.error("Error signing in with Google", error);
  }
}

export async function signOut() {
  try {
    return auth.signOut();
  } catch (error) {
    console.error("Error signing out with Google", error);
  }
}

यह कोड, इन Firebase API का इस्तेमाल करता है:

Firebase API	जानकारी
GoogleAuthProvider	Google की पुष्टि करने वाली सेवा का इंस्टेंस बनाता है.
signInWithPopup	डायलॉग पर आधारित पुष्टि करने की प्रोसेस शुरू करता है.
auth.signOut	उपयोगकर्ता को साइन आउट कर देता है.

src/components/Header.jsx फ़ाइल में, कोड पहले से ही signInWithGoogle और signOut फ़ंक्शन को कॉल करता है.

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

ध्यान दें: भले ही, वेब ऐप्लिकेशन अपडेट हो गया हो, लेकिन आपने Firebase Authentication का इस्तेमाल किया है. Firebase कंसोल में पुष्टि पेज पर जाकर, पुष्टि करने वाला नया उपयोगकर्ता मौजूद है या नहीं, इसकी पुष्टि की जा सकती है.

सर्वर को पुष्टि की स्थिति भेजना

पुष्टि की स्थिति को सर्वर को भेजने के लिए, हम सर्विस वर्क का इस्तेमाल करेंगे. fetchWithFirebaseHeaders और getAuthIdToken फ़ंक्शन को इस कोड से बदलें:

async function fetchWithFirebaseHeaders(request) {
  const app = initializeApp(firebaseConfig);
  const auth = getAuth(app);
  const installations = getInstallations(app);
  const headers = new Headers(request.headers);
  const [authIdToken, installationToken] = await Promise.all([
    getAuthIdToken(auth),
    getToken(installations),
  ]);
  headers.append("Firebase-Instance-ID-Token", installationToken);
  if (authIdToken) headers.append("Authorization", `Bearer ${authIdToken}`);
  const newRequest = new Request(request, { headers });
  return await fetch(newRequest);
}

async function getAuthIdToken(auth) {
  await auth.authStateReady();
  if (!auth.currentUser) return;
  return await getIdToken(auth.currentUser);
}

सर्वर पर पुष्टि की स्थिति देखना

हम सर्वर पर क्लाइंट की पुष्टि की स्थिति को मिरर करने के लिए, FirebaseServerApp का इस्तेमाल करेंगे.

src/lib/firebase/serverApp.js खोलें और getAuthenticatedAppForUser फ़ंक्शन को बदलें:

export async function getAuthenticatedAppForUser() {
  const idToken = headers().get("Authorization")?.split("Bearer ")[1];
  console.log('firebaseConfig', JSON.stringify(firebaseConfig));
  const firebaseServerApp = initializeServerApp(
    firebaseConfig,
    idToken
      ? {
          authIdToken: idToken,
        }
      : {}
  );

  const auth = getAuth(firebaseServerApp);
  await auth.authStateReady();

  return { firebaseServerApp, currentUser: auth.currentUser };
}

पुष्टि करने के तरीके में हुए बदलावों की सूचनाएं पाने के लिए सदस्यता लें

पुष्टि करने के तरीके में होने वाले बदलावों की सदस्यता लेने के लिए, यह तरीका अपनाएं:

1. src/components/Header.jsx फ़ाइल पर जाएं.
2. useUserSession फ़ंक्शन को इस कोड से बदलें:

function useUserSession(initialUser) {
	// The initialUser comes from the server via a server component
	const [user, setUser] = useState(initialUser);
	const router = useRouter();

	// Register the service worker that sends auth state back to server
	// The service worker is built with npm run build-service-worker
	useEffect(() => {
		if ("serviceWorker" in navigator) {
			const serializedFirebaseConfig = encodeURIComponent(JSON.stringify(firebaseConfig));
			const serviceWorkerUrl = `/auth-service-worker.js?firebaseConfig=${serializedFirebaseConfig}`
		
		  navigator.serviceWorker
			.register(serviceWorkerUrl)
			.then((registration) => console.log("scope is: ", registration.scope));
		}
	  }, []);

	useEffect(() => {
		const unsubscribe = onAuthStateChanged((authUser) => {
			setUser(authUser)
		})

		return () => unsubscribe()
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, []);

	useEffect(() => {
		onAuthStateChanged((authUser) => {
			if (user === undefined) return

			// refresh when user changed to ease testing
			if (user?.email !== authUser?.email) {
				router.refresh()
			}
		})
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [user])

	return user;
}

ध्यान दें: इस वेब ऐप्लिकेशन में, Firebase API के इस्तेमाल को src//lib/firebase फ़ोल्डर में रखा गया है. Firebase एपीआई का इस्तेमाल सीधे उन कॉम्पोनेंट में करना भी एक मान्य तरीका है जिनमें इसकी ज़रूरत होती है. इसके अलावा, ReactFire या React Firebase Hooks जैसे दूसरे हुक का इस्तेमाल भी किया जा सकता है. अगर इस तरह के हुक का इस्तेमाल किया जाता है, तो पक्का करें कि आपका इस्तेमाल, Next.js ऐप्लिकेशन राउटर और सर्वर कॉम्पोनेंट के साथ पेश किए गए नए पैराडाइम के साथ सही तरीके से काम करता हो.

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

बदलावों की पुष्टि करना

src/app/layout.js फ़ाइल में मौजूद रूट लेआउट, हेडर को रेंडर करता है. साथ ही, अगर उपयोगकर्ता उपलब्ध है, तो उसे प्रॉप के तौर पर पास करता है.

<Header initialUser={currentUser?.toJSON()} />

इसका मतलब है कि <Header> कॉम्पोनेंट, सर्वर के चलने के दौरान उपयोगकर्ता का डेटा रेंडर करता है. हालांकि, ऐसा तब ही होता है, जब डेटा उपलब्ध हो. अगर पेज लोड होने के बाद, पेज के लाइफ़साइकल के दौरान पुष्टि से जुड़े अपडेट होते हैं, तो onAuthStateChanged हैंडलर उन्हें मैनेज करता है.

अब नया बिल्ड रोल आउट करने और अपने बिल्ड की पुष्टि करने का समय आ गया है.

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

7. रेस्टोरेंट की जानकारी देखना

वेब ऐप्लिकेशन में रेस्टोरेंट और समीक्षाओं के लिए मॉक डेटा शामिल होता है.

एक या उससे ज़्यादा रेस्टोरेंट जोड़ना

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

अपने स्थानीय Cloud Firestore डेटाबेस में रेस्टोरेंट का मॉक डेटा डालने के लिए, यह तरीका अपनाएं:

1. वेब ऐप्लिकेशन में, > रेस्टोरेंट के सैंपल जोड़ें को चुनें.
2. Firebase कंसोल में, Firestore डेटाबेस पेज पर जाकर, रेस्टोरेंट चुनें. आपको रेस्टोरेंट कलेक्शन में टॉप-लेवल के दस्तावेज़ दिखते हैं. इनमें से हर दस्तावेज़ किसी रेस्टोरेंट के बारे में जानकारी देता है.
3. रेस्टोरेंट के दस्तावेज़ की प्रॉपर्टी एक्सप्लोर करने के लिए, कुछ दस्तावेज़ों पर क्लिक करें.

रेस्टोरेंट की सूची दिखाना

आपके Cloud Firestore डेटाबेस में अब ऐसे रेस्टोरेंट हैं जिन्हें Next.js वेब ऐप्लिकेशन दिखा सकता है.

डेटा फ़ेच करने वाला कोड तय करने के लिए, यह तरीका अपनाएं:

1. src/app/page.js फ़ाइल में, <Home /> सर्वर कॉम्पोनेंट ढूंढें और getRestaurants फ़ंक्शन के कॉल की समीक्षा करें. यह फ़ंक्शन, सर्वर के रन टाइम पर रेस्टोरेंट की सूची को वापस लाता है. getRestaurants फ़ंक्शन को लागू करने के लिए, यह तरीका अपनाएं.
2. src/lib/firebase/firestore.js फ़ाइल में, applyQueryFilters और getRestaurants फ़ंक्शन को यहां दिए गए कोड से बदलें:

function applyQueryFilters(q, { category, city, price, sort }) {
	if (category) {
		q = query(q, where("category", "==", category));
	}
	if (city) {
		q = query(q, where("city", "==", city));
	}
	if (price) {
		q = query(q, where("price", "==", price.length));
	}
	if (sort === "Rating" || !sort) {
		q = query(q, orderBy("avgRating", "desc"));
	} else if (sort === "Review") {
		q = query(q, orderBy("numRatings", "desc"));
	}
	return q;
}

export async function getRestaurants(db = db, filters = {}) {
	let q = query(collection(db, "restaurants"));

	q = applyQueryFilters(q, filters);
	const results = await getDocs(q);
	return results.docs.map(doc => {
		return {
			id: doc.id,
			...doc.data(),
			// Only plain objects can be passed to Client Components from Server Components
			timestamp: doc.data().timestamp.toDate(),
		};
	});
}

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

ध्यान दें: Cloud Firestore में स्नैपशॉट की ऐसी सुविधाएं होती हैं जिनसे रिएक्टिव वेब ऐप्लिकेशन बनाने में मदद मिलती है. हालांकि, फ़िलहाल आपको सिर्फ़ सर्वर साइड पर रेस्टोरेंट की शुरुआती सूची चाहिए. इस वजह से, getRestaurants फ़ंक्शन, onSnapshot फ़ंक्शन के बजाय Cloud Firestore के getDocs फ़ंक्शन का इस्तेमाल करता है.

पुष्टि करना कि रेस्टोरेंट की लिस्टिंग, सर्वर के चलने के दौरान लोड होती हैं

Next.js फ़्रेमवर्क का इस्तेमाल करने पर, यह साफ़ तौर पर नहीं पता चलता कि डेटा, सर्वर रन टाइम या क्लाइंट-साइड रन टाइम में कब लोड होता है.

यह पुष्टि करने के लिए कि रेस्टोरेंट की लिस्टिंग, सर्वर के चलने के समय लोड होती हैं, यह तरीका अपनाएं:

1. वेब ऐप्लिकेशन में, DevTools खोलें और JavaScript बंद करें.

2. वेब ऐप्लिकेशन को रीफ़्रेश करें. रेस्टोरेंट की लिस्टिंग अब भी लोड होंगी. रेस्टोरेंट की जानकारी, सर्वर के जवाब में दी जाती है. JavaScript चालू होने पर, क्लाइंट-साइड JavaScript कोड की मदद से रेस्टोरेंट की जानकारी हाइड्रेट की जाती है.
3. DevTools में, JavaScript को फिर से चालू करें.

Cloud Firestore स्नैपशॉट लिसनर की मदद से, रेस्टोरेंट के अपडेट सुनना

पिछले सेक्शन में, आपने देखा कि src/app/page.js फ़ाइल से रेस्टोरेंट का शुरुआती सेट कैसे लोड हुआ. src/app/page.js फ़ाइल एक सर्वर कॉम्पोनेंट है और इसे सर्वर पर रेंडर किया जाता है. इसमें Firebase का डेटा फ़ेच करने वाला कोड भी शामिल होता है.

src/components/RestaurantListings.jsx फ़ाइल एक क्लाइंट कॉम्पोनेंट है. इसे सर्वर से रेंडर किए गए मार्कअप को हाइड्रेट करने के लिए कॉन्फ़िगर किया जा सकता है.

सर्वर से रेंडर किए गए मार्कअप को हाइड्रेट करने के लिए, src/components/RestaurantListings.jsx फ़ाइल को कॉन्फ़िगर करने के लिए यह तरीका अपनाएं:

1. src/components/RestaurantListings.jsx फ़ाइल में, नीचे दिया गया कोड देखें, जो आपके लिए पहले से लिखा हुआ है:

useEffect(() => {
        const unsubscribe = getRestaurantsSnapshot(data => {
                setRestaurants(data);
        }, filters);

        return () => {
                unsubscribe();
        };
}, [filters]);

यह कोड, getRestaurantsSnapshot() फ़ंक्शन को लागू करता है. यह फ़ंक्शन, पिछले चरण में लागू किए गए getRestaurants() फ़ंक्शन जैसा ही है. हालांकि, यह स्नैपशॉट फ़ंक्शन एक कॉलबैक मैकेनिज्म उपलब्ध कराता है, ताकि रेस्टोरेंट के कलेक्शन में कोई बदलाव होने पर, कॉलबैक ट्रिगर हो सके.

2. src/lib/firebase/firestore.js फ़ाइल में, getRestaurantsSnapshot() फ़ंक्शन को इस कोड से बदलें:

export function getRestaurantsSnapshot(cb, filters = {}) {
	if (typeof cb !== "function") {
		console.log("Error: The callback parameter is not a function");
		return;
	}

	let q = query(collection(db, "restaurants"));
	q = applyQueryFilters(q, filters);

	const unsubscribe = onSnapshot(q, querySnapshot => {
		const results = querySnapshot.docs.map(doc => {
			return {
				id: doc.id,
				...doc.data(),
				// Only plain objects can be passed to Client Components from Server Components
				timestamp: doc.data().timestamp.toDate(),
			};
		});

		cb(results);
	});

	return unsubscribe;
}

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

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

8. वेब ऐप्लिकेशन से, उपयोगकर्ताओं की सबमिट की गई समीक्षाएं सेव करना

1. src/lib/firebase/firestore.js फ़ाइल में, updateWithRating() फ़ंक्शन को इस कोड से बदलें:

const updateWithRating = async (
	transaction,
	docRef,
	newRatingDocument,
	review
) => {
	const restaurant = await transaction.get(docRef);
	const data = restaurant.data();
	const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
	const newSumRating = (data?.sumRating || 0) + Number(review.rating);
	const newAverage = newSumRating / newNumRatings;

	transaction.update(docRef, {
		numRatings: newNumRatings,
		sumRating: newSumRating,
		avgRating: newAverage,
	});

	transaction.set(newRatingDocument, {
		...review,
		timestamp: Timestamp.fromDate(new Date()),
	});
};

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

2. addReviewToRestaurant() फ़ंक्शन को इस कोड से बदलें:

export async function addReviewToRestaurant(db, restaurantId, review) {
	if (!restaurantId) {
		throw new Error("No restaurant ID has been provided.");
	}

	if (!review) {
		throw new Error("A valid review has not been provided.");
	}

	try {
		const docRef = doc(collection(db, "restaurants"), restaurantId);
		const newRatingDocument = doc(
			collection(db, `restaurants/${restaurantId}/ratings`)
		);

		// corrected line
		await runTransaction(db, transaction =>
			updateWithRating(transaction, docRef, newRatingDocument, review)
		);
	} catch (error) {
		console.error(
			"There was an error adding the rating to the restaurant",
			error
		);
		throw error;
	}
}

Next.js सर्वर ऐक्शन लागू करना

Next.js सर्वर ऐक्शन, फ़ॉर्म डेटा को ऐक्सेस करने के लिए एक आसान एपीआई उपलब्ध कराता है. जैसे, फ़ॉर्म सबमिशन पेलोड से टेक्स्ट वैल्यू पाने के लिए data.get("text").

समीक्षा फ़ॉर्म सबमिट करने की प्रोसेस को प्रोसेस करने के लिए, Next.js सर्वर ऐक्शन का इस्तेमाल करने के लिए, यह तरीका अपनाएं:

1. src/components/ReviewDialog.jsx फ़ाइल में, <form> एलिमेंट में action एट्रिब्यूट ढूंढें.

<form action={handleReviewFormSubmission}>

action एट्रिब्यूट की वैल्यू, उस फ़ंक्शन को दिखाती है जिसे अगले चरण में लागू किया जाता है.

2. src/app/actions.js फ़ाइल में, handleReviewFormSubmission() फ़ंक्शन को इस कोड से बदलें:

// This is a next.js server action, which is an alpha feature, so
// use with caution.
// https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions
export async function handleReviewFormSubmission(data) {
        const { app } = await getAuthenticatedAppForUser();
        const db = getFirestore(app);

        await addReviewToRestaurant(db, data.get("restaurantId"), {
                text: data.get("text"),
                rating: data.get("rating"),

                // This came from a hidden form field.
                userId: data.get("userId"),
        });
}

ध्यान दें: components/ReviewDialog.jsx फ़ाइल में, छिपे हुए फ़ॉर्म फ़ील्ड का इस्तेमाल किया जाता है. छिपे हुए फ़ॉर्म फ़ील्ड में, रेस्टोरेंट और उपयोगकर्ता का आईडी एम्बेड होता है, ताकि Next.js सर्वर ऐक्शन, फ़ॉर्म सबमिट होने पर उन वैल्यू को ऐक्सेस कर सके.

रेस्टोरेंट के लिए समीक्षाएं जोड़ना

आपने समीक्षा सबमिट करने की सुविधा लागू कर दी है. इसलिए, अब यह पुष्टि की जा सकती है कि आपकी समीक्षाएं Cloud Firestore में सही तरीके से डाली गई हैं.

समीक्षा जोड़ने और इस बात की पुष्टि करने के लिए कि वह Cloud Firestore में डाली गई है, यह तरीका अपनाएं:

1. "उपयोगकर्ताओं को रेस्टोरेंट की समीक्षाएं सबमिट करने की अनुमति दें" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub डेटा स्टोर करने की जगह पर पुश करें.
2. Firebase कंसोल में, ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने का इंतज़ार करें.
3. वेब ऐप्लिकेशन को रीफ़्रेश करें और होम पेज से कोई रेस्टोरेंट चुनें.
4. रेस्टोरेंट के पेज पर, पर क्लिक करें.
5. स्टार रेटिंग चुनें.
6. समीक्षा लिखें.
7. सबमिट करें पर क्लिक करें. आपकी समीक्षा, समीक्षाओं की सूची में सबसे ऊपर दिखती है.
8. Cloud Firestore में, दस्तावेज़ जोड़ें पैनल में, उस रेस्टोरेंट का दस्तावेज़ खोजें जिसकी आपने समीक्षा की है और उसे चुनें.
9. कलेक्शन शुरू करें पैनल में, रेटिंग चुनें.
10. दस्तावेज़ जोड़ें पैनल में, अपनी समीक्षा के लिए दस्तावेज़ ढूंढें. इससे यह पुष्टि की जा सकेगी कि दस्तावेज़ सही तरीके से डाला गया है या नहीं.

ध्यान दें: समीक्षा डालने पर, वह पेज रीफ़्रेश किए बिना तुरंत पेज पर दिखती है. यह सुविधा, Firestore स्नैपशॉट और React हुक की वजह से काम करती है. अगर आपको कोड याद रखना है, तो src/components/Restaurant.jsx फ़ाइल खोलें और getReviewsSnapshotByRestaurantId() फ़ंक्शन का रेफ़रंस देखें.

9. वेब ऐप्लिकेशन से, उपयोगकर्ता की अपलोड की गई फ़ाइलें सेव करना

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

वेब ऐप्लिकेशन से, उपयोगकर्ता की अपलोड की गई फ़ाइलें सेव करने के लिए, यह तरीका अपनाएं:

1. src/components/Restaurant.jsx फ़ाइल में, उस कोड को देखें जो उपयोगकर्ता के फ़ाइल अपलोड करने पर चलता है:

async function handleRestaurantImage(target) {
        const image = target.files ? target.files[0] : null;
        if (!image) {
                return;
        }

        const imageURL = await updateRestaurantImage(id, image);
        setRestaurant({ ...restaurant, photo: imageURL });
}

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

2. src/lib/firebase/storage.js फ़ाइल में, updateRestaurantImage() और uploadImage() फ़ंक्शन को यहां दिए गए कोड से बदलें:

export async function updateRestaurantImage(restaurantId, image) {
	try {
		if (!restaurantId)
			throw new Error("No restaurant ID has been provided.");

		if (!image || !image.name)
			throw new Error("A valid image has not been provided.");

		const publicImageUrl = await uploadImage(restaurantId, image);
		await updateRestaurantImageReference(restaurantId, publicImageUrl);

		return publicImageUrl;
	} catch (error) {
		console.error("Error processing request:", error);
	}
}

async function uploadImage(restaurantId, image) {
	const filePath = `images/${restaurantId}/${image.name}`;
	const newImageRef = ref(storage, filePath);
	await uploadBytesResumable(newImageRef, image);

	return await getDownloadURL(newImageRef);
}

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

इमेज अपलोड करने की सुविधा की पुष्टि करना

यह पुष्टि करने के लिए कि इमेज उम्मीद के मुताबिक अपलोड हो रही है या नहीं, यह तरीका अपनाएं:

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

ध्यान दें: इमेज फ़ाइलों जैसे बाइनरी संसाधनों के लिए, Firebase के लिए Cloud Storage का इस्तेमाल करना सही है.

10. जनरेटिव एआई की मदद से, रेस्टोरेंट की समीक्षाओं की खास जानकारी पाना

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

Cloud Secret Manager में Gemini API पासकोड सेव करना

1. Gemini API का इस्तेमाल करने के लिए, आपके पास एपीआई पासकोड होना चाहिए. Google AI Studio में पासकोड बनाएं.
2. ऐप्लिकेशन होस्टिंग, Cloud Secret Manager के साथ इंटिग्रेट होती है. इससे, एपीआई पासकोड जैसी संवेदनशील वैल्यू को सुरक्षित तरीके से सेव किया जा सकता है:
   1. नया सीक्रेट बनाने के लिए, टर्मिनल में यह कमांड चलाएं:

   firebase apphosting:secrets:set gemini-api-key
   

   1. सीक्रेट वैल्यू के लिए कहा जाने पर, Google AI Studio से अपनी Gemini API पासकोड कॉपी करके चिपकाएं.
   2. जब आपसे पूछा जाए कि क्या नई पासकोड apphosting.yaml में जोड़ी जानी चाहिए, तो स्वीकार करने के लिए Y डालें.

आपकी Gemini API पासकोड अब Cloud Secret Manager में सुरक्षित तरीके से सेव हो गई है. साथ ही, इसे आपके ऐप्लिकेशन होस्टिंग बैकएंड से ऐक्सेस किया जा सकता है.

समीक्षा की खास जानकारी वाले कॉम्पोनेंट को लागू करना

1. src/components/Reviews/ReviewSummary.jsx में, GeminiSummary फ़ंक्शन को इस कोड से बदलें:

   export async function GeminiSummary({ restaurantId }) {
       const { firebaseServerApp } = await getAuthenticatedAppForUser();
       const reviews = await getReviewsByRestaurantId(
           getFirestore(firebaseServerApp),
           restaurantId
       );
   
       const genAI = new GoogleGenerativeAI(process.env.GEMINI_API_KEY);
       const model = genAI.getGenerativeModel({ model: "gemini-pro"});
   
       const reviewSeparator = "@";
       const prompt = `
           Based on the following restaurant reviews, 
           where each review is separated by a '${reviewSeparator}' character, 
           create a one-sentence summary of what people think of the restaurant. 
   
           Here are the reviews: ${reviews.map(review => review.text).join(reviewSeparator)}
       `;
   
       try {
           const result = await model.generateContent(prompt);
           const response = await result.response;
           const text = response.text();
   
           return (
               <div className="restaurant__review_summary">
                   <p>{text}</p>
                   <p>✨ Summarized with Gemini</p>
               </div>
           );
       } catch (e) {
           console.error(e);
           return <p>Error contacting Gemini</p>;
       }
   }
   

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

11. नतीजा

बधाई हो! आपने Next.js ऐप्लिकेशन में सुविधाएं और फ़ंक्शन जोड़ने के लिए, Firebase का इस्तेमाल करने का तरीका जाना. खास तौर पर, आपने इनका इस्तेमाल किया:

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

और जानें

• Cloud Firestore वेब कोडलैब
• Firebase Angular वेब फ़्रेमवर्क कोडलैब
• Firebase के सुरक्षा नियमों की मदद से, अपने Firestore डेटा को सुरक्षित रखना