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

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

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

Friendly Eats का वेब ऐप्लिकेशन

तैयार किए गए वेब ऐप्लिकेशन में ज़रूरी सुविधाएं उपलब्ध हैं, जिनसे पता चलता है कि 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 से साइन इन करें' सुविधा इस्तेमाल करने का तरीका.

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

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

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

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

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 commit -a -m "codelab starting point"

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

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

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

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

firebase --version

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

npm install -g firebase-tools@latest

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

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 बिलिंग प्लान की पुष्टि करें मॉडल में जाकर, पुष्टि करें कि प्लान ब्लेज़ है. इसके बाद, प्लान की पुष्टि करें पर क्लिक करें
  4. इस कोडलैब के लिए, आपको Google Analytics की ज़रूरत नहीं है. इसलिए, इस प्रोजेक्ट के लिए Google Analytics चालू करें विकल्प को टॉगल करके बंद कर दें.
  5. प्रोजेक्ट बनाएं पर क्लिक करें.
  6. अपने प्रोजेक्ट के प्रोवाइज़न होने का इंतज़ार करें. इसके बाद, जारी रखें पर क्लिक करें.
  7. अपने Firebase प्रोजेक्ट में, प्रोजेक्ट सेटिंग पर जाएं. अपना प्रोजेक्ट आईडी नोट कर लें, क्योंकि आपको बाद में इसकी ज़रूरत है. इस यूनीक आइडेंटिफ़ायर से आपके प्रोजेक्ट की पहचान की जाती है. उदाहरण के लिए, Firebase CLI में.

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

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

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

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

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

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

  1. अपने Firebase प्रोजेक्ट में, प्रोजेक्ट की खास जानकारी पर जाएं. इसके बाद, e41f2efdd9539c31.png वेब पर क्लिक करें.

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

फ़िल्टर, हेडर, रेस्टोरेंट की जानकारी, और समीक्षाओं के लिए कॉम्पोनेंट पर प्रतिक्रिया देने का काम

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 रिपॉज़िटरी पर किसी शाखा को देखने के लिए, ऐप्लिकेशन होस्टिंग बैकएंड सेट अप करना होगा.

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

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

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

  1. अपने टर्मिनल में, सीएलआई को कॉन्फ़िगर करें, ताकि वह उस Firebase प्रोजेक्ट का इस्तेमाल कर सके जिसे आपने पहले बनाया था:
    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 कंसोल में, ऐप्लिकेशन होस्टिंग पेज पर जाएं:

ऐप्लिकेशन होस्टिंग कंसोल की शुरुआती स्थिति, जिसमें &#39;शुरू करें&#39; बटन है

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

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

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

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

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

  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 एपीआई

जानकारी

GoogleAuthProvider

Google की, पुष्टि करने वाली कंपनी का इंस्टेंस बनाता है.

signInWithPopup

डायलॉग पर आधारित पुष्टि करने की प्रोसेस शुरू करता है.

auth.signOut

उपयोगकर्ता को साइन आउट कर देता है.

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

  1. &quot;Google Authentication जोड़ना&quot; कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने GitHub रिपॉज़िटरी में पुश करें. 1. Firebase कंसोल में ऐप्लिकेशन होस्टिंग पेज खोलें और नए रोल आउट के पूरा होने तक इंतज़ार करें.
  2. वेब ऐप्लिकेशन में, पेज को रीफ़्रेश करें और 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 };
}

प्रमाणीकरण बदलावों की सदस्यता लें

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

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

यह कोड, उपयोगकर्ता को अपडेट करने के लिए 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. वेब ऐप्लिकेशन में, 2cf67d488d8e6332.png > रेस्टोरेंट के सैंपल जोड़ें को चुनें.
  2. फ़ायरस्टोर डेटाबेस पेज पर Firebase कंसोल में, रेस्टोरेंट चुनें. आपको रेस्टोरेंट कलेक्शन में टॉप-लेवल के दस्तावेज़ दिखते हैं. इनमें से हर दस्तावेज़ किसी रेस्टोरेंट के बारे में जानकारी देता है.
  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. वेब ऐप्लिकेशन में, पेज को रीफ़्रेश करें. रेस्टोरेंट की इमेज, पेज पर टाइल के तौर पर दिखती हैं.

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

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

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

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

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

  1. वेब ऐप्लिकेशन को रीफ़्रेश करें. हालांकि, रेस्टोरेंट की लिस्टिंग अब भी लोड होती हैं. रेस्टोरेंट की जानकारी, सर्वर के जवाब में दी जाती है. JavaScript चालू होने पर, क्लाइंट-साइड JavaScript कोड की मदद से रेस्टोरेंट की जानकारी हाइड्रेट की जाती है.
  2. 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() फ़ंक्शन से मिलता-जुलता है. हालांकि, यह स्नैपशॉट फ़ंक्शन एक कॉलबैक फ़ंक्शन उपलब्ध कराता है, ताकि रेस्टोरेंट के कलेक्शन में बदलाव होने पर हर बार कॉलबैक को शुरू किया जा सके.

  1. 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. वेब ऐप्लिकेशन में, 27ca5d1e8ed8adfe.png > रेस्टोरेंट के सैंपल जोड़ें को चुनें. अगर आपका स्नैपशॉट फ़ंक्शन सही तरीके से लागू किया गया है, तो रेस्टोरेंट रीयल-टाइम में पेज रीफ़्रेश किए बिना दिखते हैं.

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

  1. 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 एट्रिब्यूट की वैल्यू उस फ़ंक्शन के बारे में बताती है जिसे अगले चरण में लागू किया जाता है.

  1. 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 में शामिल होने की पुष्टि करने के लिए, यह तरीका अपनाएं:

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

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

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() फ़ंक्शन के काम करने के तरीके को लागू करने के लिए, नीचे दिया गया तरीका अपनाएं.

  1. 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. 7067eb41fea41ff0.png पर क्लिक करें और अपने फ़ाइल सिस्टम से कोई इमेज अपलोड करें. इमेज आपके आस-पास के माहौल से सुरक्षित रहती है और उसे Cloud Storage में अपलोड कर दिया जाता है. इमेज अपलोड करने के तुरंत बाद दिखने लगती है.
  5. Firebase के लिए Cloud Storage पर जाएं.
  6. उस फ़ोल्डर पर जाएं जिसमें रेस्टोरेंट मौजूद है. आपने जो इमेज अपलोड की है वह फ़ोल्डर में मौजूद है.

6cf3f9e2303c931c.png

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. नतीजा

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

और जानें