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) 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 Anda. IDX akan otomatis membuat file ini saat Anda membuat ruang kerja baru dan menyertakan semua lingkungan pratinjau yang berlaku berdasarkan template yang Anda pilih. Jika file tidak ada dalam repositori kode IDX Anda, buat file tersebut. Tetapkan atribut idx.previews ke true dan tambahkan atribut konfigurasi, seperti yang ditunjukkan pada 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";
       };
       # 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. Membangun kembali lingkungan Anda:

   • Jalankan perintah Project IDX: Hard restart dari palet perintah (Cmd+Shift+P/Ctrl+Shift+P).
   • Klik Rebuild environment dari notifikasi Environment config updated.

   Saat Anda mem-build ulang lingkungan setelah memodifikasi file dev.nix, panel pratinjau akan muncul di ruang kerja yang menampilkan tab Android dan Web, bergantung pada apa yang telah Anda aktifkan. Namun, Anda mungkin perlu menunggu beberapa saat sampai lingkungan selesai dibangun ulang. Coba tutup ruang kerja lalu buka kembali dari dasbor IDX.

Poin Penting: Anda dapat melihat pratinjau aplikasi di tab browser terpisah dengan mengklik ikon buka di jendela baru pada toolbar jendela pratinjau. Link pop-out ini juga berguna untuk menunjukkan progres pekerjaan Anda kepada teman atau kolega melalui berbagi workspace.

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 sepenuhnya, dari ujung ke ujung, langsung dari ruang kerja Anda.

Memuat ulang pratinjau untuk web dan Android

IDX mengaitkan ke 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 apakah 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 akan mengupdate aplikasi 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 diharapkan.

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

• Manual Hard Restart: Opsi ini menjalankan mulai ulang penuh sistem pratinjau IDX, yang mencakup penghentian dan mulai 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), dalam kategori IDX.

Untuk menggunakan toolbar pratinjau, ikuti langkah-langkah berikut:

1. Klik ikon reload untuk memuat ulang halaman. Ini 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.

   

Mengonfigurasi simpan otomatis dan hot reload

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

Konfigurasi simpan otomatis

1. Buka Project IDX.
2. Klik ikon Setelan. Jendela Settings akan muncul.
3. Telusuri Files: Auto Save dan pastikan kolom tersebut disetel ke `afterDelay`.
4. Telusuri Files: Auto Save Penundaan. 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 simpan otomatis yang baru.

Nonaktifkan simpan otomatis

1. Buka Project IDX.
2. Klik ikon Setelan. Jendela Settings akan muncul.
3. Telusuri Files: Auto Save.
4. Klik drop-down dan pilih nonaktif. Penyimpanan otomatis kini dinonaktifkan.