Firebase'i Next.js uygulamasıyla entegre etme

4. Başlatıcı kod tabanını inceleme

Bu bölümde, uygulamanın başlangıç kod tabanının bu codelab'de işlev ekleyeceğiniz birkaç alanını inceleyeceksiniz.

Klasör ve dosya yapısı

Aşağıdaki tabloda, uygulamanın klasör ve dosya yapısına genel bir bakış sunulmaktadır:

Sunucu ve istemci bileşenleri

Uygulama, uygulama yönlendiricisini kullanan bir Next.js web uygulamasıdır. Sunucu oluşturma işlemi uygulama genelinde kullanılır. Örneğin src/app/page.js dosyası, ana sayfadan sorumlu bir sunucu bileşenidir. src/components/RestaurantListings.jsx dosyası, dosyanın başındaki "use client" yönergesiyle belirtilen bir istemci bileşenidir.

İfadeleri içe aktar

Aşağıdaki gibi içe aktarma beyanları görebilirsiniz:

import RatingPicker from "@/src/components/RatingPicker.jsx";

Uygulama, hantal göreli içe aktarma yollarını önlemek için @ simgesini kullanır ve bu, yol takma adları sayesinde mümkün olur.

Firebase'e özgü API'ler

Tüm Firebase API kodları, src/lib/firebase dizininde sarmalanır. Ardından her bir React bileşenleri, Firebase işlevlerini doğrudan içe aktarmak yerine sarmalanmış işlevleri src/lib/firebase dizininden içe aktarır.

Sahte veriler

Sahte restoran ve yorum verileri src/lib/randomData.js dosyasında yer alıyor. Bu dosyadaki veriler, src/lib/fakeRestaurants.js dosyasındaki kodda birleştirilir.

5. Uygulama Barındırma arka ucu oluşturma

Bu bölümde, git deponuzdaki bir dalı izlemek için bir App Hosting arka ucu oluşturacaksınız.

Bu bölümün sonunda, GitHub'daki deponuza bağlı bir Uygulama Barındırma arka ucunuz olacak. Bu arka ucunuz, main dalınıza yeni kayıt aktardığınızda uygulamanızın yeni bir sürümünü otomatik olarak yeniden derleyip kullanıma sunar.

Güvenlik Kurallarını Dağıtma

Bu kodda zaten Firestore ve Cloud Storage for Firebase için güvenlik kuralı grupları vardır. Güvenlik Kuralları'nı dağıttıktan sonra veritabanınızdaki ve paketinizdeki veriler kötüye kullanıma karşı daha iyi korunur.

1. Terminalinizde, CLI'yı daha önce oluşturduğunuz Firebase projesini kullanacak şekilde yapılandırın:

   firebase use --add
   

   Takma ad istendiğinde friendlyeats-codelab yazın.
2. Bu Güvenlik Kuralları'nı dağıtmak için terminalinizde şu komutu çalıştırın:

   firebase deploy --only firestore:rules,storage
   

3. Şu soruyu görürseniz: "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" Evet'i seçmek için Enter'ye basın.

Firebase yapılandırmanızı web uygulaması kodunuza ekleyin

1. Firebase konsolunda Proje ayarları'na gidin.
2. SDK kurulumu ve yapılandırması bölmesinde "Uygulama ekle"yi ve ardından yeni bir web uygulaması kaydetmek için kod parantezi simgesini tıklayın.
3. Web uygulaması oluşturma akışının sonunda firebaseConfig değişkenini, özelliklerini ve değerlerini kopyalayın.
4. Kod düzenleyicinizde apphosting.yaml dosyasını açın ve ortam değişkeni değerlerini Firebase konsolundaki yapılandırma değerleriyle doldurun.
5. Dosyada, mevcut özellikleri kopyaladıklarınızla değiştirin.
6. Dosyayı kaydedin.

Arka uç oluşturma

1. Firebase konsolunda Uygulama Barındırma sayfasına gidin:

2. Arka uç oluşturma akışını başlatmak için "Başlayın"ı tıklayın. Arka ucunuzu aşağıdaki gibi yapılandırın:
3. Daha önce oluşturduğunuz GitHub deposuna bağlanmak için ilk adımdaki talimatları uygulayın.
4. Dağıtım ayarlarını belirleyin:
   1. Kök dizini / olarak tut
   2. Canlı dalı main olarak ayarla
   3. Otomatik kullanıma sunmayı etkinleştir
5. Arka ucunuzu friendlyeats-codelab olarak adlandırın.
6. "Firebase web uygulaması oluşturun veya ilişkilendirin" bölümünde, "Mevcut bir Firebase web uygulamasını seçin" açılır menüsünden daha önce yapılandırdığınız web uygulamasını seçin.
7. "Sonlandır ve dağıt"ı tıklayın. Bir süre sonra, yeni uygulama barındırma arka uç sunucunuzun durumunu görebileceğiniz yeni bir sayfaya yönlendirilirsiniz.
8. Kullanıma sunma işleminiz tamamlandıktan sonra "alanlar" bölümünde ücretsiz alan adınızı tıklayın. DNS yayılımı nedeniyle bu işlemin çalışmaya başlaması birkaç dakika sürebilir.

İlk web uygulamasını dağıttınız. GitHub deponuzun main dalına her yeni kayıt aktardığınızda, Firebase konsolunda yeni bir derleme ve kullanıma sunma işleminin başladığını görürsünüz. Kullanıma sunma işlemi tamamlandığında siteniz otomatik olarak güncellenir.

6. Web uygulamasına kimlik doğrulama ekleme

Bu bölümde, giriş yapabilmeniz için web uygulamasına kimlik doğrulaması eklersiniz.

Oturum açma ve çıkış yapma işlevlerini uygulama

1. src/lib/firebase/auth.js dosyasında onAuthStateChanged, signInWithGoogle ve signOut işlevlerini aşağıdaki kodla değiştirin:

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

Bu kod aşağıdaki Firebase API'lerini kullanır:

src/components/Header.jsx dosyasında kod zaten signInWithGoogle ve signOut işlevlerini çağırıyor.

1. "Insert Google Authentication" (Google Kimlik Doğrulaması Ekleme) kayıt mesajıyla bir kayıt oluşturun ve GitHub deponuza gönderin. 1. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
2. Web uygulamasında sayfayı yenileyin ve Google ile oturum aç'ı tıklayın. Web uygulaması güncellenmediği için oturum açmanın başarılı olup olmadığı belirlenemiyor.

Sunucuya kimlik doğrulama durumunu gönder

Kimlik doğrulama durumunu sunucuya iletmek için bir hizmet çalışanı kullanırız. fetchWithFirebaseHeaders ve getAuthIdToken işlevlerini aşağıdaki kodla değiştirin:

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

Sunucuda kimlik doğrulama durumunu okuma

İstemcinin kimlik doğrulama durumunu sunucuda yansıtmak için FirebaseServerApp'i kullanacağız.

src/lib/firebase/serverApp.js öğesini açın ve getAuthenticatedAppForUser işlevini değiştirin:

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

Kimlik doğrulama değişikliklerine abone ol

Kimlik doğrulama değişikliklerine abone olmak için aşağıdaki adımları uygulayın:

1. src/components/Header.jsx dosyasına gidin.
2. useUserSession işlevini aşağıdaki kodla değiştirin:

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

Bu kod, onAuthStateChanged işlevi kimlik doğrulama durumunda bir değişiklik olduğunu belirttiğinde kullanıcıyı güncellemek için React state kancası kullanır.

Değişiklikleri doğrulama

src/app/layout.js dosyasındaki kök düzen, üstbilgiyi oluşturur ve varsa kullanıcıyı öğe olarak iletir.

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

Bu, <Header> bileşeninin, sunucu çalışma zamanında (varsa) kullanıcı verilerini oluşturacağı anlamına gelir. İlk sayfa yüklemesinden sonra sayfa yaşam döngüsü boyunca herhangi bir kimlik doğrulama güncellemesi yapılırsa onAuthStateChanged işleyici bunları işler.

Artık yeni bir derleme yayınlamanın ve oluşturduğunuzu doğrulamanın zamanı geldi.

