Cross platform-mobile-applications
Upcoming SlideShare
Loading in...5
×
 

Cross platform-mobile-applications

on

  • 1,712 views

Smart Phone Application Using Common Platfrom...

Smart Phone Application Using Common Platfrom...

Statistics

Views

Total Views
1,712
Views on SlideShare
1,712
Embed Views
0

Actions

Likes
4
Downloads
61
Comments
0

0 Embeds 0

No embeds

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 Cross platform-mobile-applications Presentation Transcript

    • Cross Platform Mobile Applications
      By Rohit Ghatol
      Contact me –
      rohit.ghatol@synerzip.com
      rohitsghatol@gmail.com
    • 2
      Introduction
      Rohit Ghatol
      • Project Manager @ Synerzip
      • Associate Architect @ QuickOffice Inc
      • GTUG Manager
      • Certified Scrum Master
      • Corporate Trainer (Agile and Technical)
      • Was part of OpenSocial at Google
    • 3
      Topics
      Overview
      Understanding Mobile Apps
      Cross Platform Mobile App Development
      Pure HTML/JavaScript – PhoneGap
      Interpreted JavaScript – Titanium
      Native Mobile App Development
      Hybrid Mobile App Development
      Comparison between PhoneGapVs Titanium
      Conclusion
      Q & A
    • 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 .
    • 5
      Understanding Mobile Apps
    • 6
      Reaching Mobile Users
    • 7
      1. Mobile Features
      Complete Feature Set
      Mostly Feature Sub Set
    • 8
      2. Tablet Features
      Complete Feature Set
      Almost Complete
      Feature Set
    • 9
      3. User Interaction
      Touch based
      Accelerometer
      Traditional
      Compass
    • 10
      e.gLayar Application
    • 11
      4. Location aware
      Can be Location Aware but approximate
      Location Aware and highly accurate
    • 12
      5. Sensors
      Handy Camera and Voice Recording
      Upcoming NFC (Near Field Communication) turning phone into Credit Card, Access Card, Business Card Exchanger
    • 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
    • 14
      6. Push Notifications
      Push Notification
      Notifying the User proactively
    • 15
      Challenges in building Mobile Applications
    • 16
      1. OS Fragmentation
      Windows 7
      Fragmentation
    • 17
      2. Multiple Teams/Product
      Windows 7
      Multiple Teams/Products
    • 18
      3. Uniform User Experience
      Windows 7
      Uniform User Experience
    • 19
      4. Feature Fragmentation
      Feature Fragmentation
    • 20
      Types of Mobile App Dev
      Native Mobile Apps
      Cross Platform Mobile Apps
      Hybrid partly Native partly Cross Platform
    • 21
      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
    • 22
      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
    • 23
      Cross Platform Mobile Apps
      When To
      • Time to market is critical
      • Saving Cost is critical
      When Not To
    • 24
      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
    • 25
      Cross Platform Mobile App Development
    • 26
      Cross Platform Strategies
      Cross Platform
      Source Code
      Common Platform
      e.gWebKit
      Mapping to Native
      Titanium Mobile
      PhoneGap
    • 27
      Common Platform Approach
    • 28
      Modern Browsers
      All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
    • 29
      WebViews
      All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
    • 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
    • 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
    • 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
    • 33
      Development
      HTML/CSS Application uses Common API exposing device features
    • 34
      Development
      Sample code
    • 35
      Mapping to Native
    • 36
      Concept
      • Common API set is provided by framework
      • Application is written using this common api set
      • HTML/CSS may be supported or may not be supported. Titanium prefers native UI instead of HTML/CSS UI, Rhodes prefers HTML/CSS UI
      • Phone Features are access liked common api set (this is similar to that in PhoneGap)
    • 37
      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
      ……
    • 38
      Development
      UI API Set
    • 39
      Development
      UI API Set
    • 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?
    • 41
      Mobile App Dev Frameworks
      Common Platform
      PhoneGap
      Mapping to Native
      Titanium Mobile
      Rhodes Mobile
    • 42
      Compare Screens (IPhone)
      PhoneGap
      Titanium Mobile
    • 43
      Compare Screens (Android)
      PhoneGap
      Titanium Mobile
    • 44
      Open Source
      BSD License
      MIT License
    • 45
      PhoneGap
      • Only platform to support 6 Platforms
    • 46
      PhoneGap
      Standards based and extended
    • 47
    • 48
      PhoneGap Features
    • 49
      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
    • 50
      Demo Screens - IPhone
    • 51
      Demo Screens - Android
    • 52
      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
    • 53
    • 54
      Apache License
      • Appcelerator Titanium SDK
      • Titanium Module SDK
      • Appcelerator Titanium SDK
      • Titanium Module SDK
      Paid Modules
      • Commerce Modules
      • Communication Modules
      • Analytics Module
      • Media Modules
    • 55
      Titanium Mobile
    • 56
      Titanium Mobile
      Titanium JavaScript
      Interpreted By
      WekitJavascriptCore
      Mozilla Rhino
      IPhone
      Android
    • 57
      Titanium Architecture
    • 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)
    • 59
      Demo Screens - IPhone
    • 60
      Demo Screens - Android
    • 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
    • 62
      Native Mobile App Development
    • 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
    • 64
      Hybrid Mobile App Development
    • 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
    • 66
      ShareFile Story
      as
    • 67
      Comparison
      Titanium Mobile
      • 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
      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
    • 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
    • 69
      Code Walkthrough - PhoneGap
    • 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
    • 71
      Digging Deeper
    • 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>
    • 73
      Bootstrapping phonegap
      function init() {
      document.addEventListener('deviceready’,loadMap,false);
      }
    • 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('Can't retrieve position.nError: ' + e);
      };
      //Fetch Coordinate Asynchronously
      navigator.geolocation.getCurrentPosition(successCallback,
      failureCallback );
      }
    • 75
      PhoneGap Walkthrough
      Lets see a Live Demo
    • 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
    • 77
      Code Walkthrough – Titanium Mobile
    • 78
      Directory Structure
    • 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();
    • 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);
    • 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);
      };
    • 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);
      });
    • 83
      Titanium Walkthrough
      Lets see a Live Demo
    • 84
      Questions?
      www.synerzip.com
      Hemant Elhence, hemant@synerzip.com
      469.322.0349
      Agile Software Product Development Partner
    • 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
    • 86
      Our Clients
    • 87
      Questions?
      www.synerzip.com
      Hemant Elhence, hemant@synerzip.com
      469.322.0349
      Agile Software Product Development Partner