Apache Cordova is used to wrap HTML5 applications into native mobile applications that can access device capabilities. A demo application was shown that used Cordova for the mobile portion and Java EE 7 on the server side. Key technologies discussed included Cordova plugins, RESTful web services, Java API for JSON, and Java API for WebSockets for bidirectional communication between the mobile app and server. jQuery Mobile was also mentioned as a potential UI framework.
5. DemoApplication
• Broadcast race course
• Boat registration
• Time check and start notification
• Boat tracking
• Race announcements
• Results
• Weather information
Functional Requirements
6. DemoApplication
• Mobile
• Apache Cordova
• User interface
• JQuery Mobile
• Tooling
• NetBeans
• NodeJS
• Server
• GlassFish 4.1 (EE 7)
• Android dev tools
• iOS dev tools
Overview
7. DemoApplication
• 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?
8. DemoApplication
• 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?
14. MobilePlatforms
• 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
15. MobileOverview
• 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
16. MobileOverview
• 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
18. MobileOverview
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
19. MobileOverview
Framework License
jQuery Mobile
http://jquerymobile.com
MIT
Sencha Touch
http://sencha.com
Commercial(Free) & Open
Source (GPLv3)
Intel App Framework
http://app-framework-software.intel.com
MIT
Ionic
http://ionicframework.com
MIT
M-Project
http://www.the-m-project.org
MIT
Kendo UI
http://www.telerik.com
Commercial
Twitter Bootstrap 3
http://getbootstrap.com
MIT
Mobile Frameworks
25. 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!
30. ApacheCordova
• 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
31. ApacheCordova
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!
32. ApacheCordova
• 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
39. ApacheCordova
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!
43. ApacheCordova
• 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
46. Java EE7 + Cordova
Device/Server Connectivity
Java EE 7
App Server
REST
Web Sockets
Request/Response
Bidirectional
Restful Web Service
Web Socket Endpoint
JavaScript/HTML5
47. Java EE7 + 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
48. Java EE7 + 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 for
WebSocket
49. Java EE7 + 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
50. Java EE7 + Cordova
Relating Java EE 7 to Mobile
JAX-RS
Java API for
WebSocket
Java API for
JSON
JAXB*
Mobile Device (running Cordova)
POJO <-> JSON
51. Java EE7 + 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
52. Java EE7 + Cordova
REST Example with JAX-RS
HTTP POST to http://<server>/n34/race/join/<id>/<class>
58. Java EE7 + 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
59. Java EE7 + Cordova
Web Socket in JavaScript
Creating WebSocket in JavaScript:
60. Java EE7 + Cordova
Sending JSON via WebSockets
61. Java EE7 + 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
62. Java EE7 + 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
63. Java EE7 + Cordova
Web Sockets: Programmatic Endpoint
64. Java EE7 + Cordova
Web Sockets – Annotated Endpoint
65. Java EE7 + Cordova
Sending a message
Synchronously sends a message back to the client.
66. Java EE7 + 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
67. Java EE7 + 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
68. Java EE7 + Cordova
• WebSocket connection processes many types of messages.
Java API for JSON
AbstractMessage
ChatMessage TrackingMessage RaceMessage
69. Java EE7 + Cordova
Java API for JSON
Message Object
Decoders/encoders
72. Java EE7 + 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
73. Java EE7 + 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)
74. Java EE7 + Cordova
Server Load: Web Sockets vs. REST
Java EE 7 Server
Java EE 7 Server
REST
WebSockets
76. jQueryMobile
• 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
77. jQueryMobile
• Use NetBeans to install jQuery and jQuery Mobile.
• Don’t use CDN – all content must be packaged with the
application.
Configuration
81. 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
82. 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 harbor
Checks email
User goes racing…
2 hours
3 hours
Celebratory beer
83. Security
Goal is to use Java EE security on the server side:
Java EE Security
JAX-RS
Endpoint
EJBs
(roles)
86. 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
88. 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
89. Security
• JASPIC puzzle piecesL
• ServletContextListener – initial registration of AuthConfigProvider
• AuthConfigProvider
• ServerAuthConfig
• ServerAuthContext
• ServerAuthModule does the actual authentication work]
• Factory nightmare…
Server Authentication Module
94. Summary
• Apache Cordova simplifies cross-platform mobile
development.
• Java EE 7 provides a standardized server stack to enable
Apache Cordova development.
95. 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
I would like to welcome you to Hybrid Mobile Development with Apache Cordova and Java EE 7.
How many of you are already mobile application developers?
How many are using Apache Cordova? How many have heard of Apache Cordova?
The objective of this session is to enable you to become the next app store millionaire.
Two things:
Enable you to write a single application for multiple platforms.
Enable you to write a robust and powerful backend that can scale.
This is the agenda for this session. We are going to start out by first looking at the demo application, then a brief review of mobile today, then discuss tooling…
[Ryan]
In today’s presentation we are going to look at a racing application.
This is interesting for several reasons, first:
It is a complex example that allows us to look at threading
It has a sufficiently complex data model
Java EE 7 adds several important features that allow us to build this application.
[Ryan]
[Ryan]
There are several technologies we
[Ryan]
If this is an HTML5 application, why Java EE? Where does Java EE fit into the picture?
[Michael]
This is going to be our data model for the application. We’ll discuss each of these pieces in great depth as we go through the presentation.
One thing to drive home here is the complexity of the application. This application coordinates activities between multiple users and has a graphical interface.
This is a mult-tier architecture
Leverages practically every feature of Java EE
Unlike most demo applications, this one has a rich data model.
Over 16 tables and this was an early draft of the application! We have multiple relations.
[Ryan]
Demo application
[Michael]
[Michael]
What is the mobile landscape like today: currently the two biggest players are Android and iOS. Blackberry which used to dominate the market is just a shadow of its former self.
[Ryan]
With mobile development you have three different models to choose from. There is the native, mobile web and hybrid. Each one has its strengths and weaknesse.
With native you are leveraging native platform resources,
Native App
Best user experience
Access all device/hardware capabilities
But, development/maintenance will have to be done for every target mobile platform
Mobile Web App
Target multiple platforms from a singe code base
Low barrier to entry – low learning curve, nothing to download for users
But, native development may still be needed and performance may also suffer slightly
Hard to access – user must browse to the ‘site’
Native HTML5 Apps
Target multiple platforms from a single code base.
Requires development tools for each platform.
Access to device features but with limitations.
[Michael]
Native HTML5 applications are fundamentally different from mobile web applications. An HTML5 application is a “Single Page Application” – this means that the application resides in a single “page.”
There is no:
Back button
URL bar
History
Shortcuts
The user cannot escape from your application.
You code the logic of the application in JavaScript -
[Ryan]
First, the server doesn’t serve up the pages. The pages are bundled with the application.
Lack of HTTP Session should get your attention – this is a major difference.
[Ryan]
Graphically let’s get a better understanding of what we mean by a SPA.
It doesn’t mean that we’ve got a 10,000 line html file. The content does get segmented into multiple files. Your application does get split up into multiple JS and HTML5 files.
Note, you should have a post process step, say using Grunt which will minify your resources.
[Michael]
You mobile framework to get going.
Don’t re-invent the wheel.
Desktop web development skills are different than mobile web development skills
Have to handle touch, small devices, device orientation changes.
Angular can be used although it isn’t listed.
[Michael]
Sencha Touch framework has an IDE
Visually develop the pages
Forces good MVC practices
Development similar to that in xCode, Android Studio
Costs $400 for a license (Sencha Touch libaries are free)
[Ryan]
Next up, we are going to look at tooling!
[Michael]
Need quite a few tools in order to get started.
Need our platform tools installed
Xcode
Android Developer Studio
Microsoft Tools
[Ryan]
Tooling is incredibly important and also challenging.
Dealing with multiple technologies
May not all play nice
[Michael]
[Michael]
Her we have the various tools.
Need multiple operating systems in addition to multiple devices.
Using PhoneGap we can build in the cloud.
[Michael]
Cordova is installed via the Node package manager, - you can choose to circumvent.
[Michael]
- To simplify development it is easiest to test in Chrome.
- NetBeans enables you to debug in Chrome
[Michael]
Create a new Cordova project in NetBeans (hello world) and launch it.
Set a breakpoint.
[Michael]
- Next we will talk about Apache Cordova!
Up to this point we’ve been alluding to Apache Cordova…
[Michael]
Cordova has many plugins allowing you to talk to devices.
[Ryan]
Native HTML5 applications are fundamentally different from mobile web applications. An HTML5 application is a “Single Page Application” – this means that the application resides in a single “page.”
There is no:
Back button
URL bar
History
Shortcuts
The user cannot escape from your application.
You code the logic of the application in JavaScript -
[Michael]
The project layout is relatively straightforward
Web assets- html files, JS, etc. go under www. Test fles are under test. Plugins are installed in the plugins directory. Etc.
[Ryan]
[Ryan]
[Michael]
Config.xml is the global configuration file.
There is a config.xml file for each platform (iOS/Android).
Access origin - * means it can access anything
Specify n34sailor to lock to only our site. If someone did inject JavaScript (and it was interpreted) it could be used to hack our server
[Michael]
In that last slide, we saw how Cordova would allow us to access any site. We need
[Michael]
Values in simulator are different
Vary significantly across phones
Intel vs. ARM
- Capturing a picture is easy – can use AJAX to send the picture to a RESTful web service.
- Picture is transmitted as Base64 and must be decoded.
Java 8 included Base64 decode support.
- Requires special JAX-RS configuration to receive the multi-part MIME request.
[Ryan]
[Ryan]
[Ryan]
Client initiates the request.
Client/server communication from mobile applications commonly happens over HTTP, more often using REST style services
Stateless, lightweight, scalable
Typically JSON over HTTP/HTTPS.
XML occasionally used.
Commonly supported HTTP verbs include GET, POST, PUT, and DELETE
Uses existing web technologies and security standards
Fully supported by Java EE 6 & 7.
In terms of connecting connecting a mobile application with the the backend servers you have two main types of connectivity: Restful webservices and Websockets. Both of these use HTTP at their core. Using HTTP as opposed to direct socket communication ensures the the mobile application is able to reach the server wherever it it running. HTTP is well understood by fire walls and proxy servers.
Restful web services map the HTTP functions PUT/POST/DELETE, etc. to business functionality.
Text based exchange format.
JSON defines only two data structures: objects and arrays. An object is composed of name-value pairs and an array is a list of values.
JAX RS is the Java standard API for rest.
With Java EE 7 JAXRS received a major upgrade.
This is an example JAX-RS endpoint.
[Ryan]
ServerApplicationEndpoint- represents an endpoint.
- WebSocket implementation will check with each decoder until it finds one that can decode the message- .
Minimize parsing in the willDecode or cache for the decode method.
Exceptions processing messages can wreak havoc.
The client racing app is constantly retrieving information from the server.
This is what we want to happen on the serverside…
In this example here we see an example of how to use basic authentication against the server. The problem with this approach is that we would have to cache the username and password in the application.
Caching the username and password in the application would be bad.
What we are going to do instead is take a token approach. With a token approach.
One solution to token verification is to write a WebFilter.
However, there are two flaws with this code:
To use the servlet logic, we would have to retrieve the username and password to then log in the user. The container would then hit the database table again to perform password validation. At least two selects on the database on every restful web service invocation.
The password is hashed and the container expects a plain text password.
So this solution will not work.