• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Cross platform-mobile-applications-final
 

Cross platform-mobile-applications-final

on

  • 4,147 views

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

Statistics

Views

Total Views
4,147
Views on SlideShare
3,924
Embed Views
223

Actions

Likes
2
Downloads
114
Comments
0

2 Embeds 223

http://rohitghatol.com 217
http://www.techgig.com 6

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Cross platform-mobile-applications-final Cross platform-mobile-applications-final Presentation Transcript

    • 1
    • Cross Platform Mobile Applications
      By Rohit Ghatol
      Contact me –
      rohitsghatol@gmail.com
    • 3
      Introduction
      Rohit Ghatol
      • Project Manager @ Synerzip
      • Associate Architect @ QuickOffice Inc
      • GTUG Manager & Tech Next Founder
      • Certified Scrum Master
      • Corporate Trainer (Agile and Technical)
      • 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
    • 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 .
    • 6
      Understanding Mobile Apps
    • 7
      Reaching Mobile Users
    • 8
      1. Mobile Features
      Complete Feature Set
      Mostly Feature Sub Set
    • 9
      2. Tablet Features
      Complete Feature Set
      Almost Complete
      Feature Set
    • 10
      3. User Interaction
      Touch based
      Accelerometer
      Traditional
      Compass
    • 11
      e.gLayar Application
    • 12
      4. Location aware
      Can be Location Aware but approximate
      Location Aware and highly accurate
    • 13
      5. Sensors
      Handy Camera and Voice Recording
      Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger
    • 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
    • 15
      6. Push Notifications
      Push Notification
      Notifying the User proactively
    • 16
      Challenges in building Mobile Applications
    • 17
      1. OS Fragmentation
      Windows 7
      Fragmentation
    • 18
      2. Multiple Teams/Product
      Windows 7
      Multiple Teams/Products
    • 19
      3. Uniform User Experience
      Windows 7
      Uniform User Experience
    • 20
      4. Feature Fragmentation
      Feature Fragmentation
    • 21
      Approaches to Mobile Development
    • 22
      Types of Mobile App Dev
      Native Mobile Apps
      Cross Platform Mobile Apps
      Hybrid partly Native partly Cross Platform
    • 23
      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
    • 24
      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
    • 25
      Cross Platform Mobile Apps
      When To
      • Time to market is critical
      • Saving Cost is critical
      When Not To
    • 26
      Hybrid Mobile Apps
      When To
      Why To
      • Fairly Simple UI
      • Complex Backend
      • Quite few platforms
      • E.gShareFile
      • Recommended way - PhoneGap Plugin
      • 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
    • 27
      Cross Platform Mobile App Development
    • 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
    • 29
      Common Platform Approach
    • 30
      Modern Browsers
      All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
    • 31
      WebViews
      All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
    • 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
    • 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
    • 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
    • 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
    • 36
      Development
      HTML/CSS Application uses Common API exposing device features
    • 37
      Development
      Sample code
    • 38
      Mapping to Native
    • 39
      Over all Architecture
      Javascript Based Application
      Titanium UI API
      Titanium Phone API
      Titanium Framework
      Window
      Dialog
      SQLite
      SQLite
      Compass
      etc
      File System
      Accelerometer
    • 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
      ……
    • 41
      Development
      UI API Set
    • 42
      Development
      UI API Set
    • 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?
    • 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
    • 45
      Compare Screens (IPhone)
      PhoneGap
      Titanium Mobile
    • 46
      Compare Screens (Android)
      PhoneGap
      Titanium Mobile
    • 47
      Open Source
      BSD License
      MIT License
    • 48
      PhoneGap
      • Only platform to support 6 Platforms
    • 49
      PhoneGap
      Standards based and extended
    • 50
      PhoneGapPrerequistes
      • 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
    • 51
      Demo Screens - IPhone
    • 52
      Demo Screens - Android
    • 53
      PhoneGap Features
    • 54
      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
    • 55
      Code Walkthrough - PhoneGap
    • Getting Started PhoneGap
      56
      Step 1: Create Android Eclipse Project
    • Getting Started PhoneGap
      57
      Step 2: Add Phone Gap Java Library
    • Getting Started PhoneGap
      58
      Step 3: Add Phone Gap Javascript and with other web app files
    • Getting Started PhoneGap
      59
      Step 4: Modify Main Activity class
    • Getting Started PhoneGap
      60
      Step 5: Extend DriodGap instead of Activity
    • Getting Started PhoneGap
      61
      Step 6: Write Javascript Code to create UI &use PhoneGap API
    • 62
    • 63
      PhoneGap on XCode
    • 64
    • 65
      jQueryMobile UI Development
    • 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
    • jQuery Declarative UI
      67
    • 68
      Extending PhoneGap to open more of underlying system
    • 69
      Phone Gap Extension
      Javascript Code
      Android Code
      References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins
      Author – Rohit Ghatol
    • 70
      Mobile
    • 71
      Apache License
      • Appcelerator Titanium SDK
      • Titanium Module SDK
      • Appcelerator Titanium SDK
      • Titanium Module SDK
      Paid Modules
      • Commerce Modules
      • Communication Modules
      • Analytics Module
      • Media Modules
    • 72
      Titanium Mobile
      Currently supports only Android and IPhone platforms.
    • 73
      Titanium Mobile
      Titanium JavaScript
      Interpreted By
      WekitJavascriptCore
      Mozilla Rhino
      IPhone
      Android
    • 74
      Titanium Architecture
    • 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)
    • 76
      Demo Screens - IPhone
    • 77
      Demo Screens - Android
    • 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
    • 79
      Code Walkthrough – Titanium Mobile
    • 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
    • 83
      Directory Structure
    • 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();
    • 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);
    • 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);
      };
    • 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);
      });
    • 88
      Native Mobile App Development
    • 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
    • 90
      Hybrid Mobile App Development
    • 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
    • 92
      ShareFile Story
      as
    • 93
      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
    • 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
    • References
      Phone Gap Documentation
      Titanium Mobile Documentation
      ShareFile Story
      95