Firebase Studio sẽ ngừng hoạt động từ ngày 22 tháng 3 năm 2027. Kể từ ngày 22 tháng 6 năm 2026, chúng tôi sẽ vô hiệu hoá tính năng tạo không gian làm việc mới và đăng ký người dùng. Bạn có thể tiếp tục làm việc và di chuyển các không gian làm việc hiện có sang Google AI Studio hoặc Google Antigravity. Tìm hiểu cách di chuyển.

Mọi ứng dụng đã triển khai cho Firebase sẽ tiếp tục chạy ngay cả sau ngày ngừng hoạt động. Ngoài ra, tất cả các sản phẩm cốt lõi của Firebase (như Firestore, Xác thực, Lưu trữ ứng dụng, v.v.) đều không bị ảnh hưởng khi Firebase Studio ngừng hoạt động.

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

Tạo mẫu tuỳ chỉnh

Firebase Studio cung cấp nhiều mẫu tích hợp sẵn bao gồm tất cả các tệp, gói hệ thống (ví dụ: trình biên dịch) và tiện ích mà bạn cần để nhanh chóng bắt đầu sử dụng một ngôn ngữ hoặc khung.

Bạn cũng có thể khởi chạy không gian làm việc Firebase Studio bằng các mẫu Cộng đồng được lưu trữ trên GitHub. Để biết thêm thông tin về cách khởi chạy không gian làm việc mới từ một mẫu, hãy xem bài viết Tạo không gian làm việc.Firebase Studio

Hầu hết người dùng sẽ sử dụng các mẫu tích hợp sẵn hoặc nhập dự án từ Git, nhưng đối với các trường hợp sử dụng nâng cao hơn, bạn có thể tạo mẫu của riêng mình:

Nếu bạn đang tạo khung, thư viện hoặc dịch vụ của riêng mình, thì bạn có thể cho phép người dùng nhanh chóng bắt đầu sử dụng công nghệ của bạn mà không cần rời khỏi trình duyệt, với toàn bộ sức mạnh của máy ảo dựa trên đám mây.
Nếu có ngăn xếp công nghệ ưu tiên cho các dự án, bạn có thể đơn giản hoá quy trình bắt đầu dự án mới bằng mẫu tuỳ chỉnh.
Nếu bạn đang dạy người khác, chẳng hạn như thông qua hướng dẫn hoặc lớp học lập trình, bạn có thể loại bỏ một số bước ban đầu cho học viên bằng cách định cấu hình trước điểm bắt đầu cho lớp học lập trình dưới dạng mẫu tuỳ chỉnh.

Sau khi tạo và kiểm thử mẫu tuỳ chỉnh, bạn có thể tạo đường liên kết cho mẫu đó để đặt trên trang web, kho lưu trữ Git README tệp, trang chi tiết gói (ví dụ: trong NPM) hoặc bất kỳ vị trí nào khác mà bạn muốn người dùng bắt đầu sử dụng công nghệ của bạn.

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

Trước khi bạn bắt đầu:

Tìm hiểu cách sử dụng tệp idx/dev.nix để tuỳ chỉnh môi trường.
Làm quen với các kiến thức cơ bản về ngôn ngữ Nix và luôn tham khảo tài liệu.

Cấu trúc tệp mẫu

Mẫu Firebase Studio là kho lưu trữ Git công khai (hoặc thư mục hoặc nhánh trong kho lưu trữ) chứa ít nhất 2 tệp:

idx-template.json bao gồm siêu dữ liệu cho mẫu, trong đó có tên, nội dung mô tả và các tham số mà người dùng có thể thấy để định cấu hình mẫu. Ví dụ: bạn có thể cho phép người dùng chọn trong số một số ngôn ngữ lập trình hoặc trường hợp sử dụng mẫu. Firebase Studio sử dụng thông tin này để chuẩn bị giao diện người dùng hiển thị cho người dùng khi họ chọn tạo không gian làm việc mới từ mẫu của bạn.
idx-template.nix là tệp được viết bằng ngôn ngữ Nix, chứa tập lệnh shell Bash (được gói trong hàm Nix) có chức năng:
1. Tạo thư mục làm việc cho không gian làm việc mới.
2. Thiết lập môi trường bằng cách tạo tệp .idx/dev.nix. Xin lưu ý rằng bạn cũng có thể chỉ chạy công cụ tạo khung dự án như flutter create hoặc npm init trong tập lệnh này, hoặc chạy tập lệnh tuỳ chỉnh được viết bằng Go, Python, Node.js hoặc ngôn ngữ khác.
  
  Tệp này sẽ được thực thi bằng các tham số do người dùng chỉ định khi Firebase Studio tải mẫu.

