Hypermedia Driven Application Programming Interface for Learning Object Management

Available online at www.sciencedirect.com Available online at www.sciencedirect.com

ScienceDirect ScienceDirect

Procedia online Computer 00 (2018) 000–000 Available at Science www.sciencedirect.com Procedia Computer Science 00 (2018) 000–000

ScienceDirect

www.elsevier.com/locate/procedia www.elsevier.com/locate/procedia

Procedia Computer Science 135 (2018) 120–127

3rd International Conference on Computer Science and Computational Intelligence 2018 3rd International Conference on Computer Science and Computational Intelligence 2018

Hypermedia Driven Application Programming Interface for Hypermedia Driven Application Programming Interface for Learning Object Management Learning Object Management

Herru Darmadiaa, Suryadiputra Liawatimenabb, Bahtiar Saleh Abbascc, Agung Trisetyarsodd Herru Darmadi , Suryadiputra Liawatimena , Bahtiar Saleh Abbas , Agung Trisetyarso Computer Science Department, School of Computer Science Engineering Department, Faculty of Engineering Computer Science Department, School of Computer Science c b Industrial Engineering Department, BINUS Graduate Program - Doctor Computer Science Computer Engineering Department, Faculty of Engineering c dComputer Science Department, BINUS Graduate Program - Doctor Computer Science Industrial Engineering Department, BINUS Graduate Program - Doctor Computer Science a,b,c,d BinadComputer NusantaraScience University, Jl. KebunBINUS Jeruk Graduate Raya No 27, Kemanggisan, Indonesia Department, Program - Doctor Jakarta, Computer11480, Science a b c d a,b,c,d [email protected], [email protected], [email protected], [email protected] Bina Nusantara University, Jl. Kebun Jeruk Raya No 27, Kemanggisan, Jakarta, 11480, Indonesia a [email protected], [email protected], [email protected], [email protected] a

abComputer

Abstract Abstract The research purpose is to create a hypermedia driven API for learning object management. The research focuses on conception, The research purpose is and to create a hypermedia driven API formanagement learning object management. focuses conception, design, implementation evaluation of the learning object hypermedia API.The Theresearch hypermedia APIonwas designed design, implementation andmodels, evaluation of the learning object hypermedia Themodel hypermedia was designed based on learning object hypermedia concepts, andmanagement related studies. LearningAPI. object can beAPI represented and manipulated as a hypermedia resource. It contains page resources withstudies. text andLearning links to multimedia elements. hypermedia based on learning object models, hypermedia concepts, and related object model can be The represented and manipulated as a hypermedia It contains resources with andaffordance. links to multimedia elements. The API was designed using UMLresource. and represented in page HTML5 because of text its rich The implementation andhypermedia evaluation API designed using in HTML5 its richtoaffordance. The implementation evaluation phasewas were conducted by UML testingand the represented API using three differentbecause client’sof software prove the concept of hypermediaand as the engine of application state forby managing learning objects. resultsclient’s show that the hypermedia API for learning object management is phase were conducted testing the API using threeThe different software to prove the concept of hypermedia as the engine of application state forand managing learning The results show that the hypermedia API for learning object management is accessible, consistent, discoverable by objects. heterogonous client applications. accessible, consistent, and discoverable by heterogonous client applications. © 2018 The Authors. Published by Elsevier Ltd. © 2018 2018 The Authors. Published by Elsevier Elsevier Ltd. © The Authors. by Ltd. This is an open accessPublished article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. Intelligence 2018. Keywords: hypermedia API; HTML5; learning object; content management Keywords: hypermedia API; HTML5; learning object; content management

