UNICAT: ENHANCING E-COMMERCE MODULE IN HYBRID …

UNICAT: ENHANCING E-COMMERCE MODULE IN HYBRID

PLATFORM MOBILE APPLICATOIN

BY

WONG WIN TATT

A PROPOSAL

SUBMITTED TO

Universiti Tunku Abdul Rahman

in partial fulfilment of the requirements

for the degree of

BACHELOR OF COMPUTER SCIENCE (HONS)

Faculty of Information and Communication Technology

(Perak Campus)

APRIL 2017

UNIVERSITI TUNKU ABDUL RAHMAN

REPORT STATUS DECLARATION FORM

Title: __________________________________________________________

__________________________________________________________

__________________________________________________________

Academic Session: _____________

I __________________________________________________________

(CAPITAL LETTER)

declare that I allow this Final Year Project Report to be kept in

Universiti Tunku Abdul Rahman Library subject to the regulations as follows:

1. The dissertation is a property of the Library.

2. The Library is allowed to make copies of this dissertation for academic purposes.

Verified by,

_________________________ _________________________

(Author‟s signature) (Supervisor‟s signature)

Address:

__________________________

__________________________ _________________________

__________________________ Supervisor‟s name

Date: _____________________ Date: ____________________

UNICAT: ENHANCING E-COMMERCE MODULE IN HYBRID

PLATFORM MOBILE APPLICATOIN

BY

WONG WIN TATT

A PROPOSAL

SUBMITTED TO

Universiti Tunku Abdul Rahman

in partial fulfilment of the requirements

for the degree of

BACHELOR OF COMPUTER SCIENCE (HONS)

Faculty of Information and Communication Technology

(Perak Campus)

APRIL 2017

i

DECLARATION OF ORIGINALITY

I declare that this report entitled “UNICAT: ENHANCING E-COMMERCE

MODULE IN HYBRID PLATFORM MOBILE APPLICATION” is my own

work except as cited in the references. The report has not been accepted for any

degree and is not being submitted concurrently in candidature for any degree or other

award.

Signature : _________________________

Name : _________________________

Date : _________________________

ii

WONG WIN TATT

13 APRIL 2017

ACKNOWLEDGEMENTS

I would like to express my deepest gratitude to my supervisor, Dr Cheng Wai Khuen,

for affording me this opportunity to venture into mobile application development, and

my senior, Lye Guang Xing, for persuading me into undertaking the UniCAT project.

Without both of whom, I would not have gotten this far into mobile applications

development, planting my roots along the process. Not to forget my fellow mobile

UniCAT teammate, Gan San Yong, for sticking with me through the highs and lows

of this project. Without you, the project would not have been able to take off in such

limited time. I would also like to give thanks to my many testers, with a shout out to

Kelly Lee Jia Xin, for giving valuable feedbacks and suggestions during the span of

this project. Also, to Gui Hao Ming, for your generosity and trusts in allowing me

access to the Apple developer account. Finally, I must convey my thanks to both of

my parents and my family for their love and support.

iii

ABSTRACT

University Cyber AgenT, which can be known as UniCAT, is a mobile

graphical social networking application system. The objective of implementing

this mobile app is to analyse and study the characteristics and behaviour of the

local population of community. The term Agent represents how users think,

prefer, behave and act through the user data storage collected in the system.

This project seeks to further the cause by re-engineering and adding native

mobile support to one of its various modules, the E-Commerce module. The

objective of this project is to develop an e-commerce platform for the local

community. Several intelligent modules will be integrated into the proposed

hybrid mobile application, such as auto product categorization with image

recognition, Augmented Reality (AR) in item searching and customer

behaviour analysis with UniCAT engine. The proposed UniCAT e-commerce

platform allows users to buy and sell their new/used items, post and search for

items they wish to purchase, and even bid their wished items. Besides, the

proposed system also let users to search their items through image search.

Users can just snap on the similar item they wish to find, after that our system

will retrieve all related products. Furthermore, the proposed system also

utilizes AR technology to scan for nearby locations. For instance, this feature

allows users to check for the actual seller location through the AR interface in

order to improve the customer‟s experiences. Of course, AR is also enabling a

more informative and interactive mobile application development.

In conclusion, this project will enable the students, local residents and visitors

to trade for any goods based on the idea of social interact directly through their

mobile devices, whereas at the same time UniCAT system can benefit from the

increased collection of users data and goods data.

iv

TABLE OF CONTENTS

TITLE i

DECLARTION OF ORIGINALITY ii

ACKNOWLEDGEMENTS iii

ABSTRACT iv

TABLE OF CONTENTS v

LIST OF TABLES vi

LIST OF FIGURES vii

LIST OF ABBREVIATIONS viii

CHAPTER 1 INTRODUCTION 1

1.1 Motivation and Problem Statement 1

1.2 Project Scope 2

1.3 Project Objectives 2

1.4 Proposed Solution 3

1.5 Background information 4

1.6 Report Organisation 5

CHAPTER 2 LITERATURE REVIEW 6

2.1 Review Description 6

2.2 Review of Existing System 6

2.2.1 ZALORA 6

2.2.2 Carousell 10

2.2.3 eBay 14

2.2.4 mudah.my 18

2.2.5 UniCAT: Flea Market 21

2.3 Critical Remarks 24

2.3.1 System Comparison 24

2.3.2 Criteria Explanation 24

2.3.3 Comparison Analysis 25

v

CHAPTER 3 PROPOSED METHOD 26

3.2 System Design 26

3.2.1 Functional & Non-functional Requiremnet 26

3.2.2 Use Case Diagram 27

3.2.3 System Flow 28

3.2.4 Sequence Diagram 30

3.2.4 Entity-Relationship Diagram 31

CHAPTER 4 Methodology and Tools 32

4.1 Design Specifications 32

4.1.1 Methodology 32

4.1.2 General Work Procedures 33

4.1.3 Work Procedures Elaboration 34

4.2 Tools to Use 35

4.2.1Sofware and Hardware Tools 35

4.3 Timeline 36

3.4.1 Gantt Chart 36

CHAPTER 5 Implementation and Testing 37

5.1 Implementation System Design 37

5.2 Black Box Testing 46

CHAPTER 6 Conclusion 47

6.1 Project Review 47

6.2 Implementation Issues and Challenging 47

6.3 Impact, Significance and Contribution 48

6.4 Future Work 48

BIBLIOGRAPHY 49

APPENDIX THE NEW MULTI-SCREEN WORLD: A-1

UNDERSTANDING CROSS-PLATFORM

CONSUMER BEHAVIOR

v

POSTER UNICAT: E-COMMERCE MODULE IN A-2

HYBRID PLATFORM MOBILE

APPLICATION

POSTER

UNICAT: ENHANCING E-COMMERECE

MODULE IN HYBRID PLATFORM MOBILE

APPLICATION 2 A-3

APPENDIX TURNITIN ORIGINALITY REPORT PART 1 A-3

APPENDIX TURNITIN ORIGINALITY REPORT PART 2 A-4

