System Design of Mobile Augmented Book

—Mobile technologies play an increasingly important role in education. Devices such as smart phones and tablets are becoming powerful tools in the hands for e-Learning, m-Learning and ubiquitous learning. In this paper, the authors propose analysis and design software architecture of a mobile augmented book for in-class and out-class learning. The aim is to improve the quality and usefulness of mobile learning by utilizing a physical book and a mobile device. Requirements, roles, and system architecture are discussed in terms of adaptive learning. The system architecture is based on a three-tier model; presentation tier, application logic tier and data tier. The application logic tier is comprised of four main components including 1) Profile/Registration, 2) Content/ Administration, 3) Communication 4) Quiz and 5) Report. The data tier consists of 1) Cloud Service, 2) Media Server and 3) Database. The presentation tier is designed to support all mobile devices--smart phones and tablets and all popular platforms including Android, iOS, Windows phone, Tizen, Ubuntu, Firefox and BlackBerry. JSON and Streaming media are used for the communications between the presentation tier (client devices) and the application logic tier. The data tier consists of 1) repository using cloud service and media server for storing and retrieving digital contents and 2) database for credentials, content descriptions and meta-data.


INTRODUCTION I.
People are now living in the digital age with the growth and adoption of handhelds or mobile devices such as smart phones and tablets. Today, mobile technologies target communications, business and entertainment which have a significant role in modern economies and society worldwide. Mobile technologies play an increasingly important role in education and have impacted almost every field. Mobile devices are becoming powerful tools in the hands for in-class and out-class learning. Students and teachers are already using mobile technologies in diverse contexts for a wide variety of teaching and learning purposes. Results from [1] and [2] revealed that all undergraduate students bring their own mobile devices to college or university, favoring small and portable ones such as smart phones and tablets. Students (82 percent) rated smart phones and tablets as the most important devices for their academic success. Moreover, students say they need the ability to access academic resources on their mobile devices and 67 percent of students' smart phones and tablets are reported to be for academic purposes [2].
Students would like to use mobile devices which are integrated into the classroom to increase learning interaction dynamically through the use of Apps. Furthermore, students suggested the use of mobile devices as classroom tools to supplement lectures with activities that would allow them to work independently on their devices. Moreover, students emphasized the use of these devices to research information during lectures as another possible learning tool [3] and [4].
The rapid development of mobile technologies has attracted the attention of educational researchers. Many studies have investigated the use of mobile learning (mlearning) as a complementary teaching strategy to acquire the highest learning quality and reduce constraints within the learning environment such as time and location [1], [2], [3], [5] and [4].
Learners learn, understand and develop the same lesson at different rates and in different ways. In other words, some of them will learn at a much slower rate than other learners at the same age. This might be due to an intellectual disability. However, such students can store and revise their lessons any time, any number of times and learn at their own pace with m-Learning [5] and [9]. Slow learners need more time to understand any problems or to find out the answers [8]. M-learning on mobile device will give extra time to slow learner students and increase their confidence. Because slow learners need more time to understand the concepts, frequent reviewing on a private device would help them dramatically [9].
Mobile learning or m-Learning is any sort of learning that takes advantage of the learning opportunities offered by mobile technologies. It is considered as a convenient learning tool that is accessible from virtually anywhere and anytime, which provides access to all the different learning materials available. It is also collaborative; sharing is almost instantaneous among everyone using the same content. Mobile learning has been promoted in many countries over the past decades [6]. Many organizations in such countries, who regulate all aspects of the educational system, including compulsory basic education, vocational education, and tertiary education have policies to promote the use of ICTs for new generations of education [7] [8]. They are developing digital contents for mobile devices or m-learning. New interactive contents are being developed to stimulate learner's brains and enhance the learning process. Moreover, the policy called BYOD (Bring Your Own Device) has been promoted to encourage learners to learn on their mobile devices anywhere and anytime. The BYOD model is already causing a major shift in higher education and distance learning by allowing more students to access course materials via mobile technologies [9].

