using augmented reality (ar-bbs) · oleh itu, dengan adanya ‘belajar bacaan solat using ar...

90
‘BELAJAR BACAAN SOLAT’ USING AUGMENTED REALITY (AR-BBS) RAFHANAH BINTI RAMLAN BACHELOR OF INFORMATION TECHNOLOGY (INFORMATICS MEDIA) WITH HONOURS UNIVERSITI SULTAN ZAINAL ABIDIN 2020

Upload: others

Post on 24-Sep-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

‘BELAJAR BACAAN SOLAT’

USING AUGMENTED REALITY

(AR-BBS)

RAFHANAH BINTI RAMLAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

UNIVERSITI SULTAN ZAINAL ABIDIN

2020

Page 2: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

‘BELAJAR BACAAN SOLAT’

USING AUGMENTED REALITY

(AR-BBS)

RAFHANAH BINTI RAMLAN

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATICS MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITI SULTAN ZAINAL ABIDIN

2020

Page 3: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

i

DECLARATION

I hereby declare that this report is based on my original work except for quotations and

citations, which have been duly acknowledged. I also declare that it has not been

previously or concurrently submitted for any other degree at University Sultan Zainal

Abidin or other institutions.

__________________________________

Name: RAFHANAH BINTI RAMLAN

Date:

Page 4: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

ii

CONFIRMATION

This is to confirm that:

The research conducted and the writing of this report was under my supervision.

________________________________

Name: PN.NORMALA BINTI RAHIM

Date:

Page 5: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

iii

DEDICATION

First of all, I would like to give big thanks to my supervisor, Pn.Normala binti Rahim

for giving me a lot of advice and guidance along the development of research. His

invaluable help of constructive comments and suggestions throughout this project have

contributed to the success of this research. Lastly, my deepest gratitude goes to my

beloved family for their support and motivation throughout the process of this research.

Also, thank you for those who directly or indirectly involved in helping me finish this

project.

Page 6: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

iv

ABSTRACT

Nowadays, the use of technology is increasing and expanding in human life. The use of

technology has expanded into many fields including research, doctoral, educational, and

many more. The technology used in education especially in early education for student

in primary school is to add more knowledge and help educators to teach more

effectively. Unfortunately, there are still children who abuse the existing technology

and cause their time wasted with unfortunate benefits. Therefore, with the advent of

‘Belajar Bacaan Solat’ using Augmented Reality Technology these student can use

technology properly. The objective of this project was to provide opportunities for these

children to study and use AR (Augmented Reality) technology more profoundly. In

addition, this project can also benefit to student of Islamic class in primary school

(KAFA) and KAFA teachers in teaching student more effectively. A variety of

multimedia elements are provided in the ‘Belajar Bacaan Solat’ using AR Technology

app with the aim of attracting student to learning. In conclusion, this project can help

student learn more effectively and become part of an IT-savvy child.

Page 7: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

v

ABSTRAK

Dewasa ini, penggunaan teknologi semakin meningkat dan meluas dalam kehidupan

manusia. Penggunaan teknologi telah meluas ke dalam banyak bidang antaranya

bidang penyelidikan, kedoktoran, pendidikan dan banyak lagi. Teknologi yang

digunakan dalam pendidikan terutamanya untuk pelajar KAFA sekolah rendah adalah

untuk menambahkan lagi ilmu pengetahuan dan membantu para pendidik mengajar

dengan lebih efektif. Malangnya, masih terdapat lagi pelajar yang menyalahgunakan

kemudahan teknologi yang sedia ada dan menyebabkan masa mereka terbuang dengan

akitivti yang tidak berfaedah. Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR

Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya..

Objektif projek ini dibangunkan adalah untuk memberi peluang kepada pelajar-pelajar

ini untuk mengkaji dan menggunakan teknologi AR(Augmented Reality) dengan lebih

mendalam. Di samping itu, projek ini juga dapat memberi faedah kepada pelajar-

pelajar tahun 4 kelas KAFA dan guru-guru untuk pembelajaran yang lebih efektif.

Pelbagai elemen multimedia yang disediakan dalam aplikasi ‘Belajar Bacaan Solat

using AR Technology’ ini dengan tujuan untuk menarik minat pelajar-pelajar semasa

sesi pembelajaran. Kesimpulannya, projek ini dapat membantu pelajar belajar dengan

lebih berkesan dan menjadi sebahagian daripada pelajar-pelajar yang celik IT.

Page 8: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

vi

TABLE OF CONTENTS

DECLARATION i

CONFIRMATION ii

DEDICATION iii

ABSTRACT iv-v

TABLE OF CONTENTS vi-ix

LIST OF TABLES x

LIST OF FIGURES xi-xiii

LIST OF ABBREVIATION/TERMS/SYMBOLS xiv

LIST OF APPENDIX xv

CHAPTER 1 INTRODUCTION

1.1 Introduction 1-2

1.2 Problems Statement 3

1.3 Objectives 4

1.4 Scopes 5

1.5 Limitation of work 6

1.6 Expected Result 6

1.7 Summary 7

Page 9: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

vii

CHAPTER 2 LITERATURE REVIEW

2.1. Introduction 8

2.2. Augmented Reality 9-10

2.2.1. Augmented Reality Techniques 10

2.3. Previous research on the application for Prayers in

Salah

11

2.3.1 Flashcard: Bacaan Rukun Qauli Dalam Solat 11

2.3.2. Mobile Application: E-Solat. 12

2.3.3 Mobile Application: The User Guide

Muslim Pray.

12-13

2.3.4. Mobile Application: Panduan Lengkap

Solat.

14

2.3.5. Mobile Application: Panduan Solat Wanita 14-15

2.3.6. Mobile Application (AR): ‘Ajar Saya Solat’ 15-16

2.4 Comparison Existing Products 16-19

2.5 Summary 20

CHAPTER 3 METHODOLOGY

3.1 Introduction 21

3.2 Rapid Application Development (RAD)

Methodology

21-22

3.2.1 Requirements Planning Phases 23-26

3.2.2 User Design Phases 27-35

Page 10: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

viii

3.2.3 Construction Phases 36

3.2.3.1 Development 36-38

3.2.4 Cutover Phases 39

3.2.4.1 Final Testing 39

3.3 Framework Design 40

3.4 Hardware and Software Requirement 41

3.4.1 Hardware requirement 41-42

3.4.2 Software requirement 42-43

3.5 Summary 44

CHAPTER 4 IMPLEMENTATION AND EVALUATE

4.1 Introduction 45

4.2 Implementation 45

4.2.1 Button in Application 46-48

4.2.2 Loading Page 49

4.2.3 Home Page 49

4.2.4 Info About Apps Page 50-51

4.2.5 How To Play Page 51

4.2.6 Scan Page 51-52

4.2.7 Home Page Quiz 52

4.2.8 Quiz 1 Page 53

4.2.9 Quiz 2 Page 53

4.2.10 Exit Page 54

Page 11: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

ix

4.2.11 AR Marker 54-55

4.2.12 3D Model (12 model) 56-60

4.2.13 Unity 3D Workspace 60

4.3 Testing and Result 61

4.4 Summary 62

CHAPTER 5 CONCLUSION

5.1 Introduction 63

5.2 Project Achievement and Contribution 63