v

LIST OF TABLES

Table Number Title Page

Table 2.3.1 System Comparison table 22

Table 2.3.2 Criteria Explanation table 22

Table 5.2.1 Buy & Sell Module Test Case 46

vi

LIST OF FIGURES

Figure Number Title Page

Figure 2.1 Screenshot of ZAROLA Main Page 6

Figure 2.2 Screenshot of the Flows of ZAROLA 7

Figure 2.3 Screenshot of Payment Method ZAROLA 7

Figure 2.4 Screenshot of Special Features ZAROLA 8




Figure 2.8 Screenshot of Carousell Mobile Application 10

Figure 2.9 Screenshot of Carousell Details Flow 11

Figure 2.10 Screenshot of Private Room Chat of Carousell 12

Figure 2.11 Screenshot of Selling Details of Carousell 12

Figure 2.12 Screenshot of Set Region Places of Carousell 13

Figure 2.13 Screenshot of eBay Mobile Application 14

Figure 2.14 Screenshot of Description Item of eBay 15

Figure 2.15 Screenshot of the Steps of Order Item of eBay 16

Figure 2.16 Screenshot of Selling Process of eBay 16

Figure 2.17 Screenshot of mudah.my Mobile Application 18

Figure 2.18 Screenshot of Menu and Filtering of mudah.my 19

Figure 2.19 Screenshot of Contact Method of mudah.my 19

Figure 2.20 Screenshot of Selling Process of mudah.my 21

Figure 2.21 Screenshot of UniCAT: Flea Market 22

Figure 2.22 Screenshot of Categories & COD Details 23

vii

Figure 2.23 Screenshot of Selling Process of Flea Market 23

Figure 3.3 Use case diagram of the E-Commerce module of 27

UniCAT

Figure 3.4 System flowchart of the E-Commerce module of 28

UniCAT (Part 1)

Figure 3.5 System flowchart of the E-Commerce module of 29

UniCAT (Part 2)

Figure 3.6 Sequence Diagram of UniCAT: E-commerce in 30

Client-Server Data Synchronisation

Figure 3.7 Entity-Relationship Diagram 31

Figure 4.1 Flow chart of the Evolutionary Prototyping 33

Figure 4.3 Gantt Chart 36

Figure 5.1.1

UI Flow of Login, Registration, Forgot Password 37

Figure 5.1.2 Home Page, Side Menu and Categories UI Design 38

Figure 5.1.3 Buying Process UI Design 39

Figure 5.1.4 Selling Process UI Design 40

Figure 5.1.5 User Profile, My post, Edit Profile, COD UI Design 41

Figure 5.1.6 Want to Buy Features UI Design 42

Figure 5.1.7 Bidding Session UI Design 42

Figure 5.1.8 Setting UI Design 43

Figure 5.1.9 Image Search Recognition UI Design 43

Figure 5.1.10 AR Scanning for Virtual Shops UI Design 44

Figure 5.1.11 AR Scanning for House to Let/ Room to Rent 45

viii

LIST OF ABBREVIATIONS

API Application Programming Interface

IDE Integrated Development Environment

COD Cash On Delivery

OS Operating System

PC Personal Computer

RAM Random Access Memory

POI Point of Interest

RDBMS Relational Database Management System

UI User Interface

UniCAT University Cyber Agent

AR Augmented Reality

POI Point of Interest

viii

Chapter 1: Introduction


1.1 Motivation and Problem Statement

Nowadays there are many mobile applications out there failing to attract

high number of users because most of the developers are either android developer or

IOS developer only. Then it rise up a problem where android users cannot perform

IOS app and vice versa. In conjunction with the existing UniCAT system, it does not

provide android platform but only native IOS. This will create a restriction problem

whereby only IOS users are allowed to perform this application. However, with a

hybrid mobile application development, it enables developers to target more than one

platform. Indeed, both Android and IOS users can now be able to make use of the

application. This in turn will definitely make this application become well-known and

eventually attract more users to access it. By using hybrid platform, users get to

experience a mobile application that is basically standard in accordance to each

individual mobile device. In case users change to another mobile platform, they can

still enjoy a consistent mobile application which improves their adaptability.

Moreover, in terms of speed, hybrid app is absolutely faster than a native app and a

mobile web app unless the app requires a large graphics.

Moreover, for most of the E-commerce mobile application, users normally

are facing the same problems on searching an item. Today, image recognition

technology can be used in mobile shopping applications in order to identify specific

products and provides customers with a significantly more interactive view around

them while making everything they see searchable and therefore buyable (Dominik

2014). Image of visual search is one of those technologies that will impact the future

of shopping significantly. It is an appealing concept whereby users have the ability to

snap a shot of something they like on the road, and then find the similar item in the

app immediately. Image or visual search recognition allows the user to search their

item by using an image instead of keywords. Then, the results will return visually

similar items in the product database based on the attributes such as colour, pattern,

shape and others. Without this visual search function in the E-commerce mobile

application, users have to search their items by typing the keywords which are

troublesome and are not user friendly enough. Indeed, the satisfaction level of the

users will also reduce as they can‟t buy their items in a very short time.

BCS (HONS) Computer Science

1 Faculty of Information and Communication Technology (Perak Campus), UTAR


1.2 Project Scope

The scope of this project is mainly targeted the residents in Kampar first and develop

an E-commerce hybrid platform mobile application module in order to studies their

preferences and behaviours at the same time allow them to buy, sell and bid for the

items they want in the mobile application.

1.3 Project Objectives

The objectives of the project are:

To develop an effective and efficient E-commerce module by using hybrid

platform mobile solution in order to attract more users in a shorter time.

o Integrated both Android and IOS version

o Buy and selling are fast and simple, can be done just a second.

o Integrated Image Search Recognition feature to make the application

more convenient to use and consume less time to search an item

To integrate a socialized and localized E-commerce Mobile Application.

o Having Real time chatting in order to let buyer and seller deals and

bargain for the item

o Having bidding session so that consumers will everyday check with

the app to find their interested bidding items

o Consumers can post the items they wish to buy at the forum and wait

other people to recommend to them.

Additional Objective

o Integrated Augmented Reality scanning feature in order to improve the

customer‟s experiences and also enabling a more informative and

interactive mobile application development.




1.4 Proposed Approach

The proposed approach to solve the problem mentioned is to develop a mobile

UniCAT client with the E-commerce module. The UniCAT E-commerce module for

the mobile platform allows users to buy and sell their second hand goods items, post

and search for items they wish to purchase, even bid their beloved items.

Furthermore, this module also helps users in term of searching for related products by

using the technology of image search, which means that users can snap the product

that they wish to find and the system will check for the items availability according to

the categories. Besides, by using the technology of Augmented Reality, users can now

use their phone to scan for nearby virtual shop (Bicycle Shop, Clothing Shop & etc)

in order to check for the exact location and direction (POI) of the particular shops and

browse their webpage with their selling products details. In addition, Augmented

Reality scanning also allows users to scan and seek for room to rent or house to let.

