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

Firebase Studio'da Firebase MCP

1. Genel Bakış

Bu codelab'de, Firebase MCP sunucusu ile birlikte Firebase Studio'da App Prototyping aracısını kullanarak Firebase Realtime Database'i 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 Firebase Realtime Database 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. Dosyayı mcp.json olarak adlandırıp 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 Firebase Realtime Database ekleme

Hedef 1: Firebase'i uygulamanıza ekleyin

Prototyper'a geçin. Sohbet arayüzünde, aracıdan proje oluşturmasını isteyin.
```
Create a Firebase project for my app.
```
Temsilcinin Firebase MCP aracını aramasını bekleyin firebase_create_project.Gemini API anahtarı almak için otomatik oluşturma seçeneğini kullanırken 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.
Temsilciden bu projeye bağlanmasını isteyin.
```
Connect my app to my project `spinsync-3y3c6`.
```
Etkin projenizi ayarlayan bir .firebaserc dosyasını gördüğünüzden emin olun. Güncel değilse temsilciden Firebase ortamınızı güncellemesini isteyin.
```
Update my Firebase environment to use this project.
```
Temsilcinin Firebase MCP aracını aramasını bekleyin firebase_update_environment . Ancak aracıyı çağırmadan da bu işlemi yapabilir.Son olarak, Firebase ortamınızda doğru etkin projenin ve kimliği doğrulanmış kullanıcı olarak sizin bulunduğunuzu kontrol edin.
```
Show me my current Firebase environment.
```
Temsilcinin Firebase MCP aracını aramasını bekleyin firebase_get_environment.
Aracıdan Firebase projenizde bir web uygulaması oluşturmasını isteyin.
```
Create a web app in my active Firebase project.
```
Agent'ın firebase_create_app aracını arayıp uygulama kimliğini döndürmesini bekleyin. Aracı bunu yapamazsa simgesini tıklayarak tekrar deneyin veya Firebase Console'da adımı tamamlamak için bu talimatları uygulayın.
```
Use the App ID to get the SDK configuration and add to my app.
```
Aracının firebase_get_sdk_config aracını çağırmasını ve kodunuzu Firebase yapılandırmanızla güncellemesini bekleyin.Aracı, görevin tamamlandığını bildirdikten sonra API anahtarınız ve diğer yapılandırmalar src/lib/firebase.ts içinde görünürse uygulamanızın güvenliğini sağlamak için bunları taşımasını isteyin.
```
Secure my code by moving my Firebase config to the `.env` file.
```

2. hedef: Firebase Realtime Database'i ekleme

Devam edin veya Prototyper'a geçin. Sohbet arayüzünde, temsilciden projenizde Firebase Realtime Database'i ayarlamasını isteyin.
```
Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
```
Bu görüşme dönüşünün sonunda dosya değişikliklerinin bir parçası olarak aracının firebase_init Firebase MCP aracını çağırmasını ve database.rules.json içinde güvenlik kuralları oluşturmasını bekleyin.
```
{
    "rules": {
        ".read": true,
        ".write": 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.
Koda geç'i tıklayın. Terminalde (Shift+Ctrl+C) Firebase Realtime Database'i başlatın.
```
firebase init database
```
Ekrandaki talimatları uygulayın ve varsayılan seçenekleri değiştirmeyin.Ardından, veritabanı örneğiniz için güvenlik kurallarını dağıtın.
```
firebase deploy --only database
```
Prototyper'a geçin. Temsilciden, kullanıcı girişleri için varsayılan veritabanı örneğinizi kullanmasını isteyin.
```
Use my default Realtime Database instance for user entries.
```
Aracının, uygulamanızı veritabanı örneğinize bağlamak için kaynak kodun geri kalanını güncellemesini bekleyin.

3. hedef: Test edin

Seçim çarkı için birkaç yeni giriş oluşturun ve bunların Firebase Console'daki Firebase Realtime Database sayfasında görünmesini izleyin.

Firebase Konsolu'nda Firebase Realtime Database

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.