DOI: http://doi.org/10.5281/zenodo.

4316528 Journal of Computers & Signals (JCS)

Vol. 1, No. 1, 2020

A Hybrid Mobile
Application for an e-Commerce Store
Abdulkader Mohamed Sandouka
Computer Science Department CIT, Taif University, Taif, Saudi Arabia
Email: abdulkader.sand@gmail.com

Abstract— The use of the Internet has increased dramatically hybrid e-commerce store mobile application for selling of
among people and has become reliable in all areas of life. The most products or services over the Internet that can operate on
successful one among others is e-Commerce/e-Marketing. E- different operating systems such as windows, iOS, and android.
commerce techniques allow the development of relationship with
customers to such a level not previously reported. The reason is II. AVAILABLE APPLICATIONS
the process of purchase, distribution, shopping, demand and
production are found in a modern mechanism which is no longer
In this Section, I will discuss about a number of current
as it was in the traditional process. Therefore, many small business mobile applications that are available in the market that are used
organizations, as like as large ones, are considering e-commerce world-wide and in the context of Gulf region.
mobile application as a better technological choice for developing Amazon
and maintaining customer relationship. This paper proposes a Amazon.com, Inc., doing business as Amazon is an
hybrid e-commerce store mobile application for selling of products American electronic commerce and cloud computing company
or services over the Internet that can operate on different based in Seattle, Washington that was founded by Jeff Bezos
operating systems such as windows, iOS, and android. on July 5, 1994. The tech giant is the largest Internet retailer in
the world as measured by revenue and market capitalization,
Keywords— e-Commerce/e-Marketing; mobile applications;
clustering; E-commerce techniques and second largest after Alibaba Group in terms of total sales.
The amazon.com website started as an online bookstore and
I. INTRODUCTION later diversified to sell video downloads / streaming, MP3
In the twenty-first century, the use of the Internet has downloads / streaming, audiobook downloads / streaming,
increased dramatically among people and has become reliable in software, video games, electronics, apparel, furniture, food,
all areas of life from calls and communications to transport and toys, and jewelry. The company also produces consumer
many others. One of the most important Internet applications at electronics-Kindle e-readers, Fire tablets, Fire TV, and Echo-
the present time and one of the most successful ones is e- and is the world's largest provider of cloud infrastructure
marketing or e-commerce. E-marketing techniques allow the services Amazon also sells certain low-end products under its
development of relationship with customers to such a level not in house brand Amazon Basics [8].
previously reported [1, 2]. In Amazon mobile app the user can quickly search for
millions of items, and can scan barcode and compare prices, and
There are several sites that promote e-marketing through the
Internet and offer several marketing services. For example, the all purchases are routed to amazon secure servers.
e-marketing site is dedicated to a particular subject for the
promotion and advertising of the goods, and is engaged in
marketing without papers such as the newspaper, but depends
on the Internet and telephone and other digital devices that keep
up with technological development. The daily world uses
technology and development in the overall daily life of the
individual, the process of purchase, distribution, shopping and
demand and production are found in a modern mechanism is no
longer as it was in the traditional process, which is expensive
and takes a long time [1, 2, 3]. Therefore, many small business
organizations, as like as large ones, are considering e-commerce Figure 1. Amazon mobile app
mobile application as a better technological choice for
developing and maintaining customer relationship. Alibaba
Alibaba is a Chinese multinational e-commerce founded by
Online shopping is an e-commerce format, in which real-
time sales transactions occur as a consumer purchases an item Jack Ma and Peng Lei Launched in 1999, Alibaba.com is the
or service from an online store. Mobile applications targeted for leading platform for global wholesale trade. Alibaba serve
customers have good positive impact on the profitability of such millions of buyers and suppliers around the world, Alibaba.com
small e-commerce stores [20]. As there are substantial variations brings hundreds of millions of products in over 40 different
among mobile application development technologies, it is major categories, including consumer electronics, machinery
crucial to choose appropriate one with the consideration of and apparel, Buyers for these products are located in 190+
usability, performance, maintenance etc. This paper proposes a countries and regions, and exchange hundreds of thousands of

www.rsepress.com 16 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

messages with suppliers on the platform each day [9][10]. founded by Pierre Omidyar in 1995, and became a notable
Alibaba is amazon’s number one rival and has a great platform. success story of the dot-com bubble. eBay is a multibillion-
dollar business with operations in about 30 countries, as of
2011. The company manages eBay.com, an online auction and
shopping website in which people and businesses buy and sell
a wide variety of goods and services worldwide. The website is
free to use for buyers, but sellers are charged fees for listing
items after a limited number of free listings, and again when
those items are sold [12].
Ebay app is the world leading auction store and have
millions of user visiting every day.

Figure 2. Alibaba mobile app