1. Introduction 1. Introduction The Web API nowadays provides a new ecosystem in the software development [1]. Most of the modern The WebareAPI nowadays provides new ecosystem in the software [1].a Most the modern application connected to these Webaapplication programming interfacesdevelopment (API) to create uniqueofexperience to application are connected to these Web application programming interfaces (API) to create a unique experience to 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) 1877-0509 © 2018 Thearticle Authors. Published by Elsevier Ltd. Selection under responsibility of the 3rdlicense International Conference on Computer Science and Computational Intelligence 2018. This is an and openpeer-review access article under the CC BY-NC-ND (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 1877-0509 © 2018 The Authors. Published by Elsevier Ltd. This is an open access article under the CC BY-NC-ND license (https://creativecommons.org/licenses/by-nc-nd/4.0/) Selection and peer-review under responsibility of the 3rd International Conference on Computer Science and Computational Intelligence 2018. 10.1016/j.procs.2018.08.157

2

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

121

the users. These Web APIs are used in many forms and combination, from authentication, authorization, payment gateway, image processing, artificial intelligence and many more. To match the growth of applications, Web API should be designed and implemented in a scalable and flexible way. In most of the Web APIs do not come with sufficient documentation or specification that the developers and machine needs [2]. To overcome this problem, designer of the Web API needs to know how the hypermedia works, programming for distributed hypermedia environments means that message transfers must carry data with addition information such as metadata and higher-level application flow control options [3]. In hypermedia API, each response returned by the API contains a set of hyperlinks that specify where to access related resources [4], [5]. These hyperlinks are being used to guide the usage of the API, so that the client software doesn’t need to construct URLs for the next requests [5][6]. These hyperlinks are also acts as links to API features that are accessible to the user’s authorization level. These principles will result in a good practice of software design such as decoupling, reusability, and tolerance do evolution that impacts into savings in development and maintenance resources [5], [7], [8]. Hypermedia API have been presented in several works, most of it are integrating legacy systems in organizations to a new Application Programming Interface to provide its service and information to customers, employers, and other parties [9], [10]. REST-style architecture in hypermedia API is well suitable to quickly integrate its legacy systems and offers new highly scalable and secure APIs. These hypermedia APIs define the representation and interactions layer between the legacy systems and all its heterogeneous client applications [9]. In e-learning, learning object is the use of digital document in the e-learning containing both audio-visual media and interactive exercises consequently to create the learning experience. Learning objects are also often referred to by terms such as information object, instructional object, or reusable learning object [11]. These learning objects are created using a software called authoring tools [12], this software that enables author to create and modify content for e-learning production [13], [14]. Learning objects then delivered in via Learning Management Systems (LMS). Learning object can be created in the LMS or outside the LMS using an authoring tools. Learning object repositories encourage the discovery, exchange, and re-use of learning objects. They will be the fundamental first step in knowledge discovery and object exchange; acting as the catalogues of the e-learning era. Dynamic Content Learning Management System provides functionality for flexible and centralized aggregation of content elements to learning units, which allows authors and teachers to collaboratively use and reuse learning resources [15]. There are four main components that a content learning management system should have, they are: an online editor, centralized repository, learning unit assembly, publishing and export. The main goal of this research is to present an approach for creating a hypermedia driven API for learning object management. This paper is organized in the following structure. Section 2 (Methods) provides a recap for theoretical principles and guidelines for learning object management and hypermedia API. Next, section 3 (Design) provides the design of learning object management based on hypermedia API core principles. Then, in section 4 (Result) specifically focus on the implementation and evaluation the hypermedia API and section 5 will show the final conclusion on the findings. 2. Methods There are three steps taken to achieve the purpose of this research. The first step is the conception, learning objects and its contents are modelled as hypermedia resources. Hypermedia is a media to represent information in a non-linear way in a form of text, audio, video, and hyperlinks. This terminology was introduced by Ted Nelson, he mentioned that the hypermedia is an interconnected links [16]. Media type that uses native hypermedia controls can be used by client applications to control the flow of the application itself by activating one or more of these hypermedia elements. Designing the hypermedia API depends on a handful of important standards and technologies. Those are the protocols, message standards, and message content that allows the clients to use the system forward. The most commonly used protocol for transferring content on the Web is HTTP. Multipurpose Internet Mail Extension (MIME) as the media type standard was adopted by the HTTP to support representation of a wide range of data formats. HTTP’s support for serving response representations via media type is a key component in web architecture. Rich message can be served, not just the raw data, but also metadata about the content.

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

122

3

Davis stated fundamental principle in designing hypermedia API are: 1) Resource orientation and addressability: the central entity of a Representational State Transfer (REST) system is a resource. 2) Use of a sufficiently rich uniform interface: once the resource and addressing scheme are defined, then it should have a uniform interface for operation that shared the same semantics to manage those resources [15]. Those operations are the HTTP verbs (Table 1) are GET, PUT, POST, DELETE, PATCH, OPTIONS, and HEAD. 3) Resource representation and media types: the abstraction of the resource itself should be represented in a form of media type, which requires it carry all context for the operation within the request itself (statelessness). 4) Hypermedia as the Engine of Application State: application flow is primarily through navigation of hyperlinks found in the resource representation [17]. State transitions from one resource to another resource must be initiated by the client. For every request sent from the client to the server, the client must provide their credentials within each request. Fielding state that in hypermedia systems, the communication between client and server should be stateless [17]. This means that each request from the client to server must contain all the information necessary to understand the request and cannot take advantage of any stored context on the server. The server does not have to store client sessions; therefore, it increases its resources availability and scalability. Table 1. Operations In the HTTP Uniform Interface. Method

