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. Bir resimdeki veya giriş yapmış bir kullanıcının sağladığı tarayıcı içi kameradaki yiyecekleri 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 kullanacaksınız. Kullanıcılar daha sonra tarifi aranabilir bir veritabanında saklamayı seçebilir.

Ardından, uygulamayı iyileştirip geliştirerek Firebase App Hosting üzerinde yayınlarsı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 simgesini 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ükleyebilir ve Firebase Studio'ya 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.

    Uygulama prototipi oluşturma aracısı, isteminize göre bir uygulama planı oluşturur ve önerilen uygulama adını, gerekli özellikleri ve stil yönergelerini döndürü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 prototipi oluşturma aracısı, 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.

  • Cloud Firestore ve Firebase Authentication ekleme: Yineleme aşamasında, App Prototyping agent'den Cloud Firestore ve Firebase Authentication kullanarak kullanıcı kimlik doğrulaması ve veritabanı eklemesini isteyebilirsiniz. Örneğin, kullanıcılara aşağıdaki gibi bir istemle tarifleri kaydetme ve indirme olanağı sunun:

    Add user authentication to the app. Authenticated users can:

  - Download the recipe and its generated image as a PDF (Print).

  - Save the recipe as public or private and make accessible to a search
    feature. For now, just save the text, not the image, to the database.

Important: Only authenticated users can download the PDF.

  • 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 edin ve yineleyin: Uygulamanızı kapsamlı bir şekilde test edin ve kod ile taslak üzerinde yineleme yaparak App Prototyping agent ile çalışın. Bu yineleme, kod ve taslaktan memnun kalana kadar devam eder.

    Prototyper view, 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 ne şekilde 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 için Simge seçin Seç'i tıklayın ve App Prototyping agent için talimatları girin. 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.

  • Firebase projesi oluşturma: Uygulama Prototipi Oluşturma aracısı, siz şu işlemleri yaptığınızda sizin adınıza bir Firebase projesi sağlar:

    • Gemini API anahtarını otomatik olarak oluşturma
    • Uygulamanızı bir Firebase projesine bağlamayı isteyin
    • Uygulamanızı Firebase hizmetlerine bağlama konusunda yardım isteyin. Örneğin: Cloud Firestore veya Firebase Authentication
    • Yayınla düğmesini tıklayın ve Firebase App Hosting ayarlarını yapın.

    Çalışma alanınıza bağlı Firebase projesini değiştirmek için App Prototyping agent istemine bunun yerine kullanmak istediğiniz proje kimliğini girin. Örneğin, "<your-project-id> kimlikli Firebase projesine geç."

  • Uygulamayı test etme ve Cloud Firestore veritabanı kurallarını doğrulama: Uygulama önizleme bölmesinde, uygulamanızın malzemeleri tanımlama ve tarif oluşturup kaydetme özelliğini test etmek için farklı yemeklerin gösterildiği bir resim yükleyin.

    Farklı kullanıcılar olarak oturum açıp yemek tarifleri oluşturun: Kimliği doğrulanmış kullanıcıların özel yemek tariflerini ve tariflerini görebildiğinden, tüm kullanıcıların ise herkese açık yemek tariflerini görebildiğinden emin olun.

    App Prototyping agent'dan Cloud Firestore eklemesini istediğinizde, sizin için Cloud Firestore veritabanı kurallarını yazar ve dağıtır. Firebase konsolundaki kuralları inceleyin.

  • 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:

    • Firebase Studio'nın uygulamanızı incelemek, hatalarını ayıklamak ve denetlemek için yerleşik hata ayıklama ve raporlama özelliklerini kullanın.

    • Kodunuzun içinde Gemini veya Gemini etkileşimli sohbeti kullanarak yapay zeka yardımı (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 en altındaki spark'ı Gemini tıklayın.

      'a dönmek için

    • Veritabanı ve kimlik doğrulama verilerini görüntülemek için Firebase Local Emulator Suite simgesine erişin. Çalışma alanınızda emülatörü açmak için:

      1. Kod değiştirme simgesi Koda Geç'i tıklayın ve Firebase Studio uzantısını açın (MacOS'te Ctrl+',Ctrl+' veya Cmd+',Cmd+').

      2. Arka uç bağlantı noktaları'na gidin ve genişletin.

      3. Port 4000'e karşılık gelen İşlemler sütununda Yeni pencerede aç'ı tıklayın.

  • Üretken yapay zeka özelliğinizin performansını test etme ve ölçme: Genkit yapay zeka akışlarınızı çalıştırmak, test etmek, hatalarını ayıklamak, farklı modellerle etkileşim kurmak, istemlerinizi iyileştirmek ve daha fazlası için Genkit Developer UI'yi 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 Geliştirici Kullanıcı Arayüzü hakkında daha fazla bilgiyi Genkit Geliştirici Araçları sayfasında bulabilirsiniz.

