Dostosowywanie obszaru roboczego Firebase Studio

Firebase Studio umożliwia dostosowanie obszaru roboczego do unikalnych potrzeb projektu przez zdefiniowanie jednego pliku konfiguracji .idx/dev.nix, który opisuje:

  • Narzędzia systemowe, które musisz mieć możliwość uruchomienia (np. z poziomu terminala), takie jak kompilatory lub inne pliki binarne.
  • Rozszerzenia, które musisz zainstalować (np. obsługa języka programowania).
  • Jak powinny wyglądać wersje demonstracyjne aplikacji (np. polecenia uruchamiające serwer WWW).
  • Globalne zmienne środowiskowe dostępne dla serwerów lokalnych działających w Twojej przestrzeni roboczej.

Pełny opis dostępnych funkcji znajdziesz w dev.nix.

Dodając do projektu plik .idx/mcp.json (w przypadku Gemini w Firebase) lub .gemini/settings.json (w przypadku Gemini CLI), możesz też połączyć się z serwerami protokołu kontekstu modelu (MCP), w tym z serwerem MCP Firebase.

Nix i Firebase Studio

Firebase Studio używa Nixa do definiowania konfiguracji środowiska dla każdego obszaru roboczego. W szczególności Firebase Studio korzysta z:

  • języka programowania Nix do opisywania środowisk obszaru roboczego. Nix to język programowania funkcyjnego. Atrybuty i biblioteki pakietów, które możesz zdefiniować w pliku dev.nix, są zgodne z składnią zestawu atrybutów Nix.

  • Menedżer pakietów Nix do zarządzania narzędziami systemowymi dostępnymi w przestrzeni roboczej. Działa podobnie jak menedżery pakietów specyficzne dla systemu operacyjnego, takie jak APT (apt i apt-get), Homebrew (brew) i dpkg.

Środowiska Nix są odtwarzalne i deklaratywne, co w kontekście Firebase Studio oznacza, że możesz udostępnić plik konfiguracyjny Nix w ramach repozytorium Git, aby mieć pewność, że każda osoba pracująca nad projektem ma taką samą konfigurację środowiska.

Podstawowy przykład

Poniższy przykład pokazuje podstawową konfigurację środowiska, która umożliwia wyświetlanie podglądów:

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

Dodawanie narzędzi systemowych

Aby dodać do obszaru roboczego narzędzia systemowe, takie jak kompilatory lub programy CLI do usług w chmurze, znajdź unikalny identyfikator pakietu w rejestrze pakietów Nix i dodaj go do obiektu packages w pliku dev.nix, poprzedzając go ciągiem znaków „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
  ];
  ...
}

Różni się to od typowego sposobu instalowania pakietów systemowych za pomocą menedżerów pakietów specyficznych dla systemu operacyjnego, takich jak APT (apt i apt-get), Homebrew (brew) i dpkg. Deklaratywne opisywanie, które pakiety systemowe są potrzebne, oznacza, że Firebase Studio przestrzenie robocze są łatwiejsze do udostępniania i odtwarzania.

Używanie lokalnych plików binarnych węzła

Podobnie jak na komputerze lokalnym, pliki binarne powiązane z lokalnie zainstalowanymi pakietami węzłów (np. pakietami zdefiniowanymi w package.json) można wykonywać w panelu terminala, wywołując je za pomocą polecenia npx.

Dodatkowo, jeśli znajdujesz się w katalogu z folderem node_modules (np. w katalogu głównym projektu internetowego), możesz bezpośrednio wywoływać zainstalowane lokalnie pliki binarne bez prefiksu npx.

Dodawanie komponentów gcloud

Domyślna konfiguracja interfejsu gcloud CLI dla Google Cloud jest dostępna we wszystkich obszarach roboczych Firebase Studio.

Jeśli potrzebujesz dodatkowych komponentów, możesz dodać je do pliku dev.nix:

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

Dodawanie rozszerzeń IDE

Rozszerzenia w Firebase Studio możesz zainstalować na 2 sposoby, korzystając z rejestru rozszerzeń OpenVSX:

  • W Firebase Studio użyj panelu Rozszerzenia, aby odkrywać i instalować rozszerzenia. To podejście jest najlepsze w przypadku rozszerzeń przeznaczonych dla konkretnych użytkowników, takich jak:

    • Niestandardowe motywy kolorystyczne
    • Emulacja edytora, np. VSCodeVim

  • Dodaj rozszerzenia do pliku dev.nix. Te rozszerzenia zostaną zainstalowane automatycznie, gdy udostępnisz konfigurację obszaru roboczego. To podejście jest najlepsze w przypadku rozszerzeń związanych z konkretnym projektem, takich jak:

    • Rozszerzenia języków programowania, w tym debugery specyficzne dla danego języka
    • Oficjalne rozszerzenia usług w chmurze używanych w projekcie
    • Formatowanie kodu

