Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Yapay zeka ile yapılacaklar listesi web uygulamanızı başlatma

1. Giriş

Genel Bakış

Yapay zeka ile geliştirme yolculuğuna bugün nereden başlayabilirsiniz? Çoğumuz için bu süreç basit bir sorgu veya prototiple başlar. Google AI Studio, Gemini modelleri tarafından desteklenen kod oluşturma özelliğini kullanarak tam yığın web uygulamaları tasarlamanıza, test etmenize ve oluşturmanıza olanak tanıyan güçlü bir Build Mode (Genellikle "vibe coding" olarak adlandırılır) sunar.

Bu codelab'de, kalıcı depolama için Firestore veritabanı ve kullanıcı girişleri için Firebase Authentication ile ortak kullanılabilen bir yapılacaklar listesi uygulaması oluşturacaksınız. AI Studio aracısı, tüm arka uç hizmetlerini yapılandırır ve ön uç ile veritabanı etkileşim kodunu yazar. Uygulama hazır olduğunda tek bir tıklamayla doğrudan Cloud Run'a dağıtabilirsiniz.

Yapacaklarınız

Google AI Studio'ya, ortak çalışmaya dayalı bir yapılacaklar listesi web uygulaması prototipi oluşturması için istem gönderin.
Firestore veritabanı sağlamak ve Google ile oturum açma kimlik doğrulamasını ayarlamak için Firebase entegrasyonunu yapılandırın ve etkinleştirin.
Uygulamayı etkileşimli önizleme korumalı alanında test edin.
Uygulamayı doğrudan Google AI Studio kullanıcı arayüzünden Cloud Run'a dağıtın.

Neler öğreneceksiniz?

Google AI Studio'nun Build (Oluştur) modunu kullanarak doğal dilde tam yığın hizmetinin hızlı prototipini oluşturma
Google AI Studio'nun Firebase Firestore ve Authentication entegrasyonlarını otomatik olarak nasıl yapılandırdığı.
AI Studio uygulamanızı Cloud Run'da sunucusuz bir container olarak dağıtma
Firebase konsolunda veritabanı kayıtlarını ve güvenlik durumunu inceleme

2. Proje Ayarları

AI Studio'yu kullanmaya başlamadan önce hesap durumunuzu ve ön koşulları doğrulayın.

Google Hesabı ve Kademe Bilgileri

Google Hesabınız yoksa Google Hesabı oluşturun.
- İpucu: Mümkünse bu laboratuvar için kişisel bir Google Hesabı kullanın. Grup, kurumsal veya okul hesapları, deneysel özellikleri ya da bulut entegrasyonlarını devre dışı bırakan Workspace politikalarını zorunlu kılabilir.
Dağıtımlarla ilgili fatura ayrıntılarını inceleyin:
- Google Cloud Başlangıç Katmanı: Tam Google Cloud faturalandırma hesabı oluşturmadan, belirli bir bölgede iki adede kadar tam yığın uygulama yayınlamanıza olanak tanır.
- Standart dağıtım: Mevcut ücretli bir Google Cloud projesine bağlanır ve depolama sınırlarını, CPU kaynaklarını ve API'leri genişletir.

3. AI Studio'nun Build Modu'nda Yapılacaklar Uygulaması Oluşturma

Uygulama kabuğunu oluşturalım ve yapay zeka kodlama asistanından güvenlik ve kalıcılık katmanları oluşturmasını isteyelim.

Google AI Studio Uygulamaları paneline gidin ve Yeni Uygulama'yı tıklayın.

Sohbet istemi kutusuna, yapılacaklar listesi uygulamanızın açıklamasını girin:

Build a collaborative to-do list application using Firebase as a
backend. Users must be able to securely sign in using Google Sign-In,
view their personal tasks, add new task items, toggle status as
completed, and delete tasks. The database must isolate tasks so users
can only view and modify their own records.

Uygulama oluşturma sürecini başlatmak için Oluştur'u tıklayın.

AI Studio aracısı, veritabanı depolama ve güvenli kullanıcı girişi ihtiyacını algıladığında otomatik Firebase yapılandırma akışını tetikler.

Yaklaşık bir dakika sonra, çalışma alanında Firebase'i etkinleştir entegrasyon kartı gösterilir.
Hizmet şartlarını onaylamak ve kabul etmek için Firebase'i etkinleştir düğmesini tıklayın.
Ajan, arka plan kurulumunu gerçekleştirir. Perde arkası:
- Bir Firestore veritabanı örneği sağlanır.
- Firebase Authentication, Google ile oturum açma özelliği etkinleştirilmiş olarak etkinleştirilir.
- Bir hizmet hesabı yapılandırması oluşturulur (ör. API kimlik bilgilerini içeren src/lib/firebase.ts oluşturma).
- Varsayılan güvenlik sınırlarını (kullanıcı izolasyonu kuralları) içeren bir firestore.rules eklenir.

4. Test etme ve tekrarlama

Hizmeti canlı olarak başlatmadan önce etkileşimli önizlemede doğrulama kontrolleri yapın.

