... an easier way to make iPhone apps? and more.

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

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

92 εμφανίσεις

... an easier way to make iPhone apps?
and more.

What is PhoneGap?




It's a tool for building mobile apps using web
-
tech.





HTML for layout ( Better yet HTML5 )


JavaScript for accessing device functionality


CSS for rich look and feel. ( Better yet CSS3 )

What is PhoneGap?




It's a collection of tools + a consistent cross
-
device API



o
Use the same JavaScript calls to access device
functions.




navigator.notification.vibrate();


o
Standards based ( W3C
-

why is this important?)

In the begining ...


Nitobi was excited by the game
-
changing iPhone.



Not excited by the lame
-
changing Objective
-
C


o
Objective
-
C is powerful, and good to know, but can you
afford to train your whole team of developers?



@ iPhone Dev Camp in 2008 ( Brian, Brock, Rob, Eric )


o
The basis of iPhone
-

PhoneGap was built in a weekend,
and could access GeoLocation and Accelerometer data.


So PhoneGap apps are just web pages?



-

Yes, web pages that access
device functionality.



-

Apps can still provide a rich
experience, especially with CSS
transitions and tweening
animations. Web tricks like CSS
Sprites too!



-

CSS Transitions are hardware
accelerated on the iPhone!



-

There are games built with
PhoneGap!


Bubble Drop >>

Native Looking?


You can also use JavaScript
libraries.



Like:


jQuery


MooTools


XUI


jQTouch


...

Rich UI ? Rich UX ?



Just because it's a web
page doesn't mean it
should look like a web
page!



Images are usually loaded
from the device, so it's
quick.



Interaction is quick if you
use touch events instead of
click events.

Show me more!

How many PhoneGap apps are there?


We don't know ... we only know it's a PhoneGap app if
we're told.



My guess : Thousands



We will post a link to your App on PhoneGap.com if you ask
us (nicely)




What Device functions are available?


On iPhone:



GeoLocation


Compass ( for 3GS )


Accelerometer


Telephony


Camera


Media Playback + Recording


Contacts ( read
-
only )


Video with HTML5 Video tag


FileIO ( local application documents folder )

o
Cache images or data from the web

What is the architecture of a typical
PhoneGap app built by Nitobi?


There is usually a server component involved.


JavaScript calls the server via XHR to get JSON data.



HTML/JS/CSS + graphic assets are on the device, packaged
as part of the build process.



JavaScript can store retrieved data in a SQLite database
for offline access.



JavaScript can cache images too.


How is PhoneGap different than a
mobile web site?


Mobile websites are domain restricted to their origin url
and cannot access other sites/APIs



PhoneGap applications are loaded from the file:// protocol
so server requests are NOT restricted.



With PhoneGap you can build powerful mashups accessing
multiple services.




















Twickr

?

Flitter

? FaceTube

?



How much does it cost?


It's free, and

open
-
sourced under the MIT license.



Free to use, Free to sell, Free to modify, Free to
contribute







How does Nitobi make money?


PhoneGap is the tool that we use to deliver apps to our paying
clients.



When possible, we roll our client based additions back into the
community.



We provide PhoneGap training + support.

Where can I get it?


More info:


http://phonegap.com/



The mailing list / google group


http://groups.google.com/group/phonegap



The repo, fork it


http://github.com/phonegap/phonegap
-
iphone



The tutorial app


http://github.com/purplecabbage/Jestitute



Nitobi


http://nitobi.com/


Platform Overview



Open source, woo!


Gaining momentum, fast. Fastest growing mobile
platform in the world.
60,000

devices shipping per
day.


Java.

. Dalvik VM.

.


Many versions
-
> fragmentation…



Android Fragmentation


We have Android 1.5, 1.6, 2.0, 2.0.1, 2.1, 2.1
-
update1… more
coming!


What’s worse: the APIs keep on changing. Makes it
difficult for
PhoneGap

to be completely and truly cross
-
platform:


In 2.0 we got HTML 5 support in the browser, to a degree.


2.0.1 adds to the supported HTML 5 features.


2.1 adds even more…


Joe Bowser, main developer of
PhoneGap

Android, talks
about this on his blog:
http://blogs.nitobi.com/joe/2009/11/20/android
-
splintering/


Android PhoneGap Features


If the phone can do it, PhoneGap apps can do it:


Sensors: accelerometer, vibrate, compass


GPS!


Network availability, offline storage


Media


File I/O


Complete list at
http://wiki.phonegap.com/Roadmap




How It Works


The browser on Android delivers our app.


You can instantiate a new browser instance (the class is
called WebView) from Java.


