Phone gap development, testing, and debugging

PhoneGap
DEVELOPMENT, TESTING,
AND DEBUGGING
By
Dr.T.Abirami
Associate Professor
Department of Information Technology
Kongu Engineering College
Perundurai Erode

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport“ content="width=device-width, height=device-
height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<script type="text/javascript" charset="utf-8“ src="phonegap.js"></script>
<script type="text/javascript" charset="utf-8">
function onBodyLoad()
{ document.addEventListener("deviceready",onDeviceReady, false); }
function onDeviceReady()
{ navigator.notification.alert("PhoneGap is ready!"); }
</script>
</head>
<body onload="onBodyLoad()">
<h1>HelloWorld2</h1>
<p>This is a sample PhoneGap application.</p>
</body>
</html>
PhoneGap Initialization

■ <Head> section of the web page are two new entries:
1. meta tags - describe the content type for the application
2. View port settings - used for the application and how to
scale the content on the screen
- to use the maximum height and width of the screen
- to specify (by the browser) to display the page zoom
level and dimension.
• content = "width = device-width" is used to set the pixel width of the
page or screen device.
• initial-scale = 1 sets the initial zoom level, when the page is loaded
for the first time.

■ <script type="text/javascript" charset="utf-8“
src="phonegap.js"></script>
- loads the PhoneGap API library and makes the
PhoneGap APIs available to the program.
■ <body onload="onBodyLoad()">
- the code registers an event listener that instructs the
application to call the onDeviceReady function when
the device is ready

onDeviceReady() event
PhoneGap consists of two code bases:
1. native and
2. JavaScript.
■ While the native code is loading, a custom loading image is
displayed. However, JavaScript is only loaded once the DOM
loads.
■ This means your web application could, potentially, call a
PhoneGap JavaScript function before it is loaded.
■ The PhoneGap deviceready event fires once PhoneGap has
fully loaded. After the device has fired, you can safely make
calls to PhoneGap function.

The PhoneGap Navigator
■ The navigator object contains information about
the browser.
■ update the user interface (UI) with content created
through API calls
■ When an HTML document is loaded into a web
browser, it becomes a document object.
■ The document object is the root node of the HTML
document.

Leveraging PhoneGap APIs
■ Updated the code in the onDeviceReady function
■ the program updates a portion of the application’s content
with an ID of appInfo with information about the device
running the application and the version of PhoneGap
used to build the application.
■ Device-specific information is available via the PhoneGap
device API
■ PhoneGap APIs: inconsistent implementation of an
API across different mobile device platforms. The call
to the device.platform API is supposed to return the
name of the mobile device platform the application is
running on.

Enhancing the User Interface of a
PhoneGap Application
■ to enhance the UI of a PhoneGap application using jQuery Mobile (jQM)
■ jQuery Mobile is a framework for creating mobile web applications.
■ JQuery Mobile is a user interface framework, built on jQuery Core and used
for developing responsive websites or applications that are accessible on
mobile, tablet, and desktop devices.
■ jQuery Mobile uses HTML5 & CSS3 for laying out pages with minimal
scripting.
https://www.quanzhanketang.com/jquerymobile/jquerymobile_intro.html
■ jQM currently supports most of the mobile platforms supported by
PhoneGap.

Why Use jQuery Mobile?
■ It creates web applications that it will work the same way on the
mobile, tablet, and desktop devices.
■ It is compatible with other frameworks such as PhoneGap,
Whitelight, etc.
■ It provides a set of touch-friendly form inputs and UI widgets.
■ The progressive enhancement brings a unique functionality to all
mobile, tablet, and desktop platforms and adds efficient page
loads and wider device support.

Testing and Debugging PhoneGap
Applications
■ Running a PhoneGap Application on a Device Simulator or
Emulator
■ Leveraging PhoneGap Debugging Capabilities