Các tệp khác có thể được đưa vào cùng với 2 tệp này để sử dụng trong idx-template.nix nhằm tạo thực thể cho mẫu. Ví dụ: bạn có thể đưa tệp .idx/dev.nix cuối cùng hoặc thậm chí đưa tất cả các tệp tạo khung vào kho lưu trữ.

Tạo mẫu khởi động

Để đẩy nhanh quá trình tạo mẫu, bạn nên bắt đầu bằng một trong các phương thức sau để tạo mẫu Firebase Studio mà bạn có thể tuỳ chỉnh thêm:

Biến mọi kho lưu trữ công khai trên GitHub thành mẫu
Sử dụng mẫu chính thức hoặc mẫu cộng đồng làm cơ sở cho mẫu của bạn

Ví dụ cơ bản: Biến mọi kho lưu trữ công khai trên GitHub thành mẫu

Trước khi đi vào chi tiết về cách xác định idx-template.json và idx-template.nix, bạn nên xem mẫu ví dụ cơ bản:

Không chứa tham số mà người dùng có thể định cấu hình.
Sao chép tất cả các tệp trong kho lưu trữ mẫu (ngoại trừ 2 tệp idx-template) vào không gian làm việc của người dùng. Đã có thư mục con .idx chứa tệp dev.nix xác định môi trường.

Nếu bạn thêm các tệp sau vào bất kỳ kho lưu trữ công khai nào trên GitHub (hoặc thư mục con hoặc nhánh), thì thao tác này sẽ biến kho lưu trữ đó thành mẫu Firebase Studio.

`idx-template.json`

{
  "name": "Hello world",
  "description": "A template for a CLI program that prints 'hello world'",
  "icon": "https://www.gstatic.com/images/branding/productlogos/studio/v1/192px.svg",
  "params": []
}

`idx-template.nix`

# No user-configurable parameters
{ pkgs, ... }: {
  # Shell script that produces the final environment
  bootstrap = ''
    # Copy the folder containing the `idx-template` files to the final
    # project folder for the new workspace. ${./.} inserts the directory
    # of the checked-out Git folder containing this template.
    cp -rf ${./.} "$out"

    # Set some permissions
    chmod -R +w "$out"

    # Remove the template files themselves and any connection to the template's
    # Git repository
    rm -rf "$out/.git" "$out/idx-template".{nix,json}
  '';
}

Chuyển sang phần Tuỳ chỉnh mẫu để tìm hiểu về các thay đổi khác mà bạn có thể thực hiện để tuỳ chỉnh mẫu.

Tạo mẫu tuỳ chỉnh bằng mẫu chính thức hoặc mẫu cộng đồng

Nhóm Firebase Studio duy trì 2 kho lưu trữ cho Firebase Studio mẫu:

Mẫu chính thức: Đây là các mẫu mà bạn chọn trực tiếp trên Firebase Studio trang tổng quan khi tạo ứng dụng mới.
Mẫu cộng đồng: Các mẫu này cho phép đóng góp từ cộng đồng nguồn mở. Để sử dụng mẫu cộng đồng, hãy sao chép kho lưu trữ Git của mẫu Cộng đồng. Bạn có thể sử dụng đường liên kết đầy đủ đến mẫu mà bạn muốn sử dụng.

**Lưu ý:** Để đóng góp cho cộng đồng bằng cách thêm mẫu mới hoặc cập nhật mẫu hiện có, hãy gửi yêu cầu kéo.

Cách tạo mẫu tuỳ chỉnh dựa trên mẫu hiện có:

Quyết định mẫu cần sử dụng làm cơ sở cho mẫu tuỳ chỉnh, sau đó sao chép dự án.
Tuỳ chỉnh idx-template.json, idx-template.nix, và .idx/dev.nix theo nhu cầu, bắt đầu bằng phần Tuỳ chỉnh mẫu.
Kiểm tra các thay đổi trong kho lưu trữ của bạn.
Làm theo hướng dẫn trong bài viết Tạo không gian làm việc mới cho mẫu để xuất bản và kiểm thử mẫu. Nếu bạn sử dụng kho lưu trữ lồng nhau, hãy liên kết trực tiếp đến kho lưu trữ đó trong URL. Ví dụ: nếu bạn đang sử dụng mẫu cộng đồng "Vanilla Vite", bạn sẽ cung cấp và kiểm thử không gian làm việc mới bằng URL sau:
```
https://studio.firebase.google.com/new?template=https://github.com/firebase-studio/community-templates/tree/main/vite-vanilla
```

Chuyển sang phần Tuỳ chỉnh mẫu để tìm hiểu về các thay đổi khác mà bạn có thể thực hiện để tuỳ chỉnh mẫu.

