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

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

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

इस कोडलैब में, आप Firebase को Next.js वेब ऐप्लिकेशन के साथ इंटिग्रेट करने का तरीका जानेंगे. इस वेब ऐप्लिकेशन का नाम फ़्रेंडली ईट्स है, जो रेस्टोरेंट की समीक्षाओं के लिए बनाई गई वेबसाइट है.

फ़्रेंडली ईट वेब ऐप्लिकेशन

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

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

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

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

2. अपना डेवलपमेंट एनवायरमेंट और GitHub रिपॉज़िटरी सेट अप करें

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

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

कोडलैब का सोर्स, https://github.com/firebase/फ़्रेंडलीeats-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 फ़ोल्डर को अपने डेटा स्टोर करने की जगह में कॉपी करें:

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

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

git commit -a -m "codelab starting point"

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

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

Firebase सीएलआई को इंस्टॉल या अपडेट करें

आपने Firebase सीएलआई इंस्टॉल किया है और यह v13.9.0 या इसके बाद का वर्शन है, इसकी पुष्टि करने के लिए नीचे दिया गया निर्देश चलाएं:

firebase --version

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

npm install -g firebase-tools@latest

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

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

Firebase सीएलआई में लॉग इन करने के लिए, नीचे दिया गया कमांड चलाएं:
```
firebase login
```
आपको Firebase डेटा इकट्ठा करना है या नहीं, इसके आधार पर Y या N डालें.
अपने ब्राउज़र में, Google खाता चुनें. इसके बाद, अनुमति दें पर क्लिक करें.

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

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

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

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

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

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

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

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

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

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

अपने Firebase प्रोजेक्ट में प्रोजेक्ट की खास जानकारी पर जाएं और फिर वेब पर क्लिक करें.

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

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

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

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

Cloud Firestore सेट अप करें

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

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

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

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

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

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

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

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

मॉक डेटा

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

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

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

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

सुरक्षा के नियम लागू करें

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

अपने टर्मिनल में, सीएलआई को कॉन्फ़िगर करें, ताकि आपने पहले जो Firebase प्रोजेक्ट बनाया था उसका इस्तेमाल कर सकें:
```
firebase use --add
```
जब उपनाम के लिए कहा जाए, तो friendlyeats-codelab डालें.
इन सुरक्षा नियमों को लागू करने के लिए, इस निर्देश को अपने टर्मिनल में चलाएं:
```
firebase deploy --only firestore:rules,storage
```
अगर आपसे पूछा जाए: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?", तो हां चुनने के लिए Enter दबाएं.

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

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

बैकएंड बनाएं

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

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

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

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

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

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

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 APIs का इस्तेमाल करता है:

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

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

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

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

सर्वर को प्रमाणीकरण स्थिति पास करने के लिए, हम एक सर्विस वर्कर का इस्तेमाल करेंगे. 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 };
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/app/page.js फ़ाइल में, <Home /> सर्वर कॉम्पोनेंट ढूंढें और getRestaurants फ़ंक्शन के लिए कॉल की समीक्षा करें. यह फ़ंक्शन, सर्वर रन टाइम पर रेस्टोरेंट की सूची दिखाता है. getRestaurants फ़ंक्शन को इन चरणों में लागू किया जाता है.
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(),
		};
	});
}

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

पुष्टि करें कि सर्वर रन टाइम पर रेस्टोरेंट लिस्टिंग लोड होती हैं

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

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

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

DevTools में JavaScipt बंद करें

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

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

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

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

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

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

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

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

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

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 डेटाबेस पेज से किए गए बदलाव अब वेब ऐप्लिकेशन में रीयल टाइम में दिखते हैं.

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

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

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 दस्तावेज़ को भी अपडेट करता है. इस दस्तावेज़ में, रेस्टोरेंट की रेटिंग की संख्या और तय की गई औसत रेटिंग के अपडेट किए गए आंकड़े शामिल होते हैं.

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 Server Action की मदद से, फ़ॉर्म के डेटा को आसानी से ऐक्सेस किया जा सकता है. जैसे, फ़ॉर्म सबमिशन पेलोड से टेक्स्ट वैल्यू पाने के लिए, data.get("text").

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

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

<form action={handleReviewFormSubmission}>

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

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

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

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

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

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

Firestore एम्युलेटर में दस्तावेज़

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

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

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

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

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() फ़ंक्शन के व्यवहार को लागू करते हैं.

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 में मौजूद रेस्टोरेंट के दस्तावेज़ को अपडेट करता है. इस दस्तावेज़ में, इमेज के यूआरएल को अपडेट किया जाता है.

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

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

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

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

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

Cloud Secret Manager में Gemini API (एपीआई) कुंजी सेव करें

Gemini API का इस्तेमाल करने के लिए, आपको एपीआई पासकोड की ज़रूरत होगी. Google AI Studio में कोई कुंजी बनाएं.
ऐप्लिकेशन होस्टिंग की सुविधा, 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 में सुरक्षित तरीके से सेव किया जाएगा. इसे आपके ऐप्लिकेशन होस्टिंग बैकएंड से ऐक्सेस किया जा सकता है.

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

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

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

11. नतीजा

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

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