Mobile Learning and Learning Management System A.
Mobile devices as tools for m-learning in education, are able to support pedagogical approaches or strategies including active learning, collaborative learning, blended learning, interactive learning, experiential learning (learn-PAPER SYSTEM DESIGN OF MOBILE AUGMENTED BOOK ing in context), and problem-based learning [10]. Mobile learning also provides a private world for the learners allowing them to learn independently from others. Nowadays, mobile devices are small, light and feature-rich. Therefore, the learners feels free to carry and motivated to learn at anytime anywhere [10].
Mobile technologies provide an opportunity to integrate multimedia learning into books and to make them attractive. The notion of an "augmented book" was proposed with the MagicBook [11] and inspires researchers and educators alike as a means to enhance books with interactive visualizations, animations, 3D graphics, and simulations.
Educators expect that augmented books provide and conduct a better understanding of complex content that can be actively manipulated and explored, and enhance engagement, supporting immersive learning. Learners are able to navigate through the book by turning physical pages and use their mobile devices as learning aids [12].
Reference [13] proposed a concept of modularization and customization to learning systems. In the legacy Learning Management System (LMS) paradigm, "system" was synonymous with a single all-encompassing tool or software application made up of a variety of different internal functions [13]. The modular approach shifts the definition of "system" to mean a collection of interoperable modules or components that comprise a learning platform. A modular approach employs the model of "loosely coupled systems", often used to describe educational organizations, to a technical context. Loosely coupled systems are those whose component parts are responsive to each other, but retain their individual identity. Each part of the system handles their own specialized functionality working together to deliver a learning experience, but each of them is able to be replaced with a new module to support future expansion.

Multimedia Learning and Video-based Learning B.
A cognitive theory of multimedia learning is based on three main assumptions: 1) there are two separate channels (auditory and visual) for processing information; 2) each channel has a limited capacity; and 3) learning is an active process of filtering, selecting, organizing, and integrating information.
The principle of multimedia learning indicates that people learn more deeply from words and pictures than from words alone [14]. In other words, human brains comprehend the combined pictures and text, and that processing leads to more meaningful and memorable learning. This theory proposes three main assumptions when it comes to learning with multimedia.
Mayer [14] proposed that there are two separate channels including auditory and visual for processing information also known as Dual-Coding theory. Learning is an active process of filtering, selecting, organizing, and integrating information based upon prior knowledge. Humans are able to process only a finite amount of information in a channel at a time, and they make sense of incoming information by actively creating mental representations. Mayer's cognitive theory of multimedia learning presents the idea that the brain does not interpret a multimedia presentation of words, pictures, and auditory information in a mutually exclusive event; rather, these elements are selected and organized dynamically to produce logical mental constructs.
Design principles including providing coherent verbal, pictorial information, guiding the learners to select relevant words and images, and reducing the load for a single processing channel are entailed from the theory.
Video-based learning (VBL) has long been used as a learning method in educational classes since the Second World War [15]. It was first used to teach soldiers with a simple video which was a combination of audio and film strips. As a result, the static film strips helped to increase their skills while saving a lot of learning time. Analysis from a researcher [16] revealed that Video-based learning is a rich and powerful model used to improve learning outcomes as well as learner satisfaction. The analysis showed mixed results in terms of learning outcomes in video-based learning environments. There was a tendency that users of video-based learning environments rated interaction and learner satisfaction significantly higher than in traditional classroom environments.

