Apache Cordova 3 Programming=John M.Wargo;Note=Erxin.txt

Apache Cordova 3 Programming=John M.Wargo;Note=Erxin

# introduction 
- resource 
http://www.cordovaprogramming.com

# the what how why and more of apache cordova 
- introduce 
open source, it is a combination of native and web application technologies. this kinds of application called hybrid application 

cordova extend suite of native device api to support such as camera, accelerometer, contacts and so on to web appliction running with in native container 

- components 
	+ source code for a native application container 
	+ a suite of apis that provide a web application running within the container access to native device capabilities 
	+ a set of tools manage the process of creating applicaiton projects managing plugins building native applications 
	
- cordova application packaging process 
native mobile application 
	\- webview 
		\- your web app 
		|
		V
	cordova javascript interface (separate into several plugins )
	|
	V
native device api 
|
V
device os 
		
some of the platform directly support web app which don't required native mobile container 

- web views 
blackberry javaplatform, use BrowserField object 
android use android.webkit.WebView 
iOS, UIWebView, using System/Library/Frameworks/UIKit.framework 

- each cordova api broken into separate plugins, you can use the cordova plugin manager(plugman) to add and remove plugins from your cordova project 
in cordova 3 javascript api separate into several plugins 

- supported apis 
accelerometer 
camera 
capture 
connection 
compass 
contacts 
device 
events 
file 
geolocation 
globalization 
inAppBrowser 
MediaNotification 
SPlashscreen 
Storage 

- cordova javascript api example 
navigator.camera.getPicture(onSuccess, onFail);

- what is adobe phonegap? it's supply a additional stuff for cordova. supply tools tightly integrates the framework with adobe's other products 

- In late 2011, Nitobi announced that it was donating PhoneGap to the Apache Foundation

