Geração automática de interfaces de utilizador para aplicações web

Abstract

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.

O principal objetivo da presente dissertação é contribuir para a automatização do desenvolvimento de aplicações web, a partir de protótipos das interfaces gráficas de utilizador. A integração de conceitos de desenvolvimento de interfaces de utilizador baseadas em modelos com a abordagem mais tradicional do desenvolvimento centrado no utilizador permite repensar o desenvolvimento do design da interface gráfica, independente dos detalhes de implementação, e redefinir modelos para concretizar essas interfaces gráficas. No fundo, o intuito é aumentar o nível de abstração do processo de desenvolvimento, promover uma melhor adaptação das aplicações aos diferentes dispositivos e ambientes de execução e diminuir o esforço necessário para desenvolver as interfaces gráficas. Devido ao aumento exponencial da utilização de serviços e aplicações baseadas na internet, há uma procura crescente de web designers e programadores. Ao mesmo tempo, a proliferação de linguagens de programação, frameworks e bibliotecas ilustra o atual estado de imaturidade das tecnologias de desenvolvimento web. Este estado cria dificuldades no desenvolvimento e principalmente na manutenção de aplicações web. É apresentada uma abordagem que permite aos designers utilizar ferramentas de prototipagem, neste caso foi escolhido Adobe XD, para desenhar interfaces gráficas e depois convertê-las automaticamente para código Vue.js + Bootstrap, criando assim uma primeira versão da implementação. Esta geração é feita através da interpretação do ficheiro SVG que o Adobe XD exporta. O objetivo não é produzir a versão final da UI, mas sim produzir uma primeira versão do código que pode depois ser aperfeiçoada pelo programador. Este fator permite colocar menos requisitos no protótipo, relativamente à quantidade de informação que este deve conter. No final, obtém-se um esqueleto do código Vue.js, fácil de manter e de reaproveitar para melhorar cada vez mais o projeto.