Firebase Studio çalışma alanınızı özelleştirme

Firebase Studio, çalışma alanınızı projenizin benzersiz ihtiyaçlarına göre uyarlamanıza olanak tanır. Bunun için, aşağıdakileri açıklayan tek bir .idx/dev.nix yapılandırma dosyası tanımlamanız gerekir:

  • Çalıştırmanız gereken sistem araçları (örneğin, derleyiciler veya diğer ikili dosyalar gibi Terminal'den).
  • Yüklü olması gereken uzantılar (ör. programlama dili desteği).
  • Uygulama önizlemelerinizin nasıl gösterileceği (örneğin, web sunucunuzu çalıştırma komutları).
  • Çalışma alanınızda çalışan yerel sunucular için kullanılabilen genel ortam değişkenleri.

Kullanılabilir özelliklerin tam açıklaması için dev.nix referansına bakın.

Projenize .idx/mcp.json (Firebase'de Gemini için) veya .gemini/settings.json (Gemini CLI için) dosyası ekleyerek Firebase MCP sunucusu da dahil olmak üzere Model Context Protocol (MCP) sunucularına da bağlanabilirsiniz.

Nix ve Firebase Studio

Firebase Studio, her çalışma alanının ortam yapılandırmasını tanımlamak için Nix'i kullanır. Firebase Studio özellikle şu amaçlarla kullanılır:

  • Çalışma alanı ortamlarını tanımlamak için Nix programlama dili. Nix, işlevsel bir programlama dilidir. dev.nix dosyasında tanımlayabileceğiniz özellikler ve paket kitaplıkları, Nix özellik kümesi söz dizimine uygundur.

  • Çalışma alanınızda kullanılabilen sistem araçlarını yönetmek için Nix paket yöneticisi. Bu, APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özel paket yöneticilerine benzer.

Nix ortamları tekrarlanabilir ve bildirimsel olduğundan Firebase Studio bağlamında, projenizde çalışan herkesin aynı ortam yapılandırmasına sahip olmasını sağlamak için Nix yapılandırma dosyanızı Git kod deponuzun bir parçası olarak paylaşabilirsiniz.

Temel bir örnek

Aşağıdaki örnekte, önizlemeleri etkinleştiren temel bir ortam yapılandırması gösterilmektedir:

{ 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";
      };
    };
  };
}

Sistem araçları ekleme

Çalışma alanınıza derleyiciler veya bulut hizmetleri için CLI programları gibi sistem araçları eklemek üzere Nix paket kayıt defterinde benzersiz paket kimliğini bulun ve dev.nix dosyanızın packages nesnesine "pkgs." önekiyle ekleyin:

{ 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
  ];
  ...
}

Bu, genellikle APT (apt ve apt-get), Homebrew (brew) ve dpkg gibi işletim sistemine özgü paket yöneticilerini kullanarak sistem paketlerini yükleme yönteminden farklıdır. Hangi sistem paketlerinin gerektiğinin tam olarak bildirimli bir şekilde açıklanması, Firebase Studio çalışma alanlarının paylaşılmasını ve yeniden üretilmesini kolaylaştırır.

Yerel düğüm ikililerini kullanma

Yerel makinenizde olduğu gibi, yerel olarak yüklenen düğüm paketleriyle (örneğin, package.json dosyanızda tanımlanan paketler) ilgili ikili dosyalar, npx komutu ile çağrılarak bir Terminal panelinde yürütülebilir.

Ek bir kolaylık olarak, node_modules klasörünün bulunduğu bir dizindeyken (ör. bir web projesinin kök dizini) yerel olarak yüklenen ikili dosyalar npx öneki olmadan doğrudan çağrılabilir.

gcloud bileşen ekleme

gcloud CLI for Google Cloud'nin varsayılan yapılandırması tüm Firebase Studio çalışma alanlarında kullanılabilir.

Ek bileşenlere ihtiyacınız varsa bunları dev.nix dosyanıza ekleyebilirsiniz:

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

IDE uzantıları ekleme

Firebase Studio'da uzantıları OpenVSX uzantı kayıt defterini kullanarak iki şekilde yükleyebilirsiniz:

  • Uzantıları keşfetmek ve yüklemek için Firebase Studio'deki Uzantılar panelini kullanın. Bu yaklaşım, aşağıdakiler gibi kullanıcıya özel uzantılar için en iyisidir:

    • Özel renk temaları
    • VSCodeVim gibi düzenleyici emülasyonu
  • dev.nix dosyanıza uzantı ekleyin. Bu uzantılar, çalışma alanı yapılandırmanızı paylaştığınızda otomatik olarak yüklenir. Bu yaklaşım, aşağıdakiler gibi projeye özel uzantılar için en uygundur:

    • Dile özgü hata ayıklayıcılar da dahil olmak üzere programlama dili uzantıları
    • Projenizde kullanılan bulut hizmetleri için resmi uzantılar
    • Kod biçimlendiriciler

