Embed Size (px)
Citation preview
‘BELAJAR BACAAN SOLAT’ (AUGMENTED REALITY)
(AR-BBS)
RAFHANAH BINTI RAMLAN
BACHELOR OF INFORMATION TECHNOLOGY
(INFORMATICS MEDIA) WITH HONOURS
FACULTY OF INFORMATICS AND COMPUTING
UNIVERSITI SULTAN ZAINAL ABIDIN
2019/2020
ii
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:
iii
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:
iv
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.
v
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 AR 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.
vi
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 2 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.
vii
TABLE OF CONTENTS
DECLARATION ii
CONFIRMATION iii
DEDICATION iv
ABSTRACT vi
TABLE OF CONTENTS vii-ix
LIST OF TABLE x
LIST OF FIGURES xi
LIST OF ABBREVIATION xii
LIST OF APPENDICES xiii
CHAPTER 1 INTRODUCTION
1.1 Background 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 Project Schedule 7
1.8 Conclusion 8
viii
CHAPTER 2 LITERATURE REVIEW
2.1. Introduction 9
2.2. Augmented Reality 9-10
2.2.1. Augmented Reality Techniques 11-10
2.3. Previous research on the application for Prayers in
Salah
12
2.3.1 Flashcard: Bacaan Rukun Qauli Dalam Solat 12-13
2.3.2. Mobile Application: E-Solat 13
2.3.3 Mobile Application: The User Guide Muslim
Pray
14
2.3.4. Mobile Application: Panduan Lengkap
Solat
15
2.3.5. Mobile Application: Panduan Solat Wanita 15
2.3.6. Mobile Application (AR): ‘Ajar Saya Solat’ 16-17
2.4 Comparison Existing Products 17-20
2.5 Summary 21
CHAPTER 3 METHODOLOGY
3.1 Introduction 22
3.2 Rapid Application Development (RAD)
Methodology
23
3.2.1 Requirements Planning Phases 24-27
3.2.2 User Design Phases 28-34
3.2.3 Construction Phases 35
3.2.3.1 Development 35-37
ix
3.2.4 Cutover Phases 38
3.2.4.1 Final Testing 38
3.3 Framework Design 39
3.4 Hardware and Software Requirement 40
3.4.1 Hardware requirement 40-41
3.4.2 Software requirement 41-42
3.5 Summary 43
REFERENCES 44
x
LIST OF TABLES
1.1 Gantt Chart 7
2.1 Comparison table of existing product 12-19
2.2 Comparison table of the existing products with 5
element of multimedia
19-20
3.1 Existing Product 26-27
3.2 Hardware and Usage 40-41
3.3 Software and Usage 42
xi
LIST OF FIGURES
2.1 Marker-based AR 12
2.2 Marker less AR 12
2.3 The content in Application of Panduan Lengkap
Solat
15
2.4 The content in Application of Panduan Solat
Wanita
16
2.5 The content in Application of Ajar Saya Solat 17
3.1 Rapid Application Development 23
3.2 Analysis Phases 25
3.3 Flashcard 1 28
3.4 Flashcard 2 29
3.5 Main Menu 29
3.6 How to Play 36
3.7 About 31
3.8 Scanner (Before) 31
3.9 Scanner (After) 32
3.10 Home Page Quiz 33
3.11 Multiple Choice 33
3.12 True/False 34
3.13 Framework Design 39
xii
LIST OF ABBREVIATIONS/TERMS/SYMBOLS
AR Augmented Reality
3D Three dimensional
FYP Final year project
xiii
LIST OF APPENDICES
A Apendix
1
CHAPTER 1
INTRODUCTION
1.1 Introduction
Augmented Reality (AR) has been an emerging technology in these recent
years.AR defined as immersion of virtual environment to the real environment which it
enriches the vision, audition or even taste, touch and smell (Daponte, et al., 2014). 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 (Daponte, et al., 2014). 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 (Golan, 2006).
Nowadays, smartphones have the core features to develop an AR application suc
has camera, touch screen, Inertia Measurement Unit (IMU), internet access and so
forth(Daponte, et al., 2014). The advancement of smartphone technologies which
enable real time image processing camera and powerful performance from built-in
Central Processing Unit (CPU) and Graphics Processing Unit (GPU) made basic AR
application development easier without external supporting device.
2
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 an 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’ Card book using AR Technology Enhanced using AR
technology is an interactive application that uses new era technology to help people.
This ‘Belajar Bacaan Solat’ Card book using AR Technology is specially created for
students of Islamic class in primary school (KAFA). In addition, ‘Belajar Bacaan Solat’
Card book using AR Technology is focused on prayers in solah to improved prayers
and learned proses with interactive. Users need to scan the card book of the prayer in
solah using their mobile phones. Then, the model and the prayers in solah will appear
on the phone automatically. Additionally, users can click on the audio button available
to hear the prayers in solah 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.
3
1.2 Problem Statement
In my literature review about existing products, many mobile applications
developed is not focused on prayers in solah. They only focus on the step in solah. So,
about this problem, I take an alternative to developing applications that focus on Prayers
in Solah 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 solah. 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 solah. Concise descriptions
of the issues stated need to be addressed to deal with the problem.
4
1.3 Objectives
There are the following objectives of AR P for student of Islamic class in
primary school (KAFA) are:
i. To study the augmented reality technology to create ‘Belajar Bacaan Solat’
Card book using AR Technology with interactive ways.
ii. To design and develop mobile apps for ‘Belajar Bacaan Solat’ Card book
using AR Technology that allow users learning with augmented reality.
iii. To test and evaluate the functionality of ‘Belajar Bacaan Solat’ Card book
using AR Technology.
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 card book.
The author develop 3D modelling of the character using Maya and unity 3D.
The illustration of the flashcard is use adobe photoshop and adobe Illustrator
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
card book, Display Augmented Reality (AR) application with animations.
Display 10 prayers in solah card, Contain the prayers in solah and contain 2
activities.
III. User
This project age scope is focused on student of Islamic class in primary
school (KAFA).
6
1.5 Limitation of Work
A limitation is any aspect that hinders a study and its findings. (Moura, 2017).
This AR Prayers in solah for student of Islamic class in primary school (KAFA) is
limited by four aspect:
i. Only prayers in solah 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’ Card book using AR Technology will completely
develop.
iii. Only android user can access this application.
7
1.7 Project Schedule
The project schedule covers the course of the whole FYP 1. The duration of this
project is from September of 2019 to December of 2019. Following are the Gantt Chart
that illustrate each month’s progression and task to be done.
Table 1.1: Gantt Chart
8
1.8 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 solah 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 learning
activities carried out in conjunction with the integration of interactive multimedia
elements.
9
CHAPTER 2
LITERATURE REVIEW
2.1. Introduction
This chapter discusses about previous work or related work about ‘Belajar
Bacaan Solat’ Card book 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
10
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 Iwan et al., (2009), 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 (Eh Phon et al., 2013). 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.
11
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 (Eh Phon et al., 2013).
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 Marker less AR
12
Figure 2.1 Marker-based AR Figure 2.2 Marker less AR
2.3. Previous research on the application for Prayers in Solah:
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 (Md. Nasib et.al, Universiti Sains Islam Malaysia, 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 coloured card
in mastering the reading of “rukun qauli” in prayers, also to identify how far the
acceptance and comprehension 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 of 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
13
techniques to enchance the student interest in learning and mastering “rukun
qauli”, for example the use of coloured card was effective because it managed
to attract the student attention. The study also highlights the importance of
reinforcement and remedical 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 solat.
This courseware divides into two main courses which is learning solat and
remembering short surah. Under solat, there are five options and kids can choose
which solat 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
solat.
2.3.3. Mobile Application: The User Guide Muslim Prayer.
According to (Siti Zuraida Abdul Manaf, Ahmad Syukri Mohamad
Zaid and etc The User Guide of the Mobile Muslim Prayer Application, 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.
14
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 questionnaire
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.
15
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. Futhermore, 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.
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 oct 2, 2018 and user can get on play store for free.
16
Figure 2.4: the content in Application of Panduan Solat Sempurna Wanita.
2.3.6. Mobile Application (AR): ‘Ajar Saya Solat’.
According to (Hexa Setia, ‘Ajar Saya Solat’, 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 recition 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.
17
Figure 2.4: the content in Application of Ajar Saya Solat.
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
TITLE
AUTHOR
/ YEAR
TECHNIQUES
ADVANTAGE
DISADVANTAGE
Bacaan
Rukun
Qauli
Dalam
Solat
Md Nasib
et.al
(2016)
Article
(flashcard)
• The purpose
of this study
was to test the
effectiveness
of primary
student
mastery level
• Has no animation
element and only
appear in 2D
model.
18
of “Rukun
Qauli” during
their “solat”
by using
coloured card.
E-Solat Syaifudin
Bin
Ramzan
(2016)
Article
(Mobile Apps)
• Provides
learning solat
and
remembering
short surah.
• Less attractive
• Images only
appear in 2D.
• A bit
complicated for
kids
The User
Guide
Muslim
Prayer
Siti
Zuraida
Abdul
Manaf
et.cl
(2015)
Article
(Mobile Apps)
• Provides a
complete
guide of
solah.
• No animation
element
• Less attractive
layout.
• A bit
complicated for
kids.
Panduan
Lengkap
Solat
Syaifudin
Bin
Ramzan
(2015)
Mobile apps
• Complete
prayer in
solah and a
“sunat”
prayer.
• No text and only
sound of prayers
is provided.
• Less interactive
layout.
19
Panduan
Solat
Sempurna
Wanita
laila
majnun
(2018)
Mobile Apps
• The content is
detailed like
book.
• Less interactive
environment
design.
• Only for woman.
• To much text in
one page.
‘Ajar Saya
Solat’
Hexa Setia
(2018)
Mobile Apps
(AR)
Marker based
• Provides step
in solah.
• Interactive
and suitable
for kids.
• Only focus on
step in solah.
• Without
recitation of
surah.
• The book is
limited to get
since it’s from
oversea.
Table 2.2 Comparison Table of the Existing Products with 5 Element of
Multimedia
TITTLE Text Image Video Audio Animation
Flashcard: Bacaan Rukun
Qauli Dalam Solat
✓ ✓ - - -
Mobile Apps: E-Solat ✓ ✓ - - -
Mobile Apps: The User
Guide Muslim Prayer
✓ ✓ - - -
20
Mobile Apps: Panduan
Lengkap Solat
✓ - - ✓ -
Mobile Apps: Panduan
Solat Sempurna Wanita
✓ ✓ - - -
Mobile Apps (AR): ‘Ajar
Saya Solat’
- ✓ - ✓ ✓
Based on the table 2.1, the conclusion that can be concluded from the hand-on
product is all of it using text and image, but it is to 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.
21
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.
22
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 traditional
lifecycle. It is designed to take the maximum advantage of powerful development
software that has evolved recently.” .The reason why this methodology is selected is
23
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)
24
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 solah, the current problems and the enhancement of implementing
augmented reality of prayer in solah 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 solah. 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.
25
Figure 3.2 Analysis Phase
Requirement
s
Problem
Statement
1. Learn using book is less
interactive.
2. Not have 3D animation.
Objectives
1. To study the augmented
reality technology to create
‘Belajar Bacaan Solat’ Card
book using AR Technology.
2. To design and develop
‘Belajar Bacaan Solat’ Card
book using AR Technology
that allow users learning with
augmented reality.
3. To test the functionality of
Prayers in Solah 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 10 prayers in solah
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)
26
Table 3.1 Existing Product
TITLE TECHNIQUES ADVANTAGE DISADVANTAGE
Penguasaan Bacaan
Rukun Qauli Dalam
Solat
Article
(flashcard)
• The purpose
of this study
was to test the
effectiveness
of primary
student
mastery level
of “Rukun
Qauli” during
their “solat”
by using
coloured card.
• Has no animation
element and only
appear in 2D
model.
E-Solat in Mobile Article
(Mobile Apps)
• Provides
learning solat
and
remembering
short surah.
• Less attractive
• Images only
appear in 2D.
• A bit complicated
for kids
The User Guide
Muslim Prayer
Application
Article
(Mobile Apps)
• Provides a
complete
guide of solah.
• No animation
element
• Less attractive
layout.
27
• A bit complicated
for kids.
Panduan Lengkap
Solat Fardhu & Sunat
Mobile apps
• Complete
prayer in solah
and a “sunat”
prayer.
• No text and only
sound of prayers
is provided.
• Less interactive
layout.
Panduan Solat
Sempurna Wanita
Mobile Apps
• The content is
detailed like
book.
• Less interactive
environment
design.
• Only for woman.
• To much text in
one page.
Ajar Saya Solat
Mobile Apps
(AR)
Marker based
• Provides step
in solah.
• Interactive
and suitable
for kids.
• Only focus on
step in solah.
• Without
recitation of
surah.
• The book is
limited to get
since it’s from
oversea.
28
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 card book for Bacaan 1 in Prayers.
Figure 3.3 Flashcard 1
29
Based on the figure 3.4 below, show the card book for Bacaan 2 in Prayers.
Figure 3.4 Flashcard 2
ii. Storyboard Application
Based on the figure 3.5 below is the main menu for the application.
Figure 3.5 Main Menu
BUTTON FUNCTION
Button how to play
After user click this button, user will go to the page
how to play.
Button info
After user click this button, user will go to the page
info of this application.
30
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 card book at that page.
Based on the figure 3.6 How to Play below show the page for How to Play. It
show the explanation how to use this application.
Figure 3.6 How to Play
BUTTON FUNCTION
Button home
After user click this button, user will go to the page
home again.
31
Based on figure 3.7 about, this page is about the application for student and
based on KAFA Class syllabus.
Figure 3.7 About
BUTTON FUNCTION
Button home
After user click this button, user will go to the page
home again.
Based on the figure 3.8 below, the user need to scan a card book using a
camera.
Figure 3.8 Scanner (Before)
32
BUTTON FUNCTION
Button home
After user click this button, user will go to the page
home again.
Button sound
After user click this button, user will hear the prayer in
solah based on card book that scan.
Green scroll box This green scroll box is for user to see the prayers in
solah.
Based on the figure 3.9, the object will appear in 3D.
Figure 3.9 Scanner (After)
BUTTON FUNCTION
Button home
After user click this button, user will go to the page
home again.
Button sound
After user click this button, user will hear the prayer in
solah based on card book that scan.
Green scroll box This green scroll box at this page is for user to see the
prayers in solah.
33
Based on the figure 3.10 below is the main menu for the quiz.
Figure 3.10 Home Page Quiz
BUTTON FUNCTION
Button home
After user click this button, user will go to the page
home again.
Button ‘BETUL atau
SALAH’
After user click this button, user will go to page quiz
‘BETUL atau SALAH’, that have 5 questions.
Button ‘PILIHAN
JAWAPAN’
After user click this button, user will go to page quiz
‘PILIHAN JAWAPAN’ that have 5 questions.
In the figure 3.11 below, Quiz 1 in 5 question with multiple choice.
Figure 3.11 Multiple Choice
34
BUTTON FUNCTION
Button back
After user click this button, user will go to the page
before that page.
In the figure 3.12 below, Quiz 2 in 5 question with true or false.
Figure 3.12 True/False
BUTTON FUNCTION
Button back
After user click this button, user will go to the page
before that page.
35
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 card book 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 functionality
developed is achieved the user requirements. Some changes and modification
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 solah card book 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 card
book its will pop out the 3D models at the mobile phone screen.
36
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.
37
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.
38
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’ Card book 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.
39
3.3. Framework Design
Figure 3.6 below shows the framework design of Prayer in Solah Application. User
able to choose any button in this application.
Figure 3.6 : 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 card
book prayer in solah and to create interface of the application ‘Belajar Bacaan Solat’
Card book 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.
40
3.4. Hardware and Software Requirement
Developers have identified the requirements needed to develop AR Prayers in
Solah. 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 Solah. 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 Solah. Based on the Table 3.1 below, describes about 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.
41
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.
Table 3.1 : Hardware and Usage.
3.4.2. Software Requirement
As a result of the analysis, it was found that the software needed to
develop AR Prayers in Solah 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 Solah to produce more
42
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.
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 desi gn interface, posters and
logo
application.
Table 3.2: Software and Usage.
43
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.
44
REFERENCES:
Johari, N. S., Fakhruddin, F. M., & Suhid, A. (2017). Pendekatan dan kaedah
pengajaran ibadah solat guru pendidikan Islam menurut perspektif murid. O-JIE:
Online Journal of Islamic Education, 4(2), 46-53.
laila majnun (2018). Reuters (1.0)[ Mobile application software]. Retrieved from
https://play.google.com/store/apps/details?id=com.andromo.dev715390.app86408
5&hl=en
Manaf, A., Zuraida, S., Zaid, A. S. M., Din, R., Hamdan, A., Salleh, N. S. M., ... &
Lubis, M. A. (2015). Aplikasi Mudah Alih Panduan Solat dan Penggunaannya=
The User Guide of the Mobile Muslim Prayer Application. ʻUlum Islamiyyah
Journal, 197(3537), 1-16.
Nasib, M., & Binti, R. (2016). Penguasaan Bacaan Rukun Qauli Dalam Solat
Dalam Kalangan Murid Tahun 4 Sekolah Rendah (Doctoral dissertation, Universiti
Sains Islam malaysia).
Ramzan, S. (2010). Courseware on E-solat in Mobile (Doctoral dissertation, UMP).