5.3 Problem and Limitation 64

5.4 Future Work 64

5.5 Summary

65

REFERENCES 66-71

Page 12: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

x

LIST OF TABLES

2.1 Comparison table of existing product 16-18

2.2 Comparison table of the existing products with 5

element of multimedia

18-19

3.1 Existing Product 25-26

3.2 Hardware and Usage 41-42

3.3 Software and Usage 43

4.1 Button in Application 46-48

Page 13: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

xi

LIST OF FIGURES

2.1 Marker based AR 10

2.2 Marker less AR 10

2.3 The content in Application of Panduan Lengkap

Solat

14

2.4 The content in Application of Panduan Solat

Wanita

15

2.5 The content in Application of Ajar Saya Solat 16

3.1 Rapid Application Development 22

3.2 Analysis Phases 24

3.3 Flashcard 1 27

3.4 Flashcard 2 28

3.5 Loading Page 28

3.6 Main Menu 29

3.7 How to Play 30

3.8 About 31

3.9 Scanner (Before) 31

3.10 Scanner (After) 32

3.11 Home Page Quiz 33

Page 14: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

xii

3.12 Multiple Choice 34

3.13 True/False 34

3.14 Confirmation Exit Panel 35

3.15 Development Process 38

3.16 Framework Design 40

4.1 Loading Page 49

4.2 Home Page 49

4.3 Info Page 50

4.4 About Prayers in Salah 50

4.5 About Prayers in Salah 51

4.6 How to Play Page 51

4.7 Scan Page 52

4.8 Home Page Quiz 52

4.9 Quiz 1 Page 53

4.10 Quiz 2 Page 53

4.11 Confirmation Exit Panel 54

4.12 Example of markers 55

4.13 Example of features 55

4.14 3D Model ‘Bacaan Niat’ 56

4.15 3D Model ‘Bacaan Takbir’ 56

4.16 3D Model ‘Bacaan Al-Fatihah’ 57

4.17 3D Model ‘Bacaan Doa Iftitah’ 57

4.18 3D Model ‘Bacaan Rukuk’ 57

4.19 3D Model ‘Bacaan Iktidal’ 58

4.20 3D Model ‘Bacaan sujud’ 58

Page 15: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

xiii

4.21 3D Model ‘Bacaan duduk antara dua sujud’ 58

4.22 3D Model ‘Bacaan Tahiyat Awal’ 59

4.23 3D Model ‘Bacaan Tahiyat Akhir’ 59

4.24 3D Model ‘Bacaan Salam’ 59

4.25 3D Model ‘Bacaan Doa Qunut’ 60

4.26 Unity 3D Workspace 60

4.27 User Testing 61

4.28 User Testing 61

Page 16: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

xiv

LIST OF ABBREVIATIONS/TERMS/SYMBOLS

AR Augmented Reality

3D Three dimensional

FYP Final year project

KAFA Kelas Asas Fardhu Ain

Page 17: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

xv

LIST OF APPENDICES

APPENDIX TITTLE PAGE

A Gant Chart FYP I 68

B Gant Chart FYP II 69

C Project Poster 70

D Interview Questions 71

Page 18: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

1

CHAPTER 1

INTRODUCTION

1.1 Introduction

Augmented Reality (AR) has been an emerging technology in these recent years.

AR (Augmented Reality) defined as immersion of virtual environment to the real

environment which it enriches the vision, audition or even taste, touch and smell

(Boonbrahm et al., 2020). The significant timeline of AR technology begun from a

cinematographer, Morton Heiling which he thought cinema should enable interaction

between a human and the environment covering all the senses (Boonbrahm et al., 2020).

The first AR Head Mounted Display was developed by Sutherland (Sutherland, 1968)

while the ability to interact with virtual objects was first introduced by Myron Krueger

(Huttenlocher, 2004).

Nowadays, smartphones have the core features to develop an AR application

such as camera, touch screen, Inertia Measurement Unit (IMU), internet access and so

forth (Boonbrahm et al., 2020) The advancement of smartphone technologies which

enable real time image processing camera and powerful performance from built - in

Page 19: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

2

Central Processing Unit (CPU) and Graphics Processing Unit (GPU) made basic AR

application development easier without external supporting device.

This new technology, called augmented reality is a combination of what's real

and what's computer-generated by enhancing what we see, hear and feel. Its combines

real and virtual images both can be seen at the same time. When compared to other

reality technologies, augmented reality lies in the middle of the mixed reality spectrum

between the real world and the virtual world. Furthermore, augmented reality is

changing the way we view the world or at least the way its users see the world.

Additionally, augmented reality adds graphics, sounds and haptic feedback to the

natural world as it exists.

‘Belajar Bacaan Solat’ flashcard using AR Technology Enhanced using AR

technology is an interactive application that uses new era technology to help people.

This ‘Belajar Bacaan Solat’ flashcard using AR Technology is specially created for

students of Islamic class in primary school (KAFA). In addition, ‘Belajar Bacaan Solat’

flashcard using AR Technology is focused on prayers in Salah to improved prayers and

learned proses with interactive. Users need to scan the flashcard of the prayer in Salah

using their mobile phones. Then, the model and the prayers in Salah will appear on the

phone automatically with sound of prayers in Salah correctly.

Overall, it can be concluded that through AR technology, it enhances students

understanding and creates a more engaging and interactive learning environment and

sees virtual objects in the real world as well as various multimedia elements such as

animation, image, audio, text and video.

Page 20: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

3

1.2 Problem Statement

In my literature review about existing products, many mobile applications

developed is not focused on prayers in Salah. They only focus on the step in Salah.

Based on this limitation, I propose to developing applications that focus on Prayers in

Salah only. Besides, based on my interviews session that have been conducted with

Pn.Zuraidah binti Mansor, a KAFA teacher from SK Pusat Kuala Ibai, there are several

problem that have been identified. The first problem that can be stated is that KAFA

books mostly are in texts and 2D image. KAFA classes are often run in the evening so

it will cause the student to lose focus in the classroom. So, with this app, it can help

student to study with fun and more interesting because it has 3D animation elements,

sound and activities. Lastly, Studying through the book will quickly get bored and hard

to memories. Without the effective learning aid tool, the learning process become less

interesting and difficult of them to understand and memorize about prayer in Salah. As

we know an early exposure through the effective learning aid tool in studies is very

important to increase their interest in to memorize prayers in Salah. Concise

descriptions of the issues stated need to be addressed to deal with the problem.

Page 21: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

4

1.3 Objectives

There are the following objectives of AR P for student of Islamic class in

primary school (KAFA) are:

i. To identify requirement the augmented reality technology to create ‘Belajar

Bacaan Solat’ flashcard using AR Technology with interactive ways.

ii. To design and develop mobile apps for ‘Belajar Bacaan Solat’ flashcard

using AR Technology that allow users learning with augmented reality.

iii. To test the functionality of ‘Belajar Bacaan Solat’ flashcard using AR

Technology.

Page 22: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

5

1.4 Scope

The scope will be explained about the actor who will involve in this system and what

function involved in this system. The main scopes of the system:

I. Technology

This project applied Augmented Reality technology using flashcard.

The author develop 3D modelling of the character using Maya and unity 3D.