İkinci yaklaşım için tam nitelikli uzantı kimliğini (<publisher>.<id> biçiminde) bulup dev.nix dosyanıza ekleyerek IDE uzantılarını dahil edebilirsiniz. Bunu idx.extensions nesnesine şu şekilde ekleyebilirsiniz:

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

Sık kullanılan hizmetleri ekleme

Firebase Studio ayrıca geliştirme sırasında ihtiyaç duyabileceğiniz yaygın hizmetler için basitleştirilmiş kurulum ve yapılandırma sunar. Bu hizmetler arasında şunlar yer alır:

  • Container'lar
    • Docker (services.docker.*)
  • Mesajlaşma
    • Pub/Sub Emulator (services.pubsub.*)
  • Veritabanları
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Bu hizmetleri çalışma alanınızda etkinleştirme hakkında ayrıntılı bilgi için services.* bölümlerindeki dev.nix referansına bakın.

Önizlemeleri özelleştirme

Uygulama önizlemelerinizi nasıl özelleştireceğiniz hakkında ayrıntılı bilgi için Uygulamanızı önizleme başlıklı makaleyi inceleyin.

Çalışma alanı simgenizi ayarlama

icon.png adlı bir PNG dosyasını dev.nix dosyanızla aynı düzeydeki .idx dizinine yerleştirerek çalışma alanınız için özel bir simge seçebilirsiniz. Firebase Studio, daha sonra bu simgeyi kullanarak çalışma alanınızı kontrol panelinizde temsil eder.

Bu dosya kaynak kontrolüne (ör. Git) eklenebildiğinden, Firebase Studio kullanırken projenizde çalışan herkesin projeniz için aynı simgeyi görmesini sağlamak adına iyi bir yöntemdir. Dosya, Git dalları arasında değişiklik gösterebileceğinden bu simgeyi, beta ve üretim uygulama çalışma alanlarını görsel olarak ayırt etmek ve başka amaçlar için kullanabilirsiniz.

Özelleştirmelerinizi şablona dönüştürme

Ortam yapılandırmanızı herkesin yeni projeler oluşturmak için kullanabileceği bir "başlangıç ortamına" dönüştürmek istiyorsanız Özel şablon oluşturma ile ilgili dokümanlara bakın.

Tüm özelleştirme seçeneklerini keşfedin

Ortam yapılandırma şemasının ayrıntılı açıklaması için dev.nix referansına göz atın.

Dosyalarınızı indirme

Dosyalarınızı ZIP dosyası olarak indirmek için:

  • Gezgin bölmesinde herhangi bir dizini sağ tıklayın ve Zip ve İndir'i seçin.

Proje dizininizdeki her şeyi indirmek için:

  1. Dosya > Klasör Aç'ı seçin.

  2. Varsayılan /home/user dizinini kabul edin.

  3. Dosyalar yüklendikten sonra çalışma dizininizi sağ tıklayın ve Zip ve İndir'i seçin. App Prototyping agent kullanıyorsanız çalışma dizininiz studio olur. Şablon veya yüklenmiş proje kullanıyorsanız bu, proje adınız olur.

  4. Ortamı yeniden oluşturmanız istendiğinde İptal'i tıklayın.

  5. İndirme işlemi tamamlandıktan sonra, çalışma alanınıza geri dönmek için Dosya menüsünden çalışma dizininizi yeniden açın.

MCP sunucularını kullanma

MCP sunucuları, Gemini için ek araçlar ve veri kaynakları sağlar. Örneğin, uygulamanızı oluştururken veya hatalarını ayıklarken doğal dil kullanarak verilerinizi Cloud Firestore'da keşfetmek için Firebase MCP sunucusunu ekleyebilirsiniz.

Ön koşullar

  • MCP sunucusu gerektiriyorsa Node.js ve npm'nin çalışan bir yüklemesine sahip olduğunuzdan emin olun.

Uyumlu bir MCP sunucusu seçin

