Hasil Pencarian  ::  Simpan CSV :: Kembali

"Dalam pembuatan User Interface (UI) aplikasi, selain perlu memastikan bahwa fungsionalitasaplikasi dapat berjalan dengan baik, pengembangan juga perlu memerhatikankeinginan pengguna terhadap tampilan visual aplikasi. Perbedaan selera penggunaterhadap tampilan UI memberikan sebuah tantangan lain dalam pembuatan aplikasi webfront-end secara otomatis. Studi ini mengajukan sebuah solusi yang dapat menyelesaikanpermasalahan terkait penyediaan variasi styling UI aplikasi secara otomatis dengan keinginan pengguna. Penyediaan variasi styling UI dilakukan dengan menggunakan komponen UI. Proses otomatisasi pembuatan aplikasi pada studi ini berkaitan denganparadigma Software Product Line Engineering (SPLE). Paradigma SPLE adalah paradigma pengembangan aplikasi yang memanfaatkan kesamaan ciri umum sekelompok aplikasi untuk dapat menekan biaya dan waktu yang dibutuhkan dalam pengembangan sekelompok aplikasi tersebut. Dalam studi ini digunakan bahasa permodelan Interaction Flow Modeling Language (IFML) untuk memodelkan UI aplikasi yang perlu dihasilkan. Adapun dalam studi ini ditemukan bahwa dengan model aplikasi IFML, dapat dilakukankonstruksi UI yang bervariasi. Selain itu, juga ditemukan beberapa modifikasi yang dapat dilakukan terhadap konstruksi UI untuk dapat mengembangkan tampilan aplikasi dengan penyesuaian terhadap keinginan pengguna.

---

In the development of an application User Interface (UI), besides making sure that the

functionalities of the application work as expected, it is also mandatory to take users preferences for the interface itself. How users opinion may differ from one another regarding

the visual representation of the application UI itself can be seen as a challenge when it

comes to generating a front-end application. This study proposes a solution to solve the problem of providing an application UI styling variations with a front-end application generator. In this study, we utilize UI components as a way to provide variations of UI styling. The generator used to automate the development of a front-end application is also related to the Software Product Line Engineering paradigm (SPLE). SPLE paradigm is a paradigm created to optimize the time and resources needed for developing of a group of applications by looking at their commonalities. In order to model the application the generator has to create, a UI model created with Interaction Flow Modelling Language (IFML) is used. From the research conducted within this study, it has been found that

provided an application UI model, it is possible to construct a UI with variations of styling. It has also been found that modifications done on the generator also provide a way to construct a UI that takes user preferences into development."

"Dalam pembuatan User Interface (UI) aplikasi, selain perlu memastikan bahwa fungsionalitas aplikasi dapat berjalan dengan baik, pengembangan juga perlu memerhatikan keinginan pengguna terhadap tampilan visual aplikasi. Perbedaan selera pengguna terhadap tampilan UI memberikan sebuah tantangan lain dalam pembuatan aplikasi web front-end secara otomatis. Studi ini mengajukan sebuah solusi yang dapat menyelesaikan permasalahan terkait penyediaan variasi styling UI aplikasi secara otomatis dengan keinginan pengguna. Penyediaan variasi styling UI dilakukan dengan menggunakan komponen UI. Proses otomatisasi pembuatan aplikasi pada studi ini berkaitan dengan paradigma Software Product Line Engineering (SPLE). Paradigma SPLE adalah paradigma pengembangan aplikasi yang memanfaatkan kesamaan ciri umum sekelompok aplikasi untuk dapat menekan biaya dan waktu yang dibutuhkan dalam pengembangan sekelompok aplikasi tersebut. Dalam studi ini digunakan bahasa permodelan Interaction Flow Modeling Language (IFML) untuk memodelkan UI aplikasi yang perlu dihasilkan. Adapun dalam studi ini ditemukan bahwa dengan model aplikasi IFML, dapat dilakukan konstruksi UI yang bervariasi. Selain itu, juga ditemukan beberapa modifikasi yang dapat dilakukan terhadap konstruksi UI untuk dapat mengembangkan tampilan aplikasi dengan penyesuaian terhadap keinginan pengguna.

---

In the development of an application User Interface (UI), besides making sure that the functionalities of the application work as expected, it is also mandatory to take users preferences for the interface itself. How users opinion may differ from one another regarding the visual representation of the application UI itself can be seen as a challenge when it comes to generating a front-end application. This study proposes a solution to solve the problem of providing an application UI styling variations with a front-end application generator. In this study, we utilize UI components as a way to provide variations of UI styling. The generator used to automate the development of a front-end application is also related to the Software Product Line Engineering paradigm (SPLE). SPLE paradigm is a paradigm created to optimize the time and resources needed for developing of a group of applications by looking at their commonalities. In order to model the application the generator has to create, a UI model created with Interaction Flow Modelling Language (IFML) is used. From the research conducted within this study, it has been found that provided an application UI model, it is possible to construct a UI with variations of styling. It has also been found that modifications done on the generator also provide a way to construct a UI that takes user preferences into development."

"Software Product Line Engineering (SPLE) merupakan suatu paradigma dalam pengembangan perangkat lunak yang mampu menghasilkan software secara masif dalam waktu singkat dan dengan biaya yang relatif rendah. Dalam mengembangkan antarmuka menggunakan paradigma SPLE, diperlukan abstraksi untuk memodelkan antarmuka. Teknologi pemodelan yang digunakan dalam penelitian ini adalah Interaction Flow Modeling Language (IFML). Salah satu sistem yang mengadopsi paradigma SPLE adalah Amanah. Amanah adalah aplikasi untuk menghasilkan website organisasi non-profit secara otomatis yang dikembangkan oleh Laboratorium Reliable Software Engineering (RSE) Fakultas Ilmu Komputer Universitas Indonesia menggunakan paradigma SPLE. Aplikasi ini menggunakan UI Generator telah dikembangkan dalam penelitian sebelumnya untuk menerjemahkan IFML menjadi komponen React. Salah satu fitur yang disediakan oleh Amanah adalah fitur donasi. Fitur ini merupakan gerbang utama bagi individu dan organisasi untuk berkontribusi secara finansial. Namun, terdapat kekurangan pada fitur donasi di Amanah yang perlu dikembangkan lebih lanjut, seperti antarmuka yang belum menerapkan mobile-first design. Mobile-first design merupakan pendekatan desain antarmuka yang memprioritaskan tampilan pada perangkat mobile. Dalam beberapa tahun terakhir, mobile-first design semakin banyak diterapkan oleh pembuat web. Hal ini terjadi karena semakin banyaknya orang yang mengakses internet melalui perangkat seluler. Untuk meningkatkan pengalaman pengguna dalam berdonasi di Amanah, diperlukan perubahan pada tampilan donasi yang menerapkan mobile-first design. Saat ini, UI Generator yang dimiliki belum bisa menghasilkan tampilan mobile-first design. Oleh karena itu, dalam penelitian ini ingin dikembangkan fitur donasi dengan memodelkan IFML, mengembangkan UI Generator sehingga dapat menghasilkan tampilan antarmuka menerapkan mobile-first design. Dalam penelitian ini, dilakukan analisis terhadap beberapa website donasi yang telah menerapkan mobile-first design. Kemudian, antarmuka dari hasil pengembangan IFML dan UI Generator dievaluasi menggunakan UX Expert Review, sedangkan untuk fungsionalitas fitur diuji menggunakan functional testing.

---

Software Product Line Engineering (SPLE) is a software development paradigm that allows the massive software production in a short time and at a relatively low cost. In developing aninterface using the SPLE paradigm, abstraction is needed to model the interface. The modeling technology used in this study is the Interaction Flow Modeling Language (IFML). One of the systems that adopts the SPLE paradigm is Amanah. Amanah is an application to automatically generate non-profit organization websites developed by the Reliable Software Engineering Laboratory (RSE) of the Faculty of Computer Science, University of Indonesia using the SPLE paradigm. This application uses the UI Generator that has been developed in previous research to translate IFML into React components. One of the features provided by Amanah is the donation feature. This feature is the main gateway for individuals and organizations to contribute financially. However, there are shortcomings in the donation feature in Amanah that need to be further developed, such as the interface that has not implemented mobile-first design. Mobile-first design is an approach in interface design that prioritizes the appearance on mobile devices. In recent years, Mobile-first design has been increasingly applied by web developers. This is because more and more people are accessing the internet via mobile devices. To improve the user experience in donating at Amanah, changes are needed to the donation display that implements mobile-first design. Currently, the current UI Generator was not able to produce a mobile-first design display. Therefore, in this study, researcher wants to develop a donation feature by modeling IFML, developing a UI Generator so that it is able to produce a mobile-first design display. In this study, benchmarking was conducted on several donation websites that have implemented mobile-first design. Then, the interface from the results of the IFML and UI Generator development was evaluated using UX Expert Review, while the functionality of the feature was tested using functional testing."

"Software product line engineering (SPLE) merupakan paradigma perangkat lunak yang digunakan untuk memproduksi berbagai varian perangkat lunak dengan waktu dan biaya yang efektif. Penelitian sebelumnya telah mengembangkan Prices-IDE, yaitu sebuah integrated development environment (IDE) yang menghasilkan aplikasi web menggunakan paradigma SPLE. Aplikasi web tersebut dihasilkan secara otomatis (generated) menggunakan plugin UI Generator pada PRICES-IDE yang menerima model interaction flow modeling language (IFML) untuk dihasilkan menjadi aplikasi React. Aplikasi yang dihasilkan secara otomatis tersebut belum memiliki user interface (UI) yang dapat dikustomisasi secara lengkap. Penelitian sebelumnya telah berhasil mengembangkan mekanisme kustomisasi tema warna pada aplikasi. Namun, mekanisme kustomisasi tersebut belum dapat dilakukan pada aspek UI lainnya, seperti layout halaman dan bentuk komponen. Penelitian ini mengusulkan mekanisme kustomisasi UI yang terintegrasi pada Prices-IDE dengan menyediakan variasi template UI yang adaptif dengan fitur aplikasi. Mekanisme kustomisasi UI dilakukan dengan memvariasikan kode template projek React yang digunakan serta memvariasikan aturan code generator yang digunakan dalam UI Generator. Variasi tersebut dipaketkan menjadi pilihan template UI yang dapat dipilih pengguna ketika menggunakan UI Generator. Agar penambahan variasi baru dapat dilakukan dengan mudah, dilakukan refactoring terhadap UI Generator sehingga penambahan variasi baru tidak mengubah kode yang sudah diimplementasi sebelumnya. Hasil implementasi mekanisme kustomisasi kemudian dianalisis dan dievaluasi dengan melakukan studi kasus pada aplikasi Amanah, yaitu sebuah layanan aplikasi untuk menghasilkan aplikasi web bagi organisasi nirlaba. Setelah itu, evaluasi dilakukan menggunakan six quality criteria serta kemudahan untuk menjalankan mekanisme kustomisasi. Berdasarkan hasil studi kasus dan evaluasi, disimpulkan bahwa mekanisme kustomisasi dapat memvariasikan tampilan UI dari fitur aplikasi dan terintegrasi dengan plugin UI Generator dalam Prices-IDE.

---

Software Product Line Engineering (SPLE) serves as a paradigm to develop multiple software variants while optimizing time and costs. Previous researches introduce Prices-IDE, an integrated development environment (IDE) that uses SPLE to automate web application generation via UI Generator plugin. The plugin accepts Interaction Flow Modeling Language (IFML) models as an input to generate React applications. However, these auto-generated applications lack comprehensive User Interface (UI) customization. Although prior studies have already implemented color theme customizations, extending the customization to other UI aspects, such as layout and component structure, has not yet been implemented. This study proposes an integrated UI customization mechanism within Prices-IDE, providing adaptive UI template variations that aligns with generated application features. The mechanism involves providing multiple variations of React project template and diversifying UI Generator’s code generation rules, packaged as selectable options for users. UI Generator is also refactored so that the addition of new variations will not alter existing code. Evaluation is done through case study using Amanah, a service providing web application for non-profit application. UI Generator is also evaluated and analyzed through six quality criteria and usability assessment. This study concludes that the proposed customization mechanism can be used to diversify UI appearance and integrate smoothly with Prices-IDE’s UI Generator."

"Software Product Line Engineering (SPLE) merupakan suatu paradigma untuk menghasilkan berbagai perangkat lunak dengan variasi fitur yang berbeda-beda. Produk perangkat lunak yang dihasilkan dengan paradigma SPLE membutuhkan autentikasi dan otorisasi agar pengguna dapat dikenali dan dibatasi aksesnya untuk setiap fitur. Penelitian sebelumnya telah mengembangkan autentikasi pada perangkat lunak bagian front-end menggunakan diagram Interaction Flow Modeling Language (IFML) dan IFML UI Generator Plugin, namun belum terdapat fungsionalitas untuk mengelola data pengguna dan membatasi akses pengguna yang terhubung dari front-end ke back-end. Berdasarkan kebutuhan tersebut, penelitian ini akan mengembangkan lima halaman autentikasi dan otorisasi, halaman autentikasi terdiri dari halaman login, register, dan lupa password, halaman otorisasi terdiri dari manajemen pengguna dan manajemen role. Penelitian ini memodifikasi halaman login dari pengembangan sebelumnya, dan menambahkan halaman register, forgot password, manajemen pengguna, dan manajemen role. Penelitian ini akan memodifikasi diagram IFML dan UI Generator agar dapat menyediakan halaman autentikasi untuk mengidentifikasi pengguna dan halaman otorisasi untuk membatasi akses pengguna berdasarkan role. Selain itu, pengembangan autentikasi dan otorisasi juga dilakukan di bagian back-end pada library Auth Variability Modules for Java (VMJ) yang akan digunakan pada framework WinVMJ, untuk membuat bagian back-end berdasarkan paradigma SPLE. Pengembangan bagian back-end pada penelitian sebelumnya telah menyediakan penyimpanan data pengguna dan role, namun dibutuhkan modifikasi untuk memenuhi kebutuhan login, manajemen pengguna, manajemen role, serta pembatasan akses pengguna. Modifikasi dilakukan pada library Auth VMJ agar dapat memberikan fungsionalitas menambah, membaca, mengubah, dan menghapus data pengguna serta role pada suatu perangkat lunak. Produk yang dihasilkan akan dievaluasi melalui perbandingan dengan pengembangan sebelumnya serta dilakukan pengujian pembatasan akses fitur-fitur produk. Secara umum, penelitian ini berhasil menyediakan autentikasi dan otorisasi pada bagian front-end dan back-end perangkat lunak yang dikembangkan dengan paradigma SPLE.

---

Software Product Line Engineering (SPLE) is a paradigm that can be used to produce various software with feature variations. Software developed based on SPLE paradigm requires authentication and authorization to identify and restrict users to access each feature. Previous research has developed authentication in the front-end side using Interaction Flow Modeling Language (IFML) diagram and IFML UI Generator Plugin, but there are issues with managing user data and restricting user access. Based on these issues, this research will develop five authentication and authorization pages, authentication pages consist of login page, register, and forgot password, authorization pages consist of user management and role management. This research modifies login page from previous research, and add register page, forgot password, user management, and role management. This research will modify IFML diagram and UI Generator to implement authentication pages to identify user and authorization pages to restrict user based on role. On the other side, authentication and authorization development is also carried out on the back-end side using Variability Modules for Java (VMJ) Auth Library. VMJ Auth Library will be used in WinVMJ framework, to create back-end based on SPLE paradigm. Previous research on back-end authentication has provided user and role databases, but modifications are still needed to support login, manage user data, manage role data, and restrict user access. Modifications are made to the VMJ Auth Library, to provide functionality for adding, reading, changing, and deleting user and role data. The resulting product will be evaluated through comparison with the previous development and testing of access restrictions on product features. In general, this research successfully implements authentication and authorization on front-end and back-end that developed based on SPLE paradigm."