The illustration of the flashcard is use adobe Photoshop and adobe Illustrato r

software. For the AR features by using Vuforia Augmented Reality SDK to

detect and track the target, marker-based technique is used for this AR

application. C# language as the program language.

II. Module

The module in this application AR card include scanning image on the

flashcard, Display AR application with animations. Display 12 prayers in Salah

card, contain the prayers in Salah and contain 2 activities.

III. User

This project age scope is focused on student of Islamic class in primary

school (KAFA).

Page 23: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

6

1.5 Limitation of Work

A limitation is any aspect that hinders a study and its findings. (Moura, 2017).

This AR Prayers in Salah for student of Islamic class in primary school (KAFA) is

limited by four aspect:

i. Only prayers in Salah is recognized.

ii. This Application is applicable only for android user which is not

supported in websites and IOS operating system

iii. This Application implement physical button only for the interaction

between user and the application.

iv. This application need special marker to make it work.

1.6 Expected Result

At the end of the project, the expected outcome of the proposed project

development is as follows:

i. The user will be able to improve and gain their knowledge about

Augmented Reality Technology

ii. ‘Belajar Bacaan Solat’ flashcard using AR Technology will completely

develop.

iii. Only android user can access this application.

Page 24: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

7

1.7 Summary

In conclusion, this chapter discussed about the overview for the proposed project

include problem statement, objectives, scope, limitation of work and expected result.

Based on what has been described, it is necessary to improve the learning process so

that students are more active and motivate students during the learning process so as to

encourage students to more easily understand and learning the prayers in Salah through

AR technology. Hence, through a simulated, real-world AR technology simulated is

expected to produce a new approach to enhancing the quality of teaching and learnin g

activities carried out in conjunction with the integration of interactive multimed ia

elements.

Page 25: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

8

CHAPTER 2

LITERATURE REVIEW

2.1. Introduction

This chapter discusses about previous work or related work about ‘Belajar

Bacaan Solat’ flashcard using AR Technology. The literature review involving process

of read, evaluating and analysis the available literature related to the selected area of a

project to introduce a need for a new research. In this project literature review, a

research has been made to understand and get some overview about existing project and

related technology.

2.2. Augmented Reality

Augmented reality is a view of the real, physical world in which elements are

enhanced by computer-generated input. These inputs may range from sound to video,

to graphics to GPS overlays and more. The first conception of augmented reality

occurred in a novel by Frank L Baum written in 1901 in which a set of electronic glasses

mapped data onto people; it was called a “character marker”. Today, augmented reality

is a real thing and not a science-fiction concept. The first properly functioning AR

Page 26: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

9

system was probably the one developed at USAF Armstrong’s Research Lab by Louis

Rosenberg in 1992. This was called Virtual Fixtures and was an incredibly complex

robotic system which was designed to compensate for the lack of high-speed 3D

graphics processing power in the early 90s. It enabled the overlay of sensory

information on a workspace to improve human productivity.

2.2.1 Augmented Reality Techniques

Generally, there are two types techniques of AR applications that have

been reported in Pence (2011) study, AR based marker (marker based AR) and

AR without markerless (markerless AR). According to (Yuen et al., 2011), the

marker is an image of black and white in terms of rectangles and during the

detection process this marker will be used and the computer will detect the

position and oriented by the marker to create a virtual object in the form of an

object 3D at point (0, 0, 0) and three angles (X, Y, Z).

In addition, AR-based markers require a certain marker / label to

register a 3D virtual object position that will be displayed in a real-world

environment (Zainuddin et al., 2016). The always-used marker is a rectangular

card or paper which over the card has a certain pattern or line with different id

and code. Thus, a laptop camera or smartphone will detect the position of the

AR marker scan on the flash card and then the virtual element will be generated

by the AR software and will appear on the screen more interactive than the

scan card.

Page 27: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

10

On the other hand, in contrast to the AR markerless method, using

location or location data generated by mobile devices, global positioning

systems or any part of the real environment to determine location and targeting,

then generating and displaying information virtually (Yuen et al., 2011).

Additionally, AR without markers also has various techniques including face

detection, 3D object detection and motion detection.

Diagram 2. 1 Marker Based AR

Diagram 2. 2 Markeless AR

Page 28: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

11

Figure 2.1 Marker-based AR Figure 2.2 Marker less AR

2.3. Previous research on the application for Prayers in Salah:

Related products refer a system already existing and used until now. This is

example of system:

2.3.1. Flashcard: Bacaan Rukun Qauli Dalam Solat.

According to (Raziah Md Nasib, 2016). The purpose of this study was

test the effectiveness of primary student mastery level of “Rukun Qauli” during

their “solat”. The respondents selected for this particular study were ten female

students from the same primary school. This study is to identify how effective

the learning technique by using colored card in mastering the reading of “rukun

qauli” in prayers, also to identify how far the acceptance and comprehens ion

towards the reading of “rukun qauli” in prayers, furthermore the research also

aims to gauge pupils understanding of the importance “rukun qauli” during their

“solat”. Based on the findings, we can deduce that 90% of the students have

attained at least mastery level of understanding the importance of “rukun qauli”

during their prayers. The findings further attribute to the importance of

employing multiple teaching techniques to enhance the student interest in

Page 29: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

12

learning and mastering “rukun qauli”, for example the use of colored card was

effective because it managed to attract the student attention. The study also

highlights the importance of reinforcement and remedial to ensure there is

continuity in learning.

2.3.2. Mobile Application: E-Solat.

Courseware on E-Solat is developing by Syaifudin Bin Ramzan that

can guide user especially kids around six to twelve years old on how doing

Salah. This courseware divides into two main courses which is learning Salah

and remembering short surah. Under Salah, there are five options and kids can

choose which Salah he or she wants to learn. The options are ‘Solat Subuh, Solat

Zohor, Solat Asar, Solat Magrib and Solat Isya'. The animation will teach kids

how to Salah.

2.3.3. Mobile Application: The User Guide Muslim Prayer.

According to (Abdul Manaf et al., 2015) is provided that one of the

programs available is Muslim Prayer Guide applications that can be downloaded

for free via mobile devices such as smartphones and tablets. Affective factors,

such as embarrassment towards instructors and peers can disrupt learning. One

of the technologies that have the potential to address this issue is mobile

learning. As such, we develop a mobile application in attempting to solve the

issue of learner embarrassment in learning about praying.

Page 30: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

13

Muslim Prayer Guide application is built is intended as a guide to the

Muslim citizens of all ages to perform prayers in the prayer in Islam. The content

of this application is the rule of prayer, how to perform ablution, the things that

invalidate the prayer, the reading of the five daily prayers. This study was

conducted to identify the factors that contributed to the Android Muslim Prayer

Guide. The study was carried out quantitatively by submitting a questionna ire

to the 62 respondents who use this application.

The analysis was done by using the Rasch measurement model and to

measure the effectiveness factors of these applications. The results showed that

the use of this application Muslim prayers assist learners in terms of the level of

knowledge and methods of teaching and learning guides prayers. This

application also helps adult learners who want to learn prayers. The Muslim

Prayer Guide also assist them in prepare before meeting with a teacher to learn

the prayers and to equip themselves as a Muslim to perform the second pillar of

Islam.

Page 31: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

