8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
1/73
Cross PlatformMobile ApplicationsBy Rohit GhatolContact me
mailto:[email protected]:[email protected]:[email protected]:[email protected]8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
2/73
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
http://www.synerzip.com/http://quickoffice.com/http://blog.punegtug.org/http://blog.punegtug.org/http://quickoffice.com/http://www.synerzip.com/8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
3/73
Topics
Mobile Trends
Understanding Mobile Apps
Cross Platform Mobile App Development
Pure HTML/JavaScript PhoneGap
Interpreted JavaScript Titanium
Native Mobile App Development
Hybrid Mobile App Development
Building your own Cross Platform Framework
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
4/73
Mobile Trends
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
5/73
Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718
http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/12785327188/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
6/73
Source - http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718
Frequent Users Rare Users
http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/1278532718http://www.betanews.com/joewilcox/article/The-Mobile-Web-is-NOW-tough-luck-PCs/12785327188/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
7/73
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
8/73
Mobile Trends
2000 2000-2005 2005-2010 2010-2015
Desktop
Web
Mobile
Mobile Trend Perception
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
9/73
Understanding Mobile Apps
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
10/73
Reaching Mobile Users
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
11/73
Characteristics
Complete Feature SetMostly Feature Sub Set
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
12/73
Characteristics
Complete Feature SetAlmost Complete
Feature Set
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
13/73
Characteristics
Touch based
Traditional
Accelerometer
Compass
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
14/73
Layar Application
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
15/73
Characteristics
Location Aware and
highly accurate
Can be Location Aware
but approximate
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
16/73
Characteristics
Handy Camera and Voice Recording
Upcoming NFC (Near Field Communication)
turning phone into Credit Card, Access Card,
Business Card Exchanger
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
17/73
Shopping Applications
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
18/73
Characteristics
Push NotificationNotifying the User proactively
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
19/73
Challenges in building MobileApplications
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
20/73
Challenges Mobile App Dev
Windows 7
Fragmentation
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
21/73
Challenges Mobile App Dev
Windows 7
Multiple Teams/Products
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
22/73
Challenges Mobile App Dev
Windows 7
Uniform User Experience
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
23/73
Challenges Mobile App Dev
Feature Fragmentation
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
24/73
Types of Mobile App Dev
Native Mobile Apps
Cross Platform Mobile Apps
Hybrid partly Native partly Cross Platform
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
25/73
Native Mobile Apps
When To
Long Running Services
Complex N/W comm.
Canvas based Apps
Only Few Platforms
When Not To
Replica Web Apps
Standard Restful
Widget based apps
Many Platforms
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
26/73
Cross Platform Mobile Apps
When To
Replica Web Apps
Standard Restful
Widget based apps
Many Platforms
When Not To
Long Running Services
Complex N/W comm.
Canvas based Apps
Only Few Platforms
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
27/73
Hybrid Mobile Apps
When To
Fairly Simple UI
Complex Backend
Quite few platforms
E.g ShareFile
Recommended method - PhoneGap Plugin
Why To
Some parts of app are common
Rest parts are different
Use Cross Platform to developcommon part
Use Native to develop the weight
lifting parts
http://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
28/73
Cross Platform Mobile App
Development
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
29/73
Cross Platform Strategies
CommonPlatform
e.g WebKit
Mapping to
Native
PhoneGap Titanium
Cross PlatformSource Code
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
30/73
WebKit Platform
All Mobile Platforms have something common that is a
Modern Browser
All these browsers are based on WebKit
Moreover all these platform support showing embedded
browser in Applications (aka WebView)
Strange enough all these WebViews provide hooks fromjavascript to java and vice a versa
In short WebView is the new Virtual Machine
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
31/73
Mapping to Native Code
Say Application is written in JavaScript
The JavaScript code is running in Interpreter
The Interpreter internally forwards calls to the native code
Limitation being the you can only map to subset of code
available on all target platforms.
OR you allow for fragmentation in api, like Titanium Mobile
does for involving Android services
black
berry
ios
android
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
32/73
Mobile App Dev Frameworks
Common Platform
PhoneGap
Titanium Desktop
Mapping to Native
Titanium Mobile
Rho Mobile
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
33/73
PhoneGap
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
34/73
PhoneGap
Only platform to support 6 Platforms
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
35/73
PhoneGap
Standards based and extended
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
36/73
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
37/73
PhoneGap Features
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
38/73
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
Use existing IDEs like Eclipse or Xcode, PhoneGap has no IDE
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
39/73
Demo Screens - IPhone
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
40/73
Demo Screens - Android
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
41/73
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
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
42/73
Digging Deeper
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
43/73
Bootstrapping phonegap
Phone Gap
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
44/73
Bootstrapping phonegap
function init() {
document.addEventListener('deviceready ,loadMap,false);
}
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
45/73
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
46/73
PhoneGap Walkthrough
Lets see a Live Demo
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
47/73
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
http://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Pluginshttp://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
48/73
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
Samples
Multipage Template
Page Slide Transitions Dialogs
Toolbars
Forms
Lists
http://jquerymobile.com/demos/1.0a3/docs/pages/multipage-template.htmlhttp://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/http://jquerymobile.com/demos/1.0a3/docs/pages/multipage-template.html8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
49/73
Titanium Mobile
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
50/73
Titanium Mobile
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
51/73
Titanium Mobile
Titanium JavaScript
Wekit
JavascriptCoreMozilla Rhino
Interpreted By
IPhone Android
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
52/73
Titanium Architecture
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
53/73
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
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
54/73
Demo Screens - IPhone
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
55/73
Demo Screens - Android
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
56/73
Directory Structure
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
57/73
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();
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
58/73
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);
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
59/73
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);
};
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
60/73
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);
});
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
61/73
Titanium Walkthrough
Lets see a Live Demo
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
62/73
Challenges and Advantages
Being Native is the biggest strength
Limited cross platform api is a weakness
Platform specific api leads to fragmentation within code
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
63/73
Native Mobile App
Development
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
64/73
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
Have concrete plans on
What is Trial app?
How does user upgrade?
Use in app billing to have fine grained control
Plan for risks if this is your companies first Mobile App
deployment
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
65/73
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
66/73
Hybrid App Development
Have Web Developers for Common UI
Have native code experts for heavy weight lifting
Use frameworks like PhoneGap to glue the above two pieces
Measure at every milestone to keep track of effect of changes
Use Automation to regress every layer
http://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALL8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
67/73
ShareFile Story
as
http://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALLhttp://www.informationweek.com/news/smb/mobile/showArticle.jhtml?articleID=229400677&cid=RSSfeed_IWK_ALL8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
68/73
Comparison
Titanium
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 forHTML/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
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
69/73
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
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
70/73
Cross Desktop App Dev
Following are options worth considering
Nokia QT (webkit based)
Titanium Desktop (webkit based)
Adobe Air (flash based)
Java
Many more
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
71/73
Building your own Framework
Common HTML/JavaScript
Code
WebKit
IPhone,IPad, Mac
Obj c
WebKit
Android
Java
WebKit
Windows
C#
WebKit
?
?
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
72/73
JavaScript to Native Channel
Assume a single channel from Javascript to native and backfrom native to Javascript is present
This Single Channel can provide infinite control to the native
code. One needs to just add more code to the native end andadd new messages for it to be exposed.
However, understand that Javascript is single threaded and
the callbacks will execute only if there is no javascript running.
8/2/2019 Cross Platform Mobile Applications Webinar 110414145021 Phpapp01
73/73
Building Proof of Concepts
Building Proof of Concepts is straight forward on
Android
IPad, IPhone, IPod Touch and Mac
Even for BlackBerry and WebOS there is some documentatiion
For Windows, Linux and other mobile platforms one can refer
to the source code of
Titanium Desktop
Phone Gap