Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cross Platform Mobile Applications By Rohit Ghatol Contact me –

Similar presentations


Presentation on theme: "Cross Platform Mobile Applications By Rohit Ghatol Contact me –"— Presentation transcript:

1 http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com

2 http://meetup.com/technext 2 Introduction Rohit Ghatol Project Manager @ SynerzipSynerzip Associate Architect @ QuickOffice IncQuickOffice Inc GTUG Manager & Tech Next Founder GTUG Manager Certified Scrum Master Corporate Trainer (Agile and Technical) Was part of OpenSocial at Google

3 http://meetup.com/technext 3 Topics Overview Understanding Mobile Apps Cross Platform Mobile App Development Pure HTML/JavaScript – PhoneGap Interpreted JavaScript – Titanium Mobile Native Mobile App Development Hybrid Mobile App Development Comparison between PhoneGap Vs Titanium Conclusion Q & A

4 http://meetup.com/technext 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 PhoneGap Vs Titanium.

5 http://meetup.com/technext 5 Understanding Mobile Apps

6 http://meetup.com/technext 6 Reaching Mobile Users

7 http://meetup.com/technext 7 1. Mobile Features Complete Feature SetMostly Feature Sub Set

8 http://meetup.com/technext 8 2. Tablet Features Complete Feature SetAlmost Complete Feature Set

9 http://meetup.com/technext 9 3. User Interaction Touch based Traditional Accelerometer Compass

10 http://meetup.com/technext 10 e.g Layar Application

11 http://meetup.com/technext 11 4. Location aware Location Aware and highly accurate Can be Location Aware but approximate

12 http://meetup.com/technext 12 5. Sensors Handy Camera and Voice Recording Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger

13 http://meetup.com/technext 13 e.g Shopping Applications Scan a products barcode to know if it has the lowest price. If not, then navigate to a store which has the lowest price

14 http://meetup.com/technext 14 6. Push Notifications Push Notification Notifying the User proactively

15 http://meetup.com/technext 15 Challenges in building Mobile Applications

16 http://meetup.com/technext 16 1. OS Fragmentation Windows 7 Fragmentation

17 http://meetup.com/technext 17 2. Multiple Teams/Product Windows 7 Multiple Teams/Products

18 http://meetup.com/technext 18 3. Uniform User Experience Windows 7 Uniform User Experience

19 http://meetup.com/technext 19 4. Feature Fragmentation Feature Fragmentation

20 http://meetup.com/technext 20 Approaches to Mobile Development

21 http://meetup.com/technext 21 Types of Mobile App Dev 1.Native Mobile Apps 2.Cross Platform Mobile Apps 3.Hybrid partly Native partly Cross Platform

22 http://meetup.com/technext 22 Native Mobile Apps When To High Performance Apps Heavy on OS and Device Features Complex N/W comm. Canvas based Apps Only Few Platforms When Not To Performance is not the main criteria More or less Replicates Web Apps with few device feature Standard Restful Widget based apps Many Platforms

23 http://meetup.com/technext 23 Cross Platform Mobile Apps When To Performance is not the main criteria More or less Replicates Web Apps with few device feature Standard Restful Widget based apps Many Platforms When Not To High Performance Apps Heavy on OS and Device Features Complex N/W comm. Canvas based Apps Only Few Platforms

24 http://meetup.com/technext 24 Cross Platform Mobile Apps When To Time to market is critical Saving Cost is critical When Not To

25 http://meetup.com/technext 25 Hybrid Mobile Apps When To Fairly Simple UI Complex Backend Quite few platforms E.g ShareFile Recommended way - PhoneGap PluginPhoneGap Plugin Why To 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

26 http://meetup.com/technext 26 Cross Platform Mobile App Development

27 http://meetup.com/technext 27 Cross Platform Strategies PhoneGap Titanium Mobile Cross Platform Source Code WEB APPLICATION JavaScript – Java Bridge OS – Android / iPhone UI Platform APIs Mapping to Native Bridge - JavaScript – Java – Objective C OS – Android / iPhone Common PlatformMapping to Native Common Source

28 http://meetup.com/technext 28 Common Platform Approach

29 http://meetup.com/technext 29 Modern Browsers Mobile OSBrowser AndroidWebkit based iPhoneWebkit based BlackBerry 6.0 +Webkit based Window Phone 7IE 7 based * WebOSWebkit based NokiaWebkit based All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs

30 http://meetup.com/technext 30 WebViews All of these smart phones supports using these modern browsers as embedded views (aka WebViews)

31 http://meetup.com/technext 31 JavaScript to native and back Native Code (Java/C++/ObjC) Native Code (Java/C++/ObjC) JSON packets All these browser engine (most common being webkit) support Javascript to talk to native code and back HTML/Javascript

32 http://meetup.com/technext 32 Hybrid Applications HTML/Javascript Native Code (Java/C++/ObjC) Native Code (Java/C++/ObjC) GPS Location HTML/Javascript application loads Google Maps and talks to the native code to gain access to GPS location

33 http://meetup.com/technext 33 Over all Architecture HTML5/CSS3 Application UI Framework e.g jQueryMobile PhoneGap API Phone Gap Bridge Camera GPS SQLite File System Accelerom eter Compass etc

34 http://meetup.com/technext 34 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

35 http://meetup.com/technext 35 Development HTML/CSS Application uses Common API exposing device features

36 http://meetup.com/technext 36 Development Sample code

37 http://meetup.com/technext 37 Mapping to Native

