臺灣博碩士論文加值系統

隨著軟體工程的演進,一個軟體專案最困難耗費人力的地方往往不僅是在實做新的功能,更多的成本是在軟體的除錯以及維護,以網路應用程式為例,雖然大部份的專案目的不盡相同,但是許多通用的功能和使用者界面還是不斷被重複的實做,雖然能利用市面上的一些軟體、平台去建立使用者想要的網路應用程式,但卻無法建立出能處理商業邏輯和資料庫存取功能的網路應用程式,因此我們的研究計畫開發出一個可以讓軟體工程師去重複利用我們定義好常用的使用者界面元件,以及開源軟體的服務元件 [17] 程式碼,讓使用者能在最低限度的實做下完成他們的需求,我們稱我們實做出來可以讓使用者創建網路應用程式的平台為 UI Design Client。
在本項研究中,使用者可以藉由 UI Design Client 裡面的 Wizard (UI Design Client 裡面負責建置 UI Component 的操作界面) 去建置我們提供的 30 種使用者界面元件去組合網路應用程式,其中我們也提供了 Matchmaking [19] 的機制,能讓使用者找到適合他們使用者界面元件的服務元件,我們認為重複利用已經存在的最佳實踐往往會比每次遇到同一個問題就去重新實做要好的多,不僅降低開發的成本,也減少維護的難度。

Requirements acquisition is one of the main bottlenecks in Web applications development and maintenance. Rapid prototyping through user interface (UI) design has been widely adopted to improve the elicitation of requirements. However, the main problem with rapid prototyping is that business logic was not integrated with the UI components, and access to the database was not provided.
In this research work, we proposed a UI Design Client with pre-defined 30 UI components to compose UI components and interact with their corresponding service components [17] in open source project through a Wizard mechanism and a code editor for tailoring or adding code integrated with the UI components.
The benefits of the UI Design Client are two-fold: increase the reusability of the existing integrated UI components and their service components and reduce the complexity of maintenance.

誌謝 ii
摘要 iii
Abstracts iv
List of Figures ix
List of Tables xii
Chapter 1 Introduction 1
Chapter 2 Background Work 3
2.1 Angular . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
2.2 CoreUI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.3 Flux Pattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2.4 Diagramming Library (mxGraph) . . . . . . . . . . . . . . . . . . . . 5
2.5 Code Editor Library (Monaco Editor) . . . . . . . . . . . . . . . . . . 5
2.6 Jest . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Chapter 3 Related Work 6
3.1 Poyao’s Thesis . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
3.2 Related Applications . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2.1 Wix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
3.2.2 Draw.io . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.3 UI Component Classification . . . . . . . . . . . . . . . . . . . . . . . 8
Chapter 4 UI Components 10
4.1 Classification . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.1.1 Informative Class . . . . . . . . . . . . . . . . . . . . . . . . . 12
4.1.2 Input Control Class . . . . . . . . . . . . . . . . . . . . . . . . 13
4.1.3 Navigational Class . . . . . . . . . . . . . . . . . . . . . . . . 14
4.1.4 Container Class . . . . . . . . . . . . . . . . . . . . . . . . . . 14
4.2 Layout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.3 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.4 Web Application Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . 18
Chapter 5 UI Design Client 19
5.1 Description Language . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
5.1.1 PDL (Page Description Language) . . . . . . . . . . . . . . . 20
5.1.2 SUMDL (Service UI Mapping Description Language) . . . . . 22
5.1.3 NDL (Navigation Description Language) . . . . . . . . . . . . 23
5.2 System Architecture . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
5.3 Wizard . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.3.1 Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25
5.3.2 Build Component Tab . . . . . . . . . . . . . . . . . . . . . . 29
5.3.3 Compose Component Tab . . . . . . . . . . . . . . . . . . . . 29
5.3.4 Check Status Tab . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.4 Style Editor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
5.5 Endpoint Testing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
5.6 Edit Service Component . . . . . . . . . . . . . . . . . . . . . . . . . 33
Chapter 6 UI Component and Service Component Binding 34
6.1 Service Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
6.1.1 Query Service Components . . . . . . . . . . . . . . . . . . . . 36
6.1.2 Bind Service to Composite UI Component . . . . . . . . . . . 39
6.1.3 Bind Argument to Basic UI Component . . . . . . . . . . . . 40
6.2 Pipeline Tab . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41
6.2.1 Pipeline Mechanism . . . . . . . . . . . . . . . . . . . . . . . 41
Chapter 7 Demonstration 42
7.1 Scenario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
7.2 Result . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Chapter 8 Conclusion 53
Bibliography 55

[1] Angular, [online] https://angular.io/.
[2] Bootstrap, [online] https://getbootstrap.com/.
[3] Draw.io, [online] https://app.diagrams.net/.
[4] Endpoint testing with jest, [online] https://zellwk.com/blog/endpoint-testing/.
[5] Flux application architecture, [online] https://facebook.github.io/flux/.
[6] Free angular admin template · coreui for angular, [online] https://coreui.io/angular/.
[7] Jest, [online] https://jestjs.io/.
[8] Json, [online] https://www.json.org/json-en.html.
[9] Monaco editor, [online] https://microsoft.github.io/monaco-editor/.
[10] mxgraph, [online] https://jgraph.github.io/mxgraph/.
[11] Vscode, [online] https://code.visualstudio.com/.
[12] Wix, [online] https://www.wix.com/.
[13] Wsdl introduction, [online] https://www.w3.org/TR/wsdl.html.
[14] P.-Y. CHEN. Tailoring embedded web server for user interface components generation. Master’s thesis, National Taiwan University, 2019.
[15] C.-C. Hsiao. Matchmake user interface components with service components. Master’s thesis, National Taiwan University, 2021.
[16] P.-W. Hsieh. Build web applications with bpel. Master’s thesis, National Taiwan University, 2021.
[17] H.-Y. Huang. Atomic service generation from java-based open source software. Master’s thesis, National Taiwan University, 2019.
[18] C.-Y. Lu. Bpel engine refactoring for web services. Master’s thesis, National Taiwan University, 2019.
[19] C.-Y. Shao. A pipeline fitting approach to enhancing wsdl matchmaking. Master’s thesis, National Taiwan University, 2019.
[20] J.-J. YU. Construct service components from open source java projects. Master’s thesis, National Taiwan University, 2021.
[21] J.-T. Zeng. Integrate user interface components with themes matchmaking. Master’s thesis, National Taiwan University, 2021.