Last updated

Assistant UX iOS

Rokt UX Helper est un projet open source qui vous aide à rendre de belles expériences client dans un environnement serveur à serveur. Vous pouvez trouver et contribuer au projet sur la page Github.

Ce document décrit le processus d'intégration de RoktUXHelper dans votre application iOS, qui fonctionne en parallèle avec l'intégration Server-to-Server (S2S) pour offrir des expériences pertinentes à vos clients pendant leur passage à la caisse. Ce guide suppose que vous êtes familier avec UIKit/SwiftUI et les concepts de base du développement iOS.

Système	Version
RoktUXHelper	0.3.1
iOS	15.0+
Gestionnaire de paquets	Swift Package Manager
Swift	5+
Xcode	15+

SwiftUI

import Installation from './_installation.md'; import Configurations from './_configurations.md'; import Events from './_events.md';

Importer les modules requis

Pour commencer à utiliser RoktLayoutView, vous devez importer les modules nécessaires dans votre contrôleur de vue ou votre classe.

import SwiftUI
import RoktUXHelper

Initialiser RoktLayoutView

La classe RoktLayoutView offre plusieurs options d'initialisation, permettant une flexibilité de configuration. Vous pouvez l'initialiser en passant les liaisons et paramètres requis tels que experienceResponse, le nom location, config optionnel et les gestionnaires d'événements.

var body: some View {
    RoktLayoutView(experienceResponse: "{experience_response_json}",
                   location: "RoktEmbedded1",
                   config: roktConfig,
                   onUXEvent: { uxEvent in
                       // Traitez les événements UX ici
                   },
                   onPlatformEvent: { platformEvent in
                       // Envoyez ces événements de plateforme à l'API Rokt
                   })
}

Événements UX

Utilisez le gestionnaire onUXEvent pour recevoir des retours en temps réel sur les interactions des utilisateurs.

Au minimum, vous devez gérer lorsque l'événement RoktUXEvent.OpenUrl est déclenché afin que vous puissiez ouvrir le lien en utilisant l'exemple ci-dessous.

info

OpenUrl & onClose

event.onClose?(event.id) est crucial pour être appelé après qu'une URL ait été ouverte et informera le RoktUXHelper d'exécuter une logique comme passer à l'offre suivante.

onUXEvent: { uxEvent in // Gérez les événements UX ici
    // Gérez l'événement d'ouverture de l'URL
    // Voici un exemple de la façon d'ouvrir différents types d'URL
    if let event = uxEvent as? RoktUXEvent.OpenUrl,
        let url = URL(string: event.url) {
        switch event.type {
        case .externally:
            UIApplication.shared.open(url) { _ in
               event.onClose?(event.id) // Ceci doit être appelé lorsque l'utilisateur est prêt pour la prochaine offre
            }
        default:
            let safariVC = SFSafariViewController(url: url)
            safariVC.modalPresentationStyle = .overFullScreen
            if let rootVC = UIApplication.shared.connectedScenes
                .compactMap({ ($0 as? UIWindowScene)?.keyWindow }).last?.rootViewController {
                rootVC.present(safariVC, animated: true, completion: {
                    event.onClose?(event.id) // Ceci doit être appelé lorsque l'utilisateur est prêt pour la prochaine offre
                })
            }
        }
    }
},

Résumé

Intégrer RoktLayoutView dans votre application iOS est simple et offre un moyen flexible de gérer les vues et les expériences. En suivant les étapes décrites dans ce guide, vous pouvez ajouter RoktLayoutView à votre projet et tirer pleinement parti des fonctionnalités puissantes proposées par RoktUXHelper.

var body: some View {
    RoktLayoutView(
        experienceResponse: "{experience_response_json}",
        location: "RoktEmbedded1",
        config: roktConfig,
        onUXEvent: { uxEvent in
            // Gérez les événements UX ici
            if let event = uxEvent as? RoktUXEvent.OpenUrl,
                let url = URL(string: event.url) {
                switch event.type {
                case .externally:
                    UIApplication.shared.open(url) { _ in
                        event.onClose?(event.id)
                    }
                default:
                    let safariVC = SFSafariViewController(url: url)
                    safariVC.modalPresentationStyle = .overFullScreen
                    if let rootVC = UIApplication.shared.connectedScenes
                        .compactMap({ ($0 as? UIWindowScene)?.keyWindow }).last?.rootViewController {
                        rootVC.present(safariVC, animated: true, completion: {
                            event.onClose?(event.id)
                        })
                    }
                }
            }
        },
        onPlatformEvent: { platformEvent in
            // Envoyez ces événements de plateforme à l'API Rokt
        }
    )
}

UIKit

import Installation from './_installation.md'; import Configurations from './_configurations.md'; import Events from './_events.md';

Importer les Modules Nécessaires

Pour commencer à utiliser RoktLayoutUIView, vous devez importer les modules nécessaires dans votre contrôleur de vue ou votre classe.

import UIKit
import RoktUXHelper

Initialiser RoktLayoutUIView

La classe RoktLayoutUIView offre plusieurs options d'initialisation, permettant une flexibilité de configuration. Vous pouvez l'initialiser avec un experienceResponse, un nom de location et des paramètres de configuration optionnels tels que RoktUXConfig, et des gestionnaires d'événements.