Tuỳ chỉnh mẫu của bạn

Giờ đây, khi đã tạo mẫu cơ bản để xây dựng, bạn có thể chỉnh sửa các tệp idx-template.json, idx-template.nix và .idx/dev.nix cho phù hợp với yêu cầu của mình. Bạn có thể muốn tuỳ chỉnh các cấu hình khác:

Thêm gói hệ thống vào tập lệnh bootstrap.
Thêm tham số mà người dùng có thể định cấu hình
Chọn tệp cần mở theo mặc định
Chọn biểu tượng không gian làm việc mặc định

Sử dụng các gói hệ thống khác trong tập lệnh `bootstrap`

Ví dụ cơ bản chỉ sử dụng các lệnh POSIX cơ bản để sao chép tệp vào đúng vị trí. Tập lệnh bootstrap của mẫu có thể yêu cầu cài đặt thêm các tệp nhị phân, chẳng hạn như git, node, python3 hoặc các tệp khác.

Bạn có thể cung cấp thêm các gói hệ thống cho tập lệnh khởi động bằng cách chỉ định packages trong tệp idx-template.nix, giống như cách bạn tuỳ chỉnh không gian làm việc bằng các gói hệ thống khác bằng cách thêm vào packages trong tệp dev.nix.

Dưới đây là ví dụ về cách thêm pkgs.nodejs, bao gồm các tệp nhị phân như node, npx và npm:

# idx-template.nix
{pkgs}: {
  packages = [
    # Enable "node", "npm" and "npx" in the bootstrap script below.
    # Note, this is NOT the list of packages available to the workspace once
    # it's created. Those go in .idx/dev.nix
    pkgs.nodejs
  ];

  bootstrap = ''
    mkdir "$out"
    # We can now use "npm"
    npm init --yes my-boot-strap@latest "$out"
  ''
}

Thêm tham số mà người dùng có thể định cấu hình

Để cho phép người dùng tuỳ chỉnh điểm bắt đầu cho dự án mới, bạn có thể tạo nhiều mẫu hoặc tạo một mẫu có tham số. Đây là lựa chọn tuyệt vời nếu các điểm bắt đầu khác nhau của bạn chỉ là các giá trị khác nhau được truyền đến công cụ CLI (ví dụ: --language=js so với --language=ts).

Để thêm tham số, bạn sẽ:

Mô tả tham số trong đối tượng params của tệp siêu dữ liệu idx-template.json. Firebase Studio sử dụng thông tin trong tệp này để chuẩn bị giao diện người dùng (chẳng hạn như hộp đánh dấu, trình đơn thả xuống và trường văn bản) hiển thị cho người dùng mẫu của bạn.
Cập nhật tập lệnh khởi động idx-template.nix để sử dụng các giá trị mà người dùng đã chọn khi tạo thực thể cho mẫu.

Mô tả tham số trong `idx-template.json`

Dưới đây là ví dụ về cách thêm tham số enum, mà Firebase Studio hiển thị dưới dạng trình đơn thả xuống hoặc nhóm nút chọn, tuỳ thuộc vào số lượng lựa chọn:

{
  "name": "Hello world",
  "description": "A hello world app",
  "params": [
    {
      "id": "language",
      "name": "Programming Language",
      "type": "enum",
      "default": "ts",
      "options": {
        "js": "JavaScript",
        "ts": "TypeScript"
      },
      "required": true
    }
  ]
}

Vì có 2 giá trị (JavaScript và TypeScript), nên giao diện người dùng sẽ hiển thị nhóm nút chọn cho 2 lựa chọn và truyền giá trị ts hoặc js đến tập lệnh idx-template.nix.

Mỗi đối tượng tham số có các thuộc tính sau:

TÀI SẢN	LOẠI	NỘI DUNG MÔ TẢ
id	`string`	Mã nhận dạng riêng biệt của tham số, tương tự như tên biến.
name	`string`	Tên hiển thị cho tham số này.
type	`string`	Chỉ định thành phần giao diện người dùng cần sử dụng cho tham số này và kiểu dữ liệu cần truyền đến tập lệnh khởi động. Các giá trị hợp lệ là: `"enum"` – Hiển thị trình đơn thả xuống hoặc nhóm nút chọn và truyền `string` đến tập lệnh khởi động `"boolean"` – Hiển thị hộp đánh dấu và truyền `true` hoặc `false` `"text"` – Hiển thị trường văn bản và truyền `string`
tuỳ chọn	`object`	Đối với các tham số `enum`, tham số này biểu thị các lựa chọn để hiển thị cho người dùng. Ví dụ: nếu các lựa chọn là `{"js": "JavaScript", ...}`, "JavaScript" sẽ được hiển thị dưới dạng lựa chọn và khi được chọn, giá trị của tham số này sẽ là `js`.
mặc định	`string` hoặc `boolean`	Đặt giá trị ban đầu trong giao diện người dùng. Đối với các tham số `enum`, giá trị này phải là một trong các khoá trong `options`. Đối với các tham số `boolean`, giá trị này phải là `true` hoặc `false`.
bắt buộc	`boolean`	Cho biết tham số này là bắt buộc.