Souq.com
Established in 2005 by Ronaldo mashhor. Its headquarters
is in Dubai, United Arab Emirates. SOUQ.COM is the largest
e-commerce website in the Arab world, has more than 400,000
products from electronics, fashion, home editing, watches,
perfumes, and more. Today, more than 23 million visitors are
visiting. Often called "Amazon Middle East", it works as a site
for sale exchange and your shopping online. Souq.com was a
pioneer in online shopping in the region as an auction site and Figure 4. eBay mobile app
linked to the Arab Internet portal Maktoob. When Yahoo settled
on Maktoob in August 2009, it was not included in the deal, haraj.com
separated from Maktoob to stay and from Jabbar Internet. Founded by Eng. Yousef Al-Rashidi in 2005 as a assembly
Subsequently, in May 2011, the site became a market model center for the sale of cars and then developed to become an
selling at fixed prices, and then the retail division was launched auction site in 2008. The volume of sales traded monthly
in late 2011. The site was bout by amazon in 2017 [11]. Souq through the site has reached 400 million riyals, and the addition
app have a platform similar to amazon and its one of the most of 10 thousand ads a day, also less than 50 employee running
used apps in the Middle East. the site. The founder pointed out that he does not want to
increase the commission site over (1%) Because it is not for
profit, but a symbolic amount to support the site and the
operator to continue [13][14].

Figure 3. Souq.com mobile app

eBay
eBay Inc. is a multinational e-commerce corporation based
in San Jose, California that facilitates consumer-to-consumer
and business-to-consumer sales through its website. eBay was Figure 5. haraj.com mobile app

www.rsepress.com 17 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

NOON III. SYSTEM ANALYSIS AND DESIGN

Mohamed Alabbar founded www.noon.com, an e- I am proposing to develop a hybrid mobile application
commerce marketplace in the Middle East set to compete with which will be built as an Ionic application framework. The
souq.com, with a 3.5 million square foot facility in the United Ionic application will use an WooCommerce [17] store in the
Arab Emirates. Alabbar has raised $1 billion from investors, back end. The e-commerce app that I will build in this
half of which was committed by the Public Investment Fund of paper gets the products' information from the WooCommerce
Saudi Arabia, to spearhead what will be a string of major digital store. All that is needed is just a WooCommerce store, either
and e-commerce launches in the UAE. He met with Jeff Bezos, locally or on a remote server so that the Ionic application can
the founder and CEO of Amazon.com, in Dubai in November communicate through REST API [15].
2016. In March 2017, it was announced that Amazon.com The application will allow the users to browse through the
would acquire Dubai-based e-commerce company Souq.com, product catalog, search products in a particular product
following which Alabbar immediately submitted a competing category, add product to their cart and then pay for their orders.
$800 million bid via his Emaar Malls subsidiary. However The customers can pay using the PayPal payment gateway as
Souq.com culminated a deal with Amazon.com due to an well. The orders will be received on the WooCommerce and
exclusivity agreement signed prior to Alabbar's bid [19]. then can be processed further by the shop admin. The app takes
care of user authentication and only allows users with valid
customer accounts to place orders. The app also allows new
customers to sign up for an account.

Figure 7. System architecture/model

Figure 6. NOON mobile app The above diagram shows the system architecture. It shows
the WooCommerce site hosted on a web server on a local
Summary of mobile apps computer or remotely to a server. WooCommerce will be
There is no question eBay is best for some items, while installed as a plugin to Word Press [18] which is an amazing
Amazon and alibaba is best for the others. In general, eBay is open-source website platform. WordPress has to be installed on
best for used and vintage items .But the overlap is incredibly a web server, which would either be part of an Internet hosting
large. The vast majority of items that sell on Amazon and service or a network hosting its own right.
alibaba will also sell on eBay, except Amazon outsells most of WordPress' plugin architecture allows users to extend the
those items, some costumers avoid Amazon because they think features and functionality of a website. The Ionic application
there are too many rules however eBay's User Agreement, is will communicate to WooCommerce site using REST API.
moving closer to Amazon's model, Amazon is the most REST or RESTful API design (Representational State Transfer)
common and the most used and considered the best, Alibaba is is made to take advantage of existing protocols. While REST
the best for wholesale, ebay is the best auction store. In the can be used over nearly any protocol, it usually takes advantage
context of Saudi Arabia, Souq is widely used for online of HTTP when used for Web APIs.
purchase of items. Haraj is not widely used due to its interface
and lack of other benefits.
IV. REQUIREMENT AND ANALYSIS
This paper aims to fill that gap and develop a hybrid mobile
app with friendly user interface and wide range of features. SOFTWARE
The following page contains a comparison of the apps in the Ionic
market and my app in a tabular form. Ionic is a complete open-source SDK for hybrid mobile app
development targeted for Android, IoS and Windows based