Description

GET

Retrieve a resource representation

HEAD

Retrieve resource headers

OPTIONS

Retrieve the list of verbs supported by this resources

PUT

Replace the resource

DELETE

Delete the resource

PATCH

Update the state of a resource

POST

Resource creation

The next step of the research is to design the hypermedia API. HTML is the most affordance-rich media type for the hypermedia API, because it is a mature and stable technology. Secondly, HTML supports all nine “Hypermedia Factors” or “H-Factors” other than XML or JSON media type. Thirdly, HTML has one of the most ubiquitous client applications available on almost any platform. But HTML also has some drawbacks, HTML still only supports a subset of HTTP method such as GET, HEAD, POST. It doesn’t support PUT and DELETE operations natively, but this can be solved by using JavaScript. HTML affordance-rich messages allow for increased shared understanding. They represent more than raw data passed between client and the API. Additional information about the data such as metadata and semantics are available to the client. This means that the API is an ‘explorable’ systems, where the client can explore and discover resources. Since web browser can render HTML links and forms, defining hypermedia API using HTML allows humans to easily surf the API by browsing. There are also number of libraries capable of parsing HTML, XHTML, and HTML5, this means that HTML can be used in an environment that do not require web browsers. The third step is to implement and evaluate the hypermedia API. The hypermedia API was developed using CGI programming and evaluated using three client software to consume the API. Test case scenario for the API are as follows: 1) Initiate the API by opening an entry point of the system, 2) Conduct the authentication and authorization for the requests, 3) Create new LO resource, 4) Create new Page resource, 4) Modify a Page resource, 5) Remove a Page resource, 6) Modify an LO resource to review state, then to the final state. 7) Retrieve LO resources, 8) Filter LO resources by status of the learning objects. 3. Design Learning object management consist of creation, modification, and deletion of a learning resource. Those processes will be represented using hypermedia in a representational state transfer. There are seven models inside

4

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

123

our system and described using UML Class Diagram in Fig. 1. The resource models are learning object (LO), Page, Theme, Asset, Author, Reviewer, and Administrator [18]. These models will have its own URI and able to modify its state based on HTTP methods. Each of the resources state can be modified by using rules and authorization mechanism. These rules are transparent to the clients, it means that each client can have different state transition mechanism on each resource. But it should be noted that in hypermedia design, clients and servers do not need to share URI patterns. All that is needed is that clients know at least one valid URI and the client and server share the same understanding of the possible hypermedia affordances. The domain state of the learning object management hypermedia API are as follows: 1) Home (LO), this is the initial entry point of the service, it consists of either a list of learning objects created by a specific user or a single learning object record. 2) User, it consists of either a list of users or a single user record. 3) Page, it consists of a list of pages or single page record of a learning object. 3) Theme, consists of available themes or a single theme record. 4) Asset, consist of available assets or a single asset record. The three main resources in the hypermedia API are User, LO, and Page. The User resource are an abstraction of Author, Reviewer, and Administrator. This resource then acts as a proxy to the actual system model. Author and Reviewer resources are created by the Administrator. Each of the User resource can create a new LO or modify the LO resource that has been assigned to them.

