Hasil Pencarian  ::  Simpan CSV :: Kembali

"Pada masa kini, kebutuhan masyarakat semakin bertambah dan beragam. Dengan kemajuan teknologi, seluruh kebutuhan masyarakat dapat terpenuhi dengan menggunakan aplikasi berbasis web atau mobile. Aplikasi yang dihasilkan merupakan hasil dari tahapan-tahapan pada pengembangan perangkat lunak yang menggunakan berbagai kerangka kerja. Salah satu kerangka kerja yang dapat digunakan adalah scrum. Di dalam menggunakan scrum, kinerja pengembang perangkat lunak harus dipantau menggunakan beberapa metrics agar proses pengembangan perangkat lunak dapat berjalan dengan baik dan menghasilkan produk yang bagus. Pada penelitian ini, akan dibahas mengenai metrics yang dapat digunakan untuk memantau kinerja pengembang perangkat lunak, eksperimen yang dilakukan pada pembuatan metrics, aplikasi yang berisi metrics untuk digunakan sebagai pemantau kinerja pengembang perangkat lunak berbasis scrum, evaluasi aplikasi yang sudah dibuat, dan kesimpulan dari penelitian yang sudah dilakukan.

---

In recent days, community needs are increasing and diverse. With the advanced technology, almost every community needs can be fulfilled with mobile or web based apps. Those apps are produced by implementing some steps of software development process with a framework. One of frameworks that can be used is Scrum. In using Scrum as framework, performance of scrum team must be monitored using some metrics, so that software development process can be good and the product that being produced are good as well. In this research, will be covering the area of metrics that can be used for monitoring performance of scrum team in software development process, experiment that being done to create the metrics, app that contains metrics to monitor the scrum team progress, evaluate the app, and summary of the research that has been done."

"Software Product Line Engineering (SPLE) merupakan paradigma untuk mengembangkan aplikasi perangkat lunak dengan memanfaatkan aspek commonality dan variability. Dengan menggunakan paradigma ini, waktu dan biaya yang dibutuhkan dalam mengembangkan product line menjadi lebih efektif. Pengembangan product line berbasis web ini didukung oleh suatu development framework bernama PRICES-IDE yang dikembangkan pada penelitian sebelumnya. Adapun tujuan dari development framework tersebut, yaitu untuk menghasilkan product line berbasis web secara otomatis. Pada PRICES-IDE, pengembangan product line membutuhkan abstrak user interface (UI) yang dimodelkan dengan Interaction Flow Modeling Language (IFML). Penelitian sebelumnya telah menerapkan konsep Delta-Oriented Programming (DOP) ke dalam pemodelan IFML suatu product line dengan tujuan menghindari pemodelan berulang komponen-komponen yang sama pada fitur-fitur sejenis. Pemodelan tersebut dikenal dengan pemodelan IFML-DOP. Namun, pemodelan tersebut masih belum menerapkan konsep SPLE secara tepat karena belum semua elemen IFML-DOP diimplementasikan pada IFML Editor. Dengan demikian, dalam penelitian ini, akan diimplementasikan elemen-elemen tersebut serta dilanjutkan dengan proses refactoring terhadap pemodelan IFML-DOP. Elemen-elemen IFML-DOP yang baru diimplementasikan tersebut belum dikenali oleh User Interface Generator sehingga perlu dilakukan penyesuaian agar dapat mengakomodasi pemodelan IFML-DOP tersebut. Evaluasi pada penelitian ini dilakukan dengan menganalisis generated aplikasi serta mengevaluasinya dengan Six Quality Criteria dan functional testing. Hasil yang diperoleh dari eksperimen dan evaluasi menunjukkan bahwa seluruh elemen IFML-DOP telah berhasil ditambahkan pada IFML Editor, elemen-elemen IMFL-DOP telah berhasil dikenali dan ditransformasikan oleh UI Generator, serta telah berhasil menghasilkan aplikasi berbasis web yang bebas dari error.

---

