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 kết xuất 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 web IDX hiển thị một khung nội tuyến (iFrame) của máy chủ web ứ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 tính năng xem trước trong tệp cấu hình .idx/dev.nix. IDX sẽ 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 thích hợp dựa trên mẫu bạn chọn. Hãy tạo tệp nếu không có trong kho lưu trữ mã IDX. Đặ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";
    };
    # 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 Nix + IDX.

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

    • Chạy lệnh Project IDX: Khởi động lại cứng trong bảng lệnh (Cmd+Shift+P/Ctrl+Shift+P).
    • Nhấp vào Rebuild environment (Tạo lại môi trường) trong thông báo Environment config updated (Đã 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 của bạn 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ể cần phải chờ một thời gian để môi trường xây dựng lại. Hãy thử đóng không gian làm việc rồi mở lại 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 cho trình mô phỏng Chrome và Android (trên không gian làm việc ảo) giúp 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 đầy đủ, từ đầu đến cuối, ngay từ 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 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 vòng lặp phát triển nội bộ chặt chẽ. Phần này đề cập đến các loại hình tải lại khác nhau để giúp bạn khắc phục sự cố nếu hành vi mặc định trên IDX không hoạt động tốt cho 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 một 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 cần khởi động lại hay cài đặt lại ứng dụng (đối với trình mô phỏng). Đây là phương pháp rất phù hợp để duy trì trạng thái trực tiếp của ứng dụng nhưng đôi khi có thể không hoạt động như mong đợi.

  • 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 tải lại toàn bộ để ghi lại những thay đổi quan trọng đối với mã nguồn, chẳng hạn như khi tái cấu trúc phần mã lớn.

  • Khởi động lại cứng theo cách thủ công: Tuỳ chọn này thực hiện quá trình 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 mọi tuỳ 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 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 phải tải lại toàn bộ. Đối với loại làm mớ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 trên trình đơn: HotUpload (Tải lại nổi bật), Full Reload (Tải lại toàn bộ) hoặc Hard Restart (Khởi động lại cứng).

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

Định cấu hình tính năng lưu tự động 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 dừng nhập, kích hoạt quá trình tự động tải lại nó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 lưu tự động.

Đị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ổ Cài đặt sẽ xuất hiện.
  3. Tìm tệp Files: Auto Save (Tệp: Tự động lưu) rồi xác minh rằng trường này được đặt thành "afterDelay".
  4. Tìm kiếm tệp Files: Auto Save Delay (Tệp: Độ trễ tự động lưu). Trường Auto Save Delay (Độ trễ tự động lưu) sẽ xuất hiện.
  5. Nhập khoảng thời gian trễ mới cho chế độ lưu tự động, tính bằng mili giây. Các thay đổi đối với công việc của bạn hiện được lưu tự động dựa trên chế độ cài đặt mới cho độ trễ tự động lưu.

Tắt 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ổ Cài đặt sẽ xuất hiện.
  3. Tìm tệp 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 lưu tự động hiện đã bị tắt.