Principais diagramas da UML
Projeto Web MVC usando os
conceitos da UML
1

Objetivo
Entender o que é e como funciona na prática a Linguagem de Modelagem Unificada
conhecida como UML e seus principais diagramas. A partir dos conceitos
apresentados aqui, irei demonstrar fundamentos básicos da criação de um projeto do
zero, como dividir o problemas em partes retratando e utilizando a UML (só os
principais diagramas), e por final criar uma solução no Visual Studio.
A ideia principal é mostrar como podemos começar um projeto através de uma boa
análise e repartindo o sistema e blocos para se ter um bom entendimento do que fazer
e mostrar, como pensar em soluções e evitar erros no desenvolvimento de um projeto.
Não importa qual projeto você tem em mente, pode ser uma aplicação desktop, web
ou mobile o conceito será tratado da mesma maneira. Não importa qual a linguagem
ou o banco de dados utilizados, isso não mudará a forma de como será projetado o
seu sistema, mas sim, como definir o escopo, qual plataforma e linguagem que será
utilizada, modelar o sistema em partes para se ter um bom planejamento do que
fazer.
Atenção, não descreverei todos os diagramas da UML, apenas mostrarei conceitos
básicos mais utilizados para criação de um projeto, isso tornaria os slides muito
longos, portanto, manterei o foco na objetividade da UML e somente os diagramas
principais mais utilizados. Objetivo é modelar nosso sistema com alguns conceitos de
UML para que podemos obter maior produtividade no desenvolvimento.
2

Introdução a UML
A UML (Linguagem de Modelagem Unificada) é uma linguagem criada para
visualizar, especificar, construir e documentar artefatos de um sistema de software.
A UML não é uma metodologia de desenvolvimento de software, o que significa
que ela não diz o que você deve fazer primeiro no desenvolvimento de um
software ou muito menos como projetar seu sistema, a UML apenas tem como
objetivo auxiliar e visualizar seu desenho e a comunicação entre os objetos.
A UML provê um conjunto de diagramas e seus componentes todos em conotação
(semântica) bem definidos, com isso é possível através de diagramas visualizar
cada parte do software e como ela será retratada. Seguir os conceitos da UML é
saber definir a raiz do problema antes que ele seja desenvolvido ou implementada,
conseguir localizar erros, pensar em soluções ates mesmo do desenvolvimento
do projeto.
3

Diagrama de Caso de Uso
O diagrama de caso de uso é um diagrama da UML que tem como finalidade
representar a interação entre o ator e o sistema e seu comportamento, cujo seu
objetivo é facilitar a comunicação entre o sistema e o analista. Um diagrama de
caso de uso é representado por:
- Atores;
-Caso de usos;
- Relacionamento entre estes elementos
Um caso de uso é uma sequência de transações executadas por um sistema,
que produz um resultado mensurável de valores para um ator em particular.
4

5
Ator é um usuário do sistema, que pode ser
um usuário humano ou um sistema
operacional, ou seja, o que vai se interagir
com o sistema.
Ator no diagrama de caso de
uso é representado desta
maneira

Perguntas a serem usadas para auxiliar na identificação dos casos de uso
do sistema
Algum ator criará, armazenará, mudará, removerá, ou lerá informações do sistema?
Que casos de uso criarão, armazenarão, mudarão, removerão, esta informação?
Algum ator precisará informar o sistema a respeito de mudanças repentinas?
Algum ator necessita ser informado de certas ocorrências no sistema?
Que casos de uso suportarão ou manterão o sistema?
Todas as ações será executada pelo ator?
Todas as necessidades funcionais podem ser executadas pelos casos de uso?
6

Diagramas de Classes
É o paradigma mais utilizado na UML, representado os tipos de objetos de um
sistema, podendo ser mapeado diretamente para uma linguagem orientada a
objetos tratando- se de uma estrutura lógica estática mostrando elementos
declarativos de modelo, como classes, tipo e seus respectivos conteúdos e
relações. Vejamos o exemplo abaixo:
7

As classes possuem um relacionamento entre elas (para comunicação), ou seja,
compartilham informações entre si e colaboram umas com as outras.
Os principais tipos de relacionamentos são: Associação, Agregação/Composição,
Generalização e Dependência.
Associação entre as classes é um relacionamento estrutural que indica que os
objetos de uma classe estão vinculados a objetos de outra classe.
1 *
8
Relacionamentos
NomedaClasse
atributo1: tipo
atributo2: tipo
Método( )
NomedaClasse
atributo1: tipo
atributo2: tipo
Método( )

