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!
- Install Node Package Manager (optional): The easiest way to get started with Cordova is using the
cordovacommand-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. -
Install cordova command-line as:
1234567891011121314151617181920212223<strong>sudo npm install -g cordova</strong>npm http GET https://registry.npmjs.org/cordovanpm http 304 https://registry.npmjs.org/cordova. . ./usr/local/bin/cordova -> /usr/local/lib/node_modules/cordova/bin/cordovacordova@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) - Create a new project as:
1234567<strong>cordova create hello org.samples.wildfly.cordova.hello HelloWorld</strong>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 -
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:
123456<strong>cordova platform add ios</strong>Creating ios project...Generating config.xml from defaults for platform "ios"Preparing ios project
And verify as:
12345<strong>cordova platforms ls</strong>Installed platforms: ios 3.4.0Available platforms: android, blackberry10, firefoxos -
Build the app as:
123456789101112131415<strong>cordova build</strong>Generating config.xml from defaults for platform "ios"Preparing ios projectRunning command: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/build args=[]Build settings from command line:ARCHS = i386CONFIGURATION_BUILD_DIR = /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/build/emulatorSDKROOT = iphonesimulator7.0VALID_ARCHS = i386. . .** BUILD SUCCEEDED ** -
Simulator: Install the iOS simulator
123456789101112<strong>sudo npm install -g ios-sim</strong>npm http GET https://registry.npmjs.org/ios-simnpm 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-simios-sim@1.8.2 /usr/local/lib/node_modules/ios-sim -
Test the app on iOS simulator:
1234567891011121314151617<strong>cordova emulate ios</strong>Generating config.xml from defaults for platform "ios"Preparing ios projectRunning command: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/cordova/run args=["--emulator"]Build settings from command line:ARCHS = i386CONFIGURATION_BUILD_DIR = /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/ios/build/emulatorSDKROOT = iphonesimulator7.0VALID_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.log2014-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:
-
Add Android target platform as:
12345678910111213141516<strong>cordova platform add android</strong>Creating android project...Creating Cordova project for the Android platform:Path: platforms/androidPackage: org.samples.wildfly.cordova.helloName: HelloWorldAndroid target: android-19Copying template files.... . .project successfully created.Generating config.xml from defaults for platform "android"Preparing android project
You’ll need to make sure
bindirectory from Apache Ant andandroidcommand from Android SDK are in the path. -
Create Android Vitual Device
- Generate the list of targets:
123456789101112<strong>android list targets</strong>Available Android targets:----------id: 1 or "android-19"Name: Android 4.4Type: PlatformAPI level: 19Revision: 1Skins: HVGA, QVGA, WQVGA400, WQVGA432, WSVGA, WVGA800 (default), WVGA854, WXGA720, WXGA800, WXGA800-7inABIs : armeabi-v7a
- Create Android Virtual Device as:
1234567891011<strong>android create avd --name myCordova --target 1</strong>Auto-selecting single ABI armeabi-v7aAndroid 4.4 is a basic Android platform.Do you wish to create a custom hardware profile [no]<strong>no</strong>Created AVD 'myCordova' based on Android 4.4, ARM (armeabi-v7a) processor,with the following hardware config:hw.lcd.density=240vm.heapSize=48hw.ramSize=512
Note that the target value is chosen from previous command’s output.
- Generate the list of targets:
-
Test the app on Android emulator:
123456789101112131415<strong>cordova emulate android</strong>Generating config.xml from defaults for platform "android"Preparing android projectRunning 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 COMPLETEInstalling app on emulator...Using apk: /Users/arungupta/workspaces/wildfly-samples/cordova/hello/platforms/android/ant-build/HelloWorld-debug-unaligned.apkLaunching 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.
- Tweet
-
Hey Arun,
Do you know that JBoss Tools and JBoss Developer Studio provide some good plugins for development of Cordova applications in Eclipse IDE ?
Mickael,
Thanks for sharing that. Updated the blog with video tutorials.
Any chance of adding in the Windows version of these steps ?
Gerry,
I don’t have a Windows machine. But most of the commands are issued as NPM so should be similar ?
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.
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 ?