以使用者介面元件之導航與合成產生Web前端伺服器

Abstract

在軟體工程中，如何設計出符合使用者需求之軟體是重要課題，因此市場上也誕生許多使用者介面設計工具來協助設計者，且能快速地描繪出實際上之介面與原型產品，開發團隊便可透過這些工具與其產出來的資訊向使用者確認或調整需求，以打造出符合使用者期望的產品。然而這些工具的產物提供之資訊並不足以產出實際之應用程式，亦不可加工為程式碼，僅能作為展示用途。例如實際上的Web應用程式，會有大量的導頁、導航並可能挾帶諸如啟動參數或功能引數等資訊，若缺乏這些資訊便無法產製應用程式。 本研究為自動化生成軟體之一環，主要提出之方法將用以改善實驗室先前研究成果，共分成三大部分。第一部分建立導航精靈具備步驟引導以及系統化地管理元件與頁面間之導航關聯，並產出可提供給合成引擎生成前端應用程式之必要文件；第二部分為合成引擎，將提出如何改善現行合成元件之排版問題；第三部分，提出整合測試工具Cypress與合成引擎，可於產出應用程式之程式碼時，依據描述頁面、導航、服務元件與應用程式之文件一併生成測試腳本，用以測試及驗證前端應用程式。 本研究完善了自動化生成軟體流程中之導航設計與管理，並支援使用者介面元件依據其位置進行排版與位置校準，最後提出自動化整合測試方案，提升自動化生成軟體之品質。

In software engineering, the design of software that meets the requirements of users is an important issue. Therefore, many user interface design tools have been created to assist designers and to quickly depict actual interfaces and prototypes. However, the information provided by the products of these tools is not sufficient to produce a real-world application, nor can it be processed into code, but only for demonstration purposes. For example, an actual web application will have a large number of pages, navigation, and possibly information such as start-up parameters or arguments for functions without which it is impossible to generate applications. This thesis is a part of the software-build-software process, and the proposed approach will be used to improve the previous research results of the laboratory, which is divided into three main parts. The first part is to establish a navigation wizard with step-by-step guidance and systematic management of navigation relations between components and pages and to generate the necessary description language files that can be provided to the composition engine to generate executable front-end applications. The second part of the thesis will propose how to layout the UI components properly. In the third part, we propose to integrate the testing tool Cypress and the composition engine to generate test scripts based on the description language files of pages, navigation, and service components to test and verify the front-end application. This thesis improves the management and design of navigations in auto-generated software processes, supports the user interface components to perform layout and position calibration according to their positions, and finally proposes an automated integration test solution to improve the quality of the generated front-end server.