Using the MobileFirst CLI in Eclipse

improve this page | report issue

Overview

Using the Cordova CLI you can create and manage your Cordova applications. You can also achieve the same in the Eclipse IDE by using the THyM plug-in.

THyM provides support for importing and managing Cordova projects in Eclipse. You can create new Cordova projects, as well as import existing Cordova projects. You can also install Cordova plug-ins into your project through this plug-in.

Learn more about THyM in its official website.

The MobileFirst Studio plug-in for Eclipse exposes the various MobileFirst commands in the Eclipse IDE. Specifically, it provides the following commands: Open Server Console, Preview App, Register App, Encrypt App, Pull App, Push App, Update App.

This tutorial walks you through installing the THyM and MobileFirst Eclipse plug-ins.

Prerequisites:

  • MobileFirst Server to run locally, or a remotely running MobileFirst Server.
  • MobileFirst CLI installed on the developer workstation

Jump to:

Installing the MobileFirst Studio plug-in

  1. While in Eclipse click Help → Eclipse Marketplace…
  2. In the find field search “MobileFirst” then click “Go”
  3. Click “Install”

    Image of MobileFirst Studio installation

  4. Complete the installation process
  5. Restart Eclipse for the installation to take affect.

Installing the THyM plug-in

Note: To run THyM you must be running Eclipse Mars or later

  1. While in Eclipse click Help → Eclipse Marketplace…
  2. In the find field search “thym” then click “Go”
  3. Click “Install” for Eclipse Thym

    Image of THyM installation

  4. Complete the installation process
  5. Restart Eclipse for the installation to take affect.

Creating a Cordova project

In this section we will discuss how to create a new Cordova project using THyM.

  1. While in Eclipse click File → New → Other…
  2. Narrow options by searching for “Cordova” and select Hybrid Mobile (Cordova) Application Project in the Mobile directory and click Next

    Image of new Cordova wizard

  3. Name the project, and click Next

    Image of new Cordova naming

  4. Add the desired platform for your project and click Finish

Note: If you need additional platforms after creation see Adding platforms

Importing an existing Cordova project

In this section we will discuss how to import an existing Cordova project that has already been created using the Cordova CLI.

  1. While in Eclipse click File → Import…
  2. Select Import Cordova Project in the Mobile directory and click Next >
  3. Click Browse… and select the root directory of the existing Cordova project.
  4. Ensure the project is checked in the “Projects:” sections and click Finish Image of importing Cordova project

If you import a project without any platforms you will see the following error, please see the adding platforms section on how to resolve this error. No platforms error image

Note: If you need to additional platforms after an import see adding platforms

Adding the MobileFirst SDK to Cordova project

Once you have installed THyM and the MobileFirst CLI plugin into Eclipse and have either created a Cordova project or imported a Cordova project you can then follow the below steps to install the MobileFirst SDK via Cordova plugin.

  1. In the Project Explorer right click the plugins directory and select Install Cordova Plug-in
  2. In the Registry tab of the presented dialog box search mfp and select cordova-plugin-mfp and click Finish

    Image of new Cordova plugin install

MobileFirst Commands

To access Mobile Foundation shortcuts, right-click the root project directory and navigate to IBM MobileFirst Foundation.

Here you will be able to select from the following commands:

Menu option Action MobileFirst command-line interface equivalent
Open Server Console When the server definition exists, opens the console so you can view the actions of the specified server. mfpdev server console
Preview App Opens the app in the browser preview mode. Opens the app in the browser preview mode.
Register App Registers the app with the server that is specified in your server definitions. mfpdev app register
Encrypt App Runs the web resource encryption tool on your app. mfpdev app webencrypt
Pull App Retrieves the existing app configuration from the server that is specified in the server definition. mfpdev app pull
Push App Sends the app configuration of your current app to the server that is specified in the build definition so you can reuse it for another app. mfpdev app push
Updated App Packages the contents of the www folder in a .zip file, and replaces the version on the server with the package. mfpdev app webupdate

Tips and Tricks

context-menu in Eclipse to open in External IDEs

External IDE’s

If you would like to test or deploy to a device via an External IDE (Android Studio or Xcode) this can be accomplished via the the context menu.

Note: Please be sure to manually import your project into Android Studio to set up the gradle configuration before launching from Eclipse. Otherwise you might run into unnecessary steps or errors. From Android Studio select import Import project (Eclipse ADT Gradle, etc.) and navigate to your project and select the android directory within the platforms directory.

In the Eclipse project explorer right click the desired platform (i.e. android or ios in the platforms directory) → hover over Run As in the context menu → select the appropriate external IDE.

Adding platforms

Adding additional platforms is a simple process that the THyM plugin does not make intuitive. You have two options to accomplish the same task, and they are as follows.

  1. Via Properties
    1. Right click your project and select properties from the context menu.
    2. In the presented dialog select Hybrid Mobile Engine from the left hand menu.
    3. In this pane you will be able to select or download the desired platforms.
  2. Via Terminal
    1. Right click your project and hover over Show In and select Terminal from the context menu.
    2. This should add a tab to next to the console in Eclipse
    3. Here you will be able to manually add platforms using the Cordova CLI commands
      • cordova platform ls will list the installed and available platforms
      • cordova platform add <platform> where ** equals your desired platform, will add the specified platform to the project.
      • For more information on Cordova platform specific commands see Cordova platform command documentation.

Debug mode

Enabling debug mode will show debug level logs in the Eclipse console, while previewing the application in a browser. To enable debug mode do the following:

  1. Open Eclipse’s Preferences.
  2. Select MobileFirst Studio Plugins to show the plug-ins preferences page.
  3. Ensure the Enable debug mode check bocks is selected, then click Apply → OK

Live update

While previewing an application live update is available. You can make updates and save you changes and watch them auto refresh in the preview.

Integrating MobileFirst Server into Eclipse

Using the MobileFirst Developer Kit, You can couple together the above with running the MobileFirst Server in Eclipse to create a more integrated development environment.

Demo Video

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 October 30, 2019