Provides basic guidelines for Hands on experience in Hybrid Mobile Development using PhoneGap

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

2. 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)

3. 99X Technology Partner of Choice of ISVs
Native, HTML5 or Hybrid?

4. 99X Technology Partner of Choice of ISVs
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

5. 99X Technology Partner of Choice of ISVs
Popular Hybrid Apps
 LinkedIn Mobile
 Evernote
 Amazon
 Yelp etc…

6. 99X Technology Partner of Choice of ISVs
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.

7. 99X Technology Partner of Choice of ISVs
Introduction to PhoneGap/Cordova

8. 99X Technology Partner of Choice of ISVs
Introduction to PhoneGap/Cordova
 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)

9. 99X Technology Partner of Choice of ISVs
Cordova Architecture

10. 99X Technology Partner of Choice of ISVs
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

11. 99X Technology Partner of Choice of ISVs
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;

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

13. 99X Technology - The Partner of Choice for ISVs’
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

14. 99X Technology Partner of Choice of ISVs
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

15. 99X Technology - The Partner of Choice for ISVs’
Demo – Plugin APIs (Camera)

16. 99X Technology - The Partner of Choice for ISVs’
Demo – Adobe Cloud Build
Reference
http://build.phonegap.com

17. 99X Technology - The Partner of Choice for ISVs’
Demo – Automation with Jenkins

18. 99X Technology - The Partner of Choice for ISVs’
Thank You