An e-Learning collaborative RIA environment for Modeling Processes and Code Generation of Web Applications Sara Comai1, Juan Carlos Preciado2, Marino Linaje2, Rober Morales2 and Fernando Sánchez2 1
2
Politecnico di Milano. Dipart. di Elettronica e Informazione (20133 – Milano, Italy) Quercus Software Engineering. Universidad de Extremadura (10071 – Cáceres, Spain)
[email protected]; {jcpreciado; mlinaje; robermorales; fernando}@unex.es
Abstract In the last years different methodologies have been proposed to systematize the Web development processes. Some of them are supported by CASE tools that help the user in all or in part of the phases of the application development. A number of these tools are used with didactic aims, for teaching the development process of Web applications. Nevertheless, to our knowledge, none of the currently available CASE tools neither supports the online cooperative design, nor allows the modelling of a process with the supervision of a teacher. Our technological solution is based on Rich Internet Applications, i.e., Web applications with multimedia, high levels of interactivity, and collaborative work support. This document presents a Rich Internet application for the automatic code generation of Web applications that allows different modellers to design Web applications in a cooperative and supervised way, as well as to automatically generate its code. This work is inspired by the Web modelling language WebML.
1. Introduction and motivation In the last years different methodologies and tools have been proposed to support the Web development process. Web applications can be modelled by means of different levels of abstraction and their code can be automatically generated from the models, thus simplifying some of the more expensive stages of the development process (i.e., codification, checking, and maintenance) [1][3][4]. Model-driven approaches can also reduce the need of technical and human resources and improve the quality of the final product. The main problem is that any kind of development methodology is not usually adopted by small and medium-size Web development companies. If they are used, they are devoted to improve manual codification
[2]. Moreover, methodologies and tools have a high learning curve for designers/developers with no experience in solving problems using conceptual models [2]. The experience presented in this paper has the goal to carry out a didactical general approach followed by these methodologies and tools. Our proposal summarizes the typical steps of a Web methodology by considering only the most important concepts needed to model Web applications and to support their automatic code generation. Our experience is based on two complementary phases. In the first one, some of the main methodologies and CASE tools have been presented to a pilot group of Web developers, who were requested to model a simple Web application about books and authors and to evaluate the usability of the CASE tools according to a given set of parameters. On the basis of the results obtained from this phase, we chose the methodology/tool obtaining the best results. In the second phase we have developed a tool inspired by the chosen methodology, extended with very interesting features for learning purposes such as cooperation, communication and supervision. This paper is organized as follows: Section 2 presents an overview of e-learning and Rich Internet Applications. Section 3 outlines the first phase of the experience. Section 4 shows the second phase and introduces our CASE tool. Finally, in Section 5 we discuss our results and in Section 6 draw our conclusions.
2. E-learning Applications
and
Rich
Internet
Big efforts have been carried out in the last years to provide e-learning frameworks, portals, etc. However, the high percentage of e-learning course completion failures have been attributed to poorly designed online
experiences that do not motivate learners with repetitive, boring functionality and other various frustrations. To improve such systems, learning software should contain also multimedia such as simulations, explorations, games, and drag-and-drop exercises. Elearning should be an active, not passive, experience providing a more dynamic and interactive learning experience. Now, e-learning system developers can use RIA technologies to combine a variety of media and external applications and to build rich, immersive online learning experiences. The RIA technology is characterized by several features that enable a high-quality, interactive online experience [8], like for example: • It can utilize a ubiquitous client, to maximize the audience reach. • It can run unchanged across the Internet on multiple platforms. • It can deliver attractive user interfaces with high degrees of interactivity. • It can represent processes, data configuration, and sale and feedback complexity. • It can utilize audio, video, images, and text in a seamless manner. • It supports the mobile workflow by allowing users to work online and offline. • It adds business logic capabilities to the client. • It allows accessing multiple middle-tier services and back-end data stores. • It can use emerging standards such as XML and SOAP. • It can be integrated with legacy applications and systems. Hence, thanks to these technological characteristics the novel designer learning experience can be enhanced with noteworthy impact on his/her motivation. Previous initiatives have been deployed using RIAs. In [10] a Web-based circuit virtual laboratory for undergraduate student courses has been designed and developed using RIA; as a next step the authors plan to develop a multi-users collaborative system, currently not supported. [11] presents an On Demand Computing System, called ODIX, to support on demand collaboration in Web-based communities, to enable the distributed deployment and dynamic composition of Java Rich Internet Applications. Differently from our approach ODIX has been designed to be used on desktop computing systems only. Other basic RIA functionalities have been used in [12], an architecture for a collaborative learning environment for remote experimentation.
In these systems RIA has been used in order to improve the learning experience in different ways. In [10] and [11] RIA is used to deploy a system for a collaborative e-learning environment and to support remote practitioner´s experimentation (improving the user interaction capacities). In [12] RIA is used to provide the illusion of a cross-platform operating environment according to customization issues. Our approach exploits all such features in a single tool; besides them, it is targeted to diagrams descriptions (with automatic code generation) and therefore considers also the e-learning features related to such kind of applications.
3. Summary and context of the experience Our experience is based on two complementary phases. In the first one, we have put forward the experience to a group of Web programmers/analysts (previously students of Computer Science at the Universidad de Extremadura). These programmers are working in three different Web development companies in Extremadura (Spain). They had never used any methodology or codegenerating CASE tool. The aim of the first phase is the theoretical study of some of the main Web methodologies (i.e., WebML [3], OO-H [4] and UWE [1] for this study) and the design of a simple Web application using the CASE tools supporting such methodologies (called WebRatio, VisualWADE, and ArgoUwe, respectively). The proposed application is a simple Web application showing information about authors and their books using the master/detail relationship. In this experience, the main comparison parameters (listed in Table 1) have been established. Every member of the group evaluated each parameter from 0 (the worst value) to 9 (the best value) in an anonymous way, as shown in the different columns in Table 1 (D1 stands for designer 1, and so on). The last column computes the average value. The methodologies considered for this study are shown in the second row (‘v’ stands for VisualWADE; ‘w’ for WebRatio; and ‘a’ for ArgoUWE). The results of phase 1 show the differences on the learning impact that every methodology and tool has on each member of the pilot group. These differences mainly come from the previous experience and the learning ability of each member. D1
D2
D3
D4
D5
D6
D7
AVG
v/w/a
v/w/a
v/w/a
v/w/a
v/w/a
v/w/a
v/w/a
v/w/a
Usability of the tool
6/8/5
6/9/6
7/7/6
3/5/5
7/7/6
8/9/3
6/7/4
6/7/5
Intuitiveness of the process
5/8/4
6/9/5
5/7/7
2/4/2
8/9/5
5/5/3
6/6/6
5/6/4
Easy to learn
5/7/4
6/7/5
8/8/8
4/4/5
7/7/5
7/7/5
4/6/5
6/7/6
Clarity of the concepts
6/6/4
6/6/6
8/8/7
4/4/5
7/7/6
6/5/4
4/5/5
6/6/5
Intuitiveness of the generated final application
5/9/5
7/8/6
6/6/6
3/3/3
5/6/5
4/7/5
5/7/5
5/7/5
Table 1. Summary of the evaluation of every member of the pilot group Taking as a basis these results, we choose the methodology and tool obtaining the best values: WebML/WebRatio [3].
4. MetaRIA: a RIA CASE Tool for learning RIA design In this section we show MetaRIA [7] that is a CASE tool to teach Web and RIA design concepts to novel modellers in a cooperative environment. With the purpose of simplifying the design and code generation processes, MetaRIA supports three stages: data modelling, hypertext modelling and code generation. In this way, modellers can also see their final application automatically deployed in the Web server. The whole design process is supervised by a tutor (or project chief), who can manage, help, and check the models while modellers are working. The tutor is the only one who can decide when to pass to the next stage.
4.1. Web applications design starting from conceptual maps Conceptual maps allow expressing “ideas” in a simple graphic way and relationships among such “ideas”; they can be used as a didactic support in the learning process [6]. MetaRIA is based on the ENCOPROG engine [6] that is a collaborative Web learning environment using Conceptual Maps to express ideas (i.e., nodes) and relationships (i.e., arcs). From this point of view, conceptual maps are a generalization of the EntityRelationship diagrams used for the conceptualization of the WebML Data Model. Conceptual maps are so generic that they are even a generalization of the WebML Hypertext Model. Nowadays, there are several competitive systems for designing Conceptual Maps like, for example, Inspiration, Free Mind or the Cmap Tool, but none of them can be extended to model and generate Web Applications.
4.2. Cooperative Web applications design and code generation
MetaRIA is a CASE tool inspired to the WebML Data and Hypertext Models. WebRatio, the CASE tool supporting WebML, is mainly used for commercial purposes and does not provide improvements for the learning. MetaRIA completely supports the EntityRelationship diagram in order to design complex Data Models as WebRatio does. MetaRIA also supports a big part of the WebML Hypertext Model (the most interesting WebML “units” for learning purposes). But MetaRIA goes even beyond by providing learning features using RIA technologies. It removes any kind of installation or configuration of the CASE tool at the client side and at the deployment server. It also supports real-time cooperative work, i.e., novel modellers may collaborate improving their designs using the group’s knowledge. MetaRIA also provides real-time bidirectional communication (i.e., chat and video chat) in the following directions: from modeller to modeller(s) and from tutor to modeller(s). One of the main features of MetaRIA for learning purposes is that the tutor may block any element of any model at any time. This feature allows putting the focus of the modeller’s attention on the parts of the conceptual design that have not been solved. In MetaRIA, as in other CASE tools, the models are stored as XML documents. This fact makes their management and transformations (using XSL) from a model to the other one and from a model to the final application code easier. Nowadays, MetaRIA is able to auto-generate: 1) SQL sentences and the remote MySQL database; 2) PHP code for business logic and data retrieval layers; 3) Laszlo code (http://www.openlaszlo.org) for the presentation layer.
Figure 1. Supervised designing process in MetaRIA
The design and code generation processes are easy to use in MetaRIA. Each person authorized by the tutor may log in the application and join in a working room previously established by his tutor.
Modellers may work in a cooperative way because each change done on the working model is displayed to the whole group of the modellers in real-time (using the Real Time Messaging Protocol).The first stage of the design is the data modelling where modellers use the Entity-Relationship diagram to specify the application data. From the Data Model and with the supervision of the tutor, the model is exported to SQL and the application creates a remote database in the deployment server. The second stage of the design is the Hypertext modelling where the Web application business logic is specified. Once the tutor accepts the model, the automatic code generation can start. The whole process is depicted on Figure 1. The code generation in MetaRIA is quite different from the one generated by WebRatio.
order to maintain the model consistency, when a user clicks any element, this one is blocked and this user is the only one that is able to work with this element. Elements are automatically unblocked when the user releases them and there is no other property dialog related with such elements. Once an element is blocked, modellers are able to continue creating, deleting or changing other elements, attributes of these elements or even arcs related with the blocked one.
Figure 4. Auto-generated final application code
Figure 2. Screenshot of the Data Model in MetaRIA
During the whole design process, MetaRIA allows communication mechanisms among modellers and may support different modelling sessions if the tutor considers it necessary (e.g., when the number of modellers is too high).
Figure 3. Screenshot of the Hypertext Model in MetaRIA
Figure 2 and 3 show part of the example “authors and books” designed by the pilot group. The Data Model (Figure 2) shows the two main entities of the example, their attributes and their relationship. The Hypertext Model (Figure 3) shows a list of the authors. When the name/surname of an author is clicked, his details and a list of the books related with him are shown. Also when one of these books is selected by the user, the book details are shown in the user interface. During the modelling process in MetaRIA, modellers may work with any element of the model. In
Figure 5. Auto-generated Web application running on the remote deployment server
For learning purposes, MetaRIA also shows the model text representation and the generated code to the modellers when the tutor finalizes each design stage (see Figure 4). Finally, the Web is automatically deployed on the server and MetaRIA provides the URL to run it (Figure 5).
5. Results Table 2 shows in every column the new evaluation of each member of the pilot group for our proposed tool. The new represented value is indicated in the group v/w/a/m, where ‘m’ stands for MetaRIA. Due to the fact that the presentation design is not contemplated in MetaRIA, it is clear that the results in Table 2 for the generated application are not competitive with respect to the other proposals.
Usability of the tool Intuitiveness of the process Easy to learn Clarity of the concepts Intuitiveness of the generated final application
D1
D2
D3
D4
D5
D6
v/w/a/m
v/w/a/m
v/w/a/m
v/w/a/m
v/w/a/m
v/w/a/m
v/w/a/m v/w/a/m
D7
AVG
6/8/5/8
6/9/6/9
7/7/6/9
3/5/5/6
7/7/6/7
8/9/3/9
6/7/4/8
6/7/5/8
5/8/4/8
6/9/5/8
5/7/7/8
2/4/2/6
8/9/5/9
5/5/3/6
6/6/6/7
5/6/4/7
5/7/4/9
6/7/5/8
8/8/8/9
4/4/5/6
7/7/5/8
7/7/5/8
4/6/5/9
6/7/6/8
6/6/4/7
6/6/6/7
8/8/7/7
4/4/5/5
7/7/6/8
6/5/4/6
4/5/5/6
6/6/5/6
5/9/5/7
7/8/6/7
6/6/6/6
3/3/3/3
5/6/5/5
4/7/5/5
5/7/5/5
5/7/5/5
Table 2. Summary evaluation of each member of the pilot group with MetaRIA It has to be noticed also that we have reduced the complexity of the design process, thus facilitating the learning process for novel modelers. Another interesting aspect that the members of the pilot group have evaluated very positively is the fact that no installation of a server is necessary for running this tool, as it is required for the other three analyzed tools.
6. Conclusions and future work This document has presented an on-line didactic environment for Web application design supporting automatic code generation. This environment has been implemented using Rich Internet Application technologies, which makes MetaRIA available to be used as a desktop application (e.g., using drag-and-drop) as well to support advanced Web capacities (e.g., real-time collaboration). The tool is available at [7]. The main features of MetaRIA are: no installation or configuration of the CASE tool and of the deployment sever is necessary. It supports real-time cooperative work and real-time bidirectional communication. It also provides the tutors with specific functions for learning purposes like blocking and it establishes a policy of sessions/rounds for collaborative design. Future work will include a specific presentation model to deal with the rich user interfaces and user interactions supported by RIA technologies.
Moreover, we plan to incorporate more functions in the hypertext model, inspired by WebML, OO-H and UWE proposals. Acknowledgements This work has been carried out under the projects PDT06A042 & TIN2005-09405-C02-02.
10. References [1] A. Knapp, N. Koch, F. Moser and G. Zhang, “ArgoUWE: A Case Tool for Web Applications”, Int. Workshop on Engineering Methods to Support Information Systems Evolution, Geneva (Switzerland), Sept. 2003. [2] C. Barry and; M. Lang, “A survey of multimedia and Web development techniques and methodology usage”, IEEE Multimedia June 2001, vol. 8, issue 2, - pp. 52-60. [3] S. Ceri, P. Fraternali, A. Bongio, M. Brambilla, S. Comai and M. Matera, Designing Data-Intensive Web Applications, Elsevier, Amsterdam (Netherlands), 2002. [4] J. Gómez, C. Cachero, and O. Pastor, “Extending a Conceptual Modelling Approach to Web Application Design“, Int. Conf. on Advanced Information Systems, Stockholm (Sweden), June 2000, LNCS 1789, pp. 79-93.. [5] J.C. Preciado, M. Linaje, F. Sánchez and S. Comai, “Necessity of methodologies to model Rich Internet Applications”, IEEE Int. Symposium on Web Site Evolution, Budapest (Hungary), Sept. 2005, pp. 7-13. [6] J.C. Preciado, V. Masero, D. Castañera and C. Gil, “Mapas conceptuales para enseñar cooperativamente vía Web”, International Conference on Concept Mapping, Pamplona (Spain), 2004. [7] http://www.ruxproject.org/ [8] J. Duhl, “Rich Internet Applications”, IDC white papers, 2003. [9] G. Gay, M. Lentini, “Use of Communication Resources in a Networked Collaborative Design Environment”, Journal of Computer-Mediated Communication, June1995, vol. 1 no.1 pp. 328-335. [10] G. Rong, Z. Miaoliang, D. Yabo S. Dandan and W. Yonggu, “A case study of virtual circuit laboratory for undergraduate student courses”, Int. Conf. on Information Technology Based Higher Education and Training, Santo Domingo (Rep. Dominicana), July 2005. [11] S. Paal, L. Bröcker and M. Borowski. “Supporting On Demand Collaboration in Web-Based Communities”, IEEE International Conference on Database and Expert Systems Applications, Krakow (Poland), Sept. 2006, pp. 293 - 298 [12] J.M. Callaghan, J. Harkin, M. El Gueddari, T.M. McGinnity and P.L. Maguire, “Client-Server architecture for Collaborative Remote Experimentation”, IEEE International Conference on Information Technology and Applications, Sydney (Australia), July 2005, vol. 2 pp. 125- 129.
