To Study and Design a Cross-Platform Mobile Application for Student Information System using PhoneGap Framework

(1)

International Journal of Emerging Technology and Advanced Engineering

Website: www.ijetae.com (ISSN 2250-2459, ISO 9001:2008 Certified Journal, Volume 3, Issue 9, September 2013)

390

To Study and Design a Cross-Platform Mobile Application for

Student Information System using PhoneGap Framework

Avinash Shrivas

1

, Anandkumar Pardeshi

2 1

Associate Professor, Vidyalankar Institute of Technology, Wadala, Mumbai

2_{Assistant Professor, Fr. C. Rodrigues Institute of Technology, Vashi, Navi Mumbai} Abstract—There is a tremendous increase in users with an

iPhone, Android-based phone, Smartphone and tablet computers. Mobile platforms have included applications that use web services from popular websites. In Institutions of higher education, the use of mobile phone is more than computers. With mobile devices, we can have “Information at our finger tips anywhere at any time”, so that users can have a better experience to access information and enjoy many applications. There is a chance to transplant academic affairs and information from computer to mobile phones to improve service quality and management efficiency. The applications created by PhoneGap mobile development framework are cross-platform which helps avoid developing same type of application separately. This paper aims at sharing information between students, staff members, departments and college administration. The application will help students to check their results, attendance, view personal details, check for announcements etc. Staff members and students can view their schedule of classes and also, provide more value-added services which are easy to use directly from mobile phones. This paper aims to develop a Cross-Platform Mobile Application for Student Information System (SIS).

Keywords—Cross-Platform, Information System, Mobile Application, SIS, PhoneGap, Web Service.

I. INTRODUCTION

In recent years, with the rapid development of mobile communication technology, mobile phone not only are used to call or send short messages, but also a smart tools, through which we can browse the web pages, send and receive e-mails, view word or excel documents, play games, study, etc. A smartphone is a mobile phone that offers a more advanced computing ability and connectivity than a phone with contemporary features. They are much more efficient in form factor, chip type, internal storage capacity, battery lifetime and operating system [1] [2]. Modern mobile platforms include Symbian, iPhone, Android, Windows Phone 7, Palm, Blackberry, etc. from the developer standpoint.

Through Cross-Platforming, developers can create applications for multiple platforms using the same code base. Cross-Platform mobile development tools are gaining popularity in the world due to their characteristic to compile the application source code for multiple supported OS’s. Such tools are mainly depending on web programming languages like HyperText Markup Language (HTML), JavaScript and Cascading Style Sheets (CSS) with some native wrapper code for accessing native Application Program Interfaces (API) like Camera, Contacts, etc. The application development is very easy and time saving with these tools. The objective of this paper is to creation and management of accurate and up-to-date information for staff, students and college authorities. It will ensure data integrity and validation and support for strong error-handling system. This system is expected to increase efficiency; users can access as well as share the information from mobile phones. The system utilizes user authentication, displaying only information necessary for an individual.

II. RELATIVE TECHNOLOGIES

A. Web Service:

(2)

International Journal of Emerging Technology and Advanced Engineering

391

FIGURE1:WEB SERVICES ARCHITECTURE. B. WAP and WML:

Wireless Application Protocol (WAP) is a technical standard for accessing information over a mobile wireless network. A WAP browser is a web browser for mobile devices such as mobile phones that uses the protocol. For WAP version 1.X, the primary language is Wireless Markup Language (WML). In WAP 2.0, the primary markup language is XHTML Mobile Profile [4].

C. HTML, CSS and JavaScript:

The HyperText Markup Language (HTML) is the common programming language among web browsers when displaying web pages. HTML combines the content of a page, such as images, links, text and scripts [5] [6]. The markup language uses CSS to give a web page a more suitable layout than just plain text. CSS adds color, font, text size and disposition to a web page [7]. JavaScript can be included to a HTML document to give a page some interactivity, e.g. changing the color of a button when the mouse pointer is hovering over it [8].

D. Android, iOS and Windows Phone:

Android is an open source platform based on the Linux kernel. Developing Android applications or games do not require a license. Therefore Android recommends open source tools for developers as the Eclipse IDE. The Android web browser is an open source engine running WebKit with some properties from the Chrome browser [9]. The programming language in Android is mostly Java and XML. The Android SDK contains many tools and some of them are the Android Virtual Device (AVD) with its virtual mobile device emulator and the debugger called Dalvik Debug Monitor Server (DDMS). Smartphones running Android implement full multitouch since version 2.0 [6].

An UNIX based operating system developed by Apple for iPhone, iPad and iPod touch. iPhone apps, like iOS, are written in Objective-C, an object-oriented programming language based on C programming language.

Multitouch is standard and implemented on all iPhones. iOS uses Mobile Safari, developed by Apple, as the default web browser [10].

The launching of Windows Phone introduced the users to a new user interface that completely differed from Windows Mobile, and was based on a design language named Metro [11]. The intentions with the Metro design are to enable the user for fast interaction with the installed applications on the phone [12]. Windows Phones uses Internet Explorer Mobile as web browser combined with Internet Explorer 9 [6]. Third party applications for WP must be based on XNA, Silverlight and .NET. Windows Phone SDK comes with Visual Studio 2010 Express in order to allow developers getting started more quickly [13].

E. PhoneGap:

PhoneGap is an open source mobile development framework originally produced by Nitobi, but later purchased by Adobe Systems. It enables mobile app developers to build apps for mobile devices using HTML5, CSS3 and JavaScript. This makes it easier for the developer, because they do not have to be skilled in every lower-level language corresponding to the desired platforms, such as Objective-C for iOS or Java for Android. After using PhoneGap the resulting applications are hybrid applications, meaning that they are neither truly native (all the layout is rendered via the web view instead of the platform’s native UI framework) nor purely web-based (they are not ordinary web apps but they are packed for marketing distribution, and have access to part of the device API) [14]. Benefits of developing Cross-Platform applications using PhoneGap are as follows [24]:

- It is mainly based on using HTML5 technologies and

developers in web site development might be able to leverage their experience

- Learning web technologies might be less challenging

that learning an all new platform

- Devices come in all sorts of technology and feature

that through cross platform development it might be possible to develop an application that works well on each one of them with less effort

- Cross platform mobile apps written using one SDK,

operating System and development environment requiring less financial investment

- Cross platform apps try best to emulate natively

written applications

- Cross platform apps might exploit well the native

(3)

International Journal of Emerging Technology and Advanced Engineering

392

- Cross platform development might help reduce cost in

human resource, time resource, and development period

- Cross platform might help enable developers reach

mass device through their hardware and platform abstraction features

The PhoneGap architecture is composed mainly of three layers: Web Application, PhoneGap, and OS and native API’s. In Fig. 2 the top layer represents the application source code. The central layer is composed by JavaScript and native API’s. Mainly, this layer is responsible for the interfacing between web application and PhoneGap layers [1]. Furthermore, it also takes care of the interfacing between JavaScript API’s that are used by the application with native API’s that are used by mobile OS’s. The functionality of this layer is to maintain the relationship between JavaScript API’s and native API’s of each mobile OS. PhoneGap supports most of the mobile operating systems like iPhone, Windows Mobile, BlackBerry, Android Symbian, and WebOS which can be worked along with other operating systems like Linux, Mac and Windows. It also supports scripting languages like HTML, JavaScript, and CSS which makes it an easy tool to work with. PhoneGap provides JavaScript API’s to developers that allow the access to advanced device functionality, such as Accelerometer, Barcode, Bluetooth, Calendar, Camera, Compass, Connection, Contacts, File, GPS, Menu, NFC, etc. [15].

FIGURE2:INTERFACING LAYERS OF THE PHONEGAP ARCHITECTURE.

In Fig. 3 is shown a more detailed architecture schema provided by IBM. It represents all components about the web application, HTML rendering engine, PhoneGap API’s and OS layers. Moreover, some different interfaces are shown in detail, such as the interfacing between PhoneGap API’s and native API’s layers.

FIGURE 3:COMPLETE SCHEMA OF PHONEGAP ARCHITECTURE AND INTERFACING AMONG COMPONENTS [16].

III. TYPES OF MOBILE PHONE APPLICATIONS

There are various types of mobile phone applications: native applications, applications based on web technologies and hybrid applications.

A. Native application:

A native application is one that was designed to be installed on a specific OS (iOS, Android, Symbian etc.) and it is also depending of the device’s firmware. In order to have an application running in different devices of models small or big changes will be needed. The Table 1 shows major mobile application development along with the native packaging format. This can be developed using C, C++, and Java etc. But, these applications will only support their respective operating systems and will not provide Cross-Platform support.

TABLE 1

MAJOR MOBILE PLATFORMS [17].

Apple iOS Android Blackberry OS

Windows Phone Languages

Objective-C, Objective-C, C++

Java Java C#, VB.NET

and more Tools Xcode Android

SDK

BB, Java Eclipse Plug-in

Visual Studio, Windows Phone development tools Packaging

format

.app .apk .cod .xap

