Flow Builder’ın ana arayüzü; görsel öğeler eklemek, özelliklerini düzenlemek ve kullanıcı flow’unun mantığını değiştirmek için gereken tüm araçları içerir. Bu makale, arayüzün her bir alanını ele alır: ne işe yaradığı ve nerede bulunduğu.

Proje kontrolleri ve faydalı kısayollar (üst araç çubuğu)

• Kapat Close: Flow düzenleyicisinden çıkın ve flow listesine dönün.
• Uygulama adı App: Flow’un ait olduğu uygulamayı gösterir.
• Tüm flow’lar Flows: Bu uygulamaya ait tüm flow’ların listesini açın.
• Flow’u yeniden adlandır: Flow adının yanındaki kalem Pencil simgesine tıklayarak yeniden adlandırın.
• Görünüm modu geçişi: Tasarım görünümü Cursor ile remote config görünümü Remote Config arasında geçiş yapın.
• Geri Al/Yeniden Yap: Ok simgelerine tıklayarak değişikliklerinizi geri alın Undo veya yeniden yapın Redo. Geri almak için ⌘Z / Ctrl+Z kısayolunu da kullanabilirsiniz.
• Taslak kaydet / Yayınla: İlerlemenizi yayına almadan kaydetmek için Save draft düğmesine tıklayın (⌘ / Ctrl+S). Publish düğmesine erişmek için açılır menüyü Open dropdown açın. Flow’unuzu bir placement’a yalnızca yayınladıktan sonra ekleyebilirsiniz.

Önizleme alanı (merkez)

Çalışma alanının merkezi, flow’unuzun mobil cihazda nasıl görüneceğini simüle eder.

• Bir öğeyi seçmek ve özelliklerini düzenlemek için üzerine tıklayın. Bir kapsayıcının içindeki alt öğeyi seçmek için önce kapsayıcıya, ardından alt öğeye tıklayın.
• Ekranın kendine ait özellikleri düzenlemek için herhangi bir öğenin dışına tıklayın ya da Screens and Layers panelinden ekranı seçin.
• Bir öğenin sırasını değiştirmek için Screens and Layers panelinde o öğenin girişini yukarı veya aşağı sürükleyin.

Cihaz önizlemesinin üzerindeki aktif ekran çubuğu

• Screen name — geçerli ekranın adını gösteren bir etiket.
• Toggle animations Toggle animations — element animasyon önizlemelerini açar veya kapatır; kapatılana kadar sürekli oynatılır. Yalnızca aktif ekranda en az bir animasyon olduğunda görünür. Canlı cihazdaki animasyonların görünürlüğünü etkilemez.
• Add element Plus — geçerli ekranda element kitaplığını açar. Ekranlar ve Katmanlar panelinin üstündeki + düğmesiyle aynı işlevi görür; panel daraltıldığında kullanışlıdır.

Görünüm kontrolleri (alt araç çubuğu)

Alt araç çubuğundaki araçlar, önizlemeyi kontrol etmenizi sağlar.

• Cihaz: Görüntü alanı boyutlarını ve cihaz çerçevesini değiştirmek için mevcut iPhone ve Android telefon modellerinden birini seçin.
• Ekran yönü: Flow’unuzu farklı yönlerde önizlemek için dikey Portrait ve yatay Landscape modlar arasında geçiş yapın.
• Renk şeması: Tasarımınızın farklı temalara nasıl uyum sağladığını görmek için açık Light mode ve koyu Dark mode modlar arasında geçiş yapın.
• Yerel ayar: Flow’unuzu yerelleştirilmiş içerikle önizlemek için bir yerel ayar seçin.
• Görünüm seçenekleri: Cihaz çerçevesini ve güvenli alan kılavuzlarını açın veya kapatın.

Ekran ve öğe özellikleri (sağ panel)

Ekran ayarları ve düzeni

Hiçbir öğe seçili değilken, sağ panel aktif flow ekranının özelliklerini ayarlamanıza olanak tanır. Ayarlayabileceğiniz başlıca özellikler şunlardır:

• Sistem arayüzüyle etkileşimler (ör. durum çubuğunun görünür olup olmadığı)
• Otomatik düzenleme kuralları
• Arka plan (renk, görsel veya video)
• Dolgu boyutu
• Dikey kaydırma davranışı Ekran, interaktif quizler gibi belirli öğeler içeriyorsa, bu liste ilgili özelliklerle genişler.

Element özellikleri

Bir element seçtiğinizde, sağ panel stil ve etkileşim özelliklerini değiştirmenize olanak tanır.

Tasarım özellikleri

Design sekmesi, seçili elementin görsel görünümünü ve düzenini yapılandırmanıza olanak tanır:

• Visibility: Öğeyi göster veya gizle. Öğenin ne zaman görünür olacağını belirleyen kurallar ayarlamak için Conditional görünürlüğü etkinleştir.
• Position: Relative, Absolute veya Fixed konumlandırma seçeneklerinden birini seç.
• Content (yalnızca metin öğeleri): Öğenin metin içeriğini düzenle, değişken ekle ve yerelleştirmeleri yönet.
• Typography (yalnızca metin öğeleri): Font, kalınlık, boyut, renk, hizalama, dekorasyon ve kırpma ayarlarını yapılandır.
• Spacing: Öğenin margin ve padding değerlerini ayarla.
• Effects: Dış gölge, iç gölge, arka plan bulanıklığı veya katman bulanıklığı ekle.
• Animation: Animasyonlu efektler ekle (ör. Pulse) ve bunların zamanlamasını ile yoğunluğunu yapılandır.
• Appearance: Opaklık ve döndürme ayarlarını düzenle.
• Layout: Düzen yönü seç (dikey veya yatay) ve alt öğelerin nasıl dağıtılacağını belirle.

