Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hybrid Mobile Development with Apache Cordova and

1,553 views

Published on

  • Be the first to comment

Hybrid Mobile Development with Apache Cordova and

  1. 1. Hybrid Mobile Development with Apache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès
  2. 2. Who wants to be the next AppStore billionaire?
  3. 3. Agenda • Demo Application • Mobile Overview • Tooling • Apache Cordova • Java EE 7 + Cordova • jQuery Mobile • Security • Deployment • Summary • Q&A https://github.com/rcuprak/n34sailor Both designed and engineered using Dassault Systèmes CATIA software!
  4. 4. DemoApplication Sailboat Racing Start/Finish
  5. 5. DemoApplication • Broadcast race course • Boat registration • Time check and start notification • Boat tracking • Race announcements • Results • Weather information Functional Requirements
  6. 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. 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. 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?
  9. 9. DemoApplicationArchitecture CORDOVA HTML5 Java EE 7 Server App Data Services NOAA Database
  10. 10. DemoApplication High Level Architecture Interface Application Entities Infrastructure Apache Cordova JAX-RS Web Sockets EJB JPA Entities JMS CDI Communication jQuery Mobile
  11. 11. DemoApplication Data Model
  12. 12. DemoApplication N34 Sailor
  13. 13. Mobile Overview
  14. 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. 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. 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
  17. 17. MobileOverview Native HTML5 vs. Web Apps HTTP Session JSF/JSP/Facelets
  18. 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. 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
  20. 20. MobileOverview Secha Architect
  21. 21. Tooling
  22. 22. 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?
  23. 23. 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
  24. 24. Tooling
  25. 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!
  26. 26. 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
  27. 27. Tooling Install NetBeans Connector (chrome.google.com) NetBeans <-> Chrome Integration NetBeans enables you to debug in Chrome
  28. 28. Demo– ProjectCreation
  29. 29. Apache Cordova
  30. 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. 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. 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
  33. 33. ApacheCordova Project Layout
  34. 34. ApacheCordova Index.html
  35. 35. ApacheCordova Index.js
  36. 36. ApacheCordova config.xml Based on W3C Packaged Web Apps (Widgets) http://www.w3.org/TR/widgets/ Danger!! – cross site script (XSS) exploit risk!
  37. 37. ApacheCordova • 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
  38. 38. ApacheCordova Plugin: Network Status
  39. 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!
  40. 40. ApacheCordova Plugin: Network Type
  41. 41. ApacheCordova Plugin: Camera
  42. 42. ApacheCordova Uploading Pictures via AJAX
  43. 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
  44. 44. ApacheCordova Testing in Chrome != Testing on device http://caniuse.com Ouch!
  45. 45. Java EE 7 & Apache Cordova
  46. 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. 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. 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. 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. 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. 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. 52. Java EE7 + Cordova REST Example with JAX-RS HTTP POST to http://<server>/n34/race/join/<id>/<class>
  53. 53. Java EE7 + Cordova REST in Cordova App + jQuery
  54. 54. ApacheCordova Enabling CORS: JAX-RS 2.0 Interceptor Chrome will now allow you to test your HTML5 app.
  55. 55. Java EE7 + 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
  56. 56. Java EE7 + Cordova Be careful when returning POJOs! JAX-RS Gotchas Oops! Use either: • DTO – Data Transfer Object • @XmlTransient
  57. 57. Java EE7 + Cordova Compressing RESTful Responses
  58. 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. 59. Java EE7 + Cordova Web Socket in JavaScript Creating WebSocket in JavaScript:
  60. 60. Java EE7 + Cordova Sending JSON via WebSockets
  61. 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. 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. 63. Java EE7 + Cordova Web Sockets: Programmatic Endpoint
  64. 64. Java EE7 + Cordova Web Sockets – Annotated Endpoint
  65. 65. Java EE7 + Cordova Sending a message Synchronously sends a message back to the client.
  66. 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. 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. 68. Java EE7 + Cordova • WebSocket connection processes many types of messages. Java API for JSON AbstractMessage ChatMessage TrackingMessage RaceMessage
  69. 69. Java EE7 + Cordova Java API for JSON Message Object Decoders/encoders
  70. 70. Java EE7 + Cordova Encoding JSON
  71. 71. Java EE7 + Cordova Decoding JSON
  72. 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. 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. 74. Java EE7 + Cordova Server Load: Web Sockets vs. REST Java EE 7 Server Java EE 7 Server REST WebSockets
  75. 75. jQuery Mobile
  76. 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. 77. jQueryMobile • Use NetBeans to install jQuery and jQuery Mobile. • Don’t use CDN – all content must be packaged with the application. Configuration
  78. 78. jQueryMobile Quick Introduction
  79. 79. jQueryMobile • Changing to another page: • Processing a page before rendering: Navigation
  80. 80. Security
  81. 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. 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. 83. Security Goal is to use Java EE security on the server side: Java EE Security JAX-RS Endpoint EJBs (roles)
  84. 84. Security Typical Java EE Configuration Won’t Work!
  85. 85. Security Basic Authentication
  86. 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
  87. 87. Security Token Verification via Filter Bad idea!
  88. 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. 89. Security • JASPIC puzzle piecesL • ServletContextListener – initial registration of AuthConfigProvider • AuthConfigProvider • ServerAuthConfig • ServerAuthContext • ServerAuthModule  does the actual authentication work] • Factory nightmare… Server Authentication Module
  90. 90. Security JASPIC Pieces ServerAuthModule Implementation What is this code doing? 1) Specifying we are interested in HTTP messages 2) Looking up our own EJB that performs authentication
  91. 91. Security JASPIC Pieces WebSocket Handling Setup Principals…
  92. 92. Security Authorize Bean Token is cached!
  93. 93. Security Authentication Process JAX-RS Endpoint AuthorizeBea n EJB Auth Module Race EJB /join/race Check token Invoke Service join Java EE Security
  94. 94. Summary • Apache Cordova simplifies cross-platform mobile development. • Java EE 7 provides a standardized server stack to enable Apache Cordova development.
  95. 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
  96. 96. Summary • Email contact: rcuprak@gmail.com • LinkedIn: https://www.linkedin.com/pub/ryan-cuprak/0/12a/93 • Code: https://github.com/rcuprak/n34sailor • Twitter: @ctjava • Books: References

×