Software applications development with Software Product Line Engineering (SPLE) can minimize the required time and costs because of commonality and variability aspects. Previous research presented PRICES-IDE as a development framework to generate web-based product lines automatically. In PRICES-IDE, user interface in web-based product lines requires an abstract modeling language called Interaction Flow Modelling Language (IFML). In previous research, Delta-Oriented Programming (DOP) was applied to IFML modeling in order to avoid repeated modeling of the same components on similar features, later known as IFML-DOP modeling. That modeling hasn’t fully applied SPLE concept correctly because IFML-DOP elements haven’t been implemented in the IFML Editor. To solve that problem, this research will implement the rest of IFML-DOP elements and use those elements inside existing IFML-DOP modeling. Because User Interface (UI) Generator does not recognize new elements, this research will also make some adjustments to accommodate this enhanced IFML-DOP modeling. Evaluation will be done by analyzing the generated applications through six quality criteria and functional testing. This research shows that all IFML-DOP elements have been successfully added to the IFML Editor, the UI Generator can recognize and transform these elements, and resulting a clean web-based application."

"Developer aplikasi web biasanya akan meniru dan memodifikasi sistem yang sudah ada. Hal tersebut terjadi karena sistem aplikasi web tidak jauh berbeda satu dengan yang lainnya. Namun, masalah timbul saat sistem yang ditiru mengalami perubahan. Aplikasi web yang menggunakan sistem tersebut perlu mengalami perubahan dan penyesuaian kembali. Permasalahan tersebut dapat diselesaikan dengan paradigma pengembangan bernama Software Product Line Engineering (SPLE). SPLE melihat domain dan variasi sistem yang dimiliki domain sebagai suatu product family yang mengklasifikasikan produk-produknya berdasarkan kemiripan dan perbedaan antara setiap variasi produk. Salah satu studi kasus penerapan SPLE pada aplikasi web adalah Amanah, yaitu sebuah web generator untuk organisasi amal yang memanfaatkan teknologi Prices-IDE untuk membangkitkan aplikasi web. Amanah menggunakan WinVMJ untuk membangkitkan back end dan IFML untuk abstraksi front end dari produk Amanah. Fitur yang dihasilkan penelitian ini dievaluasi mengguanakan user acceptance test dan six quality criteria. WinVMJ dan IFML berhasil menjadi tool yang menerapkan paradigma SPLE dalam pengunaannya. Dihasilkan UML diagram dari pengembangan fitur pada penelitian ini. Selain itu, adanya penambahan fitur pada WinVMJ untuk peningkatan WinVMJ sebagai web framework.

---

Web application developers will usually clone and modify existing systems. It happens because web application systems are not much different from one another. However, problems arise when the cloned system change. The web application that uses the system needs to readjust following the changes. We can use a development paradigm called Software Product Line Engineering (SPLE) to solve that problem. SPLE sees the domain and the variety of systems owned by the domain as a product family that classifies its products based on the commonalities and variabilities between each product variation. One of the case studies of SPLE application in development of web applications is Amanah, a web generator for charity organizations that uses Prices-IDE technology to generate web applications. Amanah uses WinVMJ to produce the back end and IFML to abstract the front end. The features developed in this research were evaluated using six quality criteria and user acceptance tests. WinVMJ and IFML succeeded in becoming tools that apply the SPLE paradigm. This research also produced UML diagrams for the developed features. In addition, there are improvements in WinVMJ as a web framework."

"Indonesia menempati posisi ke-3 dengan tingkat tindakan phishing tertinggi di Asia Tenggara pada masa pandemic COVID-19. Kenaikan jumlah kasus phishing di Indonesia mendorong munculnya kebutuhan untuk mengevaluasi seberapa jauh kesadaran pengguna internet di Indonesia terhadap tindakan phishing. Evaluasi empiris dilakukan dengan melibatkan pengguna internet di Indonesia menggunakan pendekatan survei multiskenario. Skenario-skenario yang dirancang dibuat agar sesuai dengan pengalaman pengguna internet Indonesia sehari-hari. Sejumlah 139 responden berpartisipasi dengan nilai rata-rata performa pengerjaan kuesioner sebesar 7,12. Kesadaran pengguna internet di Indonesia terhadap phishing sudah cukup baik. Namun, terdapat beberapa skenario yang jarang dijawab dengan benar oleh para responden yang akan diulas dalam penelitian ini. Selain menyajikan hasil evaluasi empiris, penelitian ini juga merumuskan rekomendasi atau strategi untuk pengembangan perangkat lunak pembelajaran pencegahan phishing. Berdasarkan hasil wawancara dan analisis kuesioner, diperoleh insights berupa topik bahasan yang dapat menjadi fokus pembelajaran phishing dan bentuk perangkat lunak yang diharapkan responden. Setelah memberikan rekomendasi, prioritas penyusunan topik pembelajaran dan bentuk pembelajaran juga diusulkan. Urutan penyusunan topik pembelajaran dan bentuk pembelajaran juga diusulkan. Urutan prioritas untuk topik pembelajaran adalah: domain dan subdomain, typo squatting, dan pengetahuan mengenai keamanan dalam menggunakan layanan jasa keuangan. Urutan prioritas untuk bentuk pembelajaran adalah: implementasi gamifikasi, kuis skenario, forum, dan konten media.

---

Indonesia placed third on the highest phishing attempt in South East Asia during the COVID-19 pandemic era. The increase in the number of phishing cases in Indonesia has prompted the need to evaluate the extent to which internet users in Indonesia are aware of phishing attempt. The empirical evaluation was carried out by involving internet users in Indonesia using a multi-scenario survey approach. The scenarios are designed to fit the daily experience of everyday Indonesian internet users. A total of 139 respondents participated with an average score of 7.12 on the performance of the questionnaire. Awareness of internet users in Indonesia against phishing is quite good. However, there are several scenarios that are rarely answered correctly by the respondents that will be discussed in this study. In addition to presenting the result of the empirical evaluation, this study also formulates recommendations or strategies for the development of phishing prevention learning software. Based on the results of interviews and questionnaire analysis, insights are obtained in the form of topics that can be the focus of on phishing prevention and the form of software that respondents expect. After providing recommendations, priorities for the preparation of learning topics and forms of learning are also proposed. The order of priority for the learning topics are: domains and subdomains, typo squatting, and knowledge of security in using financial services. The order of priority for the forms of learning are: gamification implementation, scenario quizzes, forums, and media content."

"Video game pixel art pertama kali muncul karena keterbatasan perangkat keras pada komputer 8-bit dan 16-bit. Pada era 2000-an, video game pixel art diprediksi akan menghilang dengan berjalannya perkembangan perangkat keras. Namun, di luar prediksi tersebut video game bervisual pixel art masih mengalami kesuksesan hingga saat ini. Penelitian ini membahas tentang kesesuaian antara video game pixel art dari segi tampilan visual dan estetika, dengan sifat pixel art dan prinsip video game. Kesesuaian tersebut diukur dengan mengadaptasi instrumen Visual Aesthetics of Websites Inventory (VisAWI) ke dalam Bahasa Indonesia dan menyesuaikannya dengan konteks tampilan visual pada video game pixel art. Video game yang digunakan sebagai sebagai studi kasus adalah “Shovel Knight” dan “Shovel Knight Dig”. Data yang diperoleh dianalisis dan dikategorikan sesuai dengan sifat dan prinsip terkait, kemudian diinterpretasikan untuk menyusun seperangkat rekomendasi. Pada penelitian ini ditemukan bahwa kedua game sudah mengikuti semua properti dan prinsip terkait. Selain itu, responden memberikan peringkat yang lebih tinggi pada “Shovel Knight Dig” daripada “Shovel Knight” yang menunjukkan bahwa responden lebih menyukai game seni piksel yang lebih cerah, tidak padat, dengan tampilan visual yang halus atau jernih.

---

Pixel art video games first appeared due to hardware limitations of the 8-bit and 16-bit computers. In the 2000s, pixel-art games were predicted to disappear as hardware development progressed. However, pixel-art games are still experiencing success even recently. This study discusses the conformity between pixel art games in terms of visual display and aesthetics, with pixel art properties and game principles. This conformity is measured by adapting an instrument called Visual Aesthetics of Websites Inventory (VisAWI) into Bahasa Indonesia and adjusting it with the context of the visual displays of pixel-art video games. Video games used as the case study are “Shovel Knight” and “Shovel Knight Dig”. The data obtained are analysed and categorised in accordance with related properties and principles, then interpreted to compose a set of recommendations. This study found that both pixel-art games do follow all related properties and principles. Additionally, the respondents provide a higher rating on “Shovel Knight Dig” than “Shovel Knight” which indicates that they prefer pixel art games that are brighter, not dense, with a smooth or clear visual appearance."

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

