NatiWeb: Implementation
Mallika Mewar#1
, Shubham Chandel#2
, Vishwajeet Chandel#3
, Mahesh Pavaskar*4
Student, Departme...
store and access data – Phonebook for now as the standard for
messages is not available at present, in PhoneGap.
The local...
NatiWeb has been built with the following aims in mind[]:
NatiWeb is meant to be for mobile phones...
Fig 13: User logs in if credentials match
Fig 16: ApPage
Through this paper, we introduce NatiWeb – a cross...
of 4

NatiWeb implementation paper

How NatiWeb has been implemented - architecture and screenshots. Published at IJIRS
Published on: Mar 3, 2016
Published in: Education      Technology      

Transcripts - NatiWeb implementation paper

  • 1. NatiWeb: Implementation Mallika Mewar#1 , Shubham Chandel#2 , Vishwajeet Chandel#3 , Mahesh Pavaskar*4 # Student, Department of Computer Engineering, University of Pune, MMIT, Lohgaon Pune, Maharashtra, India 1, 2, 3 * Lecturer, Department of Computer Engineering, University Of Pune, MMIT, Lohgaon, Pune, Maharashtra, India 4 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. I. INTRODUCTION The concept of the web as an operating system has already gained momentum and is being practically worked out by Nokia’s Cloudberry[1] 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[2][3], we had presented NatiWeb – A cross platform native application for mobile phones in our previous paper[2]. 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 operating system. II. NATIWEB: TECHNOLOGIES Native + Web, as it has been rightly christened[1] 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 NatiWeb. Fig. 1 shows a detailed description of the technical architecture of NatiWeb. The development of NatiWeb can be divided into two phases- 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 – HTML, CSS and Javascript. 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. 2) Javascript, JQuery and JSON are used for data 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 :
  • 2. 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 required files. 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 backend database. PhoneGap, as of now, does not support PHP directly[] and hence the inclusion of JSON (JavaScript Object Notation). 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 MySQL cartridge[]. 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 phpMyAdmin 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.
  • 3. 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.
  • 4. Fig 13: User logs in if credentials match Fig 16: ApPage V. CONCLUSIONS 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. ACKNOWLEDGMENT We would like to sincerely thank Mr. Mahesh Pavaskar, our mentor (Lecturer, MMIT, Lohgaon), for his support and encouragement. REFERENCES [1] Antero Taivalsaari, Kari Systa “Cloudberry: HTML5 Cloud Phone Platform for Mobile Devices,” IEEE Software, 2011. [2] Tommi Mikkonen, Antero Taivalsaari, “Apps vs. Open Web: The Battle of the Decade,” in the proceedings of the 2nd workshop on Software Engineering for Mobile Application Development (MSE’2011, Santa Monica, California, USA, October 27, 2011), pp. 22-26. [3] 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 2008. [4] (2012) World Wide Web Consortium website. [Online]. Available: [5] (2012) The Boot to Gecko website. [Online]. Available: [6] Allen, M. Palm WebOS. O’Reilly Publishing, 2009. [7] (2012) The WebKit website [Online]. Available: [8] (2012) The WebKit website [Online]. Available: [9] (2012) Netflix Website [Online]. Available: [10] (2012) Browser Security Handbook Website [Online]. Available: