1

IFPACurso de Tecnologia em Análise e Desenvolvimento de Sistemas

Engenharia da Web

- Modelagem UML para Web

Prof. Cláudio Martinsclaudiomartins2000@gmail.com

2

Objetivos

Apresentar os modelos para projeto web, utilizando UML com o método WAE.

Definir a proposta da WAE como extensão da UML para modelagem de aplicações web.

3

Processo de desenvolvimento de Aplicações Web

➔O processo para desenvolver software para a web, é, em sua fase de requisitos e análise, semelhante ao processo tradicional.

➔ Levantamento de Requisitos

➔ Identificação das funcionalidades (casos de uso, histórias de usuário, features)

➔ Modelagem Conceitual (modelo de classes de negócio ou do domínio da aplicação)

➔ Testes (criar os cenários de teste para cada funcionalidade e classe de domínio).

➔Nas fases seguintes, ocorre uma adaptação ao contexto da tecnologia web, pois há um tratamento especial para :

➔ Projeto Navegacional

➔ Projeto de Interface com Usuário

➔ Etc.

4

Revisão – WAE (Web Application Extensions)

➔ Web Application Extensions (WAE) é o método proposto por Conallen (1999) para modelar aplicações web, estereotipando as classes UML para representar componentes do projeto web, e sugere outros estereótipos, específicos para o contexto da arquitetura web.

➔ WAE propõe os estereótipos para modelar a visão lógica do projeto web: Estereótipos de classe: client page, server page e form Estereótipos de associação: link, build, redirect, forward, etc.

Além desses estereótipos, a WAE prevê a definição de valores rotulados (tag values), representados entre colchetes ([ e ]), e restrições (constraints), representadas entre chaves ({ e }), para alguns elementos que contenham regras e limites.

5

Sobre a UML e WAE➔A UML é empregada como um formalismo básico e estendido por meio de estereótipos e valores rotulados. ➔A UML é uma linguagem de propósitos gerais, não possuindo estereótipos (originais da UML) suficientes para modelar aspectos específicos de aplicações Web. ➔A WAE estende a notação UML, trazendo novos estereótipos com semântica e restrições adicionais que permitem a modelagem de elementos específicos da arquitetura envolvida numa aplicação Web, e incluindo-os nos modelos do sistema.

➔Utilizando a WAE, é possível representar páginas, links e o conteúdo dinâmico no lado cliente e no servidor.

6

Mecanismo de Extensão da UML➔Um mecanismo de extensão é algo que permite a modelos UML um refinamento de sintaxe e semântica para projetos específicos.➔Faz parte do mecanismo de extensão:

– Estereótipos (Stereotypes) = Definição de novos elementos a partir de outros já existentes.

– Restrições (Constraints) = Regras pertinentes aos elementos e propriedades.

– Valores Rotulados (Tagged Values) = Novas propriedades para elementos já existentes.

Leia mais sobre UML: http://www.dainf.ct.utfpr.edu.br/~tacla/UML/Apostila.pdf

7

Estereótipo do Modelo de AnálisePreocupa-se com os elementos essenciais da

modelagem de alto nível. Os objetos a serem modelados são:

Páginas do lado cliente, HTML, frames, etc.JSP pode ser representado quando contém apenas interface de apresentação.

Páginas e classes do lado servidor onde está representada a lógica da controle e de lógica da aplicação (o próprio caso de uso)Ex: Servlets e JSP de controle (não recomendado)

Objetos de Classes de dados. Representa os dados da modelagem de negócio (persistentes e transientes).Ex: Classes de negócio (JavaBeans).

8

Regras para o Modelo de Análise

Não permitidoPermitido

Dependência por acesso

9

Modelos de Projeto Web com WAE- Visão Lógica

- Visão de Componentes

10

WAE (Web Application Extensions) e Projeto

✗ Em essência, A WAE é voltada para modelar o projeto (design) da aplicação web, pois nessa fase há a necessidade de especificar detalhes da solução (tecnologia web).

✗A fase de projeto é dividida em duas visões: ✗ Visão Lógica, que está em um nível mais alto de

abstração, definindo classes e associações, e✗ Visão de Componentes, que trata dos arquivos que

efetivamente comporão o sistema implementado (páginas, pluggins, controles, imagens, páginas, diretórios, executáveis, etc)

11

Visão Lógica da WAE✗Para a visão lógica, são definidos três estereótipos principais aplicados sobre o elemento classe do meta-modelo da UML e diversos estereótipos de associação, como mostram as tabelas a seguir. ✗Tais estereótipos podem ser utilizados para a criação de diagramas de classes que representem os elementos Web que compõem o sistema, chegando a um nível de detalhes maior do que os diagramas de classe da fase de análise (pois já incluem informações da plataforma de desenvolvimento), mas ainda num nível de abstração lógico.

12

Tab1: Estereótipos de classe utilizados na visão lógica do projeto

13

Estereótipo «ServerPage»

Uma página de servidor representa uma página Web que contém scripts executados no servidor.

• Esses scripts interagem com os recursos no servidor (base de dados, lógica do negócio, arquivos, etc.).

