Skip to main content dev:Coelho

Engenharia De Software III - Diagramas De Implementação

Diagramas de Implementação na UML

Os Diagramas de Implementação são uma categoria da UML (Unified Modeling Language) que representam aspectos de implementação física dos sistemas, incluindo tanto a estrutura de componentes quanto a estrutura do sistema em tempo de execução. Estes diagramas são fundamentais para visualizar a organização dos artefatos físicos que compõem o software.

Categorização dos Diagramas de Implementação

Na UML, os diagramas de implementação são expressos em duas formas principais:

  1. Diagrama de Componentes: Foca nos elementos modulares do software
  2. Diagrama de Implantação: Representa a disposição física dos componentes em hardware

Diagrama de Componentes

Definição e Propósito

O Diagrama de Componentes especifica um conjunto de construções utilizadas para definir sistemas de software, identificando componentes como unidades modulares com interfaces bem definidas e substituíveis dentro de seu ambiente.

O objetivo do diagrama de componentes é mostrar “caixas pretas” que especificam suas interfaces, permitindo que outros componentes acessem seus serviços sem conhecer seu conteúdo interno.

Principais características:

  • Apresenta uma visão estática da implementação do sistema
  • Está fortemente associado à linguagem de programação escolhida
  • Identifica os arquivos que comporão o software em termos de módulos, bibliotecas, formulários e outros elementos estruturais
  • Determina os relacionamentos entre os diversos componentes

Representação Gráfica de Componentes

Cada arquivo que compõe o sistema pode ser considerado um componente, sendo representado por um retângulo principal contendo o nome do módulo, com dois retângulos menores sobressaindo-se à sua esquerda.

Estereótipos de Componentes

Os estereótipos são fundamentais para especificar o tipo de cada componente:

  1. Executável (<<executable>>): Determina que o componente é um arquivo compilado, pronto para executar um conjunto de instruções

  2. Biblioteca (<<library>>): Refere-se a bibliotecas contendo funções e sub-rotinas compartilháveis entre diversos componentes executáveis, podendo ser fornecidas pela linguagem ou por desenvolvedores

  3. Tabela (<<table>>): Identifica repositórios físicos de dados onde os registros produzidos pelo sistema serão armazenados

  4. Documento (<<document>>): Referencia arquivos de texto utilizados pelo sistema, como arquivos de ajuda (help)

  5. Arquivo (<<file>>): Designa qualquer outro arquivo que componha o sistema, como código-fonte dos módulos

Relacionamentos entre Componentes

Dependência

Um componente pode utilizar serviços ou depender de outros componentes do sistema. Esta relação é representada através do relacionamento de dependência, indicado por uma seta pontilhada apontando do componente dependente para o componente do qual depende.

Exemplo Componentes

Diagrama de Implantação

Definição e Propósito

O Diagrama de Implantação representa a visão mais física da UML, enfocando a organização e a estrutura física na qual o software será implantado.

Características principais:

  • Mostra a disposição dos equipamentos conectados através de protocolos de comunicação
  • Torna-se necessário apenas quando o sistema modelado será executado em múltiplas máquinas
  • Não é requisitado quando o projeto se destina a apenas um equipamento

Elementos Fundamentais

Nós

Os nós são componentes básicos do diagrama de implantação, representando máquinas onde um ou mais módulos do sistema serão executados. São representados graficamente por um cubo contendo o nome do elemento que representa.

Associações

As associações representam ligações físicas que possibilitam a troca de informações entre nós. São indicadas por retas conectando um nó a outro, frequentemente acompanhadas de estereótipos que especificam o tipo de conexão (como <<HTTP>>, <<TCP/IP>>, entre outros).

Exemplo diagrama de Implantação

Combinação com Diagramas de Componentes

Os diagramas de implantação e de componentes podem ser combinados, permitindo a modelagem integrada dos aspectos físicos e lógicos do sistema. É comum identificar os componentes que são executados por cada nó, criando uma visão completa da arquitetura física do sistema.

Implementação Prática com Astah

