Uygulamanızı önizleyin

Firebase Studio, geliştirme sırasında uygulamanızı önizlemenin ve test etmenin çeşitli yollarını sunar. Bu kapsamda, App Prototyping agent simgesini kullanmak, yerleşik web önizleme aracından ve Firebase Studio çalışma alanlarında bulunan web ve Android önizleme araçlarından yararlanmak yer alır.

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

Şablon kullanıyorsanız veya uygulamanızı App Prototyping agent ile oluşturuyorsanız önizlemeler genellikle sizin için önceden yapılandırılır. Önizlemeler şablonunuzda henüz ayarlanmamışsa bunları projenin Nix yapılandırma dosyasında yapılandırabilirsiniz.

1. Çalışma alanınızda .idx/dev.nix simgesini açın.

   Firebase Studio, 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 Firebase Studio kod deponuzda değilse dosyayı oluşturun ve 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 içindeki 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: Hard restart (Firebase Studio: Zorunlu yeniden başlatma) komutunu çalıştırın.
   • Ortam yapılandırması güncellendi bildiriminde Ortamı yeniden oluştur'u tıklayın.

   dev.nix dosyanızı değiştirdikten sonra ortamı yeniden oluşturduğunuzda, etkinleştirdiğiniz öğelere bağlı olarak çalışma alanınızda Android ve Web sekmelerini veya bu sekmelerin ikisini de gösteren bir önizleme paneli görünür.

Uygulama önizlemelerini kullanma

Firebase Studio, uygulamanızı önizleme ortamına yükleyen Flutter çalışma alanlarında Chrome ve Android emülatörlerinde web önizlemeleri sunar. Bu sayede, uygulamanızı uçtan uca, doğrudan çalışma alanınızdan tam olarak test edebilirsiniz.

Web ve Android için önizlemeleri yenileme

Firebase Studio, npm run start ve flutter hot-reload gibi temel çerçevelerin anında yeniden yükleme işlevlerine bağlanarak geliştirme sürecinizi kolaylaştırır. Firebase Studio aşağıdaki yeniden yükleme türlerini sunar:

• Otomatik sıcak yeniden yükleme: Bir dosyayı kaydettiğinizde sıcak yeniden yüklemeler otomatik olarak gerçekleştirilir. Bazen Hot Module Replacement (HMR) olarak da bilinen anında 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 yararlı olsa da her zaman beklendiği gibi çalışmayabilir.

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

• Manuel olarak zorla yeniden başlatma: Bu seçenek, Firebase Studio'ın ö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çenekleri, önizleme araç çubuğu veya komut paleti (Mac'te Cmd+Shift+P ya da ChromeOS, Windows veya Linux'ta Ctrl+Shift+P) kullanılarak Firebase Studio kategorisinde 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, tam yeniden yüklemeye zorlar. Farklı bir yenileme türü için menüyü genişletmek üzere yeniden yükleme simgesinin yanındaki oku tıklayın.

2. Menüden istediğiniz yenileme seçeneğini belirleyin: Hot Reload, Full Reload veya Hard Restart.

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 başkalarını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 özellik, internetteki herkesin çalışma alanınız etkin durumdayken ve herkese açık erişimi devre dışı bırakana kadar çalışma alanınızda çalışan önizleme sunucusuna ulaşmasına olanak tanır.

   • Çalışma alanı erişimini yönetin. Çalışma alanınızı yalnızca erişim vermek istediğiniz kişilerle paylaşın.

3. Çalışma alanı önizlemesine doğrudan bağlantı kopyalamak için Önizleme URL'sini kopyala'yı seçin. Bu bağlantıyı daha sonra geri bildirim almak istediğiniz kişilere gönderebilirsiniz. Önizlemenizi mobil cihazınızda açmak için gösterilen QR kodunu da kullanabilirsiniz.

Otomatik kaydetme ve anında yeniden yükleme özelliklerini yapılandırma

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

Arka uç önizlemesinin bağlantısı kesildi

"Önizleme arka ucu bağlantısı kesildi" mesajını güvenle göz ardı edebilirsiniz.

Sonraki adımlar

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