Cordova3.x Fundamentals

(aka PhoneGap)

Created by rensanning / @rensanning

What is Cordova ?

“Apache Cordova is an open source framework for building cross-platform native applications using standard web technologies such as HTML, CSS and JavaScript.”

PhoneGap vs Cordova ?

Cordova Logo Cordova Logo

PhoneGap is a distribution of Apache Cordova。

  1. WebKit -- Chrome/Safari
  2. Linux -- Ubuntu/CentOS

Pros and Cons

Pros

  • Open Source and Free
  • Web Development Skill Reuse
  • Platform Support
  • Plugin Architecture

Pros and Cons

Cons

  • Performance
  • Browser Support
  • Web LAF（Look & Feel）

Architecture

Native Application Architecture

Architecture

Architecture

Streamlined plugin architecture

Plugin Architecture

Architecture

Streamlined plugin architecture

Plugin Architecture

Architecture

Native Bridge

Native Bridge

>>more

Platform Support

Platform Support

Installing Cordova

Requirements

Android（JDK/Ant/Android SDK/ADT）、iOS(Xcode)、Node.js、Git

Install


              npm install -g cordova

>>more

Cordova CLI

  • Create： Generate folder skeleton
  • Build： Generate mobile native apps
  • Deploy： Transfer to emulators and Devices

Cordova CLI


cordova create MyApp com.rensanning.cordova MyApp
cd MyApp
cordova platforms add android 
cordova plugin add org.apache.cordova.device 
cordova build android
cordova emulate android

Project Structure

myApp/ 
|-- config.xml 
|-- hooks/ 
| | |-- before_xxx/ 
| | `-- after_xxx/ 
|-- merges/ 
| | |-- android/ 
| | `-- ios/ 
|-- platforms/ 
| |-- android/ 
| `-- ios/ 
|-- plugins/ 
| |-- org.apache.cordova.console/ 
| `-- org.apache.cordova.device/ 
|-- www/ 
| |-- css/ 
| |-- img/ 
` |-- js/ 
  `-- index.html

>>more

config.xml

Platform Support

>>more

Cordova APIs

Cordova APIs

>>more

Cordova Events

  • deviceready
  • pause
  • resume
  • backbutton
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton
  • online
  • offline

Debugging Applications

  • Browser
  • Native
  • Remote

>>more

Apache Ripple

Ripple

weinre

weinre

UI Framewrok

UI Framewrok

Cloud-based Build Services

  • PhoneGap Build
  • AppBuilder/Icenium
  • Appery.io/Tiggzi
  • Monaca
  • SAE云窗调试器

>>more

Reference

Apache Cordova 3 Programming

Reference

Thanks!