LEARNING HIJAI’YAH ALPHABET WITH

AUGMENTED REALITY (AR)

AHMAD JAVAD RIDHA BIN MOHD YASIN

BACHELOR OF INFORMATION TECHNOLOGY

(INFORMATIC MEDIA) WITH HONOURS

FACULTY OF INFORMATICS AND COMPUTING

UNIVERSITY SULTAN ZAINAL ABIDIN

2019

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 Universiti Sultan Zainal

Abidin or other institutions.

___________________________________

Name: Ahmad Javad Ridha Bin Mohd Yasin

Date: 16 May 2019

i

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, Dr Nur Saadah Binti Mohd

Shapri because with the advice, guidance, and the thoughtful ideas given to me the

opportunity to prepare this report successfully.

In addition, 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 encouraged me and

motivated me to prepare for this report.

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 to all the efforts that have been given in completing this

report.

Thank you

ii

ABSTRACT

The Learning Hijai’yah Alphabet with Augmented Reality (AR)is developed for the

pre-school and kindergarten-level children to make learning more effective compared

to existing learning method. This app is developed with Augmented Reality (AR)

technology as the new century method replacing the traditional and old-school method.

This app may be able to help children to learn the Hijai’yah Alphabet interactively and

with the feature provided in the app will attractively make learning fun and enjoyable .

Additionally, this app uses interactive 3-dimensional objects, sound and display info so

that children are interested in using this application. At the end, I hope this app can help

the learning process especially to the pre-school and kindergarten-level children.

iii

ABSTRAK

Projek Pembelajaran Abjad Hijaiyyah dengan Augmented Reality dibangunkan untuk

kanak-kanak pra-sekolah bagi menjadikan pembelajaran yang lebih berkesan

berbanding kaedah pembelajaran sedia ada. Aplikasi yang dibangunkan ini

menggunakan teknologi augmented reality sebagai kaedah pembelajaran alaf baru

menggantikan kaedah tradisional. Aplikasi ini dapat menolong kanak-kanak untuk

mempelajari abjad hijaiyah dengan lebih interaktif dan lebih menarik. Tambahan lagi,

aplikasi ini menggunakan interaksi objek 3-dimensi, bunyi dan paparan maklumat

supaya kanak-kanak lebih tertarik. Diharapkan dengan terhasilnya aplikasi ini dapat

membantu pembelajaran terutamanya kepada kanak-kank pra-sekalah

iv

CONFIRMATION

This is to confirm that:

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

___________________________________

Name: Dr Nur Saadah Binti Mohd Shapri

Date: 16 May 2019

v

CONTENTS

PAGE

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

DEDICATION ................................................................................................... ii

ABSTRACT ................................................................................................... iii

ABSTRAK ................................................................................................... iv

CONFIRMATION ................................................................................................... v

CONTENTS ................................................................................................... vi

LIST OF TABLES ................................................................................................... ix

LIST OF FIGURES ................................................................................................... x

CHAPTER I INTRODUCTION

1.1 INTRODUCTION……………………………………………………………... 1

1.2 PROJECT BACKGROUND………………………………………………….. 2

.13 PROBLEM STATEMENT…………………………………………………… 3

.14 OBJECTIVES…………………………………………………………………. 3

1.5 SCOPES………………………………………………………………………... 4

1.5.1 USER………………………………………………………………………….... 4

1.5.2 APPLICATION………………………………………………………………... 4

1.6 LIMITATION OF WORK……………………………………………………. 5

1.7 EXPECTED RESULT……………………………………………………….... 5

1.8 ACTIVITIES AND MILESTONES………………………………………….. 6

vi

CHAPTER II LITERATURE RIVIEW

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

2.2 RELATED PRODUCT…………………………...………………… 8

2.2.1 AR FLASHCARDS ANIMAL-ALPHABET - AR FLASHCARD.. 8

2.2.2 ALPHABET SPACE PHOTOSHOOT…………………………….. 9

2.2.3 ARABIC ALPHABET BOARD BOOK FOR KIDS!........................ 10

2.2.4 THE AR ALPHABET BOOK PROYOTYPE……………………… 11

