Hybrid Mobile Development with Apache Cordova and

Hybrid Mobile Development with Apache Cordova and Java EE 7Ryan Cuprak, Dassault Systemès

Michael Finocchiaro, Dassault Systemès

Who wants to be the next AppStorebillionaire?

Agenda

• Demo Application

• Mobile Overview

• Tooling

• Apache Cordova

• Java EE 7 + Cordova

• jQuery Mobile

• Security

• Deployment

• Summary

• Q&Ahttps://github.com/rcuprak/n34sailor

Both designed and engineered using DassaultSystèmes CATIA software!

Demo Application

Sailboat Racing

Start/Finish

Demo Application

• Broadcast race course

• Boat registration

• Time check and start notification

• Boat tracking

• Race announcements

• Results

• Weather information

Functional Requirements

Demo Application

• Mobile

• Apache Cordova

• User interface

• JQuery Mobile

• Tooling

• NetBeans

• NodeJS

• Server

• GlassFish 4.1 (EE 7)

• Android dev tools

• iOS dev tools

Overview

Demo Application

• What is Apache Cordova?

• Open source mobile development framework.

• Applications implemented using HTML5, CSS3, and JavaScript.

• Applications bundled and wrapped in a native shell.

• APIs for accessing device features.

• Benefits:

• Write once, run everywhere.

• Leverage familiar frameworks and tools (jQuery, Angular, etc.)

• Rapidly develop applications

• Low barrier to entry… no massive learning curve

Why choose Apache Cordova?

Demo Application

• Standard set of APIs

• Multiple vendors implementations

• Longevity, continuity, and backwards compatibility.

• Technical reasons:• Support for current technologies, REST, WebSockets

• Resource management: object pooling, thread management, threading,

• Transactions

• Security

• Scalability

• Testability

• Messaging

• Extended features: clustering, distributed caches

Why choose Java EE?

Demo Application Architecture

CORDOVAHTML5

Java EE 7 ServerApp

Data ServicesNOAA

Database

Demo Application

High Level Architecture

Interface

Application

Entities

Infrastructure

Apache Cordova

JAX-RS Web Sockets

EJB

JPA Entities

JMS

CDI

Communication

jQuery Mobile

Demo Application

Data Model

Demo Application

N34 Sailor

Mobile Overview

Mobile Platforms

• Dominated by Google’s Android and Apple’s iOS

platforms.

• Android’s US market share is about 52% against iOS’s 42%

• Windows Phone is at a distance 3rd place with about 4%

share.

• Globally, Android’s market share is even higher.

Status 2015

Mobile Overview

• Native App

• Built for a specific platform

• Downloadable app

• Objective-C/Swift/xCode, Java/Android Studio etc.

• Mobile Web App

• Service side apps that run in the device’s web browser

• HTML 5, CSS3, JavaScript

• jQuery Mobile, Sencha Touch

• Responsive and Adaptive Web Designs

• Hybrid App

• Developed mostly using Mobile Web App technologies, but are executed like a native app in a native (wrapper) container

• Apache Cordova (PhoneGap), ADF Mobile, IBM Worklight, AeroGear, Appcelerator

Development Models

Mobile Overview

• Single Page Application (SPA) wrapped in Native application.

• Native application displays a WebView – embedded browser.

• Logic:• JavaScript

• JavaScript platform extensions

• UI• HTML5 markup

• SVG

• Canvas

• WebGL

• All assets are bundled with the application.

Hybrid Applications

Mobile Overview

Native HTML5 vs. Web Apps

HTTP Session

JSF/JSP/Facelets

Mobile Overview

SPA – Single Page Application

index.html<html><body><div id=“page”>

<a href=“menu.html”>Menu</a></div>

</body></html>

menu.html<html><body>

<div id=“page”><a href=“info.html”>Info </a></div></body></html>

info.html<html><body><div id=“page”>

Info</div></body></html>

<a href=“info.html”>Info </a>

Info

Mobile Overview

Framework License

jQuery Mobilehttp://jquerymobile.com

MIT

Sencha Touchhttp://sencha.com

