隨著網路速度與硬體技術的進步，網頁的功能也從資訊的呈現轉變為互動與應用，這些具有應用程式功能的網頁稱為Web APP，而開發這些Web APP的方法漸漸轉變為MVVM模式，然而目前物件導向分析與設計的塑模方式，無法有效的塑模MVVM，也就是說，無法在分析設計階段對Model、View、ViewModel所代表的內容分別塑模，因此缺乏一套適用MVVM模式的塑模方法，表達前端使用者介面與邏輯運作之間的關係。
本研究採用設計科學研究法(Design Science Research Methodology, DSRM)為指導原則，發展出一套塑模方法論，以PAC模式為基礎，增強為Enhanced-PAC描述以MVVM模式開發之Web APP介面之間的關係，並找出Model、View、ViewModel進行詳細描述，接著藉由Enhanced-PAC所描述的資訊建構出溝通圖表達其訊息、業務邏輯傳遞方向，並以Angular2框架實作出便當王系統中新增訂購項目為例，驗證本研究塑模方法論的可行性。
最後，本研究之塑模方法論所產出文件，描述了展示系統中的使用者介面、邏輯關係，並與程式碼相互對應。在學術方面提出Enhanced-PAC用於表現MVVM的介面設計；實務上讓使用Angular2開發系統團隊有塑模方法可以遵循，建立出適合MVVM模式之文件，使系統邏輯及程式達到對應，解決維護與文件問題，而框架特性也提升了生產率，降低耦合力，解決可攜性、互通性問題。

With the advancement of network speed and hardware technology, the functionality of web pages has also changed from the presentation of information to interaction and application, these web pages with application capabilities are called web apps, the method of developing these Web APP gradually transformed into the MVVM pattern, however, object-oriented analysis and design of the mold, can not effectively mold MVVM, in other words, it is impossible to mold the contents represented by Model, View, and ViewModel separately in the analysis design stage, therefore, there is a lack of a modeling methodology for the MVVM model, expressing the relationship between the front-end user interface and the logical operation.
In this study, Design Science Research Methodology (DSRM) is used as a guiding principle, and based on PAC mode, enhancements for Enhanced-PAC to describe the relationship between Web APPs interfaces developed in MVVM mode, and find out description of Model, View, and ViewModel, then use the information described by Enhanced-PAC to construct a communication diagram to express its information and business logic, and use the Angular2 framework to make a new ordering project in the system as an example to verify the feasibility of this research modeling methodology.
Finally, the output document of the modeling methodology of this study describes the interface and logical relationship in the display system and corresponds to the code. Academically proposed the interface design of Enhanced-PAC for expressing MVVM, in practice, let the Angular2 development system team have a modeling methodology to establish a file suitable for the MVVM mode, so that the system logic and program can be matched, Solving maintenance and documentation problems, while the framework features also increase productivity, reduce coupling, and address portability and interoperability issues.

論文審定書 i
致謝詞 ii
中文摘要 iii
英文摘要 iv
第一章 緒論 1
第一節 研究背景與動機 1
第二節 研究目的與範圍 3
第二章 文獻探討 5
第一節 單一頁面應用程式 5
第二節 MVC、MVP、MVVM模式 8
第三節 統一塑模語言 12
第四節 PAC模式 20
第三章 研究方法 22
第一節 設計科學研究法 22
第二節 研究方法與步驟 25
第四章 設計與發展解決方案 28
第一節 方法論流程 28
第二節 Enhanced-PAC模型建構方法 30
第三節 溝通圖建構方法 37
第五章 展示與評估解決方案 42
第一節 傳統網頁問題與範例網頁說明 42
第二節 展示Enhanced-PAC建構方法 45
第三節 展示溝通圖塑模建構方法 57
第四節 Angular2框架特性 64
第六章 討論與結論 67
第一節 研究成果 67
第二節 研究貢獻 70
第三節 研究限制與未來研究方向 72
第七章 參考文獻 73

一、 英文文獻
Angular, Browser Support, Google, V7.2.15, Oct, 2018, https://angular.io/guide/browser-support, [Retrieve 2019/05].
Jadhav, M. A., Sawant, B. R., and Deshmukh, A., Single page application using angularjs. International Journal of Computer Science and Information Technologies, 2015, Vol. 6, No. 3, pp. 2876-2879.
Lou, T., A Comparison of Android Native App Architecture–MVC, MVP and MVVM. Abstract of the Master’s Thesis, 2016.
Maharjan, B., Puzzle game using Android MVVM Architecture. Metropolia University of Applied Sciences Bachelor of Engineering Information and CommunicationsTechnology Thesis, 2018
OMG, The Object Management Group, The Unified Modeling Language Specification, V2.5.1, December, 2017, https://www.omg.org/spec/UML/2.5.1/, [Retrieve 2019/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.
Rhazali, Y., Hadi, Y., and Mouloudi., Model Transformation with ATL into MDA from CIM to PIM Structured through MVC. Procedia Computer Science, 2016, 83: 1096-1101.
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.
二、 中文文獻
吳仁和，物件導向系統分析與設計―結合MDA與UML，5thEdition，台北市:智勝文化，February 2017。
邱志誠，PIM塑模方法論之研究，國立中山大學資訊管理學系碩士論文，2014年。
鄭智謙，行動裝置應用程式開發MDA 轉換方法論之研究，國立中山大學資訊管理學系碩士論文，2014年。