For the scanning of house to rent function, users are allowed to filter the condition in

terms of prices and distances.




1.5 Background information

University Cyber AgenT, which also called as UniCAT, is a mobile graphical

social networking application system. The purpose of creating this application is to

study and analyse the behaviour and interest of the local population.

In this system, there is a visualised university map in the homepage which

encompass POI such as school buildings, ATM, cafeteria and etc. Users can click the

POI in order to find more details and the directions to that particular place. In

addition, user also is able to see icons or avatars which are representing him/ her, shift

and social around on a visualised map. These icons or avatars which also known as

the agents, can meditate, visualize and even behave like the users so that the avatars

will now move automatically.

Besides, UniCAT had integrated some productive and special social

networking features like event sharing, indoor and outdoor navigation system, file

sharing, friend control management and even message system. With the available of

these assisting features, users now can connect with their friends, communicating or

even share some valuable information with each other. Moreover, users also be able

to manage their own profile, share the latest event happened in the university and use

the navigation function to search places that they are not sure around the university.

Indeed, UniCAT had created convenience to improve user experience as they can

share and discover all types of information through this system.

Furthermore, there is a variety of second-hand goods wish to sell by students,

lecturers or residents in Kampar every day. This may be due to some reasons such as

graduating soon, campus transferring, bought wrong items or something that does not

suits to the particular user‟s preferences. Sellers want their products to be sold to other

buyers in a shorter time. Therefore, this mobile application provides a platform for

sellers and buyers to meet together for the trading purpose in order to satisfy and fulfil

each other‟s need. In short, it makes disposal of second-hand goods easier and more

convenient to find the next right owner. With this, users does not necessary have to

buy brand new products with a relatively higher price if they can find a second-hand

product that perfectly match their demand.




1.6 Report Organisation

In this report, there will be 6 chapters included. The first chapter will be

introducing the background of the project, problem statements, objectives and

motivations for developing on this project. In the second chapter, there were five

different similar systems in the market that will be compared and reviewed with the

proposed solution. The comparisons between the systems with the proposed solution

are based on the functionalities, features and user interfaces.

Moreover, in chapter three, there will be the explanations of the system design

in details such as use case, user requirement, activity diagram, sequence diagram,

class diagram and etc. Besides, chapter four will mainly describes and explains the

methodology and tools used for the project and the estimated timeline for the whole

project to be completed. Furthermore, in chapter five, details of the implementation

and the testing done in the project will be interpreted.

The last chapter which is the chapter six will conclude the project and clarify

the challenges faces, impact significance and the future enhancement on the

completed system.



Chapter 2: Literature Review


2.1 Review Description

The following reviews analyses on the existing mobile application are evaluated

based on their work flows, strength and weakness. Besides, there are some similar

project scope and objectives between the reviews and this project.

2.2 Review of Existing System

2.2.1 ZALORA Mobile Application

ZALORA is a fashion E-commerce mobile application which allows customers

to shop the latest fashion styles and trends from their collection of over 500

brands. Besides, it supports both IOS and Android platform for free

installation. With the app, customers can now share their favourite items with

their friends and loved ones over the different social media networks like

Facebook, Twitter and many more.

Detailed explanation on how the application works

a) First of all, the main view of the mobile application is the products by

categories and special offers which are shown at the figure below.

Figure 2.1 Screenshot of ZALORA’s main page

b) Select the particular category in order to search for the product that

customer want to buy. Then, after selecting the suitable size, click “Add

to Shopping bag”.




c) Next, click “checkout” on the shopping bag in order to purchase the

product. Before proceed to payment, customers have to log in first in

order to continue.

Figure 2.2 Screenshot of the flows of ZALORA

d) Choose the shipping address and continue. Then, choose the payment

method (COD, Bank Transfer, Credit Card) and click “review order”. In

this step, customers can change the previous information. At last, once

confirm with the order, click the “Purchase” button and a confirmation

email or SMS with the expected delivery time and booking code will

send to customer

Figure 2.3 Screenshot of the payment method ZALORA




Strengths / Speciality

Figure 2.4 & Figure 2.5 Screenshot of Special Figures ZALORA

From the Figure 2.4 above, there is a row of circles on the left of the product‟

images which is the universal design indicator. The purpose of this indicator

is to inform customers that there are other available images of this particular

product which they might want to browse through. Besides, the colour button

on the right side of the product shows another indicator where customers are

able to view the other colour options for this particular product by clicking the

button.

On the other side, this app‟s UI was well designed in the sense that it

contained almost all of the features that could be found in the desktop version.

This is the main difference with other apps as some of the apps usually might

have scrimped on functionality due to the limited screen size. Besides, it has a

very specific filters function, which shown at Figure 2.5 above. With this

filters, users can extremely easy to search for the specific product.

Furthermore, ZALORA also have the pinch-to-zoom function when viewing

products images. In Figure 2.6 at below, the left pictures show the usual image

while the right side show the image after pinch-to-zoom. This function helps

to stand out in term of user experience as developers normally seldom will

include this feature to an app.




Figure 2.6 Screenshot of Special Figures ZALORA

Figure 2.7 Screenshot of Special Figures ZALORA

Limitations

In ZALORA app, there is some room for improvement. First of all, when

customers have added items to their shopping bag whilst through the app, but

it do not sync the information and when customers intend to continue shopping

through their computer, they might need to search for the items again instead

of continuing off.

Besides, in Figure 2.7, the icon at the top right side is indicating that by

clicking the icon it will enlarge the image. However, compare to the previous

one, there is only a little difference in size or clarity where it only opened the

images into a new page. Thus, the icon seems like redundant and meaningless.




2.2.2 Carousell Mobile Application

Carousell mobile application is the top community marketplace app that lets users to

buy and sell their products from multiple types of categories such as fashion, clothes,

accessories, beauty products, furniture, art, books, branded goods, cars, bikes, and

antiques to houses. This application support both IOS and Android platform for free

installation. Besides, in order to sell an item, what users can do is just snap a

photo of the unused and second hand clutter, then post it. The duration of the

process is only 30 second with free listing. It is fast, convenient and easy to

use as user can also chat with the seller about the item they want to buy.


Figure 2.8 Screenshot of Carousell Mobile Applications




a) Firstly, Figure 2.8 shows the first main view of this application by displaying

different types of the categories. Users first choose the category of the product

they want to buy.

b) Next, when moving into the particular category, users can choose the product

they want by clicking the particular item or using the search bar or filter to

find the product.

c) Then, Figure 2.9 shows the details page of the particular item. User can all of

the information regarding to this item such as review, price, seller contact

information and etc.

d) Furthermore, when users want to buy the product, they can click the “Buy

Now” button and an offer model will pop up like the example in Figure 2.9.

This offer model allows user to bargain for the actual price of the particular

item. Once user set the bargain price, click the tick icon on the top right corner

in order to continue. The offer price message will then send to the seller. If

users have any inquiry, they can click the “Chat” button in order to have a

private chat with the seller which is showed at Figure 2.9 below.