Commercial(Free) & Open Source (GPLv3)

Intel App Frameworkhttp://app-framework-software.intel.com

MIT

Ionichttp://ionicframework.com

MIT

M-Projecthttp://www.the-m-project.org

MIT

Kendo UIhttp://www.telerik.com

Commercial

Twitter Bootstrap 3http://getbootstrap.com

MIT

Mobile Frameworks

Mobile Overview

Secha Architect

Tooling

Tooling

• Platform SDKs• Certificates to test on devices ($$)

• Ant (ant.apache.org)

• NodeJS (nodejs.org)

• Apache Cordova

• Java 8 (java.oracle.com)

• NetBeans 8.0.2 (netbeans.org)

What might we want to install?

• Chrome (www.google.com/chrome)

• Maven (maven.apache.org)

• Karma (karma-runner.github.io)

• Jasmine (jasmine.github.io

What do we need?

Tooling

• Robust Java EE 7 support:• Code completion/editor support

• Project templates

• App server integration

• Fully integrated Apache Cordova:• Core feature – no plugin required.

• Project templates

• Wraps Cordova

• Support for iOS and Android

• Debug connected devices

• Powerful JavaScript editor/debugger

• JavaScript libraries and unit testing

• Grunt build support

Why NetBeans 8

Tooling

Tooling

• iOS (xCode)

Apple App Store – search for XCode

• Android (Android Studio)

https://developer.android.com/tools/index.html

• Windows Phone

http://dev.windows.com/en-us/develop/downloads

• Tizen

https://developer.tizen.org/downloads/tizen-sdk

• BlackBerry

http://developer.blackberry.com

Platform Tools and SDKs

Note: NetBeans has integration with Android/iOS tooling.Thanks to PhoneGap, we can also build in the cloud!

https://developer.android.com/tools/index.html

http://dev.windows.com/en-us/develop/downloads

https://developer.tizen.org/downloads/tizen-sdk

http://developer.blackberry.com

Tooling

• Installing Cordova:

• Mac/Linux: sudo npm install –g cordova

• Windows: npm install –g cordova

• Adding Platforms:

• cordova platform add ios

• cordova platform add amazon-fireos

• cordova platform add android

• cordova platform add blackberry10

• cordova platform add firefoxos

• Creating a project (without NetBeans)

• cordova create hello com.example.hello HelloWorld

Apache Cordova

Tooling

Install NetBeans Connector (chrome.google.com)

NetBeans <-> Chrome Integration

NetBeans enables you to debug in Chrome

Demo –Project Creation

Apache Cordova

Apache Cordova

• Originally named PhoneGap.

• Mobile development framework

• Development started in 2009.

• Wraps HTML5 applications in a native wrapper.

• Purchased by Adobe in 2011.

• Code donated to Apache as Apache Cordova.

• PhoneGap built on Cordova

• Adobe provides cloud build system for PhoneGap.

Overview

Apache Cordova

Plugins

Battery Status Geolocation

Camera Globalization

Contacts InAppBrowser

Device Media

Device Motion Media Capture

Device Orientation Network Information

Dialogs Splashscreen

File System Vibrate

File Transfer

Common Plugins

Supports custom plugins!

Apache Cordova

• HTML5 apps will not match platform UI exactly.

• Not all hardware features are accessible.

• Each platform has its quirks:

• iOS network information is Cellular or Ethernet.

• iOS fires network available after application startup.

• Windows 7 phone emulator reports network connection Unknown.

• Device UID on iOS is app specific (to block tracking)

• Camera unavailable in iOS simulator

• Altitude accuracy not supported on Android

• Windows phone doesn’t provide battery level information

Quirks

Apache Cordova

Project Layout

Apache Cordova

Index.html

Apache Cordova

Index.js

Apache Cordova

config.xml

Based on W3C Packaged Web Apps (Widgets)http://www.w3.org/TR/widgets/

Danger!! – cross site script (XSS)

exploit risk!

Apache Cordova

• Default security policy allows access to ANY site.

• Access should be restricted when going to production.

• Whitelist is configured in config.xml.

• NetBeans: config.xml found on Files tab.

• Examples:

1. <access origin=“http://google.com”/>

2. <access origin=“https://google.com”/>

3. <access origin=“https://maps.google.com”/>

4. <access origin=“https://*.google.com”/>

5. <access origin=“*”/>

• Whitelisting can vary by platform:

• iOS: <access origin=“*.google.*”>

• BlackBerry 10: <preference name=“websecurity” value=“disable”/>

White Listing

Apache Cordova

Plugin: Network Status

Apache Cordova

Plugin: Device Information

Don’t always believe what you see:• Simulators and actual phones return

different values.

• You should probably test both ARM and Intel-based phones!

Apache Cordova

Plugin: Network Type

Apache Cordova

Plugin: Camera

Apache Cordova

Uploading Pictures via AJAX

Apache Cordova

• Start with HTML5 project in NetBeans without Cordova.

• Test in Simulator’s browser.

• Profile code using Chrome Profiler

• Test with Chrome

• Write JavaScript unit tests

• Isolate networking code

• Don’t assume network access/availability

• Never store confidential information on the phone!

Development Best Practices

Apache Cordova

Testing in Chrome != Testing on device

http://caniuse.com

Ouch!

Java EE 7 & Apache Cordova

Java EE 7 + Cordova

Device/Server Connectivity

Java EE 7 App Server

REST

Web Sockets

Request/Response

Bidirectional

Restful Web Service

Web Socket Endpoint

JavaScript/HTML5

Java EE 7 + Cordova

• Introduced with HTML5.

http://www.html5rocks.com/en/tutorials/websockets/basics/

• Offers true bi-directional (full-duplex) communication over a single TCP connection.

• Initial hand-shake over HTTP, but subsequent conversations over Web Sockets (connection upgraded).

• Supports asynchronous, extremely low-lag communication

• Perfect for applications like chat and games

• Uses existing web technologies and security standards

• Transmits Text or binary data

• Text is transmitted as Unicode.

• URL prefix ws: or wss:

Web Sockets Refresher

Java EE 7 + Cordova

• RESTful web services.

• Requests performed using HTTP Methods:

GET/DELETE/POST/PUT/HEAD/Options

• Client initiates the connection.

• Server responds and connection is closed.

• Web Sockets

• Client initiates the connection.

• Both client and server can send data

simultaneously.

• Client (phone) initiates the connection. Both

sides can simultaneously send messages.

Connectivity Technologies

JAX-RS 2.0

Java API forWebSocket

Java EE 7 + Cordova

Data is exchanged using JSON (JavaScript Object Notation)

• Two data structures: objects and arrays

• Types: String, number, object, array, true, false, null.

• Extremely compact and simple to exchange

Exchanging Data using JSON

Java EE 7 + Cordova

Relating Java EE 7 to Mobile

JAX-RSJava API forWebSocket

Java API forJSON

JAXB*

Mobile Device (running Cordova)

POJO <-> JSON

Java EE 7 + Cordova

• JAX-RS 2.0 is the REST development API for Java

• Major upgrade with Java EE 7. (JSR-339)

• Client API, Aysnc, Validation, Filters/Handlers, Interceptors,

and Content Negotiation.

• Server and client

• Integrates with JAXB and Bean Validation

• Annotation based, declarative

• @Path, @GET, @POST, @PUT, @DELETE,

• Pluggable and extensible.

REST

Java EE 7 + Cordova

REST Example with JAX-RS

HTTP POST to http://<server>/n34/race/join/<id>/<class>

Java EE 7 + Cordova

REST in Cordova App + jQuery

Apache Cordova

Enabling CORS: JAX-RS 2.0 Interceptor

Chrome will now allow you to test your HTML5 app.

Java EE 7 + Cordova

• JAX-RS uses JAXB for JSON <-> POJO conversion**

• JAX-RS integrates with Bean Validation (JSR 349) to validate Java objects (optionally)

• Steps:

• JAXB converts JSON to POJOs

• Beans Validation checks POJOs

• JAX-RS method invoked with POJO

JSON to POJOs

Java EE 7 + Cordova

Be careful when returning POJOs!

JAX-RS Gotchas

Oops!

Use either:• DTO – Data Transfer Object• @XmlTransient

Java EE 7 + Cordova

Compressing RESTful Responses

Java EE 7 + Cordova

Java API for WebSockets

• High level declarative API for WebSocket

• API similar to JavaScript WebSocket API

• Both client and server-side

• Important pieces:

• Annotations for annotated endpoints:

@ServerEndpoint, @OnOpen, @OnClose,

@OnMessage, @OnError

• Session object – used to send messages.

• RemoteEndpoint object – used to sent messages to a client

• MessageHandler – interface used by programmatic endpoints.

• Pluggable and extensible

• Encoders, decoders, sub-protocols

Web Sockets

Java EE 7 + Cordova

Web Socket in JavaScript

Creating WebSocket in JavaScript:

Java EE 7 + Cordova

Sending JSON via WebSockets

Java EE 7 + Cordova

• Programmatic (powerful)

• Life-cycle and message handling can be implemented as separate classes.

• Same message handler can be used for multiple clients.

• Annotated (easy)

• Configured using annotations.

• Any POJO can be an endpoint.

• Endpoint and message handler are combined.

Two Types of Web Socket Endpoints

Java EE 7 + Cordova

• javax.websocket.Session most important object.

• Represents the connection to the client.

• Nearest you will come to the “raw” socket connection.

• Provides key methods for:

• Sending messages back to the client

• Closing the connection

• Storing state

• Obtaining information about the connection

• Acquiring the principal

• Retrieving a list of all connections to a client

• Retrieving unique identifier representing the session

• Acquire in onOpen or onMessage methods

Web Sockets: Session

Java EE 7 + Cordova

Web Sockets: Programmatic Endpoint

Java EE 7 + Cordova

Web Sockets – Annotated Endpoint

Java EE 7 + Cordova

Sending a message

Synchronously sends a message back to the client.

Java EE 7 + Cordova

Type Parameter Type Partial Message Notes

Text String No

Text int,long,float,etc. No

Text String, boolean Yes True finished

Text Custom Object No Decoder.Text

Binary byte[] No

Binary Byte[],boolean Yes True finished

Binary ByteBuffer No

Binary ByteBuffer,boolean Yes True finished

Binary InputStream Yes

Binary Custom Object No Decoder.Binary

Pong PongMessage No

Web Sockets: onMessage Parameters

Java EE 7 + Cordova

• Defined in JSR 353 – included with Java EE 7

• Provides ability to parse, transform, and query JSON.

• Used to create or read JSON.

• Does NOT perform JSON <-> Object mapping

• Useful for hand-coding JSON for JavaScript.

• Can be used with JAX-RS instead of auto-JAXB JSON production

• APIs:

• Object Model API (like DOM)

• Streaming API (like SAX)

Java API for JSON

Java EE 7 + Cordova

• WebSocket connection processes many types of messages.

Java API for JSON

AbstractMessage

ChatMessage TrackingMessage RaceMessage

Java EE 7 + Cordova

Java API for JSON

Message Object

Decoders/encoders

Java EE 7 + Cordova

Encoding JSON

Java EE 7 + Cordova

Decoding JSON

Java EE 7 + Cordova

• WebSockets can be Singleton Bean or a Stateful Session Bean.

• With Stateful Session Bean you can use extended persistence context!

@PersistenceContext(type=PersistenceContextType.EXTENDED)

private EntityManager em;

• Annotate OnClose/OnError with @Remove to release the stateful bean.

• Limitations with stateful beans:

• Cannot receive CDI events.

• WebSocket Session can be accessed from other threads to send messages to the client.

Web Sockets and Java EE

Java EE 7 + Cordova

• No compression supported by default!

• Binary data is transmitted using Base64 encoded.

• Don’t use WebSockets on the main login/landing page.

• ws: can be sniffed as easily and packets injected.

• Each message can take upwards of 2kb header – much smaller than issuing a RESTful service call.

• WebSocket connection limit is different than the HTTP connection limit.

• User can open an unlimited number of connections to a single server.

Web Sockets (generically)

Java EE 7 + Cordova

Server Load: Web Sockets vs. REST

Java EE 7 Server

Java EE 7 Server

REST

WebSockets

jQuery Mobile

jQuery Mobile

• UI Framework needed!

• Mobile UIs are different.

• Touch based

• Certain UI conventions.

• jQuery Mobile

• Optimized for mobile devices

• Themeable

• 12 Kb compressed

• Accessibility support

• jQuery Mobile requires jQuery

Overview

jQuery Mobile

• Use NetBeans to install jQuery and jQuery Mobile.

• Don’t use CDN – all content must be packaged with the application.

Configuration

jQuery Mobile

Quick Introduction

jQuery Mobile

• Changing to another page:

• Processing a page before rendering:

Navigation

Security

Security

• Apache Cordova App != mobile web application

• No HTTP session

• Users do not expect to authenticate on each launch!

• Do you log into email/twitter on each launch?

• Password should never be stored

• Phones are lost/stolen regularly

• Obscurity isn’t security

• Many users re-use password

Overview

Security

User Interaction Timeline

Cordova App Java EE Server

Retrieve account info

Retrieve race info

Join race

Update account info

View results

10 sec

25 min

User quits and motors out of harborChecks email

User goes racing…

2 hours

3 hours

Celebratory beer

Security

Goal is to use Java EE security on the server side:

Java EE Security

JAX-RS Endpoint

EJBs(roles)

Security

Typical Java EE Configuration

Won’t Work!

Security

Basic Authentication

Security

• Token based security (generated UUID)

• User authenticates once using username/password

• HTTP authentication performed using POST

• Server generates a token (UUID) which client stores

• Client submits token with each request (HTTP Header)

• If token isn’t valid, user is forced to re-authenticate

• Token authentication is performed before web service invocation.

• Remember:

• Servers can log HTTP requests – don’t include token in URL.

Token Authentication/Authorization

Security

Token Verification via Filter

Bad idea!

Security

Drawbacks:

• Authentication performed on each request

• Client must cache credentials and resubmit each time

• Container repeatedly checks the database

Alternate approach – authentication module (JASPIC)

• Java Authentication API for Containers

• Developed under JSR 196

• Operates on messages (think web requests)

• Standardizes the authentication module development

• Authentication ultimately performed via ServerAuthModule.

Token Verification via Filter

Security

• JASPIC puzzle piecesL

• ServletContextListener – initial registration of AuthConfigProvider

• AuthConfigProvider

• ServerAuthConfig

• ServerAuthContext

• ServerAuthModule does the actual authentication work]

