Next.js uygulamasıyla Firebase App Hosting'e dağıtın

1. Başlamadan önce

Bu codelab'de, restoran incelemeleri için bir web sitesi olan Friendly Eats adlı Next.js web uygulamasını kullanarak Firebase App Hosting'e nasıl dağıtım yapacağınızı öğreneceksiniz.

Friendly Eats web uygulaması

Tamamlanan web uygulaması, Firebase'in Next.js uygulamaları oluşturmanıza nasıl yardımcı olabileceğini gösteren faydalı özellikler sunar.

  • Otomatik derleme ve dağıtım: Bu codelab'de, yapılandırılmış bir dala her gönderim yaptığınızda Next.js kodunuzu otomatik olarak derlemek ve dağıtmak için Firebase App Hosting'i nasıl kullanacağınız gösterilmektedir.
  • Oturum açma ve oturumu kapatma: Tamamlanan web uygulaması, kullanıcıların Google ile oturum açmasına/oturumu kapatmasına olanak tanır. Kullanıcı girişi ve kalıcılığı tamamen Firebase Authentication üzerinden yönetilir.
  • Resimler: Tamamlanan web uygulaması, oturum açmış kullanıcıların restoran resimlerini yüklemesine olanak tanır. Resim öğeleri Cloud Storage for Firebase'de depolanır. Firebase JavaScript SDK, yüklenen resimler için herkese açık bir URL sağlar. Bu herkese açık URL daha sonra Cloud Firestore'daki ilgili restoran belgesinde depolanır.
  • Filtreler: Tamamlanan web uygulaması, oturum açmış kullanıcıların restoran listesini kategoriye, konuma ve fiyata göre filtrelemesine olanak tanır. Kullanılan sıralama yöntemini de özelleştirebilirsiniz. Verilere Cloud Firestore'dan erişilir ve kullanılan filtrelere göre Firestore sorguları uygulanır.
  • Yorumlar: Tamamlanan web uygulaması, oturum açmış kullanıcıların restoranlarla ilgili yorumlar yayınlamasına olanak tanır. Bu yorumlar yıldız puanı ve metin tabanlı bir mesajdan oluşur. Yorum bilgileri Cloud Firestore'da depolanır.
  • Yorum özetleri: Tamamlanan web uygulaması, Gemini modelini kullanarak yorumları otomatik olarak özetler. Yapay zekayla üretilmiş özetler Cloud Firestore'da depolanır.

Ön koşullar

  • Next.js ve JavaScript bilgisi

Neler öğreneceksiniz?

  • Firebase'i Next.js uygulama yönlendiricisi ve sunucu taraflı oluşturma ile kullanma
  • Yalnızca sunucu tarafında kullanılan gizli dizileri kullanarak Gemini API'ye yapılan çağrıları yetkilendirme

Gerekenler

  • Google Chrome gibi istediğiniz bir tarayıcı
  • IDX.dev'e (web tabanlı bir çalışma alanı) erişim
  • Firebase projenizi oluşturmak ve yönetmek için bir Google Hesabı
  • GitHub hesabı (Yukarıdakiyle aynı e-posta hesabı olması gerekmez)

2. Geliştirme ortamınızı ve GitHub deponuzu ayarlama

Bu codelab'de uygulamanın başlangıç kod tabanı sağlanır ve Firebase CLI ile IDX.dev kullanılır.

Yeni bir GitHub deposu oluşturup IDX'e aktarma

Firebase App Hosting, yapılandırılmış bir dala her aktarım yaptığınızda Next.js kodunuzu oluşturup dağıtacak şekilde bir GitHub deposu ayarlamanıza olanak tanır.

  1. Bu codelab için yeni bir GitHub deposu oluşturun: https://github.com/new. İstediğiniz adı verin (örneğin, MyFriendlyEatsCodelab).
  2. Yeni depo URL'nizi kopyalayın. Şu şekilde görünür:
    https://github.com/USER_NAME/REPOSITORY_NAME.git
  3. https://idx.google.com adresine gidip oturum açın.
  4. Import a repo (Depo içe aktar) seçeneğini tıklayın ve kopyaladığınız GitHub URL'sini yapıştırın.
    IDX, GitHub'a bağlanmanızı ister ve ardından (boş) deponuzu klonlar.

Codelab'in kaynak kodu deposunu görüntüleme

Codelab kaynağını https://github.com/firebase/friendlyeats-web adresinde görüntüleyin. friendlyeats-web deposunda birden fazla platform için örnek projeler bulunur.

Üzerinde çalıştığınız bu codelab yalnızca Firebase App Hosting ve Gemini API'ye odaklanmaktadır ve "Firebase'i Next.js Uygulamasıyla Entegre Etme" adlı tam codelab'in kısaltılmış bir versiyonudur. Bu kısaltılmış codelab'de yalnızca friendlyeats-web deposunun #io-connect dalındaki kaynak koduyla, özellikle de nextjs-step10 diziniyle çalışmanız gerekir.

friendlyeats-web deposunun aşağıdaki ek dizinlerine dikkat edin. Bu codelab için bu dizinlere ihtiyacınız olmasa da ne olduklarını bilmek faydalıdır.

Codelab kaynağını yeni deponuza kopyalama

nextjs-step10 dizinini kendi deponuza nasıl kopyalayacağınız aşağıda açıklanmıştır:

  1. IDX'te Menu > Terminal > New Terminal'ı (Menü > Terminal > Yeni Terminal) kullanarak terminali açın.
  2. io-connect dalından yalnızca nextjs-step10 dizinini getirmek için giget npm paketini kullanın:
    npx giget@latest gh:firebase/friendlyeats-web/nextjs-step10#io-connect . --force
  3. Değişiklikleri yerel olarak Git ile izleme:
    git add -A
git commit -m "codelab starting point"
git branch -M main
git push -u origin main

Başlangıç kodunu artık GitHub deponuzda görmeniz gerekir.

3. Başlangıç 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:

Klasörler ve dosyalar

Açıklama

src/components

Filtreler, başlıklar, restoran bilgileri ve yorumlar için React bileşenleri

src/lib

Mutlaka React veya Next.js'ye bağlı olmayan yardımcı işlevler

src/lib/firebase

Firebase'e özgü kod ve Firebase yapılandırması

public

Web uygulamasındaki simgeler gibi statik öğeler

src/app

Next.js uygulama yönlendiricisiyle yönlendirme

src/app/restaurant

API rota işleyicisi

package.json ve package-lock.json

npm ile proje bağımlılıkları

next.config.js

Next.js'e özgü yapılandırma (sunucu işlemleri etkinleştirilir)

jsconfig.json

JavaScript dil hizmeti yapılandırması

Sunucu ve istemci bileşenleri

Uygulama, App Router'ı kullanan bir Next.js web uygulamasıdır. Uygulamanın her yerinde sunucu oluşturma 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şında "use client" yönergesiyle belirtilen bir istemci bileşenidir.

Ekstreleri içe aktarma

Bazı dosyalarda aşağıdaki gibi içe aktarma ifadeleri görebilirsiniz:

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

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

Firebase'e özgü API'ler

Tüm Firebase API kodu src/lib/firebase dizinine yerleştirilir. Daha sonra tek tek 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ır. Bu dosyadaki veriler, src/lib/fakeRestaurants.js dosyasındaki kodda bir araya getirilir.

4. Firebase projenizi oluşturma

Bu bölümde, Firebase projesi oluşturup bir Firebase web uygulamasını bu projeyle ilişkilendireceksiniz. Ayrıca, örnek web uygulamasının kullandığı Firebase hizmetlerini de ayarlayacaksınız.

Firebase projesi oluşturma

  1. Önceki adımda kullandığınız Google Hesabı ile Firebase konsolunda oturum açın.
  2. Yeni bir proje oluşturmak için düğmeyi tıklayın ve ardından bir proje adı girin (örneğin, FriendlyEats Codelab).
  3. Devam'ı tıklayın.
  4. İstenirse Firebase şartlarını inceleyip kabul edin ve Devam'ı tıklayın.
  5. (İsteğe bağlı) Firebase konsolunda yapay zeka yardımını etkinleştirin ("Firebase'de Gemini" olarak adlandırılır).
  6. Bu codelab için Google Analytics'e ihtiyacınız yoktur. Bu nedenle, Google Analytics seçeneğini devre dışı bırakın.
  7. Proje oluştur'u tıklayın, projenizin hazırlanmasını bekleyin ve ardından Devam'ı tıklayın.

