Uygulama Görüntüleyici

Uygulama Görüntüleyici nedir?

AI Agent'lar bir görevi tamamladığında, Uygulama Görüntüleyici sayfanın üst kısmında görünür. Canlı uygulamanızı önizlemenizi ve doğrudan görsel düzenlemeler yapmanızı sağlar — kodlama gerekmez.

Başlamadan Önce

• Agent işlemesi biraz zaman alabilir — lütfen sabırla bekleyin.
• Ayrıntılı ilerleme için sağ taraftaki Terminal panelini kontrol edin. Terminal paneli, AI Agent'ın ne yaptığının gerçek zamanlı günlüklerini görüntüler; buna dosya oluşturma, kod üretimi ve derleme sürecinde karşılaşılan hatalar dahildir.
• Önizlemeyi yeniden yüklemek için istediğiniz zaman Yenile simgesine tıklayın.

Uygulama Görüntüleyici Nasıl Kullanılır

Adım 1: Önizlemenin yüklenmesini bekleyin

Agent'lar işi bitirdikten sonra, Uygulama Görüntüleyici önizlemenizi ana önizleme penceresinde yükler.

⏱️ Genellikle birkaç saniye ile bir dakika arasında sürer.

2 dakikadan uzun sürerse: Uygulama Görüntüleyici araç çubuğundaki Yenile simgesine tıklayın. Hâlâ takılı kalıyorsa, Terminal panelinde hata olup olmadığını kontrol edin (aşağıdaki Adım 3'e bakın).

Adım 2: Uygulamanızı önizleyin

Yüklendikten sonra, canlı uygulamanızı önizleme penceresinde görebilirsiniz.

• Masaüstü / Tablet / Mobil — Görünümler arasında geçiş yapmak ve duyarlılığı test etmek için önizleme penceresinin üst kısmındaki cihaz araç çubuğunu kullanın. Araç çubuğu masaüstü, tablet ve mobil cihazları temsil eden üç simge gösterir. Sayfadan ayrılmadan uygulamanızın farklı ekran boyutlarında nasıl göründüğünü görmek için her simgeye tıklayın.
• Yeni sekmede aç— Önizlemeyi ayrı bir tarayıcı sekmesinde açmak için önizleme penceresinin sağ üst köşesindeki ok simgesine tıklayın. Bu, özellikle gömülü önizleme takılı kaldığında veya yanıt vermediğinde faydalıdır.

Adım 3: Hataları kontrol edin (bir şeyler yanlış görünüyorsa)

Uygulamanız yüklenmiyorsa veya bozuk görünüyorsa, hata mesajları için Console panelini kontrol edin.

Console paneli ekranın sağ tarafında, Terminal sekmesinin altında bulunur. Derleme süreci sırasında oluşturulan sistem günlüklerini ve hata mesajlarını görüntüler.

Kırmızı hata mesajları görürseniz, bunlar genellikle şunları içerir:

• Neyin yanlış gittiğine dair bir açıklama
• Hatanın oluştuğu dosya ve satır numarası
• Kök nedeni belirlemeye yardımcı olacak bir stack trace

Hataları düzeltmek için: (Daha fazla ayrıntı için lütfen şuraya bakın: Sorun Bildir)

• "Resolve" seçeneğine tıklayın — AI, belirlenen tüm hataları otomatik olarak analiz eder ve düzeltir.
• Düzeltmeler uygulandıktan sonra önizleme yeniden yüklenecektir. İlerlemeyi Terminal paneli üzerinden gerçek zamanlı olarak takip edebilirsiniz.

"Resolve" düğmesi yok mu?

Agent'ın en son mesajının yanındaki "..." (daha fazla seçenek) seçeneğine tıklayın, ardından sorunu destek ekibimize bildirmek için "Feedback" seçeneğini seçin. Lütfen Chat Link'inizi ve hatanın ekran görüntüsünü ekleyin.

Adım 4: Uygulamanızı değiştirin

Yöntem 1: Düzenlemek için tıklayın (görsel değişiklikler için önerilir)

Önizleme penceresinde herhangi bir öğeye doğrudan tıklayın. Ekranın sol tarafında bir görsel düzenleyici belirecek ve şunları ayarlamanıza olanak tanıyacaktır:

• Renkler — Bir renk seçici ile metin rengini, arka plan rengini veya kenarlık rengini değiştirin
• Boşluklar — İç boşluğu, dış boşluğu ve öğeler arasındaki aralığı ayarlayın
• Tipografi — Yazı tipi boyutunu, kalınlığını ve ailesini değiştirin
• Düzen — Hizalamayı, flexbox ayarlarını veya grid özelliklerini değiştirin
• Metin içeriği — Metni doğrudan düzenleyicide düzenleyin

Bir değişiklik yaptığınızda, sonucu gerçek zamanlı olarak görebilmeniz için önizleme anında güncellenir.

Görsel düzenleyici ayrıca, projenize simgeler, görseller ve UI bileşenleri gibi hazır varlıkları göz atıp ekleyebileceğiniz bir Library sekmesi de içerir.

Yöntem 2: Sohbette açıklayın

Değiştirmek istediğiniz şeyi doğal dil kullanarak AI Agent'a söyleyin. Örneğin:

• "Arka plan rengini daha koyu yap"
• "Başlığın etrafındaki iç boşluğu azalt"
• "Düğme rengini maviye değiştir"

AI isteğinizi anlayacak ve değişiklikleri uygulamanıza uygulayacaktır.

Hızlı Referans

• Önizlemeyi yenile – Önizleme penceresini yeniden yüklemek için Uygulama Görüntüleyici araç çubuğundaki Yenile simgesine tıklayın.
• Cihaz görünümünü değiştir – Uygulamanızın farklı ekran boyutlarında nasıl göründüğünü test etmek için önizleme araç çubuğundaki Masaüstü, Tablet veya Mobil simgelerini kullanın.
• Yeni sekmede aç – Önizlemeyi ayrı bir tarayıcı sekmesinde açmak için önizleme penceresinin sağ üst köşesindeki ok simgesine tıklayın.
• Hata günlüklerini görüntüle – Hata mesajları ve sistem günlükleri için ekranın sağ tarafındaki Console panelini kontrol edin.
• Hataları otomatik olarak düzelt – AI'ın belirlenen tüm hataları düzeltmesine izin vermek için Sorun Bildir bildirimindeki "Resolve" düğmesine tıklayın.
• Görsel öğeleri düzenle – Sol taraftaki görsel düzenleyiciyi açmak için önizleme penceresindeki herhangi bir öğeye tıklayın.
• Bir sorunu bildirin – Sorunları destek ekibine bildirmek için herhangi bir Agent mesajında "..." → "Feedback" seçeneğine tıklayın.

SSS

Uygulama Görüntüleyicim neden bir yükleme ekranı gösteriyor?

Yükleme ekranı, web sitesinin yüklendiği anlamına gelir. Uygulama Görüntüleyici normal şekilde çalışmaktadır. Önizlemenin düzgün şekilde yüklenmesi için bir an bekleyin. 2 dakikadan uzun sürerse, Yenile simgesine tıklamayı veya Console panelinde hata olup olmadığını kontrol etmeyi deneyin.

Uygulama Görüntüleyicim neden kırmızı hata mesajları gösteriyor?

Agent'lar derleme süreci sırasında sorunlarla karşılaşabilir ve bu durum zaman zaman web sayfası hatalarına neden olabilir. "Resolve" seçeneğine tıklayın, Agent'lar hatayı sizin için düzeltecektir. Düzeltildikten sonra Uygulama Görüntüleyici normal şekilde önizleme yapacaktır, bu yüzden kırmızı hata mesajlarının görünmesi konusunda endişelenmenize gerek yoktur.

Yayınladığım sayfadan Atoms rozetini neden kaldıramıyorum?

Rozetin kaldırılması için Pro veya üzeri gerekir. Settings → Plans & Billing bölümünden istediğiniz zaman yükseltme yapabilirsiniz. Yükseltme yaptıktan sonra rozet yayınlanan sayfalarınızdan otomatik olarak kaldırılacaktır.

Yükseltmek için sağ üst köşedeki avatarınıza tıklayın, Settings'i seçin, ardından Plans & Billing bölümüne gidin. Pro veya Max planını seçin ve yükseltme sürecini tamamlayın. Yükselttikten sonra Atoms rozeti artık yayınlanan sayfalarınızda görünmeyecektir.