"native" apps with apex and phonegap

29
#Kscope Creating a “native” App with Oracle Application Express Christian Rokitta www.themes4apex.com

Upload: christian-rokitta

Post on 19-May-2015

2.130 views

Category:

Technology


3 download

TRANSCRIPT

Page 1: "Native" Apps with APEX and PhoneGap

#Kscope

Creating a “native” Appwith

Oracle Application Express

Christian Rokittawww.themes4apex.com

Page 2: "Native" Apps with APEX and PhoneGap

About Me

17 years 17 years 2 years

3 months

Page 3: "Native" Apps with APEX and PhoneGap

3

Page 4: "Native" Apps with APEX and PhoneGap

Smartphone Usage Statistics

http://ansonalex.com/infographics/smartphone-usage-statistics-2012-infographic/

Page 5: "Native" Apps with APEX and PhoneGap

Smartphone Usage Statistics

5http://ansonalex.com/infographics/smartphone-usage-statistics-2012-infographic/

Page 6: "Native" Apps with APEX and PhoneGap

Top Places To Loose Your Phone

6

Page 7: "Native" Apps with APEX and PhoneGap

Usage Web vs Apps

7

Page 8: "Native" Apps with APEX and PhoneGap

Smartphone OS Market Share

8

Page 9: "Native" Apps with APEX and PhoneGap

Web Versus Native

Native:• An application specifically

designed to run on a device’s operating system and machine firmware

• It typically needs to be adapted/adjusted for different devices

Web:• An application in which all

or some parts of the software are downloaded from the Web each time it is run

• It can usually be accessed from all web-capable mobile devices

Page 10: "Native" Apps with APEX and PhoneGap

Pros and Cons

Native Benefits• Performance• Seamless User Interface• Seamless Installation• Distribution• Improved Brand

Web Benefits• Interoperability and Vendor

Independence• Streamlined Maintenance

and Upgrade Path• Shorter Time-to-Market• Leverige Existing Skills

Page 11: "Native" Apps with APEX and PhoneGap

Native Web App? Hybride!

Page 12: "Native" Apps with APEX and PhoneGap

Building Apps withHTML, CSS and Javascript

SQL & PL/SQLSQL & PL/SQL

Page 13: "Native" Apps with APEX and PhoneGap

Using APEX & jQuery Mobile

• Integrated in 4.2• HTML5-based user

interface• Supports all popular

mobile device platforms• Easy to learn, mark-up

based system

Page 14: "Native" Apps with APEX and PhoneGap

PhoneGap

Page 15: "Native" Apps with APEX and PhoneGap
Page 16: "Native" Apps with APEX and PhoneGap

Why PhoneGap?

Mobile development is a mess. Building applications for each device (iPhone, Android, Windows Mobile ...) requires different frameworks and languages.Build your app once with web-standards, based on HTML5, PhoneGap leverages web technologies developers already know best... HTML and JavaScript.

16

Page 17: "Native" Apps with APEX and PhoneGap

PhoneGap

Build your app once with web-standards

Wrap it with PhoneGap

Get access to native APIs

Deploy to multiple platforms

Page 18: "Native" Apps with APEX and PhoneGap

app = webview + PhoneGap framework

18

Page 19: "Native" Apps with APEX and PhoneGap

Getting Started with PhoneGap

• Install Eclipse• Install Android/iOS SDK• Set up Project

o New Eclipse Projecto Copy PhoneGap libs/js/xmlo Edit java/xml/html files

• Deploy to Simulator• Deploy to Device

JSJS

HTMLHTML

http://www.phonegap.com

Page 20: "Native" Apps with APEX and PhoneGap

Integrating PhoneGap and APEX

1. Index.html -> APEX page redirect (JavaScript onLoad!?)

2. Add PhoneGap JS library in APEX Page Template Mobile enabled Template (jQM)

Page 21: "Native" Apps with APEX and PhoneGap

<!DOCTYPE HTML><html><head><title>FifApex</title><script ... src="cordova-1.8.0.js"></script><script type="text/javascript" charset="utf-8">

// Call onDeviceReady when PhoneGap is loaded. // document.addEventListener("deviceready", onDeviceReady, false);

// PhoneGap is loaded and it is now safe to make calls PhoneGap methods // function onDeviceReady() {

window.location.href='http://m.fifapex.net/apex/f?p=2013:1'; }

</script></head><body><h1>loading ...</h1></body></html>

Redirect(Android)

Page 22: "Native" Apps with APEX and PhoneGap

Domain Whitelist

• Domain whitelisting is a security model that controls

access to outside domains.

• The default security policy is to block all network

access.

• The application developer can then delcare access to

specific network domains and subdomains.

22

Page 23: "Native" Apps with APEX and PhoneGap

Whitelisting Platform Dependent

• Android has full support for the whitelisting syntax.The whitelisting rules are found in res/xml/cordova.xml and declared with the

element <access origin="..." />

• Windows Phone: whitelisting unsupportedBy default, all domains are accessible.

• iOS : Domain protocols are not supportede.g. http:// and https://; Wildcards on iOS (*) are more flexible

Xcode: it is found at AppName/Supporting Files/Cordova.plist, Add a

new String value under the ExternalHosts key

23

Page 24: "Native" Apps with APEX and PhoneGap

PhoneGap API

Page 25: "Native" Apps with APEX and PhoneGap

hybrid : “almost” native

25

no JS background execution! native plug-in

Page 26: "Native" Apps with APEX and PhoneGap

Feature Matrix Overview

26

Page 27: "Native" Apps with APEX and PhoneGap

Questions

Page 28: "Native" Apps with APEX and PhoneGap

1 license Red Gate Deployment Suite for Oracle

28

FifFifAPEXAPEXFifFifAPEXAPEX

Page 29: "Native" Apps with APEX and PhoneGap

Contact Information

Blog: http://rokitta.blogspot.com

LinkedIn: http://nl.linkedin.com/in/rokit

Website: http://www.rokit.nl

themes4apex: http://www.themes4apex.nl

FifApex: http://m.fifapex.net

Twitter: @crokitta

Email: [email protected]