You can get it to load assets from within your app
-
> this
is where your HTML/CSS/JS comes in.


The WebView also has an API and allows us to do
some cool things with it:


We can enable JavaScript and (Android 2.0+) native
HTML 5 geolocation.


Android 2.0+ also allows us to mess with localStorage.

How It Works, pt. 2


Android, similarly to iPhone, has a neat function in its
API called ‘addJavaScriptInterface.’


It is amazing magic. It binds arbitrary Java class
instances that you work with on the native end to
global JavaScript objects within a WebView (a.k.a.
browser instance).


Let’s have a look:


The Crux of PhoneGap Android

gap
=

new

PhoneGap
(this,

appView
);

geo
=

new

GeoBroker
(
appView
,

this);

accel

=

new

AccelListener
(this,

appView
);

launcher
=

new

CameraLauncher
(
appView
,

this);

mContacts

=

new

ContactManager
(this,

appView
);

fs

=

new

FileUtils
(
appView
);

netMan

=

new

NetworkManager
(this,

appView
);

mCompass

=

new

CompassListener
(this,

appView
);


crypto
=

new

CryptoHandler
(
appView
);




// This creates the new
javascript

interfaces for
PhoneGap


appView
.
addJavascriptInterface
(
gap
,

"
DroidGap
"
);

appView
.
addJavascriptInterface
(
geo
,

"Geo"
);

appView
.
addJavascriptInterface
(
accel
,

"
Accel
"
);

appView
.
addJavascriptInterface
(
launcher
,

"
GapCam
"
);

appView
.
addJavascriptInterface
(
mContacts
,

"
ContactHook
"
);

appView
.
addJavascriptInterface
(
fs
,

"
FileUtil
"
);

appView
.
addJavascriptInterface
(
netMan
,

"
NetworkManager
"
);

appView
.
addJavascriptInterface
(
mCompass
,

"
CompassHook
"
);

appView
.
addJavascriptInterface
(
crypto
,

"
GapCrypto
"
);

Once we call
addJavascriptInterface,
we can then access the
Java functions present in
the Java class from the
JavaScript object we just
bound the class to

PhoneGap Plug
-
ins for Android


Full article courtesy of Joe Bowser here:
http://blogs.nitobi.com/joe/2009/12/17/introducing
-
ponygap
-
phonegap
-
plugins
-
for
-
android/


Although it IS doable, there is no ‘standard’ approach for
implementation. Fly by the seam of your pants. In general:


Write a Java class that encapsulates the functionality you are
looking to provide to your application.


In DroidGap.java, bind an instance of your class to some
named JavaScript object using the
addJavascriptInterface

method.


Add JavaScript wrappers, if necessary, to framework/assets
directory. If your functionality needs
callbacks
, error
handling and/or parameter parsing, you should probably
create a JavaScript wrapper for it.

Application Deployment


Of all PhoneGap supported platforms, Android is by
far the easiest to deal with when it comes to
deployment and administration.


No application reviews.


Cheap! Developer registration is $25 (compared to
$100 for iPhone and $275+ for BlackBerry).


Android Market is pretty rad, too, but needs to catch
up to iPhone. 20,000 Android apps compared to
130,000+ iPhone apps.

Overview


Fast cross
-
platform prototyping, how to do it.


Templating.


Offline strategies.


Persistent storage.


File API.


XUI overview.


When *not* to use PhoneGap.

Cross
-
platform Prototyping


Main advantage of
PhoneGap

is you
can reuse your web application
source code across platforms.


A good, quick approach is to write
one set of assets and ‘tweak’ across
platforms.


HTML and CSS can be, more
-
or
-
less, written once.


Highly recommend writing
percentage
-
based styles initially,
and down the road tweaking on a
per
-
platform basis.


Combined with a <meta
name=“viewport”> tag (which
tells the browser the size of the
screen it’s being viewed in),
results are good.

Cross
-
platform Prototyping with
PhoneGap
, cont.


JavaScript is tougher, mainly due to weak BlackBerry support.
However, latest XUI works on BlackBerry! More on this in a bit.


A process that has brought a measure of success for us is to first
determine which platforms to target, and then build your mobile
application logic in a JavaScript framework that works with the
‘lowest common denominator’ platform. JavaScript frameworks
are your friends (
jQuery
,
MooTools
, XUI, etc.).


Existing software development best practices apply. Use a layered
and modular approach for your JavaScript.


MVC (model
-
view
-
controller) paradigm is great for prototyping,
as you can revisit and, if need be, recode particular modules of
your app as you iterate.


Model =
PhoneGap

JS API + offline storage/cache (+
Lawnchair
?)


Controller = JavaScript


View = HTML + CSS


Templating


Common web development practice used to encapsulate view components of an app.


As you work on an app, you notice repeatable HTML/CSS patterns that come up. Don’t
copy+paste

it!


Encapsulate the view pattern HTML aka ‘template’ in a JavaScript string:

var

tweetTemplate

= ‘<div class=“tweet”>{USER} said
{MESSAGE}</div>’;


Create a JavaScript function that takes the template and replaces the tokens (placeholders) with actual
data:

function
tweetify
(data) {


var

tweets =
document.createElement
(‘div’);


var

newHTML

= ‘’;


for (
var

i =0; i<
data.length;i
++) {


var

tweet =
tweetTemplate.replace
(/{USER}/,data[i].user);


tweet =
j.replace
(/{MESSAGE}/,data[i].message);



newHTML

+= tweet;


}


tweets.innerHTML

+= tweet;


document.getElementById
(‘content’).
appendChild
(tweets);

}


This approach follows the MVC paradigm and is a good example of separation of concerns. Also easy to
read, easy to extend and reusable.


John
Resig

blogged about this, he doesn’t use regex but instead he uses:

tweetTemplate.split
(“match”).join(“replace”).

It’s quicker apparently:
http://ejohn.org/blog/javascript
-
micro
-
templating/

Offline Strategies


Inherently, mobile devices will not be networked all
the time. Bad coverage, on the plane, no data plan, etc.


Extremely important for every application to take this
into account, especially for iPhone. It is a hard criteria
in Apple’s App review process (to see how gracefully an
app handles lack of internet connection).


PhoneGap offers reachability API, example:
http://github.com/phonegap/mobile
-
spec/blob/master/tests/network.tests.js

Persistent Storage


iPhone has SQLite, Safari implements the HTML 5 spec.
Tutorial:
http://phonegap.pbworks.com/Adding
-
SQL
-
Database
-
support
-
to
-
your
-
iPhone
-
App


Note: each page in a
PhoneGap

app can have only a single
database object open, and its maximum store size is 5
megabytes (2 MB on Android, but you can change this to
suit your needs). Take this into account when using a single
-
page approach to a
PhoneGap

app (more on this later).


BlackBerry has ‘persistent storage’


a giant key/value
store. Code exists to access this, but we haven’t figured out
how to fit it into the
PhoneGap

API. Somehow it needs to
align with the other platforms. Ask me
(filip.maj@nitobi.com) for it if you want it!

File API


You can read/write files from
PhoneGap

too. Implementations
available at our own local repositories (not yet part of the spec /
public API).


http://
github.com/purplecabbage/phonegap
-
iphone/blob/master/PhoneGapLib/javascripts/core/file.js


BlackBerry native code is present but needs a JavaScript wrapper.


Android File I/O got revamped recently.


Also: Mobile Spec tests are NOT up to date and platforms are
fragmented on the implementation of this feature. It needs some
work!


Work is ongoing to line our file API up with the HTML 5
specification:
http://www.w3.org/TR/2009/WD
-
FileAPI
-
20091117/#dfn
-
empty

XUI Overview


Another (!) JavaScript framework: xuijs.com


This one’s special, though: specifically designed for mobile
devices.


Biggest win: small footprint (~6
-
10kb).


Inspired by
jQuery

with a very similar syntax.


Works on iPhone, Android, Symbian, Palm and… drum roll…
BlackBerry too! But you need to build it specifically for
BlackBerry; the output script files are labelled as core, more or
bb


the bb file is for BlackBerry.


Is the recommended framework to use with
PhoneGap
.

PhoneGap Performance Tips


For small apps, use a single HTML page.


Use JavaScript to show/hide page elements based on user
interaction instead of linking to a separate page.


Especially important for BlackBerry, since each new page request
forces the device to encode requested assets into base64 on
-
the
-
fly.


Obfuscate / crunch your JavaScript before release.


Devices only reserve a bit of memory for JavaScript interpreters
for the browser. If your JavaScript is small enough, it won’t be
necessary for the browser to constantly page your scripts in/out of
the browser memory. iPhone, for example, has 25kb of memory
reserved for JavaScript parsing.

PhoneGap Limitations


As important as knowing how to use PhoneGap is also
knowing when NOT to use it.


Complex games, intensive graphics. Use OpenGL for
that, not PhoneGap.


For slower phones (not iPhone, not Nexus One, not
Xperia X10), PhoneGap apps using the latest interactive
Google Maps APIs tend to be slow. Static maps OK,
though.