See discussions, stats, and author profiles for this publication at: https://www.researchgate.

net/publication/259844267

E-commerce Smartphone Application

Thesis in International Journal of Advanced Computer Science and Applications · August 2012
DOI: 10.14569/IJACSA.2012.030810

CITATIONS READS
10 23,199

2 authors:

Abdullah Saleh Alqahtani Robert Goodwin

King Saud University Flinders University
14 PUBLICATIONS 110 CITATIONS 42 PUBLICATIONS 740 CITATIONS

SEE PROFILE SEE PROFILE

All content following this page was uploaded by Abdullah Saleh Alqahtani on 24 January 2014.

The user has requested enhancement of the downloaded file.

 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

E-commerce Smartphone Application

Abdullah Saleh Alqahtani Robert Goodwin

School of Computer Science, Engineering and School of Computer Science, Engineering and
Mathematics, Faculty of Science and Engineering, Mathematics, Faculty of Science and Engineering,
Flinders University, Flinders University,
Adelaide SA 5001, Australia Adelaide SA 5001, Australia

Abstract— Mobile and e-commerce applications are tools for participation) and portability (of technology).” On this theme,
accessing the Internet and for buying products and services. mobile and e-commerce application developments are an
These applications are constantly evolving due to the high rate of important factor for the expansion of m-commerce among
technological advances being made. This paper provides a new consumers. The technical characteristics of devices and
perspective on the types of applications that can be used. It corresponding applications, as well as Internet access
describes and analyses device requirements, provides a literature facilities, are determining the level of acceptance of m-
review of important aspects of mobile devices that can use such commerce and its development. Aspects like processing
applications and the requirements of websites designed for m- power, display and device size, mobile internet coverage,
commerce. The design and security aspects of mobile devices are
standardization and quality of devices, are only some of the
also investigated. As an alternative to existing m-commerce
important factors that decide the level of use of m-commerce,
applications, this paper also investigates the characteristics and
potential of the PhoneGap cross-mobile platform application. The and consequently, the level of its development [15].
results suggest that effective mobile applications do exist for The purpose of designing interfaces for mobile
various Smartphones, and web applications on mobile devices applications should be to increase consumers’ interest in using
should be effective. PhoneGap and Spree applications can and dedication to m-commerce. Among the inhibiting factors
communicate using JSON instead of the XML language. Android is that m-commerce applications were developed based on e-
simulators can be used for ensuring proper functionality and for
commerce applications. The most important thing when
compiling the applications.
designing such applications is to design the application in such
Keywords- E-commerce ; PhoneGap ; M-commerce ; Smartphones a way that it does not distract the user from the main purpose
; Spree –commerce ; Ruby on Rails. of the application [15]. However, aspects concerning security
and accessibility should not be neglected. Even though storing
I. INTRODUCTION sensitive data such as medical, financial, or personal
information on mobile devices can help people, the risks of
The internet has changed many aspects of society, from
losing such information or of unauthorized access are higher
business to recreation, from culture to communication and
and should be considered when an m-commerce transaction
technology, as well as shopping and travelling. This new form
begins[16].
of communication has provided new ways of doing business
with the help of technological development. E-commerce is This paper will review the latest trends in mobile and e-
the new way of shopping and doing business. Technology has commerce applications and will develop an application
allowed companies to promote and sell their products on new architecture that describes the internal architecture of both web
markets, overcoming geographical borders as never before. and mobile components. Moreover, the focus will be on
Consumers have access to a wider market of products when developing a more sophisticated demonstration mobile
they use wireless and internet technologies. Mobile devices application regime that will employ web-services to
with wide access to the Internet have allowed companies to communicate with web servers. Furthermore this paper will
reach consumers in more diverse ways, thus ensuring deep discuss the main characteristics of devices used for m-
market penetration. commerce, the available survey design guidelines, and the
important role of these characteristics for increasing the
This study investigates the opportunities generated through
potential of m-commerce will be articulated.
mobile telephone access to the Internet [13]. Faster wireless
networking standards allow wireless devices to use more e- This paper will also investigate the requirements of e-
commerce applications, and consequently, permit wider access commerce applications and why normal websites are not
to mobile commerce (m-commerce) [14]. M-commerce has suitable for mobile devices. More specifically this paper will
been defined as “a special branch of e-commerce, in which analyse the characteristics required for websites so that they
mobile devices and their network connection medium are used function properly on mobile devices. These characteristics are
to buy, sell, and promote products, services, and information” screen size, input device, task-based interfaces for mobile
[20]. According to Koukia, Rigou and Sirmakessis (2006), devices, m-loyalty, design aesthetics and website design.
wireless technologies have improved traditional e-commerce Other research questions relate to the reason why mobile
by “providing the additional aspects of mobility (of native applications are preferred over mobile websites and

54 | P a g e
www.ijacsa.thesai.org
 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

what can be achieved using PhoneGap cross-mobile platform view page was initiated through managing data from web
applications. Finally, the paper will attempt to provide services
solutions for mobile application development and make
recommendations for future directions. Step 3: The application was tested on different
Smartphones as follow:
II. RESEARCH METHODOLOGY 1) Test on iPhone Simulator
A literature review on the two major issues of e-commerce 2) Test on iPad Simulator
mobile applications has been conducted, these being: firstly, 3) Test on Android Simulator
the interface usability of mobile applications; and secondly,
design and security considerations. The literature review 4) Test on actual iPhone device by paying 100$ apple
concluded that mobile applications must effectively operate on developer account
different Smartphones and have the ability to use different
ecommerce web applications through web services. B. Software development methodology
Based on the questions developed for this study a general
A. Research Procedure search was conducted in the first phase of the research.
The main question answered here is: “How can we exploit Software architecture was developed based on this research.
the usability and security of e-commerce application(s) for The results of the research enabled the initial scope of the
mobile devices (m-commerce) with maximized mobile research to be more precise and achievable. Various software
platform independence?” development methodologies were utilized since software
engineering is a diverse field and encompasses many diverse
The sub-questions indicated below should be answered in factors and contexts. Experimental software engineering was
order to fully explain the main themes in this paper : used in the initial development phase so that risk and
1) Why is mobility required for e-commerce application? uncertainty were reduced. An iterative software model was
2) Why are normal websites not useful for mobile devices? used as it is the best choice for prototype development.
3) Why are mobile native applications preferred over mobile C. Application Architecture
websites? The application architecture is explained in terms of how:
4) What can we achieve using the PhoneGap (cross-mobile the Spree web application is hosted on the Ruby on Rails
platform application development framework)? equipped webserver. Web services have been built inside the
Spree application; and the mobile phone native applications
5) How will the initial application architecture use Spree-
built using PhoneGap which communicates with the webserver
commerce, PhoneGap and web applications? through web services to obtain data and information.
6) What are the different solutions for developing mobile (Figure1). This diagram shows how the application
applications? architecture used the Spree web server and a native mobile
In this paper the focus was also on developing a application using PhoneGap which allows the same
prototype mobile application. The following steps were taken application to run in different mobile operating systems. This
in order to complete a demonstration application: corresponds with the web server which uses web services to
obtain data.
1) Understanding how the Spree commerce system was
developed and how it works.
2) Improved the application architecture based on more
research and actual development experience gained while
developing the application.
3) Developed a more sophisticated demonstration mobile
application that will communicate with web servers
through web services.
a) Developed of the PhoneGap application and tested it on
iOS and Android
Page constraints have limited the paper’s scope to
actual functionality of the application. This paper will
therefore discuss basic functionality.
Step 1: In order to achieve the first goal based on the web
server was set up a Spree-commerce Ruby on Rails
application. Spree is basically an open source e-commerce
system and it has the ability to deal with web services in
obtaining a list of products, product details and cart system.
Step 2: A mobile application gap via PhoneGap (mobile
application development framework). Then product listing and Figure 1: Application Architecture

