Downloaded 60 times
![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](https://image.slidesharecdn.com/apachecordovaconfoo-150219160643-conversion-gate01/75/Hybrid-Mobile-Development-with-Apache-Cordova-and-66-2048.jpg)
![Security
• JASPIC puzzle piecesL
• ServletContextListener – initial registration of AuthConfigProvider
• AuthConfigProvider
• ServerAuthConfig
• ServerAuthContext
• ServerAuthModule does the actual authentication work]
• Factory nightmare…
Server Authentication Module](https://image.slidesharecdn.com/apachecordovaconfoo-150219160643-conversion-gate01/75/Hybrid-Mobile-Development-with-Apache-Cordova-and-89-2048.jpg)
![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](https://crownmelresort.com/image.slidesharecdn.com/apachecordovaconfoo-150219160643-conversion-gate01/75/Hybrid-Mobile-Development-with-Apache-Cordova-and-66-2048.jpg)
![Security
• JASPIC puzzle piecesL
• ServletContextListener – initial registration of AuthConfigProvider
• AuthConfigProvider
• ServerAuthConfig
• ServerAuthContext
• ServerAuthModule does the actual authentication work]
• Factory nightmare…
Server Authentication Module](https://crownmelresort.com/image.slidesharecdn.com/apachecordovaconfoo-150219160643-conversion-gate01/75/Hybrid-Mobile-Development-with-Apache-Cordova-and-89-2048.jpg)
Uploaded byRyan Cuprak
Hybrid Mobile Development with Apache Cordova and
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.
More Related Content
![Java script nirvana in netbeans [con5679]](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptnirvanainnetbeanscon5679-160927041807-thumbnail.jpg?width=640&height=640&fit=bounds)
![Top 50 java ee 7 best practices [con5669]](https://cdn.slidesharecdn.com/ss_thumbnails/top50javaee7bestpracticescon5669-160927041126-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Hybrid Mobile Development with Apache Cordova and
![[2015/2016] Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/05cordova-160401161537-thumbnail.jpg?width=640&height=640&fit=bounds)
![[JMaghreb 2014] Developing JavaScript Mobile Apps Using Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/javascriptmoibleappsdevelopment-141106091920-conversion-gate02-thumbnail.jpg?width=640&height=640&fit=bounds)
![[JavaLand 2015] Developing JavaScript Mobile Apps Using Apache Cordova](https://cdn.slidesharecdn.com/ss_thumbnails/javaland2015javascriptmobileapps-150330083550-conversion-gate01-thumbnail.jpg?width=640&height=640&fit=bounds)
![Jms deep dive [con4864]](https://cdn.slidesharecdn.com/ss_thumbnails/jmsdeepdivecon4864-160927041349-thumbnail.jpg?width=640&height=640&fit=bounds)
![Faster java ee builds with gradle [con4921]](https://cdn.slidesharecdn.com/ss_thumbnails/fasterjavaeebuildswithgradlecon4921-160927042155-thumbnail.jpg?width=640&height=640&fit=bounds)
Hybrid Mobile Development with Apache Cordova and
- 1. Hybrid Mobile Development withApache Cordova and Java EE 7 Ryan Cuprak, Dassault Systemès Michael Finocchiaro, Dassault Systemès
- 2. Who wants tobe the next AppStore billionaire?
- 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.
- 5. DemoApplication • Broadcast racecourse • Boat registration • Time check and start notification • Boat tracking • Race announcements • Results • Weather information Functional Requirements
- 6. DemoApplication • Mobile • ApacheCordova • User interface • JQuery Mobile • Tooling • NetBeans • NodeJS • Server • GlassFish 4.1 (EE 7) • Android dev tools • iOS dev tools Overview
- 7. DemoApplication • What isApache 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 setof 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. DemoApplicationArchitecture CORDOVA HTML5 Java EE 7Server App Data Services NOAA Database
- 10. DemoApplication High Level Architecture Interface Application Entities Infrastructure Apache Cordova JAX-RSWeb Sockets EJB JPA Entities JMS CDI Communication jQuery Mobile
- 11.
- 12.
- 13.
- 14. MobilePlatforms • Dominated byGoogle’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 PageApplication (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. MobileOverview Native HTML5 vs.Web Apps HTTP Session JSF/JSP/Facelets
- 18. MobileOverview SPA – SinglePage 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 SenchaTouch 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.
- 21.
- 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. Tooling • Robust JavaEE 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.
- 25. Tooling • iOS (xCode) AppleApp 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. 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. Tooling Install NetBeans Connector(chrome.google.com) NetBeans <-> Chrome Integration NetBeans enables you to debug in Chrome
- 28.
- 29.
- 30. ApacheCordova • Originally namedPhoneGap. • 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 CameraGlobalization 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 appswill 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.
- 34.
- 35.
- 36. ApacheCordova config.xml Based on W3CPackaged Web Apps (Widgets) http://www.w3.org/TR/widgets/ Danger!! – cross site script (XSS) exploit risk!
- 37. ApacheCordova • Default securitypolicy 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.
- 39. ApacheCordova Plugin: Device Information Don’talways believe what you see: • Simulators and actual phones return different values. • You should probably test both ARM and Intel-based phones!
- 40.
- 41.
- 42.
- 43. ApacheCordova • Start withHTML5 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. ApacheCordova Testing in Chrome!= Testing on device http://caniuse.com Ouch!
- 45. Java EE 7& Apache Cordova
- 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>
- 53. Java EE7 +Cordova REST in Cordova App + jQuery
- 54. ApacheCordova Enabling CORS: JAX-RS2.0 Interceptor Chrome will now allow you to test your HTML5 app.
- 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. Java EE7 +Cordova Be careful when returning POJOs! JAX-RS Gotchas Oops! Use either: • DTO – Data Transfer Object • @XmlTransient
- 57. Java EE7 +Cordova Compressing RESTful Responses
- 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
- 70. Java EE7 +Cordova Encoding JSON
- 71. Java EE7 +Cordova Decoding JSON
- 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
- 75.
- 76. jQueryMobile • UI Frameworkneeded! • 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 NetBeansto install jQuery and jQuery Mobile. • Don’t use CDN – all content must be packaged with the application. Configuration
- 78.
- 79. jQueryMobile • Changing toanother page: • Processing a page before rendering: Navigation
- 80.
- 81. Security • Apache CordovaApp != 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 CordovaApp 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 touse Java EE security on the server side: Java EE Security JAX-RS Endpoint EJBs (roles)
- 84. Security Typical Java EEConfiguration Won’t Work!
- 85.
- 86. Security • Token basedsecurity (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. Security Token Verification viaFilter Bad idea!
- 88. Security Drawbacks: • Authentication performedon 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 puzzlepiecesL • ServletContextListener – initial registration of AuthConfigProvider • AuthConfigProvider • ServerAuthConfig • ServerAuthContext • ServerAuthModule does the actual authentication work] • Factory nightmare… Server Authentication Module
- 90. Security JASPIC Pieces ServerAuthModule Implementation Whatis this code doing? 1) Specifying we are interested in HTTP messages 2) Looking up our own EJB that performs authentication
- 91.
- 92.
- 93. Security Authentication Process JAX-RS Endpoint AuthorizeBea n EJB Auth Module RaceEJB /join/race Check token Invoke Service join Java EE Security
- 94. Summary • Apache Cordovasimplifies cross-platform mobile development. • Java EE 7 provides a standardized server stack to enable Apache Cordova development.
- 95. Summary Store Owner PlatformCost 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. 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
Editor's Notes
- #2 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?
- #3 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.
- #4 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…
- #5 [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.
- #6 [Ryan]
- #7 [Ryan] There are several technologies we
- #9 [Ryan] If this is an HTML5 application, why Java EE? Where does Java EE fit into the picture?
- #10 [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.
- #11 This is a mult-tier architecture Leverages practically every feature of Java EE
- #12 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.
- #13 [Ryan] Demo application
- #14 [Michael]
- #15 [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.
- #16 [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.
- #17 [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 -
- #18 [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.
- #19 [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.
- #20 [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.
- #21 [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)
- #22 [Ryan] Next up, we are going to look at tooling!
- #23 [Michael] Need quite a few tools in order to get started. Need our platform tools installed Xcode Android Developer Studio Microsoft Tools
- #24 [Ryan] Tooling is incredibly important and also challenging. Dealing with multiple technologies May not all play nice
- #25 [Michael]
- #26 [Michael] Her we have the various tools. Need multiple operating systems in addition to multiple devices. Using PhoneGap we can build in the cloud.
- #27 [Michael] Cordova is installed via the Node package manager, - you can choose to circumvent.
- #28 [Michael] - To simplify development it is easiest to test in Chrome. - NetBeans enables you to debug in Chrome
- #29 [Michael] Create a new Cordova project in NetBeans (hello world) and launch it. Set a breakpoint.
- #30 [Michael] - Next we will talk about Apache Cordova!
- #31 Up to this point we’ve been alluding to Apache Cordova…
- #32 [Michael] Cordova has many plugins allowing you to talk to devices.
- #33 [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 -
- #34 [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.
- #35 [Ryan]
- #36 [Ryan]
- #37 [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
- #38 [Michael] In that last slide, we saw how Cordova would allow us to access any site. We need
- #39 [Michael]
- #40 Values in simulator are different Vary significantly across phones Intel vs. ARM
- #42 - 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.
- #43 [Ryan]
- #44 [Ryan]
- #46 [Ryan]
- #47 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.
- #49 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.
- #50 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.
- #52 JAX RS is the Java standard API for rest. With Java EE 7 JAXRS received a major upgrade.
- #53 This is an example JAX-RS endpoint.
- #55 [Ryan]
- #64 ServerApplicationEndpoint- represents an endpoint.
- #70 - 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.
- #83 The client racing app is constantly retrieving information from the server.
- #84 This is what we want to happen on the serverside…
- #86 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.
- #88 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.
- #96 [Michael]