www.rsepress.com 18 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

systems. The original version was released in 2013 and built on RAT: in order to allow the user to login, signup and access
top of AngularJS and Apache Cordova [4]. products categories.
HTML DEP: FR1.
Hypertext Markup Language is the standard markup language ID:FR3
for creating web pages and web applications [5]. TITLE: products details.
JavaScript DESCRIPTION: when the user clicks on any products the
Often abbreviated as JS, is a high-level, dynamic, weakly typed, products details will appear.
prototype-based, multi-paradigm, and interpreted programming RAT: in order to allow the user to see products details.
language. Alongside HTML and CSS, JavaScript is one of the DEP: FR1 and FR2.
three core technologies of World Wide Web content production ID:FR4
[6]. TITLE: cart.
CSS DESCRIPTION: when the user clicks on the cart icon the
Cascading Style Sheets is a style sheet language used for cart will appear.
describing the presentation of a document written in a markup RAT: in order to allow the user to see and add products to
language [7]. the cart.
REST API DEP: FR3.
REST or RESTful API design (Representational State Transfer)
is designed to take advantage of existing protocols. While NON-FUNCTIONAL REQUIREMENTS
REST can be used over nearly any protocol, it takes advantage PERFORMANCE REQUIREMENT:
of HTTP when used for Web APIs. This means that developers -The application should be effective and fast in performance
do not need to install libraries or additional software in order to without delay or boredom by the user and should not be difficult
take advantage of a REST API design, REST is not constrained to use.
to XML, but instead can return XML, JSON, YAML or any -Capacity and durability: our system must be able to support
other format [15]. all versions of
WampServer OS and respond to all requests without delay.
WampServer refers to a software stack for the Microsoft -Modifiability: the system is able to add new functionalities.
Windows operating system, consisting of the Apache web -High performance: the application must effectively
server, OpenSSL for SSL support, MySQL database and PHP response to the given task.
programming language [16]. USABILITY REQUIREMENT:
WooCommerce Ease of use is one of the most important successful factors
WooCommerce is an open source e-commerce plugin for of the application.
WordPress. It is designed for small to large-sized online
merchants using WordPress [17].
WordPress V. IMPLEMENTATION
WordPress is a free and open-source content management SETTING UP
system (CMS) based on PHP and MySQL [18]. It offers an Installation of Node and Ionic
amazing open-source website platform. WordPress has to be We have installed Node.js which is a JavaScript runtime
installed on a web server, which would either be part of built on Chrome's V8 JavaScript engine. Installing and
an Internet hosting service or a network hosting its own right.. connecting all the software that we mentioned in requirement
and analysis. Once we have installed Node.js we installed npm
HARDWARE (node package manager) to install node modules. In fact, npm
A computer and any device with an Android operating system comes with the node installation. Then, we installed ionic using
or IOS or Windows. npm to build our application.
Setting Up WooCommerce Locally
FUNCTIONAL REQUIREMENTS WooCommerce is a customizable e-commerce platform
ID:FR1 which we can use if we own a wordpress website.
TITLE: home page. WooCommerce manages everything for us such products,
DESCRIPTION: when the application starts, the application customers, product categories, prices, offers, coupons,
shows the discounts, orders and payments. WooCommerce offers an API
Home page. that helps us get and send all the data to and from
RAT: in order to allow the user to interact with the application. WooCommerce using our application. Our Ionic application
DEP: None. will get data about customers, products and much more from
ID:FR2 the WooCommerce store and the application will send data
TITLE: menu page. about customers and orders back to the store.
DESCRIPTION: when the user clicks on menu button the menu First, we installed wordpress locally on our computer and
will appear. then installed WooCommerce plugin in the wordpress

www.rsepress.com 19 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

installation. Now, our Ionic application will use an Activating WooCommerce Plugin
WooCommerce API to talk to the woocommerce store. Once we installed the woocommerce plugin, we need to
To install wordpress, we need a webserver on our machine. activate it. Also, we need to activate the REST API so that our
We have installed WampServer which provides all the Ionic application can communicate to the woocommerce store.
collection of tools that we need to run wordpress locally.
Creating the database
We created the wordpress database as shown in the
following diagram using wampserver’s phpMyAdmin portal.

Figure 11. WooCommerce Plugin

Building the App

In the following subsections, the different steps for the
building the application are described. Our application is
structured into different pages. Ionic supports creation of
individual page of the app and sending data back and forth
between different pages. Every page has three components: the
Figure 8. Database creation interface (.html file), style sheet (.scss file) and a typescript (.ts
file) for coding. This ts file contains all the code for
Creating Categories communicating with the woocommerce store.
Using WooCommerce plugin in wordpress creating
categories for the products to be added later. Creating Home page
The following Figure shows the home page of the
application. It contains a Menu icon on the left and a search bar
to search for different products. Also, the home page contains
the list of products with the images and a link to display the
products details such as description, properties, and reviews and
option to add the product to the cart.