1. "Show signin state" (Oturum açma durumunu göster) kayıt mesajıyla bir kayıt oluşturun ve bunu GitHub deponuza gönderin.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. Yeni kimlik doğrulama davranışını doğrulayın:
   1. Tarayıcınızda web uygulamasını yenileyin. Görünen adınız üstbilgide görünür.
   2. Oturumu kapatıp tekrar açın. Sayfa, sayfa yenilenmeden gerçek zamanlı olarak güncellenir. Bu adımı farklı kullanıcılarla tekrarlayabilirsiniz.
   3. İsteğe bağlı: Web uygulamasını sağ tıklayın, Sayfa kaynağını görüntüle'yi seçin ve görünen adı arayın. Sunucudan döndürülen ham HTML kaynağında görünür.

7. Restoran bilgilerini göster

Web uygulaması, restoranlar ve yorumlar için örnek veriler içerir.

Bir veya daha fazla restoran ekleme

Yerel Cloud Firestore veritabanınıza örnek restoran verileri eklemek için aşağıdaki adımları uygulayın:

1. Web uygulamasında > Örnek restoran ekle'yi seçin.
2. Firestore Database sayfasındaki Firebase konsolunda restoranlar seçeneğini belirleyin. Restoran koleksiyonunda, her biri bir restoranı temsil eden üst düzey dokümanları görürsünüz.
3. Bir restoran dokümanının özelliklerini keşfetmek için birkaç dokümanı tıklayın.

Restoran listesini görüntüleme

Cloud Firestore veritabanınızda artık Next.js web uygulamasının görüntüleyebileceği restoranlar var.

Veri getirme kodunu tanımlamak için aşağıdaki adımları izleyin:

1. src/app/page.js dosyasında <Home /> sunucu bileşenini bulun ve getRestaurants işlevine yapılan çağrıyı inceleyin. Bu işlev, sunucu çalışma zamanında restoran listesini alır. getRestaurants işlevini aşağıdaki adımlarda uygularsınız.
2. src/lib/firebase/firestore.js dosyasında applyQueryFilters ve getRestaurants işlevlerini aşağıdaki kodla değiştirin:

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. "Restore'dan restoranların listesini okuyun" kayıt mesajını kullanarak bir kayıt oluşturun ve bu kaydı GitHub deponuza aktarın.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. Web uygulamasında sayfayı yenileyin. Restoran resimleri sayfada karolar olarak görünür.

Restoran girişlerinin sunucu çalışma zamanında yüklendiğini doğrulama

Next.js çerçevesi kullanıldığında verilerin sunucu çalışma zamanında mı yoksa istemci tarafında çalışma zamanında mı yüklendiği açık olmayabilir.

Restoran girişlerinin sunucu çalışma zamanında yüklendiğini doğrulamak için aşağıdaki adımları izleyin:

1. Web uygulamasında DevTools'u açın ve JavaScript'i devre dışı bırakın.

2. Web uygulamasını yenileyin. Restoran girişleri yine yüklenir. Restoran bilgileri, sunucu yanıtında döndürülür. JavaScript etkinleştirildiğinde restoran bilgileri, istemci tarafı JavaScript kodu aracılığıyla etkinleştirilir.
3. DevTools'ta JavaScript'i yeniden etkinleştirin.

Cloud Firestore anlık görüntü dinleyicileriyle restoran güncellemelerini dinleme

Önceki bölümde, ilk restoran grubunun src/app/page.js dosyasından nasıl yüklendiğini gördünüz. src/app/page.js dosyası bir sunucu bileşenidir ve Firebase veri getirme kodu dahil olmak üzere sunucuda oluşturulur.

src/components/RestaurantListings.jsx dosyası bir istemci bileşenidir ve sunucu tarafından oluşturulan işaretlemeyi karma hale getirmek üzere yapılandırılabilir.

src/components/RestaurantListings.jsx dosyasını, sunucu tarafından oluşturulan işaretlemeyi besleyecek şekilde yapılandırmak için aşağıdaki adımları uygulayın:

1. src/components/RestaurantListings.jsx dosyasında, sizin için önceden yazılmış aşağıdaki kodu inceleyin:

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

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

