Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface

Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface

Model-Driven Software Engineering (MDSE); User Interface (UI) Development; Code Generator; Interaction Flow Modeling Language

Model-Driven Software Engineering (MDSE) is a software development approach that uses the Model to be the main actor of the development. MDSE can be applied to User Interface (UI) Development so that a model for the UI can be built, and then a transformation can be made to turn it into a running application. In this research, we develop UI Generator to support UI Development with the MDSE approach. This UI
Generator can also support UI Development in Software Product Line Engineering (SPLE) paradigm. The UI is modeled with Interaction Flow Modeling Language (IFML) diagram. Then The IFML diagram is transformed into React-Based UI by the UI Generator. The UI Generator is developed with Acceleo on Eclipse IDE to transform IFML into React Code with the transformation rules defined in this research. The UI generator is also enriched with display settings and static page management to address user customization needs. The experimental results show that the UI Generator can generate a functional website. Besides
evaluating the working product, UI Generator is evaluated qualitatively well based on six quality criteria as an SPLE supporting tool.

Ilma Ainur Rohma and Ade Azurat

http://dx.doi.org/10.21609/jiki.v17i2.1178

Faculty of Computer Science Universitas Indonesia

2024-06-04

Sri Wahyuni

e-ISSN : 2502-9274 printed ISSN : 2088-7051

PDF

English

Text

Jurnal Ilmu Komputer dan Informasi (Journal of Computer Science and Information)