http://meetup.com/technext cross platform mobile applications by rohit ghatol contact me –...
TRANSCRIPT
![Page 1: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/1.jpg)
http://meetup.com/technext
Cross Platform Mobile ApplicationsBy Rohit GhatolContact me – [email protected]
![Page 2: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/2.jpg)
http://meetup.com/technext
2
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
![Page 3: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/3.jpg)
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
![Page 4: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/4.jpg)
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 .
![Page 5: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/5.jpg)
http://meetup.com/technext
5
Understanding Mobile Apps
![Page 6: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/6.jpg)
http://meetup.com/technext
6
Reaching Mobile Users
![Page 7: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/7.jpg)
http://meetup.com/technext
7
1. Mobile Features
Complete Feature SetMostly Feature Sub Set
![Page 8: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/8.jpg)
http://meetup.com/technext
8
2. Tablet Features
Complete Feature SetAlmost CompleteFeature Set
![Page 9: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/9.jpg)
http://meetup.com/technext
9
3. User Interaction
Touch based
Traditional
Accelerometer
Compass
![Page 10: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/10.jpg)
http://meetup.com/technext
10
e.g Layar Application
![Page 11: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/11.jpg)
http://meetup.com/technext
11
4. Location aware
Location Aware and highly accurate
Can be Location Aware but approximate
![Page 12: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/12.jpg)
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
![Page 13: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/13.jpg)
http://meetup.com/technext
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
![Page 14: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/14.jpg)
http://meetup.com/technext
14
6. Push Notifications
Push NotificationNotifying the User proactively
![Page 15: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/15.jpg)
http://meetup.com/technext
15
Challenges in building Mobile Applications
![Page 16: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/16.jpg)
http://meetup.com/technext
16
1. OS Fragmentation
Windows 7
Fragmentation
![Page 17: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/17.jpg)
http://meetup.com/technext
17
2. Multiple Teams/Product
Windows 7
Multiple Teams/Products
![Page 18: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/18.jpg)
http://meetup.com/technext
18
3. Uniform User Experience
Windows 7
Uniform User Experience
![Page 19: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/19.jpg)
http://meetup.com/technext
19
4. Feature Fragmentation
Feature Fragmentation
![Page 20: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/20.jpg)
http://meetup.com/technext
20
Approaches to Mobile Development
![Page 21: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/21.jpg)
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
![Page 22: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/22.jpg)
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
![Page 23: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/23.jpg)
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
![Page 24: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/24.jpg)
http://meetup.com/technext
24
Cross Platform Mobile Apps
When To
• Time to market is critical
• Saving Cost is critical
When Not To
![Page 25: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/25.jpg)
http://meetup.com/technext
25
Hybrid Mobile Apps
When To
• Fairly Simple UI
• Complex Backend
• Quite few platforms
• E.g ShareFile
• Recommended way - PhoneGap 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
![Page 26: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/26.jpg)
http://meetup.com/technext
26
Cross Platform Mobile App Development
![Page 27: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/27.jpg)
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 Platform Mapping to Native
Common Source
![Page 28: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/28.jpg)
http://meetup.com/technext
28
Common Platform Approach
![Page 29: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/29.jpg)
http://meetup.com/technext
29
Modern Browsers
Mobile OS Browser
Android Webkit based
iPhone Webkit based
BlackBerry 6.0 + Webkit based
Window Phone 7 IE 7 based *
WebOS Webkit based
Nokia Webkit based
All new Smart Phones come with modern browsers, which have better support for HTML5/CSS3 specs
![Page 30: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/30.jpg)
http://meetup.com/technext
30
WebViews
All of these smart phones supports using these modern browsers as embedded views (aka WebViews)
![Page 31: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/31.jpg)
http://meetup.com/technext
31
JavaScript to native and back
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
![Page 32: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/32.jpg)
http://meetup.com/technext
32
Hybrid Applications
HTML/Javascript 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
![Page 33: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/33.jpg)
http://meetup.com/technext
33
Over all Architecture
HTML5/CSS3 Application
UI Framework e.g jQueryMobile PhoneGap API
Phone Gap Bridge
Camera GPS SQLite SQLite
File System Accelerometer
Compass etc
![Page 34: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/34.jpg)
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
![Page 35: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/35.jpg)
http://meetup.com/technext
35
Development• HTML/CSS Application uses Common API exposing device
features
![Page 36: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/36.jpg)
http://meetup.com/technext
36
Development• Sample code
![Page 37: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/37.jpg)
http://meetup.com/technext
37
Mapping to Native
![Page 38: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/38.jpg)
http://meetup.com/technext
38
Over all Architecture
Javascript Based Application
Titanium UI API Titanium Phone API
Titanium Framework
Window Dialog SQLite SQLite
File System Accelerometer
Compass etc
![Page 39: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/39.jpg)
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• ……
![Page 40: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/40.jpg)
http://meetup.com/technext
40
Development
UI API Set
![Page 41: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/41.jpg)
http://meetup.com/technext
41
Development
UI API Set
![Page 42: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/42.jpg)
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?
![Page 43: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/43.jpg)
http://meetup.com/technext
43
Mobile App Dev Frameworks
Common Platform
• PhoneGapMapping to Native
• Titanium Mobile
* Rhodes Mobile is another promising framework, but out of scope for today’s discussion
![Page 44: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/44.jpg)
http://meetup.com/technext
44
Compare Screens (IPhone)PhoneGap Titanium Mobile
![Page 45: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/45.jpg)
http://meetup.com/technext
45
Compare Screens (Android)PhoneGap Titanium Mobile
![Page 46: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/46.jpg)
http://meetup.com/technext
46
Open Source
MIT License
BSD License
![Page 47: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/47.jpg)
http://meetup.com/technext
47
PhoneGap
• Only platform to support 6 Platforms
![Page 48: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/48.jpg)
http://meetup.com/technext
48
PhoneGap• Standards based and extended
![Page 49: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/49.jpg)
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
![Page 50: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/50.jpg)
http://meetup.com/technext
50
Demo Screens - IPhone
![Page 51: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/51.jpg)
http://meetup.com/technext
51
Demo Screens - Android
![Page 52: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/52.jpg)
http://meetup.com/technext
52
PhoneGap Features
![Page 53: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/53.jpg)
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
![Page 54: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/54.jpg)
http://meetup.com/technext
54
Code Walkthrough - PhoneGap
![Page 55: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/55.jpg)
http://meetup.com/technext
Getting Started PhoneGap
55
Step 1: Create Android Eclipse Project
![Page 56: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/56.jpg)
http://meetup.com/technext
Getting Started PhoneGap
56
Step 2: Add Phone Gap Java Library
![Page 57: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/57.jpg)
http://meetup.com/technext
Getting Started PhoneGap
57
Step 3: Add Phone Gap Javascript and with other web app files
![Page 58: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/58.jpg)
http://meetup.com/technext
Getting Started PhoneGap
58
Step 4: Modify Main Activity class
![Page 59: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/59.jpg)
http://meetup.com/technext
Getting Started PhoneGap
59
Step 5: Extend DriodGap instead of Activity
![Page 60: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/60.jpg)
http://meetup.com/technext
Getting Started PhoneGap
60
Step 6: Write Javascript Code to create UI &use PhoneGap API
![Page 61: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/61.jpg)
http://meetup.com/technext
61
![Page 62: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/62.jpg)
http://meetup.com/technext
62
PhoneGap on XCode
![Page 63: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/63.jpg)
http://meetup.com/technext
63
![Page 64: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/64.jpg)
http://meetup.com/technext
64
jQueryMobile UI Development
![Page 65: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/65.jpg)
http://meetup.com/technext
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 favourite Softwares </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>
65
![Page 66: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/66.jpg)
http://meetup.com/technext
jQuery Declarative UI
66
![Page 67: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/67.jpg)
http://meetup.com/technext
67
Extending PhoneGap to open more of underlying system
![Page 68: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/68.jpg)
http://meetup.com/technext
68
Phone Gap Extension
• References - http://wiki.phonegap.com/w/page/36752779/PhoneGap-Plugins
• Author – Rohit Ghatol
Javascript Code
Android Code
![Page 69: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/69.jpg)
http://meetup.com/technext
69Mobile
![Page 70: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/70.jpg)
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
![Page 71: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/71.jpg)
http://meetup.com/technext
71
Titanium Mobile
Currently supports only Android and IPhone platforms.
![Page 72: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/72.jpg)
http://meetup.com/technext
72
Titanium MobileTitanium JavaScript
Wekit JavascriptCore Mozilla Rhino
Interpreted By
IPhone Android
![Page 73: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/73.jpg)
http://meetup.com/technext
73
Titanium Architecture
![Page 74: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/74.jpg)
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)
![Page 75: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/75.jpg)
http://meetup.com/technext
75
Demo Screens - IPhone
![Page 76: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/76.jpg)
http://meetup.com/technext
76
Demo Screens - Android
![Page 77: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/77.jpg)
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
![Page 78: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/78.jpg)
http://meetup.com/technext
78
Code Walkthrough – Titanium Mobile
![Page 79: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/79.jpg)
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
![Page 80: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/80.jpg)
http://meetup.com/technext
![Page 81: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/81.jpg)
http://meetup.com/technext
![Page 82: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/82.jpg)
http://meetup.com/technext
82
Directory Structure
![Page 83: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/83.jpg)
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();
![Page 84: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/84.jpg)
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);
![Page 85: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/85.jpg)
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); };
![Page 86: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/86.jpg)
http://meetup.com/technext
86
search.js (Event handling)//send ajax request to fetch altrnatives for searchTextfunction searchAlternatives(searchText){ xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');xhr.send();}
//start search when user hits enter on search boxsearch.addEventListener('return', function(e){ actInd.show(); searchAlternatives(e.value);});
![Page 87: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/87.jpg)
http://meetup.com/technext
87
Native Mobile App Development
![Page 88: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/88.jpg)
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
![Page 89: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/89.jpg)
http://meetup.com/technext
89
Hybrid Mobile App Development
![Page 90: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/90.jpg)
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
![Page 91: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/91.jpg)
http://meetup.com/technext
91
ShareFile Story
• as
![Page 92: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/92.jpg)
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
![Page 93: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/93.jpg)
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
![Page 94: Http://meetup.com/technext Cross Platform Mobile Applications By Rohit Ghatol Contact me – rohitsghatol@gmail.com](https://reader030.vdocuments.mx/reader030/viewer/2022013011/5519d9625503468b0c8b4ab8/html5/thumbnails/94.jpg)
http://meetup.com/technext
References• Phone Gap Documentation• Titanium Mobile Documentation• ShareFile Story
94