Menu

Integration With Cordova / Ionic

Integration With Cordova / Ionic 

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

Setup

Install

Install Cordova or Ionic framework by following the links below

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

  • Cordova
    • $ cordova -v

  • Ionic
    • $ ionic -v

Create Project

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

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

Run Commands 

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

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

Add Mobile Explorer plugin to your project

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

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

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

 

Example With Cordova 

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:

Subscribe To Our Blog
Powered by Zendesk