Çok ekranlı bir flow, Flow Builder’da navigasyon eylemleriyle birbirine bağlanan bir ekran dizisidir. Flow doğrusal kalabilir ya da önceki bir ekranda toplanan kullanıcı girdisine göre dallanabilir. Bu eğitim, dört ekranlı bir onboarding flow’u örnek alarak uçtan uca süreci ele alır: ekran oluşturma, içerik hazırlama, navigasyonu bağlama ve koşullu dallanma ekleme.

Örnekte şunlar kullanılmaktadır:

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

Aynı mantık, 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 stiller oluşturun

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

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

Stilleri ayarlamak için:

1. Sol panelde Styles panelini açın.
2. Colors sekmesinde Create style seçeneğine 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 seçin.

3. Text sekmesinde, yazı tipi, kalınlık ve boyutu düzenlemek için mevcut bir stile tıklayın ya da özel ön ayarlar eklemek için Create style seçeneğine 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 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 .
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 seçin. Toplamda dört ekranınız olana kadar tekrarlayın — ikinci dallanma yolu daha sonra birincisi kopyalanarak eklenecektir.
6. Her ekranı rolüne göre yeniden adlandırın — bizim ö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 içerir. Örneğimizde bu, Welcome ekranıdır.

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

1. Ana görseli ekleyin. + > Media > Image yolunu izleyin, görselinizi yükleyin ve gerekirse kenar boşluklarını ayarlayın.

2. Başlık ekleyin: + > Text öğesine 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 öğesine tıklayın, ardından her karttaki simgeyi ve etiketi düzenleyin.

4. Alta bir birincil gezinme düğmesi ekleyin. Bu düğmeye, gezinme adımında bir eylem bağlanacaktır.

4. Giriş ve quiz ekranını oluşturun

İkinci ekran kullanıcıdan bilgi toplar. Örneğimizde bir isim ve kullanıcının hangi yolu göreceğini belirleyen tek seçimlik bir cevap istenir.

Girişler ve quizler hakkında daha fazla bilgi için Giriş alanları ve formlar ve Anketler ve quizler sayfalarına bakabilirsiniz.

Screens panelinden Quiz ekranına tıklayın, ardından öğeleri ekleyin. Ekrandaki her grup — giriş, soru + giriş alanı, soru + quiz — ilgili öğeler görsel olarak bir arada kalsın diye kendi Dikey Kapsayıcısına yerleştirilmiştir.

1. Giriş başlığını ve metnini ekleyin. Başlık için + > Text > H1, destekleyici metin için + > Text > Body seçeneğini kullanın.
2. Girişi gruplayın. + > Layout > Vertical Container seçeneğine tıklayın, 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 soruyu ve girdi alanını ekleyin. Soru başlığı için + > Text, alan için + > Inputs > Text seçin.
4. Design sekmesinde girdinin Element ID’sini ayarlayın — örneğimizde name. Bu, değeri diğer ekranların başvurabileceği bir değişken olarak açığa çıkarır.

5. Başlık ve input’u, intro’da yaptığınız gibi 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 de 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. Testi 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. Altta 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 bölümüne 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ında kişiselleştirmenin görünmesini istediğiniz yere imleci getirin, değişken simgesine tıklayın ve Elements sekmesini açın. Girdinin bulunduğu ekranı seçin — bizim ö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ığı metne göre güncellenir.

3. Gövde metnini bu yola özgü 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 içerik 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 yere sürükleyerek çoğaltıldığı ekranın yanına taşıyın.

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 mekaniğinin daha kapsamlı bir açıklaması için Temel bir paywall ekranı oluşturma bölümüne bakabilirsiniz. Aşağıdaki versiyon bu açıklamayı özetlemektedir.

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

1. En üste bir Horizontal Container ekleyin ve içine bir Close düğmesi yerleştirin. Close ön ayarı hazır 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 seçeneğine tıklayın, ardından 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 önceden seçili gelmesi 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 ön ayar seçin. Interactions sekmesinde Add trigger > On tap > Add action seçeneğine tıklayın ve Action değerini Purchase, Product değerini 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 ayarlayın.

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

Ekranlar otomatik olarak birbirine bağlanmaz. Her ekranın ana düğmesini bir sonraki ekrana bağlamak için On tap tetikleyicilerini ve Navigate to eylemlerini kullanın. Kullanıcı girişine 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 gezinme. Karşılama ekranını açın, birincil butonu seçin ve Interactions sekmesine geçin. Add trigger > On tap > Add action seçeneğine tıklayın, Action kısmını Navigate to olarak ayarlayın ve bir sonraki ekranı seçin — örneğimizde bu Quiz ekranıdır.

2. Sınavdan koşullu yönlendirme. Sınav ekranını açın, Sonraki düğmesini seçin ve bir On tap tetikleyicisi ile birlikte 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 öğesini 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 karşılaştırma eşleşirse, Navigate to eylemini tetikleyin ve birinci yol ekranını seçin.
   • ELSE durumunda, Navigate to eylemini tetikleyin ve ikinci yol ekranını seçin.

3. Her dallanma yolundan paywall’a statik navigasyon. 1. adımdaki kalıbı, 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.