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

Thêm nút "Mở trong Firebase Studio" vào trang web để người dùng có thể nhập mã từ trang web của bạn trực tiếp vào không gian làm việc của Firebase Studio một cách liền mạch, cho phép họ tiếp tục làm việc trong môi trường phát triển dựa trên nền tảng đá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ừ trình chỉnh sửa cơ bản sang môi trường phát triển hoàn chỉnh.

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

Sử dụng SDK Mở trong 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 các đường liên kết thích hợp để tạo và điền sẵn một không gian làm việc mới. SDK 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 để 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ữ Git hoặc Firebase Studio mẫu. Đây là lựa chọn tuyệt vời cho các dự án hoàn chỉnh hoặ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 không gian làm việc được xác định trước trong Firebase Studio.

• Từ một tập hợp các tệp dự án: Tạo không gian làm việc một cách linh hoạt từ một tập hợp các tệp và đoạn mã trực tiếp từ ứng dụng web của bạn. Đây là lựa chọn mạnh mẽ nhất cho sân chơi mã và công cụ 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

SDK Mở trong 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 Firebase Studio không gian làm việc.

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:

   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 không gian làm việc

Khi người dùng tạo không gian làm việc từ 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à trình gọi thiết lập đú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 chính xác.
• Thiết lập môi trường bằng các công cụ và tiện ích chính xác.

Thao tác này sẽ mở một môi trường nơi người dùng có thể xem bản xem trước trực tiếp của ứng dụng và 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 trình nhập chung. Trình nhập này tải các tệp lên không gian làm việc, nhưng người dùng phải thực hiện quá trình thiết lập ban đầu theo cách thủ công. Họ có thể cần:

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

Đối với các dự án này, Firebase Studio 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 lại danh sách các tệp cần nhập.

Khi người dùng nhấp vào Nhập, một không gian làm việc mới Firebase Studio sẽ mở ra. Không gian làm việc này chứa các tệp dự án, bản xem trước ứng dụng và tệp README với 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 Mở trong Firebase Studio SDK 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ể đưa các thuộc tính cấu hình không bắt buộc vào nút:

• label: Đặt nhãn văn bản hiển thị 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.
  • Các 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.
  • Các giá trị được phép: svg hoặc png.

Ví dụ:

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

Các bước tiếp theo

• Cài đặt SDK Mở trong Firebase Studio
• Tìm hiểu cách tuỳ chỉnh không gian làm việcFirebase Studio