55 | P a g e
www.ijacsa.thesai.org
 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

III. SCOPE 1) iPhone simulator tested

A. Scope of application
The basic functionality delivered by the application
features two main factors, product listing and a product detail
page.
Two changes were made,
 Spree web services were modified in order to show
complete data in our mobile application.
 The functionality needed so that the mobile application
can list products by requesting web services provided by
the Spree-commerce application was added.
 The functionality of the mobile application was improved
to show complete information on a product by requesting
a second web-service from the Spree-commerce
application.
Best practices were employed for making the user
interface of the mobile application functional. Figure 2: List of products on iPhone

IV. RESULT
A. User/System scenario
 The process starts when a user starts the mobile
application.
 The mobile application requests the product listing web
service.
 The web application (Spree-commerce application),
which operates on remote web servers receives product
listing web service requests.
 The web application finds the published products from
the database and prepares JSON response.
 The mobile application receives JSON response and will
convert it into HTML and render it. The mobile
application also makes sure that all links in the product
list should only work as AJAX.
 When the user selects a product the mobile application Figure 3: Product detail screen on iPhone
sends on AJAX request to the server for the product
2) Android simulator tested
details web service.
 The server finds full details of the product and sends
JSON response.
 The mobile application prepares HTML from JSON
response for the display on the screen.
B. iOS and Android Demo Application
The application was tested on Android and iOS
(iPhone/iPad/iPod operating system). The application provided
two web services. Figures 2 and 4 depict the web service
which enables the user to see a list of products available.
Figure 3 shows that when you tap (select) any of these
products, a new detailed page relating to the product selected
will open and display information such as image, colour and Figure 4: List of products on Android
price.

