NatiWeb implementation paper
How NatiWeb has been implemented - architecture and screenshots. Published at IJIRS
Published on: Mar 3, 2016
Transcripts - NatiWeb implementation paper
, Shubham Chandel#2
, Vishwajeet Chandel#3
, Mahesh Pavaskar*4
Student, Department of Computer Engineering, University of Pune, MMIT, Lohgaon
Pune, Maharashtra, India
Lecturer, Department of Computer Engineering, University Of Pune, MMIT, Lohgaon,
Pune, Maharashtra, India
Abstract—Considering the present challenges of developing the
Web as an operating system which include the fact that HTML5
is still to be fully incorporated by most mobile web browsers, a
full fledged web operating system is still a fledgling concept.
With NatiWeb, we have developed a miniature of the Web as an
operating system, by providing a native interface through our
application which connects to the web and provides features
similar to the traditional native interface used for interacting
with core mobile applications such as phonebook. Considering
the advancement in cross-platform technologies for application
deployment, we have implemented NatiWeb as a cross platform
application using PhoneGap.
Keywords— web applications, HTML5, interface, operating
system, natiweb, phonegap.
The concept of the web as an operating system has already
gained momentum and is being practically worked out by
Nokia’s Cloudberry for mobile phones to check its
feasibility if and when it enters the commercial market.
Keeping in mind the ongoing trend and the user’s
experience with multiple mobile devices as well the
challenges in chalking out a full fledged web-based operating
system, we had presented NatiWeb – A cross platform
native application for mobile phones in our previous paper.
NatiWeb has been developed with an aim of providing a web
interface to perform core functions of storing, accessing and
retrieving data from the mobile’s phonebook or dialling a call
or sending and receiving messages. Through this paper, we
will present the implementation details, as to how NatiWeb is
built, the core features that it has accomplished as well as
other related work that is going on regarding the web as an
II. NATIWEB: TECHNOLOGIES
Native + Web, as it has been rightly christened is a
native application which provides a web interface for
interacting with the mobile device’s core features such as
phonebook, dialer, camera, etc as well as for storing,
accessing and retrieving the user’s data alongwith other web
applications that will be made available in the web interface of
Fig. 1 shows a detailed description of the technical
architecture of NatiWeb.
The development of NatiWeb can be divided into two
A. The Client side
B. The Server side
A. Client Side
In the client side or to be specific, on the mobile device,
NatiWeb uses web technologies best known to developers –
1) HTML is used as a front-end tool for developing the
structure of NatiWeb.The forms are all created using
HTML and styled with CSS.
handling on the client side.
3) Java is responsible for loading these HTML pages on
the user’s device using the loadUrl function from the
Apache Cordova package which can be implemented
in any IDE (We have implemented in Eclipse).
4) PhoneGap build is used to create the native APK file
for different devices.
Fig 1:Detailed architecture of NatiWeb
B. Server Side
NatiWeb has a web interface built on top of the native
application. This web interface requires server side technology
to interact with the client device and do what it aims to do :
store and access data – Phonebook for now as the standard for
messages is not available at present, in PhoneGap.
The local storage for PhoneGap has been deprecated. This
has prompted us to use the cloud as a medium for storing data
about the application as well as the users. RedHat’s Openshift
Cloud is an open source technology that we have used in our
application for storing the user’s data as well running the
backend in NatiWeb.
NatiWeb’s backend consists of a MySQL database which is
available within Openshift and a repository for storing the
To handle data from the cloud and to allow interaction
between the remote cloud and the client, PHP has been used
for establishing a connection between the client device and the
PhoneGap, as of now, does not support PHP directly and
JSON is a lightweight data- interchange format that is built on
two structures, that we use:
1) A collection of name/value pairs
2) An ordered list of values..
JSON is thus, used to transfer values from the client side to
server side and vice versa.
III. BUILDING NATIWEB
A. Client Side Development
The Eclipse IDE is chosen to start the development of the
application on the client device.
The Android SDK plug-in is installed in Eclipse itself for
developing an Android application at first.
Fig 2: Eclipse IDE and Android SDK
After configuring the Android Project in the Eclipse IDE,
according to the steps given in the PhoneGap documentation
by Adobe, we are now ready to start building HTML forms
which consist of creating an account on NatiWeb, logging into
that account and performing functions of:
1) storing data (Phonebook at present)
2) accessing and retrieving data (Phonebook at present)
3) Playing games (Tic Tac Toe at present).
B. Server Side Development
Openshift cloud provides a platform for hosting
applications (PaaS). In the case of NatiWeb, this
application is a PHP application which consists of a
This application comes in the form of a repository and a
free domain name with the option of choosing a namespace
for an application.
Fig 3: Openshift Cloud
After creating an account and creating a namespace and
repository to store the data, the next part is creating a database
in MySQL which is provided in Openshift itself.
Fig. 4: MySQL Database handling using
Tables are required to store user’s account information and
the data of each user.
Fig 5: GIT GUI for uploading files to Openshift
The files for the PHP application are loaded to the server
using the GIT GUI.
IV.WORKING WITH NATIWEB
NatiWeb has been built with the following aims in mind:
NatiWeb is meant to be for mobile phones at present. It is a
binary application that will be cross platform. After NatiWeb
is downloaded from respective “app stores”, the user will need
to sign in to create an account.
Once the account is created, the user can log in. This marks
the end of the native application part that NatiWeb was
supposed to play and also the beginning of the web interface
that it is supposed to act as.
NatiWeb will now have a web interface called “ApPage”
which will comprise of the features listed below:
1) Phonebook: The user will be able to access his
phonebook and make calls via NatiWeb.
2) User’s data: The user will be able to store, retrieve
and access the device’s data with other phones he owns.
3) Other Web applications: Phonebook is the the core but
among only a few features that mobile devices provide
today. Applications such as games as well as those
related to business are also provided so
Fig 6:Basic idea of NatiWeb
that can be used with NatiWeb’s web interface and the
user does not have to juggle between the native and
web interfaces on his devices.
4) The user will be given the option to sign out on every
page of the Web interface, in case he wishes to do so
and the application will shut down.
The above listed features have been implemented as can be
seen in the screenshots that follow:
Fig 6: Alert after cordova finishes loading
As can be seen in Fig 6, Cordova.js gets loaded and returns an
alert that all the required functionalities have been loaded and
the user can now proceed to use the application.
Fig 7: Login Page of NatiWeb
Fig. 7 gives a screenshot of the login page of NatiWeb which
is used to connect the user to the web interface of NatiWeb.
If the user has installed NatiWeb for the first time from the
marketplace or application store, he/she will have to create an
account i.e. SignUp before being able to use any feature of
NatiWeb such as loading contacts.
Fig 9: Creating an account in NatiWeb
If the user has previously created an account, the correct
credentials must be entered for the user to be able to access
functions in natiweb.
Fig 13: User logs in if credentials match
Fig 16: ApPage
Through this paper, we introduce NatiWeb – a cross
platform application which will not only reduce the hassles of
having multiple mobile phones but also provide a base for
future operating systems that aim to introduce the web as an
operating system. We haven’t yet researched on the scope of
having a downloadable user interface because of certain
limitations that applications have.
On the whole, we however believe that NatiWeb is a novel
concept that still has many doors to explore before users can
finally witness a complete web based operating system with
entirely user friendly applications.
We would like to sincerely thank Mr. Mahesh Pavaskar,
our mentor (Lecturer, MMIT, Lohgaon), for his support and
 Antero Taivalsaari, Kari Systa “Cloudberry: HTML5 Cloud Phone
Platform for Mobile Devices,” IEEE Software, 2011.
 Tommi Mikkonen, Antero Taivalsaari, “Apps vs. Open Web: The
Battle of the Decade,” in the proceedings of the 2nd
Software Engineering for Mobile Application Development
(MSE’2011, Santa Monica, California, USA, October 27, 2011), pp.
 Taivalsaari, A., Mikkonen T., Ingalls, D. and Palacz, K. Web Browser
as an Application Platform: The Lively Kernel Experience. Sun
Microsystems Laboratories Technical Report TR- 2008-175, January
 (2012) World Wide Web Consortium website. [Online]. Available:
 (2012) The Boot to Gecko website. [Online]. Available:
 Allen, M. Palm WebOS. O’Reilly Publishing, 2009.
 (2012) The WebKit website [Online]. Available:
 (2012) The WebKit website [Online]. Available:
 (2012) Netflix Website [Online]. Available: http://www.netflix.com
 (2012) Browser Security Handbook Website [Online]. Available: