Platform Independent Frameworks

needlessoybeanΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 8 μήνες)

75 εμφανίσεις

Platform Independent
Frameworks

31.03.2013

Contents


Mobile App Developer’s challenges


Platform Independent solutions


Mobile Web Based Apps


Cross Platform Mobile Tools (XMT)


Mobile Web Based Apps


Cross Platform Mobile Tools (XMT)


XMT Case Study: Location Aware App using Cordova


Architecture


Installation


Development


Deployment

2

Mobile App Developer’s Challenge

Reaching large number of users
in diverse and
continually evolving Mobile OS (MOS) landscape




Src:
Mobile operating system, Wikipedia

1996


Palm OS

1997
-
1998

1999


RIM
Blackberry

2000


Symbian

2001
-
2006

2007


Apple iOS

2008


Android

2009


Palm Web
OS


Bada

2010


Windows
Phone OS

2011


MeeGo

Year of release of MOS used popularly for app development today

Not sufficient to build only for
one platform.


E.g.: From 2012 Market
share, it would be wise to
target Android, iOS, RIM and
Windows users.



Market Share 2012

3

Multi Platform Challenge

Difficulties of developing for so many platforms


Time consuming.



Requires detailed knowledge of each platform.



Develop
familiaritiy

with different development
environments.



Increased development costs.

4

Platform Independent Solutions

Mobile web apps


Apps in which all or some parts of software
(including UI) downloaded from the Web each
time it is run.


Cross
-
platform mobile development tools
(XMTs)



Tools to build native apps for deployment on
different platforms with minimal customization for
each platform.

5

Mobile Web Apps

All or some parts of software
downloaded from the Web
each time it is run.


Accessible from all Web
-
capable
mobile devices.


Programmed in browser
rendered language like HTML,
Javascript .


Example : Twitter

Src:
Twitter web app announcement

6

Twitter Mobile Web App

Mobile Web App Vs Native App

Mobile Web

App

Native App

Deployment



䅣捥Ased⁶i愠浯bile browser.





ne眠s潦瑷慲e⸠
P慧a

l潡ded 潮
use爠reques琮



All users on same version.



Downloaded onto mobile
device.



創湳R慳 st慮a慬潮攮



Users can choose version.

Development



䍯C浯n⁣潤e b慳e⁡捲潳s
pla瑦潲浳⸠
䔮g⹈呍䰵.⼠䩡v慳捲cp琠
⼠䍓匳⁡nd⁳i浩m慲aweb
te捨c潬潧楥o.



Can’t access all of device’s
features (yet).



E慣栠灬p瑦潲洠畳敳 摩df敲敮琠
灲潧o慭浩湧慮杵慧e
⸠䔮朮 䩡v愠
f潲⁁湤o潩搬d佢橥捴Ove
-
䌠Cf潲⁩体O



䉥Bt敲eint敧ra瑩潮o睩瑨t灬p瑦潲洠
f敡瑵t敳⁡ d

桡h摷慲攠lik攠
st慮a慲搠睩摧e瑳Ⱐc慭ar愬a䝐匮

P敲e潲浡湣o



卬Swer

摵d

t漠o潮oen琠慮d 啉U
fet捨c睩瑨tever礠reques琮⁓ligh瑬礠
慬ae癩vted 睩瑨t潦晬ine⁣慣aing.



F慳t敲



啉⁡汲敡e礠
摯睮w潡摥搮

䅰A

卥Srch

乯Ne慳y

浥慮s⁦潲⁡pp⁳e慲捨c

䵡Mke瑰t慣敳

t漠桥l瀠晩湤f慰a.

䵯湥瑩za瑩潮

Requires payw慬a 潲osubs捲cp瑩潮
se琠tp.

Handled by platform’s app store.

Re昺f
乡瑩v攠慰a V猠䵯扩l攠W敢 䅰A

7

Mobile Web Apps

Example : Facebook



8

Src
:
Webfirst.com

Example: Twitter

9

Mobile Web Apps

Src:
Acknowledgement.co.uk

Mobile Web Apps

Example:
L.A. Times



10

Src:
LATimesBlog

Future of Mobile Web Apps

“Medium to large publishers to place equal
focus, particularly those in news and sport
categories.”

-

Study by Global Intelligence Alliance



11

Recommended literature:

Native or Web Application?