Fig. 1. Class Diagram of Learning Object Management Hypermedia API

The LO resource itself has four states, and they are draft, review, final, and obsolete state. This state is described in a UML state diagram in Fig. 2. The first state is when the resource is created by the User, in this draft state the Author can create new Page resource, modify an existing Page, or even removing a Page. The next state is review state, this happens when the Author submits the LO to be reviewed by the Reviewer. In this state, Author is still able to create and modify Page resources. The next state is final state, this happens when the Reviewer approves the LO. In this state, the Page resources in LO is in immutable state. The last state is obsolete, this happens if the Reviewer changes the status of the LO into obsolete. In this state transition, the system will create a replication of the LO resource and give it a latest version number with new Author assignment if needed. HTML was chosen as the media type for representing hypermedia API. Fig. 3 shows a single representation of LO resource, it consists of HTML element structure that describe the resource data, and actions. This resource shows that the state of LO is draft. This resource also provides us the state transition control (HTML form element) to change the state towards new state in this case is the review state. There are other state transition controls such as transitioning to Page resources, LO result/output resource, author resource, reviewer resource, review resource, theme resource, and the LO resource itself.

Fig. 2. LO Resource State Diagram

124

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

5

State transitions in the learning object management hypermedia API are designed as follow: 1) Add, which adds a new record to the system. Applies to the LO, User, Page, Theme, and Asset states. 2) Assign, which assign a User as an Author or Reviewer to an LO. Applies to the User and LO states. 3) Filter, which retrieve a filtered list of resources. Applies to the LO, User, Page, and Asset assets. 4) Read, which retrieve an existing resource. Applies to the LO, User, Page, Theme, and Asset states. 5) Remove, which remove an existing resource from the system. Applies to the User, Page, and Asset states. 7) Update, which modify the state of an existing resource. Applied to LO, User, Page, Theme, and Asset states.

Fig. 3. Single LO Resource Representation with State Transition Control

Since HTML is a domain-agnostic media type, designers can use HTML attributes are used to describe domain semantic meaning of each elements in the resource representation. Those attributes are: 1) ID attribute, it is being used to identify a unique block data element within the representation. 2) Class attribute, it is being used to identify a repeating block data element within the representation. 3) Rel attribute, it is being used to identify a relation of a state towards another state in transition. 4) Name attribute, it is being used to identify state transition elements (i.e. form input) within the representation. Resource identification is a URLs generated by the hypermedia API from the root path of the web-accessible site. The resource identifiers are conforming with the URI format, consisting of a scheme, authoring, path, query, and fragment. The client software will just have to know the root path of the API, and then these URLs will be served in hyperlinks inside a HTML resource representation. 4. Results Learning object management hypermedia API will be divided into several tiers, they are application, database, and storage. Application tier is implemented in a web server with PHP 5.6 as the runtime platform. For the database service, it is implemented in MariaDB as the database engine, and the storage services is implemented in a web server. The hypermedia API is implemented using PHP 5.6. At its core, the main function that routes each request (HTTP methods POST, PUT, DELETE, GET) is abstracted in a remap function shown in Fig. 4. Each hypermedia resource is then inherited these functions and can overrides each of these functions. To access hypermedia API resources, the client should conduct authentication and authorization using basic HTTP authentication scheme in a secure HTTPS connection.

6

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

125

The evaluation of the hypermedia API was conducted using three client applications, the first one is using web browser, the second one is using Postman app, and the third one is using a custom hand-built authoring tool application. The goal of this evaluation is to test the API discoverability as promised. The client should be able to explore through the resources and modify those resources using state transitions.

