Your SlideShare is downloading. ×
0
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
Cross platform-mobile-applications-final
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-final

3,963

Published on

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

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,963
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
120
Comments
0
Likes
2
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. 1<br />
  • 2. Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – <br />rohitsghatol@gmail.com<br />
  • 3. 3<br />Introduction<br />Rohit Ghatol<br /><ul><li>Project Manager @ Synerzip
  • 4. Associate Architect @ QuickOffice Inc
  • 5. GTUG Manager & Tech Next Founder
  • 6. Certified Scrum Master
  • 7. Corporate Trainer (Agile and Technical)
  • 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. 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. 6<br />Understanding Mobile Apps<br />
  • 11. 7<br />Reaching Mobile Users<br />
  • 12. 8<br />1. Mobile Features<br />Complete Feature Set<br />Mostly Feature Sub Set<br />
  • 13. 9<br />2. Tablet Features<br />Complete Feature Set<br />Almost Complete<br />Feature Set<br />
  • 14. 10<br />3. User Interaction<br />Touch based<br />Accelerometer<br />Traditional <br />Compass<br />
  • 15. 11<br />e.gLayar Application<br />
  • 16. 12<br />4. Location aware<br />Can be Location Aware but approximate<br />Location Aware and highly accurate<br />
  • 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. 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. 15<br />6. Push Notifications<br />Push Notification<br />Notifying the User proactively<br />
  • 20. 16<br />Challenges in building Mobile Applications<br />
  • 21. 17<br />1. OS Fragmentation<br />Windows 7<br />Fragmentation<br />
  • 22. 18<br />2. Multiple Teams/Product<br />Windows 7<br />Multiple Teams/Products<br />
  • 23. 19<br />3. Uniform User Experience<br />Windows 7<br />Uniform User Experience<br />
  • 24. 20<br />4. Feature Fragmentation<br />Feature Fragmentation<br />
  • 25. 21<br />Approaches to Mobile Development <br />
  • 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. 23<br />Native Mobile Apps<br />When To<br /><ul><li>High Performance Apps
  • 28. Heavy on OS and Device Features
  • 29. Complex N/W comm.
  • 30. Canvas based Apps
  • 31. Only Few Platforms</li></ul>When Not To<br /><ul><li>Performance is not the main criteria
  • 32. More or less Replicates Web Apps with few device feature
  • 33. Standard Restful
  • 34. Widget based apps
  • 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. More or less Replicates Web Apps with few device feature
  • 37. Standard Restful
  • 38. Widget based apps
  • 39. Many Platforms</li></ul>When Not To<br /><ul><li>High Performance Apps
  • 40. Heavy on OS and Device Features
  • 41. Complex N/W comm.
  • 42. Canvas based Apps
  • 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. Saving Cost is critical</li></ul>When Not To<br />
  • 45. 26<br />Hybrid Mobile Apps<br />When To<br />Why To<br /><ul><li>Fairly Simple UI
  • 46. Complex Backend
  • 47. Quite few platforms
  • 48. E.gShareFile
  • 49. Recommended way - PhoneGap Plugin
  • 50. Some parts of app are common
  • 51. Rest parts are different
  • 52. Use Cross Platform to develop common part
  • 53. Use Native to develop the weight lifting parts</li></li></ul><li>27<br />Cross Platform Mobile App Development<br />
  • 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. 29<br />Common Platform Approach<br />
  • 56. 30<br />Modern Browsers<br />All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs<br />
  • 57. 31<br />WebViews<br />All of these smart phones supports using these modern browsers as embedded views (aka WebViews)<br />
  • 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. 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. 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. 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. 36<br />Development<br />HTML/CSS Application uses Common API exposing device features<br />
  • 63. 37<br />Development<br />Sample code<br />
  • 64. 38<br />Mapping to Native<br />
  • 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. 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. 41<br />Development<br />UI API Set<br />
  • 68. 42<br />Development<br />UI API Set<br />
  • 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. 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. 45<br />Compare Screens (IPhone)<br />PhoneGap<br />Titanium Mobile<br />
  • 72. 46<br />Compare Screens (Android)<br />PhoneGap<br />Titanium Mobile<br />
  • 73. 47<br />Open Source<br />BSD License<br />MIT License<br />
  • 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. 50<br />PhoneGapPrerequistes<br /><ul><li>Need to be acquainted with Android, IOS, BlackBerry, WebOS
  • 76. Need to be expert at HTML/Javascript or framework like GWT
  • 77. Need to be acquainted with JavaScript libraries like
  • 78. Jquery
  • 79. script.aculo.us
  • 80. Prototype
  • 81. Etc
  • 82. Or Ajax framework like GWT
  • 83. Need different project for each platform, inject PhoneGap code in each project
  • 84. PhoneGap has no IDE, use Eclipse for Android and Xcode for IPhone</li></li></ul><li>51<br />Demo Screens - IPhone<br />
  • 85. 52<br />Demo Screens - Android<br />
  • 86. 53<br />PhoneGap Features<br />
  • 87. 54<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>55<br />Code Walkthrough - PhoneGap<br />
  • 98. Getting Started PhoneGap<br />56<br />Step 1: Create Android Eclipse Project<br />
  • 99. Getting Started PhoneGap<br />57<br />Step 2: Add Phone Gap Java Library<br />
  • 100. Getting Started PhoneGap<br />58<br />Step 3: Add Phone Gap Javascript and with other web app files<br />
  • 101. Getting Started PhoneGap<br />59<br />Step 4: Modify Main Activity class<br />
  • 102. Getting Started PhoneGap<br />60<br />Step 5: Extend DriodGap instead of Activity<br />
  • 103. Getting Started PhoneGap<br />61<br />Step 6: Write Javascript Code to create UI &use PhoneGap API<br />
  • 104. 62<br />
  • 105. 63<br />PhoneGap on XCode<br />
  • 106. 64<br />
  • 107. 65<br />jQueryMobile UI Development<br />
  • 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. jQuery Declarative UI<br />67<br />
  • 110. 68<br />Extending PhoneGap to open more of underlying system<br />
  • 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. 70<br />Mobile<br />
  • 113. 71<br />Apache License<br /><ul><li>Appcelerator Titanium SDK
  • 114. Titanium Module SDK
  • 115. Appcelerator Titanium SDK
  • 116. Titanium Module SDK</li></ul>Paid Modules<br /><ul><li>Commerce Modules
  • 117. Communication Modules
  • 118. Analytics Module
  • 119. Media Modules</li></li></ul><li>72<br />Titanium Mobile<br />Currently supports only Android and IPhone platforms. <br />
  • 120. 73<br />Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />Android<br />
  • 121. 74<br />Titanium Architecture<br />
  • 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. 76<br />Demo Screens - IPhone<br />
  • 124. 77<br />Demo Screens - Android<br />
  • 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. 79<br />Code Walkthrough – Titanium Mobile<br />
  • 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.
  • 129.
  • 130. 83<br />Directory Structure<br />
  • 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. 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. 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. 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. 88<br />Native Mobile App Development<br />
  • 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. 90<br />Hybrid Mobile App Development<br />
  • 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. 92<br />ShareFile Story<br />as<br />
  • 140. 93<br />Comparison<br />Titanium Mobile<br /><ul><li>Android and IPhone
  • 141. Gives out native app
  • 142. API is more proprietary
  • 143. UI has Limitations
  • 144. UI will be fast
  • 145. Much better User Experience
  • 146. Portal Code can not be reused
  • 147. Extensions are possible
  • 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. 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. References<br />Phone Gap Documentation<br />Titanium Mobile Documentation<br />ShareFile Story<br />95<br />

×