Publicação
Geração automática de interfaces de utilizador para aplicações web
| Resumo: | The main objective of this dissertation is to make a contribution in the automation of web applications' development, starting from prototypes of their graphical user interlaces. The integration of model-based user interface development concepts with the more traditional user-centred development approach allows for a rethinking of GUI design development, independent of implementation details, and redefining models to realize these graphical interfaces. In the end, the intent is to increase the level of abstraction of the development process, promote better adaptation of applications to different devices and execution environments, and decrease the effort required to develop the graphical interlaces. Due to the exponential increase in the use of internet-based services and applications, there is an also increasing demand for Web designers and developers. At the same time, the proliferation of languages, frameworks and libraries illustrates the current state of immaturity of web development technologies. This state of affairs creates difficulties in the development and maintenance of Web applications. An approach is presented that allows designers to use prototyping tools, in this case Adobe XD, to design graphical interfaces, and then automatically converts them to Vue.js + Bootstrap code, thus creating a first version of the implementation. This is done through the interpretation of the SVG file that Adobe XD exports. The goal is not to produce the final version of the Ul. Instead, we aim to produce a first version of the code, which can then be refined by the developer. This enables us to place less requirements on the prototype, regarding the amount of information that it must contain. In the end, we get a skeleton of Vue.js code that is easy to maintain and reuse to further improve the project. |
|---|---|
| Autores principais: | Machado, Catarina Araújo |
| Assunto: | Model-based user interface development Web development Web frameworks Prototyping tools Automatic code generation Desenvolvimento de interfaces de utilizador baseado em modelos Desenvolvimento web Ferramentas de prototipagem Frameworks web Geração automática de código |
| Ano: | 2022 |
| País: | Portugal |
| Tipo de documento: | dissertação de mestrado |
| Tipo de acesso: | acesso aberto |
| Instituição associada: | Universidade do Minho |
| Idioma: | português |
| Origem: | RepositóriUM - Universidade do Minho |
| Resumo: | The main objective of this dissertation is to make a contribution in the automation of web applications' development, starting from prototypes of their graphical user interlaces. The integration of model-based user interface development concepts with the more traditional user-centred development approach allows for a rethinking of GUI design development, independent of implementation details, and redefining models to realize these graphical interfaces. In the end, the intent is to increase the level of abstraction of the development process, promote better adaptation of applications to different devices and execution environments, and decrease the effort required to develop the graphical interlaces. Due to the exponential increase in the use of internet-based services and applications, there is an also increasing demand for Web designers and developers. At the same time, the proliferation of languages, frameworks and libraries illustrates the current state of immaturity of web development technologies. This state of affairs creates difficulties in the development and maintenance of Web applications. An approach is presented that allows designers to use prototyping tools, in this case Adobe XD, to design graphical interfaces, and then automatically converts them to Vue.js + Bootstrap code, thus creating a first version of the implementation. This is done through the interpretation of the SVG file that Adobe XD exports. The goal is not to produce the final version of the Ul. Instead, we aim to produce a first version of the code, which can then be refined by the developer. This enables us to place less requirements on the prototype, regarding the amount of information that it must contain. In the end, we get a skeleton of Vue.js code that is easy to maintain and reuse to further improve the project. |
|---|