Uygulamanızı önizleyin

Project IDX, kod düzenleyicinizle birlikte uygulamanızın canlı görünümünü oluşturarak çalışmanızı önizlemenizi sağlar. IDX web önizlemeleri, uygulamanın web sunucusunun ve bulut tabanlı bir Android emülatörünün satır içi çerçevesini (iFrame) 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 tüm önizleme ortamlarını içerir. Dosya, IDX kod deponuzda değilse dosyayı oluşturun. idx.previews özelliğini true olarak ayarlayın ve aşağıdaki örnekte gösterildiği gibi yapılandırma özelliklerini 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";
           # 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";
         };
       };
     };
   }
   

   IDX'deki Nix özelliklerinin tam listesi için Nix + IDX başlıklı makaleyi inceleyin.

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

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

   dev.nix dosyanızı değiştirdikten sonra ortamı yeniden oluşturduğunuzda, çalışma alanınızda neyi etkinleştirdiğinize bağlı olarak Android ve Web sekmelerini gösteren önizleme paneli görünür. 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 Bilgi: Önizleme penceresi araç çubuğunda yeni pencerede aç simgesini tıklayarak uygulamanızı ayrı bir tarayıcı sekmesinde önizleyebilirsiniz. Bu pop-up bağlantı, çalışma alanı paylaşımı aracılığıyla devam eden çalışmanızı bir arkadaşınıza veya iş arkadaşınıza göstermek için de kullanışlıdır.

Uygulama önizlemelerini kullanma

IDX, uygulamanızı önizleme ortamına yükleyen Chrome ve Android emülatörlerinde (Flutter çalışma alanlarında) web önizlemeleri sunar. Böylece, uygulamanızı doğrudan çalışma alanınızda uçtan uca test edebilirsiniz.

Web ve Android için önizlemeleri yenileme

IDX, size sıkı bir iç geliştirme döngüsü sunmak için temel çerçevelerin (npm run start ve flutter hot-reload gibi) sıcak yeniden yükleme işlevlerine bağlanır. Bu bölümde, IDX'deki varsayılan davranışın kullanım alanınız için uygun olmaması durumunda sorun gidermenize yardımcı olmak amacıyla farklı yeniden yükleme türleri ele alınmaktadır.

• Otomatik Sıcak Yeniden Yükleme: Bir dosyayı kaydettiğinizde, sıcak yeniden yükleme işlemleri otomatik olarak gerçekleştirilir. Bazen Hot Modül Değişimi (veya HMR) olarak da bilinen, çalışır durumda yeniden yükleme işlemi, 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 canlı durumunu korumak için mükemmeldir ancak bazen istenen şekilde çalışmayabilir.

• Manuel Tam Yeniden Yükleme: Bu seçenek, sayfa yenileme (web uygulamaları için) veya uygulamayı yeniden başlatma (emülatörler için) işlemine eşdeğerdir. Kaynak kodunuzdaki önemli değişiklikleri yakalamak için (ör. büyük kod parçalarını yeniden düzenlerken) tam yeniden yükleme yapmanızı öneririz.

• Manuel Donanım Yeniden Başlatma: Bu seçenek, IDX'in önizleme sistemini tamamen yeniden başlatır. Bu işlem, uygulamanızın web sunucusunu durdurup yeniden başlatmayı da içerir.

Tüm yeniden yükleme seçeneklerine ö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 IDX kategorisinden ulaşılabilir.

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

1. Sayfayı yenilemek için reload simgesini tıklayın. Bu işlem, sayfayı tamamen yeniden yüklemeyi zorunlu kılar. Farklı bir türde yenileme yapmak için yeniden yükleme simgesinin yanındaki oku tıklayarak menüyü genişletin.

2. Menüden istediğiniz yenileme seçeneğini belirleyin: Sıkı Yeniden Yükle, Tam Yeniden Yükle veya Tam Yeniden Başlatma.

   

Web önizlemenizi başkalarıyla paylaşma

Erişimi etkinleştirip önizlemenin doğrudan bağlantısını paylaşarak uygulamanızın web önizlemesini geri bildirim için başkalarıyla paylaşabilirsiniz:

1. Paylaşım menüsünü açmak için web önizleme araç çubuğunda, adres çubuğunun sağındaki Önizlemeyi Paylaş Bağlantısı simgesini tıklayın.

   

2. Aşağıdaki seçeneklerden birini kullanarak diğer kullanıcıların çalışma alanınıza erişmesine izin verin:

   • A seçeneği: Önizlemeyi herkese açık hale getir'i seçerek çalışma alanı önizlemenizi herkese açık hale getirin. Bu durumda, çalışma alanınız etkinken ve herkese açık erişimi kapatana kadar internetteki herkes çalışma alanınızın çalışan önizleme sunucusuna erişebilir.

   • Seçenek B. Workspace Erişimini Yönet'i seçerek çalışma alanınızı yalnızca erişim vermek istediğiniz kullanıcılarla paylaşın.

     Uyarı: Bu sayede bu kullanıcılar kodunuzda değişiklik yapabilir ve çalışma alanına kaydedilen kimlik doğrulama jetonları gibi diğer gizli bilgilere erişebilirler. Bu nedenle, verilerinizi yalnızca güvendiğiniz kişilerle paylaşabilirsiniz. Çalışma alanınızı paylaşma başlıklı makaleden daha fazla bilgi edinin.

3. Çalışma alanı önizlemesinin doğrudan bağlantısını kopyalamak için Önizleme URL'sini kopyala'yı seçin. Daha sonra bu önizlemeyi, geri bildirim almak istediğiniz kişilere gönderebilirsiniz.

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

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

Otomatik kaydetmeyi yapılandırma

1. Project IDX'yi 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 "afterErtele" değerine ayarlandığını doğrulayın.
4. Dosyalar: Otomatik Kaydetme Gecikmesi'ni arayın. Otomatik Kaydetme Gecikmesi alanı görünür.
5. Milisaniye cinsinden yeni bir otomatik kaydetme gecikmesi 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 kaydı kapat

1. Project IDX'yi açın.
2. Ayarlar simgesini tıklayın. Ayarlar penceresi görünür.
3. Dosyalar: Otomatik Kaydetme'yi arayın.
4. Açılır listeyi tıklayın ve kapalı'yı seçin. Otomatik kaydetme devre dışı bırakılır.