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

arquitetura · Changes

Page history
Update arquitetura authored Jul 03, 2020 by Alexandre Scheer Bing's avatar Alexandre Scheer Bing
Hide whitespace changes
Inline Side-by-side
arquitetura.md
View page @ 10eb03c0
...@@ -10,6 +10,7 @@ O motivo da escolha desse modelo é devido a sua facilidade de desenvolvimento e ...@@ -10,6 +10,7 @@ O motivo da escolha desse modelo é devido a sua facilidade de desenvolvimento e
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. 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](uploads/90e59a27015623fbf51b355edd42d9f1/Screen_Shot_2020-07-03_at_12.03.14.png) ![Screen_Shot_2020-07-03_at_12.03.14](uploads/90e59a27015623fbf51b355edd42d9f1/Screen_Shot_2020-07-03_at_12.03.14.png)
Figura 1: Diagrama de contexto Figura 1: Diagrama de contexto
### Nível 2 - Diagrama de Container ### Nível 2 - Diagrama de Container
...@@ -18,6 +19,7 @@ Aqui já é possível ver algumas decisões de tecnologias, decisões de arquite ...@@ -18,6 +19,7 @@ Aqui já é possível ver algumas decisões de tecnologias, decisões de arquite
![Diagrama_de_Conteiner](uploads/e46226099380551bfd88acdb6c2f5574/Diagrama_de_Conteiner.png) ![Diagrama_de_Conteiner](uploads/e46226099380551bfd88acdb6c2f5574/Diagrama_de_Conteiner.png)
Figura 2: Diagrama de container Figura 2: Diagrama de container
### Nível 3 - Diagrama de Componentes ### Nível 3 - Diagrama de Componentes
...@@ -27,9 +29,11 @@ A seguir, na figura 4, é apresentado um exemplo da arquitetura interna do aplic ...@@ -27,9 +29,11 @@ A seguir, na figura 4, é apresentado um exemplo da arquitetura interna do aplic
Na figura 5 é a arquitetura do servidor (API) e sua comunicação com o banco de dados e o retorno para o cliente. 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](uploads/046135dfa46219e8a065ceb5034dc0c0/Screen_Shot_2020-07-03_at_12.26.07.png) ![Screen_Shot_2020-07-03_at_12.26.07](uploads/046135dfa46219e8a065ceb5034dc0c0/Screen_Shot_2020-07-03_at_12.26.07.png)
Figura 3: Diagrama de componente: comunicação API, banco de dados e aplicativo Figura 3: Diagrama de componente: comunicação API, banco de dados e aplicativo
![Diagrama_de_Contexto_1_](uploads/368a0223c858b969b10080d3d0da29a3/Diagrama_de_Contexto_1_.png) ![Diagrama_de_Contexto_1_](uploads/368a0223c858b969b10080d3d0da29a3/Diagrama_de_Contexto_1_.png)
Figura 4: Diagrama de componente: comunicação API, banco de dados e aplicação Figura 4: Diagrama de componente: comunicação API, banco de dados e aplicação
### Nível 4 - Código e Padrões de Arquitetura ### Nível 4 - Código e Padrões de Arquitetura
...@@ -45,6 +49,7 @@ O objetivo desta divisão é separar a arquitetura e responsabilidades em dois a ...@@ -45,6 +49,7 @@ O objetivo desta divisão é separar a arquitetura e responsabilidades em dois a
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. 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](uploads/5429f0394c94134ddfd65b3f5695c61e/Diagrama.png) ![Diagrama](uploads/5429f0394c94134ddfd65b3f5695c61e/Diagrama.png)
Figura 5: Organização da API em Routes, Controllers 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. 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.
...@@ -54,6 +59,7 @@ Para a aplicação web, implementada com o framework React, foi seguido o padrã ...@@ -54,6 +59,7 @@ Para a aplicação web, implementada com o framework React, foi seguido o padrã
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. 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](uploads/3627cd037e2154eba21c1f82e68dc23e/arch_react.png) ![arch_react](uploads/3627cd037e2154eba21c1f82e68dc23e/arch_react.png)
Figura 6: Representação de web components 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. Este tipo de arquitetura encapsula partes individuais de uma interface (componentes) em sistemas independentes e auto-sustentáveis.
......
Clone repository
  • arquitetura
  • banco_dados
  • comandos git
  • configuracao
  • gp
  • Home
  • horarios
  • instalacao
  • mockups
  • requisitos
  • sprints