Dört ekranlı bir onboarding flow’u örnek olarak kullanan bu tutorial; ekran oluşturma, içerik oluşturma, navigasyon kurma ve koşullu dallanma ekleme süreçlerini baştan sona ele alır. Flow Builder’daki çok ekranlı bir flow, navigasyon eylemleriyle birbirine bağlanan ekranlar dizisidir. Flow doğrusal kalabilir ya da daha önceki bir ekranda toplanan kullanıcı girdisine göre dallanabilir.

Örnekte şunlar kullanılıyor:

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

Aynı düzen, 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 anlatı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 stilleri ayarlayın

Yeniden kullanılabilir stiller, her ekrana tek bir tıklamayla tutarlı tipografi ve renkler uygulamanızı sağlar. Renk stilleri Açık ve Koyu varyant içerdiğinden flow her iki temayı da otomatik olarak destekler.

Ayrıntılı talimatlar için bkz. Element stillendirme — Yeniden kullanılabilir stiller.

Stilleri ayarlamak için:

1. Sol panelde Styles Styles panelini açın.
2. Colors sekmesinde Plus Create style butonuna tıklayın ve yeniden kullanacağınız renkleri ekleyin. Her renk için önce bir Light değeri seçin, ardından Dark sekmesine geçip bir Dark değeri belirleyin.

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

2. Ekranları oluşturun

Flow, bir ekranlar dizisidir. İlk ekranı ortak temel yapıyla — düzen, arka plan ve güvenli alan — yapılandırın, ardından geri kalanlar için kopyalayın. Bu sayede her ekran aynı temeli paylaşır ve kurulumu yalnızca bir kez yaparsınız.

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 canvas’ındaki boş bir alana tıklayarak ekran ayarlarını açın.
2. System UI altında, arka planların ve kenara hizalanmış öğ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 Image.
4. Layout altında yönü Vertical 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 Bağlam menüsü tıklayın ve Duplicate’i seçin. Toplamda dört ekranınız olana kadar tekrarlayın — ikinci dallanma yolu daha sonra ilkini çoğaltarak 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, özellikler listesi ve flow’un geri kalanını açan bir harekete geçirici mesaj içerir. Ö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 yolunu izleyerek görselinizi yükleyin ve gerekirse kenar boşluklarını ayarlayın.

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

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

4. Alta birincil bir gezinme düğmesi ekleyin. Bu düğmeye, gezinme 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 daha sonra hangi yolu izleyeceğini belirleyen tek seçimli bir cevap isteniyor.

Giriş ve sınavlar hakkında daha fazla bilgi için Giriş ve formlar ve Anketler ve sınavlar sayfalarına bakabilirsiniz.

Screens panelinde Quiz ekranına tıklayın, ardından öğeleri ekleyin. Ekrandaki her grup — giriş, soru + giriş, soru + sınav — birbiriyle ilişkili öğelerin görsel olarak bir arada kalması için kendi Dikey Yığınında (Vertical Stack) bulunur.

1. Giriş başlığını ve metnini ekleyin. Başlık için + > Text > H1, destekleyici metin için + > Text > Body seçeneğine tıklayın.
2. Girişi gruplayın. + > Layout > Vertical Stack seçeneğine tıklayın, yeni stack’i katman ağacının en üstüne sürükleyin, ardından H1 ve body’yi içine sürükleyin.

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

5. Başlığı ve girişi, giriş bölümünde yaptığınız gibi bir Dikey Yığın (Vertical Stack) 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ığı ve quiz’i aynı şekilde bir Dikey Yığın içinde gruplayın.
8. Seçenek kimliklerini ayarlayın. Her quiz seçeneğini seçin, Interactions sekmesini açın ve Element ID değerini belirleyin. Bu kimlikler, ilerleyen adımlarda koşullu gezinmede kullanılacaktır.

9. Quiz’i tek seçimli yapın: kanvasın 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 segmenti için içeriği özelleştirir. Örneğimizde Rock yolu, rock odaklı içerikleri — çalma listelerini, sanatçıları ve önerileri — kapsar.

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. İmlecinizi kişiselleştirmenin görüneceği Content alanına getirin, 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 göre 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ıp 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 sonuna eklenir.
2. Kopyayı yeniden adlandırın — örneğimizde Hip hop path — ve ekran listesinde doğru konuma sürükleyerek çoğaltıldığı ekranın yanına yerleştirin.

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’u oluşturun

Son ekran paywall’dur — kullanıcının abone olabileceği yerdir. Paywall mekaniğinin daha kapsamlı bir açıklaması için bkz. Temel paywall ekranı oluşturma. Aşağıdaki sürüm o açıklamayı özetlemektedir.

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

1. En üste bir Horizontal Stack ekleyin ve içine bir Close düğmesi ekleyin. 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şkeniyle) ve destekleyici metin olarak bir alt başlık ekleyin.

3. Ürünleri ekleyin: + > Products seçeneğine tıklayın ve Vertical List öğesini 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 butonunu ekleyin. + > Buttons seçeneğine tıklayın ve bir ön ayar seçin. Interactions sekmesinde Add trigger > On tap > Add action seçeneğine tıklayın ve Action alanını Purchase, Product alanını products.selectedProduct olarak ayarlayın.

6. Footer bağlantılarını ekleyin. + > Buttons > Links seçeneğine tıklayın — satır; Restore Purchases, Terms of Use ve Privacy Policy bağlantılarını içerir. Restore bağlantısı önceden yapılandırılmıştır. Terms ve Privacy için Content alanında her bağlantının metnini seçin, biçimlendirme araç çubuğundaki bağlantı simgesine tıklayın ve URL’yi yapıştırın.

8. Ekranlar arasında gezinmeyi 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.

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

Örnek flow için gezinmeyi bağlamak amacıyla:

1. Giriş ekranından statik gezinme. 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 değerini Navigate to olarak ayarlayın ve bir sonraki ekranı seçin — bu örnekte Quiz ekranı.

2. Quizden koşullu yönlendirme. Quiz ekranını açın, Next düğmesini seçin ve On tap tetikleyicisine bir Conditional action 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 değerini belirleyin.
   • 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 ile birinci yol ekranına yönlendirin.
   • ELSE durumunda Navigate to ile ikinci yol ekranına yönlendirin.

3. Her dallanma yolundan paywall’a statik navigasyon. 1. adımdaki kalıbı her yol ekranında tekrarlayın; hedef olarak paywall’ı seçin.

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.