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

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 sunan bir Next.js uygulaması oluşturmak için doğal dil istemi kullanırsınız. Ardından uygulamayı hassaslaştırıp iyileştirir ve Firebase App Hosting'te yayınlarsınız.

başlıklı makaleyi inceleyin.

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

• Firebase Studio çalışma alanı
• Firebase projesi
• Firebase App Hosting

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

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

2. Yapay zeka ile uygulama prototipi oluştur alanına, oluşturmak istediğiniz uygulamanın açıklamasını girin. Resim tabanlı bir yemek tarifi uygulaması oluşturduğunuz bu çözümde, kamerayı ve üretken yapay zekayı kullanan bir uygulamanın prototipini oluşturmak için aşağıdaki gibi bir istem kullanabilirsiniz:

   Build a web app that can identify food products from an uploaded picture or
   in-browser camera. The app should provide a recipe that contains the
   identified ingredients.
   

3. Yapay zeka ile prototip oluştur'u tıklayın.

   Gemini, isteminize göre bir uygulama taslağı oluşturur ve önerilen uygulama adını, gerekli özellikleri ve stil yönergelerini döndürür.

4. Planı inceleyin ve 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:

   • editÖ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 bilgileri ekleyin. Ek resimler de yükleyebilirsiniz.

5. Bu uygulamanın prototipini oluştur'u tıklayın. Gemini, uygulamanızı kodlamaya başlar. Uygulama açıklamasında üretken yapay zeka gerektiren özellikler açıklandığı için Gemini sizden bir Gemini API anahtarı ister.

6. Kendi Gemini API anahtarınızı ekleyin veya Gemini API anahtarı oluşturmak için Otomatik oluştur'u tıklayın.

2. Adım: Test edin, hassaslaştırın, hata ayıklama yapın ve yineleyin

İlk uygulama oluşturulduktan sonra uygulamayı test edebilir, hassaslaştırabilir, hata ayıklayabilir ve yineleyebilirsiniz.

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

2. Uygulamanızda iterasyon yapın: Gemini'den özellik eklemesini ve uygulamayı hassaslaştırmasını istemek için sohbet arayüzünü kullanmaya devam edin. Alternatif olarak, Kodu Göster'i tıklayarak Code görünümünü açın. Bu görünümde kodu doğrudan Firebase Studio çalışma alanında düzenleyebilirsiniz.

3. Uygulamayı test edin: Uygulamanızın malzemeleri tanımlama ve tarif sunma özelliğini test etmek için uygulama önizleme bölmesine farklı yiyecekleri gösteren bir resim yükleyin. Dilerseniz CodeFirebase Studio herkese açık önizlemeleri kullanarak uygulamanızı herkese açık ve geçici olarak paylaşmak için görüntüleme seçeneğini kullanabilirsiniz.

4. Uygulamada hata ayıklama: tıklayarak Code'yi açın Kodu Görüntüle'yi tıklayarak Code görünümünü açın. Burada, uygulamanızı incelemek, hata ayıklamak ve denetlemek için Firebase Studio'ın yerleşik hata ayıklama ve raporlama özelliklerini kullanabilirsiniz. Dilediğiniz zaman App Prototyping agent görünümüne geri dönebilirsiniz.

   başlıklı makaleyi inceleyin.

5. Tekrarlama: Uygulama beklendiği gibi çalışmıyorsa isteminizi hassaslaştırın, sohbet bölmesini kullanarak Gemini'den uygulamayı hassaslaştırmasını isteyin veya kodu doğrudan düzenleyin Code.

(İsteğe bağlı) 3. adım: Uygulamanızı App Hosting ile yayınlayın

Uygulamayı test edip 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 ve Cloud Billing hesabı bağlama konusunda size yol gösterir.

Uygulamanızı Firebase App Hosting'te yayınlamak için:

1. Yeni bir Firebase projesi oluşturmak ve kuruluma başlamak için Yayınla'yı tıklayın.App Hosting Uygulamanızı yayınlama bölmesi görünür.

2. Firebase projesi adımında, sizin için oluşturulan Firebase projesinin adını not edin ve Sonraki'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ş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.

4. İleri'yi tıklayın. Firebase Studio, faturalandırma hesabını Workspace hesabınızla 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. Ardından App Hosting, Google Cloud'te uygulamanız için tümüyle yönetilen bir ortam oluşturur.

5. İlk kullanıma sunma işleminizi oluşturun'u tıklayın. Firebase Studio, App Hosting kullanıma sunma sürecini başlatır. Bu işlemin tamamlanması on dakikayı bulabilir. Arka planda neler olduğu hakkında daha fazla bilgi edinmek için App Hosting derleme süreci başlıklı makaleyi inceleyin.

6. Kullanıma sunma işlemi 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 adı yerine özel bir alan adı (ör. example.com veya app.example.com) kullanmak için Firebase konsoluna özel bir alan adı 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.

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

App Hosting Uygulamaya genel bakış paneli, uygulamanızla ilgili temel metrikleri ve bilgileri sunarak App Hosting'ın yerleşik gözlemlenebilirlik araçlarını kullanarak web uygulamanızın performansını izlemenize olanak tanır. 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ın oluştur'u 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ı) 5. 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:

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

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

  3. Geri dönmek istediğiniz dağıtımın yanındaki Diğer'i more_vert 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:

  1. Firebase Konsolu'nda App Hosting'i 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 more_vert 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ı) 6. adım: Dağıtılan özellikleriniz için Genkit Monitoring'i 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 AI 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. Code görünümünde değilseniz açmak için Kodu Göster'i tıklayın.

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

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

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, 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

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

6. Açmak istediğiniz akışlardan birini 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 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:

1. 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)

2. App Hosting'de uygulamanızı 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ş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:

1. 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'teki yapay zeka yardımı hakkında daha fazla bilgi edinin.