Figure 2.9 Screenshot of Carousell Details Flow




e) At last, once seller received the offer price, he/she will contact the user for

further discussion. Once the seller accepts the offer, then they might meet up

or cash on deliver for the product as Carousell is not involved in payment. An

example is show at the below Figure 2.10.

Figure 2.10 Screenshot of Private Room Chat of Carousell

f) For the selling part, at first, users can snap up to maximum of four images of

the product they want to sell. Then, they just need to fill up the details and

click the tick icon in order to post it and everything is done. An example

screenshot is at below.

Figure 2.11 Screenshot of Selling Details of Carousell




Strengths

In Carousell mobile app, it provides two different roles which are buyer and seller.

Instead of only buying product like other shopping app, user now can also sell their

product in the app. Besides, some users will use this app to trade item between sellers

instead of only buy or sell. Basically, it is means that users now can swap items to the

other party. Normally, users will find the products that value matches with them.

Otherwise, the party who is receiving the item with a higher value might have to offer

another item which is approximately around the same price or top up the balance.

Furthermore, before user can buy the products, the app provides an offer platform for

them. In another words, user now can bargain the actual price with the seller in a

private chat. It provides flexibility for the user where he/she might have the chance to

get a lower price for the product. Most of the shopping app does not provide chat box.

With the chat box, users can ask the seller about the product in more details if they

face some difficulty.

Figure 2.12 Screenshot of Set Region Places of Carousell

Moreover, for the filter function of this Carousell app, it provides a convenient feature

where users can set the nearby location in order to filter the products which are having

the same location. For example, if a user wants to buy a product in the same area so

that he/she can direct meet up with the seller, the only thing he/she needs to do is just

set the location and the app will show the filtered products. Figure 2.12 at above is the

examples screenshot that require user to set the particular region.




Limitations

Instead of only the strengths, there are few limitations have to be concern for this app.

Firstly, when users browse deep into the page view and think of returning to the home

page, the only way to do is clicking the “back” icon on the top of the header. It

becomes inconvenient and troublesome where users have to click many times of the

back icon in order to return to home page. This certainly reduces the user friendly of

the app.

Furthermore, due to there is no payment platform involved in the app, the only way to

buy a product is go through meet up or cash delivery. In that case, frauds or prank will

occur in the app where some users will ask the seller for meet up but they do not show

up in the end. Other than that, some sellers will retail some fake products to scam the

users by asking them to transfer the money first but do not deliver the product.

2.2.3 eBay mobile application

eBay mobile application is an online shopping application that allow users to search,

bid, buy and sell on the products they want. This app support IOS, Android and even

Windows platform for free installations. The uniqueness of this eBay is that users not

only can buy and sell, but they can also bid their favourite products. In order to

become a successful mobile app, a convenient and accurate search function is the

main key factor. In eBay, it not only uses predictive text, but also with different kind

of search function such as barcode scanner search, voice search and image search.


Figure 2.13 Screenshot of eBay Mobile Application




a) Figure 2.13 above shows the landing page of the eBay app by

displaying the categories and the featured details. Firstly, user can find

their product by typing the keywords on the search function. Some

recommended and recent data will shows to users when they are typing

the text. Besides, users also can use the voice or barcode scanners to

search for their particular product by clicking the icons on the right of

the search bar which at Figure 2.14 at below.

b) After users found their product, they will come to the detail page like

Figure 2.14 at below. Users can check about the item details, shipping

and payment method or even the reviews and rating of the seller. If

users have not decided want to buy the particular product or not, they

can save the product into wish list by clicking the “WATCH” button. If

users decided to buy the products, they can just click the Buy it now

button.

Figure 2.14 Screenshot of Description Item of eBay

c) Next, users are required to enter quantity of the product and proceed by

clicking the review button. Then, user can choose to pay now, buy

another, contact to the seller, leave a feedback or like the item.

d) After clicking the pay now button, users are asked to login to the

PayPal account in order to place the order. Below Figure 2.15 is the

three screenshots that shows the flows from steps c to d.




Figure 2.15 Screenshot of The Steps to Order Item of eBay

e) For the selling part, at first, users have to write a descriptive title of

their selling product. Then, the system will help users to locate the

category which the product is belonged.

f) Next, users have to fill in a number of details in order to sell the

product. Besides, users can also save their listing products as a draft

and post it in the future. The selling process is finish once the users

click on the continue button which is showed at Figure 2.16.

Figure 2.16 Screenshot of Selling Process of eBay




Strengths

When searching for particular products, barcode scanner is a very useful tool where

users can immediately discover whether someone is currently selling the products you

need. It saves a lot of the effort by scrolling through hundreds of product options.

Besides, eBay also have the voice search function where users just have to voice

record the products name and all of the particular products will be displayed out.

Moreover, a picture is always worth than a thousand words. So, eBay had

implemented a computer vision and image search applications. With this function,

users can now just take a snap then the app will help them to search for the similar

and accurate products. Furthermore, most of the shopping mobile apps face the

barriers of form filling and entering credit card details. Some of them even do not

have payment method. However, eBay provide a PayPal method which allows users

to make a purchase by just entering the password. It certainly reduces a lot of time in

order to let the users to buy the products in a fast way. Indeed, eBay also have the

automatic bidding function. In other words, eBay app makes the system so convenient

where users just have to set the maximum bidding price, then it will automatically

help users to bid the particular product. With this, users do not have to keep coming

back to re-bid the product every time when someone places another bid. Basically, the

system will help users to increase the bid in order to make sure that the users remain

in the higher bidder or to meet the reserve price until it meets to the maximum bid.

Limitations

Less flexibility. In eBay, when users is selling a product, they face some

difficultly where they only can take certain kinds of payment, the keywords for the

title is limited, prevent users from cross marketing to other platforms and even

restricted users to enter only certain text in the listings. Besides, users have to fill in a

lot of information in order to sell products.

It’s harder to sell products that are not keyword driven or already of

interest: In eBay, it is hard to attracts customers unless the products are something

well know and often searched for or related to a popular keyword. Due to the app is a

keyword driven marketplace, the products are having difficulty in order to standing

out without a connection buyers might already be searching for.




2.2.4 Mudah.my Mobile Application

Mudah.my is one of the largest online shopping platforms in Malaysia for product

trading. It provides both IOS and Android platform for free installation. Mudah.my is

a mobile location based application where user can set their location in order to buy

and sell within the neighbourhood. Basically, this app is quite similar with the

Carousell mobile app in terms of the functionality. Besides, this app allows users to

sell their products either is brand new or is second hand goods.


Figure 2.17 Screenshot of mudah.my Mobile Application

a) Figure 2.17 above shows the main page of the mudah.my app. In the

landing page, users can choose whether they want to find, sell or buy

products. At first, users can choose the products categories by clicking

the various icon at the below of the landing page.

b) When come into the particular category page, users can narrow down

their search area by setting up the location. Then, the app will display

all kinds of products in that region of area like the example screenshot

in Figure 2.18 below.

