Combining web skills with PhoneGap to build mobile apps

miststizzaMobile - Wireless

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

63 views

Combining web skills with PhoneGap to build mobile apps


Designers can now use web standards they already understand, such as HTML, JavaScript, and CSS, in a
whole new market: the mobile device. Web standards are technologies for creating web content that
are accepted across the industry, such as specifications,

languages, and conventions.
We have

been
using HTML, CSS, and JavaScript to create websites, and now
we

can use those same technologies to
create apps that run on mobile devices
.


PhoneGap:
Our

bridge to mobile development


PhoneGap is an open
-
source.
Pho
neGap enables you to wrap your HTML and JavaScript code to function
like a mobile app. How
the code could be wrapped

depends on your platform. As of version 1.3,
PhoneGap runs on Android, BlackBerry Tablet OS, iOS, Windows Phone, WebOS, and Symbian. Each
p
latform has its own particular setup and installation routine, but the end result is an HTML page that
runs on
a

mobile device. HTML, CSS, and JavaScript are packaged by PhoneGap to run as a mobile
application.

This is not all what Phonegap can do.

We use

your mobile browser to view websites, and there are
techniques to make that content readable on small devices. Where PhoneGap shines is in how it extends
your HTML and JavaScript features to work with the device. PhoneGap provides a basic JavaScript API
(i
nterface) to your device and allows you to do much more than a standard mobile website. These
features include the following:


Getting started with PhoneGap


The process essentially involves downloading the PhoneGap source, setting up a project in the IDE
used
for the target platform (such as Eclipse for Android or Xcode for iOS), and setting up a few configuration
settings.

Conversely, users of Adobe Dreamweaver CS5.5 software will be happy to discover that PhoneGap
support is baked right in. Sites can be
configured to build to Android or iOS devices via PhoneGap.

No matter what tool you use, the end result will be an HTML file and a JavaScript file called phonegap.js.
This JavaScript file is platform
-
specific and provides the API hook for all the features
described earlier.
The following HTML file shows a simple application:

<!DOCTYPE HTML>


<html>


<head>


<meta name="viewport" content="width=320; user
-
scalable=no" />


<meta http
-
equiv="Content
-
type" content="text/html; charset=utf
-
8">



<title>PhoneGap</title>


<script type="text/javascript" charset="utf
-
8" src="js/phonegap
-
1.3.0.js"></script>


</head>


<body>


<h1>Welcome to Mobile!</h1>


<p>


Mmmmm, I love me some mobile goodness!


</p>


</body>

</html>




Building an application


Example of an application with some actions:

To begin, we need to create a special event that your PhoneGap applications can listen for. It's called
deviceready, and it is an event that signifies your app can use the special PhoneG
ap features described
earlier to start talking to the device hardware. The following is an update to our earlier code. Note the
use of the init() call in our body tag as well as the event listener:

<!DOCTYPE HTML>


<html>


<head>




<meta
name="viewport" content="width=320; user
-
scalable=no" />


<meta http
-
equiv="Content
-
type" content="text/html; charset=utf
-
8">


<title>PhoneGap</title>


<script type="text/javascript" charset="utf
-
8" src="js/phonegap
-
1.3.0.js"></script>




<s
cript>


function init(){



document.addEventListener("deviceready", startup);


}



function startup(){



alert('Ready');


}


</script>



</head>


<body onload="init()">



<h1>Contact Search</h1>



<form>



<
input type="text" id="name"><br/>



<input type="button" id="searchButton" value="Search">



<div id="results"></div>


</form>



</body>

</html>

</html>



Useful links:

http://www.tricedesigns.com/2012/02/14/what
-
is
-
phonegap
-
other
-
common
-
questions/

http://www.worklight.com/pro
duct/overview/worklight
-
device
-
runtime/phonegap?gclid=CMjMyurn164CFQpjTAodO2xk3Q

https://play.google.com/store/apps/details?id=com.gwtmobile.phonegap
&feature=search_result


Debugging Phonegap apps on desktop:

http://debug.phonegap.com/client/#anonymous


Useful Books:

Android Apps:

