請用此 Handle URI 來引用此文件：
http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/98701完整後設資料紀錄
| DC 欄位 | 值 | 語言 |
|---|---|---|
| dc.contributor.advisor | 李允中 | zh_TW |
| dc.contributor.advisor | JONATHAN LEE | en |
| dc.contributor.author | 康甜甜 | zh_TW |
| dc.contributor.author | Joselyn Kenny | en |
| dc.date.accessioned | 2025-08-18T16:09:29Z | - |
| dc.date.available | 2025-08-19 | - |
| dc.date.copyright | 2025-08-18 | - |
| dc.date.issued | 2025 | - |
| dc.date.submitted | 2025-08-11 | - |
| dc.identifier.citation | [1] Abstract syntax tree [online]. https://en.wikipedia.org/wiki/Abstract_syntax_tree.
[2] Angular [online]. https://angular.io/. [3] Cypress [online]. https://docs.cypress.io. [4] Dom [online]. https://en.wikipedia.org/wiki/Document_Object_Model. [5] html-parse-stringify by henrik joreteg. html-parse-stringify. https://www.npmjs.com/package/ [6] Jackson [online]. https://github.com/FasterXML/jackson. [7] Jenkins [online]. https://www.jenkins.io. [8] Json [online]. https://www.json.org/json-en.html. [9] Typescript [online]. https://www.typescriptlang.org/. [10] C. Chen, T. Su, G. Meng, Z. Xing, and Y. Liu. From ui design image to gui skeleton: A neural machine translator to bootstrap mobile gui implementation. Proceedings of the 40th International Conference on Software Engineering, pages 665–676, May 2018. [11] E. Gamma, R. Helm, R. Johnson, and J. Vlissides. Design Patterns: Elements of Reusable Object-Oriented Software. Addison-Wesley, 1994. [12] A. V. Gorchakov, L. A. Demidova, and P. N. Sovietov. Analysis of program representations based on abstract syntax trees and higher-order markov chains for source code classification task. Future Internet, 15(9):5–25, 2023. [13] M.-H. Hsieh. Construct and bind user interface components. Master’s thesis, National Taiwan University, 2021. [14] R.-S. Liou. Auto build user interface from task model. Master’s thesis, National Taiwan University, 2023. [15] J. S. Mittapalli and M. P. Arthur. Survey on template engines in java. In ITM Web of Conferences, volume 37, pages 2–5, 2021. [16] S. Mohian and C. Csallner. Doodle2app: Native app code by freehand ui sketching. Proceedings of the IEEE/ACM 7th International Conference on Mobile Software Engineering and Systems (MOBILESoft ’20), pages 81–84, Nov. 2020. [17] Y. Oda, H. Fudaba, G. Neubig, H. Hata, S. Sakti, T. Toda, and S. Nakamura. Learning to generate pseudo-code from source code using statistical machine translation. In Proceedings of the 2015 30th IEEE/ACM International Conference on Automated Software Engineering (ASE), pages 3–10, Lincoln, NE, USA, Nov. 2015. IEEE. [18] T. J. Parr. Enforcing strict model-view separation in template engines. In Proceedings of the 13th International Conference on World Wide Web, pages 224–233, New York, NY, USA, May 2004. ACM. [19] A.-G. Sîrbu and G. Czibula. Automatic code generation based on abstract syntax based encoding. application on malware detection code generation based on mitre att&ck techniques. Expert Systems with Applications, 264:6–18, Mar. 2025. [20] S. C. G. Varma. Factory pattern vs. builder pattern: Choosing the right creational pattern in java. 2025. [21] J.-T. Zeng. Integrate user interface components with themes. Master’s thesis, National Taiwan University, 2021. | - |
| dc.identifier.uri | http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/98701 | - |
| dc.description.abstract | 軟體本質上很容易改變且複雜。為了簡化前端開發，我們提出從 JSON 格式描述語言自動產生 Angular 前端程式碼，稱為 Composition Engine。描述文件透過UI Design Client產生並處理。然後，Composition Engine會解析這些語言，建立對應的描述文檔，從而建立介面元件模型。此後，它將透過相應的模板進行處理以呈現 Angular 前端程式碼。因此，自動化過程將縮短開發時間，從而使軟體開發受益。 | zh_TW |
| dc.description.abstract | Software is easy to change and complex in nature. To streamline the front-end development, we propose an automatic generation of Angular frontend code from a JSON format description language, called Composition Engine. The description documents are generated and processed through the UI Design Client. Then, the Composition Engine will parse these languages to build corresponding description documents to create UI Component Models. Thereafter, it will be processed through the corresponding templates to render Angular frontend code. As a result, the automation process will benefit the software development by reducing development time. | en |
| dc.description.provenance | Submitted by admin ntu (admin@lib.ntu.edu.tw) on 2025-08-18T16:09:29Z No. of bitstreams: 0 | en |
| dc.description.provenance | Made available in DSpace on 2025-08-18T16:09:29Z (GMT). No. of bitstreams: 0 | en |
| dc.description.tableofcontents | Verification Letter from the Oral Examination Committee i
Acknowledgements ii 摘要 iii Abstract iv Contents v List of Figures viii List of Tables x Chapter 1 Introduction 1 Chapter 2 Related work 3 2.1 Angular 3 2.2 Jackson 3 2.3 html-parse-stringify 4 2.4 Jenkins 4 2.5 Cypress 4 2.6 UI Design Client 5 2.7 Description Language 6 2.8 UI Component Abstract Syntax Tree Template Method 7 2.9 Render UI Component Method 7 Chapter 3 AST rendering 9 3.1 UI Template 10 3.1.1 HTML Template Structure 10 3.1.1.1 Tag 11 3.1.1.2 Text 12 3.1.1.3 DisplayFlow 13 3.1.2 TypeScript Template Structure 15 3.1.2.1 ImportDeclaration 15 3.1.2.2 AnnotationDeclaration 16 3.1.2.3 ExportDeclaration 17 3.1.2.4 ClassDeclaration 17 3.1.2.5 VariableDeclaration 18 3.1.2.6 FunctionDeclaration 19 3.1.2.7 text 20 3.1.2.8 Conditional 20 3.1.3 SCSS Template Structure 21 3.1.4 ControlFlow Structure 21 3.2 Rendering 22 3.2.1 UI Components Rendering 22 3.2.1.1 Pipeline 22 3.2.1.2 Handler 23 3.2.1.3 Template Engine 24 3.2.2 ControlFlow AST Rendering 25 3.2.2.1 If Arguments Rendering 26 3.2.2.2 List arguments Rendering 27 3.2.3 Variable Rendering 28 3.3 Result 28 Chapter 4 UI Components Testing 32 4.1 Front-end Testing Aspects 32 4.1.1 Internal Testing 33 4.1.1.1 Verify Composite Component 33 4.1.1.2 Verify Basic Component 34 4.1.1.3 Verify Page 35 4.1.2 External Testing 35 4.1.2.1 Verify Composite Component 36 4.1.2.2 Verify Basic Component 36 4.1.2.3 Verify Page 36 4.2 Workflow 37 4.3 Jenkins 38 4.3.1 JAR 38 4.3.2 Compile front end 39 4.3.3 Cypress 40 4.4 Result 40 Chapter 5 Conclusion 45 Chapter 6 Future Work 46 References 47 | - |
| dc.language.iso | en | - |
| dc.subject | 使用者介面渲染 | zh_TW |
| dc.subject | 使用者介面描述語言 | zh_TW |
| dc.subject | 模板引擎 | zh_TW |
| dc.subject | UI description language | en |
| dc.subject | Template Engine | en |
| dc.subject | UI rendering | en |
| dc.title | 轉換UI 元件模型為前端 Angular 程式碼 | zh_TW |
| dc.title | Render UI Components Models to Frontend Angular Code | en |
| dc.type | Thesis | - |
| dc.date.schoolyear | 113-2 | - |
| dc.description.degree | 碩士 | - |
| dc.contributor.oralexamcommittee | 陳錫民;李信杰;范姜永益;林楚迪 | zh_TW |
| dc.contributor.oralexamcommittee | Hsi-Min Chen;Shin-Jie Lee;YONG-YI FANJIANG;Chu-Ti Lin | en |
| dc.subject.keyword | 使用者介面渲染,使用者介面描述語言,模板引擎, | zh_TW |
| dc.subject.keyword | UI rendering,UI description language,Template Engine, | en |
| dc.relation.page | 49 | - |
| dc.identifier.doi | 10.6342/NTU202503974 | - |
| dc.rights.note | 同意授權(限校園內公開) | - |
| dc.date.accepted | 2025-08-13 | - |
| dc.contributor.author-college | 電機資訊學院 | - |
| dc.contributor.author-dept | 資訊工程學系 | - |
| dc.date.embargo-lift | 2025-08-19 | - |
| 顯示於系所單位： | 資訊工程學系 | |
文件中的檔案：
| 檔案 | 大小 | 格式 | |
|---|---|---|---|
| ntu-113-2.pdf 授權僅限NTU校內IP使用（校園外請利用VPN校外連線服務） | 9 MB | Adobe PDF |
系統中的文件，除了特別指名其著作權條款之外，均受到著作權保護，並且保留所有的權利。