Interaction Framework C.
There are three types of interaction used as a framework to design effective mobile learning experiences including [17]; 1) Learner-Learner Interaction: encourage learners to interact or communicate with each other on the devices; 2) Learner-Instructor Interaction: have learners follow or interact with domain experts using audience polling or interactive quiz to improve in-class experience [18]; and 3) Learner-Content/Context Interaction: create content engaging and relevant to the target group (publishing an eBook book or branching videos on YouTube, for example) and encourage learners to engage with their environment (take pictures of evidence then post it to a social media or sharing channel for other learners). Use mobile devices to enhance reality by QR codes technology [4] [19] and [20].
Three Tier Architecture D.
The main strategies that are used to structure a system convey the organization of a system or software. The software engineers need to design the system architecture for overall at the first phase of design process. The system architecture will directly reflect the sub-system structure. However, it is often the case that the sub-system model includes more detail than the organizational model, and there is not always a simple mapping from sub-systems to organizational structure [21].
A system based on the three-tier architecture is extremely popular in software engineering since it has potential to increase application performance, scalability, flexibility, code reuse, and other benefits. The three-tier architecture separates a system into 3 components based on its functionality [22]; data tier, application logic tier and presentation tier. Each tier is able to have groups of sub-system that provide series of functionalities.
Data tier: manages the physical data on the system persistent storage (Database); storing, retrieving, updating and removing.
Application logic tier: controls the whole system functionality by performing detailed processing and maintaining rules and logic. It is a middle layer connecting and transferring data between data tier and presentation tier. PAPER SYSTEM DESIGN OF MOBILE AUGMENTED BOOK Presentation tier: the top level of the architecture, displays information related to services available on the system. This tier communicates with other tiers by sending event messages from user interface components e.g., button, text, menu and touch screen.
Responsive design is an effective and adaptive approach for web interfaces that solves a lot of design problems caused by the proliferation of new types of mobile devices. Responsive design pages use x and y coordinates on a grid for layout and mathematical percentages for images instead of fixed-width parameters. Using percentages instead of fixed-width parameters and a grid layout creates a more fluid layout that will resize itself to fit the size of the display [23].
Augmented Book Prototype E.  [3] is an integration of a physical book and mobile technology. The researchers decided to employ multimedia as an augmented digital content since people learn better from words and pictures than from words alone and corresponding words and pictures are presented near rather than far from each other on the page or screen [24]. To open an augmented book, learners simply use the camera embedded in their mobile devices scan a QR codes located near the picture on the physical book, then a digital content e.g., a 2D/3D animation or video depending on the content design for the physical book; will be displayed as shown in Fig 1. It allows learners to study at their own pace and learning speed since they can control the mobile augmented book individually. Moreover, the learners are able to communicate to each other and the instructor via the live chat channel provided in the mobile augmented book.
SYSTEM ANALYSIS AND DESIGN III.

A.
The system design and development has been driven by the needs of major components and functionalities of mobile learning and the requirements of users. Although the definition of the term user varies, all software development methods are based on the principle of mobile learning and learning management system. However, we define stakeholders according to their roles and concerns as follows: Instructors/Teachers: Who register and manage (add, update and remove) courses, provide digital contents (animations or videos), QR codes and quizzes for the mobile augmented book. They also help learners via the commu-nication channel including live chat and email. Fig. 1 illustrates the Use Case diagram of Instructors/teachers. Students/Learners: Who use their mobile devices to scan a QR code on the physical book to view digital content when they study, take quiz and view scores. Learners are able to communicate with each other and the instructor via the mobile device. Fig. 2 illustrates the Use Case diagram of students/learners.
Administrators: The administrators are the people in charge of managing and administering the augmented book system. They also assume the role of supervisor in the sense that they enforce the "Terms of use" of the site, and have the right to revoke users privileges by deleting their account and provide support to instructors/learners and manage the system; granting permission for learners/instructors to enroll and use the system. Fig. 3 illustrates the Use Case diagram of administrators.   The logical architecture of the system shown in Fig. 5 is based on three-tier architecture including:-Presentation tier: This tier communicates with other tiers and displays information from the services. Crossplatform mobile application technology and HTML5 CSS JS are implemented for this tier in order to support all available mobile platforms in the current market including Android, iOS, Windows phone, Tizen, Ubuntu, Firefox and BlackBerry.
Application logic tier: Java and PHP, control the application's functionalities and business logic rules of the system.
Data tier: This tier includes the data persistence mechanisms and the data access layer that encapsulates the persistence mechanisms. It includes Database, Media Server and cloud service which are the entities containing all of SQL in the database server and instance objects, such as tables, views, multimedia files and animations used by an application.
This approach supports the incremental development of sub-system and changeable. Components or modules inside the tier are able to be replaced by other equivalent components for future maintenance. Only adjacent layer is affected when new components are added or replaced. Improvement of new graphical environments is flexible since this is able to upgrade only on the client side.