c) Besides, users can also filter the products with category, mileage, price

and etc.




Figure 2.18 Screenshot of Menu and Filtering of mudah.my

d) After users choose their particular product, then it will move to the

product detail page. Users can browse through the detail information

and choose whether want to call, SMS, email or use the app chat room.

An example is showed at Figure 2.19 below.

Figure 2.19 Screenshot of Contact Methods of mudah.my

e) For the selling part, as usual, users are required to fill in all of the

information that is needed. Then, users can either save the works into

the draft or post up to the application. Below Figure 2.20 are the three

screenshot examples for the selling process.




Figure 2.20 Screenshot of Selling Process of mudah.my

Strengths

It has simple and clear user interface: Unlike other shopping mobile

app, mudah.my has all same features with the desktop version without

scraping together. Besides, it provides simple guidelines for the users

in the first time in order to let users to understand all of the functions

and features.

Mobile location based: mudah.my allows user to restrict their location

region in case there is not difficulty in meeting up between the buyer

and seller.

Limitations

Cannot review or comment on the particular product: When users

are browsing for the products, they do not know whether the particular

seller is trust worthy or not as there is no any review or comment about

the product. In that case, users might easily being cheated or scammed

by the seller with the fake product.

Require too many steps to sell a product: In order to develop a good

interactive view and user friendly mobile app, the number of inputs

must be optimized and restricted. Users will lazy and no interests to sell

a product when there are so many steps are required to fill up.




2.2.5 UniCAT: Mobile Flea-Market Module

UniCAT Intelligence Mobile Flea Market application works as a platform for people

to trade second hand or used items and the service is available 24/7 online. Users can

login into the application at anytime and anywhere as long as they have Internet-

connected device. When users had signed into the application, the application will

recommend some products to users based on the result of analysis on user identity and

preference instead of using location-based service. This is one of the differences

between the application and the existing m-commerce platforms as m-commerce

platforms displays all the stuffs which located within user neighbourhood.


Figure 2.21 Screenshot of Flea Market Mobile Application

a) Figure 2.21 shows the main page of the flea market mobile app after users had

signed in. After the users had signed in, a prompt up model is showed out in

order to ask users to choose their preferences item categories. For this step,

users can choose to insert their interest categories or skip it. Then, the

recommendation features will be displayed at the landing page based on the

user preferences which were chosen by users just now.

b) If users had skipped the recommendation features, they can move into the

categories page in order to search for their product. Besides, users can also

search for their desired products via keyword search by clicking the search

button at the bottom right of the application.




c) Once the users had confirmed with their products, they can set a location to

pick up the product in COD Trading Details which is shown in the Figure 2.22

at below. Then, a notification will be sent to the seller in order to confirm with

the COD location. If the seller is not satisfied with the location, he/she has the

right to edit the location and updated to the users. Otherwise, seller can click

the “Okay” button in order to complete the trading.

Figure 2.22 Screenshot of Categories & COD Details of Flea Market app

d) For the seller features, at first users are required to create a post in order to sell

their products. Users can choose either snap a picture or choose from the

phone gallery. At last, users have to enter the price, category and the valid

period of the particular products and click the “Post” button. Below Figure

2.23 are the four screenshot that show the selling process.

Figure 2.23 Screenshot of Selling Process of Flea Market App




Strengths

UniCAT Mobile Flea Market Application provides “Wish List” features in the

sidebar. The purpose of this feature is to allow users to keep a list of desired products

in the app which are currently out of stock. It provides convenient for the users

whereby they can always refer back to their wish list products rather than searching

back in the app. Besides, users can also make a request for the particular product

which is out of stock in order the track for the availability of the products. It will

encounter to the seller whereby they will know that there is a demand for the

particular products. The app will then automatically notify the users once the product

is back in stock. Furthermore, unlike other mobile location based app, UniCAT

Mobile Flea Market Application has the speciality where the app will recommend

products to user based on the analysis on the user preferences and identity. The app

will prompt user to choose their interest preferences once their login to the app in

order to helps users to filter out all the recommended products. It is better than those

location based services as sometimes users might have to chances to get some

products that they do not prefer in the region that they had set. Moreover, this app is

available for 24/7 available so that users can enjoy using the app at anytime and

anywhere as long as they have the internet connection. The app provides a valid

period for all the products in order to prevent this app clustered with dozens of

products which had expired or old post on the “Sell” or “Recommendation” menu.

Weakness

One of the weaknesses of this app is that whenever sellers are not satisfied with the

COD location, they have to reset the location again and send back to the users.

However, if the users are again not able to make it at the location set by the sellers,

then they have to update again. It wastes a lot of time and is very troublesome for the

users and sellers when they have a conflict on the pick-up location.Besides, this app

does not provide any communication method between the users and the sellers. It is

not convenient at all as sometimes users might have some questions or inquires about

the particular products. The only way is to confirm the product and set the pick-up

location and wait for the seller to reply. However, sometimes users might lost interest

on the products when they have problems on the products but are unable to contact to

the sellers.




2.3 Critical Remarks

2.3.1 System Comparison

Table 2.3.1: System Comparison table

2.3.2 Criteria Explanation

Table 2.3.2: Criteria Explanation table

Criteria ZALORA

Carousell eBay mudah.my Mobile Flea

Market

(UniCAT)

Mobile E-

commerce

(UniCAT)

Automated

Bidding

Session

AR Scan

Virtual Shop

Image

Search

Recognition

Real time

Chat

Payment

System

Want to Buy

Features

COD Details

Criteria Explanation

Automated

Bidding

Session

The application allows users to bid a particular product automatically by

just setting the maximum of bidding value. Then, the system will keep

increase the bid necessary until it reach the maximum bidding value.

AR Scan

Virtual Shops

The application allows users to use their camera to find and scan the

nearby shops which had pinned point at the exact location of the shops.

Image Search

Recognition

The application allows users to snap a picture in anywhere and the system

will search for similar products in the application.

Real time Chat The application allows buyers and sellers to chat & deal in real time.

Payment

System

The application handles financial transactions by transferring fund among

parties. Example will be like PayPal, credit card and etc.

Want to Buy

Features

The application allows users to post product that they wish to purchase

but is still not available in the application database

COD Details The application allows sellers and buyers to set their preference location

for trading.




2.3.3 Comparison Analysis

According to the system comparison table 2.3.1 above, almost all of the

shopping mobile apps do not have the “Want to Buy” feature. The purpose of

implementing this feature is to allow users to post some products that they are desired

but not available in the database or in the app. This function is able to help those users

who are craving for certain product but does not know where to find or purchase it.

Instead of wasting a lot of time to search something that is no clue, users can now just

wait for the seller to notify & recommend them when there is a demand of that

product.

Besides, in ZALORA, although it has an accurate and flexible text search

function and filter function, it does not provide image search recognition in their app.

When the right pictures can represent everything, an image search function is far

better than a text search function as users sometimes might not be able to recall the

keywords or the title of the product. This same goes to the others app like Carousell,

Mudah.my and the UniCAT mobile flea market. So far, eBay is the only app who has

