Hasil Pencarian  ::  Simpan CSV :: Kembali

"Terdapat aplikasi-aplikasi yang mempunyai kesamaan dalam hal fitur-fitur namun berbeda dalam fungsi. Hal ini memotivasi penggunaan Software Product Line Engineering (SPLE). SPLE menentukan fitur-fitur yang umum dan bagaimana fitur-fitur tersebut menghasilkan aplikasi yang bervariasi. Aplikasi SPLE dapat digunakan sebagai layanan pembuatan web. Namun, menjalankan banyak aplikasi produk memerlukan suatu sistem monitoring untuk memantau semua aplikasi. Penelitian ini mencoba menangkal permasalahan tersebut dengan menerapkan sistem monitoring yang terpusat. Sistem monitoring ini diterapkan untuk memonitor dan mendeteksi masalah dalam menjalankan aplikasi produk. Problem tersebut dapat berupa masalah performa dan error dari aplikasi, aplikasi tidak berjalan, atau kekurangan kapasitas CPU, memori, dan disk. Aplikasi produk dimonitor dengan mendapatkan metrik yang menggambarkan performa aplikasi. Log dari aplikasi produk juga didapatkan untuk membantu debugging suatu problem yang timbul. Pada sistem ini, terdapat Prometheus, Promtail, dan Loki yang berperan dalam mengumpulkan metrik dan log. Data yang sudah dikumpulkan ini diakses oleh Grafana untuk visualisasi data dan mendeteksi problem yang terjadi. Untuk memverifikasi kinerja sistem sebagai jawaban dari masalah utama penelitian ini, sistem ini diujikan dalam beberapa skenario. Terdapat 3 jenis skenario yang diujikan, skenario matinya aplikasi produk atau aplikasi monitoring, skenario penggunaan CPU, memori, dan disk yang tinggi, serta skenario terjadinya error dalam aplikasi produk. Penelitian juga menganalisis Beban sistem monitoring dan kemungkinan penerapan monitoring sebagai variabilitas dalam SPLE. Dengan penerapan ini, diharapkan sistem monitoring dapat mendeteksi problem dan membantu developer dalam menyelesaikan problem. Penelitian ini diharapkan dapat membuktikan bahwa monitoring dapat diterapkan ada SPLE.

---

There are applications that are similar in terms of features but different in functionality. This motivates the use of Software Product Line Engineering (SPLE). SPLE defines common features and how they result in varied applications. SPLE applications could be used as web development services. However, running many product applications requires a monitoring system to monitor all applications. This research tries to counteract the problem by implementing a centralized monitoring system. This monitoring system is implemented to monitor and detect problems in running applications. These problems can be in the form of performance issues and errors from the application, the application not running, or lack of CPU, memory, and disk capacity. Applications are monitored by obtaining metrics that describe application performance. Logs of applications are also obtained to help debug a problem that arises. In this system, Prometheus, Promtail, and Loki are responsible for collecting metrics and logs. The data that has been collected is accessed by Grafana for data visualization and problem detection. To verify the performance of the system as an answer to the main problem of this research, this system is tested in several scenarios. There are 3 types of scenarios tested, unexpected application shutdown, high resource usage, and error occurrence in applications. The research also analyzed the resource usage by monitoring system and the possibility of implementing monitoring options as a variability in SPLE. With this implementation, it is expected that the monitoring system can detect problems and assist the developers in solving problems. This research is expected to prove that monitoring can be applied to SPLE."

"Pada era digital, website merupakan salah satu kebutuhan bagi suatu organisasi untuk mengelola data atau branding bagi organisasi tersebut. Namun, tidak semua organisasi memiliki sumber daya yang memadai untuk membangun website. PRICES-IDE hadir sebagai web framework yang dapat membuat web application secara semi-automatic menggunakan metode Software Product Line Engineering (SPLE) yang artinya memanfaatkan commonality dan variability dari produk tersebut. Salah satu case study dari PRICES-IDE adalah Amanah yang bertujuan untuk membantu organisasi amal dalam menghasilkan sistem. Metode SPLE dapat mempercepat developer dalam membuat berbagai macam variasi produk Amanah. Namun, saat ini proses deployment produk Amanah masih manual, mulai dari mempersiapkan artifacts hingga menjalankan proses back-end dan Json-Server di server. Hal tersebut dapat memperlambat proses development suatu produk. Pada penelitian kali ini akan dilakukan otomasi deployment untuk produk Amanah dengan requirements saat ini. Kemudian, permasalahan selanjutnya adalah saat ini jalannya produk-produk Amanah masih sangat bergantung dengan environment server. Maka dari itu, pada penelitian ini juga akan menghilangkan dependensi antara produk dengan environment server dengan cara melakukan kontainerisasi untuk setiap produk. Selain itu, akan dilakukan percobaan untuk meningkatkan efisiensi disk usage untuk setiap produk kontainer. Ansible akan digunakan sebagai tool untuk melakukan otomasi deployment tersebut. Dengan Ansible implementasi deployment untuk produk SPLE menjadi lebih mudah dalam rekonfigurasi alur deployment, karena setiap task sudah dikelompokkan berdasarkan role-nya masing-masing. Kemudian, pada penelitian ini terdapat tiga metode otomasi deployment yang dihasilkan, yaitu Systemd, One-Container, dan Two-Containers. Dari ketiga metode tersebut, Metode Systemd merupakan metode yang memiliki penambahan size yang cukup kecil untuk setiap produknya dan waktu deployment-nya relatif lebih cepat dibandingkan dua metode lainnya. Akan tetapi, Metode Systemd masih sangat bergantung dengan environment server. Sedangkan, dua metode lainnya sudah menggunakan teknologi kontainer untuk setiap produk.

