Ionic end-to-end demonstration

improve this page | report issue


The purpose of this demonstration is to explain an end-to-end flow. The following steps are carried out.

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

End result:

  • Successfully ping the MobileFirst Server.
  • Successfully retrieve data using an adapter.


  • Xcode for iOS, Android Studio for Android or Visual Studio 2015 or greater for Windows 10 UWP
  • Ionic CLI
  • Optional. MobileFirst CLI (download).
  • Optional. Stand-alone MobileFirst Server (download).

Step 1. Starting the MobileFirst Server

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

Step 2. Creating and registering an application

Open the MobileFirst Operations Console by loading the URL: http://your-server-host:server-port/mfpconsole in a browser. If server is running locally, use http://localhost:9080/mfpconsole. The username/password is admin/admin.

  1. Click the New button next to Applications
    • Select a platform from the list of platforms: Android, iOS, Windows, Browser
    • Enter as the application identifier
    • Enter 1.0.0 as the version
    • Click on Register application

    Register an application

  2. Download the sample Ionic application from Github.

Step 3: Adding the MobileFirst SDK to Ionic application

Follow the steps below to add MobileFirst Ionic SDK to the downloaded Ionic sample application.

  1. Navigate to the root of your existing Ionic project and add the MobileFirst core Ionic Cordova plug-in.

  2. Change directory to the root of the Ionic project: cd MFPStarterIonic

  3. Add the MobileFirst Plugins by using the Ionic CLI command: ionic cordova plugin add cordova-plugin-name For example:

    ionic cordova plugin add cordova-plugin-mfp

    The above command adds MobileFirst Core SDK Plugin to the Ionic project.

  4. Add one or more supported platforms to the Cordova project by using the Ionic CLI command: ionic cordova platform add ios|android|windows|browser. For example:

    cordova platform add ios
  5. Prepare the application resources by running the ionic cordova prepare command:

    ionic cordova prepare

Step 4. Editing application logic

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

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

      (token) => {
        console.log('-->  pingMFP(): Success ', token); => {
          this.title = "Yay!";
          this.status = "Connected to MobileFirst Server";
        var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",

        resourceRequest.setQueryParameter("name", "world");
                (response) => {
                    // Will display "Hello world" in an alert dialog.
                    alert("Success: " + response.responseText);
                (error) => {
                    alert("Failure: " + JSON.stringify(error));
      }, (error) => {
        console.log('-->  pingMFP(): failure ', error.responseText); => {
         this.title = "Bummer...";
         this.status = "Failed to connect to MobileFirst Server";

Step 5. Deploy an adapter

Download this .adapter artifact and deploy it from the MobileFirst 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 MobileFirst 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:

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

    Deploy an adapter

sample application

Step 6. Testing the application

  1. From a Command-line window, navigate to the Cordova project’s root folder.
  2. Run the command: ionic cordova platform add ios|android|windows|browser to add a platform.
  3. In the Ionic 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 MobileFirst Server.
    • If using a local MobileFirst Server, the values are typically http, localhost and 9080.
    • If using a remote MobileFirst Server (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 MobileFirst CLI, then navigate to the project root folder and run the command mfpdev app register. If a remote MobileFirst Server is used, run the command

     mfpdev server add

    to add the server, followed by the command to register the app, for example:

     mfpdev app register myIBMCloudServer

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


  • Clicking the Ping MobileFirst Server button displays Connected to MobileFirst Server.
  • If the application was able to connect to the MobileFirst Server, a resource request call using the deployed Java adapter takes 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 MobileFirst security framework and more:

Inclusive terminology note: The Mobile First Platform team is making changes to support the IBM® initiative to replace racially biased and other discriminatory language in our code and content with more inclusive language. While IBM values the use of inclusive language, terms that are outside of IBM's direct influence are sometimes required for the sake of maintaining user understanding. As other industry leaders join IBM in embracing the use of inclusive language, IBM will continue to update the documentation to reflect those changes.
Last modified on May 17, 2019