Tuỳ chỉnh không gian làm việc Firebase Studio

Firebase Studio cho phép bạn điều chỉnh không gian làm việc cho phù hợp với nhu cầu riêng của dự án bằng cách xác định một tệp cấu hình .idx/dev.nix duy nhất mô tả:

• Các công cụ hệ thống mà bạn cần có khả năng chạy (ví dụ: từ Terminal), chẳng hạn như trình biên dịch hoặc các tệp nhị phân khác.
• Bạn cần cài đặt các tiện ích (ví dụ: hỗ trợ ngôn ngữ lập trình).
• Cách bản xem trước ứng dụng của bạn sẽ xuất hiện (ví dụ: các lệnh để chạy máy chủ web).
• Biến môi trường chung có sẵn cho các máy chủ cục bộ đang chạy trong không gian làm việc của bạn.

Hãy xem tài liệu tham khảo về dev.nix để biết nội dung mô tả đầy đủ về những gì có sẵn.

Bằng cách thêm tệp .idx/mcp.json (đối với Gemini trong Firebase) hoặc .gemini/settings.json (đối với Gemini CLI) vào dự án, bạn cũng có thể kết nối với các máy chủ Model Context Protocol (MCP), bao gồm cả máy chủ Firebase MCP.

Nix và Firebase Studio

Firebase Studio sử dụng Nix để xác định cấu hình môi trường cho từng không gian làm việc. Cụ thể, Firebase Studio sử dụng:

• Ngôn ngữ lập trình Nix để mô tả môi trường không gian làm việc. Nix là một ngôn ngữ lập trình hàm. Các thuộc tính và thư viện gói mà bạn có thể xác định trong tệp dev.nix tuân theo cú pháp tập hợp thuộc tính Nix.

• Trình quản lý gói Nix để quản lý các công cụ hệ thống có sẵn cho không gian làm việc của bạn. Điều này tương tự như các trình quản lý gói dành riêng cho hệ điều hành, chẳng hạn như APT (apt và apt-get), Homebrew (brew) và dpkg.

Vì môi trường Nix có thể tái tạo và khai báo, nên trong bối cảnh Firebase Studio, điều này có nghĩa là bạn có thể chia sẻ tệp cấu hình Nix trong kho lưu trữ Git để đảm bảo mọi người làm việc trên dự án của bạn đều có cùng cấu hình môi trường.

Ví dụ cơ bản

Ví dụ sau đây cho thấy một cấu hình môi trường cơ bản cho phép xem trước:

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

Thêm công cụ hệ thống

Để thêm các công cụ hệ thống vào không gian làm việc của bạn, chẳng hạn như trình biên dịch hoặc chương trình CLI cho các dịch vụ đám mây, hãy tìm mã nhận dạng gói duy nhất trong sổ đăng ký gói Nix rồi thêm mã nhận dạng đó vào đối tượng packages trong tệp dev.nix, có tiền tố là "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
  ];
  ...
}

Cách này khác với cách bạn thường cài đặt các gói hệ thống bằng trình quản lý gói dành riêng cho hệ điều hành, chẳng hạn như APT (apt và apt-get), Homebrew (brew) và dpkg. Việc khai báo để mô tả chính xác những gói hệ thống cần thiết có nghĩa là không gian làm việc Firebase Studio sẽ dễ dàng chia sẻ và tái tạo hơn.

Lưu ý: Khoá channel chỉ định kênh đăng ký gói Nix cần dùng. Bạn có thể sử dụng kênh unstable để dùng các phiên bản mới nhất của gói. Tuy nhiên, như tên của kênh này, việc này có thể khiến môi trường của bạn không thể tạo, tuỳ thuộc vào thời điểm bạn bắt đầu không gian làm việc.

Sử dụng tệp nhị phân nút cục bộ

Giống như trên máy cục bộ, các tệp nhị phân liên quan đến các gói nút được cài đặt cục bộ (ví dụ: các gói được xác định trong package.json) có thể được thực thi trong bảng điều khiển Terminal bằng cách gọi chúng bằng lệnh npx.

