Flow Builder’da çok ekranlı bir flow, gezinti eylemleriyle birbirine bağlanan ekranların bir dizisidir. Flow düz devam edebilir ya da daha önceki bir ekranda toplanan kullanıcı girdisine bağlı olarak dallanabilir. Bu eğitim, dört ekranlı bir onboarding flow’unu örnek alarak tüm süreci adım adım ele alıyor: ekran oluşturma, içerik hazırlama, gezintiyi bağlama ve koşullu dallanma ekleme.

Örnekte şunlar kullanılmaktadır:

• Kullanıcının adını kişiselleştirme için değişken olarak sunan bir isim girişi.
• Cevabına göre kullanıcının hangi ekrana yönlendirileceğini belirleyen bir tek seçimli quiz.
• Her kitle segmenti için özelleştirilmiş içerikle iki dallanma yolu.
• Son ekran olarak bir paywall.

Aynı yapı, kullanıcı girdisine göre içerik kişiselleştiren her flow için geçerlidir.

Video formatını mı tercih ediyorsunuz? Bu hızlı başlangıç eğitimi aynı süreci baştan sona ele alıyor:

Başlamadan önce

• Adapty Kontrol Paneli’nde ürün oluşturun. Örnek flow, biri Yıllık diğeri Aylık olmak üzere iki abonelik kullanır.
• Adapty’yi App Store ve Google Play’e bağlayın.

1. Yeniden kullanılabilir stiller oluşturun

Yeniden kullanılabilir stiller, tüm ekranlarda tutarlı tipografi ve renkleri tek tıklamayla uygulamanıza olanak tanır. Renk stilleri açık ve koyu tema varyantı içerir; bu sayede flow her iki temayı da otomatik olarak destekler.

Tüm talimatlar için bkz. Stiller ve görünüm — Yeniden kullanılabilir stiller.

Stilleri ayarlamak için:

1. Sol panelde Styles panelini açın.
2. Colors sekmesinde Create style’a tıklayın ve tekrar kullanacağınız renkleri ekleyin. Her renk için bir Light değeri seçin, Dark sekmesine geçin ve bir Dark değeri belirleyin.

3. Text sekmesinde mevcut bir stile tıklayarak yazı tipini, kalınlığını ve boyutunu düzenleyin ya da özel ön ayarlar eklemek için Create style’a tıklayın.

2. Ekranları oluşturun

Flow, bir dizi ekrandan oluşur. İlk ekranı paylaşılan temel yapıyla — düzen, arka plan ve güvenli alan — yapılandırın, ardından geri kalanı için bu ekranı çoğaltın. Böylece her ekran aynı temeli paylaşır ve bunu yalnızca bir kez ayarlamanız gerekir.

Ekranları yönetme hakkında daha fazla bilgi için bkz. Ekranlar ve Katmanlar — Ekranları yönetme.

Ekranları ayarlamak için:

1. İlk ekranın ekran ayarlarını açmak için tuvalin boş bir alanına tıklayın.
2. System UI altında, arka planların ve kenara hizalı öğelerin ekran kenarlarına kadar uzanabilmesi için Safe area seçeneğini devre dışı bırakın.
3. Fill altında, bir arka plan türü seçin ve yapılandırın — örneğin, flow’un her ekranının arkasında yer alan bir Image .
4. Layout altında, yönü Vertical olarak ayarlayın ve tasarımınıza uygun bir dağılım seçin.

5. Sol panelin Screens bölümünde, ilk ekranın üç nokta menüsüne tıklayın ve Duplicate seçeneğini belirleyin. Toplamda dört ekrana ulaşana kadar tekrarlayın — ikinci dallanma yolu, birincisi kopyalanarak daha sonra eklenecektir.
6. Her ekranı rolüyle eşleşecek şekilde yeniden adlandırın — örneğimizde: Welcome, Quiz, Rock path ve Paywall.

3. Giriş ekranını oluşturun

İlk ekran genellikle tonu belirler — bir başlık, özellik listesi ve flow’un geri kalanını açan bir harekete geçirici mesaj. Örneğimizde bu, Karşılama ekranıdır.

Screens panelinde Welcome ekranına tıklayın, ardından öğeleri ekleyin:

1. Ana görseli ekleyin. + > Media > Image seçeneğine tıklayın, görselinizi yükleyin ve gerekirse kenar boşluklarını ayarlayın.

