Smart Phone Application Using Common Platfrom...

1. Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohit.ghatol@synerzip.com rohitsghatol@gmail.com

3. Associate Architect @ QuickOffice Inc

4. GTUG Manager

5. Certified Scrum Master

6. Corporate Trainer (Agile and Technical)

8. 4 Overview The process of developing Applications for various mobile platform using common source code with little or no change to the common source. This presentation focuses on Comparing two frameworks each taking a different approach to solve the above problem. We will Compare PhoneGapVsTitanium .

9. 5 Understanding Mobile Apps

10. 6 Reaching Mobile Users

11. 7 1. Mobile Features Complete Feature Set Mostly Feature Sub Set

12. 8 2. Tablet Features Complete Feature Set Almost Complete Feature Set

13. 9 3. User Interaction Touch based Accelerometer Traditional Compass

14. 10 e.gLayar Application

15. 11 4. Location aware Can be Location Aware but approximate Location Aware and highly accurate

16. 12 5. Sensors Handy Camera and Voice Recording Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger

17. 13 e.g Shopping Applications Scan a product’s barcode to know if it has the lowest price. If not, then navigate to a store which has the lowest price

18. 14 6. Push Notifications Push Notification Notifying the User proactively

19. 15 Challenges in building Mobile Applications

20. 16 1. OS Fragmentation Windows 7 Fragmentation

21. 17 2. Multiple Teams/Product Windows 7 Multiple Teams/Products

22. 18 3. Uniform User Experience Windows 7 Uniform User Experience

23. 19 4. Feature Fragmentation Feature Fragmentation

24. 20 Types of Mobile App Dev Native Mobile Apps Cross Platform Mobile Apps Hybrid partly Native partly Cross Platform

26. Heavy on OS and Device Features

27. Complex N/W comm.

28. Canvas based Apps

30. More or less Replicates Web Apps with few device feature

31. Standard Restful

32. Widget based apps

34. More or less Replicates Web Apps with few device feature

35. Standard Restful

36. Widget based apps

38. Heavy on OS and Device Features

39. Complex N/W comm.

40. Canvas based Apps

42. Saving Cost is criticalWhen Not To

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

52. 26 Cross Platform Strategies Cross Platform Source Code Common Platform e.gWebKit Mapping to Native Titanium Mobile PhoneGap

53. 27 Common Platform Approach

54. 28 Modern Browsers All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs

55. 29 WebViews All of these smart phones supports using these modern browsers as embedded views (aka WebViews)

56. 30 JavaScript to native and back All these browser engine (most common being webkit) support Javascript to talk to native code and back Native Code (Java/C++/ObjC) HTML/Javascript JSON packets

57. 31 Hybrid Applications HTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS location Native Code (Java/C++/ObjC) HTML/Javascript GPS Location

58. 32 Possibilities Limitless Possibilities Expose Camera, Accelerometer, GPS, any of the phones sensors to javascript Instead of just building Browsed Based applications augment with more phone features

59. 33 Development HTML/CSS Application uses Common API exposing device features

60. 34 Development Sample code

61. 35 Mapping to Native

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

66. 38 Development UI API Set

67. 39 Development UI API Set

68. 40 Issues Common API set across platforms is always minimum E.g IPhone as a widget, which Android not have Fragmentation of the API itself. What is platform specific and not part of Common API comes in Platform specific api?

69. 41 Mobile App Dev Frameworks Common Platform PhoneGap Mapping to Native Titanium Mobile Rhodes Mobile

70. 42 Compare Screens (IPhone) PhoneGap Titanium Mobile

71. 43 Compare Screens (Android) PhoneGap Titanium Mobile

72. 44 Open Source BSD License MIT License

74. 47

75. 48 PhoneGap Features

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

86. 51 Demo Screens - Android

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

99. Titanium Module SDK

100. Appcelerator Titanium SDK

102. Communication Modules

103. Analytics Module

105. 56 Titanium Mobile Titanium JavaScript Interpreted By WekitJavascriptCore Mozilla Rhino IPhone Android

106. 57 Titanium Architecture

107. 58 Titanium Prerequistes Need to be acquainted with Android, IOS programming Need to know JavaScript 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)

108. 59 Demo Screens - IPhone

109. 60 Demo Screens - Android

110. 61 Challenges and Advantages Being Native is the biggest strength Limited cross platform api is a weakness Platform specific api leads to fragmentation within code

111. 62 Native Mobile App Development

112. 63 Native App Development Basically you need to hire experts who can Build Android, IOS, BB, BlackBerry and Windows mobile apps Devs should have experience to deploy apps on market Devs should have experience on various devices QA should know how to automate things on devices/emulator Plan for risks if this is your companies first Mobile App deployment

113. 64 Hybrid Mobile App Development