Debugging errors
■ console.log() is a function that writes a message to log on the debugging console,
such as Webkit or Firebug.
■ The console object is an extension to the DOM.
■ The console.log() should be used in code only during development and debugging.
Using the console object, developers can write messages to the browser’s console,
■ console.log("message");
■ console.warn("message");
■ console.error("message");
■ In a browser you will not see anything on the screen. It logs a message to a
debugging console. It is only available in Firefox with Firebug and in Webkit based
browsers (Chrome and Safari). It does not work well in all IE releases.
https://www.w3schools.com/jsref/met_console_log.as
p

Run your app
1. Run on a real mobile device - Connect your device
to your development machine with a USB cable
2. Run on an emulator
T.ABIRAMI/KEC 12

Emulator
■ The emulator is an Virtual Device
(AVD), which represents a specific mobile
device.
■ To execute and test our mobile application on
our PC
■ It provides all the functionality of a real
device.
T.ABIRAMI/KEC 13

Virtual Device (AVD)
■ It is a device configuration that is run with the
emulator.
■ It works with the emulator to provide a virtual
device-specific environment in which to install and
run mobile apps.
T.ABIRAMI/KEC 14

Third-Party PhoneGap Debugging
Tools
■Ripple Mobile Environment
Emulator
■Weinre (Web Inspector Remote)

Ripple Mobile Environment Emulator
■ The Ripple Emulator is a multi-platform mobile device emulator
that runs in a web browser and is custom-tailored to mobile
widget testing.
■ It providing a desktop browser–based interface you can use to
test your PhoneGap applications
■ Tiny Hippos, the company that produced of the Ripple Mobile
Environment Emulator
■ To test BlackBerry WebWorks applications
■ It is implemented as an extension to the Google Chrome
browser
■ It is not designed to replace testing on real devices, device
simulators, or device emulators.

BlackBerry Developers
■ https://developers.blackberry.com/
■ https://developer.blackberry.com/html5/documentation/v1_0/getting_started_with_ripple_1866
966_11.html

Weinre (Web Inspector Remote)
■ WEb INspector REmote was built to enable remote inspection and
debugging of web pages across different devices.
■ For PhoneGap development, it allows a developer to debug a web
application on physical device or a device emulator or simulator.
■ useful tool for debugging web applications.
■ It’s a useful tool, especialy when you need to debug a ”UIWebView”
or Safari on iOS while developing on Linux or Windows.
■ weinre reuses the user interface code from the Web Inspector project
at WebKit so most front-end developers should already be familiar
with the toolbox.
■ to allow you debug web pages on a mobile device such as a phone.

weinre - Home
■https://people.apache.org/~pmuellr/weinr
e/docs/latest/Home.html
■https://developers.google.com/web/tools/
chrome-devtools/remote-debugging

Web Development Tools
■https://developer.apple.com/safari/tools/

Dealing with Cross-Platform
Development Issues
■ API Consistency
– application for platforms that do not
support the particular API
– For most of the PhoneGap APIs, the
documentation lists that the APIs are
supported only on Android, BlackBerry,
and iOS devices
- don’t like to write (or update)
documentation

■ Multiple PhoneGap JavaScript Files
– each platform’s JavaScript file is
different
– to copy over the web content and
then also make sure the correct
PhoneGap JavaScript file was in
the folder.
Development Issues

■ Web Content Folder Structure - nonstandard
project folder structures for PhoneGap projects.
■ Application Requirements - need to supply
additional files in your application to
accommodate the requirements for a particular
OS version.
Development Issues

■ Application Navigation and UI - Mobile device platforms
typically share some common elements but at the
same time implement unique features or capabilities
that help set them apart from competitors
■ Application Icons - Each mobile platform and often
different versions of a particular device OS have
different requirements for application icons.
Development Issues

Build An App
To compile and generate an executable file for
different platforms.
Following are the ways which you can use to build an
app.
■ Build An App Using PhoneGap Build
– By uploading a zip file
– Using GIT
■ Build An App Using CLI
https://build.phonegap.com/

