Uygulama prototipi aracıyla tam yığın web uygulaması geliştirme, yayınlama ve izleme

Bu kılavuzda, Firebase'deki Gemini'ın yardımıyla tam yığınlı bir uygulamayı hızlı bir şekilde geliştirmek ve yayınlamak için App Prototyping agent'ı nasıl kullanacağınız gösterilmektedir. Resimdeki veya tarayıcı içi kameradaki yiyecekleri tanımlayan ve tanımlanan malzemeleri içeren bir tarif oluşturan bir Next.js uygulaması oluşturmak için doğal dil istemi kullanacaksınız.

Bu kılavuzda ilerlerken kullanacağınız diğer teknolojiler şunlardır:

1. adım: Uygulamanızı oluşturun

  1. Google Hesabınıza giriş yapın ve Firebase Studio'ı açın.

  2. Yapay zeka ile uygulama prototipi oluşturma alanına, tarayıcı kamerasını ve üretken yapay zekayı kullanan, resim tabanlı bir yemek tarifi uygulaması oluşturacak olan aşağıdaki istemi girin.

    Ö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.

  3. İ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ükleyip Firebase Studio'a bu resmi kullanmasını söyleyebilirsiniz. Resimler 3 MiB'tan küçük olmalıdır.

  4. Yapay zeka ile prototip oluşturun'u tıklayın.

    Gemini, isteminize göre bir uygulama planı oluşturur. Bu planda önerilen uygulama adı, gerekli özellikler ve stil yönergeleri yer alır.

  5. Ş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 planı doğrudan düzenleyin. Değişikliklerinizi yapıp Kaydet'i tıklayın.

    • Sohbet bölmesindeki Açıklama... alanına açıklayıcı sorular ve bağlam ekleyin. Ek resimler de yükleyebilirsiniz.

  6. Bu uygulamanın prototipini oluştur'u tıklayın.

  7. Uygulama Prototip Oluşturma temsilcisi, uygulamanızın kodunu yazmaya başlar.

    • Uygulamanızda yapay zeka kullanıldığı için 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 bir Gemini API anahtarı sağlar.

2. adım: Test etme, iyileştirme, hata ayıklama ve yineleme

İlk uygulama oluşturulduktan sonra test edebilir, iyileştirebilir, hatalarını ayıklayabilir ve yineleyebilirsiniz.

  • Uygulamanızı inceleyin ve uygulamayla etkileşim kurun: Kod oluşturma işlemi tamamlandıktan sonra uygulamanızın önizlemesi gösterilir. Önizlemeyle doğrudan etkileşim kurarak testi gerçekleştirebilirsiniz. Daha fazla bilgiyi Uygulamanızın önizlemesini yapma başlıklı makalede bulabilirsiniz.

  • Hataları oluştuğu anda düzeltin: Çoğu durumda App Prototyping agent oluşan hataları düzeltmenizi ister. Düzeltme girişiminde bulunmasına izin vermek 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 misin?") kopyalayıp sohbet penceresine yapıştırın ve Gemini adresine gönderin.

  • Doğal dili kullanarak test etme ve yineleme: Uygulamanızı kapsamlı bir şekilde test edin ve kod ile taslak üzerinde yineleme yapmak için App Prototyping agent ile birlikte çalışın. Bu yineleme, kod ve taslaktan memnun kalana kadar devam eder.

    Prototyper mode, you can also use the following features: konumundayken

    • Doğrudan önizleme penceresinde çizim yapmak için Not ekleme simgesi Not ekle'yi tıklayın. App Prototyping agent öğesinin nasıl değişmesini istediğinizi görsel olarak açıklamak için mevcut şekil, resim ve metin araçlarını kullanın. İsteğe bağlı olarak metin istemi de ekleyebilirsiniz.

    • Belirli bir öğeyi seçmek ve App Prototyping agent için talimat girmek üzere Seç'i (Simge seçin) 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'ten stok görsel arayıp seçme seçeneğiniz de vardır.

    İsteğe bağlı olarak, uygulamanızı Bağlantı simgesi Önizleme bağlantısını paylaş'ı tıklayarak Firebase Studio genel önizlemeler ile herkese açık ve geçici olarak paylaşabilirsiniz.

  • Doğrudan kodda hata ayıklama ve yineleme: Kod değiştirme simgesi Code görünümünü açmak için Kod değiştirme simgesi Koda Geç'i tıklayı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.'ya geri dönebilirsiniz.

    Code görünümündeyken aşağıdaki faydalı özellikleri de kullanabilirsiniz:

  • Üretken yapay zeka özelliğinizin performansını test etme ve ölçme: Genkit yapay zeka akışlarınızı çalıştırmak, test etmek, hata ayıklamak, farklı modellerle etkileşim kurmak, istemlerinizi iyileştirmek ve daha fazlası için Genkit Developer UI'yı kullanabilirsiniz.

    Genkit akışlarınızı Genkit Developer UI'ye yüklemek ve test etmeye başlamak için:

    1. Firebase Studio çalışma alanınızdaki terminalden, Gemini API anahtarınızı kaynaklandırmak ve Genkit sunucusunu başlatmak için aşağıdaki komutu çalıştırın:

       npm run genkit:watch

    2. Genkit Developer UI bağlantısını tıklayın. Genkit Geliştirici kullanıcı arayüzü, akışlarınız, istemleriniz, yerleştiricileriniz ve farklı modellerden oluşan bir seçkiyle yeni bir pencerede açılır.

    Genkit Developer UI hakkında daha fazla bilgi edinmek için Genkit Developer Tools 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ızda memnun kaldıktan sonra Firebase App Hosting ile web'de yayınlayabilirsiniz.

App Hosting'ı ayarladığınızda Firebase Studio, sizin için bir Firebase projesi oluşturur (Gemini API anahtarı otomatik olarak oluşturularak daha önce oluşturulmamışsa) ve bir Cloud Billing hesabını bağlama konusunda size yol gösterir.

Uygulamanızı yayınlamak için:

  1. Firebase projenizi oluşturmak ve uygulamanızı yayınlamak için Yayınla'yı tıklayın. Uygulamanızı yayınlayın bölmesi görünür.

  2. Firebase projesi adımındaki App Prototyping agent, çalışma alanıyla ilişkili Firebase'i gösterir. Gemini API anahtar oluşturma sırasında proje oluşturmadıysa sizin için yeni bir proje oluşturur. Devam etmek için İleri'yi tıklayın.

  3. 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şlemle Google Cloud konsolu açılır. Burada yeni bir self servis Cloud Billing hesabı oluşturabilirsiniz. Hesabı oluşturduktan sonra Firebase Studio adresine dönün ve Bağla Cloud Billing listesinden hesabı seçin.

  4. İleri'yi tıklayın. Firebase Studio, faturalandırma hesabını, çalışma alanınızla ilişkili projeye bağlar. Bu proje, Gemini API anahtarı otomatik olarak oluşturduğunuzda veya Yayınla'yı tıkladığınızda oluşturulur.

    başlıklı makaleden daha fazla bilgi edinin.

  5. Hizmetleri ayarlayın'ı tıklayın. Uygulama Prototipi Oluşturma aracısı, Firebase hizmetlerini sağlamaya başlar.

  6. Hemen 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.

  7. Yayınlama adımı tamamlandığında Uygulamaya genel bakış sayfası, App Hosting gözlemlenebilirlik özelliğiyle desteklenen bir URL ve uygulama analizleriyle birlikte gösterilir. Firebase tarafından oluşturulan alan adı yerine özel bir alan adı (ör. example.com veya app.example.com) kullanmak için Firebase konsolunda özel bir alan adı ekleyebilirsiniz.

App Hosting hakkında daha fazla bilgi için App Hosting ve nasıl çalıştığı hakkında bilgi başlıklı makaleyi inceleyin.

(Önerilir) 6. adım: Uygulamanıza Firebase App Check 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şı korur. Kaynaklarınızın güvenliğini sağlamak için hem Google hizmetleriyle (Firebase ve Google Cloud hizmetleri dahil) hem de kendi özel arka uçlarınızla birlikte çalışır.

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 App Check kurulumu hakkında bilgi verilmektedir. Ancak Firebase hizmetlerini uygulayan ve özel sağlayıcıları uygulayabilen tüm uygulamalarda App Check kurulumu yapabilirsiniz.Firebase Studio Daha fazla bilgiyi Firebase App Check adresinde bulabilirsiniz.

ReCAPTCHA Enterprise,10.000'e kadar değerlendirmeyi ücretsiz olarak sunar.

