Reutilização de Software no Front-end
1. Introdução
A reutilização de software, como mencionado no documento Reutilização de Software Back-End, possui a finalidade de tornar uma solução de software reutilizável. Assim, projetos bem sucedidos podem ser usados novamente para projetos futuros, reaproveitando soluções aprovadas, melhorando a qualidade de desenvolvimento e poupando esforços. Reutilização de software não se aplica apenas ao nível de código, mas também em vários contextos aplicados ao desenvolvimento de software, ou seja, em soluções que podem ser reaproveitadas. Padrões de projetos tem uma boa aplicação para a reutilização de software, pois padrões de projetos são adequados para problemas recorrentes que possuem soluções bem sucedidas e aceitas pela comunidade, assim, é uma forma de reutilizar algo, que possui características semelhantes, e que já provou ser uma boa solução.
2. Metodologia
Este documento tem o propósito de detalhar a reutilização de software no Front-End do Projeto Cardeal. Portanto o foco principal será na aplicação dos conceitos de framework, bibliotecas e outra forma de utilização de software na aplicação web, e no desenvolvimento do código. O Documento Reutilização de Software Back-End, explica como foram usados e aplicados no projeto, os conceitos de reuso de software no Back-end do Projeto Cardeal. Para maior entendimento de todas as tecnologias usadas, estilos e padrões arquiteturais, é detalhado no Documento de Arquitetura de Software.
3. Framework
O framework dita a arquitetura da sua aplicação. Ele irá definir a estrutura geral, sua divisão em classes e objetos e em consequência as responsabilidades-chave das classes de objetos, como estas colaboram, e o fluxo de controle. Um framework pré-define esses parâmetros de projeto, de maneira que você, projetista/implementador da aplicação, possa se concentrar nos aspectos específicos da sua aplicação. (GAMMA et al., 2000, p.42).
Framework é aplicado para desenvolver soluções que possuem o mesmo domínio cognitivo ou similares, sendo uma estrutura geral que atenda um conjunto de aplicações similares. Uma forma de aplicar a reutilização de software é pelo o uso de framework, facilitando no desenvolvimento de novas aplicações.
3.1. Framework - Hot-Spots e Frozen-Spots
Hot-spots representam uma parte da reutilização de software de um framework, mas de uma forma genérica, o que possibilita o desenvolvedor adaptá-las ao contexto da aplicação, de forma que suas funcionalidades podem ser complementadas pelo programador. O Frozen-spots é diferente por não permitir a alteração, ou seja, foi projetado para não ter adaptação, sua funcionalidade continua igual em todos os momentos que são instanciados. Exemplos de aplicações Hot-Spots, Classes abstratas, métodos abstratos, métodos hook. Classes concretas e métodos template são exemplos de Frozen-spots.
Tabela 1 - Hot-Spots e Frozen-Spots.
| Hot-Spots | Frozen-Spots |
|---|---|
| Representam as partes do framework de aplicação que são específicas de sistemas individuais. | Definem a arquitetura geral de um sistema de software, ou seja, seus componentes básicos bem como os relacionamentos entre eles. |
| São projetados para serem genéricos, cabendo adaptá-los às necessidades da aplicação. | Permanecem fixos em todas as instâncias do framework de aplicação. |
| Normalmente, representados com classes abstratas. | Também conhecidos como "core" do framework. |
Fonte: Milene Serrano - Aula Reutilização & Framework, adaptado.
3.2. Framework - Aplicação no projeto
Utilizamos o framework Angular para o desenvolvimento da aplicação web. Angular é um framework que utiliza de Typescript para a criação de páginas web, é caracterizado por ser uma "Sigle-Page Applications (SPA)", ou seja, diferente de outras aplicações web, que ao interagir com alguma informação da página, toda a aplicação é atualizada, e a comunicação com o back-end é feita de forma dinâmica. O Angular é instalado através do gerenciador de pacotes do NodeJS, um software para execução de javascript.
A Imagem 1, mostra os pacotes do projeto utilizando o framework Angular. É um exemplo de como a organização dos diretórios devem seguir de acordo com a pré-estruturação do framework. Portanto é a forma genérica de como deve ser a estrutura, e os desenvolvedores especializam o código.
Imagem 1: Diretório do projeto.
A próxima imagem, mostra como é feita a estrutura de um componente em Angular, desenvolvido em Typescript. Um componente em Angular é uma classe que recebe o decorator em @Component, e algumas propriedades relacionadas à classe, template (HTML) e estilo (CSS). Depois da estrutura padrão do framework, os desenvolvedores especializam essa instância.
Imagem 2: Classe no Angular.
Pode-se reutilizar um componente em outros locais da aplicação, a Imagem 3, descreve como é feito a reutilização do código, evitando assim partes de código duplicado. Na aplicação, por exemplo, um componente chamado "Postagens" é utilizado em vários momentos na aplicação, como na página "Buscar Imóveis" e na página "Meus Imóveis" (visível apenas para o corretor logado).
Imagem 3: Componente Postagens.
A importância da reutilização é utilizar de algo que mostrou ser bom para determinada situação, evitando assim, o gasto de tempo, recursos e tendo menos riscos de falhas. No exemplo prático, esse trecho de código não é duplicado para ser usado em cada momento que necessita do uso dessas informações, e com apenas a chamada à essa instância, todas suas informações e funções podem ser usadas em outros momentos, algumas abstrações existem dependendo de onde é chamado esse trecho de código, por exemplo, na página de visualizar os imóveis não é disponível as funções de editar as informações do imóvel ou até excluir, funções acessíveis apenas para o corretor, depois de passar pelos métodos de autenticação.
import { ToastService } from 'src/app/services/toast.service';
import { Component, Input, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Imoveis, Imovel } from 'src/app/models/imovel.model';
import ImovelService from 'src/app/services/imovel.service';
import { CorretorService } from 'src/app/services/corretor.service';
@Component({
selector: 'app-postagens',
templateUrl: './postagens.component.html',
styleUrls: ['./postagens.component.css'],
})
export class PostagensComponent implements OnInit {
@Input() icon = false;
@Input('tipo') urlFiltro: string = '';
imoveis!: any;
imoveis_filter!: Imoveis;
filter!: any;
imovel!: Imovel;
icones = false;
constructor(
private service: ImovelService,
private route: Router,
private toast: ToastService,
private corretorService: CorretorService
) {}
ngOnInit(): void {
this.lerimoveis();
}
lerimoveis() {
if (!this.icon) {
this.service.listarImovelFiltro(this.urlFiltro).subscribe(
(resultado) => {
this.imoveis = resultado;
},
(error) =>
this.toast.showErroToast('Erro ao listar os imóveis: ' + error)
);
} else {
this.lerImoveisCorretor();
}
}
lerImoveisCorretor() {
let corretor = this.corretorService.CorretorAtual();
this.urlFiltro = `/${corretor.id}`
this.service.listarImovelFiltro(this.urlFiltro).subscribe(
(resultado) => {
this.imoveis = resultado;
},
(error) => this.toast.showErroToast('Erro ao listar os imóveis: ' + error)
);
}
deleteImovel(imovel: any) {
this.service.deletarImovel(imovel.id).subscribe(
(resultado) => {
this.toast.showSucessToast('Imóvel removido com sucesso');
this.lerimoveis();
},
(error) => this.toast.showErroToast('Erro ao remover imóvel: ' + error)
);
}
view(imovel: any) {
this.service.MostraImovel(imovel.id).subscribe(
(resultado) => {
this.route.navigateByUrl('/imovel/' + imovel.id);
},
(error) =>
this.toast.showErroToast(
'Erro ao carregar as informações do imóvel: ' + error
)
);
}
atualizarImovel(imovel: any) {
this.service.MostraImovel(imovel.id).subscribe(
(resultado) => {
this.route.navigateByUrl('/update-imovel/' + imovel.id);
},
(error) =>
this.toast.showErroToast(
'Erro ao carregar as informações do imóvel: ' + error
)
);
}
showIcones() {
this.icones = true;
}
}
A utilização das informações geradas pelo código, são os cards relacionados aos imóveis. Podendo ser melhor visto no site do projeto, na página Buscar Imóveis.
Imagem 5: Cards gerados pelo component Postagens.
A utilização do trecho de código em outras páginas da aplicação web é realizado no Angular, da seguinte forma:
<app-postagens [icon]="true"></app-postagens>
Imagem 6: Reutilizando Componente.
4. Bibliotecas
O reuso de software pode ser feitor através de um Biblioteca, que é uma solução para um problema em particular. Dessa forma, bibliotecas auxiliam no desenvolvimento de software, pois podem ser usadas em qualquer momento para incorporar uma solução, por meio de funções e métodos. Entre as diferenças que uma biblioteca possui para o framework, é que a biblioteca é chamada pelo desenvolvedor, e seu uso é feito com grau de liberdade maior, já os frameworks devem ser respeitados em seus relacionamentos.
4.1. Bibliotecas - Aplicação no projeto
O próprio framework Angular possui algumas bibliotecas, no desenvolvimento do projeto foram utilizadas essas bibliotecas. Um exemplo de aplicação de uma biblioteca do Angular no projeto foi no uso do Angular Router, responsável pela navegação pelas páginas da aplicação web. A biblioteca Angular HttpClient, foi utilizada na aplicação, pois é uma solução para a comunicação com o servidor de banco de dados. Outro exemplo de utilização de uma biblioteca, foi a aplicação do Angular Forms, que é um sistema para uso de formulários.
Imagem 7: Bibliotecas.
5. Serviços
Os serviços são usados para que tenha comunicação com os diversos sistemas envolvidos em uma solução de software. Existindo assim, uma acessibilidade entre os diversos serviços por meio de padrões e métodos.
5.1. Serviços - Aplicação no projeto
A aplicação de serviço no projeto, é estabelecida com o usuário fazendo a comunicação, por intermédio do browser, com o serviço web de forma padronizada. Melhor detalhada no Documento de Arquitetura de Software no tópico 7 sobre Visão de Implantação.
Imagem 8: Serviços. Autor: Douglas Castro.
A comunicação do sistema web, com os demais sistemas, é realizada utilizando o serviço REST.
Imagem 9: Fonte: Milene Serrano - Aula Reutilização & Framework, adaptado.
Utilizando o framework Angular, alguns serviços foram desenvolvidos para que façam comunicação usando o REST.
Imagem 10: Service Angular.
O services criado no desenvolvimento, realizam a comunicação utilizando os métodos GET, PATCH, POST e DELETE. Um exemplo na aplicação dos métodos mencionados está implementado em "proprietario.service.ts".
Imagem 11: Serviço Proprietário.
Para que a comunicação entre os sistemas e o servidor, sejam feitas da forma mais segura e padronizada, foi desenvolvido uma camada de autenticação.
Imagem 12: Serviço de Autenticação.
Referências
SERRANO, Milene. Arquitetura e Desenho de Software: Aula - Reutilização & Framework, disponível em: aprender3.unb (último acesso: dia 14 de outubro de 2021).
GAMMA, Erich; HELM, Richard; JOHNSON, Ralph; VLISSIDES, John. Padrões de Projeto: Soluções reutilizáveis de software orientado a objetos. Porto Alegre: Bookman, 2007.
L. Peter Deutsch. Design reuse and frameworks in the Smalltalk-80 system. In Ted J. Biggerstaff and Alan T. Perlis, editors, Software Reusability, Volume II: Applications and Experience, páginas 57-71. Addison-Wesley, Reading, MA, 1989.
Agular, acessado dia 14 de outubro de 2021.
Blog Betrybe - Angular: como funciona esse framework e principais bibliotecas!, acessado dia 14 de outubro de 2021.
DEVMEDIA: Angular Components: Conhecendo e configurando no seu projeto., acessado dia 14 de outubro de 2021.
TypeScript is JavaScript with syntax for types., acessado dia 15 de outubro de 2021.
Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine., acessado dia 15 de outubro de 2021.
JavaScript, acessado dia 15 de outubro de 2021.
HTML: Linguagem de Marcação de Hipertexto, acessado dia 15 de outubro de 2021.
Projeto Cardeal: repositório Front-End, acessado dia 15 de outubro de 2021.
Projeto Cardeal: repositório Back-End, acessado dia 15 de outubro de 2021.
Projeto Cardeal: Encontre o lugar ideal para você!, acessado dia 15 de outubro de 2021.
Versionamento
| Data | Versão | Descrição | Autores |
|---|---|---|---|
| 24/09/2021 | 0.1 | Criação do arquivo | Estevao Reis |
| 15/10/2021 | 0.2 | Adição do conteúdo | Tomás Veloso |
| 15/10/2021 | 0.2 | Revisão do documento | Giovana, Bruno, Douglas, Estevão, Gustavo, Igor, Marcos, Pedro, Luiz e Tomás |
| 15/10/2021 | 0.3 | Adição da Metodologia | Tomás Veloso |
| 15/10/2021 | 0.3 | Adição dos links | Tomás Veloso |
| 15/10/2021 | 0.3 | Adição da rastreabilidade | Tomás Veloso |