ARQUITETURA DE SOFTWARE - AULA05

Prévia do material em texto

Arquitetura de Software
Aula 5
Prof. Daniel Silos – 1ª edição – 2020
E-mail: daniel.moraes@ibmr.br
Prof. Daniel Silos – daniel.moraes@ibmr.br 1
mailto:Daniel.Moraes@ibmr.br
5 - PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS MÓVIES
Projeto de arquitetura de aplicações web e 
aplicativos
Objetivos de Aprendizagem
1. Elaborar um projeto de arquitetura para uma 
aplicação WEB.
2. Analisar as necessidades de uma arquitetura 
para aplicativos móveis.
3. Projetar arquiteturas simples para aplicações 
web e aplicativos
Prof. Daniel Silos – daniel.moraes@ibmr.br 2
Antes de abordar a teoria
Modelo C4 (C4 Model) - https://c4model.com/
O modelo e o site foram criados por Simon Brown, 
autor de “Software Architecture for Developers”.
O modelo é voltado para metodologia ágil, focando 
principalmente em aspectos de abstração sobre 
notação, isto é, tem a proposta de focar a 
arquitetura iniciando em um alto nível de abstração 
e caminhando para detalhes mais específicos, mas 
sem ter um nível de detalhamento e com notações 
burocráticas como a UML.
Prof. Daniel Silos – daniel.moraes@ibmr.br 3
https://c4model.com/
Problemas de comunicação...
Prof. Daniel Silos – daniel.moraes@ibmr.br 4
Problemas de comunicação...
Prof. Daniel Silos – daniel.moraes@ibmr.br 5
Problemas de comunicação...
Prof. Daniel Silos – daniel.moraes@ibmr.br 6
Problemas de comunicação...
Prof. Daniel Silos – daniel.moraes@ibmr.br 7
Problemas de comunicação...
Prof. Daniel Silos – daniel.moraes@ibmr.br 8
Qual a ideia por trás do modelo?
Prof. Daniel Silos – daniel.moraes@ibmr.br 9
Estado do Rio de Janeiro
Fonte: https://www.google.com/maps
https://www.google.com/maps
ZOOM in Cidade do Rio de Janeiro
Prof. Daniel Silos – daniel.moraes@ibmr.br 10
Cidade do Rio de Janeiro
Fonte: https://www.google.com/maps
https://www.google.com/maps
Outros exemplos de Zoom inn - mesmo 
nível da cidade do Rio de Janeiro
Prof. Daniel Silos – daniel.moraes@ibmr.br 11
Município de Itaguaí
Fonte: https://www.google.com/maps
Município de Niterói
Fonte: https://www.google.com/maps
https://www.google.com/maps
https://www.google.com/maps
ZOOM in Barra da Tijuca...
Prof. Daniel Silos – daniel.moraes@ibmr.br 12
Barra da Tijuca / Rio de Janeiro
Fonte: https://www.google.com/maps
https://www.google.com/maps
ZOOM in Barra da Tijuca...
Prof. Daniel Silos – daniel.moraes@ibmr.br 13
Barra da Tijuca / Rio de Janeiro
Fonte: https://www.google.com/maps
https://www.google.com/maps
ZOOM in Avenida das Américas...
Prof. Daniel Silos – daniel.moraes@ibmr.br 14
Avenida das Américas – Altura do Centro Universitário IBMR
Fonte: https://www.google.com/maps
https://www.google.com/maps
Por que C4?
Prof. Daniel Silos – daniel.moraes@ibmr.br 15
São 4 níveis de “ZOOM”, isto é, 4 níveis 
hierárquivos
1. Contexto (Context)
2. Contêiner (Container)
3. Componente (Component)
4. Código (Code)
 O nível 2 é um “ZOOM in” do 1, o 3 do 2 e 
o 4 do 3.
Por que C4?
Prof. Daniel Silos – daniel.moraes@ibmr.br 16
São 4 níveis de “ZOOM”, isto é, 4 níveis 
hierárquivos
1. Contexto (Context)
2. Contêiner (Container)
3. Componente (Component)
4. Código (Code)
 O nível 2 é um “ZOOM in” do 1, o 3 do 2 e 
o 4 do 3.
Exemplo – Internet Banking System
Prof. Daniel Silos – daniel.moraes@ibmr.br 17
Diagrama de contexto – Nível 1
Exemplo – Internet Banking System
Prof. Daniel Silos – daniel.moraes@ibmr.br 18
Diagrama de contêiner – Nível 2
Exemplo – Internet Banking System
Prof. Daniel Silos – daniel.moraes@ibmr.br 19
Diagrama de Componente – Nível 3
Exemplo – Internet Banking System
Prof. Daniel Silos – daniel.moraes@ibmr.br 20
Diagrama Classe (Código) – Nível 4
Resumindo...
Prof. Daniel Silos – daniel.moraes@ibmr.br 21
Resumindo...
Prof. Daniel Silos – daniel.moraes@ibmr.br 22
Resumindo...
Prof. Daniel Silos – daniel.moraes@ibmr.br 23
O modelo sugere algumas notações
Prof. Daniel Silos – daniel.moraes@ibmr.br 24
Pessoa Software (Sistema)
Contêiner Componente
O modelo sugere algumas notações
Prof. Daniel Silos – daniel.moraes@ibmr.br 25
Relacionamento
Notações que realmente importam
Prof. Daniel Silos – daniel.moraes@ibmr.br 26
Notação necessária para comunicação
Checklist de revisão: 
https://c4model.com/review/
https://c4model.com/review/
O modelo pode ser adaptado para UML
Prof. Daniel Silos – daniel.moraes@ibmr.br 27
Exercício
Prof. Daniel Silos – daniel.moraes@ibmr.br 28
Estudo de Caso da Clínica Veterinária
De acordo com o descrito, vamos criar 3 
níveis de diagramas:
1. Contexto
2. Contêiner
3. Componentes (Servidor Web)
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 29
Aplicações Web
 Cliente-servidor, normalmente estruturadas com 
arquiteturas de várias camadas
 Interface ou visão do usuário
Camada controladora – direciona o fluxo de informações 
do navegador do cliente de acordo com um conjunto de 
regras do negócio da WebApp.
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 30
 Interface – WebApp
 Projetada com características do navegador
 Executada no cliente (PC ou Dispositivo Móvel)
 Camada de Dados
 Servidor
 Regras de negócio
 PHP – Servidor.
 JavaScript – Cliente.
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 31
Papel do Arquiteto
 Analisar requisitos de segurança e usabilidade para
determinar quais recursos devem ser alocados para o
cliente e/ou para o servidor.
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 32
 O projeto arquitetural sofre influência da estrutura 
(linear ou não-linear) do conteúdo que precisa ser 
acessado pelo cliente. Os componentes arquiteturais 
(páginas Web) são projetados de forma a permitir o 
que o controle seja passado para outros componentes 
do sistema – estruturas de navegação flexíveis.
 Localização da mídia e outros recursos do conteúdo 
também influencia as escolhas arquiteturais feitas 
pelos engenheiros de software – Ex: SGBD
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 33
 Normalmente projetos para dispositivos móveis são 
estruturados com arquiteturas de várias camadas
 Interface do usuário
 Negócio
 Dados
 Cliente magro (thin client – baseado na Web) ou 
cliente rico (rich client)
PROJETO DE ARQUITETURA PARA 
APLICAÇÕES WEB E APLICATIVOS 
MÓVIES
Prof. Daniel Silos – daniel.moraes@ibmr.br 34
 Complexidade em relação aos diferentes tamanhos e 
configurações de dispositivos (entrada, rede, 
memória), SO, hardware, etc.
 Tais características moldam o rumo das alternativas 
arquiteturais que podem ser escolhidas.
 Qual o público alvo do seu app?
Próxima aula
Estudaremos na próxima aula:
6 - AVALIAÇÃO DAS ALTERNATIVAS DO PROJETO
 Linguagens de descrição da arquitetura (ADL)
Revisão da arquitetura
PRESSMAN, R. Engenharia de Software. [Recurso eletrônico, 
Minha Biblioteca]. 8ª ed. BOOKMAN, 2016. Capítulo 13, item 
13.7 a 13.9.
 Busque informações de outros diagramas além dos 
apresentados e tente compreendê-los... https://c4model.com/
Prof. Daniel Silos – daniel.moraes@ibmr.br 35
https://c4model.com/
Referências
 PRESSMAN, Roger. Engenharia de Software Cap. 13, itens 
13.6.5 e 13.6.6.
 SOMMERVILLE, Ian. Engenharia de Software Cap. 7, item 7.1
 https://c4model.com/ - Acessado em 20/09/2020.
Prof. Daniel Silos – daniel.moraes@ibmr.br 36
https://c4model.com/
	Arquitetura de Software�Aula 5
	5 - PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	Antes de abordar a teoria
	Problemas de comunicação...
	Problemas de comunicação...
	Problemas de comunicação...
	Problemas de comunicação...
	Problemas de comunicação...
	Qual a ideia por trás do modelo?
	ZOOM in Cidade do Rio de Janeiro
	Outros exemplosde Zoom inn - mesmo nível da cidade do Rio de Janeiro
	ZOOM in Barra da Tijuca...
	ZOOM in Barra da Tijuca...
	ZOOM in Avenida das Américas...
	Por que C4?
	Por que C4?
	Exemplo – Internet Banking System
	Exemplo – Internet Banking System
	Exemplo – Internet Banking System
	Exemplo – Internet Banking System
	Resumindo...
	Resumindo...
	Resumindo...
	O modelo sugere algumas notações
	O modelo sugere algumas notações
	Notações que realmente importam
	O modelo pode ser adaptado para UML
	Exercício
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	PROJETO DE ARQUITETURA PARA APLICAÇÕES WEB E APLICATIVOS MÓVIES
	Próxima aula
	Referências