Gemini API için Firebase Extensions ile yapay zeka destekli web uygulamaları derleme

1. Başlamadan önce

Firebase Extensions, uygulamalarınıza minimum kodla önceden paketlenmiş işlevler (yapay zeka destekli işlevler dahil) eklemenizi sağlar. Bu codelab'de, sağlanan bağlam ve son kullanıcı girişine dayalı olarak resim açıklamaları, özetler ve hatta kişiselleştirilmiş öneriler oluşturmak için Gemini API'den yararlanabilmeniz amacıyla iki Firebase uzantısını bir web uygulamasına nasıl entegre edeceğiniz gösterilmektedir.

Bu codelab'de, Firebase Extensions ile ilgi çekici kullanıcı deneyimleri sunan yapay zeka destekli bir web uygulaması oluşturmayı öğreneceksiniz.

Ön koşullar

• Node.js, Next.js ve TypeScript hakkında bilgi sahibi olmak

Neler öğreneceksiniz?

• Dili işlemek için Gemini API'ye yönelik Firebase Uzantılarını kullanma
• Dil modeliniz için artırılmış bağlam oluşturmak üzere Cloud Functions for Firebase'i kullanma
• Firebase Extensions tarafından üretilen çıkışa erişmek için JavaScript'i kullanma

Gerekenler

• Google Chrome gibi istediğiniz bir tarayıcı
• Kod düzenleyici ve terminal içeren bir geliştirme ortamı
• Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı

2. Web uygulamasını, Firebase hizmetlerini ve uzantıları inceleyin

Bu bölümde, bu codelab ile oluşturacağınız web uygulamasını inceleyecek ve kullanacağınız Firebase hizmetleri ile Firebase uzantıları hakkında bilgi edineceksiniz.

Web uygulaması

Bu codelab'de Friendly Conf adlı bir web uygulaması oluşturacaksınız.

Friendly Conference ekibi, katılımcılarına keyifli ve kişiselleştirilmiş bir kullanıcı deneyimi sunmak için yapay zekayı kullanmaya karar verdi. Tamamlanmış konferans uygulaması, katılımcılara çok formatlı üretken yapay zeka modeli (büyük dil modeli veya LLM olarak da bilinir) tarafından desteklenen ve genel konularla ilgili soruları konferans programına ve konularına göre uyarlanmış şekilde yanıtlayabilen bir yapay zeka destekli sohbet botu sunar. Chatbot, mevcut tarih/saat ve Friendly Conf konuları ile programı hakkında geçmiş bağlam ve bilgiye sahip olduğundan yanıtlarında tüm bu bağlamı dikkate alabilir.

Firebase hizmetleri

Bu codelab'de birçok Firebase hizmetini ve özelliğini kullanacaksınız. Bu hizmet ve özelliklerin başlangıç kodunun çoğu sizin için sağlanmıştır. Aşağıdaki tabloda, kullanacağınız hizmetler ve bunları kullanma nedenleriniz yer almaktadır.

Firebase Extensions

Bu codelab'de kullanacağınız Firebase uzantıları şunlardır:

• Gemini API ile Chatbot Oluşturma
• Gemini API ile Çok Formatlı Görevler

Uzantılar, Firebase projenizde gerçekleşen etkinliklere tepki verdikleri için kullanışlıdır. Bu codelab'de kullanılan her iki uzantı da Cloud Firestore'taki önceden yapılandırılmış koleksiyonlarda yeni dokümanlar oluşturduğunuzda yanıt verir.

3. Geliştirme ortamınızı kurma

Node.js sürümünüzü doğrulama

1. Terminalinizde Node.js'in 20.0.0 veya sonraki bir sürümünün yüklü olduğunu doğrulayın:

   node -v
   

2. Node.js 20.0.0 veya daha yeni bir sürümünüz yoksa en son LTS sürümünü indirip yükleyin.

Codelab'in kaynak kodunu alma

GitHub hesabınız varsa:

1. github.com/FirebaseExtended/codelab-gemini-api-extensions adresindeki şablonumuzu kullanarak yeni bir depo oluşturun.
2. Yeni oluşturduğunuz codelab'in GitHub deposunu klonlayın:

   git clone https://github.com/<your-github-handle>/codelab-gemini-api-extensions
   

Git yüklü değilse veya yeni bir depo oluşturmak istemiyorsanız:

GitHub deposunu ZIP dosyası olarak indirin.

Klasör yapısını inceleme

Kök klasörde, basitleştirilmiş talimatlar kullanarak web uygulamasını çalıştırmak için hızlı başlangıç sunan bir README.md dosyası bulunur. Ancak ilk kez öğreniyorsanız en kapsamlı talimatları içerdiğinden bu codelab'i (hızlı başlangıç yerine) tamamlamanız gerekir.

Bu codelab'de belirtilen talimatlara göre kodu doğru şekilde uyguladığınızdan emin değilseniz çözüm kodunu end git dalında bulabilirsiniz.

Firebase CLI'yı yükleme

1. Firebase CLI'nin yüklü olduğunu ve sürümünün 13.6 veya daha yeni olduğunu doğrulayın:

   firebase --version
   

2. Firebase CLI yüklüyse ancak sürümü 13.6 veya daha yüksek değilse güncelleyin:

   npm update -g firebase-tools
   

3. Firebase CLI yüklü değilse yükleyin:

   npm install -g firebase-tools
   

İzin hataları nedeniyle Firebase CLI'yı güncelleyemiyor veya yükleyemiyorsanız npm belgelerine bakın ya da başka bir yükleme seçeneği kullanın.

Firebase'e giriş yapın.

1. Terminalinizde codelab-gemini-api-extensions klasörüne gidin ve Firebase'de oturum açın:

   cd codelab-gemini-api-extensions
   firebase login
   

   Terminalinizde Firebase'e zaten giriş yaptığınız belirtiliyorsa bu codelab'in Firebase projenizi ayarlama bölümüne geçebilirsiniz.
2. Terminalinizde, Firebase'in veri toplamasını isteyip istemediğinize bağlı olarak Y veya N girin. (Bu codelab için 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.

4. Firebase projenizi oluşturma

Bu bölümde, bir Firebase projesi oluşturacak ve bu projede bir Firebase web uygulaması kaydedeceksiniz. Ayrıca, bu codelab'in ilerleyen bölümlerinde örnek web uygulaması tarafından kullanılan birkaç Firebase hizmetini etkinleştireceksiniz.

Bu bölümdeki tüm adımlar Firebase konsolunda gerçekleştirilir.

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, AI Extensions 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 Extensions'ı (ve temelindeki bulut hizmetlerini) 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.

• Cloud Faturalandırma hesabı için kredi kartı gibi bir ödeme yöntemi gerekir.
• Firebase ve Google Cloud'u yeni kullanmaya başladıysanız 300 ABD doları değerinde kredi ve ücretsiz deneme Cloud Faturalandırma hesabı için uygun olup olmadığınızı kontrol edin.
• Bu codelab'i bir etkinliğin parçası olarak yapıyorsanız düzenleyicinize Cloud kredisi olup olmadığını sorun.

Ayrıca, Firebase projenizde faturalandırma etkinleştirildiğinde, uzantının Gemini API'ye yaptığı çağrılar için (hangi sağlayıcıyı seçerseniz seçin, Google Yapay Zeka veya Vertex AI) ücretlendirileceğinizi unutmayın. Google AI ve Vertex AI fiyatlandırması hakkında daha fazla bilgi edinin.

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.

Firebase projenize web uygulaması ekleme

1. Firebase projenizde Proje Genel Bakış ekranına gidin ve Web'i tıklayın.
2. Uygulama takma adı metin kutusuna My AI Extensions gibi akılda kalıcı bir uygulama takma adı girin.
3. Uygulamayı kaydet > İleri > İleri > Konsola git'i tıklayın.
   Bu codelab'de daha sonra isteğe bağlı olarak bir barındırma hizmeti ayarlayacağınız için Web uygulaması akışındaki"barındırma" ile ilgili tüm adımları atlayabilirsiniz.

Güzel! Yeni Firebase projenize bir web uygulaması kaydettiniz.

Firebase Authentication'ı ayarlama

1. Sol gezinme bölmesini kullanarak Kimlik doğrulama'ya gidin.
2. Başlayın'ı tıklayın.
3. Ek sağlayıcılar sütununda Google > Etkinleştir'i tıklayın.
4. Projenin herkese açık adı metin kutusuna My AI Extensions Codelab gibi faydalı bir ad girin.
5. Proje için destek e-postası menüsünde e-posta adresinizi seçin.
6. Kaydet'i 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.

Bu codelab'in sonraki bölümünde, bu codelab boyunca web uygulamasında kullanacağınız iki Firebase uzantısını yükleyip yapılandıracaksınız.

5. "Build Chatbot with the Gemini API" uzantısını kurma

"Build Chatbot with the Gemini API" uzantısını yükleyin

1. "Build Chatbot with the Gemini API" uzantısına gidin.
2. Firebase konsolunda yükle'yi tıklayın.
3. Firebase projenizi seçin ve İleri'yi tıklayın.
4. Etkinleştirilen API'leri ve oluşturulan kaynakları inceleyin bölümünde, size önerilen hizmetlerin yanındaki Etkinleştir'i, ardından İleri'yi tıklayın.
5. Size önerilen izinler için İzin ver'i seçip Sonraki'yi tıklayın.
6. Uzantıyı yapılandırın:
   1. Gemini API Sağlayıcı menüsünde, Google AI veya Vertex AI'daki Gemini API'yi kullanmak isteyip istemediğinizi seçin. Firebase kullanan geliştiricilerin Vertex AI kullanmasını öneririz.
   2. Firestore Koleksiyon Yolu metin kutusuna users/{uid}/messages girin.
      Bu codelab'in ilerleyen adımlarında, bu koleksiyona belge eklemek uzantının Gemini API'yi çağırmasına neden olur.
   3. Cloud Functions konumu menüsünde tercih ettiğiniz konumu (ör. Iowa (us-central1) veya Firestore veritabanınız için daha önce belirttiğiniz konum) seçin.
   4. Diğer tüm değerleri varsayılan değerlerinde bırakın.
7. Uzantıyı yükle'yi tıklayın ve uzantının yüklenmesini bekleyin.

"Build Chatbot with the Gemini API" (Gemini API ile Chatbot Oluşturma) uzantısını deneyin

Bu codelab'in amacı, "Build Chatbot with the Gemini API" uzantısıyla bir web uygulaması üzerinden etkileşim kurmaktır. Ancak uzantının nasıl çalıştığını öğrenmek için önce Firebase konsolunda denemeniz faydalı olur.

Uzantı, Firebase konsolunda yapabileceğiniz gibi, users/{uid}/discussion/{discussionId}/messages koleksiyonu altında bir Firestore belgesi oluşturulduğunda tetiklenir.

1. Firebase konsolunda Firestore'a gidin ve ilk sütunda Koleksiyonu başlat'ı tıklayın.
2. Koleksiyon kimliği metin kutusuna users girip Sonraki'yi tıklayın.
3. Belge Kimliği metin kutusunda Otomatik Kimlik'i, ardından Kaydet'i tıklayın.
4. users koleksiyonunda Koleksiyonu başlat'ı tıklayın.
5. Koleksiyon kimliği metin kutusuna messages girip Sonraki'yi tıklayın.
   1. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   2. Field (Alan) metin kutusuna prompt yazın
   3. Değer metin kutusuna Tell me 5 random fruits yazın
6. Kaydet'i tıklayın ve birkaç saniye bekleyin.

Bu belgeyi eklediğinizde uzantı, Gemini API'yi çağırdı. messages koleksiyonuna eklediğiniz doküman artık yalnızca prompt değil, sorgunuza modelin response yanıtını da içeriyor.

messages koleksiyonuna başka bir belge ekleyerek uzantıyı tekrar tetikleyin:

1. messages koleksiyonunda Doküman ekle'yi tıklayın.
2. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
3. Field (Alan) metin kutusuna prompt yazın
4. Değer metin kutusuna And now, vegetables yazın
5. Kaydet'i tıklayın ve birkaç saniye bekleyin. messages koleksiyonuna yeni eklediğiniz doküman, sorgunuza response eklenmiş olarak görünüyor.
   
   Bu yanıt oluşturulurken temel Gemini modeli, önceki sorgunuzdaki geçmiş bilgileri kullandı.

6. Web uygulamasını ayarlama

Web uygulamasını çalıştırmak için terminalinizde komut çalıştırmanız ve kod düzenleyicinize kod eklemeniz gerekir.

Firebase CLI'yı Firebase projenize göre çalışacak şekilde ayarlayın

Terminalinizde aşağıdaki komutu çalıştırarak KSA'ya Firebase projenizi kullanmasını söyleyin:

firebase use YOUR_PROJECT_ID

Firestore ve Cloud Storage için güvenlik kurallarını dağıtma

Bu codelab'in kod tabanında, sizin için yazılmış bir dizi Firestore güvenlik kuralı ve Cloud Storage güvenlik kuralı zaten mevcut. Bu güvenlik kurallarını dağıttıktan sonra Firebase projenizdeki Firebase hizmetleriniz kötüye kullanıma karşı daha iyi korunur.

1. Güvenlik kurallarını dağıtmak için terminalinizde şu komutu çalıştırın:

   firebase deploy --only firestore:rules,storage
   

2. Hizmetler arası kuralları kullanmak için Cloud Storage'a IAM rolü verilip verilmeyeceği sorulduğunda Y veya N girin. (Bu codelab için her iki seçenek de kullanılabilir)

Web uygulamanızı Firebase projenize bağlama

Web uygulamanızın kod tabanı, veritabanı ve depolama alanı gibi işlemler için hangi Firebase projesini kullanması gerektiğini bilmelidir. Bunu, Firebase yapılandırmanızı uygulamanızın kod tabanına ekleyerek yaparsınız.

1. Firebase yapılandırmanızı alın:
   1. Firebase konsolunda, Firebase projenizdeki Proje ayarları'na gidin.
   2. Uygulamalarınız bölümüne gidin ve kayıtlı web uygulamanızı seçin.
   3. SDK kurulumu ve yapılandırması bölmesinde, firebaseConfig const'u da içeren initializeApp kodunun tamamını kopyalayın.
2. Firebase yapılandırmanızı web uygulamanızın kod tabanına ekleyin:
   1. Kod düzenleyicinizde src/lib/firebase/firebase.config.js dosyasını açın.
   2. Dosyadaki tüm öğeleri seçin ve kopyaladığınız kodla değiştirin.
   3. Dosyayı kaydedin.

Web uygulamasını tarayıcınızda önizleme

1. Terminalinizde bağımlılıkları yükleyin ve web uygulamasını çalıştırın:

   npm install
   npm run dev
   

2. Tarayıcınızda, web uygulamasını görüntülemek için yerel olarak barındırılan barındırma URL'sine gidin. Örneğin, çoğu durumda URL http://localhost:3000/ veya benzeri bir şeydir.

Web uygulamasının chatbot'unu kullanma

1. Tarayıcınızda, yerel olarak çalışan Friendly Conf web uygulamasının bulunduğu sekmeye dönün.
2. Google ile oturum aç'ı tıklayın ve gerekirse Google Hesabınızı seçin.
3. Oturum açtıktan sonra boş bir sohbet penceresi görürsünüz.
4. Bir selamlama mesajı (ör. hi) yazıp Gönder'i tıklayın.
5. Chatbot'un yanıt vermesi için birkaç saniye bekleyin.

Uygulamadaki chatbot, genel bir yanıt veriyor.

Chatbot'u uygulamaya göre özelleştirme

Web uygulamanızın chatbot'u tarafından kullanılan temel Gemini modelinin, uygulamayı kullanan katılımcılar için yanıt oluştururken konferansa özel ayrıntıları bilmesi gerekir. Bu yanıtları kontrol etmenin ve yönlendirmenin birçok yolu vardır. Bu codelab'in alt bölümünde, ilk istemde yalnızca web uygulamasının kullanıcısından gelen giriş yerine "bağlam" sağlayarak çok temel bir yöntem gösteriyoruz.

1. Tarayıcınızdaki web uygulamasında, kırmızı "x" düğmesini (sohbet geçmişindeki mesajın yanında) tıklayarak sohbeti temizleyin.
2. Kod düzenleyicinizde src/app/page.tsx dosyasını açın.
3. Aşağı kaydırın ve 93. satırda veya bu satırın yakınında bulunan prompt: userMsg kodunu aşağıdakilerle değiştirin:
   prompt: preparePrompt(userMsg, messages),
4. Dosyayı kaydedin.
5. Tarayıcınızda çalışan web uygulamasına geri dönün.
6. Tekrar bir selamlama (ör. hi) yazın ve Gönder'i tıklayın.
7. Chatbot'un yanıt vermesi için birkaç saniye bekleyin.

