Utilize este identificador para referenciar este registo:
https://hdl.handle.net/1822/79885
Título: | Sistematização do desenvolvimento de interfaces web |
Outro(s) título(s): | Systematization of web interface development |
Autor(es): | Sousa, Nelson Tiago Silva |
Orientador(es): | Campos, José C. |
Palavras-chave: | Interface Implementação Design Componente React Framework Implementation Component Software architecture Methodology |
Data: | 16-Mai-2022 |
Resumo(s): | Esta dissertação aborda o processo de implementação de interfaces web, mais concretamente, utilizando a framework React. As interfaces de utilizador são peças fundamentais de qualquer produto
computacional interativo. Uma boa interface consegue conquistar o utilizador e fazer com que este utilize
o produto, enquanto uma interface de menor qualidade pode ser a causa para a pouca utilização de um
software. Por este motivo, existem abordagens e metodologias focadas na criação de interfaces, para
proporcionarem uma boa experiência ao utilizador e fazer com que este utilize o software desenvolvido.
Após a conceção da interface, é necessário proceder à sua implementação. Para isso existem diversas
tecnologias e abordagens. Entre as diferentes tecnologias há ainda múltiplas frameworks de desenvolvimento, cada uma com as suas características específicas, o que dificulta, por exemplo, a transição de
uma tecnologia para outra. O ideal seria tornar o processo de desenvolvimento de uma interface o mais
independente possível da tecnologia a ser utilizada.
Tendo em vista a resolução deste problema a dissertação apresenta duas contribuições principais.
Um processo de interpretação do design e da sua divisão em componentes, com o objetivo de maximizar a reutilização de código e consequentemente a eficácia no processo de implementação. A divisão
do design é feita através de uma abordagem atómica, onde componentes mais atómicos se juntam e
formam componentes mais complexos.
A criação de uma arquitetura genérica capaz de representar uma aplicação React, com o objetivo de
fornecer uma visão de mais alto nível, mostrando todas as diferentes entidades que existem na arquitetura
de uma aplicação, e também a forma como estas entidades se relacionam. Isto permite uma separação
de responsabilidades, separando a definição da interface, da sua lógica de negócio, e da interação com
serviços externos.
Além disso, a arquitetura genérica serviu de ponto de partida para a criação de uma estrutura de
organização do código capaz de suportar o crescimento dos projetos ao longo do tempo. Estrutura que
facilita, e sistematiza, o trabalho dos programadores, dado que estes ficam a saber exatamente onde têm
de inserir determinados novos ficheiros, ou onde está um qualquer ficheiro que precisa de ser alterado
quando é necessário atualizar um componente da interface.
Por último, para provar que os conceitos descritos anteriormente são aplicáveis, para ajudar os programadores a aplicá-los, e para sistematizar o processo de implementação, criou-se uma ferramenta de geração de código. A ferramenta permite criar diferentes partes da arquitetura genérica automaticamente.
É também possível gerar um componente React partindo de um protótipo de uma interface. This dissertation addresses the process of implementing web interfaces, more specifically, utilizing the React framework. The user interfaces are fundamental parts of any interactive computer product. A good interface is able to conquer its users and make them use the product, while a lesser quality interface may be the cause for the little usage of a software. For this reason, there are approaches and methodologies focused on the designing of interfaces, in order to provide a good experience to the user and make them use the developed software. After designing the interface, it is necessary to proceed with its implementation. For this, there are several technologies and approaches. Among the different technologies, there are also multiple development frameworks, each with its characteristics, which makes it difficult, for example, to transition from one technology to another. The ideal would be to make the process of interface development as independent as possible of the specific technology used. Intending to solve this problem, the dissertation presents two main contributions. A process of interpretation of the design and division into components, to maximize the reuse of code and consequently the efficiency of the implementation process. The division of the design is done through an atomic approach, where more atomic components come together and form more complex components. The creation of a generic architecture capable of representing a React application, with the goal of providing a higher-level view, showing all the different entities that exist in an application’s architecture, and also how these entities relate to each other. This allows a separation of responsibilities, separating the definition of the interface, its business logic, and the interaction with external services. Furthermore, the generic architecture served as a starting point for the creation of a structure for code organization, capable of supporting the growth of projects over time. A structure that makes the programmer’s work easier and more systematic, since they know exactly where to insert new files, or where to find a file that needs to be changed, when it is necessary to update a component of the interface. Finally, a code generation tool was created, to prove that the concepts described above are applicable, to help programmers apply them, and to systematise the implementation process. The tool allows pro grammers to create different parts of the generic architecture automatically. It is also possible to generate a React component starting from a prototype of an interface. |
Tipo: | Dissertação de mestrado |
Descrição: | Dissertação de mestrado integrado em Engenharia Informática |
URI: | https://hdl.handle.net/1822/79885 |
Acesso: | Acesso aberto |
Aparece nas coleções: | BUM - Dissertações de Mestrado DI - Dissertações de Mestrado |
Ficheiros deste registo:
Ficheiro | Descrição | Tamanho | Formato | |
---|---|---|---|---|
Nelson Tiago da Silva Sousa.pdf | Dissertação de Mestrado | 5,42 MB | Adobe PDF | Ver/Abrir |
Este trabalho está licenciado sob uma Licença Creative Commons