Halaman ini diterjemahkan oleh Cloud Translation API.

MCP Firebase di Firebase Studio

1. Ringkasan

Dalam codelab ini, Anda akan berlatih menggunakan agen Pembuatan Prototipe Aplikasi bersama dengan server MCP Firebase di Firebase Studio untuk membuat aplikasi web full-stack yang menggunakan Firestore.

GIF animasi aplikasi akhir

Yang akan Anda pelajari

Membuat aplikasi web statis menggunakan App Prototyping agent
Menyiapkan server Firebase MCP
Menambahkan Firestore menggunakan Firebase MCP

Yang Anda butuhkan

Browser pilihan Anda, seperti Google Chrome
Akun Google untuk pembuatan dan pengelolaan project Firebase Anda

2. Membuat aplikasi Anda menggunakan agen Pembuatan Prototipe Aplikasi

Agen Pembuatan Prototipe Aplikasi menggunakan Gemini di Firebase untuk membangun aplikasi Anda. Meskipun menggunakan perintah yang identik, hasilnya dapat bervariasi. Jika Anda mengalami kesulitan, kami telah menyediakan serangkaian file yang dapat Anda tambahkan ke ruang kerja untuk melanjutkan lab di beberapa titik pemeriksaan di sepanjang codelab ini.

Login ke Akun Google Anda, bergabunglah dengan Program Developer Google, dan buka Firebase Studio.
Di kolom Buat prototipe aplikasi dengan AI, masukkan deskripsi aplikasi:
```
An app for a picker wheel that allows custom input.
```
Klik Improve Prompt. Tinjau perintah yang ditingkatkan.
Klik Prototype with AI.
Tinjau Cetak Biru Aplikasi yang disarankan. Klik Sesuaikan untuk mengeditnya.
Klik Save.
Setelah blueprint selesai menggabungkan pembaruan Anda, klik Prototype this App.
Jika cetak biru Anda berisi elemen AI, agen akan meminta kunci Gemini Gemini kepada Anda. Tambahkan kunci Gemini API Anda sendiri atau klik Buat otomatis untuk membuat kunci Gemini API. Jika Anda mengklik Auto-generate, Firebase Studio akan membuat project Firebase dan menghasilkan kunci Gemini API untuk Anda.
Agen Pembuatan Prototipe Aplikasi menggunakan cetak biru untuk membuat versi pertama aplikasi Anda. Setelah selesai, pratinjau aplikasi Anda akan muncul bersama antarmuka chat Gemini. Luangkan waktu untuk meninjau dan menguji aplikasi Anda. Jika Anda mengalami error, klik Perbaiki Error dalam chat untuk mengizinkan agen memperbaiki errornya sendiri.

3. Menyiapkan MCP Firebase di Firebase Studio

Server MCP Firebase memperluas kemampuan agen Pembuatan Prototipe Aplikasi dengan menyediakan alat yang dapat dipanggil agen untuk menyiapkan, mengelola, dan menarik data dari layanan Firebase, termasuk Firebase Authentication, Cloud Firestore, dan Firebase Data Connect. Berikut cara menyiapkannya.

Di Firebase Studio, klik Switch to Code untuk membuka tampilan Kode.
Di terminal (Shift+Ctrl+C), jalankan perintah berikut untuk login ke akun Firebase Anda, ikuti petunjuk di layar, dan biarkan semua opsi default:
```
firebase login --no-localhost
```
Dari Explorer (Ctrl+Shift+E), klik kanan folder .idx, lalu pilih New file. Beri nama file mcp.json, lalu tekan Enter.

Tambahkan konfigurasi server ke .idx/mcp.json.

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

Verifikasi bahwa Anda terhubung ke Server MCP Firebase. Anda akan melihat entri log serupa di panel Output, dengan "Gemini" dipilih sebagai saluran yang tepat. MCPManager dari log Gemini

4. Menambahkan Firestore menggunakan Firebase MCP