Communication C.
The architecture for a mobile augmented book is a richclient application shown in Fig. 5. The presentation layer is locally deployed on the mobile device of a user. The communication between the presentation layer and the application logic layer needs to cross the system boundaries, which involves wireless network; available both mobile data and Wi-Fi. Communication data are only modified by the application logic tier to ensure the consistency and security of the data. Consistency checking is performed by a central component located in the application tier to detect simultaneous changes to the main objects.
Security must be processed on the server-side located on the application logic because a server application must not rely on the correctness of a client application on a mobile device. Constraints on the valid values of business data should also be checked on the client-side, however, for example when a user has just entered data, to increase the user-friendliness of a system.
One of the key factors that affect the design of an application, particularly a repository system and data communication between the presentation tier and the application logic tier, are the design of data tier infrastructure that handles digital contents for augmented books. Due to the digital content for an augmented book being animation or video which consumes a lot of data transfer over a network and large amounts of storage disk space, the system was designed with accepts of either a media server or cloud service using streaming media for data tier to overcome the mentioned issues.

SYSTEM ARCHITECTURE IV.
This section describes component architecture and the communication as shown in Fig. 6. Profile/Registration A.
The system is comprised of 4 components as follows.
• Profile/Registration Registration: The Online Registration System allows students to register for available courses within the registration period using their mobile device. It also provides students with the option to register courses, without the advisor's prior approval, offered by the institution during the scheduled registration periods. However, those students who have enrolled in the course do not need to register since the enrolled student data from the central server of the institution are automatically imported into the augmented book system at the beginning of each semester.
• Sign in/Authentication Students need to sign in to the system in order to access or use the available services. UserID using Student ID and password are used as the credentials in authentication process. Students are able to enter UserID to their mobile device by either typing or scanning the barcode located on their student's ID card. The credential is sent to the server via a secure channel (HTTPS) to authenticate and identify the student status. When the authentication process is finished, the connection is established then a secure token is sent to the client's mobile device to use in future operations including access to digital contents, completing quizzes, view scores and chat. The token is stored in the mobile device under application sandbox until the user signs out. The client authentication process occurs for each connection established by process. All credentials are checked at each connection between client and server, including the server-to-client notification channel.
• Location-based Tracking This component uses location-based technology to record the locations of client devices. When users access the system, GPS and Cellular based tracking systems embedded in the mobile device sends the latitude and longitude of the current location and the content title being studied PAPER SYSTEM DESIGN OF MOBILE AUGMENTED BOOK to the server. This is to record usage statistics; time, location and contents.

Content/Administration B.
• Content Delivery This module acts as a portal that receives and delivers contents to clients.
When a student accesses a digital content by scanning a QR code on the physical book, a request from the client device is sent to the module, the digital content is then transferred to the client device.
• Download Service The Download Service module is linked to the Content Delivery module which allows students/learners to download digital contents from the system into client devices. The interface module is also designed to reside on client devices. As a result, the users are able to open those contents when they are not connected to the Internet. This service improves the performance of the content delivery network and overcomes Internet traffic bottlenecks, malicious traffic, and heavy user traffic while delivering a variety of data and media downloads quickly and reliably.
• Administration The Administration module allows teachers/instructors to manage courses and digital contents (add, update and remove). The User Interface for the module is based on responsive design creation that employs flexible layouts, flexible images and cascading style sheet media queries.
It is able to detect the client's screen size and orientation and adjust the layout accordingly. The system offers three features, synchronous and asynchronous to support communication and collaboration within subjects and communities including email, chat and social share.
The various communication tools can help manage the sharing of information and promote interactions among members.
• Email Students/learners are able to send an email directly to the teacher/instructor via their mobile devices.
• Chat Chat is a synchronous tool that allows members (students/learners and teachers/instructors) to send real-time massages to each other.
• Social Share Social Share module allows students/learners to share content description, messages, useful links and other contents with their social networks, e.g., Twitter, Facebook, Linkedin, Google+ Pages and more.

Quiz D.
• Quiz Manager This module allows teachers/instructors to manage quiz for the course including add, update, remove and feed each question to the student's devices. The teachers/instructors are able to feed question by question to ensure that all students/learners submit answers. The User Interface for the module is based on responsive design creation that employs flexible layouts, flexible images and cascading style sheet media queries. It is able to detect the client's screen size and orientation and adjust the layout accordingly.
• Synchronization The Synchronization module synchronizes a quiz instance on student/learner devices with a quiz instance on the system controlled by a teacher/instructor. In other words, the module allows teacher/instructor to feed selected question to all students/learner devices. The system accepts a submission only once for each item. After students/learners have submitted their answers, the module marks and record score of each item and chapter.

Report E.
• Summary Report and Detailed Report The Report module provides access to students/learners score records. A report typically consists of two objects; 1) Summary Report for chapter scores and 2) Detailed Report for item scores.
The chapter score object implements the chapter, report and collector interface. It displays a list of scores of each chapter and total score of the course that students/learners have taken.
The item score object implements the item, report and collector interface. It displays the results of quiz items that students/learners have taken.

Repository (Data Tier) F.
• The repository The repository is a mechanism for managing and storing digital contents. It enables client devices retrieve the digital contents at any time. The repository use open standards to ensure that the content they contain is accessible in that it can be searched and retrieved for later use. However, a digital content for augmented book is large. It consumes a lot of data transfer over the network and large amounts of storage disk space. To overcome the issues, the system was designed with accepts of either a media server or cloud service.
• Media Server Media Server for this system is a server capable of serving digital contents to client devices. It is able to run on a local server in a school or an institution. This option is suitable for any school that already owns a web server which has a large capacity and high bandwidth support e.g., media server, virtual private server or dedicated server.
• Cloud service Cloud service is an alternative server suitable for any school that does not have any web servers. Free cloud services such as Onedrive, Google Drive, YouTube, Dropbox and others provide a large space which allows users to store and retrieve digital contents easily at no cost. This is suitable for any school that already has a small web server or shared hosting account.
• Database Database provides an organized mechanism for storing, managing and retrieving data such as quizzes, scores, members, contents relevant to the augmented book system.

Communication G.
The communication between client devices and the system consists of 1) data sending and 2) digital content retrieval. JSON (JavaScript Object Notation) is used when data e.g., quiz, credential, text, content description or other are sent as shown in Fig. 7 since JSON has the same interoperability potential as XML but it consumes less traffic. JSON's structure is intuitive, thus it is easy to parse and map directly to objects in the programming language being processed. However, the system delivers digital content to the client devices by streaming. A client media player embedded in augmented book application is able to start playing the digital content (animation or MP4) before the entire file has been transmitted. With adaptive function of streaming media, a client is configured to automatically adjust the link speed of its network. This means the size of digital content being retrieved is minimized suitable to network speed. Such function allows all clients receive digital content from the system continuously and smoothly. Moreover, students/learners are able to control (pause/backward/ forward) the media player according to their needs.
State machine diagram shown in Fig. 8 illustrates different states and the behaviors of the main object in the system. Once a student/learner has successfully signed in, the state is transferred into showing Dash Board as the main portal view controller waiting for the user activities. The students/learners are able to navigate to use any functions of communication, Scan QR Code to retrieve a digital content then take an interactive quiz and view scores. Physical books have long been used as primary media for education. However, recent advances in mobile and multimedia technologies have promoted human understanding deeply when information is expressed in multimedia rather than in words alone. In this paper, we have proposed the system architecture of the augmented book which is an integration of a physical book and multimedia on mobile technology. The system architecture is based on a three-tier model; presentation tier, application logic tier and data tier. The application logic tier is comprised of four main components as follows 1) Profile/Registration, 2) Content/ Administration, 3) Communication 4) Quiz and 5) Report. The data tier consists of 1) Cloud Service, 2) Media Server and 3) Database. The presentation tier is designed to support all mobile devices i.e. smart phones and tablets and all popular platforms including Android, iOS, Windows phone, Tizen, Ubuntu, Firefox and Black-Bery. JSON and Streaming media are used for the communications between the presentation tier (client devices) and the application logic tier. The data tier consists of 1) repository using cloud service and media server for storing and retrieving digital contents and 2) database for credentials, content description and meta-data.