Bu kılavuzda, Firebase'te Gemini'nin yardımıyla tam yığın bir uygulamayı hızlıca geliştirip yayınlamak için App Prototyping agent'i nasıl kullanacağınız gösterilmektedir. Bir resimden veya tarayıcı içi kameradan yiyecek öğelerini tanımlayan ve tanımlanan malzemeleri içeren bir yemek tarifi oluşturan bir Next.js uygulaması oluşturmak için doğal dil istemi kullanırsınız.
Bu rehberi takip ederken kullanacağınız diğer teknolojiler şunlardır:
1. adım: Uygulamanızı oluşturun
Google Hesabınıza giriş yapın ve Firebase Studio'i açın.
Yapay zeka ile uygulama prototipi oluştur alanına aşağıdaki isteği girin. Bu istem, tarayıcı kamerasını ve üretken yapay zekayı kullanan, görüntü tabanlı bir yemek tarifi uygulaması oluşturur.
Örneğin, yemek tarifi oluşturma uygulaması oluşturmak için aşağıdaki gibi bir istem girebilirsiniz:
Use secure coding practices to create an error-free web app that lets users upload a photo or take a picture with their browser camera. The app identifies the food in the picture and generates a recipe and accompanying image that includes that food. If no food product is identified, generate a random dessert recipe.
İsterseniz isteminize eşlik edecek bir resim yükleyin. Örneğin, uygulamanızın kullanmasını istediğiniz renk şemasını içeren bir resim yükleyebilir ve Firebase Studio'e bu resmi kullanmasını söyleyebilirsiniz. Resimler 3 MiB'tan küçük olmalıdır.
Yapay zeka ile prototip oluştur'u tıklayın.
Gemini, isteminize göre bir uygulama taslağı oluşturur. Önerilen uygulama adını, gerekli özellikleri ve stil yönergelerini döndürür.
Şemayı inceleyin. Gerekirse birkaç değişiklik yapın. Örneğin, aşağıdaki seçeneklerden birini kullanarak önerilen uygulama adını veya renk şemasını değiştirebilirsiniz:
Özelleştir'i tıklayın ve doğrudan taslağı düzenleyin. Değişikliklerinizi yapıp Kaydet'i tıklayın.
Sohbet bölmesinde bulunan Açıklayın... alanına açıklayıcı sorular ve bağlam bilgisi ekleyin. Ek resimler de yükleyebilirsiniz.
Bu uygulamanın prototipini oluştur'u tıklayın.
Uygulama Prototipi Oluşturma temsilcisi, uygulamanızı kodlamaya başlar.
- Uygulamanız yapay zeka kullandığından Gemini API anahtarı eklemeniz veya oluşturmanız istenir. Otomatik Oluştur'u tıklarsanız App Prototyping agent sizin için bir Firebase projesi ve Gemini API anahtarı sağlar.
2. Adım: Test edin, hassaslaştırın, hata ayıklayın ve yineleyin
İlk uygulama oluşturulduktan sonra uygulamayı test edebilir, hassaslaştırabilir, hata ayıklayabilir ve yineleyebilirsiniz.
Uygulamanızı inceleyin ve uygulamanızla etkileşime geçin: Kod oluşturma işlemi tamamlandıktan sonra uygulamanızın önizlemesi gösterilir. Test etmek için doğrudan önizlemeyle etkileşimde bulunabilirsiniz. Uygulamanızı önizleme başlıklı makalede daha fazla bilgi edinin.
Hataları oluştukça düzeltin: Çoğu durumda App Prototyping agent, ortaya çıkan hataları düzeltmenizi ister. Düzeltme denemesi yapması için Hatayı Düzelt'i tıklayın.
Otomatik olarak düzeltmeniz istenmeyen hatalar alırsanız hatayı ve ilgili bağlamı (ör. "Firebase başlatma kodumdaki bu hatayı düzeltebilir misiniz?") sohbet penceresine kopyalayıp Gemini adresine gönderin.
Doğal dil kullanarak test edin ve iterasyon yapın: Uygulamanızı kapsamlı bir şekilde test edin ve memnun kalana kadar kod ile taslağı iterasyon yaparak App Prototyping agent ile birlikte çalışın.
Prototyper mode, you can also use the following features: konumundayken
Doğrudan önizleme penceresinde çizim yapmak için
Açıklama ekle'yi tıklayın. App Prototyping agent'ün neyi değiştirmesini istediğinizi görsel olarak açıklamak için mevcut şekil, resim ve metin araçlarını ve isteğe bağlı bir metin istemini kullanın.
Belirli bir öğeyi seçmek ve App Prototyping agent için talimatlar girmek üzere
Seç'i tıklayın. Bu sayede belirli bir simgeyi, düğmeyi, metin parçasını veya başka bir öğeyi hızlıca hedefleyebilirsiniz. Bir resmi tıkladığınızda Unsplash'tan stok resim arama ve seçme seçeneğiniz de vardır.
Dilerseniz Firebase Studio herkese açık önizlemeleri kullanarak uygulamanızı herkese açık ve geçici olarak paylaşmak için
Önizleme bağlantısını paylaş'ı tıklayabilirsiniz.
Doğrudan kodda hata ayıklama ve iterasyon:
Koda Geç'i tıklayarak Code görünümünü açın. Bu görünümde uygulamanızın tüm dosyalarını görebilir ve kodunuzu doğrudan değiştirebilirsiniz. Prototyper mode at any time.'e geri dönebilirsiniz
Code görünümündeyken aşağıdaki faydalı özellikleri de kullanabilirsiniz:
Firebase Studio'ın yerleşik hata ayıklama ve raporlama özelliklerini kullanarak uygulamanızı inceleyin, hatalarını ayıkla ve denetleyin.
Firebase'te Gemini'yi kullanarak yapay zeka desteği (kodunuzda satır içi olarak veya etkileşimli sohbet üzerinden kullanılabilir. Her ikisi de varsayılan olarak kullanılabilir). Etkileşimli sohbet, sorunları teşhis edebilir, çözümler sunabilir ve uygulamanızı daha hızlı düzeltmenize yardımcı olacak araçları çalıştırabilir. Sohbete erişmek için çalışma alanının alt kısmındaki sparkGemini simgesini tıklayın.
Veritabanı ve kimlik doğrulama verilerini görüntülemek için Firebase Local Emulator Suite'ye erişin. Çalışma alanınızda emülatör'ü açmak için:
Kodu Kullan'ı tıklayın ve Firebase Studio uzantısını (
Ctrl+',Ctrl+'
veya macOS'teCmd+',Cmd+'
) açın.Arka uç bağlantı noktaları'na gidip bu bölümü genişletin.
4000 numaralı bağlantı noktası'na karşılık gelen İşlemler sütununda Yeni pencerede aç'ı tıklayın.
Üretken yapay zeka özelliğinizin performansını test edin ve ölçün: Genkit yapay zeka akışlarınızı çalıştırmak, test etmek, hata ayıklamak, farklı modellerle etkileşime geçmek, istemlerinizi hassaslaştırmak ve daha fazlası için Genkit geliştirici kullanıcı arayüzünü kullanabilirsiniz.
Genkit akışlarınızı Genkit Geliştirici kullanıcı arayüzüne yüklemek ve test etmeye başlamak için:
Firebase Studio anahtarınızı kaynak olarak kullanmak ve Genkit sunucusunu başlatmak için Firebase Studio çalışma alanınızdaki terminalde aşağıdaki komutu çalıştırın:Gemini API
npm run genkit:watch
Genkit Developer UI bağlantısını tıklayın. Genkit geliştirici kullanıcı arayüzü, akışlarınızın, istemlerinizin, yerleşticilerin ve mevcut farklı modellerin yer aldığı yeni bir pencerede açılır.
Genkit geliştirici kullanıcı arayüzü hakkında daha fazla bilgi edinmek için Genkit Geliştirici Araçları başlıklı makaleyi inceleyin.
(İsteğe bağlı) 3. adım: Uygulamanızı App Hosting ile yayınlayın
Uygulamanızı test edip çalışma alanınızdan memnun kaldıktan sonra Firebase App Hosting ile web'de yayınlayabilirsiniz.
App Hosting'ü ayarlarken Firebase Studio, sizin için bir Firebase projesi oluşturur (Gemini API anahtarı otomatik olarak oluşturularak daha önce oluşturulmamışsa) ve Cloud Billing hesabı bağlama konusunda size yol gösterir.
Uygulamanızı yayınlamak için:
Firebase projenizi ayarlamak ve uygulamanızı yayınlamak için Yayınla'yı tıklayın. Uygulamanızı yayınlama bölmesi görünür.
Firebase projesi adımında App Prototyping agent, çalışma alanıyla ilişkili Firebase'i gösterir. Gemini API anahtarı oluşturulurken proje oluşturulmadıysa sizin için yeni bir proje oluşturulur. Devam etmek için İleri'yi tıklayın.
Cloud Billing hesabını bağla adımında aşağıdakilerden birini seçin:
Firebase projenize bağlamak istediğiniz Cloud Billing hesabını seçin.
Cloud Billing hesabınız yoksa veya yeni bir hesap oluşturmak istiyorsanız Cloud Billing hesabı oluştur'u tıklayın. Bu işlem, yeni bir self servis Cloud Billing hesabı oluşturabileceğiniz Google Cloud konsolunu açar. Hesabı oluşturduktan sonra Firebase Studio adresine dönün ve Cloud Billing'yi bağla listesinden hesabı seçin.
İleri'yi tıklayın. Firebase Studio, faturalandırma hesabını Workspace'inizle ilişkili projeye bağlar. Bu proje, Gemini API anahtarını otomatik olarak oluşturduğunuzda veya Yayınla'yı tıkladığınızda oluşturulur.
Hizmetleri ayarlayın'ı tıklayın. Uygulama prototipleme aracısı, Firebase hizmetlerini sağlamaya başlar.
Şimdi yayınla'yı tıklayın. Firebase Studio, Firebase hizmetlerini kurar. Bu işlemin tamamlanması birkaç dakika sürebilir. Arka planda neler olduğu hakkında daha fazla bilgi edinmek için App Hosting derleme süreci başlıklı makaleyi inceleyin.
Yayınlama adımı tamamlandığında, App Hosting gözlemlenebilirlik tarafından desteklenen bir URL ve uygulama analizleriyle birlikte Uygulamaya genel bakış gösterilir. Firebase tarafından oluşturulan alan yerine özel bir alan (ör. example.com veya app.example.com) kullanmak için Firebase konsoluna özel alan ekleyebilirsiniz.
App Hosting hakkında daha fazla bilgi için App Hosting ve işleyiş şekli hakkında bilgi edinme başlıklı makaleyi inceleyin.
(Önerilir) 6. adım: Firebase App Check uygulamanıza ekleyin
Firebase veya Google Cloud hizmetlerini uygulamanıza entegre ettiyseniz Firebase App Check, yetkisiz istemcilerin Firebase kaynaklarınıza erişmesini engelleyerek uygulama arka uçlarınızı kötüye kullanıma karşı korumaya yardımcı olur. Hem Google hizmetleri (Firebase ve Google Cloud hizmetleri dahil) hem de kendi özel arka uçlarınızla çalışarak kaynaklarınızın güvenliğini sağlar.
Arka uç kaynaklarınızı kötüye kullanıma karşı korumak için herkese açık olarak yayınladığınız tüm uygulamalara App Check eklemenizi öneririz.
Bu bölümde, App Prototyping agent tarafından oluşturulan bir web uygulaması için reCAPTCHA Enterprise'ı kullanarak Firebase Studio içinde App Check'ü ayarlama konusunda size yol gösterilmektedir. Ancak App Check'ü, Firebase hizmetlerini uygulayan ve özel sağlayıcılar uygulayabilen herhangi bir uygulamada ayarlayabilirsiniz. Daha fazla bilgiyi Firebase App Check adresinde bulabilirsiniz.
ReCAPTCHA Enterprise,10.000'e kadar değerlendirmeyi ücretsiz sağlar.
1. Adım: Uygulamanız için reCAPTCHA Enterprise'ı ayarlayın
Google Cloud konsolunun reCAPTCHA Enterprise bölümünü açın.
Google Cloud konsol proje seçiciden Firebase projenizin adını seçin.
reCAPTCHA Enterprise API'yi etkinleştirmeniz istenirse bunu yapın.
Başlarken'i tıklayın ve reCAPTCHA site anahtarınız için bir Görünen ad ekleyin.
Varsayılan Web Uygulama türü anahtarını kabul edin.
Alan ekle'yi tıklayın ve bir alan adı ekleyin. App Hosting alanınızı (örneğin,
studio--PROJECT_ID.REGION.hosted.app
) ve uygulamanızla birlikte kullandığınız veya kullanmayı planladığınız tüm özel alanları eklemeniz gerekir.Next step'i (Sonraki adım) tıklayın.
Giriş sorgulamalarını kullanacak mısınız? seçeneğini işaretlemeyin.
Anahtar oluştur'u tıklayın.
Anahtar kimliğinizi kopyalayıp kaydedin ve App Check'ı yapılandırın'a geçin.
2. Adım: App Check öğesini yapılandırın
Firebase konsolunu açın ve gezinme menüsünden Derleme > Uygulama Kontrolü'nü tıklayın.
Başlayın'ı, ardından uygulamanızın yanındaki Kaydet'i tıklayın.
ReCAPTCHA'yı genişletip reCAPTCHA Enterprise için oluşturduğunuz Anahtar Kimliği'ni yapıştırın.
Kaydet'i tıklayın.
3. adım: Kodunuza App Check ekleyin
Firebase Studio'e dönün ve Code görünümünde, oluşturduğunuz site anahtarını
.env
dosyanıza ekleyin:NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
Firebase yapılandırmanızı
.env
'e kaydetmediyseniz yapılandırmanızı edinin:Firebase konsolunda Proje ayarları'nı açıp uygulamanıza karşılık gelen bölümde bulun.
Code görünümündeki Terminal'den:
- Firebase'e giriş yapın:
firebase auth login
- Projenizi seçin:
firebase use FIREBASE_PROJECT_ID
- Firebase yapılandırmasını alın:
firebase apps:sdkconfig
- Firebase'e giriş yapın:
Yapılandırmayı
.env
dosyanıza aşağıdaki gibi ekleyin:NEXT_PUBLIC_FIREBASE_API_KEY=FIREBASE_API_KEY NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=FIREBASE_AUTH_DOMAIN NEXT_PUBLIC_FIREBASE_PROJECT_ID=FIREBASE_PROJECT_ID NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=FIREBASE_STORAGE_BUCKET NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=FIREBASE_MESSAGING_SENDER_ID NEXT_PUBLIC_FIREBASE_APP_ID=FIREBASE_APP_ID NEXT_PUBLIC_RECAPTCHA_SITE_KEY=RECAPTCHA_SITE_KEY
Uygulama kodunuza App Check kodunu ekleyin. Gemini'ten uygulamanıza reCAPTCHA Enterprise ile App Check eklemesini isteyebilir ("reCAPTCHA Enterprise"ı belirttiğinizden ve tekrar kontrol ettiğinizden emin olun) veya App Check'ü başlatma bölümündeki adımları uygulayabilirsiniz.
Sitenizi App Hosting'te yeniden yayınlayın. Veri oluşturmak için Firebase özelliklerinizi test etmeyi deneyin.
Derleme > Uygulama Kontrolü'nü açarak App Check konsolunda Firebase istek aldığını doğrulayın.
Firebase hizmetlerini incelemek için tıklayın. İsteklerin geldiğini doğruladıktan sonra App Check'yi uygulamak için Uygula'yı tıklayın.
Firebase Authentication için doğrulama ve yaptırımı tekrarlayın.
Uygulamanızı App Check'e kaydettikten sonra, uygulamanızı App Check'in normalde geçerli olarak sınıflandırmayacağı bir ortamda (ör. geliştirme sırasında yerel olarak veya sürekli entegrasyon (CI) ortamından) çalıştırmak istiyorsanız gerçek bir doğrulama sağlayıcısı yerine App Check hata ayıklama sağlayıcısını kullanan uygulamanızın hata ayıklama derlemesini oluşturabilirsiniz. App Check'yi web uygulamalarında hata ayıklama sağlayıcıyla kullanma başlıklı makaleden daha fazla bilgi edinebilirsiniz.
(İsteğe bağlı) 7. adım: Uygulamanızı izleyin
Firebase Studio'deki Uygulamaya genel bakış paneli, uygulamanızla ilgili temel metrikleri ve bilgileri sağlar. Böylece App Hosting'ın yerleşik gözlemlenebilirlik araçlarını kullanarak web uygulamanızın performansını izleyebilirsiniz. Siteniz kullanıma sunulduktan sonra Yayınla'yı tıklayarak genel bakış sayfasına erişebilirsiniz. Bu panelden şunları yapabilirsiniz:
- Uygulamanızın yeni bir sürümünü yayınlamak için Yayınla'yı tıklayın.
- Uygulamanızın bağlantısını paylaşın veya Uygulamanızı ziyaret edin bölümünden uygulamanızı doğrudan açın.
- Toplam istek sayısı ve en son kullanıma sunma işleminizin durumu da dahil olmak üzere uygulamanızın son 7 gündeki performansının özetini inceleyin. Firebase Konsolu'nda daha fazla bilgiye erişmek için Ayrıntıları göster'i tıklayın.
- Uygulamanızın son 24 saat içinde aldığı istek sayısının HTTP durum koduna göre ayrılmış grafiğini görüntüleyin.
Uygulamaya genel bakış panelini kapatırsanız Yayınla'yı tıklayarak dilediğiniz zaman yeniden açabilirsiniz.
App Hosting kullanıma sunma işlemlerini yönetme ve izleme hakkında daha fazla bilgi edinmek için Kullanıma sunma işlemlerini ve sürümleri yönetme başlıklı makaleyi inceleyin.
(İsteğe bağlı) 8. adım: Dağıtımınızı geri alın
Uygulamanızın art arda gelen sürümlerini App Hosting'e dağıttıysanız uygulamayı önceki sürümlerden birine geri döndürebilirsiniz. İsterseniz kaldırabilirsiniz.
Yayınlanan bir siteyi geri almak için:
Firebase konsolunda App Hosting'i açın.
Uygulamanızın arka ucunu bulun, Görüntüle'yi ve ardından Yayınlamalar'ı tıklayın.
Geri dönmek istediğiniz dağıtımın yanındaki Diğer'i
tıklayın, ardından Bu derlemeye geri dön'ü seçin ve onaylayın.
Dağıtım ve sürümleri yönetme başlıklı makalede daha fazla bilgi edinebilirsiniz.
App Hosting alanınızı web'den kaldırmak için:
Firebase Konsolu'nda App Hosting'i açın ve Firebase Studio uygulama bölümünde Görüntüle'yi tıklayın.
Arka uç bilgileri bölümünde Yönet'i tıklayın. Alanlar sayfası yüklenir.
Alanınızın yanındaki Diğer
simgesini tıklayın, ardından Alanı devre dışı bırak'ı seçin ve onaylayın.
Bu işlem, alanınızı web'den kaldırır. App Hosting arka uç sunucunuzu tamamen kaldırmak için Arka uç sunucusunu silme başlıklı makaledeki talimatları uygulayın.
(İsteğe bağlı) 9. adım: Dağıtılan özellikleriniz için Genkit İzleme'yi kullanın
Yapay zeka akış kodunuzda telemetriyi etkinleştirerek Genkit özellik adımlarınızı, girişlerinizi ve çıkışlarınızı izleyebilirsiniz. Genkit'ın telemetri özelliği, yapay zeka akışlarınızın performansını ve kullanımını izlemenizi sağlar. Bu veriler, iyileştirme yapabileceğiniz alanları belirlemenize, sorunları gidermenize, istemlerinizi ve akışlarınızı daha iyi performans ve maliyet verimliliği için optimize etmenize ve akışlarınızın zaman içindeki kullanımını izlemenize yardımcı olabilir.
Genkit'te izlemeyi ayarlamak için Genkit yapay zeka akışlarına telemetri ekler ve sonuçları Firebase konsolunda görüntülersiniz.
1. adım: Firebase Studio'daki Genkit akış kodunuza telemetri ekleyin
Kodunuzda izlemeyi ayarlamak için:
Code görünümünde değilseniz açmak için
Koda Geç'i tıklayın.
Yüklü Genkit sürümünü doğrulamak için
package.json
'ü kontrol edin.Terminal'i (
Ctrl-Shift-C
veya MacOS'teCmd-Shift-C
) açın.Terminalin içini tıklayın ve
package.json
dosyanızla eşleşen sürümü kullanarak Firebase eklentisini yükleyin. Örneğin,package.json
'inizdeki Genkit paketleri 1.0.4 sürümündeyse eklentiyi yüklemek için aşağıdaki komutu çalıştırmanız gerekir:npm i --save @genkit-ai/firebase@1.0.4
Gezgin'de
src > ai > flows
öğesini genişletin. Genkit akışlarınızı içeren bir veya daha fazla TypeScript dosyasıflows
klasöründe görünür.Açmak istediğiniz akışlardan birini tıklayın.
Dosyanın içe aktarma bölümünün en altına,
FirebaseTelemetry
'ü içe aktarmak ve etkinleştirmek için aşağıdakileri ekleyin:import { enableFirebaseTelemetry } from '@genkit-ai/firebase'; enableFirebaseTelemetry();
2. adım: İzinleri ayarlayın
Firebase Studio, Firebase projenizi oluştururken sizin için gerekli API'leri etkinleştirdi ancak App Hosting hizmet hesabına da izin vermeniz gerekir.
İzinleri ayarlamak için:
Google Cloud IAM konsolunu açın, projenizi seçin ve ardından uygulama barındırma hizmet hesabına aşağıdaki rolleri verin:
- Monitoring Metriği Yazıcısı (
roles/monitoring.metricWriter
) - Cloud Trace Aracısı (
roles/cloudtrace.agent
) - Günlük Yazıcı (
roles/logging.logWriter
)
- Monitoring Metriği Yazıcısı (
App Hosting'de uygulamanızı yeniden yayınlayın.
Yayınlama işlemi tamamlandığında uygulamanızı yükleyip kullanmaya başlayın. Beş dakika sonra uygulamanız telemetri verilerini kaydetmeye başlar.
3. Adım: Üretken yapay zeka özelliklerinizi Firebase konsolunda izleyin
Telemetri yapılandırıldığında Genkit, tüm akışlarınız için istek sayısını, başarı durumunu ve gecikmeyi kaydeder. Ayrıca her bir akış için kararlılık metriklerini toplar, ayrıntılı grafikler gösterir ve yakalanan izleri günlüğe kaydeder.Genkit
Genkit ile uygulanan yapay zeka özelliklerinizi izlemek için:
Beş dakika sonra Firebase konsolunda Genkit'ü açın ve Genkit'ün istemlerini ve yanıtlarını inceleyin.
Genkit aşağıdaki Kararlılık metriklerini derleyebilir:
- Toplam istek sayısı: Akışınız tarafından alınan isteklerin toplam sayısı.
- Başarı oranı: Başarıyla işlenen isteklerin yüzdesi.
- 95. yüzdelik dilim gecikmesi: Akışınızın 95. yüzdelik dilim gecikmesi, istekler için% 95'inin işlenmesi gereken süredir.
Jeton kullanımı:
- Giriş jetonları: İstemde modele gönderilen jeton sayısı.
- Çıkış jetonları: Model tarafından yanıtta oluşturulan jetonların sayısı.
Resim kullanımı:
- Giriş resimleri: İstemde modele gönderilen resim sayısı.
- Çıkış resimleri: Yanıtta model tarafından oluşturulan resimlerin sayısı.
Kararlılık metriklerini genişletirseniz ayrıntılı grafikler gösterilir:
- Zaman içindeki istek hacmi.
- Zaman içindeki başarı oranı.
- Zaman içinde giriş ve çıkış jetonları.
- Zaman içindeki gecikme (95. ve 50. yüzdelik dilim).
Genkit hakkında daha fazla bilgiyi Genkit adresinde bulabilirsiniz.
Sonraki adımlar
- Firebase Studio alanında uygulama geliştirme hakkında bilgi edinin.
- Firebase Studio'daki yapay zeka yardımı hakkında daha fazla bilgi edinin.