Upload
others
View
9
Download
0
Embed Size (px)
Citation preview
LET’S LEARN TAYAMMUM USING AUGMENTED
REALITY
SITI AMINAH BINTI MOHD DAUD
BACHELOR OF INFORMATION TECHNOLOGY
INFORMATICS MEDIA WITH HONOURS
UNIVERSITI SULTAN ZAINAL ABIDIN
2021
LET’S LEARN TAYAMMUM USING AUGMENTED REALITY
SITI AMINAH BINTI MOHD DAUD
BACHELOR OF INFORMATION TECHNOLOGY
INFORMATICS MEDIA WITH HONOURS
Universiti Sultan Zainal Abidin
2021
i
DECLARATION
I hereby declare that the 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 Universiti Sultan Zainal
Abidin or other institutions.
_______________________________
Name: Siti Aminah bt Mohd Daud
Date:
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report were under my supervision.
_______________________________
Name: Encik Mat Atar Bin Mat Amin
Date:
iii
DEDICATION
In the Name of Allah, the Most Gracious and the Most Merciful.
Alhamdulillah, I thank God for His grace and grace, I can prepare and complete this
report successfully.
First of all, I would like to thank my supervisor, En. Mat Atar Bin Mat Amin because
with guidance, the advice, and the thoughtful ideas are given me the opportunity to
prepare this report successfully.
Besides, my gratitude is also to my colleagues who share ideas, opinions, knowledge,
and reminders. They helped me answer every question that was important to me in
completing this report.
Thanks also to my beloved mother and father always support and motivated me to
prepare for this report for Final Year Project.
I would like to take the opportunity to thank all lecturers of the Informatics and
Computing Faculty for their attention, guidance, and advice in helping and sharing ideas
and opinions in making this report successful.
May Allah SWT bless all the efforts that have been given in completing this
report.
Thank you.
iv
ABSTRACT
Let’s Learn Tayammum using Augmented Reality (AR) was developed for the primary
school student in standard to learn Islamic subjects more effectively. Existing learning
methods are changed by AR and Virtual Reality (VR) technologies and using
smartphones. Augmented reality is when 3-Dimensional virtual objects are integrated
into a 3D real environment in real time. AR is the enhaced of technology to overlay
digital data on an image of something seen through a device such as a smartphone
camera. This app may be able to help primary school students to learn about tayammum
more interactive and fun. This application also will use interactive 3-dimensional (3D)
objects, sound and display info so that students are interested in using this application.
MDLC method is divided into six main sections, namely the beginning of the concept
phases, design phases, material collecting phases, assembly phases, testing phases and
distribution phases. The use of the MDLC method ensures that the development of the
system runs smoothly and according to planning.
v
ABSTRAK
Let’s Learn Tayammum using Augmented Reality (AR) telah dibangunkan untuk pelajar
darjah 1 hingga 6 dalam subjek Pendidikan Islam supaya dapat belajar dengan lebih
cekap dan berkesan. Kaedah pembelajaran sedia ada diubah oleh teknologi AR dan VR
dan menggunakan telefon pintar.AR adalah apabila objek maya 3-dimensi disatukan
apabila dalam dunia realiti. AR adalah teknologi yang ditambah baik untuk melapisi
data digital pada gambar sesuatu yang dilihat melalui peranti seperti kamera telefon
pintar. Aplikasi ini mungkin dapat membantu pelajar mempelajari tentang tayammum
dengan lebih interaktif dan menyeronokkan. Selain itu, aplikasi ini menggunakan objek
3-dimensi interaktif, mengeluarkan bunyi dan paparan maklumat supaya pelajar
berminat menggunakan aplikasi ini. Kaedah MDLC dibahagikan kepada enam
bahagian utama, iaitu permulaan fasa analisis, fasa reka bentuk, pengumpulan
material, fasa pelaksanaan, fasa penilaian dan fasa pengedaran. Penggunaan kaedah
MDLC memastikan pembangunan sistem berjalan lancar dan mengikut perancangan.
vi
CONTENTS
PAGE
DECLARATION i CONFIRMATION ii DEDICATION iii ABSTRACT iv
ABSTRAK v CONTENTS vi LIST OF TABLES viii LIST OF FIGURES ix LIST OF ABBREVIATIONS xi
LIST OF APPENDICES xii
CHAPTER 1 INTRODUCTION 1
1.1 Project Background 1 1.2 Problem Statement 3 1.3 Objectives 3 1.4 Scope 4
1.5 Limitation of Work 4 1.6 Expected Result 4
1.7 Summary of the Chapter 5 CHAPTER 2 LITERATURE REVIEW 6
2.1 Introduction 6
2.2 Related Works Based On Journal 6 2.2.1 Perancangan Aplikasi Android Simulasi Tata Cara
Pengambilan Wudhu Dengan Methode Augmented
Reality (Maulana, Kenny, 2020) 6
2.2.2 Android based learning application for Wudhu and
Tayamum using augmented reality technology (S P
Dewi,2020) 7 2.2.3 Aplikasi Pembelajaran Untuk Anak Dengan Teknologi
Augmented Reality (AR) Pada Buku Panduan Wudhu
Berbasis Mobile Android (Heroris Maulidio, Gaguk
Susanto,2019) 9 2.2.4 Comparison Existing application based on Journal 10
2.3 Related Works Based On Existing Application 11
2.3.1 Panduan Shalat AR: Belajar Wudhu dan Shalat 11 2.3.2 SDI Interaktif 12 2.3.3 Panduan Tayammum Lengkap 13
2.3.4 Comparison based on existing Applications. 15 2.4 Chapter Summary 16
CHAPTER 3 METHODOLOGY 17 3.1 Introduction 17
3.2 Methodology Model 17 3.2.1 Concept 18 3.2.2 Design 18
3.2.2.1 Storyboard 19 3.2.2.2 Proof of Concept 21
vii
3.2.3 Material Collecting 21
3.2.4 Assembly 21 3.2.5 Testing 22
3.2.6 Distribution 22 3.3 Navigation Map 23 3.4 Software and Hardware Requirements 23 3.5 Framework 24 3.6 Summary of The Chapter 25
CHAPTER 4 IMPLEMENTATION AND RESULT 26 4.1 Introduction 26 4.2 Implementation 26
4.2.1 Interface Design 26 4.2.2 3D Model 31
4.2.3 AR Marker 32
4.2.4 Results 34
4.2.5 Summary 34 CHAPTER 5 CONCLUSION 35
5.1 Introduction 35 5.2 Project Contribution 35
5.3 Project Problems and Limitation 35 5.4 Future Work 36
5.5 Summary 36 REFERENCES 37 APPENDICES 38
viii
LIST OF TABLES
Table
No.
Title Page
Table 2.1 Comparison Existing application based on Journal 10
Table 2.2 Comparison based on existing Applications 15
Table 3.1 Concept Table 18
Table 3.2 Hardware Requirements 23
Table 3.3 Software Requirements 24
ix
LIST OF FIGURES
Figure
No.
Title Page
Figure 2.1 Use Case Diagram 6
Figure 2.2 Testing Result For the Functionality of the Application 8
Figure 2.3 Simple Storyboard 9
Figure 2.4 Main Menu Interface 12
Figure 2.5 Splashscreen for SDI Interaktif 13
Figure 2.6 Splashscreen Of Aplikasi Panduan Tayammum 14
Figure 3.1 MDLC Model 17
Figure 3.2 Start Menu Interface 19
Figure 3.3 Defintion Interface 19
Figure 3.4 Main Menu Interface 19
Figure 3.5 Splashscreen 19
Figure 3.6 FAQ and Credit Interfaces 20
Figure 3.7 Quiz and AR View Interfaces 20
Figure 3.8 Navigation Map 23
Figure 3.9 Framework 24
Figure 4.1 AR View 27
Figure 4.2 Main Menu 27
Figure 4.3 Splashscreen 27
Figure 4.4 Quiz Menu 28
Figure 4.5 Start Menu Interface 28
Figure 4.6 Multiple Choices Answer Interface 28
Figure 4.7 Other Interface 29
Figure 4.8 Credit Interface 29
Figure 4.9 Instruction Interface 29
Figure 4.10 Next Button 30
Figure 4.11 Sound Button 30
Figure 4.12 Exit Button 30
Figure 4.13 Home Button 30
Figure 4.14 Back Button 30
Figure 4.15 The boy model 31
Figure 4.16 The table model 31
x
Figure 4.17 Step 1 32
Figure 4.18 Step 2 32
Figure 4.19 Step 3 33
Figure 4.20 Step 4 33
Figure 4.21 Step 5 33
Figure 4.22 Step 6 33
xi
LIST OF ABBREVIATIONS
3D 3-Dimensional
AR Augmented Reality
App Application
FYP Final Year Project
MDLC Multimedia Development Life Cycle
VR Virtual Reality
xii
LIST OF APPENDICES
APPENDIX 1 GANTT CHART FOR FYP 1
APPENDIX 2 GANTT CHART FOR FYP 2
APPENDIX 3 DIGITAL PROJECT POSTER
1
CHAPTER 1
INTRODUCTION
1.1 Project Background
Augmented reality (AR) can be defined as a technology which overlays virtual objects
(augmented components) into the real world. These virtual objects then appear to
coexist in the same space as objects in the real world (Azuma et al., 2001). Nowadays,
technology has been used widely in many sectors. One of the sectors that rapidly use
technology as a medium to become more effective and reliable is education. Analysis
of scientific literature and own practical experience of the use of augmented reality
technologies application in educational practices allowed to state next: augmented
reality technologies have a great potential for application in education (Anna V.
Iatsyshyn,2020).
There are four type of AR techniques that can be use which are Markerless AR, Marker-
based AR, projection-based AR and superimposition-based AR. This project will focus
on Marker-based AR. The users can see the animation when camera reader senses the
marker.
Nowadays, people use Internet and application to find information and learning. Muslim
people also use application to find information about Islam religious such as aqidah,
fiqh and tasawwuf. There are many Islamic application that can be found. (Izanee,2020).
However, the Islamic application that use AR which are combination of real life and
virtual object are hardly found.
2
There are various of advantages using AR as an educational setting can be shown. AR
offers interaction such as device rotating and touching to make learning more
interesting. The findings on the positive impact are increased content understanding,
learning spatial structures, language associations, long-term memory retention,
improved collaboration and motivation. (Jorge Bacca,2014). AR in educational setting
can help kids to visualise and give better understanding about what they learn. Let’s
Learn Tayammum allowing student to learn about tayammum in an interesting
environment thus to increase their motivation to study.
Based on research, students said that they felt drowsy, unable to focus and bored with
the lessons given by their Islamic studies teachers (Kamarul Azmi, 2011) Motivation is
needed to engaged kids to learn something and AR can help them to boost their
motivation. A lack of motivation could be major obstacle to learner success,
emphasising the importance of creating and sustaining motivation (Khan et al.,2019)
Thefore, Let’s Learn Tayammum development are to boost student motivation and
engaged students with the new learning era. Presence of the Internet in combination
with large assortment of gadgets, psychological features and value system of modern
youth require bringing educational process in a methodological, technical and
pedagogical direction in accordance with modern realities (Anna V. Iatsyshyn,2020).
Tayammum is one of the knowledges that a Muslim should know. Therefore, people
can learn in an interactive way using the benefits of the invented technologies follows
the modernisation era. Thus, it can be an interesting way to enjoy learning.
This project will include the steps to perform tayammum properly and the general
knowledge about tayammum in 3D environment using flashcards and mobile phone. It
will include with some features such as audio, text and animation.
3
1.2 Problem Statement
• Tend to lost focus learning in a traditional way of learning.
Nowadays, the rapid growth of technology exposed kids in the millennium era
with gadjets. Kids tends to learn using gadjets rather than using texbooks and
blackboards.
• Lack of interest and motivation to learn Islamic subject.
Muslim kids are said to have lack of interest to learn Islamic subject due to
Islamic subject are teached with books and just listen what the teacher taught.
This leads students to feel bored and drowsy in class since they think they can
read the book by themselves.
• Lack of Islamic education application
There are limited Islamic mobile application for kids to use for school education.
The application that has been developed mostly for aqidah but there are few
only for thoharah.
1.3 Objectives
i. To develop an AR mobile application for kids ranges 7-12 years old.
4
ii. To design Let’s Learn Tayammum Using Augmented Reality (AR) mobile
application.
iii. To test the functionality of Let’s Learn Tayammum Using Augmented Reality
application.
1.4 Scope
• AR View
In this AR View contained the steps of tayammum and it will show the 3D animation
together with the audio and text references.
• Activities.
This application has two activities which is Quiz 1 which is true or false questions and
Quiz 2 which is multiple choice question.
1.5 Limitation of Work
i. This application works only on android.
ii. Applicable only for Muslim kids range 7-12 years old.
1.6 Expected Result
i. Allows teachers to teach students about tayammum in an effective and attractive
way.
ii. Functionality in the mobile application can function well on android.
5
iii. This AR application has an attractive 3D animation.
1.7 Summary of the Chapter
This chapter will deliver about the early stages about this project development. It
explains more about initially project development process such as project’s background,
problem statement, project objective, and project’s scope.
6
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction
This chapter provided some reviews of techniques which have been proposed by many
researchers in previously. The related works also have been reviewed to ensure the
quality in order to improve this project. This chapter also will do comparison with any
other existing application that slightly same and nearly same with this application. It
will decide what to do to make sure the application will become a better application.
2.2 Related Works Based On Journal
2.2.1 Perancangan Aplikasi Android Simulasi Tata Cara Pengambilan Wudhu
Dengan Methode Augmented Reality (Maulana, Kenny, 2020)
Figure 2.1 Use Case Diagram
7
Based on Perancangan Aplikasi Android Simulasi Tata Cara Pengambilan Wudhu
Dengan Methode Augmented Reality (Maulana, Kenny on 2020), this paper discussed
about implementation of AR technology in education for performing abulations.
This application is use to ease Muslim to learn the steps taken to perform abulations
properly and clearly using 3D object. The author stated that using AR as the learning
medium can increase the understanding and it is more effective than using the other
mediums such as books, videos and using computer. Therefore, AR has high potential
in education sector.
This application use marker-based technique and use poster as the marker. There are
one 3D object, six markers and six animations in this application. They provide
instructions of how to use the application for user to guide them to use this application.
In addition, the application is android based and the requirement for this application is
android 9. The method used to develop this application is class diagram and prototype
model.
2.2.2 Android based learning application for Wudhu and Tayamum using
augmented reality technology (S P Dewi,2020)
Based on the journal, the aim for this study is to develop an interactive learning media
abulation and tayammum using AR. There is a questionnaire conduct for user to test this
application. The user gives a positive feedback such as the application is needed for the
students, effectively for learning media of wudhu and tayammum and it is practical to
use.
8
This application use marker-based technique. Therefore, the description of the step will
be display and target name will appear if a marker is detected. This application has
sound feature that will come out if the speaker button is pressed. The contents of the
description and sound will change according to the markers detected. In the AR view
interface, there is a back button that can be use to go back to the main menu. The method
use for the development is waterfall method.
Using this application, children can be more developed by seeing hearing and feeling
what they are learning with the help of AR, and children become more enthusiastic in
learning. Besides this application is also appropriate to be used as an interactive learning
media for children. As user, kids will feel happy and interesting using it with an
attractive interface design.
Figure 2.2 Testing Result For the Functionality of the Application
9
Based on the journal, they had conducted an interview with teachers from primary
school and they found out that students can do the theoretical but students cannot do
well practically. Therefore, in order to overcome the problem, they use AR as a learning
kit to make learning more effective. Result from another research they conducted shows
that using technology as the learning kit is more efficient to use for learning steps of
abulations. The method used to develop this application is Multimedia Development
Life Cycle (MDLC).
This application use 3D animation to show the steps for performing abulations and
tayammum. There are research state that people can memorise 20% what they see, 30%
what they hear and 80% from what they hear and see simultaneously. Therefore, with
3D in can make students more enthusiastic. (Yuningsih et al.,2019)
2.2.3 Aplikasi Pembelajaran Untuk Anak Dengan Teknologi Augmented
Reality (AR) Pada Buku Panduan Wudhu Berbasis Mobile Android
(Heroris Maulidio, Gaguk Susanto,2019)
Figure 2.3 Simple Storyboard
10
2.2.4 Comparison Existing application based on Journal
Table 2.1 Comparison Existing application based on Journal
Title Perancangan
Aplikasi Android
Simulasi Tata
Cara
Pengambilan
Wudhu Dengan
Methode
Augmented
Reality
Android
based
learning
application
for Wudhu
and
Tayamum
using
augmented
reality
technology
Aplikasi
Pembelajaran
Untuk Anak
Dengan
Teknologi
Augmented
Reality (Ar)
Pada Buku
Panduan
Wudhu
Berbasis
Mobile
Android
Let’s Learn
Tayammum
Using
Augmented
Reality
Text YES YES YES YES
Image NO YES YES YES
Audio NO YES YES YES
Video /
Animation
YES YES YES YES
AR Technique Marker-based Marker-
based
Marker-
based
Marker-
based
Advantages Interface are
easy to
understand
Interfaces are
easy to
understand
3D animation
is attractive
Interfaces are
easy to
understand
Interfaces are
attractive and
easy to
understand
3D
animation is
attractive
Have
attractive
audio
11
2.3 Related Works Based On Existing Application
2.3.1 Panduan Shalat AR: Belajar Wudhu dan Shalat
“Panduan Shalat AR: Belajar Wudhu dan Shalat” application was released by Mizan
Application on 2nd March 2020. The target user for this application is kids range of 3
and above who are just exposed to prayers and abulations by their parents or educators.
This application focus on showing the steps to perform abulations and prayer. In
addition, the application has quizzes which are true or false questions and rearrange the
steps of abulation. This application also has audio that suitable for kids. Since this
application use marker-based technique, user needs the books to scan for 3-D animation.
In the main menu the icon resemble next button is used to go for AR view.
Disadvantages 3D animation is
not attractive
The marker
image is hard to
detect.
Only
applicable for
android user.
The interface
colour is
dull.
Only
applicable
for android
user.
Main menu
interface is
not attractive
Only
applicable for
android user.
Only
applicable
for android
user.
12
2.3.2 SDI Interaktif
This application was established by Sygma Media Innovation on 28th July 2020. This
mobile apps focus on learning abulation, tayammum and prayer. The target user for this
application is for kids age 3 years old and above. It can help guide the children to
perform abulations, tayammum and prayers step by step. The application use flash card
as the marker image. User need to scan the flashcards to watch 3D animation.
Figure 2.4 Main Menu
Interface
13
2.3.3 Panduan Tayammum Lengkap
This application was published by HAW developer on 12th November 2019. This
application focus to guide kids to perform tayammum step by step. The technique use
in this application is marker based. User can download the marker image in the apps for
free. The target user for this application is kids age 6 and above. In this application user
can choose the gender of the user. It also provides the instruction to use the application.
The application is easy to understand as the interfaces are very clear what each button
is use for particularly and it is easy to learn.
Figure 2.5 Splashscreen for SDI
Interaktif
14
Figure 2.6 Splashscreen Of Aplikasi Panduan
Tayammum
15
2.3.4 Comparison based on existing Applications.
Table 2.2 Comparison based on existing Applications
Title
Panduan
Shalat Ar:
Belajar
Wudhu dan
Shalat
SDI Interaktif Panduan
Tayammum
Lengkap
Let’s Learn
Tayammum
(Proposed
project)
Requirement Android 6.0
and above
Android 6.0
and above
Android 4.1
and above
Android 4.1
and above
Advantages Colourful
Have a suitable
audio
Interface are
easy to learn
The animation
is interesting
The interfaces
are clear and
easy to learn
Have an
attractive audio
Colourful and
attractive
interfaces
Disadvantages Only applicable
for android user
Less attractive
interfaces
layout
Only applicable
for android user
Apps not
available not
available in
other country
Only applicable
for android user
The animation
is not
interesting
Apps cannot be
open.
Only
applicable for
android user.
Image YES YES YES YES
Text YES NO YES YES
Audio YES NO NO YES
Video/Animation YES YES YES YES
AR Technique Marker-based Marker-based Marker-based Marker-based
16
2.4 Chapter Summary
This chapter discuss the literature review that has been reviewed during feasibility
studies. The literature review helps developer to find out the problems of the previous
research for application which needs to be improve and overcome for this application
development. Moreover, there are some advantages and disadvantages in every
application that has been considered in the research.
17
CHAPTER 3
METHODOLOGY
3.1 Introduction
This chapter will discuss the methodology that will be used in developing this project.
The methodology is important because it act as a guide to complete the project within
the given time. There are several methodology models that can be use when to develop
augmented reality project such as production pipeline, ADDIE and MDLC. In
developing of this project, MDLC model has been chosen to be the research
methodology. Details of each phase will be described in this chapter.
3.2 Methodology Model
This Multimedia Development Life Cycle (MDLC) is a model that consist of six phases.
The phases are concept, design, material collecting, assembly, testing and distribution.
Based on Binanto,2017 the phase does not have to be follow in sequences which mean
the phases can exchange positions. However, the first phase must be the concept stage.
Figure 3.1 MDLC Model
18
3.2.1 Concept
This phase will explain the concept for the AR project.
Table 3.1 Concept Table
Concept
Problem
Statement
• Tend to lost focus learning in a traditional way of
learning • Lack of interest and motivation to learn Islamic subject. • Lack of Islamic education application
Objectives • To develop an AR mobile application for kids ranges 7-
12 years old.
• To design Let’s Learn Tayammum Using Augmented
Reality (AR) mobile application.
• To test the functionality of Let’s Learn Tayammum Using
Augmented Reality application.
Target User • School Teacher
• Aged group 7 to 12 years
• Parents
Application
Content
• AR View – 3D animation of steps of tayammum
• Activities – Quiz
• General knowledge about tayammum
Limitation of
work
• Only applicable for students aged group 7 to 12 years old
• Only support android system
AR Technique • AR Marker-based using flashcard.
3.2.2 Design
Design is phase that show the specification of the user interface design in this
application to create a visual map of application. From the storyboard, it can help the
developer shape the vision and create flow of application. In this phase, the concept
phase is be taken and used to make practical decisions. This includes a topic content,
delivery method, and structure so that it can catch the user’s view.
19
3.2.2.1 Storyboard
Figure 3.5
Splashscreen
Figure 3.3
Defintion Interface
Figure 3.4 Main
Menu Interface
Figure 3.2 Start
Menu Interface
20
Figure 3.6 FAQ and Credit Interfaces
Figure 3.7 Quiz and AR View Interfaces
21
3.2.2.2 Proof of Concept
This application use marker-based technique. Therefore, the description of the step will
be display and the 3D Animation will appear if a marker is detected. This application
has sound feature that will come out if the speaker button is pressed. The contents of
the animation, description and sound will change according to the markers detected. In
the AR view interface, there is a back button that can be use to go back to the main
menu.
3.2.3 Material Collecting
In this phase, all the materials needed to complete the application will be gathered. The
information about the definition of tayammum, performing tayammum in the correct
way step by step and the pillars of tayammum are being gather from books, articles and
internet. The audio will be recorded and will be search from internet if needed while for
the animation, the modelling for the 3D animation should be done in this phase. The
material for use interface such as button, title and picture will be edit and create using
adobe photoshop.
3.2.4 Assembly
The 3D modelling that has been create will be animate in this phase using Autodesk
Maya. Marker image which are the flashcards will be download to Vuforia for
developing AR in the application. The process in this phase will refer the storyboards
in the design phase. All the ccollected materials in the material collecting will be
compile in this phase.
22
3.2.5 Testing
This application The purpose to test the system workflow is to determine the function
of each multimedia element in the application whether it is running according to the
planned design. We can find the error if there are any in the application before it is
distributed.This project will use black box testing in windows and android to make sure
this application can function well as in the storyboards. The testing will be done using
the apk file in android. The animation will test to be play in AR view and play according
to the correct steps of arrangement. All the button are expected can be use and the page
arrangement are correct.
3.2.6 Distribution
This AR application that has developed and store using Autodesk Maya and Unity file.
After all the development in unity finished, the application will be export as .apk file.
Next, the file will be installed on android and can be use. If the project does not satisfy
we need to go the the first phase which is concept to find what solution we can use to
satisfy the project.
23
3.3 Navigation Map
Figure 3.8 Navigation Map
3.4 Software and Hardware Requirements
Table 3.2 Hardware Requirements
Hardware Uses
• Intel i5 Processor Chips
• NVIDIA GEFORCE GT920MGraphics Card
• CS900 SSD 120GB
• DDR 8GB
To create the sketches for the storyboard,
flashcard design and create some info
related to AR-Eclipse. Also used for run
the coding and 3D modelling.
Let's Learn Tayammum
Start
AR View
Defintion
Pillar of Tayammum
Quiz
Multiple answer questions
True or False
FAQ Credit Quit
24
• Android 10.
• 128GB storage
• 4GB RAM
To test and to run the developed
project.
Table 3.3 Software Requirements
3.5 Framework
User need to install the android file .apk in the smartphone. User need to direct the
device’s camera to tha target image which is the 6 flashcards. After the camera detect
Software Uses
Unity 3D
To create the augmented reality
Autodesk Maya
To create the 3D model of sun, moon and
earth
Adobe Photoshop
To design the flashcard, marker-base of
augmented reality
Figure 3.9 Framework
25
the image target, the 3D model will appear. AR are made with Vuforia Configuration
and Unity Software.
3.6 Summary of The Chapter
This chapter discusses the methodology for the application development,
hardware and software required to develop this project. Every phase in the development
follows the project methodology mentioned earlier in this chapter. The requirements
regarding the hardware and software required to develop the augmented reality
application were briefly explained. This chapter also discuss every phase in MDLC
model which are concept, design, material collecting, assembly, testing and distribution.
Every phase is briefly explained in this chapter.
26
CHAPTER 4
IMPLEMENTATION AND RESULT
4.1 Introduction
This chapter will discuss from the previous chapter which is about implementation of
the methodology and will conduct a testing to obtain result of each implementation.
Implementation are executed to ensure the system developed according to the main
purpose of the application developed and fulfil the user requirement. Testing will be
executed and the developer will recognize the error and fix it.
4.2 Implementation
This phase refers to the actual delivery of the instruction. The goal of implementation
is to produce a fully functional application in a timely manner. This project is to be
implemented as an android application by using software Unity 3D with Vuforia
Configuration. Besides, this project used the programming language which is C# for
coding in the Visual Studio. The application file is built and being implemented on a
smartphone model Realme 6 with android 9 to test the functionality of the application.
4.2.1 Interface Design
The interface design are created using Adobe Photoshop 2018 and Adobe Animate.
27
Figure 4.1 is the splashscreen for the application while Figure 4.2 is the main menu
interface for the application. Both of this design follow the design in the storyboard as
shown in chapter 3. Figure 4.3 is the AR View for the application. However, the design
has slightky different from the storyboard.
Figure 4.2
Main Menu
Figure 4.1
Splashscreen
Figure 4.3
AR View
28
Figure 4.4 shows the menu for quiz interfaces. User can choose which quiz does user
want to answer first. Figure 4.5 are the multiple choices answer interface. The buttons
for the quiz menu and the multiple choices answer are slightly different from
storyboards due to make the button more consistent with the other buttons. Figure 4.6
are the start menu interfaces.
Figure 4.6
Multiple Choices
Answer Interface
Figure 4.4
Quiz Menu Figure 4.5 Start
Menu Interface
29
Figure 4.7 shows the interfaces for instruction for user to experience AR. Figure 4.8
shows the interface when user click on others button in the start menu. Figure 4.9 shows
the credit interface followed the storyboard design.
Figure 4.9
Instruction Interface
Figure 4.7
Other Interface Figure 4.8
Credit Interface
30
Those buttons are use in the application. Figure 4.10 is the next button use to go for the
next scene. Figure 4.11 is the sound button. User need to click the button if user want
to hear sound in certain scene. Figure 4.12 show the home button. User can click the
button to go back to main page. Figure 4.13 is the icon for exit button. When user click
on this button user will close the application. Lastly, Figure 4.14 shows back button.
User can click the button to go back to the previous scene.
Figure 4.13
Home Button
Figure 4.12
Exit Button
Figure 4.14
Back Button
Figure 4.11
Sound Button
Figure 4.10
Next Button
31
4.2.2 3D Model
The modelling of 3D model is a process of making a digital objects that capable to fully
animated and make it an essential process for the character to be animated. In this
project, the 3D model was built with texture and assigned material in Autodesk Maya
2019. When user scan the marker on flashcards, the model will appear at the mobile
phone screen with the animation. The AR use Vuforia Configuration. Below are the 3D
model in the application.
Figure 4.15 shows the 3D model that has been imported in Unity Software. The model
are developed using Maya Software first before import to Unity Software.
Figure 4.15 The boy model
Figure 4.16 The table model
32
Figure 4.16 shows the 3D model of table that has been import to Unity Software from
Maya Software.
4.2.3 AR Marker
This application use marker-based AR techniques. Augmented Reality markers are
visual cues which trigger the display of the virtual information. Markers are usually an
images or small objects which are trained beforehand so that they can be recognized
later in the camera stream. After a marker has been detected, its position, scale, and
rotation are derived from visual cues and transferred to the virtual information. This can
be achieved by placing a distinctive picture or shape on the page. That picture will be
recognized and the animation can start immediately, tracked to the appropriate place on
the page. The distinctive picture that can be recognized by the device, the marker. A
marker can be anything, as long as it has enough unique visual points. Images with lots
of corners and edges work especially well. Below are the image targets used in the
application.
Figure 4.17
Flashcard Step 2
Figure 4.18
Flashcard Step 1
33
Figure 4.20
Flashcard Step 3
Figure 4.19
Flashcard Step 4
Figure 4.22
Flashcard Step 6 Figure 4.21
Flashcard Step 5
34
4.2.4 Results
The expected result after releasing the application of Let’s Learn Tayammum using
augmented reality is user should be able to learn the Tayammum in interactive ways
and more fun where the 3D model will appear when user scan the flashcards. The user
can see the visualization of every step of tayammum with some animation and audio
recitation. The benefit of Let’s Learn Tayammum using AR application is it does not
use internet connection to make the model appear. Besides that, the developer also
expected that the application could function well and fulfill the user requirement
standard as testing had been done for this application.
4.2.5 Summary
Generally, developer has showed the interface that developed for the Let’sLearn
Tayammum Using AR application. testing phase has been done by the developer by
testing the functionality of the application. This phase is vital because this can help to
optimize the application for having errors. If there are errors it can be identifying, and
the developer fixed to improve functionality of the application after testing the app. The
application will repeatedly to be tested to minimize errors. Finally, it is important to
ensure the implementation process run well so that when we test the project, the output
from the project will be as expected.
35
CHAPTER 5
CONCLUSION
5.1 Introduction
In this chapter, we will discuss about the contributions, problems and limitation of Let’s
Learn Tayammum Using Augmented Reality during the project development as well as
the future work in order to improve the application will be discussed.
5.2 Project Contribution
Let's Learn Tayammum Using AR developed based on MDLC method mainly aims to
helps kids learning tayammum interactively using application Let’s Learn Tayammum
Using AR by flashcards. Besides, there are implementation of animation and audio in
the application to make kids more interested to use the application. User also can play
quizzes in the application. Meanwhile, this application also aimed to give the user
exposure and education about AR technology.
5.3 Project Problems and Limitation
The major problem and limitation during the project development are to find solution
to stabilize the animation process and to ensure the step for tayammum are correctly
done. The problem occurs when the animations that has been done in Maya software
can not be export to unity. In addition, the texture from maya software also missing
when imported to unity software. Moreover, the objects target are hardly appear when
36
image target has been direct to the device’s camera. Besides, the limitations in this
project are the application only applicable for Android platform only.
5.4 Future Work
Although the application operates in properly and follow the milestone respectively,
there exist some changes that can be taken for better performance. The constraint as
described before this can be corrected and improve the application's quality for the
future. Let's Learn Tayammum Using AR application still has a lot that can improvise.
There are some suggestion that can be made in order to upgrade the application to be
more efficient and effective in future. The suggestion are make to make the animation
more smooth, use different sound and increase the information about tayammum in the
application. Then, I hope this application will be very useful for kids to learn tayammum
and for teachers and parents to keep their kids learning tayammum.
5.5 Summary
Finally, Let’s Learn Tayammum Using AR will help kids to learn in interactive way
and more fun. This application with AR features developed purposely for kids to learn
about tayammum in interactive way. The method of MDLC model has been used in
order to make this development workflow going well and give the expected outcome.
Also, the framework and user interface design that included in this report can be a
guideline for the user to use this application.
37
REFERENCES
1) Dewi, S. P., Astuti, I. P., Buntoro, G. A., Widaningrum, I., & Yusuf, A. R.
(2020). Android based learning application for Wudhu and Tayamum using
augmented reality technology. Journal of Physics: Conference Series, 1517(1).
2) Bacca, J., Baldiris, S., Fabregat, R., Graf, S., & Kinshuk. (2014). International
Forum of Educational Technology & Society Augmented Reality Trends in
Education : A Systematic Review of Research and Applications. Educational
Technology, 17(4), 133–149.
3) Izanee, H. (2020). Analisis Aplikasi Mudah Alih Pendidikan Islam untuk Kanak-
Kanak di Google Playstore. November 2019
4) Khan, T., Johnston, K., & Ophoff, J. (2019). The Impact of an Augmented
Reality Application on Learning Motivation of Students. Advances in Human-
Computer Interaction, 2019.
5) Jasmi, K. A., Ilias, M. F., Tamuri, A. H., & Hamzah, M. I. M. (2011). Amalan
penggunaan bahan bantu mengajar dalam kalangan guru cemerlang
pendidikan Islam sekolah menengah di Malaysia. Journal of Islamic and Arabic
Education, 3(1), 59-74.
6) Maulidio, H., & Susanto, G. (2019). Aplikasi Pembelajaran Untuk Anak Dengan
Teknologi Augmented Reality (AR) Pada Buku Panduan Wudhu Berbasis
Mobile Android. Semnas SENASTEK Unikama 2019, 2.
7) Maulana, K. (2020). Perancangan Aplikasi Android Simulasi Tata Cara
Pengambilan Wudhu Dengan Metode Augmented Reality (Doctoral
dissertation, Universitas Dinamika Bangsa).
38
APPENDICES
APPENDIX 1 GANTT CHART FYP1
Week
Task
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Topic
discussion&
determination
Discuss and
determine a
project to be
proposed with
supervisor
Project title
proposal
Writing
proposal
(Introduction)
Literature
Review
Proposal
Progress
Presentation &
Panel’s
Evaluation
Writing
Proposal
(Methodology)
Proof of
Concept
Drafting report
proposal
Submit draft
report to
supervisor
Final report
submission
Final
presentation and
panel’s
evaluation
Final report
submission &
supervisor’s
evaluation
39
APPENDIX 2 GANTT CHART FYP 2
Week
Task
1 2 3 4 5 6 7 8 9 10 11 12 13 14
Project meeting
with supervisor
Project
Development
Progress
Presentation and
Panel’s
Evaluation
Project
Development
Project Testing
Final Year
Project Format
Writing
Workshop
Project Testing
Submission Draft
Report and
Documentation
Submission of
Digital Poster and
Preaparation for
Final
Presentation
Final presentation
and panel’s
evaluation
Final report
submission &
supervisor’s
evaluation
40
APPENDIX 3 DIGITAL PROJECT POSTER