Using OneSDK in 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 aFrankieOneViewModel
. - 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 toself
(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",
}
React Native
To use OneSDK inside a React Native project, 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. Your React Native project can interact with the Web app using React Native WebView. You would need to host the Web app on a server and open the URL within WebView for both Android and iOS apps.
To use OneSDK in a React Native project, follow these steps:
Create a Web App:
- Develop a web app that includes a simple HTML page, following the steps in the "Getting Started" section.
- This HTML page will serve as an intermediary, initializing and interacting with OneSDK and its components through an embedded script.
Integrate with React Native:
- Use React Native WebView to interact with the web app.
- Host the web app on a server.
- Open the web app URL within WebView for both Android and iOS apps.
This setup will allow your React Native project to effectively use OneSDK.
Install the WebView Library
React Native provides a separate library for WebView since it was removed from the core package. Install the react-native-webview
package:
$ npm install react-native-webview
Implement WebView in your React Native application
Open your project in your preferred code editor and navigate to App.js. Import the WebView component from react-native-webview
and use it to render your HTML page.
Here is an example implementation:
import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
const App = () => {
const ONE_SDK_URL = '<https://your-web-service.com'>; // Your web app where you implement oneSDK
return (
<SafeAreaView style={styles.container}>
\<WebView
originWhitelist={['*']}
source={{ uri: ONE_SDK_URL }}
style={styles.webview}
/>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
webview: {
flex: 1,
},
});
export default App;
Updated 2 months ago