Using OneSDK for native apps

To use OneSDK inside a native app, you need to create a web app that contains a simple HTML page, following the same steps in the Getting Started section. This HTML page will serve as an intermediary layer, initializing and interacting with the OneSDK and its components via an embedded script.

The native app can then interact with the Web app using WebView. You would need to host the Web app on a server and open the URL within WebView for both Android and iOS apps.

Android integration

You can use the following example for your Android application:

webAppInterface = WebAppInterface(requireContext())
        binding.webView.apply {
            webViewClient = MyWebViewClient()
            webChromeClient = MyWebChromeClient()
            addJavascriptInterface(webAppInterface, "Android")
            loadUrl("https://visionary-donut-d00f62.netlify.app/")
        }

Code	Description
`webAppInterface = WebAppInterface(requireContext())`	Creates an instance of the `WebAppInterface class`, which is a custom class that likely provides methods and functionality to interact between JavaScript and native Android code.
`binding.webView.apply { ... }`	Accesses the WebView component defined in the layout file using the binding object (assuming data binding is used). The subsequent code block configures the WebView.
`webViewClient = MyWebViewClient()`	Sets a custom WebViewClient to handle various events and behaviours during WebView loading and navigation.
`webChromeClient = MyWebChromeClient()`	Sets a custom WebChromeClient to handle various events and behaviours related to Chrome functionality in the WebView, such as JavaScript alerts or progress tracking.
`addJavascriptInterface(webAppInterface, "Android")`	Adds the webAppInterface object as a JavaScript interface to the WebView, allowing JavaScript code executed within the WebView to call methods defined in the WebAppInterface class.
`loadUrl("\<<< INSERT URL TO WEB APPLICATION FROM STEP 1 >>>")`	It loads the specified URL in the WebView, displaying the corresponding web content.

iOS Integration

You can use the following example for your iOS application:

private func setupWebView() {
        let configuration = WKWebViewConfiguration()
        webAppInterface = WebAppInterface(delegate: self, viewModel: FrankieOneViewModel())
        configuration.allowsInlineMediaPlayback = true
        configuration.defaultWebpagePreferences.allowsContentJavaScript = true
        configuration.preferences.javaScriptCanOpenWindowsAutomatically = true
        configuration.upgradeKnownHostsToHTTPS = true
        webView.autoresizingMask = [.flexibleHeight]
        webView.navigationDelegate = self
        webView.allowsBackForwardNavigationGestures = true
        webView.customUserAgent = URLGenerator.userAgent
        webView.allowsLinkPreview = true
        view.addSubview(webView)
        
        if let url = URL(string: URLGenerator.webURL) {
            let myURLRequest = URLRequest(url: url)
            webView.load(myURLRequest)
        }
    }

Here are the steps done in the above code sample:

Create a WKWebViewConfiguration instance.
Initialize a WebAppInterface with a delegate and a FrankieOneViewModel.
Set various configuration properties for the WKWebView, such as allowing inline media playback, enabling JavaScript content, allowing automatic opening of windows by JavaScript, upgrading known hosts to HTTPS, etc.
Set the autoresizing mask for the WKWebView to enable flexible height.
Set the navigationDelegate of the WKWebView to self (likely the current view controller).
Enable back-forward navigation gestures for the WKWebView.
Set a custom user agent for the WKWebView using URLGenerator.userAgent.
Enable link preview for the WKWebView.
Add the WKWebView as a subview to the view.
Create a URL from the specified web URL using URLGenerator.webURL.
Create a URLRequest with the created URL.
Load the URLRequest into the WKWebView using the load() method.

Relay the results from the Web app back to the native app

Once the WebViews have been implemented correctly and point to the web application that has also been set up correctly, the final step will be relaying the results from the web application back to the native application and carrying out specific requirements.

For example, in the case of OCR, the results should be returned to the native app to take the next step. This can be done by adding additional functions to the WebAppInterface outlined above. By applying the @JavaScriptInterface annotation, this indicates that the method is accessible from the Web Application

Example

Web Application - Once OCR component is done, returnOCRResults method is called to pass the result object

function returnOCRResults(results) {
  Android.processOCRResults(results)
}

Android - Using a toast method to display the results of the OCR component

@JavascriptInterface
    public void processOCRResult(String result) {
        Toast.makeText(mContext, "OCR result: " + result, Toast.LENGTH_SHORT).show();
    }

Response object

The OCRResult object contains the data extracted from a document image and it varies depending on what was extracted, an example:

{
  documentTypeInternal: "DRIVERS_LICENCE",  
  dateOfExpiry: "2031-05-28",  
  dateOfIssue: "2021-05-28",  
  documentType: "DRIVERS_LICENCE",  
  documentNumber: "999999999",  
  dateOfBirth: "1990-01-01",  
  issuingCountry: "AUS",  
  state: "VIC",  
  postcode: "3000",  
  town: "Melbourne",  
  street: "80 Collins Street",  
  firstName: "PETER",  
  lastName: "TESTTHIRTEEN",  
}