Build An App Using PhoneGap
Build:
■ PhoneGap Build is a cloud service used to build apps
online.
■ All you have to do is to upload the project to PhoneGap Build
and it will create an executable file of apps for different
platforms.
It will generate:
■ APK for Android (Android Package)
■ IPA for IOS (iPhone application archive file )
■ XAP for Windows :Microsoft Cross-Platform Audio Creation
Tool (XACT) / (eXtensible Ajax Platform)

Steps
1. Open ‘PhoneGap Build‘ and sign up.
2. Log into the PhoneGap Build Account.
Now you have 2 ways to upload a project:
By Using GIT
■ You can keep your app open source or private. PhoneGap
Build has different plans for private apps.
■ You need to upload your project on GitHub and copy the link
of that repository and paste it here.
■ Now click on ‘Pull from .git repository‘. Your project will be
uploaded.
By Uploading A ZIP File
■ Click on the ‘private’ tab.

References
■ https://cordova.apache.org/docs/en/latest/cord
ova/events/events.html#deviceready

What is an API?
(Application Programming Interface)
■ It is a software intermediary that allows two applications to talk to each
other.
■ It is a software-to-software interface that enables two applications to
exchange data among each other.
■ The PhoneGap Build API allows applications to use the PhoneGap Build
web service to create, build, update, and download PhoneGap apps.
■ PhoneGap is defined as an API used for accessing the native mobile
resources that enables the developers to create mobile applications using
the standard web technologies.
For example:
■ Each time you use an app like Facebook, send an instant message, or
check the weather on your phone, you’re using an API.

Document Object Model (DOM)
■ It is an application programming interface (API) for HTML
and XML documents.
■ When a web page is loaded, the browser creates
a Document Object Model of the page.
■ It defines the logical structure of documents and the way
a document is accessed and manipulated.
https://www.w3schools.com/js/js_htmldom_events.asp

addEventListener() method Syntax
element.addEventListener(event, function, useCapture);
■ The first parameter is the type of the event (like "click" or
"mousedown" or any other HTML DOM Event.)
■ The second parameter is the function we want to call when the
event occurs.
■ The third parameter is a boolean value specifying whether to use
event bubbling or event capturing. This parameter is optional.
Note that you don't use the "on" prefix for the event; use "click"
instead of "onclick".
document.addEventListener("deviceready",onDeviceReady, false);
https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Step 1: Install PhoneGap
■ http://docs.phonegap.com/getting-started/1-install-phonegap/desktop
Step 2: Install PhoneGap
 The PhoneGap Developer App is a mobile app that runs on devices
and allows you to preview and test the PhoneGap mobile apps you
build across platforms without additional platform SDK setup.
 It automatically provides access to the PhoneGap core APIs providing
instant access to the native device features without having to install
any plugins or compile anything locally.
 It's meant to provide an easy way for developers to get started creating
and testing their PhoneGap applications quickly with minimal setup.
 Locate the free PhoneGap Developer app from one of the following
supported app marketplaces and install it to your mobile device:
• Google Play
• Windows Phone Store
• ~iTunes~ Currently not available but you can still build it yourself!

Create Your App
http://docs.phonegap.com/getting-started/3-create-your-
app/desktop/

Run Your App
green play button to be
highlighted and a green
bar showing the server
address it's running on
at the bottom of the
PhoneGap Desktop.
Go to your mobile device
where the PhoneGap
Developer App is running,
enter the server address on
the main screen and
tap Connect.
You should see the
connection occur followed by
a success message as shown
below. If you receive an error
of any kind, ensure once
again that you are connected
to the same network on both
your device and computer.

Phone gap development, testing, and debugging

Recommended

More Related Content

What's hot (19)

Similar to Phone gap development, testing, and debugging (20)

More from Kongu Engineering College, Perundurai, Erode (20)

Recently uploaded (20)

Phone gap development, testing, and debugging