"Software Product Line Engineering (SPLE) merupakan paradigma untuk memproduksi perangkat lunak dengan waktu, usaha, dan biaya yang minimal. Adaptive Information System for Charity Organization (AISCO) adalah perangkat yang dikembangkan dengan pendekatan SPLE untuk menghasilkan aplikasi web bagi organisasi sosial. Proses memproduksi aplikasi melibatkan sebuah kerangka pengembangan yang bernama Prices-IDE, yaitu sebuah development framework yang mendukung SPLE. Penelitian terdahulu telah mengembangkan UI Generator yang dapat mentransformasikan diagram IFML (Interaction Flow Modeling Language) menjadi source code sebuah aplikasi React. Akan tetapi, antarmuka yang dihasilkan masih sangat sederhana, belum menimbang prinsip desain antarmuka pengguna, dan belum menggunakan pendekatan SPLE. Terlebih, fitur kustomisasi antarmuka yang sudah ada belum terintegrasi dengan Prices-IDE. Penelitian ini mengusulkan variasi komponen antarmuka yang telah diperbarui, serta metode untuk melakukan kustomisasi antarmuka saat runtime. Proses pengembangan melibatkan pembuatan prototipe dan penyesuaian terhadap UI Generator berdasarkan rancangan yang diusulkan. Aplikasi yang dihasilkan kemudian dianalisis dan dites dengan functional testing secara manual oleh penulis menggunakan 16 skenario tes. Audit performa menggunakan Lighthouse juga dilakukan terhadap aplikasi dari UI Generator versi sebelum dan setelah diperbarui. Berdasarkan tes dan analisis tersebut, disimpulkan bahwa UI Generator yang diperbarui dapat menghasilkan aplikasi React yang mempertahankan fungsionalitas yang sudah ada, mengalami peningkatan dalam performa sebanyak 14%, dan kini memiliki tambahan fitur kustomisasi UI.

---

Software Product Line Engineering (SPLE) is the paradigm for producing a diverse set of similar software products with lower cost, time, and effort. Adaptive Information System for Charity Organization (AISCO) is a tool to generate web applications for charity organizations developed with an SPLE framework. The process of generating web applications is assisted by Prices-IDE, a development framework that supports SPLE. Previous studies have succeeded in developing a UI Generator that transforms an IFML (Interaction Flow Modeling Language) Diagram into the source code of a React application. However, the generated UI display is barebones, does not consider UI design principles, and was not developed with the SPLE approach. Moreover, the existing UI customization feature is entirely separate from Prices-IDE. This study proposes a revamped UI design, interface variations of the generated application, and a way to customize said interface during runtime. The development process involves creating a prototype based on the proposed design, then applying necessary adjustments to the UI Generator. Applications generated by the renewed UI Generator are then analyzed and tested using functional testing with 16 scenarios and performance audits with Lighthouse. Based on these analyses and test results, it is concluded that the updated UI Generator can generate React applications that maintain previous functionalities, with the addition of a UI customization feature and an increase by 14% in performance."

