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

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

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

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

• अपने-आप बिल्ड और डिप्लॉय होना: इस कोडलैब में Firebase App Hosting का इस्तेमाल किया जाता है. इससे, कॉन्फ़िगर की गई ब्रांच में कोड पुश करने पर, Next.js कोड अपने-आप बिल्ड और डिप्लॉय हो जाता है.
• साइन-इन और साइन-आउट: पूरा वेब ऐप्लिकेशन, आपको Google से साइन इन करने और साइन आउट करने की सुविधा देता है. उपयोगकर्ता के लॉगिन और पर्सिस्टेंस को पूरी तरह से Firebase से पुष्टि करने की सुविधा से मैनेज किया जाता है.
• इमेज: वेब ऐप्लिकेशन की मदद से, साइन इन किए हुए उपयोगकर्ता रेस्टोरेंट की इमेज अपलोड कर सकते हैं. इमेज ऐसेट, 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 प्रोजेक्ट को ब्लेज़ प्लान पर अपग्रेड करने की सुविधा

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 npm पैकेज का इस्तेमाल करें:

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

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

   git init
   
   git add .
   
   git commit -m "Codelab starting point"
   
   git branch -M main
   

4. नई GitHub रिपॉज़िटरी बनाएं: https://github.com/new. इसे अपनी पसंद के मुताबिक कोई भी नाम दें.
5. आप GitHub की पुष्टि authenticate (एचटीटीपीएस या एसएसएच) कैसे करते हैं, इसके आधार पर, GitHub से बनाए गए नए यूआरएल को कॉपी करें:
   • https://github.com/<USER_NAME>/<REPOSITORY_NAME>.git या
   • [e-mail]:<USER_NAME>/<REPOSITORY_NAME>.git
6. यहां दिया गया कमांड चलाकर, लोकल बदलावों को अपनी नई GitHub रिपॉजिटरी में पुश करें. <REPOSITORY_URL> प्लेसहोल्डर की जगह, अपनी रिपॉज़िटरी का असल यूआरएल डालें.

   git remote add origin <REPOSITORY_URL>
   
   git push -u origin main
   

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

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

यह पुष्टि करने के लिए कि आपके पास Firebase CLI इंस्टॉल है और यह v14.1.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. पिछले चरण में इस्तेमाल किए गए Google खाते से, Firebase कंसोल में साइन इन करें.
2. नया प्रोजेक्ट बनाने के लिए, बटन पर क्लिक करें. इसके बाद, प्रोजेक्ट का नाम डालें. उदाहरण के लिए, FriendlyEats Codelab.
   

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

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

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

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

Firebase App Hosting और Firebase के लिए Cloud Storage का इस्तेमाल करने के लिए, आपके Firebase प्रोजेक्ट को इस्तेमाल के हिसाब से पैसे चुकाने (Blaze) वाले प्लान पर होना चाहिए. इसका मतलब है कि यह Cloud बिलिंग खाते से लिंक होना चाहिए.

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

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

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

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

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

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

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

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

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

Cloud Firestore सेट अप करना

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

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

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

सुरक्षा से जुड़े नियम डिप्लॉय करना

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

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

   firebase use --add
   

   जब आपसे कोई दूसरा नाम डालने के लिए कहा जाए, तब friendlyeats-codelab डालें.
2. इन सुरक्षा नियमों (और बाद में ज़रूरी होने वाले इंडेक्स) को डिप्लॉय करने के लिए, अपने टर्मिनल में यह कमांड चलाएं:

   firebase deploy --only firestore,storage
   

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

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

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

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

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