1. adım: Uygulamanız için reCAPTCHA Enterprise'ı ayarlayın

  1. Google Cloud konsolunun reCAPTCHA Enterprise bölümünü açın.

  2. Google Cloud konsolundaki proje seçiciden Firebase projenizin adını seçin.

  3. reCAPTCHA Enterprise API'yi etkinleştirmeniz istenirse etkinleştirin.

  4. Başlayın'ı tıklayın ve reCAPTCHA site anahtarınız için bir görünen ad ekleyin.

  5. Varsayılan Web Uygulama türü anahtarını kabul edin.

  6. Alan adı ekle'yi tıklayın ve bir alan adı ekleyin. App Hosting alanınızı (örneğin, App Hosting) ve uygulamanızla kullandığınız veya kullanmayı planladığınız tüm özel alanları eklemeniz gerekir.studio--PROJECT_ID.REGION.hosted.app

  7. Next step'i (Sonraki adım) tıklayın.

  8. Giriş sorgulamalarını kullanacak mısınız? seçeneğini işaretlemeyin.

  9. Anahtar oluştur'u tıklayın.

  10. Anahtar kimliğinizi kopyalayıp kaydedin ve YapılandırmaApp Check bölümüne gidin.

2. adım: App Check yapılandırın

  1. Firebase konsolunu açın ve gezinme menüsünden Oluştur > App Check'i tıklayın.

  2. Başlayın'ı, ardından uygulamanızın yanındaki Kaydol'u tıklayın.

  3. ReCAPTCHA'yı genişletmek için tıklayın ve reCAPTCHA Enterprise için oluşturduğunuz anahtar kimliğini yapıştırın.

  4. Kaydet'i tıklayın.

3. adım: Kodunuza App Check ekleyin

  1. Firebase Studio'a 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

  2. Firebase yapılandırmanız henüz .env konumuna kaydedilmediyse yapılandırmayı edinin:

    • Firebase Konsol'da Proje ayarları'nı açın ve uygulamanıza karşılık gelen bölümden bulun.

    • Code görünümündeki terminalden:

      1. Firebase'e giriş yapın: firebase auth login
      2. Projenizi seçin: firebase use FIREBASE_PROJECT_ID
      3. Firebase yapılandırmasını alın: firebase apps:sdkconfig

  3. Yapılandırmayı .env dosyanıza aşağıdaki gibi görünecek şekilde 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

  4. App Check kodunu uygulama kodunuza ekleyin. Gemini'dan reCAPTCHA Enterprise'ı uygulamanıza eklemesini isteyebilir (App Check'ı belirtmeyi ve iki kez kontrol etmeyi unutmayın) veya BaşlatmaApp Check bölümündeki adımları uygulayabilirsiniz.

  5. Sitenizi App Hosting adresinde yeniden yayınlayın. Bazı veriler oluşturmak için Firebase özelliklerinizi test etmeyi deneyin.

  6. Derleme > App Check'i açarak App Check konsolunda istek alıp almadığını doğrulayın.Firebase

  7. Firebase hizmetlerini incelemek için tıklayın. İsteklerin geldiğini doğruladıktan sonra App Check'ı zorunlu kılmak için Uygula'yı tıklayın.

  8. Firebase Authentication için doğrulama ve zorunlu kılma işlemlerini tekrarlayın.

Uygulamanızı App Check için kaydettikten sonra, uygulamanızı normalde App Check tarafından geçerli olarak sınıflandırılmayacak bir ortamda (ör. geliştirme sırasında yerel olarak veya sürekli entegrasyon (CI) ortamında) çalıştırmak istiyorsanız uygulamanızın gerçek bir onay sağlayıcı yerine App Check hata ayıklama sağlayıcısını kullanan bir hata ayıklama sürümünü oluşturabilirsiniz. Web uygulamalarında hata ayıklama sağlayıcısıyla App Check kullanma başlıklı makaleden daha fazla bilgi edinin.

(İsteğe bağlı) 7. adım: Uygulamanızı izleyin

Firebase Studio içindeki Uygulamaya genel bakış panelinde, uygulamanızla ilgili temel metrikler ve bilgiler yer alır. Bu sayede, 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ışa 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'de doğrudan açın.
  • Uygulamanızın son 7 gündeki performansının özetini (toplam istek sayısı ve en son kullanıma sunma işleminizin durumu dahil) inceleyin. Firebase konsolunda 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ığı isteklerin sayısının HTTP durum koduna göre dökümünü içeren bir grafik görüntüleyin.

Uygulamaya genel bakış panelini kapatırsanız Yayınla'yı tıklayarak istediğiniz zaman yeniden açabilirsiniz.

App Hosting dağıtımlarını yönetme ve izleme hakkında daha fazla bilgi edinmek için Dağıtımları ve yayınları 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 ardışık sürümlerini App Hosting'ya dağıttıysanız önceki sürümlerden birine geri dönebilirsiniz. İsterseniz kaldırabilirsiniz.

  • Yayınlanan bir siteyi geri döndürmek için:

    1. App Hosting'u Firebase konsolunda açın.

    2. Uygulamanızın arka ucunu bulun, Görüntüle'yi ve ardından Kullanıma sunumlar'ı tıklayın.

    3. 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çip onaylayın.

    Daha fazla bilgiyi Dağıtımları ve sürümleri yönetme başlıklı makalede bulabilirsiniz.

  • App Hosting alanınızı web'den kaldırmak için:

    1. Firebase konsolunda App Hosting uygulamasını açın ve Firebase Studio uygulama bölümünde Görüntüle'yi tıklayın.

    2. Arka uç bilgileri bölümünde Yönet'i tıklayın. Alanlar sayfası yüklenir.

    3. Alanınızın yanındaki Diğer'i tıklayın, ardından Alanı devre dışı bırak'ı seçin ve işlemi onaylayın.

    Bu işlem, alanınızı web'den kaldırır. App Hosting arka uçunuzu tamamen kaldırmak için Arka ucu silme bölümündeki talimatları uygulayın.

(İsteğe bağlı) 9. adım: Dağıtılan özellikleriniz için Genkit Monitoring'i kullanın

Genkit özelliğinin adımlarını, girişlerini ve çıkışlarını izlemek için yapay zeka akışı kodunuzda telemetriyi etkinleştirebilirsiniz. Genkit'nı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'da 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:

  1. Henüz Code görünümünde değilseniz açmak için Kod değiştirme simgesi Koda Geç'i tıklayın.

  2. Yüklü Genkit sürümünü doğrulamak için package.json simgesini kontrol edin.

  3. Terminali açın (Ctrl-Shift-C veya MacOS'te Cmd-Shift-C).

  4. Terminalin içini tıklayın ve package.json dosyanızla eşleşen sürümü kullanarak Firebase eklentisini yükleyin. Örneğin, Genkit paketleriniz package.json içinde 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

  5. Gezgin'de src > ai > flows simgesini genişletin. Genkit akışlarınızı içeren bir veya daha fazla TypeScript dosyası, flows klasöründe görünür.

  6. Açmak istediğiniz akışı tıklayın.

  7. 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 projenizi oluştururken Firebase Studio, sizin için gerekli API'leri etkinleştirmiştir ancak App Hosting hizmet hesabına da izin vermeniz gerekir.

İzinleri ayarlamak için:

  1. Google Cloud IAM konsolunu açın, projenizi seçin ve ardından App Hosting hizmet hesabına aşağıdaki rolleri verin:

    • Monitoring Metric Writer (roles/monitoring.metricWriter)
    • Cloud Trace Aracısı (roles/cloudtrace.agent)
    • Günlük Yazıcı (roles/logging.logWriter)

  2. Uygulamanızı App Hosting'de yeniden yayınlayın.

  3. Yayınlama işlemi tamamlandığında uygulamanızı yükleyip kullanmaya başlayın. Beş dakika sonra uygulamanız telemetri verilerini kaydetmeye başlamalıdır.

3. adım: Firebase konsolunda üretken yapay zeka özelliklerinizi izleyin

Telemetri yapılandırıldığında Genkit, tüm akışlarınız için istek sayısını, başarıyı 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:

  1. Beş dakika sonra Firebase konsolunda Genkit'yı açıp Genkit'nın istemlerini ve yanıtlarını inceleyin.

    Genkit aşağıdaki kararlılık metriklerini derler:

    • Toplam istek sayısı: Akışınız tarafından alınan toplam istek sayısı.
    • Başarı oranı: Başarıyla işlenen isteklerin yüzdesi.
    • 95. yüzdelik dilimdeki gecikme: Akışınızın 95. yüzdelik dilimdeki gecikmesi. Bu, isteklerin% 95'inin işlenmesi için gereken süredir.

    • Jeton kullanımı:

      • Giriş jetonları: İstemde modele gönderilen jeton sayısı.
      • Çıkış jetonları: Yanıtta model tarafından oluşturulan jetonların sayısı.

    • Görüntü kullanımı:

      • Giriş resimleri: İstemde modele gönderilen resimlerin sayısı.
      • Çıkış resimleri: Yanıtta model tarafından oluşturulan resimlerin sayısı.

    Kararlılık metriklerini genişletirseniz ayrıntılı grafikler kullanılabilir:

    • Zaman içindeki istek hacmi.
    • Zaman içindeki başarı oranı.
    • Zaman içindeki 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