Uygulamanızı önizleyin

Project IDX, kod düzenleyicinizle birlikte uygulamanızın canlı bir görünümünü oluşturarak çalışmanızı önizlemenize olanak tanır. IDX web önizlemeleri, uygulamanın web sunucusunun bir satır içi çerçevesi (iFrame) ve bulut tabanlı bir Android emülatörü oluşturur.

Önizleme ortamınızı etkinleştirme ve yapılandırma

Uygulamanızı çalışma alanınızda önizlemek için önizleme ortamınızı yapılandırmanız gerekir.

1. .idx/dev.nix yapılandırma dosyanızda önizlemeleri etkinleştirin. IDX, yeni bir çalışma alanı oluşturduğunuzda bu dosyayı otomatik olarak oluşturur ve seçtiğiniz şablona göre geçerli önizleme ortamlarını içerir. Dosya IDX kod deponuzda değilse oluşturun. idx.previews özelliğini true olarak ayarlayın ve yapılandırma özelliklerini aşağıdaki örnekte gösterildiği gibi ekleyin:

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

   IDX'teki Nix özelliklerinin tam listesi için Nix + IDX bölümünü inceleyin.

2. Ortamınızı yeniden oluşturun:

   • Komut paletinden (Cmd+Üst Karakter+P/Ctrl+Üst Karakter+P) Proje IDX: Donanımı yeniden başlatma komutunu çalıştırın.
   • Ortam yapılandırması güncellendi bildiriminden Ortamı yeniden oluştur'u tıklayın.

   dev.nix dosyanızı değiştirdikten sonra ortamı yeniden oluşturduğunuzda, önizleme paneli, neleri etkinleştirdiğinize bağlı olarak çalışma alanınızda Android ve Web sekmelerini gösterir. Ancak, ortamın yeniden oluşturulması için biraz beklemeniz gerekebilir. Çalışma alanını kapatıp IDX kontrol panelinden yeniden açmayı deneyin.

Önemli Nokta: Önizleme penceresi araç çubuğundaki yeni pencerede aç simgesini tıklayarak uygulamanızı ayrı bir tarayıcı sekmesinde önizleyebilirsiniz. Açılan bu bağlantı, devam eden çalışmanızı çalışma alanı paylaşımı üzerinden bir arkadaşınıza veya iş arkadaşınıza göstermek için de kullanışlıdır.

Uygulama önizlemelerini kullanma

IDX, Chrome'da ve Android emülatörlerinde (flutter çalışma alanlarında) web önizlemeleri sunar. Bu emülatörlerde, uygulamanızı önizleme ortamına yükler. Böylece uygulamayı doğrudan çalışma alanınızdan uçtan uca tam olarak test edebilirsiniz.

Web ve Android için önizlemeleri yenileme

IDX, temel çerçevelerin (npm run start ve flutter hot-reload gibi) çalışır durumda yeniden yükleme işlevlerine bağlanır ve size sıkı bir geliştirme döngüsü sunar. Bu bölümde, IDX'teki varsayılan davranış kullanım alanınıza uygun değilse sorunları gidermenize yardımcı olmak için farklı yeniden yükleme türleri ele alınmaktadır.

• Otomatik Yeniden Yükleme: Bir dosyayı kaydettiğinizde, sıcak yeniden yükleme otomatik olarak gerçekleştirilir. Bazen Hot Module Replacement (veya HMR) olarak da bilinir. Çalışırken yeniden yükleme, sayfayı yeniden yüklemeden (web uygulamaları için) veya uygulamayı yeniden başlatmadan ya da yeniden yüklemeden (emülatörler için) uygulamanızı günceller. Bu yaklaşım, uygulamanızın yayın durumunu korumak için mükemmel olsa da bazen istendiği gibi çalışmayabilir.

• Manuel Tam Yeniden Yeniden Yükle: Bu seçenek, sayfa yenileme (web uygulamaları için) veya uygulamayı yeniden başlatma (emülatörler için) ile eşdeğerdir. Büyük kod parçalarını yeniden düzenleme gibi kaynak kodunuzda önemli değişiklikleri yakalamak için tam yeniden yükleme yapmanızı öneririz.

• Manuel Donanımı Yeniden Başlatma: Bu seçenek, IDX önizleme sistemini tamamen yeniden başlatır. Bu süreç, uygulamanızın web sunucusunu durdurma ve yeniden başlatma işlemlerini de içerir.

Tüm yeniden yükleme seçenekleri, önizleme araç çubuğu veya IDX kategorisi altında, önizleme araç çubuğu veya komut paleti (Mac'te Cmd+Üst Karakter+P veya ChromeOS, Windows ya da Linux'ta Ctrl+Üst Karakter+P) kullanılarak kullanılabilir.

Önizleme araç çubuğunu kullanmak için aşağıdaki adımları uygulayın:

1. Sayfayı yenilemek için yeniden yükle simgesini tıklayın. Bu işlem, sayfanın tamamen yeniden yüklenmesini sağlar. Farklı bir yenileme türü için yeniden yükle simgesinin yanındaki oku tıklayarak menüyü genişletin.

2. Menüden istediğiniz yenileme seçeneğini belirleyin: Hızlı Yeniden Yükle, Tam Yeniden Yükle veya Sabit Yeniden Başlat.

   

Otomatik kayıt ve çalışır durumda yeniden yüklemeyi yapılandırın

Varsayılan olarak IDX, siz yazmayı bıraktıktan bir saniye sonra çalışmanızı otomatik olarak kaydeder ve otomatik yeniden yükleme işlemlerini tetikler. IDX'in çalışmanızı farklı bir aralıkta kaydetmesini istiyorsanız otomatik kayıt ayarını değiştirin. Otomatik kayıt özelliğini devre dışı da bırakabilirsiniz.

Otomatik kaydı yapılandırın

1. IDX projesini açın.
2. Ayarlar simgesini tıklayın. Ayarlar penceresi görünür.
3. Files: Auto Save'i (Dosyalar: Otomatik Kaydet) arayın ve alanın "afterDelay" değerine ayarlandığını doğrulayın.
4. Dosyalar: Otomatik Kaydetme Gecikmesi araması yapın. Otomatik Kaydetme Gecikmesi alanı görünür.
5. Milisaniye cinsinden yeni bir otomatik kayıt gecikme aralığı girin. Çalışmanızda yapılan değişiklikler artık yeni otomatik kayıt gecikmesi ayarına göre otomatik olarak kaydediliyor.

Otomatik kayıt özelliğini devre dışı bırak

1. IDX projesini açın.
2. Ayarlar simgesini tıklayın. Ayarlar penceresi görünür.
3. Files: Auto Save'i (Dosyalar: Otomatik Kaydet) arayın.
4. Açılır menüyü tıklayın ve kapalı'yı seçin. Otomatik kayıt artık devre dışı.