Cross platform-mobile-applications-final

  • 3,783 views
Uploaded 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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,783
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
114
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
  • 2. Cross Platform Mobile Applications
    By Rohit Ghatol
    Contact me –
    rohitsghatol@gmail.com
  • 3. 3
    Introduction
    Rohit Ghatol
    • 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
  • 4
    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 PhoneGapVs Titanium
    Conclusion
    Q & A
  • 9. 5
    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 .
  • 10. 6
    Understanding Mobile Apps
  • 11. 7
    Reaching Mobile Users
  • 12. 8
    1. Mobile Features
    Complete Feature Set
    Mostly Feature Sub Set
  • 13. 9
    2. Tablet Features
    Complete Feature Set
    Almost Complete
    Feature Set
  • 14. 10
    3. User Interaction
    Touch based
    Accelerometer
    Traditional
    Compass
  • 15. 11
    e.gLayar Application
  • 16. 12
    4. Location aware
    Can be Location Aware but approximate
    Location Aware and highly accurate
  • 17. 13
    5. Sensors
    Handy Camera and Voice Recording
    Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger
  • 18. 14
    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
  • 19. 15
    6. Push Notifications
    Push Notification
    Notifying the User proactively
  • 20. 16
    Challenges in building Mobile Applications
  • 21. 17
    1. OS Fragmentation
    Windows 7
    Fragmentation
  • 22. 18
    2. Multiple Teams/Product
    Windows 7
    Multiple Teams/Products
  • 23. 19
    3. Uniform User Experience
    Windows 7
    Uniform User Experience
  • 24. 20
    4. Feature Fragmentation
    Feature Fragmentation
  • 25. 21
    Approaches to Mobile Development
  • 26. 22
    Types of Mobile App Dev
    Native Mobile Apps
    Cross Platform Mobile Apps
    Hybrid partly Native partly Cross Platform
  • 27. 23
    Native Mobile Apps
    When To
    • High Performance Apps
    • 28. Heavy on OS and Device Features
    • 29. Complex N/W comm.
    • 30. Canvas based Apps
    • 31. Only Few Platforms
    When Not To
    • 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
  • 24
    Cross Platform Mobile Apps
    When To
    • 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
    When Not To
    • High Performance Apps
    • 40. Heavy on OS and Device Features
    • 41. Complex N/W comm.
    • 42. Canvas based Apps
    • 43. Only Few Platforms
  • 25
    Cross Platform Mobile Apps
    When To
    • Time to market is critical
    • 44. Saving Cost is critical
    When Not To
  • 45. 26
    Hybrid Mobile Apps
    When To
    Why To
    • 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
  • 27
    Cross Platform Mobile App Development
  • 54. 28
    Cross Platform Strategies
    WEB APPLICATION
    Bridge - JavaScript – Java – Objective C
    UI
    Platform APIs
    OS – Android / iPhone
    JavaScript – Java Bridge
    Mapping to Native
    OS – Android / iPhone
    Common Source
    Cross Platform Source Code
    Common Platform
    Mapping to Native
    Titanium Mobile
    PhoneGap
  • 55. 29
    Common Platform Approach
  • 56. 30
    Modern Browsers
    All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
  • 57. 31
    WebViews
    All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
  • 58. 32
    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
  • 59. 33
    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
  • 60. 34
    Over all Architecture
    HTML5/CSS3 Application
    UI Framework e.g jQueryMobile
    PhoneGap API
    Phone Gap Bridge
    Camera
    GPS
    SQLite
    SQLite
    Compass
    etc
    File System
    Accelerometer
  • 61. 35
    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
  • 62. 36
    Development
    HTML/CSS Application uses Common API exposing device features
  • 63. 37
    Development
    Sample code
  • 64. 38
    Mapping to Native
  • 65. 39
    Over all Architecture
    Javascript Based Application
    Titanium UI API
    Titanium Phone API
    Titanium Framework
    Window
    Dialog
    SQLite
    SQLite
    Compass
    etc
    File System
    Accelerometer
  • 66. 40
    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
    ……
  • 67. 41
    Development
    UI API Set
  • 68. 42
    Development
    UI API Set
  • 69. 43
    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?
  • 70. 44
    Mobile App Dev Frameworks
    Common Platform
    PhoneGap
    Mapping to Native
    Titanium Mobile
    * Rhodes Mobile is another promising framework, but out of scope for today’s discussion
  • 71. 45
    Compare Screens (IPhone)
    PhoneGap
    Titanium Mobile
  • 72. 46
    Compare Screens (Android)
    PhoneGap
    Titanium Mobile
  • 73. 47
    Open Source
    BSD License
    MIT License
  • 74. 48
    PhoneGap
    • Only platform to support 6 Platforms
  • 49
    PhoneGap
    Standards based and extended
  • 75. 50
    PhoneGapPrerequistes
    • 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
  • 51
    Demo Screens - IPhone
  • 85. 52
    Demo Screens - Android
  • 86. 53
    PhoneGap Features
  • 87. 54
    Challenges and Advantages
    • 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
  • 55
    Code Walkthrough - PhoneGap
  • 98. Getting Started PhoneGap
    56
    Step 1: Create Android Eclipse Project
  • 99. Getting Started PhoneGap
    57
    Step 2: Add Phone Gap Java Library
  • 100. Getting Started PhoneGap
    58
    Step 3: Add Phone Gap Javascript and with other web app files
  • 101. Getting Started PhoneGap
    59
    Step 4: Modify Main Activity class
  • 102. Getting Started PhoneGap
    60
    Step 5: Extend DriodGap instead of Activity
  • 103. Getting Started PhoneGap
    61
    Step 6: Write Javascript Code to create UI &use PhoneGap API
  • 104. 62
  • 105. 63
    PhoneGap on XCode
  • 106. 64
  • 107. 65
    jQueryMobile UI Development
  • 108. jQuery Declarative UI
    <!-- Main Page -->
    <div data-role="page" id="home">
    <!-- Header of Main Page -->
    <div data-role="header">
    <h1>AlternativeTo Home</h1>
    </div>
    <!-- Content of Main Page -->
    <div data-role="content">
    <p>Find Alternatives To Your favouriteSoftwares </p>
    <p><a href="#search" data-role="button">Search Alternatives</a></p>
    <p><a href="#recent" data-role="button">Recent Alternatives</a></p>
    </div>
    </div>
    66
  • 109. jQuery Declarative UI
    67
  • 110. 68
    Extending PhoneGap to open more of underlying system
  • 111. 69
    Phone Gap Extension
    Javascript Code
    Android Code
    References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins
    Author – Rohit Ghatol
  • 112. 70
    Mobile
  • 113. 71
    Apache License
    • Appcelerator Titanium SDK
    • 114. Titanium Module SDK
    • 115. Appcelerator Titanium SDK
    • 116. Titanium Module SDK
    Paid Modules
  • 72
    Titanium Mobile
    Currently supports only Android and IPhone platforms.
  • 120. 73
    Titanium Mobile
    Titanium JavaScript
    Interpreted By
    WekitJavascriptCore
    Mozilla Rhino
    IPhone
    Android
  • 121. 74
    Titanium Architecture
  • 122. 75
    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)
  • 123. 76
    Demo Screens - IPhone
  • 124. 77
    Demo Screens - Android
  • 125. 78
    Challenges and Advantages
    Being Native is the biggest strength
    Limited cross platform uiapi is a weakness
    Platform specific api leads to fragmentation within code
  • 126. 79
    Code Walkthrough – Titanium Mobile
  • 127. 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
    80
  • 128.
  • 129.
  • 130. 83
    Directory Structure
  • 131. 84
    App.js (entry point)
    vartabGroup = 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();
  • 132. 85
    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,
    });
    vartableview = Titanium.UI.createTableView({
    top:50
    });
    window.add(search);
    window.add(tableview);
  • 133. 86
    search.js (Ajax Call)
    varxhr = 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);
    };
  • 134. 87
    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);
    });
  • 135. 88
    Native Mobile App Development
  • 136. 89
    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
  • 137. 90
    Hybrid Mobile App Development
  • 138. 91
    Hybrid App Development
    Have Web Developers for Common UI
    Have native code experts for heavy weight lifting
    Use frameworks likePhoneGap 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
  • 139. 92
    ShareFile Story
    as
  • 140. 93
    Comparison
    Titanium Mobile
    • 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
    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
  • 149. 94
    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
  • 150. References
    Phone Gap Documentation
    Titanium Mobile Documentation
    ShareFile Story
    95