Integrating AE Connect with Mobile Apps Using Webviews

This article will introduce you to the concept of webviews. However, it is not a tutorial to help you integrate a webview of AE Connect into your app. We recommend reading the developer documentation about the webview implementations you need to use before setting them up, so you can integrate them better with your existing app.

Webviews and Hybrid Apps

Using webviews, you can integrate Appreciation Engine into your existing iOS and Android apps. When a native app includes webviews for additional functionality, it becomes a part-native and part-web app, making it a "hybrid" app.

Webviews allow any application to take advantage of content that's made for the web. In a mobile app, the webview is the "window" through which your user can interact with webpages. In the case of Appreciation Engine, we will be using the webview to authenticate AE.

Implementing Webviews in Android and iOS Apps

While the implementation of webviews in iOS is a little bit different than on Android, the resulting functionality is the same. This article will show you how to implement Appreciation Engine in your iOS and Android apps.

Both Android and iOS make it easy to add webviews to your apps:

• Android uses a WebView  class. You can add the webview and any required code using Java. You can then use the addJavascriptInterface  method to communicate between the mobile app and JavaScript layers.
• iOS includes a UIWebView  class as a part of Objective-C and Swift. You can then use the stringByEvaluatingJavaScriptFromString  method to communicate between the iOS app and the JavaScript layers.

Diagram of Mobile App–Webview Integration

In the diagram below, you can see what is happening behind the scenes when a user registers or logs into an app that uses an AE webview.

Here are the steps, from start to finish:

1. The mobile app loads the webview.
2. The externally-hosted page gets pulled into the webview and includes the AE JS framework.
3. An AE JS request is made.
4. AE JS makes an authentication request to the social network specified by the user.
5. The social network provides an authentication response to AE JS.
6. AE JS triggers an onLogin  event and responds to the webview with it.
7. The onLogin  handler will capture the data returned by AE from the external service's authentication process. This data is passed back to the mobile app environment through a native bridge. (For example, the addJavascriptInterface  on Android or the stringByEvaluatingJavaScriptFromString  on iOS.)
8. The mobile app handles the login process.
9. The user is now logged in and can continue to use the mobile app.