Mobile apps created by using the Mashup SDK consist of a native component and a web-based component. Learn how you can extend the Mashup SDK API used in your third-party app for iOS, for example, to give the web component access to the functionality of the native component. One such use can be passing an arbitrary parameter to the native code before closing the webview.

• Prerequisites
• Extracting sample apps
• Building and running the sample app
• Creating your own plug-in

Prerequisites

Make sure that you have experience developing iOS apps. Use the following resources to develop the native iOS app that uses the Mashup SDK:

• Swift or Objective-C programming language
• Xcode 7.3.0 or 7.3.1

Complete the following tasks:

• Read the Mashup SDK overview article.
• Download the Mashup SDK distribution package.
• Read and follow the Setting up the Mashup SDK for iOS app development article.

Extracting sample apps

Begin your work by extracting two sample apps. The first app is part of the Mashup SDK distribution package and does not contain any plug-ins. The second app has been modified to contain two simple plug-ins:

• CloseWebViewPlugin - A plug-in that allows you to close a webview by using a JavaScript method
• SimpleBridge - A plug-in that lets you pass a message from the native side of the app to the webview

1. Extract a sample app in the root folder of the Mashup SDK package to a separate folder, for example, Sample1.
2. Download the Mashup SDK sample app and extract a sample app to another folder, for example, Sample2.
3. Copy the contents of the Frameworks folder from the Sample1 directory to the Frameworks folder in the Sample2 directory.

Building and running the sample app

1. Use the Xcode software development tool to open the sample app that was extracted to the Sample2 folder.
2. Learn how the webview side of the API implements methods defined on the native side of the API by calling them within the bridge.call method:
   1. Examine the contents of the CloseWebViewPlugin.swift file, which is in the Sample2\GenericDemo\Sources directory, and the CloseWebViewPlugin.js file, which is in the Sample2\GenericDemo\Sources\Resources folder. These files implement a plug-in that closes the HybridWebView after the CloseWebView method is called.
   2. Examine the contents of the SimpleBridge.swift file, which is in the Sample2\GenericDemo\Sources directory and the SimpleBridge.js file, which is in the Sample2\GenericDemo\Sources\Resources folder. These files implement a plug-in that passes a message from the native side of the app to the HybridWebView when the PostMessage method is called.

3. Run the app to observe the behavior of the plug-ins:

   1. Change the URL address provided in the OpenURLViewController.swift file to the address of your Pega 7 Platform application.

   2. Start the app in Xcode from your connected device or a simulator.

Creating your own plug-in

1. In the Sample2\GenericDemo\Sources\Resources folder, create a JavaScript file that performs the function that you want, for example MyPlugin.js. This file constitutes the webview component of the API, which serves as an intermediary and facilitates communications between the web app and the native side.

   You can also rename the SimpleBridgePlugin.js file, located in the Sample2\GenericDemo\Sources\Resources folder, and modify the following JavaScript code in the file to perform the function that you want:

   (function () { 
     window.SimpleBridge = window.SimpleBridge || {}; 
     window.SimpleBridge.postMessage = function (message) { 
       bridge.call("SimpleBridge", "postMessage", message, null); 
     };
     window.SimpleBridge.postMessageWithCallback = function (message, callback) { 
       var callbackObj = { 
         echo: callback 
       }; 
       bridge.call("SimpleBridge", "postMessageWithCallback", message, callbackObj); 
     };
   })();

2. If Xcode has not done it automatically, add the MyPlugin.js file to the GenericDemo Xcode project.

3. If Xcode has not done it automatically, include the MyPlugin.js file in the Copy Bundle Resources build phase (within the Build Phases tab in the project settings).

4. Create a class in the GenericDemo Xcode project, and populate it with code that implements the methods that are exposed in the MyPlugin.js file. You are creating the native side of the API, which calls the JavaScript code by using the JavaScript-native side bridge functionality of the Mashup SDK.

   You can also rename the SimpleBridgePlugin.swift file, which is in the Sample2\GenericDemo\Sources folder, and modify the following code in the file to implement the method or methods that you just created in the MyPlugin.js file:

   import PMBase 
   	import UIKit 
   	 
   	class SimpleBridgePlugin: PMJavaScriptPlugin {  
   	 
   	  private var pluginContext: PMJavaScriptPluginContext 
   	 
   	  override init(context: PMBase.PMJavaScriptPluginContext) {  
   	    self.pluginContext = context 
   	    super.init(context: context) 
   	  } 
   	 
   	  override class func name() -> String {  
   	    return "SimpleBridge" 
   	  } 
   	 
   	  override func provideJavaScript(completionHandler: (String) -> Void) {  
   	    let bundle = NSBundle(forClass: CloseWebViewPlugin.self) 
   	    let script = bundle.pm_readResource("simpleBridge", type: "js") ?? "" 
   	    completionHandler(script) 
   	  } 
   	 
   	  func postMessage(data: AnyObject?, withCallback callback: PMJavaScriptCallback?) {  
   	    guard let message = data as? String else {  
   	      return 
   	    } 
   	    print(message) 
   	  } 
   	 
   	  func postMessageWithCallback(data: AnyObject?, withCallback callback: PMJavaScriptCallback?) {  
   	    guard let message = data as? String else {  
   	      return 
   	    } 
   	    print(message) 
   	    callback?.call("echo", passingData: "ping pong:" + message); 
   	  } 
   	}

5. Run the app to verify that it behaves as designed. Correct the code, if needed.