Para criar diagramas de implementação utilizando a ferramenta Astah, recomenda-se seguir uma abordagem metódica:

  1. Criar uma pasta específica para o diagrama no projeto
  2. Adicionar o diagrama de componentes ou implantação conforme necessário
  3. Para diagramas de componentes:
    • Desenhar os componentes com seus estereótipos adequados
    • Estabelecer as dependências entre componentes
    • Representar interfaces quando aplicável
  4. Para diagramas de implantação:
    • Criar os nós que representam as máquinas físicas
    • Estabelecer as associações entre nós, adicionando estereótipos de protocolos
    • Quando apropriado, adicionar componentes dentro dos nós

Aplicações Práticas

Os diagramas de implementação são particularmente úteis em cenários como:

  • Sistemas distribuídos com múltiplos servidores e clientes
  • Aplicações com arquitetura cliente-servidor
  • Sistemas que utilizam diferentes tecnologias e plataformas
  • Software que requer implantação em ambientes complexos de hardware

Considerações Finais

Os diagramas de implementação fornecem uma visão essencial dos aspectos físicos da arquitetura de software, complementando outros diagramas da UML que focam em aspectos comportamentais ou estruturais em nível conceitual. Eles constituem uma ponte importante entre o design lógico do sistema e sua implementação física.

Exercício

plantuml code snippet start

@startuml
title Diagrama de Implantação - Aplicação Web de Auto-Peças

node "Cliente_Browser\n<<Client>>" as browser {
  artifact "<<file>> home.html" as staticPage
  interface "Interface de Usuário" as interface
  artifact "<<file>> Menu de Acesso" as menu
  artifact "<<file>> banner.vdo" as banner
  artifact "<<document>> ajuda.txt" as help

  interface -- menu : <<realization>>
  staticPage ..> interface : <<dependency>>
  staticPage ..> banner : <<dependency>>
  staticPage ..> help : <<dependency>>
}

node "Servidor_Web\n<<Server>>" as server {
  artifact "<<table>> dados.mdf" as database
  artifact "<<file>> estilo.css" as css
  artifact "<<executable>> pagina.php" as phpPage

  phpPage ..> database : <<dependency>>
  staticPage ..> css : <<dependency>>
  phpPage ..> css : <<dependency>>
}

browser -- server : <<HTTP>>

@enduml

plantuml code snippet end

Exercicio1

plantuml code snippet start

@startuml
title Diagrama de Componentes - Sistema de Auto-Peças

package "Aplicação Web" {
  [<<file>> home.html] as home
  [<<document>> ajuda.txt] as ajuda
  [<<file>> banner.vdo] as banner
  [<<file>> estilo.css] as css
  [<<executable>> pagina.php] as php
  [<<table>> dados.mdf] as dados

  interface "Menu" as menuInterface

  home ..> css : <<dependency>>
  home ..> ajuda : <<dependency>>
  home ..> banner : <<dependency>>

  php ..> dados : <<dependency>>

  home -- menuInterface : <<realization>>
}

@enduml

plantuml code snippet end

Exercicio2

plantuml code snippet start

@startuml
title Diagrama de Implantação - Ecossistema do Aplicativo Mobile Fatec

' Configurações visuais
skinparam backgroundColor white
skinparam nodeBorderColor #666666
skinparam componentBorderColor #333333
skinparam arrowColor #333333
skinparam stereotypeCBackgroundColor LightBlue
skinparam noteBackgroundColor LightYellow
skinparam noteBorderColor #999999

' Definição de estilos customizados
skinparam node {
  BackgroundColor #F0F8FF
  FontName Arial
  FontSize 12
}

skinparam component {
  BackgroundColor #F5F5F5
  FontName Arial
  FontSize 11
}

' Dispositivo do Usuário
node "<<Device>> Dispositivo Móvel do Usuário" as mobileDevice {
  node "<<OS>> Sistema Operacional Mobile" as mobileOS {
    component "<<Mobile App>> Aplicativo Fatec" as fatecApp {
      component "<<UI>> Interface de Usuário" as userInterface
      component "<<Business>> Regras de Negócio" as businessLogic
      component "<<Persistence>> Armazenamento Local" as localStorage
      component "<<Service>> Gerenciador de Rede" as networkManager
      component "<<Service>> Gerenciador de Notificações" as notificationManager

      userInterface --> businessLogic
      businessLogic --> localStorage
      businessLogic --> networkManager
      businessLogic --> notificationManager
    }
  }
}