Bu kod, önceki bir adımda uyguladığınız getRestaurants() işlevine benzer bir getRestaurantsSnapshot() işlevi çağırır. Ancak bu anlık görüntü işlevi, restoranın koleksiyonunda her değişiklik yapıldığında geri çağırma işlevinin çağrılması için bir geri çağırma mekanizması sağlar.

2. src/lib/firebase/firestore.js dosyasında getRestaurantsSnapshot() işlevini aşağıdaki kodla değiştirin:

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 Veritabanı sayfası üzerinden yapılan değişiklikler artık web uygulamasına anında yansıtılıyor.

1. "Gerçek zamanlı restoran güncellemelerini dinleyin" mesajını içeren bir kaydetme işlemi oluşturun ve bu kaydetme işlemini GitHub deponuza gönderin.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. Web uygulamasında > Örnek restoran ekle'yi seçin. Anlık görüntü işleviniz doğru şekilde uygulandıysa restoranlar sayfa yenilenmeden anlık olarak gösterilir.

8. Web uygulamasından kullanıcı tarafından gönderilen yorumları kaydetme

1. src/lib/firebase/firestore.js dosyasında updateWithRating() işlevini aşağıdaki kodla değiştirin:

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

Bu kod, yeni incelemeyi temsil eden yeni bir Firestore dokümanı ekler. Kod, restoranı temsil eden mevcut Firestore belgesini de puan sayısı ve ortalama hesaplanan puanla ilgili güncellenmiş rakamlarla günceller.

2. addReviewToRestaurant() işlevini aşağıdaki kodla değiştirin:

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 sunucu işlemi uygulama

Next.js Sunucu İşlemi, form verilerine erişmek için kullanışlı bir API sağlar. Örneğin, form gönderme yükünden metin değerini almak için data.get("text") gibi.

İnceleme formu gönderimini işlemek için Next.js sunucu işlemi kullanmak üzere aşağıdaki adımları uygulayın:

1. src/components/ReviewDialog.jsx dosyasındaki <form> öğesinde action özelliğini bulun.

<form action={handleReviewFormSubmission}>

action özellik değeri, bir sonraki adımda uygulayacağınız bir işlevi ifade eder.

2. src/app/actions.js dosyasında handleReviewFormSubmission() işlevini aşağıdaki kodla değiştirin:

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

Bir restoranla ilgili yorum ekleme

Yorum gönderimleri için destek uyguladığınıza göre artık yorumlarınızın Cloud Firestore'a doğru şekilde eklendiğini doğrulayabilirsiniz.

Yorum eklemek ve bu yorumun Cloud Firestore'a eklendiğini doğrulamak için aşağıdaki adımları uygulayın:

1. "Kullanıcıların restoran yorumları göndermesine izin ver" mesajını içeren bir commit oluşturun ve bunu GitHub deponuza gönderin.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. Web uygulamasını yenileyin ve ana sayfadan bir restoran seçin.
4. Restoranın sayfasında 'i tıklayın.
5. Yıldız puanı seçin.
6. Yorum yazın.
7. Gönder'i tıklayın. Yorumunuz, yorum listesinin en üstünde görünür.
8. Cloud Firestore'da, incelediğiniz restoranın belgesini Belge ekle bölmesinde arayın ve seçin.
9. Koleksiyonu başlat bölmesinde değerlendirmeler'i seçin.
10. Doküman ekle bölmesinde, incelemeniz için eklediğiniz dokümanı bulun ve beklenen şekilde eklendiğini doğrulayın.

9. Web uygulamasından kullanıcı tarafından yüklenen dosyaları kaydetme

Bu bölümde, giriş yaptığınızda bir restoranla ilişkili resmi değiştirebilmeniz için işlev eklersiniz. Resmi Firebase Storage'a yükler ve restoranı temsil eden Cloud Firestore dokümanında resim URL'sini güncelleyebilirsiniz.

Kullanıcı tarafından yüklenen dosyaları web uygulamasından kaydetmek için aşağıdaki adımları uygulayın:

1. src/components/Restaurant.jsx dosyasında, kullanıcı bir dosya yüklediğinde çalışan kodu bulun:

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

