Pendekatan Software Product Line Engineering (SPLE) memungkinkan pengembangan berbagai produk perangkat lunak secara efisien melalui common platform dan kustomisasi massal. Pendekatan ini diterapkan di Laboratorium Reliable Software Engineering (RSE) dengan dukungan berbagai plugin dalam lingkungan pengembangan Prices-IDE. Salah satu plugin yang tersedia adalah UI Generator, yang berfungsi mengubah diagram Interaction Flow Modeling Language (IFML), sebuah bahasa pemodelan antarmuka abstrak, menjadi kode sumber aplikasi berbasis React. Penelitian ini berfokus pada penyempurnaan UI Generator untuk mendukung kebutuhan lini produk yang semakin kompleks. Penyempurnaan mencakup penambahan fungsionalitas, seperti restriksi pengambilan dan render ViewComponent, penampilan menu dinamis, pengecekan fitur sebelum menghasilkan IFMLModule, dukungan Correlated Multi ViewComponent Form dan List, serta tampilan List terkelompok. Selain itu, penelitian ini juga mencakup pengembangan mekanisme pembuatan fitur dengan tingkat granularitas perubahan yang fine-grained. Restrukturisasi struktur kode UI Generator turut dilakukan untuk memisahkan tanggung jawab, menyederhanakan struktur berkas, dan mendukung penambahan framework baru. Evaluasi fungsionalitas saat generate aplikasi menunjukkan bahwa fungsionalitas yang dikembangkan mampu memenuhi kebutuhan pengembangan yang lebih beragam. Uji coba hasil refactor melalui studi kasus dan integrasi React Native menunjukkan adanya penyederhanaan proses pengembangan, ditunjukkan melalui pengurangan jumlah baris kode yang ditulis dan jumlah berkas yang perlu dimodifikasi serta penyederhanaan proses penambahan framework. Evaluasi kualitatif menggunakan Six Quality Criteria juga menunjukkan bahwa penyempurnaan UI Generator terbukti memenuhi kriteria kualitas yang diharapkan.

---

Software Product Line Engineering (SPLE) enables the efficient development of diverse software products through a common platform and mass customization. This approach is applied at the Reliable Software Engineering (RSE) Laboratory, supported by the Prices-IDE development environment, which includes various plugins. One of the plugins is UI Generator that converts Interaction Flow Modeling Language (IFML) diagrams, an abstract interface modeling language, into React-based application source code. This research focuses on enhancing UI Generator to support the increasingly complex needs of software product lines. The enhancement includes adding functionalities such as restriction of ViewComponent data retrieval and render, dynamic menu display, feature checking before IFMLModule generation, support for Correlated Multi ViewComponent Form and List, and grouped List. Furthermore, the research introduces a mechanism for creating features with a fine-grained level of change. The UI Generator codebase is also restructured to separate responsibilities, simplify file structure, and facilitate the addition of new frameworks. Evaluation of the generated application’s functionality demonstrates that the developed features meet more diverse development requirements. Testing the refactor result through case studies and React Native integration shows simplification of the development process, as indicated by a reduction in the number of lines of code written, fewer modified files and simplified framework addition. Qualitative evaluation using the Six Quality Criteria also confirms that the UI Generator’s development meets the expected quality criteria.