"Ekspor dan impor merupakan kegiatan jual-beli barang antarnegara yang memerlukan dokumen bernama delivery order untuk mengirim barang. Di Indonesia kegiatan ini didukung oleh sistem single-window yang dinamakan INSW atau Indonesia National Single Window yang juga menangani pembuatan dokumen delivery order. Saat ini, dokumen permohonan delivery order perlu dilakukan verifikasi manual dua pihak yaitu INSW dan shipping line. Terdapat peluang pemanfaatan teknologi blockchain bernama smart contract untuk mengotomasi proses pembuatan dokumen delivery order tanpa memerlukannya verifikasi manual namun tetap memiliki persetujuan semua pihak terlibat. Penelitian merupakan simulasi proses bisnis delivery order berbasis blockchain dan smart contract, kemudian dianalisis aspek fungsionalitas, authentication, access control, dan reliability. Hasil dari simulasi yaitu proses bisnis delivery order tanpa verifikasi manual dapat diimplementasi menggunakan blockchain Hyperledger Fabric dengan tetap menjaga kepercayaan dan persetujuan semua pihak yang terlibat.

---

International trade require a document called delivery order before sending cargo to the expedition. In Indonesia, the trading activities are supported by a single-window system called INSW or Indonesia National Single Window, which also handles the creation of those documents. Currently, the verification of the delivery order application needs to be manually performed by two parties: INSW and Shipping Line. There is an opportunity to utilize blockchain technology, specifically smart contracts, to automate the process of creating delivery order documents without the need for manual verification while still ensuring the approval of all involved parties. The research involves simulating the delivery order process based on blockchain and smart contracts, then analyzing aspects of functionality, authentication, access control, and reliability. The result of the simulation shows that the delivery order process without the manual verification can be implemented using the Hyperledger Fabric blockchain while maintaining the trust and approval of all parties."

"Software Product Line Engineering (SPLE) adalah pendekatan sistematis untuk mengembangkan perangkat lunak dari sekumpulan produk perangkat lunak yang dapat digunakan ulang, yang disebut sebagai Software Product Line (SPL). Pengembangan perangkat lunak dengan metode tersebut memiliki banyak manfaat seperti berkurangnya waktu dan biaya untuk membuat produk perangkat lunak. Salah satu web framework yang mendukung pengembangan perangkat lunak menggunakan SPLE adalah WinVMJ. WinVMJ dirancang berdasarkan pendekatan variability module for java (VMJ) dan delta-oriented programming (DOP). WinVMJ menggunakan decorator pattern dan factory pattern untuk mengimplementasikan pendekatan DOP. WinVMJ juga menggunakan Object-Relational Mapping (ORM) Hibernate untuk memetakan objek ke dalam database. Namun ORM Hibernate dibangun untuk mendukung pemetaan inheritance, yaitu konsep sifat pewarisan behavior suatu objek ke subclass-nya. WinVMJ menggunakan decorator pattern sebagai design pattern, di mana suatu behavior objek dapat ditambahkan ke dalam objek yang sudah ada. Penggunaan decorator pattern ini menyebabkan beberapa masalah ketika memetakan objek WinVMJ ke dalam database. Untuk mengatasi ini, diperlukan desain strategi pemetaan yang baru agar objek dapat dipetakan dengan lebih baik ke dalam database. Proses perubahan dimulai dengan memilih desain strategi pemetaan yang cocok untuk memetakan objek WinVMJ yang dibuat dengan decorator pattern. Selanjutnya, desain strategi tersebut diimplementasikan dengan mengubah domain layer WinVMJ. Setelah itu, dilakukan percobaan menggunakan middleware untuk memetakan objek ke dalam database. WinVMJ yang sudah diubah diuji dengan mengimplementasikannya ke aplikasi yang sudah ada dan menggunakan unit test untuk memeriksa objek yang dihasilkan termasuk menguji operasi create, read, update, dan delete (CRUD). Hasilnya menunjukkan bahwa WinVMJ dapat memetakan objek ke dalam database dengan baik.

