Cordova: Getting Started with iOS and Android Applications (Tech Tip #14)

cordova-logo

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
    cordova@3.4.0-0.1.0 /usr/local/lib/node_modules/cordova
    ├── mime@1.2.11
    ├── q@0.9.7
    ├── semver@2.0.11
    ├── underscore@1.4.4
    ├── shelljs@0.1.4
    ├── plist-with-patches@0.5.1 (xmlbuilder@0.4.3, xmldom@0.1.19)
    ├── optimist@0.6.0 (wordwrap@0.0.2, minimist@0.0.8)
    ├── elementtree@0.1.5 (sax@0.3.5)
    ├── xcode@0.6.6 (node-uuid@1.3.3, pegjs@0.6.2)
    ├── npmconf@0.1.13 (once@1.3.0, inherits@2.0.1, osenv@0.0.3, ini@1.1.0, mkdirp@0.3.5, nopt@2.2.0, config-chain@1.1.8)
    ├── tar@0.1.19 (inherits@2.0.1, block-stream@0.0.7, fstream@0.1.25)
    ├── request@2.21.0 (json-stringify-safe@4.0.0, forever-agent@0.5.2, aws-sign@0.3.0, qs@0.6.6, tunnel-agent@0.3.0, oauth-sign@0.3.0, cookie-jar@0.3.0, node-uuid@1.4.1, http-signature@0.9.11, form-data@0.0.8, hawk@0.13.1)
    └── plugman@0.19.0 (bplist-parser@0.0.4, nopt@1.0.10, npm@1.3.4, dep-graph@1.1.0, rc@0.3.0, tar.gz@0.1.1, glob@3.2.9)
  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
    ios-sim@1.8.2 /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:

    tt15-ios-simulator-default-screen

  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:

    tt15-android-simulator-default-screen

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.

Be Sociable, Share!
  1. Hey Arun,
    Do you know that JBoss Tools and JBoss Developer Studio provide some good plugins for development of Cordova applications in Eclipse IDE ?

  2. arungupta says:

    Mickael,

    Thanks for sharing that. Updated the blog with video tutorials.

  3. Gerry Matte says:

    Any chance of adding in the Windows version of these steps ?

  4. arungupta says:

    Gerry,

    I don’t have a Windows machine. But most of the commands are issued as NPM so should be similar ?

  5. Pingback: Ubuntu 下建立 Cordova 的 Android 環境… | Gea-Suan Lin's BLOG

  6. Naidu says:

    Wow this tip helped me to develop my first corodova android app.
    I tried with windows8 os, all the commands listed in this tip are working fine.

  7. Pingback: Cordova: Getting Started with iOS and Android Applications (Tech Tip #14) | Miles to go 2.0 … - appgong

  8. Nitin Surana says:

    Cookies don’t work for authentication in Cordova Android.

    http://stackoverflow.com/questions/23471256/not-getting-cookies-in-android-phonegap-application

    Do you know of any solution or workaround ?

  9. Pingback: Ada Bolda

Leave a Reply

Your email address will not be published. Required fields are marked *


× 5 = five

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>