W przypadku tego drugiego podejścia możesz uwzględnić rozszerzenia IDE w pliku dev.nix, wyszukując w nim w tym celu w pełni kwalifikowany identyfikator rozszerzenia (w formacie <publisher>.<id>) i dodając go do obiektu idx.extensions w ten sposób:

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

Dodawanie typowych usług

Firebase Studio oferuje też uproszczoną konfigurację popularnych usług, które mogą być potrzebne podczas programowania, takich jak:

  • Kontenery
    • Docker (services.docker.*)
  • Wiadomości
    • Emulator Pub/Sub (services.pubsub.*)
  • Bazy danych
    • MySQL (services.mysql.*)
    • Postgres (services.postgres.*)
    • Redis (services.redis.*)
    • Spanner (services.spanner.*)

Szczegółowe informacje o włączaniu tych usług w przestrzeni roboczej znajdziesz w services.*dev.nix.

Dostosowywanie podglądów

Szczegółowe informacje o dostosowywaniu podglądów aplikacji znajdziesz w artykule Wyświetlanie podglądu aplikacji.

Ustawianie ikony obszaru roboczego

Możesz wybrać niestandardową ikonę obszaru roboczego, umieszczając plik PNG o nazwie icon.png w katalogu .idx na tym samym poziomie co plik dev.nix. Firebase Studio użyje tej ikony do reprezentowania Twojego obszaru roboczego na panelu.

Ten plik można dodać do systemu kontroli wersji (np. Git), co jest dobrym sposobem na zapewnienie, że wszystkie osoby pracujące nad projektem będą widzieć tę samą ikonę projektu podczas korzystania z Firebase Studio. Plik może się różnić w zależności od gałęzi Git, więc możesz użyć tej ikony, aby wizualnie odróżnić obszary robocze aplikacji w wersji beta i produkcyjnej oraz w innych celach.

Przekształcanie dostosowań w szablon

Aby przekształcić konfigurację środowiska w „środowisko startowe”, z którego każdy może korzystać do tworzenia nowych projektów, zapoznaj się z dokumentacją dotyczącą tworzenia szablonów niestandardowych.

Poznaj wszystkie opcje dostosowywania

Szczegółowy opis schematu konfiguracji środowiska znajdziesz w dev.nixtym artykule.

Pobieranie plików

Aby pobrać pliki jako plik ZIP:

  • Kliknij prawym przyciskiem myszy dowolny katalog w panelu Eksplorator i wybierz Spakuj i pobierz.

Aby pobrać wszystko z katalogu projektu:

  1. Wybierz Plik > Otwórz folder.

  2. Zaakceptuj domyślny katalog /home/user.

  3. Po załadowaniu plików kliknij prawym przyciskiem myszy katalog roboczy i wybierz Spakuj i pobierz. Jeśli używasz App Prototyping agent, katalogiem roboczym będzie studio. Jeśli używasz szablonu lub przesłanego projektu, będzie to nazwa Twojego projektu.

  4. Gdy pojawi się prośba o ponowne utworzenie środowiska, kliknij Anuluj.

  5. Po zakończeniu pobierania otwórz ponownie katalog roboczy z menu Plik, aby wrócić do obszaru roboczego.

Korzystanie z serwerów MCP

Serwery MCP udostępniają dodatkowe narzędzia i źródła danych, z których może korzystać Gemini. Możesz na przykład dodać serwer Firebase MCP, aby eksplorować dane w Cloud Firestore przy użyciu języka naturalnego podczas tworzenia lub debugowania aplikacji.

Wymagania wstępne

  • Jeśli serwer MCP tego wymaga, upewnij się, że masz działającą instalację Node.js i npm.

Wybierz zgodny serwer MCP