Firebase fiyatlandırma planınızı yükseltme

Firebase App Hosting ve Firebase için Cloud Storage'ı kullanmak istiyorsanız Firebase projenizin kullandıkça öde (Blaze) fiyatlandırma planında olması gerekir. Bu da projenin bir Cloud Faturalandırma Hesabı'na bağlı olduğu anlamına gelir.

Projenizi Blaze planına yükseltmek için şu adımları uygulayın:

  1. Firebase konsolunda planınızı yükseltmeyi seçin.
  2. Blaze planını seçin. Bir Cloud Faturalandırma hesabını projenize bağlamak için ekrandaki talimatları uygulayın.
    Bu yükseltme kapsamında bir Cloud Faturalandırma hesabı oluşturmanız gerekiyorsa yükseltmeyi tamamlamak için Firebase Console'daki yükseltme akışına geri dönmeniz gerekebilir.

5. App Hosting arka ucu oluşturma

Bu bölümde, git deponuzdaki bir dalı izlemek için App Hosting arka ucu ayarlayacaksınız. Ayrıca, arka ucun iletişim kuracağı tüm hizmetleri de yapılandıracaksınız.

Bu bölümün sonunda, GitHub'daki deponuza bağlı bir App Hosting arka ucunuz olacak. Bu arka uç, main dalınıza yeni bir taahhüt gönderdiğinizde uygulamanızın yeni bir sürümünü otomatik olarak yeniden oluşturup kullanıma sunacak.

Arka uç oluşturma

  1. Firebase konsolunda App Hosting sayfasına gidin:"Başlayın" düğmesiyle birlikte Uygulama Barındırma Konsolu'nun sıfır durumu
  2. Arka uç oluşturma akışını başlatmak için Başlayın'ı tıklayın.
  3. Daha önce oluşturduğunuz GitHub deposunu içe aktarmak ve bağlamak için istemleri uygulayın.
  4. Dağıtım ayarlarını belirleyin:
    • Kök dizini / olarak tutun.
    • Canlı dalı main olarak ayarlayın.
    • Otomatik kullanıma sunma işlemlerini etkinleştirme
  5. Arka uçunuza friendlyeats-codelab (veya istediğiniz bir arka uç adı) adını verin. Bu, arka uca erişmek için kullanılan alanın bir parçası olur.
    Bu iş akışı, Firebase projenizde otomatik olarak bir Firebase web uygulaması da oluşturur. Bu codelab'in ilerleyen bölümlerinde, kod tabanınızı Firebase projenize bağlamak için bu web uygulamasının yapılandırma değerlerini kullanacaksınız.
  6. Sonlandır ve dağıt'ı tıklayın. Kısa bir süre sonra, yeni uygulama barındırma arka uçunuzun durumunu görebileceğiniz yeni bir sayfaya yönlendirilirsiniz.
  7. Uygulama Barındırma kontrol panelinden yeni alanınızı kopyalayın.
    BACKEND_ID--PROJECT_ID.REGION.hosted.app gibi bir deseni olur. Firebase Authentication'ı daha sonra ayarlamak için bu alana ihtiyacınız olacak.