Chatbot, src/app/lib/context.md içinde sağlanan bağlamdan yararlanarak bilgiyle yanıt verir. Belirli bir istek yazmamış olsanız bile temel Gemini modeli, bu bağlamın yanı sıra geçerli tarih/saate göre kişiselleştirilmiş bir öneri oluşturur. Artık ek sorular belirtebilir ve daha ayrıntılı bilgi edinebilirsiniz.

Bu genişletilmiş bağlam, chatbot için önemlidir ancak web uygulamasının kullanıcısına gösterilmemelidir. Bu bağlamı nasıl gizleyeceğinizi aşağıda bulabilirsiniz:

1. Kod düzenleyicinizde src/app/page.tsx dosyasını açın.
2. Aşağı kaydırın ve 56. satırda veya bu satırın yakınında bulunan ...doc.data(), kodunu aşağıdakilerle değiştirin:
   ...prepareMessage(doc.data()),
3. Dosyayı kaydedin.
4. Tarayıcınızda çalışan web uygulamasına geri dönün.
5. Sayfayı yeniden yükleyin.

Ayrıca, chatbot ile geçmiş bağlamı kullanarak sohbet etme özelliğini de deneyebilirsiniz:

1. Bir mesaj yazın metin kutusuna şu gibi bir soru sorun: Any other interesting talks about AI?Chatbot yanıt verir.
2. Bir mesaj yazın metin kutusunda, önceki soruyla ilgili bir takip sorusu sorun: Give me a few more details about the last one.

Chatbot, geçmiş bilgilerle yanıt veriyor. Sohbet geçmişi artık bağlamın bir parçası olduğundan chatbot, takip sorularını anlıyor.

7. "Gemini API ile Çok Formatlı Görevler" uzantısını kurma

"Gemini API ile Çok Formatlı Görevler" uzantısı, Gemini API'yi metin isteminin yanı sıra desteklenen bir dosya URL'si veya Cloud Storage URL'si içeren çok formatlı istemlerle çağırır (Google AI Gemini API'nin bile temel dosya URL'si altyapısı olarak Cloud Storage URL'si kullandığını unutmayın). Uzantı, metin istemini özelleştirmek için Cloud Firestore belgesindeki değerlerin yerine geçecek tutma yeri değişkenlerini de destekler.

Uygulamanızda, Cloud Storage paketine her resim yüklediğinizde bir URL oluşturabilir ve bu URL'yi yeni bir Cloud Firestore belgesine ekleyebilirsiniz. Böylece uzantı, çok formatlı bir istem oluşturup Gemini API'yi çağırır. Bu codelab'in kaynak kodunda, resim yükleme ve URL'yi Firestore belgesine yazma kodu sağlanmıştır.

"Multimodal Tasks with the Gemini API" uzantısını yükleyin.

1. "Gemini API ile Çok Formatlı Görevler" uzantısına gidin.
2. Firebase konsolunda yükle'yi tıklayın.
3. Firebase projenizi seçin.
4. Uzantıyı yapılandırın bölümüne ulaşana kadar Sonraki > Sonraki > Sonraki'yi tıklayın.
   1. Gemini API Sağlayıcı menüsünde, Google AI veya Vertex AI'daki Gemini API'yi kullanmak isteyip istemediğinizi seçin. Firebase kullanan geliştiricilerin Vertex AI kullanmasını öneririz.
   2. Firestore Collection Path (Firestore Koleksiyon Yolu) metin kutusuna şunu girin: gallery
   3. İstem metin kutusuna şunu girin: Please describe the provided image; if there is no image, say "no image"
   4. Resim alanı metin kutusuna image yazın.
   5. Cloud Functions konumu menüsünde tercih ettiğiniz konumu (ör. Iowa (us-central1) veya Firestore veritabanınız için daha önce belirttiğiniz konum) seçin.
   6. Diğer tüm değerleri varsayılan değerlerinde bırakın.
5. Uzantıyı yükle'yi tıklayın ve uzantının yüklenmesini bekleyin.

"Multimodal Tasks with the Gemini API" (Gemini API ile Çok Formatlı Görevler) uzantısını deneyin

Bu codelab'in amacı, bir web uygulaması aracılığıyla "Gemini API ile Çok Formatlı Görevler" uzantısıyla etkileşim kurmaktır. Ancak uzantının nasıl çalıştığını öğrenmek için önce Firebase Console'da denemek faydalı olacaktır.

