Apache Cordova is a platform for building native mobile applications using HTML, CSS, and JavaScript. This blog will show how to build a simple application using Cordova and run it on iPhone and Android emulators.

Complete detailed instructions are available here. Lets get started!

1. Install Node Package Manager (optional): The easiest way to get started with Cordova is using the cordova command-line interface. This tool allows you to create new projects, build them on different platforms, and run them within an emulator. You can also use the CLI to initialize project code, after which you use various platforms’ SDKs to develop them further.The command-line is available as Node.js packaged module and can be installed using npm. If you already have Node.js then you already have npm, otherwise download and install Node.js.
2. Install cordova command-line as:

   sudo npm install -g cordova
   npm http GET https://registry.npmjs.org/cordova
   npm http 304 https://registry.npmjs.org/cordova
   
   . . .
   
   /usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordova
   [email protected] /usr/local/lib/node_modules/cordova
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected]
   ├── [email protected] ([email protected], [email protected])
   ├── [email protected] ([email protected], [email protected])
   ├── [email protected] ([email protected])
   ├── [email protected] ([email protected], [email protected])
   ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
   ├── [email protected] ([email protected], [email protected], [email protected])
   ├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
   └── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

3. Create a new project as:

   cordova create hello org.samples.wildfly.cordova.hello HelloWorld
   
   Creating a new cordova project with name "HelloWorld" and id "org.samples.wildfly.cordova.hello" at location "/Users/arungupta/workspaces/wildfly-samples/cordova/hello"
   Downloading cordova library for www...
   Download complete

4. Target platforms: Specify a set of target platforms such as iOS or Android. But before these target platforms can be specified the machine needs to support the SDK and the corresponding SDK must be installed.For example, XCode must be installed to specify iOS as the target platform, and Android SDK for Android target platform. Once installed, the target platform can be added as:

   cordova platform add ios
   Creating ios project...
   Generating config.xml from defaults for platform "ios"
   Preparing ios project

   And verify as:

   cordova platforms ls
   Installed platforms: ios 3.4.0
   Available platforms: android, blackberry10, firefoxos

5. Build the app as:

   cordova build
   Generating config.xml from defaults for platform "ios"
   Preparing ios project
   Running command: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/build args=[]
   Build settings from command line:
   ARCHS = i386
   CONFIGURATION_BUILD_DIR = /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/build/emulator
   SDKROOT = iphonesimulator7.0
   VALID_ARCHS = i386
   
   . . .
   
   ** BUILD SUCCEEDED **

6. Simulator: Install the iOS simulator

   sudo npm install -g ios-sim
   npm http GET https://registry.npmjs.org/ios-sim
   npm http 304 https://registry.npmjs.org/ios-sim
   
   . . .
   
   ** BUILD SUCCEEDED **
   
   /usr/local/bin/ios-sim -> /usr/local/lib/node_modules/ios-sim/build/Release/ios-sim
   [email protected] /usr/local/lib/node_modules/ios-sim

7. Test the app on iOS simulator:

   cordova emulate ios
   Generating config.xml from defaults for platform "ios"
   Preparing ios project
   Running command: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/run args=["--emulator"]
   Build settings from command line:
   ARCHS = i386
   CONFIGURATION_BUILD_DIR = /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/build/emulator
   SDKROOT = iphonesimulator7.0
   VALID_ARCHS = i386
   
   . . .
   
   ** BUILD SUCCEEDED **
   2014-02-27 18:19:08.236 ios-sim[15907:507] stderrPath: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/console.log
   2014-02-27 18:19:08.237 ios-sim[15907:507] stdoutPath: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/console.log

   to see the result as:

   

8. Add Android target platform as:

   cordova platform add android
   Creating android project...
   Creating Cordova project for the Android platform:
   Path: platforms/android
   Package: org.samples.wildfly.cordova.hello
   Name: HelloWorld
   Android target: android-19
   Copying template files...
   
   . . .
   
   project successfully created.
   Generating config.xml from defaults for platform "android"
   Preparing android project

   You’ll need to make sure bin directory from Apache Ant and android command from Android SDK are in the path.

9. Create Android Vitual Device
   1. Generate the list of targets:

      android list targets
      Available Android targets:
      ----------
      id: 1 or "android-19"
           Name: Android 4.4
           Type: Platform
           API level: 19
           Revision: 1
           Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7in
           ABIs : armeabi-v7a

   2. Create Android Virtual Device as:

      android create avd --name myCordova --target 1
      Auto-selecting single ABI armeabi-v7a
      Android 4.4 is a basic Android platform.
      Do you wish to create a custom hardware profile [no]no
      Created AVD 'myCordova' based on Android 4.4, ARM (armeabi-v7a) processor,
      with the following hardware config:
      hw.lcd.density=240
      vm.heapSize=48
      hw.ramSize=512

      Note that the target value is chosen from previous command’s output.

10. Test the app on Android emulator:

    cordova emulate android
    Generating config.xml from defaults for platform "android"
    Preparing android project
    Running command: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/android/cordova/run args=["--emulator"]
    Buildfile: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/android/build.xml
    
    . . .
    
    Booting up emulator (this may take a while)........................................................BOOT COMPLETE
    Installing app on emulator...
    Using apk: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/android/ant-build/HelloWorld-debug-unaligned.apk
    Launching application...
    LAUNCH SUCCESS

    to see the result as:

    

Most of the steps above like installing emulators, XCode, Android SDK are one time. But other than that the application development process is pretty straightforward.

How cool ?

There are several ways to get help: mailing lists, file an issue, docs, @apachecordova.

JBoss Tools provide great tooling for Cordova. Check out this two-part video that provide an end-to-end application development using Cordova

and

Future blogs will continue building upon this application and show integration with other technologies, add other features like accelerometer, compass, geolocation, battery events, camer, media, vibration, etc.