---
title: "Kişiselleştirilmiş bir onboarding flow'u oluşturun"
description: "Çalışan bir örnek üzerinden çok ekranlı onboarding flow'u oluşturmanın tüm sürecini inceleyin — ekranlar, içerik, navigasyon ve koşullu dallanma."
---

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:
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
## Başlamadan önce \{#before-you-start\}

- Adapty Kontrol Paneli'nde [ürün oluşturun](create-product). Ö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](integrate-payments).
## 1. Yeniden kullanılabilir stilleri ayarlayın \{#set-up-reusable-styles\}

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](builder-styling#reusable-styles).

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 \{#create-the-screens\}

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](paywall-layout-and-products#manage-screens).

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 \{#build-the-introduction-screen\}

İ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 \{#build-the-input-and-quiz-screen\}

İ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](builder-inputs-and-forms) ve [Anketler ve sınavlar](onboarding-quizzes) 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 \{#build-the-first-branching-path\}

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](onboarding-variables) 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 Variable icon 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 \{#build-the-second-branching-path\}

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 \{#build-the-paywall\}

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](basic-paywall-screen). 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 \{#wire-navigation-between-the-screens\}

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](onboarding-navigation-branching) ve [Eylemler — Koşullu eylemler](onboarding-actions#conditional-actions).

Ö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 \{#next-steps\}

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