Melola Discovery

← Melola Discovery

Jurnal SINTA 2

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

Jurnal Ilmu Komputer dan Informasi (JIKI) · Vol. 17 No. 2 (2024) · pp. 109–120

DOI
10.21609/jiki.v17i2.1178
ISSN
2502-9274, 2088-7051
Published
2024-06-02
Publisher
Faculty of Computer Science - Universitas Indonesia
Language
eng

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.

Collaboration network of the authors

15 authors · 42 co-authorship links · 21 across different organisations

Hover or tap a name to highlight its co-authors. Double-click to open the author's page.

  • University of Indonesia
  • Pelita Harapan University
  • Universitas Jambi
  • Universitas Pembangunan Nasional Veteran Yogyakarta
  • Different organisations
  • Same organisation
  • Affiliation unknown
  • Thicker line = more joint articles · bigger circle = more articles
Show as table
Co-authorOrganisationJoint articles
Adrika NovrialdiUniversity of Indonesia1
Daya AdiantoUniversity of Indonesia1
Aulia RosyidaUniversity of Indonesia1
Priambudi Lintang BagaskaraUniversity of Indonesia1
Falah Prasetyo WaluyoUniversity of Indonesia1
Maya Retno Ayu SetyautamiUniversity of Indonesia1
Deddy Romnan RumapeaUniversitas Jambi1
Kenrick TandrianPelita Harapan University1
Rivano Ardiyan Taufiq KurniawanUniversitas Pembangunan Nasional Veteran Yogyakarta1
Mirsa SalsabilaUniversity of Indonesia1
Darren NgohUniversity of Indonesia1
Kenji MarwiesPelita Harapan University1
Bukhori Muhammad AqidUniversity of Indonesia1

Affiliations come from OpenAlex; journal OAI-PMH metadata carries none. Authors without an OpenAlex ID are matched by name, which can merge or split people.

Metadata source: OAI-PMH (metadata jurnal) https://jiki.cs.ui.ac.id/index.php/jiki/oai, first harvested 26 Okt 2026, last seen 26 Okt 2026.
Original metadata (oai_dc) 
<oai_dc:dc xmlns="http://www.openarchives.org/OAI/2.0/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:oai_dc="http://www.openarchives.org/OAI/2.0/oai_dc/" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.openarchives.org/OAI/2.0/oai_dc/  http://www.openarchives.org/OAI/2.0/oai_dc.xsd">
	<dc:title xml:lang="en-US">Code Generator Development to Transform IFML (Interaction Flow Modelling Language) into a React-based User Interface</dc:title>
	<dc:creator>Rohma, Ilma Ainur</dc:creator>
	<dc:creator>Ade Azurat</dc:creator>
	<dc:description xml:lang="en-US">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.</dc:description>
	<dc:publisher xml:lang="en-US">Faculty of Computer Science  - Universitas Indonesia</dc:publisher>
	<dc:date>2024-06-02</dc:date>
	<dc:type>info:eu-repo/semantics/article</dc:type>
	<dc:type>info:eu-repo/semantics/publishedVersion</dc:type>
	<dc:format>application/pdf</dc:format>
	<dc:identifier>https://jiki.cs.ui.ac.id/index.php/jiki/article/view/1178</dc:identifier>
	<dc:identifier>10.21609/jiki.v17i2.1178</dc:identifier>
	<dc:source xml:lang="en-US">Jurnal Ilmu Komputer dan Informasi; Vol. 17 No. 2 (2024): Jurnal Ilmu Komputer dan Informasi (Journal of Computer Science and Information); 109-120</dc:source>
	<dc:source>2502-9274</dc:source>
	<dc:source>2088-7051</dc:source>
	<dc:source>10.21609/jiki.v17i2</dc:source>
	<dc:language>eng</dc:language>
	<dc:relation>https://jiki.cs.ui.ac.id/index.php/jiki/article/view/1178/509</dc:relation>
	<dc:rights xml:lang="en-US">Copyright (c) 2024 Jurnal Ilmu Komputer dan Informasi</dc:rights>
</oai_dc:dc>