- reference
Capturing camera/picture data without PhoneGap”
(www.raymondcamden.com/index.cfm/2013/5/20/Capturing-camerapicture-data-without-PhoneGap

- working with cordova 
	+ designing for the container 
	+ the index.html file is typically the only html file in the appliaction. the application's different "screens" are actually just different <div> containers 
	
- coding cordova applications 
	+ some of the supported mobile platform development tools will run only on certain desktop operating systems 
	adnroid on linux, window, and mac 
	balckberry on wndow and mac 
	ios n mac only 
	window phone, on window 
	
	+ development environment 
	mac physical and use vmware fusion, (www.vmware.com/products/fusion/overview.html) for window 
	
- application developed with phonegap 
www.phonegap.com/apps

- where does cordova not fit for?
	+ need to access native api that wasn't already exposed. you could by pass this by write your own plugin and donate it to the community 
	
	cordova doesn't ahve access to the calendar or email by now. you could check this in the latest release maybe
	+ if your app needs to interface with a particlar piece of hardware. unless there is a plugin for it 
	
	+ requires heavy-duty offline capabilities such as a large database and offline sychronization. there is a sqlite plugins for android/ios 
	
	there is a html5 based sync engines 
	
- get help,
Google Groups (http://groups.google.com/group/phonegap
forum for PhoneGap Build located at http://community.phonegap.com/nitobi/products/nitobi_phonegap_build
commercial support options for PhoneGap, and Adobe has continued the offering after the acquisition. Support is offered at different levels (from Basic,currently at $249US per year, to Corporate, at $20,000US per year

- resource 
Cordova Website http://cordova.io or http://cordova.apache.org
(they both point to the same site).
Cordova Documentation http://docs.cordova.io
Cordova Wiki http://wiki.cordova.io
Cordova Issue Tracker https://issues.apache.org/jira/browse/CB
Cordova Mailing Lists http://cordova.apache.org/#mailing-list
Cordova Twitter Account http://twitter.com/apachecordova
PhoneGap Website http://www.phonegap.com
PhoneGap Wiki http://wiki.phonegap.com
PhoneGap Blog http://www.phonegap.com/blog
PhoneGap Twitter Account https://twitter.com/phonegap

- hybrid application framework, it's not unique to the market. available options 
Appcelerator Titanium 
AT&T WorkBench and Antenna Software Volt 
BlackBerry WebWorks 
IBM Worklight 
Oracle Application Development Framework(ADF) Mobile 
Salesforce Touch 
SAP Mobile Platform(this is the product I work on)
Strobe(formerly SproutCore and now part of Facebook)
Tigger 


# Installing the Cordova and PhoneGap Frameworks 
- for the old version of platform may required older version cordova
- development enviroment
install the platform’s native software development kit (SDK) or integrated development environments (IDE). For some platforms, you may also need additional tools such as Java, Ant, make, and Cygwin. Except for the cost of joining the appropriate developer programs

- install phonegap 
www.phonegap.com

- install the cordova command-line interface. cli is used to create project files. it has interface with the native sdks to build projects. you have to make sure the appropriate sdks are isntalled. 

install android development tools 

ios development tools, https://developer.apple.com/programs/ios


# using the cordova command-line interface 
- troubleshooting the cli. add a -d or --verbose to any cli command 

- cli command summary 
help 
create, create a project 
platform, manages the mobile device platforms 
plugin, manages the installation and unintstallation of cordova plugins 
prepare, copies the web application content from the cordova project's www folder into project's mobile platform project folders 
compile, packages web applications into native cordova applications 
build, prepare then packages web applications into native cordova applications 
emulate, runs a cordova application in one or more mobile device platform's device simulators 
run, run a cordova application in one or more mobile device platform's devices 
serve, serves the web application content so it can be accesed via a web browser 

- using the cli 
$ cordova help 

display version 
$ cordova -v 

- creating a cordova project 
$ cordova create project_folder 

also support 
$ cordova create project_folder [app-id] [app-name]

- project structure 
you could save different device file into seperate folder and merge device specific files during the build process 

cli use lazy loading to download the files when it requires to create a project 

cli use a folder called .cordova for storing its lazy-loaded files c:\users\user_name\ on windows 

/users/user_name/.cordova on mac 

- platform management 

	+ add platform 
$ cordova platform add platform_name 

development tools used to create projects for the particular platform must be installed 

for example we could add android app then we could open it with a properly configured exclipes(installed adroid development tools)

	+ removing platforms 
$ cordova platform remove platform_name 

shortcut 
$ cordova platform rm platform_name 

- plugin management 
	+ add plugin 
$ cordova plugin add path-to-plugin-files 

example 
$ cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-camera.git
	
from 3.1+ support installed directly install by plugin name 
$ cordova plugin add org.apache.cordova.console 

	+ listing plugins 
$ cordova plugins 

	+ removing 
$ cordova plugin remove plugin-name 

- build management
the CLI prepare commands copies a cordova project's web application content from the www and merges folder into the appropriate platforms folder for the project 
 
$ cordova prepare 

	+ prepare for a specify platform 
$ cordova prepare platform-name 

	+ compile 
$ cordova compile [platform-name]

	+ build 
$ cordova build [platform-name]

- running cordova applications 
	+ emulate, atuomates the process of building an appliaction and deploying it onto mobile deice 
$ cordova emulate 
$ cordova emulate android 

	+ run, automates the process build, deploy and run application on a physical device for each of the platforms 
$ cordova run 

	+ serve, when work with mobile web application, it is better to test in a desktop browser before switching to the mobile device. CLI API for serve is only used for test the UI, cordova api is not exposed to the desktop browser 
	
$ cordova serve platform-name [port-number]

	by default serve will respond to port 8000


# Anatomy of a cordova application 
- hello world 
create a hello world html page 

- cordova initialization 
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimumscale=1, width=device-width;" />

- use cordova api in html page 
var element = document.getElementById("appInfo");
//Replace it with specific information about the device
//running the application
element.innerHTML = 'Cordova Version: ' +
device.cordova + br +
'Platform: ' + device.platform + br +
'Model: ' + device.model + br +
'OS Version: ' + device.version;
}
- enhancing the user interface of a cordova application, many open source and commercial javascript library will help to create the UI. jquery mobile 
http://www.jquerymobile.com 
dojo mobile http://www.dojotoolkit.org/features/mobile 

- the generated web application files 
the auto generated file structure is used to seperate different kinds of files 

- index.js have default application object 


# The mechanics of cordova development 
- dealing with API inconsisitence, you have you accommondation with your application for platforms that do not support the particular API 
 http://phonegap.com/about/feature/
 
- application graphics, for application icons phonegap project maintains a wiki page listing the icon requirements for the different supported operating systems here 
 https://github.com/phonegap/phonegap/wiki/App-Icon-Sizes
 
- developing cordova application 
	+ working with a single mobile device platform 
$ cordova create app-name 
$ cd app-name 
$ cordova platform add platform-name 
$ cordova prepare platform-name 

- working with multiple platforms 
$ cordova platform add android ios 

you will work with the web content stored in the www folder. use CLI to copy the code into the platforms sub-folders 
$ cordova prepare android 

for testing and debugging both platform by 
$ cordova prepare android ios 

this command will copy all of the project files from the www folder into the appropriate folder for each specified mobile platform 
/platforms 
	/android 
		...
		/assets
			/www 
		/bin 
		...
		/cordova 
		/libs 
		...
	/ios 
		/cordova 
		/CordovaLib 
		/Test
		/www 
/www 
/merges 
	/android 
	/ios 

the custom content for the android platform stored in thte merges\android fodler is copied into the android platform project's assets\www. similar to the merges\ios folder 

- testing cordova applications 
	+ simulator vs emulator, 
	
	+ run cordova application using a device simulator 
$ cordova emulate device-platform 

- run a cordova application on a physical device 
	+ test an application on a physical device 
$ cordova run device-platform 

the device may required to regiested with manufacturer or signed by an appropriate signing authority 

- leveraging cordova debugging capabilities 
	+ using alert() 
	when you use a beta prodoct the application.deviceready event may not triggered. sometimes it is due to the phonegap.js file is not packaged 
	
- writing to the console 
console.log 
console.warn 
console.error 

- debugging and testing using external tools 
	+ debugging applications with weinre. it is a web inspector remote 
	it is not node.js based and since we already have node installed for the cordova CLI you can install the server using 
	$ npm install -g weinre 
	
	start weinre 
	$ weinre 
	
	when use weinre you could usually point the cordova application to the local weinre server instance using 
	<script src="http://localhost:8080/target/target-script-min.js"></script>
	
	when using weinre to debug a cordova application running on a physical device the device must be able to connect to your debug server 
	
	using the debug client you can access the elements, resource, network, timeline, console. check google chrome debugger tol 
	
	+ testing application using ripple emulator, learn more ripple from 
	https://developer.blackberry.com/html5/documentation/getting_started_with_ripple_1866966_11.html
	
	it could used to emulate several devices 
	
	
# android development with cordova 
- working with ADT  http://developer.android.com/sdk/index.html

- dealing with ADT ide memory problem. eclipse instance in ADT is configured to utilize a limited amount of system memory 
opened up the eclipse.ini file and cranked up the memory settings highlighted in bold in Listing 

launcher.XXMaxPermSize 
512m 
...

- editing cordova appliaction content files 
...

# blackberry development 

# ios development with cordova 
# windows phone development 

# using phonegap build 

# working with the cordova APIs 
- APIs 
accelerometer, W3C Geolocation API Specification
camera 
capture 
compass 
connection 
contacts 
device
events 
file 
geolocation 
globalization 
InAppBrowser 
Media 
Splashscreen 
Storage 

# Creating cordova plugins 
- create javascript plugin 
- native plugin 

# Building a cordova application 

# Extending the cordova to the Enterprise 
- SAP mobile platform 
The SAP Mobile Platform (SMP) is an industry leading MADP as recognized by Gartner (www.gartner.com) several years in a row

- Kapsel, read more about Kapsel in my SCN blog at http://scn.sap.com/blogs/johnwargo.