Next.js ऐप्लिकेशन की मदद से, Firebase ऐप्लिकेशन होस्टिंग में डिप्लॉय करें

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

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

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

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

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

• Next.js और JavaScript की जानकारी

आपको क्या सीखने को मिलेगा

• Next.js App Router और सर्वर साइड रेंडरिंग के साथ Firebase का इस्तेमाल कैसे करें
• सिर्फ़ सर्वर-साइड के सीक्रेट का इस्तेमाल करके, Gemini API को कॉल करने की अनुमति कैसे दें

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

• अपनी पसंद का ब्राउज़र, जैसे कि Google Chrome
• IDX.dev (वेब पर आधारित वर्कस्पेस) का ऐक्सेस
• Firebase प्रोजेक्ट बनाने और उसे मैनेज करने के लिए Google खाता
• GitHub खाता (यह ज़रूरी नहीं है कि यह ऊपर दिए गए ईमेल खाते से जुड़ा हो)

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

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

नई GitHub रिपॉज़िटरी बनाना और उसे IDX में इंपोर्ट करना

Firebase App Hosting की मदद से, GitHub रिपॉज़िटरी सेट अप की जा सकती है. इससे, कॉन्फ़िगर की गई ब्रांच में पुश करने पर, Next.js कोड अपने-आप बन जाता है और डिप्लॉय हो जाता है.

1. इस कोडलैब के लिए, नई GitHub रिपॉज़िटरी बनाएं: https://github.com/new. इसे अपनी पसंद का कोई भी नाम दें. उदाहरण के लिए, MyFriendlyEatsCodelab.
2. अपनी नई रिपॉज़िटरी का यूआरएल कॉपी करें. यह इस तरह दिखेगा:
   https://github.com/USER_NAME/REPOSITORY_NAME.git
3. https://idx.google.com पर जाएं और साइन इन करें.
4. कोई रिपॉज़िटरी इंपोर्ट करें पर क्लिक करें और कॉपी किया गया GitHub यूआरएल चिपकाएं.
   IDX आपसे GitHub से लिंक करने के लिए कहेगा. इसके बाद, यह आपकी (खाली) रिपॉज़िटरी का क्लोन बना देगा.

कोडलैब का सोर्स कोड रिपॉज़िटरी देखना

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

यह कोडलैब, सिर्फ़ Firebase App Hosting और Gemini API पर फ़ोकस करता है. यह पूरे कोडलैब "Firebase को Next.js ऐप्लिकेशन के साथ इंटिग्रेट करें" का छोटा वर्शन है. इस छोटे किए गए कोडलैब के लिए, आपको सिर्फ़ friendlyeats-web रिपॉज़िटरी की #io-connect ब्रांच में मौजूद सोर्स कोड के साथ काम करना होगा. खास तौर पर, nextjs-step10 डायरेक्ट्री में मौजूद सोर्स कोड के साथ काम करना होगा.

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

• nextjs-start: इसमें पूरे कोडलैब "Firebase को Next.js ऐप्लिकेशन के साथ इंटिग्रेट करें" के लिए स्टार्टर कोड शामिल है.
• nextjs-end: इसमें पूरे वेब ऐप्लिकेशन का समाधान कोड होता है.

कोड लैब के सोर्स को अपनी नई रिपॉज़िटरी में कॉपी करना

nextjs-step10 डायरेक्ट्री को अपनी रिपॉज़िटरी में कॉपी करने का तरीका यहां बताया गया है:

1. IDX में, मेन्यू > टर्मिनल > नया टर्मिनल का इस्तेमाल करके टर्मिनल खोलें.
2. io-connect ब्रांच से सिर्फ़ nextjs-step10 डायरेक्ट्री को फ़ेच करने के लिए, giget npm पैकेज का इस्तेमाल करें:

   npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
   

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

   git add -A
   git commit -m "codelab starting point"
   git branch -M main
   git push -u origin main
   

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

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

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

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

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

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

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