2.3 COMPARISON OF MULTIMEDIA ELEMENT…….…………… 12

2.4 SUMMARY……………………….………………………………...... 12

CHAPTER III METHODOLOGY

3.1 INTRODUCTION…………………………………………………………… 13

3.2 METHODOLOGY MODEL………………………………………………... 14

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

3.2.2 DESIGN PHASE…………………………………………………………….. 15

3.2.3 DEVELOPMENT PHASE………………………………………………...... 15

3.2.4 IMPLEMENTATION PHASE……………………………………………... 16

3.2.5 EVALUATION PHASE…………………………………………………….. 16

3.3 HARDWARE AND SOFTWARE REQUIREMENT…………………….. 17

3.3.1 HARDWARE REQUIREMENT…………………………………………… 17

3.3.2 SOFTWARE REQUIREMENT……………………………………………. 18

3.4 DEVELOPMENT METHODOLOGY…………………………………….. 18

3.4.1 ANALYSIS PHASE…………………………………………………………. 18

3.4 DESIGN PHASE…………………………………………………………….. 21

vii

3.5.1 CONCEPTUAL MODEL………………………………………………….... 21

3.5.2 FLOWCHART………………………………………………………………. 23

3.5.3 STORYBOARD……………………………………………………………… 25

3.5.3.1 LOADING PAGE……………………………………………………….…... 25

3.5.3.2 HOME PAGE………………………………………………………………... 26

3.5.3.3 CREDIT PAGE……………………………………………………………… 27

3.5.3.4 AR CAMERA PAGE………………………………………………………... 28

3.6 SUMMARY…………………………………………………………………... 28

CHAPTER IV IMPLEMENTATION AND TESTING

4.1 INTRODUCTION…………………………………………………………… 29

4.2 IMPLEMENTATION ………………………………………………………… 30

4.3 LEARNING HIJAIYAH WITH AR APPLICATION SCENE…………... 30

4.3.1 LOADING SCENE………………………………………………………….. 30

4.3.2 HOME SCENE………………………………………………………………. 31

4.3.3 CREDIT SCENE………………………………………………...…………... 31

4.3.4 AR CAMERA SCENE…………………………………………………….. 32

4.4 AR MARKER…………………………………………………………….….. 32

4.5 TESTING…………..………………………………………………………… 38

4.3.1 FLASHCARD TESTING………………………………………………...…. 39

4.6 CONCLUSION……………………………………………………………..... 44

viii

CHAPTER V CONCLUSION

5.1 INTRODUCTION…………………………………………………………… 45

5.2 PROJECT CONTRIBUTION……………………………………………… 45

5.3 PROBLEM AND LIMITATION…………………………………………… 46

5.4 FUTURE WORK…………………………………………………………… 46

5.5 CONCLUSION………………………………………………………………. 46

REFERENCES………………………………………………………………. 47

LIST OF TABLES

TABLES TITLE PAGE

1.8 Activities and Milestone ………………………………………………………... 6

2.1 Advantages and Drawback ……………………………………………….…….. 8

2.2 Advantages and Drawback ……………………………...……………………… 9

2.3 Advantages and Drawback ……………………………………………………... 10

2.4 Advantages and Drawback ……………………………………………………... 11

2.5 Comparison table of the existing products with 5 element of multimedia……… 12

4.1 AR Marker Table 33

4.2 Flashcard Testing Table 39

ix

LIST OF FIGURES

TABLES TITLE PAGE

2.1: AR Flashcards Animal-Alphabet - AR Flashcards……………………………... 8

2.2 : Alphabet Space Photoshoot……………………………………………………. 9

2.3: Alif Baa Taa: An Arabic Alphabet Board Book for Kids………………………. 10

2.4 The AR Alphabet Book Prototype……………………………………………… 11

3.1 ADDIE Model…………………………………………………………………... 14

3.2.. Content of Flashcards Pictures AR……………………………………………... 19

3.3 Analysis Phases…………………………………………………………………. 20

3.4.. Conceptual Model of The Application AR……………………………………... 22

3.5 Flowchart of Flashcards Pictures AR…………………………………………… 24

3.6 Loading page……………………………………………………………………. 25