Herhangi bir değişiklik yapmanız gerekmez ancak updateRestaurantImage() işlevinin davranışını aşağıdaki adımlarda uygularsınız.

2. src/lib/firebase/storage.js dosyasında updateRestaurantImage() ve uploadImage() işlevlerini aşağıdaki kodla değiştirin:

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() işlevi sizin için zaten uygulanmıştır. Bu işlev, Cloud Firestore'daki mevcut bir restoran dokümanını güncellenmiş görüntü URL'siyle günceller.

Resim yükleme işlevini doğrulama

Resmin beklendiği gibi yüklendiğini doğrulamak için aşağıdaki adımları uygulayın:

1. "Kullanıcıların her restoranın fotoğrafını değiştirmesine izin ver" commit mesajını içeren bir commit oluşturun ve GitHub deponuza aktarın.
2. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
3. Web uygulamasında giriş yaptığınızdan emin olun ve bir restoran seçin.
4. simgesini tıklayın ve dosya sisteminizden bir resim yükleyin. Görüntünüz yerel ortamınızdan çıkar ve Cloud Storage'a yüklenir. Resim, yüklendikten hemen sonra gösterilir.
5. Firebase için Cloud Storage'a gidin.
6. Restoranı temsil eden klasöre gidin. Yüklediğiniz resim klasörde mevcut.

10. Üretken yapay zeka ile restoran yorumlarını özetleme

Bu bölümde yorum özeti özelliği ekleyeceksiniz. Böylece kullanıcılar her yorumu okumak zorunda kalmadan herkesin restoran hakkında düşündüklerini hızlı bir şekilde anlayabilecekler.

Gemini API anahtarını Cloud Secret Manager'da depolayın

1. Gemini API'yi kullanmak için bir API anahtarına ihtiyacınız vardır. Google AI Studio'da anahtar oluşturun.
2. Uygulama Barındırma, API anahtarları gibi hassas değerleri güvenli bir şekilde depolamanıza olanak tanımak için Cloud Secret Manager ile entegre çalışır:
   1. Terminalde yeni bir gizli anahtar oluşturmak için şu komutu çalıştırın:

   firebase apphosting:secrets:set gemini-api-key
   

   1. Gizli değer istendiğinde Google AI Studio'dan Gemini API anahtarınızı kopyalayıp yapıştırın.
   2. Yeni gizli anahtarın apphosting.yaml alanına eklenip eklenmemesi gerektiği sorulduğunda kabul etmek için Y yazın.

Gemini API anahtarınız artık Cloud Secret Manager'da güvenli bir şekilde depolanır ve uygulama barındırma arka ucunuz tarafından erişilebilir.

Yorum özeti bileşenini uygulama

1. src/components/Reviews/ReviewSummary.jsx içinde GeminiSummary işlevini aşağıdaki kodla değiştirin:

   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. "Yorumları özetlemek için yapay zekadan yararlanın" mesajını içeren bir değişiklik kaydı oluşturun ve bu değişikliği GitHub deponuza gönderin.
3. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
4. Bir restoranın sayfasını açın. Sayfanın üst kısmında, sayfadaki tüm yorumların tek cümlelik bir özetini görürsünüz.
5. Yeni yorum ekleyip sayfayı yenileyin. Özet değişikliğini göreceksiniz.

11. Sonuç

Tebrikler! Next.js uygulamasına özellik ve işlev eklemek için Firebase'i nasıl kullanacağınızı öğrendiniz. Özellikle aşağıdakileri kullandınız:

• Yapılandırılmış bir dala her aktarma yaptığınızda Next.js kodunuzu otomatik olarak oluşturmak ve dağıtmak için Firebase App Hosting.
• Oturum açma ve oturum kapatma işlevini etkinleştirmek için Firebase Authentication.
• Restoran verileri ve restoran yorumu verileri için Cloud Firestore.
• Restoran resimleri için Cloud Storage for Firebase.

Daha fazla bilgi

• Cloud Firestore Web Codelab
• Firebase Angular Web Çerçeveleri Codelab'i
• Firestore verilerinizi Firebase Güvenlik Kuralları ile koruma