मॉक डेटा

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

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

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

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

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

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

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

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

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

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

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

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

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

बैकएंड बनाना

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

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

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

6. Firebase की अन्य सेवाएं सेट अप करना

इस कोडलैब में सिर्फ़ Firebase App Hosting और Gemini API पर फ़ोकस किया गया है. हालांकि, वेब ऐप्लिकेशन को काम करने के लिए, Firebase की अन्य सेवाओं की ज़रूरत होती है. इन सभी सेवाओं को आपके ऐप्लिकेशन में काम करने के लिए, कोडबेस का इस्तेमाल किया जाता है. आपने इस कोडबेस को अपनी GitHub रिपो में कॉपी किया है. हालांकि, आपको इन सेवाओं को अपने Firebase प्रोजेक्ट में अब भी सेट अप करना होगा.

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

1. Firebase कंसोल में, Authentication पर जाएं.
2. शुरू करें पर क्लिक करें.
3. अन्य प्रोवाइडर कॉलम में, Google > चालू करें पर क्लिक करें.
   1. प्रोजेक्ट का सार्वजनिक नाम टेक्स्ट बॉक्स में, कोई नाम डालें. जैसे, My FriendlyEatsCodelab app.
   2. प्रोजेक्ट के लिए सहायता ईमेल पता ड्रॉप-डाउन से, अपना ईमेल पता चुनें.
   3. सेव करें पर क्लिक करें.
4. Authentication पेज पर मौजूद, Settings टैब पर क्लिक करें.
   1. स्क्रीन पर बाईं ओर मौजूद मेन्यू में, अनुमति वाले डोमेन पर क्लिक करें.
   2. डोमेन जोड़ें पर क्लिक करें. इसके बाद, ऐप्लिकेशन होस्टिंग के लिए बनाया गया नया डोमेन जोड़ें. यह .hosted.app से खत्म होता है.
   3. सेव करने के लिए, जोड़ें पर क्लिक करें.

Cloud Firestore सेट अप करना

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

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

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

7. अपने वेब ऐप्लिकेशन को कॉन्फ़िगर करना

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

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

IDX में Node.js और Firebase CLI पहले से इंस्टॉल होते हैं. इसलिए, आपको इन्हें इंस्टॉल करने की ज़रूरत नहीं है. आपको सिर्फ़ CLI सेट अप करना होगा.

1. IDX में मौजूद टर्मिनल में, इन कमांड को चलाकर CLI को उस Firebase प्रोजेक्ट का इस्तेमाल करने के लिए कॉन्फ़िगर करें जिसे आपने पहले बनाया था:

   firebase login --no-localhost
   firebase use --add
   

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

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

आपने GitHub repo में जो कोड कॉपी किया है उसमें Firestore (firestore.rules में) और Cloud Storage for Firebase (storage.rules में) के लिए, सुरक्षा से जुड़े नियमों के सेट पहले से मौजूद हैं. सुरक्षा से जुड़े नियमों को डिप्लॉय करने के बाद, आपके डेटाबेस और बकेट में मौजूद डेटा का गलत इस्तेमाल नहीं किया जा सकेगा.

एडवांस क्वेरी की सुविधा चालू करने के लिए, Firestore (firestore.indexes.json में) के लिए इंडेक्स का सेट डिप्लॉय करने के लिए, सीएलआई का इस्तेमाल भी किया जा सकता है.

