Melihat pratinjau aplikasi Anda

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

Mengaktifkan dan mengonfigurasi lingkungan pratinjau

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

1. Aktifkan pratinjau di file konfigurasi .idx/dev.nix Anda. IDX membuat file ini secara otomatis saat Anda membuat ruang kerja baru dan akan menyertakan semua lingkungan pratinjau yang dapat diterapkan berdasarkan template yang pilih. Jika file tidak ada di repositori kode IDX Anda, buat file tersebut. Setel atribut idx.previews ke true dan tambahkan atribut konfigurasi, sebagai contoh berikut menunjukkan:

   { 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 Environment config updated notifikasi.

   Saat Anda membangun ulang lingkungan setelah memodifikasi file dev.nix, elemen panel pratinjau muncul di ruang kerja Anda yang menampilkan Android dan Web tab, tergantung pada apa yang telah Anda aktifkan. Namun, Anda mungkin perlu menunggu beberapa saat sampai lingkungan dibuat ulang. Coba menutup ruang kerja dan kemudian membukanya kembali dari Dasbor IDX.

Poin Penting: Anda dapat melihat pratinjau aplikasi di tab browser terpisah dengan mengklik ikon buka di jendela baru di toolbar jendela pratinjau. Tautan pop-up ini juga berguna untuk mendemonstrasikan pekerjaan yang sedang dilakukan kepada teman atau kolega melalui berbagi ruang kerja.

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.

Muat 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 memberikan rangkuman yang rapat pengembangan aplikasi. Bagian ini membahas berbagai jenis pemuatan ulang untuk membantu Anda jika perilaku default di IDX tidak berfungsi dengan baik untuk Anda gunakan ini masalahnya atau bukan.

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

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

• Hard Restart Manual: Opsi ini menjalankan proses mulai ulang sepenuhnya dari Sistem pratinjau IDX, yang mencakup menghentikan dan memulai ulang server web aplikasi Anda.

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

Untuk menggunakan toolbar pratinjau, ikuti langkah-langkah berikut:

1. Klik ikon muat ulang untuk memuat ulang halaman. Ini memaksa pemuatan ulang penuh. Untuk jenis muat ulang lainnya, klik panah di samping ikon muat ulang untuk luaskan menu.

2. Pilih opsi muat ulang yang Anda inginkan dari menu: Hot Reload, Full Muat ulang, atau Mulai Ulang Hard.

   

Mengonfigurasi simpan otomatis dan hot reload

Secara {i>default<i}, IDX menyimpan otomatis pekerjaan Anda satu detik setelah Anda berhenti mengetik, yang memicu hot reload otomatis. Jika Anda ingin IDX menyimpan pekerjaan Anda di dengan interval yang berbeda, ubah pengaturan simpan-otomatis. Anda juga dapat menonaktifkan fitur simpan otomatis.

Mengonfigurasi penyimpanan otomatis

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

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 nonaktif. Simpan otomatis kini menjadi dinonaktifkan.