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

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ẫu hoặc tạo ứng dụng bằng App Prototyping agent, 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 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 có thể áp dụng dựa trên mẫu mà bạn chọn. Nếu tệp này 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 Nix + Firebase Studio.

  2. Xây dựng lại môi trường:

    • Từ bảng lệnh (Cmd+Shift+P/Ctrl+Shift+P), hãy chạy lệnh Firebase Studio: Khởi động lại cứng.
    • Trong thông báo Đã cập nhật cấu hình môi trường, 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, cho thấy 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 Chrome và trình mô phỏng Android trong không gian làm việc Flutter. Các không gian này sẽ cài đặt ứng dụng của bạn trong môi trường xem trước. Nhờ đó, bạn có thể kiểm thử ứng dụng của mình một cách toàn diện, 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) để mang đến cho bạn một vòng lặp phát triển nội bộ tinh giản. Firebase Studio cung cấp các loại tải lại sau đây:

  • Tự động tải lại nóng: Thao tác tải lại nóng sẽ tự động diễn ra khi bạn lưu một tệp. Đôi khi được gọi là Hot Module Replacement (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 hay 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 cho việc duy trì trạng thái hoạt động 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: Lựa 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ộ để nắm bắt 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.

  • Khởi động lại cứng theo cách thủ công: Lựa chọn này sẽ 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ể dùng tất cả các lựa 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 máy 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 Tải lại để làm mới trang. Thao tác này buộc hệ thống 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 chế độ làm mới bạn muốn trong trình đơn: Tải lại nhanh, 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 trên web với người khác

Bạn có thể chia sẻ bản xem trước ứng dụng trên web 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 hình ảnh biểu tượng đường liên kết 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 những cách sau:

    • Công khai bản xem trước: Công khai bản xem trước không gian làm việc của bạn. Việc này cho phép mọi người 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 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 không gian làm việc. Chỉ chia sẻ không gian làm việc 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 xem trước để sao chép một đườ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ể 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 sau một giây kể từ khi bạn ngừng nhập, kích hoạt tính năng tải lại nóng 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 lưu tự động.

Định cấu hình tính năng lưu tự động

  1. Mở Firebase Studio.
  2. Nhấp vào biểu tượng Cài đặt.
  3. Tìm Files: Auto Save (Tệp: Tự động lưu) và xác minh rằng trường này được đặt thành `afterDelay`.
  4. Tìm Files: Auto Save Delay (Tệp: Độ trễ khi lưu tự động).
  5. Nhập khoảng thời gian trễ lưu tự động mới, tính bằng mili giây. Giờ đây, những thay đổi đối với công việc của bạn sẽ được tự động lưu dựa trên chế độ cài đặt mới về độ trễ khi lưu tự động.

Tắt tính năng lưu tự động

  1. Mở Firebase Studio.
  2. Nhấp vào biểu tượng Cài đặt.
  3. Tìm Files: Auto Save (Files: Lưu tự động).
  4. Nhấp vào trình đơn thả xuống rồi chọn tắt.

Đã ngắt kết nối với phần phụ trợ xem trước

Bạn có thể yên tâm bỏ qua thông báo "Đã ngắt kết nối phụ trợ xem trước".

Các bước tiếp theo