Native IOS

Introduction

The iOS integration of the IntelliProve plug-in involves incorporating the IntelliProve SDK files into your project dependencies.

All this is nicely laid out in our step-by-step guide below.

The integration guide covers three sections:

1. Adding the SDK
2. Setting up the project
3. Usage

GitHub

Our GitHub repository provides a fully functional example of our platform’s integration, demonstrating the seamless setup and utilisation of our native SDKs for iOS platforms.

https://github.com/IntelliProve/intelliprove-web-plugin-ios

Adding the SDK

We provide an SDK to facilitate the setup and configuration of the Webview component.

Last update 18/06/2024 19:13

IntelliProveSDK.xcframework.zip

• Unzip the IntelliProveSDK.xcframework
• Open your project in XCode
• Open Project Settings > General and in the Frameworks, Libraries, and Embedded Content section, add the IntelliProveSDK.xcframework from above as a dependency

Setting up the project

We need to add some keys to the Info.plist. Otherwise, the iOS application will not request camera permissions and will not pass the App Store certification process:

• In Project Settings > Build Settings tab, verify that the iOS Deployment Target is set appropriately. The minimum supported version for the IntelliProveSDK is iOS 15.0
• Now open the Project Settings > Info tab to add the following Info.plist value:
  • NSCameraUsageDescription - Add a String here that will be displayed when the application asks the user for Camera Usage permissions

Usage

UIKit

• Use the IntelliWebViewFactory class to create a new IntelliWebViewController instance
• Pass the following arguments to the factory’s newWebView method:
  • The generated web plug-in URL
  • Your implementation of the IntelliWebViewDelegate protocol

Please note:

• The WebView is automatically dismissed by the SDK when receiving the dismiss post message.
• The SDK creates a new UIViewController, which should be presented as a fullscreen modal. This means the entire screen will be filled with the IntelliProve plug-in.

import SwiftUI
import IntelliProveSDK

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
    private let url = "https://plugin.intelliprove.com/?action_token=xxx"

    var window: UIWindow?

    private lazy var navigationController = UINavigationController(
        rootViewController: UIHostingController(rootView: RootView(onButtonTap: { [weak self] in
            self?.showWebView()
        }))
    )

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        ...
        window.rootViewController = navigationController
        ...
    }

    private func showWebView() {
        let webViewController = IntelliWebViewFactory.newWebView(urlString: url, delegate: self)
        webViewController.modalPresentationStyle = .fullScreen
        navigationController.present(webViewController, animated: true)
    }
}

extension SceneDelegate: IntelliWebViewDelegate {
    func didReceive(postMessage: String) {
        // postMessage is received as JSON string, so needs to be parsed
        print("POC: \(postMessage)")
    }
}

struct RootView: View {
    let onButtonTap: () -> Void

    var body: some View {
        VStack {
            Text("WebView POC")

            Button {
                onButtonTap()
            } label: {
                Text("Open WebView")
            }
        }
    }
}

Swift UI

• Use the IntelliWebViewLink View component in your existing Swift UI page. This component works similar to the Swift UI NavigationLink component.
• Pass the following arguments to the component’s initializer.
  • The generated web plug-in URL
  • Your implementation of the IntelliWebViewDelegate protocol
• Control the visual appearance of the link by providing view content in the link’s label closure

Please note:

• The WebView is automatically dismissed by the SDK when receiving the dismiss post message.
• The SDK’s IntelliWebViewLink presents the WebView as a fullscreen modal when tapped. This means the entire screen is filled with the IntelliProve plug-in.

import SwiftUI
import WebKit
import AVKit
import IntelliProveSDK

class ContentViewModel: ObservableObject {
    let urlString = "https://plugin.intelliprove.com/?action_token=xxx"
}

extension ContentViewModel: IntelliWebViewDelegate {
    func didReceive(postMessage: String) {
        print("POC: \(postMessage)")
    }
}

struct ContentView: View {
    @ObservedObject
    private(set) var viewModel: ContentViewModel

    var body: some View {
        VStack {
            Text("IntelliProve SwiftUI POC")
                .font(.largeTitle)

            IntelliWebViewLink(
                urlString: viewModel.urlString,
                delegate: viewModel
            ) {
                // Visual appearance of the link
                Text("Show WebView")
            }
        }
    }
}

#Preview {
    ContentView(viewModel: ContentViewModel())
}

Next steps

• To match the plug-in with your brand’s colours and fonts, please visit our Customisation documentation.