multiple search functions such as normal text search, voice search and barcode

scanner search but it also does not have image search.

From the table 2.3.1, it is clear that only eBay has the automated bidding

session compared to other shopping app. The reason of developing this automated

bidding is to attract more users to use this app as users now can spend more time on

the app in order to bid the product they want with their expected bidding price. It is

more flexible whereby the price of the product is not static constant and users can

choose the price themselves.

However, eBay does not have the real time chat functionality. This same goes

to ZALORA & the UniCAT Flea Market. When users have some problems with the

size or other reason, instead of straight message to the sellers through the chat box,

now users have to purposely find the seller contact information and use other tools to

contact them. This caused a lot of trouble and difficulty for the users to find the seller

as there are some sellers who do not provide their contact on the product details. In

addition, all of the apps do not have the functionality of AR scanning except UniCAT

E-commerce. Instead of finding shops nearby through Google or check on Facebook

page about the house renting, now users can use their camera to scan and check for

the virtual shops and housing around them with the exact location and direction.



Chapter 3: System Design

Chapter 3: System Design

3.1 Requirement Specifications

3.1.1 Functional Requirement

1. User should be able to sign up new account and log in before can access to the

system. 2. User should be able to sell items, capture item images, and add items details. The

item details may include item name, item description, item images, and item price

and meet up COD venue.

3. User should be able buy items, search particular item, add item to cart, confirm

order, chat and deal with seller, check item review and rate transaction order. 4. User should be able to bid item, add and create their item for bidding and add new

bidding item details. 5. User should be able to post item at “Want to Buy” forum where the items are not

yet available in the app, recommend item to other users, create new post in the

forum. 6. User should be able to view their order list, check with user‟s items that ordered by

other people, view the order details and COD location. 7. User should be able to manage their user profile, edit and update user profile

information and remove the unwanted list. 8. User should be able to update the status of his/her selling item, delete his/her selling

item & edit the item details. 9. User should be able to scan the nearby virtual shops by using the app camera. 10. User should be able to keep or remove their transaction record history.

11. User should be able to use image search to seek for their items.

3.1.2 Non-Functional Requirement

1. All transaction data should be stored and saved in the real time database without

any hardcoded source code in the application.

2. Synchronisation between the user data changes in server should in real time.

3. All captured images should be saved in the server in order to retrieve on demand.



Chapter 3: Proposed Method 3.2 Design Specifications 3.2.1 Use-case Diagram Figure 3.3: Use case diagram of the E-Commerce module of UniCAT



Chapter 3: Proposed Method 3.2.2 System Flow

Figure 3.4: System flowchart of the E-Commerce module of UniCAT (Part 1)



Start

Login Screen

Registered User?

Show Registration Page

Register Account

Verify Register

Forgot Password

Verify Login

Reset Password

Show Home Page

No

No

Yes

Valid

Valid

Invalid

Invalid

Chapter 3: Proposed Method Figure 3.5: System flowchart of the E-Commerce module of UniCAT (Part 2)



Chapter 3: Proposed Method 3.2.3 Sequence Diagram Figure 3.6: Sequence Diagram of UniCAT: E-Commerce in Client-Server Data Synchronisation



Chapter 3: Proposed Method

3.2.4 Entity-Relationship Diagram

Figure 3.7: Entity-Relationship Diagram



Chapter 4: Methodology and Tools


4.1 Methodology

Throughout this process, evolutionary prototyping methodology will be used as the

software development methodology. Evolutionary prototyping is known as a lifecycle

model as the system is developed in increments so that it is ready to be modified of

updated in response to the end-user and user feedback. Besides, evolutionary

prototyping methodology is an iterative, trial and error process which will takes place

between the user and the developer.

The reason to choose this methodology for the software development is because for

most of the mobile application, the user interface design is the main key factor

towards its interactivity and usability as the design face some physical limitation such

as limited screen size, restriction input methods and so on. So, the user interface

design for the navigation and the user input is extremely impactful for the project.

Therefore, with this methodology implemented in the project, some clear and

necessary requirements are implemented first. Then, the prototypes are built, tested,

obtained user‟s feedback and then reworked again. This process will be implementing

repeatedly until an acceptable prototype is finally achieved. The other important

requirements can be updated later on.

Figure 3.1: Flow Chart of the Evolutionary Prototyping Methodology




4.1.1 General Work Procedures

Figure 4.2: Work flow diagram of the Evolutionary Prototyping Methodology




4.1.2 Work Procedure Elaboration

At the very beginning, developers have to do some researches and findings on

UniCAT system in order to understand the project background and the purpose

behind of the system and explore the latest of the system architecture. Problems

discovered in the existing UniCAT system are identified and a problem statement is

constructed after that. Next, in the planning stage, some basic requirements are

collected based on the research and findings gathered. The project scope is then

determined and verified in order to draw the boundary of the project clearly. Besides,

the objectives and expected contribution are derived from the project scope. At the

end of this phase, the project workflow and milestone are well scheduled.

Then, moving to the analysis and design phase, several similar and existing

systems which are matched with the project objectives are then evaluated. Next, the

strengths and limitation of those existing systems are then analysed and compared

during the reviewing process. At the end of this phase, a better solution is proposed.

Moreover, there are total three important phases in the development stage. In the first

phase, the basic prototyping is designed at first in order to reduce the development

time by making changes to the product when constructing the user interface. Then, the

hybrid mobile platform user interface skeleton will be developed and constructed for

the E-commerce module. On the back end side, where it includes the set-up of the

back end server with Google firebase, connect to the web services and combine the

front end user interface with the database. Furthermore, the second phase will be the

integration of the image search recognition. In order to implement the image search

recognition, the Google API of the image search will be combining and emerging to

the UniCAT database. For are well displayed and are able to function with the E-

commerce module.

Other than that, during the user evaluation and testing phase, a prototype will

be delivered to the user for evaluation and feedback. If refinement is required, the

prototype will be send back to the previous phase in order to modify and enhance.

In the system deployment phase, a hybrid platform mobile application is built and

distributed to the users for installation. Feedbacks from users are collected for

maintenance purpose.




4.2 Tools to use

4.2.1 Software

1. Sublime Text

Sublime text is development software that used to construct the user interface of the

mobile application.

2. Node.js

Node is designed to build scalable network applications and installed all the libraries

packages for the hybrid platform.

3. Firebase

Firebase is an open-source back-end database and web services.

4. Microsoft Words

Microsoft Words is a word processor that is mainly used for documentation.

5. Visual Paradigm

Visual Paradigm is a diagramming program that is used to illustrate the structure,

system flow and concept of an application.

8. Sketch

A vector drawing software is used to design the UI component of the project.

4.2.2 Hardware

1. Computer

System type: Acer Laptop

Processor: 2.3 GHz Intel Core i5

Installed Memory: 4GB 1333 MHz DDR3

2. Smartphone

A 16 GB xiaomi smartphone with android version is used to test the actual

performance of the application.




4.3 Timeline