Để thuận tiện hơn, nếu bạn đang ở trong một thư mục có thư mục node_modules (chẳng hạn như thư mục gốc của một dự án web), thì bạn có thể gọi trực tiếp các tệp nhị phân được cài đặt cục bộ mà không cần tiền tố npx.

Thêm thành phần gcloud

Mọi không gian làm việc Firebase Studio đều có thể sử dụng cấu hình mặc định của CLI gcloud cho Google Cloud.

Nếu cần thêm các thành phần khác, bạn có thể thêm chúng vào tệp dev.nix:

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

Thêm các tiện ích IDE

Bạn có thể cài đặt các tiện ích trong Firebase Studio bằng cách sử dụng sổ đăng ký tiện ích OpenVSX theo hai cách:

• Sử dụng bảng điều khiển Tiện ích trong Firebase Studio để khám phá và cài đặt tiện ích. Phương pháp này phù hợp nhất với các tiện ích dành riêng cho người dùng, chẳng hạn như:

  • Chủ đề màu sắc tuỳ chỉnh
  • Mô phỏng trình chỉnh sửa, chẳng hạn như VSCodeVim

• Thêm các tiện ích vào tệp dev.nix. Các tiện ích này sẽ tự động cài đặt khi bạn chia sẻ cấu hình không gian làm việc. Phương pháp này phù hợp nhất cho các tiện ích dành riêng cho dự án, chẳng hạn như:

  • Tiện ích ngôn ngữ lập trình, bao gồm cả trình gỡ lỗi dành riêng cho ngôn ngữ
  • Tiện ích chính thức cho các dịch vụ đám mây được dùng trong dự án của bạn
  • Trình định dạng mã

Đối với phương pháp thứ hai, bạn có thể thêm các tiện ích IDE vào tệp dev.nix bằng cách tìm mã nhận dạng tiện ích đủ điều kiện (có dạng <publisher>.<id>) rồi thêm mã nhận dạng đó vào đối tượng idx.extensions như sau:

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

Thêm các dịch vụ phổ biến

Firebase Studio cũng cung cấp chế độ thiết lập và định cấu hình đơn giản cho các dịch vụ phổ biến mà bạn có thể cần trong quá trình phát triển, bao gồm:

• Vùng chứa
  • Docker (services.docker.*)
• Nhắn tin
  • Trình mô phỏng Pub/Sub (services.pubsub.*)
• Cơ sở dữ liệu
  • MySQL (services.mysql.*)
  • Postgres (services.postgres.*)
  • Redis (services.redis.*)
  • Spanner (services.spanner.*)

Để biết thông tin chi tiết về cách bật các dịch vụ này trong không gian làm việc của bạn, hãy xem các phần services.* trong tài liệu tham khảo về dev.nix.

Tuỳ chỉnh bản xem trước

Để biết thông tin chi tiết về cách tuỳ chỉnh bản xem trước ứng dụng, hãy xem phần Xem trước ứng dụng.

Đặt biểu tượng cho không gian làm việc

Bạn có thể chọn một biểu tượng tuỳ chỉnh cho không gian làm việc bằng cách đặt một tệp PNG có tên là icon.png bên trong thư mục .idx ở cùng cấp với tệp dev.nix. Firebase Studio sau đó sẽ dùng biểu tượng này để thể hiện không gian làm việc của bạn trong trang tổng quan.

Vì tệp này có thể được kiểm tra để kiểm soát nguồn (chẳng hạn như Git), nên đây là một cách hay để giúp mọi người làm việc trên dự án của bạn thấy cùng một biểu tượng cho dự án khi sử dụng Firebase Studio. Vì tệp có thể khác nhau giữa các nhánh Git, nên bạn có thể dùng biểu tượng này để phân biệt trực quan giữa các không gian làm việc của ứng dụng beta và ứng dụng phát hành chính thức, cũng như cho các mục đích khác.

Biến nội dung tuỳ chỉnh thành mẫu

Để biến cấu hình môi trường của bạn thành "môi trường khởi động" mà bất kỳ ai cũng có thể dùng để tạo dự án mới, hãy xem tài liệu về Tạo mẫu tuỳ chỉnh.

Khám phá tất cả các lựa chọn tuỳ chỉnh

Hãy xem dev.nix tham chiếu để biết nội dung mô tả chi tiết về giản đồ cấu hình môi trường.

