1. Başlamadan önce
Bu codelab'de, restoran değerlendirmelerine yönelik bir web sitesi olan Friendly Eats adlı Next.js web uygulamasıyla Firebase'i nasıl entegre edeceğinizi öğreneceksiniz.
Tamamlanmış web uygulaması, Firebase'in Next.js uygulamalarını geliştirmenize nasıl yardımcı olabileceğini gösteren faydalı özellikler sunuyor. Bu özellikler arasında şunlar bulunur:
- Otomatik derleme ve dağıtım: Bu codelab'de, 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 kullanılır.
- Oturum açma ve oturumu kapatma: Tamamlanmış web uygulaması, Google ile oturum açmanıza ve oturumu kapatmanıza olanak tanır. Kullanıcı girişi ve kalıcılığı tamamen Firebase Authentication üzerinden yönetilir.
- Görseller: Tamamlanmış web uygulaması, oturum açmış kullanıcıların restoran resimleri yüklemesine olanak tanır. Resim öğeleri, Firebase için Cloud Storage'da depolanır. Firebase JavaScript SDK'sı, yüklenen resimler için herkese açık bir URL sağlar. Daha sonra bu herkese açık URL, Cloud Firestore'daki ilgili restoran dokümanında saklanır.
- Yorumlar: Tamamlanmış web uygulaması, oturum açmış kullanıcıların yıldız puanı ve metin tabanlı bir mesajdan oluşan restoranlar hakkında yorum yayınlamasına olanak tanır. İnceleme bilgileri Cloud Firestore'da saklanır.
- Filtreler: Tamamlanmış web uygulaması, oturum açmış kullanıcıların restoran listesini kategori, konum ve fiyata göre filtrelemesine olanak tanır. Kullanılan sıralama yöntemini de özelleştirebilirsiniz. Verilere Cloud Firestore'dan erişilir ve Firestore sorguları, kullanılan filtrelere göre uygulanır.
Ön koşullar
- GitHub hesabı
- Next.js ve JavaScript bilgisi
Neler öğreneceksiniz?
- Firebase'i Next.js uygulama yönlendirici ve sunucu tarafı oluşturma ile kullanma.
- Cloud Storage for Firebase'de görüntülerin nasıl kalıcı hale getirileceği.
- Cloud Firestore veritabanında veri okuma ve yazma.
- Firebase JavaScript SDK ile Google ile oturum açma özelliğini kullanma
Gerekenler
- Git
- Node.js'nin son kararlı sürümü
- Tercih ettiğiniz bir tarayıcı (ör. Google Chrome)
- Kod düzenleyici ve terminal bulunan geliştirme ortamı
- Firebase projenizin oluşturulması ve yönetilmesi için bir Google hesabı
- Firebase projenizi Blaze fiyatlandırma planına yükseltme olanağı
2. Geliştirme ortamınızı ve GitHub deponuzu ayarlama
Bu codelab, uygulamanın başlangıç kod tabanını sağlar ve Firebase CLI'yı kullanır.
GitHub deposu oluşturma
codelab'i https://github.com/firebase/Friendlyeats-web adresinde bulabilirsiniz. Depo, birden fazla platform için örnek projeler içerir. Ancak bu codelab yalnızca nextjs-start
dizinini kullanır. Aşağıdaki dizinlere dikkat edin:
* `nextjs-start`: contains the starter code upon which you build.
* `nextjs-end`: contains the solution code for the finished web app.
nextjs-start
klasörünü kendi deponuza kopyalayın:
- Terminal kullanarak bilgisayarınızda yeni bir klasör oluşturun ve bu klasörü yeni dizinde değiştirin:
mkdir codelab-friendlyeats-web cd codelab-friendlyeats-web
- Yalnızca
nextjs-start
klasörünü getirmek için giget npm paketini kullanın:npx giget@latest gh:firebase/friendlyeats-web/nextjs-start#master . --install
- Git ile değişiklikleri yerel olarak izleyin:
git init git commit -a -m "codelab starting point" git branch -M main
- Yeni bir GitHub deposu oluşturun: https://github.com/new. İstediğiniz adı verin.
- GitHub size
https://github.com/
veya/ .git git@github.com:
şeklinde görünen yeni bir kod deposu URL'si verir. Bu URL'yi kopyalayın./ .git
- GitHub size
- Yerel değişiklikleri yeni GitHub deponuza aktarın. Depo URL'nizi
yer tutucusuyla değiştirerek aşağıdaki komutu çalıştırın.git remote add origin <your-repository-url> git push -u origin main
- Başlangıç kodunu GitHub deponuzda görmeniz gerekir.
Firebase CLI'ı yükleme veya güncelleme
Firebase CLI'nin yüklü olduğunu ve bu sürümün 13.9.0 veya sonraki bir sürüm olduğunu doğrulamak için aşağıdaki komutu çalıştırın:
firebase --version
Daha düşük bir sürüm görürseniz veya Firebase CLI yüklü değilse yükleme komutunu çalıştırın:
npm install -g firebase-tools@latest
İzin hataları nedeniyle Firebase CLI'ı yükleyemiyorsanız npm dokümanlarına bakın veya başka bir yükleme seçeneğini kullanın.
Firebase'e giriş yapma
- Firebase CLI'ya giriş yapmak için aşağıdaki komutu çalıştırın:
firebase login
- Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak
Y
veyaN
girin. - Tarayıcınızda Google hesabınızı seçin, ardından İzin ver'i tıklayın.
3. Firebase projenizi oluşturun
Bu bölümde bir Firebase projesi oluşturacaksınız ve Firebase web uygulamasını bu projeyle ilişkilendireceksiniz. Örnek web uygulaması tarafından kullanılan Firebase hizmetlerini de kuracaksınız.
Firebase projesi oluşturma
- Firebase konsolunda Proje ekle'yi tıklayın.
- Projenizin adını girin metin kutusuna
FriendlyEats Codelab
(veya tercih ettiğiniz bir proje adı) yazın ve ardından Devam'ı tıklayın. - Firebase faturalandırma planını onaylayın iletişim kutusunda planın Blaze olduğunu onaylayın ve ardından Planı onayla'yı tıklayın.
- Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle Bu proje için Google Analytics'i etkinleştir seçeneğini kapalı konuma getirin.
- Create project (Proje oluştur) seçeneğini tıklayın.
- Projenizin temel hazırlığını yapmasını bekleyin ve ardından Devam'ı tıklayın.
- Firebase projenizde Proje Ayarları'na gidin. Daha sonra ihtiyacınız olacağından proje kimliğinizi not edin. Bu benzersiz tanımlayıcı, projenizin tanımlanma şeklidir (örneğin, Firebase CLI'da).
Firebase fiyatlandırma planınızı yükseltin
Uygulama Barındırma'yı kullanmak için Firebase projenizin Blaze fiyatlandırma planı kapsamında olması gerekir, yani bir Cloud Faturalandırma Hesabı ile ilişkilendirilmiş olmalıdır.
- Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
- Firebase ve Google Cloud'u kullanmaya yeni başladıysanız 300 ABD doları kredi ve Ücretsiz Deneme Cloud Faturalandırma Hesabı için uygun olup olmadığınızı kontrol edin.
Projenizi Blaze planına yükseltmek için aşağıdaki adımları izleyin:
- Firebase konsolunda planınızı yükseltmeyi seçin.
- İletişim kutusunda Blaze planını seçin, ardından projenizi bir Cloud Faturalandırma Hesabı ile ilişkilendirmek için ekrandaki talimatları uygulayın.
Cloud Faturalandırma Hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase konsolunda yükseltme akışına geri dönmeniz gerekebilir.
Firebase projenize web uygulaması ekleyin
- Firebase projenizde Projeye genel bakış'a gidin ve ardından Web'i tıklayın.
Projenizde kayıtlı uygulamalar varsa web simgesini görmek için Uygulama ekle'yi tıklayın. - Uygulama takma adı metin kutusuna
My Next.js app
gibi akılda kalıcı bir uygulama takma adı girin. - Bu uygulama için Firebase Hosting'i de kur onay kutusunun işaretini kaldırın.
- Uygulamayı kaydet > Sonraki > Sonraki > Konsola devam et.
Firebase konsolunda Firebase hizmetlerini ayarlama
Kimlik doğrulamayı ayarlama
- Firebase konsolunda Kimlik Doğrulama'ya gidin.
- Başlayın'ı tıklayın.
- Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.
- Proje için herkese açık ad metin kutusuna
My Next.js app
gibi akılda kalıcı bir ad girin. - Proje için destek e-posta adresi açılır menüsünden e-posta adresinizi seçin.
- Kaydet'i tıklayın.
Cloud Firestore'u kurma
- Firebase konsolunda Firestore'a gidin.
- Create database > (Veritabanı oluştur) > Sonraki > Test modunda başlat > Sıradaki adım.
Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için Güvenlik Kuralları ekleyeceksiniz. Veritabanınız için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık şekilde dağıtmayın veya kullanıma açık hale getirmeyinyapmayın uygulamayı herkese açık olarak dağıtmayın veya açığa çıkarmayın - Varsayılan konumu kullanın veya istediğiniz bir konumu seçin.
Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmek istersiniz. Bu konumun daha sonra değiştirilemeyeceğini ve otomatik olarak varsayılan Cloud Storage paketinizin konumu olacağını unutmayın (sonraki adım). - Bitti'yi tıklayın.
Firebase için Cloud Storage'ı kurma
- Firebase konsolunda Storage'a gidin.
- Başlayın > Test modunda başlat > Sıradaki adım.
Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için Güvenlik Kuralları ekleyeceksiniz. Depolama paketiniz için Güvenlik Kuralları eklemeden bir uygulamayı herkese açık şekilde dağıtmayın veya açığa çıkarmayınyapmayın uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın. - Paketinizin konumu önceden seçilmiş olmalıdır (önceki adımda Firestore'un ayarlanması nedeniyle).
- Bitti'yi tıklayın.
4. Başlatıcı kod tabanını inceleme
Bu bölümde, bu codelab'deki işlevleri ekleyeceğiniz, uygulamanın başlangıç kod tabanındaki birkaç alanı inceleyeceksiniz.
Klasör ve dosya yapısı
Aşağıdaki tabloda, uygulamanın klasör ve dosya yapısına genel bir bakış yer almaktadır:
Klasörler ve dosyalar | Açıklama |
| Filtreler, başlıklar, restoran ayrıntıları ve yorumlarla ilgili bileşenlere tepki verme |
| React veya Next.js'ye bağlı olması gerekmeyen yardımcı işlevler |
| Firebase'e özel kod ve Firebase yapılandırması |
| Web uygulamasındaki simgeler gibi statik öğeler |
| Next.js Uygulama Yönlendiricisi ile yönlendirme |
| API rota işleyici |
| npm ile proje bağımlılıkları |
| Next.js'ye özel yapılandırma (sunucu işlemleri etkin) |
| JavaScript dil hizmeti yapılandırması |
Sunucu ve istemci bileşenleri
Uygulama, Uygulama Yönlendirici'yi 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 ifadeleri görebilirsiniz:
import RatingPicker from "@/src/components/RatingPicker.jsx";
Uygulama, kullanışsız göreli içe aktarma yollarından kaçınmak için @
simgesini kullanır ve yol takma adları ile mümkün olur.
Firebase'e özel 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 Uygulama Barındırma arka ucu oluşturacaksınız.
Bu bölümün sonunda GitHub'daki deponuza bağlı bir App Hosting arka ucunuz olacak. Bu arka ucunuz, main
dalınıza yeni kayıt aktardığınızda uygulamanızın yeni sürümünü otomatik olarak yeniden oluşturup kullanıma sunacaktır.
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.
- Terminalinizde, CLI'yı daha önce oluşturduğunuz Firebase projesini kullanacak şekilde yapılandırın:
Takma ad istendiğindefirebase use --add
friendlyeats-codelab
yazın. - Bu Güvenlik Kuralları'nı dağıtmak için terminalinizde şu komutu çalıştırın:
firebase deploy --only firestore:rules,storage
"Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?"
istemini alırsanızEnter
tuşuna basarak Evet'i seçin.
Firebase yapılandırmanızı web uygulaması kodunuza ekleyin
- Firebase konsolunda Proje ayarları'na gidin.
- SDK kurulumu ve yapılandırması bölmesinde "Uygulama ekle"yi tıklayın ve yeni bir web uygulaması kaydetmek için kod parantezi simgesini
tıklayın.
- Web uygulaması oluşturma akışının sonunda,
firebaseConfig
değişkenini, ardından özelliklerini ve değerlerini kopyalayın. - Kod düzenleyicinizde
apphosting.yaml
dosyasını açın ve ortam değişkeni değerlerini Firebase konsolundaki yapılandırma değerleriyle doldurun. - Dosyadaki mevcut özellikleri, kopyaladığınız özelliklerle değiştirin.
- Dosyayı kaydedin.
Arka uç oluşturma
- Firebase konsolunda Uygulama Barındırma sayfasına gidin:
- "Başlayın"ı tıklayın arka uç oluşturma akışını başlatın. Arka ucunuzu aşağıdaki gibi yapılandırın:
- Daha önce oluşturduğunuz GitHub deposuna bağlanmak için ilk adımdaki talimatları uygulayın.
- Dağıtım ayarlarını belirleyin:
- Kök dizini
/
olarak tut - Canlı dalı
main
olarak ayarla - Otomatik kullanıma sunmayı etkinleştir
- Kök dizini
- Arka ucunuzu
friendlyeats-codelab
olarak adlandırın. - "Firebase web uygulaması oluşturun veya ilişkilendirin" bölümünde, "Mevcut bir Firebase web uygulamasını seçin" bölümünden daha önce yapılandırdığınız web uygulamasını seçin. açılır.
- "Bitir ve dağıt"ı tıklayın. Kısa bir süre sonra yeni Uygulama Barındırma arka ucunuzun durumunu görebileceğiniz yeni bir sayfaya yönlendirilirsiniz.
- 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
src/lib/firebase/auth.js
dosyasındaonAuthStateChanged
,signInWithGoogle
vesignOut
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:
Firebase API'si | Açıklama |
Google kimlik doğrulama sağlayıcı örneği oluşturur. | |
İletişim kutusu tabanlı bir kimlik doğrulama akışı başlatır. | |
Kullanıcının oturumu kapatılır. |
src/components/Header.jsx
dosyasında, kod zaten signInWithGoogle
ve signOut
işlevlerini çağırır.
- "Add Google Authentication" (Google Kimlik Doğrulaması Ekleme) kayıt mesajıyla bir kayıt oluşturun kod deponuza gönderebilirsiniz. 1. Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- 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ı kullanacağı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:
src/components/Header.jsx
dosyasına gidin.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 bir Tepki durumu kancası kullanır.
Değişiklikleri doğrulayın
src/app/layout.js
dosyasındaki kök düzen, başlığı oluşturur ve varsa kullanıcıya özellik olarak iletir.
<Header initialUser={currentUser?.toJSON()} />
Bu durum, <Header>
bileşeninin sunucu çalışma zamanı sırasında, varsa kullanıcı verilerini oluşturduğu 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.
Şimdi yeni bir yapıyı kullanıma sunup oluşturduğunuzu doğrulama zamanı.
- "Oturum açma durumunu göster" kayıt mesajıyla bir kayıt oluşturun kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Yeni kimlik doğrulama davranışını doğrulayın:
- Tarayıcınızda, web uygulamasını yenileyin. Görünen adınız başlıkta gösterilir.
- Oturumu kapatıp tekrar açın. Sayfa, sayfa yenilenmeden gerçek zamanlı olarak güncellenir. Bu adımı farklı kullanıcılarla tekrarlayabilirsiniz.
- İ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 yorumlarla ilgili sahte veriler içerir.
Bir veya daha fazla restoran ekleyin
Yerel Cloud Firestore veritabanınıza örnek restoran verileri eklemek için şu adımları uygulayın:
- Web uygulamasında simgesini seçin > Örnek restoranlar ekleyin.
- Firestore Database sayfasındaki Firebase konsolunda restoranlar seçeneğini belirleyin. Restoran koleksiyonunda, her biri bir restoranı temsil eden üst düzey belgeleri görüyorsunuz.
- Bir restoran dokümanının özelliklerini keşfetmek için birkaç dokümanı tıklayın.
Restoranların listesini göster
Cloud Firestore veritabanınızda artık Next.js web uygulamasının gösterebileceği restoranlar bulunuyor.
Veri getirme kodunu tanımlamak için aşağıdaki adımları izleyin:
src/app/page.js
dosyasında<Home />
sunucu bileşenini bulun vegetRestaurants
işlevine yönelik ç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.src/lib/firebase/firestore.js
dosyasındaapplyQueryFilters
vegetRestaurants
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(),
};
});
}
- "Firestore'daki restoranların listesini oku" kayıt mesajıyla bir kayıt oluşturun kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Web uygulamasında sayfayı yenileyin. Restoran resimleri sayfada karo olarak görünür.
Restoran girişlerinin sunucu çalışma zamanında yüklendiğini doğrulama
Next.js çerçevesi kullanılarak, verilerin sunucu çalışma zamanında veya istemci tarafı çalışma zamanında yüklendiği zaman anlaşılmayabilir.
Restoran girişlerinin sunucu çalışma zamanında yüklendiğini doğrulamak için aşağıdaki adımları izleyin:
- Web uygulamasında Geliştirici Araçları'nı açın ve JavaScript'i devre dışı bırakın.
- Web uygulamasını yenileyin. Restoran girişleri yüklenmeye devam eder. Sunucu yanıtında restoran bilgileri döndürülür. JavaScript etkinleştirildiğinde restoran bilgileri, istemci taraflı JavaScript kodu aracılığıyla ortaya çıkarılır.
- Geliştirici Araçları'nda JavaScript'i yeniden etkinleştirin.
Cloud Firestore anlık görüntü dinleyicileriyle restoran güncellemelerini dinleyin
Ö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 destekleyecek şekilde yapılandırmak için şu adımları uygulayın:
src/components/RestaurantListings.jsx
dosyasında, sizin için zaten yazılmış olan aşağıdaki kodu kontrol edin:
useEffect(() => {
const unsubscribe = getRestaurantsSnapshot(data => {
setRestaurants(data);
}, filters);
return () => {
unsubscribe();
};
}, [filters]);
Bu kod, önceki bir adımda uyguladığınız getRestaurants()
işlevine benzeyen getRestaurantsSnapshot()
işlevini ç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.
src/lib/firebase/firestore.js
dosyasındagetRestaurantsSnapshot()
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 gerçek zamanlı olarak yansıtılıyor.
- "Gerçek zamanlı restoran güncellemelerini dinle" kayıt mesajıyla bir kayıt oluşturun kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Web uygulamasında simgesini seçin > Örnek restoranlar ekleyin. Anlık görüntü işleviniz doğru bir şekilde uygulanırsa restoranlar sayfa yenilenmeden gerçek zamanlı olarak görünür.
8. Web uygulamasından kullanıcıların gönderdiği yorumları kaydetme
src/lib/firebase/firestore.js
dosyasındaupdateWithRating()
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 belgesi ekler. Kod ayrıca, restoranı temsil eden mevcut Firestore belgesini, puan sayısı ve hesaplanan ortalama puan için güncellenmiş rakamlarla günceller.
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 İşlemini 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 üzere bir Next.js Sunucu İşlemi kullanmak için aşağıdaki adımları uygulayın:
src/components/ReviewDialog.jsx
dosyasındaki<form>
öğesindeaction
özelliğini bulun.
<form action={handleReviewFormSubmission}>
action
özellik değeri, sonraki adımda uygulayacağınız bir işlevi ifade eder.
src/app/actions.js
dosyasındahandleReviewFormSubmission()
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
İnceleme gönderimleri için destek uyguladınız. Artık yorumlarınızın Cloud Firestore'a doğru şekilde eklendiğini doğrulayabilirsiniz.
İnceleme eklemek ve incelemenin Cloud Firestore'a eklendiğini doğrulamak için şu adımları uygulayın:
- "Kullanıcıların restoran yorumları göndermesine izin ver" taahhüt mesajı içeren bir taahhüt oluşturun kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Web uygulamasını yenileyin ve ana sayfadan bir restoran seçin.
- Restoranın sayfasında 'i tıklayın.
- Yıldız puanı seçin.
- Yorum yazın.
- Gönder'i tıklayın. Yorumunuz, yorum listesinin en üstünde görünür.
- Cloud Firestore'da, incelediğiniz restoranın belgesini Belge ekle bölmesinde arayın ve seçin.
- Koleksiyonu başlat bölmesinde derecelendirmeler'i seçin.
- Doküman ekle bölmesinde, beklendiği gibi eklendiğini doğrulamak için incelemeniz gereken dokümanı bulun.
9. Web uygulamasından kullanıcı tarafından yüklenen dosyaları kaydetme
Bu bölümde, giriş yaptığınızda bir restoranla ilişkilendirilen resmi değiştirebilmeniz için işlevler eklersiniz. Görüntüyü Firebase Storage'a yükleyin ve restoranı temsil eden Cloud Firestore belgesindeki görüntü URL'sini güncelleyin.
Web uygulamasından kullanıcı tarafından yüklenen dosyaları kaydetmek için aşağıdaki adımları izleyin:
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.
src/lib/firebase/storage.js
dosyasındaupdateRestaurantImage()
veuploadImage()
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:
- "Kullanıcıların her restoranı değiştirmesine izin ver" taahhüt mesajını içeren bir taahhüt oluşturun fotoğraf" kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Web uygulamasında, giriş yaptığınızı doğrulayın ve bir restoran seçin.
- 'yi 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örüntülenir.
- Firebase için Cloud Storage'a gidin.
- Restoranı temsil eden klasöre gidin. Yüklediğiniz resim klasörde bulunuyor.
10. Restoran yorumlarını üretken yapay zeka ile ö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
- Gemini API'yi kullanmak için API anahtarına ihtiyacınız vardır. Google AI Studio'da anahtar oluşturun.
- Uygulama Barındırma, API anahtarları gibi hassas değerleri güvenli bir şekilde saklamanızı sağlamak için Cloud Secret Manager ile entegre olur:
- Bir terminalde, yeni gizli anahtar oluşturmak için komutu çalıştırın:
firebase apphosting:secrets:set gemini-api-key
- Gizli anahtar değeri istendiğinde Google AI Studio'dan Gemini API anahtarınızı kopyalayıp yapıştırın.
- Yeni gizli anahtarın
apphosting.yaml
alanına eklenip eklenmemesi gerektiği sorulduğunda kabul etmek içinY
yazın.
Gemini API anahtarınız artık Cloud Secret Manager'da güvenli bir şekilde saklanır ve Uygulama Barındırma arka ucunuz tarafından erişilebilir.
Yorum özeti bileşenini uygulama
src/components/Reviews/ReviewSummary.jsx
içindeGeminiSummary
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>; } }
- "Yorumları özetlemek için yapay zeka kullanın" taahhüt mesajıyla bir kayıt oluşturun kod deponuza gönderebilirsiniz.
- Firebase konsolunda Uygulama Barındırma sayfasını açın ve yeni kullanıma sunma işleminizin tamamlanmasını bekleyin.
- Bir restorana ait sayfayı açın. En üstte, sayfadaki tüm yorumların tek cümlelik bir özetini görürsünüz.
- 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 şunları 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 kapatma işlevini etkinleştirmek için Firebase Authentication kullanın.
- Restoran verileri ve restoran değerlendirme verileri için Cloud Firestore.
- Restoran resimleri için Cloud Storage for Firebase.