1. इन सुरक्षा नियमों और इंडेक्स को डिप्लॉय करने के लिए, IDX में मौजूद टर्मिनल में यह कमांड चलाएं:

   firebase deploy --only firestore,storage
   

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

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

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

      runConfig:
          minInstances: 0
          maxInstances: 2
      env:
          # Get these values from the Firebase console
          - variable: NEXT_PUBLIC_FIREBASE_API_KEY
              value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
          - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
              value: project-id.firebaseapp.com
          - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
              value: project-id
          - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
              value: project-id.firebasestorage.app
          - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
              value: 111111111111
          - variable: NEXT_PUBLIC_FIREBASE_APP_ID
              value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
      

   3. फ़ाइल सेव करें. इसके बाद, IDX में मौजूद टर्मिनल में, GitHub पर बदलावों को पुश करने के लिए ये कमांड चलाएं:

      git commit -a -m "Setup Firebase Config"
      
      git push
      

3. Firebase कंसोल पर वापस जाएं और ऐप्लिकेशन होस्टिंग पेज पर वापस जाएं. इसके बाद, यह तरीका अपनाएं:
   1. अपने बैकएंड के लिए, डैशबोर्ड देखें पर क्लिक करें.
   2. देखें कि git push से नई बिल्ड ट्रिगर हो गई है! इसे बनाने और Cloud Run पर रोल आउट करने में करीब तीन मिनट लगेंगे. build-ID चिप पर क्लिक करके, इसकी प्रोग्रेस को मॉनिटर किया जा सकता है.
   3. यह देखने के लिए कि रोलआउट पूरा हो गया है या नहीं, कंसोल पेज को रीफ़्रेश करें. प्रोसेस पूरी होने के बाद, डोमेन में जाकर, अपने डोमेन (.hosted.app पर खत्म होने वाला) के लिंक पर क्लिक करें. इससे वह खुल जाएगा और आपको नया ऐप्लिकेशन दिखेगा!

बधाई हो, आपने शुरुआती वेब ऐप्लिकेशन को डिप्लॉय कर दिया है! आइए, इसके बारे में थोड़ा और जानते हैं.

8. ब्राउज़र में वेब ऐप्लिकेशन आज़माना

पुष्टि करें कि Firebase Authentication का इस्तेमाल करके लॉगिन किया जा सकता है

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

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

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

अपने Cloud Firestore डेटाबेस में नकली रेस्टोरेंट का डेटा डालने के लिए, > रेस्टोरेंट का सैंपल डेटा जोड़ें को चुनें.

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

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

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

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

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

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

1. वेब ऐप्लिकेशन को रीफ़्रेश करें. इसके बाद, होम पेज पर जाकर कोई रेस्टोरेंट चुनें.
2. रेस्टोरेंट के पेज पर, पर क्लिक करें.
3. कोई स्टार रेटिंग चुनें.
4. समीक्षा लिखें.
5. सबमिट करें पर क्लिक करें. आपकी समीक्षा, समीक्षाओं की सूची में सबसे ऊपर दिखती है.

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

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

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

App Hosting, Cloud Secret Manager के साथ इंटिग्रेट होता है. इससे आपको एपीआई कुंजियों जैसी संवेदनशील वैल्यू को सुरक्षित तरीके से सेव करने की सुविधा मिलती है.

1. Gemini API का इस्तेमाल करने के लिए, आपको एक एपीआई पासकोड की ज़रूरत होगी. Google AI Studio में जाकर, एक पासकोड बनाएं.
   जब आपसे पूछा जाए, तो वही प्रोजेक्ट चुनें जिसका इस्तेमाल आपने इस कोडलैब के लिए किया है. बैकग्राउंड में, Firebase प्रोजेक्ट एक Google Cloud प्रोजेक्ट होता है.
2. नया सीक्रेट बनाने के लिए, IDX के टर्मिनल में यह कमांड चलाएं:

   firebase apphosting:secrets:set gemini-api-key
   

3. जब सीक्रेट वैल्यू डालने के लिए कहा जाए, तब Google AI Studio से Gemini API पासकोड को कॉपी करके चिपकाएं.
4. अगर आपसे पूछा जाए: "To use this secret, your backend's service account must be granted access. Would you like to grant access now?", तो हां चुनने के लिए Enter दबाएं.
5. जब आपसे पूछा जाए कि क्या नए सीक्रेट को apphosting.yaml में जोड़ना है, तो स्वीकार करने के लिए Y डालें. इसके बाद, एनवायरमेंट वैरिएबल के नाम के तौर पर GEMINI_API_KEY को चुनने के लिए, Enter दबाएं.

आपका Gemini API पासकोड अब Cloud Secret Manager में सुरक्षित तरीके से सेव हो गया है. साथ ही, इसे App Hosting बैकएंड से ऐक्सेस किया जा सकता है. Google Cloud Console में Secrets Manager डैशबोर्ड में जाकर भी वैल्यू देखी जा सकती है.

6. apphosting.yaml फ़ाइल खोलें और ध्यान दें कि आपके सीक्रेट का नाम रिकॉर्ड किया गया है, लेकिन वैल्यू नहीं.यह इस तरह दिखनी चाहिए:

   runConfig:
       minInstances: 0
       maxInstances: 2
   env:
       # Get these values from the Firebase console
       - variable: NEXT_PUBLIC_FIREBASE_API_KEY
           value: xxxxxxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxx
       - variable: NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN
           value: project-id.firebaseapp.com
       - variable: NEXT_PUBLIC_FIREBASE_PROJECT_ID
           value: project-id
       - variable: NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET
           value: project-id.firebasestorage.app
       - variable: NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID
           value: 111111111111
       - variable: NEXT_PUBLIC_FIREBASE_APP_ID
           value: 1:111111111111:web:aaaaaaaaaaaaaaaaaaaaaa
       - variable: GEMINI_API_KEY
           secret: gemini-api-key
   

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

1. आईडीएक्स में, src/components/Reviews/ReviewSummary.jsx खोलें.
2. 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-1.5-flash",
       safety_settings: [
           {
           category: HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT,
           threshold: HarmBlockThreshold.BLOCK_NONE,
           },
       ],
       });
       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>;
       }
   }
   

3. IDX में मौजूद टर्मिनल में, कमिट बनाने और उसे अपनी GitHub रिपॉज़िटरी में पुश करने के लिए, ये कमांड चलाएं.

   git commit -a -m "Use AI to summarize reviews"
   
   git push
   

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

10. नतीजा

बधाई हो! आपने Next.js ऐप्लिकेशन को डिप्लॉय करने के लिए, Firebase ऐप्लिकेशन होस्टिंग का इस्तेमाल करने का तरीका सीखा. साथ ही, टेक्स्ट की खास जानकारी पाने के लिए Gemini API का इस्तेमाल करने का तरीका सीखा. आपने इन सुविधाओं का इस्तेमाल किया है:

• Firebase ऐप्लिकेशन होस्टिंग की मदद से, कॉन्फ़िगर की गई GitHub ब्रांच में कोड पुश करने पर, Next.js कोड अपने-आप बनाया और डिप्लॉय किया जा सकता है.
• Cloud Secret Manager (App Hosting के साथ इंटिग्रेट किया गया) का इस्तेमाल करके, अपने Gemini API पासकोड को सुरक्षित तरीके से सेव करें. इससे आपको अपने ऐप्लिकेशन में जनरेटिव एआई की सुविधाएं बनाने में मदद मिलेगी.

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

"Next.js ऐप्लिकेशन के साथ Firebase को इंटिग्रेट करना" कोडलैब को पूरा पढ़ें. इससे आपको पता चलेगा कि हमने इस ऐप्लिकेशन में Firebase से पुष्टि करने की सुविधा, Cloud Firestore, और Cloud Storage for Firebase को कैसे जोड़ा.

इसके अलावा, अन्य कोडलैब भी देखें:

• Cloud Firestore Web कोडलैब
• Firebase Angular Web Frameworks कोडलैब
• Firebase Security Rules कोडलैब की मदद से, अपने Firestore डेटा को सुरक्षित रखें