"Terkadang realisasi kebutuhan pengembangan aplikasi web baru sudah diimplementasikan sebagian pada aplikasi web lain. Harusnya efisiensi pengembangan dapat ditingkatkan dengan me-reuse realisasi tersebut dan mengurangi jumlah kebutuhan yang diimplementasikan dari awal. Developer menyelesaikan kasus tersebut dengan pendekatan clone-and-own yang memungkinkan penggunaan fungsionalitas suatu perangkat lunak pada perangkat lunak lain. Meskipun meningkatkan efisiensi pengembangan, namun clone-and-own menimbulkan masalah maintainability pada perangkat lunak yang sudah dikembangkan. Masalah tersebut dapat diatasi dengan pendekatan alternatif seperti paradigma software product line engineering (SPLE) yang efisiensinya dapat ditingkatkan dengan konsep multi product line (MPL). Sayangnya, SPLE dan MPL belum umum digunakan untuk mengembangkan perangkat lunak web karena kurangnya web framework yang menunjang kedua pendekatan tersebut. Hal ini yang mendasari implementasi WinVMJ framework sebagai web framework untuk mengembangkan aplikasi web dengan SPLE dan MPL. Framework ini belum menerapkan alur kerja SPLE secara menyeluruh, sehingga validitas perangkat lunak tidak terjamin. Untuk melengkapi alur kerja SPLE WinVMJ, penelitian ini mengintegrasikannya dengan FeatureIDE. Integrasi dilaksanakan dalam tiga tahap: merancang alur kerja SPLE, mendefinisikan kumpulan artefak yang diperlukan untuk pengembangan perangkat lunak, dan implementasi plugin bernama WinVMJ composer untuk memproses kumpulan artefak yang didefinisikan. Alur kerja SPLE WinVMJ berhasil dilengkapi dengan WinVMJ composer yang mampu memproses artefak dari FeatureIDE dan melakukan validasi produk secara menyeluruh. Selain itu, evaluasi WinVMJ composer juga menunjukkan adanya keunggulan penerapan MPL dan penyusunan produk dibandingkan WinVMJ framework.

---

Sometimes the realization of new web application development needs has been partially implemented in other web applications. Development efficiency should be increased by reusing the realization and reducing the number of requirements implemented from scratch. Developers solve this case with a clone-and-own approach that allows using the functionality of one software on another. Although this approach improves development efficiency, clone-and-own causes maintainability issues in the developed software. This problem can be overcome by alternative approaches, such as the software product line engineering (SPLE) paradigm, whose efficiency can be increased by the multi-product line (MPL) concept. Unfortunately, SPLE and MPL are not commonly used to develop web software due to the lack of web frameworks that supports them. This issue underlies the implementation of the WinVMJ framework as a web framework for developing web applications with SPLE and MPL. This framework has not fully implemented the SPLE workflow, which causes a lack of software validity. To complete it, this research integrates it with featured. The integration is carried out in three stages: designing the SPLE workflow, defining the artifact set for software development after integration, and implementing a plugin named WinVMJ composer to process the defined artifacts set. The WinVMJ's SPLE workflow is completed with WinVMJ composer, which can process FeatureIDE's artifacts and perform thorough product validation. In addition, the evaluation of the WinVMJ composer also shows the advantages of implementing MPL and product compilation compared to the WinVMJ framework."

"Sudah banyak aplikasi yang menggunakan sistem akun Single Sign-On (SSO) sebagai opsi registrasi akun. Pengelola Nama Domain Internet Indonesia (PANDI), selaku pengurus registri (.id) Indonesia, membuat sistem akun SSO yang dinamakan u.id. Aplikasi u.id adalah sistem SSO yang menggunakan Nomor Induk Kependudukan sebagai validalitas pengguna dan memastikan akun yang dibuat unik. Namun, aplikasi u.id menurut stakeholders PANDI memiliki tingkat kegunaan yang kurang. Oleh karena itu, perlu dilakukan evaluasi usability dan perumusan solusi dari hasil evaluasi tersebut. Penelitian ini bertujuan untuk mengidentifikasi pengalaman pengguna dalam menggunakan aplikasi u.id, serta memberikan solusi desain antarmuka alternatif menggunakan metode User-Centered Design. Batasan penelitian ini adalah masyarakat Indonesia yang mempunyai koneksi internet dan memiliki Kartu Tanda Penduduk. Evaluasi dilakukan dengan menggunakan metode mixed-methods, yaitu menggabungkan analisis data kuantitatif dengan data kualitatif. Data kuantitatif diperoleh dengan menggunakan kuesioner System Usability Scale (SUS) yang didistribusikan secara daring, sedangkan data kualitatif diperoleh dengan menggunakan wawacara kontekstual. Hasil dari evaluasi tersebut diperoleh tiga persona dan menunjukkan bahwa usability aplikasi u.id kurang baik. Pemetaan kebutuhan perbaikan dilakukan terhadap Shneiderman’s Eight Golden Rules of Interface Design. Rancangan desain alternatif dibuat berdasarkan solusi dari kebutuhan perbaikan yang kemudian dievaluasi kembali menggunakan usability testing, SUS, dan Single Ease Question (SEQ). Hasil evaluasi desain alternatif memberikan penilaian baik dari perhitungan success rate usability testing, SUS, dan SEQ.

