Bu sayfa, Cloud Translation API ile çevrilmiştir.

Firebase Studio'da Firebase MCP

1. Genel Bakış

Bu codelab'de, Firebase Studio'da Firebase MCP sunucusu ile birlikte App Prototyping aracısını kullanarak Firestore'u kullanan bir tam yığın web uygulaması oluşturma alıştırması yapacaksınız.

Son uygulamanın animasyonlu GIF'i

Neler öğreneceksiniz?

Uygulama Prototipi Oluşturma aracısını kullanarak statik web uygulaması oluşturma
Firebase MCP sunucusunu ayarlama
Firebase MCP'yi kullanarak Firestore'u ekleme

Gerekenler

Google Chrome gibi istediğiniz bir tarayıcı
Firebase projenizin oluşturulması ve yönetilmesi için bir Google Hesabı

2. Uygulama Prototipleme aracını kullanarak uygulamanızı oluşturma

Uygulama Prototipleme aracısı, uygulamanızı oluşturmak için Firebase'de Gemini'ı kullanır. Aynı istemler kullanıldığında bile sonuçlar farklı olabilir. Takılırsanız bu codelab'in çeşitli kontrol noktalarında laboratuvara devam edebilmek için çalışma alanınıza ekleyebileceğiniz bir dizi dosya sağladık.

Google Hesabınıza giriş yapın, Google Geliştirici Programı'na katılın ve Firebase Studio'yu açın.
Yapay zeka ile uygulama prototipi oluşturun alanına uygulamanın açıklamasını girin:
```
An app for a picker wheel that allows custom input.
```
İstemi İyileştir'i tıklayın. İyileştirilmiş istemi inceleyin.
Yapay zeka ile prototip oluşturun'u tıklayın.
Önerilen uygulama planını inceleyin. Düzenlemek için Özelleştir'i tıklayın.
Kaydet'i tıklayın.
Plan, güncellemelerinizi eklemeyi tamamladığında Bu Uygulamanın Prototipini Oluştur'u tıklayın.
Planınızda yapay zeka öğeleri varsa aracı, Gemini Gemini anahtarı girmenizi ister. Kendi Gemini API anahtarınızı ekleyin veya Gemini API anahtarı oluşturmak için Otomatik oluştur'u tıklayın. Otomatik oluştur'u tıklarsanız Firebase Studio bir Firebase projesi oluşturur ve sizin için bir Gemini API anahtarı oluşturur.
Uygulama Prototipleme aracısı, uygulamanızın ilk sürümünü oluşturmak için planı kullanır. İşlem tamamlandığında, uygulamanızın önizlemesi bir Gemini Chat arayüzüyle birlikte gösterilir. Uygulamanızı inceleyip test etmek için biraz zaman ayırın. Hatalarla karşılaşırsanız temsilcinin kendi hatalarını düzeltmesine izin vermek için sohbette Hatayı Düzelt'i tıklayın.

3. Firebase Studio'da Firebase MCP'yi ayarlama

Firebase MCP sunucusu, Firebase Authentication, Cloud Firestore ve Firebase Data Connect dahil olmak üzere Firebase hizmetlerinden veri ayarlamak, yönetmek ve çekmek için aracının çağırabileceği araçlar sağlayarak Uygulama Prototipi Oluşturma aracısının özelliklerini genişletir. Bunu nasıl ayarlayacağınız aşağıda açıklanmıştır.

Firebase Studio'da Koda Geç'i tıklayarak Kod görünümünü açın.
Terminalde (Shift+Ctrl+C), ekrandaki talimatları uygulayarak ve tüm varsayılan seçenekleri olduğu gibi bırakarak Firebase hesabınızda oturum açmak için aşağıdaki komutu çalıştırın:
```
firebase login --no-localhost
```
Gezgin'de (Ctrl+Shift+E) .idx klasörünü sağ tıklayın ve Yeni dosya'yı seçin. Dosyaya mcp.json adını verin ve Enter tuşuna basın.

Sunucu yapılandırmalarını .idx/mcp.json dosyasına ekleyin.

{
    "mcpServers": {
        "firebase": {
            "command": "npx",
            "args": [
                "-y",
                "firebase-tools@latest",
                "experimental:mcp"
            ]
        }
    }
}

Firebase MCP sunucusuna bağlı olduğunuzu doğrulayın. Çıkış panelinde, doğru kanal olarak "Gemini" seçilmiş şekilde benzer günlük girişleri görmeniz gerekir. Gemini günlüklerinden MCPManager

4. Firebase MCP'yi kullanarak Firestore'u ekleme

Hedef 1: Firebase'i uygulamanıza ekleyin

Prototyper'a geçin. Sohbet arayüzünde, aracıdan Firebase projesi oluşturmasını isteyin.
```
Create a Firebase project.
```
Gemini API anahtarı almak için otomatik oluşturma seçeneğini kullanırken zaten bir Firebase projesi oluşturduysanız bu adımı atlayın. Proje kimliğiniz, ekranınızın sol üst köşesindeki çalışma alanı adınızın yanında görünür. Alternatif olarak, temsilciden projelerinizi listelemesini isteyin ve kullanmak istediğiniz projeyi not alın.
```
List my Firebase projects.
```
Temsilcinin Firebase MCP aracını aramasını bekleyin firebase_list_projects.
Aracıdan yerel geliştirme için Firebase projenizi kullanmasını isteyin.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Varsayılan Firebase projenizi ayarlayan bir .firebaserc dosyası gördüğünüzden emin olun. Bu dosya, Firebase CLI'ya hangi Firebase projesinin kullanılacağını bildirir. Bu dosyayı görmüyorsanız özellikle bu dosyayı tekrar isteyin.
Aracıdan Firebase projenizde bir web uygulaması oluşturmasını isteyin.
```
Create a web app in my Firebase project.
```
Müşteri temsilcisinin aracı firebase_create_app aramasını bekleyin. Ajan bunu yapamazsa tekrar deneyin veya adımı Firebase Console'da tamamlamak için bu talimatları uygulayın.Ajan, aracı firebase_get_sdk_config olarak adlandırabilir ve projenizi Firebase web uygulamanıza bağlamak için gerekli dosyaları oluşturabilir. Ajan bunu yapmazsa yapmasını isteyin.
```
Add my Firebase SDK configuration to my app.
```
Temsilci, API anahtarınızı ve diğer yapılandırmaları genellikle doğrudan src/lib/firebase.ts içine yerleştirir. Uygulamanızın güvenliğini sağlamak için bu kodları uygulama kodunuzun dışına taşımasını isteyin.
```
Secure my code by moving my Firebase config to my `.env` file.
```

2. hedef: Firestore'u ekleyin

Koda geç'i tıklayın. Sohbet arayüzünde, temsilciden uygulamanızda Firestore'u kullanmasını isteyin.
```
Use Firestore for user entries. Give anyone read and write access.
```
Aracının, kullanıcı girişleri için yerel depolama yerine Firestore'u kullanmak üzere kaynak kodunuzu güncellemesini ve Firestore güvenlik kuralları oluşturmasını bekleyin. Firebase MCP aracını firebase_init çağırabileceğini veya Firestore'u başlatmak için terminalde firebase init komutunu çalıştırmanızı isteyebileceğini unutmayın. Her durumda, devam etmeden önce aşağıdaki içeriğe sahip firestore.rules dosyasını gördüğünüzden emin olun.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
Burada, herkese veritabanınızda okuma ve yazma erişimi verilir. Bu Code Lab'in dışında, veritabanlarınızı her zaman güvenli hale getirmeniz gerekir. Bu konu hakkında daha fazla bilgiyi dokümanlarımızda bulabilirsiniz.
Terminalde (Shift+Ctrl+C), temsilci daha önce yapmanızı istemediyse Firestore'u başlatın.
```
firebase init firestore
```
Ekrandaki talimatları uygulayın ve varsayılan seçenekleri değiştirmeyin. Önceki adımdaki güvenlik kurallarının üzerine yazmayın.Ardından, veritabanı örneğiniz için güvenlik kurallarını dağıtın.
```
firebase deploy --only firestore
```
Bu işlem, sizin için bir Firestore veritabanı örneği sağlar.

3. hedef: Test edin

Uygulamanızı yeniden yükleyin, seçme çarkınızda girişler oluşturup silin ve bu güncellemeleri Firebase Console'daki Firestore sayfasında izleyin.

Studio ve Console'da uygulama

5. Sonuç

Tebrikler! Firebase MCP ile App Prototyping aracısını kullanarak tam yığınlı bir web uygulamasını başarıyla oluşturdunuz. Firebase MCP sunucusu tarafından sunulan diğer araçları denemekten ve uygulamanızın yapabileceklerini genişletmekten çekinmeyin.