---

Website is a need for any organization to organize their data or branding for the organization itself. But, not all of the organization has the resources to build a website. PRICES-IDE is the answer to that problem. PRICES-IDE is a web framework that can generate web applications semi-automatically by using the software product line engineering (SPLE) paradigm. SPLE is a method to develop software that embraces commonality and variability from the products. The case study of PRICES-IDE is Amanah. By using SPLE the developers can build any kind of Amanah products faster. Yet, currently the deployment process of Amanah products is still manual, from preparing the artifacts until running back-end and Json-Server processes in the server. This deployment process will slow down the development of Amanah products. This research will automate the deployment process for Amanah products with the most recent requirement. Not only automate the deployment but this research will also containerize each running product in the server. By containerizing each product, the product can run its processes without being affected by the server environment. Ansible will be used as a tool for doing the automation deployment. Ansible will make the deployment become much easier to reconfigure and automate because every deployment task has been grouped based on their role. This research will produce three deployment automation methods, those are Systemd, One-Container, and Two-Containers. Based on those methods, Systemd is the method that has the smallest size increment for each product than others. But, Systemd method still depends on the server environment for running the products. Unlike, the other two methods that have been using containers for each product."

"Software Product Line Engineering (SPLE) adalah paradigma pengembangan perangkat lunak yang menggunakan pendekatan common platform dan mass customization yang mampu mengurangi waktu dan tenaga dalam pengembangan perangkat lunak. Untuk mendukung pengembangan produk dengan paradigma SPLE, Precise Requirement Changes Integrated System (PRICES) dikembangkan dan diintegrasikan dengan Integrated Development Environment (IDE) berbasis Eclipse menjadi PricesIDE. Pada PricesIDE antarmuka perangkat lunak akan dimodelkan dengan diagram Interaction Flow Modeling Language (IFML). Penelitian ini bertujuan untuk menghasilkan Plug-in pada PricesIDE yang berfungsi untuk mentransformasi IFML ke React yang sebelumnya dikembangkan berbasis Python. Pada penelitian ini, Plug-In UI Generator dikembangkan dengan Acceleo pada Eclipse agar dapat diintegrasikan dengan PricesIDE. UI Generator juga dikembangkan lebih lanjut agar dapat mendukung berbagai metode saat pemanggilan HTTP dan juga mengatasi adanya foreign key pada basis data. Pengembangan lanjut ini akan dilakukan modifikasi terhadap IFML diagram dan aturan transformasi yang telah didefinisikan sebelumnya. UI Generator akan diuji untuk menghasilkan produk yang sama dengan sebelumnya dengan penambahan fitur laporan tahunan. Melalui eksperimen yang dilakukan, dapat disimpulkan bahwa UI Generator yang dikembangkan pada penelitian ini berhasil menghasilkan website yang sudah mendukung perbedaan metode HTTP dan mampu menangani adanya foreign key

---

Software Product Line Engineering (SPLE) is a software development paradigm that uses a common platform and mass customization approach to reduce software development time and effort. To support software development with SPLE, Precise Requirement Changes Integrated System (PRICES) was developed and integrated with the Eclipse-based Integrated Development Environment (IDE) into PricesIDE. In PricesIDE, the software user interface needs to be modeled with an Interaction Flow Modeling Language (IFML) diagram. This research aims to produce a Plug-in in PricesIDE to transform IFML into ReactJS, which was previously developed with Python. In this research, UI Generator Plug-in was developed with Acceleo in Eclipse, which can be integrated into PricesIDE. UI Generator was further developed to support various HTTP methods and overcome the existence of foreign keys. The IFML diagram and the previous transformation rules will be modified in this further development. UI Generator will be tested to produce the same product as before with the addition of the annual report feature. From this experiment, it can be concluded that UI Generator developed in this research succeeded in generating a website that supported the difference in HTTP methods and the existence of foreign keys."