---

Many applications using Single Sign-On (SSO) as their methods for user registrasion. Pengelola Nama Domain Internet Indonesia (PANDI), as Indonesia registry (.id) manager, build a SSO account system using identity number as user validation to make sure the account is unique. However, u.id application according to PANDI stakeholders have low usability. Therefore, there is a need for usability evaluation and solutions from the evaluations. The study aims to find out user experience on using u.id application and provide alternative design using User-Centered Design approach. Study limitations are peoples from Indonesia whose have an internet connection and identity card. Evaluation is done using mixed-methods, by combining quantitative data with qualitative data. Quantitave data obtained using online questionnaire with System Usability Scale (SUS), while qualitative data obtained using contextual interview. Result from the evaluation obtained three personas and shows that u.id application have low usability. Mapping of improvement needs is carried out on Shneiderman’s Eight Golden Rules of Interface Design. Alternative design made using solutions from mapping of improvement needs and then re-evaluate using usability testing, SUS, and Single Ease Question (SEQ). Results from alternative design evaluation obtained a good result from calculation in usability testing success rate, SUS, and SEQ."

"Software Product Line Engineering (SPLE) adalah sebuah paradigma untuk membuat aplikasi menggunakan platform dan memiliki keleluasaan dalam melakukan kustomisasi. Saat ini, lab RSE (Reliable Software Engineering) Fakultas Ilmu Komputer Universitas Indonesia sudah membuat perangkat untuk pembuatan aplikasi web dengan menggunakan konsep SPLE bernama SPLELive. Pada SPLELive, sudah terdapat generator tampilan (frontend generator) yang akan melakukan automasi pembuatan tampilan aplikasi web dengan kustomisasi yang dipilih. Tampilan yang dihasilkan dari frontend generator SPLELive akan dimodelkan menggunakan Interaction Flow Modeling Language (IFML) untuk memudahkan automasi pembuatan tampilan. Penelitian ini menambahkan konsep Redux pada frontend generator SPLELive yang menghasilkan kode tampilan dengan framework React. Kode tampilan tersebut dihasilkan dengan menggunakan model IFML sebagai input dari frontend generator. Pada frontend generator, model IFML akan dirubah menjadi kode React dengan aturan transformasi yang sudah ada pada penelitian sebelumnya. Saat proses perubahan tersebut, akan ditambahkan konsep Redux pada aturan transformasi sehingga akan menghasilkan kode React dengan konsep Redux. Untuk menguji hasil kode tampilan, penelitian ini akan membandingkan kode React yang sudah ditambahkan Redux dan yang tidak menggunakan Redux. Berdasarkan perbandingan kedua hasil kode tampilan, penelitian ini sudah berhasil membuat kode tampilan yang memiliki pengaturan state (state management) pada komponen dan pemeliharaan kode (maintainability code) yang lebih baik.

---

Software Product Line Engineering (SPLE) is a paradigm for making software using platforms and having flexibility in customization. RSE (Reliable Software Engineering) Lab Faculty of Computer Science Universitas Indonesia already creates tools for automatically making web applications with customization. In SPLELive tools, there is a frontend generator that automatically makes user interface with customization that was chosen before. The user interface produced by frontend generator SPLELive will be modeled by Interaction Flow Modeling Language (IFML) to make it easier to build. This research will develop frontend generator tools SPLELive, which provides code with framework React by adding Redux. That code is generated from the frontend generator that uses IFML as an input. In the frontend generator, IFML Model will transform to React code with transformation rule that already made by previous research. During the transformation process, the transformation rule will add the Redux concept to make React code with the Redux concept. To test the generated user interface’s code, the code that uses React with Redux and without Redux will be compared. Based on the comparison between the two results, this research successfully makes the user interface that has better state management and maintainability code."