http://books.google.com/books?id=zWndz5OpUzgC&printsec=frontcover&dq=phonegap&hl=en&sa=X&
ei=l3lWT7HgAsuosAK
-
gpjLCQ&ved=0CDMQ6AEwAA#v=
onepage&q=phonegap&f=false


Phonegap:

http://books.google.com/books?id=uc4L1FqdKNQC&printsec=frontcover&dq=phonegap&hl=en&sa=X&
ei=l3lWT7HgAsuosAK
-
gpjLCQ&ved=0CEIQ6AEwAg#v=onepage&q=phonegap&f=false

http://books.google.com/books?id=SZcHQq1LX6wC&printsec=frontcover&dq=phonegap&hl=en&sa=X&
ei=l3lWT7HgAsuosAK
-
gpjLCQ&ved=0CEkQ6AEwAw#v=onepage&q=phonegap&f=false


What is
phonegap?


"PhoneGap is an open source solution for building cross
-
platform mobile apps with modern, standards
-
based Web technologies. Based on HTML5, PhoneGap leverages web technologies which we the
developers of UWS already know best
-

HTML and JavaScript
."


Main Idea

The idea is that, suppose we have a web application that we would want to deploy on a mobile
platform. In order to have them on a mobile platform, we need to develop them in the native languages
of the mobile platforms like Android, iPhone, e
tc. PhoneGap provides ways to develop such apps for
multi
-
platform and using the web technologies.

For example, we have come across many web applications such as one that lets us invite friends
to a movie as soon as we book a movie ticket. The app lets us
select which friends to invite directly from
a list of email addresses linked to the gmail account or Facebook. To do a similar thing on a mobile
platform through web technologies is a challenge. That means, if you're the developer of such an app,
you'll m
ost probably have to deal with consuming the platform's contact book using, for doing which,
each platform would obviously have its own different ways. So there are 2 problems here:


1) How can you query the platform's contact book from within your web app
lication which is being
written in JavaScript and has no knowledge of the platform's APIs.

2) How can you do so in a platform agnostic way, so that your web app works not just on Android but
also on iPhone, notwithstanding the different ways of using the c
ontacts book in both.


PhoneGap aspires to be the answer to both of the above questions. How? It provides APIs which
abstract the platform's contact book for you, so that you only deal with the PhoneGap API and let
PhoneGap do the rest of the magic for you
.

Getting started..

Its not easy!!!

Phonegap requires a bunch of things to be installed on the machine before getting started. I found this
document about installing phonegap
-

http://wiki.phonegap.com/w/page/16494774/Getting
-
started
-
with
-
Android
-
PhoneGap
-
in
-
Eclipse
. And that too, doesn't somehow work as stated. :(


Phonegap

can be directly installed on Eclipse as a plugin. All you need to do is go to Help>Install new
software>Add and use the download site
-

http
s://svn.codespot.com/a/eclipselabs.org/mobile
-
web
-
development
-
with
-
phonegap/tags/r1.2/download
. Then making sure "contact all available update sites"
is checked, install the phonegap plugin.




A good introduction to the API components of PhoneGap leverages

the programming skills of
HTML, CSS and JavaScript.



PhoneGap doesn’t allow “code once, deploy multiple times”. The application needs to be tested
and tweaked on all the platforms needed.



If working with different devices, we need separate environments fo
r each wrapper. So
basically, a desktop application cannot be directly ported to and Android device. It needs to be
tweaked on every platform and customize as per the phoneGap wrapper. For example, there
are three buttons on Android device: back, home and
menu buttons. So the app will need the
phoneGap wrapper using the three buttons unlike just one in iPhone. The elementary code for
the app would be the same on HTML. But the wrapper would be different for each platform.



PhoneGap application isn’t just abou
t the PhoneGap API, it is all about HTML, CSS and JS. It’ll be
a dynamic application on a device.



Eclipse could be launched and Android based PhoneGap apps can be tested on it. BUT if the
project is created on PhoneGap HTML, CSS and JS, it is easier to use

various command line tools.



Phonegap architecture

Overall Architecture








Resources:

http://jquerymobile.com/test/


This site has good resources to work on through jQuery Mobile