Tujuan 1: Menambahkan Firebase ke aplikasi Anda

Beralih ke Prototyper. Di antarmuka chat, minta agen untuk membuat project Firebase.
```
Create a Firebase project.
```
Lewati langkah ini jika Anda sudah membuat project Firebase saat menggunakan opsi buat otomatis untuk mendapatkan Kunci Gemini API. Project ID Anda akan muncul di samping nama ruang kerja Anda di sudut kiri atas layar. Atau, minta agen untuk mencantumkan project Anda dan catat project yang ingin Anda gunakan.
```
List my Firebase projects.
```
Harapkan agen memanggil alat Firebase MCP firebase_list_projects.
Minta agen untuk menggunakan project Firebase Anda untuk pengembangan lokal.
```
Use `spinsync-3y3c6` as my Firebase project in my local environment.
```
Pastikan Anda melihat file .firebaserc yang menetapkan project Firebase default Anda. File ini memberi tahu Firebase CLI project Firebase mana yang akan digunakan. Jika Anda tidak melihat file ini, minta lagi secara khusus file ini.
Minta agen untuk membuat aplikasi web di project Firebase Anda.
```
Create a web app in my Firebase project.
```
Harapkan agen memanggil alat firebase_create_app. Jika agen gagal melakukannya, coba lagi, atau ikuti petunjuk ini untuk menyelesaikan langkah di Firebase Console.Agen dapat melanjutkan untuk memanggil alat firebase_get_sdk_config dan membuat file yang diperlukan untuk menghubungkan project Anda ke aplikasi web Firebase. Jika tidak, minta agen untuk melakukannya.
```
Add my Firebase SDK configuration to my app.
```
Agen sering kali memasukkan kunci API dan konfigurasi lainnya langsung ke src/lib/firebase.ts. Minta Gemini untuk memindahkannya dari kode aplikasi Anda agar aplikasi Anda tetap aman.
```
Secure my code by moving my Firebase config to my `.env` file.
```

Sasaran 2: Tambahkan Firestore

Beralih ke Kode. Di antarmuka chat, minta agen untuk menggunakan Firestore di aplikasi Anda.
```
Use Firestore for user entries. Give anyone read and write access.
```
Harapkan agen untuk memperbarui kode sumber Anda agar menggunakan Firestore, bukan penyimpanan lokal untuk entri pengguna, dan membuat aturan keamanan Firestore. Perhatikan bahwa perintah ini dapat memanggil alat MCP Firebase firebase_init atau meminta Anda menjalankan perintah firebase init di terminal untuk menginisialisasi Firestore. Apa pun itu, pastikan Anda melihat file firestore.rules dengan konten berikut sebelum melanjutkan.
```
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}
```
Di sini Anda memberikan akses baca dan tulis ke database Anda kepada semua orang. Di luar codelab ini, Anda harus selalu mengamankan database Anda. Pelajari lebih lanjut topik ini di dokumentasi kami.
Di terminal (Shift+Ctrl+C), inisialisasi Firestore jika agen belum meminta Anda melakukannya sebelumnya.
```
firebase init firestore
```
Ikuti petunjuk di layar dan biarkan opsi default. Jangan menimpa aturan keamanan dari langkah sebelumnya.Kemudian, deploy aturan keamanan untuk instance database Anda.
```
firebase deploy --only firestore
```
Tindakan ini akan menyediakan instance database Firestore untuk Anda.

Sasaran 3: Mengujinya

Muat ulang aplikasi Anda, buat dan hapus entri pada roda pemilih, dan amati pembaruan ini di halaman Firestore di Firebase Console.

Aplikasi di Studio dan Konsol

5. Kesimpulan

Selamat! Anda telah berhasil membuat aplikasi web full-stack menggunakan agen App Prototyping dengan Firebase MCP. Jangan ragu untuk mencoba alat lain yang ditawarkan oleh server Firebase MCP dan memperluas kemampuan aplikasi Anda.