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

Project IDX cho phép bạn xem trước công việc của mình bằng cách 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ản xem trước IDX trên web hiển thị một khung cùng dòng (iFrame) của máy chủ web của ứng dụng và một trình mô phỏng Android trên đám mây.

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

Để xem trước ứng dụng trong không gian làm việc, bạn phải định cấu hình môi trường xem trước.

  1. Bật bản xem trước trong tệp cấu hình .idx/dev.nix. IDX tự động tạo tệp này khi bạn tạo 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 bạn chọn. Nếu tệp không có trong kho lưu trữ mã IDX, hãy tạo tệp đó. Đặt thuộc tính idx.previews thành true và 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 IDX, see
  # https://developers.google.com/idx/guides/customize-idx-env

  # 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";
      };
    };
  };
}

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

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

    • Chạy lệnh Project IDX: Hard restart (IDX dự án: Khởi động lại hoàn toàn) từ bảng điều khiển lệnh (Cmd+Shift+P/Ctrl+Shift+P).
    • Nhấp vào Tạo lại môi trường từ thông báo Đã cập nhật cấu hình 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 và hiển thị các thẻ Android và Web, tuỳ thuộc vào tính năng bạn đã bật. Tuy nhiên, bạn có thể phải đợi một lúc để môi trường được tạo lại. Hãy thử đóng không gian làm việc rồi mở lại không gian làm việc đó từ trang tổng quan IDX.

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

IDX cung cấp bản xem trước trên web trên trình mô phỏng Chrome và Android (trên 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. Nhờ đó, bạn có thể kiểm thử ứng dụng một cách toàn diện, 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

IDX kết nối với các chức năng tải lại nóng 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ộ chặt chẽ. Phần này trình bày các loại tải lại để giúp bạn khắc phục sự cố nếu hành vi mặc định trên IDX không phù hợp với trường hợp sử dụng của bạn.

  • Tự động tải lại nóng: Quá trình tải lại nóng được tự động thực hiện khi bạn lưu tệp. Đôi khi được gọi là Thay thế mô-đun nóng (hay HMR), quá trình 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 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 rất hiệu quả để duy trì trạng thái hoạt động của ứng dụng nhưng đôi khi có thể không hoạt động như dự kiến.

  • Tải lại toàn bộ 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 sẽ khởi động lại hoàn toàn hệ thống xem trước của IDX, 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 lựa chọn tải lại bằng cách sử dụ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 IDX.

Để 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: Hot Upload (Tải lại nóng), Full Reload (Tải lại đầy đủ) hoặc Hard Restart (Khởi động lại cứng).

    Thanh công cụ xem trước nằm ở đầu bảng điều khiển xem trước

Chia sẻ bản xem trước trên 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 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ẻ.

    Xem trước 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:

    • Cách A: 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 bằng cách chọn Đăng công khai bản xem trước. Đ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 của không gian làm việc 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.

    • Cách B. 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 bằng cách chọn Quản lý quyền truy cập vào không gian làm việc.

  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.

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

Theo mặc định, IDX 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 nóng tự động. Nếu bạn muốn IDX lưu công việc của mình vào 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.

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

  1. Mở Project IDX.
  2. Nhấp vào biểu tượng Cài đặt. Cửa sổ Settings (Cài đặt) sẽ xuất hiện.
  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 kiếm Files: Auto Save Delay (Tệp: Tự động lưu trễ). Trường Tự động lưu trễ sẽ xuất hiện.
  5. Nhập khoảng thời gian trễ tự động lưu mới, được biểu thị bằng mili giây. Giờ đây, các thay đổi đối với công việc của bạn sẽ được lưu tự động dựa trên chế độ cài đặt độ trễ tự động lưu mới.

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

  1. Mở Project IDX.
  2. Nhấp vào biểu tượng Cài đặt. Cửa sổ Settings (Cài đặt) sẽ xuất hiện.
  3. Tìm mục Files: Auto Save (Tệp: Tự động lưu).
  4. Nhấp vào trình đơn thả xuống rồi chọn tắt. Tính năng tự động lưu hiện đã bị tắt.