14

2.3.4. Mobile Application: Panduan Lengkap Solat.

This application provides a complete guide on how to do a daily and

sunat prayer. Based on figure 2.3 below, this application let you learn prayer a

sunat and a daily prayer through interactive content. It is accessible and easy to

use. Furthermore, the screen display in HD quality that can zoom in and zoom

out without affecting the display quality (blur). This application was released on

April 2, 2018 and user can get the application on play store for free.

Figure 2.3: The content in Application of Panduan Lengkap Solat.

Page 32: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

15

2.3.5. Mobile Application: Panduan Solat Sempurna Wanita.

A proper prayer is important to ensure that our prayers are accepted by

Allah Almighty. Therefore, this app is developed as a reference to all women in

performing prayers. This application provides proper procedure and prayers in

the correct manner. The content is detailed like book. This application was

released on October 2, 2018 and user can get on play store for free.

Figure 2.4: the content in Application of Panduan Solat Sempurna Wanita.

Page 33: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

16

2.3.6. Mobile Application (AR): ‘Ajar Saya Solat’.

According to (Hexa Setia, 2018) is provided how to perform prayers

easily. This application is easy to be use by only pointing the camera gadget

towards the flashcards, by then a 3D animation will appear. This application

helps to memorize the recitation in prayers. This application also can forming

the children by using the gadget with beneficial content and it is interactive and

interesting for kids to use. 3D Animation will appear along with the prayer

guidance.

Figure 2.4: the content in Application of Ajar Saya Solat.

Page 34: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

17

2.4. Comparison Existing Products

This table about comparison existing product. The comparison with year

publisher, platform, advantage, and disadvantage. So, the weakness of the existing

product can be identified went make the comparison. The comparison shown Table 2.1.

Table 2.1: Comparison table of existing product.

NO. TITLE AUTHOR

/ YEAR

TECHNIQUES ADVANTAGE DISADVANTAGE

1. Bacaan

Rukun

Qauli

Dalam

Solat

Raziah Md

Nasib,

2016

Article

(flashcard)

• Using the

interesting

coloured

card.

• Has no animation

element and only

appear in 2D

model.

2. E-Solat Syaifudin

Bin

Ramzan

(2016)

Article

(Mobile Apps)

• Provides

learning

Salah and

remembering

short surah.

• Less attractive

• Images only

appear in 2D.

• A bit complicated

for kids

3. The

User

Guide

Muslim

Prayer

Abdul

Manaf et

al., 2015

Article

(Mobile Apps)

• Provides a

complete

guide of

Salah.

• No animation

element

• Less attractive

layout.

• A bit complicated

for kids.

Page 35: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

18

4. Pandua

n

Lengka

p Solat

Gerbang

Pustaka

ILMU

(2018)

Mobile apps

• Complete

prayer in

Salah and a

“sunat”

prayer.

• No text and only

sound of prayers

is provided.

• Less interact ive

layout.

5. Pandua

n Solat

Sempur

na

Wanita

laila

majnun

(2018)

Mobile Apps

• The content

is detailed

like book.

• Less interact ive

environment

design.

• Only for woman.

• Too much text in

one page.

6. ‘Ajar

Saya

Solat’

Hexa Setia

(2018)

Mobile Apps

(AR)

Marker based

• Provides step

in Salah.

• Interactive

and suitable

for kids.

• Only focus on

step in Salah.

• Without

recitation of

surah.

• The book is

limited to get

since it’s from

oversea.

Page 36: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

19

Table 2.2 Comparison Table of the Existing Products with 5 Element of Multimedia.

NO. TITTLE Text Image Video Audio Animation

1. Flashcard: Bacaan Rukun

Qauli Dalam Solat

✓ ✓ - - -

2. Mobile Apps: E-Solat ✓ ✓ - - -

3. Mobile Apps: The User

Guide Muslim Prayer

✓ ✓ - - -

4. Mobile Apps: Panduan

Lengkap Solat

✓ - - ✓ -

5. Mobile Apps: Panduan

Solat Sempurna Wanita

✓ ✓ - - -

6. Mobile Apps (AR): ‘Ajar

Saya Solat’

- ✓ - ✓ ✓

Based on the table 2.2, the conclusion that can be concluded from the hand-on

product is all of it using text and image, but it is too much text in one page and less

attractive. The images only appear in 2D and no animation element. In terms of audio

usage, only one product used audio and it only focused on audio no text and image.

Lastly, the product to be built is based on AR technology that have image in 3D

animation and text with sound and have two activities for student to improve after

learning process. The learning process will be more fun and can give a new experience

to the student.

Page 37: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

20

2.5. Summary

This chapter discuss about an overview about the concept of the system.

Literature Review is important to help the developer to know the problem from the

previous system that can be improves or as a guidance of the flow of new system. In

this chapter also is need to compare some of a similar project or application that have

develop by other. Besides, it helps the developer in understanding the system and the

chosen techniques more.

Page 38: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

21

CHAPTER III

METHODOLOGY

3.1. Introduction

In this chapter is about process of developing project from the beginning until

the end of this project. The flow of the project will discuss briefly to give more

understanding of design and develop of this application. There are many methods that

can be used for developing this project. The methodology that can be decide in this

project is Rapid Application Development (RAD). In this methodology is based on

phases for each development process. Every phase of this methodology will be

explained.

3.2. Rapid Application Development (RAD) Methodology

In this project, I have chosen Rapid Application Development (RAD) as the

research methodology. James Martin, in his book first coining the term, wrote, “Rapid

Application Development (RAD) is a development lifecycle designed to give much

faster development and higher-quality results than those achieved with the traditiona l

lifecycle (Beynon-Davies et al., 1999). It is designed to take the maximum advantage

of powerful development software that has evolved recently”. The reason why this

Page 39: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

22

methodology is selected is due to the rapid prototyping nature where development of

the application could be done in the early stage and user’s requirement and expectation

could be address fully at the development phase. Products development is faster and the

quality of the product is higher is the main advantage when utilize RAD concept.

The other reason why Rapid Application Development (RAD) approach. It was

decided once a lot of consideration made in terms of gathering the requirements and the

nature of application development. RAD consists of four main phases which are

Requirement Planning, User Design, Construction and Cutover as illustrated in the

Figure 3.1. Generally, RAD approaches are more emphasizing on the development

phases rather than planning tasks. It has a better quality of having users interact with

developing prototypes of project functionality. Besides that, more activities can be done

and completed on time of the expected budget. It can reduce the catastrophic failures of

focusing on the development of incremental besides more analysis can be discovered

and acted upon earlier in the process.

Figure 3.1 Rapid Application Development

(RAD)

Page 40: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

23

3.2.1. Requirements Planning Phases

During the requirement planning phase, all the important information

and theory about Augmented Reality was gathered. The theory is containing

about the concept, hardware and software and the types of AR with the

applications that been applied in the many field areas. These parts are defined

as Chapter 2 which is Literature Review. Moreover, the problem statement of

the project, the objectives and the scope for the project also clearly stated on

Chapter 1. This is very important to ensure that the project will be achieved the

objectives as planned.

Since the project is developed and targeted for student of Islamic class

in primary school (KAFA), the planning is required to gather information on

understanding the syllabus of learning books for student’s learning process of

prayers in Salah, the current problems and the enhancement of implementing

augmented reality of prayer in Salah with mobile application. The information

was collected from the distributive interviews. It was used to get the teachers

point of view on the students learning about Prayers in Salah. Besides that, the

researches on journals, articles and other research papers also been studied to

collect the correlated information to the project development as the supportive

materials. The existing products of the market also are viewed as the reference

to start the project and the future improvement.

Page 41: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

24

Figure 3.2 Analysis Phase.

Requirement

s

Problem

Statement

1. Learn using book is less

interactive.

2. Not have 3D animation.

Objectives

1. To identify requirement the

augmented reality technology to

create ‘Belajar Bacaan Solat’

flashcard using AR Technology.

2. To design and develop ‘Belajar

Bacaan Solat’ flashcard using

AR Technology that allow users

learning with augmented reality.

3. To test the functionality of

Prayers in Salah Flashcard using

augmented reality.

Target Audience

1. Student of Islamic class in

primary school (KAFA).

Content

This project included:

Display Augmented Reality

(AR) application with

animations.

Display 12 prayers in Salah

Flashcard.

Contain 2 Activities.

Strategy

Requirement

1. Use 3D model

2. Augmented reality technology

1. Software

-Unity3D

-Vuforia

-Maya3D

2. Hardware

-Laptop

-Mobile phone (Android)

Page 42: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

25

Table 3.1 Existing Product.

NO. TITLE TECHNIQUES ADVANTAGE DISADVANTAGE

1. Penguasaan

Bacaan Rukun

Qauli Dalam

Solat

Article

(flashcard)

• Using the

interesting

coloured card.

• Has no animation

element and only

appear in 2D

model.

2. E-Solat in Mobile Article

(Mobile Apps)

• Provides

learning Salah

and

remembering

short surah.

• Less attractive

• Images only

appear in 2D.

• A bit complicated

for kids

3. The User Guide

Muslim Prayer

Application

Article

(Mobile Apps)

• Provides a

complete

guide of

Salah.

• No animation

element

• Less attractive

layout.

• A bit complicated

for kids.

4. Panduan Lengkap

Solat Fardhu &

Sunat

Mobile apps

• Complete

prayer in

Salah and a

“sunat”

prayer.

• No text and only

sound of prayers

is provided.

• Less interact ive

layout.

Page 43: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

26

5. Panduan Solat

Sempurna Wanita

Mobile Apps

• The content is

detailed like

book.

• Less interact ive

environment

design.

• Only for woman.

• Too much text in

one page.

6. Ajar Saya Solat

Mobile Apps

(AR)

Marker based

• Provides step

in Salah.

• Interactive

and suitable

for kids.

• Only focus on

step in Salah.

• Without

recitation of

surah.

• The book is

limited to get

since it’s from

oversea.

Page 44: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

27

3.2.2. User Design Phases

Designing phase is the longest period throughout the prototype

development cycle, where by the designing stages, build the design functions

and operations were described in details. It is including the designing the

storyboard, outline, diagrams and also the interfaces. Regarding the user needs,

the early design was based on the specifically designed storyboard as in figure

3.3 until figure 3.12 below.

The flashcard and the interface of application prototype were

designed by using abode Photoshop and adobe illustrator, the adobe that

provide the templates and tools to design storybooks. Therefore, the user

designs phase activity become easier and save time. A prototype is draft

representation built to test ideas for layout.

i. Storyboard Flashcard

Based on the figure 3.3 below, show the flashcard for Bacaan 1 in Prayers.

Figure 3.3 Flashcard 1

Page 45: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

28

Based on the figure 3.4 below, show the flashcard for Bacaan 2 in Prayers.

Figure 3.4 Flashcard 2

ii. Storyboard Application

Based on the figure 3.5 below is the loading page before enter the application.

Figure 3.5 loading page

Page 46: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

29

Based on the figure 3.6 below is the main menu for the application.

Figure 3.6 Main Menu

BUTTON FUNCTION

Hamburger Button

This is the hamburger button that have all button when

user click

Exit Button

After user click this button, user will exit from this

this application.

How to play Button

After user click this button, user will go to the page

how to play.

Info Button

After user click this button, user will go to the page

info of this application.

Button ‘KIUZ’ After click this button, user will go to the page ‘KUIZ’

that have 2 quiz to play.

Button ‘IMBAS’ After click this button, user will go to the page

‘IMBAS’, user can scan the flashcard at that page.

Page 47: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

30

Based on the figure 3.7 How to play below show the page for How to Play. It

show the explanation how to use this application.

Figure 3.7 How to Play

BUTTON FUNCTION

Hamburger Button

This is the hamburger button that have all button when

user click

Exit Button

After user click this button, user will exit from this

this application.

Home Button

After user click this button, user will go to the page

home again.

Scan Button

After user click this button, user will go to the scan

AR page.

Page 48: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

31

Based on figure 3.8 about, this page is about the application for student and

based on KAFA Class syllabus and 12 prayers in Salah.

Figure 3.8 About

BUTTON FUNCTION

Exit Button

After user click this button, user will exit from this

this application.

Home Button

After user click this button, user will go to the page

home again.

Previous Button

This button goes to the previous info of Prayer in

Salah.

Next Button

This button goes to the next info of Prayer in Salah.

Based on the figure 3.9 below, the user need to scan a flashcard using a camera.

Figure 3.9 Scanner (Before)

Page 49: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

32

BUTTON FUNCTION

Home Button

After user click this button, user will go to the page

home again.

Sound Button

After user click this button, user will hear the prayer in

Salah based on flashcard that scan.

Green scroll box This green scroll box is for user to see the prayers in

Salah.

Based on the figure 3.10, the object will appear in 3D.

Figure 3.10 Scanner (After)

BUTTON FUNCTION

Home Button

After user click this button, user will go to the page

home again.

Sound Button

After user click this button, user will hear the prayer in

Salah based on flashcard that scan.

Green scroll box This green scroll box at this page is for user to see the

prayers in Salah.

Page 50: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

33

Based on the figure 3.11 below is the main menu for the quiz.

Figure 3.11 Home Page Quiz

BUTTON FUNCTION

Hamburger Button

This is the hamburger button that have all button when

user click

Button Exit

After user click this button, user will exit from this

this application.

Home Button

After user click this button, user will go to the page

home again.

Scan Button

After user click this button, user will go to the scan

AR page.

Button ‘BETUL atau

SALAH’

After user click this button, user will go to page quiz

‘BETUL atau SALAH’, that have 6 questions.

Button ‘PILIHAN

JAWAPAN’

After user click this button, user will go to page quiz

‘PILIHAN JAWAPAN’ that have 6 questions.

Page 51: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

34

In the figure 3.12 below, Quiz 1 in 6 question with multiple choice.

Figure 3.12 Multiple Choice

BUTTON FUNCTION

Exit Button

After user click this button, user will exit from this

this application.

Home Button

After user click this button, user will go to the page

home again.

Button ‘BETUL’ or

‘SALAH’

This button answer for true or false quiz.

In the figure 3.13 below, Quiz 2 in 6 question with true or false.

Figure 3.13 True/False

BUTTON FUNCTION

Exit Button

After user click this button, user will exit from this this

application.

Page 52: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