Firebase Studio, MCP sunucuları için temel destek sunar. Bu nedenle, tüm MCP sunucuları uyumlu değildir. Firebase Studio çalışma alanınıza eklemek için bir MCP sunucusu seçerken aşağıdakileri göz önünde bulundurun:

  • Desteklenenler:
    • Standart giriş/çıkış (stdio) veya Server-Sent Events (SSE)/Streamable HTTP aktarım sunucuları (özel kimlik doğrulama biçimleri gerektirmez)
    • MCP sunucuları tarafından sağlanan araçlar
  • Şu anda desteklenmiyor:
    • Grafik kullanıcı arayüzü veya masaüstü oturumu gerektiren sunucular
    • MCP sunucuları tarafından sağlanan istemler, örnekler veya diğer kaynaklar

MCP sunucusu ekleme

  1. Gezgin'den (Ctrl+Shift+E) MCP yapılandırma dosyasını düzenleyin veya oluşturun.

    • Firebase sohbetinde Gemini, .idx/mcp.json kullanır.

    • Gemini CLI, .gemini/settings.json kullanıyor.

    Dosya henüz yoksa ana dizini sağ tıklayıp Yeni dosya'yı seçerek dosyayı oluşturun. Firebase ve Gemini CLI'de Gemini'da MCP sunucusunu kullanmak için her iki dosyayı da oluşturun veya düzenleyin.

  2. Sunucu yapılandırmasını dosyanın içeriğine ekleyin. Örneğin, Firebase MCP sunucusunu eklemek için şunu girin:

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

    Bu yapılandırma dosyası, Gemini'ya hangi MCP sunucusunu kullanmasını istediğinizi bildirir. Bu örnekte, firebase adlı bir sunucu ekledik. Bu sunucu, npx komutunu kullanarak firebase-tools@latest yükleyip çalıştıracak. Diğer MCP sunucuları farklı yapılandırmalar gerektirir ancak aynı genel biçimi kullanır.

  3. Terminalde (Shift+Ctrl+C) yüklemeyi tamamlamak için gerekli komutları çalıştırın. Örneğin, Firebase MCP sunucusunu kullanmak için hesabınızda oturum açmak üzere aşağıdaki komutu girin:

    firebase login --no-localhost
    

    Oturumu yetkilendirmek için terminaldeki talimatları uygulayın. Bazı araçlar için bağlı bir Firebase projesi gerekir. Proje oluşturmak için Firebase MCP sunucusunu kullanabilir veya Firebase projesini başlatmak için aşağıdaki komutu çalıştırabilirsiniz:

    firebase init
    

    Bu işlem, kök dizininizde bir firebase.json dosyası oluşturur.

  4. Kurulumu tamamlamak için çalışma alanınızı yeniden oluşturun:

    1. Komut paletini (Shift+Ctrl+P) açın.

    2. Firebase Studio: Rebuild Environment'ı (Firebase Studio: Ortamı Yeniden Oluşturma) girin.

MCP araçlarını kullanma

Kullanmak istediğiniz MCP sunucusunu yükledikten sonra, sağladığı araçlar veya veriler şu konumlarda kullanılabilir:

  • Gemini CLI
  • Aracı modu ve Aracı (Otomatik çalıştırma) modları kullanılırken Firebase sohbetinde Gemini
  • App Prototyping agent

Örneğin, Firebase MCP sunucusunu eklerseniz Gemini mevcut proje için SDK yapılandırmasını getirmesini, Cloud Firestore ve Realtime Database içinde depolanan verileri almasını, Firebase hizmetlerini ayarlamanıza yardımcı olmasını isteyebilirsiniz.

MCP sunucularıyla ilgili sorunları giderme

Bir MCP sunucusu beklendiği gibi çalışmıyorsa Gemini günlüklerinizi açarak hataları kontrol edin:

  1. Çıkış (Shift+Ctrl+U) bölümünde açılır menüyü tıklayın ve Gemini'ı seçin.

  2. [MCPManager] etiketiyle başlayan mesajları kontrol edin. Bu günlükler, hangi MCP sunucularının ayarlandığı ve hata mesajları hakkında bilgi içerir. Yapılandırmanızla ilgili sorunları gidermek için bu bilgileri kullanın. Bir MCP sunucusu başarıyla bağlandığında, eklediği araçların listesini görürsünüz.

Bir MCP sunucusu yüklenemezse veya bağlanamazsa çalışma alanınızı yeniden oluşturmayı deneyin:

  1. Komut paletini (Shift+Ctrl+P) açın.

  2. Firebase Studio: Rebuild Environment'ı (Firebase Studio: Ortamı Yeniden Oluşturma) girin.

  3. Çalışma alanınızın yeniden oluşturulmasını bekleyin ve ardından seçtiğiniz MCP sunucusunu tekrar kullanmayı deneyin.

MCP sunucusu bağlanıyorsa ancak Gemini, sağladığı araçları kullanmıyorsa:

Sonraki adımlar