Modelo C4

PARA DOCUMENTAÇÃO DE ARQUITETURAS

https://c4model.com/
"Peça a um desenvolvedor de software para comunicar a
arquitetura de um software usando diagramas e você
provavelmente obterá uma confusão de caixas e
linhas ...notação inconsistente (codificação por cores,
formas, estilos de linha etc), nomenclatura ambígua, relações
não rotuladas, terminologia genérica, opções de tecnologia
ausentes, abstrações mistas etc. "
https://c4model.com/
 Sistema de Gerenciamento de Inscrições para Prova Online (SIPO)

Ficha de Inscrição – Web

Ambiente de Gerenciamento
Deve possuir um formulário para
entrada de dados do candidato, os
Deve possuir os recursos ligados a configuração do formulário,
quais serão armazenados em um banco
de dados.
gerenciamento e aprovação dos dados das inscrições.
Cada inscrição deve conter os seus
documentos obrigatórios em anexo,
os quais devem ser armazenados em
um repositório de arquivos em cloud. Log e Monitoramento

Deve existir recurso para armazenamento de log e

informações de monitoramento em tempo real.
Ficha de Inscrição – Mobile

Deve existir uma versão mobile com todas

as funcionalidades da versão web.
 O que é o Modelo C4 ?

É uma maneira simples de comunicar a arquitetura de um software em diferentes

níveis de abstração, para que você possa contar histórias diferentes para diferentes
públicos.

É também uma maneira de introduzir (muitas vezes, reintroduzir) algum rigor e

modelagem leve para as equipes de desenvolvimento de software.

C4 PlantUML

• Linguagem simples;
• Versionamento;
• Demonstração gráfica de forma automática;
Níveis de Visão
 Abstrações

Pessoa S istema Contêineres Componente

Representa um papel, uma Descreve algo que agrega Contêineres são artefatos do É um agrupamento de
persona, atores valor aos usuários, sejam eles sistema que hospedam dados funcionalidades relacionadas
etc. humanos ou não. ou código executável. encapsuladas por trás de uma
interface bem definida.
 Nível 1: Contexto
A ideia é mostrar as interações de forma macro, sem muitos detalhes, dando
enfoque às comunicações e dependências entre sistemas e usuários que
compõem e interagem com o software.

É um diagrama que pode (e deve) ser consumido por todas as “personas” do

projeto, tanto técnico quanto de negócio, e que interagem direta ou
indiretamente com o sistema.
 Nível 2: Container
Este nível mostra o sistema com mais detalhes, descrevendo os seus
containers (não confundir com o Docker) e como eles se
comunicam/interagem.

Nesse nível, é dada ênfase à arquitetura e tecnologias utilizadas.

A ideia é mostrar como o sistema é (ou será) construído de forma macro.

Um container pode ser uma aplicação web, um database, um sistema de
arquivos, entre outros.

É um diagrama a ser consumido pela equipe técnica, que interage direta

ou indiretamente com o sistema (profissionais de desenvolvimento,
suporte etc).
 Nível 3: Componente
Neste nível, aparecem informações sobre as interações, responsabilidades
e tecnologias utilizadas de maneira mais detalhada que nos níveis
anteriores.

Um sistema, provavelmente, terá mais de um diagrama de componente.

É um diagrama a ser consumido pela equipe técnica de desenvolvimento,

que é recomendado somente em casos que geraram valor para equipe e
que haja um comprometimento para mantê-lo.
 Nível 4: Código
No último nível, o C4-model mostra – a nível de código – como cada
componente é implementado e, para isso, usa o diagrama de classes do UML.

De modo geral, este nível de detalhe não é recomendado e, por isso, é uma
visão opcional mesmo. Além disso, atualmente existem várias ferramentas que
geram esse tipo de diagrama de forma automática.
 Ferramentas

Interface Web:

• Plantuml: http://www.plantuml.com/plantuml/uml

• Visual Paradigm Online:

https://online.visual-paradigm.com/app/diagrams/#diagram:proj=0&type=C4Model&gallery=/re
pository/00af6def-9277-405f-9cdc-1a12d80f66e2.xml&name=C4%20Model

Visual Studio Code - Plugin:

• PlantUML: https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml
@startuml SIPO
!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FA5 https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
!include DEVICONS/postgresql.puml
!include DEVICONS/aws.puml
!include FA5/mobile_alt.puml

title Diagrama de contêiner do @startuml SIPO

!include https://raw.githubusercontent.com/plantuml-stdlib/C4-PlantUML/master/C4_Container.puml
!define DEVICONS https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/devicons
!define FA5 https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/master/font-awesome-5
!include DEVICONS/postgresql.puml
!include DEVICONS/aws.puml
!include FA5/mobile_alt.puml
!define CLOUDOGUURL https://raw.githubusercontent.com/cloudogu/plantuml-cloudogu-sprites/master
!includeurl CLOUDOGUURL/tools/prometheus.puml
!includeurl CLOUDOGUURL/tools/grafana.puml
!includeurl CLOUDOGUURL/tools/elastic.puml
!define ICONURL https://raw.githubusercontent.com/tupadr3/plantuml-icon-font-sprites/v2.4.0
!include ICONURL/devicons/dotnet.puml
!include ICONURL/devicons/javascript.puml
!include ICONURL/devicons/redis.puml

title Diagrama de contêineres do Sistema de Gerenciamento de Inscrições para Prova Online (SIPO)

SHOW_PERSON_PORTRAIT()
LAYOUT_LEFT_RIGHT()

AddRelTag("async", $lineStyle = DashedLine())

Person(candidato, "Candidato", "Pessoa que realiza inscrição no portal institucional.")
Person(funcionario, "Funcionário NAPS", "Pessoa que configura conteúdo para o portal institucional.")
System_Boundary(sipo, "Sistema de Gerenciamento de Inscrições para Prova Online (SIPO)"){
Container(api, "servico-inscricao", "ASP.NET Core 6, C#", "Api responsável pelos fluxos ligados a candidatos e configurações.", $sprite="dotnet")
Container(portal, "servico-gerenciamento-frontend", "Vue JS, Typescript", "Interface para cadastro, consulta e edição de parâmetros.", $sprite = "javascript")
Container(web, "servico-inscricao-frontend", "Vue JS, Typescript", "Interface para entrada de candidatos.", $sprite = "javascript")
ContainerDb(db, "Banco de dados", "PostgresSQL", "Armazena configurações de entradas e informações de candidatos.", $sprite="postgresql")
Container(mobile, "servico-mobile-frontend", "Android / IOS", "Interface mobile para entrada de candidatos.", $sprite="mobile_alt")
ContainerQueue(queue, "servico-processamento-fila", "SQS", "Broker de mensagem com dados de documentos e candidatos para serem processados.")
Rel(api, db, "Lê e escreve em", "PostgreSQL protocol")
Container(worker, "servico-documento-worker", "C#", "Processa documentos e dados de candidatos.", $sprite="dotnet")
Rel(api, queue, "Publica mensagems em", $tags = "async")
Rel_U(worker, queue, "Lê e publica mensagens em", $tags = "async")
Rel_U(worker, db, "Lê e escreve em", "PostgreSQL protocol", $tags = "async")
}
Rel(candidato, web, "Realiza inscrição em", "HTTPS")
Rel(candidato, mobile, "Realiza inscrição em", "HTTPS")
Rel(web, api, "Processa inscrição em", "HTTPS")
Rel(mobile, api, "Processa inscrição em", "HTTPS")
Rel(funcionario, portal, "Realiza configurações em", "HTTPS")
Rel(portal, api, "Processa configurações em", "HTTPS")

System_Ext(files, "SmartShare (GED)", "Armazenamento de documentos")

Rel(worker, files, "Armazena documentos em", "HTTPS")

@enduml