"Supply chain management (SCM) adalah rangkaian proses pengelolaan barang mentah hingga dapat digunakan oleh pelanggan. Salah satu hal yang mendukung jalannya SCM adalah arus informasi, yang didukung dengan adanya teknologi informasi. Kebutuhan akan variasi teknologi informasi untuk SCM semakin tinggi mengingat adanya banyak pilihan strategi perusahaan untuk SCM. Untuk mengatasi banyaknya variasi tersebut salah satu metode pengembangan teknologi informasi yang dapat mempermudah proses pengembangannya adalah software product line engineering (SPLE). Pada penelitian ini dikembangkan sebuah aplikasi front-end dengan metode SPLE. SPLE yang dilakukan menggunakan metode dan tools dari PRICES-IDE. Dalam pengembangan aplikasi front-end implementasi SPLE di PRICES-IDE dilakukan dengan menggunakan diagram Interaction Flow Modelling Language - Delta Oriented Programming IFML-DOP. Diagram IFML-DOP tersebut menjadi salah satu masukan dari UI Generator yang akan menghasilkan aplikasi front-end dengan kerangka React. Pada penelitian ini dikembangkan 4 produk dengan kombinasi fitur yang berbeda dengan menggunakan IFML-DOP yang sama. Untuk mendukung tujuan penelitian, dari produk yang dihasilkan akan dilakukan analisis melalui uji coba fungsional dan analisis antarmuka. Uji coba fungsional dilakukan dengan menggunakan SeleniumIDE sementara analisis antarmuka dilakukan dengan melakukan perbandingan dengan Odoo dengan kriteria 8 golden rules. Selain itu, juga dilakukan evaluasi kerja dengan menyesuaikan apa yang ada di PRICES-IDE dengan kriteria SPLE. Dari ketiga evaluasi tersebut didapati masih ada peluang perbaikan untuk PRICES-IDE dan produk SCM.

---

Supply chain management (SCM) is the process of managing raw materials until they are ready for use by customers. Information plays a crucial role in SCM, which is supported by information technology. The need for variations in information technology for SCM is increasing considering that there are many company strategy can be choices for SCM. One approach in software development to address this diversity is software product line engineering (SPLE). In this study, a front-end application was developed using the SPLE method. Specifically, this study utilized methods and tools from PRICES-IDE. In the development of the front-end application, the implementation of this concept is carried out using the Interaction Flow Modelling Language - Delta Oriented Proramming (IFML-DOP) diagram. The IFML-DOP diagram serves as one of the inputs to the UI Generator, which will generate the front-end application with the React framework. In this research, 4 products were developed with different feature combinations using the same IFML-DOP. To support the objectives of this research, product analysis will be carried out through functional tests and user interface analysis. Functional testing was carried out using SeleniumIDE and user interface analysis was carried out by comparing with Odoo with 8 golden rules criteria. Moreover, work evaluation is also carried out by adjusting what is available in PRICES-IDE with SPLE criteria. From this three evaluations, it was found that there are still opportunities for improvement in PRICES-IDE and SCM products."

"Software Product Line Engineering (SPLE) adalah paradigma untuk mengembangkan produk yang bervariasi dengan memanfaatkan commonalities dan variabilities dari aplikasi-aplikasi yang berbeda. Untuk mendukung pengembangan user interface perangkat lunak menggunakan paradigma SPLE, diperlukan suatu abstraksi yang dapat memodelkan user interface. Dalam penelitian ini, teknologi yang akan digunakan untuk memodelkan abstraksi tersebut adalah Interaction Flow Modeling Language (IFML). IFML akan ditransformasikan menjadi kode front end menggunakan User Interface Generator (UI Generator). Dalam pengembangan aplikasi menggunakan paradigma SPLE, terdapat kebutuhan akan static page yang merupakan halaman web dengan konten yang tidak berbeda antara pengguna yang satu dengan yang lain. Untuk memanfaatkan SPLE dalam memenuhi kebutuhan akan pengaturan static page, dibutuhkan cara atau metode yang berbeda dari pengembangan static page biasa. Pada penelitian ini, penulis mengembangkan metode yang dapat digunakan untuk mengembangkan pengaturan static page yang terintegrasi dengan proses generator user interface. Metode tersebut disebut static page management. Penelitian ini masih mengutamakan fungsionalitas dan kemudahan implementasi, sehingga aspek security belum diperhatikan. Selain static page management, penelitian ini juga akan memperbaiki pemodelan SPLE menggunakan IFML. Pemodelan juga dikembangkan lebih lanjut untuk dapat mendukung unggah gambar dan pembatasan akses berdasarkan autentikasi pengguna. Untuk dapat mengakomodasi perubahan pada pemodelan tersebut, UI Generator juga perlu dikembangkan lebih lanjut. Static page management akan dievaluasi menggunakan User Acceptance Testing, yang dilakukan oleh penulis. Sedangkan pemodelan dan UI Generator akan dievaluasi menggunakan six quality criteria. Berdasarkan evaluasi dan eksperimen yang dilakukan, perbaikan pemodelan dan UI Generator sudah dapat digunakan untuk menghasilkan aplikasi front end yang dapat dijalankan dengan baik dan mengikuti desain tampilan terbaru.