56 | P a g e
www.ijacsa.thesai.org
 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

V. SET UP AND SETTING UP iPhones were appropriate for installing the PhoneGap
application on them. The research also illustrated that using
A. Setting up Spree web application JSON-based web services promoted data communication
1) Before starting the Spree application the following between PhoneGap and the Spree application. The native
applications must be installed: support of JSON in JavaScript and it being comparatively
a) Unix bases OS lightweight was the significant reason why this report
suggested JSON should be selected instead of the XML data
b) Mysql5 format.
c) Ruby 1.8.7 or 1.9.2
The actual Spree application provided several web services
d) Ruby on Rails 3.0.9
but the research forewarned that these web services would not
e) ImageMagick (library for image processing; used for be feasible with every application. For instance, often there
generating different sizes of images) was too much unneeded information on a products listing web
2) Once these applications are installed then the following service. For this reason and that of network latency, not only
steps are needed: did an application slow down but in response to the JSON
a) Copy the ecommerce application code. object. The processing of JSON in JavaScript was increased.
The research also suggested that the required data such as the
b) On UNIX terminal go to ecommerce application ID, title, the short description and slug were obtained by
folder overriding that particular web service.
c) Run bundle install [Make sure machine is connected
to internet because this command will install all dependencies As the research elaborated, depending on the screen size of
mobile phones, it was often the case that image sizes for the
for the application]
Spree application were either too large or too small.
d) rake db: create [ It will create MYSQL database] Fortunately, the paperclip library that is available in the Spree
e) rake db: migrate [ It will create all tables] application was able to regenerate all the images after their
f) rake db: bootstrap [ It will load sample data in smaller sizes were introduced. The research also suggested
database] that for the UI components of a Smartphone, jQuery and
jQueryMobile should be employed. The research also
g) Rails S [ run web application server]
illustrated the fact that no image was used for UI components
h) Use frontend and admin panel of Spree application but rather CSS3 features were used, making this library the
for exploration preferred option. The research indicated that jQuery guidelines
B. Mobile applications were used to create a robust code and jQunit, which is a
jQuery-based unit testing library dedicated to unit testing.
1) Deploy to iOS:
According to the research a PhoneGap template was used
a) Run Xcode and open iOS version of PhoneGap to make an Xcode project once this functionality became
project functional on WebKit based browsers such as Chrome and
b) Deploy to actual iOS device Safari. CSS, HTML and JavaScript were embedded into this
 Add your device to apple provisioning portal project template. The research suggested that iPhone and iPad
simulators had to be used for testing until it was definite that
(remember paid developer account is needed) they worked appropriately. Once they indeed worked
 Select device to be used in execution list and Click appropriately, the application was then tested on the actual
run button device by purchasing a $100 Apple developer account.
c)Or run on iPhone simulator The research highlighted the fact that Android
 Select iPhone simulator in execution list and click run Smartphones followed a similar process. Android development
button and the Eclipse IDE plug-ins had to be installed in this case.
The research suggested that an Android template was then
2) Deploy to Android: used to make an eclipse project, merging CSS, HTML and
a) Download and install Eclipse Classic. JavaScript into the template as well. Ultimately, the research
indicated that the Android simulator had to be utilized to
b) Download and install Android SDK.. compile and test the application. This was the process used to
c) Download and install ADT Plugin for Eclipse. execute the application and ensure its success.
d) Download the latest copy of PhoneGap and extract
its contents. VII. CONCLUSION AND FUTURE DIRECTIONS
e) Setup Project. Mobility of people and technologies are key factors in
f) Merge our HTML code to be I used. today’s economy. Mobile applications are of utmost
importance when companies market their products or services.
VI. DISCUSSION RESULT Mobile phones have generated an incredible opportunity for
accessing the Internet, while m-commerce has increased the
E-commerce functionality was provided by installing a level of using a mobile phone for business. Applications for
Spree application on a web server. The research suggested that electronic and mobile commerce are, however, developed
mobile phones such as Android-based Smartphones, iPad and

