Software development for Web & Hybrid App Development Part 2

Overview of Apache Cordova

Apache Cordova graduated in October 2012 as a top level project within the Apache Software Foundation (ASF). Through the ASF, future Cordova development will ensure open stewardship of the project. It will always remain free and open source under the Apache License, Version 2.0. Visit cordova.apache.org for more information.

Apache Cordova is an open-source mobile development framework. It allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language. Applications execute within wrappers targeted to each platform, and rely on standards-compliant API bindings to access each device's sensors, data, and network status.

Use Apache Cordova if you are:

  • a mobile developer and want to extend an application across more than one platform, without having to re-implement it with each platform's language and tool set.

  • a web developer and want to deploy a web app that's packaged for distribution in various app store portals.

  • a mobile developer interested in mixing native application components with a WebView (special browser window) that can access device-level APIs, or if you want to develop a plugin interface between native and WebView components.

Creating first Cordova App

On the command line type in

cordova create  com.example.hello HelloWorld
19
192
  • Cordova has created a folder called  com.example.hello
  • The www subdirectory houses your application's home page, along with various resources under css, js, and img, which follow common web development file-naming conventions.

 

  • These assets will be stored on the device's local filesystem, not served remotely.
  • The config.xml file contains important metadata needed to generate and distribute the application.
www

Adding Platforms

$ cordova platform add wp8

$ cordova platform add ios

$ cordova platform add windows

$ cordova platform add android
$ cordova platform add browser

 

 
  • Before you can build the project, you need to specify a set of target platforms.
  • Your ability to run these commands depends on whether your machine supports each SDK, and whether you have already installed each SDK.
  • For simple testing the browser platform does not require a sdk.

 

  • First add the browser platform
  • As this does not require a sdk this is the best version for development and testing of our web app.
  • Now the platform folder contains a folder called browser
  • This browser folder contains all the elements for the web app
b
bb
bbb
  • we can run this browser web app using the command line cordova run browser
  • Our web app runs on a browser with an url http://localhost:8000/index.html

 

cc
aa

Creating first Android App

  • Open the command prompt and navigate to the hello folder
  • use the cordova command to add the android platform
  • Cordova has now created an android app of  our web app
  • The next stage is to build the android app

 

android
p1
p2

Buliding Android app using cordova command build

  • The last line in the command prompt window shows us where the .apk file is.
  • We can upload this file directly to an android device to test our app.
1111

Testing app on emulator

1
  • SDKs for mobile platforms often come bundled with emulators that execute a device image, so that you can launch the app from the home screen and see how it interacts with many platform features.
  • Run a command such as the following to rebuild the app and view it within a specific platform's emulator:

          cordova emulate android

  • Alternately, you can plug the handset into your computer and test the app directly:
     cordova run android
  • Before running this command, you need to set up the device for testing, following procedures that vary for each platform.