Berikut adalah semua yang kami umumkan di I/O, mulai dari fitur Firebase Studio baru hingga lebih banyak cara untuk mengintegrasikan AI. Baca blog.

Menyesuaikan ruang kerja Firebase Studio Anda

Firebase Studio memungkinkan Anda menyesuaikan ruang kerja dengan kebutuhan unik project dengan menentukan satu file konfigurasi .idx/dev.nix yang mendeskripsikan:

Alat sistem yang Anda butuhkan untuk bekerja (misalnya dari Terminal), seperti compiler atau program biner lain.
Ekstensi yang perlu diinstal (misalnya dukungan bahasa pemrograman).
Tampilan pratinjau aplikasi Anda (misalnya, perintah untuk menjalankan server web Anda).
Variabel lingkungan global yang tersedia untuk server lokal yang berjalan di ruang kerja Anda.

Lihat referensi dev.nix untuk mengetahui deskripsi lengkap tentang konfigurasi yang tersedia.

Dengan menambahkan file .idx/mcp.json ke project, Anda juga dapat terhubung ke server Model Context Protocol (MCP), termasuk server Firebase MCP.

Nix dan Firebase Studio

Firebase Studio menggunakan Nix untuk menentukan konfigurasi lingkungan bagi setiap ruang kerja. Secara khusus, Firebase Studio menggunakan:

Bahasa pemrograman Nix untuk mendeskripsikan lingkungan ruang kerja. Nix adalah bahasa pemrograman fungsional. Atribut dan library paket yang dapat Anda tentukan dalam file dev.nix mengikuti sintaksis kumpulan atribut Nix.
Pengelola paket Nix untuk mengelola alat sistem yang tersedia bagi ruang kerja Anda. Hal ini mirip dengan pengelola paket spesifik per OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg.

Karena lingkungan Nix dapat direproduksi dan bersifat deklaratif, dalam konteks Firebase Studio, artinya Anda dapat membagikan file konfigurasi Nix sebagai bagian dari repositori Git untuk memastikan semua orang yang mengerjakan project Anda memiliki konfigurasi lingkungan yang sama.

Contoh dasar

Contoh berikut menunjukkan konfigurasi lingkungan dasar yang mengaktifkan pratinjau:

{ pkgs, ... }: {

  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];

  # Sets environment variables in the workspace
  env = {
    SOME_ENV_VAR = "hello";
  };

  # Search for the extensions you want on https://open-vsx.org/ and use "publisher.id"
  idx.extensions = [
    "angular.ng-template"
  ];

  # Enable previews and customize configuration
  idx.previews = {
    enable = true;
    previews = {
      web = {
        command = [
          "npm"
          "run"
          "start"
          "--"
          "--port"
          "$PORT"
          "--host"
          "0.0.0.0"
          "--disable-host-check"
        ];
        manager = "web";
        # Optionally, specify a directory that contains your web app
        # cwd = "app/client";
      };
    };
  };
}

Menambahkan alat sistem

