Uygulamanızı önizleyin

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Firebase Studio, kod düzenleyicinizin yanında uygulamanızın canlı görüntüsünü oluşturan bir önizleyici sağlar.

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

Şablon kullanıyorsanız önizlemeler genellikle sizin için önceden yapılandırılmıştır. Şablonunuzda önizlemeler henüz ayarlanmamışsa bunları projenin Nix yapılandırma dosyasında yapılandırabilirsiniz.

1. Çalışma alanınızdan .idx/dev.nix'ü açın.

   Firebase Studio, yeni bir Workspace 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 Firebase Studiokod deponuzda yoksa dosyayı oluşturun ve ardından idx.previews özelliğini true olarak ayarlayın. Ardından, 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 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";
         };
       };
     };
   }
   

   Firebase Studio'teki Nix özelliklerinin tam listesi için Nix + Firebase Studio başlıklı makaleyi inceleyin.

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

   • Komut paletinden (Cmd+Shift+P/Ctrl+Shift+P) Firebase Studio: Sert yeniden başlat 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, etkinleştirdiğinize bağlı olarak Android ve Web sekmelerinden birini veya ikisini gösteren önizleme paneli çalışma alanınızda görünür.

Uygulama önizlemelerini kullanma

Firebase Studio, Flutter çalışma alanlarında Chrome ve Android emülatörlerinde uygulamanızı önizleme ortamına yükleyen web önizlemeleri sunar. Bu sayede uygulamanızı baştan sona doğrudan Workspace'inizden test edebilirsiniz.

Web ve Android için önizlemeleri yenileme

Firebase Studio, size basitleştirilmiş 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şlevlerini kullanır. Firebase Studio aşağıdaki yeniden yükleme türlerini sağlar:

• Otomatik Sıcak Yeniden Yükleme: Dosya kaydettiğinizde sıcak yeniden yüklemeler otomatik olarak gerçekleştirilir. Bazen sıcak modül değişimi (veya HMR) olarak da bilinen sıcak 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 canlı durumunu korumak için kullanışlıdır ancak her zaman 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. Büyük kod parçalarını yeniden yapılandırırken kaynak kodunuzda yapılan önemli değişiklikleri yakalamak için tam yeniden yükleme yapmanızı öneririz.

• Manuel Sert Yeniden Başlatma: Bu seçenek, Firebase Studio'nin önizleme sistemini tamamen yeniden başlatır. Bu işlem, uygulamanızın web sunucusunun durdurulup yeniden başlatılmasını da içerir.

Tüm yeniden yükleme seçenekleri, Firebase Studio kategorisindeki önizleme araç çubuğu veya komut paleti (Mac'te Cmd+Shift+P, ChromeOS, Windows veya Linux'ta Ctrl+Shift+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 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: Hızlı Yenileme, Tam Yenileme veya Sert 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 almak 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 Önizleme Bağlantısını Paylaş 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:

   • Önizlemeyi herkese açık hale getirme: Çalışma alanı önizlemenizi herkese açık hale getirin. Bu durumda, çalışma alanınız etkinken ve herkese açık erişimi devre dışı bırakmadığınız sürece internetteki herkes çalışma alanınızda çalışan önizleme sunucusuna erişebilir.

   • Workspace erişimini yönetin. Workspace'inizi yalnızca erişmesine izin vermek istediğiniz kişilerle paylaşın.

3. Çalışma alanı önizlemesinin doğrudan bağlantısını kopyalamak için Önizleme URL'sini kopyala'yı seçin. Bu bağlantıyı, geri bildirim almak istediğiniz kişilere gönderebilirsiniz. Ayrıca, önizlemenizi mobil cihazınızda açmak için görünen QR kodunu da kullanabilirsiniz.

Otomatik kaydetme ve sıcak yeniden yüklemeyi yapılandırma

Varsayılan olarak Firebase Studio, siz yazmayı bıraktıktan bir saniye sonra çalışmanızı otomatik olarak kaydeder ve otomatik sıcak yeniden yüklemeyi tetikler. Çalışmanızı farklı bir Firebase Studioaralıkta kaydetmek istiyorsanız otomatik kayıt ayarını değiştirin. Otomatik kaydetme özelliğini de devre dışı bırakabilirsiniz.

Sonraki adımlar

• Firebase ile yayınlama
• Uygulamanızı izleyin.