35

Home Button

After user click this button, user will go to the page

home again.

Based on the figure 3.14 are specified interface for those who want to exit from

the applications. There will have yes or no button to confirm exit.

Figure 3.14: Confirmation Exit Panel

BUTTON FUNCTION

This button is cancel button. After user tap the

cancel button then the interface will back into

homepage.

This button is confirm button. User need to

tap this button if confirm to exit.

Page 53: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

36

3.2.3. Construction Phases

During the construction phase, each prototype iteration was built, was

based on the system analysis and design set earlier. This is included the

interfaces of the mobile app, the flashcard and development of augmented

reality such as the 3D modelling part and code the programming. The

modelling part is using the Maya software and it took about three to four weeks

to finish the characters models. The creation of the characters is included of

modelling, texturing, rigging and animating the models that were very

challenging and taught activity. Then, the integration and compilation was

done by using Unity 3D which is the cross platform game engine with a built -

in integrated development environment (IDE). It is used to compile the

characters models with animation, programs and SDKs to design the

application. It is then checked to guarantee and ensure the functiona lity

developed is achieved the user requirements. Some changes and modifica t ion

are done in order to make sure the users are completely satisfied with the

product. The phase involves developing the AR application using the Vuforia

SDK and Unity 3D.

3.2.3.1. Development

a) Create Marker

Before starting develop the 3D models, the Salah flashcard must be

created earlier using Adobe Illustrator. This car book used as for

markers which is when we scan the image that created on the flashcard

its will pop out the 3D models at the mobile phone screen.

Page 54: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

37

b) Animating 3D characters

Next process in production is animating 3D models using Autodesk

Maya. There are 5 steps that included during the process:

Modelling

In this process, the 3D models is created. Reference images are

required throughout this process.

Texturing

In this process, the 3D models is applying with color &surface

properties. The surface of model must look like it does match real-

world and concept art.

Rigging

In this process, rig the 3D models to make the movement in the

next process which is in animation process. Furthermore, joint

controller, skinning, enveloping, muscle system and floating GUI

is involved.

Animation

In this process, the 3D models movement is created. This process

was the hardest part in animating 3D models. Then, it will make

the 3D models animation more interesting and realistic.

Page 55: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

38

Rendering

This process is the last process in animating 3D models.

Rendering is a process which is painting all component in the

production stage to make final output.

c) Building AR

In this process, the 3D models of the kid will be imported into Unity

3D software. Then, the developer can started building AR

experiences using Unity 3D and Vuforia Platform.

d) Building mobile interfaces and features

In this process, the mobile interfaces and features are created using

Photoshop and Adobe Illustrator. The objective is to make the

mobile application more attractive and users understand the

functionality.

e) Coding

During this process, the developer must implement language c# to

the desired outcome of the project based on the findings during the

research phase.

Page 56: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

39

Diagram 3.15 Development Process.

Page 57: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

40

3.2.4. Cutover Phases

The final phase in RAD approach is cutover phases or known as

implementation stages. This phase only can be done after the testing has been

completed therefore the software can be installed in a “live” environment and

launched. The complete integration is including the implementation of

application ‘Belajar Bacaan Solat’ flashcard using AR Technology. Other than

that, the usability tests were carried out to ensure, whether the system meets

the requirements established earlier or not. The frequent testing and iterating

of the process, until reaching a satisfactory outcome, ensured that final users

can use the product easily with no faults or errors.

3.2.4.1. Final Testing

After all of steps in construction phase are completed,

final output have been done and ready to perform.

a) Test Run Project

This is when the developer test runs the project by

herself. This is to ensure that the project can be used and

is running accordingly.

b) User Test Run

Before presenting the final product, developer give to the

user test the project and give the feedback. Criticisms

and constructive feedback is taken to be implemented

later on.

Page 58: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

41

3.3. Framework Design

Figure 3.16 below shows the framework design of Prayer in Salah Applicat ion.

User able to choose any button in this application.

Figure 3.16: Framework Design

The users needed to used device to search the marker in flashcard, for the best results,

you should aim for targets with 4 or 5 starts. The adobe illustrator used to create

flashcard prayer in Salah and to create interface of the application ‘Belajar Bacaan

Solat’ flashcard using AR Technology. The adobe Maya used to model the character in

3D and make the 3D model movement and look realistic. The 3D Unity used to create

the Virtual Reality application and overall project and modelling 3D objects. The

Vuforia use to create augmented reality. The Vuforia detects and tracks the features that

are naturally found in the image itself by comparing these natural features against a

known target resource database. Once the Image Target is detected, Vuforia Engine will

track the image as long as it is at least partially in the camera’s field of view. Lastly,

after scanning the marker, 3D image will display to user. From this, the user will learn

a new experience in learning process.

Page 59: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

42

3.4. Hardware and Software Requirement

Developers have identified the requirements needed to develop AR Prayers in

Salah. The requirements in AR development are divided into two main parts, hardware

and software requirements. Hardware and software are a key requirement in developing

a multimedia development as a control, managing, supporting computer systems and

activities. The selection of hardware and software should consider minimum or

equivalent specifications in the AR development process allowing software to function

properly to launch AR Prayers in Salah. Here is a list of required hardware and software.

3.4.1. Hardware Requirement

Hardware consists of components that can be physically controlled.

Hardware selection should be done to avoid any technical problems occurring

during the software development process. The following is a minimum hardware

specification for the hardware required by the developer to produce AR Prayers

in Salah. Based on the Table 3.1 below, describes about hardware and usage.

Table 3.1: Hardware and Usage.

NO. HARDWARE USAGE

1. Laptop DELL Inspiron 15 (3000

series)

(Operating system : Windows 10)

(Processor : Intel Core i3)

( Memory : 4GB RAM)

To create the sketches for the model,

background and create scripts or

documents related to application. Also

used for on the go coding and 3D

modelling.

Page 60: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

43

2. Mobile Phone OPPO A7

(Android Version 8.1.0 CPH1901EX)

(64GB Memory)

Used to run and testing the application

3. External Hard Disk

To backup all project data

4. Printer

To print out the documentation.

3.4.2. Software Requirement

As a result of the analysis, it was found that the software needed to

develop AR Prayers in Salah are Autodesk Maya, Vuforia, Unity 3D, Adobe

Photoshop and Adobe Illustrator. The builder uses this software as a support

throughout the process of development of AR Prayers in Salah to produce more

Page 61: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

44

attractive, high quality and functional software. Software suitable for software

development is very important because the software is a detailed instruction that

controls the functionality of the hardware device and every software applied has

different uses of its functionality. Based on the Table 3.2 below, describes about

software and usage.

Table 3.2: Software and Usage.

NO. SOFTWARE USAGE

1. Autodesk Maya 2018

Used to create 3D character

models.

2. Vuforia

To create Augmented Reality

3. Unity 3D

Used to create the Virtual Reality

app and

Overall project and animate 3D

characters.

4. Adobe Photoshop

Used to create sketches of

background, characters and

posters.

5. Adobe Illustrator

To design interface, posters and

logo application.

Page 62: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

45

3.5. Summary

This chapter discussed the methodology used is to complete this project. The

Rapid Application Development (RAD) methodology is used because every phase

during the application development follows the project methodology that is mentioned

in this chapter. The hardware and software requirement also had been discussed.

Page 63: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

46

CHAPTER 4

IMPLEMENTATION AND TESTING

4.1 Introduction

This chapter will be discussing the implementation of the methodology that have

been discussed in the previous chapter and testing to obtain the result of each

implementation. Implementation is executed to ensure the application is developed

according to the main objectives of the project and fulfil the user requirement. Testing

will be executed so that the developer will recognize the defects as soon as possible and

repair it immediately.

4.2 Implementation

The implementation phase refers to the actual activity of the instruction. The

purpose of this phase is the effective and effective delivery of instruction. This project

is implemented as an android application by using 3D Unity which is integrated with

Vuforia developer. Furthermore, this will help developer to design, code, test, debug

and execute the main process of the project. This project also used C# language for

writing a script.

Page 64: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

47

4.2.1 Button in Application

Based on the Table 4.1 below, shows the buttons displayed on each

interface. This can make easier for users to navigate to the desired part. Among

the buttons used are:

Table 4.1: Button in Application

Button Description

This button goes to the AR camera are functioned to

go to the next scene which is user able to scan the

flashcard provided to show the 3D object and prayers

in Salah.

This button is the quiz button of the application

which is quiz 1 and quiz 2.

This is the hamburger button that have all button

when user click.

This back button goes to close the hamburger button.

Page 65: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

48

This button goes to the home page.

This button goes to page that shown explanation

about ‘Belajar Bacaan Solat’ using AR Technology.

This button goes to page that shown the info of the

application and 12 prayers in Salah with sound.

This button goes to the AR camera are functioned to

go to the next scene which is user able to scan the

flashcard provided to show the 3D object and prayers

in Salah.

This button is sound button. For user tap the button to

listen prayers in Salah.

This button goes to page that shown the practice for

quiz 1.

This button goes to page that shown the practice for

quiz 2.

Page 66: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

49

This button is to exit of this application.

This button is cancel button. After user tap the cancel

button then the interface will back into home page.

This button is confirm button. User need to tap this

button if confirm to exit.

This button goes to the previous step how to play page.

This button goes to the next step how to play page.

Page 67: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

50

4.2.1 Loading Page

Figure 4.1 Show the loading page. It takes a few second to go home

page when the loading bar already full.

Figure 4.1: Loading Page

4.2.2 Home Page

Based on the figure 4.2 below, show the whole interface for home page.

At there is navigation and it consists of 2 main button such as Scan Button and

Quiz Button, one hamburger button that consists of other button such as back

button, Exit Button, How to Play Button and Info Button.

Figure 4.2: Home Page

Page 68: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

51

4.2.3 Info About Apps Page

Based on the figure 4.3 below, it shows about explanation about the

application of ‘Belajar Bacaan Solat’ using AR Technology and 12 prayers

in Salah with sound. User can back to home page when press button home.

Figure 4.3: Info Page

Based on the figure 4.4 and figure 4.5 below, it content 12 prayers

in Salah with sound. User can see the prayers with a sound based on flashcard

and user can go to the next page when click the next button and can go back

to home page when press button home.

Figure 4.4: About Prayers in Salah

Page 69: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

52

Figure 4.5: About Prayers in Salah

4.2.4 How To Play Page

Based on the figure 4.6 below, the page that shown how the user need

to do when they using the AR techniques in this application.

Figure 4.6: How to Play Page

Page 70: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

53

4.2.5 Scan Page

Based on the figure 4.7 below, the scan page for user to play and learn

the AR used. User need to get the flashcard of Prayers in Salah that have image

which are called as marker. Next, user can scan the image on the flashcard using

scan button and the 3D model will pop up and show the animation. It also the

prayers in Salah will automatically pop up and user can scroll down the details of

Prayers in Salah based on the flashcard that have being scan. In addition, the

user can learn from sound of prayers in Salah.

Figure 4.7: Scan Page

Page 71: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

54

4.2.6 Home Page Quiz

Based on the figure 4.8 below, it is about the quiz of the application

which is quiz 1 and quiz 2.

Figure 4.8: Home Page Quiz

4.2.7 Quiz 1 Page

Based on the figure 4.9 below, user must choose true or false based

on the questions given and it has 6 question with the score.

Figure 4.9: Quiz 1 Page

Page 72: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

55

4.2.8 Quiz 2 Page

Based on the figure 4.10 below, user must choose the answer based

on the questions given and it has 6 question with the score.

Figure 4.10: Quiz 2 Page

4.2.9 Exit Page

Based on the figure 4.11 are specified interface for those who

want to exit from the applications. There will have ‘ya’ or ‘tidak’ button to

confirm exit.

Figure 4.11: Confirmation Exit Panel.

Page 73: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

56

4.2.10 AR Marker

Image recognition is an imperative component of augmented reality

systems. By use of identifying visual markers already embedded within the

system, physical world objects are detected for superimposition of virtual

elements. In order for an AR application to estimate the orientation and position

of a camera with respect to the real world frame, most applications employ a

tracking technique known as marker based augmented reality.

Once you begin using the marker-based augmented reality system with

a digital device, the image of the physical world captured by your camera is

converted into a grayscale image to expedite the image processing algorithm.

The algorithm then uses the image of the camera as well as the decoded marker

ID to augment the virtual object onto the physical world model. By focusing the

camera of whichever digital device you are using to deploy the augmented reality

app on the specified markers, the app is able to retrieve the information stored to

display the three-dimensional virtual object accurately. Besides that, Vuforia

developer is a website that let developer check if the image is a suitable marker

and every marker feature. There are 12 markers based. Based on figure 4.12

below, show the example of marker and based on figure 4.13 below, show the

marker features.

Page 74: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

57

Figure 4.12: Example of markers

Figure 4.13: Example of features

Page 75: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

58

4.2.11 3D Model (12 model)

Augmented Reality or AR is a combination of 2D objects in real

3D environment and present them into virtual objects in a real time. 3D

modelling is the process of developing a mathematical representation of any

surface of an object (either inanimate or living) in three dimension via

specialized software. The product is called as a 3D model. The model can

also be physically created using 3D printing devices. Furthermore, this

project created 3D model using Maya 3D included with the animation and

texture. Based on figure 4.14 until figure 4.25 below, show all the 3D model

in this project.

Figure 4.14: 3D Model ‘Bacaan Niat’

Figure 4.15: 3D Model ‘Bacaan Takbir’

Page 76: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

59

Figure 4.16: 3D Model ‘Bacaan Al-Fatihah’

Figure 4.17: 3D Model ‘Bacaan Doa Iftitah’

Figure 4.18: 3D Model ‘Bacaan Rukuk’

Page 77: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

60

Figure 4.19: 3D Model ‘Bacaan Iktidal’

Figure 4.20: 3D Model ‘Bacaan sujud’

Figure 4.21: 3D Model ‘Bacaan duduk antara dua sujud’

Page 78: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

61

Figure 4.22: 3D Model ‘Bacaan Tahiyat Awal’

Figure 4.23: 3D Model ‘Bacaan Tahiyat Akhir’

Figure 4.24: 3D Model ‘Bacaan Salam’

Page 79: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

62

Figure 4.25: 3D Model ‘Bacaan Doa Qunut’