फ़ोल्डर और फ़ाइलें	ब्यौरा
src/components	फ़िल्टर, हेडर, रेस्टोरेंट की जानकारी, और समीक्षाओं के लिए React कॉम्पोनेंट
src/lib	ऐसे यूटिलिटी फ़ंक्शन जो React या Next.js से जुड़े नहीं हैं
src/lib/firebase	Firebase के लिए खास तौर पर बनाया गया कोड और Firebase कॉन्फ़िगरेशन
public	वेब ऐप्लिकेशन में मौजूद स्टैटिक ऐसेट, जैसे कि आइकॉन
src/app	Next.js ऐप्लिकेशन राऊटर की मदद से राऊटिंग करना
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 के लिए खास एपीआई

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

मॉक डेटा

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

5. App Hosting बैकएंड बनाना

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

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

बैकएंड बनाना

1. Firebase कंसोल में, App Hosting पेज पर जाएं.
2. बैकएंड बनाने की प्रोसेस शुरू करने के लिए, शुरू करें पर क्लिक करें.
3. कोई क्षेत्र चुनें. किसी असली ऐप्लिकेशन के लिए, आपको अपने उपयोगकर्ताओं के सबसे नज़दीकी इलाके को चुनना होगा.
4. GitHub की पुष्टि करने की सुविधा सेट अप करने के लिए, GitHub रिपॉज़िटरी इंपोर्ट करें चरण में दिए गए निर्देशों का पालन करें.
5. रिपॉज़िटरी में जाकर, GitHub में नई रिपॉज़िटरी का ऐक्सेस दें को चुनें. इसके बाद, पहले बनाई गई GitHub रिपॉज़िटरी का ऐक्सेस चालू करने के लिए, प्रॉम्प्ट में दिए गए निर्देशों का पालन करें.
6. सूची को रीफ़्रेश करने के लिए, सूची रीफ़्रेश करें पर क्लिक करें. इसके बाद, अपनी रिपॉज़िटरी चुनें और आगे बढ़ें पर क्लिक करें.
7. डिप्लॉयमेंट की सेटिंग सेट करें:
   1. लाइव ब्रांच को main पर सेट करें.
   2. रूट डायरेक्ट्री को / के तौर पर रखें.
   3. अपने-आप रोल आउट होने की सुविधा चालू करें.
8. अपने बैकएंड को friendlyeats-codelab नाम दें और Next पर क्लिक करें.
9. Firebase वेब ऐप्लिकेशन को असोसिएट करें में जाकर, कोई मौजूदा Firebase वेब ऐप्लिकेशन चुनें को चुनें. इसके बाद, सूची से वह ऐप्लिकेशन चुनें जिसे आपने जोड़ा है
10. Finish and deploy पर क्लिक करें. आपको एक नए पेज पर रीडायरेक्ट किया जाएगा. यहां आपको अपने नए App Hosting बैकएंड का स्टेटस दिखेगा!
11. App Hosting की मदद से डिप्लॉय किए गए ऐप्लिकेशन के बारे में ज़्यादा जानकारी देखने के लिए, देखें पर क्लिक करें. इसमें रोलआउट की स्थिति, लॉग, और इस्तेमाल की जानकारी शामिल है.
12. रोलआउट पूरा होने के बाद, डोमेन में जाकर अपनी साइट के यूआरएल पर क्लिक करें. डीएनएस प्रोपेगेशन की वजह से, इसे काम करने में कुछ मिनट लग सकते हैं.
13. ओह! पेज लोड करने पर, आपको गड़बड़ी का यह मैसेज दिखेगा: "ऐप्लिकेशन में गड़बड़ी: सर्वर-साइड पर कोई गड़बड़ी हुई है. ज़्यादा जानकारी के लिए सर्वर लॉग देखें."
14. Firebase कंसोल में, अपने App Hosting बैकएंड का लॉग टैब देखें. आपको "गड़बड़ी: लागू नहीं किया गया" लॉग दिखेगा. हम अगले चरण में, पुष्टि करने की सुविधा जोड़कर इसे ठीक करेंगे.

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

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

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

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

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

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

साइन-इन और साइन-आउट फ़ंक्शन लागू करना

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

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

