Software Product Line Engineering (SPLE) merupakan paradigma pengembangan perangkat lunak yang memanfaatkan common platform (kemiripan) dan mass customisation (keragaman) dari berbagai aplikasi. Pengembangan perangkat lunak dengan paradigma SPLE pada penelitian ini menggunakan diagram Interaction Flow Modeling Language (IFML) sebagai pemodelan antarmuka dalam menghasilkan komponen user interface (UI) pada aplikasi front end. Diagram IFML digunakan sebagai masukan pada UI Generator Web Interface untuk menghasilkan proyek React sebagai aplikasi berbasis website. Namun, ketika aplikasi dibuka melalui tampilan mobile, antarmuka yang ditampilkan menjadi tidak teratur serta beberapa interaksi sulit untuk dilakukan. Selain itu, aplikasi yang dihasilkan juga belum dapat diinstal pada perangkat untuk digunakan secara offline. Oleh karenanya, penelitian ini bertujuan untuk mengembangkan UI Generator Web Interface agar aplikasi yang dihasilkan memiliki tampilan yang responsif serta mendukung Progressive Web Application (PWA). Selain itu, penelitian ini juga bertujuan untuk mengembangkan UI Generator Mobile Interface untuk menghasilkan proyek React Native sebagai aplikasi berbasis mobile. UI Generator Mobile Interface yang dikembangkan menggunakan diagram IFML yang sama dalam menghasilkan aplikasi mobile dengan antarmuka dan fungsionalitas yang serupa. Selanjutnya, antarmuka kedua aplikasi yang masing-masing dihasilkan oleh UI Generator Web Interface dan UI Generator Mobile Interface dievaluasi menggunakan prinsip Shneiderman’s Eight Golden Rules of Interface Design. Hal ini bertujuan untuk mencari tahu apakah antarmuka dari kedua aplikasi yang dihasilkan secara generated sudah memenuhi kaidah perancangan antarmuka. Dari penelitian ini dapat disimpulkan bahwa UI Generator Web Interface dan UI Generator Mobile Interface berhasil dikembangkan serta telah dilakukan evaluasi terhadap masing-masing aplikasi yang dihasilkan. Hasil evaluasi menunjukkan bahwa terdapat beberapa bagian yang dapat ditingkatkan lebih lanjut pada kedua antarmuka aplikasi.

---

Software Product Line Engineering (SPLE) is a software development paradigm that utilizes a common platform and mass customization of various applications. Software development with the SPLE paradigm in this study uses Interaction Flow Modeling Language (IFML) diagrams in modeling the user interface to generate user interface (UI) components for front end applications. IFML diagrams are used as input to the UI Generator Web Interface in generating React projects as web-based applications. However, when the application is opened in the mobile view, the user interface displayed becomes irregular and some interactions are difficult to complete. In addition, the resulting application cannot be installed on a device for offline use. Therefore, this study aims to develop a UI Generator Web Interface so that the resulting application has a responsive display and supports Progressive Web Application (PWA). In addition, this research also aims to develop a UI Generator Mobile Interface to produce React Native projects as mobile-based applications. The UI Generator Mobile Interface developed uses the same IFML diagram in producing mobile applications with similar interfaces and functionalities. Furthermore, the interfaces of the two applications each generated by the UI Generator Web Interface and UI Generator Mobile Interface are evaluated using the principle of Shneiderman’s Eight Golden Rules of Interface Design. This aims to find out whether the interface of the two generated applications already meet the rules of interface design. From this study it can be concluded that the UI Generator Web Interface and UI Generator Mobile Interface have been successfully developed and an evaluation has been carried out for each of the resulting applications. The evaluation results indicate that there are several areas for further improvement in both application interfaces.