PhoneGap for Mobile Apps

needlessoybeanMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

52 views

jQuery

Mobile and HTML5 in
PhoneGap

for Mobile
Apps

var

subTitle

=
{


PhoneGap

is an HTML5 app platform that
allows developers to author native
applications with web technologies and get
access to APIs and app
stores

}
;

Agenda



Why
PhoneGap
?


Who is
PhoneGap
...really?


Getting Started with
PhoneGap


PhoneGap

APIs


Extending
PhoneGap


Final Considerations

Why
PhoneGap
?



There
are more than
100 000 000 WEB
developers!



The
web is
awesome!



Why
PhoneGap
?



The realistic
reason:

Cross
platform
applications with
HTML/JS will be
faster
and
easier



What is
PhoneGap

?


PhoneGap

is an open
-
source mobile
development framework produced by
Nitobi
,
purchased by Adobe Systems.



The resulting applications are hybrid,
meaning that they are neither truly
native

What is
PhoneGap

?


Your Code

What is
PhoneGap

?


Native Web View

Your Code

What is
PhoneGap

?


Native APIs

Native Web View

Your Code

What is
PhoneGap

?


Native App
-

.
apk
, .
xap
, etc.

Native APIs

Native Web View

Your Code

What is
PhoneGap

?


PhoneGap

uses the native browser on
the

device
to render the
HTML/CSS/JS



Keep
in mind that can affect the
experience It
also keeps apps nice and small

What is
PhoneGap

?


PhoneGap

uses
the
native
project
format
for
each
platform



Open, emulate,
and

test
from within
the

native development

environment
!


What is
PhoneGap

?


Because it’s using
the native
projects
it’s
fully extendable
.


What is
PhoneGap
?


PhoneGap

provides
a JavaScript library
that reaches out
into the native APIs


That means
anything the device
is doable

What is
PhoneGap
?


PhoneGap

is
completely open
source
and has
been
submitted
to
the
Apache
Foundation
.

http:// incubator.apache.org/callback/

What is
PhoneGap
?


The entire project
is
available
on
Github
:


https
://github.com/cordova

Getting Started with
PhoneGap


There are
multiple
ways
to “start”
with
PhoneGap
.


The project
includes
command
line tools
,
IDE
plugins,
and
Dreamweaver ships
with
PhoneGap

support
.

Getting
Started with
PhoneGap


Demo:

Hello
World

Getting
Started with
PhoneGap


Very important
to
keep
in mind
that
we’re
building a
mobile app
, not a
mobile web app.


You can use
ANY
framework
you want
,
but
try to design for
an app
.


PhoneGap

APIs


Out of the box
,
PhoneGap

provides
support for
a
number
of basic
device APIs.


-

Accelerometer

-

Camera

-

Capture

-

Compass

-

Connection

-

Contacts

-

Device

-

Events

-

File

-

Geolocation

-

Media

-

Network

-

Notification

-

Storage

PhoneGap

APIs


Supported
Features

PhoneGap

APIs


Camera
API
example

PhoneGap

for Windows Phone 8


Starting from Apache
Cordova 2.3.0, released
on 7th of January 2013 has a full support for
Windows Phone 8

http://
bit.ly/XlbV92



PhoneGap

in Windows 8 Store
Apps


Windows 8 apps can be designed and coded
using HTML, CSS and JavaScript just like
PhoneGap

apps can.

http://
bit.ly/VIITP3



PhoneGap

&
jQuery

for Windows 8



Because Microsoft has integrated a new
security model in Windows 8,
jQuery

has to
be modified slightly in order to be usable for
app development.

http://
bit.ly/PYyvyI


Debugging
PhoneGap



It’s all just HTML/JS,
so you
can use
your
browser
!


Take advantage
of
Chrome Developer
tools/Firebug
to
test
your
app’s UI.

Debugging
PhoneGap


But what about Device APIs
?



Because we’re in the web view, there is
no
way
to do line
-
by
-
line debugging
.

Debugging
PhoneGap


But what about Device APIs
?



Because we’re in the web view, there is
no
way
to do line
-
by
-
line debugging
.

Debugging
PhoneGap


Luckily we
have
Weinre
,
which lets
us debug
and
manipulate the
DOM from
our PCs
.

Debugging
PhoneGap


But
, a much easier way:

http://debug.phonegap.com
/



Extending
PhoneGap


For added
functionality
PhoneGap

provides
a

plug
-
in
mechanism
.


Includes OS
-
specific
code/libraries
and
the JS
to use it
in
PhoneGap

Some
of the
helpful ones
:
PayPal
, Facebook
,
Push
Notification


Extending
PhoneGap


Available
at

https
://
github.com/phonegap/phonegap
-
plugins



Considerations



Remember

that we’re on different
platforms


Considerations



Versus


Considerations


Couple of tips:


Always test features first (if !supported)


For UI
-
specifics, you can use the device


class to get device info


Considerations



Couple of tips:


Always test features first (if !supported)


For UI
-
specifics, you can use the device


class to get device info


Build
PhoneGap

Apps in the Cloud



One more thing:



build.phonegap.com


Build
PhoneGap

Apps in the Cloud



The Problem
:



You’re building a cross
-
platform app, but
dealing with
a lot of native projects


Build
PhoneGap

Apps in the Cloud



The
Solution:



Build
PhoneGap

Apps in the Cloud


Build includes
git

support
so you can
use
git

and host
projects
on
PhoneGap

or
build
a
project from
Github
.


Build
PhoneGap

Apps in the
Cloud


Sample
project in
Github
:



https://github.com/mmateev/TwitterCordovaApp/




Expect
very soon: SharePoint
Saturday!


Saturday,

June 8,
2013


S
ame familiar format


1
day
filled
with
sessions
focused on SharePoint technologies


Best
SharePoint
professionals in the region


Registrations will be open next week (15
th
)
!


www.SharePointSaturday.eu



Thanks to our Sponsors:

Diamond
Sponsor:

Platinum Sponsors:

Gold Sponsors:

Swag Sponsors:

Media Partners:

Q & A