mobicon_paper

Cross-Platform Emulator for Phonegap
Vineet Kumar
Indian Institute of Technlogy (BHU), Varanasi
vineet.kumar.cer11@iitbhu.ac.in
Abstract
In recent years mobile phone has found more usage than comput-
ers. This can be seen by increase in number of device users based
on platforms like iOS, Android, Windows Phone. A Mobile De-
velopement Framework called PhoneGap enables app developers
to develop applications using web technologies instead of relying
on platform-specific APIs like those mentioned earlier. This pa-
per explains developing an emulator for Phonegap which can be
deployed in any web browsers. Simulation of mobile hardware is
done using Javascript and flash which are used to develop the em-
ulator. The simulator is linked to Phonegap where it makes native
calls. This simplifies the testing and development environment for
cross-platform application without installing heavy native applica-
tion tool kits in our PC.
Categories and Subject Descriptors D.2.5 [Testing Tools]: Tech-
nological
General Terms Cross-Platform, Hybrid Applications, Emulator,
Simulator
Keywords Cross-Platform, PhoneGap, Emulator, Mobile Appli-
cation, Simulator, Development Environment
1. Introduction
Nowadays, handheld devices like Apple iPhone and iPad, Google
Nexus and Microsoft Lumia and Surface have become prevalent.
The main advantage for each device is the availability of applica-
tions. Thus, application development for these devices has become
a major issue. The traditional approach involves developement in
programing languages like Objective-C for iOS devices, Java for
Android devices and C# for Windows devices. This becomes a te-
dious task for a developer, writing separate codes in all three lan-
guages [1].
But now through Cross-Platform developement tools, applica-
tions can be developed on multiple platforms using same code
base. This increasing popularity of is because of the characteris-
tic feature to compile the application source code for multiple sup-
ported Operating Syatems. These tools depend heavily on web pro-
gramming languages like HyperText Markup Language (HTML),
JavaScript and Cascading Style Sheets (CSS) with some native
wrapper code for accessing native Application Program Interfaces
Permission to make digital or hard copies of all or part of this work for personal or
classroom use is granted without fee provided that copies are not made or distributed
for profit or commercial advantage and that copies bear this notice and the full citation
on the first page. Copyrights for components of this work owned by others than ACM
must be honored. Abstracting with credit is permitted. To copy otherwise, or republish,
to post on servers or to redistribute to lists, requires prior specific permission and/or a
fee. Request permissions from permissions@acm.org.
MobileSoft ’15, May 16–17, 2015, Florence, Italy.
Copyright c 2015 ACM [to be supplied]...$15.00.
http://dx.doi.org/10.1145/
(API) like Camera, Contacts, etc [2]. The application development
has become easier and time saving after using such tools. This pa-
per aims on developement of an Emulator for the most popular
framework for Cross-Platform application devlopment, Phonegap.
The emulation is deployed in the web browser using simulated mo-
bile hardware.
2. Background Works
2.1 Web Standards
The World Wide Web is basically built the three most common lan-
guages - HTML, CSS and JavaScript. Hypertext Markup Language
communicates its purpose by its name. HTML divides up a doc-
ument, specify its contents and structure, and define the meaning
of each part (headings, paragraphs, bulleted lists, etc.) Elements
are used to identify the different components of a page. Cascading
Style Sheets controls the elemental is style and positioning. Its easy,
using style declarations, to change all paragraphs to be double-
spaced (line-height: 2em;), or to make all second-level headings
green (color: green;). For dynamic functions in web applications
JavaScript is used. Programs written in JavaScript are executed
in the web browser, requiring no special software to be installed.
JavaScript allows addition of powerful interactivity and dynamic
features to your web site. Only a few limitations brings us to server-
side programming languages, and dynamic web pages [3].
2.2 Phonegap
PhoneGap is an application container technology that allows you
to create natively-installed applications for mobile devices using
HTML, CSS, and JavaScript. PhoneGap provides an application
programming interface (API) that enables you to access native
operating system functionality using JavaScript. We can build our
application logic using JavaScript, and the PhoneGap API handles
communication with the native operating system [4].
2.3 jQuery
jQuery is a fast and concise JavaScript Library that simplifies
HTML document traversing, event handling, animating, and Ajax
interactions for rapid web development [1]. jQuery was designed
to change the way, JavaScript was written [5]. It provides a simple
way to develop and reduce codes and time efficiency.
2.4 JSC3D
JSC3D library provides a 3d object viewer for presenting 3d mod-
els and small scenes on a web page. JSC3D is coded entirely in
Javascript and requires an HTML canvas to perform rendering and
interactions. JSC3D is built on pure Javascript software rendering
using 2d canvas technology as well as an optional WebGL back-end
that provides more efficient rendering. It is designed to be widely
compatible with most major browsers that support HTML5 Canvas
feature [6].

