Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • W wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 0
    • Issues 0
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Rede De Mentores
  • wiki
  • Wiki
  • arquitetura

Last edited by Alexandre Scheer Bing Jul 03, 2020
Page history
This is an old version of this page. You can view the most recent version or browse the history.

arquitetura

Arquitetura

Foi escolhido o modelo C4 de documentação para arquitetura de software. Esse modelo consiste em um conjunto hierárquico de diagramas de arquitetura de software para contexto, containers, componentes e código.

A hierarquia dos diagramas C4 fornece diferentes níveis de abstração e cada um deles é relevante para um público alvo.

O motivo da escolha desse modelo é devido a sua facilidade de desenvolvimento e entendimento pelas partes envolvidas.

Nível 1 - Diagrama de Contexto do Sistema

O diagrama de contexto mostra o sistema que está sendo construído. No diagrama, todos os usuários fazem uso de uma mesma aplicação, sendo seu fluxo de execução distinguido internamente. A aplicação por sua vez faz as requisições para a API.

Screen_Shot_2020-07-03_at_12.03.14 Figura 1: Diagrama de contexto

Nível 2 - Diagrama de Container

O diagrama de container amplia o sistema de software e mostra os containers (aplicativos, armazenamentos de dados, serviços, etc.) que compõem esse sistema de software. Aqui já é possível ver algumas decisões de tecnologias, decisões de arquitetura e a comunicação entre os serviços.

Diagrama_de_Conteiner Figura 2: Diagrama de container

Nível 3 - Diagrama de Componentes

O diagrama de componentes amplia um container individual para mostrar os componentes dentro dele.

A seguir, na figura 4, é apresentado um exemplo da arquitetura interna do aplicativo e onde ocorre a comunicação com o servidor. Na figura 5 é a arquitetura do servidor (API) e sua comunicação com o banco de dados e o retorno para o cliente.

Screen_Shot_2020-07-03_at_12.26.07 Figura 3: Diagrama de componente: comunicação API, banco de dados e aplicativo

Diagrama_de_Contexto_1_ Figura 4: Diagrama de componente: comunicação API, banco de dados e aplicação

Nível 4 - Código e Padrões de Arquitetura

O último nível é o 4. Aqui a arquitetura é detalhada a nível de código e implementação. O padrão de arquitetura utilizada foi o de cliente-servidor em conjunto com a arquitetura REST para a construção da api e a integração com o frontend.

O modelo de cliente-servidor é uma estrutura de aplicação distribuída que distribui as tarefas e cargas de trabalho entre os fornecedores de um recurso ou serviço, designados como servidores, e os requerentes dos serviços, designados como clientes.

O objetivo desta divisão é separar a arquitetura e responsabilidades em dois ambientes. Assim, o cliente (consumidor do serviço) não se preocupa com tarefas do tipo: comunicação com banco de dados, gerenciamento de cache, log, etc. E o contrário também é válido, o servidor (provedor do serviço) não se preocupa com tarefas como: interface e experiência do usuário. Permitindo, assim, a evolução independente das duas arquiteturas.

A API, implementada em node.js, é a responsável por tratar os dados e fazer a conexão das informações entre a aplicação web (frontend) e o banco de dados. A organização foi pensada em três camadas: Routes, Controllers.

Diagrama Figura 5: Organização da API em Routes, Controllers

A camada de Routes é composta por todas as rotas da API que são expostas aos clientes para fazer a conexão via HTTP. A camada de Controller é a responsável pela lógica de negócio da aplicação. Toda rota definida em Router possui uma instância de Controller associada, responsável por sua lógica de negócio.

Para a aplicação web, implementada com o framework React, foi seguido o padrão de Component Based Architecture (Arquitetura Baseada em Componentes).

A organização foi pensada a partir do conceito de web components, onde cada "parte" da tela é um componente independente, customizável e que pode ser reutilizável em qualquer outra parte da aplicação. No exemplo a seguir, temos um exemplo da utilização de componentes no projeto representado como uma "árvore", tal qual a estrutura de dados.

arch_react Figura 6: Representação de web components

Este tipo de arquitetura encapsula partes individuais de uma interface (componentes) em sistemas independentes e auto-sustentáveis. Para o uso dessa arquitetura, os componentes precisam:

  • Ser independentes;
  • Interagir com outros componentes no mesmo espaço, sem afetar ou ser afetado pelo outro;
  • Possuir sua própria estrutura, métodos e atributos;
  • Ser reutilizável em qualquer outro lugar da aplicação.
Clone repository
  • arquitetura
  • banco_dados
  • comandos git
  • configuracao
  • gp
  • Home
  • horarios
  • instalacao
  • mockups
  • requisitos
  • sprints