Your SlideShare is downloading. ×
0
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Cross platform-mobile-applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cross platform-mobile-applications

1,531

Published on

Smart Phone Application Using Common Platfrom...

Smart Phone Application Using Common Platfrom...

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

No Downloads
Views
Total Views
1,531
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
64
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohit.ghatol@synerzip.com<br />rohitsghatol@gmail.com<br />
  • 2. 2<br />Introduction<br />Rohit Ghatol<br /><ul><li>Project Manager @ Synerzip
  • 3. Associate Architect @ QuickOffice Inc
  • 4. GTUG Manager
  • 5. Certified Scrum Master
  • 6. Corporate Trainer (Agile and Technical)
  • 7. Was part of OpenSocial at Google</li></li></ul><li>3<br />Topics<br />Overview<br />Understanding Mobile Apps<br />Cross Platform Mobile App Development<br />Pure HTML/JavaScript – PhoneGap<br />Interpreted JavaScript – Titanium<br />Native Mobile App Development<br />Hybrid Mobile App Development<br />Comparison between PhoneGapVs Titanium<br />Conclusion<br />Q &amp; A<br />
  • 8. 4<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 />
  • 9. 5<br />Understanding Mobile Apps<br />
  • 10. 6<br />Reaching Mobile Users<br />
  • 11. 7<br />1. Mobile Features<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
  • 12. 8<br />2. Tablet Features<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
  • 13. 9<br />3. User Interaction<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
  • 14. 10<br />e.gLayar Application<br />
  • 15. 11<br />4. Location aware<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
  • 16. 12<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 />
  • 17. 13<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 />
  • 18. 14<br />6. Push Notifications<br />Push Notification<br />Notifying the User proactively<br />
  • 19. 15<br />Challenges in building Mobile Applications<br />
  • 20. 16<br />1. OS Fragmentation<br />Windows 7<br />Fragmentation<br />
  • 21. 17<br />2. Multiple Teams/Product<br />Windows 7<br />Multiple Teams/Products<br />
  • 22. 18<br />3. Uniform User Experience<br />Windows 7<br />Uniform User Experience<br />
  • 23. 19<br />4. Feature Fragmentation<br />Feature Fragmentation<br />
  • 24. 20<br />Types of Mobile App Dev<br />Native Mobile Apps<br />Cross Platform Mobile Apps<br />Hybrid partly Native partly Cross Platform<br />
  • 25. 21<br />Native Mobile Apps<br />When To<br /><ul><li>High Performance Apps
  • 26. Heavy on OS and Device Features
  • 27. Complex N/W comm.
  • 28. Canvas based Apps
  • 29. Only Few Platforms</li></ul>When Not To<br /><ul><li>Performance is not the main criteria
  • 30. More or less Replicates Web Apps with few device feature
  • 31. Standard Restful
  • 32. Widget based apps
  • 33. Many Platforms</li></li></ul><li>22<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Performance is not the main criteria
  • 34. More or less Replicates Web Apps with few device feature
  • 35. Standard Restful
  • 36. Widget based apps
  • 37. Many Platforms</li></ul>When Not To<br /><ul><li>High Performance Apps
  • 38. Heavy on OS and Device Features
  • 39. Complex N/W comm.
  • 40. Canvas based Apps
  • 41. Only Few Platforms</li></li></ul><li>23<br />Cross Platform Mobile Apps<br />When To<br /><ul><li>Time to market is critical
  • 42. Saving Cost is critical</li></ul>When Not To<br />
  • 43. 24<br />Hybrid Mobile Apps<br />When To<br />Why To<br /><ul><li>Fairly Simple UI
  • 44. Complex Backend
  • 45. Quite few platforms
  • 46. E.gShareFile
  • 47. Recommended way - PhoneGap Plugin
  • 48. Some parts of app are common
  • 49. Rest parts are different
  • 50. Use Cross Platform to develop common part
  • 51. Use Native to develop the weight lifting parts</li></li></ul><li>25<br />Cross Platform Mobile App Development<br />
  • 52. 26<br />Cross Platform Strategies<br />Cross Platform <br />Source Code<br />Common Platform<br />e.gWebKit<br />Mapping to Native<br />Titanium Mobile<br />PhoneGap <br />
  • 53. 27<br />Common Platform Approach<br />
  • 54. 28<br />Modern Browsers<br />All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs<br />
  • 55. 29<br />WebViews<br />All of these smart phones supports using these modern browsers as embedded views (aka WebViews)<br />
  • 56. 30<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 />
  • 57. 31<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 />
  • 58. 32<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 />
  • 59. 33<br />Development<br />HTML/CSS Application uses Common API exposing device features<br />
  • 60. 34<br />Development<br />Sample code<br />
  • 61. 35<br />Mapping to Native<br />
  • 62. 36<br />Concept<br /><ul><li>Common API set is provided by framework
  • 63. Application is written using this common api set
  • 64. HTML/CSS may be supported or may not be supported. Titanium prefers native UI instead of HTML/CSS UI, Rhodes prefers HTML/CSS UI
  • 65. Phone Features are access liked common api set (this is similar to that in PhoneGap)</li></li></ul><li>37<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 />
  • 66. 38<br />Development<br />UI API Set<br />
  • 67. 39<br />Development<br />UI API Set<br />
  • 68. 40<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 />
  • 69. 41<br />Mobile App Dev Frameworks<br />Common Platform<br />PhoneGap<br />Mapping to Native<br />Titanium Mobile<br />Rhodes Mobile<br />
  • 70. 42<br />Compare Screens (IPhone)<br />PhoneGap<br />Titanium Mobile<br />
  • 71. 43<br />Compare Screens (Android)<br />PhoneGap<br />Titanium Mobile<br />
  • 72. 44<br />Open Source<br />BSD License<br />MIT License<br />
  • 73. 45<br />PhoneGap<br /><ul><li>Only platform to support 6 Platforms</li></li></ul><li>46<br />PhoneGap<br />Standards based and extended<br />
  • 74. 47<br />
  • 75. 48<br />PhoneGap Features<br />
  • 76. 49<br />PhoneGapPrerequistes<br /><ul><li>Need to be acquainted with Android, IOS, BlackBerry, WebOS
  • 77. Need to be expert at HTML/Javascript or framework like GWT
  • 78. Need to be acquainted with JavaScript libraries like
  • 79. Jquery
  • 80. script.aculo.us
  • 81. Prototype
  • 82. Etc
  • 83. Or Ajax framework like GWT
  • 84. Need different project for each platform, inject PhoneGap code in each project
  • 85. PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone</li></li></ul><li>50<br />Demo Screens - IPhone<br />
  • 86. 51<br />Demo Screens - Android<br />
  • 87. 52<br />Challenges and Advantages<br /><ul><li>HTML based UI is the biggest Challenge as well as Advantage
  • 88. Same UI can be used for Web and Mobile and even Desktop
  • 89. Promising Framework
  • 90. GWT – Used by Spring Roo for Enterprise Application Development
  • 91. jQueryMobile – Based on legendary Jquery and now features
  • 92. Multipage Template
  • 93. Page Slide Transitions
  • 94. Dialogs
  • 95. Toolbars
  • 96. Forms
  • 97. Lists</li></li></ul><li>53<br />
  • 98. 54<br />Apache License<br /><ul><li>Appcelerator Titanium SDK
  • 99. Titanium Module SDK
  • 100. Appcelerator Titanium SDK
  • 101. Titanium Module SDK</li></ul>Paid Modules<br /><ul><li>Commerce Modules
  • 102. Communication Modules
  • 103. Analytics Module
  • 104. Media Modules</li></li></ul><li>55<br />Titanium Mobile<br />
  • 105. 56<br />Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />Android<br />
  • 106. 57<br />Titanium Architecture<br />
  • 107. 58<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 />
  • 108. 59<br />Demo Screens - IPhone<br />
  • 109. 60<br />Demo Screens - Android<br />
  • 110. 61<br />Challenges and Advantages<br />Being Native is the biggest strength<br />Limited cross platform api is a weakness<br />Platform specific api leads to fragmentation within code<br />
  • 111. 62<br />Native Mobile App Development<br />
  • 112. 63<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 />
  • 113. 64<br />Hybrid Mobile App Development<br />
  • 114. 65<br />Hybrid App Development<br />Have Web Developers for Common UI<br />Have native code experts for heavy weight lifting<br />Use frameworks likePhoneGapPlugin 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 />
  • 115. 66<br />ShareFile Story<br />as<br />
  • 116. 67<br />Comparison<br />Titanium Mobile<br /><ul><li>Gives out native app
  • 117. API is more proprietary
  • 118. UI has Limitations
  • 119. UI will be fast
  • 120. Much better User Experience
  • 121. Portal Code can not be reused
  • 122. Extensions are possible
  • 123. Limited support for HTML/Javascript</li></ul>PhoneGap<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 />
  • 124. 68<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 />
  • 125. 69<br />Code Walkthrough - PhoneGap<br />
  • 126. 70<br />Digging Deeper (Android)<br />Instead of extending a Activity, we extend DroidGap<br />DroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSS<br />This WebView has hooks to<br />Call Java from JavaScript<br />And Vice a Versa<br />More like building Web 2.0 Applications <br />But also calling some java scripts which allow accessing native mobile resources e.g. Geo, Database, File System, etc<br />
  • 127. 71<br />Digging Deeper <br />
  • 128. 72<br />Bootstrapping phonegap<br />&lt;html&gt;<br />     &lt;head&gt;<br />          &lt;title&gt;Phone Gap&lt;/title&gt;<br />          &lt;script type=&quot;text/javascript&quot; src=&quot;scripts/phonegap.js&quot;&gt;&lt;/script&gt;<br />       &lt;script&gt;…&lt;/script&gt;<br />     &lt;/head&gt;<br />     &lt;body onload=”init();&quot;&gt;<br />          &lt;img id=&quot;map&quot; /&gt;<br />     &lt;/body&gt;<br />&lt;/html&gt;<br />
  • 129. 73<br />Bootstrapping phonegap<br />function init() {<br />document.addEventListener(&apos;deviceready’,loadMap,false);<br />}<br />
  • 130. 74<br />Bootstrapping phonegap<br />function loadMap() {<br /> var successCallback= function(position) { <br /> var coords = position.coords;<br /> var url = &quot;http://maps.google.com/maps/api/staticmap?center=&quot; <br /> + coords.latitude + &quot;,&quot; + coords.longitude ;<br /> document.getElementById(&apos;map&apos;).setAttribute(&apos;src&apos;,url);<br /> };<br /> var failureCallback = function(e) {<br /> alert(&apos;Can&apos;t retrieve position.nError: &apos; + e);<br /> };<br /> //Fetch Coordinate Asynchronously<br /> navigator.geolocation.getCurrentPosition(successCallback, <br /> failureCallback );<br />} <br />
  • 131. 75<br />PhoneGap Walkthrough<br />Lets see a Live Demo<br />
  • 132. 76<br />Phone Gap Extension<br />Adding new apis to PhoneGap is Simple<br />Say Dropbox like Sync is exposed via javascript api<br />Each Platform to have Dropbox like Sync native code called from javascript<br />References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins<br />Author – Rohit Ghatol<br />
  • 133. 77<br />Code Walkthrough – Titanium Mobile<br />
  • 134. 78<br />Directory Structure<br />
  • 135. 79<br />App.js (entry point)<br />var tabGroup = Titanium.UI.createTabGroup();<br />var win1 = Titanium.UI.createWindow({<br /> title: &apos;Search&apos;,<br /> url: &apos;search.js&apos;<br />});<br />var tab1 = Titanium.UI.createTab({ <br /> window:win1,<br /> title:&apos;Search Alternatives’<br />});<br />tabGroup.addTab(tab1); <br />tabGroup.addTab(tab2); <br />tabGroup.open();<br />
  • 136. 80<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 />var tableview = Titanium.UI.createTableView({<br /> top:50<br />});<br />window.add(search);<br />window.add(tableview);<br />
  • 137. 81<br />search.js (Ajax Call)<br />var xhr = Titanium.Network.createHTTPClient();<br />xhr.onload = function()<br />{<br /> actInd.hide();<br /> var doc = xhr.responseText;<br />var json = eval(&apos;(&apos;+doc+&apos;)&apos;);<br /> var data = [];<br /> //…. Load data in data <br /> // provide the data to table to populate the table <br /> tableview.setData(data);<br />};<br />
  • 138. 82<br />search.js (Event handling)<br />//send ajax request to fetch altrnatives for searchText<br />function searchAlternatives(searchText){<br /> xhr.open(&apos;GET&apos;,&apos;http://api.alternativeto.net/software/&apos;+searchText+&apos;/?count=15&apos;);<br />xhr.send();<br />}<br />//start search when user hits enter on search box<br />search.addEventListener(&apos;return&apos;, function(e)<br />{<br /> actInd.show();<br /> searchAlternatives(e.value);<br />});<br />
  • 139. 83<br />Titanium Walkthrough<br />Lets see a Live Demo<br />
  • 140. 84<br />Questions?<br />www.synerzip.com <br />Hemant Elhence, hemant@synerzip.com<br />469.322.0349<br />Agile Software Product Development Partner<br />
  • 141. 85<br />Synerzip in a Nut-shell<br />Software product development partner for small/mid-sized technology companies<br />Exclusive focus on small/mid-sized technology companies<br />By definition, all Synerzip work is the IP of its respective clients<br />Deep experience in full SDLC – design, dev, QA/testing, deployment<br />Technology and industry domain agnostic<br />Dedicated team of high caliber software professionals <br />Seamlessly extends client’s local team, offering full transparency<br />NOT just “staff augmentation”, but provide full mgmt support<br />Actually reduces risk of development/delivery<br />Experienced team - uses appropriate level of engineering discipline<br />Practices Agile development – responsive, yet disciplined<br />Reduces cost – dual-shore team, 50% cost advantage<br />Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option<br />
  • 142. 86<br />Our Clients<br />
  • 143. 87<br />Questions?<br />www.synerzip.com <br />Hemant Elhence, hemant@synerzip.com<br />469.322.0349<br />Agile Software Product Development Partner<br />

×