func loadRokt() {
    let experienceResponse = "{experience_response_json}"
    
    let roktView = RoktLayoutUIView(
        experienceResponse: experienceResponse,
        location: "RoktEmbedded1",
        config: roktConfig,
        onUXEvent: { uxEvent in 
            // Gérer les événements UX ici
        },
        onPlatformEvent: { platformEvent in
            // Envoyer ces événements de plateforme à l'API Rokt
        },
        onEmbeddedSizeChange: { newSize in
            // Gérer les changements de taille de vue si nécessaire
        }
    )
}

Ajouter la Vue à Votre Disposition

Une fois initialisé, vous devez ajouter le RoktLayoutUIView à votre hiérarchie de vues. Vous pouvez le faire de manière programmatique dans votre contrôleur de vue en définissant des contraintes ou en positionnant manuellement.

// Ajouter le RoktLayoutUIView à la hiérarchie de vues
self.view.addSubview(roktView)

// Définir les contraintes pour positionner le RoktLayoutUIView
roktView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    roktView.topAnchor.constraint(equalTo: self.view.topAnchor),
    roktView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
    roktView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
    // Ajuster le reste si nécessaire
])

Événements UX

Utilisez le gestionnaire onUXEvent pour recevoir des retours en temps réel sur les interactions des utilisateurs.

Au minimum, vous devez traiter lorsque un événement RoktUXEvent.OpenUrl est déclenché afin de pouvoir ouvrir le lien en utilisant l'exemple ci-dessous.

info

OpenUrl & onClose

event.onClose?(event.id) est crucial pour être appelé après qu'une URL a été ouverte et notifiera le RoktUXHelper pour exécuter une logique comme passer à l'offre suivante.

onUXEvent: { uxEvent in // Gérer les événements UX ici
    // Gérer l'événement d'ouverture d'URL
    // Voici un exemple de comment ouvrir différents types d'URLs
    if let event = uxEvent as? RoktUXEvent.OpenUrl,
       let url = URL(string: event.url){
        switch event.type {
        case .externally:
            UIApplication.shared.open(url) { _ in
               event.onClose?(event.id) // Cela doit être appelé lorsque l'utilisateur est prêt pour l'offre suivante
            }
        default:
            let safariVC = SFSafariViewController(url: url)
            safariVC.modalPresentationStyle = .overFullScreen
            self.present(safariVC, animated: true, completion: {
               event.onClose?(event.id) // Cela doit être appelé lorsque l'utilisateur est prêt pour l'offre suivante
            })
        }
    }
},

Résumé

L'intégration de RoktLayoutUIView dans votre application iOS est simple et offre un moyen flexible de gérer les vues et les expériences. En suivant les étapes décrites dans ce guide, vous pouvez ajouter RoktLayoutUIView dans votre projet et tirer pleinement parti des fonctionnalités puissantes offertes par RoktUXHelper.

import UIKit
import RoktUXHelper
import SafariServices

class ViewController: UIViewController {
    
    // Implémentation de RoktUXImageLoader pour télécharger des images
    let imageLoader: RoktUXImageLoader = RoktUXImageLoaderImpl()
    lazy var roktConfig = RoktUXConfig.builder().imageLoader(imageLoader).build()

    override func viewDidLoad() {
        super.viewDidLoad()
        loadRokt()
    }
    
    
    func loadRokt() {
        let experienceResponse = "{experience_response_json}"
        
        let roktView = RoktLayoutUIView(
            experienceResponse: experienceResponse,
            location: "RoktEmbedded1",
            config: roktConfig,
            onUXEvent: { uxEvent in // Gérer les événements UX ici
                // Gérer l'événement d'ouverture d'URL
                // Voici un exemple de comment ouvrir différents types d'URL
                if let event = uxEvent as? RoktUXEvent.OpenUrl,
                   let url = URL(string: event.url){
                    switch event.type {
                    case .externally:
                        UIApplication.shared.open(url) { _ in
                            event.onClose?(event.id)
                        }
                    default:
                        let safariVC = SFSafariViewController(url: url)
                        safariVC.modalPresentationStyle = .overFullScreen
                        self.present(safariVC, animated: true, completion: {
                            event.onClose?(event.id)
                        })
                    }
                }
            },
            onPlatformEvent: { platformEvent in
                // Envoyer ces événements de plateforme à l'API Rokt
            },
            onEmbeddedSizeChange: { newSize in
                // Gérer les changements de taille de la vue si nécessaire
            }
        )
        self.view.addSubview(roktView)
        
        // Ajouter le RoktLayoutUIView à la hiérarchie des vues
        roktView.translatesAutoresizingMaskIntoConstraints = false
        // Définir les contraintes pour positionner le RoktLayoutUIView
```swift
NSLayoutConstraint.activate([
            roktView.topAnchor.constraint(equalTo: self.view.topAnchor),
            roktView.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            roktView.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            // Ajustez le reste si nécessaire
        ])
    }
    
    class RoktUXImageLoaderImpl : RoktUXImageLoader {
        
        func loadImage(urlString: String, completion: @escaping (Result<UIImage?, any Error>) -> Void) {
            guard let url = URL(string: urlString) else { return }
            
            let task = URLSession.shared.dataTask(with: url) { data, response, error in
                guard let data = data else { return }
                DispatchQueue.main.async {
                    completion(.success(UIImage(data: data)))
                }
            }
            
            task.resume()
        }
    }
}