2.5 Adobe Flash
Adobe Flash (formerly called Macromedia Flash and Shockwave
Flash) is a multimedia and software platform used for creating
vector graphics, animation, games and rich Internet applications
(RIAs) that can be viewed, played and executed in Adobe Flash
Player. Flash manipulates vector and raster graphics to provide
animation of text, drawings, and still images. It allows bidirectional
streaming of audio and video, and it can capture user input via
mouse, keyboard, microphone and camera. Flash applications and
animations can be programmed using the object-oriented language
called ActionScript [7].
2.6 ScriptCam
ScriptCam is a popular JQuery plugin to manipulate webcams. It
takes snapshots, detect movement and colors, record videoclips,
generate animated GIFs, make thumbnails and organize one-to-one
and one-to-many videochats using JavaScript on your own site [8].
ScriptCam camera access feature required to load a flash object on
the web page dynamicaly with the help of jQuery and JavaScript.
2.7 jStorage
jStorage is a cross-browser key-value store database to store data
locally in the browser. It works well with any other JavaScript
library on the same webpage. jStorage supports storing Strings,
Numbers, JavaScript objects, Arrays and even native XML nodes
which kind of makes it a JSON storage. jStorage also supports
setting TTL values for auto expiring stored keys and - best of all -
notifying other tabs/windows when a key has been changed, which
makes jStorage also a local PubSub platform for web applications
[9].
2.8 Bootstrap
Bootstrap is a free collection of tools for creating websites and web
applications. It contains HTML and CSS-based design templates
for typography, forms, buttons, navigation and other interface com-
ponents, as well as optional JavaScript extensions [10].
3. Simulating Mobile Components
Mobile components like sensors, camera etc play a very important
role of the application devlopment. Phonegap have many differ-
ent API’s for accessing motion sensors, camera, location and files.
We can use JSC3D library to create 3D objects like a globe or a
phone to simulate motion sensors viz. accelerometer and geoloca-
tion which are be triggerred by the movement of mouse the object.
Google Maps can also be used for location purpose. Camera can
be simulated by using the camera of the devlopment machine us-
ing Adobe Flash object. Similarily with the help of JavaScript and
Flash we can simulate all other API’s in Phonegap.
4. Native Calls
Phonegap applications are simple web pages including phonegap.js
or cordova.js as script. The phonegap.js file makes the native call
to mobile operating systems. The main comcern is finding the
similarity between the APIs when it tries to make a native call.
When a JavaScript function is called from a Phonegap API it
associates two callback methods - containing success and error
messages. When we try to open a phonegap application on a simple
web browser we will always get an error callback message. This
implies that phonegap has failed in making a native call. So we
have to reach the point where it is trying to make the native call
and modify such that it gets a values from the simulated mobile
component. In all of the standard API’s of Phonegap for Windows
Phone the point where it is trying to make the native call is a file
named as ”proxy”. This proxy file is supposed to recieve a JSON
from the native hardware. From this point on, the browser fails
to proceed. Here only we have to pass values from our simulated
mobile component.
Following is the proxy file for the Compass API of Phonegap
[11].
1 getHeading: function (win , lose) {
2 var deviceCompass = Windows.Devices.Sensors
.Compass.getDefault ();
3 if (! deviceCompass ) {
4 setTimeout(function () {
5 lose( CompassError .
COMPASS_NOT_SUPPORTED );
6 }, 0);
7 } else {
8 deviceCompass . reportInterval = Math.max
(16, deviceCompass .
minimumReportInterval );
9 this. onReadingChanged = function (e) {
10 var reading = e.reading ,
11 heading = new CompassHeading (
reading.headingMagneticNorth ,
12 reading.headingTrueNorth , null , reading.
timestamp.getTime ());
13 win(heading);
14 };
15 deviceCompass . addEventListener ("
readingchanged ", this.
onReadingChanged );
16 }
17 },
18 stopHeading: function (win , lose) {
19 var deviceCompass = Windows.Devices.Sensors
.Compass.getDefault ();
23 }, 0);
24 } else {
25 deviceCompass . removeEventListener ("
readingchanged ", this.
onReadingChanged );
26 this. onReadingChanged = null;
27 deviceCompass . reportInterval = 0;
28 win ();
29 }
30 }
Listing 1. Compass API Proxy
As we can see in above code in the line no. 12 phonegap is trying
to access mobile component to make a native call. This is where
we have to call our Mobile Simulator to pass values for a success
callback. After removing unnecessary code this will be final proxy
file.
1 getHeading: function (win , lose) {
2 var reading = MobileSimulator .plugin.compass
.values (),
3 heading = new CompassHeading (reading.
headingMagneticNorth ,
4 reading.headingTrueNorth , null , reading.
timestamp);
5 win(heading);
6 },
7 stopHeading: function (win , lose) {
8 var deviceCompass = true;

12 }, 0);
13 } else {
14 win ();
15 }
16 }
Listing 2. Passing Simulator Values
5. Emulator Development
There are no well known toolkit and development environment
available for testing, specifically targeting hybrid applications. For
testing such applications one has to install the native toolkit of ei-
ther Android, Windows or iOS. Import the Phonegap code for re-
spective OS and test over it. Our aim is to build an emulator of
Phonegap as a testing environment. We will modify the standard
API’s of Phonegap as well as main script file so it could work on
a normal web browser. Hence, this emulator can run such applica-
tions on popular web browsers. Mobile component will be simu-
lated using JavaScript and Flash Objects.
Figure 1. Emulator Architecture
Emulator design and development can divide into two major
components.
5.1 Simulation Controls
JavaScript, jQuery and Flash will bring the mobile hardware sim-
ulation control on the emulators page with the help of following
libraries.
• JSC3D : This library will be use to create 3D Earth Globe and
Mobile Phone such that developers can move, rotate, zoom the
3D objets to generate values at the native calls.
• ScriptCam : This library will be use to access devlopment
computer’s camera to capture image or video.
• jStorage: This library will use to access files or contacts.
5.2 Interface Design
HTML, CSS and JavaScript will provide the basic interaction and
interface of the emulator whilw following library will use to en-
hance the interface and make emulator feels more intelligent.
• jQuery : will be use to enhance logical interactions of emula-
tors.
• Bootstrap : will be use make the emulators interface more
beautiful and structured.
6. Conclusion
This emulator and its cross-platform nature will bring a revolution
to mobile application development and future of cross-platform
mobile applications.
Acknowledgments
Author wants to acknowledge Unisys Corporation and Department
of Mathematics and Computing, Indian Institute of Technology,
BHU for their support and guidance for the project.
References
[1] Guangyuan Piao and Wooju Kim, Introduction to iPad Application
Development with PhoneGap, IACSIT, Vol. 4, No. 1, February 2013
[2] Avinash Shrivas, Anandkumar Pardeshi, Student Information System
using PhoneGap Framework, IJETEA (ISSN 2250-2459, ISO 9001:2008
Certified Journal, Volume 3, Issue 9, September 2013)
[3] How does the Internet work [Online]. Available:
https://www.w3.org/wiki/How does the Internet work
[4] PhoneGap Explained Visually [Online]. Available:
http://phonegap.com/2012/05/02/phonegap-explained-visually/
[5] jQuery Google Feed Plugin [Online]. Available: http://jquery.com/
[6] jsc3d : A web 3d object viewer using pure javascript and html canvas
[Online]. Available: http://code.google.com/p/jsc3d/
[7] Adobe Flash [Online]. Available:
http://en.wikipedia.org/wiki/Adobe Flash
[8] ScriptCam [Online]. Available: https://github.com/teleline/ScriptCam
[9] jStorage - store data locally with JavaScript [Online]. Available:
http://www.jstorage.info/
[10] Bootstrap (front-end framework) [Online]. Available:
http://en.wikipedia.org/wiki/Bootstrap (front-end framework)
[11] CompassProxy.js [Online]. Available:
https://github.com/apache/cordova-plugin-device-
orientation/blob/master/src/windows8/CompassProxy.js

mobicon_paper

Related slideshows

More Related Content

mobicon_paper