teorico_IV

Prévia do material em texto

Modelagem de Sistemas 
para Internet
Responsável pelo Conteúdo:
Prof. Dr. Cleber Silva Ferreira da Luz
Revisão Textual:
Caique Oliveira dos Santos
Modelagem Web na Prática
Modelagem Web na Prática
• Mostrar, passo a passo, uma modelagem web por meio de um projeto-exemplo.
OBJETIVO DE APRENDIZADO 
• Introdução;
• Projeto-Exemplo;
• Modelagem da Aplicação Web;
• Conclusão e Resumo da Unidade.
UNIDADE Modelagem Web na Prática
Introdução
As aplicações web vivem uma total mudança. Os sistemas web passaram de simples 
sistemas compostos por apenas tags HTML e um framework simples para grandes e 
complexas aplicações que exigem um alto poder de processamento, além de grande 
necessidade de tecnologias mais sofisticadas. O desenvolvimento de aplicações desse 
porte, geralmente, é complexo, trabalhoso e arriscado. Para que haja sucesso no desen-
volvimento de tais aplicações, devem ser considerados e analisados todos os riscos do 
projeto e a tecnologia adequada para a aplicação em questão; inclusive, deve ser escolhi-
do, principalmente, um processo de desenvolvimento de software apropriado. É impos-
sível afirmar que boa parte do êxito de aplicações complexas vem dá escolha certa do 
processo e também da forma como este foi conduzido e como as fases foram projetadas. 
Anteriormente, realizamos um estudo sobre a Engenharia Web baseada na UML, 
também conhecida como UWE, que se trata de um processo de desenvolvimento de 
aplicações web. Vale lembrar que a UWE consiste em uma linguagem modeladora para 
o desenvolvimento de aplicações web e visa à unificação de todos os elementos do pro-
cesso de desenvolvimento de sistemas web. Ela utiliza e adapta os diagramas da UML 
para poder modelar aplicações web. 
O objetivo desta Unidade é descrever um projeto-exemplo para que possamos apli-
car, na prática, todo o conhecimento obtido sobre modelagem de sistema web. Aqui, 
iremos utilizar todos os conceitos de UWE. Se você ainda tiver dúvidas sobre essa lingua-
gem ou não a conhece, é necessário realizar um breve estudo das unidades anteriores. 
Assim, conseguiremos um bom entendimento desta Unidade e também criar os diagra-
mas de forma eficiente e correta. 
Para aplicarmos todos os conceitos apresentados anteriormente, vamos considerar 
um projeto que é apresentado na próxima seção. 
Projeto-Exemplo
A Vibe Moda é uma empresa tradicional no ramo de vendas de roupas masculina 
e feminina. Atualmente, realiza suas vendas em lojas físicas próprias. No entanto, por 
causa da pandemia da covid-19, a empresa decidiu criar uma loja virtual para vender 
seus produtos pela internet. Então, a Vibe Moda contratou a empresa Five Stars, de 
gestão em tecnologia, para desenvolver a sua loja virtual. 
Depois de realizar algumas entrevistas com os gestores da Vibe Moda, a Five Stars 
elaborou uma visão geral do sistema, que é apresentado a seguir: 
A aplicação a ser desenvolvida é uma loja virtual onde são apresentados 
diversos catálogos de roupas e o usuário pode navegar por eles e escolher 
um modelo de roupa. Após essa escolha, o usuário pode escolher uma 
cor e um tamanho para o modelo selecionado. Em seguida, o sistema 
deve adicionar o item ao carrinho de compras do usuário e, se este dese-
jar finalizar a sua compra, o sistema deve pedir que ele faça login ou se 
8
9
cadastre. Para finalizar a compra, o sistema deve pedir os dados bancá-
rios e validá-los com as instituições financeiras, devendo também apre-
sentar uma mensagem dizendo se a compra foi aprovada ou reprovada.
A Five Stars realizou, inclusive, um levantamento de requisitos funcionais para o de-
senvolvimento do sistema, os quais estão apresentados a seguir:
Quadro 1
Requisitos 
funcionais
• O sistema deve apresentar todas as roupas do catálogo;
• O sistema deve permitir que o usuário escolha um ou mais modelos de 
roupas entre os diversos modelos apresentados pelo catálogo;
• O sistema deve permitir que o usuário escolha um tamanho de roupa do 
modelo selecionado;
• O sistema deve permitir que o usuário escolha uma cor de roupa para o 
seu item selecionado;
• O sistema deve permitir acrescer itens no carrinho de compra do usuário;
• O sistema deve permitir excluir itens do carrinho de compra do usuário;
• O sistema deve permitir que o usuário faça o login;
• O sistema deve permitir que o usuário faça o seu cadastro;
• O sistema deve calcular o valor do frete para a entrega do produto para 
o endereço especificado pelo cliente;
• O sistema deve permitir que o usuário escolha a forma de pagamento 
(débito ou crédito);
• O sistema deve permitir que o usuário digite os dados do pagamento;
• O sistema deve apresentar uma mensagem de compra autorizada ou 
não autorizada pela instituição financeira do cartão.
Agora que já temos as informações iniciais do projeto, vamos modelá-lo utilizando o pro-
cesso de Engenharia Web baseada na UML. Tal modelagem é descrita na próxima seção. 
Modelagem da Aplicação Web
Para modelarmos essa aplicação, vamos utilizar a Engenharia Web baseada na UML, 
a UWE. Basicamente, a UWE usa os diagramas da UML para fazer modelagem de 
aplicações web. O desenvolvimento dessas aplicações possui algumas características 
semelhantes e outras diferentes do desenvolvimento de aplicações tradicionais. Assim, 
a UWE adapta os diagramas da UML para modelar aplicações web. Essa adaptação 
consiste no uso de estereótipos.
Na modelagem realizada na UWE, são construídos três modelos: 
• Modelo conceitual: representa uma abstração do sistema; 
• Modelo de navegação: permite especificar quais classes serão visíveis ao usuário; 
• Modelo de apresentação: consiste na forma como os elementos de navegação 
serão apresentados.
Vamos iniciar a modelagem do nosso projeto-exemplo pelo modelo conceitual. Este 
descreve o domínio da aplicação por meio de classes e suas relações. Logo, o modelo 
conceitual da UWE é representado utilizando o diagrama de classe de UML. Todavia, 
9
UNIDADE Modelagem Web na Prática
para que possamos realizar uma boa modelagem, devemos criar os casos de uso e, a 
partir destes, podemos criar o diagrama de classe com mais detalhes e mais robusto. 
Para fins didáticos e para não estender muito, visto que o foco aqui é aplicar os conceitos 
já estudados, vamos considerar apenas um cenário e um único diagrama de caso de uso. 
Vale ressaltar que a UWE não contempla o diagrama de caso de uso. Entretanto, para 
realizar uma modelagem consistente, é aconselhável criar primeiro os casos de uso antes 
do modelo conceitual. Assim, é possível obter uma visão ampla das funcionalidades do 
sistema. A Figura 1 apresenta o diagrama de caso de uso para o cenário “Comprar uma 
camisa masculina”. A seguir, é apresentado esse cenário.
Comprar uma camisa masculina:
• O cliente navega pelo site e entra na seção de moda masculina;
• O cliente escolhe um modelo de camisa;
• O cliente escolhe a cor e o número da camisa;
• O cliente adiciona a camisa ao carrinho de compras;
• O cliente realiza o login no site;
• O cliente preenche os dados do pagamento;
• O sistema de cartão autoriza o pagamento;
• O sistema avisa o usuário sobre o sucesso da compra.
Só para reforçar, o diagrama de caso de uso é uma forma de capturar a interação do 
usuário com o sistema. Ademais, esse diagrama é uma maneira de analisar as funciona-
lidades que a aplicação pode possuir. Ele é composto de atores, caso de uso e cenários. 
O diagrama apresentado na Figura 1 reflete o cenário descrito anteriormente. Nesse 
sentido, vale a pena salientar que o cenário tem um papel fundamental na construção 
do diagrama, pois descreve todas as possíveis “ações” que o usuário pode realizar.
Cliente
Escolher uma cor e
 tamanho
Escolher uma
 Camisa
Entrar na seção de 
moda masculina
Navegar pelo site
Adicionar ao 
Carrinho
Logar no site
Efetuar o 
Pagamento
Include
Include
Include
Autorizar o 
Pagamento
Sistema de Cartão
Figura 1 – Diagrama de caso de uso: “Comprar uma camisa masculina”
10
11
Após a criação do diagramade caso de uso, podemos iniciar o modelo conceitual. 
Como já mencionado, na UWE, o modelo conceitual é dado pela construção do dia-
grama de classe da aplicação a ser desenvolvida. Diagramas de classe são apresentados 
com detalhes nas unidades anteriores. Todavia, em síntese, podemos dizer que esse 
tipo de diagrama “permite realizar uma visão estática do sistema, quais classes e suas 
relações irão compor o sistema” (MARTINS,2020) . A Figura 2 apresenta um diagrama 
de classe para o projeto-exemplo considerado. É importante ressaltar que, para fins 
didáticos, nem todos os aspectos de um sistema real são considerados neste diagrama, 
que possui apenas fins educativos. 
 Endereco
- logradouro: String
- numero: int
- bairro: String
- estado: String
- cep: String
+ Endereco()
1.1
 Cliente
- nome: String
- CPF: String
- endereco: Endereco
+Cliente()
1.1
1.1
1.11.* 1.1
 Login
