MCP Firebase di Firebase Studio

1. Ringkasan

Pratinjau: Firebase Studio dan Firebase MCP masih dalam Pratinjau, yang berarti keduanya tidak tunduk pada SLA atau kebijakan penghentian layanan apa pun dan dapat berubah sehingga tidak kompatibel dengan versi sebelumnya.

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.

Yang akan Anda pelajari

• Membuat aplikasi web statis menggunakan App Prototyping agent
• Hubungkan ke project Firebase
• 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.

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 Sesuaikan untuk mengeditnya.
6. Klik Save.
7. Setelah blueprint selesai menggabungkan pembaruan Anda, klik Prototype this App.
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. (Opsional) Dapatkan kode

Jika Anda mengalami kesulitan, gunakan file contoh untuk mengikuti contoh aplikasi dengan lebih cermat mulai saat ini.

1. Download file di folder.
2. Di Firebase Studio, klik Switch to Code untuk membuka tampilan Code.
3. Tarik file yang Anda download ke panel Explorer di Firebase Studio. Izinkan file menggantikan file yang ada.
4. Di terminal (Shift+Ctrl+C), jalankan perintah berikut untuk menginstal paket.

   npm install
   

5. Buka panel Source Control di Firebase Studio, ketik pesan untuk mendeskripsikan perubahan kode, misalnya, "mengimpor kode dari GitHub", lalu tekan Commit.
6. Klik Beralih ke Prototyper untuk melanjutkan codelab, menggunakan contoh versi aplikasi.

Catatan: Anda harus memulai ruang kerja dengan perintah untuk menggunakan agen Pembuatan Prototipe Aplikasi. Dengan kata lain, untuk tujuan codelab ini, jangan membuat ruang kerja baru menggunakan file ini—cukup ganti file yang ada.

4. Hubungkan ke project Firebase

Selamat! Aplikasi Anda berfungsi secara lokal. Untuk memberikan backend, Anda akan menghubungkannya ke project Firebase berikutnya.

1. Minta agen Pembuatan Prototipe Aplikasi untuk terhubung ke project Firebase.

   Connect to a Firebase project.
   

   Harapkan agen membuat project baru atau terhubung ke project yang sudah ada (jika Anda menggunakan opsi buat otomatis untuk mendapatkan Kunci API Gemini sebelumnya, project Anda akan muncul di samping nama ruang kerja di sudut kiri atas layar), lalu buat konfigurasi Firebase yang diperlukan dan integrasikan ke aplikasi Anda melalui src/lib/firebase.ts (seperti yang ditunjukkan).

   import { initializeApp, getApp, getApps } from 'firebase/app';
   
   const firebaseConfig = {
     "projectId": "foo-bar-baz",
     "appId": "1:630673270654:web:3eda41879acd38fa96ce14",
     "storageBucket": "foo-bar-baz.firebasestorage.app",
     "apiKey": "AIzaSyDGoMZQia334izw8JedslMTUD0fNpmFca0",
     "authDomain": "foo-bar-baz.firebaseapp.com",
     "measurementId": "",
     "messagingSenderId": "630673270654"
   };
   
   // Initialize Firebase
   const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
   
   export default app;
   

   Jangan ragu untuk bertanya lagi kepada agen jika perintah di atas gagal menyelesaikan tugas dalam sekali percobaan. Uraikan langkah-langkahnya jika perlu.

   Create a new Firebase project.
   

5. 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. Klik Switch 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.

6. Menambahkan Firestore menggunakan Firebase MCP

Sasaran 1: Tambahkan Firestore

1. Beralih ke Prototyper. 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:
   • menginisialisasi Firestore dengan memanggil alat Firebase MCP firebase_init, yang membuat aturan Firestore (seperti yang ditunjukkan) dan mengindeks file di antara perubahan konfigurasi lainnya
   • perbarui kode aplikasi Anda untuk menggunakan Firestore, bukan penyimpanan lokal

   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.
2. Beralih ke Kode. Di terminal (Shift+Ctrl+C), inisialisasi Firestore jika Anda belum pernah mengaktifkan Firestore API di project Firebase saat ini.

   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 2: Uji

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

2. Anda juga dapat melakukan chat dengan Firestore untuk membuat kueri database Anda.

   List my Firestore collections.
   

   Harapkan Gemini memanggil alat MCP Firebase firestore_list_collections.

7. 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

• Alat MCP Firebase
• MCP Firebase di GitHub
• Tips dan Trik Firebase 2
• Pelajari ruang kerja Firebase Studio lebih lanjut