2. Başlık ekleyin: + > Text seçeneğine tıklayın, kayıtlı metin stillerinizden bir başlık stili belirleyin ve Content alanını düzenleyin.

3. Özellik listesini ekleyin. + > List > Icon Cards seçeneğine tıklayın, ardından her karttaki ikonu ve etiketi düzenleyin.

4. Alt kısma birincil bir gezinti düğmesi ekleyin. Bu düğmeye gezinti adımında bir eylem bağlanacak.

4. Giriş ve sınav ekranını oluşturun

İkinci ekran, kullanıcıdan bilgi toplar. Örneğimizde bir isim ve kullanıcının sonraki hangi yolu göreceğini belirleyen tek seçimli bir soru sorar.

Giriş ve sınavlar hakkında daha fazla bilgi için Giriş ve formlar ve Anket ve sınavlar sayfalarına bakın.

Screens panelinde Quiz ekranına tıklayın, ardından öğeleri ekleyin. Ekrandaki her grup — giriş, soru + giriş alanı, soru + sınav — ilgili öğeler görsel olarak bir arada kalacak şekilde kendi Dikey Kapsayıcısı içinde yer alır.

1. Giriş başlığını ve metnini ekleyin. Başlık için + > Text > H1, açıklama metni için + > Text > Body seçin.
2. Girişi gruplayın. + > Layout > Vertical Container seçin, yeni container’ı katman ağacının en üstüne sürükleyin, ardından H1 ve metni içine sürükleyin.

3. İlk soru ve girişi ekleyin. Soru başlığı için + > Text, alan için ise + > Inputs > Text seçeneğine tıklayın.
4. Design sekmesinde girişin Element ID’sini ayarlayın — örneğimizde name. Bu, değeri diğer ekranların başvurabileceği bir değişken olarak kullanıma sunar.

5. Başlık ve input’u, intro ile aynı şekilde bir Vertical Container içinde gruplayın.
6. İkinci soruyu ve quiz’i ekleyin. Başlık için + > Text, ardından + > Quiz seçeneğine tıklayın ve Icon Options gibi bir düzen şablonu seçin. Seçenekleri yapılandırın — örneğimizde Rock ve Hip hop.
7. Başlık ve quiz’i aynı şekilde bir Vertical Container içinde gruplayın.
8. Seçenek ID’lerini ayarlayın. Her quiz seçeneğini seçin, Interactions sekmesini açın ve Element ID’sini belirleyin. Bu ID’ler, ilerleyen adımlarda koşullu navigasyonda kullanılacaktır.

9. Quizi tek seçimli yapın: tuvalin boş bir alanına tıklayarak Screen settings bölümünü açın, Selectable Groups kısmına kaydırın, quiz grubunun adına tıklayın ve türü Single choice olarak ayarlayın.

10. Alta bir birincil düğme ekleyin — bu, dallanmayı tetikleyen İleri düğmesidir.

5. İlk dallanma yolunu oluşturun

Her yol ekranı, bir kitle segmentine özel içerik sunar. Örneğimizde, Rock yolu rock odaklı içerikler barındırır: çalma listeleri, sanatçılar ve öneriler.

Değişkenler hakkında daha fazla bilgi için Değişkenler sayfasına bakın.

Ekranı oluşturmak için:

1. Screens panelinde Rock path ekranına tıklayın.
2. Bir başlık ekleyin. Content alanına imleci yerleştirin ve kişiselleştirmenin görüneceği yere gelin, ardından değişken simgesine tıklayın ve Elements sekmesini açın. Girdinin bulunduğu ekranı seçin — örneğimizde Quiz — ardından girdinin değer değişkenini seçin. Seçici bunu <elementId>.value olarak çözümler — örneğimizde name.value. Çalışma zamanında başlık, kullanıcının yazdığı içerikle güncellenir.

3. Gövde metnini, bu yol için kitle segmentine uygun ek metin öğeleri olarak ekleyin.
4. Alta bir birincil düğme ekleyin.

6. İkinci dallanma yolunu oluşturun

Yol ekranları genellikle aynı düzeni paylaşır — yalnızca metinler değişir. İlk yol ekranını çoğaltın ve içeriği güncelleyin.

Çoğaltmak ve güncellemek için:

1. Screens panelinde ilk yol ekranını seçin ve ⌘D / Ctrl+D tuşlarına basarak çoğaltın. Kopya, ekran listesinin sonunda görünür.
2. Kopyayı yeniden adlandırın — örneğimizde Hip hop path — ve ekran listesinde doğru konuma sürükleyin; böylece kopyalandığı ekranın yanında yer alır.

3. Diğer kitle segmenti için gövde metnini güncelleyin. Kişiselleştirilmiş başlık çalışmaya devam eder — değişken aktarılır.

7. Paywall’ı oluşturun

Son ekran, kullanıcının abone olabileceği paywall’dır. Paywall mekaniklerine ilişkin daha kapsamlı bir rehber için Temel bir paywall ekranı oluşturma bölümüne bakın. Aşağıdaki versiyon bu rehberi özetlemektedir.

Screens panelinde Paywall ekranına tıklayın, ardından şu öğeleri ekleyin:

1. Üste bir Horizontal Container ekleyin ve içine bir Close butonu yerleştirin. Close ön ayarı önceden yapılandırılmış olarak gelir.
2. Ana görseli, başlığı (yol ekranlarındakiyle aynı kişiselleştirme değişkenini kullanarak) ve destekleyici metin olarak bir alt başlık ekleyin.

3. Ürünleri ekleyin: + > Products düğmesine tıklayın ve Vertical List’i seçin. Design sekmesindeki açılır menüden her karta bir ürün atayın.
4. Varsayılan ürünün kartına tıklayın ve ekran yüklendiğinde otomatik seçili olması için Set as default product seçeneğini etkinleştirin.

5. Satın alma düğmesini ekleyin. + > Buttons seçeneğine tıklayın ve bir önayar seçin. Interactions sekmesinde Add trigger > On tap > Add action seçeneğine tıklayın ve Action’ı Purchase olarak, Product’ı ise products.selectedProduct olarak ayarlayın.

6. Ekrana Button > Links şablonunu ekleyin. Bu şablon üç alt bağlantı içerir: Restore Purchases, Terms of Use ve Privacy Policy. Geri Yükleme bağlantısı önceden yapılandırılmıştır. Diğer bağlantıları yapılandırmak için düğme öğesini seçin, Interactions sekmesini açın ve Open URL eylemi için hedefi belirleyin.

8. Ekranlar arasında navigasyonu bağlayın

Ekranlar birbirine otomatik olarak bağlanmaz. Her ekranın birincil düğmesini bir sonraki ekrana bağlamak için On tap tetikleyicilerini ve Navigate to eylemlerini kullanın. Kullanıcı girdisine göre dallanma yapan bir ekran, bunun yerine Conditional action kullanır.

Navigasyon ve koşullu eylemler hakkında daha fazla bilgi için bkz. Navigasyon ve etkileşim ve Eylemler — Koşullu eylemler.

Örnek flow için navigasyonu bağlamak üzere:

1. Giriş ekranından statik navigasyon. Hoş Geldiniz ekranını açın, birincil düğmeyi seçin ve Interactions sekmesine geçin. Add trigger > On tap > Add action seçeneğine tıklayın, Action alanını Navigate to olarak ayarlayın ve bir sonraki ekranı seçin — örneğimizde Quiz ekranı.

2. Testen koşullu navigasyon. Quiz ekranını açın, Next butonunu seçin ve bir Conditional action içeren On tap tetikleyicisi ekleyin. IF/ELSE kuralını şu şekilde ayarlayın:
   • Değişken seçicisinde Elements sekmesini açın, Quiz ekranını seçin ve quiz.selectedOptionId’yi seçin.
   • Equals operatörünü kullanın ve seçeneklerden birinin ID’siyle karşılaştırın — örneğimizde Rock seçeneği.
   • IF koşulu eşleşirse, Navigate to tetikleyin ve birinci yol ekranını seçin.
   • ELSE durumunda, Navigate to tetikleyin ve ikinci yol ekranını seçin.

3. Her dallanma yolundan paywalla statik navigasyon. 1. adımdaki deseni, hedef olarak paywall belirleyerek her yol ekranında tekrarlayın.

Sonraki adımlar

• Flow’unuzu kaydedin ve yayınlayın.
• Kullanıcılara göstermeye başlamak için flow’u bir placement’a ekleyin.
• Kitleye özel flow’lar için (flow içi dallanma yerine), kitle segmentleri oluşturun ve Placement sayfasında farklı flow’lar atayın.