114. 65 Hybrid App Development Have Web Developers for Common UI Have native code experts for heavy weight lifting Use frameworks likePhoneGapPlugin Development framework to glue the above two pieces Measure at every milestone to keep track of effect of changes Use Automation to regress every layer

115. 66 ShareFile Story as

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/JavascriptPhoneGap Gives out a mobile web app API is less proprietary UI possibilities are unlimited UI could be slow User Experience will get better with enhancements Portal Code can be reused Extensions are possible and easy to implement More will come out of discussion, comments are welcome

124. 68 Conclusion Webkit is the next Virtual Machine. Maybe Going where Java could not go HTML 5, CSS 3 and Javascript is future,but not ready just yet HTML 5, CSS3 and Javascript to lessen the fragmentation HTML 5 will compete with native components

125. 69 Code Walkthrough - PhoneGap

126. 70 Digging Deeper (Android) Instead of extending a Activity, we extend DroidGap DroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSS This WebView has hooks to Call Java from JavaScript And Vice a Versa More like building Web 2.0 Applications But also calling some java scripts which allow accessing native mobile resources e.g. Geo, Database, File System, etc

127. 71 Digging Deeper

128. 72 Bootstrapping phonegap <html> <head> <title>Phone Gap</title> <script type="text/javascript" src="scripts/phonegap.js"></script> <script>…</script> </head> <body onload=”init();"> <img id="map" /> </body> </html>

129. 73 Bootstrapping phonegap function init() { document.addEventListener('deviceready’,loadMap,false); }

130. 74 Bootstrapping phonegap function loadMap() { var successCallback= function(position) { var coords = position.coords; var url = "http://maps.google.com/maps/api/staticmap?center=" + coords.latitude + "," + coords.longitude ; document.getElementById('map').setAttribute('src',url); }; var failureCallback = function(e) { alert('Canapos;t retrieve position.Error: ' + e); }; //Fetch Coordinate Asynchronously navigator.geolocation.getCurrentPosition(successCallback, failureCallback ); }

131. 75 PhoneGap Walkthrough Lets see a Live Demo

132. 76 Phone Gap Extension Adding new apis to PhoneGap is Simple Say Dropbox like Sync is exposed via javascript api Each Platform to have Dropbox like Sync native code called from javascript References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins Author – Rohit Ghatol

133. 77 Code Walkthrough – Titanium Mobile

134. 78 Directory Structure

135. 79 App.js (entry point) var tabGroup = Titanium.UI.createTabGroup(); var win1 = Titanium.UI.createWindow({ title: 'Search', url: 'search.js' }); var tab1 = Titanium.UI.createTab({ window:win1, title:'Search Alternatives’ }); tabGroup.addTab(tab1); tabGroup.addTab(tab2); tabGroup.open();

136. 80 search.js (building UI) var window = Titanium.UI.currentWindow; var search = Titanium.UI.createSearchBar({ height:43, top:0 }); var actInd = Titanium.UI.createActivityIndicator({ height:50, }); var tableview = Titanium.UI.createTableView({ top:50 }); window.add(search); window.add(tableview);

137. 81 search.js (Ajax Call) var xhr = Titanium.Network.createHTTPClient(); xhr.onload = function() { actInd.hide(); var doc = xhr.responseText; var json = eval('('+doc+')'); var data = []; //…. Load data in data // provide the data to table to populate the table tableview.setData(data); };

138. 82 search.js (Event handling) //send ajax request to fetch altrnatives for searchText function searchAlternatives(searchText){ xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15'); xhr.send(); } //start search when user hits enter on search box search.addEventListener('return', function(e) { actInd.show(); searchAlternatives(e.value); });

139. 83 Titanium Walkthrough Lets see a Live Demo

140. 84 Questions? www.synerzip.com Hemant Elhence, hemant@synerzip.com 469.322.0349 Agile Software Product Development Partner

141. 85 Synerzip in a Nut-shell Software product development partner for small/mid-sized technology companies Exclusive focus on small/mid-sized technology companies By definition, all Synerzip work is the IP of its respective clients Deep experience in full SDLC – design, dev, QA/testing, deployment Technology and industry domain agnostic Dedicated team of high caliber software professionals Seamlessly extends client’s local team, offering full transparency NOT just “staff augmentation”, but provide full mgmt support Actually reduces risk of development/delivery Experienced team - uses appropriate level of engineering discipline Practices Agile development – responsive, yet disciplined Reduces cost – dual-shore team, 50% cost advantage Offers long term flexibility – allows (facilitates) taking offshore team captive – aka “BOT” option

142. 86 Our Clients

143. 87 Questions? www.synerzip.com Hemant Elhence, hemant@synerzip.com 469.322.0349 Agile Software Product Development Partner