1<br />
Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohitsghatol@gmail.com<br />
3<br />Introduction<br />Rohit Ghatol<br /><ul><li>Project Manager @ Synerzip
Associate Architect @ QuickOffice Inc
GTUG Manager & Tech Next Founder
Certified Scrum Master
Corporate Trainer (Agile and Technical)
Was part of OpenSocial at Google</li></li></ul><li>4<br />Topics<br />Overview<br />Understanding Mobile Apps<br />Cross P...
5<br />Overview<br />The process of developing Applications for various mobile platform using common source code with litt...
6<br />Understanding Mobile Apps<br />
7<br />Reaching Mobile Users<br />
8<br />1. Mobile Features<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
9<br />2. Tablet Features<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
10<br />3. User Interaction<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
11<br />e.gLayar Application<br />
12<br />4. Location aware<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
13<br />5. Sensors<br />Handy Camera and Voice Recording<br />Upcoming NFC (Near Field Communication) turning phone into C...
14<br />e.g Shopping Applications<br />Scan a product’s barcode to know if it has the lowest price. <br />If not, then nav...
15<br />6. Push Notifications<br />Push Notification<br />Notifying the User proactively<br />
16<br />Challenges in building Mobile Applications<br />
17<br />1. OS Fragmentation<br />Windows 7<br />Fragmentation<br />
18<br />2. Multiple Teams/Product<br />Windows 7<br />Multiple Teams/Products<br />
19<br />3. Uniform User Experience<br />Windows 7<br />Uniform User Experience<br />
20<br />4. Feature Fragmentation<br />Feature Fragmentation<br />
21<br />Approaches to Mobile Development <br />
22<br />Types of Mobile App Dev<br />Native Mobile Apps<br />Cross Platform Mobile Apps<br />Hybrid partly Native partly C...
23<br />Native Mobile Apps<br />When To<br /><ul><li>High Performance Apps
Heavy on OS and Device Features
Complex N/W comm.
Canvas based Apps
Only Few Platforms</li></ul>When Not To<br /><ul><li>Performance is not the main criteria
More or less Replicates Web Apps with few device feature
Standard Restful
Widget based apps
Many Platforms</li></li></ul><li>24<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Performance is not the main ...
More or less Replicates Web Apps with few device feature
Standard Restful
Widget based apps
Many Platforms</li></ul>When Not To<br /><ul><li>High Performance Apps
Heavy on OS and Device Features
Complex N/W comm.
Canvas based Apps
Only Few Platforms</li></li></ul><li>25<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Time to market is critical
Saving Cost is critical</li></ul>When Not To<br />
26<br />Hybrid Mobile Apps<br />When To<br />Why To<br /><ul><li>Fairly Simple UI
Complex Backend
Quite few platforms
E.gShareFile
Recommended way - PhoneGap Plugin
Some parts of app are common
Rest parts are different
Use Cross Platform to develop common part
Use Native to develop the weight lifting parts</li></li></ul><li>27<br />Cross Platform Mobile App Development<br />
28<br />Cross Platform Strategies<br />WEB APPLICATION<br />Bridge - JavaScript – Java – Objective C<br />UI<br />Platform...
29<br />Common Platform Approach<br />
30<br />Modern Browsers<br />All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 spec...
31<br />WebViews<br />All of these smart phones supports using these modern browsers as embedded views (aka WebViews)<br />
32<br />JavaScript to native and back<br />All these browser engine (most common being webkit) support Javascript to talk ...
33<br />Hybrid Applications<br />HTML/Javascript application loads Google Maps and talks to the native code to gain access...
34<br />Over all Architecture<br />HTML5/CSS3 Application<br />UI Framework e.g jQueryMobile<br />PhoneGap API<br />Phone ...
35<br />Possibilities<br />Limitless Possibilities<br />Expose Camera, Accelerometer, GPS, any of the phones sensors to ja...
36<br />Development<br />HTML/CSS Application uses Common API exposing device features<br />
37<br />Development<br />Sample code<br />
38<br />Mapping to Native<br />
39<br />Over all Architecture<br />Javascript Based Application<br />Titanium UI API<br />Titanium Phone API<br />Titanium...
40<br />Development<br />Two API Sets<br />One for UI * (Specific to Titanium Mobile)<br />Create Windows<br />Create Dial...
41<br />Development<br />UI API Set<br />
42<br />Development<br />UI API Set<br />
43<br />Issues<br />Common API set across platforms is always minimum<br />E.g IPhone as a widget, which Android not have<...
44<br />Mobile App Dev Frameworks<br />Common Platform<br />PhoneGap<br />Mapping to Native<br />Titanium Mobile<br />* Rh...
45<br />Compare Screens (IPhone)<br />PhoneGap<br />Titanium Mobile<br />
46<br />Compare Screens (Android)<br />PhoneGap<br />Titanium Mobile<br />
47<br />Open Source<br />BSD License<br />MIT License<br />
48<br />PhoneGap<br /><ul><li>Only platform to support 6 Platforms</li></li></ul><li>49<br />PhoneGap<br />Standards based...
50<br />PhoneGapPrerequistes<br /><ul><li>Need to be acquainted with Android, IOS, BlackBerry, WebOS
Need to be expert at HTML/Javascript or framework like GWT
Need to be acquainted with JavaScript libraries like
Jquery
script.aculo.us
Prototype
Etc
Or Ajax framework like GWT
Need different project for each platform, inject PhoneGap code in each project
PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone</li></li></ul><li>51<br />Demo Screens - IPhone<br />
52<br />Demo Screens - Android<br />
53<br />PhoneGap Features<br />
54<br />Challenges and Advantages<br /><ul><li>HTML based UI is the biggest Challenge as well as Advantage
Same UI can be used for Web and Mobile and even Desktop
Promising Framework
GWT – Used by Spring Roo for Enterprise Application Development
jQueryMobile – Based on legendary Jquery and now features
Multipage Template
Page Slide Transitions
Dialogs
Toolbars
Upcoming SlideShare
Loading in...5
×

Cross platform-mobile-applications-final

3,978

Published on

This talk is about how to develop cross platform mobile applications using PhoneGap and Titanium Mobile.

It also explains the nature of Mobile/Tablet Apps, what are the complexities involved and why to go for Cross Platform Mobile App Development

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

No Downloads
Views
Total Views
3,978
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
121
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Cross platform-mobile-applications-final

  1. 1. 1<br />
  2. 2. Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohitsghatol@gmail.com<br />
  3. 3. 3<br />Introduction<br />Rohit Ghatol<br /><ul><li>Project Manager @ Synerzip
  4. 4. Associate Architect @ QuickOffice Inc
  5. 5. GTUG Manager & Tech Next Founder
  6. 6. Certified Scrum Master
  7. 7. Corporate Trainer (Agile and Technical)
  8. 8. Was part of OpenSocial at Google</li></li></ul><li>4<br />Topics<br />Overview<br />Understanding Mobile Apps<br />Cross Platform Mobile App Development<br />Pure HTML/JavaScript – PhoneGap<br />Interpreted JavaScript – Titanium Mobile<br />Native Mobile App Development<br />Hybrid Mobile App Development<br />Comparison between PhoneGapVs Titanium<br />Conclusion<br />Q & A<br />
  9. 9. 5<br />Overview<br />The process of developing Applications for various mobile platform using common source code with little or no change to the common source.<br />This presentation focuses on Comparing two frameworks each taking a different approach to solve the above problem.<br />We will Compare PhoneGapVsTitanium .<br />
  10. 10. 6<br />Understanding Mobile Apps<br />
  11. 11. 7<br />Reaching Mobile Users<br />
  12. 12. 8<br />1. Mobile Features<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
  13. 13. 9<br />2. Tablet Features<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
  14. 14. 10<br />3. User Interaction<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
  15. 15. 11<br />e.gLayar Application<br />
  16. 16. 12<br />4. Location aware<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
  17. 17. 13<br />5. Sensors<br />Handy Camera and Voice Recording<br />Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger<br />
  18. 18. 14<br />e.g Shopping Applications<br />Scan a product’s barcode to know if it has the lowest price. <br />If not, then navigate to a store which has the lowest price<br />
  19. 19. 15<br />6. Push Notifications<br />Push Notification<br />Notifying the User proactively<br />
  20. 20. 16<br />Challenges in building Mobile Applications<br />
  21. 21. 17<br />1. OS Fragmentation<br />Windows 7<br />Fragmentation<br />
  22. 22. 18<br />2. Multiple Teams/Product<br />Windows 7<br />Multiple Teams/Products<br />
  23. 23. 19<br />3. Uniform User Experience<br />Windows 7<br />Uniform User Experience<br />
  24. 24. 20<br />4. Feature Fragmentation<br />Feature Fragmentation<br />
  25. 25. 21<br />Approaches to Mobile Development <br />
  26. 26. 22<br />Types of Mobile App Dev<br />Native Mobile Apps<br />Cross Platform Mobile Apps<br />Hybrid partly Native partly Cross Platform<br />
  27. 27. 23<br />Native Mobile Apps<br />When To<br /><ul><li>High Performance Apps
  28. 28. Heavy on OS and Device Features
  29. 29. Complex N/W comm.
  30. 30. Canvas based Apps
  31. 31. Only Few Platforms</li></ul>When Not To<br /><ul><li>Performance is not the main criteria
  32. 32. More or less Replicates Web Apps with few device feature
  33. 33. Standard Restful
  34. 34. Widget based apps
  35. 35. Many Platforms</li></li></ul><li>24<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Performance is not the main criteria
  36. 36. More or less Replicates Web Apps with few device feature
  37. 37. Standard Restful
  38. 38. Widget based apps
  39. 39. Many Platforms</li></ul>When Not To<br /><ul><li>High Performance Apps
  40. 40. Heavy on OS and Device Features
  41. 41. Complex N/W comm.
  42. 42. Canvas based Apps
  43. 43. Only Few Platforms</li></li></ul><li>25<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Time to market is critical
  44. 44. Saving Cost is critical</li></ul>When Not To<br />
  45. 45. 26<br />Hybrid Mobile Apps<br />When To<br />Why To<br /><ul><li>Fairly Simple UI
  46. 46. Complex Backend
  47. 47. Quite few platforms
  48. 48. E.gShareFile
  49. 49. Recommended way - PhoneGap Plugin
  50. 50. Some parts of app are common
  51. 51. Rest parts are different
  52. 52. Use Cross Platform to develop common part
  53. 53. Use Native to develop the weight lifting parts</li></li></ul><li>27<br />Cross Platform Mobile App Development<br />
  54. 54. 28<br />Cross Platform Strategies<br />WEB APPLICATION<br />Bridge - JavaScript – Java – Objective C<br />UI<br />Platform APIs<br />OS – Android / iPhone<br />JavaScript – Java Bridge<br />Mapping to Native<br />OS – Android / iPhone<br />Common Source<br />Cross Platform Source Code<br />Common Platform<br />Mapping to Native<br />Titanium Mobile<br />PhoneGap <br />
  55. 55. 29<br />Common Platform Approach<br />
  56. 56. 30<br />Modern Browsers<br />All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs<br />
  57. 57. 31<br />WebViews<br />All of these smart phones supports using these modern browsers as embedded views (aka WebViews)<br />
  58. 58. 32<br />JavaScript to native and back<br />All these browser engine (most common being webkit) support Javascript to talk to native code and back<br />Native Code<br />(Java/C++/ObjC)<br />HTML/Javascript<br />JSON packets<br />
  59. 59. 33<br />Hybrid Applications<br />HTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS location<br />Native Code<br />(Java/C++/ObjC)<br />HTML/Javascript<br />GPS Location<br />
  60. 60. 34<br />Over all Architecture<br />HTML5/CSS3 Application<br />UI Framework e.g jQueryMobile<br />PhoneGap API<br />Phone Gap Bridge<br />Camera<br />GPS<br />SQLite<br />SQLite<br />Compass<br />etc<br />File System<br />Accelerometer<br />
  61. 61. 35<br />Possibilities<br />Limitless Possibilities<br />Expose Camera, Accelerometer, GPS, any of the phones sensors to javascript<br />Instead of just building Browsed Based applications augment with more phone features<br />
  62. 62. 36<br />Development<br />HTML/CSS Application uses Common API exposing device features<br />
  63. 63. 37<br />Development<br />Sample code<br />
  64. 64. 38<br />Mapping to Native<br />
  65. 65. 39<br />Over all Architecture<br />Javascript Based Application<br />Titanium UI API<br />Titanium Phone API<br />Titanium Framework<br />Window<br />Dialog<br />SQLite<br />SQLite<br />Compass<br />etc<br />File System<br />Accelerometer<br />
  66. 66. 40<br />Development<br />Two API Sets<br />One for UI * (Specific to Titanium Mobile)<br />Create Windows<br />Create Dialogs<br />…….<br />One for Phone Features<br />Same as PhoneGap<br />Access Camera<br />Access GPS<br />……<br />
  67. 67. 41<br />Development<br />UI API Set<br />
  68. 68. 42<br />Development<br />UI API Set<br />
  69. 69. 43<br />Issues<br />Common API set across platforms is always minimum<br />E.g IPhone as a widget, which Android not have<br />Fragmentation of the API itself. <br />What is platform specific and not part of Common API comes in Platform specific api?<br />
  70. 70. 44<br />Mobile App Dev Frameworks<br />Common Platform<br />PhoneGap<br />Mapping to Native<br />Titanium Mobile<br />* Rhodes Mobile is another promising framework, but out of scope for today’s discussion<br />
  71. 71. 45<br />Compare Screens (IPhone)<br />PhoneGap<br />Titanium Mobile<br />
  72. 72. 46<br />Compare Screens (Android)<br />PhoneGap<br />Titanium Mobile<br />
  73. 73. 47<br />Open Source<br />BSD License<br />MIT License<br />
  74. 74. 48<br />PhoneGap<br /><ul><li>Only platform to support 6 Platforms</li></li></ul><li>49<br />PhoneGap<br />Standards based and extended<br />
  75. 75. 50<br />PhoneGapPrerequistes<br /><ul><li>Need to be acquainted with Android, IOS, BlackBerry, WebOS
  76. 76. Need to be expert at HTML/Javascript or framework like GWT
  77. 77. Need to be acquainted with JavaScript libraries like
  78. 78. Jquery
  79. 79. script.aculo.us
  80. 80. Prototype
  81. 81. Etc
  82. 82. Or Ajax framework like GWT
  83. 83. Need different project for each platform, inject PhoneGap code in each project
  84. 84. PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone</li></li></ul><li>51<br />Demo Screens - IPhone<br />
  85. 85. 52<br />Demo Screens - Android<br />
  86. 86. 53<br />PhoneGap Features<br />
  87. 87. 54<br />Challenges and Advantages<br /><ul><li>HTML based UI is the biggest Challenge as well as Advantage
  88. 88. Same UI can be used for Web and Mobile and even Desktop
  89. 89. Promising Framework
  90. 90. GWT – Used by Spring Roo for Enterprise Application Development
  91. 91. jQueryMobile – Based on legendary Jquery and now features
  92. 92. Multipage Template
  93. 93. Page Slide Transitions
  94. 94. Dialogs
  95. 95. Toolbars
  96. 96. Forms
  97. 97. Lists</li></li></ul><li>55<br />Code Walkthrough - PhoneGap<br />
  98. 98. Getting Started PhoneGap<br />56<br />Step 1: Create Android Eclipse Project<br />
  99. 99. Getting Started PhoneGap<br />57<br />Step 2: Add Phone Gap Java Library<br />
  100. 100. Getting Started PhoneGap<br />58<br />Step 3: Add Phone Gap Javascript and with other web app files<br />
  101. 101. Getting Started PhoneGap<br />59<br />Step 4: Modify Main Activity class<br />
  102. 102. Getting Started PhoneGap<br />60<br />Step 5: Extend DriodGap instead of Activity<br />
  103. 103. Getting Started PhoneGap<br />61<br />Step 6: Write Javascript Code to create UI &use PhoneGap API<br />
  104. 104. 62<br />
  105. 105. 63<br />PhoneGap on XCode<br />
  106. 106. 64<br />
  107. 107. 65<br />jQueryMobile UI Development<br />
  108. 108. jQuery Declarative UI<br /><!-- Main Page --><br /> <div data-role="page" id="home"><br /> <!-- Header of Main Page --><br /> <div data-role="header"> <br /> <h1>AlternativeTo Home</h1> <br /> </div><br /> <!-- Content of Main Page --><br /> <div data-role="content"><br /> <p>Find Alternatives To Your favouriteSoftwares </p><br /> <p><a href="#search" data-role="button">Search Alternatives</a></p> <br /> <p><a href="#recent" data-role="button">Recent Alternatives</a></p><br /> </div> <br /> </div> <br />66<br />
  109. 109. jQuery Declarative UI<br />67<br />
  110. 110. 68<br />Extending PhoneGap to open more of underlying system<br />
  111. 111. 69<br />Phone Gap Extension<br />Javascript Code<br />Android Code<br />References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins<br />Author – Rohit Ghatol<br />
  112. 112. 70<br />Mobile<br />
  113. 113. 71<br />Apache License<br /><ul><li>Appcelerator Titanium SDK
  114. 114. Titanium Module SDK
  115. 115. Appcelerator Titanium SDK
  116. 116. Titanium Module SDK</li></ul>Paid Modules<br /><ul><li>Commerce Modules
  117. 117. Communication Modules
  118. 118. Analytics Module
  119. 119. Media Modules</li></li></ul><li>72<br />Titanium Mobile<br />Currently supports only Android and IPhone platforms. <br />
  120. 120. 73<br />Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />Android<br />
  121. 121. 74<br />Titanium Architecture<br />
  122. 122. 75<br />Titanium Prerequistes<br />Need to be acquainted with Android, IOS programming<br />Need to know JavaScript<br />Use Titanium Mobile IDE to configure projects and use Text IDE to edit the code (unlike PhoneGap, there is only one project for all platforms)<br />
  123. 123. 76<br />Demo Screens - IPhone<br />
  124. 124. 77<br />Demo Screens - Android<br />
  125. 125. 78<br />Challenges and Advantages<br />Being Native is the biggest strength<br />Limited cross platform uiapi is a weakness<br />Platform specific api leads to fragmentation within code<br />
  126. 126. 79<br />Code Walkthrough – Titanium Mobile<br />
  127. 127. Titanium Developer<br />IDE for Titanium Mobile and Desktop<br />Allows Creating Titanium Project<br />Allows building Android and IPhone Applications<br />Does not provide any Source code Editor<br />80<br />
  128. 128.
  129. 129.
  130. 130. 83<br />Directory Structure<br />
  131. 131. 84<br />App.js (entry point)<br />vartabGroup = Titanium.UI.createTabGroup();<br />var win1 = Titanium.UI.createWindow({<br /> title: 'Search',<br />url: 'search.js'<br />});<br />var tab1 = Titanium.UI.createTab({ <br /> window:win1,<br />title:'Search Alternatives’<br />});<br />tabGroup.addTab(tab1); <br />tabGroup.addTab(tab2); <br />tabGroup.open();<br />
  132. 132. 85<br />search.js (building UI)<br />var window = Titanium.UI.currentWindow;<br />var search = Titanium.UI.createSearchBar({<br />height:43,<br /> top:0<br />});<br />var actInd = Titanium.UI.createActivityIndicator({<br /> height:50,<br />});<br />vartableview = Titanium.UI.createTableView({<br /> top:50<br />});<br />window.add(search);<br />window.add(tableview);<br />
  133. 133. 86<br />search.js (Ajax Call)<br />varxhr = Titanium.Network.createHTTPClient();<br />xhr.onload = function()<br />{<br />actInd.hide();<br />var doc = xhr.responseText;<br />var json = eval('('+doc+')');<br /> var data = [];<br /> //…. Load data in data <br /> // provide the data to table to populate the table<br />tableview.setData(data);<br />};<br />
  134. 134. 87<br />search.js (Event handling)<br />//send ajax request to fetch altrnatives for searchText<br />function searchAlternatives(searchText){<br />xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');<br />xhr.send();<br />}<br />//start search when user hits enter on search box<br />search.addEventListener('return', function(e)<br />{<br />actInd.show();<br />searchAlternatives(e.value);<br />});<br />
  135. 135. 88<br />Native Mobile App Development<br />
  136. 136. 89<br />Native App Development<br />Basically you need to hire experts who can<br />Build Android, IOS, BB, BlackBerry and Windows mobile apps<br />Devs should have experience to deploy apps on market<br />Devs should have experience on various devices<br />QA should know how to automate things on devices/emulator<br />Plan for risks if this is your companies first Mobile App deployment<br />
  137. 137. 90<br />Hybrid Mobile App Development<br />
  138. 138. 91<br />Hybrid App Development<br />Have Web Developers for Common UI<br />Have native code experts for heavy weight lifting<br />Use frameworks likePhoneGap Plugin Development framework to glue the above two pieces<br />Measure at every milestone to keep track of effect of changes<br />Use Automation to regress every layer<br />
  139. 139. 92<br />ShareFile Story<br />as<br />
  140. 140. 93<br />Comparison<br />Titanium Mobile<br /><ul><li>Android and IPhone
  141. 141. Gives out native app
  142. 142. API is more proprietary
  143. 143. UI has Limitations
  144. 144. UI will be fast
  145. 145. Much better User Experience
  146. 146. Portal Code can not be reused
  147. 147. Extensions are possible
  148. 148. Limited support for HTML/Javascript</li></ul>PhoneGap<br />6 Platforms<br />Gives out a mobile web app<br />API is less proprietary<br />UI possibilities are unlimited<br />UI could be slow<br />User Experience will get better with enhancements<br />Portal Code can be reused<br />Extensions are possible and easy to implement<br />More will come out of discussion, comments are welcome<br />
  149. 149. 94<br />Conclusion<br />Webkit is the next Virtual Machine. <br />Maybe Going where Java could not go<br />HTML 5, CSS 3 and Javascript is future,but not ready just yet<br />HTML 5, CSS3 and Javascript to lessen the fragmentation<br />HTML 5 will compete with native components<br />
  150. 150. References<br />Phone Gap Documentation<br />Titanium Mobile Documentation<br />ShareFile Story<br />95<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×