Cordova end-to-end demonstration

Overview

The purpose of this demonstration is to experience an end-to-end flow:

  1. A sample application that is pre-bundled with the PMF client SDK is registered and downloaded from the PMF Operations Console.
  2. A new or provided adapter is deployed to the PMF Operations Console.
  3. The application logic is changed to make a resource request.

End result:

  • Successfully pinging the PMF.
  • Successfully retrieving data using an adapter.

Prerequisites:

  • Cordova CLI 6.x.
  • Optional. PMF CLI (download)
  • Optional. Stand-alone PMF (download)

1. Starting the PMF

Make sure you have created a Persistent Mobile Foundation instance, or
If using the PMF Developer Kit, navigate to the server’s folder and run the command: ./run.sh in Mac and Linux or run.cmd in Windows.

2. Creating and registering an application

In a browser window, open the PMF Operations Console by loading the URL: http://your-server-host:server-port/mfpconsole. If running locally, use: http://localhost:9080/mfpconsole. The username/password are admin/admin.

  1. Click the New button next to Applications
    • Select a platform: Android, iOS, Windows
    • Enter com.sample.pmfcordova as the application identifier
    • Enter 1.0.0 as the version
    • Click on Register application

    Register an application

  2. Click on the Get Starter Code tile and select to download the Cordova sample application.

    Download sample application

3. Editing application logic

  1. Open the Cordova project in your code editor of choice.

  2. Select the www/js/index.js file and paste the following code snippet, replacing the existing WLAuthorizationManager.obtainAccessToken() function:

WLAuthorizationManager.obtainAccessToken()
    .then(
        function(accessToken) {
            titleText.innerHTML = "Yay!";
            statusText.innerHTML = "Connected to PMF";

            var resourceRequest = new WLResourceRequest(
                "/adapters/javaAdapter/resource/greet/",
                WLResourceRequest.GET
            );

            resourceRequest.setQueryParameter("name", "world");
            resourceRequest.send().then(
                function(response) {
                    // Will display "Hello world" in an alert dialog.
                    alert("Success: " + response.responseText);
                },
                function(response) {
                    alert("Failure: " + JSON.stringify(response));
                }
            );
        },

        function(error) {
            titleText.innerHTML = "Bummer...";
            statusText.innerHTML = "Failed to connect to PMF";
        }
    );

4. Deploy an adapter

Download this prepared adapter artifact and deploy it from the PMF Operations Console using the Actions → Deploy adapter action.

Alternatively, click the New button next to Adapters.

  1. Select the Actions → Download sample option. Download the “Hello World” Java adapter sample.

    If Maven and PMF CLI are not installed, follow the on-screen Set up your development environment instructions.

  2. From a Command-line window, navigate to the adapter’s Maven project root folder and run the command:

     pmfdev adapter build

  3. When the build finishes, deploy it from the PMF Operations Console using the Actions → Deploy adapter action. The adapter can be found in the [adapter]/target folder.

    Deploy an adapter

sample application

5. Testing the application

  1. From a Command-line window, navigate to the Cordova project’s root folder.
  2. Run the command: cordova platform add ios|android|windows to add a platform.
  3. In the Cordova project, select the config.xml file and edit the <mfp:server ... url=" "/> value with the protocol, host and port properties with the correct values for your PMF.
    • If using a local PMF, the values are typically http, localhost and 9080.
    • If using a remote PMF (on IBM Cloud), the values are typically https, your-server-address and 443.
    • If using a Kubernetes cluster on IBM Cloud Private and if the deployment is of type NodePort, the value of the port would typically be the NodePort exposed by the service in Kubernetes cluster.

    Alternatively, if you have installed the PMF CLI, then navigate to the project root folder and run the command pmfdev app register. If a remote PMF is used, run the command pmfdev server add to add the server, followed by for example: pmfdev app register myIBMCloudServer.

If a device is connected, the application will be installed and launched in the device,
Otherwise the Simulator or Emulator will be used.


Results

  • Clicking the Ping PMF button will display Connected to PMF.
  • If the application was able to connect to the PMF, a resource request call using the deployed Java adapter will take place.

The adapter response is then displayed in an alert.

Next steps

Learn more on using adapters in applications, and how to integrate additional services such as Push Notifications, using the PMF security framework and more:

Troubleshooting

Issue with Cordova Browser platform execution:

Cordova projects with browser platform failed to run and throws following exception in node levels 13 and above:

> cordova run browser
node:internal/modules/cjs/loader:499
   throw e;
   ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './v4' is not defined by "exports" in /Users/sp3775/GitHub/IonicUpgrade/mobileappiu/node_modules/uuid/package.json
  at new NodeError (node:internal/errors:387:5)
  at throwExportsNotFound (node:internal/modules/esm/resolve:464:9)
  at packageExportsResolve (node:internal/modules/esm/resolve:748:3)
  at resolveExports (node:internal/modules/cjs/loader:493:36)
  at Function.Module._findPath (node:internal/modules/cjs/loader:533:31)
  at Function.Module._resolveFilename (node:internal/modules/cjs/loader:942:27)
  at Function.Module._load (node:internal/modules/cjs/loader:804:27)
  at Module.require (node:internal/modules/cjs/loader:1028:19)
  at require (node:internal/modules/cjs/helpers:102:18)
  at Object.<anonymous> (/Users/sp3775/GitHub/IonicUpgrade/mobileappiu/platforms/browser/www/plugins/cordova-plugin-mfp/worklight/node_modules/request/lib/auth.js:4:12) {
 code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
startPage = index.html
Static file server running @ http://localhost:8000/index.html
CTRL + C to shut down
Error: exit code 1
[ERROR] An error occurred while running subprocess cordova.

Solution:

Install missing plugin uuid from root of the project using command npm install uuid@3.3.2.

▲
Last modified on