Google AI Studio'da önizleme bölmesini açın.
Sandbox Google ile oturum açma kimlik doğrulamasını tetiklemek için Giriş düğmesini tıklayın.
- Hataları düzeltmeyle ilgili not: Oluşturma veya test sırasında, güvenlik kurallarının yanlış hizalanması nedeniyle zaman zaman çalışma zamanı sorunları, derleme hataları veya Firestore izni hatalarıyla karşılaşabilirsiniz. Bu durumda AI Studio, sohbette Düzelt düğmesini gösterir. Böylece, aracıdan sorunu otomatik olarak teşhis etmesini ve onarmasını isteyebilirsiniz.
Giriş yaptıktan sonra birkaç görev ekleyin (ör. "Cloud Run dokümanlarını incele", "Codelab'i tamamla").
İstemci tarafı işleyicilerin ve veritabanı durumunun doğru şekilde güncellendiğinden emin olmak için bazı görevleri tamamlandı olarak değiştirin ve bir görevi silin.
Stili veya davranışı değiştirmek istiyorsanız sohbet penceresinden aracıyı yönlendirin. Örneğin:
- "Could you style the interface using Tailwind CSS, and add a dark mode toggle button?"
- "Show a count of remaining incomplete tasks at the footer of the task list."
Ajanın kod tabanını güncellemesini bekleyin ve güncellemeleri görmek için önizleme tarayıcısını kontrol edin.

5. Cloud Run'a dağıt

Prototipiniz tam olarak işlevsel hale geldiğinde Cloud Run'da herkese açık bir hizmet olarak dağıtın.

Dağıtım sihirbazını başlatmak için Google AI Studio'nun sağ üst köşesindeki Yayınla düğmesini tıklayın.
Google Cloud projenizi yapılandırmak için Başlayın'ı tıklayın.
- Hedef Google Cloud projesi açılır listesinin, çalışma alanınızla ilişkilendirdiğiniz projeyle eşleştiğini doğrulayın.
- AI Studio, Cloud Run örneği için otomatik olarak benzersiz bir hizmet tanımlayıcısı oluşturur.
İlk kez dağıtım yapıyorsanız ve standart Google Cloud parametrelerini kullanıyorsanız kuruluş türü belirtmeniz ve faturalandırma ayrıntılarını girmeniz istenebilir.
Uygulamayı Yayınla'yı tıklayın.
Kapsayıcı derleme, kapsayıcı kaydı ve hizmet dağıtımı adımları arka planda gerçekleşir. Bu işlem genellikle 2-4 dakika içinde tamamlanır.
Dağıtım tamamlandığında oluşturulan Uygulama URL'sini kopyalayın ve bir tarayıcı sekmesinde canlı uygulama bağlantısını ziyaret edin.
Canlı web uygulamasını tarayıcınızda test edin.

6. Firebase konsolunda inceleme

Veri şemalarının ve kullanıcıların nasıl izlendiğini görmek için arka planda neler olduğuna göz atın.

Firebase konsoluna gidin.
Projenizi seçin (AI Studio etiketi veya manuel olarak bağlanmış proje kimliğiniz olmalıdır).
Soldaki gezinme bölmesinde Build > Firestore Database'i (Oluştur > Firestore Veritabanı) seçin:
- Uygulamanız tarafından oluşturulan veritabanı koleksiyonlarını ve dokümanlarını görüntüleyin.
- Her belgenin, etkin kullanıcı kimlik doğrulama kimlik bilgilerine uygun bir sahip kimliğine sahip olduğunu doğrulayın.
Okuma ve yazma izinlerini doğrulanmış doküman sahipleriyle sınırlayan otomatik olarak oluşturulmuş güvenlik yönergelerini incelemek için Firestore panelinde Güvenlik sekmesini seçin.
Giriş testleriniz sırasında doldurulan etkin kullanıcı kimlik bilgilerinin listesini görmek için Güvenlik > Kimlik doğrulama'ya gidin.

7. Temizleme

Öngörülemeyen faturalandırma ücretlerinden kaçınmak veya Workspace kaynaklarınızı temizlemek için:

Google AI Studio'da Uygulamalar sayfasına gidin.
Uygulamanızı ızgarada veya listede bulun.
Uygulama durumunu silmek ve hizmetin Cloud Run'daki yayınını kaldırmak için çöp kutusu simgesini tıklayın.
Standart bir proje kullanarak dağıtım yaptıysanız ve tüm kaynakları tamamen kapatmak istiyorsanız Google Cloud Console Proje Ayarları'na gidip temel alınan projeyi silin.

8. Sonuç

Tebrikler! Doğrudan Google AI Studio'dan ortak çalışmaya dayalı bir full-stack web uygulaması tasarladınız, geliştirdiniz ve dağıttınız.

Bir geliştirici laboratuvarını tamamlayarak rozet kazanmak ve yolculuğunuza devam etmek için başka bir laboratuvar bulmak üzere goo.gle/builders adresine gidin.