---

Software Product Line Engineering (SPLE) is a paradigm that takes advantage of the commonalities and variabilities of different applications to develop products. The development of software user interfaces using the SPLE paradigm needs an abstraction to model the user interface. In this study, the technology used to model the abstractions is the Interaction Flow Modeling Language (IFML). IFML will be transformed into front-end code using the User Interface Generator (UI Generator). In developing applications using the SPLE paradigm, there is a need for static pages. To utilize SPLE on the need for static page management, a different way or method from developing ordinary static pages is needed. In this research, the researchers develop a method called static page management. The static page management is integrated with the user interface generation process. This research will prioritize functionality and ease of implementation. Apart from static page management, this research will also improve SPLE modeling using IFML. The existing modeling is also further developed to support image uploads and access restrictions based on user authentication. UI Generator also needs to be further developed, to accommodate changes in the modeling. The evaluation of static page management is carried out using User Acceptance Testing conducted by the author. While modeling and UI Generator are evaluated using six quality criteria. Based on the evaluation and experiments, the researchers can conclude that modeling improvements and the UI Generator can be used to produce front-end applications that can run properly and follow the latest user interface designs."

"Software Product Line Engineering (SPLE) merupakan paradigma untuk mengem- bangkan aplikasi perangkat lunak berbasis platform dan kustomisasi masal. SPLE memanfaatkan commonality antar aplikasi yang termasuk dalam satu product line dan secara sistematis mengatasi variability antar aplikasi-aplikasi tersebut. SPLE digunakan dalam mengembangkan Amanah, layanan aplikasi untuk menghasilkan situs web bagi organisasi nirlaba secara otomatis. Penelitian terdahulu mengembangkan front-end Amanah menggunakan dua plug-in: UI Generator dan FeatureIDE-WinVMJ Composer. UI Generator merupakan plug-in untuk mentransformasi pemodelan abstrak user inter- face dengan Interaction Flow Modelling Language (IFML) menjadi aplikasi React yang dipakai sebagai front-end Amanah. Namun, pemodelan IFML ini belum menerapkan konsep SPLE secara tepat karena prinsip commonality dan variability belum diterapkan antar tur Amanah. Penelitian ini mengusulkan pengubahan pemodelan IFML dengan menerapkan konsep Delta-Oriented Programming (DOP). Dengan menerapkan DOP, UI Generator juga akan diubah agar dapat mentransformasi IFML berbasis DOP. Di sisi lain, plug-in FeatureIDE-WinVMJ Composer digunakan untuk menghasilkan aplikasi back-end serta menu dan rute halaman pada aplikasi front-end. Namun, hal ini melanggar prinsip Separation of Concern sehingga dalam penelitian ini menu dan rute halaman akan diintegrasikan ke plug-in UI Generator. Perubahan pemodelan IFML dan UI Generator dianalisis dan dievaluasi dengan six quality criteria dan functional testing. Hasil dari analisis dan evaluasi menunjukkan bahwa pemodelan IFML dan UI Generator terbaru telah menerapkan konsep SPLE secara tepat serta menu dan rute halaman berhasil terintegrasi pada UI Generator.

---

Software Product Line Engineering (SPLE) is a paradigm to develop software applica- tions using common platform and mass customization. SPLE uses commonality between software applications in a product line and systematically handles its variability. SPLE paradigm is used to develop Amanah, a service to generate websites for non-pro t organizations automatically. Previous studies have succeeded to develop Amanah’s frontend using two plugins: UI Generator and FeatureIDE-WinVMJ Composer. UI Generator is a plugin to transform an abstract user interface model using Interaction Flow Modelling Language (IFML) to React application. However, the commonality and variability concept in SPLE that exists between Amanah’s features have not been implemented in this IFML model. This study proposed a change to the IFML model to implement SPLE correctly by applying Delta-Oriented Programming (DOP) concept. With DOP applied in IFML, the UI Generator also needs to be changed so that it can transform the IFML-DOP model. On the other hand, FeatureIDE-WinVMJ Composer is a plugin to generate backend application and also menu and routes in the frontend application. This two process violates Separation of Concerns Principle so this study will integrate the menu and routes generation to UI Generator. The changes made in both IFML model and UI Generator are analyzed and evaluated with six quality criteria of SPLE and functional testing. The result shows that the modi ed IFML and UI Generator has implemented SPLE correctly and the integration of menu and routes has been applied successfully in UI Generator."

"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 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."

"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."