Tạo nút để nhập mã vào Firebase Studio

Thêm nút "Mở trong Firebase Studio" vào trang web của bạn để cung cấp cho người dùng một cách thức liền mạch để nhập mã từ trang web của bạn trực tiếp vào không gian làm việc Firebase Studio, cho phép họ tiếp tục làm việc trong một môi trường phát triển dựa trên đám mây có tác nhân.

Tính năng này được thiết kế cho:

  • Sân chơi mã, nơi người dùng có thể chuyển từ một trình chỉnh sửa cơ bản sang một môi trường phát triển hoàn chỉnh.

  • Các công cụ tạo nguyên mẫu ứng dụng, nơi trang web của bạn tạo mã và nguyên mẫu trực quan, sau đó người dùng sẽ lặp lại quy trình này trong Firebase Studio.

Sử dụng SDK Mở bằng Firebase Studio

Nút "Mở trong Firebase Studio" được hỗ trợ bởi SDK Mở trong Firebase Studio, một thư viện JavaScript tạo ra các đường liên kết phù hợp để tạo và điền sẵn thông tin cho một không gian làm việc mới. Công cụ này cung cấp một số lựa chọn về cách nhập mã.

Phương thức nhập

Bạn có thể định cấu hình nút này để nhập mã bằng các phương thức sau:

  • Từ kho lưu trữ hoặc mẫu Git: Liên kết đến kho lưu trữ hoặc mẫu Git Firebase Studio. Điều này rất hữu ích cho các dự án hoàn chỉnh hoặc các mẫu được xác định trước. Để biết thêm thông tin về các trường hợp sử dụng này, hãy tham khảo bài viết Tạo lối tắt đến một không gian làm việc được xác định trước trong Firebase Studio.

  • Từ một nhóm tệp dự án: Tạo một không gian làm việc một cách linh hoạt từ một nhóm tệp và đoạn mã ngay trong ứng dụng web của bạn. Đây là lựa chọn mạnh mẽ nhất cho các sân chơi mã và người tạo mẫu ứng dụng, vì lựa chọn này xuất công việc hiện tại của người dùng, ngay cả khi công việc đó không được lưu ở nơi khác.

Thêm nút "Mở trong Firebase Studio" vào trang web của bạn

SDK Open in Firebase Studio: cung cấp mọi thứ bạn cần, bao gồm cả các hàm trợ giúp để tạo hình ảnh nút, tạo đường liên kết sâu và gửi nội dung tệp để tạo không gian làm việc Firebase Studio.

Cách thêm nút "Mở trong Firebase Studio" vào trang web:

  1. Cài đặt gói trong thư mục dự án của bạn:

    npm install @firebase-studio/open-sdk

  2. Thêm đoạn mã sau vào mã của bạn để nhập thư viện:

    import * as FirebaseStudio from '@firebase-studio/open-sdk';

Để biết hướng dẫn chi tiết, ví dụ về mã và tài liệu tham khảo đầy đủ về API, hãy tham khảo tài liệu chính thức về SDK.

Tìm hiểu về môi trường trong không gian làm việc

Khi người dùng tạo một không gian làm việc trên trang web của bạn, Firebase Studio sẽ thiết lập môi trường phát triển cho họ. Mức độ tự động hoá phụ thuộc vào loại dự án.

Môi trường được tối ưu hoá

Đối với các dự án React, Angular và HTML đơn giản, Firebase Studio cung cấp một môi trường được tối ưu hoá, định cấu hình sẵn, miễn là phương thức gọi đặt đúng thuộc tính baselineEnvironment trong đối tượng settings. Điều này có nghĩa là khi người dùng mở đường liên kết trong Firebase Studio, Firebase Studio sẽ tạo không gian làm việc và tự động:

  • Cài đặt tất cả các phần phụ thuộc cần thiết.
  • Định cấu hình và khởi động máy chủ phát triển phù hợp.
  • Thiết lập môi trường bằng các công cụ và tiện ích phù hợp.

Thao tác này sẽ mở một môi trường nơi người dùng có thể xem và mở bản xem trước trực tiếp của ứng dụng, đồng thời tương tác trực tiếp với mã.

Môi trường chung

Đối với tất cả các loại dự án khác, Firebase Studio sử dụng một trình nhập chung. Thao tác này sẽ tải tệp lên không gian làm việc, nhưng người dùng phải thiết lập ban đầu theo cách thủ công. Họ có thể cần phải:

  • Cài đặt thời gian chạy và các phần phụ thuộc của ngôn ngữ.
  • Định cấu hình tệp dev.nix.

Đối với những dự án này, Firebase Studio sẽ tạo một môi trường không tuỳ chỉnh, cho phép người dùng kiểm soát hoàn toàn quá trình thiết lập.

Trải nghiệm người dùng

Đối với cả hai loại không gian làm việc, sau khi người dùng nhấp vào nút "Mở trong Firebase Studio", họ sẽ được nhắc đặt tên cho không gian làm việc và xem danh sách các tệp cần nhập.

Mở trong hộp thoại Nhập không gian làm việc của Firebase Studio

Khi người dùng nhấp vào Nhập, một không gian làm việc Firebase Studio mới sẽ mở ra. Thư mục này chứa các tệp dự án, bản xem trước ứng dụng và tệp README có các bước tiếp theo.

Thiết kế nút "Mở trong Firebase Studio"

Bạn có thể thiết kế nút bằng SDK Mở trong Firebase Studio hoặc sử dụng công cụ sau để tạo HTML cho nút Firebase Studio:

Nếu sử dụng SDK, bạn có thể thêm các thuộc tính cấu hình không bắt buộc cho nút:

  • label: Đặt nhãn văn bản xuất hiện trên nút.
    • Các giá trị được phép: open, try, export hoặc continue.
  • color: Xác định bảng phối màu của nút.
    • Các giá trị được phép: dark, light, blue hoặc bright.
  • size: Chỉ định chiều cao của nút tính bằng pixel.
    • Giá trị được phép: 20 hoặc 32.
  • imageFormat: Xác định định dạng tệp của hình ảnh được tạo.
    • Giá trị được phép: svg hoặc png.

Ví dụ:

img.src = FirebaseStudio.getButtonImageUrl({
  label: 'export',
  color: 'dark',
  size: 32,
  imageFormat: 'svg'
});

Ví dụ về nút Xuất sang Firebase Studio

Các bước tiếp theo