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 Firebase Realtime Database.

GIF animasi aplikasi akhir

Yang akan Anda pelajari

  • Membuat aplikasi web statis menggunakan App Prototyping agent
  • Menyiapkan server Firebase MCP
  • Menambahkan Firebase Realtime Database 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.

  1. Login ke Akun Google Anda, bergabunglah dengan Program Developer Google, dan buka Firebase Studio.
  2. Di kolom Buat prototipe aplikasi dengan AI, masukkan deskripsi aplikasi:
    An app for a picker wheel that allows custom input.
  3. Klik Improve Prompt. Tinjau perintah yang ditingkatkan.
  4. Klik Prototype with AI.
  5. Tinjau Cetak Biru Aplikasi yang disarankan. Klik menyesuaikan ikon untuk pengeditan codiconSesuaikan untuk mengeditnya.
  6. Klik Save.
  7. Setelah blueprint selesai menggabungkan pembaruan Anda, klik Prototype this App.Blueprint untuk aplikasi
  8. 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.
  9. 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.

  1. Di Firebase Studio, klik ikon tampilan kode studioSwitch to Code untuk membuka tampilan Kode.
  2. 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
  3. Dari Explorer (Ctrl+Shift+E), klik kanan folder .idx, lalu pilih New file. Beri nama file mcp.json, lalu tekan Enter.
  4. 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 Firebase Realtime Database menggunakan Firebase MCP

Tujuan 1: Menambahkan Firebase ke aplikasi Anda

  1. Beralih ke Prototyper. Di antarmuka chat, minta agen untuk membuat project.
    Create a Firebase project for my app.
    Harapkan agen memanggil alat MCP Firebase firebase_create_project.Lewati langkah ini jika Anda sudah membuat project Firebase saat menggunakan opsi buat otomatis untuk mendapatkan Kunci API Gemini. 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.
  2. Minta agen untuk terhubung ke project ini.
    Connect my app to my project `spinsync-3y3c6`.
    Pastikan Anda melihat file .firebaserc yang menyetel project aktif Anda. Jika tidak, minta agen untuk memperbarui lingkungan Firebase Anda.
    Update my Firebase environment to use this project.
    Harapkan agen memanggil alat Firebase MCP firebase_update_environment . Namun, ada kemungkinan agen menyelesaikan tugas ini tanpa memanggil alat.Terakhir, periksa apakah lingkungan Firebase Anda memiliki project aktif yang benar dan Anda sebagai pengguna yang diautentikasi.
    Show me my current Firebase environment.
    Harapkan agen memanggil alat Firebase MCP firebase_get_environment.
  3. Minta agen untuk membuat aplikasi web di project Firebase Anda.
    Create a web app in my active Firebase project.
    Harapkan agen memanggil alat firebase_create_app dan menampilkan ID Aplikasi. Jika agen gagal melakukannya, coba lagi dengan mengklik , atau ikuti petunjuk ini untuk menyelesaikan langkah di Firebase Console.
    Use the App ID to get the SDK configuration and add to my app.
    Harapkan agen memanggil alat firebase_get_sdk_config dan memperbarui kode Anda dengan Konfigurasi Firebase Anda.Jika kunci API dan konfigurasi lainnya muncul di src/lib/firebase.ts setelah agen menyatakan penyelesaian tugas, minta agen untuk memindahkannya agar aplikasi Anda tetap aman.
    Secure my code by moving my Firebase config to the `.env` file.

Tujuan 2: Menambahkan Firebase Realtime Database

  1. Tetap menggunakan atau Beralih ke Prototyper. Di antarmuka chat, minta agen untuk menyiapkan Firebase Realtime Database di project Anda.
    Set up Firebase Realtime Database in my active project. Give anyone
read and write access.
    Harapkan agen memanggil alat MCP Firebase firebase_init dan membuat aturan keamanan di database.rules.json sebagai bagian dari perubahan file di akhir giliran percakapan ini.
    {
    "rules": {
        ".read": true,
        ".write": 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.
  2. Beralih ke Kode. Di terminal (Shift+Ctrl+C), inisialisasi Firebase Realtime Database.
    firebase init database
    Ikuti petunjuk di layar dan biarkan opsi default.Kemudian, deploy aturan keamanan untuk instance database Anda.
    firebase deploy --only database
  3. Beralih ke Prototyper. Minta agen untuk menggunakan instance database default Anda untuk entri pengguna.
    Use my default Realtime Database instance for user entries.
    Harapkan agen memperbarui kode sumber lainnya untuk menghubungkan aplikasi Anda ke instance database Anda.

Sasaran 3: Mengujinya

  1. Buat beberapa entri baru untuk roda pemilih, dan lihat entri tersebut muncul di halaman Firebase Realtime Database di Firebase Console.

Firebase Realtime Database di Firebase Console

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.

Pelajari lebih lanjut