6. Cordova/Ionic Integration Guide with Example

To make Mobile Explorer work with a Cordova or Ionic app, we created a plugin for Mobile Explorer and host it here. Follow the links below to learn more about plugin development with Cordova and Ionic

Steps to integrate Cordova/Ionic app with Mobile Explorer plugin

Step 1: Install Cordova or Ionic framework by following the links below

Step 2: To verify Cordova or Ionic frameworks are installed & configured properly, open Terminal and type:

  • Cordova
    • $ cordova -v

  • Ionic
    • $ ionic -v

Step 3: Open Terminal and create project using following command

  • Cordova
    • $ cordova create <projectName>
      Example: $ cordova create cordova_test

  • Ionic
    • $ ionic start <projectName> blank
      Example: $ ionic start ionic_test blank

Step 4: All subsequent commands need to be run within the project's directory, or any subdirectories within its scope. Go to the project's directory by following below command

  • Cordova: $ cd cordova_test
  • Ionic: $ cd ionic_test

Step 5: Add platforms (currently Mobile Explorer supports 2 platforms: android 5.0.0 and iOS)

  • Cordova
    • $ cordova platform add ios
    • $ cordova platform add android@5.0.0

  • Ionic
    • $ ionic platform add ios. Note: By default, iOS platform is added when creating project, so you don’t need add iOS platform again.
    • $ ionic platform add android@5.0.0

Step 6: Add Mobile Explorer plugin to your project

  • Cordova
    • $ cordova plugin add cordova-plugin-mobile-explorer

  • Ionic
    • $ ionic plugin add cordova-plugin-mobile-explorer

Step 7: Build project

  • Cordova
    • $ cordova build

  • Ionic
    • $ ionic build

If build process is successful, the output will be: apk file for android and ipa file for iOS that you can install on your target device

  • Cordova

  • Ionic

Integration example:

In this example, we will integrate a Cordova app named Staff Directory and integrate with Mobile Explorer plugin

For Ionic framework: the same steps are applied, just replace cordova command by ionic command

Step 1: 

Create project

  • $ cordova create ~/StaffDirectory

     

Next, make sure you change your current directory to project directory:

  • $ cd ~/StaffDirectory

Step 2: Add platforms

For Android:

  • cordova platform add android@5.0.0

For iOS:

  • $ cordova platform add ios

Step 3: 

Add Mobile Explorer plugin to project

  • $ cordova plugin add cordova-plugin-mobile-explorer

Validate that the plugin is installed successfully:

  • $ cordova plugins


Step 4: Build Project

  • $ cordova build

If the build is successful, the output will be put at:

  • For Android: ~/StaffDirectory/platforms/android/build/outputs/apk/android-mobileExplorer-debug.apk
  • For iOS: there will be XCode project at ~/StaffDirectory/platforms/ios/ that you can open it in XCode by opening StaffDirectory.xcodeproj

Here are screenshots of sample StaffDirectory app running on Android device after integrated with Mobile Explorer plugin: