Developing Exceptional Mobile Application

1,598 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,598
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
39
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Developing Exceptional Mobile Application

  1. 1. Developing Exceptional Mobile Applications using Web Experience Factory <ul>Vincent Perrin | Collaboration Architect | IBM </ul>
  2. 2. <ul>Agenda </ul><ul><li>Mobile web applications and Web Experience Factory
  3. 3. High-level tour of Web Experience Factory automation of mobile web applications
  4. 4. Deep dive into mobile-related features of Web Experience Factory
  5. 5. Building hybrid and offline applications
  6. 6. Downloads and additional resources </li></ul>
  7. 7. Mobile application development and web technology <ul><li>Organizations are faced with a need to move applications rapidly to the exploding smartphone and mobile device market
  8. 8. Building native applications with multiple device SDKs is very costly and time-consuming
  9. 9. Modern smartphone and tablet browsers have very good support for a rich user experience that can have a native look and feel </li><ul><li>This is done with web technologies: HTML/HTML5, CSS, and JavaScript </li></ul><li>Web Experience Factory provides a set of highly-automated tools for developing mobile web applications using those web technologies </li></ul>
  10. 10. Mobile web applications <ul><li>Accessible over the internet without installing software
  11. 11. Use device browsers to provide native-looking applications
  12. 12. Built using standard web technologies (HTML5, CSS, JS) </li></ul>Hybrid applications: leverage web technology and native device features <ul><li>Installed applications that use the device browser to display web-based UI
  13. 13. Provide the ability to use native device features
  14. 14. Leverage standard web technologies (HTML5, CSS, JS) </li></ul>Native applications <ul><li>Installed applications that use all device features such as camera, accelerometer, calendar, contacts, etc.
  15. 15. Support the richest user experience (e.g., gaming applications)
  16. 16. Built using each phone's native SDK </li></ul>Techniques for Creating Exceptional Mobile Experiences
  17. 17. Mobile web applications <ul><li>Accessible over the internet without installing software
  18. 18. Use device browsers to provide native-looking applications
  19. 19. Built using standard web technologies (HTML5, CSS, JS) </li></ul>Hybrid applications: leverage web technology and native device features <ul><li>Installed applications that use the device browser to display web-based UI
  20. 20. Provide the ability to use native device features
  21. 21. Leverage standard web technologies (HTML5, CSS, JS) </li></ul>Native applications <ul><li>Installed applications that use all device features such as camera, accelerometer, calendar, contacts, etc.
  22. 22. Support the richest user experience (e.g., gaming applications)
  23. 23. Built using each phone's native SDK </li></ul>Techniques for Creating Exceptional Mobile Experiences Use Web Experience Factory for rapid development of web and hybrid applications
  24. 24. Mobile Application Comparison <ul>Web </ul><ul>Hybrid </ul><ul>Native </ul><ul>Performance </ul><ul>Development cost </ul><ul>Development time </ul><ul>Application portability </ul><ul>Native functionality </ul><ul>Application store distribution </ul><ul>Extensible </ul><ul>Reasonable </ul><ul>Reasonable </ul><ul>Expensive </ul><ul>Short </ul><ul>Short </ul><ul>Long </ul><ul>High </ul><ul>High </ul><ul>None </ul><ul>No </ul><ul>All </ul><ul>All </ul><ul>Fast </ul><ul>Native speed if needed </ul><ul>Very Fast </ul><ul>No </ul><ul>Yes </ul><ul>Yes </ul><ul>No </ul><ul>Yes </ul><ul>Yes </ul>
  25. 25. Decision Tree <ul>Easily updated or hosted? </ul><ul>Support multiple devices? </ul><ul>Highest performance? </ul><ul>HTML/JS/CSS UI? </ul><ul>Native </ul><ul>Distribute via app store? </ul><ul>Native functionality? </ul><ul>Web </ul><ul>Hybrid </ul><ul>App </ul><ul>Y </ul><ul>N </ul><ul>Y </ul><ul>Y </ul><ul>N </ul><ul>N </ul><ul>N </ul><ul>Y </ul>
  26. 26. IBM Web Experience Factory key features tool--transparent <ul><li>Automates and simplifies software creation for rapid solution delivery
  27. 27. Creates highly interactive, rich user interfaces that leverage Ajax techniques and Dojo widgets
  28. 28. Generates native-looking mobile web applications for smartphones and other devices
  29. 29. Provides a rich pre-built connector library and transformation capabilities (relational DB, Web and REST services, SAP, Siebel, PeopleSoft, Lotus Domino, Microsoft Excel, etc.)
  30. 30. Includes Dynamic Profiling capability, to generate multiple variations from a single source model </li><ul><li>For different devices, different roles, customers/partners, etc. </li></ul><li>Runs on IBM WebSphere Portal or IBM WebSphere Application Server </li></ul>Supercharges Application Development
  31. 31. Web Experience Factory automation of design patterns <ul><li>Web Experience Factory features a model-driven development approach using builders
  32. 32. Each builder has a wizard-like UI and automates a design pattern, generating all the application code and artifacts
  33. 33. Builders are combined in a model and edited using the Web Experience Factory graphical Designer IDE </li></ul>Libraries and code Code generation engine Application Model Builder 1 Builder 2 Etc.
  34. 34. Why is Web Experience Factory a perfect fit for mobile web application development? <ul><li>All the features that make Web Experience Factory a highly automated tool for quickly building web applications can be used for smartphone and tablet applications
  35. 35. Mobile web applications are built using the same HTML, CSS, and JavaScript technologies that Web Experience Factory natively generates
  36. 36. Web Experience Factory generates mobile-optimized UI patterns and styles in a highly automated way
  37. 37. Web Experience Factory's Dynamic Profiling feature enables the creation of multi-channel applications from a single source model </li></ul>
  38. 38. One tool – multiple platforms and devices Use one common set of tools, techniques, application code (models)... ...and generate applications for multiple client devices Web Experience Factory ...deploy to multiple platforms... Smartphones Tablets Desktop Browsers WebSphere Portal WebSphere Application Server
  39. 39. <ul>Agenda </ul><ul><li>Mobile web applications and Web Experience Factory
  40. 40. High-level tour of Web Experience Factory automation of mobile web applications
  41. 41. Deep dive into mobile-related features of Web Experience Factory
  42. 42. Building hybrid and offline applications
  43. 43. Downloads and additional resources </li></ul>
  44. 44. Web Experience Factory for mobile devices <ul><li>Create native-looking mobile applications using standard technologies (HTML, CSS, Javascript)
  45. 45. Automate the creation of mobile-optimized applications, eliminating coding and speeding time to market
  46. 46. Support your multi-channel strategy. Create once and run on multiple devices (iPhone, Blackberry, Android, iPad, etc.)
  47. 47. Leverage all the Experience Factory out-of-the-box features for quickly building exceptional web experiences
  48. 48. Leverage HTML5 for features such as geolocation and offline support
  49. 49. Build hybrid applications to support additional device features such as camera </li></ul>
  50. 50. Demo – samples of mobile web applications built with Web Experience Factory
  51. 51. So, how do I build a mobile-enabled web application with Web Experience Factory? <ul><li>Use all the high-level tools of Web Experience Factory to quickly build your data access and user interface pieces
  52. 52. Add mobile-enablement features such as the Data Layout builder and mobile UI themes
  53. 53. Optionally, use device type profiling to create different variants for different device types </li></ul><ul><li>Use the Mobile List & Detail Service Consumer wizard to get started quickly </li></ul>
  54. 54. Building mobile web applications using a service architecture Presentation (consumer) model Service (provider) model DB or other back end data source Service Interface operations and schemas Builders for mobile UI <ul><li>Data Layout
  55. 55. Mobile UI theme </li></ul>UI customization builders Desktop Smartphone Presentation builders <ul><li>Service Consumer
  56. 56. View & Form or Data Services UI
  57. 57. Data Field Settings </li></ul>Provider builders <ul><li>SQL Data Services, Web services, REST services, SAP, Domino, PeopleSoft, Siebel, etc.
  58. 58. Data transforms and schemas
  59. 59. References to Java classes/libraries </li></ul>
  60. 60. <ul>Agenda </ul><ul><li>Mobile web applications and Web Experience Factory
  61. 61. High-level tour of Web Experience Factory automation of mobile web applications
  62. 62. Deep dive into mobile-related features of Web Experience Factory
  63. 63. Building hybrid and offline applications
  64. 64. Downloads and additional resources </li></ul>
  65. 65. Web Experience Factory tools for building mobile web applications <ul><li>Mobile List & Detail Service Consumer wizard for creating great-looking mobile and multi-channel applications in minutes
  66. 66. Data Layout builder for scrolling lists with configurable options such as thumbnail images and multi-line text with multiple styles
  67. 67. Page Navigation builder for native -looking navigation tabs and lists
  68. 68. Geolocation builder for a ccess to device geolocation without coding
  69. 69. Mobile UI themes for smartphone-optimized look and feel, including optional “slide in” effect
  70. 70. Mobile Rich Data Definition library for automatic support of mobile UI controls such as selectable lists, numeric keypad input, phone numbers, etc.
  71. 71. Mobile Device Type profile set for multi-channel support </li></ul>
  72. 72. Mobile List & Detail Service Consumer wizard <ul><li>Builds a mobile-enabled model using View & Form builder
  73. 73. Optionally profile-enables the mobile features </li></ul>
  74. 74. Data Layout builder <ul><li>The Data Layout builder morphs a table view into a variety of list layouts and patterns
  75. 75. Supports thumbnail images and multi-line text
  76. 76. A variety of layouts for both mobile and desktop devices are provided
  77. 77. You can easily create new reusable layouts, by providing a simple HTML fragment and some CSS
  78. 78. You can specify different layouts for different mobile device types </li></ul>
  79. 79. Page Navigation builder <ul><li>Page Navigation builder creates navigation lists or tabs
  80. 80. Optionally adds “back” navigation to target pages
  81. 81. Choose from provided styles or apply your own CSS </li></ul>Navigation lists with grouping Navigation lists Tabs
  82. 82. Web Experience Factory mobile UI themes <ul><li>UI themes provide central control of all the “look and feel” of applications: </li><ul><li>CSS styles, page layouts, table and form layout rules, paging controls, and more </li></ul><li>Easily create new themes to automate your desired look and feel
  83. 83. Four mobile themes are provided: mobile, mobile_gray, mobile_slide (includes a “slide in” effect), mobile_basic (uses minimal-sized JS and CSS) </li></ul>
  84. 84. Desktop Smartphones Using profiling for multi-channel rendering from a single code base Sales Orders Application Model Smartphone Tablet <ul><li>With profiling, a single model can render differently based on the requesting device type
  85. 85. Builders can be enabled and disabled by profile, or builder input values can be profiled
  86. 86. Profiling for devices is easily extensible to support dynamic update of device information </li></ul>
  87. 87. <ul><li>The Geolocation builder provides access to location data without coding
  88. 88. Location data can be accessed in client Javascript or in server actions
  89. 89. Apply the Geolocation builder to a page, then add an event handler for GeoLocationClient or GeoLocation event </li></ul>Using HTML5 geolocation
  90. 90. <ul>Agenda </ul><ul><li>Mobile web applications and Web Experience Factory
  91. 91. High-level tour of Web Experience Factory automation of mobile web applications
  92. 92. Deep dive into mobile-related features of Web Experience Factory
  93. 93. Building hybrid and offline applications
  94. 94. Downloads and additional resources </li></ul>
  95. 95. What is PhoneGap? August 24 , 2011 <ul>It’s a tool for building mobile apps using Web technologies </ul><ul>HTML For Layout JavaScript to access device functionality navigator.notification.vibrate() CSS for rich look and feel Standards Based </ul>
  96. 96. PhoneGap <ul><li>“ Write once, deploy natively everywhere”
  97. 97. Open source framework for developing cross-platform, hybrid mobile apps with web technologies
  98. 98. Provides JavaScript interfaces to phone's native features
  99. 99. Builds small native wrapper around the app </li><ul><li>Uses platform's browser </li><ul><li>i.e. In Android, wraps WebView </li></ul><li>Since native, deployable to phone or app store </li></ul><li>Android, iOS, Blackberry, Palm, Symbian and WebOS </li></ul>
  100. 100. PhoneGap – How it's done <ul><li>They have written a native app for each supported device
  101. 101. This native app is designed to run HTML/CSS/Javascript </li><ul><li>It’s essentially a web browser+ </li></ul><li>The ‘+’ is their two libraries (per device) </li><ul><li>device native code library
  102. 102. Javascript library </li></ul><li>Native library provides API to Javascript library for accessing the native device API
  103. 103. Javascript library provides two sets of API </li><ul><li>One for the Native library to use. i.e. JS function for the Native library to call whenever the compass heading changes
  104. 104. One for user code to use. i.e. JS function to register a listener for whenever the compass heading changes </li></ul></ul>
  105. 105. PhoneGap API <ul><li>Core APIs </li><ul><li>Accelerometer (W3C)
  106. 106. Compass
  107. 107. Camera
  108. 108. Contacts (W3C)
  109. 109. File (W3C)
  110. 110. File Transfer
  111. 111. Geolocation (HTML5)
  112. 112. Media (audio play/record)
  113. 113. Network
  114. 114. Notification
  115. 115. Storage (HTML5 Web SQL & Web Storage) </li></ul><li>Consistent support across key platforms </li><ul><li>iOS, Android, Blackberry OS5/6
  116. 116. http://docs.phonegap.com </li></ul></ul>
  117. 117. Sample hybrid application using device camera built with Phonegap <ul><li>Hybrid applications can use Web Experience Factory out-of-the-box tools for building views and forms
  118. 118. Hybrid library such as Phonegap can provide Javascript access to device features such as camera
  119. 119. Sample and whitepaper on IBM developerWorks: “Building hybrid mobile applications with PhoneGap and IBM WebSphere Portlet Factory” </li></ul>2.Tap “Take Picture” button from Web Experience Factory form 3. Point camera and tap to take picture 4. Review thumbnail and tap “Submit” to upload to Web Experience Factory server application 1. View list of properties and tap “Create” to add a property
  120. 120. PhoneGap Plug-ins <ul><li>What if a native feature isn’t available in Core APIs? </li><ul><li>Write a plug-in
  121. 121. Access native plug-in code using JavaScript
  122. 122. Support for new sensors (NCF, ...) </li></ul><li>List of current plug-ins </li><ul><li>http://github.com/phonegap/phonegap-plugins
  123. 123. Barcode scanner (Android, iOS)
  124. 124. Clipboard manager (Android, iOS)
  125. 125. Child browser (Android, iOS)
  126. 126. Contact viewer (Android)
  127. 127. iAd (iOS)
  128. 128. In app purchase manager (iOS)
  129. 129. Keychain manager (iOS)
  130. 130. Native controls (iOS)
  131. 131. PayPal (iOS) </li></ul></ul>
  132. 132. Sample offline iPad application using HTML 5 <ul><li>HTML 5 can be used to build applications that can run connected or offline
  133. 133. Cache manifest and local storage features of HTML5 provide the offline support
  134. 134. Use Web Experience Factory out-of-the-box tools for building online and offline user interface
  135. 135. Support for HTML 5 offline features is in sample code which is applied using Web Experience Factory builders </li></ul>Fill out and review forms while offline Post saved forms to server when reconnected
  136. 136. <ul>Agenda </ul><ul><li>Mobile web applications and Web Experience Factory
  137. 137. High-level tour of Web Experience Factory automation of mobile web applications
  138. 138. Deep dive into mobile-related features of Web Experience Factory
  139. 139. Building hybrid and offline applications
  140. 140. Downloads and additional resources </li></ul>
  141. 141. How do I get started with Web Experience Factory mobile web application development? <ul><li>Go to the Web Experience Factory wiki for the latest links to downloads and resources
  142. 142. The “Smart Phone and Mobile Device Development” page on the wiki has links to mobile samples
  143. 143. Install the free trial download and the samples and try it out! </li></ul>
  144. 144. <ul><li>Web Experience Factory wiki </li><ul><li>http://www-10.lotus.com/ldd/pfwiki.nsf
  145. 145. Includes numerous samples and articles, best practices documents, and links to other resources </li></ul><li>Learning Roadmap from the Web Experience Factory wiki </li><ul><li>http://www-10.lotus.com/ldd/pfwiki.nsf/dx/learning-websphere-portlet-factory
  146. 146. Covers topics from your first installation to advanced topics such as creating builders </li></ul><li>Web Experience Factory forums on developerWorks </li><ul><li>http://www-01.ibm.com/support/docview.wss?rs=3044&uid=swg27011853
  147. 147. These are very active and are monitored closely by the Web Experience Factory team
  148. 148. Go here for specific questions or if you get stuck on anything </li></ul></ul>Key resources for developers
  149. 149. Summary <ul><li>IBM Web Experience Factory has a very rich set of tools for the rapid development of great-looking mobile web applications
  150. 150. This mobile support is available now in 7.0.1
  151. 151. The dynamic profiling feature of Experience Factory makes it easy to create applications optimized for multiple device types, from a single source model </li></ul><ul><ul><li>Desktop, smartphone, tablet, etc. </li></ul></ul><ul><li>IBM Web Experience Factory is WebSphere Portlet Factory, so it's a mature and stable product, with a deep set of tools and a complete developer ecosystem </li></ul>
  152. 152. Questions?
  153. 153. Contact Vincent Perrin IBM Collaboration Solutions Architect for Southwest Europe Mobile: +33 6 77 02 03 54 Email: vincent.perrin@fr.ibm.com Twitter : @vperrin

×