(İ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ı veya diğer arka uç hizmetleri 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 projesini gösterir. Firebase projesi yoksa App Prototyping agent 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.

    App Hosting

  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 ayarlar ve ardından App Hosting dağıtımını başlatır. 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) 4. adım: Yayınlanan uygulamanızı test edin

Yayınlama işlemi tamamlandığında ve uygulamanız Firebase'e dağıtıldığında, Cloud Firestore ve Firebase Authentication üretimde test edilmeye hazır olur.

Cloud Firestore ve Firebase Authentication verilerini Firebase konsolunda görüntüleme

Yayınladıktan sonra uygulamanızdaki canlı verileri Firebase konsolunda görüntüleyebilirsiniz.

  • Canlı Cloud Firestore veritabanınızı görüntülemek için Firebase konsolunu açın ve gezinme menüsünden Oluştur > Firestore Veritabanı'nı seçin.

    Buradan depolanan verileri inceleyebilir, güvenlik kurallarınızı görüntüleyip test edebilir ve dizinler oluşturabilirsiniz. Daha fazla bilgiyi Cloud Firestore adresinde bulabilirsiniz.

  • Canlı Firebase Authentication verilerinizi görüntülemek için Firebase konsolunu açın ve gezinme menüsünden Oluştur > Kimlik Doğrulama'yı seçin.

    Buradan kimlik doğrulama yapılandırmanızı ve uygulama kullanıcılarınızı inceleyebilirsiniz. Daha fazla bilgiyi Firebase Authentication adresinde bulabilirsiniz.

Üretimde Cloud Firestore kurallarını test etme

Uygulamanızı yayınladıktan sonra Cloud Firestore güvenlik kurallarınızı üretim ortamınızda tekrar test etmeniz gerekir. Bu, verilerinizin yetkili kullanıcılar tarafından erişilebilir olmasını ve yetkisiz erişime karşı korunmasını sağlar.

Kurallarınızı aşağıdaki yöntemlerin tümünü kullanarak test edebilirsiniz:

  • Uygulama Testi: Dağıtılan uygulamanızla etkileşim kurarak farklı kullanıcı rolleri veya durumları için çeşitli veri erişim modellerini (okuma, yazma, silme) tetikleyen işlemler gerçekleştirin. Bu gerçek dünya testi, kurallarınızın pratikte doğru şekilde uygulandığını doğrulamanıza yardımcı olur.

  • Kurallar oyun alanı: Hedeflenen kontroller için Firebase konsolundaki Kurallar oyun alanını kullanın. Bu araç, üretim kurallarınızı kullanarak Cloud Firestore veritabanınızda istekleri (okuma, yazma, silme) simüle etmenize olanak tanır. Kurallarınızın erişime izin verip vermediğini veya erişimi reddedip etmediğini görmek için kullanıcı kimlik doğrulama durumunu, verilere giden yolu ve işlem türünü belirtebilirsiniz.

  • Birim testi: Daha kapsamlı testler için güvenlik kurallarınızla ilgili birim testleri yazabilirsiniz. Firebase Studio Firebase Local Emulator Suite tarafından desteklenen arka uç önizlemesi, üretim kurallarınızın davranışını simüle ederek bu testleri yerel olarak çalıştırmanıza olanak tanır. Bu, karmaşık kural mantığını doğrulamak ve çeşitli senaryolarda kapsamı onaylamak için kullanılan sağlam bir yöntemdir. Dağıtımdan sonra, emülatörü kullanarak yaptığınız birim testlerinin beklendiği gibi çalıştığını ve tüm senaryoları kapsadığını tekrar kontrol etmeniz gerekir.