Developing for Ionic

improve this page | report issue
Develop your Ionic applications by following the tutorials below: set-up your development environment, experience the product and add value by integrating with Mobile Foundation 8.0 offerings.

Ionic is a framework that is built on AngularJS and Apache Cordova. Ionic helps you to rapidly build hybrid mobile and web platform apps using web technologies such as HTML, CSS, and Javascript.

If you are a developer who has chosen Ionic as the framework to develop your mobile or web app, the following sections help you get started with IBM Mobile Foundation SDK in your Ionic app.

You can use your preferred code editor such as Atom.io, Visual Studio Code, Eclipse, IntelliJ or any other editor for writing your applications.

Follow the steps below to get quickly started with development using Ionic on MobileFirst Platform Foundation.

Step 1: Installing the Ionic CLI

To get started with Ionic development the first step required is to install the Ionic CLI.

To install Cordova and Ionic CLI:

Download and install NodeJS.

From a Command-line window, run the following command:

    npm install -g ionic

Step 2: Setting up the MobileFirst development environment

After you have installed the Ionic CLI, set up the MobileFirst development environment. For detailed information, refer to the tutorial Setting up the MobileFirst development environment to set up your MobileFirst development environment.


Go to Quick Start tab, to learn how to quickly get started with development using Ionic SDK.

The purpose of this quick start tutorial is to explain a simple end-to-end flow.

A sample application is provided in Github, the sample is downloaded and registered with MobileFirst Server. The provided adapter (or a new adapter) is deployed to the MobileFirst Operations Console. The application logic is changed to make a resource request.

Expected result: To successfully ping the MobileFirst Server and to successfully retrieve data using an adapter.

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: ./run.sh in Mac and Linux or run.cmd in Windows.

Step 2: Registering an application

Open the MobileFirst Operations Console by loading the URL: http://your-server-host:server-port/mfpconsole in a browser.

  • If the server is running locally, use: http://localhost:9080/mfpconsole. The username/password is admin/admin.
  • If the server is running on IBM Cloud as Mobile Foundation service instance, use: https://bluemix-mfp-server-hostname:443/mfpconsole. The username/password can be obtained from the IBM Cloud Mobile Foundation Service Credentials.

Step 2.1: Click the New button next to Applications

  • Select a platform from the list of platforms: Android, iOS, Windows, Browser
  • Enter com.ibm.mfpstarterionic as the application identifier
  • Enter 1.0.0 as the version
  • Click on Register application

Step 2.2: Downloading the Ionic sample from Github.

Step 2.3: Adding the Ionic SDK to the downloaded Ionic sample application

  1. Navigate to the root of your downloaded 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 2.4: Editing the application logic

  1. Open the Ionic project in your code editor of choice.
  2. Select the src/js/index.js file and paste the following code snippet, replacing the existing WLAuthorizationManager.obtainAccessToken() function: 
               WLAuthorizationManager.obtainAccessToken("").then(
           (token) => {
             console.log('-->  pingMFP(): Success ', token);
             this.zone.run(() => {
               this.title = "Yay!";
               this.status = "Connected to MobileFirst Server";
             });
             var resourceRequest = new WLResourceRequest( "/adapters/javaAdapter/resource/greet/",
             WLResourceRequest.GET
             );

             resourceRequest.setQueryParameter("name", "world");
                 resourceRequest.send().then(
                     (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.zone.run(() => {
              this.title = "Bummer...";
              this.status = "Failed to connect to MobileFirst Server";
             });
           }
         );

Step 3: Deploying an adapter

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

Step 3.1: Select the Actions → Download sample option. Download the Hello World Java adapter sample

Alternatively, click the New button next to Adapters.

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

Step 3.2: From a Command-line window, navigate to the adapter's Maven project root folder and run the command:

    mfpdev adapter build

Step 3.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.

Step 4: Testing the application

Step 4.1: From a Command-line window, navigate to the Ionic project's root folder.


Step 4.2: Run the command:
ionic cordova platform add ios|android|windows|browser
to add a platform.


Step 4.3: In the Ionic project, select the config.xml file and edit the 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 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.

For detailed instructions on quick start steps, see here.

Results

  • Clicking the Ping MobileFirst Server button will display Connected to MobileFirst Server.
  • If the application is 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.

Troubleshooting

Issue with Ionic Cordova Browser platform execution:

Ionic6 projects with browser platform failed to run and throws following exception:

> 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

▲
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 November 11, 2022