Embed Size (px)
Citation preview
LEARN WUDU’ FLASHCARD
USING AUGMENTED REALITY
WAN NUR NASIHA BINTI WAN MOHAMMAD GABERAN
BACHELOR OF INFORMATION TECHNOLOGY
(INFORMATICS MEDIA) WITH HONOURS
FACULTY OF INFORMATICS AND COMPUTING
UNIVERSITI SULTAN ZAINAL ABIDIN
JANUARY 2020
i
DECLARATION
I hereby declare that this report is based on my original work except for quotation 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 institution.
NAME: WAN NUR NASIHA BINTI WAN
MOHAMMAD GABERAN
DATE: ………………………………………………………
ii
CONFIRMATION
This is to confirm that:
The research conducted and the writing of this report was under my supervision.
________________________________
NAME: DR. ISMAHAFEZI BIN ISMAIL
DATE : …………………………………..
iii
DEDICATION
I would like to dedicate my project to my beloved mother and father, who have
taught me to be patient and never give up in everything that we did and always told me
to be a hardworking person in every task we did. I would also like to dedicate this to
my friends who have inspired me and give me opinion and motivation to finish this
project. Not forget to my supervisor, Dr. Ismahafezi Bin Ismail and my fellow friends
from Bachelor of Information Technology (Informatic Media) who have help me
through a lot in my journey to finish this project.
iv
ABSTRACT
Nowadays, the use of technology is increasing and expanding in human life. It has
expanded into many fields such as educational and others. The technology used in
education especially in early education for children is to add more knowledge and help
educators to teach more effectively. However, many of school still lacks of the learning
aid tool that help student in their studies. Thus, learning become boring and difficult.
Furthermore, there are still children who abuse the existing technology and cause their
time wasted at home with unfortunate benefits. Therefore, with the appearance of Learn
Wudu’ Flashcard Using Augmented Reality, these children can use technology
properly. The objective of this project was to provide an effective learning aid tool for
student besides providing opportunities for these children to study and use AR
(Augmented Reality) technology in their early age. In addition, this project can also
benefit parents and teachers in teaching children more effectively. A variety of
multimedia elements are provided in this AR Application with the aim of attracting
children to learning. In conclusion, this project can help children learn more effectively
and become part of an IT-savvy child.
.
v
ABSTRAK
Pada masa kini, penggunaan teknologi semakin meningkat dan berkembang dalam
kehidupan manusia. Ia telah berkembang menjadi banyak bidang seperti pendidikan
dan lain-lain. Teknologi yang digunakan dalam pendidikan terutamanya dalam
pendidikan awal untuk kanak-kanak untuk menambah pengetahuan dan membantu
pendidik mengajar dengan lebih berkesan. Walau bagaimanapun, banyak sekolah
kekurangan alat bantuan pembelajaran yang menyebabkan pembelajaran menjadi
membosankan. Selain itu, masih terdapat kanak-kanak yang menyalahgunakan
teknologi yang sedia ada dan menyebabkan masa mereka terbuang di rumah dengan
perkara tidak berfaedah. Oleh itu, dengan kemunculan Flashcard Belajar Wudu
Menggunakan Realiti Terimbuh, kanak-kanak ini boleh menggunakan teknologi dengan
betul. Objektif projek ini adalah untuk menyediakan alat bantuan pembelajaran yang
berkesan untuk kanak-kanak ini mempelajari dan menggunakan teknologi Realiti
Terimbuh pada usia muda mereka. Pelbagai unsur multimedia disediakan dalam
Aplikasi AR ini dengan tujuan menarik kanak-kanak untuk belajar. Kesimpulannya,
projek ini dapat membantu kanak-kanak belajar dengan lebih berkesan dan menjadi
sebahagian daripada anak yang bijak IT.
vi
CONTENTS
PAGE
DECLARATION i
CONFIRMATION ii
DEDICATION iii
ABSTRACT iv
ABSTRAK v
CONTENTS vi-viii
LIST OF TABLE ix
LIST OF FIGURES x-xi
LIST OF ABBREVIATION xii
LIST OF APPENDICES xiii
CHAPTER I INTRODUCTION
1.1 Introduction 1
1.2 Background 2
1.3 Problement Statement 3
1.4 Objectives 4
1.5 Scopes 4
1.6 Activities, Milestones (Gantt Chart) 5
1.7 Limitation of work 5
1.8 Expected Result 6
1.9 Conclusion 6
CHAPTER II LITERATURE REVIEW
2.1 Introduction 7
vii
2.2 Explanation Technology Timeline 8
2.3 Related techniques 9-11
2.3.1 Marked Based 9-10
2.3.2 Markerless
10-
2.4 Related Product 12
2.4.1 AR Medical 12
2.4.2 Wiki Turtle 13
2.4.3 Interactive Book iSolar System AR 13
2.5 Comparison table of existing product 14
2.6 Comparison table of the existing product with
5 elements of multimedia
15
2.7 Conclusion 15
CHAPTER III
METHODOLOGY
3.1 Introduction 16
3.2 Methodology Model 17
3.2.1 Analysis phase 18-19
3.2.2 Design phase 20-27
3.3.3 Development phase 28
3.3.4 Implementation phase 28
3.3.5 Evaluation phase 29-30
3.3 Framework Design 30-31
3.4 Hardware and Software Requirement 31-32
3.5.1 Hardware requirement 31-32
3.5.2 Software requirement 32
3.5 Conclusion 32
CHAPTER IV
IMPLEMENTATION AND TESTING
4.1 Introduction 33
4.2 Implementation 34-45
4.2.1 Main Menu Page 34-35
viii
4.2.2 Scan Page 36
4.2.3 Instruction Page 37
4.2.4 Credit Page 38
4.2.5 Info Page 38
4.2.6 AR Marker 39
4.2.7 3D Model and 3D Animation 40-45
4.3 Testing 45
4.4 Conclusion 45-46
CHAPTER V
CONCLUSION
5.1 Introduction 47
5.2 Project Achievement and Contribution 47-48
5.3 Problem and Limitation 48
5.4 Future Work 48
5.5 Conclusion 49
REFERENCES 50
ix
LIST OF TABLES
TABLE TITTLE
PAGE
1.1 Gantt Chart 5
2.1 Comparison table of existing product 14
2.2 Comparison table of the existing products with 5 elements
of multimedia
15
x
LIST OF FIGURES
FIGURE TITLE PAGE
2.1 Marker-based 10
2.2 Markerless 11
2.3 AR Medical 12
2.4 Wiki Turtle 13
2.5 Interactive Book iSolar System AR 13
3.1 ADDIE Model 17
3.2 Analysis Phases 19
3.3
3.4
3.5
3.6
3.7
3.8
3.9
3.10
3.11
Flashcard 1
Flashcard 2
Flashcard 3
Flashcard 4
Flashcard 5
Flashcard 6
Flashcard 7
Flashcard 8
Flashcard 9
20
21
21
22
22
23
23
24
24
3.12
3.13
3.14
3.15
3.16
3.17
Main Menu
How To Play
Credit
Info Page
Scanner (Before)
Scanner (After)
25
25
26
26
27
27
3.18 Framework Design 30
4.1
4.2
4.3
Main Menu Page
Scan Button
Instruction Button
34
34
35
xi
4.4
4.5
4.6
4.7
4.8
4.9
4.10
4.11
4.12
4.13
4.14
4.15
4.16
4.17
4.18
4.19
4.20
4.21
4.22
4.23
Credit Button
Info Button
Scan Page
Home Button
How to play Page
Back Button
Credit Page
Info Page
Example of marker 1
Example of marker 2
Image target unique visual point
Step 1 (Make Niyyah)
Step 2 (Wash both of hand)
Step 3 (Wash mouth)
Step 4 (Wash face)
Step 5 (Wash lower arms from wrists to elbows)
Step 6 (Wash head)
Step 7 (Wipe ears inside and out)
Step 8 (Wash feets)
Step 9 (Recite du’as after Wudu’)
35
35
36
36
37
37
38
38
39
39
40
41
41
42
42
43
43
44
44
45
xii
LIST OF ABBREVIATIONS/TERMS/SYMBOLS
AR Argumented Reality
3D Three dimensional
FYP Final year project
xiii
LIST OF APPENDICES
APPENDIX TITTLE
PAGE
A Appendix A (Gantt Chart Fyp 1) 51-52
B
C
Appendix A (Gantt Chart Fyp 2)
Project Poster
53
54
1
CHAPTER I
INTRODUCTION
1.1 Introduction
This section is the introduction to the report for developed application. It will
provide a basic overview of the whole application. This chapter will show about the
project background, problem statement objectives, scope and project planning.
Background of the application will discuss about basic information about this
application. Problem statements discuss about related issues of the application.
Objectives state all main goal of this application. The scope shows who are using the
application and what the user can do.
2
1.2 Background
The use of Augmented Reality (AR) in education is increasing every year and
makes the process of learning easier, more eye-catching, and interesting. However, the
use of AR in Islamic Education is still minimal. Therefore, the initiative has be taken so
that Augmented Reality will be used extensively in Islamic Education.
However, the students were less interested in the Islamic Education because of
the way of teaching using book is so boring. Furthermore, most teaching aids based on
digital or electronic, only involve one-way communication and less effective for
students with IQs that differ from ordinary students.
Therefore, teaching aids based on Augmented reality technology was introduced
to enhance student motivation in learning especially for Islamic subjects. Augmented
reality is the integration of digital information with the user's environment in real time.
Unlike virtual reality, which creates a totally artificial environment, augmented reality
uses the existing environment and overlays new information on top of it. The solution
to the problem is with the Learn Wudu’ Flashcard Using Augmented Reality to learn
the basic of Islamic Education how to take wudu’ properly. It is also suitable to be used
as the first home teaching aid tool for children as early as 5 years old because it has
interesting multimedia elements such as animation, image, audio, text and video yet it
is very simple and useful.
3
1.3 Problem Statement
There are various mobile applications of Learn Wudu’ that have been developed
to attract children Islamic Education. But its lacking in lot of aspect. For example, the
application is develop not using Augmented Reality that can attract the users. However,
lot of information still are not available in the application. Besides, it’s does not have
additional features that very interactive and the function is limited. So, this kind of
application is not practical anymore. In this section, the main purpose of problem
statement is to focus the attention of solution to the problems. There are three main
problems currently.
i. Learn using book Is less interactive.
ii. Children are not exposed to more interactive learning aids tool in their
school or home.
iii. The kids do not focus when the teacher make demonstration because at
their age they just want to have fun.
Without the effective learning aid tool, the learning process become less interesting
and difficult to them to understand about the certain topic. As we know an early
exposure through the effective learning aid tool in studies is very important to increase
their interest in a certain subject. Concise descriptions of the issues stated need to be
addressed to deal with the problem.
4
1.4 Objectives
There are the following objectives of Learn Wudu’ Flashcard Using Augmented Reality
are:
I. To study the augmented reality technology to create Learn Wudu’
Flashcard.
II. To design and develop Learn Wudu’ Flashcard that allow users leaning with
augmented reality.
III. To test the functionality of Learn Wudu’ Flashcard using augmented reality.
1.5 Scopes
The scope of this study is divided into:
i. Technology. This card using Augmented Reality technology with 3D modelling
technique using Maya software and unity 3D software to model the character in
the application. For the character illustration in the flashcard is by using adobe
photoshop and adobe Illustrator. 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 AR card include language selection, scanning image
on the card, knows the step by step of how to take Wudu’.
iii. Age. This project age scope is focused on kindergarten student.
5
1.6 Activities, Milestones (Gantt Chart)
Based on the table 1.1 below, show the details of the Gantt chart.
Table 1.1 Gantt Chart
1.7 Limitation of work
A limitation is any aspect that hinders a study and its findings. This Learn Wudu’
Flashcard Using Augmented Reality is limited by three aspect:
i. This Application is applicable only for android user which is not
supported in websites and IOS operating system
ii. This Application implement physical button only for the
interaction between user and the application.
iii. This application needs special marker to make it work.
6
1.8 Expected Result
At the end of the project, the expected outcome of the proposed project
development is as follows:
i. This application providing a complete step by step of how to take wudu’
properly for kindergarten children.
ii. This application as an interactive tool for kids in learning process about
Islamic Education in order to attract their interest toward how take wudu’
properly.
1.9 Conclusion
With the technological advances of today’s increasingly fast-growing, it is hoped
that this project will help to learn for a student to get gain knowledge. I hope that this
mobile application can help student to learn how to take Wudu’ with step by step with
this AR.
7
CHAPTER 2
LITERATURE REVIEW
2.1 Introduction
A literature review is a process of identifying; evaluating and summarizing the
existing body of a complete research that done by a researcher. It can be guideline to
develop a new product so that the new product can provide a better functionality
compared to the existing product. Besides, the research comparison between the current
product and the new developed product is done to overcome the weakness of the current
product.
8
2.2 Explanation Technology Timeline
The beginning of the AR idea was in 1950s when Morton Heilig, a motion
cameraman, believed that cinema as an art that should be able to attract the audience
into the screen. During 1962, Heilig developed his idea model, called in 1955 as "The
Cinema of the Future", known as Sensorama, which existed before digital computing.
(Abrar Omar Alkhamisi, 2013).
Then the first Augmented Reality was first invented by a Professor and Computer
Scientist from Harvard name Ivan Sutherland in 1968. He invented a device that he
called The Sword of Damocles which is a head-mounted display. This device is the first
sort of augmented reality device that being invented by him and his student, Bob
Sproull. (Isberto, Technology News: The History of Augmented Reality, 2018) During
1975 an artificial reality laboratory was established by Myron Krueger. This laboratory
or this video place is an area where user can deal with the virtual elements for the first
time easily.
Hence AR become a field of study in the early of 1990s. The first survey about AR
was conducted by Ronald Azuma in 1997 to introduced the exact meaning of AR
whereas he defined AR as assembling real and virtual environment together while both
of them is being recorded in 3D and interactive in real time. In 2000 the first mobile AR
game was invented by Bruce Thomas. This mobile AR game was displayed during the
International Symposium on Wearable Computers. Subsequently, more AR apps have
been designed primarily with mobile apps. After that, AR Travel Guide was created in
2008. (Abrar Omar Alkhamisi, 2013).
9
2.3 Related techniques
Related techniques refer techniques of Augmented Reality already existing and
used until now. This is example of techniques:
2.3.1 Marker-based
Based on the figure 2.1 below, 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.
Figure 2.1 Marker-based
The marker tracking allows the use of a digital image to identify optical squares
or markers and gauge their relative orientation to the camera itself. The optical square
marker usually consists of a black square within a white box of a predefined size. It is
the black square which is encoded with the ID of the marker. A variety of techniques is
used which decode the marker by cross-matching with it.
10
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.
2.3.2 Markerless
Based on figure 2.2 below, advances in the mobile hardware and software
technologies led to the recent introduction of markerless augmented reality.
Figure 2.2 Markerless
This approach eliminated the need for 3D object tracking systems, overcoming
the interactivity limitations marker-based augmented reality placed on the range of
images encapsulated within the markers. Markerless augmented reality technique
allows the use of any and all parts of the physical environment as the target or base for
the placement of superimposed virtual objects. Markerless AR depends on the natural
features of a surrounding rather than the fiducial identifying markers.
11
What’s more, some markerless systems have the ability to extract and store
information and characteristics about the environments they are used on for later usage.
When used in smartphones and other digital devices, the markerless AR system
typically makes use of the GPS feature in-built in the device in order to locate and
interact with the available augmented reality resources.
2.4 Related Product
Related products refer to application that already exist and used until now. This
is example of application:
2.4.1 AR Medical
Based on figure 2.3 below, AR Flashcards Medical Let you explore organs in
augmented reality technology. You can also touch one of the organs to start an
animation to see how the heart is pounding and the lungs are pumping.
Figure 2.3 AR Medical
12
2.4.2 Wiki Turtle
Based on figure 2.4 below, AR Wiki Turtle Using this simple application, you
can see a turtle that swims around you in AR. Using Wiki Turtle’s Augmented Reality,
you can instantly 3D map your surroundings and place a sea turtle that will swim around
the area.
2.4.3 Interactive Book iSolar System AR
Based on figure 2.5 below, Interactive Book iSolar System AR is a colourful
and informative book, together with the application, allows children to experience how
the solar system works.
Figure 2.4 Wiki Turtle
Figure 2.5 Interactive Book iSolar System AR
13
2.5 Comparison table of existing product
Based on the Table 2.1 below, describes about comparison of the existing
product with technique, method, advantage and disadvantages. We will know the
comparison of each product.
Table 2.1 Comparison table of existing product
Name Technique Advantages Disadvantages
1)AR Medical AR (Marker-
Based)
• Easy to
Learn
• Limited to 6
organs only.
2) Wiki Turtle AR (Markerless) • User-
friendly
interface
• Only one type of
Turtle showed
3) Interactive
Book iSolar
System AR
AR (Marker-
Based)
• The design
of the book
interactive.
• Attractive
augmented
reality
animation.
• There is no planet
label at the 3D
object for each
planet.
• This book is so
complex and
crowded because
too much text.
14
2.6 Comparison table of the existing products with 5 elements of multimedia
The Table 2.2 below describes about comparison of the existing product with
5 element of multimedia such as Text, Image, Video, Audio and Animation. This table
we will know comparison each of product.
Table 2.2 Comparison table of the existing products with 5 elements of multimedia
Product Text Image Video Audio Animation
AR Medical
✓ ✓ ✓ ✓
Wiki Turtle
✓ ✓ ✓ ✓
Interactive
Book iSolar
System AR
✓ ✓ ✓ ✓
2.7 Conclusion
In this whole chapter, this chapter discusses a product that uses a flashcard in
Augmented Reality. The comparison with the previous research is done so that the right
choice will be selected. In this chapter also is need to compare some of a similar project
or application that have develop by other.
15
CHAPTER 3
METHODOLOGY
3.1 Introduction
This chapter will explain the details of methodology being used in this project.
The project methodology should systematically solve all the problems arise in the
system analysis to make sure this project complete and working well. It is an important
step of development since it will guide researcher through application development.
After application has been completely developed. It should be tested for make sure all
the objective of the project achieved.
16
3.2 Methodology Model
The model that I will use this application is ADDIE model. The ADDIE model
is important if a developer want to develop a successful project. Based on figure 3.1
ADDIE Model below, the ADDIE model has five phase acronyms is Analysis, Design,
Development, Implementation, and Evaluation. ADDIE is an extremely effective tool
in training development that addresses instruction. Most employees have a significant
amount of information to learn in order to become more proficient at their jobs.
Therefore, the ADDIE model should be helpful for many in planning a course
of action that would lead to the successful implementation of a project. When dealing
with projects that involve instruction or steps, the approach fits nicely. In order to ensure
effective learning outcomes from augmented reality (AR) education development,
careful planning required before the development process begins. ADDIE Instructional
Design Model is used in this mobile AR application development methodology. The
ADDIE model for instructional system design (ISD) is a basic model that can be applied
to any kind of learning solution and has five steps processes which is analysis, design,
development, implementation, and evaluation.
Figure 3.1 ADDIE Model
ANALYSIS
DESIGN
DEVELOPMENT
IMPLEMENTATION
EVALUATION
17
3.2.1 Analysis phase
The Analysis phase is the foundation for all other phases of instructional
design. Based on figure 3.2 Analysis Phase, during this phase, it must define the
problem, identify the source of the problem and determine possible solutions. The phase
may include specific research techniques such as needs analysis, job analysis and task
analysis. The outputs of this phase often include the instructional goals, and a list of
tasks to be instructed. These outputs will be the inputs for the Design phase. In this
phase, analysis phase needs to develop the mobile AR application. The analysis phase
involves are requirement analysis, task analysis and instructional analysis. Then, the
activities involve are identifying the problem statement, the goals and objectives of the
mobile AR application. This is very important because to developed the users need,
existing knowledge and any other relevant characteristics and also the content of mobile
AR application.
18
Analysis Problem 1. Learn using book Is less interactive.
2. Not have 3D animation.
Objectives
1. To study the augmented reality
technology to create Learn Wudu’
Flashcard.
2. To design and develop Learn Wudu’
Flashcard that allow users leaning with
augmented reality.
3. To test the functionality of Learn
Wudu’ Flashcard using augmented
reality.
Target
Audience
1. Kindergarten Children
Content This project included:
• Learn wudu’ flashcard contains image
of step by step of wudu’s steps.
• Learn wudu’ flashcard using
augmented reality technology.
Strategy
Requirement
1. Use 3D model
2. Augmented reality technology
1. Software
-Unity3D
-Vuforia
-Maya3D
2. Hardware
-Laptop
-Mobile phone (Android)
Figure 3.2 Analysis Phase
19
3.2.2 Design phase
The design phase deals with learning objectives, assessment instruments,
exercises, content, subject matter analysis, and lesson planning and media selection.
The design phase should be systematic and specific. Systematic means a logical, orderly
method of identifying, developing and evaluating a set of planned strategies targeted
for attaining the project’s goals. Specific means each element of the instructional design
plan needs to be executed with attention to details. The developer need make storyboard
book design and application for create a visual map of application. This can help the
developer shape the vision and flow of application.
i. Storyboard Flashcard
Based on the figure 3.3 below, show the flashcard for step 1 in wudu’.
Figure 3.3 Flashcard 1
20
Based on the figure 3.4 below, show the flashcard for step 2 in Wudu’.
Figure 3.4 Flashcard 2
Based on the figure 3.5 below, show the flashcard for step 3 in Wudu’.
Figure 3.5 Flashcard 3
21
Based on the figure 3.6 below, show the flashcard for step 4 in Wudu’.
Figure 3.6 Flashcard 4
Based on the figure 3.7 below, show the flashcard for step 5 in Wudu’.
Figure 3.7 Flashcard 5
22
Based on the figure 3.8 below, show the flashcard for step 6 in Wudu’.
Figure 3.8 Flashcard 6
Based on the figure 3.9 below, show the flashcard for step 7 in Wudu’.
Figure 3.9 Flashcard 7
23
Based on the figure 3.10 below, show the flashcard for step 8 in Wudu’.
Figure 3.10 Flashcard 8
Based on the figure 3.11 below, show the flashcard for step 9 in Wudu’.
Figure 3.11 Flashcard 9
24
ii. Storyboard Application
Based on the figure 3.12 below is the main menu page for the application.
Figure 3.12 Main Menu Page
Based on the figure 3.13 below show the page for How To Play. It shows the
explanation how to use this application.
Figure 3.13 How To Play Page
25
Based on figure 3.14 Credit Page, this page is for thank to who participated toward the
complete this application.
Figure 3.14 Credit Page
Based on figure 3.15 Info Page, this page is the details about the application.
Figure 3.15 Info Page
26
Based on the figure 3.16 below, the user needs to scan a flashcard using a camera.
Figure 3.16 Scanner (Before) Page
Based on the figure 3.17, the object will appear in 3D animation and sound will
automatically play.
Figure 3.17 Scanner (After) Page
27
3.3.3 Development phase
The Development phase builds on both the Analysis and Design phase. The
purpose of this phase is to generate the lesson plans and lesson materials. This phase
will develop the instruction, all media that will be used in the instruction, and any
supporting documentation. This may include hardware and software. During the
development phase, the actual course materials are created. A successful development
phase uses the information collected in the analysis phase and the decisions made in the
design phase.
The Development phase is the actual production and assembly of the materials
that were developed in the design phase. At this point it is important to include whoever
is responsible for which elements, time schedules, and deadlines. In this phase, all steps
in development of the project are collected, prepared, created and ready to be tested. In
the development phase, instructional designers and developers create and assemble
content assets blueprinted in the design phase. In this phase, the designers create
storyboards and graphics. The project is reviewed and revised according to feedback.
In this phase have three stages include pre-production, production and post production.
3.3.4 Implementation phases
The Implementation phase refers to the actual delivery of the instruction,
whether it's classroom-based, lab-based, or computer-based. The purpose of this phase
is the effective and efficient delivery of instruction. This phase must promote the
students 'understanding of material, support the students' mastery of objectives, and
ensure the students' transfer of knowledge from the instructional setting to the job.
28
i) Test Run Project
The developer test runs the project herself. This is to ensure that the project
can be used and is running accordingly.
ii) User Test Run
Developer give to the user to test the project and give the feedback before
the presenting the final product. Criticisms and constructive feedback is
taken to be implemented later on.
3.3.5 Evaluation phases
This phase measures the effectiveness and efficiency of the instruction.
Evaluation should actually occur throughout the entire instructional design process
within phases, between phases, and after implementation. Evaluation phases may be
formative or summative.
i) Debug
a) Identify Errors
After done test run, errors that were found by the users should be
identified. Example, glitches and mistakes should be brought to light for
developer to improve the project while also implementing the feedback
by the alpha and beta testers.
29
b) Find solutions
If once errors have been identified, solutions the error must be done to
solve.
ii) Final product
a) Presentation
The system is ready to be presented and launched for a large audience to
use.
3.4 Framework Design
Figure 3.10 below shows the framework design of Learn Wudu’ Flashcard
Using Augmented Reality. User able to choose any button in this application.
Figure 3.18 Framework design
The users need scan any image object for display 3D object and also press button
for display language sound. For Admin, Admin able to update the application for make
new design. Admin also able view the response feedback. The 3D Unity used to create
30
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. For the
best results,you should aim for targets with 4 or 5 starts.
3.5 Hardware and Software Requirement
This section will show that the all hardware and software that involve in the
development process. All of these elements are important in the process of development
of the system. List of hardware and software are shown as below:
3.5.1 Hardware requirement
i. Laptop Lenovo
• To create the sketches for the characters, background and create scripts and
also used for on the go coding and 3D modelling.
• Processor : AMD A8-6410 APU with AMD Radeon R5 Graphcs 2.00 GHz
• Operating System : Windows 10 Pro – 64 bit
• Memory : 4GB RAM
ii. Mouse
• For make easy task and faster to click when developing project.
iii. Pen drive
• To store the backup file
31
• Storage : 32GB
iv. Printer Canon MP287
• To print out the documentation
• To print picture dictionary
vi. Android Mobile Phone: Xiomi Redmi 7
• Used to run and testing the application
3.5.2 Software requirement
i. Unity3D
• Used to create the Virtual Reality app and overall project and modelling 3D
object
ii. Autodesk Maya
• Used to create 3D object or tool.
• To create augmented reality.
3.6 Conclusion
Methodology is very important in a system development. It helps to make sure
the system developed correctly from phases to phases. In this system, Iterative and
Incremental Model had been chosen as a guide to build system. It also helps to ensure
all the objectives can be achieved. Besides, this chapter also explains the hardware and
software requirements for this system.
32
CHAPTER 4
IMPLEMENTATION AND TESTING
4.1 Introduction
In 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 fulfill the user requirement. Testing
will be executed so that the developer will recognize the defects as soon as possible and
repair it immediately
33
4.2 Implementation
The implementation phase refers to the actual delivery of the instruction. The
purpose of this phase is to give the effective and efficient delivery of a fully functional
application. This project is to develop and implement as an android application by using
the main software by using Unity 3D that integrated with Vuforia. Furthermore, this
project use C# as the programming language for writing script.
4.2.1 Main Menu Page
Based on the Figure 4.1 below show the home page. This page has 4 buttons
which is Scan Button, Instruction Button, Credit Button and Info Button.
Figure 4.1 Main Menu Page
Figure 4.2 Scan Button
34
Figure 4.3 Instruction Button
Figure 4.4 Credit Button
Figure 4.5 Info Button
4.2.2 Scan Page
Figure 4.6 below show the Scan page for user to play and learn the AR used.
User need to get the flashcard which are called as marker. Next, user can scan the image
on the flashcard using AR Camera and the 3D models will pop out automatically on the
mobile phone screen as seen as in figure 4.6. The audio will automatically sound for
each flashcard. It also has two language, as you can see in figure 4.6, there is Bahasa
Melayu Button which to change the sound from English language to Malay language
name as in figure 4.7.
35
Figure 4.6 Scan Page
Figure 4.7 Home Button
36
4.2.3 Instruction Page
Figure 4.9 below show the Instruction Page. This page shows how to use this
application. The user can click the back button to go to Main Menu Page as shown as
in figure 4.10
Figure 4.8 How to play Page
Figure 4.9 Back Button
37
4.2.4 Credit Page
Figure 4.10 below show the Credit Page. This page is a tribute to who
participated toward to complete this application.
Figure 4.10 Credit Page
4.2.5 Info Page
Figure 4.11 below show the Info Page. This page is the details about the application.
Figure 4.11 Info Page
38
4.2.6 AR Marker
Marker or image target can be anything, as long as it has enough unique visual
point. Images with lots of corners and edges will work without any problem. To make
sure either the image is suitable to be used as maker, user must upload the image in
Vuforia Developer that is the website that check whether the image can be used as a
marker or not. Figure 4.12 and Figure 4.13 below show the example of marker that been
used in this application.
Figure 4.12 Example of marker
Figure 4.13 Example of marker
39
Based in Figure 4.14 below shows the image target or marker unique visual point
that automatically generates by the system on the Vuforia Developer website. Vuforia
developer website will give the marker rating whether the marker design suitable or not
to use as the marker. The higher the rating of the marker, it will be easier to detect
through the AR Camera.
Figure 4.14 Image target unique visual point
4.2.7 3D Model and 3D Animation
Augmented Reality is a combination of 2D objects or 3D objects in real 3D
environment and present them into virtual objects in a real time. 3D modeling is the
process of developing a mathematical representation of any surface of an object either
inanimate or living in three dimensions via specialized software. The product is called
as a 3D model. This project created 3D model using Autodesk Maya. When users scan
the marker, the 3D model will appear at the mobile phone screen based on the marker.
40
9 human model 3D have been created by using Autodesk Maya software. Below
are 9 pictures of 3D model that contained in the Learn Wudu’ Flashcard with
Augmented Reality along with its description. In real when scan the flashcard, the
model will show the animation. But below only show the screenshot step by step of take
wudu’ of the animation.
Figure 4.15 Step 1 (Make Niyyah)
Figure 4.16 Step 2 (Wash both of hand)
41
Figure 4.17 Step 3 (Wash mouth)
Figure 4.18 Step 4 (Wash face)
42
Figure 4.19 Step 5 (Wash lower arms from wrist to elbows)
Figure 4.20 Step 6 (Wash head)
43
Figure 4.21 Step 7 (Wipe ears inside and out)
Figure 4.22 Step 8 (Wash feets)
44
Figure 4.23 Step 9 (Recite du’as after Wudu’)
4.3 Testing
Testing is one of an important phase in the development of the project. This
phase to test the system or application whether it fully function or vice versa. There are
three types of testing in this phase to test the application which are unit testing, integrate
testing and system testing. Unit testing is carried out to verify the functionality of a
specific section code. Integration testing is to exposed defect in the application
interfaces and interaction between module.
45
4.4 Conclusion
In this chapter of implementation and testing, it has been described and show
all the user interfaces in the application. It can act as a guide for the new user about how
can they use the application. Testing also an important part to make sure that all the
functionality has been achieve and run smoothly. Maintenance should also be carried
from time to time to check whether there are any bugs detected. This phase will repeat
to ensure the error can be minimized and the application will be optimized.
46
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
Learn Wudu' Flashcards with Augmented Reality enhanced using AR
technology is an interactive flashcard that uses new era technology to help people,
especially students and teachers as another way of teaching and learning. Additionally,
47
users can see the 3D animation of Wudu' step by step. It has achieved the objectives and
scope of this project. Below is the list of the achievement on this project:
I. To study the augmented reality technology to create Learn Wudu’
Flashcard.
II. To design and develop Learn Wudu’ Flashcard that allow users leaning with
augmented reality.
III. To test the functionality of Learn Wudu’ Flashcard using augmented reality.
5.3 Problem and Limitation
The major problem and limitation during the project development are to make
the 3D animation to make sure the movement is same as in the reality and also to
stabilize the 3D model to ensure it can be shown without any failures. Besides that, the
limitation is this application only available on the Android platform only.
5.4 Future Work
Learn Wudu’ Flashcard using Augmented Reality 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 to make a better animation by using
motion capture in order to make the animation more realistic. I hope this application
might be a sell in the market so that teacher and students can learn about herbs with
technology augmented reality.
48
5.5 Conclusion
As a conclusion, Learn Wudu’ Flashcard with Augmented Reality is the
application that focuses of how to take Wudu’ step by step and as another way to learn
for kindergarten student. ADDIE model has been used in this system to analysis, design,
development, implementation and evaluation the suitable category or type of mobile
devices for user’s daily life. The storyboard interface design that included in this report
can also act as a guideline for user to use this system.
49
REFERENCE
Isberto, M. (2018, September 5). Technology News: The History of Augmented Reality.
Retrieved from Colocation America.com:
https://www.colocationamerica.com/blog/history-of-augmented-reality
Abrar Omar Alkhamisi, M. M. (2013). Rise of Augmented Reality: Current and Future.
International Journal of Internet and Distributed Systems, 25-34.
Dewan Bahasa dan Pustaka. (2017). Buku Teks Pendidikan Islam Tahun 1. Kuala
Lumpur:Dewan Bahasa dan Pustaka.
YETi CGI. (2018, 21 August). Wiki Turtle. Retrieved from
https://play.google.com/store/apps/details?id=com.yeticgi.wikitudebeta
Next Reality GmbH. (2018, 29 November). Ar Medical. Retrieved from
https://play.google.com/store/apps/details?id=de.nextreality.medicalcube
Carlton Books. (2015, 23 September). Interactive Book iSolarSystem AR. Retrieved
from https://www.amazon.com/iSolar-System-iExplore-
CarltonBooks/dp/1783120800
Islamic world. (2015, 5 June). Learning Wudu. Retrieved from
https://play.google.com/store/apps/details?id=com.islam.learn.step.by.step.w
udu
50
APPENDIX
APPENDIX A (GANTT CHART FYP 1)
ACTIVITY WEEK
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Topic Discussion
and Determination
Project Title
Proposal
Proposal writing
Proposal writing –
Literature Review
Proposal Progress
Presentation &
Evaluation
Discussion
Correction Proposal
Proposed Solution
Methodology
Proof of Concept
51
Drafting Report of
the Proposal
Submit draft of
report to supervisor
Seminar Presentation
Correction Report
Final Report
Submission
52
APPENDIX B (GANTT CHART FYP 2)
ACTIVITY WEEK
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Project Meeting with
Supervisor
Project Development
Proposal Progress
Presentation &
Evaluation
Project Development
Project Testing
Submit Draft Report
and Documentation
of the project
Seminar Presentation
Discussion &
Correction Report
Final Thesis
Submission
53
APPENDIX C (PROJECT POSTER)
