Melihat pratinjau aplikasi Anda

Firebase Studio menyediakan pratinjau yang merender tampilan langsung aplikasi Anda bersama editor kode.

Mengaktifkan dan mengonfigurasi lingkungan pratinjau

Jika Anda menggunakan template, pratinjau sering kali sudah dikonfigurasi untuk Anda. Jika pratinjau belum disiapkan di template, Anda dapat mengonfigurasinya di file konfigurasi Nix project.

1. Dari ruang kerja Anda, buka .idx/dev.nix.

   Firebase Studio akan otomatis membuat file ini saat Anda membuat ruang kerja baru dan menyertakan lingkungan pratinjau yang berlaku berdasarkan template yang Anda pilih. Jika file tidak ada di repositori kode Firebase Studio, buat file tersebut, lalu tetapkan atribut idx.previews ke true. Kemudian, 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 Firebase Studio, see
     # https://firebase.google.com/docs/studio/customize-workspace
   
     # 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 Firebase Studio, lihat Nix + Firebase Studio.

2. Build ulang lingkungan Anda:

   • Dari palet perintah (Cmd+Shift+P/Ctrl+Shift+P), jalankan perintah Firebase Studio: Hard restart.
   • Dari notifikasi Konfigurasi lingkungan diperbarui, klik Buat ulang lingkungan.

   Saat Anda mem-build ulang lingkungan setelah mengubah file dev.nix, panel pratinjau akan muncul di ruang kerja Anda yang menampilkan salah satu atau kedua tab Android dan Web, bergantung pada apa yang telah Anda aktifkan.

Menggunakan pratinjau aplikasi

Firebase Studio menawarkan pratinjau web di Chrome dan emulator Android di workspace Flutter yang menginstal aplikasi Anda di lingkungan pratinjau. Hal ini memungkinkan Anda menguji aplikasi sepenuhnya, dari awal hingga akhir, langsung dari ruang kerja.

Memuat ulang pratinjau untuk web dan Android

Firebase Studio terhubung ke fungsi hot reload framework yang mendasarinya (seperti npm run start dan flutter hot-reload) untuk memberi Anda loop pengembangan dalam yang disederhanakan. Firebase Studio menyediakan jenis pemuatan ulang berikut:

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

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

• Manual Hard Restart: Opsi ini melakukan mulai ulang lengkap sistem pratinjau Firebase Studio, 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 Firebase Studio.

Untuk menggunakan toolbar pratinjau, ikuti langkah-langkah berikut:

1. Klik ikon Muat Ulang 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.

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 Bagikan Link Pratinjau, di sebelah kanan kolom URL untuk membuka menu berbagi.

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

   • Buat pratinjau publik: Buat pratinjau ruang kerja Anda dapat diakses secara publik. Tindakan ini memungkinkan siapa saja di Internet menjangkau server pratinjau yang berjalan di ruang kerja Anda saat ruang kerja aktif, dan hingga Anda menonaktifkan akses publik.

   • Kelola akses ruang kerja. Bagikan ruang kerja Anda hanya kepada orang-orang yang ingin Anda beri akses.

3. Pilih Salin URL pratinjau untuk menyalin link langsung ke pratinjau ruang kerja, yang kemudian dapat Anda kirim kepada orang yang ingin Anda minta masukan. Anda juga dapat menggunakan kode QR yang muncul untuk membuka pratinjau di perangkat seluler.

Mengonfigurasi simpan otomatis dan hot reload

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

Langkah berikutnya

• Memublikasikan dengan Firebase.
• Pantau aplikasi Anda.