• As operações deste objeto representam as funções em script e os atributos representam as variáveis definidas na página.

Restrições: As páginas de servidor apenas podem interagir com objectos que estejam no servidor.

Na solução Java temos os Servlets e JSP de controle.

14

Estereótipo «Client Page»

Uma página de cliente é uma página Web que utiliza tags HTML.

As páginas HTML são visualizadas pelo browser de cliente e podem conter scripts que são interpretados pelo browser.

– As operações deste objeto correspondem a funções de script e os atributos correspondem a variáveis definidas nessas funções.

– As páginas cliente podem ter associações com outras páginas, quer sejam de cliente ou de servidor.

15

Estereótipo «Form»

Uma classe com estereótipo <<form>> é um conjunto de campos de entrada que fazem parte de uma página HTML.

➔Os atributos representam os campos de entrada (text areas, radio buttons, check boxes)➔Qualquer função que interaja com o form deve ser considerada como uma operação (método) da página que contém o form.

16

Tab2: Estereótipos de associação utilizados na visão lógica do projeto

17

Associação com «Link» ➔Um link é um apontador de uma página de cliente para outra página➔Num diagrama de classes um link é uma associação entre uma <<client page>> e outra <<client page>> ou <<server page>>

«link»{prodId}

18

Associação com «Submit»

➔A associação <<submit>> é sempre utilizada entre um form e uma página de servidor➔O form envia os dados existentes nos campos para serem processados por uma página de servidor➔O servidor Web processa a página de servidor que aceita e utiliza os dados provenientes do form submetido

19

Associação com «Build»➔A associação <<build>> é uma relação especial que serve de ponte entre as páginas de cliente e de servidor➔As páginas de servidor apenas existem no servidor e são utilizadas para construir páginas cliente.➔A associação <<build>> identifica quais as páginas de servidor responsáveis por construir páginas cliente➔Esta associação é unidireccional no sentido da página servidor para a de cliente

➔Uma página servidor pode construir várias páginas cliente, mas uma página cliente apenas pode ser construída por uma página de servidor Build

20

Associação com «Redirect»➔Representa uma associação unidirecional para indicar o redirecionamento de navegação de uma página para outra (tanto “client”, quanto “server”). ➔Causa uma atualização do endereço na página resultado no browser.

<<redirect>>

21

Associação com «Forward»

➔Semelhante ao <<Redirect>>, porém não retorna a resposta para uma página cliente que é exibida ou atualizada no browser, mas sim uma chamada direta à página no próprio servidor que, então, repassa para o browser a resposta.

<<forward>>«serverPage» «serverPage»

22

Outros estereótipos

➔Outras classes– script, frame, frameset, target

➔Outras associações– script

– target link

– include

– frame content

➔Outros componentes– object

– JSP Page

– servlet

– bean

23

Exemplo (estudo de caso): Login

➔ O estudo de caso, a ser usado nos exemplos, diz respeito às funcionalidade de autenticação (Login).

➔Uma Tela de Login possui um texto de abertura como conteúdo gerenciado por algum sistema de gerência de conteúdo (Ex: um Content Management System – CMS).

➔Nessa tela é possível que o usuário efetue seu login no sistema por meio da operação de autenticação e do Formulário de Login, que possui dois campos de texto: login e senha.

➔ Caso o acesso (login e senha) esteja correto, o sistema apresenta a página de Homepage (Home).

➔ Caso o acesso esteja incorreto, o sistema apresenta uma página de erro (ErroLogin), que permite retornar à Tela de Login.

24

Exemplo de diagrama de visão lógica da camada Web

Esse exemplo diz respeito à uma funcionalidade de Autenticação (Login)

25

Visão de Componentes

26

WAE e a visão de componentes Para a visão de componentes, a modelagem WAE

(extensão UML para aplicações web) são definidos três estereótipos a serem utilizados no diagrama de componentes da UML: <<static page>>, componente que representa páginas

estáticas, ou seja, sem processamento no lado do servidor; <<dinamic page>>, componente que representa páginas

dinâmicas; e <<physical root>>, pacote de componentes representando

uma abstração de uma hierarquia de arquivos que contém recursos disponíveis à solicitação no servidor Web.

27

Visão de Componentes da WAE

➔Por meio de diagramas de componentes (da UML), a visão de componentes busca modelar o mapeamento entre os arquivos físicos (representados pelos componentes com os três estereótipos citados) e as representações lógicas apresentadas na visão lógica (representadas por classes estereotipadas, conforme discutido anteriormente).

28

Definição de componente na UML

➔Um Diagrama de Componentes permite visualizar a organização dos softwares que constituem o Sistema, também chamada visão física do modelo.

➔Contém informações sobre os componentes de software, arquivos, executáveis e bibliotecas para o Sistema.

➔Ele exibe a organização e dependências entre os componentes de software, incluindo código-fonte, código-binário e componentes executáveis.

29

Exemplos de Diagrama de Componentes (com pacotes)

➔Em um alto nível de abstração (usando pacotes):

30

Exemplos de Diagrama de Componentes (usando componentes)

31