57 | P a g e
www.ijacsa.thesai.org
 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

sufficiently to cover all aspects of the market. The ideal [4] Lee, Ching-Chang, Hsing Kenneth Cheng & Hui-Hsin Cheng (2007). An
applications do not distract the user from his/her intent and empirical study of mobile commerce in insurance industry: Task–
technology fit and individual differences. Science Direct, vol. 43, 2007,
they provide on appropriately level of security, accessibility pp.95-110.
and speed. Screen size, input device, urgency, task based [5] Wu, Jen-Her & Yu-Min Wang (2006). Development of a tool for
interfaces, and design are important aspects that developers selecting mobile shopping site: A customer perspective. Science Direct,
have to consider when designing mobile phone applications. vol. 5, pp. 192-200.
Such applications should be implemented on different [6] Wu, Jen-Her & Shu-Ching Wanga (2005). What drives mobile
commerce? An empirical evaluation of the revised technology
operating systems, whether using JavaScript, CSS3 or acceptance model. Information & Management, vol. 42, pp. 719-729.
HTML5, or combining these three together. The installation of [7] Yung-Ming, Li & Yung-Shao Yeh (2010). Increasing trust in mobile
a Spree application allows partial web services to function commerce through design aesthetics. Computers in Human Behavior,
because not all applications may work with these web vol. 26, pp. 673-684.
[8] Chang, Yung-Fu & C.S. Chen (2005). Smart phone—the choice of client
services. The device screen size proved to be of great platform for mobile commerce. Computer Standards & Interfaces, vol.
importance but the Spree application solved these issues. 27, pp. 329-336.
Simulators for iPhone and iPad represent an excellent way to [9] Barnes, Stuart & Eusebio Scornavacca (2007). Chapter 7: The
test applications. emergence of mobile commerce. In Stuart Barnes, E-Commerce and V-
Business: Digital Enterprise in the Twenty-First Century, 2nd ed. Oxford,
A. Future directions U.K.: Butterworth-Heinemann, pp. 157-178.
[10] Lehtinen, Toni (2011). Native versus Web - which approach is best for
In order to bring this research from its current analysis on mobile apps?, mobilesolutions, White Paper, 2011, pp. 2-6.
the basic model to an advanced level, the points listed under [11] Power, Mark (2011). Mobile Web Apps: A Briefing Paper. Centre for
the scope of excluded and discussed below must also Educational Technology & Interoperability Standards, March. Mark
considered. Power@CETIS.
[12] Descartes (2010). Why PhoneGap, 4p., Descartes website. Retrieved
Payment transactions need to be made through a more July 28, 2011 from http://www.phonegapmobileappdev.com/wp-
secure and safe channel like Pay-Pal, which will ensure a safe content/uploads/Why-PhoneGap.pdf.
[13] Soriano, M. & D. Ponce (2002). A security and usability proposal for
and sound transaction system. Transaction payments should be mobile electronic commerce. Communications Magazine, vol. 40, no. 8,
password protected or should have a PIN code that confirms pp. 62-67.
its reliability. Even if the gadget used - for example a cell [14] Buranatrived, J. & P. Vickers, P (2002). An investigation of the impact
phone - is lost, stolen or otherwise incapable of being used, of mobile phone and PDA interfaces on the usability of mobile-
consumers would not have to worry about theft or commerce applications. Proceedings of the IEEE 5th International
Workshop on Networked Appliances. Liverpool: pp. 90-95.
mismanagement of money. Furthermore, they can obtain a [15] Koukia, Spiridoula, Maria Rigou & Spiros Sirmakessis (2006). The Role
password to improve protection and security. of Context in m-Commerce and the Personalization Dimension.
In International Conference on Web Intelligence and Intelligent Agent
Products listed on the product information pages should Technology Workshops, 2006. WI-IAT 2006 Workshops. Hong Kong: pp.
have paged display pictures, which will be more appealing to 267-276.
the viewer. The product should be listed with information such [16] Leavitt, N. (2010). Payment Applications Make E-Commerce Mobile.
as the product specifications: price, part number, technical Computer, vol. 43, no. 12, pp. 19-22.
[17] Github Inc. (2011). Github Social Coding: spree, Github Social Coding
details, features and packaging details. Yet some product website. Retrieved Jun 28, 2011 from https://github.com/spree/spree.
information pages do not provide this information which is [18] Spree (n.d.). The World’s Most Flexible E-Commerce Platform, Spree
very inconvenient for the consumer and does not present a website. Retrieved August 3, 2011 from http://spreecommerce.com/.
professional image. [19] Nitobi (2011). Home page, PhoneGap website. Retrieved August 20,
2011 from http://www.phonegap.com/.
The applications should allow users to change the web [20] Kurvosky, Stan, Vladimir Zanev & Anatoly Kurkovsky (2005).
services’ URLs. Settings should be made flexible so that users SMMART: using context-awareness in m-commerce. In MobileHCI '05:
Proceedings of the 7th International Conference on Human Computer
can improvise and access the web services they require by Interaction with Mobile Services & Devices. New York: ACM, pp. 383-
changing settings. The application should allow the user to add 384.
multiple sources for the same web server by cell phone so that [21] PocketHacks.com (2011). iOS page, All about Windows Mobile,
the user can code flex, which means that a user can develop Windows Phone 7 and Android devices, latest news, freeware apps and
and deploy cross-platform Internet applications being run on hacks.. Retrieved August 20, 2011 from http://pockethacks.com/ios/.
[22] ImageMagick Studio LLC (2011). About Imagemagick.
cell phones. This implies that a mobile application should be Imagemagick.org website. Retrieved October 5, 2011 from
able to locate a list of products from different remote http://www.imagemagick.org/script/index.php.
applications, which provide the same web services being [23] Nitobi (2011). How PhoneGap Works. PhoneGap website. Retrieved
supported by a mobile application. August 20, 2011 from http://www.phonegap.com/about.
[24] TechTerms.com (2010). Android. TechTerms website. Retrieved
REFERENCES September 17, 2011 from http://www.techterms.com/definition/android.
[1] Ngai, E.W.T. & A. Gunasekaran (2007). A review for mobile commerce [25] PC Magazine (2011). Definition of AJaX. PC Magazine website.
research and applications. Decision Support Systems, vol. 43, no. 1, pp. Retrieved August 11, 2011 from
3-15. http://www.pcmag.com/encyclopedia_term/0,2542,t=AJaX&i=55346,00
.asp#fbid=cGwEB1ODoJ6.
[2] Cyr, D., M. Head & A. Ivanov (2006). Design aesthetics leading to m-
[26] The jQuery Project (2011). Homepage, jQuery Mobile Framework
loyalty in mobile commerce. Information & Management, vol. 43, no. 8,
website. Retrieved September 5, 2011 from http://jquerymobile.com/.
pp. 950-963.
[27] Internet.com. (2011). jQuery, in Webopedia website. Retrieved
[3] [Sumita, Ushio & Jun Yoshii (2010). Enhancement of e-commerce via September 7, 2011 from
mobile accesses to the Internet. Electronic Commerce Research and http://www.webopedia.com/TERM/J/jQuery.html.
Applications, vol. 9, pp. 217-227.

58 | P a g e
www.ijacsa.thesai.org
 (IJACSA) International Journal of Advanced Computer Science and Applications,
Vol. 3, No.8, 2012

[28] About.com (2011). JSON: JavaScript Object Notation, About.com [30] Howard, Alexander B. (2006). Definition: Ruby on Rails (RoR or Rails),
website. Retrieved August 3, 2011 from SearchSOA.com website. Retrieved July 3, 2011 from
http://javascript.about.com/library/bljson.htm. http://searchsoa.techtarget.com/definition/Ruby-on-Rails.
[29] Motive Ltd. (2010). The Motive Internet Glossary: MySQL. Motive [31] Linux Information Project (2005). Unix-like Definition [updated June
Glossary website. Retrieved August 3, 2011 by 18, 2006], Linfo website. Retrieved July 1, 2011 from
http://www.motive.co.nz/glossary/mysql.php. http://www.linfo.org/unix-like.html.

59 | P a g e
www.ijacsa.thesai.org
View publication stats