38 http://meetup.com/technext 38 Over all Architecture Javascript Based Application Titanium UI API Titanium Phone API Titanium Framework WindowDialog SQLite File System Accelerom eter Compass etc

39 http://meetup.com/technext 39 Development Two API Sets One for UI * (Specific to Titanium Mobile) Create Windows Create Dialogs ……. One for Phone Features Same as PhoneGap Access Camera Access GPS ……

40 http://meetup.com/technext 40 Development UI API Set

41 http://meetup.com/technext 41 Development UI API Set

42 http://meetup.com/technext 42 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?

43 http://meetup.com/technext 43 Mobile App Dev Frameworks Common Platform PhoneGap Mapping to Native Titanium Mobile * Rhodes Mobile is another promising framework, but out of scope for todays discussion

44 http://meetup.com/technext 44 Compare Screens (IPhone) PhoneGapTitanium Mobile

45 http://meetup.com/technext 45 Compare Screens (Android) PhoneGapTitanium Mobile

46 http://meetup.com/technext 46 Open Source MIT License BSD License

47 http://meetup.com/technext 47 PhoneGap Only platform to support 6 Platforms

48 http://meetup.com/technext 48 PhoneGap Standards based and extended

49 http://meetup.com/technext 49 PhoneGap Prerequistes 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

50 http://meetup.com/technext 50 Demo Screens - IPhone

51 http://meetup.com/technext 51 Demo Screens - Android

52 http://meetup.com/technext 52 PhoneGap Features

53 http://meetup.com/technext 53 Challenges and Advantages 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 Forms Lists

54 http://meetup.com/technext 54 Code Walkthrough - PhoneGap

55 http://meetup.com/technext Getting Started PhoneGap 55 Step 1: Create Android Eclipse Project

56 http://meetup.com/technext Getting Started PhoneGap 56 Step 2: Add Phone Gap Java Library

57 http://meetup.com/technext Getting Started PhoneGap 57 Step 3: Add Phone Gap Javascript and with other web app files

58 http://meetup.com/technext Getting Started PhoneGap 58 Step 4: Modify Main Activity class

59 http://meetup.com/technext Getting Started PhoneGap 59 Step 5: Extend DriodGap instead of Activity

60 http://meetup.com/technext Getting Started PhoneGap 60 Step 6: Write Javascript Code to create UI &use PhoneGap API

61 http://meetup.com/technext 61

62 http://meetup.com/technext 62 PhoneGap on XCode

63 http://meetup.com/technext 63

64 http://meetup.com/technext 64 jQueryMobile UI Development

65 http://meetup.com/technext jQuery Declarative UI AlternativeTo Home Find Alternatives To Your favourite Softwares Search Alternatives Recent Alternatives 65

66 http://meetup.com/technext jQuery Declarative UI 66

67 http://meetup.com/technext 67 Extending PhoneGap to open more of underlying system

68 http://meetup.com/technext 68 Phone Gap Extension References - http://wiki.phonegap.com/w/page/36752779/PhoneGap- Plugins http://wiki.phonegap.com/w/page/36752779/PhoneGap- Plugins Author – Rohit Ghatol Javascript Code Android Code

69 http://meetup.com/technext 69 Mobile

70 http://meetup.com/technext 70 Appcelerator Titanium SDK Titanium Module SDK Appcelerator Titanium SDK Titanium Module SDK Paid Modules Commerce Modules Communication Modules Analytics Module Media Modules Apache License

71 http://meetup.com/technext 71 Titanium Mobile Currently supports only Android and IPhone platforms.

72 http://meetup.com/technext 72 Titanium Mobile Titanium JavaScript Wekit JavascriptCore Mozilla Rhino Interpreted By IPhone Android

73 http://meetup.com/technext 73 Titanium Architecture

74 http://meetup.com/technext 74 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)

75 http://meetup.com/technext 75 Demo Screens - IPhone

76 http://meetup.com/technext 76 Demo Screens - Android

77 http://meetup.com/technext 77 Challenges and Advantages Being Native is the biggest strength Limited cross platform ui api is a weakness Platform specific api leads to fragmentation within code

78 http://meetup.com/technext 78 Code Walkthrough – Titanium Mobile

79 http://meetup.com/technext Titanium Developer IDE for Titanium Mobile and Desktop Allows Creating Titanium Project Allows building Android and IPhone Applications Does not provide any Source code Editor 79

80 http://meetup.com/technext

81

82 82 Directory Structure

83 http://meetup.com/technext 83 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();

84 http://meetup.com/technext 84 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);

85 http://meetup.com/technext 85 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); };

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

87 http://meetup.com/technext 87 Native Mobile App Development

88 http://meetup.com/technext 88 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

89 http://meetup.com/technext 89 Hybrid Mobile App Development

90 http://meetup.com/technext 90 Hybrid App Development Have Web Developers for Common UI Have native code experts for heavy weight lifting Use frameworks like PhoneGap Plugin 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

91 http://meetup.com/technext 91 ShareFile Story as

92 http://meetup.com/technext 92 Comparison Titanium Mobile Android and IPhone Gives out native app API is more proprietary UI has Limitations UI will be fast Much better User Experience Portal Code can not be reused Extensions are possible Limited support for HTML/Javascript PhoneGap 6 Platforms 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

93 http://meetup.com/technext 93 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

94 http://meetup.com/technext References Phone Gap Documentation Titanium Mobile Documentation ShareFile Story 94


Download ppt "Cross Platform Mobile Applications By Rohit Ghatol Contact me –"

Similar presentations


Ads by Google