Uzantı, Firebase konsolunda yapabileceğiniz gibi, users/{uid}/gallery koleksiyonu altında bir Firestore belgesi oluşturulduğunda tetiklenir. Ardından uzantı, Cloud Firestore belgesindeki Cloud Storage görüntü URL'sini alır ve Gemini API'ye yapılan bir çağrıda çok formatlı istemin bir parçası olarak iletir.

Öncelikle Cloud Storage paketine bir resim yükleyin:

1. Firebase projenizde Storage'a gidin.
2. Klasör oluştur'u tıklayın.
3. Klasör adı metin kutusuna gallery yazın
4. Klasör ekle'yi tıklayın.
5. gallery klasöründe Dosya yükle'yi tıklayın.
6. Yüklemek için bir JPEG resim dosyası seçin.

Ardından, resmin Cloud Storage URL'sini bir Firestore dokümanına ekleyin (bu, uzantının tetikleyicisidir):

1. Firebase projenizde Firestore'a gidin.
2. İlk sütunda Koleksiyonu başlat'ı tıklayın.
3. Collection ID (Koleksiyon Kimliği) metin kutusuna gallery girin ve Next'i (Sonraki) tıklayın.
4. Koleksiyona doküman ekleme:
   1. Doküman Kimliği metin kutusunda Otomatik Kimlik'i tıklayın.
   2. Alan metin kutusuna image yazın. Değer kutusuna, yeni yüklediğiniz resmin Depolama konumu URI'sini girin.
5. Alan Ekle'yi tıklayın.
6. Alan metin kutusuna published yazın. Tür kutusunda boolean'ı seçin. Değer kutusunda true'ı seçin.
7. Kaydet'i tıklayın ve birkaç saniye bekleyin.

gallery koleksiyonu artık sorgunuza yanıt içeren bir doküman içeriyor.

Web uygulamasının resim galerisini kullanma

1. Tarayıcınızda, yerel olarak çalışan Friendly Conf web uygulamasının bulunduğu sekmeye dönün.
2. Galeri gezinme sekmesini tıklayın.
3. Yüklenen resimlerin ve yapay zekayla üretilen açıklamaların yer aldığı bir galeri görürsünüz. Bu dosya, depolama paketinize daha önce yüklediğiniz resmi gallery klasöründe içermelidir.
4. "Yükle" düğmesini tıklayın ve başka bir JPEG resmi seçin.
5. Resmin galeride görünmesi için birkaç saniye bekleyin. Birkaç dakika sonra, yeni yüklenen resmin yapay zekayla üretilmiş açıklaması da gösterilir.

Bu özelliğin nasıl uygulandığına dair kodu anlamak istiyorsanız web uygulamasının kod tabanındaki src/app/gallery/page.tsx bölümüne bakın.

8. Bonus: Uygulamanızı dağıtma

Firebase, web uygulaması dağıtmak için çeşitli yöntemler sunar. Bu codelab için aşağıdaki seçeneklerden birini belirleyin:

• 1. seçenek: Firebase Hosting - Kendi GitHub kod deponuzu oluşturmamaya karar verirseniz (ve kaynak kodunuz yalnızca makinenizde yerel olarak depolanırsa) bu seçeneği kullanın.
• 2. seçenek: Firebase App Hosting: Değişiklikleri kendi GitHub deponuza aktardığınızda otomatik dağıtım istiyorsanız bu seçeneği kullanın. Bu yeni Firebase hizmeti, özellikle dinamik Next.js ve Angular uygulamalarının ihtiyaçlarına göre uyarlanmak üzere geliştirilmiştir.

1. seçenek: Firebase Hosting'i kullanarak dağıtma

Kendi GitHub deponuzu oluşturmamaya karar verirseniz (ve kaynak kodunuz yalnızca makinenizde yerel olarak depolanırsa) bu seçeneği kullanın.

1. Terminalinizde şu komutları çalıştırarak Firebase Hosting'i başlatın:

   firebase experiments:enable webframeworks
   firebase init hosting
   

2. Detected an existing Next.js codebase in your current directory, should we use this? istemi için Y tuşuna basın.
3. In which region would you like to host server-side content, if applicable? istemi için varsayılan konumu veya bu Codelab'de daha önce kullandığınız konumu seçin. Ardından Enter (veya macOS'te return) tuşuna basın.
4. Set up automatic builds and deploys with GitHub? istemi için N tuşuna basın.
5. Bu komutu çalıştırarak web uygulamanızı Hosting'e dağıtın:

   firebase deploy --only hosting
   

