24 de março
Alta procura
2135 visualizações

Diagramas para analistas desenvolvedores web

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:


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.

Complementar, contribuir, comentar!

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *


Um pouco sobre o autor

Matteus Barbosa - Desenvolvedor Web
                               
Trabalho como Desenvolvedor web desde 2013 e atualmente faço parte do quadro da Symplicity. Também atuo em projetos como profissional autônomo. Para saber da minha experiência, acesse meu Currículo, meu Portfólio, a relação de Referências de Clientes ou ainda a Lista de Serviços. As propostas de serviço são iniciadas com conversas informais, seguidas da coleta de requisitos, elaboração do cronograma e por fim a proposta de orçamento. Todas as etapas são acompanhados de perto via ferramenta online e videoconferências. Os pagamentos são registrados com entrega de notas fiscais. Presto serviços de projeto, desenvolvimento e manutenção de sistemas baseados nos mais diversos frameworks.