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

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

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

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

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

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

यह ऐप्लिकेशन एक 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 कंसोल में, ऐप्लिकेशन होस्टिंग पेज पर जाएं:

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

आपने शुरुआती वेब ऐप्लिकेशन डिप्लॉय कर लिया है! जब भी 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 का इस्तेमाल करता है:

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

1. "Google Authentication जोड़ना" कमिट मैसेज के साथ एक कमिट बनाएं और उसे अपने 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. वेब ऐप्लिकेशन में, > रेस्टोरेंट के सैंपल जोड़ें को चुनें.
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 बंद करें.

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

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

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

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

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

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

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

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

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

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

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

	let q = query(collection(db, "restaurants"));
	q = applyQueryFilters(q, filters);

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

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

1. src/lib/firebase/firestore.js फ़ाइल में, updateWithRating() फ़ंक्शन को नीचे दिए गए कोड से बदलें:

const updateWithRating = async (
	transaction,
	docRef,
	newRatingDocument,
	review
) => {
	const restaurant = await transaction.get(docRef);
	const data = restaurant.data();
	const newNumRatings = data?.numRatings ? data.numRatings + 1 : 1;
	const newSumRating = (data?.sumRating || 0) + Number(review.rating);
	const newAverage = newSumRating / newNumRatings;

	transaction.update(docRef, {
		numRatings: newNumRatings,
		sumRating: newSumRating,
		avgRating: newAverage,
	});

	transaction.set(newRatingDocument, {
		...review,
		timestamp: Timestamp.fromDate(new Date()),
	});
};

यह कोड नई समीक्षा दिखाने वाला एक नया Firestore दस्तावेज़ शामिल करता है. यह कोड मौजूदा Firestore दस्तावेज़ को भी अपडेट करता है. इसमें रेस्टोरेंट की रेटिंग की संख्या और कैलकुलेट की गई औसत रेटिंग के लिए अपडेट किए गए आंकड़े होते हैं.

2. addReviewToRestaurant() फ़ंक्शन को नीचे दिए गए कोड से बदलें:

export async function addReviewToRestaurant(db, restaurantId, review) {
	if (!restaurantId) {
		throw new Error("No restaurant ID has been provided.");
	}

	if (!review) {
		throw new Error("A valid review has not been provided.");
	}

	try {
		const docRef = doc(collection(db, "restaurants"), restaurantId);
		const newRatingDocument = doc(
			collection(db, `restaurants/${restaurantId}/ratings`)
		);

		// corrected line
		await runTransaction(db, transaction =>
			updateWithRating(transaction, docRef, newRatingDocument, review)
		);
	} catch (error) {
		console.error(
			"There was an error adding the rating to the restaurant",
			error
		);
		throw error;
	}
}

Next.js सर्वर ऐक्शन लागू करना

Next.js सर्वर कार्रवाई, फ़ॉर्म डेटा को ऐक्सेस करने के लिए एक सुविधाजनक एपीआई देती है, जैसे कि फ़ॉर्म सबमिशन पेलोड से टेक्स्ट मान पाने के लिए data.get("text").

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

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

<form action={handleReviewFormSubmission}>

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

2. 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. रेस्टोरेंट के पेज पर, पर क्लिक करें.
5. स्टार रेटिंग चुनें.
6. समीक्षा लिखें.
7. सबमिट करें पर क्लिक करें. आपकी समीक्षा, समीक्षाओं की सूची में सबसे ऊपर दिखती है.
8. Cloud Firestore में, दस्तावेज़ जोड़ें पैनल में, उस रेस्टोरेंट का दस्तावेज़ खोजें जिसकी आपने समीक्षा की है और उसे चुनें.
9. कलेक्शन शुरू करें पैनल में, रेटिंग चुनें.
10. दस्तावेज़ जोड़ें पैनल में, अपनी समीक्षा के लिए दस्तावेज़ ढूंढें और पुष्टि करें कि वह सही तरीके से डाला गया है या नहीं.

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

2. src/lib/firebase/storage.js फ़ाइल में, updateRestaurantImage() और uploadImage() फ़ंक्शन को नीचे दिए गए कोड से बदलें:

export async function updateRestaurantImage(restaurantId, image) {
	try {
		if (!restaurantId)
			throw new Error("No restaurant ID has been provided.");

		if (!image || !image.name)
			throw new Error("A valid image has not been provided.");

		const publicImageUrl = await uploadImage(restaurantId, image);
		await updateRestaurantImageReference(restaurantId, publicImageUrl);

		return publicImageUrl;
	} catch (error) {
		console.error("Error processing request:", error);
	}
}

async function uploadImage(restaurantId, image) {
	const filePath = `images/${restaurantId}/${image.name}`;
	const newImageRef = ref(storage, filePath);
	await uploadBytesResumable(newImageRef, image);

	return await getDownloadURL(newImageRef);
}

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

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

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

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

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 ऐप्लिकेशन में सुविधाएं और फ़ंक्शन जोड़ने का तरीका जाना है. खास तौर पर, आपने इनका इस्तेमाल किया है:

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

और जानें

• Cloud Firestore वेब कोडलैब
• Firebase Angular वेब फ़्रेमवर्क कोडलैब
• Firebase के सुरक्षा नियमों की मदद से, अपने Firestore डेटा को सुरक्षित रखना