Sử dụng giá trị tham số trong `idx-template.nix`

Sau khi xác định đối tượng params trong tệp idx-template.json, bạn có thể bắt đầu tuỳ chỉnh tập lệnh khởi động dựa trên các giá trị tham số mà người dùng chọn.

Theo ví dụ trong phần trước, nếu bạn có một tham số có mã nhận dạng language là enum có các giá trị có thể là ts hoặc js, bạn có thể sử dụng như sau:

# idx-template.nix
# Accept additional arguments to this template corresponding to template
# parameter IDs, including default values (language=ts by default in this example).
{ pkgs, language ? "ts", ... }: {
  packages = [
    pkgs.nodejs
  ];

  bootstrap = ''
    # We use Nix string interpolation to pass the user's chosen programming
    # language to our script.
    npm init --yes my-boot-strap@latest "$out" -- --lang=${language}
  ''
}

Một mẫu phổ biến khác là bao gồm nội dung có điều kiện tuỳ thuộc vào giá trị của chuỗi. Một cách khác để viết ví dụ trước là:

npm init --yes my-boot-strap@latest "$out" -- \
    ${if language == "ts" then "--lang=ts" else "--lang=js" }

Chọn tệp cần mở theo mặc định

Bạn nên tuỳ chỉnh tệp cần mở để chỉnh sửa khi tạo không gian làm việc mới bằng mẫu của bạn. Ví dụ: nếu mẫu của bạn dành cho trang web cơ bản, bạn có thể muốn mở các tệp HTML, JavaScript và CSS chính.

Để tuỳ chỉnh tệp cần mở theo mặc định, hãy cập nhật tệp .idx/dev.nix (không phải tệp idx-template.nix!) để bao gồm hook không gian làm việc onCreate có thuộc tính openFiles, như sau:

# .idx/dev.nix
{pkgs}: {
  ...
  idx = {
    # Workspace lifecycle hooks
    workspace = {
      # Runs when a workspace is first created with this `dev.nix` file
      onCreate = {
        # Open editors for the following files by default, if they exist.
        # The last file in the list will be focused.
        default.openFiles = [
          "src/index.css"
          "src/index.js"
          "src/index.html"
        ];
        # Include other scripts here, as needed, for example:
        # installDependencies = "npm install";
      };
      # To run something each time the workspace is (re)started, use the `onStart` hook
    };
    # Enable previews and customize configuration
    previews = { ... };
  };
}

Chọn biểu tượng không gian làm việc mặc định

Bạn có thể chọn biểu tượng mặc định cho các không gian làm việc được tạo bằng mẫu của bạn bằng cách đặt tệp PNG có tên icon.png bên cạnh tệp dev.nix, bên trong thư mục .idx.

Kiểm thử mẫu trong không gian làm việc mới

Cách đơn giản nhất để kiểm thử mẫu từ đầu đến cuối là tạo không gian làm việc mới bằng mẫu đó. Truy cập vào đường liên kết sau, thay thế ví dụ bằng URL kho lưu trữ GitHub của mẫu:

https://idx.google.com/new?template=https://github.com/my-org/my-repo

Bạn có thể thêm nhánh và thư mục con nếu muốn. Tất cả các đường liên kết sau đều hợp lệ, miễn là chúng có thể truy cập công khai:

https://github.com/my-org/my-repo/
https://github.com/my-org/my-repo/tree/main/path/to/myidxtemplate
https://github.com/my-org/my-repo/tree/branch
https://github.com/my-org/my-repo/tree/branch/path/to/myidxtemplate

Đây cũng là URL mà bạn sẽ chia sẻ với người khác để họ có thể sử dụng mẫu mới của bạn hoặc URL mà bạn sẽ liên kết đến từ nút "Mở trong Firebase Studio".

Sau khi xác nhận rằng mẫu của bạn hoạt động như dự kiến, hãy xuất bản mẫu đó lên kho lưu trữ GitHub và chia sẻ cùng một đường liên kết mà bạn đã sử dụng khi tạo không gian làm việc để kiểm thử.

Để giúp người dùng dễ dàng tìm thấy mẫu của bạn hơn, hãy thêm nút "Mở trong Firebase Studio" vào trang web hoặc tệp README của kho lưu trữ.