export function onIdTokenChanged(cb) {
  return _onIdTokenChanged(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 एपीआई का इस्तेमाल किया जाता है:

Firebase API	ब्यौरा
auth.onAuthStateChanged	उपयोगकर्ता के साइन-इन की स्थिति में होने वाले बदलावों के लिए, एक ऑब्ज़र्वर जोड़ता है.
auth.onIdTokenChanged	उपयोगकर्ता के आईडी टोकन में होने वाले बदलावों पर नज़र रखने के लिए, एक ऑब्ज़र्वर जोड़ता है.
GoogleAuthProvider	Google की पुष्टि करने वाली सेवा देने वाली कंपनी का इंस्टेंस बनाता है.
signInWithPopup	डायलॉग बॉक्स पर आधारित पुष्टि करने की प्रोसेस शुरू करता है.
auth.signOut	उपयोगकर्ता को साइन आउट कर देता है.

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

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

सर्वर को पुष्टि की स्थिति की जानकारी देने के लिए, हम कुकी का इस्तेमाल करेंगे. जब भी क्लाइंट में पुष्टि की स्थिति बदलती है, तो हम __session कुकी को अपडेट कर देंगे.

src/components/Header.jsx में, useUserSession फ़ंक्शन को इस कोड से बदलें:

function useUserSession(initialUser) {
  useEffect(() => {
    return onIdTokenChanged(async (user) => {
      if (user) {
        const idToken = await user.getIdToken();
        await setCookie("__session", idToken);
      } else {
        await deleteCookie("__session");
      }
      if (initialUser?.uid === user?.uid) {
        return;
      }
      window.location.reload();
    });
  }, [initialUser]);

  return initialUser;
}

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

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

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

export async function getAuthenticatedAppForUser() {
  const authIdToken = (await cookies()).get("__session")?.value;

  // Firebase Server App is a new feature in the JS SDK that allows you to
  // instantiate the SDK with credentials retrieved from the client & has
  // other affordances for use in server environments.
  const firebaseServerApp = initializeServerApp(
    // https://github.com/firebase/firebase-js-sdk/issues/8863#issuecomment-2751401913
    initializeApp(),
    {
      authIdToken,
    }
  );

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

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

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

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

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

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

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

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

1. "पुष्टि करने की सुविधा जोड़ें" मैसेज के साथ एक कमिट बनाएं और उसे अपनी GitHub रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Add authentication"
   
   git push
   

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

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

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

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

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

1. अगर आपने अब तक साइन इन नहीं किया है, तो वेब ऐप्लिकेशन में साइन इन करें. इसके बाद, > सैंपल रेस्टोरेंट जोड़ें को चुनें. ध्यान दें कि हमें Friendly Eats वेब ऐप्लिकेशन में कोई रेस्टोरेंट नहीं दिखता है. इसकी वजह यह है कि हमने अब तक डेटा फ़ेच करने वाला कोड सेट अप नहीं किया है. हम इसे अगले चरण में ठीक करेंगे.
2. Firebase कंसोल में, Firestore Database पेज पर जाकर, restaurants को चुनें. आपको रेस्टोरेंट कलेक्शन में टॉप-लेवल के दस्तावेज़ दिखते हैं. इनमें से हर दस्तावेज़, एक रेस्टोरेंट को दिखाता है.
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 रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Read the list of restaurants from Firestore"
   
   git push
   

2. Firebase कंसोल में App Hosting पेज खोलें और नए रोलआउट के पूरा होने का इंतज़ार करें.
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(() => {
    return getRestaurantsSnapshot((data) => {
      setRestaurants(data);
    }, filters);
  }, [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);

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

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

export function getRestaurantSnapshotById(restaurantId, cb) {
  if (!restaurantId) {
    console.log("Error: Invalid ID received: ", restaurantId);
    return;
  }

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

  const docRef = doc(db, "restaurants", restaurantId);
  return onSnapshot(docRef, (docSnap) => {
    cb({
      ...docSnap.data(),
      timestamp: docSnap.data().timestamp.toDate(),
    });
  });
}

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

1. "Listen for realtime restaurant updates" मैसेज के साथ एक कमिट बनाएं और उसे अपनी GitHub रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Listen for realtime restaurant updates"
   
   git push
   

2. Firebase कंसोल में App Hosting पेज खोलें और नए रोलआउट के पूरा होने का इंतज़ार करें.
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}
  onSubmit={() => {
    handleClose();
  }}
>

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

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

export async function handleReviewFormSubmission(data) {
  const { firebaseServerApp } = await getAuthenticatedAppForUser();
  const db = getFirestore(firebaseServerApp);

  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. "Allow users to submit restaurant reviews" मैसेज के साथ एक कमिट बनाएं और उसे अपनी GitHub रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Allow users to submit restaurant reviews"
   
   git push
   

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

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

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

इस सेक्शन में, फ़ंक्शन जोड़ा जाता है, ताकि लॉग इन करने पर, रेस्टोरेंट से जुड़ी इमेज को बदला जा सके. आपने Firebase स्टोरेज में इमेज अपलोड की और रेस्टोरेंट की जानकारी देने वाले 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);
  setRestaurantDetails({ ...restaurantDetails, 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. "Allow users to change each restaurants' photo" मैसेज के साथ एक कमिट बनाएं और उसे अपनी GitHub रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Allow users to change each restaurants' photo"
   
   git push
   

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

   firebase apphosting:secrets:set GEMINI_API_KEY
   

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

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

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

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

   export async function GeminiSummary({ restaurantId }) {
     const { firebaseServerApp } = await getAuthenticatedAppForUser();
     const reviews = await getReviewsByRestaurantId(
       getFirestore(firebaseServerApp),
       restaurantId
     );
   
     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 {
       if (!process.env.GEMINI_API_KEY) {
         // Make sure GEMINI_API_KEY environment variable is set:
         // https://genkit.dev/docs/get-started/
         throw new Error(
           'GEMINI_API_KEY not set. Set it with "firebase apphosting:secrets:set GEMINI_API_KEY"'
         );
       }
   
       // Configure a Genkit instance.
       const ai = genkit({
         plugins: [googleAI()],
         model: gemini20Flash, // set default model
       });
       const { text } = await ai.generate(prompt);
   
       return (
         <div className="restaurant__review_summary">
           <p>{text}</p>
           <p>✨ Summarized with Gemini</p>
         </div>
       );
     } catch (e) {
       console.error(e);
       return <p>Error summarizing reviews.</p>;
     }
   }
   

2. "Use AI to summarize reviews" मैसेज के साथ एक कमिट बनाएं और उसे अपनी GitHub रिपॉज़िटरी में पुश करें.

   git add .
   
   git commit -m "Use AI to summarize reviews"
   
   git push
   

3. Firebase कंसोल में App Hosting पेज खोलें और नए रोलआउट के पूरा होने का इंतज़ार करें.
4. किसी रेस्टोरेंट का पेज खोलें. सबसे ऊपर, आपको पेज पर मौजूद सभी समीक्षाओं की खास जानकारी एक वाक्य में दिखेगी.
5. नई समीक्षा जोड़ें और पेज को रीफ़्रेश करें. आपको खास जानकारी में बदलाव दिखेगा.

11. App Hosting की मदद से होस्ट की गई साइट को अनपब्लिश करना

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

App Hosting की मदद से होस्ट की गई किसी साइट को अनपब्लिश करने के लिए:

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

12. नतीजा

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

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

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

• वेब के लिए Cloud Firestore का Codelab
• Firebase Angular Web Frameworks का कोडलैब
• Firebase के सुरक्षा नियमों की मदद से, Firestore डेटा को सुरक्षित रखना