Melihat pratinjau aplikasi Anda

Project IDX memungkinkan Anda melihat pratinjau pekerjaan dengan merender tampilan langsung aplikasi bersama editor kode. Pratinjau web IDX merender frame inline (iFrame) dari server web aplikasi dan emulator Android berbasis cloud.

Mengaktifkan dan mengonfigurasi lingkungan pratinjau

Untuk melihat pratinjau aplikasi di ruang kerja, Anda harus mengonfigurasi lingkungan pratinjau.

  1. Aktifkan pratinjau di file konfigurasi .idx/dev.nix. IDX akan otomatis membuat file ini saat Anda membuat ruang kerja baru dan menyertakan lingkungan pratinjau apa pun yang berlaku berdasarkan template yang Anda pilih. Jika file tidak ada di repositori kode IDX Anda, buat file tersebut. Tetapkan atribut idx.previews ke true dan tambahkan atribut konfigurasi, seperti yang ditunjukkan contoh berikut:

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

    Untuk daftar lengkap atribut Nix di IDX, lihat Nix + IDX.

  2. Build ulang lingkungan Anda:

    • Jalankan perintah Project IDX: Hard restart dari palet perintah (Cmd+Shift+P/Ctrl+Shift+P).
    • Klik Build ulang lingkungan dari notifikasi Konfigurasi lingkungan diperbarui.

    Saat Anda membuat ulang lingkungan setelah mengubah file dev.nix, panel pratinjau akan muncul di ruang kerja Anda yang menampilkan tab Android dan Web, bergantung pada setelan yang telah Anda aktifkan. Namun, Anda mungkin perlu menunggu sejenak hingga lingkungan di-build ulang. Coba tutup ruang kerja lalu buka kembali dari dasbor IDX.

Menggunakan pratinjau aplikasi

IDX menawarkan pratinjau web di emulator Chrome dan Android (di ruang kerja Flutter) yang menginstal aplikasi Anda di lingkungan pratinjau, sehingga Anda dapat mengujinya secara menyeluruh, dari awal hingga akhir, langsung dari ruang kerja Anda.

Memuat ulang pratinjau untuk web dan Android

Hook IDX ke dalam fungsi hot reload dari framework yang mendasarinya (seperti npm run start dan flutter hot-reload) untuk memberi Anda loop pengembangan internal yang ketat. Bagian ini membahas berbagai jenis pemuatan ulang untuk membantu Anda memecahkan masalah jika perilaku default di IDX tidak berfungsi dengan baik untuk kasus penggunaan Anda.

  • Hot Reload Otomatis: Hot reload otomatis dilakukan saat Anda menyimpan file. Terkadang dikenal sebagai Hot Module Replacement (atau HMR), hot reload mengupdate aplikasi Anda tanpa memuat ulang halaman (untuk aplikasi web) atau tanpa memulai ulang atau menginstal ulang aplikasi (untuk emulator). Pendekatan ini sangat baik untuk mempertahankan status aktif aplikasi, tetapi terkadang tidak berfungsi seperti yang diinginkan.

  • Muat Ulang Penuh Manual: Opsi ini setara dengan refresh halaman (untuk aplikasi web) atau memulai ulang aplikasi (untuk emulator). Sebaiknya gunakan pemuatan ulang penuh untuk mengambil perubahan yang signifikan pada kode sumber, seperti saat memfaktorkan ulang potongan besar kode.

  • Manual Hard Restart: Opsi ini melakukan mulai ulang lengkap sistem pratinjau IDX, yang mencakup menghentikan dan memulai ulang server web aplikasi Anda.

Semua opsi muat ulang tersedia menggunakan toolbar pratinjau atau palet perintah (Cmd+Shift+P di Mac atau Ctrl+Shift+P di ChromeOS, Windows, atau Linux), di bagian kategori IDX.

Untuk menggunakan toolbar pratinjau, ikuti langkah-langkah berikut:

  1. Klik ikon reload untuk memuat ulang halaman. Tindakan ini akan memaksa pemuatan ulang penuh. Untuk jenis refresh yang berbeda, klik panah di samping ikon muat ulang untuk memperluas menu.

  2. Pilih opsi refresh yang Anda inginkan dari menu: Hot Reload, Full Reload, atau Hard Restart.

    Toolbar pratinjau berada di bagian atas panel pratinjau

Membagikan pratinjau web kepada orang lain

Anda dapat membagikan pratinjau web aplikasi kepada orang lain untuk mendapatkan masukan dengan mengaktifkan akses, lalu membagikan link langsung ke pratinjau:

  1. Di toolbar pratinjau web, klik ikon gambar ikon link Bagikan Link Pratinjau, di sebelah kanan kolom URL untuk membuka menu berbagi.

    Pratinjau menu berbagi

  2. Izinkan orang lain mengakses ruang kerja Anda, menggunakan salah satu opsi berikut:

    • Opsi A: Buat pratinjau ruang kerja Anda dapat diakses secara publik dengan memilih Jadikan Pratinjau Publik. Dengan begitu, siapa saja di Internet dapat menjangkau server pratinjau ruang kerja yang sedang berjalan saat ruang kerja aktif, hingga Anda menonaktifkan akses publik.

    • Opsi B. Bagikan ruang kerja Anda hanya kepada orang yang ingin Anda beri akses dengan memilih Kelola Akses Workspace.

  3. Pilih Copy Preview URL untuk menyalin link langsung ke pratinjau ruang kerja, yang kemudian dapat Anda kirimkan kepada pengguna yang ingin Anda beri masukan.

Mengonfigurasi simpan otomatis dan hot reload

Secara default, IDX akan otomatis menyimpan pekerjaan Anda satu detik setelah Anda berhenti mengetik, yang memicu hot reload otomatis. Jika Anda ingin IDX menyimpan pekerjaan pada interval yang berbeda, ubah setelan penyimpanan otomatis. Anda juga dapat menonaktifkan fitur simpan otomatis.

Mengonfigurasi simpan otomatis

  1. Buka Project IDX.
  2. Klik ikon Setelan. Jendela Setelan akan muncul.
  3. Telusuri Files: Auto Save dan pastikan kolom ini disetel ke `afterPenundaan`.
  4. Telusuri File: Penundaan Penyimpanan Otomatis. Kolom Penundaan Simpan Otomatis akan muncul.
  5. Masukkan interval penundaan penyimpanan otomatis baru, yang dinyatakan dalam milidetik. Perubahan pada tugas Anda kini disimpan secara otomatis berdasarkan setelan penundaan penyimpanan otomatis yang baru.

Nonaktifkan simpan otomatis

  1. Buka Project IDX.
  2. Klik ikon Setelan. Jendela Setelan akan muncul.
  3. Telusuri File: Simpan Otomatis.
  4. Klik drop-down dan pilih off. Simpan otomatis sekarang dinonaktifkan.