Etkileşim özellikleri

Interactions sekmesi, kullanıcı seçili öğeyle etkileşime girdiğinde ne olacağını tanımlamanıza olanak tanır. Her etkileşim bir tetikleyici ve bir veya daha fazla eylemden oluşur:

• Tetikleyiciler, ne zaman bir şeyin gerçekleşeceğini belirler — örneğin On Tap (kullanıcı elemana dokunur).
• Eylemler, ne olacağını belirler — örneğin başka bir ekrana geçmek veya bir değişkenin değerini değiştirmek. Birden fazla eylemi tek bir tetikleyiciye ekleyerek sırayla zincirleyebilirsiniz.

Birden fazla eylemi sırayla çalıştırmak için aynı elemana birden fazla tetikleyici ekleyebilirsiniz.

Sol panel

Sol panel, hangi düğmenin aktif olduğuna bağlı olarak işlevini değiştirir. Şunlar arasında seçim yapabilirsiniz:

• Ekranlar ve katmanlar
• Öğe ekle
• Ürünler
• Stiller
• Değişkenler
• Yerelleştirme

Ekranlar ve Katmanlar

Katmanlar Layers düğmesi, Ekranlar ve Katmanlar panelini açar (flow builder’ı açtığınızda varsayılan olarak gösterilir).

Her ekranı bir katman ağacı olarak görüntüler. Ekrandaki her öğe bir katmandır; yığınlar gibi kapsayıcılar ise alt öğelerini içlerinde barındırır. Katmanları sürükleyip bırakarak yeniden sıralayabilirsiniz.

Öğe seçimi

Artı Plus düğmesine tıklarsanız, sol panel mevcut UI öğelerini ve bunların varyasyonlarını listeler. Bir girişe tıklayarak onu mevcut ekrana yeni bir katman olarak ekleyebilirsiniz.

Ürünler

Ürünler Products düğmesi ürün listesini açar. Flow’unuzdaki her ekrana hangi ürünlerin atandığını gösterir.

Bu liste yalnızca okunabilir. Bir ekrana ürün atamak için Ürün öğesi ekleyin ve sağ panelden yapılandırın. Ürün oluşturmak veya düzenlemek için Adapty Kontrol Paneli’ndeki Products sayfasını kullanın.

Kayıtlı stiller

Stiller Styles düğmesi Kayıtlı Stiller’i açar.

Burada global stilleri düzenleyip yönetebilirsiniz. Flow’unuzdaki birden fazla element aynı tipografi veya rengi kullanıyorsa bu bilgileri global stil olarak kaydedebilirsiniz. Ardından tek tıklamayla yeniden kullanabilirsiniz. Şu anda Flow Builder, iki tür global stil desteklemektedir: Yazı tipi stilleri ve Renk stilleri. Her Renk stilinin isteğe bağlı olarak Karanlık mod için ayrı bir değeri olabilir.

Değişkenler

Köşeli parantez Variables düğmesi Değişkenler panelini açar.

Burada flow’unuz için değişken oluşturabilir ve yönetebilirsiniz. Çalışma zamanında SDK, değişken yer tutucularını gerçek değerlerle değiştirir — kullanıcı özellikleri, ürün fiyatları, yerelleştirilmiş metinler ve daha fazlası.

Değişkenler iki sekme altında gruplandırılmıştır:

• Özel: Eylemler aracılığıyla oluşturup yönettiğiniz değişkenler.
• Elementler: Kullanıcı etkileşimiyle belirlenen değerler — sınav yanıtları, toggle durumları veya sekme seçimi gibi.

Ürün değişkenleri — fiyat, ad ve diğer ürün verileri — bu panelde listelenmez. Bunlara bir metin elementini düzenlerken doğrudan başvurabilirsiniz.

Değişkenleri şunlar için kullanabilirsiniz:

• Metin bağlama: Statik dizeler yerine dinamik içerik gösterin.
• Görünürlüğü kontrol etme: Koşullara göre öğeleri gösterin veya gizleyin (örneğin, premium kullanıcılar için yükseltme düğmesini gizleyin).
• Kullanıcıyla etkileşim: Form veya sınav gibi kullanıcı giriş alanlarından verilere erişin.

Yerelleştirme

Yerelleştirme görünümü, flow’unuzdaki tüm çevrilebilir içerikleri yönetmenizi sağlar. Her ekran için metin ve görselleri, her yerel ayar için ayrı sütunlar içeren bir tablo şeklinde görüntüler. Bu görünümden şunları yapabilirsiniz:

• Yeni yerel ayarlar ekleyebilir ve yerelleştirilmiş metinleri doğrudan düzenleyebilirsiniz.
• Çeviri durumunu takip edebilirsiniz — her satır Done veya Missing olarak işaretlenir.
• Ekrana göre filtreleyebilir veya yalnızca eksik çevirileri gösterebilirsiniz.
• İçerikleri otomatik çevirmek için AI Translate özelliğini kullanabilir ya da çevirileri toplu olarak Import/Export yapabilirsiniz.