versão carregada: quinta, 30 de março de 2023

Diagramas para analistas desenvolvedores web

engineer 4941330 19201

A profissão de analista desenvolvedor requer do profissional uma série de técnicas e habilidades, dentre elas a interpretação de diagramas de software e pelo menos uma compreensão em alto nível sobre comunicação dos componentes. Tais diagramas seguem padrões de formatação global, como a UML, mas é plausível utilizar adaptações com propósito de facilitar o entendimento. Tentei exemplificar alguns dos diagramas mais recorrentes nas rotinas de desenvolvimento (com foco na web) junto a informações úteis:


Lista de diagramas abordados

  1. Fluxo de processo
  2. Casos de uso
  3. Diagramas de sequência (DSS) ou diagrama de interação (UML)
  4. Diagramas Entidade-Relacionamento
  5. Diagramas Modelo-Entidade-Relacionamento (M.E.R)
  6. Diagramas de arquitetura web (MVC)
  7. Diagramas de implementação de software
  8. Diagramas de Infraestrutura de Rede
  9. Diagrama de estados de transição

1. Fluxo de processo

Diagrama de Fluxo de processo
Figura 1 – Fluxo de um processo de matrícula de aluno
Temos que, de forma paralela, múltiplos agentes, com múltiplas atividades, estão envolvidos no processo de matrícula de um aluno. Cada agente é visualizado em sua própria báia, de forma que suas respectivas atividades e decisões sejam identificadas, assim como o tipo de atividade até que se alcance o final do fluxo.

2. Casos de uso

Casos de uso de um sistema de cobranças

 

Figura 2 – Casos de uso de um sistema de cobranças – Fonte: MSDN

Diagramas de casos de uso são diagramas de fácil criação e entendimento. Agentes são representados por “bonecos” e as atividades representados por balões. DCUs representam as interações possíveis entre pessoas e o sistema em questão.

3. Diagramas de sequência (DSS) ou diagrama de interação (UML)

Diagramas de sequência (DSS) ou diagrama de interação (UML)
Fonte: MSDN
A partir do DSS, é possível compreender a pilha de chamadas internas de funções do sistema. Quais os nomes das funções, a assinatura (parâmetros de entrada), chamadas dessa função e o retorno. É um diagrama que permite identificar chamadas extras que podem ser eliminadas, resultando na criação de funções menores, mais fáceis de modificar e reutilizar.

4. Diagramas Entidade-Relacionamento (E.R.)

Diagrama E.R.

5. Diagramas Modelo-Entidade-Relacionamento (M.E.R)

Diagrama M.E.R.

O processo de desenvolvimento inclui refatoração constante das estruturas de dados. A preocupação nos MER é entender quais relações entre objetos do sistema existem, e se essas são de um para muitos ou muitos para muitos.

Extra: as chamadas “Migrations” são classes em arquivo que podem ser executadas para recriar toda a estrutura do banco de dados e inclusive preencher com dados de teste.

6. Diagramas de Arquitetura Web (MVC)

Diagramas de arquitetura web

 

Autor: Fernando Montoan

 

Diagramas MVC são úteis em momentos onde profissionais trabalhando em aplicações inovadoras precisam encontrar o modelo ideal para a arquitetura da aplicação. Nem sempre o MVC é útil, por exemplo, quando se deseja criar apenas um serviço de API, que não utiliza a camada View. Também não são úteis Modelo e Controlador, no caso da criação de uma aplicação SPA que apenas consome dados de serviços externos.

7. Diagramas de implementação de software

Diagramas de implementação de software

 

Fonte: Lucidchart

Um diagrama de visão de alto nível sobre componentes de software, que na prática serve ao propósito de qualquer tipo de aplicação, seja embarcada, puramente web, nativa mobile, híbrida, desktop, sistema operacional e até mesmo baixo nível em linguagem de máquina.

8. Diagramas de Infraestrutura de Rede

Diagramas de Infraestrutura de Rede

Fonte: Guia do Hardware

Diagrama útil para explicar a novos integrantes de equipe, por exemplo, como está arquitetados serviços cloud e quais são e como se relacionam as APIs.

9. Diagrama de estados de transição

Diagrama de estados de transição

A finalidade do diagrama de estados de transição é mapear os eventos. Isso contribui na elaboração do projetos por facilitar a identificação de objetos e suas interações.


Estes são os principais diagramas encontrados na rotina do desenvolvimento web. Diagramas tornam um projeto mais claro para uma equipe, facilitam mudanças e a divisão de tarefas. Há uma diversidade de ferramentas pagas e gratuitas para criar diagramas e tornar seus projetos mais profissionais.

Diagrama útil especialmente em casos com muitas condicionais (if-elses) onde se torna muito complexo testar “de cabeça” os possíveis comportamentos em uma operação.

Recomendo o yEd Graph Editor para criação de todos esses diagramas.

Quer saber mais sobre como funciona? Fale com um desenvolvedor agora mesmo!
Este artigo foi lido 7560+ vezes. Obrigado por ler até aqui! Fique à vontade pra copiar e compartilhar. Ajude sempre seus colegas. O conhecimento muda vidas!

O conteudo foi útil? Isso é ótimo. Quer incentivar mais posts como esse? Mostre seu apoio com qualquer valor.
Chave PIX: d0311e58-cb6e-4d47-b3d8-3d4254763ce7

Inscrever-se
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments