Hybrid App Development with PhoneGap

Hybrid App Development
with PhoneGap
Manoj Fernando
manojf@99x.lk

99X Technology Partner of Choice of ISVs
Agenda
 Native, Web(HTML5) or Hybrid?
 Introduction to PhoneGap/Cordova
 PhoneGap CLI - (Demo)
 PhoneGap Plugin API – (Demo)
 Adobe Cloud Build - (Demo)
 Automation with Jenkins - (Demo)

Native, HTML5 or Hybrid?

Native, HTML5 or Hybrid?
Feature Mobile Web Apps Hybrid Apps Native Apps
Dev Cost Low Low Expensive
Time to Market Short Short Long
App Portability High High None
Performance Fast Near Native
Speed
Fast
Native
Functionality
No All All
App Store
Distribution
No Yes Yes

Popular Hybrid Apps
 LinkedIn Mobile
 Evernote
 Amazon
 Yelp etc…

Introduction to PhoneGap/Cordova
 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.
 Avoid each mobile platforms' native development language.
 Applications execute within wrappers targeted to each platform.
 Rely on standards-compliant API bindings.

 Apache Cordova was originally called PhoneGap build by Nitobi
 Open-source & free software from the beginning (MIT License), Apache License
now.
 Nitobi then acquired by Adobe and donated the PhoneGap codebase to the
Apache Software Foundation (ASF)
 PhoneGap is still a product of Adobe. It is a distribution of Apache Cordova.
(Think of Apache Cordova as the engine that powers PhoneGap)

Cordova Architecture

User Interface of a Cordova App
 The UI layer is a web browser view that takes up
100% of the device width and 100% of the device
height.
 The web view used by application is the same web
view used by the native operating system
> iOS: Objective-C UIWebView class
> Android: android.webkit.WebView
> WP7: WebBrowser
> WP8: WebBrowser control (Internet Explorer 10)
> BlackBerry: WebWorks framework

Development Environment
 Node.js
 Latest Java Development Kit
 SDK for each mobile platform you wish to target (ex: Android SDK)
 Git Client
 Apache Ant
 Environment Variables
 JAVA_HOME ex: value = C:Program FilesJavajdk1.7
 ANDROID_HOME ex: value = C:adt-bundlesdk
 ANT_HOME ex: value = C:apache-ant-1.9.3
 Adding Paths
 %JAVA_HOME%bin;
 %ANT_HOME%bin;
 %ANDROID_HOME%platform-tools;
 %ANDROID_HOME%tools;

99X Technology - The Partner of Choice for ISVs’
Demo – PhoneGap CLI

Demo – PhoneGap CLI
 npm install -g cordova
 cordova create myApp com.example.myapp HelloWorld
 cd myApp
 cordova platform add android
 cordova build
 cordova run android
Reference
http://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

Plugin APIs
 Battery Status
 Camera
 Contacts
 Device
 Device Motion (Accelerometer)
 Device Orientation(Compass)
 Geolocation
 Media
 Vibration
 Status Bar & many more…
Reference
http://docs.phonegap.com/en/4.0.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

Demo – Plugin APIs (Camera)

Demo – Adobe Cloud Build
Reference
http://build.phonegap.com

Demo – Automation with Jenkins

Thank You

Hybrid App Development with PhoneGap

More Related Content

What's hot (19)

Viewers also liked (9)

Similar to Hybrid App Development with PhoneGap (20)

More from Dotitude (11)

Recently uploaded (20)

Hybrid App Development with PhoneGap

Editor's Notes