This project is separated into two parts, which are project I (Short trimesters) and

project II (Long trimesters). Both of the projects are assigned to be completed within

these two last final trimesters, which is approximately 21 weeks. There are total of

two reports submission with viva presentations in these two trimesters. In the project

I, an 80% of the completed module for the mobile app had been done. The project II

is to be used to enhance and improve until reached to the satisfaction level.

4.3.1 Gantt Chart

Figure 4.3: Gantt Chart



Chapter 5: Implementation and Testing


5.1 Implementation of App System

Figure 5.1.1: UI Flow of the Login, Registration, Forgot Password & Error

Prompt Pages.

In order to access to this app, users first must register an account by filling the

basic details of username, email, password and the contact number. After registered

successfully, users are required to login in with their existing account. The app system

will check the authentication of the inputs. An error pop up message with the red

details error will be prompted out if users key in the wrong information. Besides, if

users had forgotten their account password, they can ask for a temporary password

from the database by entering in their email and the system database will send a

temporary password to their entered email.




Figure 5.1.2: Home Page, Side Menu and Categories UI Design

After users had login successfully, it will directly route to the home page,

which showed at the left screenshot of Figure 5.1.2. In the home page, users can

choose either they want to buy or sell items. A tab bar will always fixed at the bottom

of the app in order to let users easier to access to several peer information categories

at once and tab bar is always more convenient and user friendly. So, rather than only

choose buy or sell at the home page, with the help of the tab bar, users can have

multiple access by clicking the icon at the tab bar such as manage user profile, try on

the image search function, post item that are not available in the app at the want to

buy feature, have bidding sessions and manage basic setting.

Besides, side menu can be obtained by just tapping on the icon button on the

top left side or by swiping gestures from the left edge of the screen to the right. Item

categories will be displayed at the side menu navigation. The purpose of

implementing the side menu is to let users to choose their preference items according

to the categories so that users do not have to waste their time in finding the particular

item. Once users click on one of the categories, the app will navigate and shows all

the item which lay on the same categories and example is showed at the right

screenshot of Figure 5.1.2.




Figure 5.1.3: Buying Process (Menu -> Search item -> Item Detail (Review,

Description) -> Confirm Order-> inbox-> Report)

Figure 5.1.3 showed the flow of the buying process in this app. First of all, once

users clicked at the “I am buying” button at the home page; it will then lead to the

menu page that shows all of the items which are shown at the top left of Figure

5.1.3. A details page with full image with slides box and descriptions are shown

after the users clicked for more details at the particular item. If users want to read

through the description, they can simply pull up or just double tap on the pull up

button which is shown at the bottom right of Figure 5.1.3. If users are interested

to the item, they can click the black button in order to request for the order. Then,

a message will be sent to the seller inbox for further dealing. If users are still

wondering about the item, they can add that items to their cart first and confirm

the order in next time. Besides, Users can always check for the item quality by

clicking the review button at bottom right of the detail page. If other users found

some post are sensitive or not suitable for posting, they can report that particular

post to us by clicking the button at the top right and click to report.




Figure 5.1.4: Selling Process of the UI Design

For the selling part, users only have two steps to do in order to sell their items.

Firstly, they have to choose whether they want to capture the item by camera or

choose from their phone gallery. After capturing the item image, the very last

step is to fill in all the item details including item name, price, description and the

meet up place for COD. The system will automatically help users to choose for

the suitable category by using the image searching API to get the image result

and arrange it to the appropriate category. However, users still can change their

category themselves in case that they are more preferred with their own choice.




Figure 5.1.5: User Profile, My Post, Edit Profile, My Order, COD & Order

Details

Figure 5.1.5 above shows all the user profile management. In the user profile page,

users can access to various information features such as editing profile information,

checking all of their posted items, inbox, bidding items , shopping carts, item posted

at the want to buy page and checking their order list. At the My Post page, all the

user‟s items are categorized into three different of statuses which are items that are

still available, items that are in discussing status (Buyer & Seller are dealing) and the

items that had completed sold. Moreover, in the order details, users can check for the

COD details which there will be a Google map that shows the route from the buyer‟s

current location to the meet up location. Examples are shown at above Figure 5.1.5.




Figure 5.1.6: Want to Buy Features UI Design

The aim of implementing this “Want to Buy” feature is to create a social forum

where everyone can post their items that are not available in this app database yet.

In another words, whenever users fail to search for the items they wish to purchase

in the application, they can simply update a post in words or images in relation to

the items they search for. Meanwhile, users can just wait for other sellers or friends

who have or seen the exactly similar items in hand to recommend to them. Besides,

users also can recommend similar item to their friends when they saw there are the

similar products at users‟ posts or other people posts.

Figure 5.1.7: Bidding Session UI Design




Furthermore, Figure 5.1.7 showed one of the interesting features in this app which is

the “Bidding Session”. Sellers are granted with the right to open up a bidding session

at any time, with duration up to 24 hours per item. In that bidding session, users who

want the item are allowed to bid for the price at which they are willing to pay. Once

the time is up, the item will be officially sold to the user with the highest bidding

price. In order to avoid any price spamming, the system will have restriction whereby

each user can only bid for the item once every 30 minutes.

Figure 5.1.8: Setting UI Design

In the setting page, users can change their password, check with guideline about how

to use the apps, some best practise of trading advice, giving feedback about this app

and logout.

Figure 5.1.9 Image Search Recognition UI Design

In this view, if users wish to know whether the particular items are available in the

app system or not, they can seek for the item by snapping a picture of it. Then, the

picture will be sent to the Google cloud vision API to analyse the picture type, labels

and details.




Next, the cloud will send back the result of the image to the system and the system

will check that item category and retrieve similar category items from the database.

Therefore, users are able to check the similar items from the app and other items that

are fall in the same category by clicking the particular item to view the details and

description.

Figure 5.1.10 AR for Virtual Shop UI Design

In this view, users can use their camera to scan for the nearby virtual shops. At the

above left image, those markers indicate the virtual shops and their location. There is

radar to show the exact direction of different markers. Besides, once users clicked on

the markers, the details view will appear at the right hand side by showing the images,

descriptions and distance from users‟ current location to the shops. If users clicked on

the „more‟ button, the app will redirect the users to the shops website in order to let

the users to browse their items. The special thing is that when users still in the details

view and they turn around their camera, there is a blue icon marker will track the

location of the shops so that users can know that particular detail view is from which

shop marker. Moreover, when users clicked on the range button, a view will slide

from the left hand side. The range view allows users to choose the range of the

distance they want. For example, if users only want to check on the shops that are

only 2 km from their current location, they can pull the range to the distance they

want and those markers that are over the distance will be disappeared. In order to

create virtual shops markers, shop owners have to purchase from the system and the

system will create and set the longitude and latitude markers on their business

address.




Figure 5.1.11 AR Scanning for House to let / Room to Rent

Basically, for this view, users can also use their camera to scan for the nearby room to

rent or house to let with the exact location of the seller. At the above left image, the

