Sistematização do desenvolvimento de interfaces web

Detalhes bibliográficos
Autor(a) principal: Sousa, Nelson Tiago Silva
Data de Publicação: 2022
Tipo de documento: Dissertação
Idioma: por
Título da fonte: Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
Texto Completo: https://hdl.handle.net/1822/79885
Resumo: Dissertação de mestrado integrado em Engenharia Informática
id RCAP_219c53b1f94765bd981864d3a368f3b6
oai_identifier_str oai:repositorium.sdum.uminho.pt:1822/79885
network_acronym_str RCAP
network_name_str Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
repository_id_str 7160
spelling Sistematização do desenvolvimento de interfaces webSystematization of web interface developmentInterfaceImplementaçãoDesignComponenteReactFrameworkImplementationComponentSoftware architectureMethodologyEngenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e InformáticaDissertação de mestrado integrado em Engenharia InformáticaEsta 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.Campos, José C.Universidade do MinhoSousa, Nelson Tiago Silva2022-05-162022-05-16T00:00:00Zinfo:eu-repo/semantics/publishedVersioninfo:eu-repo/semantics/masterThesisapplication/pdfhttps://hdl.handle.net/1822/79885por203017641info:eu-repo/semantics/openAccessreponame:Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)instname:Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informaçãoinstacron:RCAAP2023-12-09T01:19:54Zoai:repositorium.sdum.uminho.pt:1822/79885Portal AgregadorONGhttps://www.rcaap.pt/oai/openaireopendoar:71602024-03-19T18:59:34.393860Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos) - Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informaçãofalse
dc.title.none.fl_str_mv Sistematização do desenvolvimento de interfaces web
Systematization of web interface development
title Sistematização do desenvolvimento de interfaces web
spellingShingle Sistematização do desenvolvimento de interfaces web
Sousa, Nelson Tiago Silva
Interface
Implementação
Design
Componente
React
Framework
Implementation
Component
Software architecture
Methodology
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
title_short Sistematização do desenvolvimento de interfaces web
title_full Sistematização do desenvolvimento de interfaces web
title_fullStr Sistematização do desenvolvimento de interfaces web
title_full_unstemmed Sistematização do desenvolvimento de interfaces web
title_sort Sistematização do desenvolvimento de interfaces web
author Sousa, Nelson Tiago Silva
author_facet Sousa, Nelson Tiago Silva
author_role author
dc.contributor.none.fl_str_mv Campos, José C.
Universidade do Minho
dc.contributor.author.fl_str_mv Sousa, Nelson Tiago Silva
dc.subject.por.fl_str_mv Interface
Implementação
Design
Componente
React
Framework
Implementation
Component
Software architecture
Methodology
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
topic Interface
Implementação
Design
Componente
React
Framework
Implementation
Component
Software architecture
Methodology
Engenharia e Tecnologia::Engenharia Eletrotécnica, Eletrónica e Informática
description Dissertação de mestrado integrado em Engenharia Informática
publishDate 2022
dc.date.none.fl_str_mv 2022-05-16
2022-05-16T00:00:00Z
dc.type.status.fl_str_mv info:eu-repo/semantics/publishedVersion
dc.type.driver.fl_str_mv info:eu-repo/semantics/masterThesis
format masterThesis
status_str publishedVersion
dc.identifier.uri.fl_str_mv https://hdl.handle.net/1822/79885
url https://hdl.handle.net/1822/79885
dc.language.iso.fl_str_mv por
language por
dc.relation.none.fl_str_mv 203017641
dc.rights.driver.fl_str_mv info:eu-repo/semantics/openAccess
eu_rights_str_mv openAccess
dc.format.none.fl_str_mv application/pdf
dc.source.none.fl_str_mv reponame:Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
instname:Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
instacron:RCAAP
instname_str Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
instacron_str RCAAP
institution RCAAP
reponame_str Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
collection Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos)
repository.name.fl_str_mv Repositório Científico de Acesso Aberto de Portugal (Repositórios Cientìficos) - Agência para a Sociedade do Conhecimento (UMIC) - FCT - Sociedade da Informação
repository.mail.fl_str_mv
_version_ 1799132387477553152

Registros relacionados