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

Bu kılavuzda, Gemini yardımıyla tam yığın uygulama geliştirip yayınlamak için App Prototyping agent'ı nasıl kullanacağınız açıklanmaktadır. Doğal dilde bir istem kullanarak Next.js uygulaması oluşturacaksınız. Bu uygulama, giriş yapmış bir kullanıcının sağladığı resimden veya tarayıcı içi kameradan yiyecekleri tanımlayacak ve tanımlanan malzemeleri içeren bir tarif oluşturacak. Kullanıcılar daha sonra tarifi aranabilir bir veritabanında saklamayı seçebilir.

Ardından, uygulamayı Firebase App Hosting platformunda yayınlamadan önce iyileştirip geliştireceksiniz.

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 sayfasını açın.

  2. Yapay zeka ile uygulama prototipi oluşturun alanına aşağıdaki istemi 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.

  3. İsterseniz isteminize eşlik edecek bir resim yükleyebilirsiniz. Örneğin, uygulamanızın kullanmasını istediğiniz renk şemasını içeren bir resim yükleyip Firebase Studio'dan bu şemayı kullanmasını isteyebilirsiniz. Görseller 3 MiB'tan küçük olmalıdır.

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

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

  5. Planı inceleyin. Gerekirse birkaç değişiklik yapın. Örneğin, önerilen uygulama adını veya renk şemasını şu seçeneklerden birini kullanarak değiştirebilirsiniz:

    • Özelleştir'i tıklayın ve şablonu doğrudan düzenleyin. Değişiklikleri yapıp Kaydet'i tıklayın.

    • Sohbet panelindeki Açıklayın... alanına açıklayıcı sorular ve bağlam ekleyin. Ek resimler de yükleyebilirsiniz.

  6. Prototype this app'i (Bu uygulamanın prototipini oluştur) tıklayın.

  7. App Prototyping agent, uygulamanızı kodlamaya başlar.

    • Uygulamanız yapay zeka kullandığı için bir 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 test edebilir, hassaslaştırabilir, hata ayıklayabilir ve yineleyebilirsiniz.

  • Uygulamanızı inceleme ve uygulamanızla etkileşim kurma: Kod oluşturma işlemi tamamlandıktan sonra uygulamanızın önizlemesi gösterilir. Test etmek için önizlemeyle doğrudan etkileşim kurabilirsiniz. Daha fazla bilgi için Uygulamanızı önizleme başlıklı makaleyi inceleyin.

  • Cloud Firestore ve Firebase Authentication ekleme: Yineleme aşamasında App Prototyping agent'dan, 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üzeltme: Çoğu durumda App Prototyping agent, ortaya çıkan hataları düzeltmenizi ister. Düzeltme girişiminde bulunması 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?") kopyalayıp sohbet penceresine yapıştırın ve Gemini'a gönderin.

  • Doğal dil kullanarak test edin ve yineleyin: Uygulamanızı kapsamlı bir şekilde test edin ve kod ile şablonu istediğiniz gibi olana kadar yinelemek için App Prototyping agent ile çalışın.

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

    • Doğrudan Önizleme penceresinde çizim yapmak için Not ekleme simgesi Not ekle'yi tıklayın. App Prototyping agent aracının değiştirmesini istediğiniz şeyi görsel olarak açıklamak için mevcut şekil, resim ve metin araçlarını kullanın ve isteğe bağlı olarak bir yazılı istem ekleyin.

    • Simge seçin Seç'i tıklayarak belirli bir öğeyi seçin 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'te stok resim arayıp seçme seçeneğiniz de vardır.

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

  • Firebase projesi oluşturma: App Prototyping agent, aşağıdaki durumlarda sizin adınıza bir Firebase projesi oluşturur:

    • Gemini API anahtarını otomatik olarak oluşturma
    • Uygulamanızı bir Firebase projesine bağlama isteği gönderme
    • Uygulamanızı Cloud Firestore veya Firebase Authentication gibi Firebase hizmetlerine bağlama konusunda yardım isteyin.
    • 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 aracına kullanmak istediğiniz proje kimliğini girin. Örneğin, "<your-project-id> kimlikli Firebase projesine geçiş yapın."

  • Uygulamayı test etme ve Cloud Firestore veritabanı kurallarını doğrulama: Uygulamanızın malzemeleri tanımlama, tarif oluşturma ve kaydetme becerisini test etmek için uygulama önizleme bölmesine farklı yiyeceklerin gösterildiği bir resim yükleyin.

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

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

  • Doğrudan kodda hata ayıklama ve değişiklik yapma: Kod değiştirme simgesi 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. İstediğiniz zaman Prototyper moduna 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ı inceleyebilir, hatalarını ayıklayabilir ve denetleyebilirsiniz.

    • Kodunuzun içinde satır içi olarak veya Gemini etkileşimli sohbeti kullanarak Yapay Zeka Desteği'ni kullanmaGemini (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 Spark'ı Gemini tıklayın.

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

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

      2. Arka uç bağlantı noktaları'na gidin ve bu bölümü genişletin.

      3. 4000 numaralı bağlantı noktası'na karşılık gelen İşlemler sütununda Yeni pencerede aç'ı tıklayın.

  • Üretken yapay zeka özelliklerinizin 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şim kurmak, istemlerinizi hassaslaştırmak ve daha fazlası için Genkit Developer UI aracını kullanabilirsiniz.

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

    1. Firebase Studio çalışma alanınızdaki terminalden aşağıdaki komutu çalıştırarak Gemini API anahtarınızı kaynak olarak kullanın ve Genkit sunucusunu başlatın:

       npm run genkit:watch

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

    Genkit Developer UI hakkında daha fazla bilgi için Genkit Geliştirici Araçları sayfasını ziyaret edin.

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

