博碩士論文 etd-0524119-161801 詳細資訊


[回到前頁查詢結果 | 重新搜尋]

姓名 侯元凱(Yuan-Kai Hou) 電子郵件信箱 E-mail 資料不公開
畢業系所 資訊管理學系研究所(Department of Information Management)
畢業學位 碩士(Master) 畢業時期 107學年第2學期
論文名稱(中) MVVM模式資訊系統使用者介面塑模方法論
論文名稱(英) A MVVM modeling methodology for information systems user interface design
檔案
  • etd-0524119-161801.pdf
  • 本電子全文僅授權使用者為學術研究之目的,進行個人非營利性質之檢索、閱讀、列印。
    請遵守中華民國著作權法之相關規定,切勿任意重製、散佈、改作、轉貼、播送,以免觸法。
    論文使用權限

    紙本論文:立即公開

    電子論文:使用者自訂權限:校內 1 年後、校外 3 年後公開

    論文語文/頁數 中文/85
    統計 本論文已被瀏覽 5509 次,被下載 0 次
    摘要(中) 隨著網路速度與硬體技術的進步,網頁的功能也從資訊的呈現轉變為互動與應用,這些具有應用程式功能的網頁稱為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.
    關鍵字(中)
  • 前端框架
  • MVVM
  • PAC模式
  • 網頁應用程式
  • 系統分析
  • 關鍵字(英)
  • Web APP
  • PAC
  • MVVM
  • Front-end
  • System Analysis
  • 論文目次 論文審定書 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年。
    口試委員
  • 謝明哲 - 召集委員
  • 夏自立 - 委員
  • 蔣安仁 - 委員
  • 吳仁和 - 指導教授
  • 夏則智 - 指導教授
  • 口試日期 2019-06-21 繳交日期 2019-06-24

    [回到前頁查詢結果 | 重新搜尋]


    如有任何問題請與論文審查小組聯繫