3.7 Home Page………………………………………………………..…………….. 26

3.8 Credit Page…………………………………………….………………………... 27

3.9 AR Camera Page………………………………………………………………... 28

4.1 Loading Scene…………………………………………………………………... 30

4.2 Home Scene…………………………………………………………………… 31

4.3 Credit Scene…………………………………………………………………….. 31

4.4 AR Camera Scene……………………………………………………………… 32

x

CHAPTER 1

PROJECT INTRODUCTION

1.1 Introduction

This section is the introduction to the report for developed application. It will

provide a basic overview of the whole app. This chapter presents about the project

background, problem statement objectives, scope and project planning.

Background of the application 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 system and what the user can do.

1

1.2 Project Background

Augmented Reality (AR) is a type of interactive, reality based display

environment that takes the capabilities of computer generated display, sound, text and

effects to enhance the user’s real-world experience. Augmented reality combines real

and computer-based scenes and images to deliver a unified but enhanced view of the

world. Augmented reality has many different implementation models and applications,

but its primary objective is to provide a rich audiovisual experience. AR works by

employing computerized simulation and techniques such as image and speech

recognition, animation, head-mounted and hand-held devices and powered display

environments to add a virtual display on top of real images and surroundings.

The flash card containing illustrative objects with words to help develop a child's

mind to recognize objects and pronounce words appropriately. This flash card it suitable

for kindergarten-level children as the reference for learning. The children over 2 years

also can read this book. This book has interesting and colorful pictures for children as

well. This app has 2 languages, namely Malay, and Arabic.

For this application, I am developing the application using the AR technology in

The Flash Card. This flash card contains animal and object as model included with every

alphabet characters

2

1.3 Problem Statement

Currently, children nowadays are currently too much open with the technology

so they may not interest too much for reading simple plain book beside they will feel

bored with it. Besides that, the children should learn to speak a word in the flash card.

Fortunately, this can be dealt with the problem because this way of education have a

sound that can give attraction to them. It will difficult to them if no one has teach them

to speak correctly word of an object in picture dictionary.

1.4 Objectives

There are a few purposes in developing the Augmented Reality for Learning

Arabic Alphabet which is: -

1. To study the technology augmented reality can use in flash card

2. To design and develop flash card and mobile application that enable users to

learn with augmented reality technology and also 3D model.

3. To evaluate function augmented reality of flashcards picture and mobile

application that will be create can be use smoothly by the user on the android

platform and provide beneficial to the user

3

1.5 Scopes

The scopes for this project are identified to make the application development

process easier. The scope is divided into two, which are application scope and user

scope admin

1.5.1 User

The Admin can make maintenance on the application and update a new

version. Besides that, the admin able to view the responses to the

feedback which comes from the users.

The Children is the main user for this application children age around

3-6 year are the main focus

1.5.2 Application

Augmented reality technology integrated in mobile application for

smartphone

Featuring 3D model model character and object

4

1.6 Limitation of work

There are several limitations and constraint that occurred throughout the development

of this flash card picture. These problems and limitations in conducting this study are:

1. The users need a smartphone to start playing the augmented reality.

2. Only android user can use this application.

3. This application needs special marker in order to make it work

1.7 Expected Result

The expected result following the development of the proposed project as follows:

1. The user can choose any picture of object for pop up 3D animation.

2. Augmented reality with good interface in this application.

User able press button sound for pop up a word with 2 option language which is Malay

or Arabic

5

1.8 Activities, Milestones (Gantt Chart)

Table 1 Gantt chart

6

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. Among the information referred to from the literary study include theories,

designs, instrumentation studies, study procedures, methods of data collection and

research findings. The main purpose of the literacy study is to put the study to be

conducted on a scientific perspective.

7

2.2 Related Products

2.2.1 AR Flashcards Animal-Alphabet - AR Flashcards

The AR Flashcards Animal-Alphabet - AR Flashcards was developed by Peak Reality

in 2013. Refer figure 2.1 The app uses iOS and android devices and does not use full internet

connection to access. There are advantages and drawback to the application

Figure 2.1: AR Flashcards Animal-Alphabet - AR Flashcards

Platform Advantages Drawback

• Printed

• Apple and IOS

device

• AR technology

• Have multimedia

element

• No animation

• Visual and sound

only

Table 2.1 Advantages and Drawback

8

2.2.2 Alphabet Space Photoshoot

The game Alphabet Space Photoshootwas developed by Education.com. Refer

Figure The app uses website based and use full internet connection to access. There are

advantages and drawback to the application

:

Figure 2.2 Alphabet Space Photoshoot

Platform Advantages Drawback

• Website

• Contain game

• Need internet connection

• Only contain visual element

Table 2.2 Advantages and Drawback

9

2.2.3 Alif Baa Taa: An Arabic Alphabet Board Book for Kids!

Alif Baa Taa, Learning My Arabic Alphabet Refer Figure 2.3 is a

children’s book geared towards introducing the Arabic alphabet, with beautiful,

modern illustrations in fus-ha Arabic with Tashkeel. The 6x6 inch 30 page board

book will feature a different letter on each page, with a modern corresponding

illustration, the word in Arabic and the transliteration. There are advantages and

drawback to the product

Figure 2.3: Alif Baa Taa: An Arabic Alphabet Board Book for Kids!

Platform Advantages Drawback

• Printed • Easily

accessible

• No multimedia element

Table 2.3 Advantages and Drawback

10

2.2.4 The AR Alphabet Book Prototype

The AR Alphabet Book was created to enhance existing alphabet learning by

utilizing an AR technology. ARToolkit software was used to develop the AR Alphabet

application. Figure 2.4 shows the setup of the AR Alphabet Book. To view the virtual

models, the user need a webcam to capture video image of the real world as well as the

markers and a computer monitor to display the virtual model viewed as overlaid over

the pattern markers. Once the AR application is started, based on the instruction given

users can use the pattern markers to display virtual objects.

Figure 2.4 The AR Alphabet Book Prototype

Platform Advantages Drawback

• computer • AR

Technology

• Hardware requirement

• No multimedia element

Table 2.4 Advantages and Drawback

11

2.3 Comparison table of the existing products with 5 element of multimedia:

Product Text Image Video Audio Animation

AR Flashcards

Animal-Alphabet -

AR Flashcards

Alphabet Space

Photoshot

Alif Baa Taa: An

Arabic Alphabet

Board Book for Kids!

The AR Alphabet

Book Prototype

Table 2.5 Comparison table of the existing products with 5 element of multimedia

2.4 Summary

In this whole chapter, this chapter discusses a product for learning Arabic to develop

an augmented reality. This chapter also discussed the technique used in the new

system and the technique used in the previous research articles and journal. The

comparison with the previous research is done so that the right choice will be selected.

12

CHAPTER III

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 software development. After the

application has been completely developed. It should be tested for make sure all the

objective of the project achieved.

13

3.2 Methodology Model

The model that I will use this system is ADDIE model. The ADDIE model is

important to understand if a developer want to develop a successful project. The ADDIE

model has five phase and it is acronyms to 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 might 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 is 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. The ADDIE model has five steps processes which is

analysis, design, development, implementation, and evaluation.

14

Figure 3.1 ADDIE Model

3.2.1 Analysis phases

The Analysis phase is the foundation for all other phases of instructional design. 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.

3.2.2 Design Phases

The Design phase involves using the outputs from the Analyse phase to plan a strategy

for developing the instruction. During this phase, I must outline how to reach the

instructional goals determined during the Analyse phase and expand the instructional

foundation. Some of the elements of the Design Phase may include writing a target

population description, conducting learning analysis, writing objectives and test items,

selecting a delivery system, and sequencing the instruction. The outputs of the Design

phase will be the inputs for the Develop phase.

3.2.3 Development phases

The Develop phase builds on both the Analyse and Design phases. 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.

15

3.2.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.

3.2.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 may be Formative or Summative.

Formative Evaluation is on-going during and between phases. The purposes of this type

of evaluation is to improve the instruction before the final version is implemented.

Summative Evaluation usually occurs after the final version of instruction is

implemented. This type of evaluation assesses the overall effectiveness of the

instruction. Data from the Summative Evaluation is often used to make a decision about

the instruction

16

3.3 Hardware and Software Requirements

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.3.1 Hardware requirement

i. Laptop

To create the sketches for the characters, background and create scripts or

documents related to “Mercy”. Also used for on the go coding and 3D

modelling.

Processor : Intel Core i5-2450M CPU @ 2.50GHz

Operating System : Windows 10 Pro – 64 bit

Memory : 4GB RAM

ii. External hard disk

To store the backup file

Storage : 500GB

iv. Printer Canon

To print out the documentation

To print flashcards pictures

v. Android Mobile Phone:

Used to run and testing the application

17

3.3.2 Software requirement

i.Unity3D

Used to create the Virtual Reality app and overall project and animate 3D

characters

ii. Autodesk Maya

Used to create 3D character models

iii. Vuforia

To create augmented reality

v. Adobe Photoshop

Used to create sketches of background, characters and poster

3.4 Development Methodology

3.4.1 Analysis Phase

In this phase, analysis phase need to develop the mobile AR application. The analysis

phase involves are requirement analysis, task analysis and instructional analysis. Then,

the activities involves 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. The mobile AR application is developed learning word of

animal character or everyday object which the content specifically for children age

between 3 to 6 years old.

18

The analysis is also carried out by doing comparison between existing products

that implanted AR technology in their products especially in learning object names. The

comparison of existing dictionary flashcards as depicted in table 1. Through the

analysis, the weaknesses of the existing learning courseware or mobile application can

be identified. All information gathered was used to develop goals and objective of

developing mobile AR application. The software and hardware requirement are also

determined in this phase. The flow of analysis phase is shown in Figure 8.

19

Arabic alphabet using AR technology

Flashcards Picture using

Images

Mobile AR Application: “animal

names in Arabic using AR

technology”

Scan Flashcards Digital Picture

Figure 3.2 Content of Flashcards Pictures AR

20

Analysis Problem

Statement

1. Not interaction

2. Not sound spelling word to

teach them

Objectives 1. To study the AR can use

in flashcards pictures

2. To design and develop

flashcards picture that

enable users can

learning with AR

3. To evaluate function AR

Target

Audience

1. Admin

2. Children

Content

This project included:

1. Flashcards picture

-contain images picture with

pronouns words

-used as a marker for AR

2. Flashcards picture using AR

technology

Strategy

Requireme

nt

1. Use 3D model

2. Augmented reality

technology

1. Hardware

-Unity3D

-Vuforia

-Maya3D

2. Software

-Laptop

-Mobile phone (Android)

Figure 3.3 Analysis Phases

3.5 Design Phase

In design phase, conceptual model, flowchart and storyboard were developed.

The design phase involves the development of the conceptual model for the mobile AR

application which involves the learning theory, the medium and AR technology to be

used in the application; the teaching and learning approach to be implemented and the

components involve in this mobile AR application.

3.5.1 Conceptual Model

The conceptual model is shown in Figure 9 The framework lists the following

components as the important components to be included in the development of mobile

AR application: “Picture Dictionary Inside House AR”. They are:

Teaching and learning approach

Learning theory

Prototype development

21

3.5.2 Flowchart

22

SCAN Prototype

Graphical

Interface TAR Interface

Learning

Theory

Cognitivisme Constructivisme

Teaching and

Learning

Approach

Interactivity in

real time

Intuitive: Hold,

Zoom in, Zoom out,

rotate

Physical area

Physical and digital area

Digital area Text, audio, animation, 2D

graphic, 3D object

AR multi dimension

environment

Visual

literacy

Interface

Multimedia-

Fusion

Figure 3.4 Conceptual Model of The Application AR

3.5.2 Flowchart

Flowchart is a diagram that shows the progress flow of system. The application

starts by providing users to click scan button from homepage. Next, on the main page

the users providing to choose camera button, information button, back button and home

button. The start button is the most important button for this application. This button

will automatically turn on the camera on user’s mobile phone. The scan button will give

the opportunities to the users to choose any image object. The user needs to scan an

image that created on the page using the mobile phone camera. In a few second, a 3D

model will pop out automatically at the mobile phone screen. The users can touch that

3D model at the screen to make its move. Next, the user needs to touch the virtual button

that provided on the page. They can choose Malay or Arabic button to know the names

of the object. Sudden, the 2D image of the name of the object and sound from narrative

speaker will appear on the application. Then, the home button will bring users directly

to the homepage which is making the optional to the users either to click scan or exit

button. The technology used is augmented reality that combined the reality and virtual

environment together to make a learning process become more interesting.

23

Figure 3.5 Flowchart of Flashcards Pictures AR

24

Exit

End

No

Yes

Start

Homepage

SCAN Flashcards

Picture AR

Choose

object 3D model of

object

Yes

Yes

Choose

language

Yes

Name of the

object

3.5.3 Storyboard

Storyboarding is also a part of multimedia design process. The storyboard shows

the look and feel of the application that will be developed. Some of the storyboard

can be seen in picture below

3.5.3.1 Lading page

Figure 3.6 the loading page is the first page user will see when open up the

application, user need to wait for the loading bar to fill up before it go to the home

page automatically

Figure 3.6 Lading page

25

3.5.3.2 Home page

Figure 3.7 the home page is the main page of this app there is 3 button on this page

which is AR Camera button Credit button and Exit button, user can navigate all of the

button assign on this page

Figure 3.7 Home page

26

3.5.3.3 Credit page

Figure 3.8 show credit page, this page have a brief about of the developer of this

project and the supervisor of this project development

Figure 3.8 Credit page

27

3.5.3.4 AR Camera page

Figure 3.9 the AR camera page is main activity of this app this page is where most of

the engagement happen between user and the AR function

Figure 3.9 AR Camera Page

3.6 Summary

Methodology is very important in a system development. It helps to make sure the

system develop 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.

28

CHAPTER IV

IMPLEMENTATION AND TESTING

4.1 Introduction

In this chapter, will be discuss about implementation of the methodology discuss

in previous chapter and testing to obtain result of each implementation. Implementation

are executed to ensure the application is develop according to the main objectives of the

project and fulfill the user requirement. Testing will be executed so that developer will

recognize the defects as soon as possible and repair it immediately. A successful test is

one that can uncover errors

29

4.2 Implementation

The purpose of this phase is to give the effective and efficient delivery of fully

functional application. The purpose of this phase is the effective and effective delivery

of instruction. This project developed and implemented as an android application by

using 3D Unity which is integrated with Vuforia developer to develop design, code,

test, debug and execute the main process of the project. Furthermore, this project use

C# as the programming language for the coding purpose.

4.3 Learning Hijaiyah with AR Application Scene

Figure 4.1 Loading Scene

30

Figure 4.2 Home Scene

Figure 4.3 Credit Scene

31

Figure 4.4 AR Camera Scene

v4.4 AR Marker

A marker or image target can be anything, as long as it has enough unique visual

points. Images with lots of concerns and edges work well. It designed with colorful

element using Adobe Photoshop. The image of object at the center, and the name of the

object so that users can play while spell the name of the object correctly. Besides that,

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

and every marker features. A feature is a sharp, spiked, chiseled detail in the image,

such as the ones present in textured objects. The image analyzer represents features as

small yellow crosses. Increase the number of these details in image, and verify that the

details create a non-repeating pattern. There are 28 marker based as shown on table 4.1.

32

Flashcard Image Marker Feature Marker Detail

Type: Single Image

Status: Active

Target ID: ff614e5a000b43cc88f614a2ebe53917

Augmentable: 4

Added: Apr 23, 2019 00:19

Modified: Apr 23, 2019 00:19

Type: Single Image

Status: Active

Target ID:

1d7b3044b56346bfb0382fa4f2dee230

Augmentable: 4

Added: Apr 23, 2019 00:26

Modified: Apr 23, 2019 00:26

Type: Single Image

Status: Active

Target ID: 4dcb8b855c8b4a5e82b04661d3ad67b1

Augmentable: 4

Added: Apr 23, 2019 00:21

Modified: Apr 23, 2019 00:21

Type: Single Image

Status: Active

Target ID:

6a68ea44a75c4b8789b61c90b06ffb3a

Augmentable: 5

Added: Apr 23, 2019 00:28

Modified: Apr 23, 2019 00:28

Type: Single Image

Status: Active

Target ID:

1e9e988b58be45e4b9ceb5dccbb7a546

Augmentable: 5

Added: Apr 23, 2019 00:34

Modified: Apr 23, 2019 00:34

33

Type: Single Image

Status: Active

Target ID: bdc7140ebd71419084f50a9a9cc32d9a

Augmentable: 4

Added: Apr 23, 2019 00:27

Modified: Apr 23, 2019 00:27

Type: Single Image

Status: Active

Target ID:

a7d6d11a0b1d4e5f8c3f47744f9d8f54

Augmentable: 4

Added: Apr 23, 2019 00:27

Modified: Apr 23, 2019 00:27

Type: Single Image

Status: Active

Target ID: 98f741c81645415fbaa89f0c766e2170

Augmentable: 3

Added: Apr 23, 2019 00:20

Modified: Apr 23, 2019 00:20

Type: Single Image

Status: Active

Target ID:

cd2aa2b6d446463e8484356fbf75e196

Augmentable: 4

Added: Apr 23, 2019 00:24

Modified: Apr 23, 2019 00:24

Type: Single Image

Status: Active

Target ID: 80e742b248db490181cd979221785431

Augmentable: 4

Added: Apr 23, 2019 00:26

Modified: Apr 23, 2019 00:26

34

Type: Single Image

Status: Active

Target ID: 37e0e8c0a0a7451bb008376c30759049

Augmentable: 3

Added: Apr 23, 2019 00:23

Modified: Apr 23, 2019 00:23

Type: Single Image

Status: Active

Target ID:

5165a138f79c4430a78f2f1f9d21d688

Augmentable: 4

Added: Apr 23, 2019 00:25

Modified: Apr 23, 2019 00:25

Type: Single Image

Status: Active

Target ID: 1503305f9a3d4618ad223fa519787b66

Augmentable: 4

Added: Apr 23, 2019 00:27

Modified: Apr 23, 2019 00:27

Type: Single Image

Status: Active

Target ID:

51e528ba25784b77a9baf6aadf6d1589

Augmentable: 5

Added: Apr 23, 2019 01:25

Modified: Apr 23, 2019 01:25

Type: Single Image

Status: Active

Target ID: 9c7d52f0076c4112b302a35cba049720

Augmentable: 4

Added: Apr 23, 2019 00:25

Modified: Apr 23, 2019 00:25

35

Type: Single Image

Status: Active

Target ID: 1dada6f34a264a1d86c2644d1712a847

Augmentable: 3

Added: Apr 23, 2019 00:23

Modified: Apr 23, 2019 00:23

Type: Single Image

Status: Active

Target ID:

1650d61275b44ea4b712611ef223c771

Augmentable: 4

Added: Apr 23, 2019 00:39

Modified: Apr 23, 2019 00:39

Type: Single Image

Status: Active

Target ID: cf8b9002377844a794a5497228adeeaa

Augmentable: 4

Added: Apr 23, 2019 01:21

Modified: Apr 23, 2019 01:21

Type: Single Image

Status: Active

Target ID:

4a2b6cce4f244955a89a7c77c7141575

Augmentable: 3

Added: Apr 23, 2019 00:23

Modified: Apr 23, 2019 00:23

Type: Single Image

Status: Active

Target ID: 44b4c9e051f94b5183ba44219130dae9

Augmentable: 3

Added: Apr 23, 2019 00:24

Modified: Apr 23, 2019 00:24

36

Type: Single Image

Status: Active

Target ID: 83bd501fb6f7420b8ac6e047c1a403af

Augmentable: 4

Added: Apr 23, 2019 00:25

Modified: Apr 23, 2019 00:25

Type: Single Image

Status: Active

Target ID:

11dfb3121ddf4b129c603f3acfea5c25

Augmentable: 5

Added: Apr 23, 2019 00:21

Modified: Apr 23, 2019 00:21

Type: Single Image

Status: Active

Target ID: 9f5a87407e664bc1b4236f70267d4bbb

Augmentable: 5

Added: Apr 23, 2019 00:34

Modified: Apr 23, 2019 00:34

Type: Single Image

Status: Active

Target ID:

0039b01b71844c56b75323ffc703563d

Augmentable: 4

Added: Apr 23, 2019 01:19

Modified: Apr 23, 2019 01:19

Type: Single Image

Status: Active

Target ID: 0a153101527341e19a65bb9136e331c8

Augmentable: 3

Added: Apr 23, 2019 00:28

Modified: Apr 23, 2019 00:28

37

Type: Single Image

Status: Active

Target ID: e1954bdfe9184091b52c0c75f86e10d4

Augmentable: 4

Added: Apr 23, 2019 01:20

Modified: Apr 23, 2019 01:20

Type: Single Image

Status: Active

Target ID:

7846c1dc861144b6b6322fc3550713ba

Augmentable: 3

Added: Apr 23, 2019 00:29

Modified: Apr 23, 2019 00:29

Type: Single Image

Status: Active

Target ID: 6cb17e87fe4c4a0bbaef96e5504deb0d

Augmentable: 4

Added: Apr 23, 2019 00:35

Modified: Apr 23, 2019 00:35

Table 4.1 Marker Detail for Flashcard Image

4.5 Testing

Testing is one of important phase in the development of the project. This phase

works to test the system or application whether it fully function or vice versa. In this

phase there are three type of testing to test the application which are unit testing,

integrate testing and system testing. Unit testing is carry out to verify the functionality

of specific section code. Integration testing is to exposed defect in the application

interfaces and interaction between module.

38.

4.3.1 Flashcard Testing

Table 4.2 show the flashcard testing is a test to determine whether all 3D model

implement with the AR marker is success or not

Flashcard Output Result

Success

Success

Success

Success

39

Success

Success

Success

Success

Success

Success

40

Success

Success

Success

Success

Success

41

Success

Success

Success

Success

Success

42

Success

Success

Success

Success

Success

Success

43

Success

Success

Table 4.2 Flashcard Testing

4.6 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 new user about how can

they use the application. Testing also an important part to ensure that all the

functionality achieved and run smoothly. Maintenance should be carry 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 optimize.

44

CHAPTER V

CONCLUSION

5.1 Introduction

In this chapter, contribution of Learning Hijaiyah with AR, problem and

limitation during project development as well as the future work in order to improve the

application itself will be discuss

5.2 Project Contribution

Learning Hijaiyah with AR developed based on ADDIE method is mainly aim

to give the user to experience the new way of education for children with the

edutaintment concept. Meanwhile, the others aim is to give the user exposure and

education about the AR technology. Furthermore, it is very convenience to use because

user only just need to be download on the playstore and can use them without any

internet connection.

45

5.3 Problem and Limitation

The major problem and limitation during the project development are to find the

way to optimize the application and stabilize the 3D model to ensure it can be reveal

without any failures. Beside

that, the limitation is this application only available on the android platform only.

5.4 Future Work

Learning Hijaiyah with AR still need to be improve a lot but it will take a lot of

time. In the current version of application, it only available for 28 object only, so for

next planning is to add the other object and to add more information and certainly with

much more entertainment. Moreover. this application can also be built by using a new

technique which is marker-less-based technique. By using this technique, user does not

need to find the marker and it can be use anywhere. Another suggestion is to develop

this project in IOS device based on recommendation from user testimony

5.5 Conclusion

Learning Hijaiyah with AR help the target user to gain knowledge in the new

way or experience. ADDIE model has been used in order to make this development

workflow going well and give the expected outcome. The framework and user interface

design that included in this report can also act as guideline for the user to use this

application and also for research in their work.

46

REFERENCES

What is Augmented Reality technology and how does AR work. (2018, October

02). Retrieved from https://thinkmobiles.com/blog/what-isaugmentedreality/

https://www.researchgate.net/publication/318723664_Augmented_Reality_in_Info

rmation_Systems_Research_A_Systematic_Literature_Review

http://arflashcards.com/

Perez, A. C. (2017). New Challenge in Education: Enhancing Student's

Knowledge through Augmented Reality. Augmented Reality, 273 -293.

Sanni Silatanen. (2012). Theory and applications of marker-based Augmented

Reality

47