DNS yayılımı ve SSL sertifikası oluşturma nedeniyle alanın çalışmaya başlaması birkaç dakika sürebilir. Arka ucunuz oluşturulurken Firebase projesinin geri kalanını ayarlamaya ve arka ucunuzu yapılandırmaya (bu codelab'in sonraki adımları) devam edin.

GitHub deponuzun main dalına her yeni kaydetme işlemini aktardığınızda Firebase konsolunda yeni bir derleme ve dağıtımın başladığını görürsünüz. Dağıtım tamamlandığında siteniz otomatik olarak güncellenir.

6. Diğer Firebase hizmetlerini ayarlama

Bu codelab yalnızca Firebase App Hosting ve Gemini API'ye odaklanıyor olsa da çalışan web uygulamasının işlevini yerine getirebilmesi için diğer Firebase hizmetleri gereklidir. Tüm bu hizmetlerin uygulamanızda çalışmasını sağlayan kod, kendi GitHub deponuza kopyaladığınız kod tabanının bir parçasıdır ancak bu hizmetleri Firebase projenizde yine de ayarlamanız gerekir.

Kimlik doğrulama ayarlama

  1. Firebase konsolunda Authentication'a gidin.
  2. Başlayın'ı tıklayın.
  3. Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.
    1. Projenin herkese açık adı metin kutusuna My FriendlyEatsCodelab app gibi bir ad girin.
    2. Proje için destek e-postası açılır listesinden e-posta adresinizi seçin.
    3. Kaydet'i tıklayın.
  4. Kimlik Doğrulama sayfasında Ayarlar sekmesini tıklayın.
    1. Ekranda sol taraftaki menüden Yetkili Alanlar'ı tıklayın.
    2. Alan ekle'yi tıklayın ve yeni oluşturduğunuz uygulama barındırma alanınızı ekleyin (.hosted.app ile biter).
    3. Kaydetmek için Ekle'yi tıklayın.

Cloud Firestore'u ayarlama

  1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Firestore database'i (Firestore veritabanı) seçin.
  2. Create database'i (Veritabanı oluştur) tıklayın.
  3. Veritabanı Kimliği'ni (default) olarak bırakın.
  4. Veritabanınız için bir konum seçin ve Sonraki'yi tıklayın.
    Gerçek bir uygulama için kullanıcılarınıza yakın bir konum seçmeniz gerekir.
  5. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Veritabanınıza güvenlik kuralları eklemeden uygulamayı herkese açık şekilde dağıtmayın veya herkese açık olarak kullanıma sunmayın.
  6. Oluştur'u tıklayın.

Cloud Storage for Firebase'i ayarlama

  1. Firebase konsolunun sol panelinde Build'i (Oluştur) genişletin ve Storage'ı (Depolama) seçin.
  2. Başlayın'ı tıklayın.
  3. Varsayılan depolama paketinize bir konum seçin.
    US-WEST1, US-CENTRAL1 ve US-EAST1 bölgelerindeki paketler, Google Cloud Storage için "Daima Ücretsiz" katmanından yararlanabilir. Diğer tüm konumlardaki paketler için Google Cloud Storage fiyatlandırması ve kullanımı geçerlidir.
  4. Test modunda başlat'ı tıklayın. Güvenlik kurallarıyla ilgili sorumluluk reddi beyanını okuyun.
    Bu codelab'in ilerleyen bölümlerinde, verilerinizin güvenliğini sağlamak için güvenlik kuralları ekleyeceksiniz. Depolamapaketinize güvenlik kuralları eklemeden uygulamayı herkese açık olarak dağıtmayın veya kullanıma sunmayın.
  5. Oluştur'u tıklayın.

7. Web uygulamanızı yapılandırma

Artık bir Firebase projesi oluşturduğunuza ve uygulamanızda kullanılan tüm Firebase hizmetlerini etkinleştirdiğinize göre, web uygulamanızı bu hizmetleri kullanacak şekilde yapılandırmak için IDX'te çalışmaya başlayabilirsiniz.

IDX'te Firebase CLI'ye giriş yapma

IDX'te Node.js ve Firebase CLI zaten yüklü olduğundan bu yazılımları yükleme adımını atlayıp doğrudan CLI'yı ayarlamaya başlayabilirsiniz.

  1. IDX'teki terminalde, CLI'yı daha önce oluşturduğunuz Firebase projesini kullanacak şekilde yapılandırmak için şu komutları çalıştırın:
    firebase login --no-localhost
firebase use --add
    Takma ad istendiğinde codelab girin.
  2. Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak Y veya N girin. Bu codelab'de her iki seçenek de kullanılabilir.
  3. Tarayıcınızda Google Hesabınızı seçin ve İzin ver'i tıklayın.

Güvenlik kurallarını ve dizinleri dağıtma

GitHub deponuza kopyaladığınız kodda Firestore (firestore.rules içinde) ve Cloud Storage for Firebase (storage.rules içinde) için güvenlik kuralları zaten mevcuttur. Güvenlik kurallarını dağıttıktan sonra veritabanınızdaki ve paketinizeki veriler kötüye kullanıma karşı daha iyi korunur.

Gelişmiş sorguları etkinleştirmek için CLI'yı kullanarak Firestore (firestore.indexes.json içinde) için bir dizi dizin de dağıtabilirsiniz.

  1. IDX'teki terminalde, bu güvenlik kurallarını ve dizinleri dağıtmak için şu komutu çalıştırın:
    firebase deploy --only firestore,storage
  2. "Cloud Storage for Firebase needs an IAM Role to use cross-service rules. Grant the new role?" sorusu sorulursa Evet'i seçmek için Enter tuşuna basın.

Firebase yapılandırmanızı web uygulamanızın koduna ekleme

  1. Firebase konsolunda şunları yapın:
    1. Proje ayarları'na gidin.
    2. Uygulamalarınız bölümüne gidin ve App Hosting arka ucunuzla aynı ada sahip uygulamayı seçin.
    3. SDK kurulumu ve yapılandırması bölümünde Yapılandırma seçeneğini belirleyin, ardından firebaseConfig değişkeninin özelliklerini ve değerlerini kopyalayın.
  2. IDX'te aşağıdakileri yapın:
    1. apphosting.yaml dosyasını açın. App Hosting'de ortam değişkenlerinizi, gizli anahtarlarınızı ve çalışma zamanı yapılandırmanızı burada ayarlarsınız.
    2. Sağlanan ortam değişkeni değerlerini Firebase konsolundan kopyaladığınız yapılandırma değerleriyle doldurun.Örneğin (kendi değerlerinizle değiştirin):
      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. Dosyayı kaydedin. Ardından, IDX'teki terminalde değişiklikleri GitHub'a göndermek için şu komutları çalıştırın:
      git commit -a -m "Setup Firebase Config"

git push
  3. Firebase konsoluna dönün, App Hosting sayfasına geri gidin ve aşağıdaki adımları uygulayın:
    1. Arka uç için Kontrol Paneli'ni Görüntüle'yi tıklayın.
    2. Git push işleminizden yeni bir derlemenin tetiklendiğini gözlemleyin. Bu işlemin tamamlanması ve Cloud Run'a dağıtılması yaklaşık 3 dakika sürer. build-ID çipini tıklayarak ilerleme durumunu izleyebilirsiniz.
    3. Lansmanın tamamlanıp tamamlanmadığını kontrol etmek için konsol sayfasını yenileyin. İşlem tamamlandıktan sonra, alanlar bölümünde alanınızın (.hosted.app ile biten) bağlantısını tıklayarak açın ve yeni dağıtılan uygulamayı görüntüleyin.

Tebrikler, ilk web uygulamasını dağıttınız. Konuyu biraz daha ayrıntılı inceleyelim.

8. Web uygulamasını tarayıcıda deneme

Firebase Authentication ile giriş yapabildiğinizi doğrulayın

  1. Tarayıcınızda, web uygulamanızı gösteren sayfayı yenileyin.
  2. Google ile oturum aç'ı tıklayın.
  3. Oturumu kapatıp tekrar açın. Sayfa, yenilenmeden anında güncellenir. Bu adımı farklı kullanıcılarla tekrarlayabilirsiniz.
  4. İsteğe bağlı: Tarayıcınızda web uygulamasını yenileyin. 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.

Restoran bilgilerini görüntüleme

Web uygulamasında restoranlar ve yorumlar için örnek veriler yer alır.

Cloud Firestore veritabanınıza sahte restoran verileri eklemek için 2cf67d488d8e6332.png > Add sample restaurants'ı (Örnek restoran ekle) seçin.

Restoran listelemelerinin sunucu çalışma zamanında yüklendiğini doğrulayın.

Next.js çerçevesi kullanılırken verilerin sunucu çalışma zamanında mı yoksa istemci tarafı çalışma zamanında mı yüklendiği anlaşılmayabilir.

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

  1. Web uygulamasında Geliştirici Araçları'nı açın ve JavaScript'i devre dışı bırakın.Geliştirici Araçları'nda JavaScript'i devre dışı bırakma
  2. Web uygulamasını yenileyin. Restoran listeleri yine de yüklenir. Restoran bilgileri, sunucu yanıtında döndürülür. JavaScript etkinleştirildiğinde, restoran bilgileri istemci tarafındaki JavaScript kodu aracılığıyla doldurulur.
  3. Geliştirici Araçları'nda JavaScript'i yeniden etkinleştirin.
  4. Web uygulamasında 27ca5d1e8ed8adfe.png > Örnek restoranlar ekle'yi seçin. Anlık görüntü işleviniz doğru şekilde uygulanmışsa restoranlar, sayfa yenilenmeden anlık olarak görünür.

Restoran için yorum ekleme

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

  1. Web uygulamasını yenileyin ve ana sayfadan bir restoran seçin.
  2. Restoranın sayfasında 3e19beef78bb0d0e.png simgesini tıklayın.
  3. Yıldız puanı seçin.
  4. Yorum yazın.
  5. Gönder'i tıklayın. Yorumunuz, yorum listesinin en üstünde görünür.

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

Bu bölümde, kullanıcıların her yorumu okumak zorunda kalmadan bir restoran hakkındaki genel görüşleri hızlıca anlaması için yorum özeti özelliği ekleyeceksiniz.

Cloud Secret Manager'da Gemini API anahtarı depolama

App Hosting, API anahtarları gibi hassas değerleri güvenli bir şekilde depolamanıza olanak tanımak için Cloud Secret Manager ile entegre olur.

  1. Gemini API'yi kullanmak için API anahtarına ihtiyacınız vardır. Google AI Studio'da anahtar oluşturun.
    İstendiğinde bu codelab için kullandığınız projeyi seçin (arka planda Firebase projesi, Google Cloud projesidir).
  2. IDX'teki terminalde yeni bir gizli anahtar oluşturmak için şu komutu çalıştırın:
    firebase apphosting:secrets:set gemini-api-key
  3. Gizli değer istendiğinde Google AI Studio'daki Gemini API anahtarınızı kopyalayıp yapıştırın.
  4. "To use this secret, your backend's service account must be granted access. Would you like to grant access now?" sorusu sorulursa Evet'i seçmek için Enter tuşuna basın.
  5. Yeni gizli dizinin apphosting.yaml öğesine eklenip eklenmeyeceği sorulduğunda kabul etmek için Y girin, ardından GEMINI_API_KEY'yi ortam değişkeni adı olarak seçmek için Enter tuşuna basın.

Gemini API anahtarınız artık Cloud Secret Manager'da güvenli bir şekilde saklanıyor ve App Hosting arka ucunuz tarafından erişilebiliyor. Değeri Google Cloud Console'daki Secrets Manager kontrol panelinde de görüntüleyebilirsiniz.

  1. apphosting.yaml dosyasını açın ve gizli dizinizin adının kaydedildiğini ancak değerlerin kaydedilmediğini unutmayın.Dosya aşağıdaki gibi görünmelidir:
    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

Yorum özeti bileşenini uygulama

  1. IDX'te src/components/Reviews/ReviewSummary.jsx simgesini açın.
  2. 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-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'teki terminalde, commit oluşturmak ve GitHub deponuza göndermek için bu komutları çalıştırın.
    git commit -a -m "Use AI to summarize reviews"

git push
  4. Firebase konsolunda App Hosting sayfasını açın ve yeni dağıtımınızın tamamlanmasını bekleyin.
  5. Tarayıcınızda bir restoran kartını tıklayın. Ekranın üst kısmında, restoranla ilgili tüm yorumların tek cümlelik özetini görürsünüz.
  6. Yeni bir yorum ekleyin ve sayfayı yenileyin. Özet değişikliğini görmeniz gerekir.

10. Sonuç

Tebrikler! Firebase App Hosting'i kullanarak Next.js uygulamasını dağıtmayı ve Gemini API'yi kullanarak metin özetlemeyi öğrendiniz. Özellikle aşağıdakileri kullandınız:

  • Yapılandırılmış bir GitHub dalına her aktarma yaptığınızda Next.js kodunuzu otomatik olarak oluşturup dağıtmak için Firebase App Hosting.
  • Uygulamanızda üretken yapay zeka özellikleri oluşturabilmeniz için Gemini API anahtarınızı güvenli bir şekilde saklamak üzere Cloud Secret Manager (App Hosting ile entegre)

Daha fazla bilgi

Firebase Authentication, Cloud Firestore ve Cloud Storage for Firebase'i bu uygulamaya nasıl eklediğimizi öğrenmek için "Firebase'i Next.js uygulamasıyla entegre etme" adlı codelab'in tamamını inceleyin.

Ayrıca, diğer codelab'lere de göz atın: