MOHAMAD IZRAN ISKANDAR BIN RUSLI BACHELOR OF …

TAMAN TAMADUN ISLAM GET-A-WAY

MOHAMAD IZRAN ISKANDAR BIN RUSLI

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2019

i

DECLARATION

This thesis is submitted as a part of fulfilment for the award of a Bachelor of

Information Technolgy (Informatics Media) with honors at Universiti Sultan Zainal

Abidin, Terengganu, Malaysia. The output is a result of my own work and research and

investigation. All of the chapter that has been stated and written, which has been taken

from other resources are fully referenced.

__________________________________

Name : Mohamad Izran Iskandar bin Rusli

Date : 16th MAY 2019

ii

CONFIRMATION

The project report Taman Tamadun Islam Get-A-Way was submitted by Mohamad Izran

Iskandar bin Rusli, matric number BTDL16043955. The research conducted and

writing of this report was confirmed under my supervision.

_______________________________________

Name : Dr. Syadiah Nor binti Wan Shamsuddin

Date : 16th MAY 201

iii

DEDICATION

In the Name of Allah, the Most Gracious and the Most Merciful.

Alhamdulillah for the support that have been received throughout the process of

finishing the project. Without the support, encouragement and cooperation of many

people, I may not end my project with flying colors.

My deepest gratitude to be given to the most dedicated supervisor, Dr. Syadiah

Nor binti Wan Shamsuddin. The help that has been given from day one has been

exceptional and her advice and encouragement has help me a lot to make this project

happens. Thanks for the opportunity to learn under your guidance.

I would like to take this opportunity to say thank you to my parents and all of

the lectuerers in Faculty of Informatics and Computing for their knowledge, advices

and encouragement. Last but not least, my sincere thanks also go to my fellow friends

and classmates which helps my way to finish the project.

May Allah S.W.T grants all of them and give His blessing for all the efforts that has

been taken to finish this project. Thank you.

iv

ABSTRACT

In this modern technology era, many technologies have been introduced to the

world as one by one traditional method seems to be replaced. Augmented Reality (AR) is

one of the latest technologies that has been widely used in many occasions. The technique

that preview 3D objects in a real world through the use of smart phone is one way that can

be used to enhance the tourism sector. Taman Tamadun Islam which is located near Kuala

Terengganu is one of potential place to implement the AR technology. Walking around the

Taman Tamadun Islam and looking at replica monuments of famous mosque around the

world is seems just like a normal tour. Therefore, integration of real world and virtual world

which is AR is to enhance the experience that can be gathered during the session. This

project is developed for the tourist around the world that will visit Taman Tamadun Islam.

This technology which required the user to use their smartphone camera and point to any

monument at the Taman Tamadun Islam and they can gather the information about the

mosque in instant. The use of AR feature in this project will be developed using a marker-

based AR which is suitable with the monuments around the Taman Tamadun Islam that

helps. The objective of the projects is to help the tourist in their way through Taman

Tamadun Islam while enhancing the tourism sector.

v

ABSTRAK

Dalam era teknologi moden ini, banyak teknologi telah diperkenalkan kepada

dunia dan satu per satu kaedah tradisional diganti. Augmented Reality (AR) adalah salah

satu teknologi terkini yang telah digunakan secara meluas dalam banyak keadaan. Teknik

yang mempamerkan objek 3D di dunia nyata melalui penggunaan telefon pintar adalah

salah satu cara yang dapat digunakan untuk meningkatkan sektor pelancongan. Taman

Tamadun Islam yang terletak berhampiran Kuala Terengganu adalah salah satu tempat

yang berpotensi untuk menggunakan teknologi AR. Berjalan di sekitar Taman Tamadun

Islam dan melihat replika monumen masjid terkenal di seluruh dunia dilihat sekadar

lawatan biasa sahaja. Oleh itu, integrasi dunia sebenar dan dunia maya iaitu AR adalah

untuk meningkatkan pengalaman yang dapat dirasa semasa melancong. Projek ini

dibangunkan untuk pelancong di seluruh dunia yang akan melawat Taman Tamadun Islam.

Teknologi ini memerlukan pengguna untuk menggunakan kamera telefon pintar mereka

dan menunjuk kepada mana-mana monumen di Taman Tamadun Islam dan mereka boleh

mendapatkan maklumat mengenai masjid secara terus. Penggunaan ciri AR dalam projek

ini akan dibangunkan menggunakan marker-based AR dimana dilihat sangat sesuai dengan

monumen di sekitar Taman Tamadun Islam. Objektif projek ini adalah untuk membantu

pelancong yang melawat Taman Tamadun Islam sambil meningkatkan sektor pelancongan

vi

TABLE OF CONTENTS

DECLARATION .................................................................................................................... i

CONFIRMATION ................................................................................................................. ii

DEDICATION ...................................................................................................................... iii

ABSTRACT .......................................................................................................................... iv

ABSTRAK ..............................................................................................................................v

TABLE OF CONTENTS ...................................................................................................... vi

LIST OF TABLES .............................................................................................................. viii

LIST OF FIGURES .............................................................................................................. ix

CHAPTER 1 .................................................................................................................. 1

INTRODUCTION ..................................................................................................................1

1. PROJECT INTRODUCTION .....................................................................................1

1.2 PROBLEM STATEMENT .........................................................................................2

1.3 OBJECTIVES .............................................................................................................3

1.4 SCOPE ..........................................................................................................................3

1.4.1 USER .........................................................................................................................3

1.4.2 APPLICATIONS .......................................................................................................3

1.5 EXPECTED RESULT ..................................................................................................4

1.6 LIMITATION ...............................................................................................................4

1.7 MILESTONE AND ACTIVITIES ...............................................................................5

1.8 REPORT STRUCTURE ...............................................................................................6

CHAPTER 2 .................................................................................................................. 7

LITERATURE REVIEW .......................................................................................................7

2.1 INTRODUCTION ........................................................................................................7

2.2 AUGMENTED REALITY (AR) ..................................................................................8

2.3. EXISTING SYSTEM ..................................................................................................9

2.3.1 ETIPS TRAVEL APPS ..............................................................................................9

2.3.2 BBC CIVILISATION AR........................................................................................10

2.3.3 MYMELAKA ..........................................................................................................10

2.3.4 MY CITY MOBILE APP ........................................................................................11

2.4 OVERALL ANALYSIS .............................................................................................12

2.5 CONCLUSION ...........................................................................................................13

CHAPTER 3 ................................................................................................................ 14

METHODOLOGY ...............................................................................................................14

vii

3.1 INTRODUCTION ......................................................................................................14

3.2 DEVELOPMENT METHODOLOGY .......................................................................15

3.2.1 ANALYSIS PHASE ................................................................................................15

3.2.2 DESIGN PHASE .....................................................................................................16

3.2.3 DEVELOPMENT PHASE.......................................................................................17

3.2.4 IMPLEMENTATION PHASE ................................................................................17

3.2.5 EVALUATION PHASE ..........................................................................................18

3.3 SYSTEM REQUIREMENT .......................................................................................18

3.3.1 SOFTWARE REQUIREMENT...............................................................................18

3.3.2 HARDWARE REQUIREMENT .............................................................................19

3.4 TECHNIQUES............................................................................................................19

3.5 STORYBOARD..........................................................................................................21

3.5 PROOF OF CONCEPT ..............................................................................................21

3.5 CONCLUSION ...........................................................................................................26

CHAPTER 4 ................................................................................................................ 27

IMPLEMENTATION AND TESTING ................................................................................27

4.1 INTRODUCTION ......................................................................................................27

4.2 IMPLEMENTATION .................................................................................................28

4.2.1 Mobile app interfaces ...............................................................................................28

4.2.2 AR marker ................................................................................................................32

4.3 TESTING ....................................................................................................................37

4.3.1 Test Case ..................................................................................................................37

4.4 SUMMARY ................................................................................................................39

CHAPTER 5 ................................................................................................................ 40

CONCLUSION .....................................................................................................................40

5.1 INTRODUCTION ......................................................................................................40

5.2 PROJECT CONTRIBUTION .....................................................................................41

5.3 PROBLEM AND LIMITATION ................................................................................41

5.4 FUTURE WORK ........................................................................................................41

5.5 CONCLUSION ...........................................................................................................41

REFERENCES .....................................................................................................................43

viii

LIST OF TABLES

Table 1-1: Gantt Chart ................................................................................................... 5

Table 2-1: Comparison Table ...................................................................................... 12

Table 2-2: Comparison Table ...................................................................................... 12

Table 4-1: Test case for successful of open the application. ....................................... 37

Table 4-2: Test case for successful of Help Page ........................................................ 38

Table 4-3: Test case for successful of AR Camera page. ............................................ 38

Table 4-4: Test case for successful of Quit page. ........................................................ 39

ix

LIST OF FIGURES

Figure 2-1: eTips Travel Apps ....................................................................................... 9

Figure 2-2: BBC Civilisations AR ............................................................................... 10

Figure 2-3: MyMelaka Application ............................................................................. 10

Figure 2-4: My City Mobile App ................................................................................. 11

Figure 3-1: ADDIE Model ........................................................................................... 15

Figure 3-2: Storyboard ................................................................................................. 21

Figure 3-3: Homepage ................................................................................................. 22

Figure 3-4: How to Use ................................................................................................ 23

Figure 3-5: AR Camera ................................................................................................ 24

Figure 3-6: 3D information pop-up .............................................................................. 25

Figure 4-1: The home page for the mobile application when they open it. ................. 28

Figure 4-2: Show the guide on how to use. ................................................................. 29

Figure 4-3: 3D object will pop up with some of the information of the object. .......... 30

Figure 4-4: Same features that will happen if the camera detects the marker ............. 30

Figure 4-5: How the markers detected ......................................................................... 32

Figure 4-6: Front pages of the book ............................................................................. 33

Figure 4-7: Information of Taman Tamadun Islam Park ............................................. 34

Figure 4-8: Some of the pages on the book that will be used as a target for the AR

function. ....................................................................................................................... 35

Figure 4-: Last pages of the book................................................................................. 36

1

CHAPTER 1

INTRODUCTION

1. PROJECT INTRODUCTION

Taman Tamadun Islam Get-A-Way is an application that will help you to solve

all of the problems that occurs during your time in the places.

It is the norm of travelling when we travel, we wanted to learn something new.

With the advance technology that is happening around our world. Taman Tamadun

Islam Get-A-Way is a guiding tool or application that will help the tourist to gain more

knowledge concerning the monuments around Taman Tamadun Islam while

implementing the current technology which is Augmented Reality (AR). This

technology is being used across the globe and it will help guide the tourists interactively.

This application will show the information for the user and when they point to any

historic or the interesting places around them.

2

With the existence of the application, the user will know about the monuments

while they are walking their way through Taman Tamadun Islam. Users will be

exploring around the park while gaining new information with a new way which is

“Taman Tamandun Islam Get-A-Way”.

1.2 PROBLEM STATEMENT

The problem statement for this project is as followed:

i) Tourist may get bored as there is no interactive action during the tour as

the tourist just only will watch the monument around the Taman Tamadun

Islam.

ii) Tourist do not have the information about the places and the information is

hard to be search and sometimes.

iii) The use of pamphlet or fliers seems no longer relevant in this modern era

thus will waste the usage of paper

3

1.3 OBJECTIVES

This application is built to achieve these objectives:

i) To design an application that will let the tourists to interact with their

phone while enjoying their tour.

ii) To develop a mobile application using augmented reality technology that

helps tourists.

iii) To implement an application that will enhance the usage of modern

technology and save the usage of the paper.

1.4 SCOPE

1.4.1 USER

• User can point their smartphones and get information on certain monuments

around the Taman Tamadun Islam.

1.4.2 APPLICATIONS

• When the smartphones are pointed to the buildings, it will pop an information

about the buildings.

• The application also required the use of internet connection and Global

Positioning System (GPS).

4

1.5 EXPECTED RESULT

• The user able to learn about the Taman Tamadun Islam in a fun way.

1.6 LIMITATION

• The application only available on outdoor environment only.

• Only certain of the buildings is recognized.

• Mobile based application.

• This application is only available on android platform only.

5

1.7 MILESTONE AND ACTIVITIES

TASK NAME

SEPTEMBER OCTOBER NOVEMBER DECEMBER

1 2 3 4 5 6 7 8 9 10

1

1

12 13 14 15

Topic Discussion

Project Title

Proposal

Proposal Writing

Proposal Writing –

Literature Review

Proposal Progress

Presentation &

Evaluation

Discussion

Correction Proposal

Proposed Solution

Methodology

Proof of Concept

Drafting Report of The

Proposal

Submit Draft of Report to

Supervisor

Seminar Presentation

Correction Report

Final Report Submission

Table 1-1: Gantt Chart

6

1.8 REPORT STRUCTURE

The first chapter of this report has introduced the surfaces of how the Taman

Tamadun Islam Get-A-Way going to work. This chapter also explain more about the

objective, problem statement, scopes, gantt chart and else.

In chapter two, all of the resources gathered from the research will be explained.

All of the research consists from reading materials, journals and information from the

internet.

For the third chapter, it will be explained more about the methodology and

technique that has been used during the process of development.

7

CHAPTER 2

LITERATURE REVIEW

2.1 INTRODUCTION

Literature review for Taman Tamadun Islam Get-A-Way application that will be

developed will be explained in this chapter. Literature review is a knowledge based on

some journal, some readings of current or past application that will be referred

throughout the development process. They are so many systems that are quite similar

to the Taman Tamadun Islam Get-A-Way application. However, some of the system are

being take to consideration as a review to ensure the success of this application.

8

2.2 AUGMENTED REALITY (AR)

Augmented Reality (AR) is the current technology that is being widely used in

our era. Medication, education, industrial, manufacturing, military, entertainment or

any sector, just name it. Most of this sector gaining advantages by implementing AR to

their projects. AR use 3D virtual objects then are integrated into a 3D real environment

in real time. But do not mistaken it with 3D objects in the real world that do not have

any interaction to be done. For example, Jurassic Park movie that show 3D objects in a

real-world situation. AR enable the user to have an interaction between the user and the

application. For some researchers, they define AR must have the following

characteristics:

1. Combines real and virtual environment.

2. Is interactive in real time.

3. Is registered in three dimensions.

Augmented reality helps making the 3D objects to be shown in a real life which

helps the user to imagine better and understands better.

Moreover, a mobile AR application, being highly portable, can function as a

tourist guide that delivers information upon request, thus minimizing on the one hand,

the effect of information overload and on the other hand the effect of irrelevant

information. Information overload can occur when tourists are overwhelmed by the

transmitted information regarding historical sites, museum exhibitions, the pace of the

9

navigation and so forth. Information overload's effect further increases when the user

considers the information redundant or beyond her/his particular knowledge level. AR

can significantly help museums, heritage sites, cities and tourist professionals in general

because information can be organized and transmitted in layers or upon request. This

suggests that information can be targeted according to one's knowledge level and

interests, age, profession and so forth. As a result, mobile AR applications can

personalize the visit, according to tourists' desires and expectations, resulting in a much

more memorable experience. (Kounavis, 2012)

2.3. EXISTING SYSTEM

2.3.1 ETIPS TRAVEL APPS

Figure 2-1: eTips Travel Apps

The eTips Travel Apps are arranged by categories: Landmarks, Cities,

National Parks and Museums. Apart from providing travel guides, tailored itineraries

and interactive zoomable offline maps, eTips incorporated AR technology in order to

bring their content to consumers. The apps will also show the information that the user

wanted to know regarding the cities but not using the monuments as the AR target

images.

10

2.3.2 BBC CIVILISATION AR

Figure 2-2: BBC Civilisations AR

Putting history in your hand - the BBC's first ever Augmented Reality app

'Civilisations AR' brings art and culture direct to you from across the world. The concept

has been made by this application is very suitable for review as it using the marker-

based AR and some artifacts as the target images.

2.3.3 MYMELAKA

Figure 2-3: MyMelaka Application

MyMelaka apps launched a several years ago to help tourists across the globe to

explore around the most historical place in Malaysia. This application is fully completed

with the information about the cities started from their government to the interesting

places in Melaka. The application is equipped with nearby feature that shows what is

interesting near you which consist of a GPS function.

11

2.3.4 MY CITY MOBILE APP

Figure 2-4: My City Mobile App

The mobile apps make it easy for local government to keep their citizens

informed. The affordable Mobile App solution is perfect for cities, counties, and city

and municipal services. Information given by the app is not only useful for the local

citizens to get informed but very useful for the new traveler to get to know about the

new places.

.

12

2.4 OVERALL ANALYSIS

AR Technology Audio Video Graphic Text Animation Mobile Based

eTips Mobile Apps

BBC Civilisations AR

MyMelaka

My City Mobile App

Table 2-1: Comparison Table

Table 2-2: Comparison Table

Name Type of AR Advantages Disadvantages Type

eTips Mobile

Apps

Location

Based AR

Full useful categories of places. Too much text to be read on the

description.

Mobile Application

BBC

Civilisations AR

Marker Based

AR

Collaborations of older artifacts and new

technology that make it interesting.

Only some of the history or artifacts

are included.

Mobile Application

MyMelaka None Information wise about the cities which is

very accurate

Do not come up with navigation

system. Users still have to use other

application to navigate

Mobile Application

My City Mobile

App

None Consist of mostly cities in USA which is very

useful.

Less interesting interface used. Mobile Application

13

2.5 CONCLUSION

After going through a several researches based on the existing application, some

of the application seems delivering information well but it was not integrated with

marker-based AR, only some would have done it.

Therefore, I would like to develop an application that will optimize both new

technology and the information to help the users. With the advance technologies we

have nowadays. The usage of AR feature seems a little bit more interesting to be

implemented with the tourism sector.

14

CHAPTER 3

METHODOLOGY

3.1 INTRODUCTION

As usual, a developed system or an application must have a specific

methodology that help the developer to ensure the system that they developed is created

according to the method that they have chosen. In this chapter, a methodology will be

explained more detail and some of the software that helps to developed the Taman

Tamadun Islam-Get-Away application will be explained.

15

3.2 DEVELOPMENT METHODOLOGY

The methodology used in the process of developing this application is ADDIE

Model consists of analyze, design, development, implementation, evaluation. ADDIE

Model is an Instructional Systems Design (ISD) model. This model is used and chosen

because of the flexibility of the model can be evaluate throughout the process. This

model is also good for developer who are going for a rapid prototyping while this model

also helps to save time for the developer.

Figure 3-1: ADDIE Model

3.2.1 ANALYSIS PHASE

In this phase, a lot of research and questioning must be done. If necessary, a

survey also can be carried out during this phase as to gather all the information needed.

Besides that, list of problems also must be analyzed throughout this process because the

16

main objective any development of system or application is to solve the problems faced.

So, a research, questioning and brainstorming related to Taman Tamadun Islam-Get-

Away application has been done. It is as stated that tourist around the foreign state or

country did not have a clue about the surrounding around the city of Kuala Terengganu.

With all of the information gathered, it is easier to move to the next phase and indirectly

helps to meet the objective of this application.

3.2.2 DESIGN PHASE

All of the information and the information were gathered in the previous phase

will be used in this phase for designing purposes. In this phase a storyboard will be

made to see the flow or the illustrations of how the actual application will be run and

look like. The storyboard is very important as the storyboard will acts as the guideline

for the development of this application. Then, a representation of 2D images for the

interface and 3D representation for the AR feature that will be in this application also

will be design further in this stage. The designing process is so important to be identical

because it includes the places around the Kuala Terengganu city and it cannot be a

building that is created at will. A prototype of the application will boost the production

of this application for the next process and show how the end product of the application

should be.

17

3.2.3 DEVELOPMENT PHASE

The development process should be the longest process that will be carried out

between this model. The data from the previous two phases will be used to create an

application that according to the objectives. This process involves many works of

creating the functionality of the application. All of the software and hardware that is

related will be used to ensure that what has been planned in the design phase can be

done. The integration between the technologies or hardware with the software must be

done throughout the phase and should be reviewed.

3.2.4 IMPLEMENTATION PHASE

After a few processes of analyzing, designing and development already been

done, it must be implemented and tested. This is the phase where all of the testing

process being held. It reflects the continuous modification that occurs through the

ADDIE Model to ensure maximum good result and efficiency of the application is met.

In this process mostly will occur redesign, update, modification or any changes of the

application but there is still procedure to follow. Any feedbacks, comment or critics

from the supervisor and fellow panels should be taken and should be corrected

according to their needs as the process of the comment will help to improve the

functionality and efficiency of the application.

18

3.2.5 EVALUATION PHASE

Based on ADDIE Model methodology, evaluation can be broken into two parts

which is Formative Evaluation that occurs at the end of every process and Summative

Evaluation that only occurs at the end of the stage. For this process, all of the

questioning, designing and development of the application will be evaluated. It will

decide that either the problems are solved, either the objectives and goals are met in

order to call the project is a success project.

3.3 SYSTEM REQUIREMENT

3.3.1 SOFTWARE REQUIREMENT

SketchUp

A software that focused on 3D modelling as mostly of the AR feature which

consist of 3D objects will be created or modelled in this software.

Microsoft Visual Code

While this is the platform that will be used to write, compile and run the

programming language. All of the information that inserted by the user should be

processed in this software. All of the function that mention will be executed via this

software.

19

Unity 3D

This is the place where the AR feature will be managed and customized

according to the needs. The AR feature will be tested in this software to see if the AR

objects will be appeared in the camera when it is pointed. Vuforia plug-in will be added

to the software to enhance more of the usage.

3.3.2 HARDWARE REQUIREMENT

Laptop

A high-end laptop should be used in the process of development as there is

many high software requirements in order to make the projects.

Smartphone

The use of smartphone is to point to the monuments by using the camera and

the AR feature will appeared on the screen.

3.4 TECHNIQUES

There are several techniques that can be implemented when we speak about

Augmented Reality (AR). But there are several techniques that are developers used to

and for me in this situation regarding the development of the Taman Tamadun Islam

Get-A-Way, a marker-based technique will be used and utilized as the marker-based

technique will require a real-life object to be detected in order the 3D pop-up

information to show up. When the camera detects the marker that has been placed in

20

the monuments there will be an information regarding the mosque monuments will

appears.

Other than that, there is another method which is known as markerless AR. This

Markerless AR will enable the users to move the 3D objects anywhere around the real

time surroundings. The user can interact as they can set where to put the objects. Unlike

marker-based, this technique does not require any real-life objects to be recognized to

work.

The last one is location-based AR which is very dependent on navigation or

longitude and latitude of a certain place. If marker-based use real life object to recognize

it then location-based AR will use the longitude and latitude to define where to pop-up

the 3D objects info. The information will be required through the GPS system.

21

3.5 STORYBOARD

Storyboard is a rough sketch about what is about to be featured in our application

or system. The process of designing is going been revised by my supervisor and will be

improvised in the upcoming stages. The flow of the system also been showed in the

storyboard designing phase.

Figure 3-2: Storyboard

3.5 PROOF OF CONCEPT

The concept proposed earlier should come up with the suitable proof that will

help to show more how the application or system will work. A clear illustration about

the interface of my system also will be highlighted in this part.

22

Figure 3-3: Homepage

Homepage will be the first page that will appear when the user opens the

application and in this page the user will have three features for them to choose which

consists of camera, places and help.

23

Figure 3-4: How to Use

In this page, the main purpose is to help the user on how to use this application.

For the user who is new to augmented reality they can go to this page to read the manual

or guideline.

24

Figure 3-5: AR Camera

This is where the AR function will be implemented. The object will be

recognized through marker-based technique and. User can walk around the Taman

Tamadun Islam and point their camera to the monuments.

25

Figure 3-6: 3D information pop-up

After the camera can detect the recognizable marker through the monuments.

The 3D object will pop-up telling the user about the related information.

26

3.5 CONCLUSION

The methodology chapter has explained how important is the cycle, designing

and technique chosen to ensure the development of the projects can be done smoothly.

The ADDIE methodology that has been explain earlier seem a fit choice as it makes

sure that the application can be done by following the cycle. The designing of the

storyboard also a crucial part because it will work as a guideline in development phase.

With a detail early sketches, there may be minimum problems or maybe the problems

that will occurs can be reduced. The selection of software and hardware also suitable

with the feature that will be exist in the application.

27

CHAPTER 4

IMPLEMENTATION AND TESTING

4.1 INTRODUCTION

This chapter will mainly discuss about the implementation and testing phase

which is about how to construct the system based on what has been developed in

previous phase. The implementation also should be tally with the objectives that has

been set in order to fulfill the user requirements. The purpose of this phase also is to

detect whether there is any error or failure that might occurs in the system and the error

must be corrected before the system is published.

28

4.2 IMPLEMENTATION

Implementation phase is a very important phase as all of the planning will be

put to freeze and the work of the project is performed. The task is carried out in this

phase to ensure the delivery methods to be used will be efficient for the users. The

platform chosen to implement and carry out this phase is mostly using Unity3D and

integrated with cloud database, Vuforia. These platforms have help to develop, design,

code, test, execute for the whole process of the project. Other than that, for C# are

widely use to connect the code and the project through Unity3D.

4.2.1 Mobile app interfaces

4.2.1.1Home page

Figure 4-1: The home page for the mobile application when they open it.

29

In Figure 4-1, there are three interactive buttons which brings the user to the

other interfaces and pages when they click it. The interface was kept simple so that the

user can use the application easily.

The button AR Camera will take the user to experience the AR features using

their mobile camera. While, the help button will show and guide the user on how to use

the system. Lastly, quit button which will close the application if they don’t want to use

it anymore.

4.2.1.2 Help page

Figure 4-2: Show the guide on how to use.

In Figure 4-2, the help page will show to the user on how the system will operate

and they can read and follow the guideline to use it. There is also a back button so that

they can back to the home page and start using it.

30

4.2.1.3 AR Camera page

Figure 4-3: 3D object will pop up with some of the information of the object.

Figure 4-4: Same features that will happen if the camera detects the marker

31

In Figure 4-3 and Figure 4-4, the AR camera shows if the camera interacts with the

marker which is the book that contains the images of the mosques, the information about

the mosque will appear on the right side of the camera. The books gather some of the

mosques in the Taman Tamadun Islam and it carry the marker that is needed for the AR

function.

There is sound button appear on the left side of the screen, if the user taps the

virtual button, there will be a sound that will explain about the mosque more. The 3D

object of the mosque also has a feature where the user can scale the object when they

slide two fingers inwards or outwards. The back button for the user to go back to the

homepage.

32

4.2.2 AR marker

A marker-based AR feature needs a target that will be used for them to read the

image and pop-up a 3D object. The process of targeting is the image should be uploaded

on a cloud database which is Vuforia. Any images can be upload to the Vuforia but the

images with lots of corners and edges will help to get the most unique visual points thus

help the system to read the target even better. For Taman Tamadun Islam Get-A-Way

mobile application, the medium for target images used is book.

Figure 4-5: How the markers detected

33

4.2.2.1 AR Marker Book

Figure 4-6: Front pages of the book

Figure 4-6 will show the first look of the Taman Tamadun Islam Get-A-Way AR

book. The book will display a big image of Masjid Kristal which is another mosque that

is very synonym to Taman Tamadun Islam and also Terengganu.

34

.

Figure 4-7: Information of Taman Tamadun Islam Park

Figure 4-7 shows the information from Taman Tamadun Islam department

which the reader or the user can use in order to get any information or communicate

with the department. The barcode scanner is also can be scanned and will direct the user

to the Taman Tamadun Islam website but it will only last two weeks as it is the trial

version. The full version requires monthly installation.

35

Figure 4-8: Some of the pages on the book that will be used as a target for the

AR function.

In Figure 4-8, it is one of the pages that is being used as the image target or

marker for the application. The total model of the monuments inserted in the book were

5 models. The book is designed and created by using Adobe Photoshop and Adobe

Illustrator. The design for the book is simple as the name of the mosque is appear on

the right side of the page, the image on left side of the book and the AR tagging on top

of it to make sure the user knows that the image is the AR target.

36

Figure 4-: Last pages of the book

Last page of the book as shown in Figure 4-9 is just merely a page of

appreciation for the organizations and university that involved.

37

4.3 TESTING

A product of a finished project should be tested before it can be published for

user. Testing phase is also help to find out whether the functions created and either the

images that has been upload to Vuforia can be used or there are some errors to it.

4.3.1 Test Case

Test case is a condition where the test will be break down module by module of

buttons by buttons to see either each of the functions of module works accordingly until

the developer are satisfies with it. This process also can help to find either problems or

error that may occur in the project or systems.

Table 4-1: Test case for successful of open the application.