Agregação é um tipo de associação (é parte de, todo/parte) onde o objeto
parte é um atributo de todo, a existência do objeto-parte faz sentido, mas não
existindo o objeto todo.
Composição é diferente de Agregação é um relacionamento de contenção.
Um objeto contém (elementos) e esses elementos do objeto depende dele
para poder existir. Um exemplo disso seria a imagem acima pedido contém
itens.
9

Generalização Também conhecida como herança representa suas
dependências e hierarquias, ou seja uma Subclasse que herda itens específicos
da Superclasse.
Dependência representa a dependência entre as classes indicando que os
objetos de uma classe usam serviços dos objetos de outra classe. No exemplo
abaixo a classe Pedido depende de algum serviço da classe Cliente
10

MER (Modelo de Entidade e
Relacionamento)
O Modelo de Entidade e Relacionamento mais conhecido como MER, é um modelo
conceitual onde se descreve o banco de dados representado por um Entidade e
Relacionamento (ER). No diagrama ER, utiliza-se símbolos gráficos para
representar os requisitos dos usuários.
Entidade pode ser considerada por um objeto que é identificado de forma única em
relação aos outros objetos. Após um levantamento de requisitos, pode se ter uma
ideia de como será desenhado o MER e quantas entidades podem existir em um
determinado projeto.
Atributos são características de informações que contém cada entidade, dessa
forma, é possível ligar os atributos as entidades através de uma linha, assim é
possível identificar também cada informação e a quem pertence, ficando clara a
funcionalidade do projeto.
Relacionamento é a definição que se dá as entidades, uma vez que as entidades
são identificadas deve-se então definir como se dá o relacionamento entre elas.
11

12
Um exemplo é a Tabela
Contato_Cliente que se relaciona
com a tabela Cliente onde um
cliente pode ter vários contatos.
Relacionamento
Atributos

Observação
Foi apresentado um dos principais diagramas da UML, com isso é possível
criar um projeto pequeno usando como base esses diagramas. Como fase
inicial do projeto, é necessário modelar o sistema para que se consiga
enxergar os problemas e encontrar soluções antes mesmo de partir para o
desenvolvimento. Claro que não pude descrever todos os diagramas e suas
respectivas funcionalidades, isso levaria mais tempo e a ideia é criar um
projeto simples mas que tenha como intuito tirar as ideias do papel e separar
os problemas em partes, modelando e encontrando soluções eficazes para os
problemas.
Criaremos um projeto para o ambiente web usando as seguintes ferramentas:
- SQL Server (Banco de dados) ;
- Visual Sutudio 2013 usando linguagem C# (para o desenvolvimento);
- Astah (diagramas UML)
13

Ferramentas
O primeiro passo é modelar nosso sistemas criar as classes que vamos utilizar,
os objetos e modelar nosso banco de dados. Para isso vamos utilizar a
ferramenta de modelagem Astah , com ela criaremos todos os nossos
diagramas essenciais para o projeto.
No link abaixo faremos o download da versão astah community.
Link: http://astah.net/download
astah community.
14

Criando o Diagrama de Casos de Uso
Após instalado o astah vamos criar o nosso primeiro o diagrama de casos de
uso. No meu superior seleciona a opção Diagram -> UseCaseDiagram
15

Você verá uma tela como esta, na parte superior tem as ferramentas necessárias
para se construir o caso de uso, selecionando estas ferramentas você deverá
criar seu caso de uso de acordo com a imagem abaixo. O ator que é aquele que
interage com o sistema, podendo realizar o CRUD do cliente, produto, pedido e
usuário. Cada elipse representa os elementos que iremos interagir e com eles
suas classes e tabelas do projeto, assim sendo, faremos um crud para cada um
deles.
16

17

18
OBS: Fizemos o CRUD do cliente, com isso sabemos que nosso sistema irá
incluir, alterar, excluir e consultar um cliente. Faça isso para Pedido, Produto e
Usuário.
Com isso, a parte de Cliente do nosso sistema já está modelada. =)

Criando Diagrama de Classes
19

20
Fizemos nosso diagrama de classes, com base nesse diagrama criaremos
nossas classes no projeto. Podem ver que se trata de um projeto simples,
então tentei deixar o mais básico e didático possível para termos uma ideia de
como começar um projeto e modelar a partir dos diagramas da UML.
Agora que já fizemos o diagrama de caso de uso e nosso diagrama de
classes, o próximo passo é partirmos para o desenvolvimento. Então, vamos
começar a criar o MER (Modelagem de Entidade e Relacionamento) no banco
de dados. Agora que já temos as classes modeladas vamos criar nosso banco
e suas principais tabelas, e é claro que vamos nos basear em nossa
modelagem.

Criando nosso banco e dados
21
Primeiro passo é criar um banco
dados, neste criei o banco
GerenciadorPedidos

22
Segundo passo é criar as tabelas
do nosso banco de acordo com
o diagrama: Cliente, Usuário,
Produto e Pedido

23

24
Terceiro passo é criar o relacionamento entre as tabelas, ou seja,
as FK. Neste caso a tabela Pedido irá se relacionar com Cliente e
Produto. Execute o script abaixo no seu banco para criar as FKs

Criando o Projeto no Visual Studio
Agora que já temos nosso banco de dados pronto, o próximo passo é criar o
projeto no visual studio seguindo de base a modelagem feita anteriormente do
nosso sistema. Com o visual studio aberto vamos criar um projeto novo
conforme a imagem abaixo.
25

26
Selecione a opção MVC e clique em OK

27
Após criado o projeto em mvc será aberta uma tela como esta. Normalmente separa-se
as camadas por projetos, com isso criarei as 3 principais camadas que são: DALL
(acesso a dados), BLL (camada de negócios), UI (camada de apresentação) e UnitTest
(camada de testes unitários). Com o botão direito em cima da solution vamos add um
novo projeto DALL.

28
Com o botão direito na solution selecione Add – New Project – Web Application e crei
os projetos DALL, BLL e Unit Test conforme a imagem abaixo, e renome o projeto
principal para GerenciadorPedidosWebUI que será nosso projeto principal contendo as
classes do MVC (Model, View e Controllers.

29
No projeto GerenciadorPedidosWebUi vamos clicar com o botão direito do mouse na
pasta Model e criar todas as classes e suas propriedades do nosso projeto seguindo o
diagrama de classes. OBS: ao criar o projeto MVC, por padrão já é criado classes no
projeto, contudo vamos excluir essas classes que não serão utilizadas e criar somente
as classes que foram definidas no diagrama de classes. Na View deixaremos somente a
pasta Shared, que poderá ser usada posteriormente.

30
Agora faça o mesmo para as outras classe Pedido, Produto e Usuario

31
Dentro do projeto DALL vamos criar duas pastinhas Data.Base onde incluiremos nosso
modelo de dados, e Interface onde nela possuirá as interfaces de nossas classes .
DataBase
Interface

32
Botão direito em cima do projeto GerenciadorPedidosDALL -> Add -> Class e crie todas
as classes que será usada em nosso projeto conforme a imagem abaixo, e mantenham a
extensão do nome para melhor padronização e organização.

33
Dentro da pasta Interface crie as principais classes, as mesma criada no projeto DALL, ao
invés de selecionarmos Class selecione Interface conforme a imagem abaixo e faça para
o restante.

34
Para adicionar as referências clique com o botão direito do mouse em
References – Add e selecione a referencia do projeto web.
Conforme a imagem abaixo criamos os métodos desta interface o CRUD e como
parâmetro passamos a classe e o objeto. É necessário add nas referência o projeto web
onde contém a classe de modelo. Faça o mesmo para as outras interfaces.

35
Após criado a interface da classe agora o próximo passo é criar as classes na DALL, para
que a classe Cliente possa herdar os métodos da ICliente. O procedimento será o
mesmo para as outras classes, não esqueça de incluir a namespace da model

Considerações
Agora que foram criadas as classes cliente nas camadas, faça o restante para:
Pedido, Produto e Usuário.
Agora podemos entender como a UML funciona e como ela faz diferença na
modelagem de um sistema, embora muitas pessoas não a utilizem, eu a
recomendo, pois antes de começarmos a desenvolver um software precisamos
colocar no papel o que devemos fazer para que quando chegarmos na parte da
codificação não teremos tantos erros e saberemos o que exatamente devemos
fazer.
Resolvi fazer este artigo pois, no inicio da minha carreira acadêmica sempre tive
vontade de criar algo mas não sabia como começar, e não tinha achado nada
na internet que pudesse me orientar de alguma forma como modelar. Por isso
espero que gostem desse artigo e espero também que possa ajuda-los de
alguma forma a entender melhor sobre modelagem de sistemas e ajude a criar
seus projetos de uma forma simplifica.
36

Sobre
Jéssica Nathany Carvalho Freitas
Graduada em Sistemas de Informação
Trabalho atualmente como programadora .NET
GuitHub: https://github.com/JNathany
Email: jessicanathany.web@gmail.com
Site: www.jncoder.com.br
37