App stores Apple app store

Google Play

Blackberry app world

(4)

International Journal of Emerging Technology and Advanced Engineering

393 B. Applications based on Web Technologies:

Web based applications are developed using Web technologies such as HTML, JavaScript and should be interpreted by the web browsers of the different operations systems.

TABLE 2

COMPARISON BETWEEN PURE MOBILE WEB APPS AND PURE MOBILE WEBSITES [18].

Feature Pure mobile web apps

Pure mobile websites

Tools and knowledge

Written entirely in HTML, CSS and JavaScript

Execution “installed” shortcut, launched like a native app

Reached by navigating to a website by way of a URL

User experience

Touch-friendly, interactive UI

Navigational UI between pages displaying static data

Performance UI logic resides locally, making the app responsive and accessible offline

All code executed from a server, resulting in network-dependent performance

C. Hybrid Application:

The hybrid approach combines native development with web technology. Using this approach, developers write significant portions of their application in cross-platform web technologies, while maintaining direct access to native APIs when required. The native portion of the application uses the operating system APIs to create an embedded HTML rendering engine that serves as a bridge between the browser and the device APIs. This bridge enables the hybrid app to take full advantage of all the features that modern devices have to offer.

TABLE 3

COMPARISON OF NATIVE APP VS.HYBRID APP VS.WEB APP [18].

Feature Native app Hybrid app Web app Development

languages

Native only Native and web or web only

Web only

Code portability and optimization

None High High

Access device-specific features

High Medium Low

Leverage existing knowledge

Low High High

Advanced graphics High Moderate Moderate Upgrade flexibility Low Moderate High Installation

experience

High High Medium

IV. RELATED WORKS

Many information systems have been proposed [19][20]. The current issues with manual and computer based student information system is that information cannot be accessed at any time as well as any location [21][22]. Results, attendance, timetable, announcements need to be collected from respective departments. These kinds of systems need a lot of time, manpower etc. Few system which uses Bluetooth technology, in which Bluetooth dongle currently used caters for only 7 concurrent mobile users within the network area of 100m radius and this can be only enhanced further by using Bluetooth adapter [23].

V. PROPOSED SYSTEM

Our proposed system is based on cross-platform mobile application. Cross platform development targets on creating a single application which can be used across multiple platforms. This helps the application vendor to maintain the same code base for multiple platforms. Maintenance and release overheads for multiple platforms can be reduced by cross platform application development. Due to mobile devices users can have their information accessible at any time as well as anywhere. Our system has various features like user friendly interface, fast access to database, more storage capacity, look and feel environment etc.

All the manual difficulties in managing the details of SIS have been rectified by implementing app on mobile device.

A. Design of SIS

PhoneGap is used to make the transition from the native mobile languages to web based programming languages in all three operating systems.

(5)

International Journal of Emerging Technology and Advanced Engineering

394 The backend code of every platform is written in native language. As seen in figure 4, the PhoneGap framework bridges the gap between the native language and HTML by working as a wrapper for the app and generating JavaScript used in the app for accessing the native API. Due to jQuery and jQuery Mobile the application is written in one HTML file thus allowing every page to be within a div and identifying them with different ID’s when used to navigate through the app. The content shown in the app differs depending on what page the user has navigated to.

The application is constructed with different views that the user navigates through. The home screen lets the user see an overview of all the available pages the user can navigate to, see figure 4.1. The paper aimed for a familiar look and feel of the application so that a user easily can understand the navigation through the app. With the help of jQuery Mobile the design of the application is similar in icons and toolbars with most common applications. Within a page, a header was created that contains a navigation bar, allowing the user to return back to previous page or go directly to the home screen.

FIGURE 4.1:OVERVIEW OF THE NAVIGATION THROUGH THE APP.

As shown in Figure 4.2, SIS can be classified into three layers according to system functions. They are data layer, business layer and presentation layer.

A.Data Layer

This provides basic data for the upper layers and stores the data into the database system, including timetable, attendance, students and staff profiles, announcements etc.

B.Business Layer

This provides business logic and functions for storing and retrieving data from the database, and works as a mediator between the Presentation layer and Data layer.

C.Presentation Layer

This provides the user interface that allows the user to interact with the application.

PhoneGap application acts as a client for the user to interact with. PhoneGap client communicates with an application server to receive data. The application server handles business logic and communicates with a back-end data repository. The application server is normally a web server (Apache, IIS, etc...) and has a server side scripting language such as ColdFusion, Java, .NET, PHP, etc. PhoneGap is agnostic of back-end technologies and can work with any application server using standard web protocols [25]. The application server performs business logic and calculations, and generally retrieves or persists data from a separate data repository - this is normally a relational database, but could be any structure or mechanism for data persistence.

PhoneGap applications cannot communicate directly to a database; communication is routed through an application server. The client to application server communication can be based upon standard HTTP requests for HTML content, RESTful XML services, JSON services, or SOAP. These are the exact same techniques that can be used for a desktop-browser based AJAX application.

The client-side architecture generally uses the single page application model, where the application logic is inside a single HTML page. This page is never unloaded from memory. All data will be displayed by updating the HTML DOM, data is retrieved from the application server using AJAX techniques, and variables are kept in-memory within JavaScript.

FIGURE 4.2:ARCHITECTURE OF SIS.

Startup

Screen

Home

Announcements

Results

Attendance

User Profile

About

Timetable

Tier 1

Presentation Layer

Tier 2 Business Layer

(6)

International Journal of Emerging Technology and Advanced Engineering

395 VI. CONCLUSION AND FUTURE SCOPE

In this paper, we propose a cross-platform application development using PhoneGap framework. This paper introduces the study and design of Student Information System based on mobile device in order to enhance the management efficiency and service quality. The system is easy to deploy, safe and convenient to use. The practical value of mobility in teaching will be greater in the future because mobile devices are flexible, easy to use in real time. PhoneGap is used for cross-platform development of mobile apps for multiple platforms by using standard web development technologies. This can also be integrated with cloud computing, which is the future scope of our project.

REFERENCES

[1] Manuel P, Inderjeet Singh, Antonio Cicchetti, “Comparison of Cross-Platform Mobile Development Tools”, 2012 16th_{International}

Conference on Intelligence in Next Generation Networks.

[2] Weifeng S, Maofa W, “A Study on Educational Administration Inquire System based on Mobile Device”, CSAE, 2012 IEEE International Conference, Volume 3: Page(s): 392-395.

[3] W3C. “Web Services Architecture”, http://www.w3.org/TR/ws-arch/#id2260892.

[4] Wikipedia. “Wireless Application Protocol”, http://en.wikipedia.org/wiki/Wireless_Application_protocol. [5] Hammond, D., Webdevout. Web browser standard support.

http://www.webdevout.net/browser-support.

[6] http://publications.lib.chalmers.se/records/fulltext/167502.pdf. [7] W3schools.com. CSS introduction.

http://www.w3schools.com/css/css_intro.asp.

[8] W3schools.com. JavaScript introduction. http://www.w3schools.com/js/js_intro.asp.

[9] Android Developers.

http://developer.android.com/guide/basics/what-is-andorid.html.

[10] Wikipedia. iOS. http://en.wikipedia.org/wiki/IOS.

[11] http://blogs.windows.com/windows_phone/b/wpdev/archive/2010/0 3/18/windows-phone-7-series-ui-design-amp-interaction-guide.aspx. [12]

http://www.engadget.com/2011/06/27/windows-phone-7-5-mango-in-depth-preview-video/. [13]

http://msdn.microsoft.com/en-us/library/gg680270(v=PandP.11).aspx. [14] http://en.wikipedia.org/wiki/PhoneGap. [15] http://phonegap.com/about/feature/.

[16] http://www.slideshare.net/drbac/phonegap-day-ibm-phonegap-and-the-enterprise.

[17] Andre R., Alberto R., “Survey on Cross-Platforms and Languages for Mobile Apps”, 2012 Eighth International Conference on the Quality of Information and Communication Technology.

[18] http://public.dhe.ibm.com/common/ssi/ecm/en/wsw14182usen/WS W14182USEN.PDF.

[19] Dongli M., Songfeng G., “Design and implement of students management information system suitable to university”, 2011 International Conference on CSSS, Page(s): 1198-1201.

[20] Zhibing L., Huixia W., Hui Z., “Design and Implementation of Student Information Management System”, 2010 International Symposium on Intelligence Information Processing and Trusted Computing.

[21] Jin M., Qiu C., Li J., “The designment of student information management system based on B/S architecture”, 2012 2nd

International Conference on CECNet, Page(s): 2153-2155. [22] Yang Q., Zeng X., “Design and implementation of college student

management information system based on .Net three-layer structure”, 2010 International Conference on ICISS, Page(s) : 797-799.

[23] Dushamali, Fernando, Samarakoon, “Student information access system via Bluetooth”, International Conference on ICIIS 2007, Page(s) : 393-398.

[24] http://www.divaportal.org/smash/get/diva2:626531/FULLTEXT01.p df.