Fig. 4. Remap Algorithm implemented in PHP for a Hypermedia API Resource

Fig 5. Hypermedia API Resource Representation in Plain Old Static HTML

Test case scenario for the API are as follows: 1) Initiate the API by opening an entry point of the system, 2) Conduct the authorization for the requests, 3) Create new LO resource, 4) Create new Page resource, 4) Modify a Page resource, 5) Remove a Page resource, 6) Modify an LO resource to review state, then to the final state. 7) Retrieve LO resources, 8) Filter LO resources by status of the learning objects. As was already mentioned, using HTML as the base media type for representation means that the implementation will just run within common web browsers. In the initial request, we open the API endpoint URL in the web browser. The web browser will prompt the user for authentication before accessing the resource. Next, the API will

126

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

7

validate the authentication and authorize the user credentials. If the user is authenticated and authorized, then the API returns the initial resource representation which is the list of learning objects related to that user in a plain old semantic HTML, shown in Fig. 5. But if the authentication process failed, the API will return HTTP 401 unauthorized response and unable to access the resource [19]. To create new LO resource, the user can navigate to create LO hyperlink. The create LO resource represents the state transition in form elements such as inputs, selection, and button. After all the required form elements are submitted, the hypermedia API will show the new LO resource. The result of the test shows that user can navigate or conduct state transition to the next resource using the hyperlinks or form controls. Postman app is a GUI software to test Web APIs. In the initial request, we choose the HTTP GET method and input the API endpoint URL in the Postman app. The next step is to fill in the authorization type as basic with username and password that has been registered in the API (Fig. 6). To create new LO resource, navigate to create LO hyperlink and fill in the form element. The result shows, that the client can navigate the hypermedia API through hyperlinks and form controls, it shows that the hypermedia API usage is consistent.

Fig 6. Hypermedia API Resource Representation in HTML using Postman GUI

In the last evaluation, Darmadi and Liawatimena created a custom hand-made authoring tool that utilizes the hypermedia API [20]. Authoring tool is a web-based application to manage learning objects. It acts as a proxy between the user and the hypermedia API. The user will use the authoring tool as the GUI (Fig. 7) to navigate the hypermedia API. The result shows, that the client can navigate the hypermedia API through the authoring tool that acts as a proxy.

Fig 7. Custom Hand-made Authoring Tool that Utilizes Hypermedia API

8

Herru Darmadi et al. / Procedia Computer Science 135 (2018) 120–127 Author name / Procedia Computer Science 00 (2018) 000–000

127

5. Conclusion In this paper, we presented the conception, design, and implementation of the learning object management system that utilizes hypermedia API. The goal is to expose the functionality of the system using API through resources, hyperlinks, and state transitions. The client should be able to explore through the resources and modify those resources using state transitions. In the implementation and evaluation phase, we conduct the evaluation using three clients’ software, web browser, Postman app, and a custom hand-build authoring tool to test the API. From the first two client’s software, the result shows that client can discover and explore the hypermedia API through hyperlinks and transition. From the third evaluation, a custom made authoring tool can act as a proxy between the user and the hypermedia API. User can produce learning objects in the authoring tool through graphical user interface, behind the scene the authoring tool utilizes the hypermedia API functionality to create, retrieve, update, and delete the resources. In conclusion, learning object management based on hypermedia API proves the concept that the system can be self-discoverable (Hypermedia as the Engine of Application State or HATEOAS) and adoptable by various client’s software, ranging from common web browsers, a specialized web API browser, and a custom hand-made application. For custom hand-made application, it needs to have shared understanding between the client application and the hypermedia API through hypermedia documentation. References [1] [2] [3] [4] [5]

[6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20]

Amundsen M. From APIs to Affordances: A New Paradigm for Web Services. In Proceedings of the Third International Workshop on RESTful Design; 2012; Lyon. p. 53-66. Ed-douibi H, Cánovas Izquierdo JL, Cabot J. Example-Driven Web API Specification Discovery. In: Anjorin A, Espinoza H, editors. Modelling Foundations and Applications. Cham: Springer International Publishing; 2017. p. 267–84. Amundsen M. Building Hypermedia APIs with HTML5 & Node Sebastopol. O’Reilly Media, Inc.; 2012. Gamache P. Pragmatic Hypermedia: Creating a Generic, Self-inflating API Client for Production Use. In Proceedings of the 23rd International Conference on World Wide Web; 2014; Seoul. p. 931-936. Rodríguez C, Baez M, Daniel F, Casati F, Trabucco JC, Canali L, et al. REST APIs: A Large-Scale Analysis of Compliance with Principles and Best Practices. In: Bozzon A, Cudre-Maroux P, Pautasso C, editors. Web Engineering. Cham: Springer International Publishing; 2016. p. 21–39. Amundsen M. World Wide Web Consortium (W3C). [Online].; 2011. Available from: https://www.w3.org/2011/10/integration-workshop/p/ hy-permedia-oriented-design.pdf. Palma F, Dubois J, Moha N, Guéhéneuc Y-G. Detection of REST Patterns and Antipatterns: A Heuristics-Based Approach. In: Franch X, Ghose AK, Lewis GA, Bhiri S, editors. Service-Oriented Computing. Berlin, Heidelberg: Springer Berlin Heidelberg; 2014. p. 230–44. Pautasso C. RESTful Web Services: Principles, Patterns, Emerging Technologies. In: Bouguettaya A, Sheng QZ, Daniel F, editors. Web Services Foundations [Internet]. New York, NY: Springer New York; 2014. p. 31–51. Available from: https://doi.org/10.1007/978-1-46147518-7_2. Rodríguez-Echeverría R, Macías F, Pavón VM, Conejero JM, Sánchez-Figueroa F. Model-Driven Generation of a REST API from a Legacy Web Application. In: Sheng QZ, Kjeldskov J, editors. Current Trends in Web Engineering. Cham: Springer International Publishing; 2013. p. 133–47. Andry F, Wan L, Nicholson D. REST-Style Architecture and the Development of Mobile Health Care Solutions. In: Fred A, Filipe J, Gamboa H, editors. Biomedical Engineering Systems and Technologies. Berlin, Heidelberg: Springer Berlin Heidelberg; 2013. p. 301–11. Richards G, McGreal R, Friesen N. Learning object repository technologies for telelearning: The Evolution of POOL and CanCore. In Proceedings of the IS2002, Informing Science+ IT Education Conference; 2002; Cork: Informing Science Institute. p. 1333-1341. McGee L, Henry SL. World Wide Web Consortium. [Online].; 2015. Available from: https://www.w3.org/standards/agents/authoring. Berking P, Gallagher S. Advanced Distributed Learning. [Online].; 2015. Available from: http://www.adlnet.gov/wp-content/uploads /2014/12/Choos ing-an-LMS-1.pdf. Berking P. Advanced Distributed Learning. [Online].; 2014. Available from: http://www.adlnet.org/wp-content/uploads/2013/08/ChoosingAuthoring-Tools.pdf. Schluep S, Bettoni M, Guttormsen Schär S. Modularization and Structured Markup for Learning Content in an Academic Environment. International Journal on E-Learning. 2006; V(1). Nelson TH. Complex Information Processing: A File Structure for the Complex, the Changing and the Indeterminate. In Proceedings of the 1965 20th National Conference; 1965; New York. p. 84-100. Davis C. What if the Web Were Not RESTful? In Proceedings of the Third International Workshop on RESTful Design; 2012; Lyon: ACM. p. 3-10. Fielding RT, Taylor RN. Principled design of the modern Web architecture. ACM Transactions on Internet Technology (TOIT). 2002;: p. 115-150. Object Management Group. Object Management Group. [Online].; 2015. Available from: http://www.omg.org/spec/UML/2.5/PDF. Darmadi H, Liawatimena S. Perancangan Authoring Tool untuk Learning Object berbasis HTML5. Unpublished Paper. Jakarta Barat:; 2016.