Automatic Code Generation: Transformasi Model BPMN menjadi komponen React.js Berbasis Rules Based dan Large Language Model.

Gultom, Joseph Marcell (2026) Automatic Code Generation: Transformasi Model BPMN menjadi komponen React.js Berbasis Rules Based dan Large Language Model. Other thesis, Institut Teknologi Sepuluh Nopember.

Text 5025221279-Undergraduate_Thesis.pdf - Accepted Version Restricted to Repository staff only Download (4MB) | Request a copy

Abstract

Business Process Model and Notation ( BPMN ) sebagai representasi model proses bisnis sering kali menghadapi ambiguitas semantik eksekusi karena kurangnya definisi formal, sehingga transformasi manual ke implementasi frontend seperti React berpotensi menimbulkan inkonsistensi logika dan kesenjangan antara analis bisnis dengan pengembang perangkat lunak. Ketiadaan standar elemen visual menyebabkan kesulitan pembangkitan kode antarmuka yang akurat yang mana pendekatan rule based saat ini masih terbatas pada level konseptual tanpa dukungan pemodelan data persisten. Tugas akhir ini mengembangkan kerangka kerja hybrid berbasis rule based dan Large Language Model (LLM) untuk transformasi model BPMN menjadi proyek React secara otomatis. Pendekatan ini menerjemahkan elemen BPMN, yaitu flow objects, connecting objects, events, dan swimlane ke dalam struktur modular React yang mencakup halaman, navigasi, state management Zustand, serta routing React Router. Metodologi tugas akhir meliputi tiga tahap utama, yaitu (1) persiapan dataset yang mencakup transformasi model BPMN ke Intermediate Representation 1 (IR1) dengan preservasi semantik, pengembangan algoritma transformasi IR1 ke IR2, dan pembuatan 562 baris data latih format ChatML dari 16 diagram BPMN, (2) pemrosesan LLM melalui Supervised Fine-Tuning (SFT) dengan teknik Quantized Low-Rank Adaptation (QLoRA) dan Structured Chain-of-Thought prompting pada model Qwen2.5-Coder-14B untuk meningkatkan kualitas sintesis kode halaman, serta (3) pengembangan sistem pembangkit kode otomatis yang mengintegrasikan frontend Next.js, backend Python Flask, dan layanan inferensi LLM Ollama. Evaluasi dilakukan melalui empat metode, yaitu (1) konfirmasi pemetaan elemen BPMN ke IR2 menggunakan metrik precision, recall, dan F1-score yang menghasilkan nilai 100% pada seluruh tujuh objek uji di lima diagram sampel, (2) pengujian fungsionalitas menggunakan Playwright yang menunjukkan seluruh aplikasi lulus tanpa error dan metrik pass@k dengan pass@1 berkisar 40 –70% serta pass@10 mencapai 100%, (3) evaluasi kualitas subjektif kode melalui LLM as Judge oleh tiga model juri yang menghasilkan rerata skor kelengkapan semantik 4.35 – 4.55 pada skala Likert 1 – 5, serta (4) uji usabilitas terhadap pengguna perwakilan dengan tingkat keberhasilan tugas 100%. Tugas akhir ini memberikan kontribusi berupa kerangka kerja transformasi model visual BPMN ke kode eksekusi antarmuka modern React.js melalui pendekatan hybrid yang menjamin akurasi pemetaan melalui komponen deterministik dan kualitas visual melalui komponen LLM.
==============================================================================================================================
Business Process Model and Notation (BPMN) as a representation of business process models often encounters execution semantic ambiguity due to the lack of formal definitions, leading to potential logical inconsistencies and gaps between business analysts and software developers during manual transformation into frontend implementations such as React.js. The absence of visual element standards causes difficulties in generating accurate interface code, where current rule-based approaches remain limited to the conceptual level without support for persistent data modeling. This final project develops a hybrid framework based on rule-based methods and Large Language Models (LLMs) for automatically transforming BPMN models into React.js projects. The approach translates BPMN elements, namely flow objects, connecting objects, events, and swimlanes, into a modular React.js structure that includes pages, navigation, Zustand state management, and React Router routing. The methodology of this final project consists of three main stages: (1) dataset preparation, encompassing the transformation of BPMN models into Intermediate Representation 1 (IR1) with semantic preservation, development of algorithms for transforming IR1 into IR2, and creation of 562 ChatML-formatted training data rows from 16 BPMN diagrams; (2) LLM processing through Supervised Fine-Tuning (SFT) using Quantized Low-Rank Adaptation (QLoRA) and Structured Chain-of-Thought prompting on the Qwen2.5-Coder-14B model to improve page code synthesis quality; and (3) development of an automatic code generator system integrating a Next.js frontend, Python Flask backend, and Ollama LLM inference service. Evaluation was conducted through four methods: (1) confirmation of BPMN element mapping to IR2 using precision, recall, and F1-score metrics, achieving 100% across all seven test objects on five sample diagrams; (2) functionality testing using Playwright, which demonstrated that all applications passed without errors, and pass@k metrics with pass@1 ranging from 40–70% and pass@10 reaching 100%; (3) subjective code quality evaluation through LLM as Judge by three judge models, yielding the highest average semantic completeness score (4.35–4.55 on a 1–5 Likert scale); and (4) usability testing with non-IT representative users achieving a 100% task success rate. This final project contributes a framework for transforming visual BPMN models into modern React.js interface execution code through a hybrid approach that ensures mapping accuracy via deterministic components and visual quality via LLM components.

Item Type:	Thesis (Other)
Uncontrolled Keywords:	BPMN 2.0, React.js, Rule-Based, LLM, Qwen2.5-Coder-14B, Supervised Fine-Tuning, Chain of Thought, Model Driven Development.
Subjects:	Q Science > QA Mathematics > QA336 Artificial Intelligence Q Science > QA Mathematics > QA76.758 Software engineering T Technology > T Technology (General) > T58.5 Information technology. IT--Auditing
Divisions:	Faculty of Intelligent Electrical and Informatics Technology (ELECTICS) > Informatics Engineering > 55201-(S1) Undergraduate Thesis
Depositing User:	Joseph Marcell Gultom
Date Deposited:	28 Jul 2026 03:30
Last Modified:	28 Jul 2026 03:30
URI:	http://repository.its.ac.id/id/eprint/138357

Actions (login required)

View Item