Untuk menambahkan alat sistem ke ruang kerja Anda, seperti compiler atau program CLI untuk layanan cloud, temukan ID paket unik di registry paket Nix dan tambahkan ke objek packages file dev.nix, dengan awalan `pkgs.:

{ pkgs, ... }: {
  # Which nixpkgs channel to use.
  channel = "stable-23.11"; # or "unstable"

  # Use https://search.nixos.org/packages to find packages
  packages = [
    pkgs.nodejs_20
  ];
  ...
}

Cara ini berbeda dengan cara Anda biasanya menginstal paket sistem menggunakan pengelola paket spesifik per OS seperti APT (apt dan apt-get), Homebrew (brew), dan dpkg. Mendeskripsikan secara deklaratif paket sistem mana yang diperlukan berarti ruang kerja Firebase Studio lebih mudah dibagikan dan direproduksi.

Menggunakan program biner node lokal

Sama seperti di komputer lokal, program biner yang terkait dengan paket node yang diinstal secara lokal (misalnya, paket yang ditentukan di package.json) dapat dieksekusi di panel Terminal dengan memanggilnya menggunakan perintah npx.

Sebagai kemudahan tambahan, jika Anda berada di direktori dengan folder node_modules (seperti direktori root project web), program biner yang diinstal secara lokal dapat dipanggil secara langsung, tanpa imbuhan npx.

Menambahkan komponen `gcloud`

Konfigurasi default gcloud CLI untuk Google Cloud tersedia bagi semua ruang kerja Firebase Studio.

Jika memerlukan komponen tambahan, Anda dapat menambahkannya ke file dev.nix:

{ pkgs }: {
  packages = [
    ...
    (pkgs.google-cloud-sdk.withExtraComponents [
      pkgs.google-cloud-sdk.components.cloud-datastore-emulator
    ])
    ...
  ];
}

Menambahkan ekstensi IDE

Anda dapat menginstal ekstensi di Firebase Studio menggunakan registry ekstensi OpenVSX dengan dua cara:

Gunakan panel Extensions di Firebase Studio untuk menemukan dan menginstal ekstensi. Pendekatan ini paling cocok untuk ekstensi spesifik per pengguna, seperti:
- Tema warna kustom
- Emulasi editor, seperti VSCodeVim
Tambahkan ekstensi ke file dev.nix. Ekstensi ini akan otomatis diinstal saat Anda membagikan konfigurasi ruang kerja. Pendekatan ini paling cocok untuk ekstensi spesifik per project, seperti:
- Ekstensi bahasa pemrograman, termasuk debugger spesifik per bahasa
- Ekstensi resmi untuk layanan cloud yang digunakan dalam project Anda
- Pemformat kode

Untuk pendekatan terakhir, Anda dapat menyertakan ekstensi IDE dalam file dev.nix dengan menemukan ID ekstensi yang sepenuhnya memenuhi syarat (dalam bentuk <publisher>.<id>) dan menambahkannya ke objek idx.extensions seperti ini:

{ pkgs, ... }: {
  ...
  # Search for the extensions you want on https://open-vsx.org/ and use the format
  # "<publisher>.<id>"
  idx.extensions = [
    "angular.ng-template"
  ];
  ...
}

Menambahkan layanan umum

Firebase Studio juga menawarkan penyiapan dan konfigurasi yang lebih simpel untuk layanan umum yang mungkin Anda perlukan selama pengembangan, termasuk:

Container
- Docker (services.docker.*)
Fitur Pesan
- Emulator Pub/Sub (services.pubsub.*)
Database
- MySQL (services.mysql.*)
- Postgres (services.postgres.*)
- Redis (services.redis.*)
- Spanner (services.spanner.*)

Untuk mengetahui detail tentang cara mengaktifkan layanan tersebut di ruang kerja Anda, lihat bagian services.* dalam referensi dev.nix.

Menyesuaikan pratinjau

Untuk mengetahui detail tentang cara menyesuaikan pratinjau aplikasi, lihat Melihat pratinjau aplikasi Anda.

Menetapkan ikon ruang kerja

Anda dapat memilih ikon kustom untuk ruang kerja dengan menempatkan file PNG bernama icon.png di dalam direktori .idx di tingkat yang sama dengan file dev.nix. Firebase Studio kemudian akan menggunakan ikon ini untuk menampilkan ruang kerja Anda di dasbor.

Karena file ini dapat diperiksa ke dalam kontrol sumber (seperti Git), sebaiknya gunakan cara ini agar semua orang yang mengerjakan project Anda dapat melihat ikon yang sama untuk project Anda saat menggunakan Firebase Studio. Selain itu, karena file tersebut dapat bervariasi di berbagai cabang Git, Anda dapat menggunakan ikon ini untuk membedakan secara visual antara ruang kerja aplikasi beta dan produksi serta untuk tujuan lainnya.

Mengubah penyesuaian Anda menjadi template

Untuk mengubah konfigurasi lingkungan menjadi "lingkungan awal" yang dapat digunakan oleh siapa saja untuk membangun project baru, lihat dokumen untuk Membuat template kustom.

Mempelajari semua opsi penyesuaian

Lihat referensi dev.nix untuk mengetahui deskripsi mendetail tentang skema konfigurasi lingkungan.

Mendownload file Anda

Untuk mendownload file sebagai file zip:

Klik kanan direktori mana pun di panel Explorer, lalu pilih Zip and Download.

Untuk mendownload semua file di direktori project Anda:

Pilih File > Open Folder.
Terima direktori /home/user default.
Setelah file dimuat, klik kanan direktori kerja Anda, lalu pilih Zip and Download. Jika menggunakan App Prototyping agent, direktori kerja Anda adalah studio. Jika menggunakan template atau project yang diupload, nama project Anda akan sama dengan keduanya.
Saat diminta untuk membangun ulang lingkungan, klik Cancel.
Setelah download selesai, buka kembali direktori kerja dari menu File untuk kembali ke ruang kerja.

Menggunakan server MCP

Server MCP menyediakan alat dan sumber data tambahan yang akan digunakan oleh Gemini. Misalnya, Anda dapat menambahkan server Firebase MCP untuk menjelajahi data di Cloud Firestore menggunakan bahasa alami saat Anda membangun atau men-debug aplikasi.

Prasyarat

Jika server MCP memerlukannya, pastikan Anda memiliki penginstalan Node.js dan npm yang berfungsi.

Memilih server MCP yang kompatibel

Firebase Studio memiliki dukungan dasar untuk server MCP, yang berarti tidak semua server MCP kompatibel. Saat memilih server MCP yang akan ditambahkan ke ruang kerja Firebase Studio, perhatikan hal-hal berikut:

Didukung:
- Server input/output (stdio) standar atau Server-Sent Events (SSE)/Server transpor HTTP yang dapat di-stream dan tidak memerlukan bentuk autentikasi khusus
- Alat yang disediakan oleh server MCP
Saat ini tidak didukung:
- Server yang memerlukan antarmuka pengguna grafis atau sesi desktop
- Perintah, pengambilan sampel, atau resource lain yang disediakan oleh server MCP

Menambahkan server MCP

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 konten file .idx/mcp.json. Misalnya, untuk menambahkan server Firebase MCP, masukkan:
```
{
  "mcpServers": {
   "firebase": {
     "command": "npx",
     "args": [
       "-y",
       "firebase-tools@latest",
       "experimental:mcp"
      ]
    }
  }
}
```
File konfigurasi ini menginstruksikan Gemini terkait server MCP mana yang ingin Anda gunakan. Dalam contoh ini, kita telah menambahkan satu server bernama firebase yang akan menggunakan perintah npx untuk menginstal dan menjalankan firebase-tools@latest. Server MCP lainnya memerlukan konfigurasi yang berbeda, tetapi mengikuti format umum yang sama.
Di terminal (Shift+Ctrl+C), jalankan perintah yang diperlukan untuk menyelesaikan penginstalan. Misalnya, untuk menggunakan server Firebase MCP, masukkan perintah berikut untuk login ke akun Anda:
```
firebase login --no-localhost
```
Ikuti petunjuk di terminal untuk mengizinkan sesi. Beberapa alat memerlukan project Firebase yang terhubung. Anda dapat menggunakan server Firebase MCP untuk membuat project, atau Anda dapat menjalankan perintah berikut untuk menginisialisasi project Firebase:
```
firebase init
```
Tindakan ini akan membuat file firebase.json di direktori root Anda.
Bangun kembali ruang kerja Anda untuk menyelesaikan penyiapan:
1. Buka Palet Perintah (Shift+Ctrl+P).
2. Masukkan Firebase Studio: Rebuild Environment.

Menggunakan alat MCP

Setelah menginstal server MCP yang ingin Anda gunakan, alat atau data yang disediakan tersedia di:

Gemini CLI
Gemini dalam percakapan Firebase saat menggunakan mode Agen dan mode Agen (Jalankan Otomatis)
App Prototyping agent

Misalnya, jika Anda menambahkan server MCP Firebase, Anda dapat meminta Gemini untuk mengambil konfigurasi SDK untuk project saat ini, mengambil data yang disimpan di Cloud Firestore dan Realtime Database, membantu Anda menyiapkan layanan Firebase, dan lainnya.

Memecahkan masalah server MCP

Jika server MCP tidak berfungsi seperti yang diharapkan, buka log Gemini untuk memeriksa error:

Di Output (Shift+Ctrl+U), klik menu drop-down dan pilih Gemini.
Periksa pesan yang diawali dengan tag [MCPManager]. Log ini berisi informasi tentang server MCP yang telah disiapkan, beserta pesan error. Gunakan informasi ini untuk memecahkan masalah konfigurasi Anda. Jika server MCP berhasil terhubung, Anda akan melihat daftar alat yang ditambahkan.

Coba bangun kembali ruang kerja Anda jika server MCP gagal diinstal atau terhubung:

Buka Palet Perintah (Shift+Ctrl+P).
Masukkan Firebase Studio: Rebuild Environment.
Tunggu hingga ruang kerja Anda dibangun kembali, lalu coba lagi gunakan server MCP yang Anda pilih.

Jika server MCP terhubung, tetapi Gemini tidak menggunakan alat yang disediakan:

Mulai sesi percakapan Gemini baru.
Jika dapat menyelesaikan tugas tanpa menggunakan alat MCP, Gemini mungkin akan mencoba metode lain. Jika ingin menggunakan alat tertentu, coba sebutkan nama alat tersebut dalam perintah Anda. Misalnya, Anda dapat mengatakan "Gunakan firebase_get_sdk_config untuk mendapatkan konfigurasi SDK untuk project saat ini."
Bergabunglah dengan Google Developer Program.