Hepsi bu kadar. Uygulamanızı güncellediyseniz ve yeni sürümü dağıtmak istiyorsanız firebase deploy --only hosting komutunu yeniden çalıştırmanız yeterlidir. Firebase Hosting, uygulamanızı oluşturup yeniden dağıtır.

2. seçenek: Firebase App Hosting'i kullanarak dağıtma

Kendi GitHub deponuza değişiklikleri her aktardığınızda otomatik dağıtım istiyorsanız bu seçeneği kullanın.

1. Değişikliklerinizi GitHub'a gönderin.
2. Firebase konsolunda, Firebase projenizdeki App Hosting'e gidin.
3. Başlayın > GitHub'a bağlan'ı tıklayın.
4. GitHub hesabınızı ve deponuzu seçin. İleri'yi tıklayın.
5. Dağıtım ayarı > Kök dizin bölümünde, kaynak kodunuzun bulunduğu klasörün adını girin (package.json, deponuzun kök dizininde değilse).
6. Canlı dal için GitHub deponuzun ana dalını seçin. İleri'yi tıklayın.
7. Arka uç için bir kimlik girin (örneğin, chatbot).
8. Bitir ve Dağıt'ı tıklayın.

Yeni dağıtımınızın hazır olması birkaç dakika sürer. Dağıtım durumunu Firebase konsolunun Uygulama barındırma bölümünden kontrol edebilirsiniz.

Bundan sonra, GitHub deponuza her değişiklik gönderdiğinizde Firebase App Hosting, uygulamanızı otomatik olarak oluşturup dağıtır.

9. Sonuç

Tebrikler! Bu codelab'de çok şey öğrendiniz.

Uzantıları yükleme ve yapılandırma

Üretken yapay zekayı kullanan çeşitli Firebase uzantılarını yapılandırmak ve yüklemek için Firebase konsolunu kullandınız. Firebase Uzantıları'nı kullanmak kolaydır. Çünkü Google Cloud hizmetleriyle kimlik doğrulama işlemini veya Firestore ve Google Cloud hizmetleri ile API'leri dinlemek ve bunlarla etkileşim kurmak için arka uç Cloud Functions mantığını yönetmek üzere çok sayıda standart kod öğrenmeniz ve yazmanız gerekmez.

Firebase konsolunu kullanarak uzantıları deneme

Doğrudan koda geçmek yerine, Firestore veya Cloud Storage aracılığıyla sağladığınız bir girişe göre bu üretken yapay zeka uzantılarının nasıl çalıştığını anlamak için zaman ayırdınız. Bu, özellikle bir uzantının çıktısında hata ayıklarken yararlı olabilir.

Yapay zeka destekli web uygulaması oluşturma

Yapay zeka destekli bir web uygulaması oluşturdunuz. Bu uygulama, Gemini modelinin yalnızca birkaç özelliğine erişmek için Firebase Extensions'ı kullanıyor.

Web uygulamasında, kullanıcıya etkileşimli bir sohbet arayüzü sağlamak için "Gemini API ile Chatbot" uzantısını kullanırsınız. Bu arayüz, uygulamaya özel ve geçmiş bağlamı içeren sohbetler sunar. Her mesaj, belirli bir kullanıcıya yönelik bir Firestore belgesinde saklanır.

Web uygulaması, yüklenen resimler için otomatik olarak resim açıklamaları oluşturmak üzere "Gemini API ile Çok Formatlı Görevler" uzantısını da kullanıyordu.

Sonraki adımlar

• Google AI Studio veya Vertex AI Studio'da istemlerle denemeler yapın ve geniş bağlam penceresinden yararlanın.
• Yapay zeka almayla artırılmış üretim (RAG) araması hakkında bilgi edinin.
• Genkit (yeni bir yapay zeka çerçevesi hizmeti) kullanarak mevcut bir Firebase uygulamasına chatbot eklemeyi gösteren, kendi hızınızda ilerleyebileceğiniz bir codelab'i deneyin.
• Firestore'daki benzerlik arama özellikleri ve PostgreSQL İçin Cloud SQL hakkında bilgi edinin.
• İşlev çağrısı ile chatbot'unuza mevcut uygulamanızı aramasını öğretin.