Hybrid App Development with PhoneGap

Hybrid App Development with PhoneGap

Manoj [email protected]

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)

99X Technology Partner of Choice of ISVs

Native, HTML5 or Hybrid?

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

99X Technology Partner of Choice of ISVs

Popular Hybrid Apps

LinkedIn Mobile Evernote Amazon Yelp etc…

15.04.2023 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. 

15.04.2023 99X Technology Partner of Choice of ISVs

Introduction to PhoneGap/Cordova

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)

99X Technology Partner of Choice of ISVs

Cordova Architecture

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

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 Files\Java\jdk1.7 ANDROID_HOME ex: value = C:\adt-bundle\sdk 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

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

Referencehttp://docs.phonegap.com/en/4.0.0/guide_cli_index.md.html#The%20Command-Line%20Interface

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…Referencehttp://docs.phonegap.com/en/4.0.0/cordova_plugins_pluginapis.md.html#Plugin%20APIs

99X Technology - The Partner of Choice for ISVs’

Demo – Plugin APIs (Camera)

99X Technology - The Partner of Choice for ISVs’

Demo – Adobe Cloud Build

Referencehttp://build.phonegap.com

99X Technology - The Partner of Choice for ISVs’

Demo – Automation with Jenkins

99X Technology - The Partner of Choice for ISVs’

Thank You