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

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

इस कोडलैब में, आपको Firebase को 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 से साइन इन करने का तरीका.

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

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

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

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

GitHub रिपॉज़िटरी बनाना

कोडलैब का सोर्स देखने के लिए, https://github.com/firebase/friendeats-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 सीएलआई इंस्टॉल किया है और वह v13.9.0 या उसके बाद का वर्शन है:

firebase --version

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

npm install -g firebase-tools@latest

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

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

  1. Firebase सीएलआई में लॉग इन करने के लिए, नीचे दिया गया कमांड चलाएं:
    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 सीएलआई में.

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

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

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

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

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

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

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

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

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

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

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

Cloud Firestore सेट अप करना

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

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

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

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

मॉक डेटा

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

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

इस सेक्शन में, आपको App Hosting बैकएंड सेट अप करना होगा, ताकि आप 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. "Google से पुष्टि करने की सुविधा जोड़ना" मैसेज के साथ प्रतिबद्धता बनाएं और उसे अपने 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;
}

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

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

  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 स्टोरेज में इमेज अपलोड की जाती है और रेस्टोरेंट के बारे में बताने वाले 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. नतीजा

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

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

और जानें