' Infraestrutura da Fatec em Nuvem
cloud "Infraestrutura Fatec em Nuvem" as fatecCloud {
  node "<<Server>> Servidor de Aplicações Fatec" as appServer {
    component "<<WebService>> API Fatec" as fatecAPI {
      component "<<Controller>> Controladores REST" as restControllers
      component "<<Service>> Serviços de Negócio" as businessServices
      component "<<DAO>> Camada de Acesso a Dados" as dataAccess

      restControllers --> businessServices
      businessServices --> dataAccess
    }

    component "<<Service>> Serviço de Autenticação" as authService
    component "<<Service>> Gerenciador de Sessões" as sessionManager

    restControllers --> authService
    restControllers --> sessionManager
  }

  node "<<Database Server>> Servidor de Banco de Dados" as dbServer {
    database "<<Cloud Database>> Banco de Dados Fatec" as fatecDB {
      [Tabela Alunos] as tblStudents
      [Tabela Professores] as tblTeachers
      [Tabela Disciplinas] as tblSubjects
      [Tabela Notas] as tblGrades
      [Tabela Aulas] as tblClasses
      [Tabela Calendário] as tblCalendar
    }
  }

  node "<<Server>> Servidor de Arquivos" as fileServer {
    component "<<Storage>> Repositório de Documentos" as documentRepo
    component "<<Storage>> Repositório de Material Didático" as learningMaterialRepo
  }
}

' Serviços Externos
cloud "Serviços Externos" as externalServices {
  node "<<Server>> Serviços de Terceiros" as thirdPartyServices {
    component "<<WebService>> API de Previsão do Tempo" as weatherAPI
    component "<<WebService>> Serviço de Mapas" as mapService
    component "<<WebService>> Gateway de Pagamentos" as paymentGateway
    component "<<WebService>> Serviço de E-mail" as emailService
  }
}

' Infraestrutura de Segurança
node "<<Security>> Camada de Segurança" as securityLayer {
  component "<<Firewall>> Firewall de Aplicação" as appFirewall
  component "<<Service>> Gateway de API" as apiGateway
  component "<<Service>> Serviço de Monitoramento" as monitoringService

  appFirewall --> apiGateway
  apiGateway --> monitoringService
}

' Ambiente de Administração
node "<<Management>> Sistema de Administração" as adminSystem {
  component "<<WebApp>> Painel Administrativo" as adminPanel
  component "<<Service>> Serviço de Relatórios" as reportService
  component "<<Service>> Gerenciador de Configurações" as configManager

  adminPanel --> reportService
  adminPanel --> configManager
}

' Conexões entre os principais nós
mobileDevice -- fatecCloud : "<<Protocol>> HTTPS"
mobileDevice -- externalServices : "<<Protocol>> HTTPS"
fatecCloud -- externalServices : "<<Protocol>> HTTPS"
securityLayer -- fatecCloud : "<<Protocol>> TLS 1.3"
adminSystem -- fatecCloud : "<<Protocol>> HTTPS"

' Conexões detalhadas entre componentes
networkManager ..> fatecAPI : "<<Consume>> REST API (JSON/HTTPS)"
networkManager ..> weatherAPI : "<<Consume>> REST API (JSON/HTTPS)"
networkManager ..> mapService : "<<Consume>> REST API (JSON/HTTPS)"
dataAccess ..> fatecDB : "<<Access>> JPA/JDBC"
businessServices ..> documentRepo : "<<Access>> S3 API"
businessServices ..> learningMaterialRepo : "<<Access>> S3 API"
fatecAPI ..> emailService : "<<Use>> SMTP"
fatecAPI ..> paymentGateway : "<<Integrate>> REST API (JSON/HTTPS)"

' Notas explicativas
note right of fatecApp
  Aplicativo disponível para iOS e Android
  com funcionalidades online e offline
end note

note right of fatecAPI
  API RESTful que fornece endpoints para
  todas as funcionalidades acadêmicas
end note

note bottom of weatherAPI
  Integração com OpenWeatherMap API
  para informações meteorológicas locais
end note

note bottom of fatecDB
  Sistema de banco de dados relacional
  com replicação e backup automático
end note

note right of securityLayer
  Implementa OAuth 2.0, rate limiting,
  e detecção de intrusões
end note

@enduml

plantuml code snippet end

App Fatec

Engenharia de Software III - Aula 04 Engenharia de Software III - Aula 03