• Factory nightmare…

Server Authentication Module

Security

JASPIC Pieces

ServerAuthModule Implementation

What is this code doing?1) Specifying we are interested in HTTP

messages2) Looking up our own EJB that performs

authentication

Security

JASPIC Pieces

WebSocket Handling

Setup Principals…

Security

Authorize Bean

Token is cached!

Security

Authentication Process

JAX-RS Endpoint

AuthorizeBean EJB

AuthModule

Race EJB

/join/race

Check token

Invoke Service

join

Java EE Security

Summary

• Apache Cordova simplifies cross-platform mobile development.

• Java EE 7 provides a standardized server stack to enable Apache Cordova development.

Summary

Store Owner Platform Cost

AppStore Apple iOS $99/year

Android Market Google Android $20

AppWorld RIM BlackBerry BlackBerry Free

Amazon AppStore Amazon Android $99/year

Marketplace Microsoft Windows $99/year

App Store Distribution

Summary

• Email contact:

[email protected]

• LinkedIn:

https://www.linkedin.com/pub/ryan-cuprak/0/12a/93

• Code:

https://github.com/rcuprak/n34sailor

• Twitter: @ctjava

• Books:

References

mailto:[email protected]

Hybrid Mobile Development with Apache Cordova and

Documents

Transcript of Hybrid Mobile Development with Apache Cordova and