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

  • Ilma Ainur Rohma Universitas Indonesia
  • Ade Azurat
DOI: https://doi.org/10.21609/jiki.v17i2.1178

Abstract

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.

Published
2024-06-02
How to Cite
Rohma, I. A., & Ade Azurat. (2024). Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface. Jurnal Ilmu Komputer Dan Informasi, 17(2), 109-120. https://doi.org/10.21609/jiki.v17i2.1178
Issue
Vol. 17 No. 2 (2024): Jurnal Ilmu Komputer dan Informasi (Journal of Computer Science and Information)
Section
Articles

Authors who publish with this journal agree to the following terms:

  1. Authors retain copyright and grant the journal right of first publication with the work simultaneously licensed under a Creative Commons Attribution License that allows others to share the work with an acknowledgement of the work's authorship and initial publication in this journal.
  2. Authors are able to enter into separate, additional contractual arrangements for the non-exclusive distribution of the journal's published version of the work (e.g., post it to an institutional repository or publish it in a book), with an acknowledgement of its initial publication in this journal.
  3. Authors are permitted and encouraged to post their work online (e.g., in institutional repositories or on their website) prior to and during the submission process, as it can lead to productive exchanges, as well as earlier and greater citation of published work (See The Effect of Open Access).