Xem trước ứng dụng của bạn

Firebase Studio cung cấp một trình xem trước hiển thị chế độ xem trực tiếp của ứng dụng cùng với trình soạn thảo mã.

Bật và định cấu hình môi trường xem trước

Nếu bạn sử dụng mẫu, thì bản xem trước thường đã được định cấu hình cho bạn. Nếu chưa thiết lập bản xem trước trong mẫu, bạn có thể định cấu hình các bản xem trước đó trong tệp cấu hình Nix của dự án.

1. Trong không gian làm việc, hãy mở .idx/dev.nix.

   Firebase Studio tự động tạo tệp này khi bạn tạo một không gian làm việc mới và bao gồm mọi môi trường xem trước hiện có dựa trên mẫu bạn chọn. Nếu tệp không có trong kho lưu trữ mã Firebase Studio, hãy tạo tệp đó rồi đặt thuộc tính idx.previews thành true. Sau đó, hãy thêm các thuộc tính cấu hình, như trong ví dụ sau:

   { pkgs, ... }: {
   
     # NOTE: This is an excerpt of a complete Nix configuration example.
     # For more information about the dev.nix file in Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # Enable previews and customize configuration
     idx.previews = {
       enable = true;
       previews = {
         # The following object sets web 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";
         };
         # The following object sets Android previews
         # Note that this is supported only on Flutter workspaces
         android = {
           manager = "flutter";
         };
       };
     };
   }
   

   Để xem danh sách đầy đủ các thuộc tính Nix trong Firebase Studio, hãy xem phần Nix + Firebase Studio.

2. Tạo lại môi trường:

   • Trên bảng lệnh (Cmd+Shift+P/Ctrl+Shift+P), hãy chạy lệnh Firebase Studio: Khởi động lại hoàn toàn.
   • Trong thông báo Cấu hình môi trường đã cập nhật, hãy nhấp vào Tạo lại môi trường.

   Khi bạn tạo lại môi trường sau khi sửa đổi tệp dev.nix, bảng điều khiển xem trước sẽ xuất hiện trong không gian làm việc của bạn, hiển thị một hoặc cả hai thẻ Android và Web, tuỳ thuộc vào những gì bạn đã bật.

Sử dụng bản xem trước ứng dụng

Firebase Studio cung cấp bản xem trước trên web trên trình mô phỏng Chrome và Android trong các không gian làm việc Flutter cài đặt ứng dụng của bạn trên môi trường xem trước. Điều này cho phép bạn kiểm thử toàn bộ ứng dụng, từ đầu đến cuối, ngay trong không gian làm việc của mình.

Làm mới bản xem trước cho web và Android

Firebase Studio sẽ liên kết với các chức năng tải lại nhanh của các khung cơ bản (như npm run start và flutter hot-reload) để mang đến cho bạn một vòng lặp phát triển nội bộ hợp lý. Firebase Studio cung cấp các loại tải lại sau:

• Tự động tải lại nóng: Tự động tải lại nóng được thực hiện khi bạn lưu một tệp. Đôi khi được gọi là Thay thế mô-đun nóng (hoặc HMR), tính năng tải lại nóng sẽ cập nhật ứng dụng của bạn mà không cần tải lại trang (đối với ứng dụng web) hoặc không cần khởi động lại hoặc cài đặt lại ứng dụng (đối với trình mô phỏng). Phương pháp này rất hữu ích trong việc duy trì trạng thái trực tiếp của ứng dụng, nhưng không phải lúc nào cũng hoạt động như dự kiến.

• Tải lại toàn bộ theo cách thủ công: Tuỳ chọn này tương đương với việc làm mới trang (đối với ứng dụng web) hoặc khởi động lại ứng dụng (đối với trình mô phỏng). Bạn nên sử dụng tính năng tải lại toàn bộ để ghi lại các thay đổi đáng kể đối với mã nguồn, chẳng hạn như khi tái cấu trúc các đoạn mã lớn.

• Khởi động lại hoàn toàn theo cách thủ công: Tuỳ chọn này thực hiện khởi động lại hoàn toàn hệ thống xem trước của Firebase Studio, bao gồm cả việc dừng và khởi động lại máy chủ web của ứng dụng.

Bạn có thể sử dụng thanh công cụ xem trước hoặc bảng điều khiển lệnh (Cmd+Shift+P trên máy Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux) trong danh mục Firebase Studio để sử dụng tất cả các tuỳ chọn tải lại.

Để sử dụng thanh công cụ xem trước, hãy làm theo các bước sau:

1. Nhấp vào biểu tượng Tải lại để làm mới trang. Thao tác này buộc tải lại toàn bộ. Để làm mới theo một cách khác, hãy nhấp vào mũi tên bên cạnh biểu tượng tải lại để mở rộng trình đơn.

2. Chọn tuỳ chọn làm mới mà bạn muốn trong trình đơn: Tải lại nóng, Tải lại toàn bộ hoặc Khởi động lại hoàn toàn.

Chia sẻ bản xem trước trang web của bạn với người khác

Bạn có thể chia sẻ bản xem trước trên web của ứng dụng với người khác để nhận ý kiến phản hồi bằng cách bật quyền truy cập rồi chia sẻ đường liên kết trực tiếp đến bản xem trước:

1. Trong thanh công cụ xem trước trên web, hãy nhấp vào biểu tượng Chia sẻ đường liên kết xem trước ở bên phải thanh địa chỉ để mở trình đơn chia sẻ.

2. Cho phép người khác truy cập vào không gian làm việc của bạn bằng một trong các cách sau:

   • Đăng công khai bản xem trước: Cho phép mọi người truy cập vào bản xem trước không gian làm việc của bạn. Điều này cho phép bất kỳ ai trên Internet truy cập vào máy chủ xem trước đang chạy trên không gian làm việc của bạn trong khi không gian làm việc của bạn đang hoạt động và cho đến khi bạn tắt quyền truy cập công khai.

   • Quản lý quyền truy cập vào Workspace. Chỉ chia sẻ không gian làm việc của bạn với những người mà bạn muốn cấp quyền truy cập.

3. Chọn Sao chép URL bản xem trước để sao chép đường liên kết trực tiếp đến bản xem trước không gian làm việc. Sau đó, bạn có thể gửi đường liên kết này cho những người mà bạn muốn nhận ý kiến phản hồi. Bạn cũng có thể sử dụng mã QR xuất hiện để mở bản xem trước trên thiết bị di động.

Định cấu hình tính năng tự động lưu và tải lại nhanh

Theo mặc định, Firebase Studio sẽ tự động lưu công việc của bạn một giây sau khi bạn ngừng nhập, kích hoạt tính năng tải lại nhanh tự động. Nếu bạn muốn Firebase Studio lưu công việc của mình theo một khoảng thời gian khác, hãy thay đổi chế độ cài đặt tự động lưu. Bạn cũng có thể tắt tính năng tự động lưu.

Các bước tiếp theo

• Xuất bản bằng Firebase.
• Theo dõi ứng dụng.