How to use Cordova

Posted on by Posted in Developers log, News

CordovaWhile the next version 2.0 is still not entirely ready, here’s a post about how your HTML5 application can be converted to a native application with Cordova (the open source base of PhoneGap). It’s a bit more tricky than with PhoneGap, but completely free of any costs and you don’t need to transmit your application to any server, which might be in times of NSA surveillance always a bit critical.

The tutorial below only covers the basics. If you want to use plugins to enhance the native experience (e.g. to access hardware directly), you need to consult the plugin’s documentation.

  1. Node.js_LogoInstall the latest Node.js
  2. Install Cordova via “npm install -g cordova”
  3. Eventually install the latest Java and JDK (if not installed already)
  4. Download Ant (“.zip archive”) and extract the content to any desired directory
  5. Android[Optionally] Install Eclipse (or ADT, see next item 6)
  6. Install Android SDK [included in ADT]
    • Version 2.2 (API 8) and 4.3 (API 18) [+others if desired]
    • Google APIs
    • Android SDK, Platform & Build Tools
  7. [Optionally] Install Blackberry10 API
    • similar to step 5 install NDK from the QNX IDE (for example to
      C:\BBNSDK

       as no spaces are allowed in the path (!))

    • call
      bbndk-env_10_2_0_1155.bat

        and then

      sdkinstall.bat

        (in the same command line window!)

  8. Windows Phone[Optionally] Install Windows Phone SDK
    • The SDK 8.0 for Windows 8 (includes everything)
    • [For Windows 7 or below:] SDK 7.1 + Updates
  9. Add paths to Java, Ant, Android SDK, BlackBerry10 (should be done via the batch files already)
    1. Click on the Start menu in the lower-left corner of the desktop, right-click on Computer, then click Properties.
    2. Click Advanced System Settings in the column on the left.
    3. In the resulting dialog box, press Environment Variables.
    4. Select the PATH variable and press Edit.
    5. In my case I needed to add:
      C:\Program Files\Java\jre7\bin;C:\Program Files\Java\jdk1.7.0_40\bin;C:\Program Files (x86)\Ant\bin;C:\Program Files\Java\jdk1.7.0_40\lib
    6. Ensure you also have a variable called
      JAVA_HOME

       , which points to the bin directory

      • If you have error message, which you don’t understand it’s likely that some paths are missing!

Cordova should be ready now to build Android, BlackBerry10, WP7 [& WP8] applications. You can now proceed the short tutorial below or continue with the command line interface documentation for Cordova, which covers the same commands, but with more detailed explanations.

  1. Locate your Smart Project’s bin (/ www) folder and…
    1. Type
      cordova create projectname com.smartmobilestudio.projectname ProjectName

        (replace “projectname” with the name of the project)

    2. change directory to “ProjectName” (i.e. “cd ProjectName”)
    3. replace the content in the www subdirectory with you’re content
      • do not delete config.xml, but you may (and should) edit that file for your needs
    4. Type
      cordova platform add android

        (for Android support)

    5. Type
      cordova platform add blackberry10

      (for BlackBerry10)

    6. Type
      cordova platform add wp7

      (for Windows Phone 7)

    7. Type
      cordova platform add wp8

      (for Windows
      Phone 8)

    8. ! Note the lower case platform names (i.e. “cordova platform add Android” will fail with a cryptic error message!)
    9. Type
      cordova build

        (to build the binaries, might take a while!)

      • “Build” will fail for Android, if the path contains spaces(!), but at least the error message is clear in that case
      • By default, “build” builds debug code, add
        --release

          for release versions

  2. [For Android only:] If you want to test your application in the emulators, they must be configured first!
    • Type
      android

       , then choose “Tools”->”Manage AVDs…” one virtual device for version 2.2 (i.e. a phone) and one for 4.3 (maybe a tablet)

  3. Test your application via 
    cordova emulate [platform]
    • For android that is
      cordova emulate android

       , then start the image you want manually (via 

      android

        ->”Tools”->”Manage AVDs…”)

  4. For native deployment you can also:  
    cordova run [platform]

If everything worked fine you should now have binaries of your application for GooglePlayAndroid, Blackberry 10, Windows Phone 7 and eventually Windows [Phone] 8. These applications can now be deployed the same way as native applications written in any other language. This includes selling the application via the device’s ecosystem’s store (e.g. Google Play).

iOS

The same steps can also be performed on Mac to retrieve OSX and iOS applications, that can be deployed via iTunes. However, an Apple developer account an XCode is required. For this a membership fee is necessary.