Adapty kütüphanesini FlutterFlow projenize bağımlılık olarak ekledikten sonra, Adapty paywall ve ürün verilerini alıp FlutterFlow’da tasarladığınız paywall’da görüntüleyen akışı oluşturma zamanı geldi.

Önce Adapty’den paywall verilerini almamız gerekiyor. Adapty paywallını isteyerek başlayacağız, ardından buna bağlı ürünleri alacağız ve son olarak verilerin başarıyla alınıp alınmadığını kontrol edeceğiz. Başarılıysa paywall sayfasında ürün başlığını ve fiyatını göstereceğiz. Aksi hâlde bir hata mesajı görüntüleyeceğiz.

Devam etmeden önce aşağıdakileri yaptığınızdan emin olun:

1. Adapty Kontrol Paneli’nde en az bir paywall oluşturup buna en az bir ürün eklemiş olun.
2. Adapty Kontrol Paneli’nde en az bir placement oluşturun ve paywallınızı buna ekleyin.

Hadi başlayalım!

Adım 1.1. Adapty paywallını isteyin

Belirtildiği gibi, FlutterFlow paywall’ınızda veri göstermek için önce bunu Adapty’den almamız gerekiyor. İlk adım, Adapty paywallının kendisini almaktır. İşte nasıl yapılacağı:

1. Paywall ekranınızı açın ve sağ bölmedeki Actions bölümüne geçin. Orada Action Flow Editor’ı açın.

2. Select Action Trigger penceresinde On Page Load seçeneğini seçin.

3. Add Action’a tıklayın. Ardından getPaywall özel eylemini arayın ve seçin.

4. Set Actions Arguments bölümünde, paywallı içeren Adapty Kontrol Paneli’nde oluşturduğunuz placement’ın gerçek kimliğini girin. Bu örnekte monthly. Gerçek placement kimliğinizi kullandığınızdan emin olun!

5. Paywallınızı Adapty kontrol panelinde yerelleştirdiyseniz, locale bağımsız değişkenini de ayarlayabilirsiniz.

6. Action Output Variable Name alanında yeni bir değişken oluşturun ve getPaywallResult olarak adlandırın. Bunu bir sonraki adımda Adapty paywallına başvurmak ve ürünlerini istemek için kullanacağız.

Adım 1.2. Adapty paywall ürünlerini isteyin

Harika! Adapty paywallını aldık. Şimdi bu paywalla ilişkili ürünleri alalım:

1. Oluşturulan eylemin altındaki + simgesine tıklayın ve Add Action’ı seçin. Bu eylem Adapty paywall ürünlerini alacak. Bunun için getPaywallProducts eylemini arayın ve seçin.

2. Set Actions Arguments bölümünde, daha önce oluşturulan getPaywallResult değişkenini seçin.

3. Diğer alanları aşağıdaki gibi doldurun:

• Available Options: Data Structured Field
• Select Field: value
• Available Options: No further changes

4. Confirm’e tıklayın.
5. Action Output Variable Name alanında yeni bir değişken oluşturun ve getPaywallProductsResult olarak adlandırın. Bunu, FlutterFlow’da tasarladığınız paywallı Adapty paywall verileriyle eşleştirmek için kullanacağız.

Adım 1.3. Paywallın başarıyla yüklenip yüklenmediğini kontrol edin

Devam etmeden önce Adapty paywallının başarıyla alındığını doğrulayalım. Alındıysa paywallı ürün verileriyle güncelleyebiliriz. Alınmadıysa hatayı ele alacağız. Kontrolü şu şekilde ekleyebilirsiniz:

1. + simgesine tıklayın ve Add Conditional’a tıklayın.

2. Action Output bölümünde, daha önce oluşturulan eylem çıktı değişkenini seçin (örneğimizde getPaywallResult).

3. Adapty paywallının alındığını doğrulamak için bir değere sahip bir alanın varlığını kontrol edin. Alanları aşağıdaki gibi doldurun:

• Available Options: Has Field
• Field (AdaptyGetPaywallResult): value

4. Koşulu sonlandırmak için Confirm’e tıklayın.

Adım 1.4. Paywall görüntülemesini kaydedin

Adapty analitiğinin paywall görüntülemesini takip etmesini sağlamak için bu olayı kaydetmemiz gerekiyor. Bu adım olmadan görüntüleme analitikte sayılmayacaktır. İşte nasıl yapılacağı:

1. TRUE etiketi altındaki + simgesine tıklayın ve Add Action’a tıklayın.
2. Select Action alanında logShowPaywall eylemini arayın ve seçin.

3. Set Action Arguments alanında Value’ya tıklayın ve oluşturduğumuz getPaywallResult değişkenini seçin. Bu değişken paywall verilerini içerir.
4. Alanları aşağıdaki gibi doldurun:

• Available Options: Data Structured Field
• Select Field: value

5. Confirm’e tıklayın.

Adım 1.5. Paywall alınamazsa hata gösterin

Adapty paywallı alınamazsa hatayı ele almanız gerekir. Bu örnekte sadece bir uyarı mesajı görüntüleyeceğiz.

1. FALSE etiketine bir Informational Dialog eylemi ekleyin.

2. Title alanına, iletişim kutusu başlığı olarak görmek istediğiniz metni ekleyin. Bu örnekte Error.

3. Message kutusunda Value’ya tıklayın.

4. Alanları aşağıdaki gibi doldurun:

• Set Variable: Oluşturduğumuz getPaywallProductResult değişkeni
• Available Options: Data Structure Field
• Select Field: error
• Available Options: Data Structure Field
• Select Field: errorMessage

5. Confirm’e tıklayın.
6. FALSE akışına bir Terminate action ekleyin.

7. Sağ üst köşedeki Close’a tıklayın.

Tebrikler! Ürün verilerini başarıyla aldınız. Şimdi bunu FlutterFlow’da tasarladığınız paywalla eşleştirelim.