---

Software Product Line Engineering (SPLE) presents a structured methodology for creating software systems through reusable software products referred to as the Software Product Line (SPL). By adopting this approach, software development yields numerous advantages, including decreased time and costs involved in generating novel software products. One web framework that supports SPLE-based software development is WinVMJ, which builds upon the Variability Module for Java (VMJ) technique and delta-oriented programming (DOP). WinVMJ employs the decorator pattern and factory pattern to implement DOP. This design pattern, decorator pattern, permits the addition of behaviors to existing objects, contributing to WinVMJ's unique functionality. However, incorporating the Object-Relational Mapping (ORM) Hibernate into WinVMJ's architecture, a method for mapping objects to a database, presents a challenge due to Hibernate's orientation towards supporting inheritance mapping—where an object inherits traits from its superclass. Recognizing this challenge, a fresh mapping strategy is deemed necessary to achieve more effective object-to-database mapping in WinVMJ. The change process commences with selecting an appropriate mapping strategy for WinVMJ objects generated using the decorator pattern. Subsequently, the chosen mapping strategy is implemented by modifying WinVMJ's domain layer source code. Middleware is then employed to experiment with mapping objects to the database. The modified WinVMJ is rigorously tested by integrating it into existing applications and subjecting it to unit tests, which observe the behavior of the obtained objects. The testing procedure encompasses create, read, update, and delete (CRUD) operations, ensuring comprehensive evaluation. Remarkably, WinVMJ demonstrates successful object-to-database mapping capabilities.

"

"Automated test adalah otomatisasi dari aktivitas software testing menggunakan testing tool. Namun, pada kenyataannya, testing tool untuk melakukan automated test masih memiliki kekurangan. Berdasarkan wawancara dengan Tim Research and Development (Tim RnD) PT. Global Digital Niaga (Blibli), automated test pada Blibli dieksekusi secara berkala dengan bantuan automation server sehingga menghasilkan report yang terpisah-pisah. Hal tersebut disebabkan testing tool membuat satu report setiap kali test cases dieksekusi. Berdasarkan masalah tersebut, tim pengembang merealisasikan project “Error Book”, sebuah dashboard automated test error. Error Book memanfaatkan custom maven plugin dan Elastic Stack untuk mengelola data dari automated test secara real-time sehingga dapat disajikan pada aplikasi front-end dashboard. Dengan Error Book, Tim RnD akan lebih mudah untuk mendapatkan informasi mengenai error yang terjadi pada automated test secara keseluruhan. Informasi tersebut akan menjadi acuan untuk melakukan improvement. QA engineer akan lebih mudah mengidentifikasi error yang sering terjadi pada automated test milik divisinya sehingga perbaikan preventif dan represif untuk error tersebut dapat dilakukan dengan cepat. Tim pengembang telah melakukan user acceptance testing (UAT) kepada Tim RnD Blibli, QA engineer Blibli, dan QA engineer perusahaan lain.

---

Automated test is the automation of software testing activities using testing tools. However, in reality, testing tools to perform automated tests still have drawbacks. Based on interviews with the Research and Development Team (RnD Team) at PT. Global Digital Niaga (Blibli), automated tests at Blibli are executed periodically with the help of an automation server. Hence, it generates separate reports. This is because the testing tool creates one report each time a test case is executed. Based on this problem, we develop the “Error Book” project, an automated test error dashboard. Error Book utilizes a custom maven plugin and Elastic Stack to manage data from automated tests in real-time so that it can be presented in front-end dashboard application. With Error Book, the RnD team can get information about errors that occur in the automated test as a whole easier. This information will serve as a reference for making improvements. QA engineers can easily identify errors that often occur in their division's automated tests so that preventive and repressive repairs for these errors can be carried out quickly. We have carried out user acceptance testing (UAT) to Blibli RnD team, QA engineers at Blibli, and QA engineers at other companies."

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