Exemplos de Diagrama de Componentes

Um sistema “Vendas” depende de dois componentes: driver JDBC (oracle) e biblioteca “log4j”

O componente “Dicionário” expõe duas interfaces para ser usado:“spell-check” (corretor) e “synonyms” (lista de sinônimos)

32

Exemplo de diagrama de componentes ligandoa visão lógica aos componentes físicos

Esse exemplo diz respeito à uma funcionalidade de Autenticação (Login)

33

Outros elementos físicos de projeto Além dos estereótipos básicos, para o projeto

avançado, Conallen (WAE) define também: biblioteca de script (componente com estereótipo <<script

library>>) raiz virtual (pacote com estereótipo <<virtual root>>) recurso HTTP (componente com estereótipo <<HTTP

resource>>) biblioteca de tags JSP (pacote com estereótipo <<JSP tag

library>>) Tag JSP (classe com estereótipo <<JSP tag>>)

composta por um elemento que representa o corpo da tag (dependência com estereótipo <<tag>>) e

opcionalmente um elemento que reúne informações extras (dependência com estereótipo <<tei>> - tag extra info).

34

Modelo de Experiência do Usuário (UX)

35

Modelagem de Experiência do Usuário (UX)

O modelo de experiência do usuário (User Experience – UX) visa apoiar a elaboração de modelos de análise

O modelo UX define a aparência de uma aplicação Web, seus caminhos de navegação e a estrutura das páginas

O modelo UX é composto de dois artefatos: mapas de navegação e roteiros.

36

Modelagem de Experiência do Usuário (UX)

Mapas de navegação mostram as telas que compõem o sistema.

Uma tela (screem) é algo que é apresentado ao usuário, contendo uma infra-estrutura padrão de interface Web (texto, links, formulários etc.) e possuindo nome, descrição, conteúdo (estático, de lógica de negócio ou gerenciado), campos de entrada e possíveis ações a serem executadas.

Telas são modeladas como classes estereotipadas: Uma tela comum recebe o estereótipo <<screen>> Um compartimento de tela (ex.: um “frame” ou “div” HTML) é

modelado como <<screen compartment>> (bloco) e um formulário recebe a denominação <<input form>>

37

Exemplo de um modelo UX (login) Seguindo o estudo de caso do “Login”... A navegação é modelada por associações.

Por exemplo, se o cliente for corretamente identificado, segue para a tela Home, que possui dois compartimentos: Menu e Tela Inicial.

Esta última possui um texto de boas-vindas, estático (a inclusão de conteúdo estático no modelo é opcional), e exibe a foto do cliente, que é um conteúdo do tipo lógica de negócio, ou seja, proveniente da camada de negócio.

Telas podem ter associadas classes normais do domínio do problema, como é o caso da associação entre Tela Inicial e CarrinhoCompras, simbolizando que os itens do carrinho podem ser exibidos nessa tela.

38

Exemplo de mapa de navegação do modelo de UX

39

Roteiro de Navegação

Um roteiro (cenário) é uma maneira de contar uma história (cenário) de um caso de uso.

Um roteiro pode ser capturado por um diagrama de colaboração (comunicação, na UML 2) da UML, por se parecer mais com um roteiro tradicional (enfatizando a seqüência temporal, passo a passo da execução das operações),

Pode também ser modelado por meio de diagramas de seqüência ou de atividade.

40

Exemplo de roteiro/cenário

41

Exemplo 2: “Micro Blog”

42

Mapeamento de Interface com Usuário (UX)

43

Modelo Conceitual + Modelagem de Experiência (Interface com Usuário)

44

Principais estereótipo WAE para o MicroBlog

ModelagemConceitual

(UX - Experiência do

Usuário)

Modelagem do Projeto

Web

45

Passagem de parâmetros em “Link”

Classifica postagem por <a href=blogger?order=author> AUTOR </a>Ou por <a href=blogger?order=title> TITULO </a>

46

Roteiro usando diagrama de sequência para o cenário “Atualizar MicroBlog”

47

Atividade/Exercício

➔Considere o seguinte cenário para um sistema de webmail (como Hotmail ou Gmail), onde o usuário acessa a homepage, clica em “Criar nova conta”, em seguida o sistema apresenta um formulário de cadastro. Ao finalizar o processo de cadastramento, o sistema entra na página de webmail.➔Elaborar os seguintes modelos:

➔VISÃO LÓGICA de classes (UML/Web) para representar um site de inscrição de conta de email.

➔Modelagem de Experiência do Usuário (UX), para modelar as telas utilizadas na navegação do exemplo citado.

➔Complete a modelagem para o cenário onde o usuário já possui conta de acesso.

48

Referências➢Modeling Web Application Architectures with UML, por Jim Conallen, Rational Software, em junho de 1999.

- Disponível na edição de outubro de 1999 (volume 42, número 10) da Communications of the ACM. http://www.wthreex.com/rup/papers/pdf/webapps.pdf(10/04/2011).

➔

➢CONALLEN, Jim. Desenvolvimento de aplicações Web com UML (2a. edição). Rio De Janeiro: Campus, 2003. 476