4.2.12 Unity 3D Workspace

Unity 3D Workspace is a platform to create this application

especially the AR contents. Based on figure 4.26 there is Unity 3D

Workspace that content all the interfaces of this application is created here

and then the 3D animation contents then imported from Maya into Unity 3D.

Figure 4.26: Unity 3D Workspace

Page 80: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

63

4.3 Testing and Result

System testing also knows as final testing is a technique to evaluate the

performance measures of this application whether it satisfies the requirements or not. The

system testing is to investigate the testing phase where the test of the design and set

requirement. Testing is needed to test system full function and free error. There are two

type testing for this project. Those are test run project and user test run project. Test run

project is when developer test runs the project by herself. This is to ensure that the project

can be used and is running accordingly. Lastly, based on figure 4.27 user testing and

figure 4.28 user testing there is user test run before presenting the final product, developer

give to the user test the project and give the feedback with the interview question about

the application. Criticisms and constructive feedback is taken to be implemented later on.

Figure 4.27 User Testing Figure 4.28 User Testing

Page 81: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

64

4.4 Summary

In this chapter, it shows how this application process is done. Part implementa t ion

in this chapter that have been describe and show all the set interface in the application. It

can act as guide for new user to use this application. Testing also have been done to ensure

that all the function run smoothly. Furthermore, it also describes the test case that has

been done during the development processes.

Page 82: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

65

CHAPTER 5

CONCLUSION

5.1 Introduction

In this chapter, the result of the project is discussed and concluded. The content of this

chapter will summarize the overall contribution.

5.2 Project Achievement and Contribution

‘Belajar Bacaan Solat’ using AR Technology enhances students understanding and

creates a more engaging and interactive learning that uses new era technology to help

people, especially students and teachers as learning interesting. It has achieved the

objectives and scope of this project. Below is the list of the achievement on this project:

i. Successfully created an AR Marker-based mobile application of prayers

in Salah via flashcard.

ii. Design and develop prayers in Salah flashcard that allow students learning

with augmented reality.

iii. Test prayers in Salah flashcard using augmented reality.

Page 83: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

66

5.3 Problem and Limitation

There are a few problems and limitations that occur throughout the development of this project.

This problems and limitation during project development are scanning one image only. It cannot

make two or more scanning and it will not be working. This application must need light when

scanning an image. It cannot work in dark scene. Furthermore, the user needs a latest smartphone

to play this application.

5.4 Future Work

‘Belajar Bacaan Solat’ using AR Technology still has a lot of to be improved. There is

some suggestion that can be made in order to upgrade the application to be more efficient in the

future. The suggestion is adding more learning practices with interactive way. I hope this

application might be a sell in the market so that teacher and students can uses and learn about

Prayers in Salah with technology augmented reality with interactive way.

Page 84: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

65

5.5 Summary

In conclusion for this chapter, implementation part in this chapter has been describe

and show all the user interfaces in the android application. It can act as a guide for new user

to use this application. Testing also have been done to ensure that all the functionality achieved

and run smoothly. Maintenance should be carried out if there is any bugs detected. The system

will repeatedly be tested to minimize the error.

Page 85: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

66

REFERENCES:

Abdul Manaf, S. Z., Mohamad Zaid, A. S., Din, R., Hamdan, A., Mat Salleh, N. S.,

Kamsin, I. F., Abdul Karim, A., & Lubis, M. A. (2015). Aplikasi Mudah Alih

Panduan Solat dan Pengunaannya. Ulum Islamiyyah Journal, 16, 43–61.

Beynon-Davies, P., Came, C., Mackay, H., & Tudhope, D. (1999). Rapid application

development (Rad): An empirical review. European Journal of Information

Systems, 8(3), 211–232. https://doi.org/10.1057/palgrave.ejis.3000325

Boonbrahm, S., Boonbrahm, P., & Kaewrat, C. (2020). The use of marker-based

augmented reality in space measurement. Procedia Manufacturing, 42(2019),

337–343. https://doi.org/10.1016/j.promfg.2020.02.081

Huttenlocher, D. (2004). Computer vision. Computer Science Handbook, Second

Edition, 43-1-43–23. https://doi.org/10.4324/9780429042522-10

laila majnun (2018). Reuters (1.0)[ Mobile application software]. Retrieved from

https://play.google.com/store/apps/details?id=com.andromo.dev715390.app8640

85&hl=en

Muhamad Naim. (2019, April 4). Panduan Bacaan Dalam Solat (Ejaan Rumi) [Blog

post]. Retrieved from https://akuislam.com/blog/ibadah/bacaan-dalam-solat/

Ramzan, S. (2010). Courseware on E-solat in Mobile (Doctoral dissertation, UMP). 67

Randuic, D. I. (2011). Basic Concepts of Information and Communicat ion

Page 86: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

67

Technology Notes. Open Society for Idea Exchange (ODRAZI), Zagreb, 7, 5–15.

Raziah Md Nasib. (2016). Penguasaan Bacaan Rukun Qauli Dalam Solat Dalam

Kalangan Murid Tahun 4 Sekolah Rendah.

http://ddms.usim.edu.my/bitstream/123456789/12602/1/Penguasaan Bacaan

Rukun Qauli Dalam Solat Dalam Kalangan Murid Tahun 4 Sekolah Rendah 25.pdf

Yuen, S. C.-Y., Yaoyuneyong, G., & Johnson, E. (2011). Augmented Reality: An

Overview and Five Directions for AR in Education. Journal of Educational

Technology Development and Exchange, 4(1).

https://doi.org/10.18785/jetde.0401.10

Zainuddin, Z., Areni, I. S., & Wirawan, R. (2016). Aplikasi Augmented Reality pada

Sistem Informasi Smart Building. Jurnal Nasional Teknik Elektro Dan Teknologi

Informasi (JNTETI), 5(3). https://doi.org/10.22146/jnteti.v5i3.258

Page 87: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

68

APPENDIX

APPENDIX A (GANTT CHART FYP I)

Page 88: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

69

APPENDIX B (GANTT CHART FYP II)

Page 89: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

70

APPENDIX C (PROJECT POSTER)

Page 90: USING AUGMENTED REALITY (AR-BBS) · Oleh itu, dengan adanya ‘Belajar Bacaan Solat using AR Technology’ pelajar-pelajar ini dapat menggunakan teknologi dengan sebaiknya.. Objektif

71

APPENDIX D (INTERVIEW QUESTIONS)

USABILITY TESTING ‘BELAJAR BACAAN SOLAT’ (AR)

This section is used to identify the functionality of the "Belajar Bacaan Solat (AR)"

application in providing feedback on applications developed for improvement.

RESPONSE 1

1. Is this application complex for you?

This application is not complicated for me.

2. Is this application easy to use?

Yes, it's very easy to use.

3. Do you need the support of technical people in using this application?

I don't need the support of technical people.

4. Do you find that the functionality in this application is well-integrated?

Yes, very well integrated.

5. Are they out there learning to use this app quickly?

Yes, I think people out there will be able to learn using this app very quickly.

6. Is this application very complicated to use?

It's not complicated for me.

7. Is this application interactive to learning?

YES, it’s very interactive.

8. Do you need to learn a lot before using this application?

I don't think I need to learn much before using this application.