- usuario: String
- senha: String
+Login()
 Pagamento
- valor: double
+Pagamento()
 CartaoDeDebito
- NumConta: int
- NumAgencia: int
+CartaoDeDebito()
 CartaoDeCredito
- numero: String
- CVC: int
+ CartaoDeCredito()
 CarrinhoDeCompra
- valorTotal: double
- qtdProdutis: int
- produtos[]: Produtos
+ buscarProduto(): void
 Produto
- valor: double
- numeroDaRoupa: int
- Cor: String
+ buscarProduto(): void
 Pedido
- numero: int
- valorTotal: double
-qtditem: int
+ expedir(): void
+ encerrar(): void
Figura 2 – Diagrama de classe: modelo conceitual
Ao término da elaboração do diagrama de classe criado no modelo conceitual, po-
demos analisá-lo e criar as classes propostas por ele. O diagrama de classe sempre 
proporciona uma visão estática e macro do sistema. 
Após realizarmos o modelo conceitual, podemos dar início à construção do modelo 
de navegação. Aquele é a base para este. Segundo alguns autores, o modelo de navega-
ção é tido como uma visão definida do modelo conceitual. Ele é obtido em dois passos: 
primeiro é criado o modelo de espaço de navegação, que permite especificar quais 
as classes do sistema poderão ser visitadas na navegação do sistema, e, em seguida, é 
criado o modelo de estrutura navegacional, que define a navegação da aplicação, ou 
seja, como os elementos da navegação serão visitados ou acessados. O modelo de es-
trutura navegacional é criado com base no modelo de espaço de navegação. Para este 
projeto, o modelo de navegação ficaria gigante. Assim, não iremos considerar todos os 
elementos, mas apenas alguns importantes a fim de apresentarmos um modelo com-
pacto e simples. Consideramos o modelo em duas partes, A e B. A Figura 3 apresenta 
a parte A e a Figura 4 a parte B. Na parte A do modelo, há uma visão geral do modelo 
de navegação. Já na parte B, há um exemplo de como seria o modelo consideração 
um menu de opções, nesse caso, a opção de roupas masculinas. Vale ressaltar que tal 
modelo é simples e compacto porque é utilizado para fins educativos. 
11
UNIDADE Modelagem Web na Prática
<<server page>>
Catálogo Geral Roupas Masculinas
<<server page>> <<server page>>
<<server page>>
<<server page>>
<<Menu>>
<<Navigation Class>>
Roupas Femininas
<<html Form>>
Cadastro Login
<<client page>>
Pagina do usuário
Área de Usuário
A
Figura 3 – Modelo de navegação: geral
O modelo de navegação geral fornece uma idea geral de como seria a navegação do 
site. No modelo apresentado anteriormente, são usados os seguintes estereótipos: 
• <<navigation class>>: representa uma classe conceitual cuja instância pode ser 
visitada por usuários durante a navegação; 
• <<menu>>: Com este estereótipo, podemos declarar menus nas páginas da aplicação;
• <<server page>>: é utilizado para representar uma página web dinâmica que re-
aliza algum tipo de processamento no servidor; habitualmente, suas operações re-
presentam funções de script;
• <<client page>>: representa uma página web estática acionada quando o cliente a 
requisita. Essa página pode conter scripts do lado do cliente;
• <<html form>>: representa formulários HTML para entrada dos dados. Neste es-
tereótipo, os atributos representam os campos do formulário.
A Figura 4 mostra como seria a navegação a partir da página “Roupas Masculinas”. 
<<client page>> <<client page>> <<client page>> <<client page>>
Moda PrimaveraModa OutonoModa InvernoModa Verão
<<server page>>
Roupas MasculinasB
Figura 4 – Modelo de navegação a partir da página “Roupas Masculinas”
12
13
Nesse modelo, podemos abstrair que, a partir da página Roupas Masculinas, o usuá-
rio pode navegar pelas páginas “moda verão”, “moda inverno”, “moda outono” e “moda 
primavera”. Vale ressaltar ainda que a navegação continua a partir dessas páginas, to-
davia, por uma questão de espaço, não será apresentada a modelagem da navegação 
completa do sistema. Com o intuito didático, é mostrada apenas parte da modelagem; 
assim, é possível abstrair o conceito e aplicar futuramente em outras partes do projeto, 
uma vez que a técnica é a mesma. 
O modelo de navegação proporciona uma visão macro do sistema, considerando to-
das as páginas web que o usuário possa visitar. Esse modelo disponibiliza uma visão so-
bre a navegação do usuário no site e a partir da onde o usuário pode acessar uma página. 
Além disso, utiliza os estereótipos definidos na UWA, os quais são usados pela UWE.
Após criar o modelo de navegação, o próximo passo é elaborar o modelo de apresen-
tação, que representa a visualização do sistema para o usuário – como ele irá visualizar e 
acessar os elementos da aplicação. Para cada página, é criado um modelo de apresentação. 
Em palavras simples, esse modelo é representado por um diagrama que descreve 
como as interfaces de usuários serão elaboradas. No modelo de apresentação, usamos 
alguns estereótipos que foram definidos na UWA com base em elementos primitivos, 
como img, text, button, link, entre outros. 
Ainda, tal modelo realiza uma transformação no modelo de estrutura de navegação 
em um conjunto de modelos que mostram o local, os esquemas e o comportamento dos 
objetos que serão visíveis ao usuário. A Figura 5 exibe o modelo de apresentação para 
a página index, a página inicial. 
<<static page>>
Vibe Modas
<<presentation class>>
Moda
<<Menu>>
<<link>> <<link>>
<<link>> <<link>>
<<img>>
<<img>>
<<img>><<img>>
<<img>> <<img>>
<<link>>
Entrar
<<link>>
Ofertas especiais
<<link>>
Moda Feminina
<<link>>
Moda Masculina
<<text>>
<<img>> <<img>>
Figura 5 – Modelo de apresentação: página index
13
UNIDADE Modelagem Web na Prática
Nesse modelo, usamos os seguintes estereótipos:
• <<img>>: permite inserir imagem na página web da aplicação. É semelhante à tag 
<img> do html; 
• <<text>>: permite inserir um texto na página web da aplicação. É semelhante à tag 
<text> do html;
• <<link>>: representa um link comum entre páginas web. É similar à tag <a> em html;
• <<static page>>: representa páginas web estáticas, isto é, sem processamento no 
lado do servidor;
• <<presentation class>>: declara a classe de apresentação, a classe principal no 
modelo de apresentação;
• <<menu>>: usado para definir menus.
A Figura 6, por sua vez, ilustra um modelo de apresentação para a página de Moda 
Masculina. Nesse modelo, usamos os mesmos estereótipos do modelo de apresentação 
da página inicial. 
<<link>>
<<link>>
<<link>><<img>>
<<img>>
<<img>>
<<text>>
<<text>>
<<text>>
<<link>>
<<text>>
<<text>>
<<img>>
<<img>>
<<link>>
<<link>> <<link>><<link>><<link>>
Moda Masculina Moda Feminina Ofertas especiais Entrar
<<Menu>>
<<presentation class>>
<<img>> <<img>> <<img>>
<<text>> <<img>>
Moda Masculina
Vibe Modas
<<static page>>
Figura 6 – Modelo de apresentação: página de moda masculina
É importante observar que o modelo de apresentação utiliza os principais estereó-
tipos da UWA para definir os elementos das páginas web da aplicação, e a UWE usa 
todos os estereótipos da UWA. Neste momento, é interessante comentarmos um pouco 
mais sobre a UWA e até mesmo propormos os diagramas definidos por ela para o pro-
jeto-exemploconsiderado nesta Unidade. A UWA é considerada uma extensão da lin-
guagem UML, e, ao usarmos tais extensões, podemos documentar e facilitar o processo 
de desenvolvimento. A partir dessas extensões, construímos modelos bem expressivos e 
intuitivos, aplicando uma linguagem formal de fácil entendimento entre todos da equipe. 
Como estudado anteriormente, a UWA visa a duas visões: lógica e de componentes.
14
15
A visão lógica utiliza estereótipos específicos, tais como <<client page>>, <<server 
page>> e <<html form>>. Nessa visão, temos uma perspectiva abstrata do sistema, em 
que definimos classes e associações. Assim, na visão lógica, podemos criar um diagrama 
com um nível alto de abstração. A visão de componentes, por seu turno, utiliza os 
estereótipos <<static page>>, <<dinamic page>> e <<physical root>> e permite uma 
perspectiva dos elementos tecnológicos que serão usados na aplicação web. Nessa visão, 
criamos um diagrama de componente.
Vamos criar os diagramas tanto de visão lógica quanto de componente para o proje-
to-exemplo. Para o diagrama de visão lógica, vamos considerar o cadastro de um usu-
ário no site. Lembrando que, para efetuar a compra, o usuário precisa estar logado no 
sistema. Para isso, a aplicação web que está sendo desenvolvida conta com uma opção 
de logar no site, inclusive uma opção para cadastrar usuário, caso seja o primeiro acesso 
dele. O diagrama de visão lógica apresentado na Figura 7 considera justamente o cadas-
tro de usuário. Nesse diagrama, o usuário acessa a <<client page>> e coloca os dados 
para realizar o cadastro, os quais são inseridos no <<html form>> e, posteriormente, 
são enviados para serem validados no servidor. A <<server page>> é a página do servi-
dor responsável por validar os dados do usuário. Caso o cadastro seja feito com sucesso, 
isto é, sem qualquer inconsistência de dado, o usuário é direcionado para a “Área do 
Usuário”. Caso haja alguma inconsistência, ele é direcionado para uma tela de erro e, 
logo em seguida, é direcionado para a tela de cadastro novamente. O direcionamento é 
feito pelo estereótipo <<build>>. 
<<client page>>
Tela Login
<<submit>>
<<server page>>
ProcessarCadastro
+ver�carFormulario(): void
<<build>> <<build>>
<<client page>> <<client page>>
Área do Usuário ErroLogin
<<HTML Form>>
FormCadastro
- nome : String
- e-email : String
- CPF : String
- RG : String
- Celular : int
- nome : String
- e-email : String
- CPF : String
- RG : String
- Celular : int
+ver�carDados() : void
<<link>>
Figura 7 – Visão lógica: cadastro de usuário no site
Quanto à visão de componentes, vamos considerar que, no desenvolvimento do siste-
ma, será usado SQLServer para o banco de dados. Para o desenvolvimento, será usado 
o framework JSF. A visão de componentes é importante, pois mostra um panorama do 
sistema sobre os elementos (tecnologias e pacotes) que o formam. A Figura 8 apresenta 
o diagrama de componentes.
15
UNIDADE Modelagem Web na Prática
Vendas
SQLSERVER
JSF
Figura 8 – Visão de componentes
Conclusão e Resumo da Unidade
Atualmente, aplicações web são grandes e complexos centros de processamento de 
dado que visa ao fornecimento de serviços pela internet. Tais aplicações requerem cui-
dado, pois, geralmente, demandam excelentes tecnologias e um bom desenvolvimento. 
Nesse sentido, para garantir que o desenvolvimento da aplicação ocorra de forma segura 
e tranquila, é necessário um planejamento adequado, levando em conta todos os riscos. 
Ademais, para que haja total sucesso no desenvolvimento da aplicação, é fundamen-
tal a escolha de um processo de desenvolvimento de sistema adequado e coerente com 
as características da aplicação. O desenvolvimento de aplicações web possui algumas 
características semelhantes e outras diferentes das do processo de desenvolvimento de 
sistemas tradicionais. Assim, é essencial a utilização de um processo que aborde tanto 
as caraterísticas semelhantes quanto as divergentes das do processo de desenvolvimento 
de software. Hoje, existem diversos processos de desenvolvimento para aplicações web 
que consideram os aspectos semelhantes e os divergentes, entre elas se encontra a 
 Engenharia Web baseada na UML, a UWE. 
A UWE é um processo de desenvolvimento de software baseado na UML. Esse 
processo realizou algumas adaptações nos diagramas da UML para poder considerar as 
características específicas que só as aplicações web possuem. 
Ao longo desta disciplina, estudamos diversas formas de modelar aplicações web, 
visando sempre a melhores práticas, conceitos e tecnologias que estão presentes no 
mercado atualmente. Como uma forma válida de aplicação de todo o conhecimento 
obtido, esta Unidade aborda um projeto-exemplo para que possamos aplicar, passo a 
passo, todos os conceitos estudados sobre a modelagem de aplicações web. Aplicando 
tais conhecimentos na prática, é possível perceber o quão importante é realizar uma boa 
modelagem antes do desenvolvimento. Afinal, a modelagem permite avaliar os riscos e 
expor quais serão os elementos que irão compor o sistema, quais serviços e funcionali-
dades que ele irá fornecer. 
16
17
Material Complementar
Indicações para saber mais sobre os assuntos abordados nesta Unidade:
 Vídeos
O que é Engenharia Web?
https://youtu.be/FAidHIDgHHM
 Leitura
Modelagem incremental de aplicações web com abordagem UWE: um sistema para registro
de publicações acadêmicas
https://bit.ly/39Z4CRL
Engenharia de software para web
https://bit.ly/2QevPZB
Processos de Engenharia de Software no Desenvolvimento de Projetos de Websites e Sistemas Web
https://bit.ly/2Qb6KyG
17
UNIDADE Modelagem Web na Prática
Referências
COSTANTIN, C.; RODRIGUES, C. A.; MALANOVICZ, A. V. Modelagem incremen-
tal de aplicações web com abordagem UWE: um sistema para registro de publicações 
acadêmicas. In: Simpósio de Engenharia de Produção, 2014, Brasil. Disponível em: 
<https://rl.art.br/arquivos/5054906.pdf?1417440407>. Acesso em: 31/05/2020.
FOWLER, M. UML essencial: um breve guia para linguagem-padrão. 3. ed. Porto Alegre 
Bookman, 2011. (e-book)
MACHADO, R. P. Desenvolvimento de software. Porto Alegre Bookman, 2016. 
(Programação de sistemas web orientada a objetos em Java, v. 3). (e-book)
MARTINS, C. Modelagem UML para web, 2015. Disponível em: <https://pt.slideshare.
net/claudiomartins2000/modelagem-aplicaes-web-com-uml>. Acesso em: 05/08/ 2020.
MEDEIROS, E. Desenvolvendo software com UML 2.0: definitivo. São Paulo: Pearson, 
2006. (e-book)
NETO, A. Metodologias de desenvolvimento de aplicações web – parte 01, 2008. 
Disponível em: <https://www.devmedia.com.br/metodologias-de-desenvolvimento-de-
-aplicacoes-web-parte-04/9819>. Acesso em: 27/07/2020.
18