Xem trước ứng dụng

Firebase Studio cung cấp một số cách để xem trước và kiểm thử ứng dụng trong quá trình phát triển. Trong đó có việc sử dụng App Prototyping agent và tận dụng trình xem trước web tích hợp, cũng như trình xem trước web và Android có trong không gian làm việc của Firebase Studio.

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

Nếu bạn sử dụng một mẫu hoặc tạo ứng dụng bằng App Prototyping agent, thì các bản xem trước thường đã được định cấu hình cho bạn. Nếu các bản xem trước chưa được thiết lập trong mẫu của bạn, thì bạn có thể định cấu hình chúng 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 sẽ 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 áp dụng dựa trên mẫu mà bạn chọn. Nếu tệp này không có trong Firebase Studio kho lưu trữ mã, 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 bài viết Nix + Firebase Studio.

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

   • Trong bảng lệnh (Cmd+Shift+P/Ctrl+Shift+P), hãy chạy lệnh Firebase Studio: Hard restart.
   • Trong thông báo Environment config updated (Đã cập nhật cấu hình môi trường), hãy nhấp vào Rebuild environment (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 xem trước sẽ xuất hiện trong không gian làm việc của bạn, cho thấy thẻ Android hoặc thẻ Web hoặc cả hai, 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 web trên Chrome và trình mô phỏng Android trong 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.

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

Firebase Studio kết nối 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) để cung cấp cho bạn một vòng lặp phát triển nội bộ được sắp xếp hợp lý. Firebase Studio cung cấp các loại tải lại sau:

• Automatic Hot Reload (Tự động tải lại nhanh): Các thao tác tải lại nhanh sẽ tự động được thực hiện khi bạn lưu một tệp. Đôi khi được gọi là Hot Module Replacement (Thay thế mô-đun nhanh) hoặc HMR, thao tác tải lại nhanh 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 hữu ích để duy trì trạng thái hoạt động của ứng dụng nhưng có thể không phải lúc nào cũng hoạt động như dự kiến.

• Manual Full Reload (Tải lại toàn bộ theo cách thủ công): Tuỳ chọn này tương đương với thao tá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 thao tác tải lại toàn bộ để ghi lại những 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.

• Manual Hard Restart (Khởi động lại hoàn toàn theo cách thủ công): Tuỳ chọn này thực hiện thao tác 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 tất cả các tuỳ chọn tải lại bằng thanh công cụ xem trước hoặc bảng lệnh (Cmd+Shift+P trên Mac hoặc Ctrl+Shift+P trên ChromeOS, Windows hoặc Linux), trong danh mục Firebase Studio.

Để 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 Reload (Tải lại) để làm mới trang. Thao tác này sẽ buộc tải lại toàn bộ. Để làm mới theo một loại 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: Hot Reload (Tải lại nhanh), Full Reload (Tải lại toàn bộ) hoặc Hard Restart (Khởi động lại hoàn toàn).

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

Bạn có thể chia sẻ bản xem trước 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. Trên thanh công cụ xem trước web, hãy nhấp vào biểu tượng Share Preview Link (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 tuỳ chọn sau:

   • Make preview public (Công khai bản xem trước): Cho phép mọi người truy cập công khai 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.

   • Manage workspace access (Quản lý quyền truy cập vào không gian làm việc). 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 Copy preview URL (Sao chép URL 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 lưu tự động 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 thao tác tự động tải lại nhanh. Nếu bạn muốn Firebase Studio lưu công việc của bạn 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.

Phần phụ trợ xem trước bị ngắt kết nối

Bạn có thể yên tâm bỏ qua thông báo "Preview backend disconnected" (Phần phụ trợ xem trước bị ngắt kết nối).

Các bước tiếp theo

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