隨著網頁應用程式的快速發展，前端網頁技術的複雜性和規模也在不斷增加。現代前端網頁框架如Vue.js和React.js的興起，極大地提升了開發效率和應用的互動性。此外，生成式人工智慧(Generative AI)技術的進步，尤其是在自然語言處理和自動生成方面，為前端網頁開發帶來了新的可能性。這些技術的結合不僅提高了開發效率，也大幅減少了人為錯誤，為軟體設計與開發提供了更多的靈活性和創造力。
目前的系統分析與設計方法在處理現代前端網頁開發需求時存在一定的局限性。現有的方法強調系統的完整性和一致性，但缺乏對前端網頁框架和生成式人工智慧的支持。例如，現有系統分析階段產出的循序圖未能充分反映前端網頁框架的技術細節，增加了開發和維護的困難。此外，現有的CASE工具在程式碼轉換方面也存在局限，無法有效地幫助程式開發人員理解和維護業務邏輯與資料流程。
本研究旨在解決現有系統分析與設計方法在現代開發環境中的不足，特別是在前端網頁開發和生成式人工智慧應用方面的挑戰。研究的目標在於提出一套整合前端網頁框架、MVVM模式和生成式人工智慧的解決方案，以提升開發效率和程式碼品質。具體而言，本研究希望擴充系統分析與設計方法，加入前端框架在MVVM模式下的綁定語法，強化設計文件的完整性；利用生成式人工智慧將系統分析與設計的循序圖和介面藍圖轉換為前端框架程式碼，加速雛型系統的建立。
本研究提出了一套利用生成式人工智慧轉換資訊系統前端程式碼的方法論，主要分為三個階段：將循序圖轉換為PlantUML程式碼、利用生成式人工智慧加上前端框架的綁定方法、最終把PlantUML程式碼與介面藍圖轉換為前端框架程式碼。研究結果顯示，此方法論在生產率、可攜性、互通性和維護與文件方面均具有顯著優勢。

As web applications rapidly evolve, the complexity and scale of frontend web technologies are also increasing. The rise of modern frontend frameworks such as Vue.js and React.js has significantly enhanced development efficiency and application interactivity. Additionally, advancements in Generative AI, especially in natural language processing and automatic generation, have introduced new possibilities for frontend web development. The combination of these technologies not only improves development efficiency but also greatly reduces human error, providing more flexibility and creativity in software design and development.
Current systems analysis and design methods have certain limitations when addressing the needs of modern frontend web development. Existing methods emphasize system integrity and consistency but lack support for frontend frameworks and Generative AI. For instance, the sequential diagrams produced during the systems analysis phase do not sufficiently reflect the technical details of frontend frameworks, increasing the difficulty of development and maintenance. Moreover, existing CASE tools have limitations in code transformation, failing to effectively assist developers in understanding and maintaining business logic and data flows.
This study aims to address the shortcomings of current systems analysis and design methods in the modern development environment, particularly the challenges in frontend web development and the application of Generative AI. The goal of this research is to propose a solution that integrates frontend frameworks, the MVVM pattern, and Generative AI to enhance development efficiency and code quality. Specifically, this study seeks to expand systems analysis and design methods by incorporating binding syntax under the MVVM pattern for frontend frameworks, thereby strengthening the completeness of design documents. It also aims to use Generative AI to transform sequential diagrams and interface blueprints from systems analysis and design into frontend framework code, accelerating the creation of prototype systems.
This research proposes a methodology for transforming information system frontend code using Generative AI, which consists of three main stages: converting sequential diagrams into PlantUML code, using Generative AI to add binding methods for frontend frameworks, and finally transforming the PlantUML code and interface blueprints into frontend framework code. The research results indicate that this methodology has significant advantages in terms of productivity, portability, interoperability, and maintenance and documentation.

論文審定書i
致謝詞ii
中文摘要iii
英文摘要iv
圖目錄vii
表目錄viii
第一章　緒論1
第一節 研究背景與動機1
第二節 研究目的與範圍2
第二章　文獻探討4
第一節MVVM模式4
第二節前端網頁框架5
第三節生成式人工智慧6
第四節統一塑模語言9
第五節網頁應用程式11
第六節PlantUML12
第三章　研究方法19
第一節 設計科學研究法19
第二節 研究方法與步驟21
第四章　設計與發展解決方案23
第一節生成式人工智慧轉換資訊系統前端系統程式碼方法23
第二節生成式人工智慧指令測試及改善33
第五章　展示與評估解決方案54
第一節網頁系統說明54
第二節展示生成式人工智慧轉換資訊系統前端系統程式碼方法54
第三節方法評估66
第六章　討論與結論70
第一節研究成果70
第二節研究貢獻71
第三節 研究限制與未來研究方向74
參考文獻75

Arnaud Roques, PlantUML, April 2024, https://plantuml.com/en/, [Retrieve 2024/05].

Ebert, C., & Louridas, P., Generative AI for Software Practitioners, IEEE Software, 2023, Vol. 40, No. 4, pp. 30-38.

Freire, E. S. S., Oliveira, G. C., & de Sousa Gomes, M. E., Analysis of open-source CASE tools for supporting software modeling process with UML, Software Quality, Proceedings of the XVII Brazilian Symposium, 2018, pp. 51-60.

Google, Gemini, Feb 2024, https://gemini.google.com/, [Retrieve 2024/03].

Maharjan, B., Puzzle game using Android MVVM Architecture. Metropole University of Applied Sciences Bachelor of Engineering Information and CommunicationsTechnology Thesis, 2018.

Margaria, T., Generative model driven design for agile system design and evolution: a tale of two worlds, Formal Methods for Industrial Critical Systems, 23rd International Conference, FMICS 2018, Maynooth, Ireland, September 3-4, 2018, Proceedings 23, 2018, pp. 3-18.

Novac, O. C., Madar, D. E., Novac, C. M., Bujdosó, G., Oproescu, M., & Gal, T., Comparative study of some applications made in the Vue.js and React.js frameworks, Engineering of Modern Electric Systems (EMES), 2021 16th International Conference on IEEE, 2021, pp. 1-4.

OpenAI, ChatGPT, Feb 2024, https://chatgpt.com/, [Retrieve 2024/06].

Peffers, K., Tuunanen, T., Rothenberger, M. A., and Chatterjee, S., A Design Science Research Methodology for Information Systems Research, Journal of Management Information Systems, 2007, Vol. 24, No. 3, pp. 45-77.

Roubi, S., Erramdani, M., and Mbarki, S. Modeling and generating graphical user interface for MVC rich internet application using a model driven approach. Information Technology for Organizations Development (IT4OD), 2016 International Conference on IEEE, 2016, pp. 1-6.

Vora, Pawan., Web application design patterns, Burlington, Massachusetts：Morgan Kaufmann, 2009.

Zhu, Y., Zhang, Y., Yang, H., & Wang, F., GANCoder: an automatic natural language-to-programming language translation approach based on GAN, Natural Language Processing and Chinese Computing, 8th CCF International Conference, NLPCC 2019, Dunhuang, China, October 9--14, 2019, Proceedings, Part II 8 on Springer, 2019, pp. 529-539.

吳仁和，物件導向系統分析與設計－結合MDA與UML，8-th Edition，台北：元照，June 2024。

尤雨溪, Vue.js, May 2024, https://vuejs.org/, [Retrieve 2024/06].