Tải tệp xuống

Cách tải tệp xuống dưới dạng tệp zip:

• Nhấp chuột phải vào một thư mục bất kỳ trong ngăn Explorer rồi chọn Zip and Download (Nén và tải xuống).

Cách tải mọi thứ trong thư mục dự án xuống:

1. Chọn File > Open Folder (Tệp > Mở thư mục).

2. Chấp nhận thư mục /home/user mặc định.

3. Sau khi các tệp tải xong, hãy nhấp chuột phải vào thư mục làm việc rồi chọn Nén và tải xuống. Nếu sử dụng App Prototyping agent, thư mục đang làm việc của bạn sẽ là studio. Nếu bạn sử dụng một mẫu hoặc dự án đã tải lên, thì đây sẽ là tên dự án của bạn.

4. Khi được nhắc tạo lại môi trường, hãy nhấp vào Huỷ.

5. Sau khi quá trình tải xuống hoàn tất, hãy mở lại thư mục làm việc của bạn trong trình đơn Tệp để quay lại không gian làm việc.

Lưu ý: Bạn cũng có thể xuất sang GitHub.

Sử dụng máy chủ MCP

Các máy chủ MCP cung cấp thêm các công cụ và nguồn dữ liệu để Gemini sử dụng. Ví dụ: bạn có thể thêm máy chủ Firebase MCP để khám phá dữ liệu của mình trong Cloud Firestore bằng ngôn ngữ tự nhiên trong khi tạo hoặc gỡ lỗi ứng dụng.

Thận trọng: Việc thêm một máy chủ MCP vào không gian làm việc sẽ cấp cho máy chủ đó quyền chạy mã và có thể sửa đổi ứng dụng của bạn. Chỉ thêm máy chủ MCP từ các nguồn đáng tin cậy.

Điều kiện tiên quyết

• Nếu máy chủ MCP yêu cầu, hãy đảm bảo bạn đã cài đặt Node.js và npm đang hoạt động.

Chọn một máy chủ MCP tương thích

Firebase Studio có tính năng hỗ trợ cơ bản cho các máy chủ MCP, tức là không phải máy chủ MCP nào cũng tương thích. Khi chọn một máy chủ MCP để thêm vào không gian làm việc Firebase Studio, hãy lưu ý những điều sau:

• Được hỗ trợ:
  • Đầu vào/đầu ra tiêu chuẩn (stdio) hoặc các máy chủ truyền tải HTTP/Sự kiện do máy chủ gửi (SSE) có thể truyền trực tuyến mà không yêu cầu các hình thức xác thực đặc biệt
  • Các công cụ do máy chủ MCP cung cấp
• Hiện không hỗ trợ:
  • Máy chủ yêu cầu giao diện người dùng đồ hoạ hoặc phiên hoạt động trên máy tính
  • Câu lệnh, mẫu hoặc các tài nguyên khác do máy chủ MCP cung cấp

Lưu ý: Bạn có thể truyền các biến môi trường đến máy chủ MCP thông qua tệp .env.

Thêm máy chủ MCP

1. Trong Explorer (Ctrl+Shift+E), hãy chỉnh sửa hoặc tạo tệp cấu hình MCP.

   • Gemini trong cuộc trò chuyện trên Firebase sử dụng .idx/mcp.json.

   • Gemini CLI sử dụng .gemini/settings.json.

   Nếu tệp chưa tồn tại, hãy tạo tệp bằng cách nhấp chuột phải vào thư mục mẹ rồi chọn New file (Tệp mới). Tạo hoặc chỉnh sửa cả hai tệp để sử dụng máy chủ MCP trong Gemini trên Firebase và Gemini CLI.

2. Thêm cấu hình máy chủ vào nội dung của tệp. Ví dụ: để thêm máy chủ Firebase MCP, hãy nhập:

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

   Tệp cấu hình này hướng dẫn Gemini sử dụng máy chủ MCP nào. Trong ví dụ này, chúng tôi đã thêm một máy chủ có tên là firebase. Máy chủ này sẽ dùng lệnh npx để cài đặt và chạy firebase-tools@latest. Các máy chủ MCP khác yêu cầu cấu hình khác, nhưng tuân theo cùng một định dạng chung.