Test case for successful of open the application

Steps Test Procedure Expected Output Result

1. Open the application Three buttons will appear on

the home page of the

application which is AR

Camera, Help, Quit button

Pass

38

Table 4-2: Test case for successful of Help Page

Test case for successful of Help page

Steps Test Procedure Expected Output Result

1. Click the Help button How to Use page will

appear on the screen for the

user to read.

Pass

Table 4-3: Test case for successful of AR Camera page.

Test case for successful of AR Camera page

Steps Test Procedure Expected Output Result

1. Click the AR Camera button Camera environment will

appear on the phone

screen.

Pass

2. Users scan the Taman

Tamadun Islam Get-A-Way

book for marker

The 3D model will appear

on the screen with info on

the right and sound virtual

button on bottom left.

Pass

3. Users touch the sounds button. A sound that will read

about the info will be

played.

Pass

4. Users slide the slider on the

info part.

The information will be

slide up and down based on

the user’s interaction.

Pass

39

5. User pinch the 3D model of

the mosque

The 3D objects will change

either bigger or smaller

based on the user’s

interaction.

Pass

6. Click the back button to back

to the home page.

The application will go to

the home page.

Pass

Table 4-4: Test case for successful of Quit page.

Test case for successful of Quit page

Steps Test Procedure Expected Output Result

1. Click the Quit button on the

home page.

The applications will be

closed.

Pass

4.4 SUMMARY

In conclusion, in this phase of implementations and testing, most of the process has

been explained earlier. The implementation phases show how the application is

implemented on the real-life situations which as explained. Besides, testing phase also

been carried out in this chapter. The test cases are presented to show the process. The

purpose is to make sure all of the functions and module are working smoothly without

any error. The screenshots of the applications are also included for guidance.

40

CHAPTER 5

CONCLUSION

5.1 INTRODUCTION

This chapter is to discuss mainly on the con conclusion, constraints and future

works of the Taman Tamadun Islam Get-A-Way mobile application. The conclusion is

to discuss about the conclusion of the mobile application for the users. Project

constraints will discuss and gather all of the difficulties or challenges that has been faced

during the development of the application. Future works will list down all of the

suggestion of improvement in the future.

41

5.2 PROJECT CONTRIBUTION

Taman Tamadun Islam Get-A-Way mobile applications main goals is to help

tourist knows and learn more about the mosque that is in the Taman Tamadun Islam.

They will get to know better and enhance their experience more when they visiting

Taman Tamdun Islam while using the applications.

5.3 PROBLEM AND LIMITATION

Problems faced during the development of the system is the modelling of the

3D objects. Some of the objects may not seems as it is in the real life. The lack of

knowledge in modelling the mosque 3D model may delayed the development process.

It is also may occur because there are no blueprints of the mosque for guidance.

5.4 FUTURE WORK

As any system or mobile applications, there are always a part to be improved in

the future. As for Taman Tamadun Islam Get-A-Way, the future works to be done is

maybe the applications should contain all of the mosque in Taman Tamadun Islam.

Then, the interactivity between the user and the application also could be added such as

enter some videos or add some trivia quiz so that the interactivity could be maximize.

5.5 CONCLUSION

42

Taman Tamadun Islam Get-A-Way mobile applications helps most of the user

to get to know Taman Tamadun Islam and the monuments inside it better. Based on the

previous readings and study and discussions, ADDIE method is chosen as the most

suitable approach to be implemented on this mobile application. This new system will

enhance more and elevate the thrill of tourist to enjoy their visit to Taman Tamadun

Islam.

43

REFERENCES

A Survey of Augmented Reality. (1997).

Journal of Engineering Technology (Volume 6). (2018).

Kurt, S. (2017)"ADDIE Model: Instructional Design," in Educational Technology,

Dai-In Han, Timothy Jung, Alex Gibson. (2014). Information and Communication

Technologies in Tourism 2014

Chris D. Kounavis, Anna E. Kasimati, Afpraxia D. Zamani. (2012). Enhancing the

Tourism Experience through Mobile Augmented Reality: Challenges and Prospects.

Yovcheva, Z, Buhalis, D. and Gatzidis, C, (2012). Smartphone Augmented Reality

Applications for Tourism.