White paper
by Global Intelligence Alliance



Cross
-
Platform Mobile Dev Tools
(XMT)

XMTs are tools that aim to develop apps
deployable on multiple platforms with very
little code change.

12

Popular XMT vendors

PhoneGap

Acquired by Apache as Apache
Cordova

RhoMobile

Developed by Motorola Solutions

Titanium Developed by
Appcelerator

Comparison of Top 3 XMTs

13

Programming
Language

GUI Designer

Debugger

Emulator

Apache

Cordova

HTML, Javascript,
Native code for
further extensibility
(i.e. Java for
Android, Xcode for
iOS)

No

No

Platform SDK

RhoMobile

Ruby,

Native code for
further extensibility

No

Yes

Own

Appcelerato

Titanium

HTML, Javascript,
Ruby,

PHP, Python,

Native code for
further extensibility


No

Yes

Platform SDK

XMT App
Vs

Platform Specific App

14

XMT Native App

Platform Specific Native App

Deployment


Redu捥c deplo祭en琠c潳琮


F慳ter

deplo祭en琠慣a潳s
pla瑦潲浳.


䥮cr敡e敤⁣潳琠t漠扵il搠慰a f潲o
敡捨e灬p瑦潲洮

䑥v敬潰浥nt


䵯M琠塍ts⁵se⁷eb⁳捲cp瑩ng
l慮gu慧敳 ke 䡔䵌㔠慮d
Javascript that are widely used.


Might not support all features
provided in native platform.


䥮ef晩捩en琠t潤ing 慮d bl潡ted
c潤e due t漠oevel潰e爠n潴o
av慩aing 潰oi浩ma瑩潮 in
na瑩ve⁣潤e




E慣栠灬p瑦潲洠畳敳 摩df敲敮琠
灲潧o慭浩湧慮杵慧e
⸠䔮朮 䩡v愠
for Android, Objective
-
C for iOS.



Better integration with platform
features
and

hardware like
standard widgets, camera, GPS.

Performance



P潳sibl礠ylowe爠
c潭pila瑩潮
慮d rende物ng due t漠捨u牮楮r
潵琠c潤e

c潭pa瑩ble 睩瑨t
pla瑦潲洮



F慳t敲.

Demo using Cordova

Build location aware system using
Apache Cordova
(
formerly
PhoneGap
) for Android.



Architecture



Set up



Development



Deployment

15

Cordova (PhoneGap)
-

Architecture



16

Src:
By IBM

Cordova (PhoneGap)
-

Architecture

Every cordova application has the following
components


UI Layer in HTML/CSS/Javascript (JS)


Bridge between JS and Native code allowing
communication from HTML application and
native platform.


Bridge between Native code and JS allowing
communication from native platform and
HTML application.




17

Cordova
-

Installation


Set up Eclipse and Android Tools as previously
instructed.



Download latest copy of Cordova and extract
contents.


http://phonegap.com/download/



18

Cordova
-

Development

1.
Create new Android project in Eclipse.


New
-
> Other
-
>



2.
Enter application details as shown.

19

Cordova
-

Development

3.
Click Next in subsequent screens till New Blank
Activity Screen.


4.
Enter Activity name.







5.
Click Finish.


20

Cordova
-

Development

6.
Copy cordova
-
2.4.0.jar from
installed copy to /libs.

7.
Copy cordova
-
2.4.0.js from
installed copy to /assets/www.

8.
Copy xml directory from
installed copy to /res.

9.
Create index.html under
/assets/www.

21

Index.html Sample Code

Students encouraged to write their own logic. This is only for
reference.

22

Index.html Sample Code

23

Cordova
-

Development

10.

Modify newly created class
LocationDemoCordovaActivity.


Extend DroidGap
provided by
Cordova
framework. This is
main Android
Activity class that
is used to launch
the specific html
file.

Layout is
specified in html
and loaded with
loadUrl

instead of
Android’s
setContentView()

24

Cordova
-

Development

11.

Copy the
permissions
required by
Cordova.


25

Cordova
-

Deployment

Run as Android Application from Eclipse

26

Cordova Output

27

References


Mobile web application Best Practices


Native vs Mobile App Comparison


Tips to build mobile web apps the right way


MobiThink
-
Native vs Web Apps


Cordova guide


Cordova tutorial

28

Thank You!

29