Figure 9. Categories creation

Adding Products
Adding products to the categories created previously.

Figure 12. Creating Home page

Products list
Creating a list of the products in home page so the user can
Figure 10. Product addition choose one of them.

www.rsepress.com 20 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

Displaying Products
Displaying products in the categories so the user can click
on a category and the products of that category will be
displayed.

Figure 13. Creating Product list

Adding Product Categories

We added different product categories to the menu.
Customers can select any category to display all the items in
Figure 15. Product by category
that category.
PRODUCTS DETAILES
Products image, title, and description
Displaying the image, title, and description to each product.

Figure 16. Product image

Products reviews
Displaying product reviews when the user scrolls down on
Figure 14. Adding product categories
the product page.

www.rsepress.com 21 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

Figure 19. Signup and login

Figure 17. Product review

CART
Products in cart
Displaying the products that the user picks in the cart.

Figure 20. Checkout

VI. CONCLUSION
Figure 18. Product in cart In this paper, we designed and implemented a hybrid e-
commerce store mobile application that can operate on different
Finalizing the cart
operating systems such as windows, iOS, and android. The
Displaying the total price and the checkout button.
main objective of this paper is to develop an application that
SIGNUP AND LOGIN provide real opportunities for marketing and selling products
Sign up page and interacting with customers. We plan to fix some
Creating sign up page form and display it to the user. implementation issues that our app is currently facing. The
Login page signup pages throw a security error which needs to be solved.
Creating login page form and display it to the user. At present, customers are created in the WooCommerce portal.
Second, placing order also throws a security error which needs
Checkout to be addressed. In the future, we plan to add more features like
Creating checkout form and display it to the user. integrating the app with PayPal and publishing the app to the
play store.

www.rsepress.com 22 | P a g e
DOI: http://doi.org/10.5281/zenodo.4316528 Journal of Computers & Signals (JCS)
Vol. 1, No. 1, 2020

REFERENCES
[1] https://www.wewanttraffic.com/emarketing/advantages.aspx
[2] https://en.wikipedia.org/wiki/Electronic_markets
[3] https://ar.wikipedia.org/wiki/%D8%AA%D8%B3%D9%88%D9%8A%
D9%82_%D8%A5%D9%84%D9%83%D8%AA%D8%B1%D9%88%
D9%86%D9%8A
[4] https://en.wikipedia.org/wiki/Ionic_(mobile_app_framework)
[5] https://en.wikipedia.org/wiki/HTML
[6] https://en.wikipedia.org/wiki/JavaScript
[7] https://en.wikipedia.org/wiki/Cascading_Style_Sheets
[8] https://en.wikipedia.org/wiki/Amazon_(company)
[9] http://activities.alibaba.com/alibaba/following-about-
alibaba.php?spm=a2700.8293689.0.0.1ef565aaWJVJaP&tracelog=foote
r_alibaba
[10] https://en.wikipedia.org/wiki/Alibaba_GrouP
[11] https://saudi.souq.com/sa-ar/about-us/c/
[12] https://en.wikipedia.org/wiki/EBay
[13] https://sabq.org/%D9%85%D8%A4%D8%B3%D8%B3-
%D8%AD%D8%B1%D8%A7%D8%AC-
%D8%B1%D9%81%D8%B6%D8%AA-
%D8%A8%D9%8A%D8%B9-%D8%AD%D8%B5%D8%A9-
%D8%A8%D9%80-%D9%85%D9%84%D9%8A%D9%88%D9%86-
%D8%AF%D9%88%D9%84%D8%A7%D8%B1-
%D9%88%D8%B9%D9%85%D9%88%D9%84%D8%AA%D9%86%
D8%A7-%D9%84%D9%86-%D8%AA%D8%B2%D9%8A%D8%AF-
%D8%B9%D9%84%D9%89
[14] https://www.argaam.com/ar/article/articledetail/id/416057
[15] https://www.mulesoft.com/resources/api/what-is-rest-api-design
[16] https://en.wikipedia.org/wiki/WampServer
[17] https://en.wikipedia.org/wiki/WooCommerce
[18] https://en.wikipedia.org/wiki/WordPress
[19] https://en.wikipedia.org/wiki/Mohamed_Alabbar
[20] Goodwin, E., Babin, L & Cole, H. 2014. The Impact of Mobile Apps on
Small Business Revenues. Journal of Business and Economics, 5(4), 437-
442. Accessed 30 November 2016.
http://www.academicstar.us/UploadFile/Picture/2014-
6/201461451251651.pdf

www.rsepress.com 23 | P a g e