Uygulamanızı test ettikten ve çalışma alanınızda memnun kaldıktan sonra Firebase App Hosting ile web'de yayınlayabilirsiniz.

App Hosting kurulumunu yaptığınızda Firebase Studio sizin için bir Firebase projesi oluşturur (Gemini API anahtarı veya diğer arka uç hizmetleri otomatik olarak üretilerek daha önce bir proje oluşturulmadıysa) ve bir Cloud Billing hesabı 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ında, App Prototyping agent çalışma alanıyla ilişkili Firebase projesini gösterir. Henüz bir 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şturun'u tıklayın. Bu işlem, Google Cloud konsolunu açar. Burada yeni bir self servis Cloud Billing hesabı oluşturabilirsiniz. Hesabı oluşturduktan sonra Firebase Studio sayfasına dönün ve Cloud Billing hesabını bağla 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, otomatik olarak üretilmiş bir Gemini API anahtarı oluşturduğunuzda veya Yayınla'yı tıkladığınızda oluşturulur.

  5. Hizmetleri ayarla'yı tıklayın. App Prototyping agent, Firebase hizmetlerinin temel hazırlığını yapmaya başlar.

  6. Şimdi yayınla'yı tıklayın. Firebase Studio, Firebase hizmetlerini kurar ve ardından App Hosting kullanıma sunma işlemini 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ında bir URL ve App Hosting gözlemlenebilirlik tarafından desteklenen uygulama analizleri gösterilir. Firebase tarafından oluşturulan alan yerine özel alan (ör. example.com veya app.example.com) kullanmak için Firebase konsolunda özel alan ekleyebilirsiniz.

App Hosting hakkında daha fazla bilgi için App Hosting ve işleyiş şeklini anlama başlıklı makaleyi inceleyin.

(Önerilir) 4. adım: Yayınlanan uygulamanızı test edin

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

Cloud Firestore veritabanınız için dizin oluşturma

Uygulamanızı Cloud Firestore ürününe dağıttığınızda dizinler otomatik olarak oluşturulmaz. Bu nedenle, yayınladıktan sonra sorgularınız için dizin oluşturmanız gerekebilir.

Bu durum, hata mesajlarında veya tarayıcınızın geliştirici konsolunda gösterilebilir.

Yayınladıktan sonra dizin oluşturmak için:

  1. Yayınlanmış bir uygulamadan: Uygulamaya genel bakış bölmesinde (görünmüyorsa Yayınla'yı tıklayın) Uygulamanızı ziyaret edin bağlantısını bulup tıklayın.

    Firebase Studio önizlemesinden: Tarayıcınızın geliştirici konsolunu açın ve Cloud Firestore tarafından oluşturulan 200 hata mesajını bulun.

  2. Uygulamanızdaki tüm akışları test edin. "Yemek tarifleri yüklenirken hata oluştu. Sorgu için dizin gerekiyor. Buradan oluşturabilirsiniz:" ifadesi ve Firebase konsolunun bağlantısı gösterilir.

  3. Bağlantıyı takip ederek Firebase konsoluna gidin. Önerilen bir dizin gösterilir.

  4. Önerilen dizini kabul etmek için Kaydet'i tıklayın.

  5. Uygulamanıza geri dönün ve sayfayı yeniden yükleyin.

  6. Gerektiğinde dizin eklemek için uygulamanızdaki tüm akışları test etmeye devam edin.

Cloud Firestore uygulamasında dizinleri yönetme başlıklı makaleden daha fazla bilgi edinebilirsiniz.

Firebase konsolunda Cloud Firestore ve Firebase Authentication verilerini 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 Build (Derleme) > Firestore Database'i (Firestore Veritabanı) 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 Build (Derleme) > Authentication'ı (Kimlik Doğrulama) 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.

Cloud Firestore kurallarını üretim ortamında test etme

Uygulamanızı yayınladıktan sonra Cloud Firestore güvenlik kurallarınızı üretim ortamınızda tekrar test etmeniz gerekir. Bu sayede verilerinize yetkili kullanıcılar erişebilir ve verileriniz yetkisiz erişime karşı korunur.

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 kalıplarını (okuma, yazma, silme) tetikleyen işlemler gerçekleştirin. Bu gerçek dünya testi, kurallarınızın uygulamada doğru şekilde uygulandığını doğrulamaya yardımcı olur.

  • Kurallar Alanı: Hedeflenen kontroller için Firebase konsolundaki Kurallar Alanı'nı kullanın. Bu araç, üretim kurallarınızı kullanarak Cloud Firestore veritabanınızda isteklerin (okuma, yazma, silme) simülasyonunu yapmanıza olanak tanır. Kurallarınızın erişime izin verip vermediğini veya erişimi reddedip reddetmediğini görmek için kullanıcı kimlik doğrulama durumunu, verilerin yolunu ve işlem türünü belirtebilirsiniz.

  • Birim testi: Daha kapsamlı testler için güvenlik kurallarınıza yönelik birim testleri yazabilirsiniz. Firebase Local Emulator Suite tarafından desteklenen Firebase Studio önizleme arka ucu, bu testleri yerel olarak çalıştırmanıza ve üretim kurallarınızın davranışını simüle etmenize olanak tanır. Bu, karmaşık kural mantığını doğrulamak ve çeşitli senaryoların kapsamını onaylamak için etkili bir yöntemdir. Dağıtımdan sonra, emülatörü kullanan birim testlerinizin beklendiği gibi çalıştığını ve tüm senaryoları kapsadığını tekrar kontrol etmeniz gerekir.