Firebase Studio ma podstawową obsługę serwerów MCP, co oznacza, że nie wszystkie serwery MCP są kompatybilne. Przy wyborze serwera MCP do dodania do obszaru roboczego Firebase Studio pamiętaj o tych kwestiach:

  • Obsługiwane:
    • Serwery transportu standardowego wejścia/wyjścia (stdio) lub serwery transportu zdarzeń wysyłanych przez serwer (SSE)/strumieniowego HTTP, które nie wymagają specjalnych form uwierzytelniania.
    • Narzędzia udostępniane przez serwery MCP
  • Obecnie nieobsługiwane:
    • Serwery, które wymagają graficznego interfejsu użytkownika lub sesji na komputerze
    • Prompty, próbki i inne zasoby udostępniane przez serwery MCP

Dodawanie serwera MCP

  1. W Eksploratorze (Ctrl+Shift+E) edytuj lub utwórz plik konfiguracji MCP.

    • Gemini w Firebase Google Chat korzysta z .idx/mcp.json.

    • Gemini CLI korzysta z .gemini/settings.json.

    Jeśli plik jeszcze nie istnieje, utwórz go, klikając prawym przyciskiem myszy katalog nadrzędny i wybierając Nowy plik. Utwórz lub zmodyfikuj oba pliki, aby używać serwera MCP w Gemini w Firebase i Gemini CLI.

  2. Dodaj konfigurację serwera do zawartości pliku. Aby na przykład dodać serwer MCP Firebase, wpisz:

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

    Ten plik konfiguracji informuje Gemini, którego serwera MCP ma używać. W tym przykładzie dodaliśmy 1 serwer o nazwie firebase, który będzie używać polecenia npx do instalowania i uruchamiania firebase-tools@latest. Inne serwery MCP wymagają innej konfiguracji, ale mają ten sam ogólny format.

  3. W terminalu (Shift+Ctrl+C) uruchom niezbędne polecenia, aby dokończyć instalację. Aby na przykład użyć serwera Firebase MCP, wpisz to polecenie, aby zalogować się na konto:

    firebase login --no-localhost

    Postępuj zgodnie z instrukcjami wyświetlanymi w terminalu, aby autoryzować sesję. Niektóre narzędzia wymagają połączonego projektu Firebase. Aby utworzyć projekt, możesz użyć serwera Firebase MCP lub uruchomić to polecenie, aby zainicjować projekt Firebase:

    firebase init

    Spowoduje to utworzenie pliku firebase.json w katalogu głównym.

  4. Aby dokończyć konfigurację, ponownie utwórz obszar roboczy:

    1. Otwórz paletę poleceń (Shift+Ctrl+P).

    2. Wpisz Firebase Studio: Rebuild Environment (Firebase Studio: odbuduj środowisko).

Korzystanie z narzędzi MCP

Po zainstalowaniu serwera MCP, którego chcesz używać, narzędzia lub dane, które udostępnia, są dostępne w:

  • Interfejs wiersza poleceń Gemini
  • Gemini w Firebase czacie w trybach Agent i Agent (automatyczne uruchamianie)
  • App Prototyping agent

Jeśli na przykład dodasz serwer Firebase MCP, możesz poprosić go o Geminipobranie konfiguracji pakietu SDK dla bieżącego projektu,Cloud Firestore pobranie danych przechowywanych w Cloud Firestore i Realtime Database, pomoc w konfigurowaniu usług Firebase i nie tylko.

Rozwiązywanie problemów z serwerami MCP

Jeśli serwer MCP nie działa zgodnie z oczekiwaniami, otwórz Gemini dzienniki, aby sprawdzić, czy nie ma w nich błędów:

  1. W sekcji Wyjście (Shift+Ctrl+U) kliknij menu i wybierz Gemini.

  2. Sprawdź, czy są wiadomości zaczynające się od tagu [MCPManager]. Logi te zawierają informacje o skonfigurowanych serwerach MCP oraz komunikaty o błędach. Skorzystaj z tych informacji, aby rozwiązać problemy z konfiguracją. Gdy serwer MCP połączy się z usługą, zobaczysz listę dodanych przez niego narzędzi.

Jeśli nie uda się zainstalować serwera MCP lub nawiązać z nim połączenia, spróbuj ponownie utworzyć przestrzeń roboczą:

  1. Otwórz paletę poleceń (Shift+Ctrl+P).

  2. Wpisz Firebase Studio: Rebuild Environment (Firebase Studio: odbuduj środowisko).

  3. Poczekaj, aż obszar roboczy zostanie ponownie utworzony, a następnie spróbuj ponownie użyć wybranego serwera MCP.

Jeśli serwer MCP łączy się, ale Gemini nie korzysta z narzędzi, które udostępnia:

Dalsze kroki