marker allocated at the exact location of the house. There is radar to show the exact

direction of different markers. Besides, once users clicked on the markers, the details

view will appear at the right hand side by showing the images, descriptions and

distance from users‟ current location to the shops. The special thing is that when users

still in the details view and they turn around their camera, there is a blue icon marker

will track the location of the shops so that users can know that particular detail view is

from which shop marker. Moreover, when users clicked on the filter button, a view

will slide from the left hand side. The filter view allows users to choose the range of

the room price they want. For example, if users only want to check on the rooms that

are only lower than RM300, they can pull the filter it with the price and scan the left

over room or house again.




5.2 Black Box Testing

Table 5.2.1 Buy and Sell Module Test Case

Buy & Sell Module

Case Test Action Test Result Status

1 Tap on buy button in

home page.

Items List View appeared, Pass

2 Tap on one of the item

in the item list.

Item Detail View appeared,

showing all the item details

with slides box of images.

Pass

3 Tap on Pull Up button

at the bottom of the

item detail view.

Item Description View

appeared, showing all the

items information and

description.

Pass

4 Tap on Add To Cart

button at the left bottom

of the item detail view.

A confirmation alert show

to confirm to add item to

cart. Item will add to the

Cart List View once

confirmed.

Pass

5 Tap on Confirm Order

button at the right

bottom of the item

detail view.

A confirmation alert show

to confirm the order. A

message will be sent to the

seller Inbox View once

confirmed the order.

Pass

6 Tap on Review button

on the right of the Pull

Up Button.

Item Review View

appeared, showing every

buyers comment and review

on the item.

Pass

7 Tap on sell button in

home page

Sell Item View appeared Pass

8 Tap on “Take From

Camera” button at Sell

Item View

Phone Camera launched and

allows users to crop the

images size once snapped.

Pass

9 Tap on “Choose From

Gallery” button at Sell

Item View.

Phone Image Gallery

appeared and allows users to

choose the images.

Pass

10 Tap on “Done” button

from the Phone Camera

View.

Sell Item Details View

appeared, prompting users

to fill in all the required

details. Item category will

be automatically chosen.

Pass

11 Tap on “Post” button

from the Sell Item

Details View.

Home Page View appeared,

successfully posted the

items.

Pass



Chapter 6: Conclusion


6.1 Project Review

This project serves as an effective and efficient platform for students and

residents in Kampar Perak to access to the world E-commerce through a mobile

application. The E-commerce module of the UniCAT for mobile allows target group

of users to buy, sell, and bid for any items they want easily, by using just a handheld

device in the palm of their hands. In addition, the built in function of image search

recognition brings more convenience as it allows users to search for a particular item

in just a few seconds. Not to forget, the technology of augmented reality allows users

to scan for nearby house to rent, virtual shops and helps users to check for the actual

seller location.

This project formed and created based on the idea of social interaction,

whereby it opens the way for more interaction between new users and its existing

users alike, enabling them to access it at anytime, anywhere. For example, in the

“Want to Buy” forum, users can recommend the items to everyone even though they

do know each other. Besides, a social real time chat box is also available to let users

to deal and bargain the item themselves. Indeed, with more interactions and higher

usage frequency, UniCAT can better study and understand its users‟ behaviours,

preferences and even interests as well.

6.2 Implementation Issues and Challenges

In this project, the major obstacle and challenge faced is the user experience and the

UI design. The reason is when implement both IOS and Android platform; some

features design may not support both platform and have to seek for the design that can

fit for both platforms. During designing and constructing the UI, the overall features

positioning and placement have to be considered very carefully as different type of

platforms and the limited screen estate of mobile devices sometimes will ruin the user

experience when the placement of the content is very complex or compact. In order to

implement a successful mobile application, user‟s first impression will be one of the

main key factors.




6.3 Impact, significance and contribution

By the end of this project, UniCAT will take this E-commerce module into the hybrid

mobile platform. It will have an efficient and a better way of collecting the user

behaviours without disrupting the user experience. With the E-commerce included

into UniCAT system, the application will become more and more populated as

students, visitors, locals or even lecturers can now conveniently involve themselves in

the buying and selling activity, easily post and search for items they wish to purchase

or even the interesting bidding session.

6.4 Future Work

In future, the area coverage of the app system will be expanded and enlarged.

UniCAT E-commerce should implement support for other areas, cities or even

countries. So, the market size will increase and appeal to more users as the app system

will not be restricted to only in Kampar area. In addition, the image search

recognition function can enhanced or improve more in the future. The accuracy of this

function may not be too accurate as the test cases are not trained as many as possible.

So, when time to time, more test cases will be tested in order to increase the accuracy

of the function.

Moreover, for the AR scanning features, it can be improved further where users can

automatically purchase the marker through the apps and generate marker themselves

without the admin set for them. It will save a lot of time for the admin where he/she

no need to set and allocated the marker themselves.



Bibliography

References

Business Information System. (N.D). Zalora Online Application Analysis [online].

Available from: <https://www.scribd.com/doc/313580705/Tugas-

AnalisisSistem-Informasi Bisnis-Zalora >. (Accessed 19 August 2016).

Carousell. (2016). Carousell App [online]. Available from: <https://carousell.com/>.

(Accessed 17 August 2016).

eBay. (2016). Bidding overview [online]. Available from: <http://pages.ebay.co.uk

/help/buy/bidding-overview.html>. (Accessed 17 August 2016).

Fiona, S. (2013). Review on Carousell [online]. Available from:

<https://fionaseah.com/2013/12/18/ review-on-carousell/>. (Accessed 18

August 2016).

Hillary, D. (2011). The Advantages and disadvantages of selling on eBay today

[online]. Available from:

<http://thewhineseller.com/2011/08/advantages-disadvantages selling

ebay today/> (Accessed 18 August 2016).

Mudah.my. (N.D). About mudah.my [online]. Available from:

<http://www.mudah.my/about/index.htm?ca=9_s>. (Accessed 18 August

2016).

Tan, Z. Y. (2015). App Review: Zalora Singapore [online]. Available from:

https://blog.nus.edu.sg/mobileixd/2015/01/31/app-review-zalora-singapore/

(Accessed 19 August 2016).

Zalora. (2012). ZALORA App [online]. Available from:

<https://www.zalora.com.my /mobile-apps/>. (Accessed 19 August 2016).



Appendix

The New Multi-screen World:

Understanding Cross-platform Consumer Behavior

(Slide 20 and 21)


A-1 Faculty of Information and Communication Technology (Perak Campus), UTAR

Poster

UniCAT: Enhancing E-Commerce Module in Hyrbid Platform Mobile

Aplication

BCS (HONS) Computer Science A-2 Faculty of Information and Communication Technology (Perak Campus), UTAR

Appendix

Turnitin Originality Result (Part 1)



Appendix

Turnitin Originality Result (Part 2)



UNICAT: ENHANCING E-COMMERCE MODULE IN HYBRID …

Documents

Transcript of UNICAT: ENHANCING E-COMMERCE MODULE IN HYBRID …