3. Trong cửa sổ dòng lệnh (Shift+Ctrl+C), hãy chạy mọi lệnh cần thiết để hoàn tất quá trình cài đặt. Ví dụ: để sử dụng máy chủ Firebase MCP, hãy nhập lệnh sau để đăng nhập vào tài khoản của bạn:

   firebase login --no-localhost
   

   Làm theo hướng dẫn trên thiết bị đầu cuối để uỷ quyền cho phiên. Một số công cụ yêu cầu dự án Firebase được kết nối. Bạn có thể sử dụng máy chủ Firebase MCP để tạo một dự án hoặc chạy lệnh sau để khởi động một dự án Firebase:

   firebase init
   

   Thao tác này sẽ tạo một tệp firebase.json trong thư mục gốc của bạn.

4. Tạo lại không gian làm việc để hoàn tất quá trình thiết lập:

   1. Mở bảng lệnh (Shift+Ctrl+P).

   2. Nhập Firebase Studio: Rebuild Environment (Firebase Studio: Xây dựng lại môi trường).

Sử dụng các công cụ MCP

Sau khi cài đặt máy chủ MCP mà bạn muốn sử dụng, các công cụ hoặc dữ liệu mà máy chủ đó cung cấp sẽ có trong:

• Gemini CLI
• Gemini trong cuộc trò chuyện Firebase khi sử dụng chế độ Đặc vụ và chế độ Đặc vụ (Chạy tự động)
• App Prototyping agent

Ví dụ: nếu thêm máy chủ Firebase MCP, bạn có thể yêu cầu Gemini tìm nạp cấu hình SDK cho dự án hiện tại, truy xuất dữ liệu được lưu trữ trong Cloud Firestore và Realtime Database, giúp bạn thiết lập các dịch vụ Firebase, và nhiều dịch vụ khác.

Khắc phục sự cố máy chủ MCP

Nếu một máy chủ MCP không hoạt động như mong đợi, hãy mở nhật ký Gemini để kiểm tra lỗi:

1. Trong phần Đầu ra (Shift+Ctrl+U), hãy nhấp vào trình đơn thả xuống rồi chọn Gemini.

2. Kiểm tra những tin nhắn bắt đầu bằng thẻ [MCPManager]. Các nhật ký này chứa thông tin về những máy chủ MCP đã được thiết lập, cùng với mọi thông báo lỗi. Hãy sử dụng thông tin này để khắc phục sự cố về cấu hình. Khi một máy chủ MCP kết nối thành công, bạn sẽ thấy danh sách các công cụ mà máy chủ đó đã thêm.

Hãy thử tạo lại không gian làm việc nếu máy chủ MCP không cài đặt hoặc kết nối được:

1. Mở bảng lệnh (Shift+Ctrl+P).

2. Nhập Firebase Studio: Rebuild Environment (Firebase Studio: Xây dựng lại môi trường).

3. Đợi không gian làm việc của bạn được tạo lại, rồi thử lại để sử dụng máy chủ MCP mà bạn đã chọn.

Nếu máy chủ MCP kết nối nhưng Gemini không sử dụng các công cụ mà máy chủ này cung cấp:

• Bắt đầu một phiên trò chuyện mới với Gemini.

• Nếu Gemini có thể hoàn thành tác vụ mà không cần dùng công cụ MCP, thì Gemini có thể thử một phương thức khác. Nếu bạn muốn dùng một công cụ cụ thể, hãy thử đặt tên cho công cụ đó trong câu lệnh. Ví dụ: bạn có thể nói "Sử dụng firebase_get_sdk_config để lấy cấu hình SDK cho dự án hiện tại".

• Tham gia Chương trình Nhà phát triển của Google.

Các bước tiếp theo

• Tích hợp với Firebase và các dịch vụ của Google.
• Tạo mẫu tuỳ chỉnh.
• Thêm nút Mở trong Firebase Studio.
• Tìm hiểu thêm về Firebase Studio không gian làm việc.
• Tìm hiểu thêm về máy chủ MCP của Firebase.
• Hoàn tất lớp học lập trình về máy chủ MCP của Firebase Studio.