Chulalongkorn University Theses and Dissertations (Chula ETD)
Other Title (Parallel Title in Other Language of ETD)
A model-driven development of web application frontend using nuxt framework
Year (A.D.)
2024
Document Type
Independent Study
First Advisor
ทวิตีย์ เสนีวงศ์ ณ อยุธยา
Faculty/College
Faculty of Engineering (คณะวิศวกรรมศาสตร์)
Department (if any)
Department of Computer Engineering (ภาควิชาวิศวกรรมคอมพิวเตอร์)
Degree Name
วิทยาศาสตรมหาบัณฑิต
Degree Level
ปริญญาโท
Degree Discipline
วิศวกรรมซอฟต์แวร์
DOI
10.58837/CHULA.IS.2024.291
Abstract
งานวิจัยฉบับนี้ได้นำเสนอวิธีการพัฒนาแบบอิงแบบจำลองเข้าเป็นส่วนช่วยในการพัฒนาส่วนฟรอนต์เอนด์ของเว็บแอปพลิเคชันผู้ใช้เฟรมเวิร์กนักซ์ โดยนำเสนอยูเอ็มแอลโพรไฟล์ของนักซ์เฟรมเวิร์กสำหรับการสร้างแบบจำลองของส่วนฟรอนต์เอนด์และนำเสนอกฎการแปลงในรูปแบบของแผ่นแบบสำหรับการแปลงแบบจำลองสู่โค้ดและจากโค้ดสู่แบบจำลอง โดยการแปลงจากแบบจำลองสู่โค้ดนั้นนักพัฒนาจำเป็นต้องเติมโค้ดตรรกะบางส่วนลงไปในโค้ดที่ได้จากการแปลงเพื่อทำให้ส่วนฟรอนต์เอนด์สามารถทำงานได้อย่างสมบูรณ์ ทั้งนี้งานวิจัยฉบับนี้ได้นำเสนอเครื่องมือการแปลงทั้งในส่วนของการแปลงแบบจำลองสู่โค้ดและโค้ดสู่แบบจำลอง รวมถึงการสร้างเว็บแอปพลิเคชันกรณีศึกษาเพื่อใช้ในการตรวจสอบการแปลง โดยการแปลงจากแบบจำลองสู่โค้ดได้ผ่านการตรวจสอบคุณภาพโค้ดโดยใช้โซนาร์คิวบ์ การเปรียบเทียบระหว่างการแปลงด้วยเครื่องมือจากแบบจำลองสู่โค้ดกับการเขียนโค้ดโดยดูจากแบบจำลองโดยนักพัฒนา ได้ผลว่าโค้ดสอดคล้องกันเฉลี่ย 89.23% เนื่องจากโค้ดของนักพัฒนาไม่ครบถ้วนตามแบบจำลองหรือไม่เป็นไปตามคู่มือของนักซ์ การวัดอัตราการแปลงเมื่อเทียบกับโค้ดที่เพิ่มตรรกะจนสมบูรณ์แล้วมีค่าเฉลี่ย 83.03% แสดงว่าโค้ดส่วนใหญ่ถูกสร้างขึ้นอัตโนมัติ การแปลงจากโค้ดสู่แบบจำลองใช้การเปรียบเทียบแบบจำลองต้นฉบับกับแบบจำลองที่ถูกแปลงกลับจากโค้ด ผลลัพธ์ คือ แบบจำลองที่แปลงกลับจากโค้ดมีความถูกต้องโดยรวมเฉลี่ย 100%
Other Abstract (Other language abstract of ETD)
This research presents a model-driven development method as an aid in developing the front-end of web applications using Nuxt framework. It introduces the UML profile for Nuxt for creating models of the front-end and presents template-based transformation rules for converting models to code and vice versa. In the transformation from model to code, developers need to add some logic code to the code generated from the transformation to ensure the front-end functions properly. This research presents transformation tools for both model-to-code and code-to-model transformations, as well as the creation of web application case studies for transformation verification. The model-to-code transformation has passed code quality checking by SonarQube. Comparison between the code obtained from the model-to-code transformation tool and the code obtained from developers based on the model results in an average consistency of 89.23% ; this is because the developers’ code misses some details in the model or does not follow Nuxt guide. The average transformation rate when comparing with the complete logic-filled code is 83.03% indicating that most of the code can be generated automatically. For transformation from code to model by comparing the original model with the model converted back from code, the result is that the model converted back from the code has an overall correctness of 100%.
Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-No Derivative Works 4.0 International License.
Recommended Citation
คงกำเหนิด, สุรชาติ, "การพัฒนาส่วนฟรอนต์เอนด์ของเว็บแอปพลิเคชันโดยใช้เฟรมเวิร์กนักซ์แบบอิงแบบจำลอง" (2024). Chulalongkorn University Theses and Dissertations (Chula ETD). 73535.
https://digital.car.chula.ac.th/chulaetd/73535